/* ==========================================================================
   CENTRAL COAST LENS
   base.css — structure, layout, type, motion.  PALETTE-AGNOSTIC.

   Every colour in this file comes from a custom property defined in
   palette.css ("Cool Linen").  Nothing here hard-codes a colour, so a
   re-colour later touches that one file and nothing else.

   TOKEN CONTRACT — palette.css defines all of these:
     --bg --bg-2 --bg-3            page ground, recessed panel, hover panel
     --line --line-soft --line-strong
     --fg --fg-2 --fg-3            primary / secondary / tertiary ink
     --accent --accent-ink --accent-soft
     --on-dark --on-dark-2         text sitting on top of a photograph
     --scrim-top --scrim-mid --scrim-bot     hero gradient stops
     --scrim-side                  left-edge wash that protects hero text
     --panel-scrim-a --panel-scrim-b         booking band gradient
     --tile-veil --tile-veil-hover           overlay on gallery tiles
     --shadow-lift
   ========================================================================== */

/* ---------------------------------------------------------------- tokens
   Non-colour tokens live here; they do not change between palettes. */
:root{
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Inter','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  /* the owner's price sheet - used only by the pricing cards */
  --sheet-serif:'Bodoni Moda','Bodoni 72',Didot,'Times New Roman',serif;
  --sheet-sans:'Poppins','Helvetica Neue',Arial,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.22,.61,.36,1);

  --pad:clamp(20px,5vw,72px);
  --maxw:1560px;
  --nav-h:104px;
  --gap:clamp(12px,1.5vw,22px);

  /* Selected work: ONE fixed tile height, widths vary. */
  --work-h:clamp(220px,25vw,330px);

  color-scheme:light;
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-size:clamp(15px,.55vw + 13.4px,17px);
  line-height:1.6;
  letter-spacing:.005em;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color .35s var(--ease-io),color .35s var(--ease-io);
}

/* ------------------------------------------------------------ shared type
   Block, bold lettering: Archivo 800 at tight tracking is the heavy face.
   Fine detail drops to 500/600 but never below 15px. */
.h-display{
  font-family:var(--display);
  font-weight:800;
  line-height:.9;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.h1{font-size:clamp(2.9rem,8.4vw,8.2rem)}
.h2{font-size:clamp(2.2rem,4.8vw,4.6rem)}
.h3{font-size:clamp(1.35rem,1.9vw,2.05rem);letter-spacing:-.028em;line-height:1.04}

.eyebrow{
  font-family:var(--mono);font-size:.71rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent-ink);
}
.eyebrow--muted{color:var(--fg-3)}
.meta{
  font-family:var(--mono);font-size:.73rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);
}
.lede{
  font-size:clamp(1.02rem,.5vw + .92rem,1.2rem);
  line-height:1.62;color:var(--fg-2);max-width:56ch;
}

:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:12px;top:-100px;z-index:300;
  background:var(--accent-ink);color:var(--bg);
  padding:10px 18px;font-family:var(--mono);font-size:.75rem;
  letter-spacing:.12em;text-transform:uppercase;
}
.skip:focus{top:12px}

.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* ------------------------------------------------------------------ links */
.ln{
  position:relative;display:inline-block;
  border-bottom:1px solid var(--line-strong);padding-bottom:2px;
  transition:border-color .3s var(--ease-io),color .3s var(--ease-io);
}
.ln:hover{border-color:var(--accent-ink);color:var(--accent-ink)}

