/* earlyadopter.io — the EarlyOffice home (/ and /en/), 2026-11-02 redesign: the office itself leads, the other products
   close the page. References the user named: Linear, Apple product pages, Notion (docs/DECISION_LOG.md, PRODUCT.md).
   Colours come only from site/assets/site/family.css (generated from early-family tokens); this file gives them roles. */

/* ── tokens ── */
:root{
  color-scheme:light dark;
  --paper:var(--ea-light-canvas); --surface:var(--ea-light-surface); --ink:var(--ea-light-ink); --muted:var(--ea-light-muted);
  --line:var(--ea-light-line); --selected:var(--ea-light-selected); --primary:var(--ea-light-primary); --on-primary:var(--ea-light-onPrimary);
  --primary-hover:var(--ea-light-hover); --success:var(--ea-light-success); --accent-text:var(--ea-light-accent); --focus:var(--ea-coralDeep);
  --veil:rgb(247 248 250 / .78); --hair:rgb(15 16 17 / .06); --dot:rgb(15 16 17 / .28);
  --shadow-window:0 1px 0 rgb(255 255 255 / .6) inset, 0 32px 80px -24px rgb(15 16 17 / .28), 0 12px 24px -12px rgb(15 16 17 / .16);
  --glow:radial-gradient(60% 52% at 50% 0%, rgb(255 149 80 / .10), transparent 72%);
  --font:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --wrap:1200px; --gutter:clamp(16px,4vw,32px); --r:14px; --ease:cubic-bezier(.2,.7,.2,1);
  --sec:clamp(112px,12vw,168px);
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:var(--ea-dark-canvas); --surface:var(--ea-dark-surface); --ink:var(--ea-dark-ink); --muted:var(--ea-dark-muted);
    --line:var(--ea-dark-line); --selected:var(--ea-dark-selected); --primary:var(--ea-dark-primary); --on-primary:var(--ea-dark-onPrimary);
    --primary-hover:var(--ea-dark-hover); --success:var(--ea-dark-success); --accent-text:var(--ea-dark-accent); --focus:var(--ea-orange);
    --veil:rgb(8 9 10 / .78); --hair:rgb(247 248 248 / .06); --dot:rgb(247 248 248 / .3);
    --shadow-window:0 1px 0 rgb(255 255 255 / .06) inset, 0 40px 100px -24px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .03);
    --glow:radial-gradient(60% 52% at 50% 0%, rgb(255 149 80 / .11), transparent 72%);
  }
}

/* ── fonts (self-hosted subsets, SIL OFL — tools/fonts.py) ── */
@font-face{font-family:"Pretendard";font-weight:400;font-style:normal;font-display:swap;src:url("/assets/fonts/pretendard-400.woff2?v=92feeee7") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:700;font-style:normal;font-display:swap;src:url("/assets/fonts/pretendard-700.woff2?v=ac62a00c") format("woff2")}
@font-face{font-family:"MaruBuri";font-weight:400;font-style:normal;font-display:swap;src:url("/assets/fonts/maruburi-400.woff2?v=46e47636") format("woff2")}
@font-face{font-family:"MaruBuri";font-weight:700;font-style:normal;font-display:swap;src:url("/assets/fonts/maruburi-700.woff2?v=f8ff9bb0") format("woff2")}

