/* dir-d-fonts.css */
/* Generated by tools/fonts.py (DIRECTION_FACES["dir-d"]). Do not edit by hand: change them there and re-run
   python3 -I tools/fonts.py build --direction dir-d --dl <folder>.
   Design direction dir-d only (preview): bundled into assets/direction-d.<hash>.css, never into site.css.
   Latin subsets of SIL OFL 1.1 fonts, licences in assets/fonts/directions/dir-d/LICENSES/.
   Faces: instrument-serif (Instrument Serif normal 400), instrument-serif-italic (Instrument Serif italic 400), instrument-sans (Instrument Sans normal 400 700), big-shoulders (Big Shoulders normal 500 900), newsreader (Newsreader normal 400 600), newsreader-italic (Newsreader italic 400 600). */

/* Web fonts */
@font-face{
  font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/directions/dir-d/instrument-serif.b6f9a213.woff2) format('woff2');
}
@font-face{
  font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/directions/dir-d/instrument-serif-italic.7dc4ab0a.woff2) format('woff2');
}
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/directions/dir-d/instrument-sans.ad5f41e8.woff2) format('woff2');
}
@font-face{
  font-family:'Big Shoulders';font-style:normal;font-weight:500 900;font-display:swap;
  src:url(/assets/fonts/directions/dir-d/big-shoulders.12c754d6.woff2) format('woff2');
}
@font-face{
  font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/assets/fonts/directions/dir-d/newsreader.e1f29728.woff2) format('woff2');
}
@font-face{
  font-family:'Newsreader';font-style:italic;font-weight:400 600;font-display:swap;
  src:url(/assets/fonts/directions/dir-d/newsreader-italic.233e43cb.woff2) format('woff2');
}

/* Metric-matched system fallbacks (first paint, before the web font arrives; measured from each font's tables). */
@font-face{
  font-family:'Instrument Serif Fallback';font-style:normal;font-weight:400;
  src:local('Georgia');
  size-adjust:76.82%;ascent-override:128.88%;descent-override:40.36%;line-gap-override:0.00%;
}
@font-face{
  font-family:'Instrument Serif Fallback';font-style:italic;font-weight:400;
  src:local('Georgia');
  size-adjust:81.08%;ascent-override:122.10%;descent-override:38.23%;line-gap-override:0.00%;
}
@font-face{
  font-family:'Studio Sans Fallback';font-style:normal;font-weight:400 700;
  src:local('Arial'),local('ArialMT');
  size-adjust:102.71%;ascent-override:94.44%;descent-override:24.34%;line-gap-override:0.00%;
}
@font-face{
  font-family:'Big Shoulders Fallback';font-style:normal;font-weight:500 900;
  src:local('Arial Narrow Bold');
  size-adjust:86.44%;ascent-override:114.01%;descent-override:24.81%;line-gap-override:0.00%;
}
@font-face{
  font-family:'Newsreader Fallback';font-style:normal;font-weight:400 600;
  src:local('Georgia');
  size-adjust:91.52%;ascent-override:80.31%;descent-override:28.95%;line-gap-override:0.00%;
}
@font-face{
  font-family:'Newsreader Fallback';font-style:italic;font-weight:400 600;
  src:local('Georgia');
  size-adjust:84.15%;ascent-override:87.34%;descent-override:31.49%;line-gap-override:0.00%;
}

/* dir-d.css */
/* Design direction dir-d (B + C: "Contact sheet" type in the "Title card" world). PREVIEW ONLY.

   Bundled with dir-d-fonts.css into assets/direction-d.<hash>.css, linked AFTER classic.<hash>.css by a DIRECTION=dir-d
   build on every page with the classic look (<html data-direction="dir-d">). Every other build never loads it. The
   words stay exactly as content/ has them: this sheet only restyles (case, size, colour, place); it never hides a word.
   Scoping rule (build/lib/direction.mjs): every rule starts with [data-direction="dir-d"] on html; no @font-face, no
   @import. Plan: the hybrid study's V1 cross-checked against Alok's Oct 27 notes (scratchpad hybrid/dir-d/plan.md);
   v2: the dv2 overnight run's plan + docs/design/directions/research/2026-10-27-d-v2-*.md + TASTE.md's Oct 28 canvas
   notes (the levers and the three size comments, applied below where marked "Oct 28").

   Alok, Oct 27: B is "easy to read", "sophisticated like the new york times", "the sizes and weights of all the
   different texts ... all blend really well together", but its white and tan "isn't really interesting at all". C
   "feels closest to my identity", its hero ("the find it really pops ... the italics really contrast with the big bold
   letters") and its colours he loves, but past the hero "you don't know where your eyes need to go".
   So: C's colour world and C's hero, B's type system for everything under it, and C's bold capitals only where a
   section should pop (the hero, each page's title card, the promises, the name at the end of every page).

   Palette (contrast; every pair re-measured)
     River   #18211D  the ground                   Bone #EEEAE2 on River 13.74:1 (all text, titles, buttons)
     River-2 #1F2925  C's second green: the warm bands (Home's "I'm Alok.", the inner pages' alternate sections, a
                      film's "More films"). Bone on it 12.5:1, Steel 6.5:1
     Steel   #A3ADA8  credits on River 7.14:1      Moss #4F5A55 secondary on Bone 5.98:1
     Deep    #0C110F  only as the tint of shades laid over footage (scrim, header shade, pause, play badge)
     Black   #000     the film well (player band) and the end card (the footer, B's black: Bone 17:1, Steel 9.2:1)
     Tally            the sticker's own yellow (var(--c-badge), #FFD300): the sticker disc, the 3 px bar on the film
                      that is playing, keyboard focus. Tally on River 11.44:1; never on Bone (1.20:1), never text.
     Bone is C's light band: the money and the forms (Home's price band and close, /contact, the estimator). So the
     page has C's tonal steps (River, River-2, Bone) and ends on black, as both parents did; Alok on C: "I'm also
     liking kind of this color scheme".
   Type
     Big Shoulders 800 caps: the hero line, the title card (inner H1), the price line, the end card, the sticker
       name; the promises at 550 (Alok, Oct 28: "a little more elegant, thinner")
     Newsreader italic 400: every spoken word - the hero's "find it", the Robert Frank plate, a film's proof
       quotes (TASTE Oct 28 quote ruling: "the juxtaposition of the bold wrds with the italicicized treatment
       of the quote was liked by a designer during market reserach... we stick to that design language in D v2")
     Instrument Serif 400 roman: every heading below the hero; one weight, never synthesised
     Instrument Sans 400/500/600 (wdth 87 for credits): every sentence, label, link, button and credit
     B's scale: titles 44-85 (Alok's Oct 28 lever), item titles 28, lead 22, body 18/1.55, small 16, credits 15,
     legal 14. His Oct 28 canvas notes, applied: the promises peak at 59, the day rate under the price caps holds
     its own (28 from 960 px), the close body a tenth bigger and airier. Nothing on River under 15 px but the legal
     line, and whatever sits under bold capitals is 18 px (Alok: in C "the secondary text is too small"). Measures
     in rem/em so the line length holds before and after the swap.
   Layout: everything left-aligned on one edge (the 1440 frame, the hero included); from 1100 px the text pages
     (Approach, About, Drone) set each section like a film credit, a margin title on the left (about 54 px, so the
     page reads evenly), words on the right. Every page opens on a title card and closes on the name set exactly like
     the hero line (the end card as a bookend, never bigger than the hero).
   Motion: three beats. 150 ms state changes (colour, underline, border, the frame hairline) on the state curve; the
     250 ms header compaction; and one 400 ms moment, the hero film arriving (the enter curve; the exit curve is
     reserved). Two scroll-coupled elements only: the header, and a post's reading bar (a scrollbar mirror, in Bone).
     Pointer feedback lives on the frame line and the badge bed; the still itself never moves (that refusal is the
     device). The tally also marks a playing film on the watch page (a 3 px bar: the tiles' job, carried to the
     player). No scroll reveals, no fades, no hover zoom; nothing moves under prefers-reduced-motion; focus is
     instant, never eased. Focus: a Tally ring with a River halo (on Bone: River with a Bone halo). */

