/* ══════════════════════════════════════════════════════════════════════════
   DEISH MEDIA — the stylesheet for deishmedia.com
   Dark revision, 2026-08-24. Read website/DESIGN.md before changing anything
   here; it is a contract and this file implements it.

   The structure is unchanged from the datasheet build earlier tonight: the
   margin rule, the spec tables, the drawn figures, the section ticks. Only the
   surface changed, on owner direction, toward the treatment on Apple's product
   pages. True black, one family of type set tight and large, generous space,
   and the product as the brightest thing on the page.

   WHY TRUE BLACK AND NOT CHARCOAL. The old site used #07080b with a saturated
   accent, which is the generic dark-developer-site formula the audit flagged.
   #000000 with #f5f5f7 and almost no accent is a different thing: the contrast
   comes from the product imagery, not from a colour. Measured off the reference
   before building, rather than guessed.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── ground and ink ──
     Sampled from the reference: #000 body, #1d1d1f raised, #f5f5f7 text. */
  --bg:#000000;
  --raised:#1d1d1f;        /* cards, panels, figure grounds */
  --raised-2:#2a2a2d;      /* the one step above raised: hover, chips */
  --ink:#f5f5f7;           /* primary text */
  --ink-2:#a1a1a6;         /* secondary text, captions */
  --ink-3:#6e6e73;         /* axis labels, disabled, tertiary */
  --hair:rgba(255,255,255,.14);
  --hair-2:rgba(255,255,255,.07);

  /* Aliases kept so the inline SVG figures, which were written against the
     paper build and are now tokenised, keep resolving. A figure asks for
     --paper meaning "the ground behind me" and that is now black. */
  --paper:var(--bg);
  --paper-2:var(--raised);
  --paper-3:var(--raised-2);

  /* ── line inks. Data only. Never a button fill, never a panel ground.
     Lightened from the paper build so they carry on black at 1.6px. ── */
  --audio:#5ED3B8;
  --trading:#FF7F5C;
  --apparel:#E5BC5E;
  --line:var(--ink);       /* body[data-line] overrides this */

  /* ── type. One family, the way the reference does it. ── */
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  /* ── measure ── */
  --wrap:1120px;
  --gutter:24px;
  --rule-col:88px;

  /* ── radius. Large and confident on panels, pill on controls, sharp on
     tables. That mix is the reference's actual pattern, not rounding
     everything uniformly. ── */
  --r:14px;
  --r-lg:20px;
  --pill:980px;

  --ease:cubic-bezier(.2,.7,.3,1);
}

body[data-line="audio"]{--line:var(--audio)}
body[data-line="trading"]{--line:var(--trading)}
body[data-line="apparel"]{--line:var(--apparel)}

*{margin:0;padding:0;box-sizing:border-box}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  color-scheme:dark;
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* No noise overlay, no vignette, no glow. Black does not need texturing, and
   the grain layer was one of the audit's named tells. */

::selection{background:var(--ink);color:var(--bg)}

/* ───────────────────────────── type ─────────────────────────────
   One family, set tight and large. Headlines are semibold with negative
   tracking, which is what makes the reference read as "sleek" rather than
   merely big. */

h1,h2,h3,h4{
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.05;
  text-wrap:balance;
}

h1{font-size:clamp(2.6rem,6.4vw,4.8rem);line-height:1.02;letter-spacing:-.035em}
h2{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.03em}
h3{font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.02em}
h4{font-size:1.1rem;line-height:1.3;letter-spacing:-.015em}

/* Emphasis inside a headline is the line's ink, solid. Not a gradient: the
   gradient-clipped headline word was the audit's third-worst finding, and the
   reference's own version of this is so desaturated it reads as a tint. */
h1 em,h2 em,h3 em{font-style:normal;color:var(--line)}

p{max-width:64ch;color:var(--ink-2)}
.lede{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.5;color:var(--ink-2);max-width:54ch}

a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--ink-3);transition:color .15s var(--ease),text-decoration-color .15s var(--ease)}
a:hover{color:var(--ink);text-decoration-color:var(--line)}
a:focus-visible{outline:2px solid var(--line);outline-offset:3px;border-radius:4px}

b,strong{font-weight:600;color:var(--ink)}
small{font-size:.86rem}

