/* The Content Surgeon: core.css (DESIGN-SPEC 9.2), every page. Tokens only, mobile first, no ids */

/* ---------- Fonts (2.2) ---------- */
@font-face{font-family:"Newsreader";src:url("/assets/fonts/newsreader-roman.woff2") format("woff2");font-weight:340 600;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/assets/fonts/newsreader-italic.woff2") format("woff2");font-weight:300 600;font-style:italic;font-display:swap}
/* 3.15.5: Newsreader's + and ~ raised onto the figures (tools/build_num_ops.py) */
@font-face{font-family:"Newsreader";src:url("/assets/fonts/newsreader-ops.woff2") format("woff2");font-weight:340 600;font-style:normal;font-display:block;unicode-range:U+2B,U+7E}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/plex-sans-roman.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/plex-sans-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/plex-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* Metric-matched fallbacks (computed from the built fonts, see tools/build_fonts.py) */
@font-face{font-family:"Newsreader Fallback";src:local("Georgia");size-adjust:91.8%;ascent-override:80.1%;descent-override:28.9%;line-gap-override:0%}
/* Phones: 90.5% keeps Newsreader's line breaks (measured at 360-430 px); same effective metrics */
@font-face{font-family:"Newsreader Phone Fallback";src:local("Georgia");size-adjust:90.5%;ascent-override:81.25%;descent-override:29.32%;line-gap-override:0%}
@font-face{font-family:"Newsreader Display Fallback";src:local("Georgia");size-adjust:100.3%;ascent-override:73.3%;descent-override:26.4%;line-gap-override:0%}
/* Display below 1024: Georgia at 100.3% runs 5-7% wide, so 93.5% and 95%; same effective metrics */
@font-face{font-family:"Newsreader Display Phone Fallback";src:local("Georgia");size-adjust:93.5%;ascent-override:78.63%;descent-override:28.32%;line-gap-override:0%}
@font-face{font-family:"Newsreader Display Tablet Fallback";src:local("Georgia");size-adjust:95%;ascent-override:77.39%;descent-override:27.87%;line-gap-override:0%}
/* Italic: Georgia Italic at the roman's size-adjust x 0.90 (0.94 phone display) */
@font-face{font-family:"Newsreader Fallback";src:local("Georgia Italic"),local("Georgia-Italic");font-style:italic;size-adjust:82.4%;ascent-override:89.24%;descent-override:32.2%;line-gap-override:0%}
@font-face{font-family:"Newsreader Phone Fallback";src:local("Georgia Italic"),local("Georgia-Italic");font-style:italic;size-adjust:81.8%;ascent-override:89.89%;descent-override:32.44%;line-gap-override:0%}
@font-face{font-family:"Newsreader Display Fallback";src:local("Georgia Italic"),local("Georgia-Italic");font-style:italic;size-adjust:90.3%;ascent-override:81.42%;descent-override:29.32%;line-gap-override:0%}
@font-face{font-family:"Newsreader Display Phone Fallback";src:local("Georgia Italic"),local("Georgia-Italic");font-style:italic;size-adjust:87.7%;ascent-override:83.83%;descent-override:30.19%;line-gap-override:0%}
@font-face{font-family:"Newsreader Display Tablet Fallback";src:local("Georgia Italic"),local("Georgia-Italic");font-style:italic;size-adjust:85.5%;ascent-override:85.99%;descent-override:30.97%;line-gap-override:0%}
/* Mono: scaled to Plex's 0.6 em advance and 1.025 / 0.275 metrics */
@font-face{font-family:"Plex Mono Fallback";src:local("Consolas");size-adjust:109.13%;ascent-override:93.93%;descent-override:25.2%;line-gap-override:0%}
@font-face{font-family:"Plex Mono Menlo Fallback";src:local("Menlo-Regular"),local("Menlo");size-adjust:99.66%;ascent-override:102.85%;descent-override:27.59%;line-gap-override:0%}
@font-face{font-family:"Plex Mono Courier Fallback";src:local("Courier New"),local("CourierNewPSMT"),local("Liberation Mono"),local("Cousine");size-adjust:100%;ascent-override:102.5%;descent-override:27.5%;line-gap-override:0%}
@font-face{font-family:"Plex Sans Fallback";src:local("Arial");size-adjust:101.6%;ascent-override:100.9%;descent-override:27.1%;line-gap-override:0%}
/* Captions: Arial runs 1% wide of Plex at 15 px */
@font-face{font-family:"Plex Sans Caption Fallback";src:local("Arial");size-adjust:100.6%;ascent-override:101.9%;descent-override:27.37%;line-gap-override:0%}
/* Android has no Arial: Roboto 3.015, same build_fonts.py method (T36) */
@font-face{font-family:"Plex Sans Android Fallback";src:local("Roboto"),local("Roboto-Regular");size-adjust:101.2%;ascent-override:101.3%;descent-override:27.2%;line-gap-override:0%}

/* ---------- Tokens (2.9) ---------- */
:root{
  /* Colour */
  --paper:#F4F2ED; --paper-2:#EAE6DE; --plate:#E4DFD6; --paper-3:#D8D2C7;
  --ink:#141412; --ink-2:#45433F; --ink-3:#66635D;
  --rule:rgba(20,20,18,.15); --rule-2:rgba(20,20,18,.32);
  --red:#C8342C; --red-deep:#A62A23; --red-press:#8E231D; --red-tint:rgba(200,52,44,.16);
  --ground:#141412; --on-ink:#EDEAE3; --on-ink-2:#B3AEA4; --on-ink-rule:rgba(237,234,227,.2); --red-on-ink:#EC6B60;
  --focus:var(--red); --focus-on-ink:var(--red-on-ink); --scrim:rgba(20,20,18,.6);
  /* The three raw colours section 3 writes, tokenised */
  --white:#FFFFFF; --on-ink-line:rgba(237,234,227,.5); --on-ink-link:rgba(237,234,227,.4);

  /* Families */
  --serif:"Newsreader","Newsreader Fallback",Georgia,"Times New Roman",serif;
  --serif-display:"Newsreader","Newsreader Display Fallback",Georgia,serif;
  --sans:"IBM Plex Sans","Plex Sans Fallback","Plex Sans Android Fallback",Arial,system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans-cap:"IBM Plex Sans","Plex Sans Caption Fallback","Plex Sans Android Fallback",Arial,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono","Plex Mono Fallback","Plex Mono Menlo Fallback","Plex Mono Courier Fallback",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Type scale */
  --fs-display:clamp(3rem,1.7rem + 5.333vw,6.5rem);
  --fs-h1:clamp(2.5rem,1.571rem + 3.81vw,5rem);
  --fs-h2:clamp(2.125rem,1.35rem + 3.1vw,4.25rem);
  --fs-h2-quiet:clamp(1.75rem,1.2rem + 2vw,2.75rem);
  --fs-h3:clamp(1.375rem,1.1rem + 1.1vw,2rem);
  --fs-h4:clamp(1.1875rem,1.05rem + .55vw,1.5rem);
  --fs-dek:clamp(1.25rem,1.05rem + .75vw,1.625rem);
  --fs-quote:clamp(1.5rem,1.15rem + 1.4vw,2.5rem);
  --fs-read:clamp(1.1875rem,1.1rem + .3vw,1.3125rem);
  --fs-body:clamp(1.0625rem,1rem + .2vw,1.1875rem);
  --fs-small:1rem; --fs-cap:.9375rem; --fs-mono:.8125rem;
  --fs-num:clamp(2.125rem,1.5rem + 1.8vw,3.25rem);
  --fs-num-xl:clamp(3.75rem,1.2rem + 8.2vw,10.5rem);

  /* Space */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;
  --sec:clamp(3.5rem,1.829rem + 6.857vw,8rem);
  /* Bar to the first running head on every title page */
  --title-top:clamp(20px,3vw,40px);
  --gap-rh:clamp(1.5rem,.8rem + 2.9vw,4rem);
  --gap-head:clamp(1.75rem,1rem + 3vw,4.5rem);

  /* Grid */
  --wrap:1440px; --margin:clamp(16px,4.45vw,64px); --gutter:clamp(16px,1.67vw,24px);
  --measure-read:34em; --measure-ui:36em; --measure-dek:30em;
  --bar-h:68px; --strip-h:36px;
  /* Bar logo art height: 28 phones, 34 from 720, 38 from 1024 */
  --logo-h:34px;

  /* Shape */
  --r-btn:2px;
  --hair:1px solid var(--rule); --hair-2:1px solid var(--rule-2);
  --rule-ink:1px solid var(--ink); --rule-on-ink:1px solid var(--on-ink-rule);

  /* Layers */
  --z-content:1; --z-progress:49; --z-bar:50; --z-menu:60; --z-skip:100;

  /* Motion */
  --ease:cubic-bezier(.2,.7,.3,1); --ease-in:cubic-bezier(.55,0,.75,0);
  --t-fast:140ms; --t:260ms; --t-reveal:600ms; --t-draw:800ms; --t-vt-out:120ms; --t-vt-in:240ms;
  --rise:14px; --stagger:60ms;
  /* Link rules draw in, and retract faster (CORE-1) */
  --t-ul-in:180ms; --t-ul-out:140ms;
}
@media (max-width:719px){ :root{ --bar-h:60px; --logo-h:28px; --serif:"Newsreader","Newsreader Phone Fallback",Georgia,"Times New Roman",serif; --serif-display:"Newsreader","Newsreader Display Phone Fallback",Georgia,serif; --t-reveal:450ms; --rise:10px; } }
@media (min-width:720px) and (max-width:1023px){ :root{ --serif-display:"Newsreader","Newsreader Display Tablet Fallback",Georgia,serif; } }
@media (min-width:1024px){ :root{ --logo-h:38px; } }

/* ---------- Base (2.10) ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;font-synthesis:none;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/1.6 var(--sans);
  font-kerning:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;overflow-wrap:break-word}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4,p,dl,dd,figure,blockquote,ol,ul,table{margin:0}
h1,h2,h3,h4{font-weight:400}
ol,ul{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none !important}
/* Jumps and focus stop below the bar (WCAG 2.4.11) */
html{scroll-padding-top:calc(var(--bar-h) + 16px)}
::selection{background:var(--red-tint);color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.on-ink :focus-visible{outline-color:var(--focus-on-ink)}
main:focus{outline:none}
h1,h2,h3,h4,.dek,.qa__q{text-wrap:balance} p,li,dd,figcaption,td{text-wrap:pretty}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--margin)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nw{white-space:nowrap}
.arw{font-family:var(--sans);display:inline-block}
.skip{position:absolute;left:12px;top:-80px;z-index:var(--z-skip);background:var(--ink);color:var(--paper);padding:15px 16px;font:500 var(--fs-cap)/1 var(--sans);text-decoration:none}
.skip:focus{top:12px}
/* The dark ground (home Book, footer, any .on-ink block) */
.on-ink{background:var(--ground);color:var(--on-ink)}
.on-ink .dek{color:var(--on-ink-2)}

/* ---------- 3.5 Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:0 22px;border:1px solid var(--ink);border-radius:var(--r-btn);font:500 .9375rem/1.1 var(--sans);letter-spacing:.005em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn--ink:active{background:var(--red-press);border-color:var(--red-press)}
.btn--line{background:transparent;color:var(--ink);border-color:var(--ink-3)}
.btn--line:hover{border-color:var(--ink);background:var(--paper-2)}
.btn--line:active{background:var(--paper-3)}
.btn--paper{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}
.btn--paper:hover{background:var(--white);border-color:var(--white)}
.btn--paper:active{background:var(--paper-2);border-color:var(--paper-2)}
.btn--line-on-ink{background:transparent;color:var(--on-ink);border-color:var(--on-ink-line)}
.btn--line-on-ink:hover,.btn--line-on-ink:active{border-color:var(--on-ink)}
.btn--lg{min-height:52px;padding:0 26px;font-size:1rem}
.btn--block{width:100%}
/* Phones: a long label wraps inside its button at enlarged text (T27) */
@media (max-width:719px){.btn--lg,.btn--block{white-space:normal;text-align:center}}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
/* Arrow nudge: the glyph grammar (CORE-1) */

/* ---------- 3.6 Links ---------- */
.link{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:var(--rule-2);
  transition:text-decoration-color var(--t-fast),text-decoration-thickness var(--t-fast)}
.link:hover{text-decoration-color:var(--red);text-decoration-thickness:2px}
.link:active{text-decoration-color:var(--red-deep)}
.link--quiet{font-size:var(--fs-small);font-weight:500}
.link--on-ink{color:var(--on-ink);text-decoration-color:var(--on-ink-link)}
.link--on-ink:hover{text-decoration-color:var(--red-on-ink)}
/* An arrow follows a margin, as an inline-block: the underline ends with the word */
.link > .arw{margin-left:.4em}
/* Floored at the 13 px text floor */
.ext{display:inline-block;margin-left:.18em;font-family:var(--sans);font-size:max(.86em,var(--fs-mono));color:var(--ink-3);text-decoration:none}
.link-btn{padding:0;border:0;background:none;cursor:pointer;min-height:44px}

/* ---------- 3.1 Utility strip ---------- */
.strip{display:none}
@media (min-width:1024px){
  .strip{display:block;border-bottom:var(--hair);font:400 var(--fs-mono)/1 var(--mono);color:var(--ink-3)}
  .strip__in{display:flex;justify-content:space-between;align-items:center;gap:24px;height:var(--strip-h)}
  /* Hit area: a strip-high band, so the ring stays inside the strip */
  .strip a{position:relative;text-decoration:none}
  .strip a::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--strip-h);transform:translateY(-50%)}
  .strip a:is(:hover,:active){color:var(--ink)}
}
@media (min-width:1024px) and (hover:none){.strip a:hover{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:.25em}}
/* Touch tablets: a 44 px strip for 44 px targets */
@media (min-width:1024px) and (pointer:coarse){:root{--strip-h:44px}}

