/* /about -- "Our Mission".
   ==========================================================================
   Linked rather than inlined, on the same ask-the-body rule home5.css uses
   (views.go's shellHeadExtra): this file ships on exactly one route, so no
   other page pays for it.

   IT ASSUMES THE REV 5 TOKENS AND ADDS NO COLOURS OF ITS OWN. Every value
   below is a var() from uikit.Tokens, which is inlined into every page. That
   is not tidiness -- the About brief asked for readable text "u svim
   podrzanim temama", and a hex code written here would survive a theme change
   that every token-based rule follows automatically.

   CONTRAST, MEASURED AGAINST THE TWO PAGE GROUNDS (#F4F6F3 and #EDF1EE):
     --ink   #142126  >= 15:1   body prose, every heading, every table cell
     --ink-2 #52616A  ~ 6.4:1   eyebrows, captions, the metric labels
     --ink-3 #5F6D74  ~ 4.9:1   NOT USED HERE
   The brief is explicit that the important quotations and the "estimated
   energy" label must not be dimmed, so the third ink level and every opacity
   below 1 are absent from this file by design. Long prose sits on --ink-2
   nowhere: this page is read, not skimmed.
   ========================================================================== */

.ab-wrap{max-width:var(--w-public);margin:0 auto;
  padding-left:max(var(--gut),env(safe-area-inset-left));
  padding-right:max(var(--gut),env(safe-area-inset-right))}

.ab-eyebrow{font-size:var(--fs-xs);line-height:18px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 var(--s3)}

/* THE MEASURE IS SET ONCE, HERE. Everything that is a paragraph of prose on
   this page inherits a 68-character line; the brief's own rule is "under 80",
   and 68 is where this type size stops needing the reader to hunt for the next
   line. Elements that are deliberately wider (the table, the metric cards)
   override it rather than escape it. */
.ab-sec p,.ab-sec li,.ab-sec dd{max-width:68ch}

.ab-sec{padding:96px 0}
.ab-sec-alt{background:var(--sf-subtle)}
.ab-sec-h{max-width:760px;margin:0 0 var(--s7)}
.ab-sec-h h2{margin:0}
.ab-sec-h h2+.ab-lede{margin-top:var(--s4)}
/* SPECIFICITY, NOT PREFERENCE. `.ab-sec p` below is (0,1,1) and a bare
   `.ab-lede` is (0,1,0), so the generic paragraph rule silently won and the
   lede lost its top margin -- the exact class of bug home5.css's own notes
   warn about. Every override in this file that targets a <p> therefore carries
   an ancestor class. */
.ab-sec .ab-lede{font-size:var(--fs-body-lg);line-height:1.55;color:var(--ink);
  margin:var(--s4) 0 0}

/* Ordinary body copy inside a section. */
.ab-sec p{font-size:var(--fs-body);line-height:1.65;color:var(--ink);margin:0 0 var(--s4)}
.ab-sec p:last-child{margin-bottom:0}

/* A sentence the page wants read whole. Not a callout box, not a colour:
   weight and a little air, so it reads as emphasis inside the argument rather
   than as a pull-quote lifted out of it. */
.ab-claim{margin-top:var(--s5)!important}
.ab-claim strong{font-weight:600;color:var(--ink)}

/* ---------- The hero ------------------------------------------------------
   Centred, and the only H1 on the page. No panel, no image, no form: the
   sentence is the whole hero, which is what the brief's first screen is. */
.ab-hero{background:var(--page);padding:var(--s8) 0 var(--s5)}
.ab-hero-in{text-align:center}
.ab-hero .ab-eyebrow{margin:0 0 12px}
.ab-h1{font-family:var(--font-display);font-weight:600;font-size:var(--fs-display);
  line-height:1.06;letter-spacing:var(--ls-display);color:var(--ink);
  max-width:16ch;margin:0 auto;text-wrap:balance}
.ab-hero-line{font-family:var(--font-display);font-weight:600;
  font-size:clamp(20px,2.2vw,26px);line-height:1.25;letter-spacing:-.02em;
  color:var(--link);max-width:34ch;margin:var(--s4) auto 0;text-wrap:balance}
.ab-hero-body{font-size:var(--fs-body-lg);line-height:1.6;color:var(--ink);
  max-width:62ch;margin:var(--s5) auto 0}

/* The two in-page destinations. LINKS TO RENDERED CONTENT, not disclosure
   controls: everything they point at is already on the page, which is the
   brief's hard requirement. They are styled as cards because they are the
   page's table of contents, and a table of contents that looks like two more
   paragraphs is not one. */
.ab-dir{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);
  max-width:860px;margin:var(--s7) auto 0;text-align:left}
