/* ==========================================================================
   EV Clinic — reset, typography, layout primitives, glass, header, footer.

   Two laws, and they pull against each other, which is the point.

   The first is inherited from the master page:

     No frames. Structure comes from space and from hairlines that stop short
     of enclosing anything. A page built from boxes reads as a form; this is
     meant to read as a document.

   The second is new, and is what makes this the franchise theme rather than
   a white version of the old one:

     Glass is a surface, not a border. A frosted panel separates content by
     being made of a different material to the page, not by drawing a line
     around it. So the panels have almost no visible edge — a 1px white
     border that reads as a highlight rather than an outline, and a shadow
     soft enough to be mistaken for depth rather than for a box.

   Where the two agree: still almost no hard borders, still no heavy
   shadows, still structure from space. What changed is that the ground
   underneath now has a texture for the glass to pick up.
   ========================================================================== */

/* ----------------------------------------------------------------- reset */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* The sticky header would otherwise cover an anchor target. */
  scroll-padding-top:calc(var(--header-h) + 24px);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

@media (max-width:760px){ body{font-size:16px} }

/* ============================================================== the mosaic

   The cell grid, on the same 19px pitch the video backdrop samples at, so
   the static lattice and the moving one land on the same grid and read as
   one surface instead of two.

   Drawn with gradients rather than an image: it is four declarations, it
   scales to any viewport, it costs no request, and it recolours with the
   token. Two layers — hairlines for the lattice, a dot at each intersection
   for the cell itself.

   Fixed attachment, so the page slides over the grid rather than dragging it
   along. That is what sells the glass above it as a separate pane. It is
   dropped on touch devices, where background-attachment:fixed forces the
   whole page into a repaint on every scroll frame and is the single most
   reliable way to make a phone stutter.
   ========================================================================= */

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-color:var(--paper);
  background-image:
    /* the cell */
    radial-gradient(circle at center, var(--cell-dot) 1.1px, transparent 1.6px),
    /* the lattice */
    linear-gradient(to right, var(--cell-ink) 1px, transparent 1px),
    linear-gradient(to bottom, var(--cell-ink) 1px, transparent 1px);
  background-size:
    var(--cell) var(--cell),
    var(--cell) var(--cell),
    var(--cell) var(--cell);
}

/* The colour washes. Three radials that give the glass something to pick up
   besides grey, and give the page a temperature without a coloured band
   anywhere in it. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(62% 48% at 12% 8%,  rgba(var(--cold-rgb),.10), transparent 62%),
    radial-gradient(52% 42% at 88% 14%, rgba(var(--mint-rgb),.10), transparent 64%),
    radial-gradient(70% 46% at 62% 96%, rgba(var(--amber-rgb),.07), transparent 66%);
}

@media (hover: none){
  /* Repainting a fixed layer on every scroll frame is what makes phones
     stutter. The grid stays, it just scrolls with the document. */
  body::before,body::after{position:absolute;min-height:100%}
}

/* ================================================================== glass

   One recipe. A panel, the header, a popup and the search results are the
   same material; only the radius and the padding differ.

   NO `isolation: isolate` here, and that is a correction rather than an
   omission. An earlier version set it, reasoning that it would control what
   the filter sampled. It does the opposite: per the Filter Effects spec,
   `isolation` creates a Backdrop Root, and an element that is its OWN
   backdrop root has nothing behind it inside that root for the filter to
   read. The result is a pane that samples an empty or stale backdrop — which
   in Chrome, over a fixed WebGL canvas, smears rather than blurs.

   If a glass surface ever needs to stop a child from blending past it, put
   the isolation on a WRAPPER, never on the filtered element.
   ========================================================================= */

.glass{
  position:relative;
  background:linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border:1px solid var(--glass-edge);
  border-radius:var(--radius);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    var(--glass-shadow);
}

/* A glass surface that spans the viewport: no side borders, because an edge
   that runs off screen is a seam rather than a frame. */
.glass-band{
  background:linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-block:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glass-sheen);
}

/* The one decorative flourish, and it is one line: a highlight that runs
   along the top edge and fades at both ends, the way light catches the lip
   of a real pane. Used on the big panels only. */
.glass-lit::before{
  content:"";
  position:absolute;
  inset:0 12% auto;
  height:1px;
  background:linear-gradient(90deg,
    transparent,
    rgba(var(--white-rgb),.95) 22%,
    rgba(var(--white-rgb),.95) 78%,
    transparent);
  pointer-events:none;
}

