/* Self-hosted fonts (latin subset, woff2, font-display:swap).
   Previously fetched from fonts.googleapis.com, which meant a
   render-blocking request to a third party plus a second connection to
   fonts.gstatic.com before any text could paint. Served from our own
   origin they are on a connection the browser already has. 209KB total.
   To change weights, re-download the woff2 rather than re-adding the CDN. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Barlow-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Barlow-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/BarlowCondensed-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/BarlowCondensed-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Inter-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/Inter-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Inter-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


/* ============================================================================
   mikemillett.com — the canonical Mike Millett person site.

   Built on the Digilu house system, not on a lookalike of it: the same navy
   and coral tokens, the same Barlow Condensed / Barlow / Inter stack, and the
   same `.la` line-art system ported from digilu/styles.css so the two are
   visibly one family. This is a PERSON site, so the layout is editorial rather
   than commercial, but the ink, the type and the drawings are the house's.

   THE HTML IS BUILD OUTPUT. Edit tools/, run python3 build.py.
   ========================================================================= */
:root{
  --digilu-navy:#1A2A34; --digilu-charcoal:#2B353B;
  --white:#fff; --light-mist:#F4F7F8; --cool-gray:#636A76; --proof-dark:#0F1D25;
  --accent:#E2553D; --accent-text:#BF3E2A; --accent-on-dark:#EE6B4F; --accent-rgb:226,85,61;
  --font-display:'Barlow Condensed',sans-serif;
  --font-accent:'Barlow',sans-serif;
  --font-body:'Inter',sans-serif;
  --container-max:1280px; --nav-h:72px;
  --line:#E3E8EA;
  --shadow-lg:0 8px 32px rgba(0,0,0,.18); --shadow-xl:0 16px 48px rgba(0,0,0,.24);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--digilu-navy);
  font-family:var(--font-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-text);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 1.5rem}
@media(min-width:1100px){.wrap{padding:0 5rem}}

