/* ======================================================================
   Ackee Apple — shared styles (header nav, language toggle, footer, subpages)
   Used by every page. Home-only styles stay inline in index.html.
   ====================================================================== */

/* base reset (index.html carries the same rules inline) */
*{ margin:0; box-sizing:border-box; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
ul{ list-style:none; padding:0; }
img{ display:block; }
/* font stack: Zen Kaku Gothic New for Latin, Noto Sans KR for Hangul (KR pages put it first) */
:root{ --font-sans:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; }
/* Pretendard Variable (SIL OFL 1.1, assets/fonts/OFL-Pretendard.txt), self-hosted: the site makes no
   third-party requests. One family for every page and component; no synthetic bold/italic. */
@font-face{ font-family:"Pretendard Variable"; src:url("fonts/PretendardVariable.woff2") format("woff2-variations"), url("fonts/PretendardVariable.woff2") format("woff2");
  font-weight:45 920; font-style:normal; font-display:swap; }
html{ font-synthesis:none; }
/* no single word stranded on a paragraph's last line (body text), even lines for short captions and headings */
.page section p, .page section li, .page dd, .hero__lead, .hero__trust{ text-wrap:pretty; }
.page .step__cap, .page .tile__title, .page h2, .page h3{ text-wrap:balance; }
body.page{ font-family:var(--font-sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; }

/* Korean text: Zen Kaku Gothic has no Hangul, so put Noto Sans KR first in KR mode */
html[lang="ko"] body{ word-break:keep-all; }   /* keep-all: break Korean between words, not mid-word */

/* visible TODO content placeholders — delete this rule (or the markers) before launch */
mark.todo{ background:#FFF0B3; color:#1D1D1F; outline:1px dashed #9A7410; outline-offset:2px; border-radius:3px; padding:0 .2em; }

/* ============ header ============ */
/* white translucent pill: backdrop blur, hairline border and a soft shadow so it
   stays readable over any section; links in ink, the current page and the CTA in the accent */
.hdr{ position:fixed; left:0; top:5.5vmin; z-index:100; display:flex; width:100%; flex-direction:column; align-items:center;
  pointer-events:none; opacity:0; transform:translateY(-10px); transition:opacity .7s ease-in-out, transform .7s ease-in-out; }
.hdr.revealed{ opacity:1; transform:none; }
.nav, .lang{ position:relative; display:flex; gap:2px; padding:5px; border-radius:999px;
  background:var(--nav-bg); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border:1px solid #D2D2D7; box-shadow:var(--nav-shadow); }
.nav{ pointer-events:auto; isolation:isolate; align-items:stretch; transition:box-shadow .3s ease; }
.nav:hover{ box-shadow:var(--nav-shadow-hover); }
.nav__refract{ display:none; }   /* (old glass refraction effect — not used) */
/* the lens: a soft accent-tinted pill that glides under whichever item is hovered */
.nav__lens{ position:absolute; top:5px; left:0; height:40px; width:0; border-radius:999px; pointer-events:none; z-index:0; opacity:0;
  background:var(--accent-tint);
  transition:transform .5s cubic-bezier(.34,1.56,.4,1), width .5s cubic-bezier(.34,1.56,.4,1), opacity .25s ease; }
.nav.is-hovering .nav__lens{ opacity:1; }
.nav > *:not(.nav__lens){ position:relative; z-index:1; }
.nav__logo{ width:40px; height:40px; border-radius:999px; display:grid; place-items:center; }
.nav__seal{ display:block; width:26px; height:26px; color:#1D1D1F; transition:transform .55s cubic-bezier(.2,1.3,.4,1); }
.nav__logo:hover .nav__seal{ transform:rotate(90deg); }
.nav__links{ display:flex; align-items:stretch; gap:2px; }
.nav__links a{ position:relative; display:flex; align-items:center; justify-content:center; min-width:72px; padding:0 18px; height:40px; border-radius:999px; white-space:nowrap;
  color:var(--text); transition:color .18s ease, background-color .18s ease; }
.nav__links a span{ transition:transform .45s cubic-bezier(.2,1.2,.3,1); display:inline-block; }
.nav__links a:hover{ color:var(--accent); }
.nav__links a:hover span{ transform:scale(1.06) translateY(-1px); }
/* current page (subpages) and current section (homepage scroll-spy) share one style */
.nav__links a:is([aria-current="page"], [aria-current="location"]){ color:var(--accent); background:var(--accent-tint); }
@media (max-width:1180px){ .nav__links a{ min-width:0; padding:0 12px; } }
.nav__toggle{ width:40px; height:40px; border-radius:999px; display:grid; place-items:center; color:var(--text); }
.nav__toggle svg{ width:18px; height:18px; }
.nav__toggle svg[hidden]{ display:none; }
.nav__cta{ display:flex; align-items:center; height:40px; border-radius:999px; padding:0 22px; white-space:nowrap;
  color:var(--on-accent); background:var(--accent); transition:background .2s ease; }
.nav__cta:hover{ background:var(--accent-hover); }
@media (max-width:1180px){ .nav__cta{ padding:0 16px; } }
.nav__drop{ pointer-events:none; margin-top:1vmin; width:calc(100% - 32px); max-width:420px; overflow:hidden; border-radius:22px; padding:4px;
  background:var(--nav-bg-solid); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--line); box-shadow:var(--nav-shadow-hover);
  opacity:0; transform:translateY(-8px); transition:opacity .45s cubic-bezier(.2,1,.3,1), transform .45s cubic-bezier(.2,1,.3,1); }
.nav__drop.open{ pointer-events:auto; opacity:1; transform:none; }
.nav__drop ul{ display:flex; flex-direction:column; gap:2px; }
.nav__drop a{ display:flex; align-items:center; justify-content:center; height:44px; width:100%; border-radius:999px; color:var(--text); }
.nav__drop a:hover, .nav__drop a:is([aria-current="page"], [aria-current="location"]){ color:var(--accent); background:var(--accent-tint); }

/* Five links fit the pill from 1024px up. Below that the pill collapses to logo, menu, CTA,
   and Contact moves to the footer (it is not in the dropdown). */
.hdr__bar{ display:flex; align-items:center; gap:8px; max-width:calc(100% - 24px); }
.hdr__bar > *{ pointer-events:auto; }
@media (min-width:1024px){ .nav__toggle, .nav__drop{ display:none; } }
@media (max-width:1023px){ .nav__links{ display:none; } }
@media (max-width:420px){ .nav__cta{ padding:0 12px; } }

/* language toggle — a separate pill beside the menu: selected = accent, unselected = muted */
.lang button{ height:40px; min-width:40px; padding:0 10px; border-radius:999px; color:var(--text-muted); transition:background .2s ease, color .2s ease; }
.lang button:hover{ color:var(--text); }
.lang button[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); }
@media (max-width:420px){ .lang button{ min-width:34px; padding:0 8px; } }

/* visible accent focus ring for keyboard users */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ============ layout: one container for every page ============
     --container-max  1200px  widest content measure
     --gutter         24px phones, 40px ≥768px, 56px ≥1024px (minimum space to the viewport edge) */
:root{ --container-max:1200px; --gutter:24px;
  --nav-h:calc(5.5vmin + 50px);   /* bottom edge of the fixed nav pill (top 5.5vmin + 50px tall) */
  --measure:65ch;
  --tile-text-max:700px;   /* widest centred text block in a tile (headline, subheadline, body); 700 lets the Patent title break into two even lines */
  /* ---- page-level colours (white page, nav, footer) ---- */
  --page-bg:#FFFFFF;       /* page background and the gutters between tiles */
  /* ---- dark tiles: edit --bg-dark to try another shade; the three below are tuned to it ---- */
  --bg-dark:#0B0A14;                      /* every dark tile (data-theme="dark"), on every page */
  --surface-dark:#17152A;                 /* raised surfaces on dark tiles (cards, boxes) */
  --line-dark:rgba(255,255,255,.14);      /* hairlines and borders on dark tiles */
  --nav-bg-dark:rgba(11,10,20,.72);       /* translucent nav over dark (for use if the nav ever goes dark; same blur) */
  --footer-bg:#F5F5F7;
  --text:#1D1D1F; --text-muted:#6E6E73; --line:#D2D2D7;
  --accent:#4B32C3; --accent-hover:#3A2599; --on-accent:#FFFFFF; --accent-tint:rgba(75,50,195,.08);
  --ph-fill:#F5F5F7; --ph-line:#C7C7CC;
  --bg:var(--page-bg);
  --nav-bg:rgba(255,255,255,.8); --nav-bg-solid:rgba(255,255,255,.96);
  --nav-shadow:0 8px 24px -16px rgba(0,0,0,.25);
  --nav-shadow-hover:0 10px 28px -16px rgba(0,0,0,.3);
  /* ---- tiles ---- */
  /* standard tile, measured from the homepage Institutional Work tile at each breakpoint */
  --tile-gap:8px;              /* white gutter between tiles: 8px phones, 12px from 768px */
  /* ---- button hover: a 1px lift and a soft shadow (adjust here) ---- */
  --btn-lift:-1px;  --btn-dur:180ms;
  --btn-shadow-light:0 6px 16px rgba(0,0,0,.14);           --btn-shadow-light-press:0 2px 6px rgba(0,0,0,.12);
  --btn-shadow-dark:0 6px 18px rgba(168,152,255,.18);      --btn-shadow-dark-press:0 2px 8px rgba(168,152,255,.14);
  --btn-shadow:var(--btn-shadow-light); --btn-shadow-press:var(--btn-shadow-light-press);
  --tile-pad-y:80px;           /* THE vertical padding above and below every tile (and the legal documents): 80px phones, 120px from 900px */
  --tile-min-height:853px;     /* every tile is at least this tall; taller content makes the tile grow */
}
@media (min-width:768px){ :root{ --gutter:40px; --tile-gap:12px; --tile-min-height:568px; } }
@media (min-width:900px){ :root{ --tile-pad-y:120px; } }
@media (min-width:1024px){ :root{ --gutter:56px; --tile-min-height:590px; } }
@media (min-width:1280px){ :root{ --tile-min-height:611px; } }
@media (min-width:1440px){ :root{ --tile-min-height:671px; } }
.container{ width:min(var(--container-max), 100% - 2 * var(--gutter)); margin-inline:auto; }

/* free scrolling everywhere; anchors such as about.html#contact land below the fixed nav */
html{ scroll-padding-top:var(--nav-h); }
body.page{ background:var(--bg); color:var(--text); min-height:100vh; min-height:100svh; display:flex; flex-direction:column;
  padding-top:calc(var(--nav-h) + var(--tile-gap)); }   /* every page starts below the floating nav, so no tile needs its own offset */
/* no rubber-band overscroll at the ends of the page (macOS / iOS) */
html, body{ overscroll-behavior-y:none; }
.page main{ position:relative; z-index:1; flex:1; }

/* ============ tile themes ============
   Two themes only. Each tile gets data-theme from data/tile-themes.js; the theme redefines the colour
   tokens, so everything inside — text, links, labels, buttons, tables, placeholders, pills — flips with it. */
[data-theme="light"]{ --tile-bg:#FFFFFF; --text:#1D1D1F; --text-muted:#6E6E73; --accent:#4B32C3; --accent-hover:#3A2599; --on-accent:#FFFFFF; --line:#D2D2D7;
  --accent-tint:rgba(75,50,195,.08); --ph-fill:#F5F5F7; --ph-line:#C7C7CC; }
[data-theme="dark"]{ --tile-bg:var(--bg-dark); --text:#F5F5F7; --text-muted:#A1A1A6; --accent:#A898FF; --accent-hover:#C2B8FF; --on-accent:#1D1D1F; --line:var(--line-dark);
  --accent-tint:rgba(168,152,255,.14); --ph-fill:var(--surface-dark); --ph-line:rgba(255,255,255,.28); }

/* ============ tiles ============
   One standard tile everywhere: full width, white gutter between tiles, the same vertical padding
   (--tile-pad-y) everywhere and the same min-height for tiles with media at each breakpoint, and the same structure (centred): label → headline → lead → CTA row →
   visual at full container width. Content shorter than the standard is grouped and centred
   vertically; taller content (tables, roadmap, documents) makes the tile grow with the same padding. */
.tiles{ display:flex; flex-direction:column; gap:var(--tile-gap); padding-bottom:var(--tile-gap); }
.page--home .tiles{ padding-top:var(--tile-gap); }   /* gutter between the hero tile and the first section tile */
.tile{ position:relative; background:var(--tile-bg); color:var(--text);
  min-height:var(--tile-min-height); padding-block:var(--tile-pad-y);
  display:flex; flex-direction:column; justify-content:center; }
/* text-only tiles (heading + text, or heading + a narrow text list such as Contact or "What it won't do") and the
   legal documents: no standard height — the content sets it, with --tile-pad-y above and below. Tiles with an image,
   grid or columns (.tile__visual) keep the standard minimum height. */
.tile:not(:has(.tile__visual:not(.tile__visual--narrow))), .tile--doc,
.tile:has(ul.awards){ min-height:0; }   /* the awards list is text, not media: Awards (About) and the homepage About tile */
.tile > .tile__in{ width:min(var(--container-max), 100% - 2 * var(--gutter)); }
.tile__head{ max-width:var(--tile-text-max); margin-inline:auto; text-align:center; }
.tile__head > :first-child{ margin-top:0; }
.tile__head .tile__title, .tile__head p{ margin-inline:auto; }
.tile__cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 28px; margin-top:var(--gap-action); }
.tile__cta:empty{ display:none; }
.tile__cta > *{ margin-top:0 !important; }
.tile__visual{ margin-top:var(--gap-block); }
.tile__visual > :first-child{ margin-top:0; }
/* content blocks that read as text (lists, contact details, About details, documents) stay
   left-aligned in a readable column centred in the container */
.tile__visual--narrow, .tile__body{ max-width:46rem; margin-inline:auto; text-align:left; }
.tile__body > :first-child{ margin-top:0; }

/* text elements and their spacing (same everywhere) */
.page h2{ max-width:var(--measure); }
/* tile heading: the section name as the title, the statement as the subheadline below it */
.page .tile__title{ margin:0; max-width:var(--measure); }
.page .tile__subhead{ margin-top:var(--gap-sub); max-width:var(--measure);
  color:var(--text); color:color-mix(in srgb, var(--text) 85%, var(--tile-bg)); }   /* theme text at 85% (≥ 9:1 on both themes) */
.page .tile__head .tile__subhead + p{ margin-top:var(--gap-lead); }
.page section p{ margin-top:var(--gap-text); max-width:var(--measure); }
.page section p.muted{ margin-top:var(--gap-text); }
.page .muted{ color:var(--text-muted); }
.page__intro{ margin-top:var(--gap-text); max-width:var(--measure); }
.page__intro + .muted{ margin-top:var(--gap-text); }   /* "Last updated" line on the legal documents */

/* links: the tile's accent, underline on hover */
.page a.inline, .page a.more{ color:var(--accent); text-underline-offset:.25em; text-decoration-thickness:1px; }
.page a.inline:hover, .page a.more:hover{ color:var(--accent-hover); text-decoration:underline; }
.page a.more{ display:inline-block; margin-top:var(--gap-action); }
/* buttons: pill-shaped; primary = the tile's accent fill, secondary = accent outline */
.btn-primary{ display:inline-flex; align-items:center; gap:.5em; margin-top:var(--gap-action); padding:13px 26px; border-radius:999px; background:var(--accent); color:var(--on-accent); transition:background .2s ease; }
.btn-primary:hover{ background:var(--accent-hover); }
.btn-secondary{ display:inline-flex; align-items:center; gap:.5em; padding:12px 25px; border-radius:999px; border:1px solid var(--accent); color:var(--accent); }
.btn-secondary:hover{ background:var(--accent-tint); }

/* Button hover (pill / filled buttons only: nav "Try MysteryBox", hero button, .btn-primary, .btn-secondary).
   Mouse/trackpad only, so touch screens never keep a stuck hover. Lifts 1px with a soft shadow; on press it settles back.
   Only transform and box-shadow animate (plus the existing background fade). The focus ring is an outline, drawn
   outside the shadow, so it stays visible. On dark tiles the shadow becomes a soft accent glow. */
[data-theme="dark"]{ --btn-shadow:var(--btn-shadow-dark); --btn-shadow-press:var(--btn-shadow-dark-press); }
[data-theme="light"]{ --btn-shadow:var(--btn-shadow-light); --btn-shadow-press:var(--btn-shadow-light-press); }
.page :is(.nav__cta, .btn, .btn-primary, .btn-secondary){ transition:background .2s ease, transform var(--btn-dur) ease-out, box-shadow var(--btn-dur) ease-out; }
@media (hover: hover) and (pointer: fine){
  .page :is(.nav__cta, .btn, .btn-primary, .btn-secondary):hover{ transform:translateY(var(--btn-lift)); box-shadow:var(--btn-shadow); }
  .page :is(.nav__cta, .btn, .btn-primary, .btn-secondary):active{ transform:translateY(0); box-shadow:var(--btn-shadow-press); }
}
@media (prefers-reduced-motion: reduce){
  .page :is(.nav__cta, .btn, .btn-primary, .btn-secondary){ transition:background .2s ease, box-shadow 0ms; }
  .page :is(.nav__cta, .btn, .btn-primary, .btn-secondary):is(:hover, :active){ transform:none; }
}

/* "How it works": three app screens with captions — three equal columns from 900px, stacked below */
.page .steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0, 1fr); gap:28px; }
.page .step{ margin:0; text-align:center; }
/* real app screens (620 × 1347, the iPhone 16 Pro Max's 1320 × 2868 screen), framed as the phone that took them,
   the same frame as mysterybox.ai.kr: a dark titanium rail, an even black bezel, then the glass, plus the side keys
   and home indicator. Every measurement is a fraction of --pw (the device width), so the proportions hold at any size. */
.page .step__shot{
  --pw:240px; position:relative; isolation:isolate; display:block; width:var(--pw); max-width:100%; aspect-ratio:1320 / 2868; margin-inline:auto;
  border-radius:calc(var(--pw) * .1463); padding:calc(var(--pw) * .00741);
  background:linear-gradient(145deg, #5c5c65 0%, #34343b 8%, #1c1c20 20%, #101013 33%, #313138 50%, #131316 65%, #1f1f24 78%, #3a3a42 91%, #61616a 100%);
  box-shadow:0 0 0 .5px rgba(255,255,255,.15), 0 calc(var(--pw) * .0556) calc(var(--pw) * .1185) rgba(0,0,0,.28), 0 calc(var(--pw) * .0111) calc(var(--pw) * .0296) rgba(0,0,0,.2);
}
.page .step__screen{
  position:relative; width:100%; height:100%; background:#000;
  border-radius:calc(var(--pw) * .1389); padding:calc(var(--pw) * .0211);
}
.page .step__screen::after{   /* faint diagonal sheen across the glass */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(128deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.018) 16%, rgba(255,255,255,0) 34%);
}
.page .step__screen picture{ display:block; width:100%; height:100%; }
.page .step__screen img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:calc(var(--pw) * .1178); }
/* side keys, inset under the rail: action button + two volume keys on the left (one element, its ::before and a
   box-shadow copy), the longer side button on the right */