img,video,canvas{max-width:100%;height:auto;display:block}
img{border-style:none}

/* SVG gets max-width but NOT height:auto.
   An inline SVG with a viewBox and no intrinsic size takes its width from its
   container and then computes height from the aspect ratio, so `height:auto`
   turns a 22x22 legend glyph into whatever the column is wide. That is
   exactly what happened to the map's class key: three 180-pixel black stars
   down the side panel. Components that need to fill their box say so. */
svg{max-width:100%}

/* An intrinsic ratio only helps when the element declares one; without this a
   lazy image with width/height attributes still jumps when it decodes. */
img[width][height]{height:auto}

button,input,select,textarea{font:inherit;color:inherit}

hr{border:0;border-top:1px solid var(--line);margin:var(--gut) 0}

::selection{background:rgba(var(--amber-rgb),.28)}

/* ------------------------------------------------------------ typography */

h1,h2,h3,h4,h5,h6{
  font-family:var(--display);
  margin:0 0 .5em;
  letter-spacing:-.02em;
  line-height:1.04;
  text-wrap:balance;
}

h1{font-weight:800;font-size:clamp(40px,6.4vw,84px);line-height:.94;letter-spacing:-.03em}
h2{font-weight:700;font-size:clamp(28px,3.6vw,44px)}
h3{font-weight:600;font-size:clamp(19px,1.6vw,22px);letter-spacing:-.01em}
h4{font-weight:600;font-size:17px;letter-spacing:0}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

strong,b{font-weight:600;color:var(--ink)}
em{font-style:italic}

a{color:var(--cold);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover,a:focus-visible{text-decoration-thickness:2px}

code,kbd,pre,samp{font-family:var(--mono);font-size:.92em}

/* Mono is the micro-label face: eyebrows, buttons, HUD, footers, chips. Used
   at these sizes it is a signal that a string is data rather than prose. */
.eyebrow{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--mute);
  margin:0 0 20px;
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--amber);
  flex:none;
}

.lead{
  font-size:clamp(18px,1.5vw,21px);
  line-height:1.5;
  color:var(--mute);
  max-width:56ch;
}

.mono{font-family:var(--mono);letter-spacing:.06em}

/* -------------------------------------------------------- focus visibility

   One ring, everywhere, in a colour that is legible on paper and on the
   panels. Never removed: the map is fully keyboard operable and the focus
   ring is the only thing that makes that usable. */
:focus-visible{
  outline:2px solid var(--cold);
  outline-offset:2px;
  border-radius:1px;
}
:focus:not(:focus-visible){outline:none}

.skip-link{
  position:absolute;left:8px;top:-60px;z-index:1000;
  background:var(--ink);color:var(--paper);
  padding:10px 16px;border-radius:var(--radius);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;
  transition:top .18s var(--ease-out);
}
.skip-link:focus{top:8px}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------------------------------------------------------------- layout */

.wrap{
  width:100%;
  max-width:var(--wide);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.wrap-narrow{max-width:calc(var(--content) + var(--gut) * 2)}

.section{padding-block:clamp(56px,8vw,96px)}
.section-tight{padding-block:clamp(36px,5vw,56px)}

/* A band that separates by ground rather than by border. */
.band{background:var(--raise)}

/* A rule that fades out at both ends, so it divides without enclosing. */
.rule-top{position:relative}
.rule-top::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent);
}

.section-head{max-width:64ch;margin-bottom:clamp(28px,4vw,48px)}
.section-head h2{margin-bottom:.35em}