/* ---------------------------------------------------------------- tokens (on :root, so they beat classic's own) */
:root[data-direction="dir-d"]{
  --d-river:#18211D; --d-river-rgb:24,33,29; --d-ceiling-rgb:92,100,96; --d-river-2:#1F2925; --d-deep:12,17,15; --d-bone:#EEEAE2; --d-steel-0:#A3ADA8; --d-steel:var(--d-steel-0); --d-moss:#4F5A55; --d-black:#000; --d-white:#fff;
  --d-tally:var(--c-badge,#FFD300);
  --d-bone-16:rgba(238,234,226,.16); --d-bone-60:rgba(238,234,226,.6); --d-river-20:rgba(24,33,29,.2);
  --d-fg:var(--d-bone); --d-fg-2:var(--d-steel); --d-ground:var(--d-river); --d-line:var(--d-bone-16); --d-ring:var(--d-tally); --d-halo:var(--d-river);
  --d-instrument-serif:'Instrument Serif','Instrument Serif Fallback',Georgia,serif;
  --d-instrument-sans:'Instrument Sans','Studio Sans Fallback',Arial,sans-serif;
  --d-big-shoulders:'Big Shoulders','Big Shoulders Fallback','Arial Narrow',sans-serif-condensed,sans-serif;
  --d-newsreader:'Newsreader','Newsreader Fallback',Georgia,serif;
  --d-hero:clamp(2.5rem,calc((min(100vw,var(--frame-max)) - 2 * var(--pad-x)) / 11.2),10.5rem);   /* 118 at 1440: C v1
                                                          exactly; held there above 1440, where the line sits on the frame */
  --d-card:clamp(3.5rem,1.2rem + 5.6vw,6.5rem);        /* 56 to 104: the title card, a visible step under the hero (100
                                                          against 118 at 1440) and over B's section titles on phones */
  --d-margin-title:clamp(2.25rem,1rem + 2.6vw,3.5rem); /* 36 to 56: a section title in the credit layout's margin */
  --d-card-film:clamp(2.75rem,1.4rem + 4.6vw,6rem);    /* 44 to 96: a film page's title card */
  --d-seq:clamp(2rem,1.2rem + 2.764vw,3.6875rem);   /* 32 to 59: the promises, set like a title sequence; 59 at 1440
                                                          and above (Alok's Oct 28 lever, "down from 64") */
  --d-title:min(clamp(2.75rem,5.9vw,5.3125rem),calc((100vw - 2 * var(--pad-x)) / 6.2));   /* 44 to 85: B's section
                                                          titles at Alok's Oct 28 lever (85 at 1440 and above), held
                                                          to the column if a reader's default font is larger */
  --d-h3:1.75rem; --d-lead:1.375rem; --d-body:1.125rem; --d-small:1rem; --d-cap:.9375rem; --d-fine:.875rem;
  --d-measure:34.5rem;                                 /* 552 px: B v1's 62ch at 18 px (rem, so a wrapper and its
                                                          text share one measure, before and after the font swap) */
  --d-d1:150ms; --d-d2:250ms; --d-d3:400ms;
  --d-ease-state:cubic-bezier(.2,0,0,1);    /* things switching: colour, underline, border, the frame hairline */
  --d-ease-enter:cubic-bezier(.05,.7,.1,1); /* things arriving: the hero loop only */
  --d-ease-exit:cubic-bezier(.3,0,1,1);     /* reserved: nothing uses it */
  --d-in:var(--d-ease-state);               /* the legacy alias: every existing 150/250 transition is a state change */
  --d-section:clamp(4rem,1.5rem + 6.67vw,7.5rem);   /* 64 to 120: Home's section air, 120 at 1440 and above (Alok's
                                                          Oct 28 lever) */
  --d-shade:72px;
  /* the shared and classic tokens, re-pointed */
  --cl-display:var(--d-instrument-serif); --cl-body:var(--d-instrument-sans); --cl-button:var(--d-instrument-sans);
  --cl-large:var(--d-lead); --cl-h2:var(--d-title); --cl-h3:var(--d-h3); --cl-h4:var(--d-h3);
  --display:var(--d-instrument-serif); --display-weight:400; --serif:var(--d-instrument-sans); --sans:var(--d-instrument-sans);
  --bg:var(--d-river); --bg-warm:var(--d-river-2); --surface:var(--d-river); --bg-deep:var(--d-river); --bg-deep-2:var(--d-river);
  --text:var(--d-bone); --text-muted:var(--d-steel); --ink-on-deep:var(--d-bone); --muted-on-deep:var(--d-steel);
  --rule:var(--d-bone-16); --rule-strong:rgba(238,234,226,.3); --field-border:var(--d-bone);
  --accent-ink:var(--d-tally); --accent-on-deep:var(--d-tally); --accent:var(--d-steel); --accent-soft:rgba(238,234,226,.24);
  --btn-bg:var(--d-bone); --btn-ink:var(--d-river); --btn-bg-dark:var(--d-bone); --btn-ink-dark:var(--d-river);
  --player-bg:var(--d-black); --scrim:var(--d-deep); --on-hero:var(--d-bone);
  --c-mist:var(--d-river); --c-rule:rgba(238,234,226,.06); --c-gold:var(--d-tally);
  --pad-x:clamp(20px,4vw,64px); --frame-max:1440px; --frame-wide:1440px;
  --space-section:var(--d-section); --fs-body:var(--d-body); --wave-h:0px;
  --header-h:124px; --cl-header-solid:72px;
  scroll-padding-top:calc(var(--cl-header-solid) + 16px);
  color-scheme:dark;
}
@media (min-width:768px) and (max-width:1099.98px){ :root[data-direction="dir-d"]{ --header-h:112px; } }
@media (min-width:768px) and (max-height:820px){ :root[data-direction="dir-d"]{ --header-h:112px; } }
@media (max-width:767.98px){ :root[data-direction="dir-d"]{ --header-h:88px; --cl-header-solid:60px; --d-shade:62px; } }
@media (max-width:767.98px) and (max-height:700px){ :root[data-direction="dir-d"]{ --header-h:76px; --d-shade:64px; } }
@media (max-height:500px){ :root[data-direction="dir-d"]{ --header-h:60px; --cl-header-solid:56px; } }

/* C's light band: Bone with River ink under the money and the forms (Home's price band and close, which run as one
   band, /contact's form section and the estimator), as C v1 had them (the shared tokens follow, so form and estimator
   parts adapt) */
[data-direction="dir-d"] :is(.close--form,.band.price-band,.estimator-section,.page:not(.page--home) .contact){
  --d-fg:var(--d-river); --d-fg-2:var(--d-moss); --d-ground:var(--d-bone); --d-line:var(--d-river-20); --d-ring:var(--d-river); --d-halo:var(--d-bone);
  --text:var(--d-river); --text-muted:var(--d-moss); --bg:var(--d-bone); --surface:var(--d-bone);
  --rule:rgba(24,33,29,.18); --rule-strong:rgba(24,33,29,.4); --field-border:var(--d-river);
  --accent-ink:var(--d-river); --accent-soft:rgba(24,33,29,.14); --btn-bg:var(--d-river); --btn-ink:var(--d-bone);
  background:var(--d-bone); color:var(--d-river); color-scheme:light}

/* ---------------------------------------------------------------- base: River, Bone, B's sans for text */
[data-direction="dir-d"] body{background:var(--d-river);color:var(--d-bone);font-family:var(--d-instrument-sans);font-size:var(--d-body);font-weight:400;line-height:1.55;letter-spacing:0}
[data-direction="dir-d"] .page:not(.page--home){--fs-body:var(--d-body);--accent-soft:rgba(238,234,226,.24)}
[data-direction="dir-d"] ::selection{background:var(--d-bone);color:var(--d-river)}
[data-direction="dir-d"] :is(.close--form,.band.price-band,.estimator-section,.page:not(.page--home) .contact) ::selection{background:var(--d-river);color:var(--d-bone)}
[data-direction="dir-d"] strong,[data-direction="dir-d"] b{font-weight:600}
[data-direction="dir-d"] main :is(p,li){text-wrap:pretty}
/* every heading below the hero in the serif: its one weight, mixed case as typed, a hair tight */
[data-direction="dir-d"] main :is(h1,h2,h3,h4){font-family:var(--d-instrument-serif);font-weight:400;font-synthesis:none;text-transform:none;letter-spacing:-.01em;color:inherit;text-wrap:balance}
[data-direction="dir-d"] main h2{font-size:var(--d-title);line-height:.98}
[data-direction="dir-d"] main h3{font-size:var(--d-h3);line-height:1.1}
[data-direction="dir-d"] .section__title{max-width:16em;margin-bottom:clamp(24px,3vw,44px)}
[data-direction="dir-d"] .sublead{max-width:18em;margin-top:calc(-1 * clamp(8px,1.2vw,20px));margin-bottom:clamp(36px,4vw,56px);
  font-family:var(--d-instrument-sans);font-size:var(--d-lead);font-style:normal;font-weight:400;line-height:1.45;color:var(--d-fg)}
[data-direction="dir-d"] .prose{max-width:var(--d-measure)}
[data-direction="dir-d"] .prose > * + *{margin-top:.85em}
[data-direction="dir-d"] :is(.prose a,a.link){text-decoration-thickness:1px;text-underline-offset:.22em;transition:text-decoration-thickness var(--d-d1) var(--d-in)}
[data-direction="dir-d"] :is(.prose a,a.link):hover{text-decoration-thickness:2px}
/* eyebrows are credits: small, as typed, never tracked capitals */
[data-direction="dir-d"] .eyebrow{font-family:var(--d-instrument-sans);font-size:var(--d-cap);font-style:normal;font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none;
  color:var(--d-fg-2);font-variation-settings:"wdth" 87}
[data-direction="dir-d"] .section{padding-block:var(--d-section)}
[data-direction="dir-d"] .todo{font-family:var(--d-instrument-sans);font-weight:400;border:1px dashed currentColor;background:rgba(238,234,226,.06);color:inherit}
[data-direction="dir-d"] .todo::before,[data-direction="dir-d"] .hero .todo::before,[data-direction="dir-d"] :is(.more a,.btn) .todo::before{color:var(--d-fg-2)}

/* focus: a Tally ring with a River halo outside it (W3C C40, one of the two always clears 3:1, even over a bright
   frame); on Bone a River ring with a Bone halo. Instant, never removed, an outline so forced colours keep it. */
[data-direction="dir-d"] :focus-visible,
[data-direction="dir-d"] :is(.site-header,.site-footer,.hero,.plate,.player-band,.section--deep) :focus-visible,
[data-direction="dir-d"] .page:not(.page--home) :is(.cta,.player-band) :focus-visible,
[data-direction="dir-d"] .page:not(.page--home) .skip:focus-visible{outline:2px solid var(--d-ring);outline-offset:2px;box-shadow:0 0 0 6px var(--d-halo)}
[data-direction="dir-d"] :is(.close--form,.band.price-band,.estimator-section) :focus-visible,
[data-direction="dir-d"] .page:not(.page--home) .contact :focus-visible{outline-color:var(--d-river);box-shadow:0 0 0 6px var(--d-bone)}
[data-direction="dir-d"] main:focus{outline:none;box-shadow:none}
[data-direction="dir-d"] .skip{background:var(--d-bone);color:var(--d-river);font-family:var(--d-instrument-sans);font-size:var(--d-cap);font-weight:600;letter-spacing:0;text-transform:none}

/* text is there from the first paint: no fade-up */
[data-direction="dir-d"].js.can-reveal .reveal{opacity:1;transform:none;transition:none}

/* ---------------------------------------------------------------- buttons: square blocks in B's sans, C's colours */
[data-direction="dir-d"] .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.8rem 1.4rem;
  font-family:var(--d-instrument-sans);font-size:var(--d-small);font-weight:600;line-height:1.2;letter-spacing:0;text-transform:none;text-decoration:none;
  background:var(--d-fg);color:var(--d-ground);border:1px solid var(--d-fg);border-radius:0;box-shadow:none;
  transition:background-color var(--d-d1) var(--d-in),color var(--d-d1) var(--d-in),border-color var(--d-d1) var(--d-in)}
[data-direction="dir-d"] :is(.btn,.btn--primary,.btn--primary.btn--on-dark):hover,[data-direction="dir-d"] .btn:active{background:transparent;color:var(--d-fg);border-color:var(--d-fg)}
[data-direction="dir-d"] .btn--ghost,[data-direction="dir-d"] .btn--ghost.btn--on-dark{background:transparent;color:var(--d-fg);border-color:color-mix(in srgb,var(--d-fg) 60%,transparent)}
[data-direction="dir-d"] :is(.btn--ghost,.btn--ghost.btn--on-dark):hover{background:var(--d-fg);color:var(--d-ground);border-color:var(--d-fg)}
[data-direction="dir-d"] .btn[disabled]{opacity:.5}
[data-direction="dir-d"] :is(.close__form,.page:not(.page--home) .contact__form) .form__submit[disabled],
[data-direction="dir-d"] :is(.close__form,.page:not(.page--home) .contact__form) .form__submit[disabled]:hover{
  opacity:1;background:var(--d-river);border-color:var(--d-river);color:rgba(238,234,226,.6);cursor:not-allowed}
/* v2: a sending form keeps its words and goes to the disabled look at once (inert until the template sets aria-busy) */
[data-direction="dir-d"] :is(.close__form,.page:not(.page--home) .contact__form) .form__submit[aria-busy="true"]{
  cursor:progress;background:var(--d-river);border-color:var(--d-river);color:rgba(238,234,226,.6);transition:none}
[data-direction="dir-d"] .btn--sm,[data-direction="dir-d"] .page:not(.page--home) main .btn--sm{min-height:44px;padding:.6rem 1.1rem;font-size:var(--d-cap)}
@media (max-width:767.98px){ [data-direction="dir-d"] .btn{white-space:normal;max-width:100%} }

/* the "go there" links: underlined text in the sans, never more boxes */
[data-direction="dir-d"] .more{margin-top:clamp(32px,4vw,56px);text-align:start;font-size:var(--d-body)}
[data-direction="dir-d"] :is(.founder,#work,.how,.promises) .more a,[data-direction="dir-d"] .price-band__link a,
[data-direction="dir-d"] .page--pricing #day-rates .more a,[data-direction="dir-d"] .page--thanks .page-head .more a,[data-direction="dir-d"] .page--post .related .more a{
  display:inline;min-height:0;padding:.6em 0;gap:0;white-space:normal;
  font-family:var(--d-instrument-sans);font-size:var(--d-body);font-weight:600;line-height:1.5;letter-spacing:0;text-transform:none;
  color:var(--d-fg);background:none;border:0;border-radius:0;box-shadow:none;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;transition:text-decoration-thickness var(--d-d1) var(--d-in)}
[data-direction="dir-d"] :is(.founder,#work,.how,.promises) .more a:hover,[data-direction="dir-d"] .price-band__link a:hover,
[data-direction="dir-d"] .page--pricing #day-rates .more a:hover,[data-direction="dir-d"] .page--thanks .page-head .more a:hover,[data-direction="dir-d"] .page--post .related .more a:hover{
  color:var(--d-fg);background:none;border:0;text-decoration-thickness:2px}

/* ---------------------------------------------------------------- header: the sticker, a quiet sentence-case nav */
[data-direction="dir-d"] .site-header,[data-direction="dir-d"] .site-header.is-solid,html[data-direction="dir-d"].menu-open .site-header{
  height:var(--header-h);color:var(--d-bone);transition:height var(--d-d2) var(--d-in)}
[data-direction="dir-d"] .site-header.is-solid{height:var(--cl-header-solid)}
/* River behind the bar: solid once scrolled, under the open menu, and on inner pages from the first paint (so it
   never reads as a band) */
