:root{
  --paper:#EDEFEA;--mount:#DDE0D9;--deep:#181C1A;
  /* Four-step band scale. Each band redefines --mount one step darker
     than itself, so plates and cards keep the same relationship to their
     ground on every band. --rule steps with it or hairlines vanish. */
  --band-white:#F5F6F3;--band-light:#EDEFEA;--band-grey:#E3E6E0;
  --bandpad:clamp(3.5rem,7vw,6rem);
  --ink:#14171A;--ink-soft:#5B6068;--rule:#C7CBC3;
  --gloss:#1F5C6B;--seal:#8C2F26;
  --display:"Gloock",Georgia,serif;
  --body:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --han:"Noto Serif SC","Newsreader",serif;
  --gut:clamp(1.5rem,3vw,2.5rem);
  --bay:clamp(3.25rem,6vw,5.5rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:var(--band-white);color:var(--ink);font-family:var(--body);
  font-optical-sizing:auto;font-size:1.0625rem;font-weight:300;line-height:1.6;letter-spacing:.004em}
img{max-width:100%;display:block}
::selection{background:var(--gloss);color:var(--paper)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--gloss);outline-offset:3px}
h1,h2,h3,h4{font-weight:400;margin:0}
p{margin:0 0 1.05em}p:last-child{margin-bottom:0}
strong{font-weight:500}
.wrap{max-width:72rem;margin:0 auto;padding:0 var(--gut)}
.band{padding:var(--bandpad) 0}
.view>.band:last-child{padding-bottom:clamp(2.5rem,4.5vw,3.5rem)}
.band>.wrap+.wrap{margin-top:var(--bay)}
#home>.band:last-child{padding-bottom:clamp(4rem,7vw,5.75rem)}
#article>.band:first-child{padding-bottom:clamp(1rem,2vw,1.5rem)}
#article>.band+.band{padding-top:clamp(2rem,3.5vw,2.75rem)}
#article>.band+.band .humanmark:first-child{margin-top:0}
.band-white{background:var(--band-white);--mount:#E7E9E4;--rule:#D3D7CF}
.band-light{background:var(--band-light);--mount:#DDE0D9;--rule:#C7CBC3}
.band-grey {background:var(--band-grey); --mount:#D2D6CE;--rule:#BEC3BA}
.band-dark {background:var(--deep);color:var(--paper);
  --mount:rgba(237,239,234,.07);--rule:rgba(237,239,234,.17);--ink-soft:rgba(237,239,234,.7)}
.band-dark h2,.band-dark h3,.band-dark b{color:var(--paper)}
.band-dark .eyebrow{color:rgba(237,239,234,.55)}
.band-dark .eyebrow .py{color:#7FB3BE}
.band-dark .eyebrow .han{color:#C97A6E}
.band-dark .eyebrow .bar{color:rgba(237,239,234,.28)}
/* a band boundary is the separator, so the first block in a band
   never adds its own top padding */
.band>.wrap.lead{padding-top:0}
.band>.wrap>.doc>section:first-child{padding-top:0}
.narrow{max-width:40rem}

/* bilingual eyebrow */
.eyebrow{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;font-family:var(--mono);
  font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-soft);margin:0 0 1rem}
.eyebrow .py{color:var(--gloss);text-transform:none;letter-spacing:.05em}
.eyebrow .han{font-family:var(--han);font-size:.9375rem;color:var(--seal);text-transform:none;
  letter-spacing:.08em;line-height:1}
.eyebrow .bar{color:var(--rule)}

/* header */
header.top{border-bottom:1px solid #D3D7CF;background:var(--band-white);position:sticky;top:0;z-index:15}
/* longhand only: a padding shorthand here overrides .wrap and the menu
   ends up flush against the viewport edge */
.topbar{display:flex;align-items:center;gap:1.5rem;padding-top:1.1rem;padding-bottom:1.1rem}
.brand{display:flex;align-items:center;gap:.55rem;border:0}
.brand .wm{height:1.75rem;width:auto;display:block}
.brand .dao{font-family:var(--han);font-size:.8125rem;color:var(--seal);
  line-height:1;align-self:center;margin-top:.1rem}
.brand .mark{border:0;display:block}
.brand .mark:hover .wm{opacity:.72}
nav.main{margin-left:auto}
nav.main ul{display:flex;gap:1.5rem;margin:0;padding:0;list-style:none;flex-wrap:wrap}
nav.main a{font-family:var(--mono);font-size:.75rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.11em;padding-bottom:.2rem;border-bottom:1px solid transparent}
nav.main a:hover{color:var(--gloss)}
nav.main a[aria-current="page"]{border-bottom-color:var(--seal)}
.sub{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:.4rem .75rem}
.sub:hover{background:var(--gloss)}

/* the mount */
.plate{background:var(--mount);padding:clamp(.4rem,.7vw,.65rem)}
.plate .frame{position:relative;overflow:hidden;outline:1px solid rgba(20,23,26,.14);
  outline-offset:-1px;background:var(--mount);display:block}
.plate .frame img{width:100%;height:100%;object-fit:cover;object-position:center}
.ar-lead .frame{aspect-ratio:3/2}
.ar-thumb .frame{aspect-ratio:1/1}
.plate .cap{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.09em;color:var(--ink-soft);
  padding:.45rem .1rem 0;text-transform:uppercase}
.plate .cap .credit{color:var(--gloss)}

/* lead */
.lead{padding-top:var(--bay)}
.leadgrid{display:grid;grid-template-columns:minmax(0,25rem) 1fr;gap:var(--gut);align-items:start}
.lead .plate{animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
.lead h1{font-family:var(--display);font-size:clamp(1.875rem,3.6vw,3.125rem);line-height:1.02;
  letter-spacing:-.02em;margin:.9rem 0;animation:rise .7s cubic-bezier(.2,.7,.3,1) .1s both}
.lead .stand{font-size:clamp(1.0625rem,1.35vw,1.1875rem);line-height:1.48;color:var(--ink-soft);
  animation:rise .7s cubic-bezier(.2,.7,.3,1) .18s both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.byline{font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:1.3rem;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.byline .who{color:var(--ink)}
.byline .cn{font-style:normal;letter-spacing:inherit;padding:0;
  border-bottom:1px dotted rgba(140,47,38,.55)}
.byline .cn:hover,.byline .cn:focus-visible{background:none;border-bottom-color:var(--seal)}
.byline .bar{color:var(--rule)}

.bay{padding-top:var(--bay)}
.band>.wrap.bay:first-child{padding-top:0}

/* standing blocks */
.status{display:inline-block;font-family:var(--mono);font-size:.5625rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.13em;color:var(--gloss);
  border:1px solid rgba(31,92,107,.4);padding:.3rem .6rem;margin-bottom:1rem}
.willcarry{margin:1.4rem 0 0;padding:0;list-style:none;max-width:34rem}
.willcarry li{padding:.7rem 0;border-top:1px solid var(--rule);font-size:1rem;line-height:1.55}
.willcarry li:last-child{border-bottom:1px solid var(--rule)}
.willcarry b{font-weight:500}
.thanks{max-width:34rem;border-left:2px solid var(--gloss);padding:.9rem 1.1rem;
  margin-top:1.1rem;font-size:1rem;line-height:1.55}
.thanks b{display:block;font-family:var(--mono);font-size:.625rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;color:var(--gloss);margin-bottom:.4rem}
.thanks[hidden]{display:none}
.modhead{font-family:var(--display);font-size:clamp(1.5rem,2.9vw,2.125rem);
  line-height:1.06;letter-spacing:-.018em;margin:0 0 .9rem}
/* eyebrow hanzi keep their own size when glossed — .cn .han would
   otherwise shrink them to the eyebrow's mono size */
.eyebrow .cn{line-height:1;border-bottom-color:rgba(140,47,38,.4)}
.eyebrow .cn .han{font-size:.9375rem}
.field{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.2rem}
.field input{flex:1 1 14rem;min-width:0;font-family:var(--body);font-size:1rem;padding:.7rem .85rem;
  border:1px solid var(--ink);background:var(--mount);color:var(--ink)}
.field input::placeholder{color:var(--ink-soft)}
.field button{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  padding:.7rem 1.1rem;cursor:pointer}
.field button:hover{background:var(--gloss);border-color:var(--gloss)}
.smallprint{font-family:var(--mono);font-size:.625rem;letter-spacing:.07em;color:var(--ink-soft);margin-top:.7rem}

/* article */
/* format cards — what the publication becomes. Format and intent only:
   no invented headlines, no dates. */
.formats{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);margin-top:2.25rem}
.fmt{background:var(--mount);padding:clamp(1.15rem,2.2vw,1.6rem);display:flex;flex-direction:column}
.fmt h3{font-family:var(--display);font-size:clamp(1.25rem,1.9vw,1.5rem);line-height:1.12;
  letter-spacing:-.012em;margin:0 0 .6rem}
.fmt p{font-size:.9375rem;line-height:1.55;color:var(--ink-soft);margin:0}
.fmt .spec{margin-top:auto;padding-top:1.1rem;font-family:var(--mono);font-size:.5625rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink);line-height:1.9}
.fmt .spec span{color:var(--ink-soft)}
/* The gloss lesson. It lives inside a modal because the earlier version
   pointed at live text: a fixed overlay keeps the coordinates it was handed,
   so any scroll left the pointer aimed at nothing. Here the pointer and the
   tooltip are children of the term, so their positions are structural. */
.modal .lead-in{font-size:1rem;line-height:1.55;color:var(--ink-soft);margin:0}
.stage{position:relative;margin-top:1.35rem;padding:1.15rem 1.1rem 7.25rem;
  background:var(--mount);overflow:hidden}
.stage .line{font-family:var(--body);font-size:1.0625rem;font-weight:300;
  line-height:1.6;color:var(--ink);margin:0}
.stage .t{position:relative;color:var(--seal);white-space:nowrap;
  border-bottom:1px dotted rgba(140,47,38,.5);padding:0 .05em;
  animation:st-term 6.4s ease-in-out infinite}
.stage .t .rom{font-style:italic}
.stage .t .han{font-family:var(--han)}
.stage .g{position:absolute;left:0;top:calc(100% + .55rem);width:15rem;
  background:var(--deep);color:var(--paper);font-family:var(--body);
  font-size:.8125rem;font-weight:300;line-height:1.5;letter-spacing:.004em;
  white-space:normal;text-align:left;padding:.6rem .75rem;
  box-shadow:0 10px 26px rgba(20,23,26,.32);opacity:0;
  animation:st-gloss 6.4s ease-in-out infinite}
.stage .g b{display:block;font-family:var(--mono);font-size:.625rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.09em;color:#D08C82;margin-bottom:.3rem}
.stage .g i{font-family:var(--han);font-style:normal}
.stage .p{position:absolute;left:0;top:0;width:17px;height:23px;opacity:0;
  animation:st-ptr 6.4s cubic-bezier(.28,.72,.14,1) infinite}
.stage .p svg{display:block;width:17px;height:23px;
  filter:drop-shadow(0 2px 6px rgba(20,23,26,.4))}
@keyframes st-ptr{
  0%{transform:translate(8rem,2.7rem);opacity:0}
  6%{transform:translate(8rem,2.7rem);opacity:1}
  30%{transform:translate(.45rem,.55rem);opacity:1}
  86%{transform:translate(.45rem,.55rem);opacity:1}
  94%{transform:translate(.45rem,.55rem);opacity:0}
  100%{transform:translate(8rem,2.7rem);opacity:0}}
@keyframes st-term{
  0%,30%{background:transparent;border-bottom-color:rgba(140,47,38,.5)}
  34%,84%{background:rgba(140,47,38,.1);border-bottom-color:var(--seal)}
  90%,100%{background:transparent;border-bottom-color:rgba(140,47,38,.5)}}
@keyframes st-gloss{
  0%,31%{opacity:0;transform:translateY(.25rem)}
  38%,84%{opacity:1;transform:translateY(0)}
  91%,100%{opacity:0;transform:translateY(.25rem)}}
.modal .ok{margin-top:1.35rem;width:100%;font-family:var(--mono);font-size:.625rem;
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  padding:.7rem 1.1rem;cursor:pointer}
.modal .ok:hover{background:var(--gloss);border-color:var(--gloss)}
@media (prefers-reduced-motion:reduce){
  .stage .p{display:none}
  .stage .g{opacity:1;animation:none}
  .stage .t{animation:none;background:rgba(140,47,38,.1)}}
/* Signal invitation. Fires on the front page only, once per visit, and
   never over a reader who has already subscribed.
   Every child is styled by class, never by element: .modal p would beat
   .status and .smallprint on specificity and silently eat their margins. */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  padding:var(--gut);background:rgba(20,23,26,.5);
  -webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);
  opacity:0;visibility:hidden;
  transition:opacity .2s ease-in,visibility .2s ease-in,backdrop-filter .2s ease-in}
/* enter slowly, leave quickly: the longer easing lives on .on, so the
   short one above applies on the way out */
.modal.on{opacity:1;visibility:visible;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:opacity .45s cubic-bezier(.22,.9,.28,1),visibility .45s,
             backdrop-filter .55s cubic-bezier(.22,.9,.28,1)}
.modal .box{--mount:#E7E9E4;position:relative;width:100%;max-width:30rem;
  background:var(--band-white);color:var(--ink);
  padding:clamp(1.75rem,4vw,2.25rem);
  box-shadow:0 24px 60px rgba(20,23,26,.35);
  transform:translateY(16px) scale(.985);transition:transform .24s ease-in}
.modal.on .box{transform:none;
  transition:transform .5s cubic-bezier(.18,.86,.26,1) .07s}

.modal .x{position:absolute;top:.5rem;right:.5rem;width:2.5rem;height:2.5rem;
  display:grid;place-items:center;background:none;border:0;cursor:pointer;
  font-family:var(--mono);font-size:.8125rem;line-height:1;color:var(--ink-soft)}
.modal .x:hover{color:var(--seal)}

.modal .status{margin:0 0 .8rem}
.modal h2{font-family:var(--display);font-size:clamp(1.5rem,2.8vw,1.75rem);line-height:1.1;
  letter-spacing:-.014em;margin:0 0 .8rem}
.modal .pitch{font-size:1rem;line-height:1.55;color:var(--ink-soft);margin:0}

/* stacked on purpose: a row would wrap the moment the mono button text
   reflowed, and a full-width field reads as deliberate in a narrow box */
.modal .field{flex-direction:column;gap:.5rem;margin-top:1.3rem}
/* the shared rule is flex:1 1 14rem — harmless on a row, but in a column
   14rem becomes the basis on the vertical axis and the field grows to
   224px tall. Reset the flex and let padding set the height. */
.modal .field input,.modal .field button{width:100%;flex:0 0 auto}
.modal .field button{padding:.75rem 1.1rem}

.modal .thanks{max-width:none;font-size:.9375rem;margin-top:1.3rem}
.modal .smallprint{margin-top:.8rem}
.modal .later{display:block;margin-top:1.4rem;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--mono);font-size:.625rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-soft);border-bottom:1px dotted rgba(91,96,104,.5)}
.modal .later:hover{color:var(--ink)}
.andmore{font-family:var(--body);font-size:.9375rem;font-weight:300;
  line-height:1.5;letter-spacing:.004em;color:var(--ink-soft);
  margin:clamp(1rem,2vw,1.4rem) 0 0}
@media (max-width:820px){.formats{grid-template-columns:1fr}}

/* letters — a curated page, not a thread. Nothing publishes itself.
   The original is always primary; a translation is stacked beneath it in
   the teal annotation layer and labelled as machine output. Red stays
   Chinese script, teal stays annotation. */


.article{padding-top:0}
/* press still, 1200px wide; 1000px survive the minimap crop. At 34rem the
   frame is ~523px, so a 2x screen wants 1046 and gets 1000 — effectively
   sharp, and a downscale rather than a stretch. */
.article .plate{margin:0 auto;max-width:34rem}
.article .body{font-size:1.1875rem;line-height:1.68;max-width:36rem;margin:2.5rem auto 0}
.article .body>p:first-of-type::first-letter{font-family:var(--display);float:left;font-size:3.1em;
  line-height:.84;padding:.06em .1em 0 0;color:var(--seal)}
.article .body h4{font-family:var(--display);font-size:clamp(1.3125rem,2.1vw,1.625rem);
  font-weight:400;line-height:1.16;letter-spacing:-.012em;color:var(--ink);
  margin:2.9rem 0 1rem;padding-top:1.1rem;border-top:1px solid var(--rule)}
.article .body h4:first-child{margin-top:0;border-top:0;padding-top:0}
.pull{font-family:var(--display);font-size:clamp(1.375rem,2.4vw,1.75rem);line-height:1.24;
  letter-spacing:-.01em;color:var(--ink);margin:2.2rem 0;padding-left:1.1rem;border-left:2px solid var(--seal)}
/* Chinese concepts. Red is now reserved for Chinese script and editorial
   marking; the price moved to ink so the color means one thing. The
   reference is zhupi, the vermilion annotation traditionally added to a
   Chinese text in the margin. Romanisation is italic because that is
   correct practice for transliterated words; the hanzi stay upright,
   since Noto Serif SC has no true italic and browsers fake a bad slant. */
.cn{position:relative;color:var(--seal);border-bottom:1px dotted rgba(140,47,38,.45);
  cursor:help;white-space:nowrap;padding:0 .05em;
  transition:border-color .15s,background-color .15s}
.cn .rom{font-style:italic}
.cn .han{font-family:var(--han);font-style:normal;font-size:.97em}
.cn:focus,.cn:focus-visible{border-bottom-color:var(--seal);background:rgba(140,47,38,.07)}
@media (hover:hover){
  .cn:hover{border-bottom-color:var(--seal);background:rgba(140,47,38,.07)}
}
/* The gloss is a pseudo-element, so it needs no JavaScript to appear.
   attr() pulls the pinyin and the definition straight out of the markup. */
.cn::after{
  content:attr(data-py) "  \00b7  " attr(data-def);
  position:absolute;left:50%;bottom:calc(100% + .5rem);
  transform:translateX(-50%) translateY(.3rem);
  width:max-content;max-width:min(21rem,76vw);
  white-space:normal;text-align:left;text-transform:none;
  font-family:var(--body);font-size:.8125rem;font-weight:300;line-height:1.5;
  letter-spacing:.004em;font-style:normal;
  background:var(--deep);color:var(--paper);padding:.7rem .85rem;
  box-shadow:0 8px 26px rgba(20,23,26,.28);z-index:60;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .15s,transform .15s,visibility .15s}
.cn:focus::after,.cn:focus-visible::after{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* Hover opens it only on a device that really hovers. On touch, :hover
   latches after a tap, which kept the box open no matter what focus did. */
@media (hover:hover){
  .cn:hover::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
}
/* terms sitting at the left edge anchor left instead of centring,
   so the box cannot run off the page */
.eyebrow .cn::after,.byline .cn::after{left:0;transform:translateY(.3rem)}
.eyebrow .cn:hover::after,.eyebrow .cn:focus::after,
.byline .cn:hover::after,.byline .cn:focus::after{transform:translateY(0)}
.endmark .cn::after{left:auto;right:0;transform:translateY(.3rem)}
/* the masthead seal sits at the top of the page, so its gloss opens
   downward instead of upward */
.brand .cn::after{top:calc(100% + .55rem);bottom:auto;left:0;transform:translateY(-.3rem)}
.brand .cn:hover::after,.brand .cn:focus::after{transform:translateY(0)}
.footmark .cn::after{left:0;transform:translateY(.3rem)}
.footmark .cn:hover::after,.footmark .cn:focus::after{transform:translateY(0)}
/* the dotted cue needs to be visible on the dark footer */
.footmark .cn{border-bottom-color:rgba(181,86,74,.6)}
.footmark .cn:hover,.footmark .cn:focus{border-bottom-color:#B5564A;background:rgba(181,86,74,.12)}
.endmark .cn:hover::after,.endmark .cn:focus::after{transform:translateY(0)}
.humanmark{max-width:34rem;margin:1.6rem auto 0;text-align:center;font-family:var(--mono);
  font-size:.6875rem;line-height:1.9;letter-spacing:.05em;color:var(--ink-soft)}
.humanmark b{color:var(--ink);font-weight:500}
.endmark{text-align:center;font-family:var(--han);color:var(--seal);font-size:1.1rem;
  margin:clamp(2.25rem,4vw,3rem) 0 0;padding-bottom:clamp(1.5rem,3vw,2.5rem)}

/* stories list */
.stack{margin:0;padding:0;list-style:none}
.stack li{border-top:1px solid var(--rule);padding:1.35rem 0}
.stack li:last-child{border-bottom:1px solid var(--rule)}
.stack li>a{display:grid;grid-template-columns:5.5rem 1fr;gap:1.35rem;align-items:start}
.stack h3{font-family:var(--display);font-size:clamp(1.125rem,1.6vw,1.4375rem);line-height:1.14;margin:.35rem 0 .4rem}
.stack p{color:var(--ink-soft);font-size:.9375rem;margin:0}
.stack a:hover h3{color:var(--gloss)}

/* doc pages */
/* About and Practice are documents. One centred column — centred rather
   than left-aligned, so the measure reads as a decision instead of a
   ribbon stranded at the edge. Separation comes from the band tone and
   the eyebrow; adding rules on top of both was one separator too many. */
.doc{max-width:38rem;margin:0 auto}
.doc h1{font-family:var(--display);font-size:clamp(2.125rem,4.8vw,3.375rem);line-height:1.04;letter-spacing:-.02em;margin:0 0 1.3rem}
.doc h2{font-family:var(--display);font-size:clamp(1.3125rem,2.1vw,1.625rem);line-height:1.12;letter-spacing:-.012em;margin:0 0 .9rem}
.doc .lede{font-size:1.25rem;line-height:1.45;margin-bottom:1.2rem;
  font-weight:600;letter-spacing:-.006em}
.signoff{margin-top:clamp(2.5rem,4.5vw,3.5rem);padding-top:1.4rem;
  border-top:1px solid var(--rule);font-family:var(--mono);font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.11em;line-height:2;color:var(--ink-soft)}
.signoff a{color:var(--gloss)}
.doc>section{padding-top:clamp(2.5rem,4.5vw,3.5rem)}
.band>.wrap>.doc>section:first-child{padding-top:0}
.rows{margin:0;padding:0;list-style:none}
.rows li{padding:.85rem 0;border-top:1px solid var(--rule)}
.rows li:last-child{border-bottom:1px solid var(--rule)}
.rows b{font-weight:500;display:block}
.rows span{color:var(--ink-soft);font-size:.9375rem}
.nums{margin:0;padding:0;list-style:none;counter-reset:n}
.nums li{counter-increment:n;position:relative;padding:.8rem 0 .8rem 2.6rem;border-top:1px solid var(--rule)}
.nums li:last-child{border-bottom:1px solid var(--rule)}
.nums li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.9rem;
  font-family:var(--mono);font-size:.6875rem;color:var(--gloss)}
.price{font-family:var(--display);font-size:clamp(2.5rem,5.5vw,3.5rem);line-height:1;color:var(--ink);
  letter-spacing:-.02em;margin:0 0 .5rem}
.terms{font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-soft)}
table{width:100%;border-collapse:collapse;font-size:.9375rem;margin-bottom:1.25rem}
th{text-align:left;font-family:var(--mono);font-size:.625rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.11em;color:var(--ink-soft);padding:0 1rem .5rem 0;border-bottom:1px solid var(--rule)}
td{padding:.65rem 1rem .65rem 0;border-bottom:1px solid var(--rule);color:var(--ink-soft)}
.doc a[href],.article a[href]{color:var(--gloss);border-bottom:1px solid rgba(31,92,107,.35)}
.doc a[href]:hover,.article a[href]:hover{border-color:var(--gloss)}

/* footer */
footer.foot{background:var(--deep);color:rgba(237,239,234,.7);margin-top:0;padding:var(--bay) 0 3rem}
footer.foot a{color:rgba(237,239,234,.7);border-bottom:1px solid rgba(237,239,234,.25)}
footer.foot a:hover{color:var(--paper);border-color:var(--paper)}
.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--gut)}
/* Two rows that line up across all three columns: the label box is the
   same height as the wordmark, and the links start on the same baseline
   as the tagline beside them. */
.footgrid h4{font-family:var(--mono);font-size:.625rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;color:rgba(237,239,234,.45);margin:0;
  height:2.125rem;display:flex;align-items:center}
.footgrid ul{margin:.9rem 0 0;padding:0;list-style:none;font-size:.9375rem;line-height:1.6}
.footgrid li{margin-bottom:.5rem}
.footgrid li:last-child{margin-bottom:0}
.footmark{display:flex;align-items:center;gap:.55rem}
.footgrid .wm{height:2.125rem;width:auto;display:block}
.footgrid .dao{font-family:var(--han);color:#B5564A;font-size:1rem;line-height:1;
  margin-top:.15rem}
.footgrid p{font-size:.9375rem;line-height:1.6;margin-top:.9rem;max-width:26rem}
.fine{font-family:var(--mono);font-size:.625rem;letter-spacing:.09em;color:rgba(237,239,234,.4);margin-top:2.5rem;line-height:1.9}



@media (max-width:820px){
  .leadgrid,.footgrid{grid-template-columns:1fr}
  .stack li>a{grid-template-columns:1fr}
  .stack .plate{max-width:9rem}
  .topbar{flex-wrap:wrap;gap:.9rem}
  .brand .wm{height:1.5rem}
  .footgrid .wm{height:1.875rem}
  nav.main{margin-left:0;width:100%;order:3}
  nav.main ul{gap:1rem}
  .sub{margin-left:auto}
}
@media (max-width:700px){
  /* Horizontally the box spans the screen, so it can never run off the edge
     or add scroll width. Vertically it follows the term: --gy is set on tap,
     and min() pulls it back up when the term sits near the bottom. */
  .cn::after,
  .eyebrow .cn::after,.byline .cn::after,.brand .cn::after,
  .footmark .cn::after,.endmark .cn::after{
    position:fixed;left:1rem;right:1rem;bottom:auto;
    top:min(var(--gy,35dvh),calc(100dvh - 9.5rem));
    width:auto;max-width:none;transform:translateY(.7rem);
    transition:opacity .55s cubic-bezier(.4,0,.5,1),
               transform .55s cubic-bezier(.4,0,.5,1),visibility .55s}
  .cn:hover::after,.cn:focus::after,.cn:focus-visible::after,
  .eyebrow .cn:hover::after,.eyebrow .cn:focus::after,
  .byline .cn:hover::after,.byline .cn:focus::after,
  .brand .cn:hover::after,.brand .cn:focus::after,
  .footmark .cn:hover::after,.footmark .cn:focus::after,
  .endmark .cn:hover::after,.endmark .cn:focus::after{
    transform:translateY(0);
    transition:opacity .34s ease-out,
               transform .4s cubic-bezier(.2,.85,.3,1),visibility .34s}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}