/* ===========================================================================
   roastynote — bespoke editorial layout
   Chapter spine · marquee · accordion rooms · asymmetric work grid ·
   journal index · giant cropped footer wordmark
   =========================================================================== */

/* --------------------------------------------------------------- Nav ---- */
.nav{ position:fixed; top:0; left:0; right:0; z-index: var(--z-header); padding-top: 14px; }
.nav__bar{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-5);
  padding-block: 10px;
  transition: background var(--dur-fast) var(--ease-alpha),
              box-shadow var(--dur-fast) var(--ease-alpha); }
.nav__bar--scrolled{
  background: color-mix(in oklab, var(--rn-paper) 86%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--border-hairline); }
.nav__brand{ display:flex; align-items:center; flex:none; }
.nav__links{ display:flex; gap: clamp(18px, 2.4vw, 40px); margin-left:auto; }
.nav__link{ color: var(--text-primary); padding: 4px 0; }
.nav__right{ display:flex; align-items:center; gap: var(--space-5); margin-left: clamp(20px,3vw,52px); }
.nav__lang{ display:flex; align-items:center; gap:8px; }
.nav__langbtn{ background:none; border:0; cursor:pointer; padding:2px; color: var(--text-muted);
  font: inherit; transition: color var(--dur-fast) var(--ease-alpha); }
.nav__langbtn.is-active{ color: var(--text-primary); }
.nav__langsep{ color: var(--text-muted); opacity:.5; }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nav__burger span{ width:24px; height:1.5px; background: var(--text-primary); display:block; }

a, button{ touch-action: manipulation; -webkit-tap-highlight-color: rgba(149,44,22,.16); }
a:focus-visible,
button:focus-visible,
.acc__header:focus-visible,
.workcard:focus-visible,
.jentry:focus-visible,
.foot__cta:focus-visible{
  outline: 1px solid var(--rn-accent);
  outline-offset: 6px;
}
.nav__langbtn:active,
.nav__burger:active,
.acc__header:active,
.foot__cta:active{
  transform: scale(.985);
}

/* --------------------------------------------------------- Mobile menu -- */
.mmenu{ position:fixed; inset:0; z-index: var(--z-overlay); background: var(--rn-dark);
  color: var(--text-inverse); opacity:0; pointer-events:none;
  transform: translateY(-8px); transition: opacity .5s var(--ease-alpha), transform .5s var(--ease-alpha);
  display:flex; flex-direction:column; padding-block: 22px 36px; }
.mmenu.is-open{ opacity:1; pointer-events:auto; transform:none; }
.mmenu__top{ display:flex; align-items:center; justify-content:space-between; }
.mmenu__close{ color: var(--text-inverse); background:none; border:0; cursor:pointer; }
.mmenu__links{ margin:auto 0; display:flex; flex-direction:column; gap: clamp(8px,2.5vh,22px);
  padding-inline: var(--page-margin); }
.mmenu__link{ font-size: clamp(40px, 12vw, 76px); line-height:1; color: var(--text-inverse);
  display:flex; align-items:baseline; gap: 18px; }
.mmenu__num{ font-size: 11px; color: color-mix(in oklab, var(--paper) 40%, transparent); }
.mmenu__foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.mmenu__foot .mono{ font-size:10px; color: color-mix(in oklab, var(--paper) 60%, transparent); }
.mmenu__foot .nav__langbtn{ color: color-mix(in oklab, var(--paper) 55%, transparent); }
.mmenu__foot .nav__langbtn.is-active{ color: var(--paper); }

/* ----------------------------------------------------- Chapter spine ---- */
.chapter{ display:flex; align-items:center; gap: 14px;
  color: var(--text-muted); margin-bottom: clamp(40px, 6vw, 88px); }
.chapter__num{ font-size: 11px; }
.chapter__rule{ width: clamp(40px, 6vw, 96px); height:1px; background: var(--border-hairline); }
.chapter--dark .chapter__rule{ background: var(--border-on-dark); }
.chapter--dark{ color: var(--ash); }
.chapter__name{ font-size: 11px; }

/* -------------------------------------------------------------- Hero ---- */
.hero{ position:relative; min-height: 100svh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: clamp(14px, 2.4vw, 34px); }