[data-direction="dir-d"] .site-header::before,
[data-direction="dir-d"]:not(.menu-open) .page:not(.page--home) .site-header--tall:not(.is-solid)::before{
  inset:0;background:var(--d-river);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
[data-direction="dir-d"] .site-header.is-solid::before,html[data-direction="dir-d"].menu-open .site-header::before{
  inset:0;background:var(--d-river);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 rgba(238,234,226,.1)}
/* Home over the film: a Deep shade that runs 72 px below the bar and fades out (C v1's .72/.32 measured 2.1 to 3.3:1
   for the nav over bright frames; this one is measured over the poster and the loop, see the report) */
[data-direction="dir-d"]:not(.menu-open) .page--home .site-header:not(.is-solid)::before{inset:0 0 calc(-1 * var(--d-shade)) 0;
  background:linear-gradient(180deg,rgba(var(--d-deep),.8) 0,rgba(var(--d-deep),.7) 40%,rgba(var(--d-deep),.3) 70%,rgba(var(--d-deep),0) 100%)}
/* portrait phones: the shade weighted to the right, where "Menu" sits (the yellow sticker carries its own contrast), so
   the top of the sky is not a grey band across the whole frame */
@media (max-width:767.98px) and (min-height:700.02px){
  [data-direction="dir-d"]:not(.menu-open) .page--home .site-header:not(.is-solid)::before{
    background:radial-gradient(140% 100% at 100% 0,rgba(var(--d-deep),.86) 0,rgba(var(--d-deep),.7) 40%,rgba(var(--d-deep),0) 78%)}
}
@media (max-width:767.98px) and (max-height:700px),(max-height:500px){
  [data-direction="dir-d"]:not(.menu-open) .page--home .site-header:not(.is-solid)::before{
    background:linear-gradient(180deg,rgba(var(--d-deep),.78) 0,rgba(var(--d-deep),.68) 50%,rgba(var(--d-deep),0) 100%)}
}
[data-direction="dir-d"] .site-header__bar{gap:clamp(20px,3vw,48px)}
/* the sticker (the 2024 badge with "A Media Company" round it; its yellow disc is the screen's one Tally light), at
   B's sizes; the name inside in Big Shoulders, so C's face is in the mark (.115 of the badge keeps "CINCINNATI" .04
   of the badge clear of the top arc's ends at every size) */
[data-direction="dir-d"] .site-header .wordmark{--badge:88px;font-family:var(--d-big-shoulders);font-size:calc(var(--badge) * .115);font-weight:800;line-height:.96;
  letter-spacing:.02em;text-transform:uppercase;color:var(--d-river);
  transition:width var(--d-d2) var(--d-in),height var(--d-d2) var(--d-in),font-size var(--d-d2) var(--d-in)}
[data-direction="dir-d"] .site-header.is-solid .wordmark{--badge:56px}
[data-direction="dir-d"] .nav{justify-content:flex-end;gap:clamp(12px,1.6vw,28px)}
[data-direction="dir-d"] .nav__list{gap:2px}
/* v2: the resting underline exists but is transparent, so hover's currentColor FADES in over the declared 150 ms
   (underline on/off cannot animate; the old rest was text-decoration:none). The current page keeps a static 1 px. */
[data-direction="dir-d"] .nav__link,[data-direction="dir-d"] .site-header .nav__link{min-height:44px;padding:8px 12px;border:0;border-radius:0;
  font-family:var(--d-instrument-sans);font-size:var(--d-small);font-weight:500;letter-spacing:0;text-transform:none;
  color:inherit;text-shadow:none;transform:none;text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:transparent;
  text-underline-offset:.35em;transition:text-decoration-color var(--d-d1) var(--d-ease-state)}
[data-direction="dir-d"] .site-header .nav__link:hover{background:none;color:inherit;text-shadow:none;transform:none;text-decoration:underline;text-decoration-thickness:2px}
[data-direction="dir-d"] .site-header .nav__link[aria-current]{border:0;text-decoration:underline;text-decoration-thickness:1px}
[data-direction="dir-d"] .site-header .nav__cta,[data-direction="dir-d"] .site-header--over-hero:not(.is-solid) .nav__cta{
  min-height:44px;padding:.6rem 1.1rem;font-size:var(--d-cap);font-weight:600;background:transparent;color:var(--d-bone);border:1px solid var(--d-bone-60)}
[data-direction="dir-d"] .site-header .nav__cta:hover,[data-direction="dir-d"] .site-header--over-hero:not(.is-solid) .nav__cta:hover{background:var(--d-bone);color:var(--d-river);border-color:var(--d-bone)}
[data-direction="dir-d"] :is(.menu-toggle,.menu-link){padding:0 8px;font-family:var(--d-instrument-sans);font-size:var(--d-small);font-weight:600;
  letter-spacing:0;text-transform:none;color:inherit;text-shadow:none}
/* the phone menu: a River sheet, the pages in the serif */
[data-direction="dir-d"] .menu{background:var(--d-river);color:var(--d-bone);padding-top:16px}
[data-direction="dir-d"] .menu__list li + li{border-top:0}
[data-direction="dir-d"] .menu__link{min-height:64px;font-family:var(--d-instrument-serif);font-size:2.5rem;font-weight:400;line-height:1.05;letter-spacing:-.01em;
  text-transform:none;color:var(--d-bone);text-shadow:none}
[data-direction="dir-d"] .menu__link[aria-current]{text-decoration-color:var(--d-bone);text-decoration-thickness:1px}
[data-direction="dir-d"] .menu__cta .btn{background:var(--d-bone);color:var(--d-river);border-color:var(--d-bone)}
[data-direction="dir-d"] .menu__email,[data-direction="dir-d"] .menu__email a{font-family:var(--d-instrument-sans);font-size:var(--d-small);color:var(--d-bone)}
@media (min-width:768px) and (max-width:1099.98px){
  [data-direction="dir-d"] .site-header .wordmark{--badge:80px}
  [data-direction="dir-d"] .nav__link,[data-direction="dir-d"] .site-header .nav__link{font-size:var(--d-cap);padding:8px}
}
@media (min-width:768px) and (max-height:820px){ [data-direction="dir-d"] .site-header .wordmark{--badge:80px} }
@media (max-width:767.98px){
  [data-direction="dir-d"] .site-header .wordmark{--badge:64px}
  [data-direction="dir-d"] .site-header.is-solid .wordmark{--badge:46px}
}
@media (max-width:767.98px) and (max-height:700px){ [data-direction="dir-d"] .site-header .wordmark{--badge:56px} }
@media (max-height:500px){ [data-direction="dir-d"] .site-header .wordmark,[data-direction="dir-d"] .site-header.is-solid .wordmark{--badge:46px} }

/* ---------------------------------------------------------------- hero: C v1's title card over the film */
[data-direction="dir-d"] .hero{min-height:max(600px,100svh);align-items:end;background:var(--d-river)}
/* the shade ends on River, not Deep, so the film's last rows dissolve into the page below instead of a dark seam */
[data-direction="dir-d"] .hero__scrim{background:
  linear-gradient(0deg,rgba(var(--d-river-rgb),.96) 0%,rgba(var(--d-deep),.8) 12%,rgba(var(--d-deep),.74) 30%,rgba(var(--d-deep),.6) 52%,rgba(var(--d-deep),.3) 66%,rgba(var(--d-deep),0) 82%),
  linear-gradient(90deg,rgba(var(--d-deep),.3) 0%,rgba(var(--d-deep),0) 60%)}
@media (max-width:767.98px){
  [data-direction="dir-d"] .hero__scrim{background:linear-gradient(0deg,rgba(var(--d-river-rgb),.96) 0%,rgba(var(--d-deep),.84) 14%,rgba(var(--d-deep),.8) 40%,rgba(var(--d-deep),.68) 62%,rgba(var(--d-deep),.34) 76%,rgba(var(--d-deep),0) 90%)}
}
/* short screens (small and landscape phones): the type fills most of the frame, so the shade reaches the top
   (measured: the eyebrow over a landscape phone's brightest frame was 3.5:1 under the desktop scrim) */
@media (max-width:767.98px) and (max-height:700px),(max-height:500px){
  [data-direction="dir-d"] .hero__scrim{background:linear-gradient(0deg,rgba(var(--d-river-rgb),.96) 0%,rgba(var(--d-deep),.86) 14%,rgba(var(--d-deep),.8) 50%,rgba(var(--d-deep),.7) 78%,rgba(var(--d-deep),.4) 90%,rgba(var(--d-deep),.12) 100%)}
}
/* the type sits on the 1440 frame, like the sticker, the nav and every section below (on a 1920 screen the line
   starts where the logo does, not 240 px to its left) */
[data-direction="dir-d"] .hero{--d-frame-x:max(var(--pad-x),calc((100% - var(--frame-max)) / 2 + var(--pad-x)))}
[data-direction="dir-d"] .hero__inner{display:grid;justify-items:start;align-content:end;text-align:left;max-width:none;
  padding:calc(var(--header-h) + 24px) var(--d-frame-x) calc(clamp(36px,7vh,72px) + env(safe-area-inset-bottom))}
[data-direction="dir-d"] .hero__panel{width:100%;max-width:none;padding:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ [data-direction="dir-d"] .hero__panel{background:none} }
/* A ceiling on the film's brightness behind the words that moves with them: a "darken" layer caps every pixel under
   the eyebrow, the line and the sub at #5C6460 (Bone on it 5.1:1) and leaves darker pixels alone. At normal settings
   the scrim already holds them below it, so the first screen looks as it did; when a reader enlarges text or its
   spacing (WCAG 1.4.12/1.4.4) the words grow up into the sky and stay readable. The blend needs the film in its
   group, so the scrim and the inner block drop their z-index (paint order is unchanged: film, scrim, words). */
[data-direction="dir-d"] :is(.hero__scrim,.hero__inner){z-index:auto}
[data-direction="dir-d"] .hero__panel,[data-direction="dir-d"] .hero__panel > *,[data-direction="dir-d"] .hero__actions{position:relative}
/* Oct 28: the darken layer is off. Safari draws a fading <video> on its own layer, cannot blend over it, and painted the
   ceiling as a flat grey box behind the words (Alok's screenshot). The scrim alone holds the words at normal settings,
   as C v1 did. */
[data-direction="dir-d"] .hero__panel::before{content:none}
/* v2: the film arriving is the one 400 ms moment (the base sheet said 600 ms on its own curve); opacity only */
[data-direction="dir-d"] .hero__video{transition:opacity var(--d-d3) var(--d-ease-enter)}
/* the eyebrow in B's sans, not italic: "find it" is the only italic on the first screen */
[data-direction="dir-d"] .hero__eyebrow{display:block;margin:0 0 clamp(14px,1.6vw,22px);font-family:var(--d-instrument-sans);font-size:var(--d-body);font-style:normal;font-weight:500;
  line-height:1.4;letter-spacing:0;text-transform:none;color:var(--d-bone);text-shadow:none}
/* The line breaks at its full stop: "The story is already there." is 10.49em in Big Shoulders and "... there. We"
   11.87em, so a measure of 11.1em at a size that fills it (the frame less its gutters, over 11.2) gives one sentence
   per line at every width from 520 px. Greedy wrapping on purpose: balance would split the first sentence. */
[data-direction="dir-d"] .hero__statement{max-width:11.1em;font-family:var(--d-big-shoulders);font-size:var(--d-hero);font-weight:800;font-synthesis:none;
  line-height:.88;letter-spacing:.005em;text-transform:uppercase;color:var(--d-bone);text-shadow:none;text-wrap:wrap}
[data-direction="dir-d"] .hero__statement em{font-family:var(--d-newsreader);font-size:.86em;font-style:italic;font-weight:400;letter-spacing:-.025em;
  text-transform:none;color:inherit;margin-left:0}
[data-direction="dir-d"] .hero__sub{max-width:40rem;margin:clamp(18px,2vw,28px) 0 0;text-wrap:balance;font-family:var(--d-instrument-sans);
  font-size:clamp(1.125rem,.45vw + 1rem,1.375rem);font-weight:400;line-height:1.45;color:var(--d-bone);text-shadow:none}
[data-direction="dir-d"] .hero__actions{justify-content:flex-start;gap:12px;margin-top:clamp(24px,4vh,40px)}
[data-direction="dir-d"] .hero .btn--primary.btn--on-dark{background:var(--d-bone);color:var(--d-river);border-color:var(--d-bone)}
[data-direction="dir-d"] .hero .btn--ghost.btn--on-dark{background:transparent;color:var(--d-bone);border-color:var(--d-bone-60)}
[data-direction="dir-d"] .hero .btn--primary.btn--on-dark:hover{background:transparent;color:var(--d-bone);border-color:var(--d-bone)}
[data-direction="dir-d"] .hero .btn--ghost.btn--on-dark:hover{background:var(--d-bone);color:var(--d-river);border-color:var(--d-bone)}
/* the pause control: a 44 px square */
[data-direction="dir-d"] .hero__toggle{right:var(--d-frame-x);width:44px;height:44px;border:1px solid rgba(238,234,226,.55);border-radius:0;background:rgba(var(--d-deep),.62);color:var(--d-bone);
  transition:background-color var(--d-d1) var(--d-in),border-color var(--d-d1) var(--d-in)}
[data-direction="dir-d"] .hero__toggle:hover{background:rgba(var(--d-deep),.9);border-color:var(--d-bone)}
@media (max-width:519.98px){
  /* phones: "THE STORY IS / ALREADY THERE. / WE HELP YOU / find it." (a 5.95em measure sits between 5.67 and 7.05) */
  [data-direction="dir-d"] .hero__statement{max-width:none;font-size:calc((100vw - 2 * var(--pad-x)) / 5.95);line-height:.9}
}
@media (max-width:767.98px){
  /* the buttons end above the pause control (it sits 20 px from the bottom) */
  [data-direction="dir-d"] .hero__inner{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  [data-direction="dir-d"] .hero__actions{width:100%;flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:10px}
  /* two equal blocks, not one short and one long */
  [data-direction="dir-d"] .hero__actions .btn{flex:1 1 0;width:auto;max-width:none;padding-inline:1rem}
}
/* under 360 px "Watch the work" would break in two: the pair stacks, each the full width */
@media (max-width:359.98px){ [data-direction="dir-d"] .hero__actions .btn{flex:1 1 auto} }
@media (max-width:767.98px) and (max-height:700px){
  [data-direction="dir-d"] .hero{min-height:max(540px,100svh)}
  [data-direction="dir-d"] .hero__inner{padding-top:calc(var(--header-h) + 12px);padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  [data-direction="dir-d"] .hero__sub{font-size:1.0625rem;margin-top:12px}
  [data-direction="dir-d"] .hero__actions{margin-top:18px}
  [data-direction="dir-d"] .hero__actions .btn{min-height:44px;padding:.7rem 1rem}
}
@media (max-height:500px) and (min-width:568px){
  [data-direction="dir-d"] .hero{min-height:100svh}
  [data-direction="dir-d"] .hero__inner{padding-top:calc(var(--header-h) + 8px);padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  [data-direction="dir-d"] .hero__statement{font-size:clamp(2rem,calc((100vw - 2 * var(--pad-x)) / 14),3.25rem)}
  [data-direction="dir-d"] .hero__sub{font-size:var(--d-small);margin-top:8px}
  [data-direction="dir-d"] .hero__actions{margin-top:12px;padding-right:56px}
  [data-direction="dir-d"] .hero__actions .btn{min-height:44px;padding:.6rem 1rem}
}

/* Home sections keep their full padding on both sides, exactly as B v1 did. Alok, rejecting a tightened B: "the
   spacing and the overall feel was much better in version 1... much more squished together" (docs/design/directions/TASTE.md). */

/* ---------------------------------------------------------------- the quote: B's serif plate, on River */
[data-direction="dir-d"] .plate{background:var(--d-river);color:var(--d-bone);padding-block:clamp(80px,10vw,160px) clamp(48px,6vw,96px)}
/* v2 fix: .names now carries its own top padding (the TASTE Oct 28 client-logos ruling), so the plate's bottom
   softens - the pair otherwise doubles past the section rhythm */
[data-direction="dir-d"] .plate:has(+ .names){padding-bottom:clamp(24px,3vw,48px)}
[data-direction="dir-d"] .plate__figure{text-align:left}
/* v2 fix (TASTE Oct 28 quote ruling: "people's words ... are set in ITALIC serif ... change both to italic.
   Recommended face: Newsreader italic"): the plate joins the hero's "find it" in the one italic voice.
   The dash still always ends a line instead of starting one, re-measured for Newsreader italic (wider than the
   old face, and its rendered advance grows with size: "There is one thing the photograph must contain –" runs
   18.44em at 35 px up to 19.66em at 72 px; with " the" 19.88 to 21.1em). A 19.7em line sits inside that window at
   every size, so the size is held to the column over 19.7 - against min(100vw, frame): past 1440 the column stops
   growing with the viewport, and the cap must stop with it or the two lines outgrow the frame. Phones break three
   ways ("There is one thing the" / "photograph must contain –" 10.81em, 12.25em with " the"): an 11.4em measure
   held over 11.1 keeps the dash ending line two. */
[data-direction="dir-d"] .big{max-width:19.95em;margin-inline:0;font-family:var(--d-newsreader);
  font-size:min(clamp(2.25rem,1.1rem + 3.6vw,4.5rem),calc((min(100vw,var(--frame-max)) - 2 * var(--pad-x)) / 19.7));font-style:italic;font-weight:400;
  font-synthesis:none;line-height:1.02;letter-spacing:-.01em;text-transform:none;text-wrap:wrap}
@media (max-width:767.98px){
  [data-direction="dir-d"] .big{max-width:11.4em;font-size:min(2.5rem,calc((100vw - 2 * var(--pad-x)) / 11.1));line-height:1.04}
}
[data-direction="dir-d"] .plate__cite{margin-top:clamp(20px,2vw,32px);font-family:var(--d-instrument-sans);font-size:var(--d-small);font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--d-steel)}

/* ---------------------------------------------------------------- names: a credit row, the marks in Bone */
/* v2 fix (TASTE Oct 28 client-logos ruling, Alok: "there is almost no padding above the logos here... it looks
   weird... the logos should be centered in my opinion"): the row gets its own top padding in the section rhythm
   and the marks centre; the quiet Bone treatment and the Urban Sites size-down stay */
[data-direction="dir-d"] .names{background:var(--d-river);padding-block:clamp(48px,5vw,80px) clamp(64px,7vw,112px)}
[data-direction="dir-d"] .names .inner{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
[data-direction="dir-d"] .names .eyebrow{max-width:20ch;margin:0;text-align:left;font-size:var(--d-cap);color:var(--d-steel)}
[data-direction="dir-d"] .logos{justify-content:center;align-items:center;gap:clamp(32px,4.5vw,72px)}
/* the marks are solid black on clear (tools/logos.py): inverted, then toned down to Bone */
[data-direction="dir-d"] .logos img{height:clamp(48px,4.4vw,64px);width:auto;max-width:100%;filter:invert(1) sepia(.12) brightness(.94);mix-blend-mode:normal;opacity:1}
[data-direction="dir-d"] .logos img[data-client="Urban Sites"]{height:clamp(40px,3.6vw,56px)}
@media (min-width:900px){ [data-direction="dir-d"] .names .inner{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:48px} }
@media (max-width:519.98px){
  [data-direction="dir-d"] .logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-items:center;justify-content:center;gap:20px}
  [data-direction="dir-d"] .logos img,[data-direction="dir-d"] .logos img[data-client="Urban Sites"]{height:auto;max-height:48px;object-fit:contain}
  [data-direction="dir-d"] .logos img[data-client="Urban Sites"]{max-height:40px}
}

/* ---------------------------------------------------------------- no wavy lines: straight edges */
[data-direction="dir-d"] :is(.founder,.site-footer)::before,[data-direction="dir-d"] .page:not(.page--home) .site-footer::before{content:none;background:none}

/* ---------------------------------------------------------------- founder: C's River-2 band, B's grid */
[data-direction="dir-d"] .founder{background:var(--d-river-2);padding-top:var(--d-section)}
[data-direction="dir-d"] .founder__grid{align-items:start;gap:clamp(32px,4.6vw,72px)}
@media (min-width:768px){ [data-direction="dir-d"] .founder__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} }
[data-direction="dir-d"] .founder__photo--pending{background:rgba(238,234,226,.06);border:1px dashed rgba(238,234,226,.3);color:var(--d-bone)}
[data-direction="dir-d"] .founder__photo--pending .todo{border-color:rgba(238,234,226,.45);background:transparent;color:var(--d-bone);font-weight:400}
[data-direction="dir-d"] .founder__photo--pending .todo::before{color:var(--d-steel)}
[data-direction="dir-d"] .founder__text .section__title{margin-bottom:clamp(20px,2.4vw,32px)}
[data-direction="dir-d"] .founder__text .prose{font-size:var(--d-body);font-weight:400;line-height:1.55}
[data-direction="dir-d"] .founder .more{text-align:left;margin-top:clamp(24px,3vw,40px)}

/* ---------------------------------------------------------------- the work: the lead still full bleed, then the contact sheet */
[data-direction="dir-d"] #work{background:var(--d-river);padding-top:var(--d-section)}
[data-direction="dir-d"] #work :is(.section__title,.sublead){width:auto;margin-inline:0}
[data-direction="dir-d"] #work .inner{max-width:var(--frame-max)}
[data-direction="dir-d"] #work .grid{width:auto;margin-inline:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,5vw,72px) clamp(16px,1.6vw,24px)}
[data-direction="dir-d"] .grid{gap:clamp(48px,4.4vw,64px) clamp(16px,1.6vw,24px)}
@media (min-width:1100px){
  [data-direction="dir-d"] #work .grid > .tile:first-child .tile__media{margin-inline:calc(-1 * var(--pad-x))}
  [data-direction="dir-d"] #work .grid > .tile:first-child .tile__runtime{right:var(--pad-x)}
}
/* a frame on the sheet: the still with a thin frame line; under it a credit row (client in Steel, the film, its
   runtime), then the film's one line under the title column */
[data-direction="dir-d"] .tile{display:grid;grid-template-columns:minmax(0,8.5rem) minmax(0,1fr) 2.75rem;column-gap:16px;align-content:start}
[data-direction="dir-d"] .tile > *{grid-column:1 / -1}
[data-direction="dir-d"] .tile__media{grid-row:1;overflow:visible;background:var(--d-black);box-shadow:0 0 0 1px var(--d-bone-16)}
[data-direction="dir-d"] .tile__media img,[data-direction="dir-d"] :is(.tile:hover,.tile:focus-within) .tile__media img{transform:none;transition:none}
[data-direction="dir-d"] .tile__runtime{top:calc(100% + 14px);right:0;bottom:auto;padding:0;border-radius:0;background:none;color:var(--d-steel);
  font-family:var(--d-instrument-sans);font-size:var(--d-cap);font-weight:400;line-height:1.4;letter-spacing:0;font-variation-settings:"wdth" 87;font-variant-numeric:tabular-nums}
[data-direction="dir-d"] .tile__close{grid-row:2;justify-self:end;float:none;margin:12px 0 0;font-family:var(--d-instrument-sans);font-size:var(--d-cap);font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--d-fg)}
[data-direction="dir-d"] .tile__client{grid-row:3;grid-column:1;align-self:baseline;margin-top:14px;font-family:var(--d-instrument-sans);font-size:var(--d-cap);font-weight:400;line-height:1.4;
  letter-spacing:0;text-transform:none;color:var(--d-steel);font-variation-settings:"wdth" 87}
[data-direction="dir-d"] main .tile__title,[data-direction="dir-d"] #work .grid > .tile:first-child .tile__title{grid-row:3;grid-column:2;align-self:baseline;margin-top:14px;
  font-family:var(--d-instrument-sans);font-size:1.0625rem;font-weight:600;line-height:1.35;letter-spacing:0;text-transform:none;text-wrap:pretty}