/* ---------------------------------------------------------------- buttons */
.btn{
  --_bg:transparent;--_fg:var(--fg);--_bd:var(--line-strong);
  display:inline-flex;align-items:center;gap:12px;
  background:var(--_bg);color:var(--_fg);
  border:1px solid var(--_bd);
  padding:14px 24px;
  font-family:var(--mono);font-size:.76rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;white-space:nowrap;
  transition:background-color .3s var(--ease-io),color .3s var(--ease-io),
             border-color .3s var(--ease-io),transform .3s var(--ease-io);
}
.btn:hover{transform:translateY(-1px)}
.btn__arrow{transition:transform .3s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

.btn--solid{--_bg:var(--fg);--_fg:var(--bg);--_bd:var(--fg)}
.btn--solid:hover{--_bg:var(--accent-ink);--_bd:var(--accent-ink)}
.btn--accent{--_bg:var(--accent-ink);--_fg:var(--bg);--_bd:var(--accent-ink)}

/* on top of a photograph */
.btn--ghost{--_fg:var(--on-dark);--_bd:rgba(255,255,255,.55)}
.btn--ghost:hover{--_bg:rgba(255,255,255,.12);--_bd:rgba(255,255,255,.9)}
.btn--light{--_bg:var(--on-dark);--_fg:#141414;--_bd:var(--on-dark)}
.btn--light:hover{--_bg:#fff;--_bd:#fff}

/* ======================================================================= NAV
   Transparent over the hero (logo knocked out to white by a filter), solid
   once it sticks.  The flip is driven by the .is-stuck class. */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:120;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background-color .35s var(--ease-io),border-color .35s var(--ease-io);
  border-bottom:1px solid transparent;
}
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0));
  opacity:1;transition:opacity .35s var(--ease-io);
  pointer-events:none;
}
.nav.is-stuck{background:var(--bg);border-bottom-color:var(--line)}
.nav.is-stuck::before{opacity:0}

.nav__in{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

.nav__logo{display:flex;align-items:center;flex:0 0 auto}
.nav__logo img{
  height:clamp(50px,6.2vw,76px);width:auto;
  /* knocked out to white while the bar floats over the hero photograph */
  filter:brightness(0) invert(1);
  transition:filter .35s var(--ease-io);
}
.nav.is-stuck .nav__logo img{filter:none}

.nav__links{display:flex;align-items:center;gap:clamp(18px,2vw,34px)}
.nav__links a{
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-dark);opacity:.86;
  transition:opacity .25s var(--ease-io),color .35s var(--ease-io);
}
.nav__links a:hover{opacity:1}
.nav.is-stuck .nav__links a{color:var(--fg-2)}
.nav.is-stuck .nav__links a:hover{color:var(--accent-ink)}

.nav__cta{display:flex;align-items:center;gap:14px}
.nav__cta .btn{padding:11px 18px;font-size:.72rem}
.nav.is-stuck .btn--ghost{--_fg:var(--fg);--_bd:var(--line-strong)}
.nav.is-stuck .btn--ghost:hover{--_bg:var(--fg);--_fg:var(--bg);--_bd:var(--fg)}

.nav__toggle{
  display:none;width:42px;height:42px;background:none;
  border:1px solid rgba(255,255,255,.5);
  align-items:center;justify-content:center;cursor:pointer;
}
.nav.is-stuck .nav__toggle{border-color:var(--line-strong)}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{
  display:block;width:16px;height:1.5px;background:var(--on-dark);
  transition:.3s var(--ease);
}
.nav.is-stuck .nav__toggle span,
.nav.is-stuck .nav__toggle span::before,
.nav.is-stuck .nav__toggle span::after{background:var(--fg)}
.nav__toggle span::before,.nav__toggle span::after{content:"";position:relative}
.nav__toggle span::before{top:-5px}
.nav__toggle span::after{top:3.5px}
.nav.is-open .nav__toggle span{background:transparent}
.nav.is-open .nav__toggle span::before{top:1.5px;transform:rotate(45deg)}
.nav.is-open .nav__toggle span::after{top:0;transform:rotate(-45deg)}

.nav__panel{
  position:fixed;inset:var(--nav-h) 0 auto 0;z-index:119;
  background:var(--bg);border-bottom:1px solid var(--line);
  padding:8px var(--pad) 26px;display:none;
}
.nav__panel.is-open{display:block}
.nav__panel a{
  display:block;padding:15px 0;border-bottom:1px solid var(--line-soft);
  font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:-.02em;
}

.nav__progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--accent-ink);transition:width .1s linear;
}

/* ===================================================================== HERO
   White page, but a DARK gradient over the photograph so it reads as shadow
   rather than a wash-out.  Text sits in the deepest part of the gradient. */
.hero{
  position:relative;min-height:min(100svh,940px);
  display:flex;align-items:flex-end;
  padding-block:calc(var(--nav-h) + 40px) clamp(40px,6vh,80px);
  overflow:hidden;background:#0d0d0d;
}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--scrim-side) 0%,rgba(0,0,0,0) 62%),
    linear-gradient(180deg,var(--scrim-top) 0%,var(--scrim-mid) 48%,var(--scrim-bot) 100%);
}
.hero__body{position:relative;z-index:2;color:var(--on-dark)}

