/* ==========================================================================
   Ronnie Robinson & Company
   Design system: "The Page" — the site is set like a screenplay.
   Display serif echoes the R/R monogram. Courier Prime (John August's
   screenplay face) carries slug lines and metadata. One brass accent.
   ========================================================================== */

:root{
  /* ground */
  --ink:        #0B0A09;
  --ink-2:      #131110;
  --ink-3:      #1C1917;
  --ink-line:   rgba(242,237,227,.13);
  --ink-line-2: rgba(242,237,227,.07);

  /* paper */
  --paper:      #F4F0E7;
  --paper-2:    #CFC8BA;
  --paper-3:    #8C867A;

  /* accent — brass. marquee, awards, the light on a slate. */
  --brass:      #C8A14A;
  --brass-hi:   #E0BC69;
  --brass-dim:  rgba(200,161,74,.16);

  /* type — a screenplay has exactly one face: 12pt Courier. Courier Prime
     (drawn by a screenwriter, for screenplays) therefore carries every
     structural level here. The sans is only for running body copy, where
     monospace would cost real reading speed. No display serif: a didone
     would be decorating the subject rather than being it. */
  --mono:  "Courier Prime", "Courier New", Courier, monospace;
  --sans:  "Instrument Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* measure */
  --page:   1280px;
  --narrow: 760px;
  --gutter: clamp(20px, 5vw, 64px);

  --r: 2px;

  /* ONE scale. Previously 17 sizes were in use, including 12.8/13/13.76 and
     15.2/15.36/16 — three pairs no reader can tell apart. */
  --t-xs:   .6875rem;  /* 11 — tags, chips, captions */
  --t-sm:   .8125rem;  /* 13 — slug lines, nav, meta, prices */
  --t-base: 1rem;      /* 16 — body */
  --t-lede: 1.25rem;   /* 20 — lede */
  --t-h3:   clamp(1.25rem, 1.9vw, 1.5rem);
  --t-h2:   clamp(1.6rem, 3.1vw, 2.375rem);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  color:var(--paper);
  font-family:var(--sans);
  font-size:var(--t-base);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

/* faint film grain so the black is never flat.
   Tiled on the body background with the alpha baked into the SVG — a fixed,
   blend-mode overlay layer looks identical but forces the page into a
   composited layer that breaks screenshot capture once scrolled. */
body{
  background-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

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

:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--paper); color:var(--ink); padding:12px 20px;
  font-family:var(--mono); font-size:var(--t-sm); letter-spacing:.14em; text-transform:uppercase;
}
.skip:focus{ left:var(--gutter); top:12px; }

/* --------------------------------------------------------------- layout */
.wrap{ width:100%; max-width:var(--page); margin-inline:auto; padding-inline:var(--gutter); }
.narrow{ max-width:var(--narrow); }

section{ position:relative; }

/* ------------------------------------------------- script page geometry */
/* Not decoration. These are the real indents of a 12pt Courier page, and
   the page uses them to lay out its own content. */
:root{
  --dlg-indent: 16.7%;   /* 2.5" */
  --dlg-measure: 58.3%;  /* 3.5" */
  --paren-indent: 26.7%; /* 3.1" */
  --char-indent: 36.7%;  /* 3.7" */
}
.scene{ max-width:62ch; }

.dialogue{ margin:clamp(24px,4vh,42px) 0; font-family:var(--mono); }
.dialogue .char{
  margin-left:var(--char-indent); font-size:var(--t-sm); letter-spacing:.16em;
  text-transform:uppercase; color:var(--paper-2); margin-bottom:.35rem;
}
.dialogue .paren{
  margin-left:var(--paren-indent); font-size:var(--t-sm); letter-spacing:.06em;
  color:var(--paper-3); margin-bottom:.35rem;
}
.dialogue .line{
  margin-left:var(--dlg-indent); width:var(--dlg-measure);
  font-size:clamp(1rem,1.5vw,1.15rem); line-height:1.6; color:var(--paper);
}
@media (max-width:720px){
  .dialogue .char{ margin-left:22%; }
  .dialogue .paren{ margin-left:14%; }
  .dialogue .line{ margin-left:0; width:100%; }
}