/* ── base ── */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;letter-spacing:-.005em;
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
h1,h2,h3{font-weight:700;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:rgb(255 149 80 / .32)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.nb{white-space:nowrap}
.skip{position:absolute;left:var(--gutter);top:-60px;z-index:100;background:var(--primary);color:var(--on-primary);padding:10px 16px;border-radius:8px}
.skip:focus-visible{top:10px}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:10px;font-weight:700;font-size:16.5px;
  letter-spacing:-.01em;transition:background-color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.btn.sm{min-height:40px;padding:0 15px;font-size:15px;border-radius:9px}
.btn.primary{background:var(--primary);color:var(--on-primary)}
.btn.primary:hover{background:var(--primary-hover)}
.btn.ghost{border:1px solid var(--line);color:var(--ink);background:var(--surface)}
.btn.ghost:hover{border-color:var(--muted)}
@media (prefers-reduced-motion: no-preference){.btn:hover{transform:translateY(-1px)}}

/* ── header ── */
.top{position:sticky;top:0;z-index:30;background:var(--veil);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--hair)}
.top .wrap{display:flex;align-items:center;gap:28px;min-height:60px}
.top .brand{display:flex;align-items:center;min-height:40px}
.top .brand img{height:15px;width:auto}
.top .menu{display:flex;gap:4px;margin-left:8px}
.top .menu a,.top .right a.link{display:inline-flex;align-items:center;min-height:40px;padding:0 10px;font-size:15px;color:var(--muted);border-radius:8px}
.top .menu a:hover,.top .right a.link:hover{color:var(--ink)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:2px}
.top .right .btn{margin-left:8px}

/* ── hero ── */
.hero{position:relative;padding-top:clamp(48px,6vw,72px);text-align:center;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0 0 auto;height:900px;background:var(--glow);z-index:-1;pointer-events:none}
.appid{display:inline-flex;align-items:center;gap:12px;margin-bottom:22px}
.appid > img{width:44px;height:44px;border-radius:11px}
.appid picture img{height:24px;width:auto}
.hero h1{font-size:clamp(38px,5.2vw,64px);line-height:1.08;letter-spacing:-.04em;max-width:15ch;margin-inline:auto}
.hero .lede{font-size:clamp(18px,1.6vw,21px);color:var(--muted);max-width:34em;margin:22px auto 0}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-top:20px;font-size:14.5px;color:var(--muted)}
.facts li{display:inline-flex;align-items:center;gap:8px}
.facts li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--dot)}
.renamed{margin-top:10px;font-size:14.5px;color:var(--muted)}