/* Mono is for VALUES. Never body copy, never a decorative uppercase eyebrow. */
.val,.spec dd,.price,code,kbd{font-family:var(--mono);font-variant-numeric:tabular-nums}

.eyebrow{
  font-family:var(--sans);font-size:.85rem;font-weight:500;
  letter-spacing:0;color:var(--ink-2);margin-bottom:.9rem;
}
.eyebrow .n{font-family:var(--mono);color:var(--ink-3);margin-right:.5rem}

/* ───────────────────────── layout + the margin rule ───────────────────────── */

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);width:100%}

/* THE SIGNATURE, kept from the datasheet build. A hairline down the left
   margin with a tick and a mono label at every section, like a chart axis.
   It is the one element that proves three product lines are one company. */
.sheet{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

@media (min-width:1000px){
  .sheet{padding-left:calc(var(--gutter) + var(--rule-col))}
  .sheet::before{
    content:"";position:absolute;left:var(--gutter);top:0;bottom:0;
    width:1px;background:var(--hair-2);
  }
}

.sec{position:relative;padding:clamp(64px,9vh,120px) 0}
.sec + .sec{border-top:1px solid var(--hair-2)}

.sec > .tick{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;
  color:var(--ink-3);display:block;margin-bottom:1.2rem;
}
@media (min-width:1000px){
  .sec > .tick{
    position:absolute;left:calc(-1 * var(--rule-col));top:clamp(64px,9vh,120px);
    margin:0;width:var(--rule-col);padding-right:18px;text-align:right;
    line-height:1.35;text-wrap:balance;
  }
  .sec > .tick::after{
    content:"";position:absolute;right:0;top:.15em;width:9px;height:1px;
    background:var(--line);
  }
}

/* ───────────────────────────── masthead ─────────────────────────────
   Translucent and blurred like the reference's own bar. This is the one place
   backdrop-filter earns its place: it is a fixed chrome element over scrolling
   content, which is the effect's actual purpose, not a decorative card. */

.masthead{
  border-bottom:1px solid var(--hair-2);
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  position:sticky;top:0;z-index:50;
}
.masthead .bar{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;gap:14px;height:52px;
}
.masthead a{text-decoration:none}
/* THE MARK, and why it was getting lost. Two separate mistakes, compounding.

   SIZE. The mark is a rounded play triangle with a second triangle KNOCKED OUT
   of it. At 15px the counter ate most of the glyph and the surviving ring was
   thinner than the wordmark's stems, so the lockup read as text with a faint
   sketch beside it. A solid mark survives 15px; a hollow one does not.

   COLOUR. The company's actual mark is a neon gradient, cyan through blue to
   magenta. The site was using a flattened near-white outline of it, which is
   how a vivid logo became a hairline. That is the whole of the owner's
   "the logo seems lost".

   So the real mark is now what ships, at 22px in the masthead and 34px in the
   footer. THIS IS THE ONE SANCTIONED EXCEPTION to "the product is the only
   source of colour": a company's own mark is identity, not decoration, and
   every restrained monochrome site still shows its logo in its own colours.
   The exception is the mark and nothing else. Do not let it spread.

   deish-mark-bold.svg is the mono fallback, the same geometry stroked to carry
   the wordmark's weight. It is what to reach for on any ground where the
   gradient cannot reproduce.

   Never invert the mark. That was tried on the assumption it was dark, and
   produced black on black.

   The margin rule on every page descends from the same x position as the mark,
   so the mark reads as the origin of the page's spine rather than a sticker in
   the corner. Keep that alignment if the gutter changes. */
.brand{display:flex;align-items:center;gap:8px;font-weight:650;font-size:.95rem;
  letter-spacing:-.025em;color:var(--ink)}
.brand img{width:22px;height:22px;display:block;flex:none}
.brand:hover{color:var(--ink)}

/* The footer is the one place on a page with room to actually look at it. */
.foot-main .brand{font-size:1.1rem;gap:11px}
.foot-main .brand img{width:34px;height:34px}
.sep{color:var(--ink-3);font-size:.9rem}
.here{font-family:var(--mono);font-size:.78rem;color:var(--line);letter-spacing:0}
.masthead nav{margin-left:auto;display:flex;gap:26px;align-items:center}
.masthead nav a{font-size:.85rem;color:var(--ink-2)}
.masthead nav a:hover{color:var(--ink)}
@media (max-width:720px){ .masthead nav{display:none} }

/* ───────────────────────────── sub-nav ───────────────────────────── */

.subnav{
  border-bottom:1px solid var(--hair-2);
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  position:sticky;top:52px;z-index:49;
}
.subnav .bar{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;gap:10px;height:48px;font-size:.85rem;
}
.subnav a{color:var(--ink-2);text-decoration:none}
.subnav a:hover{color:var(--ink)}
.subnav .sep{color:var(--ink-3)}
.subnav .here{font-family:var(--mono);font-size:.76rem;color:var(--line)}
.subnav .navlinks{margin-left:auto;display:flex;gap:20px;align-items:center}
.subnav .navlinks a{font-size:.83rem;white-space:nowrap}
.subnav .btn{padding:.3rem .85rem;font-size:.82rem;margin-left:4px}

@media (max-width:820px){
  .subnav{position:static}
  .subnav .navlinks{display:none}
  /* .navlinks carried the margin-left:auto that pushed the button to the right
     edge, so hiding it left the button squeezed against the breadcrumb with
     its label wrapped onto two lines inside a 48px bar. */
  .subnav .btn{margin-left:auto;white-space:nowrap}
}

/* Phone. Three crumbs, two separators and a price pill do not fit one 48px
   bar, and the wrap is the first thing that looks unfinished. Only the current
   page is worth keeping: the masthead already carries the way back. */
@media (max-width:560px){
  .subnav .bar{gap:8px}
  .subnav .bar > a:not(.btn),
  .subnav .sep{display:none}
  .subnav .here{font-size:.72rem}
  .subnav .btn{padding:.28rem .72rem}
}

/* ───────────────────────────── hero ───────────────────────────── */

.hero{padding:clamp(72px,13vh,150px) 0 clamp(56px,8vh,96px)}
.hero h1{margin-bottom:1.5rem}
.hero .lede{margin-bottom:2.2rem}

.hero-split{display:grid;gap:clamp(36px,5vw,72px);align-items:center}
@media (min-width:900px){
  .hero-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ───────────────────────────── actions ─────────────────────────────
   Pill controls, the reference's shape. Primary is the bright object on a
   black page, which is why it is near-white rather than a colour. */

.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--sans);font-size:.94rem;font-weight:500;letter-spacing:-.01em;
  padding:.66rem 1.3rem;border:1px solid var(--ink);border-radius:var(--pill);
  background:var(--ink);color:var(--bg);text-decoration:none;
  transition:opacity .15s var(--ease),background .15s var(--ease),color .15s var(--ease);
}
.btn:hover{opacity:.86;color:var(--bg)}
.btn .amt{font-family:var(--mono);font-size:.86rem;opacity:.7}