.hero__word{
  position:relative; order:2; transform:none; margin:0;
  white-space:nowrap; line-height:.82; z-index:4; pointer-events:none;
  font-size: calc(clamp(84px, 17.8vw, 282px) * var(--rn-display-scale));
  color: var(--text-primary); }
.hero__word-g{ font-family: var(--font-grotesk); font-weight:500; letter-spacing:-0.035em; }
.hero__word-n{ font-weight:400; letter-spacing:-0.01em; margin-left:.02em; }
/* wordmark is language-independent — keep the italic in JP mode */
body.jp .hero__word-n.serif{ font-style: italic; }
body.jp .foot__giant-n.serif{ font-style: italic; }
body[data-wordmark="serif"] .hero__word-g{ font-family: var(--font-editorial); font-style:italic; font-weight:400; letter-spacing:-0.01em; }
body[data-wordmark="grotesk"] .hero__word-n{ font-family: var(--font-grotesk); font-style:normal; font-weight:500; letter-spacing:-0.035em; }

.hero__panel{ position:relative; order:1; z-index:2; margin:0 0 clamp(4px, .8vw, 12px);
  width: clamp(180px, 16vw, 260px); aspect-ratio: 3 / 4;
  box-shadow: 0 28px 80px -42px rgba(20,17,13,.55); border-radius: 2px; overflow:hidden;
  will-change: transform; --warm-x: 50%; --warm-y: 50%; --warm-alpha: 0;
  transform: translateY(0);
  clip-path: inset(0 0 0 0); animation: heroPanelReveal 1.45s var(--ease-alpha) both; }
.hero__panel::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(circle at var(--warm-x) var(--warm-y),
      rgba(201,169,110,.34) 0%,
      rgba(185,106,69,.18) 22%,
      transparent 54%);
  mix-blend-mode:multiply; opacity:var(--warm-alpha);
  transition: opacity 220ms cubic-bezier(.23,1,.32,1);
}
.hero__panel::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(20,17,13,.08);
}
.hero__img{ width:100%; height:100%; object-fit:cover; display:block;
  transition: filter 650ms var(--ease-alpha), transform 900ms var(--ease-alpha); }
.hero__steam{ position:absolute; left:50%; bottom:7%; z-index:4; pointer-events:none;
  width:42%; height:64%; opacity:.42; filter: blur(10px);
  border-radius:999px;
  background:
    radial-gradient(ellipse at 50% 92%, rgba(244,239,230,.65), transparent 42%),
    radial-gradient(ellipse at 46% 44%, rgba(201,169,110,.26), transparent 58%);
  mix-blend-mode:screen;
  transform: translateX(-50%) translateY(12%) scale(.88);
  animation: heroSteamRise 7.8s cubic-bezier(.23,1,.32,1) infinite both;
}
.hero__steam--b{ left:42%; width:34%; height:58%; animation-duration:9.4s; animation-delay:-3s; opacity:.32; }
.hero__steam--c{ left:60%; width:30%; height:54%; animation-duration:11s; animation-delay:-5.5s; opacity:.24; }
@media (hover:hover) and (pointer:fine){
  .hero__panel:hover .hero__img{ filter: grayscale(.72) contrast(1.04) brightness(1.02) sepia(.12); transform: scale(1.018); }
}
.hero__word-g,
.hero__word-n{ display:inline-block; animation: heroWordSettle 1.2s var(--ease-alpha) both; }
.hero__word-n{ animation-delay:.08s; }

.hero__subtitle{ position:relative; order:3; z-index:4; text-align:center; max-width: 48ch; margin-top:2px;
  display:flex; flex-direction:column; gap: 9px; align-items:center; }
.hero__kicker{ color: var(--text-muted); font-size: 10px; max-width: 58ch; line-height:1.7; }
.hero__tagline{ font-size: clamp(17px, 1.4vw, 22px); line-height:1.55;
  color: var(--text-secondary); letter-spacing:.01em; }
.hero__tagline.jp{ line-height:1.85; font-size: clamp(15px,1.2vw,19px); }

.hero__foot{ position:absolute; bottom: 26px; left:0; right:0; z-index:4;
  display:flex; align-items:center; justify-content:space-between; }