[data-direction="dir-d"] .tile__line,[data-direction="dir-d"] #work .grid > .tile:first-child .tile__line{grid-row:4;grid-column:2 / -1;max-width:30.5em;margin-top:6px;
  font-family:var(--d-instrument-sans);font-size:var(--d-small);font-weight:400;line-height:1.5;color:var(--d-fg)}
[data-direction="dir-d"] .tile__link{text-decoration:none}
[data-direction="dir-d"] .tile__link:hover,[data-direction="dir-d"] .tile__link:focus-visible{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
/* the play badge: a dark square at the bottom left, off the subject, with a Bone triangle */
[data-direction="dir-d"] .tile__play::before,[data-direction="dir-d"] #work .grid > .tile:first-child .tile__play::before{left:16px;top:auto;bottom:16px;width:48px;height:48px;margin:0;border-radius:0;
  background:rgba(var(--d-deep),.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%23EEEAE2'/%3E%3C/svg%3E") 55% 50% / 40% no-repeat}
[data-direction="dir-d"] .tile__play:hover::before,[data-direction="dir-d"] #work .grid > .tile:first-child .tile__play:hover::before{background-color:rgba(var(--d-deep),.9)}
[data-direction="dir-d"] .tile__play:focus-visible{outline:2px solid var(--d-tally);outline-offset:-6px;box-shadow:inset 0 0 0 4px rgba(var(--d-deep),.9)}
[data-direction="dir-d"] .tile__play:focus-visible::before{outline:2px solid var(--d-tally);outline-offset:2px;box-shadow:0 0 0 6px var(--d-river)}
[data-direction="dir-d"] .tile__media:has(> .tile__player:focus-visible){outline:2px solid var(--d-tally);outline-offset:2px;box-shadow:0 0 0 6px var(--d-river)}
@media (min-width:1100px){
  [data-direction="dir-d"] #work .grid > .tile:first-child .tile__play::before{left:var(--pad-x);bottom:24px;width:64px;height:64px}
}
[data-direction="dir-d"].no-js #work .grid > .tile:first-child .tile__media::after{content:none}
/* the film that is playing: the tally bar along its top edge */
[data-direction="dir-d"] .tile.is-playing .tile__media::before{content:"";position:absolute;inset:0 0 auto 0;z-index:3;height:3px;background:var(--d-tally);pointer-events:none}
/* v2: the frame answers, the film never performs. Hover lives on the frame line and the badge bed; the still itself
   is immovable (that refusal is the device). Keyboard focus stays a light switching on, never eased. */
@media (hover:hover){
  [data-direction="dir-d"] .tile__media{transition:box-shadow var(--d-d1) var(--d-ease-state)}
  [data-direction="dir-d"] .tile:hover .tile__media{box-shadow:0 0 0 1px var(--d-bone-60)}
}
[data-direction="dir-d"] .tile__play::before{transition:background-color var(--d-d1) var(--d-ease-state)}
[data-direction="dir-d"] .tile__media:has(:focus-visible){transition:none}
/* v2: the River floor. Every still sits into the ground on a bottom-up River gradient (the top half untouched; the
   badge and the tally bar stay above it); a playing film is never tinted. */
[data-direction="dir-d"] .tile__media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(var(--d-river-rgb),.45) 0,rgba(var(--d-river-rgb),.14) 28%,rgba(var(--d-river-rgb),0) 52%)}
[data-direction="dir-d"] .tile.is-playing .tile__media::after{content:none}
/* under 1100 px the columns get too narrow for a row: a stacked credit (client, then title, then the line); the
   runtime stays on the client's line at the right. The 3-across sheets (/work, pricing, drone) stack at every width,
   since a third of the frame is too narrow for a row too. In em, so a reader's larger default font stacks it sooner. */
@media (max-width:68.74em){
  [data-direction="dir-d"] .tile{grid-template-columns:minmax(0,1fr) auto}
  [data-direction="dir-d"] .tile__client{grid-column:1 / -1;padding-right:3.5rem}
  [data-direction="dir-d"] main .tile__title,[data-direction="dir-d"] #work .grid > .tile:first-child .tile__title{grid-row:4;grid-column:1 / -1;margin-top:2px}
  [data-direction="dir-d"] .tile__line,[data-direction="dir-d"] #work .grid > .tile:first-child .tile__line{grid-row:5;grid-column:1 / -1}
}
[data-direction="dir-d"] .page:not(.page--home) .grid:not(.next .grid) .tile{grid-template-columns:minmax(0,1fr) auto}
[data-direction="dir-d"] .page:not(.page--home) .grid:not(.next .grid) .tile__client{grid-column:1 / -1;padding-right:3.5rem}
[data-direction="dir-d"] .page:not(.page--home) .grid:not(.next .grid) .tile__title{grid-row:4;grid-column:1 / -1;margin-top:2px}
[data-direction="dir-d"] .page:not(.page--home) .grid:not(.next .grid) .tile__line{grid-row:5;grid-column:1 / -1}
/* the other sheets (/work, pricing, drone, a film's "More films"): 3 across from 1100 px, 2 from 768, 1 under */
[data-direction="dir-d"] .page:not(.page--home) .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
[data-direction="dir-d"] .page:not(.page--home) .next .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1099.98px){ [data-direction="dir-d"] .page:not(.page--home) .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:767.98px){
  [data-direction="dir-d"] #work .grid,[data-direction="dir-d"] .page:not(.page--home) .grid,[data-direction="dir-d"] .page:not(.page--home) .next .grid{grid-template-columns:minmax(0,1fr)}
  [data-direction="dir-d"] .tile__play::before{left:12px;bottom:12px;width:44px;height:44px}
  /* the lead film runs to the screen edges on phones too; its badge and runtime keep to the text column */
  [data-direction="dir-d"] #work .grid > .tile:first-child .tile__media{margin-inline:calc(-1 * var(--pad-x))}
  [data-direction="dir-d"] #work .grid > .tile:first-child .tile__runtime{right:var(--pad-x)}
  [data-direction="dir-d"] #work .grid > .tile:first-child .tile__play::before{left:var(--pad-x);bottom:12px;width:48px;height:48px}
}

/* ---------------------------------------------------------------- how: square frames, B's type, Bone text */
[data-direction="dir-d"] .how{background:var(--d-river);text-align:left}
[data-direction="dir-d"] .how :is(.section__title,.sublead){margin-inline:0}
[data-direction="dir-d"] .how .section__title{max-width:16em}
[data-direction="dir-d"] .how__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px clamp(16px,1.6vw,24px)}
[data-direction="dir-d"] .how__item{justify-items:start}
[data-direction="dir-d"] .how__photo{width:100%;aspect-ratio:4/5;border-radius:0;background:rgba(238,234,226,.06);box-shadow:0 0 0 1px var(--d-bone-16)}
[data-direction="dir-d"] .how__photo--pending{border:1px dashed rgba(238,234,226,.3);background:rgba(238,234,226,.06)}
/* v2: the River floor at lower strength on the three process photos (never the pending boxes) */
[data-direction="dir-d"] .how__photo{position:relative;overflow:hidden}
[data-direction="dir-d"] .how__photo:not(.how__photo--pending)::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(var(--d-river-rgb),.32) 0,rgba(var(--d-river-rgb),0) 40%)}
[data-direction="dir-d"] main .how__title{margin-top:20px;max-width:none;font-size:var(--d-h3);line-height:1.1;text-align:left}
[data-direction="dir-d"] .how__body{margin-top:10px;max-width:26.5em;font-size:var(--d-small);font-weight:400;line-height:1.5;text-align:left;color:var(--d-bone)}
@media (max-width:767.98px){
  [data-direction="dir-d"] .how__list{grid-template-columns:minmax(0,1fr);gap:48px}
  [data-direction="dir-d"] .how__item > .how__title{order:0;margin:20px 0 0}
  [data-direction="dir-d"] .how__photo{width:100%;aspect-ratio:4/3}
  [data-direction="dir-d"] .how__photo img{object-position:50% 0}
}