.hero__slate{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:26px}
.hero__slate .meta{color:var(--on-dark-2)}
.dot{width:3px;height:3px;border-radius:50%;background:var(--on-dark-2);opacity:.7}

.hero h1{
  color:var(--on-dark);
  text-shadow:0 2px 26px rgba(0,0,0,.42);
  max-width:16ch;
}
.hero__foot{
  margin-top:clamp(26px,4vh,46px);
  display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:30px;
}
.hero__foot p{
  max-width:46ch;color:var(--on-dark-2);
  text-shadow:0 1px 16px rgba(0,0,0,.5);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}

.scrollcue{margin-top:34px;display:inline-flex;align-items:center;gap:10px;color:var(--on-dark-2)}
.scrollcue i{
  display:block;width:1px;height:26px;background:currentColor;opacity:.6;
  animation:cue 2.4s var(--ease-io) infinite;transform-origin:top;
}
@keyframes cue{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* ============================================================ CREDENTIALS */
.creds{border-block:1px solid var(--line);background:var(--bg-2)}
.creds ul{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.creds li{
  padding:clamp(24px,3vw,40px) clamp(18px,2vw,34px);
  border-left:1px solid var(--line);
}
.creds li:first-child{border-left:0}
.creds b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1rem,1.1vw,1.18rem);letter-spacing:-.02em;margin-bottom:8px;
}
.creds span{display:block;font-size:.9rem;line-height:1.5;color:var(--fg-3);max-width:34ch}

/* ================================================================ SECTIONS
   Section rhythm is deliberately tight: the air between two sections is
   roughly half what a gallery site would normally use, so the page reads as
   one continuous run of work rather than a stack of separate pages. */
.sect{padding-block:clamp(32px,4.5vw,70px)}
.sect--panel{background:var(--bg-2);border-block:1px solid var(--line)}

.sect__idx{
  display:flex;justify-content:space-between;gap:20px;
  padding-bottom:12px;margin-bottom:clamp(20px,2.6vw,34px);
  border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-2);
}
.sect__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,70px);align-items:end;
  margin-bottom:clamp(24px,3.2vw,42px);
}

/* ========================================================= SELECTED WORK
   Uniform tile HEIGHT (--work-h), varying widths across a 12-column grid.
   Every caption doubles as the way into the delivered folder. */
.work{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.work__item{grid-column:span 4}
.work__item.w-5{grid-column:span 5}
.work__item.w-4{grid-column:span 4}
.work__item.w-3{grid-column:span 3}

.frame{position:relative;height:var(--work-h);overflow:hidden;background:var(--bg-3)}
.frame img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease),filter .5s var(--ease-io);
}
.frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--tile-veil);
  transition:background .45s var(--ease-io);
}
.work__link:hover .frame img{transform:scale(1.045)}
.work__link:hover .frame::after{background:var(--tile-veil-hover)}

.work__cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:12px}
.work__cap b{font-family:var(--display);font-weight:700;font-size:.98rem;letter-spacing:-.015em}
.work__cap span{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3);text-align:right;
}
.work__open{
  display:block;padding-top:6px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-ink);
  opacity:0;transform:translateY(-3px);
  transition:opacity .3s var(--ease-io),transform .3s var(--ease-io);
}
.work__link:hover .work__open,
.work__link:focus-visible .work__open{opacity:1;transform:none}

.work__more{
  margin-top:clamp(28px,4vw,52px);display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:20px;
}

/* ============================================================== THE FOLDER
   "What actually lands in your folder" — the delivery manifest. */
.folder{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(28px,4.5vw,76px);align-items:center;
}
.folder__shot{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--bg-3)}
.folder__shot img{width:100%;height:100%;object-fit:cover}
.folder__shot figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 22px 16px;
  background:linear-gradient(180deg,rgba(0,0,0,0),var(--scrim-bot));
  display:flex;justify-content:space-between;gap:14px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-dark);
}
.manifest{margin-top:clamp(22px,3vw,38px);border-top:1px solid var(--line)}
.manifest li{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;
  gap:16px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--line-soft);
}
.manifest .n{font-family:var(--mono);font-size:.7rem;color:var(--fg-3);letter-spacing:.08em}
.manifest h3{font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.015em}
.manifest p{font-size:.9rem;color:var(--fg-3);line-height:1.5;margin-top:3px}
.manifest .fmt{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3);text-align:right;white-space:nowrap;
}