.hero__foot .mono{ color: var(--text-muted); }
.hero__scroll{ animation: heroScrollPulse 3.2s var(--ease-alpha) infinite; }
@keyframes heroScrollPulse{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
@keyframes heroPanelReveal{
  0%{ opacity:0; clip-path: inset(18% 0 18% 0); filter: blur(2px); }
  100%{ opacity:1; clip-path: inset(0 0 0 0); filter: blur(0); }
}
@keyframes heroSteamRise{
  0%{ opacity:0; transform: translateX(-50%) translateY(18%) scale(.82) rotate(-2deg); }
  22%{ opacity:.42; }
  72%{ opacity:.22; }
  100%{ opacity:0; transform: translateX(-50%) translateY(-44%) scale(1.18) rotate(3deg); }
}
@keyframes heroWordSettle{
  0%{ opacity:0; transform: translateY(10px); }
  100%{ opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero__scroll,
  .hero__panel,
  .hero__steam,
  .hero__word-g,
  .hero__word-n{ animation:none; }
}
.hero__rule{ flex:1; height:1px; margin-inline: clamp(16px, 3vw, 40px);
  background: var(--border-hairline); }

/* ------------------------------------------------------------ Marquee --- */
.marquee{ overflow:hidden; border-block: 1px solid var(--border-hairline);
  padding-block: clamp(14px, 1.6vw, 22px); background: var(--rn-paper); }
.marquee__track{ display:flex; align-items:baseline; gap: clamp(20px, 2.4vw, 40px);
  width:max-content; animation: marqueeRun 36s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state: paused; }
@keyframes marqueeRun{ from{ transform: translateX(0); } to{ transform: translateX(-25%); } }
.marquee__word{ font-size: clamp(18px, 1.8vw, 28px); color: var(--text-secondary); white-space:nowrap; }
.marquee__sep{ color: var(--rn-accent); font-size: clamp(14px,1.2vw,18px); }

/* ------------------------------------------------------------ Thesis ---- */
.thesis{ background: var(--rn-dark); color: var(--text-inverse);
  padding-block: clamp(110px, 17vw, 260px); }
.thesis__inner{ display:flex; flex-direction:column; }
.thesis__display{
  font-family: var(--font-editorial); font-style:italic; font-weight:400;
  font-size: clamp(40px, 7vw, 120px); line-height:1.04; letter-spacing:-0.025em;
  color: var(--paper); }
.thesis__display strong{ font-weight:400; color: var(--rn-accent); }
body.jp .thesis__display{ font-style:normal; letter-spacing:.02em; line-height:1.4;
  font-size: clamp(34px, 5.5vw, 88px); }
.thesis__line{ display:inline-block; }
.thesis__second{ font-size: clamp(28px, 4vw, 64px); line-height:1.12;
  color: color-mix(in oklab, var(--paper) 58%, var(--rn-dark));
  margin-top: clamp(12px, 2vw, 28px); letter-spacing:-0.015em; }
body.jp .thesis__second{ font-style:normal; line-height:1.5; font-size: clamp(24px, 3.2vw, 50px); }
.thesis__sub{ margin-top: clamp(48px, 6vw, 80px); color: var(--ash); font-size:12px; opacity:.7; max-width:40ch; }

/* ----------------------------------------------------- Image interlude -- */
.imgbreak{ width:100%; overflow:hidden; background: var(--rn-dark); }
.imgbreak__img{ width:100%; height: clamp(280px, 46vw, 620px); object-fit:cover; display:block; }
.imgbreak__captions{ display:flex; justify-content:space-between; gap:16px;
  padding-block: 14px 18px; color: var(--text-muted); background: var(--rn-paper); }
.imgbreak__captions span{ font-size:10px; }

/* ------------------------------------------------- Rooms (accordion) ---- */
.rooms{ background: var(--rn-paper); padding-block: clamp(96px, 15vw, 220px); }
.rooms__intro{ max-width: 52ch; margin-bottom: clamp(48px, 7vw, 100px); }
.rooms__lead{ font-size: clamp(26px, 3.2vw, 48px); line-height:1.14; letter-spacing:-0.015em; }
.rooms__lead.jp{ line-height:1.6; letter-spacing:.01em; font-size: clamp(22px,2.6vw,36px); }

.acc-list{ border-top: 1px solid var(--border-hairline); }
.acc{ border-bottom: 1px solid var(--border-hairline);
  transition: background var(--dur-normal) var(--ease-alpha); }
.acc:hover{ background: color-mix(in oklab, var(--rn-paper) 90%, var(--bone)); }

.acc__header{ display:grid; width:100%; text-align:left;
  background:none; border:0; cursor:pointer; color:inherit; font:inherit; padding-inline:0;
  grid-template-columns: 48px 1fr auto 32px;
  align-items:center; gap: clamp(12px, 2vw, 28px);
  padding-block: clamp(22px, 3.2vw, 40px); }
.acc__num{ color: var(--text-muted); font-size:11px; }
.acc__titles{ display:flex; flex-direction:column; gap:4px; }
.acc__name{ font-family: var(--font-editorial); font-style:italic; font-weight:400;
  font-size: clamp(26px, 3vw, 44px); letter-spacing:-0.015em; line-height:1.06;
  transition: transform var(--dur-normal) var(--ease-alpha); transform-origin:left center; }
.acc:hover .acc__name{ transform: translateX(6px); }
.acc__desc{ font-size: clamp(14px, 1.1vw, 17px); color: var(--text-secondary); }
body.jp .acc__desc{ font-style:normal; }
.acc__cat{ display:inline-flex; align-items:center; gap:7px;
  color: var(--text-muted); font-size:11px; white-space:nowrap; }
.acc__dot{ width:7px; height:7px; border-radius:999px; flex:none; }
.acc__toggle{ display:flex; align-items:center; justify-content:center; color: var(--text-muted); }
.acc__vline{ transition: opacity var(--dur-normal) var(--ease-alpha),
  transform var(--dur-normal) var(--ease-alpha); transform-origin:center; }
.acc--open .acc__vline{ opacity:0; transform: rotate(90deg); }

.acc__body{ display:grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-smooth) var(--ease-alpha); }
.acc--open .acc__body{ grid-template-rows: 1fr; }
.acc__body-clip{ overflow:hidden; min-height:0; }
.acc__body-inner{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px);
  opacity:0; transition: opacity var(--dur-normal) var(--ease-alpha);
  padding-bottom: clamp(32px, 4vw, 56px); }