.ab-dir-a{position:relative;display:block;background:var(--sf);
  border:1px solid var(--divider);border-radius:var(--r-lg);padding:var(--s5);
  padding-right:var(--s8);text-decoration:none;box-shadow:var(--shadow-sm);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.ab-dir-a b{display:block;font-family:var(--font-display);font-weight:600;font-size:17px;
  line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.ab-dir-a span{display:block;font-size:var(--fs-sm);line-height:1.55;color:var(--ink-2);
  margin-top:var(--s2)}
.ab-dir-arr{position:absolute;right:var(--s5);top:var(--s5);margin:0!important;
  font-size:18px;line-height:1;color:var(--link)}
.ab-dir-a:hover{border-color:var(--ink);box-shadow:var(--shadow)}
.ab-dir-a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* ---------- Two-column argument (#xr-ai-era) ------------------------------ */
.ab-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7)}
.ab-col h3{font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.27;
  letter-spacing:var(--ls-h3);color:var(--ink);margin:0 0 var(--s4)}

/* A named example, fenced so nobody reads it as a case study. The eyebrow
   inside it says "Illustrative example" for the same reason. */
.ab-example{background:var(--sf);border:1px solid var(--divider);
  border-left:3px solid var(--link);border-radius:var(--r);
  padding:var(--s5);margin:var(--s5) 0 0}
.ab-sec .ab-example p{font-size:var(--fs-sm);line-height:1.6;max-width:none}
.ab-example-p{margin-top:var(--s3)!important;margin-bottom:0!important}
.ab-example-p strong{font-weight:600;color:var(--ink)}
.ab-sec-alt .ab-example{background:var(--sf)}

/* A citation is a link followed by a small outward arrow. The arrow is
   aria-hidden and the words "(opens in a new tab)" are next to it in a
   visually-hidden span, so the affordance exists for both kinds of reader. */
.ab-cite{color:var(--link);text-underline-offset:3px;white-space:nowrap}
.ab-cite-arr{margin-left:3px;font-size:.9em}
.ab-cite:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}

/* The answer to the two columns above it. On the page's own surface with a
   rule above, because it is the turn in the argument, not a fourth card. */
.ab-facts{border-top:1px solid var(--divider);margin:var(--s8) 0 0;padding:var(--s7) 0 0;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s7)}
.ab-facts-h h3{font-family:var(--font-display);font-size:var(--fs-h2);
  line-height:1.15;letter-spacing:var(--ls-h2);color:var(--ink);margin:0;text-wrap:balance}
.ab-sec .ab-closing{font-family:var(--font-display);font-weight:600;
  font-size:clamp(19px,1.9vw,23px);line-height:1.35;letter-spacing:-.02em;
  color:var(--ink);max-width:24ch;margin:var(--s5) 0 0}

/* ---------- Heading left, prose right (#xr-story, #xr-free, #xr-seo) ------ */
.ab-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--s7);align-items:start}
.ab-split-h h2{margin:0}
.ab-split-h p{margin-top:var(--s4)}
.ab-sec .ab-example-q .ab-quote{font-family:var(--font-display);font-weight:600;
  font-size:clamp(20px,2.1vw,24px);line-height:1.3;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 var(--s3)}
.ab-example-q{margin-top:0}
.ab-free-cta{margin-top:var(--s6)!important}

/* ---------- The founder (#xr-founder) ------------------------------------- */
.ab-founder-in{display:grid;grid-template-columns:380px minmax(0,1fr);gap:var(--s8);
  align-items:start}
.ab-poster{margin:0}
/* The file is 380x506 and the img carries those attributes, so the box is
   reserved before the bytes land. width:100% lets it shrink on a narrow grid
   without the intrinsic size fighting the column. */
.ab-poster img{display:block;width:100%;height:auto;border-radius:var(--r-lg);
  border:1px solid var(--divider);box-shadow:var(--shadow)}
.ab-poster figcaption{font-size:var(--fs-sm);line-height:1.5;color:var(--ink-2);
  margin:var(--s3) 0 0}
.ab-founder-b h2{margin:0 0 var(--s5);text-wrap:balance}
/* The quotation is the founder's own words, so it is a real blockquote with a
   rule -- and it is set at full ink. A founder statement in grey at 90%
   opacity was the exact readability complaint this page was rewritten over. */
.ab-blockquote{margin:0;padding:0 0 0 var(--s5);border-left:3px solid var(--cta)}
.ab-sec .ab-blockquote p{font-size:var(--fs-body-lg);line-height:1.6;color:var(--ink);
  margin:0 0 var(--s4)}
.ab-sec .ab-blockquote p:last-child{margin-bottom:0}
.ab-name{font-weight:600;color:var(--ink);margin:var(--s5) 0 0!important}