/* ================================================================ COVERAGE
   Single frame on the LEFT that swaps image as you move down the list on the
   right.  Every row is a link into its own (future) page. */
.cover{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(26px,4vw,72px);align-items:start;
}
.cover__previewWrap{position:sticky;top:calc(var(--nav-h) + 30px)}
.cover__preview{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-3)}
.cover__preview img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.03);
  transition:opacity .55s var(--ease-io),transform 1.1s var(--ease);
}
.cover__preview img.is-on{opacity:1;transform:none}
.cover__preview::after{
  content:"";position:absolute;inset:0;pointer-events:none;background:var(--tile-veil);
}
.cover__tag{
  position:absolute;left:0;bottom:0;z-index:2;
  padding:26px 18px 14px;width:100%;
  background:linear-gradient(180deg,rgba(0,0,0,0),var(--scrim-bot));
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark);
}

.cover__list{border-top:1px solid var(--line)}
.cover__row{border-bottom:1px solid var(--line)}
.cover__row a{
  display:grid;grid-template-columns:52px minmax(0,1fr) auto;
  gap:clamp(14px,1.6vw,28px);align-items:center;
  padding:clamp(18px,2.2vw,30px) 4px;
  transition:background-color .35s var(--ease-io),padding-left .35s var(--ease);
}
.cover__row a:hover,.cover__row a:focus-visible{background:var(--bg-3);padding-left:14px}
.cover__num{font-family:var(--mono);font-size:.72rem;color:var(--fg-3);letter-spacing:.08em}
.cover__body h3{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.2rem,1.7vw,1.7rem);letter-spacing:-.028em;line-height:1.05;
}
.cover__body p{font-size:.92rem;color:var(--fg-3);line-height:1.5;margin-top:6px;max-width:48ch}
.cover__meta{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-3);text-align:right;line-height:1.6;white-space:nowrap;
}
.cover__go{
  display:inline-block;margin-top:6px;color:var(--accent-ink);
  opacity:0;transform:translateX(-4px);
  transition:opacity .3s var(--ease-io),transform .3s var(--ease-io);
}
.cover__row a:hover .cover__go,
.cover__row a:focus-visible .cover__go{opacity:1;transform:none}

.cover__note{
  margin-top:clamp(20px,2.4vw,32px);display:flex;flex-wrap:wrap;
  gap:20px;align-items:center;justify-content:space-between;
}
/* This paragraph explains the one thing the page will not put in a table —
   the price — so it has to be comfortably readable.  It was set as .meta
   (small, tracked-out, tertiary grey) and disappeared.  Sentence case,
   secondary ink, normal body size. */
.cover__note p{
  flex:1 1 42ch;max-width:62ch;font-size:.98rem;line-height:1.65;
  color:var(--fg-2);letter-spacing:0;text-transform:none;
}

/* ================================================================= PROCESS */
.process{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,76px);align-items:start;
}
.steps{margin-top:clamp(22px,3vw,38px)}
.steps li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;
  padding:22px 0;border-top:1px solid var(--line);
}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps b{
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);padding-top:5px;
}
.steps h3{font-family:var(--display);font-weight:700;font-size:1.12rem;letter-spacing:-.02em}
.steps p{margin-top:7px;color:var(--fg-3);font-size:.94rem;line-height:1.58;max-width:50ch}

.process__shots{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.process__shots figure{
  position:relative;overflow:hidden;height:clamp(170px,19vw,250px);background:var(--bg-3);
}
.process__shots img{width:100%;height:100%;object-fit:cover}
.process__shots figure::after{content:"";position:absolute;inset:0;background:var(--tile-veil)}
.process__shots figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:26px 14px 11px;
  background:linear-gradient(180deg,rgba(0,0,0,0),var(--scrim-bot));
  display:flex;justify-content:space-between;gap:10px;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-dark);
}

/* ================================================================ BOOKING */
.book{position:relative;overflow:hidden;background:#101010}
.book__media{position:absolute;inset:0}
.book__media img{width:100%;height:100%;object-fit:cover}
.book__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,var(--panel-scrim-a),var(--panel-scrim-b));
}
.book .shell{position:relative;z-index:2}
.book .sect__idx{color:var(--on-dark-2);border-bottom-color:rgba(255,255,255,.22)}
.book__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,76px);align-items:start;color:var(--on-dark);
}
.book__copy h2{color:var(--on-dark);text-shadow:0 2px 22px rgba(0,0,0,.4)}
.book__copy .lede{color:var(--on-dark-2)}
.book__copy .eyebrow{color:var(--on-dark-2)}
.book__points{margin-top:26px}
.book__points li{
  padding:13px 0;border-top:1px solid rgba(255,255,255,.2);
  color:var(--on-dark-2);font-size:.94rem;
}
.book__points li:last-child{border-bottom:1px solid rgba(255,255,255,.2)}