/* ---------------------------------------------------------------- promises: four lines set like a title sequence */
[data-direction="dir-d"] .promises{background:var(--d-river);text-align:left;padding-top:var(--d-section)}
/* the promises heading stays at B v1's full title scale ("the weighting of everything... blend really well together",
   TASTE.md); the caps lines below are the pop, under a normal-weight serif landmark like every other section */
[data-direction="dir-d"] :is(.promises,#promises) .section__title{max-width:16em;font-size:var(--d-title);line-height:.98;margin-bottom:clamp(24px,3vw,44px)}
[data-direction="dir-d"] .promises__list{grid-template-columns:minmax(0,1fr);gap:0;border-top:0}
[data-direction="dir-d"] .promise{display:grid;grid-template-columns:3.25rem minmax(0,1fr);align-items:baseline;justify-items:start;gap:0 clamp(12px,2vw,32px);
  padding:clamp(14px,1.6vw,22px) 0;border:0}
[data-direction="dir-d"] .promise + .promise{padding-left:0;border-left:0}
[data-direction="dir-d"] .promise__n{display:block;width:auto;height:auto;border-radius:0;background:none;box-shadow:none;
  font-family:var(--d-instrument-sans);font-size:var(--d-body);font-weight:400;letter-spacing:0;color:var(--d-steel);font-variant-numeric:tabular-nums}
/* Oct 28, Alok on these lines: "a little too bulky... a version that's a little more elegant, thinner" - 550 */
[data-direction="dir-d"] .promise__text{max-width:none;font-family:var(--d-big-shoulders);font-size:var(--d-seq);font-weight:550;line-height:.95;letter-spacing:.01em;
  text-transform:uppercase;text-wrap:balance}
@media (max-width:1023.98px){ [data-direction="dir-d"] .promises__list{grid-template-columns:minmax(0,1fr);row-gap:0} }
@media (max-width:519.98px){ [data-direction="dir-d"] .promise{grid-template-columns:2.25rem minmax(0,1fr)} }

/* ---------------------------------------------------------------- price: C's Bone band, the money line as a title card
   A short section, so it may pop (the brief: bold capitals for page openers, short lists and the end card): "Films
   from $5,000" in C v1's capitals, the day rate under it in B's sans, the link under that (no longer pinned far right) */
[data-direction="dir-d"] .band.price-band{border:0;padding-block:var(--d-section) clamp(56px,6.5vw,96px);text-align:left}
[data-direction="dir-d"] .price-band__inner{display:grid;grid-template-columns:minmax(0,1fr);gap:0;justify-items:start}
[data-direction="dir-d"] .price-band__line{font-family:var(--d-instrument-sans);font-weight:400;text-transform:none;letter-spacing:0;line-height:1.2;color:var(--d-river)}
[data-direction="dir-d"] .price-band__line > span:first-child{font-family:var(--d-big-shoulders);font-size:var(--d-card);font-weight:800;font-synthesis:none;line-height:.88;
  letter-spacing:.005em;text-transform:uppercase;font-variant-numeric:lining-nums}
/* Oct 28, Alok on the day rate under the big caps: "a bit too small in contrast to the big bold font above it";
   his canvas rule holds a sub-line to the display moment - 22 on phones up to 28 (the h3 step) from 960 px */
[data-direction="dir-d"] .price-band__line > span:last-child{margin-top:clamp(16px,1.8vw,24px);font-size:clamp(var(--d-lead),1rem + 1.25vw,var(--d-h3));font-variant-numeric:tabular-nums}
[data-direction="dir-d"] .price-band__link{margin-top:clamp(12px,1.6vw,24px);font-size:var(--d-body)}

/* ---------------------------------------------------------------- close: the question in the serif, the form on the same Bone */
[data-direction="dir-d"] .close--form{text-align:left;padding-block:var(--d-section)}
[data-direction="dir-d"] .band.price-band + .close--form{padding-top:clamp(56px,6.5vw,96px)}
[data-direction="dir-d"] main .close__heading{max-width:12em;margin-inline:0;font-family:var(--d-instrument-serif);font-size:var(--d-title);font-weight:400;
  font-synthesis:none;line-height:.98;letter-spacing:-.01em;text-transform:none;text-wrap:balance}
/* Oct 28, Alok on this paragraph: "this feels a bit too compact... maybe increase size and space by about 10%" */
[data-direction="dir-d"] .close--form .close__body{max-width:var(--d-measure);margin:clamp(22px,2.6vw,35px) 0 0;font-size:calc(var(--d-body) * 1.1);line-height:1.7;color:var(--d-river)}
/* the forms sit straight on their Bone band: no panel */
[data-direction="dir-d"] :is(.close__form,.page:not(.page--home) .contact__form){padding:0;background:transparent}
/* the preview note: an outline box, not a highlighter */
[data-direction="dir-d"] :is(.close__note,.page:not(.page--home) .preview-ribbon){border-radius:0;background:transparent;border:1px solid currentColor;
  font-family:var(--d-instrument-sans);font-size:var(--d-small);font-weight:500;color:inherit}
[data-direction="dir-d"] .close__note{margin-top:20px;padding:6px 10px}
[data-direction="dir-d"] .close__form{width:min(880px,100%);margin:clamp(36px,4vw,56px) 0 0}
/* fields: square, a River line, the sans inside, labels in sentence case */
[data-direction="dir-d"] :is(.close__form,.page:not(.page--home) .contact__form) .field{gap:6px;margin-bottom:22px}
[data-direction="dir-d"] :is(.close__form,.page:not(.page--home) .contact__form) .field__label{font-family:var(--d-instrument-sans);font-size:var(--d-small);font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--d-river)}
[data-direction="dir-d"] :is(.close__form,.page:not(.page--home) .contact__form) .field :is(input,select,textarea){min-height:48px;padding:10px 14px;
  border:1px solid var(--d-river);border-radius:0;background-color:transparent;font-family:var(--d-instrument-sans);font-size:var(--d-body);font-weight:400;line-height:1.4;color:var(--d-river);
  transition:border-color var(--d-d1) var(--d-ease-state),box-shadow var(--d-d1) var(--d-ease-state)}
[data-direction="dir-d"] :is(.close__form,.page:not(.page--home) .contact__form) .field .field__select{padding-right:44px}
[data-direction="dir-d"] .close__form .field textarea{min-height:140px}
[data-direction="dir-d"] :is(.close__form,.page:not(.page--home) .contact__form) .field :is(input,select,textarea):focus{border-color:var(--d-river);box-shadow:inset 0 0 0 1px var(--d-river);transition:none}
[data-direction="dir-d"] :is(.close__form,.page:not(.page--home) .contact__form) .field :is(input,select,textarea):focus-visible{outline:2px solid var(--d-river);outline-offset:2px;
  box-shadow:inset 0 0 0 1px var(--d-river),0 0 0 6px var(--d-bone)}
/* v2: the error appears only once the visitor has touched the field, fading in on blur (:focus above keeps it
   instant while typing); a 1 px line plus a 1 px inset keeps the layout identical (no 1-to-2 px border jump) */
[data-direction="dir-d"] :is(.close__form,.page:not(.page--home) .contact__form) .field :is(input,select,textarea):is(:user-invalid,[aria-invalid="true"]){
  border:1px solid var(--error);box-shadow:inset 0 0 0 1px var(--error)}
/* v2 fix (review): keyboard focus on an invalid field keeps its full halo (the invalid rule above would otherwise
   override the focus box-shadow, weakening the affordance on exactly the error fields); the border stays 1+1 px */
[data-direction="dir-d"] :is(.close__form,.page:not(.page--home) .contact__form) .field :is(input,select,textarea):is(:user-invalid,[aria-invalid="true"]):focus-visible{
  box-shadow:inset 0 0 0 1px var(--error),0 0 0 6px var(--d-bone)}
[data-direction="dir-d"] :is(.close__form,.page:not(.page--home) .contact__form) :is(.field__hint,.field__error,.form__noscript,.estimate-box__text,.form__msg){font-family:var(--d-instrument-sans);font-size:var(--d-small);font-weight:400}
[data-direction="dir-d"] :is(.close__form,.page:not(.page--home) .contact__form) .field__hint{color:var(--d-moss)}
[data-direction="dir-d"] :is(.close__form,.page:not(.page--home) .contact__form) .field__error{font-weight:600;color:var(--error)}
[data-direction="dir-d"] .close__form .form__check{align-items:flex-start;text-align:left}
[data-direction="dir-d"] .close__form .form__actions{justify-content:flex-start}
[data-direction="dir-d"] :is(.close__form,.page:not(.page--home) .contact__form) :is(.estimate-box,.form__summary){border-radius:0;background:transparent}
[data-direction="dir-d"] :is(.close__form,.page:not(.page--home) .contact__form) .estimate-box{border:1px solid var(--d-river)}
[data-direction="dir-d"] :is(.close__form,.page:not(.page--home) .contact__form) .form__summary{border:2px solid var(--error);color:var(--d-river)}
[data-direction="dir-d"] :is(.close__form,.page:not(.page--home) .contact__form) .estimate-box__label{font-family:var(--d-instrument-sans);font-size:var(--d-small);font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--d-moss)}
[data-direction="dir-d"] .close--form .hello{margin-top:clamp(36px,4vw,56px);font-size:var(--d-lead);font-weight:400}
@media (min-width:1024px){
  [data-direction="dir-d"] .close--form .inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:repeat(4,auto) 1fr;
    column-gap:clamp(48px,6vw,112px);align-items:start}
  [data-direction="dir-d"] .close--form .inner > *{grid-column:1}
  [data-direction="dir-d"] .close--form .close__form{grid-column:2;grid-row:1 / -1;width:auto;margin:0}
  [data-direction="dir-d"] .close--form .close__note{justify-self:start}
  /* the address after the form, where it comes in the reading order */
  [data-direction="dir-d"] .close--form .hello{grid-column:2;grid-row:6;margin-top:clamp(28px,3vw,40px)}
}

/* ---------------------------------------------------------------- footer: the end card, a bookend to the hero
   Every page closes on the name set exactly like the hero line (same face, size rule, leading and left edge), the
   way a film ends on its opening title: the hero stays the biggest type on the site, and on phones the name stacks in
   two lines like the hero's four. (C v1 stretched the name across the frame, 197 px at 1440; that is the option.) */
/* on black (B v1's footer, the end card of a film), so the page's last section and the footer never run together */
[data-direction="dir-d"] .site-footer{overflow-x:clip;background:var(--d-black);color:var(--d-bone);border-top:0;font-family:var(--d-instrument-sans);font-size:var(--d-small);font-weight:400;
  letter-spacing:0;padding:clamp(56px,7vw,112px) 0 calc(32px + env(safe-area-inset-bottom))}
[data-direction="dir-d"] .site-footer a{color:var(--d-bone)}
[data-direction="dir-d"] .site-footer a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
[data-direction="dir-d"] .site-footer__grid{align-items:start;grid-template-areas:"area nav" "email nav" "mark mark"}
@media (min-width:768px){ [data-direction="dir-d"] .site-footer__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,56px) clamp(40px,6vw,96px)} }
[data-direction="dir-d"] .site-footer__brand{display:contents}
[data-direction="dir-d"] .site-footer .wordmark--footer{grid-area:mark;display:block;min-height:0;margin-top:clamp(24px,4vw,64px);
  max-width:11.1em;font-family:var(--d-big-shoulders);font-size:var(--d-hero);font-weight:800;font-synthesis:none;line-height:.88;letter-spacing:.005em;
  text-transform:uppercase;white-space:normal;text-wrap:wrap;color:var(--d-bone)}
[data-direction="dir-d"] .site-footer__area{grid-area:area;max-width:30em;margin-top:0;font-size:var(--d-body);line-height:1.5;color:var(--d-bone)}
[data-direction="dir-d"] .site-footer__email{grid-area:email;align-self:end;margin-top:0;font-size:var(--d-body)}
[data-direction="dir-d"] .site-footer__email a{display:inline-block;padding-block:2px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
[data-direction="dir-d"] .site-footer__nav{grid-area:nav}
[data-direction="dir-d"] .site-footer__nav ul{grid-template-columns:repeat(2,max-content);gap:6px 56px}
[data-direction="dir-d"] .site-footer__nav a{display:inline-block;min-height:24px;padding-block:2px;font-family:var(--d-instrument-sans);font-size:var(--d-body);font-weight:500;letter-spacing:0;
  text-transform:none;line-height:1.5}
[data-direction="dir-d"] .site-footer__legal{margin-top:clamp(48px,6vw,88px);font-family:var(--d-instrument-sans);font-size:var(--d-fine);font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--d-steel)}
@media (max-width:767.98px){
  [data-direction="dir-d"] .site-footer__grid{grid-template-areas:"area" "email" "nav" "mark";gap:20px}
  [data-direction="dir-d"] .site-footer__nav{margin-top:20px}
  [data-direction="dir-d"] .site-footer__nav ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  [data-direction="dir-d"] .site-footer__nav a{font-size:var(--d-body)}
  [data-direction="dir-d"] .site-footer .wordmark--footer{margin-top:28px}
}
/* the hero's phone size, so "CINCINNATI / SOCIAL" stacks like "THE STORY IS / ALREADY THERE. ..." */
@media (max-width:519.98px){ [data-direction="dir-d"] .site-footer .wordmark--footer{max-width:none;font-size:calc((100vw - 2 * var(--pad-x)) / 5.95);line-height:.9} }
html.edit-map[data-direction="dir-d"] :is(.site-footer,.plate,.hero) [data-src]{outline-color:var(--d-tally)}