/* ---------- 3.2 Header bar ---------- */
.bar{position:sticky;top:0;z-index:var(--z-bar);background:var(--paper);border-bottom:var(--hair)}
/* A size container, for the CTA at enlarged text (T27) */
.bar__in{display:flex;align-items:center;gap:20px;height:var(--bar-h);container:bar / inline-size}
/* The PNG carries ~20% transparent padding; crop to its art box (171-1409 x 76-320 of 1584x396). */
.brand{--h:var(--logo-h);--pad:0px;display:block;position:relative;overflow:hidden;flex:none;box-sizing:content-box;height:var(--h);width:calc(var(--h) * 1238 / 244)}
.brand img{position:absolute;max-width:none;width:auto;height:calc(var(--h) * 396 / 244);left:calc(var(--h) * -171 / 244);top:calc(var(--pad) + var(--h) * -76 / 244)}
/* 44 px hit area from the PNG's own padding; no layout shift */
a.brand{--pad:max(0px,calc((44px - var(--h)) / 2));padding-block:var(--pad);margin-block:calc(var(--pad) * -1)}
.bar__rh,.nav,.bar__wa{display:none}
.bar__cta{flex:none;margin-left:auto;min-height:44px;padding:0 16px}
/* Shipped as a link to the footer's Explore list; core.js makes it the sheet's button */
.menu-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 4px;border:0;background:none;cursor:pointer;font:500 var(--fs-mono)/1 var(--mono);color:var(--ink);text-decoration:none}
.menu-btn:active{color:var(--red-deep)}
.menu-btn__close{display:none}
.menu-btn[aria-expanded="true"] .menu-btn__open{display:none}
.menu-btn[aria-expanded="true"] .menu-btn__close{display:inline}
@media (max-width:719px){.bar__in{gap:12px}.bar__cta{font-size:.875rem;padding:0 14px}}
/* No room for the CTA beside logo and Menu: the Contents sheet carries it */
@container bar (width < calc(142px + 10.6875rem)){.bar__cta{display:none}.menu-btn{margin-left:auto}}
@media (min-width:1024px){
  /* Enlarged text wraps the nav inside a taller bar */
  .bar__in{height:auto;min-height:var(--bar-h)}
  .nav{display:flex;flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end;column-gap:28px;min-width:0;margin-left:auto}
  .nav a{position:relative;padding:12px 0;font:400 .9375rem/1 var(--sans);color:var(--ink-2);text-decoration:none;transition:color var(--t-fast) var(--ease)}
  /* The nav's 1 px rule, drawn from the side the mouse came in */
  .nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:var(--ul-o,left);transition:transform var(--t-ul-out) var(--ease-in)}
  /* aria-current: drawn from the left at the house pace */
  .nav a:hover,.nav a:active,.nav a[aria-current]{color:var(--ink)}
  .nav a[aria-current]::after{transform:none;transform-origin:left;transition:transform var(--t) var(--ease)}
  .bar__cta{margin-left:0}
  .menu-btn{display:none}
}
/* Touch tablets: nav targets 44 x 45 px or more; no word moves */
@media (min-width:1024px) and (pointer:coarse){
  .nav{column-gap:12px}
  .nav a{min-width:44px;padding:15px 8px;text-align:center}
  .nav a::after{bottom:9px;left:8px;right:8px}
}
@media (min-width:1280px){
  /* The head takes only free bar space and ends in an ellipsis (T27) */
  .bar__rh{display:block;flex:1 1 0;min-width:0;max-width:none;padding-left:20px;border-left:var(--hair);font:400 var(--fs-mono)/1.3 var(--mono);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bar__rh b{font-weight:500;color:var(--red-deep);margin-right:.55em}
  .bar__wa{display:inline-flex;align-items:center;min-height:44px;font:500 .9375rem/1 var(--sans);color:var(--ink-2);text-decoration:none}
  .bar__wa:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:.3em}
}