/* a script page carries its number top right, followed by a full stop */
.block[data-pg]::before{
  content:attr(data-pg) ".";
  position:absolute; top:clamp(20px,3vh,34px); right:var(--gutter);
  font-family:var(--mono); font-size:var(--t-sm); letter-spacing:.1em;
  color:var(--paper-3);
}
/* and (CONTINUED) where the scene runs over the break */
.contd{
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.18em;
  text-transform:uppercase; color:var(--paper-3); text-align:right;
  margin:clamp(24px,4vh,40px) 0 0; padding-right:2px;
}
/* clear the sticky header when an anchor lands */
section[id]{ scroll-margin-top:92px; }

/* ----------------------------------------------------------------- type */
h1,h2,h3,h4{ margin:0; font-weight:400; }

.display{
  font-family:var(--mono);
  font-weight:700;
  text-transform:uppercase;
  line-height:1;
  letter-spacing:.005em;
  color:var(--paper);
  font-size:clamp(2.3rem, 5.4vw, 4.75rem);
}
/* the line a title page sets under the title */
.teaches{
  font-family:var(--mono); font-size:var(--t-base);
  letter-spacing:.28em; text-transform:uppercase; color:var(--paper-2);
  margin:1.1rem 0 0;
}
/* a credit line, not a four-up stat module with hairline dividers */
.credit{
  font-family:var(--mono); font-size:var(--t-sm); letter-spacing:.11em;
  text-transform:uppercase; color:var(--paper-3); line-height:2;
  border-top:1px solid var(--ink-line); padding-top:1.1rem; margin:0;
}
.credit b{ color:var(--paper-2); font-weight:400; }

.h2{
  font-family:var(--mono); font-weight:700; text-transform:uppercase;
  font-size:var(--t-h2); line-height:1.16; letter-spacing:.01em;
}
.h3{
  font-family:var(--mono); font-weight:700; text-transform:uppercase;
  font-size:var(--t-h3); line-height:1.25; letter-spacing:.015em;
}

.lede{
  font-size:var(--t-lede);
  line-height:1.55;
  color:var(--paper-2);
  max-width:46ch;
}
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

/* slug line — INT. / EXT. scene heading, the section marker */
.slug{
  font-family:var(--mono);
  font-size:var(--t-sm);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brass);
  display:flex; align-items:center; gap:14px;
  margin:0 0 1.6rem;
}
.slug::after{ content:""; height:1px; flex:1; background:var(--ink-line); }
.slug .n{ color:var(--paper-3); letter-spacing:.14em; }

.lede .mono{
  font-size:1.15em; letter-spacing:.03em; color:var(--paper);
  text-transform:none; box-shadow:inset 0 -1px 0 rgba(200,161,74,.45);
}
.mono{
  font-family:var(--mono);
  font-size:var(--t-sm);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--paper-3);
}

/* transition marker — CUT TO: right aligned, as in a script */
.transition{
  font-family:var(--mono); font-size:var(--t-sm); letter-spacing:.24em;
  text-transform:uppercase; color:var(--paper-3);
  text-align:right; padding:0 0 2.2rem;
}

/* --------------------------------------------------------------- header */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(11,10,9,.82);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--ink-line-2);
}
.hdr-in{ display:flex; align-items:center; gap:30px; height:74px; }
.brand{ display:flex; align-items:center; gap:13px; margin-right:auto; padding:6px 0; min-height:44px; }
/* logo ships as dark-on-white jpeg: invert it, then screen-blend the
   now-black field away so only the monogram sits on the ground */
.brand img{ width:36px; height:36px; object-fit:contain; filter:invert(1); mix-blend-mode:screen; }
.brand b{
  font-family:var(--mono); font-weight:700; font-size:var(--t-sm);
  letter-spacing:.2em; text-transform:uppercase; color:var(--paper-2); line-height:1.3;
}
.nav{ display:flex; gap:30px; align-items:center; }
.nav a{
  font-family:var(--mono); font-size:var(--t-sm); letter-spacing:.07em; text-transform:uppercase;
  color:var(--paper-2); transition:color .18s;
}
.nav a:hover,.nav a[aria-current="page"]{ color:var(--brass); }
/* .nav a (0-1-1) outranks .btn-p (0-1-0), which was painting the header
   CTA's label paper-on-brass at 1.46:1. Match the selector weight. */