h1,h2,h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  line-height:1.04;letter-spacing:-.005em;margin:0 0 .5em}
h1{font-size:clamp(2.6rem,6vw,4.6rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:1.15rem;font-family:var(--font-accent);font-weight:600;text-transform:none;letter-spacing:0}
p{margin:0 0 1.15em;max-width:68ch}
.eyebrow{display:block;font-family:var(--font-body);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);margin-bottom:14px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:300;background:var(--digilu-navy);color:#fff;padding:12px 18px}

/* ---------- header + megamenu, the Digilu pattern ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--digilu-navy)}
.header-inner{max-width:var(--container-max);margin:0 auto;padding:0 1.5rem;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
@media(min-width:1100px){.header-inner{padding:0 5rem}}
.site-logo{display:flex;align-items:center;gap:10px;color:#fff}
.site-logo:hover{text-decoration:none}
.site-logo svg{width:26px;height:26px;flex-shrink:0}
.site-logo b{font-family:var(--font-display);font-weight:700;font-size:19px;
  letter-spacing:.09em;text-transform:uppercase;color:#fff}
.primary-nav{display:flex;align-items:center;gap:2px}
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:5px;padding:9px 12px;border-radius:6px;
  font-family:var(--font-body);font-size:13.5px;font-weight:500;color:rgba(255,255,255,.78);
  white-space:nowrap;transition:color .2s,background .2s}
.nav-link:hover,.nav-link[aria-current=page]{color:#fff;background:rgba(255,255,255,.08);text-decoration:none}
.nav-caret{width:12px;height:12px;opacity:.8;transition:transform .2s}
.nav-item:hover .nav-link{color:#fff}
.nav-item:hover .nav-caret{transform:rotate(180deg);opacity:1}
.mega-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-8px);
  opacity:0;visibility:hidden;pointer-events:none;transition:.2s ease;z-index:120}
.mega-menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.nav-item:hover .mega-menu,.nav-item:focus-within .mega-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega-menu-inner{display:flex;background:var(--proof-dark);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;box-shadow:var(--shadow-xl);overflow:hidden}
.mm-feature{position:relative;display:flex;flex-direction:column;width:270px;padding:22px;
  background:linear-gradient(150deg,#16262F,#0F1D25);border-right:1px solid rgba(255,255,255,.08);overflow:hidden}
.mm-feature:hover{text-decoration:none}
.mm-fx{position:absolute;right:-26px;bottom:-24px;opacity:.5;pointer-events:none}
.mm-flabel{display:block;font-family:var(--font-body);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.mm-feature h4{font-family:var(--font-display);font-weight:700;font-size:23px;text-transform:uppercase;
  line-height:1.08;margin:0 0 8px;color:#fff}
.mm-feature p{font-family:var(--font-body);font-size:12.5px;color:rgba(255,255,255,.62);
  line-height:1.5;margin:0 0 16px;max-width:none}
.mm-fcta{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body);
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);transition:gap .2s}
.mm-fcta svg{width:14px;height:14px}
.mm-feature:hover .mm-fcta{gap:11px}
.mm-list{padding:14px;min-width:300px}
.mm-glabel{display:block;padding:8px 14px 6px;font-family:var(--font-body);font-size:10px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8A929C}
.mm-cols{display:flex;gap:8px}
.mm-cols>div{flex:1;min-width:228px}
.mm-row{display:flex;align-items:flex-start;gap:13px;padding:9px 14px;border-radius:6px;transition:background .2s}
.mm-row:hover{background:rgba(255,255,255,.05);text-decoration:none}
.mm-ico{flex-shrink:0;width:34px;height:34px;border-radius:9px;background:rgba(var(--accent-rgb),.1);
  border:1px solid rgba(var(--accent-rgb),.24);display:flex;align-items:center;justify-content:center}
.mm-ico svg{width:18px;height:18px}
.mm-tt{display:block;font-family:var(--font-body);font-size:14px;font-weight:600;color:#fff;line-height:1.25}
.mm-ds{display:block;font-family:var(--font-body);font-size:12px;color:rgba(255,255,255,.5);
  margin-top:3px;line-height:1.4}
.burger{display:none;background:none;border:0;width:44px;height:44px;padding:10px;cursor:pointer}
.burger span{display:block;height:2px;background:#fff;margin:5px 0;border-radius:2px;transition:.2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none}

/* ============================================================================
   LINE ART — ported verbatim in behaviour from digilu/styles.css.
   Navy hairline ink on a real, recognisable subject. The coral accent is spent
   EXACTLY ONCE per piece, on the stroke that carries the meaning. Nothing fades
   in; everything is drawn, in order, by one hand. Every stroke carries
   pathLength="1" so the draw is one dashoffset transition with nothing measured
   in script.

   The two traps are already fixed here and must not be reintroduced:
   `vector-effect:non-scaling-stroke` measures in device space while
   `stroke-dasharray:1` measures in user space, so the dash is scaffolding that
   MUST be removed at rest (.settled), or a finished stroke rests with runs of
   itself missing. And the draw curve needs a real end slope or the pen visibly
   crawls to a halt short of the end.
   ========================================================================= */
.la{display:block;width:100%;height:auto;overflow:visible;fill:none}
.la path,.la circle,.la ellipse,.la line,.la polyline,.la rect{
  fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.la .la-ink{stroke:var(--digilu-navy);stroke-width:1.8}
.la .la-ghost{stroke:var(--digilu-navy);stroke-width:1.8;opacity:.15}
.la .la-det{stroke:var(--digilu-navy);stroke-width:1.4;opacity:.6}
.la .la-acc{stroke:var(--accent);stroke-width:2.2}
.la .la-dot{fill:var(--digilu-navy);stroke:none}
.la .la-dot-acc{fill:var(--accent);stroke:none}
.la .la-lbl{fill:var(--cool-gray);stroke:none;text-anchor:middle;font-family:var(--font-accent);
  font-weight:600;font-size:13px;letter-spacing:.13em;text-transform:uppercase}
.la .la-date{fill:var(--accent);font-size:15px;letter-spacing:.1em}
.la--dark .la-date{fill:var(--accent-on-dark)}
.la--dark .la-ink{stroke:rgba(255,255,255,.6)}
.la--dark .la-det{stroke:rgba(255,255,255,.4);opacity:1}
.la--dark .la-acc{stroke:var(--accent-on-dark)}
.la--dark .la-dot{fill:rgba(255,255,255,.5)}
.la--dark .la-dot-acc{fill:var(--accent-on-dark)}
.la--dark .la-lbl{fill:rgba(255,255,255,.5)}

.la [data-draw]{stroke-dasharray:1;stroke-dashoffset:1}
.la.drawn [data-draw]{stroke-dashoffset:0;
  transition:stroke-dashoffset 1.05s cubic-bezier(.35,.15,.65,.85)}
.la.drawn .la-det[data-draw],.la.drawn .la-det [data-draw]{transition:stroke-dashoffset .55s ease-out .9s}
.la.drawn .la-acc[data-draw],.la.drawn .la-acc [data-draw]{transition:stroke-dashoffset .45s ease-out 1.3s}
.la.settled [data-draw]{stroke-dasharray:none;stroke-dashoffset:0}
.la .la-fade{opacity:0}
.la.drawn .la-fade{opacity:1;transition:opacity .4s ease-out 1.45s}
@media(prefers-reduced-motion:reduce){
  .la [data-draw]{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .la.drawn [data-draw],.la.settled [data-draw]{transition:none}
  .la .la-fade{opacity:1;transition:none}
}
/* placements */
.la-band{margin:3rem 0 3.25rem}
.la-fig{max-width:820px;margin:2.5rem auto 2.75rem}
.la-mark{width:84px;height:84px;margin:0 0 1rem}
.la-mark--lg{width:120px;height:120px}

/* ---------- hero ------------------------------------------------------
   FULL BLEED, NOT A CARD. The first version put the headline in one box and
   the portrait in another and it read as a template. Two things fix it.

   First, the studio portrait is already shot on navy: sampled at #101F32 at the
   edges falling to #09111E at the foot, which is within a few points of
   --proof-dark. So the section takes that navy and the photograph is MASKED
   into it rather than framed on top of it. No border, no radius, no shadow.
   The man is standing in the page, not pasted onto it.

   Second, the five-shifts drawing runs along the floor of the hero in the dark
   ink variant. The hero then IS the argument the site makes rather than a
   headline that happens to sit above it: thirty years, five shifts, and the
   coral spent once on the one we are in.
   --------------------------------------------------------------------- */
.hero{
  position:relative;
  background:linear-gradient(160deg,#1B2C3A 0%,#132433 42%,#0C1723 100%);
  color:#fff;border-bottom:0;overflow:hidden;
  padding:5.5rem 0 0;
}
.hero-grid{
  display:grid;grid-template-columns:1.06fr .94fr;gap:3rem;align-items:end;
  position:relative;z-index:2;
}
.hero-copy{padding-bottom:5.5rem}
.hero .eyebrow{color:var(--accent-on-dark)}
.hero h1{
  color:#fff;margin-bottom:.3em;
  font-size:clamp(3rem,8.2vw,6.6rem);letter-spacing:-.012em;line-height:.92;
}
.hero .lede{
  color:#fff;font-family:var(--font-accent);font-weight:500;
  font-size:clamp(1.2rem,2.35vw,1.72rem);line-height:1.35;
  max-width:22ch;margin-bottom:1em;
}
/* The one coral mark in the hero: a rule under the claim, not a decoration. */
.hero .lede::after{
  content:"";display:block;width:64px;height:3px;background:var(--accent);
  margin-top:1.15rem;
}
.hero .sub{color:rgba(255,255,255,.62);font-size:1rem;max-width:44ch}
.hero .sub strong{color:#fff;font-weight:600}
/* Order matters: the ghost rule must WIN over the solid one, so it comes after. */
.hero .btn{background:var(--accent);border-color:var(--accent);color:#fff}
.hero .btn:hover{background:#fff;border-color:#fff;color:var(--digilu-navy)}
.hero .btn.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.hero .btn.btn--ghost:hover{background:#fff;border-color:#fff;color:var(--digilu-navy)}

/* The portrait dissolves into the navy on three edges. Both the standard and
   the -webkit- property are set: Safari still needs the prefixed one, and a
   mask that silently does not apply leaves a hard photographic rectangle,
   which is the exact thing this is here to remove. */
.hero-fig{margin:0;align-self:end;position:relative}
/* Break the container on the right so the figure reaches the edge of the screen.
   A portrait that stops short of the edge reads as an image placed in a layout;
   one that runs off it reads as a photograph the page is built around. */
@media(min-width:901px){
  .hero-fig{margin-right:calc((100vw - min(100vw, var(--container-max))) / -2 - 1.5rem)}
}
@media(min-width:1100px){
  .hero-fig{margin-right:calc((100vw - min(100vw, var(--container-max))) / -2 - 5rem)}
}
.hero-fig img{
  width:100%;max-width:none;display:block;
  -webkit-mask-image:
     linear-gradient(to right,transparent 0%,#000 22%,#000 100%),
     linear-gradient(to bottom,#000 68%,transparent 99%);
  mask-image:
     linear-gradient(to right,transparent 0%,#000 22%,#000 100%),
     linear-gradient(to bottom,#000 68%,transparent 99%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* The argument along the floor of the hero. */
.hero-floor{
  position:relative;z-index:3;margin-top:-1rem;padding:0 0 2.5rem;
  opacity:.8;
  /* A soft scrim so the drawing reads over the darkest part of the photograph
     without a visible edge. It sits ABOVE the figure deliberately: the five
     shifts are the ground he is standing on. */
  background:linear-gradient(to bottom,rgba(12,23,35,0) 0%,rgba(12,23,35,.72) 34%,rgba(12,23,35,.96) 100%);
}
.hero-floor .la{max-width:1180px;margin:0 auto;padding:0 1.5rem}
@media(min-width:1100px){.hero-floor .la{padding:0 5rem}}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.9rem}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--digilu-navy);color:#fff;
  padding:13px 24px;border-radius:4px;font-family:var(--font-body);font-size:13px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--digilu-navy);cursor:pointer;
  transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;text-decoration:none}
.btn--ghost{background:transparent;color:var(--digilu-navy);border-color:#C9D2D6}
.btn--ghost:hover{background:var(--digilu-navy);border-color:var(--digilu-navy);color:#fff}
.btn--onnavy{background:var(--accent);border-color:var(--accent)}
.btn--onnavy:hover{background:#fff;border-color:#fff;color:var(--digilu-navy)}

/* ---------- page head + sections ---------- */
/* ---------- page head ------------------------------------------------
   Every inner page used to open with a headline on grey, which is why the
   site read as a document rather than as a designed thing. The head is now
   the same navy family as the hero, carries the page's own drawing, and
   gives each page a first screen with weight.
   --------------------------------------------------------------------- */
.page-head{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#1B2C3A 0%,#132433 55%,#0C1723 100%);
  color:#fff;border-bottom:0;padding:2.9rem 0 2.6rem;
}
.page-head .wrap{position:relative;z-index:2}
.page-head-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:2.5rem;align-items:center}
.page-head h1{color:#fff;margin-bottom:.24em;font-size:clamp(2.3rem,5vw,3.9rem)}
.page-head .eyebrow{color:var(--accent-on-dark)}
.page-head .lede{color:rgba(255,255,255,.74);max-width:56ch;font-size:1.1rem;margin-bottom:0;
  font-family:var(--font-accent);font-weight:400}
.page-head-mark{margin:0}
.page-head-mark .la{max-width:230px;margin-left:auto}
/* A HEAD PHOTO HAS TO LIVE IN THE PALETTE, not sit on top of it.
   The portraits are a mix of navy studio and bright outdoor garden. Dropped
   straight onto the navy the garden shots read as a snapshot pasted onto a
   designed page. Desaturating them and laying a navy multiply over the top puts
   every portrait in the same world, whatever it was shot against, and the mask
   dissolves the left edge so there is no frame. */
.page-head-fig{margin:0;position:relative;isolation:isolate}
.page-head-fig::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,#0C1723 0%,rgba(12,23,35,.42) 42%,rgba(19,36,51,.30) 100%);
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 26%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 26%,#000 100%);
}
.page-head-fig img{
  width:100%;display:block;
  filter:grayscale(.42) contrast(1.04) brightness(.94);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 26%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 26%,#000 100%);
}
@media(max-width:900px){
  .page-head-grid{grid-template-columns:1fr;gap:1.6rem}
  .page-head-mark{display:none}
  .page-head-fig{max-width:220px}
}
/* Breadcrumbs sit on the navy, immediately under the head. */
.crumbs{background:#0C1723;border-bottom:0;color:rgba(255,255,255,.5)}
.crumbs a{color:rgba(255,255,255,.5)}
.crumbs a:hover{color:#fff}
.sec{padding:4rem 0;border-bottom:1px solid var(--line)}
.sec--mist{background:var(--light-mist)}
.sec--navy{background:var(--digilu-navy);color:rgba(255,255,255,.82);border-bottom:0}
.sec--navy h2,.sec--navy h3{color:#fff}
.sec--navy a{color:var(--accent-on-dark)}
.sec--navy .eyebrow{color:var(--accent-on-dark)}
.sec p{color:var(--cool-gray)}
.sec--navy p{color:rgba(255,255,255,.72)}
.sec--intro p{font-size:1.06rem}
.crumbs{border-bottom:1px solid var(--line);font-size:12px;color:var(--cool-gray);
  font-family:var(--font-body);letter-spacing:.03em}
.crumbs .wrap{padding-top:11px;padding-bottom:11px}
.crumbs a{color:var(--cool-gray)}
.crumbs span[aria-hidden]{margin:0 8px;opacity:.5}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:.5rem}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.card{display:block;padding:1.6rem;border:1px solid var(--line);border-radius:8px;background:#fff;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.card:hover{border-color:var(--digilu-navy);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(26,42,52,.09);text-decoration:none}
.card h3{color:var(--digilu-navy);margin-bottom:.4em}
.card p{color:var(--cool-gray);font-size:.92rem;margin-bottom:.7em;max-width:none}
.more{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-text)}
.sec--navy .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.sec--navy .card:hover{border-color:var(--accent-on-dark)}
.sec--navy .card p{color:rgba(255,255,255,.6)}
.sec--navy .more{color:var(--accent-on-dark)}

/* ---------- lists, timeline, biblio, stats ---------- */
.list{margin:0 0 1em;padding-left:1.15em}
.list li{margin-bottom:.6em;color:var(--cool-gray);max-width:70ch}
.sec--navy .list li{color:rgba(255,255,255,.72)}
.timeline{list-style:none;margin:0;padding:0}
.timeline>li{position:relative;padding:0 0 2.25rem 1.9rem;border-left:2px solid var(--line);margin-left:6px}
.timeline>li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline>li::before{content:"";position:absolute;left:-7px;top:9px;width:12px;height:12px;
  border-radius:50%;background:var(--accent);border:2px solid #fff}
.timeline h2{font-size:1.35rem;margin-bottom:.15em}
.when{font-family:var(--font-body);font-size:12px;font-weight:500;color:var(--cool-gray);
  letter-spacing:.04em;margin-left:10px;text-transform:none}
.role{font-family:var(--font-body);font-size:11px;font-weight:700;color:var(--accent-text);
  text-transform:uppercase;letter-spacing:.13em;margin-bottom:.8em}
.biblio{list-style:none;margin:0;padding:0}
.biblio>li{padding:1.4rem 0;border-bottom:1px solid var(--line)}
.biblio>li:last-child{border-bottom:0}
.biblio h3{margin-bottom:.25em;font-size:1.05rem}
.meta{font-size:12.5px;color:var(--cool-gray);margin-bottom:.6em;letter-spacing:.02em}
.cite{font-size:12.5px;color:var(--cool-gray);padding-left:14px;border-left:2px solid var(--line)}
.stats{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin:0 0 1.2em;padding:0}
.stats li{padding:1.4rem;background:#fff;border:1px solid var(--line);border-radius:8px}
.stat{display:block;font-family:var(--font-display);font-weight:700;font-size:2.2rem;
  color:var(--digilu-navy);line-height:1}
.stat-l{display:block;font-size:12.5px;color:var(--cool-gray);margin-top:8px}
.note{font-size:13px;color:var(--cool-gray);padding:12px 16px;background:#fff;
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:4px}
.quote{margin:0 0 1.4em;padding:1.2rem 1.6rem;border-left:3px solid var(--accent);background:#fff}
.quote p{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.5rem;
  color:var(--digilu-navy);margin:0 0 .1em;line-height:1.1;max-width:none}
.quote cite{font-style:normal;font-size:11px;color:var(--cool-gray);
  text-transform:uppercase;letter-spacing:.14em;font-family:var(--font-body)}
.sec--mist .quote,.sec--mist .stats li,.sec--mist .note{background:#fff}
.split{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;margin-bottom:1.4em}
.split h3{color:var(--digilu-navy);margin-bottom:.4em}
.sec--navy .split h3{color:#fff}
.split p{font-size:.95rem}

/* ---------- form ---------- */
.form{margin-top:1.1rem;max-width:520px}
.form label{display:block;font-family:var(--font-body);font-size:12px;font-weight:600;
  letter-spacing:.04em;margin-bottom:5px;color:var(--digilu-navy)}
.opt{font-weight:400;color:var(--cool-gray)}
.form input,.form select,.form textarea{width:100%;padding:11px 13px;margin-bottom:14px;
  border:1px solid #C9D2D6;border-radius:4px;font:inherit;font-size:.94rem;background:#fff;color:var(--digilu-navy)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--accent);outline:none}
.form textarea{resize:vertical}
.form-status{font-size:13.5px;margin-top:12px;min-height:1.2em}
.form-status.ok{color:#12633f}.form-status.err{color:#A12727}
.direct{font-size:13.5px;color:var(--cool-gray);margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line)}

/* ---------- footer ---------- */
.site-footer{background:var(--proof-dark);color:#9AA4AE;padding:3.5rem 0 0;font-size:.9rem}
.site-footer a{color:#9AA4AE}
.site-footer a:hover{color:#fff}
.footer-inner{max-width:var(--container-max);margin:0 auto;padding:0 1.5rem;
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1.15fr;gap:2.5rem}
@media(min-width:1100px){.footer-inner{padding:0 5rem}}
.fbrand p{font-size:13px;line-height:1.6;color:#78838F;max-width:34ch;margin:14px 0 18px}
.fbrand .site-logo b{font-size:16px}
.fh{font-family:var(--font-body);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;
  color:#fff;margin-bottom:14px;font-weight:700}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin-bottom:9px;font-size:13.5px}
.socials{display:flex;gap:10px}
.social{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid #26313A;border-radius:4px;color:#78838F}
.social:hover{background:#16232B;color:#fff;border-color:#3A4650}
.footer-legal{max-width:var(--container-max);margin:2.75rem auto 0;padding:1.2rem 1.5rem 1.9rem;
  border-top:1px solid #1D2831;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:12.5px;color:#67727C}
@media(min-width:1100px){.footer-legal{padding:1.2rem 5rem 1.9rem}}
.footer-legal p{margin:0;max-width:none}
.footer-legal a{margin-right:16px}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .primary-nav{display:none}
  .burger{display:block}
  .mobile-nav{display:block;position:fixed;inset:var(--nav-h) 0 0;background:var(--digilu-navy);
    z-index:99;overflow-y:auto;padding:1rem 1.5rem 3rem;transform:translateX(100%);transition:transform .22s}
  .mobile-nav.open{transform:translateX(0)}
  .mobile-nav a{display:block;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.09);color:#fff}
  .m-top{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
    font-size:1.05rem;letter-spacing:.03em}
  .m-sub{padding-left:16px!important;font-size:.9rem;color:rgba(255,255,255,.62)!important}
  body.locked{overflow:hidden}
  .hero-grid{grid-template-columns:1fr;gap:2.25rem}
  .hero-fig{order:-1;max-width:330px}
  .cards,.cards--4,.cards--2{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  body{font-size:16px}
  .hero{padding:2.75rem 0 2.5rem}
  .sec{padding:2.75rem 0}
  .cards,.cards--4,.cards--2,.split,.stats,.footer-inner{grid-template-columns:1fr}
  .hero-fig{max-width:100%}
  .footer-legal{flex-direction:column}
  .la-mark{width:70px;height:70px}
}


/* ---------- the five shifts ------------------------------------------
   Two renderings of one drawing, never squeezed. The wide panorama is the
   desktop reading; below 900px it is REPLACED by the stack, because five
   stations compressed into a phone width is an unreadable drawing rather
   than a small one.
   --------------------------------------------------------------------- */
.shift-stack{display:none}
.la-shifts{display:block}
@media(max-width:900px){
  .la-shifts{display:none}
  .shift-stack{display:block;list-style:none;margin:1.5rem 0 0;padding:0}
  .shift-row{display:grid;grid-template-columns:96px 1fr;gap:1rem;align-items:center;
    padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
  .shift-row:last-child{border-bottom:0}
  .shift-art{width:96px}
  .shift-cap{display:flex;flex-direction:column;gap:2px}
  .shift-date{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.14em;
    color:var(--accent-on-dark)}
  .shift-label{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
    font-size:1.05rem;letter-spacing:.02em;color:#fff}
}
/* On a light section the stack inverts. */
.sec .shift-row{border-bottom-color:var(--line)}
.sec .shift-label{color:var(--digilu-navy)}
.sec .shift-date{color:var(--accent-text)}

/* ---------- the ladder ------------------------------------------------
   A numbered progression where each step depends on the one above it. Used
   where the argument IS the order: on /ideas/, four bodies of work that are
   one argument at four altitudes.
   --------------------------------------------------------------------- */
.ladder{list-style:none;margin:1.5rem 0 0;padding:0;counter-reset:l}
.ladder>li{display:grid;grid-template-columns:64px 1fr;gap:1.5rem;
  padding:1.75rem 0;border-top:1px solid var(--line)}
.ladder>li:first-child{border-top:0;padding-top:.5rem}
.ladder-n{font-family:var(--font-display);font-weight:700;font-size:2rem;
  color:var(--accent);line-height:1;letter-spacing:.01em}
.ladder h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:1.28rem;letter-spacing:-.005em;color:var(--digilu-navy);margin-bottom:.5em}
.ladder p{max-width:64ch}
.ladder p:last-child{margin-bottom:0;font-size:.9rem}
@media(max-width:640px){
  .ladder>li{grid-template-columns:1fr;gap:.4rem}
  .ladder-n{font-size:1.4rem}
}

/* ---------- section rhythm --------------------------------------------
   A single paragraph in a full-width section left a large empty column to
   its right and read as an unfinished page. Intro prose is measured, and
   sections that carry only prose are narrower than sections that carry a
   grid.
   --------------------------------------------------------------------- */
.sec--intro .wrap{max-width:920px}
.sec--intro p{font-size:1.09rem;line-height:1.62;max-width:64ch}
.sec h2{max-width:22ch}
.sec--intro h2{max-width:none}
/* A card that is not a link should not pretend to be one. */
.card--static{cursor:default}
.card--static:hover{border-color:var(--line);transform:none;box-shadow:none}
.mt{margin-top:2.2rem}
.ladder--tight>li{padding:1.1rem 0}
.ladder--tight h3{font-size:1.05rem;margin-bottom:.25em}
.ladder--tight p{margin-bottom:0;font-size:.94rem}