/* ---------- 3.3 Contents sheet (mobile menu) ---------- */
.menu{position:fixed;inset:var(--bar-h) 0 0 0;z-index:var(--z-menu);background:var(--paper);overflow-y:auto;overscroll-behavior:contain;border-top:var(--hair)}
.menu__in{padding-block:20px 40px}
.menu__label{font:400 var(--fs-mono)/1.4 var(--mono);color:var(--ink-3);padding-bottom:10px;border-bottom:var(--rule-ink)}
.menu__list li{border-bottom:var(--hair)}
.menu__list a{display:block;min-height:44px;padding:14px 0 12px;font:400 1.75rem/1.1 var(--serif);letter-spacing:-.01em;text-decoration:none}
.menu__list a:hover,.menu__list a:active{color:var(--red-deep)}
/* The page or section you are in, as the nav marks it */
.menu__list a[aria-current]{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.18em}
.menu .btn{margin-top:28px}
.menu__contact{display:grid;gap:14px;margin-top:28px}
.menu__contact dt{font:400 var(--fs-mono)/1.4 var(--mono);color:var(--ink-3)}
.menu__contact dd{font-size:1.0625rem}
.menu__contact a{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:.22em}
/* 44 px ::after bands; the ring hugs the text */
.menu__contact a,.appt__alt a{position:relative}
.menu__contact a::after,.appt__alt a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
html.is-locked{overflow:hidden}
/* One primary per view (3.5): the bar's CTA steps out while the sheet is open */
.bar__in:has(> .menu-btn[aria-expanded="true"]) > .bar__cta{visibility:hidden}
@media (min-width:1024px){.menu{display:none}}