.grid{display:grid;gap:clamp(18px,2.2vw,28px)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.four{grid-template-columns:repeat(4,1fr)}

@media (max-width:1000px){
  .grid.four{grid-template-columns:repeat(2,1fr)}
  .grid.three{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .grid.two,.grid.three,.grid.four{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------- buttons */

.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.06em;
  padding:12px 22px;
  border-radius:var(--radius);
  text-decoration:none;
  border:1px solid transparent;
  transition:background .22s var(--ease-out),border-color .22s var(--ease-out),color .22s var(--ease-out);
  white-space:nowrap;
}
.btn.primary{background:var(--amber);color:#0A0704;border-color:var(--amber)}
.btn.primary:hover,.btn.primary:focus-visible{background:#F0A312;border-color:#F0A312}

.btn.ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--cold);color:var(--cold)}

.btn.quiet{padding-inline:0;border:0;color:var(--cold)}
.btn.quiet:hover,.btn.quiet:focus-visible{text-decoration:underline}

.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ------------------------------------------------------------------ chips */

.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chip{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  padding:6px 11px;
  border:1px solid var(--line);border-radius:var(--radius);
  color:var(--mute);text-decoration:none;background:var(--panel);
  transition:border-color .2s var(--ease-out),color .2s var(--ease-out);
}
.chip:hover,.chip:focus-visible{border-color:var(--cold);color:var(--cold)}
.chip .n{color:var(--faint);font-size:10px}

/* ISO country marker. Not a flag emoji: Windows ships no glyphs for regional
   indicator pairs, so those render there as two bare letters. */
.iso{
  display:inline-block;font-family:var(--mono);font-size:.72em;font-weight:500;
  letter-spacing:.1em;color:var(--mute);
  border:1px solid var(--line);border-radius:1px;
  padding:.15em .4em;margin-right:.3em;
  vertical-align:.1em;line-height:1;
}

/* ------------------------------------------------------------------ cards */

.card{
  position:relative;
  isolation:isolate;
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;

  /*
     A card is glass, but a thinner pane than a panel.
     Cards appear in grids of eight and twelve, and eight full-strength
     backdrop-filters in one viewport is exactly the budget this design has
     to spend everywhere else. So a card gets the material and the sheen but
     not the blur: the gradient alone still lets the mosaic through, and the
     accent edge does the work the border used to.
  */
  background:linear-gradient(180deg,
    rgba(var(--white-rgb),.86),
    rgba(var(--white-rgb),.66));
  border:1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    0 4px 18px rgba(var(--ink-rgb),.05);

  transition:transform .3s var(--ease-out),
             box-shadow .3s var(--ease-out),
             border-color .3s var(--ease-out);
}

/* The accent arrives as a lit top edge rather than as a coloured border, so
   a hovered card reads as catching light rather than as being selected. */
.card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:2px;
  background:linear-gradient(90deg,
    transparent, var(--amber) 30%, var(--amber) 70%, transparent);
  opacity:0;
  transition:opacity .3s var(--ease-out);
  pointer-events:none;
  z-index:1;
}
.card:hover,.card:focus-within{
  transform:translateY(-3px);
  border-color:rgba(var(--white-rgb),.95);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    0 12px 30px rgba(var(--ink-rgb),.09);
}
.card:hover::before,.card:focus-within::before{opacity:1}

.card-art{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--raise)}
.card-art-none{
  display:grid;place-items:center;
  background:var(--raise);
}
.card-art-none i{
  font-family:var(--display);font-style:normal;font-weight:800;
  font-size:44px;color:var(--line);letter-spacing:-.04em;
}
/* The art is wrapped in its own link so the whole tile is clickable. It is
   aria-hidden and out of the tab order — the title link is the real one — so
   it must carry no text decoration of its own, or the placeholder letter
   underneath picks up an underline. */
.card-link{display:block;text-decoration:none;color:inherit}

.card-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}

.card-title{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.25;margin:0}
/* Ink, not link blue. In a grid of cards the title is the heading; painting
   every one of them blue and underlined turns the page into a list of links
   and drowns out the one accent the design does use. */
.card-title a{
  color:var(--ink);
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .28s var(--ease-out),color .2s var(--ease-out);
}
.card-title a:hover,.card-title a:focus-visible{color:var(--cold);background-size:100% 1px}

.card-excerpt{font-size:14px;color:var(--mute);margin:0}

.post-meta{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--faint);margin:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.5em;
}
.post-meta a{color:var(--mute);text-decoration:none}
.post-meta a:hover{color:var(--cold)}
.post-meta .sep{color:var(--line)}

/* ----------------------------------------------------------------- header */