/* the app window: tilted back while it enters, flat once it is in view (one authored moment; still with reduced motion) */
.stage{perspective:2000px;margin-top:52px}
.window{position:relative;max-width:1180px;margin-inline:auto;border-radius:var(--r);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-window);transform-origin:50% 0}
.window img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .stage .window{animation:tilt linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
    @keyframes tilt{from{transform:rotateX(16deg) scale(.93);opacity:.7}to{transform:none;opacity:1}}
  }
}
.kinds-tabs{display:inline-flex;gap:4px;padding:4px;margin-top:28px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.kinds-tabs button{appearance:none;border:0;background:none;font:inherit;cursor:pointer;min-height:40px;padding:0 14px;border-radius:8px;font-size:15px;color:var(--muted);
  transition:background-color .2s var(--ease),color .2s var(--ease)}
.kinds-tabs button:hover{color:var(--ink)}
.kinds-tabs button[aria-selected="true"]{background:var(--primary);color:var(--on-primary)}
.kind-note{margin-top:14px;font-size:16px;color:var(--muted);min-height:1.6em}
.shot-cap{margin-top:6px;font-size:14px;color:var(--muted)}

/* ── sections ── */
.block{padding-top:var(--sec)}
.head{max-width:44rem}
.head h2{font-size:clamp(30px,4vw,48px);line-height:1.14;letter-spacing:-.035em}
.head p{margin-top:16px;color:var(--muted);font-size:clamp(18px,1.5vw,20px)}
.head.row{max-width:none;display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.more{display:inline-flex;align-items:center;min-height:40px;font-size:16px;font-weight:700}
.more:hover{color:var(--accent-text)}

/* five kinds: one window per kind, cut to its working part */
.kgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:56px}
.k{grid-column:span 2;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.k.wide{grid-column:span 3}
.k .crop{aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--line);background:var(--paper)}
.k .crop img{width:100%;height:100%;object-fit:cover;transform:scale(1.9);transform-origin:var(--o,30% 40%);transition:transform .9s var(--ease)}
@media (prefers-reduced-motion: no-preference){.k:hover .crop img{transform:scale(2.04)}}
.k .txt{padding:22px 24px 26px}
.k h3{font-size:20px;letter-spacing:-.02em}
.k .fmt{margin-left:8px;font-size:14px;font-weight:400;color:var(--muted)}
.k p{margin-top:8px;font-size:16px;color:var(--muted)}
.k ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.k li{font-size:14px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.convert{margin-top:16px;padding:24px;border:1px solid var(--line);border-radius:var(--r);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px 32px}
.convert h3{font-size:18px}
.convert p{color:var(--muted);font-size:16px}

/* forms: the text holds still while the screens pass (Apple-style pinned scene) */
.pinned{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.pinned .side{position:sticky;top:110px}
.counts{margin-top:36px;border-top:1px solid var(--line)}
.counts div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.counts dt{font-size:16px;color:var(--muted)}
.counts dd{font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}
.counts small{display:block;font-size:14px;color:var(--muted);font-weight:400}
.shots{display:grid;gap:24px}
.shots .window{max-width:none}

/* PDF tools */
.pdf-win{margin-top:56px}
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:48px;border-top:1px solid var(--line)}
.tools .g{padding:26px 28px 30px 0;border-bottom:1px solid var(--line)}
.tools .g:not(:nth-child(3n)){border-right:1px solid var(--line)}
.tools .g:not(:nth-child(3n+1)){padding-left:28px}
.tools h3{display:flex;justify-content:space-between;font-size:16px}
.tools h3 span{color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums}
.tools ul{margin-top:12px;columns:2;column-gap:20px}
.tools li{font-size:15px;color:var(--muted);padding:3px 0;break-inside:avoid}

/* AI */
.ai{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center;margin-top:56px}
/* the home screen cut to its new-document cards and the AI request line (x 10–98 %, y 4–60 % of the shot) */
.ai .window{aspect-ratio:16/7}
.ai .window img{aspect-ratio:auto;width:114%;max-width:none;margin:-2.8% 0 0 -11.4%}
.ai dl{display:grid;gap:26px}
.ai dt{font-weight:700;font-size:18px}
.ai dd{margin-top:4px;color:var(--muted);font-size:16px}
.fine{margin-top:28px;font-size:14px;color:var(--muted);max-width:72ch}

/* together, trust: rows divided by hairlines */
.cols4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:48px;border-top:1px solid var(--line)}
.cols4 > li{padding:26px 24px 4px 0}
.cols4 > li + li{padding-left:24px;border-left:1px solid var(--line)}
.cols4 h3{font-size:17px}
.cols4 p{margin-top:6px;color:var(--muted);font-size:16px}
.cols4.three{grid-template-columns:repeat(3,minmax(0,1fr))}

/* download */
.get{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.get li{display:flex;flex-direction:column;gap:6px;padding:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.get h3{font-size:22px;letter-spacing:-.02em}
.get .spec{color:var(--muted);font-size:15px}
.get .btn{margin-top:18px;align-self:flex-start}
.get .note{margin-top:10px;font-size:14px;color:var(--muted)}
.get .note a{text-decoration:underline;text-underline-offset:.2em}
.mobile{margin-top:16px;font-size:15px;color:var(--muted)}

/* news */
.news{margin-top:28px;border-top:1px solid var(--line)}
.news a{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:4px 24px;padding:18px 0;border-bottom:1px solid var(--line)}
.news a:hover .sum{color:var(--accent-text)}
.news .meta{font-size:14.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.news .sum{font-size:16.5px}

/* other products */
.family{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:48px}
.family > li{display:flex;flex-direction:column;gap:12px;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.family img{width:48px;height:48px;border-radius:12px}
.family h3{font-size:18px}
.family p{color:var(--muted);font-size:16px}
.family .status{margin-top:auto;font-size:14px;font-weight:700;color:var(--muted)}
.family .status.live{color:var(--success)}

/* closing */
.closing{padding-block:clamp(140px,16vw,200px) clamp(110px,12vw,150px);text-align:center}
.closing h2{font-size:clamp(34px,5vw,60px);line-height:1.1;letter-spacing:-.04em;max-width:16ch;margin-inline:auto}
.closing p{margin-top:16px;color:var(--muted)}
.closing .btn{margin-top:30px}

/* footer */
.site-footer{padding-block:64px 40px;border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px}
.foot-brand img{height:15px;width:auto}
.foot-brand p{margin-top:14px;color:var(--muted);font-size:15px;max-width:40ch}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.cols h2{font-size:14px;color:var(--muted);margin-bottom:8px}
.cols li a{display:inline-flex;min-height:36px;align-items:center;font-size:16px}
.cols li a:hover{color:var(--accent-text)}
.legal{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:6px;font-size:14px;color:var(--muted)}

/* ── narrow ── */
@media (max-width: 60rem){
  .top .menu{display:none}
  .kgrid{grid-template-columns:minmax(0,1fr)} .k,.k.wide{grid-column:auto}
  .convert{grid-template-columns:minmax(0,1fr)}
  .pinned,.ai{grid-template-columns:minmax(0,1fr);gap:40px} .pinned .side{position:static}
  .tools{grid-template-columns:minmax(0,1fr)} .tools .g{padding:22px 0!important;border-right:0!important}
  .cols4,.cols4.three{grid-template-columns:repeat(2,minmax(0,1fr))} .cols4 > li{padding:22px 16px 22px 0!important;border-left:0!important}
  .get{grid-template-columns:minmax(0,1fr)} .family{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot{grid-template-columns:minmax(0,1fr)}
  .news a{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 30rem){
  .top .right a.link{display:none}
  .stage .window{max-width:300px;border-radius:28px}
  .stage .window img{aspect-ratio:390/720}
  .kinds-tabs,.kind-note{display:none}
  .cols4,.cols4.three,.family,.cols{grid-template-columns:minmax(0,1fr)}
  .cols4 > li{padding:20px 0!important}
}

/* ── company home (/): the studio ───────────────────────────────────────────────────────────────────────────────────
   Art direction (2026-11-02): the company that photographed other people's objects for 25 years shows its own work as
   objects on a dark graphite studio set (Higgsfield, docs/higgsfield/2026-11-02). The page is always dark, whatever the
   system setting — the photographs are lit for it. Orange stays a rim of light, as in the pictures. */
.studio{
  /* 2026-11-02 사용자: "군청색 … 촌스러움의 이유 … 블랙으로 가자 https://linear.app/ 같은 스타일로" — a neutral black ground with
     white hairlines instead of the family's blue-grey dark surfaces (#111216 / #191B21 / #2C3039). Brand colours stay the family's. */
  color-scheme:dark;
  /* family-v14 made these the family's dark values (tokens/black.json), so the studio reads them from family.css */
  --paper:var(--ea-dark-canvas); --surface:var(--ea-dark-surface); --ink:var(--ea-dark-ink); --muted:var(--ea-dark-muted);
  --line:rgb(255 255 255 / .08); --selected:rgb(255 255 255 / .06); --primary:var(--ea-dark-primary); --on-primary:var(--ea-dark-onPrimary);
  --primary-hover:#FFFFFF; --success:var(--ea-dark-success); --accent-text:var(--ea-dark-accent); --focus:var(--ea-orange);
  --veil:rgb(8 9 10 / .72); --hair:rgb(255 255 255 / .06); --dot:rgb(255 255 255 / .28);
  --shadow-window:0 0 0 1px rgb(255 255 255 / .06), 0 1px 0 rgb(255 255 255 / .06) inset, 0 40px 100px -24px rgb(0 0 0 / .9);
  --scrim:#08090A;
  background:var(--paper);color:var(--ink)
}
.studio .btn.ghost{background:rgb(247 248 248 / .04);border-color:rgb(247 248 248 / .2)}
.studio .btn.ghost:hover{border-color:rgb(247 248 248 / .5)}

/* hero: the Early Bot block, full bleed; the words sit in the dark half of the picture */
/* the picture keeps its own 21:9 at desktop widths (the block stays the size it was shot); narrower, it crops from the empty left */
.s-hero{position:relative;min-height:max(calc(100vw * 1018 / 2400 + 96px),640px);display:flex;flex-direction:column;justify-content:flex-end;overflow:clip;margin-top:-61px}
.s-hero > picture{position:absolute;inset:0}
.s-hero > picture{bottom:96px;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
.s-hero > picture img{width:100%;height:100%;object-fit:cover;object-position:100% 50%}
.s-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--scrim) 0%,rgb(8 9 10 / .7) 34%,rgb(8 9 10 / 0) 62%),
  linear-gradient(0deg,var(--scrim) 0%,rgb(8 9 10 / 0) 30%);pointer-events:none}
.s-copy{position:relative;z-index:1;width:100%;padding-bottom:clamp(36px,4.5vw,64px)}
.s-copy h1{font-size:clamp(44px,6.2vw,100px);line-height:1.02;letter-spacing:-.05em;max-width:11ch}
.s-copy .lede{margin-top:28px;max-width:26em;color:var(--muted);font-size:clamp(18px,1.6vw,21px)}
.s-copy .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.s-index{position:relative;z-index:1;width:100%;border-top:1px solid var(--hair)}
.s-index ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.s-index a{display:flex;align-items:center;gap:14px;min-height:96px;padding:16px 20px 16px 0;transition:color .2s var(--ease)}
.s-index li + li a{padding-left:20px;border-left:1px solid var(--hair)}
.s-index img{width:36px;height:36px;border-radius:9px}
.s-index b{display:block;font-size:16px}
.s-index span{font-size:14px;color:var(--muted)}
.s-index span.live{color:var(--success)}
.s-index a:hover b{color:var(--ea-orange)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .s-hero > picture img{animation:drift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes drift{to{transform:scale(1.08) translateY(4%);opacity:.35}}
  }
}

/* chapters: a lit object, then the real thing */
.chap{padding-top:var(--sec)}
.scene{position:relative;min-height:clamp(520px,62vw,820px);display:flex;align-items:flex-end;overflow:clip}
.scene > picture{position:absolute;inset:0}
.scene > picture img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--scrim) 0%,rgb(8 9 10 / .82) 34%,rgb(8 9 10 / .4) 50%,rgb(8 9 10 / 0) 66%),
  linear-gradient(0deg,var(--scrim) 0%,rgb(8 9 10 / 0) 26%),linear-gradient(180deg,var(--scrim) 0%,rgb(8 9 10 / 0) 18%);pointer-events:none}
.scene .wrap{position:relative;z-index:1;width:100%;padding-bottom:clamp(40px,6vw,80px)}
.scene .wm-line{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.scene .wm-line img{height:26px;width:auto}
.scene h2{font-size:clamp(34px,5vw,72px);line-height:1.04;letter-spacing:-.045em;max-width:11ch}
.scene p{margin-top:20px;max-width:28em;color:var(--muted);font-size:clamp(17px,1.5vw,20px)}
.scene .links{margin-top:30px}
.real{margin-top:clamp(40px,5vw,72px)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .scene > picture img{animation:parallax linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes parallax{from{transform:scale(1.1) translateY(-3%)}to{transform:scale(1.1) translateY(3%)}}
    .real .window{animation:tilt linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  }
}
.studio .stats{border-top-color:var(--line)}
.studio .ticks li::before{background:var(--ea-orange)}

/* shared bits of the company home (put back: links row, numbers, ticked lists) */
.links{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px;border-top:1px solid var(--line)}
.stats > div{padding:22px 24px 0 0}
.stats > div + div{padding-left:24px;border-left:1px solid var(--line)}
.stats dt{font-size:15px;color:var(--muted)}
.stats dd{margin-top:4px;font-size:24px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stats dd small{display:block;margin-top:4px;font-size:14.5px;font-weight:400;letter-spacing:0;color:var(--muted)}
.ticks{display:grid;gap:10px;margin-top:24px}
.ticks li{position:relative;padding-left:20px;font-size:16.5px}
.ticks li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--ea-coral)}
.scene .wrap > *{max-width:min(28rem,34vw)}
@media (max-width: 60rem){.stats{grid-template-columns:minmax(0,1fr)} .stats > div{padding:18px 0!important;border-left:0!important;border-bottom:1px solid var(--line)}}
@media (max-width: 40rem){.scene .wrap > *{max-width:none}}

/* making: two tall photographs, the words on them */
.tall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:48px}
.tall article{position:relative;min-height:clamp(520px,52vw,720px);border-radius:20px;overflow:hidden;display:flex;align-items:flex-end;border:1px solid var(--line)}
.tall picture{position:absolute;inset:0}
.tall picture img{width:100%;height:100%;object-fit:cover}
.tall article::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgb(8 9 10 / .96) 0%,rgb(8 9 10 / .6) 38%,rgb(8 9 10 / 0) 62%)}
.tall .body{position:relative;z-index:1;padding:clamp(24px,3vw,36px)}
.tall h3{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.035em}
.tall h3 .en{margin-left:10px;font-size:15px;font-weight:400;color:var(--muted);letter-spacing:0}
.tall p{margin-top:10px;color:var(--muted);font-size:16.5px;max-width:30em}
.tall .ticks{margin-top:16px}
.tall .ticks li{font-size:16px}
.pill{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:6px 12px;border-radius:999px;border:1px solid rgb(247 248 248 / .2);font-size:14px;font-weight:700}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ea-orange)}