/* ---------- 3.4 Footer ---------- */
/* Home: the footer continues the dark Book section */
.foot{background:var(--ground);color:var(--on-ink-2);padding:var(--gap-rh) 0 28px}
main:has(> .on-ink:last-child) + .foot{padding-top:0}
.foot__top{display:grid;row-gap:28px;padding-top:36px;border-top:1px solid var(--on-ink)}
.brand--foot{--h:44px}
.brand--foot img{filter:invert(1);opacity:.93}
.foot__brand p{margin-top:14px;font:400 var(--fs-mono)/1.5 var(--mono)}
.foot__col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:start;column-gap:16px}
.foot__col--contact{grid-template-columns:minmax(0,1fr)}
.foot__h{grid-column:1 / -1;margin-bottom:4px;font:400 var(--fs-mono)/1.4 var(--mono);color:var(--on-ink-2)}
.foot__col a{display:inline-flex;align-items:center;max-width:100%;min-height:44px;overflow-wrap:anywhere;font-size:var(--fs-small);color:var(--on-ink);text-decoration:none}
.foot__col a:active{color:var(--red-on-ink)}
.foot__bottom{display:flex;flex-direction:column;gap:6px;margin-top:36px;padding-top:14px;border-top:var(--rule-on-ink);font:400 var(--fs-mono)/1.5 var(--mono)}
.foot__bottom p{text-wrap:balance}
.foot__bottom a{color:var(--on-ink);text-decoration:underline;text-decoration-color:var(--on-ink-link);text-underline-offset:.22em}
/* Touch keeps the underline hovers; a mouse draws the rule */
@media (hover:none){
  .foot__col a:hover{text-decoration:underline;text-decoration-color:var(--red-on-ink);text-underline-offset:.22em}
  .foot__bottom a:hover{text-decoration-color:var(--red-on-ink)}
}
/* 720 to 1279: brand row over three columns; 1280 up: brand 1-5, columns from 7 */
@media (min-width:720px){
  .foot__top{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:32px}
  .foot__brand{grid-column:1 / -1}
  .foot__col{grid-column:span 4;display:flex;flex-direction:column;align-items:flex-start}
  .foot__bottom{margin-top:64px}
}
/* 1024 up: copyright over location left, colophon over credit right */
@media (min-width:1024px){
  .foot__bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;grid-auto-flow:column;column-gap:32px;row-gap:4px}
  .foot__bottom p:nth-child(n+3){text-align:right}
}
@media (min-width:1024px) and (pointer:fine){.foot__col{gap:9px}.foot__col a{min-height:0}}
@media (min-width:1280px){
  .foot__brand{grid-column:1 / span 5}
  .foot__col{grid-column:span 2}
  .foot__col:first-of-type{grid-column:7 / span 2}
}

/* ---------- 3.7 Running head: the section opener ---------- */
.rh{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:2px;padding-top:11px;border-top:var(--rule-ink);margin-bottom:var(--gap-rh);font:400 var(--fs-mono)/1.45 var(--mono);color:var(--ink-3)}
.rh__num{color:var(--red-deep);font-weight:500}
.rh__name{color:var(--ink);font-weight:500}
a.rh__name{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:.24em}
@media (hover:none){a.rh__name:hover{text-decoration-color:var(--red)}}
.rh__note{margin-left:auto;text-align:right}
@media (max-width:719px){.rh__note{flex-basis:100%;margin-left:0;text-align:left}}
.on-ink .rh{border-top-color:var(--on-ink);color:var(--on-ink-2)}
.on-ink .rh__name{color:var(--on-ink)} .on-ink .rh__num{color:var(--red-on-ink)}

/* ---------- 3.8 Type and section head ---------- */
.h1{font:360 var(--fs-h1)/.98 var(--serif-display);letter-spacing:-.024em;overflow-wrap:anywhere}
.h2{font:380 var(--fs-h2)/1.02 var(--serif-display);letter-spacing:-.022em;overflow-wrap:break-word}
/* The quiet opener: notices, not chapters (28 px at 390, 44 px at 1440) */
.h2--quiet{font-size:var(--fs-h2-quiet);letter-spacing:-.015em;max-width:18em}
.h3{font:400 var(--fs-h3)/1.15 var(--serif);letter-spacing:-.01em}
.h4{font:400 var(--fs-h4)/1.25 var(--serif);letter-spacing:-.005em}
.dek{font:400 var(--fs-dek)/1.38 var(--serif);color:var(--ink-2);max-width:var(--measure-dek)}
.sec{padding-bottom:var(--sec)}
/* 3.8: first baseline, so the headline never moves (review round 3) */
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:20px;align-items:first baseline;margin-bottom:var(--gap-head)}
.sec-head > .h1,.sec-head > .h2{grid-column:1 / -1}
.sec-head__intro{grid-column:1 / -1;max-width:var(--measure-ui);font:400 var(--fs-small)/1.6 var(--sans);color:var(--ink-2)}
@media (min-width:720px){.sec-head__intro{grid-column:1 / span 9}}
@media (min-width:1024px){.sec-head > .h1,.sec-head > .h2{grid-column:1 / span 7}.sec-head__intro{grid-column:9 / span 4}}