.btn.ghost{background:transparent;color:var(--ink);border-color:var(--hair)}
.btn.ghost:hover{background:var(--raised);border-color:var(--hair);color:var(--ink);opacity:1}

/* No glow, no scale-on-hover, no shadow. */

/* ───────────────────── the spec table ─────────────────────
   Label left, dotted leader, figure right in tabular mono. Kept sharp-edged
   while panels are rounded: a table of values is not a card. */

.spec{margin:0}
.spec .row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:.6rem;padding:.62rem 0;border-bottom:1px solid var(--hair-2);
}
.spec .row:first-child{border-top:1px solid var(--hair-2)}
.spec dt{font-size:.92rem;color:var(--ink-2);grid-column:1}
.spec .lead{border-bottom:1px dotted var(--ink-3);opacity:.5;transform:translateY(-.25em);grid-column:2}
.spec dd{font-size:.9rem;grid-column:3;text-align:right;white-space:nowrap;color:var(--ink)}

.priceline{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .9rem;
  font-family:var(--mono);font-size:1rem;color:var(--ink);
  padding:1rem 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair-2);
  margin:1.8rem 0;
}
.priceline .amt{font-size:1.6rem;letter-spacing:-.03em}
.priceline .meta{color:var(--ink-2);font-size:.82rem}

/* ───────────────────── the product figure ─────────────────────
   On black the product no longer needs a dark ground painted behind it; it
   already sits on one. The panel is now a faint raised surface with a large
   radius, so a screenshot reads as an object placed on the page. */

figure{margin:0}
.object{
  background:var(--raised);border:1px solid var(--hair-2);border-radius:var(--r-lg);
  overflow:hidden;line-height:0;
}
.object img,.object video{width:100%;height:auto;display:block}