.nav a.btn-p, .nav a.btn-p:hover{ color:var(--ink); }
.burger{ display:none; background:none; border:0; color:var(--paper); cursor:pointer;
  width:48px; height:48px; place-items:center; margin-right:-12px; }
.burger span{ display:block; width:21px; height:1.5px; background:currentColor;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), opacity .18s; }
.burger span + span{ margin-top:5.5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* the open panel is fixed while the document stayed scrollable, and tapping
   off it did nothing */
.scrim{
  position:fixed; inset:0; z-index:90; background:rgba(11,10,9,.6);
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.scrim.on{ opacity:1; pointer-events:auto; }
body.nav-open{ overflow:hidden; }

/* --------------------------------------------------------------- button */
.btn{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--mono); font-size:var(--t-sm); font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
  padding:15px 26px; border-radius:var(--r); border:1px solid transparent;
  cursor:pointer; transition:background .2s, color .2s, border-color .2s, transform .2s;
  white-space:nowrap;
}
/* paper on black, 17.4:1 — brass is reserved for slug lines now */
.btn-p{ background:var(--paper); color:var(--ink); }
.btn-p:hover{ background:#fff; transform:translateY(-1px); }
.btn-g{ border-color:var(--ink-line); color:var(--paper); }
.btn-g:hover{ border-color:var(--brass); color:var(--brass); }
.btn .ar{ display:none; }
.btn-sm{ padding:11px 18px; }

/* ----------------------------------------------------------------- hero */
/* hero has to clear the fold: at 900px tall it was measuring 956 and
   guillotining the facts row */
.hero{ position:relative; padding:clamp(36px,5vh,60px) 0 clamp(40px,6vh,72px); }
.hero-grid{
  display:grid; grid-template-columns:minmax(0,494px) minmax(0,1fr); gap:clamp(30px,4vw,64px);
  align-items:center;
}
.fade-in{
  font-family:var(--mono); font-size:var(--t-sm); letter-spacing:.28em;
  text-transform:uppercase; color:var(--brass); margin-bottom:1.5rem;
}
.hero h1{ margin-bottom:1.1rem; }
.hero .lede{ margin-bottom:1.7rem; }
.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:26px; margin-bottom:1.9rem; }
.hero-cta .btn-g{ border:0; padding:15px 0; box-shadow:inset 0 -1px 0 var(--ink-line); }
.hero-cta .btn-g:hover{ box-shadow:inset 0 -1px 0 var(--brass); }


/* film-still treatment of the one real photograph */
/* The source is 960x780 — landscape, 1.23:1. Frame it at 5/4 so almost
   nothing is cropped, and bleed it off the right edge for the area a hero
   portrait needs. Cropping this into a 4/5 portrait threw away a third of
   the frame and left it soft. */
/* bleed exactly to the viewport edge, never past it: half the leftover
   page margin plus the gutter. object-position can only compose the image
   if the box is not already wider than the screen. */
.still{
  position:relative;
  margin-right:calc(-1 * (max(0px, (100vw - var(--page)) / 2) + var(--gutter)));
}
.still-frame{
  position:relative; height:min(66vh, 600px); overflow:hidden;
  border-radius:var(--r) 0 0 var(--r); background:var(--ink-2);
}
.still-frame img{
  width:100%; height:100%; object-fit:cover; object-position:64% 28%;
  /* a lighter hand than the old wash — the separation is done by the
     mask below, not by flattening the whole frame */
  filter:contrast(1.1) saturate(.72) brightness(.9);
}
/* pull the blown windows either side of him down, and seat the frame in
   the page rather than on top of it */
.still-frame::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(64% 72% at 52% 40%, rgba(11,10,9,0) 30%, rgba(11,10,9,.58) 72%, rgba(11,10,9,.93) 100%),
    linear-gradient(to top, rgba(11,10,9,.9) 0%, rgba(11,10,9,0) 40%),
    linear-gradient(to right, rgba(11,10,9,.72) 0%, rgba(11,10,9,0) 26%);
}
/* the frame bleeds past the viewport, so a space-between caption throws its
   right-hand half off-screen. Anchor both to the left instead. */