.book__panel{
  background:var(--bg);color:var(--fg);
  padding:clamp(24px,3vw,42px);
  box-shadow:var(--shadow-lift);
}
.book__panel h3{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.03em}
.book__panel p.small{margin-top:10px;color:var(--fg-3);font-size:.93rem;line-height:1.55}

/* the slot the Aryeo scheduler drops into, if it turns out to embed */
.embed-slot{
  margin-top:22px;border:1px dashed var(--line-strong);
  background:var(--bg-2);min-height:240px;
  display:grid;place-items:center;text-align:center;padding:26px;
}
.embed-slot p{max-width:38ch;color:var(--fg-3);font-size:.9rem;line-height:1.55}
.embed-slot .meta{display:block;margin-bottom:10px}

.book__actions{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}
.book__fine{margin-top:16px;font-size:.82rem;color:var(--fg-3);line-height:1.5}

/* ================================================================= PRICING
   Laid out after the owner's own price sheet, which she chose. It is the
   one part of the page that does not use the site's type: the cards borrow
   the sheet's Bodoni and Poppins (Bauer Bodoni on the sheet; Bodoni Moda is
   the nearest free cut), its centred caps, and its three tinted columns,
   colours taken from the sheet itself (see palette.css).

   The section sits on white rather than the usual panel grey, because the
   tints are too pale to survive on grey - on the sheet they sit on white.

   Delivery is pushed to the foot of each column (margin-top:auto), so
   however many inclusions a card has, the three footers share one line
   across the row - as they do on her sheet. */
#pricing{background:var(--tier-ground)}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

.tiers{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.1vw,16px);align-items:stretch;
  margin-top:clamp(24px,2.6vw,38px);
}

.tier{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--_tint,var(--bg));
  padding:clamp(8px,.8vw,12px) clamp(8px,.8vw,12px) clamp(26px,2.4vw,36px);
  font-family:var(--sheet-sans);color:#000;
}
.tier--mini{--_tint:var(--tier-mini)}
.tier--basic{--_tint:var(--tier-basic)}
.tier--premium{--_tint:var(--tier-premium)}

.tier__photo{width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--bg-3)}
.tier__photo img{width:100%;height:100%;object-fit:cover;display:block}

.tier__name{
  margin-top:clamp(14px,1.4vw,22px);
  font-family:var(--sheet-serif);font-weight:700;
  font-size:clamp(2.3rem,3.4vw,3.3rem);line-height:1;letter-spacing:-.01em;
}
.tier__tag{
  margin-top:clamp(8px,.8vw,12px);
  font-size:clamp(.74rem,.9vw,.86rem);text-transform:uppercase;letter-spacing:.01em;
}
.tier__price{
  margin-top:clamp(6px,.7vw,10px);
  font-family:var(--sheet-serif);font-weight:400;
  font-size:clamp(2.2rem,3.2vw,3.1rem);line-height:1.05;
}

.tier__list{
  margin-top:clamp(16px,1.6vw,24px);padding-inline:8px;
  display:grid;gap:clamp(14px,1.3vw,20px);
}
.tier__list li{
  font-size:clamp(.78rem,.95vw,.9rem);line-height:1.4;
  text-transform:uppercase;letter-spacing:.01em;
}

.tier__deliver{
  margin-top:auto;padding-top:clamp(26px,2.4vw,36px);
  font-weight:700;font-size:clamp(.95rem,1.15vw,1.1rem);
  text-transform:uppercase;
}

.tier__cta{margin-top:clamp(14px,1.3vw,18px);width:100%;padding-inline:clamp(12px,1.6vw,24px)}
.tier__cta .btn{width:100%;justify-content:space-between}

/* ------------------------------------------------------------ service kit
   The icon row from the bottom of her sheet: big black glyphs, a short
   label in caps underneath, no rules between them. */