.page .step__key{
  position:absolute; z-index:-1; width:calc(var(--pw) * .0067); border-radius:calc(var(--pw) * .0033);
  background:linear-gradient(90deg, #15151a 0%, #3c3c45 55%, #23232a 100%);
}
.page .step__key--l{ left:calc(var(--pw) * -.0059); top:calc(var(--pw) * .6459); height:calc(var(--pw) * .1597); box-shadow:0 calc(var(--pw) * .217) 0 0 #262630; }
.page .step__key--l::before{ content:""; position:absolute; left:0; top:calc(var(--pw) * -.1693); width:100%; height:calc(var(--pw) * .0943); border-radius:inherit; background:inherit; }
.page .step__key--r{ right:calc(var(--pw) * -.0059); top:calc(var(--pw) * .6759); height:calc(var(--pw) * .247); background:linear-gradient(270deg, #15151a 0%, #3c3c45 55%, #23232a 100%); }
.page .step__bar{   /* home indicator, 139 × 5pt, 8pt above the bottom of the glass */
  position:absolute; z-index:1; bottom:calc(var(--pw) * .0383); left:50%; transform:translateX(-50%);
  width:30.2%; height:calc(var(--pw) * .0107); border-radius:calc(var(--pw) * .0054); background:rgba(255,255,255,.62);
}
.page .step__cap{ margin:28px auto 0; max-width:30ch; }
@media (min-width:900px){ .page .steps{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:40px; } }

/* ============ "What's next" roadmap ============
   Three stages (Now / Next / Later) side by side from 1024px, stacked below. A thin line with a marker
   on each stage hints at the progression; marker and status pill share the stage's style: solid accent
   (in use), accent outline (in development), muted outline (exploring). Item text stays left-aligned. */
.page .roadmap__intro{ max-width:var(--measure); }
.page .roadmap{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0, 1fr); gap:32px; text-align:left; }
.page .stage{ position:relative; padding-top:22px; border-top:2px solid var(--line); }
.page .stage::before{ content:""; position:absolute; top:-7px; left:0; width:12px; height:12px; border-radius:50%; background:var(--tile-bg); border:2px solid var(--accent); }
.page .stage--live::before{ background:var(--accent); }
.page .stage--explore::before{ border-color:var(--text-muted); }
.page .stage__head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.page .stage__name{ margin:0; }
.page .pill{ display:inline-flex; align-items:center; height:26px; padding:0 11px; border-radius:999px; border:1px solid transparent; }
.page .pill--live{ background:var(--accent); color:var(--on-accent); }
.page .pill--dev{ border-color:var(--accent); color:var(--accent); }
.page .pill--explore{ border-color:var(--text-muted); color:var(--text-muted); }
.page .stage__items{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.page .stage__item{ margin:0; }
.page .stage__items li p{ margin-top:4px; color:var(--text); }
@media (min-width:1024px){ .page .roadmap{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:40px; } }

/* motion: tile content fades in and rises 12px once, the first time it enters the viewport (500ms, ease-out).
   The hidden start state exists only under .reveal-on, which site.js adds when IntersectionObserver is available
   and motion is allowed; without JS everything is simply visible. Never the hero, nav, footer or legal pages
   (they have no .reveal). .reveal-instant shows content with no transition (already on screen, anchor jumps). */
.reveal-on .reveal{ opacity:0; transform:translateY(12px); transition:opacity .5s ease-out, transform .5s ease-out; }
.reveal-on .reveal.is-in{ opacity:1; transform:none; }
.reveal-on .reveal.reveal-instant{ transition:none; }
@media print{ .reveal-on .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto !important; }
  .nav__links a, .nav__drop a{ transition:none; }
  .reveal-on .reveal{ opacity:1; transform:none; transition:none; }
}

/* Awards: one centred block per award (name, then a muted "Organizer, Year" line). Three equal columns from
   900px (max ~1000px wide); stacked below with a thin theme-aware divider between awards. */
.page ul.awards{ list-style:none; margin:0 auto; padding:0; max-width:1000px; display:grid; grid-template-columns:minmax(0, 1fr); text-align:center; }
.page .award{ margin:0; padding:20px 0; }
.page .award + .award{ border-top:1px solid var(--line); }
.page .award:first-child{ padding-top:0; }   /* the list starts/ends flush, so the tile edges are exactly --tile-pad-y */
.page .award:last-child{ padding-bottom:0; }
.page .award__name{ display:block; color:var(--text); font-weight:var(--fw-body); text-wrap:balance; }
.page .award__meta{ display:block; margin-top:4px; text-wrap:balance; color:var(--text-muted); font-size:var(--type-small); line-height:var(--lh-small); }
@media (min-width:900px){
  .page ul.awards{ grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:40px; row-gap:32px; }
  .page ul.awards:has(> li:nth-child(4):last-child){ grid-template-columns:repeat(2, minmax(0, 1fr)); }   /* four awards: 2 × 2 */
  .page .award{ padding:0; }
  .page .award + .award{ border-top:0; }
  /* every name gets a two-line slot (a shorter name sits in its middle), so the muted lines align across columns */
  .page .award__name{ min-height:calc(2em * var(--lh-body)); display:flex; align-items:center; justify-content:center; }
}
/* Text split into fixed lines (Institutional Work subheadline, Self-hosted processing body): one span per line, stacked from 700px;
   below that the spans run inline and the whole line is balanced */
.page .tile__subhead--split, .page .split-lines{ text-wrap:balance; }
@media (min-width:700px){ .page .tile__subhead--split .sub-line, .page .split-lines .sub-line{ display:block; } }

/* Centred statements (MysteryBox "What it won't do"): a plain list, no bullets or indent, each statement centred
   and balanced, in the same --tile-text-max column as the heading above */
.page section ul.statements{ list-style:none; margin:0 auto; padding:0; max-width:var(--tile-text-max); display:flex; flex-direction:column; gap:var(--gap-lead); text-align:center; }
.page section ul.statements li{ margin:0; padding:0; text-wrap:balance; color:var(--text); }

/* About page tiles: one centred column, --tile-text-max wide (the .tile__head default) */
.page .tile__head p.founder__name{ margin-top:var(--gap-sub); }
.page .tile__head p.founder__name + p{ margin-top:var(--gap-text); }
.page .partner__statement{ text-wrap:balance; }
.nowrap{ white-space:nowrap; }
/* Contact (About page): the details are centred too — each label above its value */
.page .tile--contact .tile__visual{ margin-top:var(--gap-action); }   /* heading straight to the details: a little closer than a block gap */
.page .tile--contact .kv{ grid-template-columns:1fr; gap:2px; text-align:center; max-width:var(--tile-text-max); margin-inline:auto; }
.page .tile--contact .kv dd{ margin-bottom:14px; }
.page .tile--contact .kv dd:last-child{ margin-bottom:0; }

/* Legal documents (Privacy Policy, Terms of Service): one readable column, centred as a block, text left-aligned */
.page .tile__body.doc{ max-width:720px; }
.page .doc p, .page .doc .doc__h{ max-width:none; }   /* fill the 720px column so it reads as centred */
.page .doc .doc__h{ margin:var(--gap-block) 0 0; }
.page .doc .doc__h + p{ margin-top:var(--gap-sub); }
.page .doc p.doc__intro{ margin-top:var(--gap-lead); }

/* Institutional Work (homepage): one wide 16:9 photo, centred, max 960px (exactly the width of the institutions grid),
   rounded like the other images (24px), object-fit: cover, with a small muted caption. 16:9 at every width. */
.page .iw-photos{ margin:var(--gap-block) auto 0; max-width:960px; }   /* same as .inst-grid below */
.page .iw-photos img{ display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; object-position:center; border-radius:24px; transform:none; }   /* frame and file are both 16:9: nothing is cropped or zoomed */
.page .iw-photos__cap{ margin-top:12px; text-align:center; color:var(--text-muted); font-size:var(--type-small); line-height:var(--lh-small); }

/* "Valuation-first appraisal pipeline": a muted statement, then three numbered steps —
   three centred columns from 900px, stacked below. Theme tokens only, so it works on light and dark tiles. */
.page .tile__head p.pipeline__lead{ color:var(--text-muted); text-wrap:balance; }
.page .pipeline{ --dot:44px; --gap:40px; list-style:none; margin:0 auto; padding:0; max-width:960px; display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--gap); text-align:center; }
@media (min-width:900px){ .page .pipeline{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.page .pipeline__step{ position:relative; margin:0; }
/* the numbered circle: outlined in the text colour; the key step ("Value") filled with the accent */
.page .pipeline__num{ display:grid; place-items:center; width:var(--dot); height:var(--dot); margin:0 auto; border-radius:50%;
  border:1.5px solid var(--text); color:var(--text); font-size:var(--type-ui); font-weight:600; letter-spacing:0; line-height:1; text-transform:none; }
.page .pipeline__num--key{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.page .pipeline__name{ margin:12px 0 0; }
.page .pipeline__body{ margin:6px auto 0; max-width:30ch; color:var(--text-muted); text-wrap:pretty; }
/* connectors (decorative pseudo-elements): a thin line ending in a small arrowhead, drawn into each following step.
   Phones: above the circle, pointing down. From 900px: left of the circle, pointing right. */
.page .pipeline__step + .pipeline__step::before{ content:""; position:absolute; left:50%; top:calc(-1 * var(--gap) + 6px); width:1.5px; height:calc(var(--gap) - 12px); background:var(--text-muted); transform:translateX(-50%); }
.page .pipeline__step + .pipeline__step::after{ content:""; position:absolute; left:50%; top:-12px; width:7px; height:7px;
  border-right:1.5px solid var(--text-muted); border-bottom:1.5px solid var(--text-muted); transform:translateX(-50%) rotate(45deg); }
@media (min-width:900px){
  .page .pipeline__step + .pipeline__step::before{ top:calc(var(--dot) / 2); left:auto; right:calc(50% + var(--dot) / 2 + 8px); width:calc(100% + var(--gap) - var(--dot) - 16px); height:1.5px; transform:translateY(-50%); }
  .page .pipeline__step + .pipeline__step::after{ top:calc(var(--dot) / 2); left:auto; right:calc(50% + var(--dot) / 2 + 8px); transform:translateY(-50%) rotate(-45deg); }
}

/* Patent tile: the invention's title, then small muted detail lines.
   Title lines are balanced everywhere (no orphaned last word). EN: two even lines within --tile-text-max.
   KR: one line from 1024px (slightly smaller type, centred on the column), balanced wrapping below. */
.page .patent__name{ max-width:100%; text-wrap:balance; }   /* the head is --tile-text-max wide; EN breaks into two even lines */
@media (min-width:1024px){
  /* KR stays on one line: wider than the text column, still centred on it and inside the container */
  html[lang="ko"] .page .patent__name{ width:max-content; max-width:none; white-space:nowrap; font-size:clamp(1.125rem, 1.8vw, 1.625rem);
    position:relative; left:50%; transform:translateX(-50%); }
}
.page .patent__details{ list-style:none; margin:var(--gap-lead) 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }

/* Institutional Work lists: the six featured names (homepage + first tile) and the full list by year.
   A wrapping flex row of fixed-width cells: 3 per row ≥1024px, 2 ≥640px, 1 on phones, so an incomplete
   last row stays centred. Cells in a row stretch to the same height; each name (and its former name
   below it) sits in the middle of its cell, centred, wrapping inside the cell. */
.inst-grid{ --cols:1; --col-gap:32px; list-style:none; margin:0 auto; padding:0; max-width:960px;
  display:flex; flex-wrap:wrap; justify-content:center; column-gap:var(--col-gap); }
@media (min-width:640px){ .inst-grid{ --cols:2; } }
@media (min-width:1024px){ .inst-grid{ --cols:3; } }
.page .inst__item{ flex:0 0 calc((100% - (var(--cols) - 1) * var(--col-gap)) / var(--cols)); min-width:0;
  min-height:calc(2 * 1.6em + 28px); min-height:calc(2lh + 28px); padding:14px 8px; box-sizing:border-box; border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow-wrap:anywhere; }
.page .inst__former{ display:block; margin-top:2px; color:var(--text-muted); }
/* linked names: same colour as plain names; underline + focus ring on hover / keyboard focus; a small muted ↗
   kept on the name's last line (word joiner before it) */
.page a.inst__link{ color:inherit; text-decoration:none; text-underline-offset:.22em; text-decoration-thickness:1px; border-radius:4px; }
.page a.inst__link:hover, .page a.inst__link:focus-visible{ text-decoration:underline; }
.page a.inst__link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.inst__last{ white-space:nowrap; }
.inst__ext{ display:inline-block; margin-left:.3em; font-size:.8em; line-height:1; color:var(--text-muted); text-decoration:none; }
.tile__cta--after{ margin-top:var(--gap-block); }
.inst-list{ max-width:960px; margin-inline:auto; text-align:center; }
.inst-year + .inst-year{ margin-top:var(--gap-block); }
.page .inst-year__title{ margin:0 0 4px; text-align:center; }
.page section p.inst-note{ margin:var(--gap-block) auto 0; max-width:none; text-align:center; }

/* key/value lists (contact page) */
.kv{ display:grid; text-align:left; grid-template-columns:max-content 1fr; gap:12px 32px; }
.kv dt{ color:var(--text-muted); }
.kv dd{ margin:0; overflow-wrap:anywhere; }
@media (max-width:639px){ .kv{ grid-template-columns:1fr; gap:2px; } .kv dd{ margin-bottom:12px; } }

/* ============ footer ============ */
.ftr{ position:relative; z-index:5; width:100%; background:var(--footer-bg); color:#6E6E73; border-top:1px solid #D2D2D7; }   /* one white gutter below the last tile */
/* footer: the same container as the tiles. Brand row → info table (label | value) → hairline → copyright | links */
.ftr__in{ padding-block:48px 40px; }
.ftr__brand{ display:inline-flex; align-items:center; gap:10px; color:#1D1D1F; }
/* the mark sits 49.87/512 of its box in from the left edge; pull it back so it lines up with the label column */
.ftr__logo{ display:block; width:24px; height:24px; flex:none; margin-left:calc(-24px * 49.87 / 512); }
.ftr__legal{ margin:24px 0 0; display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:6px 24px; }
.ftr__legal dt{ color:#6E6E73; }
.ftr__legal dd{ margin:0; color:#1D1D1F; overflow-wrap:anywhere; }   /* emphasized values */
.ftr__legal a{ color:var(--accent); text-underline-offset:.2em; }
.ftr__legal a:hover{ color:var(--accent-hover); text-decoration:underline; }
.ftr__bottom{ margin-top:32px; padding-top:20px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px 32px; }
.ftr__copy{ margin:0; color:#6E6E73; }
.ftr__links{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; }
.ftr__links a:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:.2em; }
@media (max-width:699px){
  .ftr__legal{ grid-template-columns:minmax(0, 1fr); gap:0; }
  .ftr__legal dd{ margin:2px 0 12px; }
  .ftr__legal dd:last-of-type{ margin-bottom:0; }
  .ftr__bottom{ flex-direction:column; align-items:flex-start; }
}


/* ======================================================================
   TYPOGRAPHY — one type scale for the whole site
   Each kind of text has one role token (size, line-height, weight, letter-spacing). Every text
   element gets its look from a role below — never from its tag or from a one-off value — so the
   same kind of text is identical on every page. Sizes are fluid (clamp).
   ====================================================================== */
:root{
  --type-display:clamp(3rem, 7vw, 6.5rem);                    --lh-display:.95;  --fw-display:600; --ls-display:-.02em;
  --type-h1:clamp(1.75rem, 3.2vw, 2.75rem);           --lh-h1:1.2;       --fw-h1:600;      --ls-h1:-.02em;
  --type-subhead:clamp(1.375rem, 2.4vw, 1.875rem);     --lh-subhead:1.25; --fw-subhead:500; --ls-subhead:-.01em;
  --type-h2:clamp(1.25rem, 2.2vw, 1.75rem);           --lh-h2:1.25;      --fw-h2:600;      --ls-h2:-.015em;
  --type-h3:clamp(1.0625rem, .95rem + .3vw, 1.1875rem);       --lh-h3:1.35;      --fw-h3:600;      --ls-h3:-.01em;
  --type-lead:clamp(1.125rem, .9rem + .6vw, 1.375rem);        --lh-lead:1.5;     --fw-lead:400;    --ls-lead:0;
  --type-body:clamp(1rem, .9rem + .3vw, 1.0625rem);           --lh-body:1.65;    --fw-body:400;    --ls-body:0;
  --type-small:.875rem;                                       --lh-small:1.5;    --fw-small:400;   --ls-small:0;
  --type-label:clamp(.75rem, .7rem + .15vw, .8125rem);        --lh-label:1.4;    --fw-label:500;   --ls-label:.16em;
  --type-ui:.9375rem;                                         --lh-ui:1.2;       --fw-ui:500;      --ls-ui:0;
  --type-footer:.8125rem;                                     --lh-footer:1.6;   --fw-footer:400;  --ls-footer:0;
  /* spacing between text elements (same in every section): title→subheadline, subheadline→lead, paragraph→paragraph,
     text→block (table, list, image, columns), text→action (button, link) */
  --gap-sub:8px; --gap-lead:16px; --gap-text:12px; --gap-block:28px; --gap-action:24px;
}
@media (min-width:768px){ :root{ --gap-sub:10px; --gap-lead:18px; --gap-text:16px; --gap-block:44px; --gap-action:28px; } }
/* Korean: same sizes as English (so the layouts match), a little more line-height for Hangul, and no
   wide tracking on the uppercase-style labels (Hangul has no case and looks scattered when spaced) */
html[lang="ko"]{ --lh-h1:1.28; --lh-subhead:1.32; --lh-h2:1.32; --lh-h3:1.42; --lh-lead:1.58; --lh-body:1.72; --lh-small:1.58; --ls-label:.04em; --ls-lead:0; }

/* ---- roles ---- */
body.page{ font-size:var(--type-body); line-height:var(--lh-body); font-weight:var(--fw-body); }

/* display: the hero headline only */
.page .hero h1{ font-size:var(--type-display); line-height:var(--lh-display); font-weight:var(--fw-display); letter-spacing:var(--ls-display); }

/* h1: every tile's title — the section name (homepage tiles, subpage tiles, legal page titles) */
.page .tile__title{ font-size:var(--type-h1); line-height:var(--lh-h1); font-weight:var(--fw-h1); letter-spacing:var(--ls-h1); }

/* subhead: the statement under a tile's title */
.page .tile__subhead{ font-size:var(--type-subhead); line-height:var(--lh-subhead); font-weight:var(--fw-subhead); letter-spacing:var(--ls-subhead); }

/* h2: sub-headings inside a tile (About founder, roadmap stages, legal sub-sections) */
.page .topic__title, .page .stage__name, .page .tile--doc h2{ font-size:var(--type-h2); line-height:var(--lh-h2); font-weight:var(--fw-h2); letter-spacing:var(--ls-h2); }

/* h3: item titles and the year headings in the institution list */
.page .stage__item, .page .inst-year__title, .page .pipeline__name, .page .tile--doc h2.doc__h{ font-size:var(--type-h3); line-height:var(--lh-h3); font-weight:var(--fw-h3); letter-spacing:var(--ls-h3); }

/* lead: intro under a heading, hero tagline */
.hero__tagline, .page .tile__head p:not(.muted):not(.tile__subhead):not(.hero__lead):not(.hero__trust){ font-size:var(--type-lead); line-height:var(--lh-lead); font-weight:var(--fw-lead); letter-spacing:var(--ls-lead); }

/* body: every paragraph, list item, table cell and description */
.page section p, .page section li, .hero__lead, .hero__trust, .page__intro, .kv, .page .stage__items li p, .page .step__cap{
  font-size:var(--type-body); line-height:var(--lh-body); font-weight:var(--fw-body); letter-spacing:var(--ls-body); }
.hero__trust{ font-weight:700; }   /* emphasis within body text */
.page section strong, .page .tile__subhead strong{ font-weight:700; }

/* small: secondary lines, placeholder captions, former institution names */
.page .inst__former, .page .muted, .page section p.muted, .hero__photo-ph, .hero__photo-ph code{
  font-size:var(--type-small); line-height:var(--lh-small); font-weight:var(--fw-small); letter-spacing:var(--ls-small); }

/* label: status pills */
.page .pill{
  font-size:var(--type-label); line-height:var(--lh-label); font-weight:var(--fw-label); letter-spacing:var(--ls-label); text-transform:uppercase; }
.page .pill{ line-height:1; }   /* pills are fixed-height chips */

/* ui: nav, buttons, language toggle, text links */
.nav__links a, .nav__cta, .nav__drop a, .lang button, .btn, .btn-primary, .btn-secondary, .page a.more, .ftr__brand{
  font-size:var(--type-ui); line-height:var(--lh-ui); font-weight:var(--fw-ui); letter-spacing:var(--ls-ui); }

/* footer */
.ftr__legal, .ftr__links, .ftr__copy{ font-size:var(--type-footer); line-height:var(--lh-footer); font-weight:var(--fw-footer); letter-spacing:var(--ls-footer); }