figcaption{
  font-family:var(--mono);font-size:.72rem;color:var(--ink-3);
  margin-top:.7rem;line-height:1.5;
}
figcaption .k{color:var(--ink-3);opacity:.7}

/* A drawn diagram is framed differently from a capture, so the two can never
   be confused. DESIGN.md: drawn figures are obviously diagrams, never
   counterfeit UI. */
.plot{
  background:var(--raised);border:1px solid var(--hair-2);border-radius:var(--r);
  padding:20px;
  /* position + overflow are for the scan line in the motion block, which is an
     absolutely positioned ::after that must be clipped to the panel. Declared
     here with the rest of the panel rather than in a second .plot rule further
     down, so there is one place to read what a .plot is. */
  position:relative;overflow:hidden;
}
.plot svg{width:100%;height:auto;display:block}

/* ───────────────────────── catalogue ───────────────────────── */

.cat{display:grid;gap:14px}
@media (min-width:760px){.cat{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.cat.three{grid-template-columns:repeat(3,1fr)}}

.item{
  background:var(--raised);border:1px solid var(--hair-2);border-radius:var(--r-lg);
  padding:28px 26px 24px;
  display:flex;flex-direction:column;gap:.7rem;
  transition:background .18s var(--ease);
}
.item:hover{background:var(--raised-2)}
.item h3{font-size:1.45rem;color:var(--ink)}
.item h3 a{text-decoration:none;color:var(--ink)}
.item h3 a:hover{color:var(--line)}
.item .kind{font-family:var(--mono);font-size:.7rem;color:var(--ink-3);letter-spacing:.02em}
.item p{font-size:.95rem;color:var(--ink-2);max-width:none;flex:1}
.item .foot{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-top:.8rem;border-top:1px solid var(--hair-2);font-family:var(--mono);font-size:.8rem}
.item .foot .p{color:var(--ink-2)}

.badge{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.02em;
  border:1px solid var(--hair);border-radius:var(--pill);padding:.2rem .6rem;color:var(--ink-2);
}
.badge.on{border-color:var(--line);color:var(--line)}

/* ───────────────────── long-form prose pages ───────────────────── */

.prose{max-width:68ch}
.prose h2{margin:2.8rem 0 1rem}
.prose h3{margin:2rem 0 .7rem;color:var(--ink)}
.prose p{margin-bottom:1rem}
.prose ul,.prose ol{margin:0 0 1rem 1.15rem;color:var(--ink-2)}
.prose li{margin-bottom:.4rem;max-width:64ch}
.prose code{background:var(--raised);padding:.12em .38em;border-radius:5px;font-size:.88em;color:var(--ink)}

/* ───────────────────────────── footer ───────────────────────────── */

.foot-main{border-top:1px solid var(--hair-2);margin-top:clamp(64px,10vh,120px);padding:48px 0 64px}
.foot-main .cols{display:grid;gap:28px}
@media (min-width:760px){.foot-main .cols{grid-template-columns:1.4fr 1fr 1fr}}
.foot-main h4{font-family:var(--sans);font-size:.78rem;font-weight:600;
  color:var(--ink-3);margin-bottom:.9rem}
.foot-main ul{list-style:none}
.foot-main li{margin-bottom:.4rem}
.foot-main a{font-size:.9rem;color:var(--ink-2);text-decoration:none}
.foot-main a:hover{color:var(--ink)}
.foot-legal{font-family:var(--mono);font-size:.7rem;color:var(--ink-3);
  margin-top:36px;padding-top:20px;border-top:1px solid var(--hair-2)}

/* ═══════════════════════════ motion ═══════════════════════════
   Every behaviour here depicts measurement, and every finished state is the
   CSS default: script only plays the transition INTO a state the page already
   renders. If the JS 404s the page is complete, just still.

   THE 2026-08-24 CORRECTION. The first pass shipped three behaviours and only
   two of them ever ran: `.xrule` appeared exactly zero times in 19 pages, so
   rule-extend was dead code. What a reader actually got was one figure sweep
   per page, on arrival, and then a page that never moved again. Correctly
   described as having no motion.

   The fix is not more effects. It is motion tied to READING POSITION, so the
   page answers the scroll continuously instead of firing once and going quiet.
   The margin rule is the spine of every page here, so it is the thing that
   moves: it fills as you read and each section's tick lights as you reach it.
   That is a progress indicator, which is information, and it happens to be the
   one element proving three product lines are one company.

   Still banned, and the ban is what keeps this from looking generated:
   fade-up-on-scroll, staggered card entrances, parallax, pointer-tracked glow,
   scale-on-hover. A hero cascade ONCE on arrival is a different thing from
   fade-up-on-scroll and is allowed; see 6. */

/* 1 — SWEEP. The figure lays itself down left to right. A clip-path, not a
   stroke-dash: several figures draw a series as one path with several
   subpaths, and dash-length arithmetic silently mis-covers that geometry. */
.plot.draw > svg{
  animation:sweep 900ms var(--ease) forwards;
  clip-path:inset(0 100% 0 0);
}
@keyframes sweep{to{clip-path:inset(0 0 0 0)}}

/* 2 — THE INSTRUMENT IS ON. After the hero figure has drawn, a scan line
   crosses it about every seven seconds, the way a scope or an analyser keeps
   running when nothing is being asked of it. Hero figure only, and the JS
   removes .live when the figure leaves the viewport so nothing animates
   off-screen. Slow and 1px: presence, not a strobe. */
.plot.live::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom,transparent,var(--line),transparent);
  opacity:.5;animation:scan 7s linear infinite;
}
@keyframes scan{
  0%{transform:translateX(0);opacity:0}
  6%{opacity:.5}
  60%{opacity:.5}
  70%{opacity:0}
  100%{transform:translateX(var(--plot-w,600px));opacity:0}
}