/* ================================================================ inner pages (the classic look's .page:not(.page--home)) */
[data-direction="dir-d"] .page:not(.page--home) main{background:var(--d-river)}
[data-direction="dir-d"] .page:not(.page--home) .section{padding-block:clamp(4rem,2rem + 5vw,7rem)}
[data-direction="dir-d"] .page:not(.page--home) .section--tight{padding-block:var(--space-tight)}
/* C's bands: the alternate (warm) sections on River-2, the closing band on River, the estimator and /contact on Bone */
[data-direction="dir-d"] .page:not(.page--home) .section--warm{background:var(--d-river-2);color:var(--d-bone)}
[data-direction="dir-d"] .page:not(.page--home) .section--deep{background:var(--d-river);color:var(--d-bone)}
[data-direction="dir-d"] .page:not(.page--home) .estimator-section{background:var(--d-bone);color:var(--d-river)}
/* two neighbours on one ground share one gap and a little more (B's rule); where the ground changes each keeps its
   full padding */
[data-direction="dir-d"] .page:not(.page--home) .section:not(.estimator-section,.section--warm,.contact) + .section:not(.estimator-section,.section--warm,.contact),
[data-direction="dir-d"] .page:not(.page--home) .section--warm:not(.estimator-section) + .section--warm:not(.estimator-section){padding-top:clamp(1.5rem,.75rem + 2vw,2.5rem)}
/* under a title card real air, so the capitals stand on their own and the first section doesn't read as part of the
   opener (classic zeroes this gap at (0,7,0); the doubled :not matches it, and this sheet loads later) */
[data-direction="dir-d"] .page:not(.page--home) .page-head + .section:not(.estimator-section):not(.section--tight){padding-top:clamp(1.75rem,-.5rem + 8.5vw,7.5rem)}
/* every #000 / #4a4a4a the classic inner pages set, back to the section's own ink */
[data-direction="dir-d"] .page:not(.page--home) :is(.page-head__title,.page-head .lead,.page-head .reply-promise,.cta,.cta__body,.film-head__outcome,
  .proof__figure figcaption,.facts__row dt,.faq__q,.est-legend,.est-result__flag,.contact__form .field__label,.contact__aside-title,
  .prose li,.table thead th,.story__label,.stage__title){color:inherit}
[data-direction="dir-d"] .page:not(.page--home) :is(.post-meta,.figure figcaption,.film-head__meta,.captions-note,.choice__hint,.contact__form .field__hint){color:var(--d-fg-2)}
[data-direction="dir-d"] .page:not(.page--home) .prose li::marker{color:var(--d-fg-2)}
[data-direction="dir-d"] .page:not(.page--home) .todo{border:1px dashed currentColor;background:rgba(238,234,226,.06);font-weight:400}
[data-direction="dir-d"] .page:not(.page--home) .cta .todo::before{color:var(--d-fg-2)}

/* page head: the H1 as a title card (C's capitals, a step under the hero), under the River strip */
[data-direction="dir-d"] .page:not(.page--home) .page-head{padding-top:calc(var(--header-h) + clamp(40px,7vw,120px));padding-bottom:clamp(36px,4vw,64px)}
[data-direction="dir-d"] .page:not(.page--home) .preview-ribbon + .page-head{padding-top:clamp(40px,7vw,120px)}
[data-direction="dir-d"] .page:not(.page--home) .page-head__title{max-width:14ch;font-family:var(--d-big-shoulders);font-size:var(--d-card);font-weight:800;font-synthesis:none;
  line-height:.88;letter-spacing:.005em;text-transform:uppercase;color:var(--d-bone);text-wrap:balance}
[data-direction="dir-d"] .page:not(.page--home) .page-head__title .todo{font:400 var(--d-body)/1.4 var(--d-instrument-sans);letter-spacing:0;text-transform:none}
/* a reader's larger default font must not push a one-word title card past a phone's edge: held to the column
   (no effect at default settings) */
[data-direction="dir-d"] .page:not(.page--home) .page-head__title{font-size:min(var(--d-card),calc((100vw - 2 * var(--pad-x)) / 6.2));overflow-wrap:break-word}
/* the address must be able to wrap when text is enlarged: on its own line it breaks only if it doesn't fit; inside a
   sentence it moves to the next line whole (an inline block) and breaks only if it is wider than the column */
[data-direction="dir-d"] :is(.cta__email,.contact__email,.menu__email,.site-footer__email,.hello) a,
[data-direction="dir-d"] .page:not(.page--home) main :is(.cta__email,.contact__email) a[href^="mailto:"]:not([href*="?"]){white-space:normal;overflow-wrap:anywhere}
[data-direction="dir-d"] .page main a[href^="mailto:"]:not([href*="?"]):not(:is(.cta__email,.contact__email,.hello) a){display:inline-block;max-width:100%;white-space:normal;overflow-wrap:anywhere}
[data-direction="dir-d"] :is(.close__form,.contact__form) .form__actions{flex-wrap:wrap}
[data-direction="dir-d"] .close__form .form__submit{min-width:min(9rem,100%)}
[data-direction="dir-d"] .page:not(.page--home) .contact__form .form__submit{min-width:min(10rem,100%)}
@media (max-width:767.98px){ [data-direction="dir-d"] .close__form .form__submit{min-width:min(12rem,100%)} }
@media (max-width:767.98px){ [data-direction="dir-d"] .page:not(.page--home) .page-head__title{line-height:.9} }
[data-direction="dir-d"] .page:not(.page--home) .page-head .lead,[data-direction="dir-d"] .page:not(.page--home) .page-head .reply-promise{
  max-width:26.5em;margin-top:clamp(20px,2.4vw,32px);font-family:var(--d-instrument-sans);font-size:var(--d-lead);font-style:normal;font-weight:400;line-height:1.45;color:var(--d-bone);text-wrap:pretty}
[data-direction="dir-d"] .page:not(.page--home) .page-head .reply-promise{max-width:var(--d-measure);font-size:var(--d-body);line-height:1.55}
/* About's intro is a paragraph, not a line: a full-size second voice under the capitals */
[data-direction="dir-d"] .page:not(.page--home) .page-head .lead.prose{max-width:30em;font-size:var(--d-lead);line-height:1.5}
[data-direction="dir-d"] .page:not(.page--home) .post-meta{font-family:var(--d-instrument-sans);font-size:var(--d-cap);font-weight:400;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 87}
/* journal posts and the privacy page open in the serif, not a title card (their H1s run 4 to 14 words) */
[data-direction="dir-d"] .page:not(.page--home) :is(.post__head .page-head__title,.page--privacy .page-head__title){max-width:20ch;font-family:var(--d-instrument-serif);
  font-size:clamp(2.5rem,1.4rem + 3.4vw,4.5rem);font-weight:400;line-height:1.02;letter-spacing:-.01em;text-transform:none}

/* titles and prose */
[data-direction="dir-d"] .page:not(.page--home) .section__title{max-width:16em;margin-bottom:clamp(24px,3vw,40px)}
[data-direction="dir-d"] .page:not(.page--home) .section__title--small{font-size:var(--d-h3);line-height:1.1}
[data-direction="dir-d"] .page:not(.page--home) .prose{max-width:var(--d-measure);overflow-wrap:break-word}
/* the post head, its picture and its body on one column (classic sizes .inner--prose.prose on its own measure) */
[data-direction="dir-d"] .page:not(.page--home) :is(.inner--prose,.inner--prose.prose){max-width:calc(var(--d-measure) + 2 * var(--pad-x))}
/* ... and on the site's one left edge, like every other page (privacy already is), not centred */
[data-direction="dir-d"] .page--post :is(.inner--prose,.inner--prose.prose){margin-left:max(0px,calc((100% - var(--frame-max)) / 2))}
[data-direction="dir-d"] .page:not(.page--home) .prose h2{margin-top:1.3em;font-size:clamp(2rem,1.4rem + 1.8vw,2.75rem);line-height:1.02}
[data-direction="dir-d"] .page:not(.page--home) .prose h3{margin-top:1.5em;font-size:var(--d-h3);line-height:1.1}
[data-direction="dir-d"] .page:not(.page--home) .prose h4{margin-top:1.5em;font-family:var(--d-instrument-sans);font-size:var(--d-body);font-weight:600;line-height:1.35;letter-spacing:0;text-transform:none}
/* a quote in a post: the serif, roman, its opening mark hung in the margin (the italic voice is reserved for
   people's spoken words - the plate, the proof quotes and "find it"; an author's own <em> inside still shows) */
[data-direction="dir-d"] .page:not(.page--home) .prose blockquote{padding-left:0;border-left:0;font-family:var(--d-instrument-serif);font-size:clamp(1.5rem,1.2rem + 1vw,2rem);
  font-style:normal;line-height:1.2;text-indent:-.4em}
[data-direction="dir-d"] .page:not(.page--home) :is(.post__body,.page--privacy .prose){line-height:1.6}
[data-direction="dir-d"] .page:not(.page--home) .more{margin-top:clamp(28px,3vw,40px);text-align:start;font-size:var(--d-body)}
/* Approach, About, Drone and "Smaller jobs": from 1100 px a section reads like a film credit, its title on the left and
   the words to its right (the grammar of the film page's story), so a page of text is one column of reading with its
   titles in the margin instead of a narrow stack against an empty right half. In the margin the title steps down to
   about 54 px (B's 86 px titles beside 18 px words made every section shout at once, the C problem on a text page);
   stacked layouts keep B's size. Not the promises (an accent), not the closing band, not About's photo. Drone's one
   example film joins the layout, so the page doesn't break pattern once. */