/* ---------- 3.9 Metadata labels and group rules ---------- */
.meta{font:400 var(--fs-mono)/1.45 var(--mono);color:var(--ink-3)}
.group{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0 12px;border-top:var(--rule-ink);font:500 var(--fs-mono)/1.4 var(--mono);color:var(--ink)}
.group__n{color:var(--ink-3);font-weight:400;font-variant-numeric:tabular-nums}

/* ---------- 3.10 Figures and captions ---------- */
/* The text drops under its label only when it cannot fit beside it (T27) */
.cap{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;margin-top:12px;padding-top:10px;border-top:var(--hair);font:400 var(--fs-cap)/1.5 var(--sans-cap);color:var(--ink-2)}
.cap__label{flex:none;font:500 var(--fs-mono)/1.5 var(--mono);color:var(--ink);white-space:nowrap}
.cap__text{flex:1 1 0}
.cap--head{margin-top:0;border-top:var(--rule-ink);padding-bottom:6px}

/* ---------- 3.11 Plates: the photographic ground ---------- */
.plate{position:relative;overflow:hidden;background:var(--plate)}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.plate--4x5{aspect-ratio:4/5}
.plate--1x1{aspect-ratio:1/1}
.plate--5x4{aspect-ratio:5/4}
.plate--thumb{width:56px;height:56px;flex:none}

/* ---------- 3.12 Flagship card ---------- */
/* Phones: rows (plate 38%, caption right); 720 up: three columns */
.flagships{display:grid;margin-top:12px}
.person{display:grid;grid-template-columns:38% minmax(0,1fr);column-gap:16px;align-items:start;padding:14px 0 18px;border-bottom:var(--hair)}
.person:first-child{padding-top:4px}
.person__name{position:relative;font:400 1.375rem/1.1 var(--serif);letter-spacing:-.012em;overflow-wrap:break-word}
.person__name a{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.16em;transition:text-decoration-color var(--t-fast) var(--ease)}
@media (hover:none){.person__name a:hover{text-decoration-color:var(--red)}}
.person__name a:active{text-decoration-color:var(--red-deep)}
/* Doorway (CORE-3): the name link also covers his plate (phones: the 38% column, 38/62 = 19/31) */
.person__name a::before{content:"";position:absolute;top:0;right:calc(100% + 16px);width:calc((100% + 16px) * 19 / 31);aspect-ratio:4/5}
/* The frame is drawn above the photograph (an outline would sit under a figure that reaches the edge) */
.person .plate::after,.r-contents__plate::after{content:"";position:absolute;inset:0;z-index:1;border:1px solid var(--ink);opacity:0;pointer-events:none;transition:opacity var(--t-fast) var(--ease)}
.person:has(.person__name a:focus-visible) .plate::after{opacity:1}
.person__spec{margin-top:4px;font:400 .875rem/1.45 var(--sans);color:var(--ink-2)}
.person__metric{margin-top:10px;padding-top:8px;border-top:var(--hair);font:400 var(--fs-mono)/1.4 var(--mono);color:var(--ink-3)}
.person__metric b{color:var(--red-deep);font-weight:500}
.person__dek{display:none;margin-top:10px;font:400 var(--fs-small)/1.55 var(--sans);color:var(--ink-2)}
.person__links{display:flex;flex-wrap:wrap;column-gap:14px;margin-top:2px;font:500 .8125rem/1.3 var(--sans)}
/* A 44 px line, not inline-flex: the underline ends at the word */
.person__links a{line-height:44px}
.person__links .ext,.also__handle .ext{line-height:1}
@media (min-width:720px){
  .person__name a::before{top:auto;right:0;left:0;bottom:calc(100% + 16px);width:auto}
  .flagships{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter);row-gap:48px}
  .person{display:block;padding:0;border-bottom:0}
  .person:first-child{padding-top:0}
  .person__cap{padding-top:16px}
  .person__name{font-size:clamp(1.5rem,1.25rem + .8vw,2rem)}
  .person__spec{margin-top:6px;font-size:var(--fs-small)}
  .person__metric{margin-top:14px;padding-top:10px}
  .person__links{column-gap:18px;margin-top:4px;font-size:.875rem}
}
@media (min-width:1024px){.person__dek{display:block}}
/* 720 up: captions share subgrid rows; .person__cap is display:contents */
@supports (grid-template-rows:subgrid){
  @media (min-width:720px){
    .flagships{row-gap:0}
    .person{display:grid;grid-row:span 6;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
    .person__cap{display:contents}
    .person__name{margin-top:16px}
  }
}

/* ---------- 3.13 Content-production table ---------- */
/* Phones: thumb beside the stack; 720: three columns; 1024: four */
.also{width:100%;border-collapse:collapse}
.also thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.also th,.also td{padding:0;font-weight:400;text-align:left}
.also tr{display:grid;grid-template-columns:minmax(0,1fr);position:relative;min-height:80px;padding:12px 0 12px 70px;border-top:var(--hair)}
.also tbody tr:last-child{border-bottom:var(--hair)}
.also__who{display:flex;align-items:center;gap:16px;min-width:0}
.also__who .plate--thumb{position:absolute;left:0;top:12px}
.also__name{font:400 1.1875rem/1.2 var(--serif)}
.also__spec{margin-top:2px;font:400 .875rem/1.45 var(--sans);color:var(--ink-2)}
.also__handle{display:inline-block;font:400 var(--fs-mono)/44px var(--mono);overflow-wrap:anywhere}
.also__role{display:none;font:400 var(--fs-mono)/1.4 var(--mono);color:var(--ink-3)}
/* Phones: the handle's 44 px target is a band */
@media (max-width:719px){
  .also__handle{position:relative;line-height:1.4;margin-top:4px}
  .also__handle::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}
@media (min-width:720px){
  .also thead{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
  /* Cells share the name's first baseline */
  .also tr{grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);column-gap:var(--gutter);align-items:baseline;min-height:0;padding:12px 0}
  .also thead tr{padding:0 0 8px;border-top:0}
  .also thead th{font:400 var(--fs-mono)/1.4 var(--mono);color:var(--ink-3)}
  .also thead th:last-child{display:none}
  /* Out-of-flow thumb, so the name sets the baseline */
  .also__who{position:relative;min-height:56px;padding-left:72px}
  .also__who .plate--thumb{position:absolute;left:0;top:calc(50% - 28px)}
  .also__name{font-size:1.3125rem}
  .also__spec{margin-top:0;font-size:var(--fs-small)}
  .also td:nth-child(3){justify-self:start}
}
@media (min-width:1024px){
  /* The role column fits "Content production" in 13 px mono */
  .also tr{grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,2.4fr) 9.25rem}
  .also thead th:last-child,.also__role{display:block;white-space:nowrap}
}

