/* The about page's own rules from prototype/about.html. */
/* about */
.ahero { display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:end; min-height:94vh; padding-top:130px !important; padding-bottom:0 !important; overflow-x:clip; }
.ahero .acol { padding-bottom:90px; }
.ahero h1 { font-size:clamp(40px,4.8vw,76px); line-height:1; }
.ahero .clead { margin-top:24px; }
.apic { position:relative; height:min(700px, 80vh); }
.apic .sky { position:absolute; left:-8%; right:-8%; bottom:44px; aspect-ratio:430/124; background:var(--art) center bottom / contain no-repeat; opacity:.9; }
/* Batumi in lines behind the portrait */
:root[data-theme="light"] .apic .sky { background-image:var(--artl); }
.apic img { position:absolute; left:50%; bottom:0; translate:-50% 0; height:100%; max-width:100%; object-fit:contain; object-position:bottom; filter:drop-shadow(0 0 30px var(--halo)); }
.apic .cap { position:absolute; right:0; bottom:4px; padding:8px 14px; border-radius:999px; background:var(--drawer); border:1px solid rgb(var(--edge) / .14); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.astory { display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:start; }
.pull { margin:0; font-family:var(--display); font-size:clamp(28px,3vw,42px); line-height:1.12; }
.pull cite { display:block; margin-top:18px; font-style:normal; }
.astory .txt { display:grid; gap:18px; font-size:18px; }
.tl { list-style:none; margin:80px 0 0; padding:0; display:grid; grid-template-columns:repeat(6,1fr); gap:20px; position:relative; }
.tl::before { content:''; position:absolute; left:0; right:0; top:9px; height:2px; background:linear-gradient(90deg, var(--blue), var(--teal)); transform-origin:0 50%; transform:scaleX(0); transition: transform 1.6s var(--out); }
.tl.in::before { transform:scaleX(1); }
.tl li { position:relative; padding-top:34px; opacity:0; transform:translateY(16px); transition: opacity .6s, transform .8s var(--out); }
.tl.in li { opacity:1; transform:none; }
.tl li::before { content:''; position:absolute; left:0; top:2px; width:16px; height:16px; border-radius:50%; background:var(--bg); border:2px solid var(--blue); box-shadow:0 0 14px rgba(143,156,255,.6); }
.tl li:last-child::before { background:var(--teal); border-color:var(--teal); box-shadow:0 0 18px rgba(0,214,180,.7); }
.tl .y { display:block; font-family:var(--display); font-size:30px; line-height:1; }
.tl b { display:block; margin:10px 0 6px; }
.tl p { font-size:14px; }
.prin { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.prin > div { padding:22px; }
.prin .n { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--teal); }
.prin h3 { font-size:21px; margin:10px 0 8px; }
.prin p { font-size:15px; }
.nums { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.nums > div { padding:22px; }
.nums b { display:block; font-family:var(--display); font-weight:400; font-size:clamp(34px,3.4vw,50px); line-height:1; color:var(--blue); white-space:nowrap; }
.nums span { display:block; margin-top:10px; font-size:14px; opacity:.8; }
.co { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; padding:34px; border-radius:24px; }
.co p { font-size:18px; margin-bottom:22px; }
.co dl { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; }
.co dd { margin:6px 0 0; font-size:17px; font-weight:600; }
@media (max-width:1100px) {
  .nums { grid-template-columns:repeat(3,1fr); }
  .tl { grid-template-columns:repeat(3,1fr); row-gap:40px; }
  .tl::before { display:none; }
}

@media (max-width:900px) {
  .ahero { grid-template-columns:1fr; min-height:auto; }
  .ahero .acol { padding-bottom:10px; }
  .apic { height:440px; }
  .astory, .co { grid-template-columns:1fr; gap:30px; }
  .prin { grid-template-columns:1fr 1fr; }
}

@media (max-width:640px) {
  .ahero { padding-top:110px !important; }
  .nums, .prin, .tl { grid-template-columns:1fr; }
  .apic { height:380px; }
  .apic .cap { bottom:20px; right:auto; left:0; }
  .co { padding:24px; }
}

/* Added, not in the prototype. The timeline's points and line start hidden (above) and the script shows them (.in) once the list
   comes into view. Without the script (JavaScript off, the script blocked or failed) nothing would ever add .in and the six points
   would stay invisible, so the list hides only once pages.js has armed it (.armed); until then it stands drawn. The script arms it
   only while the list is still below the screen, with .still for that moment, so the points vanish at once instead of fading out. */
.tl:not(.armed)::before { transform:scaleX(1); }
.tl:not(.armed) li { opacity:1; transform:none; }
.tl.still::before, .tl.still li { transition:none; }
/* Added, not in the prototype. site.css draws the brief's fields as .in (padding, a border, a background, 80% opacity, 15 px type), and
   .in is also the class the script gives the timeline once it is in view: on the prototype the drawn timeline turned into a faint box
   at 80%, its first point on the box's rounded corner. The timeline takes none of the field's look, so it is the same with the script
   and without it. */
.tl.in { padding:0; border:0; border-radius:0; background:none; opacity:1; font-size:inherit; }
/* With reduced motion the timeline still appears when it comes into view, all at once: the line does not grow, the points do not rise. */
@media (prefers-reduced-motion: reduce) {
  .tl::before, .tl li { transition:none; }
}