/*
   The header is the one place glass is always on.

   It is a single element, it is always in view, and it is the surface that
   tells the visitor what kind of page this is before they have read a word.
   It also earns its compositing layer honestly: being position:sticky, it is
   promoted to its own layer regardless.

   Over the hero it is almost invisible — no border, barely any tint — and it
   solidifies as the page moves, so it never draws a line across a hero it is
   still sitting on top of.
*/
.site-header{
  position:sticky;top:0;z-index:50;
  /* No isolation — see the note on .glass. A sticky element carrying a
     backdrop-filter is already the hardest case for the compositor; making
     it its own backdrop root on top of that is what produced a blurred band
     far taller than the header. */
  background:linear-gradient(180deg,
    rgba(var(--white-rgb),.58),
    rgba(var(--white-rgb),.34));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease-out),
             border-color .3s var(--ease-out),
             box-shadow .3s var(--ease-out);
}

.site-header.is-stuck{
  background:linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
  border-bottom-color:var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    0 6px 22px rgba(var(--ink-rgb),.06);
}

/* Both fallbacks land on opaque white rather than on the old grey paper. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header,.site-header.is-stuck{background:var(--paper)}
}
@media (max-width:900px){
  .site-header,.site-header.is-stuck{
    background:rgba(var(--white-rgb),.97);
  }
}

.header-inner{
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  /* --header-min, never --header-h. The second is measured FROM this element's
     own header, so reading it here is a circular definition. */
  min-height:var(--header-min);
  padding-block:10px;
}

.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.brand-mark{display:block;line-height:0}
.brand-mark svg{height:34px;width:auto;fill:currentColor;display:block}
.brand-word{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em}
.brand img{max-height:40px;width:auto}
.brand i{
  font-style:normal;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);
  padding-left:10px;border-left:1px solid var(--line);
  white-space:nowrap;
}
@media (max-width:900px){ .brand i{display:none} }

.nav-primary{margin-left:auto}
.nav-primary ul{display:flex;align-items:center;gap:clamp(14px,2vw,26px);list-style:none;margin:0;padding:0}
.nav-primary a{
  font-size:14px;color:var(--ink);text-decoration:none;
  padding-block:6px;
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease-out),color .2s var(--ease-out);
}
.nav-primary a:hover,.nav-primary a:focus-visible{border-bottom-color:var(--amber)}
.nav-primary .current-menu-item > a{color:var(--cold);border-bottom-color:var(--cold)}

.header-cta{flex:none}

.nav-toggle{
  display:none;
  margin-left:auto;
  background:transparent;border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 12px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);
}

@media (max-width:900px){
  .nav-toggle{display:inline-block}
  .nav-primary{
    position:fixed;inset:var(--header-h) 0 auto;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    margin:0;
    padding:8px var(--gut) 24px;
    display:none;
  }
  .nav-primary.is-open{display:block}
  .nav-primary ul{flex-direction:column;align-items:stretch;gap:0}
  .nav-primary li{border-bottom:1px solid var(--line-soft)}
  .nav-primary a{display:block;padding:14px 0;font-size:16px;border:0}
  .header-cta{display:none}
}

/* ----------------------------------------------------------------- footer */

.site-footer{
  margin-top:clamp(56px,8vw,110px);
  border-top:1px solid var(--line);
  background:var(--raise);
  padding-block:clamp(40px,6vw,72px) 0;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);
  gap:clamp(24px,3vw,44px);
  align-items:start;
}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr} }

.foot-brand .brand-mark svg{height:40px}
.foot-about{font-size:14px;color:var(--mute);max-width:36ch;margin-top:14px}

.foot-col h2,.foot-widget-title{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin:0 0 14px;font-weight:500;
}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-col a{font-size:14px;color:var(--ink);text-decoration:none}
.foot-col a:hover,.foot-col a:focus-visible{color:var(--cold);text-decoration:underline}

.foot-legal{
  margin-top:clamp(32px,5vw,56px);
  border-top:1px solid var(--line);
  padding-block:20px 26px;
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--faint);
}
.foot-legal ul{display:flex;flex-wrap:wrap;gap:12px 20px;list-style:none;margin:0;padding:0}
.foot-legal a{color:var(--mute);text-decoration:none}
.foot-legal a:hover{color:var(--cold)}
.foot-legal .spacer{margin-left:auto}

/* ------------------------------------------------------------ reveal-on-scroll

   Declared here rather than in front.css because archives use it too. The
   default is the revealed state, and JS adds .reveal to opt an element in —
   so a browser with JS disabled or a crawler sees finished content instead of
   a page of invisible elements. */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

/* ------------------------------------------------------------------ print */

@media print{
  .site-header,.site-footer,.nav-toggle,#stage,#backdrop,.hud,.marquee{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}