/* ---------- The entrance to the technical half (#xr-details) -------------- */
.ab-details{background:var(--graphite);color:var(--inv)}
.ab-details h2,.ab-details .ab-lede{color:var(--inv)}
.ab-details .ab-eyebrow{color:var(--inv-2)}
.ab-aud{display:flex;flex-wrap:wrap;gap:var(--s3)}
.ab-aud a{display:inline-flex;align-items:center;gap:var(--s2);
  background:var(--graphite-2);border:1px solid var(--panel-line);border-radius:var(--r-full);
  padding:10px var(--s5);font-size:var(--fs-sm);font-weight:500;color:var(--inv);
  text-decoration:none;transition:background var(--dur-fast) var(--ease)}
.ab-aud a:hover{background:var(--panel-3)}
.ab-aud a:focus-visible{outline:3px solid var(--focus-inv);outline-offset:2px}

/* ---------- The four steps (#xr-engineering) ------------------------------ */
.ab-process{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
.ab-process li{background:var(--sf);border:1px solid var(--divider);
  border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow-sm);max-width:none}
.ab-step{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:var(--r-full);background:var(--cta);color:var(--cta-ink);
  font-family:var(--font-display);font-weight:600;font-size:15px;margin-bottom:var(--s3)}
.ab-process h3{font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.27;
  letter-spacing:var(--ls-h3);color:var(--ink);margin:0 0 var(--s2)}
.ab-sec .ab-process p{font-size:var(--fs-sm);line-height:1.6;margin:0;max-width:none}
.ab-note{margin-top:var(--s6)!important;max-width:74ch!important}
.ab-note strong{font-weight:600}

/* ---------- Published / accessed / used (#xr-seo) ------------------------- */
.ab-evidence{margin:0;display:flex;flex-direction:column;gap:var(--s4)}
.ab-evidence-r{background:var(--sf);border:1px solid var(--divider);
  border-radius:var(--r-lg);padding:var(--s5)}
.ab-evidence dt{font-family:var(--font-display);font-weight:600;font-size:17px;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 var(--s2)}
.ab-evidence dd{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--ink);
  max-width:none}

/* ---------- The benchmark (#xr-benchmark) --------------------------------- */
.ab-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);
  max-width:860px}
.ab-metric{background:var(--sf);border:1px solid var(--divider);border-radius:var(--r-lg);
  padding:var(--s5);box-shadow:var(--shadow-sm)}
/* FULL-STRENGTH LABELS. The brief names this element specifically: the
   "estimated energy" wording must not be dimmed, because the caveat is the
   honest part of the number and dimming it reverses the emphasis. */
.ab-sec .ab-metric-l{font-size:var(--fs-xs);line-height:18px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:0;max-width:none}
.ab-sec .ab-metric-v{font-family:var(--font-display);font-weight:600;
  font-size:clamp(38px,4.4vw,52px);line-height:1.05;letter-spacing:-.035em;
  color:var(--ink);margin:var(--s2) 0 0;max-width:none}
.ab-metric-arr{color:var(--link);margin:0 6px}
.ab-sec .ab-metric-d{font-size:var(--fs-sm);line-height:1.55;color:var(--ink);
  margin:var(--s3) 0 0;max-width:none}
.ab-metric-d strong{font-weight:600}

.ab-disclosure{margin:var(--s6) 0 0!important;max-width:74ch!important}
.ab-disclosure strong{font-weight:600}

/* The table scrolls inside its own box rather than pushing the page sideways;
   four columns of figures do not fit a 390px viewport at a readable size and
   the alternative -- shrinking the type -- is the one thing this page was
   rewritten to stop doing. */
.ab-tablewrap{margin:var(--s6) 0 0;overflow-x:auto;
  border:1px solid var(--divider);border-radius:var(--r-lg);background:var(--sf)}
.ab-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.ab-table caption{text-align:left;font-weight:600;color:var(--ink);
  padding:var(--s4) var(--s5) 0}
.ab-table th,.ab-table td{padding:var(--s3) var(--s5);text-align:left;color:var(--ink);
  border-bottom:1px solid var(--divider);white-space:nowrap}
.ab-table thead th{font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);font-weight:600}
.ab-table tbody th{font-weight:600}
.ab-table tbody tr:last-child th,.ab-table tbody tr:last-child td{border-bottom:0}
.ab-num{text-align:right!important;font-variant-numeric:tabular-nums}
/* Our own row is marked, not coloured in: a green row under three numbers we
   are asking a researcher to trust would be the page arguing with its own
   disclosure. */
.ab-row-ours th,.ab-row-ours td{background:var(--ok-sf)}

