/* Long-form pages (case studies, insights, 404) — still rendered with style.css.
   This layer brings them in line with the v3 pages: fixed-nav clearance, a left rail for the
   kicker, a reading column at the same rhythm as /approach/, larger type, real large-screen sizes.
   Loaded by tools/chrome.py only on pages that link style.css. */

body.x-inner main{padding:calc(var(--nav-h) + clamp(56px,11vh,150px)) 0 clamp(96px,10vw,170px)}
body.x-inner footer.x-foot{margin-top:0;flex:none}  /* style.css makes body a 100%-high flex column, which squeezed the footer to its padding: links, e-mail and company details were clipped (found 2026-10-02, also on the live site) */

/* two-column page: sticky rail left, content right */
body.x-inner .reading{
  max-width:none;width:var(--wrap-w);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);column-gap:clamp(32px,6vw,120px);align-items:start;
}
body.x-inner .reading > *{grid-column:2;min-width:0}
body.x-inner .reading > .article-kicker{
  grid-column:1;grid-row:1 / span 12;position:sticky;top:calc(var(--nav-h) + 40px);
  margin:0;padding-top:14px;border-top:var(--rule) solid var(--ink);
  font-size:var(--t-label);letter-spacing:var(--tracking-seclabel);color:var(--terra);
}

/* head */
body.x-inner .article-title,body.x-inner .reading .page-title{
  font-family:var(--serif);font-weight:var(--w-serif);color:var(--ink);
  font-size:clamp(32px,3.8vw,60px);line-height:1.38;letter-spacing:.02em;max-width:none;
}
body.x-inner .article-title .brand{font-weight:400;font-size:.84em}
body.x-inner .article-dek,body.x-inner .reading .lede{
  margin-top:clamp(28px,3.4vw,48px);padding-top:clamp(22px,2.4vw,32px);border-top:1px solid var(--hairline);
  max-width:40em;font-size:clamp(17px,1.3vw,20px);line-height:2.05;color:var(--muted);letter-spacing:.04em;
}
body.x-inner .status-note{max-width:40em}

/* body */
body.x-inner .article{margin-top:clamp(64px,7vw,110px);padding-top:clamp(40px,4vw,64px);border-top:var(--rule) solid var(--ink);max-width:38em}
body.x-inner .article p{font-size:clamp(17px,1.2vw,19px);line-height:2.1;letter-spacing:.03em}
body.x-inner .article h2{font-size:clamp(25px,2.2vw,34px);line-height:1.5;margin-top:clamp(64px,7vw,104px);scroll-margin-top:calc(var(--nav-h) + 32px)}
body.x-inner .article h2:first-child{margin-top:0}
body.x-inner .article h3{font-size:clamp(20px,1.6vw,24px)}
body.x-inner .article ul.highlights li,body.x-inner .article ol.steps li{font-size:clamp(16px,1.15vw,18px);line-height:2}
body.x-inner .article blockquote p{font-size:clamp(21px,1.8vw,28px);line-height:1.7}
body.x-inner .article .table-wrap{max-width:none}
body.x-inner .byline{max-width:38em}
body.x-inner .spec{max-width:38em;margin-top:clamp(72px,8vw,120px)}
body.x-inner .spec table{border-top:var(--rule) solid var(--ink)}
body.x-inner .spec th,body.x-inner .spec td{font-size:clamp(14px,1.1vw,16px)}
body.x-inner .backlink{justify-self:start;margin-top:clamp(56px,6vw,96px);font-size:14px;letter-spacing:.14em}

/* case pages: the next step after the article. Part of the site frame, not of the case content. */
body.x-inner .x-next{max-width:38em;margin-top:clamp(64px,7vw,104px);padding-top:clamp(32px,3.4vw,48px);border-top:var(--rule) solid var(--ink)}
body.x-inner .x-next-line{font-family:var(--serif);font-weight:var(--w-serif);color:var(--ink);font-size:clamp(24px,2.2vw,34px);line-height:1.5;letter-spacing:.02em}
body.x-inner .x-nb{white-space:nowrap}
body.x-inner .x-next-actions{margin-top:clamp(24px,2.6vw,36px);display:flex;align-items:center;flex-wrap:wrap;gap:18px 28px}
body.x-inner .x-next-link{font-size:15px;font-weight:500;letter-spacing:.14em;color:var(--terra);text-decoration:none}
body.x-inner .x-next-link i{font-style:normal;display:inline-block;margin-left:.5em;transition:transform .5s var(--ease-out)}
body.x-inner .x-next-link:hover i{transform:translateX(6px)}
body.x-inner .x-next-mail{display:inline-block;margin-top:20px;font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--hairline);padding-bottom:2px}
body.x-inner .x-next-mail:hover{color:var(--ink);border-color:var(--ink)}
html[lang="en"] body.x-inner .x-next-line{letter-spacing:0;line-height:1.3}
html[lang="en"] body.x-inner .x-next-link{letter-spacing:.06em}