.acc--open .acc__body-inner{ opacity:1; }
.acc__media{ border-radius:3px; overflow:hidden; }
.acc__img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.acc__copy{ display:flex; flex-direction:column; gap: 20px; justify-content:center; padding-left:48px; }
.acc__reveal{ font-family: var(--font-editorial); font-style:italic;
  font-size: clamp(16px, 1.3vw, 20px); line-height:1.62; color: var(--text-secondary); }
body.jp .acc__reveal{ font-style:normal; line-height:1.9; letter-spacing:.01em;
  font-size: clamp(15px, 1.2vw, 18px); }
.acc__more{ color: var(--text-primary); align-self:flex-start; }

/* ----------------------------------------------------------- Approach --- */
.approach{ background: var(--rn-dark); color: var(--text-inverse);
  padding-block: clamp(96px, 15vw, 220px); }
.approach__tenets{ display:flex; flex-direction:column; gap: clamp(64px, 9vw, 130px); }
.tenet{ display:grid; grid-template-columns: 60px 1fr; grid-template-rows:auto auto;
  gap: 8px clamp(16px, 2.4vw, 36px); }
.tenet__num{ grid-row:1; color: color-mix(in oklab, var(--paper) 35%, transparent); padding-top:.16em; }
.tenet__heading{ grid-column:2; grid-row:1;
  font-size: clamp(30px, 4.5vw, 72px); line-height:1.06; letter-spacing:-0.02em; color: var(--paper); }
body.jp .tenet__heading{ font-style:normal; line-height:1.5;
  font-size: clamp(26px, 3.5vw, 56px); letter-spacing:.01em; }
.tenet__body{ grid-column:2; grid-row:2;
  font-size: clamp(15px, 1.15vw, 18px); line-height:1.66; max-width:56ch;
  color: color-mix(in oklab, var(--paper) 68%, transparent);
  margin-top: clamp(8px, 1.2vw, 16px); }
body.jp .tenet__body{ line-height:1.95; font-size: clamp(14px, 1.05vw, 17px); }