/* ---------- 3.14 Findings table with footnotes ---------- */
.findings__table{width:100%;border-collapse:collapse}
.findings__table tr{border-bottom:var(--hair)}
.findings__table th{width:36%;padding:13px 16px 12px 0;text-align:left;vertical-align:baseline;white-space:nowrap;
  font:360 var(--fs-num)/1 var(--serif-display);letter-spacing:-.025em;font-variant-numeric:lining-nums tabular-nums;
  text-decoration:underline transparent;text-decoration-thickness:2px;text-decoration-skip-ink:none;text-underline-offset:.14em;transition:text-decoration-color var(--t-fast) var(--ease)}
.findings__table td{padding:13px 0 12px;vertical-align:baseline;font:400 var(--fs-small)/1.45 var(--sans);color:var(--ink-2)}
/* Marker level with the figure's top; 13 px floor */
.fn{display:inline-block;font-size:1em;line-height:0;vertical-align:.45em;margin-left:1px}
.fn a{position:relative;font:500 max(.34em,var(--fs-mono))/0 var(--mono);color:var(--red-deep);text-decoration:none}
/* 44 px hit areas on the two footnote links, without moving a glyph */
.fn a::after,.notes__back::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.notes{margin-top:10px;font:400 var(--fs-mono)/1.5 var(--mono);color:var(--ink-3)}
/* Block flow, a hanging number, the back link after the last word */
.notes li{padding:2px 0 2px 1.5em;text-indent:-1.5em}
.notes__n{display:inline-block;width:1.5em;text-indent:0;color:var(--red-deep);font-weight:500}
.notes li:target{background:var(--red-tint)}
.notes__back{position:relative;font-family:var(--sans);text-decoration:none;color:var(--ink-3);padding:0 2px}
/* Evidence linking (CORE-2): a claim and its caveat light together */
.findings__table .is-linked > th{text-decoration-color:var(--red)}
:is(.notes li,[data-note]){position:relative;isolation:isolate}
:is(.notes li,[data-note])::before{content:"";position:absolute;z-index:-1;inset:0 0 0 -8px;border-left:1px solid var(--red);background:var(--red-tint);opacity:0;transition:opacity var(--t-fast) var(--ease)}
:is(.notes li,[data-note]).is-linked::before{opacity:1}
@media (max-width:719px){.findings__table th{width:6.8rem;padding-right:12px}.findings__table td{font-size:.9375rem}}
/* 200% text: labels drop under figures (never at 100%) */
.findings{container-type:inline-size}
@container (width < 12.75rem){.findings__table th,.findings__table td{display:block;width:auto;padding-right:0}.findings__table th{padding-bottom:4px}.findings__table td{padding-top:0}}

/* ---------- 3.15 Numbers ---------- */
/* Operators: the newsreader-ops face (top); .num-op is inert */

/* ---------- 3.19 Limitations and Note panels ---------- */
.limits{background:var(--paper-2);border-top:2px solid var(--ink);padding:20px 22px 22px}
.limits__title{font:500 var(--fs-mono)/1.4 var(--mono);color:var(--ink);margin-bottom:10px}
.limits p{font:400 var(--fs-small)/1.55 var(--sans);color:var(--ink-2)}
.limits p + p{margin-top:10px}
.note{border-top:1px solid var(--ink-3);padding-top:12px}
.note p{font:400 var(--fs-cap)/1.55 var(--sans);color:var(--ink-2)}
.note p + p{margin-top:8px}
/* After .note p, and scoped, so the label (a p) keeps the mono label style */
.note .note__title{font:500 var(--fs-mono)/1.4 var(--mono);color:var(--ink);margin-bottom:6px}
.note .note__title + p{margin-top:0}

/* ---------- 3.20 Quote / testimonial ---------- */
.quote{border-top:var(--rule-ink);padding-top:22px}
.quote blockquote p{font:italic 380 var(--fs-quote)/1.2 var(--serif);letter-spacing:-.012em;text-indent:-.42em}
.quote figcaption{margin-top:20px;display:flex;flex-direction:column;gap:2px}
.quote__name{font:500 1rem/1.4 var(--sans)}
.quote__role{font:400 var(--fs-mono)/1.5 var(--mono);color:var(--ink-3)}

/* ---------- 3.21 Accordion (FAQ): native details ---------- */
.qa-list{border-bottom:var(--hair)}
.qa{border-top:var(--hair)}
.qa:first-child{border-top:var(--rule-ink)}
.qa__q{list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;min-height:44px;padding:19px 0 18px;cursor:pointer;font:400 var(--fs-h4)/1.3 var(--serif);color:var(--ink)}
.qa__q::-webkit-details-marker{display:none}
.qa__q:hover,.qa__q:active{color:var(--red-deep)}
.qa__i{position:relative;flex:none;width:13px;height:13px;margin-top:.42em}
.qa__i::before,.qa__i::after{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:currentColor}
.qa__i::after{transform:rotate(90deg);transition:transform var(--t) var(--ease)}
.qa[open] .qa__i::after{transform:rotate(0)}
.qa__a{padding-bottom:22px}
.qa__a p,.qa__a li{max-width:38em;font:400 var(--fs-small)/1.62 var(--sans);color:var(--ink-2)}
.qa__a p + p,.qa__a p + ul,.qa__a ul + p{margin-top:12px}
.qa__a ul{display:grid;gap:8px;padding-left:1.1em;list-style:disc}
@media (prefers-reduced-motion:no-preference){
  @supports (interpolate-size:allow-keywords){
    .qa{interpolate-size:allow-keywords}
    .qa::details-content{height:0;overflow:clip;transition:height var(--t) var(--ease),content-visibility var(--t) allow-discrete}
    .qa[open]::details-content{height:auto}
  }
}