@media (min-width:1100px){
  [data-direction="dir-d"] .page:is(.page--approach,.page--about,.page--drone) main > .section:not(#promises,.cta,.about-photo) > .inner,
  [data-direction="dir-d"] .page--pricing main > #day-rates > .inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,96px);
    row-gap:0;align-items:start}
  [data-direction="dir-d"] .page:is(.page--approach,.page--about,.page--drone) main > .section:not(#promises,.cta,.about-photo) > .inner > *,
  [data-direction="dir-d"] .page--pricing main > #day-rates > .inner > *{grid-column:2;min-width:0;max-width:none}
  [data-direction="dir-d"] .page:is(.page--approach,.page--about,.page--drone) main > .section:not(#promises,.cta,.about-photo) > .inner > .section__title,
  [data-direction="dir-d"] .page--pricing main > #day-rates > .inner > .section__title{grid-column:1;grid-row:1 / span 8;margin:0;max-width:9em;
    font-size:var(--d-margin-title);line-height:1}
  /* the words start on the title's first line (its cap height, not its box top) */
  [data-direction="dir-d"] .page:is(.page--approach,.page--about,.page--drone) main > .section:not(#promises,.cta,.about-photo) > .inner > .section__title + *,
  [data-direction="dir-d"] .page--pricing main > #day-rates > .inner > .section__title + *{margin-top:var(--d-split-lead,.35rem)}
  [data-direction="dir-d"] .page:is(.page--approach,.page--about,.page--drone) main > .section:not(#promises,.cta,.about-photo) > .inner > :is(.prose,.day-rate){max-width:var(--d-measure)}
  [data-direction="dir-d"] .page--drone #examples .grid{grid-template-columns:minmax(0,1fr)}
}

/* the closing band: left, the line in the serif */
[data-direction="dir-d"] .page:not(.page--home) .cta,[data-direction="dir-d"] .page:not(.page--home) .section--warm + .cta{background:var(--d-river);color:var(--d-bone);text-align:left}
[data-direction="dir-d"] .page:not(.page--home) .cta__heading{max-width:14em;margin-inline:0;font-size:var(--d-title);line-height:.98}
[data-direction="dir-d"] .page:not(.page--home) .cta__body{max-width:var(--d-measure);margin:clamp(16px,2vw,24px) 0 0;font-size:var(--d-body);line-height:1.55}
[data-direction="dir-d"] .page:not(.page--home) .cta__email{font-family:var(--d-instrument-sans);font-size:var(--d-lead);font-weight:400}
[data-direction="dir-d"] .page:not(.page--home) .cta:not(:has(.cta__heading)){padding-block:clamp(48px,4vw,72px)}

/* preview ribbon, pending pictures, captions */
[data-direction="dir-d"] .page:not(.page--home) .preview-ribbon{color:var(--d-bone);border:0;border-bottom:1px solid var(--d-bone-16)}
[data-direction="dir-d"] .page:not(.page--home) :is(.about__photo--pending,.post__image--pending){background:rgba(238,234,226,.06);border:1px dashed rgba(238,234,226,.3);color:var(--d-bone)}
[data-direction="dir-d"] .page:not(.page--home) :is(.about__photo--pending,.post__image--pending) .todo{border-color:rgba(238,234,226,.45);background:transparent;color:var(--d-bone);font-weight:400}
[data-direction="dir-d"] .page:not(.page--home) .figure figcaption{font-family:var(--d-instrument-sans);font-size:var(--d-small);font-weight:400;font-variation-settings:"wdth" 87}

/* tables (procurement, drone facts): plain labels, tabular figures, rows ruled */
[data-direction="dir-d"] .page:not(.page--home) .table{font-size:var(--d-small);font-variant-numeric:tabular-nums}
[data-direction="dir-d"] .page:not(.page--home) .table thead th{font-family:var(--d-instrument-sans);font-size:var(--d-cap);font-weight:500;letter-spacing:0;text-transform:none;color:var(--d-steel)}
[data-direction="dir-d"] .page:not(.page--home) .table tbody th{font-weight:600}
[data-direction="dir-d"] .page:not(.page--home) .table td{font-weight:400}
[data-direction="dir-d"] .page:not(.page--home) .table :is(th,td){border-bottom-color:var(--d-bone-16)}

/* ---------------------------------------------------------------- watch page: credits under the title card, the film in black */
[data-direction="dir-d"] .page--film .page-head.film-head{padding-top:calc(var(--header-h) + clamp(28px,3.4vw,56px));padding-bottom:clamp(28px,3vw,48px)}
[data-direction="dir-d"] .page--film:not(.page--home) .film-head .page-head__title{max-width:16ch;font-size:min(var(--d-card-film),calc((100vw - 2 * var(--pad-x)) / 6.2));line-height:.9}
/* v2 fix (taste review): the composed title card already opens with the client's name, so the eyebrow above it
   reads as a catalog credit, not a second announcement - the credit voice at 16 px (it is a label, not supporting
   prose). Whether it should render at all on such films is a template question for Alok. */
[data-direction="dir-d"] .page:not(.page--home) .film-head .eyebrow{margin-bottom:16px;font-size:var(--d-small);font-weight:500;color:var(--d-steel);font-variation-settings:"wdth" 87}
[data-direction="dir-d"] .page:not(.page--home) .film-head__meta{margin-top:clamp(18px,2vw,28px);font-family:var(--d-instrument-sans);font-size:var(--d-body);font-weight:400;letter-spacing:0;
  text-transform:none;font-variant-numeric:tabular-nums;font-variation-settings:normal}
[data-direction="dir-d"] .page:not(.page--home) .film-head__outcome{max-width:26.5em;font-family:var(--d-instrument-sans);font-size:var(--d-lead);font-style:normal;font-weight:400;line-height:1.45}
[data-direction="dir-d"] .page:not(.page--home) .player-band{background:var(--d-black)}
@media (min-width:768px){ [data-direction="dir-d"] .page:not(.page--home) .player-band{padding-block:clamp(24px,3vw,48px)} }
[data-direction="dir-d"] .page:not(.page--home) .player-band__inner{max-width:calc(1280px + 2 * var(--pad-x))}
[data-direction="dir-d"] .page:not(.page--home) .player{background:var(--d-black)}
/* v2: the tally's playing bar carried to the watch page, the same job the tiles have (inert until the Stream SDK
   toggles .is-playing in the functionality phase) */
[data-direction="dir-d"] .page:not(.page--home) .player-band.is-playing .player{position:relative}
[data-direction="dir-d"] .page:not(.page--home) .player-band.is-playing .player::before{content:"";position:absolute;inset:0 0 auto 0;z-index:3;height:3px;background:var(--d-tally);pointer-events:none}
[data-direction="dir-d"] .page:not(.page--home) .captions-note{font-family:var(--d-instrument-sans);font-size:var(--d-small);font-style:normal;font-weight:400}
/* the story: the question at the left, the answer to its right, a rule over each part (it is read across) */
[data-direction="dir-d"] .page:not(.page--home) .story__inner{gap:clamp(36px,4vw,56px)}
[data-direction="dir-d"] .page:not(.page--home) .story__label{margin-bottom:12px;font-family:var(--d-instrument-serif);font-size:var(--d-h3);font-weight:400;line-height:1.1;
  letter-spacing:-.01em;text-transform:none}
@media (min-width:900px){
  [data-direction="dir-d"] .page:not(.page--home) .story__part{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(24px,3vw,48px);
    padding-top:16px;border-top:1px solid var(--d-bone-16)}
  [data-direction="dir-d"] .page:not(.page--home) .story__label{margin:0}
}
/* v2 fix (TASTE Oct 28 quote ruling): the proof quotes join the plate - one italic voice carries every spoken
   word on the site, juxtaposed against the bold caps world */
[data-direction="dir-d"] .page:not(.page--home) .proof__quote{font-family:var(--d-newsreader);font-size:clamp(2rem,1.4rem + 1.8vw,3rem);font-style:italic;font-weight:400;
  line-height:1.08;letter-spacing:-.01em;text-transform:none;text-indent:-.4em}
[data-direction="dir-d"] .page:not(.page--home) .proof__figure figcaption{font-family:var(--d-instrument-sans);font-size:var(--d-small);font-weight:600;letter-spacing:0;text-transform:none}
/* credits as credit rows, on the story's grid so the names sit on its text column */
[data-direction="dir-d"] .page:not(.page--home) .facts__list{max-width:none;border-top:1px solid var(--d-bone-16)}
[data-direction="dir-d"] .page:not(.page--home) .facts__row{grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 0;border-bottom:1px solid var(--d-bone-16)}
[data-direction="dir-d"] .page:not(.page--home) .facts__row dt{text-align:left;font-family:var(--d-instrument-sans);font-size:var(--d-cap);font-weight:400;letter-spacing:0;
  text-transform:none;line-height:1.4;color:var(--d-steel);font-variation-settings:"wdth" 87}
/* v2: the names are content, not labels - body size (Alok: "sometimes the secondary text is too small") */
[data-direction="dir-d"] .page:not(.page--home) .facts__row dd{font-family:var(--d-instrument-sans);font-size:var(--d-body);font-weight:600;letter-spacing:0;text-transform:none;line-height:1.45}
/* "Filmed and edited by Alok Karnik" is a whole credit in its dt (its dd is empty): the full line, in Bone */
[data-direction="dir-d"] .page:not(.page--home) .facts__row:has(> dd:empty) > dt{grid-column:1 / -1;text-align:left;font-size:var(--d-body);line-height:1.45;font-weight:600;color:var(--d-bone);font-variation-settings:normal}
@media (min-width:900px){
  [data-direction="dir-d"] .page:not(.page--home) .facts__row{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(24px,3vw,48px)}
}
[data-direction="dir-d"] .page:not(.page--home) .facts .section__title--small{margin-inline:0;text-align:left}
/* the transcript toggle: a small outline block */
[data-direction="dir-d"] .page:not(.page--home) .transcript summary{min-height:44px;padding:.6rem 1.1rem;font-family:var(--d-instrument-sans);font-size:var(--d-cap);font-weight:600;
  letter-spacing:0;text-transform:none;background:transparent;color:var(--d-bone);border:1px solid var(--d-bone-60);border-radius:0;
  transition:background-color var(--d-d1) var(--d-in),color var(--d-d1) var(--d-in)}
[data-direction="dir-d"] .page:not(.page--home) .transcript summary:hover{background:var(--d-bone);color:var(--d-river)}
[data-direction="dir-d"] .page:not(.page--home) .transcript__speaker{font-family:var(--d-instrument-sans);font-weight:600;letter-spacing:0;text-transform:none}
[data-direction="dir-d"] .page:not(.page--home) .next{background:var(--d-river-2)}
[data-direction="dir-d"] .page:not(.page--home) .next__label{margin:clamp(56px,6vw,88px) 0 24px;font-size:var(--d-h3)}
[data-direction="dir-d"] .page:not(.page--home) .next .more > span{display:block;margin-bottom:4px;font-size:var(--d-cap);font-weight:500;color:var(--d-steel);font-variation-settings:"wdth" 87}

/* ---------------------------------------------------------------- approach: stages, promises, FAQ, fit */
[data-direction="dir-d"] .page:not(.page--home) :is(.stages,.faq){border-top-color:var(--d-bone-16)}
[data-direction="dir-d"] .page:not(.page--home) :is(.stage,.faq__item){border-bottom-color:var(--d-bone-16)}
/* the stages are a real sequence, so their numbers stay: in the serif at the title's size and baseline, in Steel */
[data-direction="dir-d"] .page:not(.page--home) .stage{grid-template-columns:3.5rem minmax(0,1fr);gap:clamp(16px,3vw,44px);align-items:baseline}
[data-direction="dir-d"] .page:not(.page--home) .stage__num{font-family:var(--d-instrument-serif);font-size:var(--d-h3);font-weight:400;line-height:1.1;letter-spacing:0;
  font-variant-numeric:tabular-nums lining-nums;color:var(--d-steel)}
[data-direction="dir-d"] .page:not(.page--home) .stage__title{margin-bottom:12px;font-size:var(--d-h3);line-height:1.1}
[data-direction="dir-d"] .page:not(.page--home) .stage__body{max-width:var(--d-measure)}
@media (max-width:767.98px){ [data-direction="dir-d"] .page:not(.page--home) .stage{grid-template-columns:2.5rem minmax(0,1fr);gap:12px} }
[data-direction="dir-d"] .page:not(.page--home) #promises{text-align:left}
[data-direction="dir-d"] .page:not(.page--home) #promises :is(.section__title,.prose){margin-inline:0}
[data-direction="dir-d"] .page:not(.page--home) #promises .prose{margin-top:clamp(24px,3vw,40px)}
[data-direction="dir-d"] .page:not(.page--home) .day-rate{font-size:var(--d-lead);line-height:1.45}
/* in a column of body text (Approach, Drone) the day-rate sentence is body text too; on Pricing it is the band's only line */
[data-direction="dir-d"] .page:is(.page--approach,.page--drone) .day-rate{font-size:var(--d-body);line-height:1.55}
[data-direction="dir-d"] .page:not(.page--home) .day-rate__links{font-family:var(--d-instrument-sans);font-size:var(--d-small);font-weight:600;letter-spacing:0;text-transform:none}
[data-direction="dir-d"] .page:not(.page--home) .faq{max-width:48rem}
[data-direction="dir-d"] .page:not(.page--home) .faq__q{padding:20px 0;font-family:var(--d-instrument-sans);font-size:clamp(1.125rem,1rem + .4vw,1.375rem);font-weight:600;line-height:1.3;
  letter-spacing:0;text-transform:none}
[data-direction="dir-d"] .page:not(.page--home) .faq__q::after{font-family:var(--d-instrument-sans);font-size:1.5rem;font-weight:400;color:var(--d-steel)}
[data-direction="dir-d"] .page:not(.page--home) .faq__a{padding-bottom:28px}

/* ---------------------------------------------------------------- pricing: the estimator on Bone, the result on River */
[data-direction="dir-d"] .page:not(.page--home) :is(.est-legend,.contact__aside-title){font-family:var(--d-instrument-sans);font-size:var(--d-small);font-weight:600;letter-spacing:0;text-transform:none}
[data-direction="dir-d"] .page:not(.page--home) .est-legend{margin-bottom:12px}
[data-direction="dir-d"] .page:not(.page--home) .choice__body{padding:12px 16px;background:transparent;border:1px solid var(--d-river);border-radius:0;
  font-family:var(--d-instrument-sans);font-size:var(--d-small);font-weight:400;color:var(--d-river);transition:background-color var(--d-d1) var(--d-in),color var(--d-d1) var(--d-in)}
[data-direction="dir-d"] .page:not(.page--home) .choice--card .choice__body{border-radius:0}
[data-direction="dir-d"] .page:not(.page--home) .choice__label{font-family:var(--d-instrument-sans);font-size:var(--d-small);font-weight:600;letter-spacing:0;text-transform:none}
[data-direction="dir-d"] .page:not(.page--home) .choice__label::before{border:1px solid var(--d-river);border-radius:0;background:transparent}
/* every estimator choice is a radio (pick one): a round mark, the convention, not a square that reads as "pick several" */
[data-direction="dir-d"] .page:not(.page--home) .choice__input[type="radio"] + .choice__body .choice__label::before{border-radius:50%}
[data-direction="dir-d"] .page:not(.page--home) .choice__hint{font-size:var(--d-small)}
[data-direction="dir-d"] .page:not(.page--home) .choice:hover .choice__body{background:rgba(24,33,29,.06);border-color:var(--d-river)}
[data-direction="dir-d"] .page:not(.page--home) .choice__input:checked + .choice__body{background:var(--d-river);border-color:var(--d-river);color:var(--d-bone)}
[data-direction="dir-d"] .page:not(.page--home) .choice__input:checked + .choice__body .choice__label::before{background:var(--d-bone);border-color:var(--d-bone)}
[data-direction="dir-d"] .page:not(.page--home) .choice__input:checked + .choice__body .choice__hint{color:rgba(238,234,226,.8)}
[data-direction="dir-d"] .page:not(.page--home) .choice__input:focus-visible + .choice__body{outline:2px solid var(--d-river);outline-offset:2px;box-shadow:0 0 0 6px var(--d-bone)}
@media (max-width:519.98px){
  [data-direction="dir-d"] .page:not(.page--home) .choices:not(.choices--cards):has(> :nth-child(3)){grid-template-columns:minmax(0,1fr)}
}
[data-direction="dir-d"] .page:not(.page--home) .range__value{font-family:var(--d-instrument-sans);font-size:var(--d-small);font-weight:600;font-variant-numeric:tabular-nums}
/* the days slider drawn in the band's own ink: the browser's light-grey track all but vanished on Bone (1.04:1); a
   Moss track (5.98:1) and a square River thumb (13.74:1); the input keeps its 44 px height and the outline focus ring */
[data-direction="dir-d"] .page:not(.page--home) .range__input{-webkit-appearance:none;appearance:none;background:transparent}
[data-direction="dir-d"] .page:not(.page--home) .range__input::-webkit-slider-runnable-track{height:4px;background:var(--d-moss);border:0}
[data-direction="dir-d"] .page:not(.page--home) .range__input::-moz-range-track{height:4px;background:var(--d-moss);border:0}
[data-direction="dir-d"] .page:not(.page--home) .range__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-10px;border:0;border-radius:0;background:var(--d-river)}
[data-direction="dir-d"] .page:not(.page--home) .range__input::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:0;background:var(--d-river)}
@media (forced-colors:active){ [data-direction="dir-d"] .page:not(.page--home) .range__input{-webkit-appearance:auto;appearance:auto} }
[data-direction="dir-d"] .page:not(.page--home) .est-result.card{background:var(--d-river);color:var(--d-bone);border:0;border-radius:0;box-shadow:none;
  --d-fg:var(--d-bone);--d-fg-2:var(--d-steel);--d-ground:var(--d-river);--d-line:var(--d-bone-16);--d-ring:var(--d-tally);--d-halo:var(--d-river);
  --text:var(--d-bone);--text-muted:var(--d-steel);--surface:var(--d-river);--rule:var(--d-bone-16);--rule-strong:rgba(238,234,226,.45);--accent-ink:var(--d-tally);
  --btn-bg:var(--d-bone);--btn-ink:var(--d-river);color-scheme:dark}
[data-direction="dir-d"] .page:not(.page--home) .est-result :focus-visible{outline-color:var(--d-tally);box-shadow:0 0 0 6px var(--d-river)}
[data-direction="dir-d"] .page:not(.page--home) .est-result{top:calc(var(--cl-header-solid) + 24px)}
[data-direction="dir-d"] .page:not(.page--home) .est-result__flag{font-family:var(--d-instrument-sans);font-size:var(--d-cap);font-weight:400;letter-spacing:0;text-transform:none;color:var(--d-steel);font-variation-settings:"wdth" 87}
[data-direction="dir-d"] .page:not(.page--home) .est-summary{font-family:var(--d-instrument-sans);font-size:var(--d-body);font-weight:400;line-height:1.5}
[data-direction="dir-d"] .page:not(.page--home) .est-result :is(.est-num,.est-to){font-family:var(--d-instrument-serif);font-size:clamp(2.5rem,1.8rem + 1.8vw,3.5rem);font-weight:400;line-height:1.05;letter-spacing:-.01em}
/* the range on its own line under the sentence ("... typically land at" / "$8,500 – $11,500"); classic's .est-to__run
   keeps "– $11,500" together, so a break can only fall before the dash, and only when the line doesn't fit (with
   enlarged text spacing it must be able to break, or the phone page scrolls sideways) */
[data-direction="dir-d"] .page:not(.page--home) .est-result .est-summary__text > .est-num:first-of-type{display:inline}
[data-direction="dir-d"] .page:not(.page--home) .est-result .est-summary__text > .est-num:first-of-type::before{content:"\A";white-space:pre}
@media (max-width:1023.98px){ [data-direction="dir-d"] .page:not(.page--home) .estimator{grid-template-columns:minmax(0,1fr)} }
[data-direction="dir-d"] .page:not(.page--home) :is(.est-floor-note,.est-note,.est-share,.est-static__floor){font-family:var(--d-instrument-sans);font-size:var(--d-small);font-weight:400}
[data-direction="dir-d"] .page:not(.page--home) .est-share{color:var(--d-steel)}
[data-direction="dir-d"] .page:not(.page--home) .est-share__pct{font-weight:600}
[data-direction="dir-d"] .page:not(.page--home) .est-bar__seg--travel{stroke:var(--d-steel)}
[data-direction="dir-d"] .page:not(.page--home) :is(.est-included,.est-changes,.est-larger,.est-similar){border-top-color:var(--d-bone-16);font-size:var(--d-small);font-weight:400}
[data-direction="dir-d"] .page:not(.page--home) .est-actions .btn{font-size:var(--d-small);font-weight:600;letter-spacing:0;text-transform:none}
[data-direction="dir-d"] .page:not(.page--home) :is(.est-static__row,.est-static__list){border-color:var(--d-line)}
[data-direction="dir-d"] .page:not(.page--home) .est-static__label{font-family:var(--d-instrument-sans);font-size:var(--d-small);font-weight:600}

/* ---------------------------------------------------------------- journal: titles in the serif, spacing between posts */
[data-direction="dir-d"] .page:not(.page--home) .post-list{max-width:48rem;border-top:0}
/* from 1100 px the list runs in two columns across the frame, so the page is composed, not a left strip */
@media (min-width:1100px){
  [data-direction="dir-d"] .page:not(.page--home) .post-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,5vw,96px);max-width:none}
}
[data-direction="dir-d"] .page:not(.page--home) .post-card{padding:clamp(24px,3vw,40px) 0;border-bottom:0}
[data-direction="dir-d"] .page:not(.page--home) .post-card__title{font-size:clamp(1.75rem,1.4rem + 1vw,2.25rem);line-height:1.05}
[data-direction="dir-d"] .page:not(.page--home) .post-card__excerpt{max-width:var(--d-measure);color:var(--d-bone);font-size:var(--d-small);font-weight:400}
[data-direction="dir-d"] .page:not(.page--home) .progress{height:3px;background:var(--d-bone)}