/* ------------------------------------------------------ Selected work --- */
.work{ background: var(--rn-paper); padding-block: clamp(96px, 15vw, 220px); }
.work__intro{ font-size: clamp(26px, 3.2vw, 48px); line-height:1.14; letter-spacing:-0.015em;
  max-width: 40ch; margin-bottom: clamp(48px, 7vw, 100px); }
.work__intro.jp{ line-height:1.6; letter-spacing:.01em; font-size: clamp(22px,2.6vw,36px); }

.work__grid{ display:grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 3vw, 48px); align-items:start; }
.workcard{ display:flex; flex-direction:column; gap: 18px; text-decoration:none; color:inherit; }
.workcard--a{ grid-column: 1 / span 7; }
.workcard--b{ grid-column: 9 / span 4; margin-top: clamp(64px, 9vw, 140px); }
.workcard__media{ overflow:hidden; border-radius:3px; margin:0; }
.workcard__img{ width:100%; display:block; object-fit:cover;
  transition: transform 1.2s var(--ease-out), filter 1.2s var(--ease-out); }
.workcard--a .workcard__img{ aspect-ratio: 16/11; }
.workcard--b .workcard__img{ aspect-ratio: 4/5; }
.workcard:hover .workcard__img{ transform: scale(1.03); filter: grayscale(0) contrast(1.02); }
.workcard__meta{ display:flex; flex-direction:column; gap:8px; }
.workcard__detail{ color: var(--text-muted); font-size:10px; }
.workcard__name{ font-size: clamp(24px, 2.4vw, 38px); letter-spacing:-0.015em; line-height:1.08; }
.workcard__line{ font-size: clamp(14px, 1.1vw, 16px); line-height:1.6; color: var(--text-secondary);
  max-width: 44ch; }
body.jp .workcard__line{ line-height:1.9; }
.work__cta{ margin-top: clamp(56px, 8vw, 100px); }
.work__ctalink{ font-size: clamp(22px, 2.4vw, 36px); color: var(--text-primary); }

/* -------------------------------------------------------------- Journal -- */
.journal{ background: var(--rn-paper); padding-block: clamp(80px, 12vw, 180px);
  border-top: 1px solid var(--border-hairline); }
.journal__list{ display:flex; flex-direction:column; border-top: 1px solid var(--border-hairline); }
.jentry{ display:grid; grid-template-columns: 110px 1fr 48px; align-items:baseline;
  gap: clamp(16px, 2.4vw, 40px); text-decoration:none; color:inherit;
  padding-block: clamp(26px, 3.4vw, 44px);
  border-bottom: 1px solid var(--border-hairline);
  transition: background var(--dur-normal) var(--ease-alpha); }
.jentry:hover{ background: color-mix(in oklab, var(--rn-paper) 90%, var(--bone)); }
.jentry__date{ color: var(--text-muted); font-size:11px; }
.jentry__main{ display:flex; flex-direction:column; gap: 10px; }
.jentry__title{ font-size: clamp(22px, 2.4vw, 36px); letter-spacing:-0.015em; line-height:1.16; }
body.jp .jentry__title{ font-style:normal; line-height:1.5; letter-spacing:.01em; }
.jentry__standfirst{ font-size: clamp(14px, 1.05vw, 16px); line-height:1.62;
  color: var(--text-secondary); max-width: 64ch; }
body.jp .jentry__standfirst{ line-height:1.9; }
.jentry__arrow{ font-size: clamp(20px, 2vw, 28px); color: var(--text-muted);
  transition: transform var(--dur-normal) var(--ease-alpha), color var(--dur-normal) var(--ease-alpha); }
.jentry:hover .jentry__arrow{ transform: translateX(8px); color: var(--rn-accent); }
.journal__cta{ margin-top: clamp(36px, 5vw, 64px); }

/* ---------------------------------------------------------- Pull-quote -- */
.pullquote{ background: var(--rn-dark); color: var(--text-inverse);
  padding-block: clamp(110px, 16vw, 240px); }
.pullquote__inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap: clamp(28px,4vw,48px); }
.pullquote__label{ color: var(--ash); opacity:.6; font-size:10px; }
.pullquote__text{ font-size: clamp(28px, 4.5vw, 72px); line-height:1.14;
  letter-spacing:-0.02em; color: var(--paper); max-width: 20ch; }