.still-cap{
  position:absolute; left:22px; bottom:18px; z-index:2;
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.16em;
  text-transform:uppercase; color:var(--paper-2);
  display:flex; align-items:baseline; gap:11px;
}
.still-cap span:last-child{ color:var(--brass); }
/* separator only when there is something to separate */
.still-cap span + span::before{ content:"\00B7"; margin-right:11px; color:var(--paper-3); }
/* sprocket ticks down the edge — film, not decoration for its own sake */
.still::before{
  content:""; position:absolute; top:0; bottom:0; left:-13px; width:5px;
  background-image:repeating-linear-gradient(to bottom, var(--ink-line) 0 12px, transparent 12px 26px);
}
@media (max-width:860px){ .still::before{ display:none; } }

/* ---------------------------------------------------------------- block */
.block{ padding:clamp(52px,8vh,116px) 0; }
.block-t{ border-top:1px solid var(--ink-line-2); }

.two{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,90px); align-items:start; }
.two-a{ grid-template-columns:.85fr 1.15fr; }

/* ------------------------------------------------------- learn: 3 cards */
.learn{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink-line); border:1px solid var(--ink-line); }
.learn article{ background:var(--ink); padding:clamp(26px,3vw,40px); transition:background .25s; }
.learn article:hover{ background:var(--ink-2); }
.learn .num{
  font-family:var(--mono); font-size:var(--t-sm); letter-spacing:.14em; color:var(--brass);
  display:block; margin-bottom:1.5rem; text-transform:uppercase;
}
.learn h3{ margin-bottom:.8rem; }
.learn p{ font-size:var(--t-base); color:var(--paper-2); line-height:1.6; }

/* ------------------------------------------------------- course ladder */
.ladder{ border-top:1px solid var(--ink-line); }
.course{
  display:grid; grid-template-columns:62px 1fr auto; gap:clamp(18px,3vw,44px);
  align-items:baseline; padding:clamp(26px,3.4vw,40px) 0;
  border-bottom:1px solid var(--ink-line); position:relative;
}
.course .no{
  font-family:var(--mono); font-size:var(--t-sm); letter-spacing:.14em; color:var(--paper-3);
  padding-top:.5rem; transition:color .25s;
}
.course:hover .no{ color:var(--brass); }
.course h3{ margin-bottom:.5rem; transition:color .25s; }
.course:hover h3{ color:var(--brass-hi); }
.course p{ font-size:var(--t-base); color:var(--paper-2); max-width:52ch; margin:0; }
.course .meta{ margin-top:.75rem; display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.price{
  font-family:var(--mono); font-size:var(--t-sm); letter-spacing:.07em;
  color:var(--paper); white-space:nowrap; text-align:right; padding-top:.35rem;
}
.price.free{ color:var(--paper-2); letter-spacing:.2em; text-transform:uppercase; font-size:var(--t-sm); }

.tag{
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.17em; text-transform:uppercase;
  padding:4px 9px; border:1px solid var(--ink-line); color:var(--paper-3); border-radius:var(--r);
}
.tag-b{ border-color:var(--brass-dim); color:var(--brass); background:var(--brass-dim); }

/* ------------------------------------------------------------- evidence */
.ev{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px); }
.ev figure{ margin:0; }
.ev .sheet{
  position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--paper);
  border-radius:var(--r); box-shadow:0 26px 60px -30px rgba(0,0,0,.95);
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.ev figure:nth-child(1) .sheet{ transform:rotate(-1.1deg); }
.ev figure:nth-child(3) .sheet{ transform:rotate(1deg); }
.ev figure:hover .sheet{ transform:rotate(0deg) translateY(-6px); }
.ev .sheet img{ width:100%; height:100%; object-fit:cover; object-position:50% 0; }
.ev figcaption{
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-3); margin-top:14px; line-height:1.6;
}