/* history: one more scene */
.scene.hist{margin-top:var(--sec)}
.scene.hist h2{max-width:12ch}

@media (max-width: 60rem){
  .s-index ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-index li:nth-child(3) a{padding-left:0;border-left:0}
  .s-index li:nth-child(n+3) a{border-top:1px solid var(--hair)}
  .tall{grid-template-columns:minmax(0,1fr)}
}
/* tablets and phones: the photograph on top at a wider crop, the words under it (no words over the object) */
@media (max-width: 68rem){
  .s-hero{min-height:0;margin-top:0}
  .s-hero > picture{position:relative;inset:auto;bottom:auto;aspect-ratio:16/9;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
  .s-hero > picture img{object-position:88% 50%}
  .s-hero::after{display:none}
  .s-copy{padding-top:8px}
  .scene{display:block;min-height:0}
  .scene > picture{position:relative;inset:auto;display:block;aspect-ratio:16/9;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
  .scene > picture img{object-position:82% 50%}
  .scene::after{display:none}
  .scene .wrap{padding-top:8px}
  .scene .wrap > *{max-width:40rem}
}
@media (max-width: 40rem){
  .s-hero > picture,.scene > picture{aspect-ratio:4/3}
  .s-hero > picture img{object-position:84% 50%}
  .scene > picture img{object-position:80% 50%}
  .scene .wrap > *{max-width:none}
  .s-index a{min-height:72px}
}

/* photographs standing in for icons (EarlyRemote and EarlyBot have none yet) */
.s-index img,.family img{object-fit:cover}

/* the EarlyOffice page in the studio: the object first, then the working window and its tabs */
.scene h1{font-size:clamp(36px,5.2vw,76px);line-height:1.04;letter-spacing:-.045em;max-width:11ch}
.scene .facts{justify-content:flex-start}
.scene .renamed{text-align:left}
.o-hero .stage{text-align:center;margin-top:clamp(32px,4vw,64px)}
.o-scene{margin-top:-61px}
@media (max-width: 68rem){.o-scene{margin-top:0}}

/* ── EarlySearch chapter: a working question box that hands the question to earlyadopter.io/search ── */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ask{max-width:54rem;margin-inline:auto;padding:20px 20px 14px;border:1px solid rgb(247 248 248 / .16);border-radius:22px;background:var(--surface);box-shadow:var(--shadow-window);
  transition:border-color .2s var(--ease)}
.ask:focus-within{border-color:rgb(247 248 248 / .4)}
.ask input[type="text"]{width:100%;border:0;background:none;color:var(--ink);font:inherit;font-size:clamp(18px,1.8vw,22px);padding:6px 4px 18px;outline:none}
.ask input[type="text"]::placeholder{color:var(--muted)}
.ask-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.seg{display:inline-flex;gap:4px;margin:0;padding:4px;border:0;border-radius:12px;background:rgb(247 248 248 / .06)}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:9px;font-size:15px;color:var(--muted);transition:background-color .2s var(--ease),color .2s var(--ease)}
.seg input:checked + span{background:var(--primary);color:var(--on-primary);font-weight:700}
.seg input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}
.ask-go{display:inline-grid;place-items:center;width:48px;height:48px;border:0;border-radius:12px;background:var(--primary);color:var(--on-primary);cursor:pointer;transition:background-color .2s var(--ease)}
.ask-go:hover{background:var(--primary-hover)}
.ask-note{max-width:54rem;margin:12px auto 0;font-size:14px;color:var(--muted);text-align:center}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:54rem;margin:24px auto 0}
.chips a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;font-size:15px;color:var(--muted);transition:color .2s var(--ease),border-color .2s var(--ease)}
.chips a:hover{color:var(--ink);border-color:rgb(247 248 248 / .4)}
#earlysearch .cols4{margin-top:56px}
.s-index ul{grid-template-columns:repeat(5,minmax(0,1fr))}
.family{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
@media (max-width: 30rem){.ask-bar{flex-wrap:wrap}.seg{flex:1}.seg label{flex:1}.seg span{justify-content:center;width:100%}}

/* ── type pairing (2026-11-02, 사용자 "그렇게 해줘봐"): MaruBuri for the big titles, hero lines and section titles;
   Pretendard for descriptions, buttons, menus, header, footer, tables, numbers, captions and small labels.
   MaruBuri is self-hosted (tools/fonts.py, SIL OFL — assets/fonts/OFL-MaruBuri.txt); without it the titles fall back to Pretendard. */
:root{--serif:"MaruBuri","Pretendard",system-ui,serif}
.s-copy h1,.scene h1,.scene h2,.head h2,.closing h2,.band2 h2,.c-hero h1,.hero h1,.studio main h2:not(.cols h2){font-family:var(--serif);font-weight:400;letter-spacing:-.03em}
.s-copy h1,.scene h1{letter-spacing:-.035em}

/* type check (tools/typecheck.mjs, 2026-11-02): long single lines get a measure; the other-products row is three wide */
.mobile,.fine,.legal p{max-width:72ch}
.family{grid-template-columns:repeat(auto-fill,minmax(min(20rem,100%),1fr))}
.counts small,.stats dd small,.fine,.get .note,.ask-note,.mobile{font-size:15px}
/* the width cap is for the reading lines, not the big titles (they keep their own ch measure) */
.scene .wrap > h1,.scene .wrap > h2{max-width:13ch}
.scene .wrap > h2{max-width:min(13ch,56vw)}
.cols{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}
@media (max-width: 68rem){.scene .wrap > h1,.scene .wrap > h2{max-width:none}}
/* five products in the index: two columns when narrow (after the five-wide rule above, so it wins) */
@media (max-width: 60rem){
  .s-index ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-index li a{padding-left:0!important;border-left:0!important;border-top:0!important}
  .s-index li:nth-child(even) a{padding-left:20px!important;border-left:1px solid var(--hair)!important}
  .s-index li:nth-child(n+3) a{border-top:1px solid var(--hair)!important}
}
@media (max-width: 40rem){.s-index a{gap:10px}.s-index img{width:32px;height:32px}.s-index span span{white-space:nowrap}}
.legal a{text-decoration:underline;text-underline-offset:.2em}
.s-index ul{grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}
@media (max-width: 60rem){.s-index ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* family-v14 tiles are #0F1011, the same as the studio's surfaces: a hairline keeps the tile's shape on the black pages */
.studio img[src*="-icon"]{border-radius:21.9%;box-shadow:0 0 0 1px rgb(255 255 255 / .14)}