body.jp .pullquote__text{ font-style:normal; line-height:1.55;
  font-size: clamp(24px, 3.5vw, 56px); letter-spacing:.01em; }

/* ------------------------------------------------------------ Footer ---- */
.foot{ background: var(--rn-dark); color: var(--text-inverse);
  padding-top: clamp(96px,14vw,180px); position:relative; overflow:hidden; }
.foot__invite{ padding-bottom: clamp(80px, 11vw, 140px);
  border-bottom: 1px solid var(--border-on-dark); }
.foot__invite-line{ font-size: clamp(34px, 5.6vw, 92px); line-height:1.1; letter-spacing:-0.02em;
  color: var(--paper); max-width: 15ch; }
.foot__invite-line.jp{ letter-spacing:.01em; line-height:1.45; font-size: clamp(28px,5vw,68px); }
.foot__cta{ display:inline-block; white-space:nowrap; margin-top: clamp(44px,5vw,68px);
  padding: 16px 26px; border: 1px solid color-mix(in oklab, var(--paper) 45%, transparent);
  border-radius: var(--radius-sm); color: var(--paper);
  transition: border-color var(--dur-fast) var(--ease-alpha), background var(--dur-fast) var(--ease-alpha); }
.foot__cta:hover{ border-color: var(--paper); background: color-mix(in oklab, var(--paper) 8%, transparent); }

.foot__grid{ display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(28px,4vw,64px);
  padding-block: clamp(56px, 8vw, 96px); }
.foot__col{ display:flex; flex-direction:column; gap:12px; }
.foot__studio{ font-family: var(--font-editorial); font-style:italic; font-size:26px; color: var(--paper); }
.foot__city{ color: var(--ash); }
.foot__clock{ color: color-mix(in oklab, var(--paper) 55%, transparent);
  font-variant-numeric: tabular-nums; }
.foot__blurb{ margin-top:12px; color: color-mix(in oklab, var(--paper) 62%, transparent);
  font-size:14px; max-width:32ch; line-height:1.66; }
body.jp .foot__blurb{ line-height:1.95; font-size:13px; letter-spacing:.01em; }
.foot__coltitle{ color: var(--ash); margin-bottom:6px; }
.foot .foot__coltitle.rn-tag{ color: var(--ash); margin-bottom:6px; }
.foot__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.foot__list a{ color: color-mix(in oklab, var(--paper) 78%, transparent); }
.foot__base{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block: 28px 20px; border-top: 1px solid var(--border-on-dark); flex-wrap:wrap; }
.foot__base .mono{ color: color-mix(in oklab, var(--paper) 40%, transparent); font-size:10px; }

/* giant cropped wordmark — Pentagram sign-off */
.foot__giant{ display:block; text-align:center; white-space:nowrap; line-height:.72;
  font-size: clamp(110px, 19vw, 340px); letter-spacing:-0.035em;
  color: color-mix(in oklab, var(--paper) 13%, transparent);
  margin-bottom: -0.16em; user-select:none; pointer-events:none; }
.foot__giant-g{ font-family: var(--font-grotesk); font-weight:500; }
.foot__giant-n{ font-weight:400; letter-spacing:-0.01em; }

/* ------------------------------------------------------ Responsive ------ */
@media (max-width: 900px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav__right{ margin-left:auto; }
  .acc__header{ grid-template-columns: 36px 1fr 32px; }
  .acc__cat{ display:none; }
  .acc__body-inner{ grid-template-columns: 1fr; }
  .acc__copy{ padding-left:0; }
  .tenet{ grid-template-columns: 1fr; }
  .tenet__num{ grid-row:auto; }
  .tenet__heading{ grid-column:1; }
  .tenet__body{ grid-column:1; }
  .work__grid{ grid-template-columns: 1fr; }
  .workcard--a{ grid-column: 1; }
  .workcard--b{ grid-column: 1; margin-top:0; }
  .jentry{ grid-template-columns: 1fr 32px; }
  .jentry__date{ grid-column: 1 / -1; }
  .foot__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .hero__word{ font-size: calc(clamp(74px, 27vw, 150px) * var(--rn-display-scale)); }
  .hero__panel{ width: min(54vw, 230px); }
  .acc__header{ grid-template-columns: 1fr 32px; }
  .acc__num{ display:none; }
  .foot__grid{ grid-template-columns: 1fr; }
}