/* ------------------------------------------------------------ workshops */
.shop{ background:var(--ink-2); border:1px solid var(--ink-line); border-radius:var(--r); padding:clamp(28px,4vw,52px); }
.shop ul{ list-style:none; margin:1.6rem 0 0; padding:0; }
.shop li{
  padding:15px 0; border-top:1px solid var(--ink-line); display:flex; gap:16px;
  font-size:var(--t-base); color:var(--paper-2); align-items:baseline;
}
.shop li::before{ content:"—"; color:var(--brass); font-family:var(--mono); flex:none; }

/* ----------------------------------------------------------- gap marker */
.gap{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.15em; text-transform:uppercase;
  color:var(--brass); border:1px dashed rgba(200,161,74,.38); background:rgba(200,161,74,.05);
  padding:6px 11px; border-radius:var(--r); line-height:1.5;
}
.gap{ align-items:flex-start; }
.gap::before{ content:"[ ]"; opacity:.65; margin-top:1px; }

/* ---------------------------------------------------------------- quote */
/* dialogue in a screenplay is Courier. This is Ronnie speaking. */
.pull{
  font-family:var(--mono); font-size:clamp(1.15rem,2.2vw,1.65rem); line-height:1.5;
  color:var(--paper); letter-spacing:.005em; margin:0;
}
.pull .fade{ color:var(--brass); font-style:italic; }

/* --------------------------------------------------------------- footer */
.ftr{ border-top:1px solid var(--ink-line); padding:clamp(52px,8vh,88px) 0 40px; }
.ftr-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(24px,4vw,52px); }
.ftr h4{
  font-family:var(--mono); font-size:var(--t-sm); letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper-3); margin-bottom:1.2rem;
}
.ftr ul{ list-style:none; margin:0; padding:0; }
.ftr li{ margin-bottom:.7rem; }
.ftr li a{ font-size:var(--t-base); color:var(--paper-2); transition:color .18s; }
.ftr li a:hover{ color:var(--brass); }
.ftr-btm{
  margin-top:clamp(36px,6vh,64px); padding-top:26px; border-top:1px solid var(--ink-line-2);
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
}
.ftr-btm p{ margin:0; font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper-3); }

/* ------------------------------------------------------------- reveal */
.rise{ opacity:1; }
.js .rise{ opacity:0; transform:translateY(18px); transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1); }
.js .rise.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js .rise{ opacity:1; transform:none; transition:none; } }