.ab-method{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7);
  margin:var(--s7) 0 0;padding:var(--s7) 0 0;border-top:1px solid var(--divider)}
.ab-method h3{font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.27;
  letter-spacing:var(--ls-h3);color:var(--ink);margin:0 0 var(--s4)}

/* ---------- The five questions (#xr-research) ----------------------------- */
.ab-questions{list-style:none;margin:0;padding:0;counter-reset:abq;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.ab-questions li{counter-increment:abq;position:relative;
  background:var(--sf);border:1px solid var(--divider);border-radius:var(--r-lg);
  padding:var(--s5) var(--s5) var(--s5) 60px;font-size:var(--fs-body);line-height:1.6;
  color:var(--ink);max-width:none}
.ab-questions li::before{content:counter(abq);position:absolute;left:var(--s5);top:var(--s5);
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-full);background:var(--sf-subtle);border:1px solid var(--divider);
  font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--ink)}
.ab-questions b{font-weight:600}

/* ---------- The closing band (#xr-join) ----------------------------------- */
.ab-join{padding:var(--s9) 0;background:var(--graphite);color:var(--inv)}
/* Same rule home5.css states for .h5-final: this page also ends on a dark
   band, so the footer's 96px top margin would draw a pale stripe between two
   pieces of the same colour. */
main:has(> .ab-join:last-child) + .site-footer{margin-top:0}
.ab-join-in{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s6);flex-wrap:wrap}
.ab-join h2{color:var(--inv);margin:0 0 var(--s3)}
.ab-join p{font-size:var(--fs-body-lg);color:var(--inv-2);margin:0;max-width:48ch}

/* ---------- Narrower than 1024 -------------------------------------------- */
@media(max-width:1024px){
  .ab-founder-in{grid-template-columns:300px minmax(0,1fr);gap:var(--s6)}
  .ab-cols,.ab-facts,.ab-method{gap:var(--s6)}
}

/* ---------- Tablet: every two-column grid becomes one --------------------- */
@media(max-width:860px){
  .ab-sec{padding:64px 0}
  .ab-dir,.ab-cols,.ab-facts,.ab-split,.ab-process,.ab-metrics,.ab-method,
  .ab-questions{grid-template-columns:1fr}
  .ab-facts{gap:var(--s5)}
  /* The poster stops being a column and becomes a normal block above the
     quotation, capped so it does not fill a tablet screen on its own. */
  .ab-founder-in{grid-template-columns:1fr;gap:var(--s6)}
  .ab-poster{max-width:300px}
  .ab-split-h h2{margin-bottom:var(--s4)}
}

/* ---------- Phone --------------------------------------------------------- */
@media(max-width:600px){
  .ab-sec{padding:48px 0}
  .ab-hero{padding:var(--s6) 0 var(--s7)}
  /* Ragged-right below 600, for the reason home5.css gives: a centred display
     headline over three centred lines of prose is harder to read in a narrow
     column than the same block set left. */
  .ab-hero-in{text-align:left}
  .ab-h1,.ab-hero-line,.ab-hero-body{max-width:none;margin-left:0;margin-right:0}
  .ab-hero-line{margin-top:var(--s3)}
  .ab-dir{margin-top:var(--s6)}
  .ab-dir-a{padding-right:var(--s7)}
  .ab-dir-arr{right:var(--s4)}
  .ab-facts{margin-top:var(--s6);padding-top:var(--s6)}
  .ab-sec .ab-closing{max-width:none;margin-top:var(--s5)}
  .ab-blockquote{padding-left:var(--s4)}
  .ab-questions li{padding:var(--s4) var(--s4) var(--s4) 52px}
  .ab-questions li::before{left:var(--s4);top:var(--s4)}
  .ab-join{padding:var(--s7) 0}
  .ab-join-in{gap:var(--s5)}
  .ab-join .btn{width:100%}
  .ab-table th,.ab-table td{padding:var(--s3) var(--s4)}
}

/* A page of anchor links needs the target not to land under the sticky
   header, and scroll-margin is the only thing that does it without JavaScript.
   The public header is 76px desktop / 64px mobile (--h-hdr / --h-hdr-m). */
#xr-top,#xr-ai-era,#xr-story,#xr-free,#xr-founder,#xr-details,#xr-engineering,
#xr-seo,#xr-benchmark,#xr-research,#xr-join{scroll-margin-top:calc(var(--h-hdr) + 16px)}
@media(max-width:639px){
  #xr-top,#xr-ai-era,#xr-story,#xr-free,#xr-founder,#xr-details,#xr-engineering,
  #xr-seo,#xr-benchmark,#xr-research,#xr-join{scroll-margin-top:calc(var(--h-hdr-m) + 12px)}
}