/* 3 — VALUE SETTLE. A number counts to its final value like a needle. */
.val{font-variant-numeric:tabular-nums}

/* 4 — RULE EXTEND, which now actually runs. The hairline between sections
   draws from the margin outward when its section is reached, so the page
   assembles as you descend rather than being pre-drawn.

   It moved from a `.xrule` element nobody ever wrote to the `.sec + .sec`
   border every page already has. A behaviour that depends on authors
   remembering a class is a behaviour that does not ship. */
.sec + .sec{border-top:0}
.sec + .sec::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--hair-2);transform:scaleX(1);transform-origin:left center;
}
.sec + .sec.rule::before{animation:grow 520ms var(--ease) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* 5 — THE MARGIN RULE FILLS AS YOU READ.
   A second hairline over the first, scaled from the top by --read, which the
   script sets from scroll position. This is the page's spine answering the
   scroll, and it is the difference between a page that moved once and a page
   that is alive. Default --read is 1, so with no script the rule is simply
   drawn, which is what it was before. */
/* --read is registered for two reasons that ARE about correctness: the syntax
   makes a malformed write fall back to the initial value instead of dropping
   the whole transform, and initial-value states the no-script position (a fully
   drawn rule) in one place rather than in a var() fallback at each use.

   inherits MUST be true, and this cost a regression to learn. It was first
   written inherits:false to stop a per-frame write on .sheet invalidating the
   whole page subtree. But .sheet::after is the element that READS the value,
   and a pseudo-element inherits from its originating element: with
   inherits:false the value set on .sheet never reached it, the transform
   resolved to the initial 1, and the rule silently sat permanently full. The
   flagship behaviour was disabled by its own optimisation, which is the exact
   failure mode this whole pass exists to remove. The subtree invalidation is a
   cost, not a defect; correctness wins. If it ever matters, the fix is to move
   the rule to a real element that owns the property, not to break inheritance. */
@property --read{syntax:"<number>";inherits:true;initial-value:1}

@media (min-width:1000px){
  .sheet::after{
    content:"";position:absolute;left:var(--gutter);top:0;bottom:0;width:1px;
    background:var(--line);opacity:.55;
    transform:scaleY(var(--read,1));transform-origin:top center;
  }
}

/* The section tick lights when its section is the one being read, and its dash
   reaches further into the margin. Wayfinding, so this is information rather
   than decoration: at any scroll position exactly one tick is lit. */
.sec > .tick{transition:color .3s var(--ease)}
.sec.at > .tick{color:var(--ink)}
@media (min-width:1000px){
  .sec > .tick::after{transition:width .3s var(--ease),background .3s var(--ease)}
  .sec.at > .tick::after{width:20px;background:var(--line)}
}

/* 6 — ARRIVAL. One cascade, once, on load, and only in the hero. This is NOT
   fade-up-on-scroll: it does not follow the reader down the page and it never
   fires twice.

   EVERY SELECTOR HERE IS GATED ON html.anim, and that gate is not decoration.
   These animations start from opacity 0, which means they HIDE CONTENT, and
   the standing rule in deish.js is that content is never hidden behind
   something that might not run. The gate inverts the failure: the class is set
   by an inline script in each page's <head>, so a reader with no JS never gets
   the hidden state at all and simply sees a still hero. It is inline and in
   the head rather than in deish.js so it lands before the first paint, which
   is what stops the content being shown, hidden, and then shown again.

   This was caught in review and not in testing, because the tab being used to
   check it had a frozen document timeline and reported every animation as
   "running" with a currentTime of 0. */
.anim .hero h1,.anim .hero .lede,.anim .hero .priceline,
.anim .hero .actions,.anim .hero figure{
  animation:rise 620ms var(--ease) both;
}
.anim .hero h1{animation-delay:.02s}
.anim .hero .lede{animation-delay:.09s}
.anim .hero .priceline{animation-delay:.16s}
.anim .hero .actions{animation-delay:.23s}
.anim .hero figure{animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* THE MARK DOES NOT ANIMATE, DELIBERATELY. It briefly wiped in with the same
   left-to-right gesture as a figure sweep, which was a nice idea and is not
   worth the risk: any animation that starts from a hidden state can fail to
   finish, and the failure mode is an invisible logo. On the one element the
   owner had just reported as getting lost, that trade is not close. The hero
   text can afford the cascade because it is large, gated, and obviously
   missing if it breaks. A 22px mark is not. It is always simply there. */

/* 7 — CONTROLS. The outline pill fills from the left on hover rather than
   growing. Scale-on-hover is on the banned list, and a left-to-right wipe is
   the same gesture the figures and the mark use, so everything on the page
   moves in one direction.

   Only `.ghost`. The solid button is already filled, so wiping near-white over
   near-white would animate nothing and cost a paint; it keeps its existing
   opacity nudge. There is no `.primary` class on this site, which is worth
   stating because the obvious `:not(.primary)` guard silently matches every
   button here and looks like it is doing something. */
.btn.ghost{position:relative;overflow:hidden;isolation:isolate}
.btn.ghost::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--raised-2);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .28s var(--ease);
}
.btn.ghost:hover::before{transform:scaleX(1)}
.btn.ghost:hover{background:transparent}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .plot.draw > svg{animation:none;clip-path:none}
  .plot.live::after{display:none}
  .sec + .sec.rule::before{animation:none;transform:none}
  .anim .hero h1,.anim .hero .lede,.anim .hero .priceline,
  .anim .hero .actions,.anim .hero figure{
    animation:none;opacity:1;transform:none;
  }
  .sheet::after{display:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ───────────────────────── responsive ───────────────────────── */

@media (max-width:640px){
  :root{--gutter:20px}
  body{font-size:16px}
  .masthead .bar{height:48px}
  .actions .btn{width:100%;justify-content:center}
}

/* ───────────────────────── print ─────────────────────────
   Invert back to ink-on-paper. A black page is a design decision for screens
   and an unkind one for a printer. */
@media print{
  :root{--bg:#fff;--raised:#fff;--raised-2:#fff;--ink:#000;--ink-2:#333;--ink-3:#666;
        --hair:#ccc;--hair-2:#ddd}
  .masthead,.subnav,.actions{display:none}
  /* The mark is a gradient loaded through <img>, so it is an isolated document
     and NOTHING in this block can recolour it: it would print neon on white and
     flatten to mid-grey on a greyscale printer. The wordmark beside it already
     says the name, so on paper the name is the lockup. */
  .brand img{display:none}
  body{font-size:11pt;background:#fff;color:#000}
  .sheet{padding-left:var(--gutter)}
  /* Both rule layers and the scan line go. A progress indicator and a running
     scope trace are statements about where the reader is on a screen; on paper
     they are a stray part-length line and a gradient smear. */
  .sheet::before,.sheet::after,.plot.live::after{display:none}
  .plot.draw > svg{clip-path:none;animation:none}
  .sec>.tick{position:static;text-align:left;width:auto}
  .object,.plot,.item{border:1px solid #ccc}
}