/* --------------------------------------------------------- responsive */
@media (max-width:1040px){
  .ftr-grid{ grid-template-columns:1fr 1fr; }
  .learn{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .hdr-in{ height:64px; }
  .nav{
    position:fixed; inset:64px 0 auto; flex-direction:column; align-items:flex-start;
    gap:0; background:var(--ink-2); border-bottom:1px solid var(--ink-line);
    padding:8px var(--gutter) 22px; display:none;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:15px 0; width:100%; border-bottom:1px solid var(--ink-line-2); font-size:1rem; }
  .nav a.btn{ font-size:.8rem; }
  .nav .btn{ margin-top:16px; width:100%; justify-content:center; border-bottom:0; }
  .burger{ display:grid; }
  .hero-grid, .two, .two-a{ grid-template-columns:1fr; }
  .hero-grid{ gap:34px; }
  .still{ margin-right:calc(var(--gutter) * -1); }
  .still-frame{ border-radius:var(--r) 0 0 var(--r); }
  .still-frame{ height:auto; aspect-ratio:5/4; }
  .still-frame img{ object-position:50% 20%; }
  .course{ grid-template-columns:44px 1fr; row-gap:10px; }
  .price{ grid-column:2; text-align:left; padding-top:0; }
  .ev{ grid-template-columns:1fr; max-width:420px; }
  .ev figure .sheet{ transform:none; }
}
@media (max-width:560px){
  /* .slug was a flex row: "Sc. 01" and the slug text wrapped as independent
     items, stacking the scene number as "SC." / "01" on 6 of 7 slugs */
  .slug{ display:block; }
  .slug::after{ display:none; }
  .slug .n{ display:inline; white-space:nowrap; margin-right:12px; }
  /* the footer stopped collapsing at two 155px columns */
  .ftr-grid{ grid-template-columns:1fr; gap:34px; }
}


/* --------------------------------------------------------- sticky CTA */
/* phones only: the bar keeps a buy button in the thumb zone for the whole
   scroll. Ten viewports of page with no persistent CTA loses on its own. */
.sticky-cta{ display:none; }
@media (max-width:860px){
  .sticky-cta{
    display:block; position:fixed; inset:auto 0 0; z-index:150;
    background:rgba(19,17,16,.94); backdrop-filter:saturate(160%) blur(12px);
    border-top:1px solid var(--ink-line);
    padding:11px var(--gutter) calc(11px + env(safe-area-inset-bottom, 0px));
    transform:translateY(115%); transition:transform .26s cubic-bezier(.2,.7,.3,1);
  }
  .sticky-cta.show{ transform:translateY(0); }
  .sticky-cta .btn{ width:100%; justify-content:center; min-height:48px; }
  .sticky-cta .note{
    display:block; font-family:var(--mono); font-size:var(--t-xs);
    letter-spacing:.14em; text-transform:uppercase; color:var(--paper-3);
    text-align:center; margin-bottom:8px;
  }
  body{ padding-bottom:calc(104px + env(safe-area-inset-bottom, 0px)); }
  .ftr li a{ display:block; padding:12px 0; }
  .ftr li{ margin-bottom:0; }
}


/* ------------------------------------------------------------ enquiry */
/* Every CTA resolved to another CTA. This is the first and only place on
   the site a visitor can actually reach him. */
.enq{
  background:var(--ink-2); border:1px solid var(--ink-line); border-radius:var(--r);
  padding:clamp(22px,3vw,34px);
}
.enq h3{
  font-family:var(--mono); font-weight:700; text-transform:uppercase;
  font-size:var(--t-sm); letter-spacing:.18em; color:var(--brass); margin:0 0 1.4rem;
}
.enq label{
  display:block; font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.15em;
  text-transform:uppercase; color:var(--paper-3); margin-bottom:7px;
}
.enq .f{ margin-bottom:1.1rem; }
.enq input, .enq textarea, .enq select{
  width:100%; background:var(--ink); color:var(--paper);
  border:1px solid var(--ink-line); border-radius:var(--r);
  padding:13px 14px; font-family:var(--sans); font-size:var(--t-base);
  min-height:48px; transition:border-color .18s;
}
.enq textarea{ resize:vertical; min-height:104px; line-height:1.55; }
.enq input:focus, .enq textarea:focus, .enq select:focus{ border-color:var(--brass); outline:none; }
.enq .btn{ width:100%; justify-content:center; min-height:50px; }
.enq .said{
  margin:1rem 0 0; font-family:var(--mono); font-size:var(--t-sm);
  color:var(--brass); line-height:1.6;
}


/* the sticky bar earns its place on desktop too — the catalogue runs
   4,000px past the last visible CTA otherwise */
@media (min-width:861px){
  .sticky-cta{
    display:block; position:fixed; inset:auto 0 0; z-index:150; min-height:64px;
    background:rgba(19,17,16,.94); backdrop-filter:saturate(160%) blur(12px);
    border-top:1px solid var(--ink-line); padding:12px var(--gutter);
    transform:translateY(115%); transition:transform .26s cubic-bezier(.2,.7,.3,1);
  }
  .sticky-cta.show{ transform:translateY(0); }
  .sticky-cta .in{
    max-width:var(--page); margin-inline:auto; display:flex; align-items:center;
    justify-content:space-between; gap:24px;
  }
  .sticky-cta .note{
    font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.16em;
    text-transform:uppercase; color:var(--paper-3); margin:0;
  }
  body{ padding-bottom:0; }
}
@media (max-width:860px){ .sticky-cta .in{ display:block; } }