.kit{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:12px;margin-top:clamp(34px,3.6vw,56px);
}
.kit li{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;color:#000;
  font-family:var(--sheet-sans);font-size:clamp(.72rem,.9vw,.86rem);
  line-height:1.25;text-transform:uppercase;
}
.kit__ico{width:clamp(48px,4.8vw,70px);height:clamp(48px,4.8vw,70px)}

/* -------------------------------------------------------- order handoff
   The two ways into Aryeo. Kept together and away from the cards so the
   choice is "new job" or "existing job", not a fourth package. */
.order{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(20px,3vw,54px);align-items:center;
  margin-top:clamp(26px,3vw,48px);padding-top:clamp(26px,3vw,44px);
  border-top:1px solid var(--line);
}
.order p{color:var(--fg-2);max-width:52ch;margin-top:12px;line-height:1.6}
.order__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}

@media (max-width:860px){
  .tiers{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto}
  /* Seven does not divide into rows, so the strip stops being a grid here:
     a centred wrap, four then three. */
  .kit{display:flex;flex-wrap:wrap;justify-content:center;row-gap:28px}
  .kit li{flex:0 0 calc(25% - 9px)}
  .order{grid-template-columns:minmax(0,1fr)}
  .order__actions{justify-content:flex-start}
}

/* ================================================================== FOOTER */
.foot{background:var(--bg-2);border-top:1px solid var(--line);padding-top:clamp(34px,4vw,60px)}
.foot__grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(26px,3.5vw,56px);padding-bottom:clamp(28px,3.4vw,48px);
}
.foot__logo img{height:clamp(72px,8vw,104px);width:auto}
.foot__brand p{margin-top:18px;color:var(--fg-3);font-size:.92rem;line-height:1.6;max-width:38ch}
.foot h4{
  font-family:var(--mono);font-size:.71rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:16px;
}
.foot ul li{margin-bottom:11px}
.foot ul a{font-size:.94rem;color:var(--fg-2);transition:color .25s var(--ease-io)}
.foot ul a:hover{color:var(--accent-ink)}
.foot__bar{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  border-top:1px solid var(--line);padding-block:22px 26px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3);
}

/* ================================================================ REVEALS */
.reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s);
}
.reveal.is-in{opacity:1;transform:none}
.reveal-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease) var(--d,0s)}
.reveal-img.is-in{clip-path:inset(0 0 0 0)}
html:not(.js) .reveal,html:not(.js) .reveal-img{opacity:1;transform:none;clip-path:none}

.mask{display:block;overflow:hidden}
.mask>span{display:block;transform:translateY(105%);transition:transform 1s var(--ease) var(--d,0s)}
.is-lit .mask>span{transform:none}
html:not(.js) .mask>span{transform:none}

/* ============================================================== RESPONSIVE */
@media (max-width:1180px){
  .creds ul{grid-template-columns:repeat(2,1fr)}
  .creds li:nth-child(3){border-left:0}
  .creds li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:1000px){
  .nav__links{display:none}
  .nav__cta .btn--ghost{display:none}
  .nav__toggle{display:flex}
  .sect__head{grid-template-columns:1fr}
  .folder,.cover,.process,.book__grid{grid-template-columns:1fr}
  .cover__previewWrap{position:static}
  .cover__preview{aspect-ratio:16/10}
  .work__item,.work__item.w-5,.work__item.w-4,.work__item.w-3{grid-column:span 6}
  :root{--work-h:clamp(200px,32vw,300px)}
}
@media (max-width:640px){
  :root{--nav-h:88px;--work-h:250px}
  .creds ul{grid-template-columns:1fr}
  .creds li{border-left:0;border-top:1px solid var(--line)}
  .creds li:first-child{border-top:0}
  .work__item,.work__item.w-5,.work__item.w-4,.work__item.w-3{grid-column:span 12}
  .cover__row a{grid-template-columns:1fr;gap:8px}
  .cover__meta{text-align:left}
  .cover__num{display:none}
  .manifest li{grid-template-columns:26px minmax(0,1fr)}
  .manifest .fmt{grid-column:2;text-align:left;padding-top:4px}
  .process__shots{grid-template-columns:1fr}
  .hero__foot{flex-direction:column;align-items:flex-start}
  .foot__grid{grid-template-columns:1fr 1fr}
  .kit li{flex-basis:calc(33.333% - 8px)}
}

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

@media print{
  .nav,.optik,.scrollcue{display:none!important}
}