/* ---------- 3.26 Appointment card ---------- */
.appt{background:var(--paper);color:var(--ink);padding:clamp(20px,2.6vw,36px);container:appt / inline-size}
.appt--on-paper{background:var(--paper-2);border-top:2px solid var(--ink)}
.on-ink .appt{color:var(--ink)}
.on-ink .appt :focus-visible{outline-color:var(--focus)}
.appt__head{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:var(--rule-ink)}
/* The mark only (art x 171 to 499) */
.brand--card{--h:24px;width:calc(var(--h) * 328 / 244)}
.appt__title{margin-top:18px;font:400 var(--fs-h3)/1.15 var(--serif);letter-spacing:-.01em}
.appt__fields{margin-top:14px}
.appt__fields div,.appt__alt div{display:grid;grid-template-columns:minmax(7.5rem,32%) 1fr;gap:16px;padding:12px 0;border-bottom:var(--hair);align-items:baseline}
.appt__fields dt,.appt__alt dt{font:400 var(--fs-mono)/1.45 var(--mono);color:var(--ink-3)}
.appt__fields dd,.appt__alt dd{min-width:0;overflow-wrap:anywhere;font:400 var(--fs-small)/1.5 var(--sans)}
.appt .btn{margin-top:24px}
.appt__alt{margin-top:12px}
.appt__alt a{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:.22em}
.appt__alt a:hover{text-decoration-color:var(--red)}
/* WCAG 1.4.10: narrow cards stack each row (review round 3) */
@container appt (width < 19rem){
  .appt__fields div,.appt__alt div{grid-template-columns:minmax(0,1fr);gap:2px}
}
/* Mumbai time (CORE-4): JS only, space held until set; narrow cards: two lines */
html:not(.js) .appt__time{display:none}
.appt__time:not(.is-set) dd{visibility:hidden}
.appt__time dd{position:relative;display:flex;align-items:center;min-height:32px;padding-left:42px;font-variant-numeric:tabular-nums}
.appt__now:empty::before{content:"\a0"}
.appt__dial{position:absolute;left:0;top:50%;width:32px;height:32px;margin-top:-16px}
.appt__dial svg{display:block;overflow:visible;fill:none;stroke:var(--ink);stroke-linecap:round}
.appt__dial .t{stroke-width:.75}
.appt__dial :is(.h,.y){stroke-width:1.5}
.appt__dial .y{stroke:var(--red)}
.appt__dial .c{fill:var(--ink);stroke:none}
.appt__dial :is(.h,.m,.y){transform-origin:16px 16px;transition:transform var(--t-fast) var(--ease)}
.appt__dial[data-jump] line{transition:none}
@container appt (19rem <= width < 23.5rem){
  .appt__time dd{min-height:3em}
  .appt__you{display:block}
  .appt__sep{display:none}
}

/* ---------- 3.28 Form fields ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field__label{font:500 var(--fs-cap)/1.3 var(--sans);color:var(--ink)}
.field__input{width:100%;min-height:48px;padding:10px 0 8px;border:0;border-bottom:1px solid var(--ink-3);border-radius:0;background:transparent;font:400 1.0625rem/1.4 var(--sans);color:var(--ink);-webkit-appearance:none;appearance:none;transition:border-color var(--t-fast) var(--ease)}
textarea.field__input{min-height:96px;resize:vertical}
.field__input::placeholder{color:var(--ink-3);opacity:1}
.field__input:hover{border-bottom-color:var(--ink)}
.field__input:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-bottom-color:var(--ink)}
.field__input[aria-invalid="true"]{border-bottom:2px solid var(--red-deep)}
.field__input:disabled{opacity:.5;cursor:not-allowed}
.field__err{font:400 var(--fs-cap)/1.4 var(--sans);color:var(--red-deep)}
.field-row{display:grid;gap:20px}
@media (min-width:720px){.field-row{grid-template-columns:1fr 1fr}}
.form-note{font:400 var(--fs-mono)/1.45 var(--mono);color:var(--ink-3)}
.form-status{min-height:1.5em;font:400 var(--fs-cap)/1.5 var(--sans);color:var(--ink-2)}
.form-status[data-state="error"]{color:var(--red-deep)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;overflow-wrap:normal}

/* ---------- Tap targets on touch screens (44 x 44) ---------- */
/* 44 px ::after bands, grown into free space, so rings hug the text */
@media (max-width:719px),(pointer:coarse){
  .foot__col a{min-width:44px}
  .foot__bottom a,a.rh__name,.link--quiet,.quote__role a{position:relative}
  .foot__bottom a::after,a.rh__name::after,.link--quiet::after,.quote__role a::after,.person__name a::after{content:"";position:absolute;left:0;right:0;height:44px}
  a.rh__name::after{bottom:0}
  .foot__bottom a::after,.quote__role a::after{top:0}
  .link--quiet::after{top:50%;transform:translateY(-50%)}
  /* The flagship name: the whole heading and at least 44 px, growing up */
  .person__name a::after{bottom:0;height:max(100%,44px)}
}

/* ---------- One link language (CORE-1) ----------
   (a) Links in sentences keep their underline. (b) UI links (below; the words of .e404__links and
   .smap rows) draw a ::before rule from the side the pointer came in, and retract it toward the side
   it leaves (data-ul). (c) Titles and .person__name a rule each line. Glyphs: data-dir */
