/* ============================================================
   Doab Construction — light
   Off-white paper ground, no ambient, no backdrop. The colour
   lives in the logo and the three widgets; everything else is
   paper, ink and a hairline.
   Brand: gold #CBA739 · teal #6DDCD2
   ============================================================ */

/* ---------- typefaces ----------
   Both are self-hosted variable fonts, subset to what this site sets,
   so there is no third-party request and no flash of fallback text.

   "DotoNum" is Doto restricted by unicode-range to U+0030-0039. Listing
   it first in the stack means every digit anywhere on the site renders
   in Doto while every letter falls through to Inter — no markup needed.
   "Doto" is the same file unrestricted, applied only to elements that
   are wholly a figure, so the colon in 9:41 and the degree in 15° are
   dot-matrix too rather than stranded in Inter.                       */
@font-face{
  font-family:"Inter";
  src:url("fonts/inter.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
/* Pinned to wght 800, and declared 100-900 so ANY requested weight
   still renders at 800. A dot-matrix figure carries less ink than a
   solid letter, so at text sizes the lighter cuts read as damaged
   type beside Inter; 800 is the first weight that holds its own. */
@font-face{
  font-family:"DotoNum";
  src:url("fonts/doto-text.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0030-0039;
}
@font-face{
  font-family:"Doto";
  src:url("fonts/doto.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --gold:#CBA739;
  --gold-dp:#8A6E1E;      /* gold that holds up as text on paper */
  --teal:#6DDCD2;
  --teal-dp:#2E8A82;      /* teal that holds up as text on paper */
  /* The logo turquoise is only 1.47:1 on this paper — unreadable as
     text. This is the same hue taken down until it clears AA for body
     copy (4.84:1), which a dot-matrix figure needs even more than solid
     type because the lattice carries less ink than it appears to. */
  --teal-num:#27766F;

  --paper:#F3F3F1;        /* the ground */
  --card:#FFFFFF;
  --card-2:#EDEDEA;

  --ink:#191A1C;
  --ink-2:rgba(25,26,28,.64);
  --ink-3:rgba(25,26,28,.44);
  --ink-4:rgba(25,26,28,.26);

  --line:rgba(25,26,28,.10);
  --line-2:rgba(25,26,28,.18);

  --shadow-sm:0 1px 2px rgba(25,26,28,.05);

  --r-lg:20px;
  --r-md:14px;
  --r-pill:999px;
  --maxw:940px;

  /* DotoNum first: it only claims the digits, everything else is Inter */
  --sans:"DotoNum","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",
         Roboto,system-ui,sans-serif;
  /* for elements that are wholly a figure — punctuation included */
  --figure:"Doto","DotoNum","Inter",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.47059;
  letter-spacing:-.022em;
  font-optical-sizing:auto;   /* Inter carries an opsz axis — let it work */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Both faces declare font-weight:100 900, so ordinary `font-weight`
   drives the wght axis directly. Never set font-variation-settings on
   an ancestor: it inherits as a literal string and would pin every
   descendant's weight, silently killing bold. */

.page{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 20px 56px}
@media(max-width:600px){.page{padding:0 16px 44px}}

/* The landing page is deliberately sparse. On a screen with room to
   spare, sit the whole composition in the middle of the viewport
   rather than letting it hang off the top with dead space beneath. */
@media(min-height:860px){
  .page-center{
    min-height:100vh;display:flex;flex-direction:column;justify-content:center;
    padding-top:24px;
  }
  .page-center .masthead{padding-top:0}
}

/* ---------- the panel ---------- */
.glass{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}

/* ---------- header ---------- */
.masthead{padding:44px 0 26px;text-align:center}
.logo{display:inline-block;width:min(230px,58vw);height:auto}
.tagline{
  margin:18px auto 0;max-width:40ch;color:var(--ink-2);
  font-size:13px;letter-spacing:-.005em;line-height:1.55;
}
.tagline b{color:var(--gold-dp);font-weight:600;letter-spacing:.04em}
.masthead::after{
  content:"";display:block;width:72px;height:1px;margin:22px auto 0;
  background:linear-gradient(90deg,rgba(203,167,57,0),rgba(203,167,57,.75),rgba(203,167,57,0));
}

/* ============================================================
   Nav — Dynamic Island
   One continuous dark capsule rather than four separate pills. A
   single lit pill travels between the items; it follows the pointer
   on hover and settles on the current page when the pointer leaves,
   so the chrome is one object that changes shape rather than four
   objects that light up.
   ============================================================ */
.mainnav{
  position:relative;isolation:isolate;
  display:flex;justify-content:center;align-items:stretch;gap:2px;
  width:max-content;max-width:calc(100% - 8px);margin:0 auto;
  padding:5px;border-radius:var(--r-pill);
  background:rgba(18,19,22,.92);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
          backdrop-filter:saturate(180%) blur(20px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),      /* light catching the top edge */
    0 1px 2px rgba(25,26,28,.14),
    0 14px 30px -14px rgba(25,26,28,.55);
}

/* the travelling pill, injected by nav.js and driven from JS */
.nav-pill{
  position:absolute;top:5px;left:0;z-index:0;
  height:calc(100% - 10px);border-radius:var(--r-pill);
  background:linear-gradient(165deg,rgba(255,255,255,.22),rgba(255,255,255,.09));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26);
  opacity:0;pointer-events:none;
  /* critically damped, response ≈0.42s — Apple's "move/reposition" spring.
     A CSS transform transition retargets from its current computed value,
     so grabbing it mid-flight does not jump. */
  transition:transform .42s cubic-bezier(.32,.72,0,1),
             width     .42s cubic-bezier(.32,.72,0,1),
             opacity   .22s ease;
}
.mainnav.pill-ready .nav-pill{opacity:1}
/* Gold at low alpha over near-black always resolves to olive, so the
   selected pill is near-solid and the label under it flips to dark
   ink. nav.js marks that label, since the pill moves on hover. */
.nav-pill.is-gold{
  background:linear-gradient(165deg,#F2DFA4,#D2B052);
  box-shadow:inset 0 1px 0 rgba(255,250,230,.75),0 1px 3px rgba(0,0,0,.28);
}

.navbtn{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  min-height:34px;padding:8px 17px;
  border-radius:var(--r-pill);
  font-size:13px;font-weight:500;letter-spacing:-.004em;white-space:nowrap;
  text-decoration:none;color:rgba(255,255,255,.62);
  background:none;border:0;box-shadow:none;
  transition:color .22s ease;
}
.navbtn:hover,.navbtn:focus-visible{color:#fff}
.navbtn[aria-current="page"]{color:#fff;font-weight:600;background:none;border:0}
/* whichever label the gold pill is currently sitting under */
.navbtn.on-gold,.navbtn.on-gold:hover{color:#33280A}
.mainnav:focus-within .navbtn:focus-visible{outline:2px solid rgba(255,255,255,.55);outline-offset:2px}

/* Before nav.js runs — and if it never does — the current page still
   reads as selected. The pill is an enhancement, not the mechanism. */
.mainnav:not(.pill-ready) .navbtn[aria-current="page"]{
  background:linear-gradient(165deg,#F2DFA4,#D2B052);
  box-shadow:inset 0 1px 0 rgba(255,250,230,.75);
  color:#33280A;
}

@media(max-width:430px){
  .mainnav{gap:0;padding:4px}
  .navbtn{padding:8px 12px;font-size:12.5px}
}

/* ============================================================
   Widgets — gradient cards, dot-matrix figures
   The card carries its own aurora mesh rather than refracting a
   bloom behind it, so the colour survives at any size. Figures are
   filled with a dot lattice via background-clip:text, which is the
   signature of the reference set.
   ============================================================ */
.widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
@media(max-width:820px){
  .widgets{grid-template-columns:1fr 1fr}
  .w-sun{grid-column:1/-1}
}
@media(max-width:560px){
  .widgets{grid-template-columns:1fr}
  .w-sun{grid-column:auto}
}

.widget{
  position:relative;overflow:hidden;isolation:isolate;
  padding:22px 22px 18px;min-height:246px;display:flex;flex-direction:column;
  border-radius:34px;border:0;
  box-shadow:
    0 1px 2px rgba(25,26,28,.06),
    0 22px 46px -22px rgba(25,26,28,.42);
  color:#fff;
}
.widget > *{position:relative;z-index:2}

/* the mesh itself */
.widget::before{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;
  background:var(--mesh);
  transition:background 1.1s cubic-bezier(.32,.08,.24,1);
}
/* a light source top-left, plus grain so the gradient cannot band */
.widget::after{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"),
    radial-gradient(96% 58% at 14% -10%,rgba(255,255,255,.30),rgba(255,255,255,0) 62%);
  background-size:140px 140px,auto;
  background-repeat:repeat,no-repeat;
}

.w-clock{--mesh:
  radial-gradient(64% 72% at 18% 16%,#7FE6DB 0%,rgba(127,230,219,0) 62%),
  radial-gradient(70% 64% at 88% 24%,#2E8A82 0%,rgba(46,138,130,0) 64%),
  radial-gradient(90% 80% at 44% 108%,#06333E 0%,rgba(6,51,62,0) 72%),
  linear-gradient(158deg,#4ACFC2 0%,#0E5A6A 62%,#06323D 100%)}

/* Every card runs light at the top and deep at the bottom, so the big
   dot-matrix figure always lands on the dark end and always reads.
   The sun card is deepened at the foot for exactly that reason. */
.w-sun{--mesh:
  radial-gradient(62% 70% at 18% 14%,#FFD98A 0%,rgba(255,217,138,0) 60%),
  radial-gradient(72% 66% at 90% 26%,#E0982B 0%,rgba(224,152,43,0) 64%),
  radial-gradient(94% 86% at 46% 102%,#241102 0%,rgba(36,17,2,0) 78%),
  linear-gradient(158deg,#F5BE49 0%,#7A4D0D 52%,#221305 100%)}

.w-wx{--mesh:
  radial-gradient(64% 70% at 18% 16%,#A9BDD4 0%,rgba(169,189,212,0) 60%),
  radial-gradient(70% 64% at 88% 26%,#4E6780 0%,rgba(78,103,128,0) 64%),
  radial-gradient(90% 80% at 46% 108%,#12202E 0%,rgba(18,32,46,0) 72%),
  linear-gradient(158deg,#5E7B97 0%,#243646 46%,#101922 100%)}

.wx-clear-day{--mesh:
  radial-gradient(64% 70% at 18% 14%,#A8DCFF 0%,rgba(168,220,255,0) 60%),
  radial-gradient(72% 64% at 90% 26%,#1E86DC 0%,rgba(30,134,220,0) 64%),
  radial-gradient(92% 82% at 46% 110%,#04203C 0%,rgba(4,32,60,0) 72%),
  linear-gradient(158deg,#3F9EE2 0%,#0E4B7A 46%,#05223A 100%)}
.wx-clear-night{--mesh:
  radial-gradient(64% 70% at 18% 14%,#8E9BE8 0%,rgba(142,155,232,0) 60%),
  radial-gradient(72% 64% at 90% 26%,#2F3C9E 0%,rgba(47,60,158,0) 64%),
  radial-gradient(92% 82% at 46% 110%,#06081C 0%,rgba(6,8,28,0) 72%),
  linear-gradient(158deg,#3E49AC 0%,#161C52 46%,#07091D 100%)}
.wx-cloud{--mesh:
  radial-gradient(64% 70% at 18% 16%,#C3CEDA 0%,rgba(195,206,218,0) 60%),
  radial-gradient(70% 64% at 88% 26%,#5C748D 0%,rgba(92,116,141,0) 64%),
  radial-gradient(90% 80% at 46% 108%,#141E28 0%,rgba(20,30,40,0) 72%),
  linear-gradient(158deg,#6A8299 0%,#2B3D4E 46%,#131C25 100%)}
.wx-rain{--mesh:
  radial-gradient(64% 70% at 18% 14%,#93D2F2 0%,rgba(147,210,242,0) 60%),
  radial-gradient(72% 64% at 90% 26%,#1B6FA8 0%,rgba(27,111,168,0) 64%),
  radial-gradient(92% 82% at 46% 110%,#04222F 0%,rgba(4,34,47,0) 72%),
  linear-gradient(158deg,#3388B4 0%,#0C3E5C 46%,#051A26 100%)}
.wx-snow{--mesh:
  radial-gradient(64% 70% at 18% 16%,#DCE6EF 0%,rgba(220,230,239,0) 60%),
  radial-gradient(70% 64% at 88% 26%,#7A8FA4 0%,rgba(122,143,164,0) 64%),
  radial-gradient(90% 80% at 46% 108%,#1B242D 0%,rgba(27,36,45,0) 72%),
  linear-gradient(158deg,#889CAF 0%,#374651 46%,#161E25 100%)}
.wx-fog{--mesh:
  radial-gradient(64% 70% at 18% 16%,#CFD4DA 0%,rgba(207,212,218,0) 60%),
  radial-gradient(70% 64% at 88% 26%,#6B7580 0%,rgba(107,117,128,0) 64%),
  radial-gradient(90% 80% at 46% 108%,#181C21 0%,rgba(24,28,33,0) 72%),
  linear-gradient(158deg,#7A828B 0%,#31373E 46%,#14171B 100%)}
.wx-storm{--mesh:
  radial-gradient(64% 70% at 18% 14%,#B7A8E6 0%,rgba(183,168,230,0) 60%),
  radial-gradient(72% 64% at 90% 26%,#57459B 0%,rgba(87,69,155,0) 64%),
  radial-gradient(92% 82% at 46% 110%,#0C0818 0%,rgba(12,8,24,0) 72%),
  linear-gradient(158deg,#5D4CA6 0%,#251C4B 46%,#0B0818 100%)}

/* ---------- display figures ----------
   The dot matrix is the typeface now, not a background trick clipped to
   the glyphs, so the figures are real text at any size with no
   background-clip dependency and nothing to fall back from. */
.fig{
  font-family:var(--figure);
  font-variation-settings:"ROND" 0;
  font-variant-numeric:tabular-nums;
  font-weight:700;
}

.w-head{
  display:flex;align-items:center;gap:7px;
  font-size:13px;font-weight:500;letter-spacing:-.01em;color:rgba(255,255,255,.8);
}
.w-head svg{width:14px;height:14px;flex:none;opacity:.85}
.w-body{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:12px 0}
.w-foot{
  font-size:12.5px;color:rgba(255,255,255,.7);text-align:center;
  border-top:1px solid rgba(255,255,255,.2);padding-top:12px;letter-spacing:-.008em;
}

.clockface{width:min(120px,38vw);aspect-ratio:1;display:block}
.digital{margin-top:14px;font-size:38px;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;line-height:1}
.digital .ampm{font-size:.38em;font-weight:600;letter-spacing:.01em;margin-left:.3em;
  color:rgba(255,255,255,.75);-webkit-text-fill-color:rgba(255,255,255,.75);
  background:none;font-variant-numeric:normal}

.temp{font-size:52px;letter-spacing:.005em;line-height:1;
  font-variant-numeric:tabular-nums;margin:10px 0 4px}
/* the degree mark is too small to hold a lattice — keep it solid */
.temp .deg{color:#fff;font-family:"Inter",system-ui,sans-serif;
  font-weight:500;font-size:.5em;vertical-align:.24em;margin-left:.04em}
.cond{font-size:14px;color:rgba(255,255,255,.88);font-weight:400;letter-spacing:-.016em}
.hilo{display:flex;gap:16px;margin-top:10px;font-size:13.5px;
  font-variant-numeric:tabular-nums;color:rgba(255,255,255,.72);letter-spacing:-.016em}
.hilo b{color:#fff;font-weight:600}
.wx-icon{width:40px;height:40px}
.wx-rows{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;width:100%;font-size:12px;text-align:left}
.wx-rows b{display:block;color:rgba(255,255,255,.56);font-weight:500;font-size:10.5px;letter-spacing:.012em}
.wx-rows span{color:rgba(255,255,255,.96)}

.sunarc{width:100%;max-width:190px;height:auto;display:block;margin:0 auto}
.suntime{margin-top:10px;font-size:38px;letter-spacing:.01em;line-height:1;
  font-variant-numeric:tabular-nums}
.suntime .ampm{font-size:.38em;font-weight:600;margin-left:.3em;letter-spacing:.01em;
  color:rgba(255,255,255,.75);-webkit-text-fill-color:rgba(255,255,255,.75);
  background:none;font-variant-numeric:normal}
.sunlabel{font-size:11px;font-weight:500;color:rgba(255,255,255,.7);margin-bottom:5px;letter-spacing:.012em}
.sunrise-val{font-size:20px;font-weight:500;font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.95);letter-spacing:.011em}
.arc-lit{filter:drop-shadow(0 0 6px rgba(255,214,110,.6))}
#sundot{filter:drop-shadow(0 0 7px rgba(255,226,150,.95))}
.muted{color:rgba(255,255,255,.75);font-size:13px;text-align:center;line-height:1.45}

/* ---------- content pages ---------- */
.panel{padding:26px 24px;margin-top:12px}
@media(max-width:600px){.panel{padding:20px 16px}}
h1,h2,h3{margin:0;letter-spacing:-.022em;text-wrap:balance;font-weight:600;color:var(--ink)}
h1{font-size:clamp(22px,3.4vw,28px)}
h2{font-size:clamp(17px,2.6vw,21px)}
h3{font-size:15px}
.panel p{margin:10px 0 0;color:var(--ink-2);max-width:68ch;font-size:14px}
.panel p b,.panel li b{color:var(--ink);font-weight:600}
.rule{height:1px;border:0;margin:16px 0 0;
  background:linear-gradient(90deg,rgba(203,167,57,.7),rgba(203,167,57,.2) 42%,rgba(25,26,28,.06))}
.eyebrow{font-size:10.5px;font-weight:700;color:var(--gold-dp);margin:0 0 7px;
  letter-spacing:.15em;text-transform:uppercase}

.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
@media(max-width:640px){.statrow{grid-template-columns:repeat(2,1fr)}}
.statbox{padding:14px 12px;border-radius:var(--r-md);text-align:center;
  background:var(--card-2);border:1px solid var(--line);box-shadow:none}
.statbox .n{font-size:25px;font-weight:600;letter-spacing:-.03em;
  color:var(--gold-dp);font-variant-numeric:tabular-nums;line-height:1}
.statbox .l{font-size:10.5px;color:var(--ink-3);margin-top:6px;line-height:1.35}

.tags{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-size:12px;padding:5px 11px;border-radius:var(--r-pill);
  background:var(--card-2);border:1px solid rgba(203,167,57,.3);color:var(--ink-2)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}

.tablewrap{overflow-x:auto;margin-top:16px;border-radius:var(--r-md);border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;min-width:600px;font-size:13px;background:var(--card)}
th{text-align:left;font-size:11px;color:var(--ink-3);font-weight:600;
  padding:10px 14px;border-bottom:1px solid var(--line-2);white-space:nowrap}
td{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--card-2)}
td.k{color:var(--ink);font-weight:600}

.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;
  padding:10px 18px;border-radius:var(--r-pill);text-decoration:none;
  font-weight:500;font-size:13.5px;color:var(--ink-2);
  background:var(--card);border:1px solid var(--line);
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.btn:hover,.btn:focus-visible{color:var(--ink);border-color:var(--line-2);background:var(--card-2)}
.btn-gold{color:#241B05;border:1px solid rgba(138,110,30,.4);
  background:linear-gradient(150deg,#EBD48C 0%,#CBA739 55%,#B08F2E 100%)}
.btn-gold:hover{color:#241B05;background:linear-gradient(150deg,#F4E2AB 0%,#D8B54B 55%,#BC9C36 100%);
  border-color:rgba(138,110,30,.6)}

.sitefoot{margin-top:32px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  font-size:11.5px;color:var(--ink-3)}
.sitefoot a{color:var(--ink-3);text-decoration:none}
.sitefoot a:hover{color:var(--gold-dp)}

/* ============================================================
   Stark project pages — paper, grid, nothing else
   ============================================================ */
body.stark{background:var(--paper)}
.stark-wrap{position:relative;max-width:1320px;margin:0 auto;padding:0 24px 64px}
@media(max-width:600px){.stark-wrap{padding:0 14px 48px}}

.stark-top{padding:30px 0 34px;text-align:center}
.stark-top img{width:158px;height:auto;display:inline-block}
@media(max-width:600px){.stark-top img{width:132px}}

.pgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:34px 20px}
@media(max-width:1080px){.pgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.pgrid{grid-template-columns:repeat(3,1fr);gap:26px 14px}}
@media(max-width:480px){.pgrid{grid-template-columns:repeat(2,1fr)}}

.pcell{text-decoration:none;color:inherit;display:block}
.pshot{
  aspect-ratio:1;background:#E9E9E6;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
  transition:border-color .3s ease,box-shadow .3s ease;
}
.pshot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pshot .ph{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-4);text-align:center;padding:8px;line-height:1.5;
}
.pcell:hover .pshot{border-color:rgba(203,167,57,.6);
  box-shadow:0 0 0 1px rgba(203,167,57,.2),0 12px 26px -18px rgba(25,26,28,.5)}
.pcell:hover .plabel{color:var(--gold-dp)}
.plabel{
  margin-top:11px;text-align:center;font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
  line-height:1.4;transition:color .2s ease;
  min-height:2.8em;display:flex;align-items:flex-start;justify-content:center;
}
.pmeta{margin-top:4px;text-align:center;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}

/* ---------- detail ---------- */
.dhead{max-width:860px;margin:0 auto;text-align:center;padding:6px 0 34px}
.dhead h1{font-size:clamp(22px,4vw,34px);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.dkicker{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-dp);margin:0 0 12px;font-weight:700}
.dsum{margin:16px auto 0;max-width:64ch;font-size:14px;color:var(--ink-2);line-height:1.6}
.dscope{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:18px auto 0;max-width:760px}
.dscope li{
  list-style:none;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border:1px solid rgba(203,167,57,.34);
  background:var(--card);color:var(--ink-2);
}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:6px}
@media(max-width:900px){.gallery{grid-template-columns:repeat(3,1fr);gap:10px}}
@media(max-width:560px){.gallery{grid-template-columns:repeat(2,1fr)}}
.gshot{aspect-ratio:4/3;background:#E9E9E6;border:1px solid var(--line);overflow:hidden}
.gshot img{width:100%;height:100%;object-fit:cover;display:block}

.gempty{
  border:1px dashed var(--line-2);padding:38px 24px;text-align:center;
  font-size:12px;letter-spacing:.06em;color:var(--ink-3);line-height:1.7;background:var(--card);
}
.gempty b{display:block;color:var(--ink-2);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;font-size:10.5px;margin-bottom:8px}
.gempty code{color:var(--teal-dp);font-size:11.5px}

.dsection{margin-top:46px}
.dsection h2{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;margin-bottom:18px}
.loctable{width:100%;border-collapse:collapse;font-size:13px;min-width:0;background:transparent}
.loctable td{padding:11px 12px;border-bottom:1px solid var(--line);
  color:var(--ink-2);vertical-align:top}
.loctable tr:last-child td{border-bottom:0}
.loctable td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
.loctable td:last-child{text-align:right;font-size:12px;color:var(--ink-3)}
@media(max-width:560px){
  .loctable,.loctable tbody,.loctable tr,.loctable td{display:block;width:100%}
  .loctable tr{border-bottom:1px solid var(--line);padding:10px 0}
  .loctable td{border:0;padding:2px 0;text-align:left!important}
}

/* The main nav, repeated at the foot of the stark pages.
   The nav element IS the capsule now, so its padding is the capsule's
   own geometry — adding padding-top here inflated the island and threw
   it off-centre. The gap and the hairline are handled outside it. */
.bottomnav{margin-top:92px;position:relative}
.bottomnav::before{
  content:"";position:absolute;top:-34px;left:50%;transform:translateX(-50%);
  width:min(360px,70%);height:1px;
  background:linear-gradient(90deg,rgba(203,167,57,0),rgba(203,167,57,.6),rgba(203,167,57,0));
}
.stark-mail{text-align:center;margin:16px 0 0;font-size:11.5px;letter-spacing:.04em}
.stark-mail a{color:var(--ink-3);text-decoration:none}
.stark-mail a:hover{color:var(--gold-dp)}

:focus-visible{outline:2px solid var(--teal-dp);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================
   A plain dissolve between pages — native, no script.

   This is a CROSS-DOCUMENT view transition, so it only shows over
   http(s), not on a file:// open, and only in browsers that support
   it (Chrome 126+, Safari 18.2+). Anywhere else the navigation is
   simply instant, which is a perfectly good outcome.

   Exactly one element per page carries dc-logo; two would be a
   duplicate name and would silently abort the whole transition.
   ============================================================ */
@view-transition{navigation:auto}
.logo,.stark-top img{view-transition-name:dc-logo}

@media(prefers-reduced-motion:no-preference){
  /* The outgoing page is held a beat longer than the incoming one
     takes to arrive, so the two overlap rather than both sitting
     half-transparent over the background mid-way — which is what
     makes a crossfade flash. */
  ::view-transition-old(root){animation:dcOut .30s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:dcIn  .36s cubic-bezier(0,0,.3,1) both}
  ::view-transition-group(dc-logo){
    animation-duration:.42s;animation-timing-function:cubic-bezier(.32,.08,.24,1);
  }
  @keyframes dcOut{to{opacity:0}}
  @keyframes dcIn{from{opacity:0}}
}
/* honour the system setting: no dissolve, just an instant swap */
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ============================================================
   Editorial pages — no cards, no bullets, no dividers.
   Measures are in em so they scale with the type: paragraphs at
   30em (~60 characters), headlines at 7em (~2-3 words a line),
   which is what makes headlines break the way Apple's do.
   Section padding is ~7x the body size; the gap from a headline
   to its own paragraph is ~1.3x. That 5.5:1 macro-to-micro ratio
   is what reads as quiet.
   ============================================================ */
.ed{max-width:910px;margin:0 auto;padding:0 24px 40px}
@media(max-width:734px){.ed{padding:0 20px 30px}}

.ed-sec{padding-top:122px}
.ed-sec:first-of-type{padding-top:68px}
@media(max-width:1068px){.ed-sec{padding-top:100px}}
@media(max-width:734px){.ed-sec{padding-top:64px}.ed-sec:first-of-type{padding-top:40px}}

.ed-center{text-align:center}
.ed-center .ed-h,.ed-center .ed-p{margin-left:auto;margin-right:auto}

.ed-eyebrow{
  font-size:24px;font-weight:600;letter-spacing:.009em;line-height:1.16667;
  color:var(--gold-dp);margin:0 0 .42em;
}
@media(max-width:1068px){.ed-eyebrow{font-size:21px;letter-spacing:.011em}}
@media(max-width:734px){.ed-eyebrow{font-size:19px;letter-spacing:.012em}}

.ed-h{
  font-size:48px;font-weight:400;letter-spacing:-.003em;line-height:1.08;
  max-width:7em;margin:0 0 22px;color:var(--ink);text-wrap:balance;
}
.ed-h-lg{font-size:64px;letter-spacing:-.009em;max-width:8em}
@media(max-width:1068px){
  .ed-h{font-size:40px;letter-spacing:0;margin-bottom:16px}
  .ed-h-lg{font-size:48px;letter-spacing:-.003em}
}
@media(max-width:734px){
  .ed-h{font-size:32px;letter-spacing:.004em;margin-bottom:13px}
  .ed-h-lg{font-size:36px;letter-spacing:.002em}
}

.ed-p{
  font-size:17px;line-height:1.47059;letter-spacing:-.022em;
  color:#515154;max-width:30em;margin:0;
}
.ed-p + .ed-p{margin-top:1.25em}
.ed-p-narrow{max-width:24em}

.ed-note{
  font-size:14px;line-height:1.42859;letter-spacing:-.016em;
  color:var(--ink-3);max-width:34em;margin:1.5em 0 0;
}
.ed-center .ed-note{margin-left:auto;margin-right:auto}

/* two article units side by side — a "list" made of small headlines */
.ed-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:0}
@media(max-width:1068px){.ed-row{gap:44px}}
@media(max-width:734px){.ed-row{grid-template-columns:1fr;gap:56px}}
.ed-row .ed-h{font-size:32px;letter-spacing:.004em;line-height:1.12;max-width:9em;margin-bottom:16px}
@media(max-width:734px){.ed-row .ed-h{font-size:28px;letter-spacing:.007em}}

/* statistics: big regular numeral, caption lifted out of flow so a row of
   them aligns on the numeral baseline whatever the caption length */
/* The captions used to be absolutely positioned, with a fixed margin
   below each badge standing in for their height — so a caption that ran
   long overlapped whatever sat beneath it. They are in normal flow now:
   the grid rows size themselves to the tallest caption and the collision
   cannot happen at any width or text size. */
.badges{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(9em,1fr));
  gap:40px 2.6em;
  margin-top:64px;
}
@media(max-width:734px){
  .badges{grid-template-columns:repeat(2,1fr);gap:32px 1.6em;margin-top:44px}
}
.badge{text-align:left}
.badge-value{
  display:block;position:relative;left:-2px;white-space:nowrap;
  font-size:64px;font-weight:400;letter-spacing:-.009em;line-height:1;
  color:var(--teal-num);font-variant-numeric:tabular-nums;
}
/* a figure sitting inside running text */
.num{color:var(--teal-num)}
@media(max-width:1068px){.badge-value{font-size:48px;letter-spacing:-.003em}}
@media(max-width:734px){.badge-value{font-size:40px;letter-spacing:0}}
.badge-unit{font-size:.5em;font-weight:600;letter-spacing:.004em;margin-left:.06em}
.badge-caption{
  display:block;margin-top:.55em;
  font-size:14px;line-height:1.28577;letter-spacing:-.016em;color:var(--ink-3);
  text-wrap:pretty;
}

/* a row of names, set as type rather than pills */
.ed-names{
  display:flex;flex-wrap:wrap;gap:.45em 1.5em;margin:26px 0 0;padding:0;list-style:none;
  font-size:21px;letter-spacing:.011em;color:var(--ink);
}
@media(max-width:734px){.ed-names{font-size:19px;letter-spacing:.012em;gap:.4em 1.1em}}
.ed-center .ed-names{justify-content:center}

/* the single keyline Apple allows, given as much room as a section break */
.ed-keyline{border:0;border-bottom:1px solid #D2D2D7;margin:0;padding-bottom:48px}

.ed-cta{margin-top:39px;display:flex;flex-wrap:wrap;gap:10px}
.ed-center .ed-cta{justify-content:center}


/* ============================================================
   Response — feedback lands on the press, not the release,
   and every transition is short enough to feel direct.
   ============================================================ */
.navbtn,.btn,.pcell{-webkit-tap-highlight-color:transparent}
.navbtn:active,.btn:active{transform:scale(.975)}
.navbtn,.btn{transition:background .18s ease,color .18s ease,border-color .18s ease,
  transform .12s cubic-bezier(.2,.9,.3,1)}
.pcell .pshot{transition:border-color .25s ease,box-shadow .25s ease,
  transform .18s cubic-bezier(.2,.9,.3,1)}
.pcell:active .pshot{transform:scale(.982)}
.widget{transition:transform .2s cubic-bezier(.2,.9,.3,1)}

/* large surfaces materialise — blur and scale together — rather than
   simply fading, so they read as a material arriving */
@media(prefers-reduced-motion:no-preference){
  .widget{animation:materialise .62s cubic-bezier(.22,.7,.25,1) both}
  .widget:nth-child(2){animation-delay:.05s}
  .widget:nth-child(3){animation-delay:.1s}
  @keyframes materialise{
    from{opacity:0;transform:scale(.975);filter:blur(7px)}
    to  {opacity:1;transform:scale(1);filter:blur(0)}
  }
}

/* the accessibility signals the material has to answer to */
@media(prefers-reduced-transparency:reduce){
  .navbtn,.btn,.glass{backdrop-filter:none;background:var(--card)}
}
@media(prefers-contrast:more){
  :root{--line:rgba(25,26,28,.28);--line-2:rgba(25,26,28,.45);--ink-2:rgba(25,26,28,.82)}
  .navbtn,.btn,.glass{border-width:1px;border-color:var(--line-2)}
}

/* The dot lattice belongs on the gradient cards, where bright dots on a
   deep ground read as a lit display. On paper, dark dots at 30% coverage
   read as damaged type, so the statistics stay solid ink. */
.badge-unit{color:var(--teal-num);font-family:"Inter",system-ui,sans-serif;
  font-size:.42em;font-weight:500;letter-spacing:.004em;margin-left:.08em;vertical-align:.12em}