/* ---------------------------------------------------------------- contact: the whole section on Bone */
[data-direction="dir-d"] .page:not(.page--home) .contact__form .field textarea{min-height:180px}
[data-direction="dir-d"] .page:not(.page--home) .contact__aside{font-family:var(--d-instrument-sans);font-size:var(--d-small);font-weight:400}
[data-direction="dir-d"] .page:not(.page--home) .contact__email{font-family:var(--d-instrument-sans);font-size:var(--d-lead);font-weight:400}

/* ---------------------------------------------------------------- 404: the way out in the serif */
[data-direction="dir-d"] .page:not(.page--home) .link-list a{font-family:var(--d-instrument-serif);font-size:var(--d-h3);font-weight:400;line-height:1.1;letter-spacing:-.01em;text-transform:none}

/* ---------------------------------------------------------------- forced colours, more contrast, reduced motion, print */
@media (forced-colors:active){
  [data-direction="dir-d"] :is(.hero__toggle,.nav__cta,.btn){border:1px solid transparent}
  [data-direction="dir-d"] .tile__play::before{border:1px solid transparent}
  /* v2: forced colours ignore the transparent resting underline, so rest links go bare (hover/current out-rank this) */
  [data-direction="dir-d"] .site-header .nav__link{text-decoration:none}
}
@media (prefers-contrast:more){
  :root[data-direction="dir-d"]{--d-steel:var(--d-bone);--d-bone-16:var(--d-steel-0);--d-bone-60:var(--d-bone)}
  [data-direction="dir-d"] :is(.close--form,.band.price-band,.estimator-section,.page:not(.page--home) .contact){--d-moss:var(--d-river);--d-river-20:var(--d-river)}
}
@media (prefers-reduced-motion:reduce){
  [data-direction="dir-d"] *,[data-direction="dir-d"] *::before,[data-direction="dir-d"] *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}
@media print{
  [data-direction="dir-d"] body,[data-direction="dir-d"] .page:not(.page--home) main,[data-direction="dir-d"] .site-footer{background:var(--d-white);color:var(--d-black)}
  [data-direction="dir-d"] .site-footer a,[data-direction="dir-d"] .site-footer .wordmark--footer,[data-direction="dir-d"] .site-footer__legal{color:var(--d-black)}
}

/* ================================================================ v2.1 (Oct 28): Alok's canvas rulings the fix stage
   missed, and the readability study's committed scale. Kept as one block so each move can be read or reverted alone.
   TASTE.md has the rulings verbatim. */

/* readability (research/2026-10-28-reading-sizes-mobile-first.md, committed scale): 18 px body sat at the legibility
   floor on a laptop (0.20 deg x-height) and the dark ground costs most at small sizes; nothing on River under 15 px.
   Same selector as the token block, later in the file, so it wins */
:root[data-direction="dir-d"]{
  --d-lead:clamp(1.5rem,1.39rem + .449vw,1.75rem);       /* 24 to 28 */
  --d-body:clamp(1.25rem,1.195rem + .225vw,1.375rem);    /* 20 to 22 */
  --d-small:clamp(1.0625rem,1.035rem + .112vw,1.125rem); /* 17 to 18 */
  --d-cap:clamp(.9375rem,.91rem + .112vw,1rem);          /* 15 to 16 */
  --d-fine:clamp(.9375rem,.91rem + .112vw,1rem);         /* 15 to 16 */
  --d-measure:38rem}                                     /* keeps the prose near 66 characters at 22 px */
[data-direction="dir-d"] body{line-height:1.6}
/* the hero's first screen is the C v1 frame Alok praised, and its sub-line is still an open variant: hold it */
[data-direction="dir-d"] .hero__eyebrow{font-size:1.125rem}

/* section titles (Oct 28, on The work: "how do we get closer to that 'juxtaposition' without losing the elegance?"):
   bold caps at the elegant weight the promises proved, not C's 800; sizes stay where the existing rules set them.
   The serif stays load-bearing where caps already speak (the promises' own lines) and for the ask */
[data-direction="dir-d"] main .section__title:not(.section__title--small){font-family:var(--d-big-shoulders);font-weight:580;font-synthesis:none;
  text-transform:uppercase;letter-spacing:.01em;line-height:.95}
[data-direction="dir-d"] :is(.promises,#promises) .section__title,
[data-direction="dir-d"] main .close__heading{font-family:var(--d-instrument-serif);font-weight:400;text-transform:none;letter-spacing:-.01em;line-height:.98}

/* film story titles (Oct 28: "about 20% bigger and bolder... the juxtaposition of the big bold font, with the body
   font"): 28 px regular serif becomes 34 px caps in the display voice; Instrument Serif has no bold cut */
[data-direction="dir-d"] .page:not(.page--home) .story__label{font-family:var(--d-big-shoulders);font-size:clamp(1.75rem,1.2rem + 1.2vw,2.125rem);
  font-weight:650;font-synthesis:none;line-height:1;letter-spacing:.01em;text-transform:uppercase}

/* "How we work" under the promises (Oct 28: "getting lost"): the day-line law, a small line under a display moment
   holds its own, so it takes the sub-line scale with clear air above it */
[data-direction="dir-d"] .promises .more{margin-top:clamp(40px,5vw,72px)}
/* v2.1 fix: the older go-there rule's :is(.founder,#work,.how,.promises) carries #work's ID weight (1,2,1), so a plain
   .promises selector (0,3,1) lost to it; :is(.promises,#promises) ties that weight and, being later, wins */
[data-direction="dir-d"] :is(.promises,#promises) .more a{font-size:clamp(var(--d-lead),1rem + 1.25vw,1.75rem);line-height:1.3}

/* ---------------------------------------------------------------- v2.1 fixes (Oct 28 review, three lenses) */
/* the first screen holds: the bigger --d-small / --d-cap tokens were also resizing the nav, its "Write to us" box,
   the hero buttons and Menu, so they keep their pre-v2.1 sizes (the header is shared by every page) and the header
   keeps its old line air (the eyebrow is already held above) */
[data-direction="dir-d"] .site-header{line-height:1.55}
[data-direction="dir-d"] .nav__link,[data-direction="dir-d"] .site-header .nav__link{font-size:1rem}
[data-direction="dir-d"] .site-header .nav__cta,[data-direction="dir-d"] .site-header--over-hero:not(.is-solid) .nav__cta{font-size:.9375rem}
[data-direction="dir-d"] :is(.menu-toggle,.menu-link){font-size:1rem}
[data-direction="dir-d"] .hero__actions .btn{font-size:1rem}
@media (min-width:768px) and (max-width:1099.98px){
  [data-direction="dir-d"] .nav__link,[data-direction="dir-d"] .site-header .nav__link{font-size:.9375rem}
}

/* Who this is for (/approach): two 333 px columns ran ~31 characters a line at 22 px; one column of reading under the
   title (or beside it in the margin layout), the two statements kept apart by a clear gap */
[data-direction="dir-d"] .page--approach #fit .fit{grid-template-columns:minmax(0,1fr);gap:clamp(28px,3vw,40px);max-width:var(--d-measure)}

/* the four steps on phones: the number and the title share the first row, the words take the full width under them
   (the 2.5 rem indent left a 298 px column, ~28 characters a line). Title margin 0: the body's own .9em top margin
   gives the same 18 px the collapsed margins gave */
@media (max-width:767.98px){
  [data-direction="dir-d"] .page:not(.page--home) .stage{row-gap:0}
  [data-direction="dir-d"] .page:not(.page--home) .stage__body{display:contents}
  [data-direction="dir-d"] .page:not(.page--home) .stage__title{grid-column:2;margin-bottom:0}
  [data-direction="dir-d"] .page:not(.page--home) .stage__body > :not(.stage__title){grid-column:1 / -1;max-width:var(--d-measure)}
}

/* Home close body: the tenth-bigger size only where its column is wide (768-1023 full width, 1280 up); on phones and
   in the 1024-1279 two-column band it runs at body size (20-22 px, still above the 20 px lever) with the same 1.7 air */
@media (max-width:767.98px),(min-width:1024px) and (max-width:1279.98px){
  [data-direction="dir-d"] .close--form .close__body{font-size:var(--d-body)}
}

/* Films that compound sub-line: the 18em cap wrapped it to 4 lines of ~31 characters; 25em gives ~43 at 28 px */
[data-direction="dir-d"] #how .sublead{max-width:25em}

/* small safe follow-ups from the same review */
/* the film page's closing ask is the ask: serif, like every other page's .cta__heading (v2.1's caps rule caught it) */
[data-direction="dir-d"] .page:not(.page--home) main #next-title{font-family:var(--d-instrument-serif);font-weight:400;text-transform:none;letter-spacing:-.01em;line-height:.98}
/* story labels: the phone floor lifts 28 to 32 px so phones also get the ~20% bigger the ruling asked for */
[data-direction="dir-d"] .page:not(.page--home) .story__label{font-size:clamp(2rem,1.2rem + 1.2vw,2.125rem)}
/* a picked estimator card's hint: full Bone (the study: never dim text under 24 px) */
[data-direction="dir-d"] .page:not(.page--home) .choice__input:checked + .choice__body .choice__hint{color:var(--d-bone)}
/* the bigger scale made the sticky estimate card ~95px taller: on short laptop screens (1280x720, 1024x768) its
   "Send us the details" / PDF buttons fell below the fold for as long as it stuck, so it only sticks where it fits */
@media (min-width:768px) and (max-height:899.98px){ [data-direction="dir-d"] .page:not(.page--home) .est-result{position:static} }