[data-ul=r]{--ul-o:right;--ul-x:100%}
:focus-visible{--ul-o:left;--ul-x:0%}
[data-dir]{display:inline-block;text-indent:0;transition:translate var(--t-fast) var(--ease)}
[data-dir=e]{--g:3px 0}[data-dir=ne]{--g:2px -2px}[data-dir=s]{--g:0 2px}[data-dir=n]{--g:0 -2px}[data-dir=w]{--g:-2px 0}
@media (prefers-reduced-motion:no-preference){
  :is(a,button):focus-visible [data-dir],a[data-dir]:focus-visible,.person:has(.person__name a:focus-visible) .person__links a[href*="instagram.com"] [data-dir]{translate:var(--g)}
}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  :is(a,button):hover [data-dir],a[data-dir]:hover,.person:has(.person__name a:hover) .person__links a[href*="instagram.com"] [data-dir]{translate:var(--g)}
}
@media (hover:hover){
  :is(:is(.strip,.menu__list,.foot__col,.foot__bottom,.person__links,.rcase__links,.work__cta) a,.also__handle,.j-series__all,.link--quiet,a.rh__name,.e404__t,.smap__p){position:relative}
  :is(:is(.strip,.menu__list,.foot__col,.foot__bottom,.person__links,.rcase__links,.work__cta) a,.also__handle,.j-series__all,.link--quiet,a.rh__name,.e404__t,.smap__p)::before{content:"";position:absolute;left:0;right:var(--ul-r,0px);top:calc(50% + var(--ul-y,.615em));height:2px;background:var(--red);transform:scaleX(0);transform-origin:var(--ul-o,left);transition:transform var(--t-ul-out) var(--ease-in);pointer-events:none}
  .strip a{--ul-y:.625em}
  .strip a::before{height:1px}
  :is(.foot__col,.foot__bottom) a{--ul-y:.595em}
  .foot a::before{background:var(--red-on-ink)}
  .menu__list a{width:fit-content;--ul-y:calc(1px + .415em)}
  .e404__t{--ul-y:.475em}
  .smap__p{--ul-y:.555em}
  /* The rule ends at the word: glyph margin + advance (.854em at 500, .82em at 400) */
  .link:has(> .ext){--ul-r:calc(max(.86em,var(--fs-mono)) * 1.034)}
  .also__handle:has(> .ext){--ul-r:max(.86em,var(--fs-mono))}
  .link:has(> .arw){--ul-r:1.254em}
  .nav a:is(:hover,:focus-visible)::after,:is(:is(.strip,.menu__list,.foot__col,.foot__bottom,.person__links,.rcase__links,.work__cta) a,.also__handle,.j-series__all,.link--quiet,a.rh__name):is(:hover,:focus-visible)::before,:is(.e404__links,.smap) a:is(:hover,:focus-visible) :is(.e404__t,.smap__p)::before,.person:has(.person__name a:is(:hover,:focus-visible)) .person__links a[href*="instagram.com"]::before{transform:none;transition-duration:var(--t-ul-in);transition-timing-function:var(--ease)}
  :is(:is(.strip,.menu__list,.foot__col,.foot__bottom,.person__links,.rcase__links,.work__cta) a,.also__handle,.j-series__all,.link--quiet,a.rh__name):active::before,:is(.e404__links,.smap) a:active :is(.e404__t,.smap__p)::before{background:var(--red-deep)}
  .foot a:active::before{background:var(--red-on-ink)}
  /* The resting underline stays under the rule */
  :is(.person__links a,.also__handle,.rcase__links a,.work__cta a,.j-series__all,.link--quiet).link:hover{text-decoration-color:var(--rule-2);text-decoration-thickness:1px}
  :is(.j-row__title>span,.r-contents__name>span,.lead__title a,.index__list .index__title,.person__name a){background:linear-gradient(var(--red),var(--red)) no-repeat var(--ul-x,0%) .875em/0% 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size var(--t-ul-out) var(--ease-in)}
  :is(.j-row,.r-contents__list a,.index__list a):is(:hover,:focus-visible) :is(.j-row__title>span,.r-contents__name>span,.index__title),:is(.lead__title a,.person__name a):is(:hover,:focus-visible){background-size:100% 2px;transition-duration:var(--t-ul-in);transition-timing-function:var(--ease)}
  :is(.j-row,.r-contents__list a,.index__list a):active :is(.j-row__title>span,.r-contents__name>span,.index__title),:is(.lead__title a,.person__name a):active{background-image:linear-gradient(var(--red-deep),var(--red-deep))}
  /* Home's contents titles, inline: the strut matches the title, the meta takes its 6 px */
  .index__list li a{font:400 1.375rem/1.22 var(--serif)}
  .index__list .index__meta{margin-bottom:6px}
  .index__list .index__title{display:inline}
  .lead .lead__title a:is(:hover,:active),.index__list li a:is(:hover,:active) .index__title{text-decoration:none}
  .person:has(.person__name a:hover) .plate::after{opacity:1}
}

/* ---------- 3.36 Region-aware content ---------- */
html.is-intl [data-region="in"]{display:none !important}

/* ---------- Motion (4.4, 4.5) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* Smooth scrolling only after load, so fragment arrival is instant */
  html.is-loaded{scroll-behavior:smooth}
  /* Page turns: the bar holds still; one named title morphs at its own size */
  @view-transition{navigation:auto}
  .bar{view-transition-name:bar}
  ::view-transition-group(bar){animation-duration:var(--t);animation-timing-function:var(--ease)}
  ::view-transition-old(bar){display:none}
  ::view-transition-new(bar){animation:none}
  ::view-transition-old(root){animation:vt-out var(--t-vt-out) var(--ease-in) both}
  ::view-transition-new(root){animation:vt-in var(--t-vt-in) var(--ease) 60ms both}
  ::view-transition-group(*){animation-duration:360ms;animation-timing-function:var(--ease)}
  .j-title,.j-row__title,.lead__title,.index__title{view-transition-class:jt}
  ::view-transition-old(*.jt),::view-transition-new(*.jt){inline-size:auto;block-size:auto}
  /* One title at a time: the new copy travels whole */
  ::view-transition-old(*.jt){display:none}
  ::view-transition-new(*.jt){animation:none;opacity:1}
  /* Fades and draws only after load: what is in view on arrival just shows */
  .js .reveal:not(.is-in){opacity:0;transform:translateY(var(--rise))}
  .is-loaded .reveal{transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
  /* Staggers only where cards sit side by side */
  @media (min-width:720px){
    .is-loaded .reveal[data-stagger="1"]{transition-delay:var(--stagger)}
    .is-loaded .reveal[data-stagger="2"]{transition-delay:calc(var(--stagger) * 2)}
  }
  .is-loaded [data-animate]{transition:transform var(--t-draw) var(--ease)}
  .menu:not([hidden]){animation:menu-in var(--t) var(--ease)}
}
@keyframes menu-in{from{opacity:0}}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}
@media print{.reveal,[data-animate]{opacity:1 !important;transform:none !important}}