/* phone layout of the facts table stacks label over value; style.css leaves a bottom rule on the last label, which drew a line between that label and its value */
@media (max-width:560px){body.x-inner .spec tr:last-child th{border-bottom:0}}

/* insights list cards */
body.x-inner .reading > .case-card{margin-top:0;border-top:var(--rule) solid var(--ink);border-bottom:0;padding:clamp(28px,3vw,44px) 0 clamp(40px,4vw,64px)}
body.x-inner .reading > .lede + .case-card{margin-top:clamp(64px,7vw,110px)}
body.x-inner .case-card .case-title{font-size:clamp(22px,2vw,32px);line-height:1.5}
body.x-inner .case-card .case-sum{font-size:clamp(15px,1.15vw,17px);max-width:38em}

/* 404: the page has no .reading column */
body.x-inner main > .page-title:first-child,body.x-inner main > h1:first-child{width:var(--wrap-w);margin-inline:auto}

@media (max-width:900px){
  body.x-inner .reading{grid-template-columns:minmax(0,1fr)}
  body.x-inner .reading > *,body.x-inner .reading > .article-kicker{grid-column:1;grid-row:auto}
  body.x-inner .reading > .article-kicker{position:static;margin-bottom:24px;border-top:0;padding-top:0}
}
@media (min-width:1800px){
  body.x-inner .reading > .article-kicker{font-size:15px}
  body.x-inner .article-title,body.x-inner .reading .page-title{font-size:min(3.4vw,92px)}
  body.x-inner .article-dek,body.x-inner .reading .lede{font-size:21px}
  body.x-inner .article p{font-size:21px}
  body.x-inner .article h2{font-size:40px}
  body.x-inner .article ul.highlights li,body.x-inner .article ol.steps li{font-size:20px}
  body.x-inner .article blockquote p{font-size:32px}
  body.x-inner .spec th,body.x-inner .spec td,body.x-inner .spec-note,body.x-inner .byline{font-size:17px}
  body.x-inner .case-card .case-title{font-size:36px}
  body.x-inner .case-card .case-sum{font-size:19px}
}

html[lang="en"] body.x-inner .article-title{letter-spacing:0;line-height:1.25}
html[lang="en"] body.x-inner .article p,html[lang="en"] body.x-inner .article-dek{letter-spacing:.005em;line-height:1.8;text-align:left}
html[lang="en"] body.x-inner .reading > .article-kicker{letter-spacing:.14em;text-transform:uppercase}
/* English task names are longer than the Chinese ones: let the first column wrap so the table fits its column */
html[lang="en"] body.x-inner .article table.data td:first-child{white-space:normal}
body.x-inner .article-title,body.x-inner .reading .page-title,body.x-inner .case-card .case-title{text-wrap:balance}
@media (max-width:640px){
  body.x-inner .article-title,body.x-inner .reading .page-title{font-size:clamp(26px,7.4vw,32px)}
  body.x-inner .article-title .brand,body.x-inner .article-title .nw,body.x-inner .article-title .nw-tail{white-space:normal}
  body.x-inner .article-title .x-nb .brand{white-space:nowrap}  /* inside a phrase the name stays whole; the phrases themselves are short enough for a 320px screen */
  /* results table: it used to keep a 560px floor and scroll sideways, which hid the last column (the one the table is about). Let it fit. */
  body.x-inner .article table.data{min-width:0}
  body.x-inner .article table.data th,body.x-inner .article table.data td{padding-right:10px;font-size:13px;letter-spacing:0;line-height:1.6}
  body.x-inner .article table.data th{font-size:12px;letter-spacing:.04em;white-space:normal}
  body.x-inner .article table.data td:first-child{white-space:normal}
}