@font-face{font-family:"Inconsolata";src:url(assets/fonts/Inconsolata-latin.woff2) format("woff2");font-weight:200 900;font-stretch:100%;font-display:swap}
@font-face{font-family:"News Cycle";src:url(assets/fonts/NewsCycle-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"News Cycle";src:url(assets/fonts/NewsCycle-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Hamilton Gothic";src:url(assets/fonts/HamiltonGothicLight.woff2) format("woff2");font-weight:100 900;font-display:swap} /* AWT Hamilton Gothic Light, Tyler's pick Oct 28 */
@font-face{font-family:"Hamilton Antique Ext";src:url(assets/fonts/HamiltonAntiqueExt.woff2) format("woff2");font-weight:100 900;font-display:swap} /* AWT Hamilton Antique Ext, Tyler's pick Oct 29 2:09 PM */
@font-face{font-family:"Oswald";src:url(assets/fonts/Oswald-var.woff2) format("woff2");font-weight:200 700;font-display:swap}
:root{
  /* round-2 scheme (Tyler, Oct 29 12:22 AM: "keep the original dark grey") */
  --paper:#6a6663;      /* warm mid photocopy grey, Tyler's pick (Oct 29 1:34 PM); was #d3d1cc (r8), #272727 (r1-6) */
  --ink:#f3f1ee;        /* light ink on the #6a6663 ground: 5.0:1 (AA); was #121212 */
  --hero:#ededed;       /* hero stays light (Tyler, Oct 28): Layer 0 of the PSD. Landing is frozen */
  --hero-ink:#111111;   /* nav + logo black over the light hero */
  --deep:#c6c4be;       /* a shade darker photocopy grey: artist strip, footer; was #1b1b1b */
  --panel:#5c5855;      /* inputs on the light ground; was #303030 */
  --blue:#01426b;       /* Super Sport car-body blue, sampled from Tyler's ref (Oct 29 1:34 PM); replaces barn red */
  --navy:#022b3d;       /* shadow under the letters in the same ref: hover shade on the shop block + float pill only (r10) */
  --silver:#c9d0d6;     /* chrome mid-tone: stars + rules on the blue block */
  --cream:#f3eee4;
  --grey:#e8e5e1;        /* secondary text, 4.6:1 on --paper (AA); was #4f4c47 */
  --line:rgba(243,241,238,.24);
  --tex:url(assets/img/ground-tex.jpg);  /* r9: 2048px seamless, sparse big blotches #58544f..#76726e + toner specks */
  --sw:100vw;
  --head:"News Cycle","Trade Gothic Next","Helvetica Neue",Arial,sans-serif;
  /* headings + artist marquee. One-line swap: put "Oswald" (still bundled) or another family first */
  /* Fonts (Tyler, Oct 29): Ringold from his Adobe Fonts project (use.typekit.net/nhy4csh.css, weight 400 only).
     Swap a face by changing one line; the *-k factor scales sizes per face (Oswald = 1, Hamilton Gothic = .66; .84-.86 keeps Ringold at the cap height the site already had). */
  --font-heading:"Hamilton Antique Ext","Hamilton Gothic","Oswald","Arial Narrow",sans-serif;   /* section headings, On the Road, package titles */
  --font-artist:"ringold-sans","Oswald","Arial Narrow",sans-serif;         /* artist names: marquee text, work cards */
  --heading-k:.56;   /* r10: Hamilton Antique Ext is an extended face (caps .59em high, ~1.8x Gothic's width); was .66 for Hamilton Gothic */
  --artist-k:.84;
  --font-menu:"Hamilton Gothic","Oswald","Arial Narrow",sans-serif;        /* mobile menu links, pinned to their round-3 look */
  --menu-k:.66;
  --disp:var(--font-heading);   /* legacy alias used by the heading rules */
  --disp-k:var(--heading-k);
  --disp-ls:0;   /* r10: Antique Ext carries wide sidebearings of its own; was .01em */
  --body:"Inconsolata","Menlo",ui-monospace,monospace;
  --pad:clamp(20px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper) var(--tex) 0 0/2048px auto repeat;color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.5;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid #8ec5ec;outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:99}
.skip:focus{left:8px}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:14px;margin:0 0 14px}
h1,h2,h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:1;letter-spacing:var(--disp-ls);margin:0}
h2{font-size:calc(clamp(44px,7vw,104px) * var(--disp-k))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:15px;text-decoration:none;padding:14px 22px;border-radius:999px;border:2px solid var(--ink);cursor:pointer;transition:background .2s,color .2s,transform .2s;min-height:48px}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-cream{background:#eef2f5;color:var(--blue);border-color:#eef2f5}
.btn-cream:hover{background:var(--navy);color:#eef2f5;border-color:var(--navy)}
.btn-big{font-size:17px;padding:18px 30px}

/* header — layout from the PSD: WORK · SERVICES … ABOUT · CONTACT, logo in the middle */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,box-shadow .3s,color .3s;color:var(--hero-ink)}
.site-header.scrolled{color:var(--ink)}
.site-header:not(.scrolled) .btn-ink{background:var(--hero-ink);color:var(--hero);border-color:var(--hero-ink)}
.site-header:not(.scrolled) .btn-ink:hover{background:#272727;border-color:#272727;color:var(--hero)}
.scrolled .nav-mark img{filter:invert(1)}
.nav-mark img{width:100%;height:auto}
.site-header.scrolled{background:rgba(39,39,39,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px var(--pad);max-width:1600px;margin:0 auto}
.nav-links{display:flex;list-style:none;margin:0;padding:0;flex:1;justify-content:center;align-items:center;gap:clamp(24px,6vw,110px)}
.nav-links .gap{width:clamp(80px,14vw,240px)}
.nav-links a{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(15px,1.1vw,21px);text-decoration:none;padding:6px 0;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transition:transform .25s;transform-origin:left}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:opacity .3s,transform .3s;width:84px;pointer-events:none}
.scrolled .nav-mark{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.nav-book{padding:10px 20px;min-height:44px}
.nav-toggle{display:none}

/* hero — the layered landscape scene from LANDSLIDE_weblayout.psd (1920 px canvas) */
.hero{position:relative;overflow:hidden;background:var(--hero);color:var(--hero-ink);padding-top:calc(var(--sw) * 0.105)}
.scene{position:relative;width:var(--sw);height:calc(var(--sw) * 1.36615);left:50%;transform:translateX(-50%);margin-top:calc(var(--sw) * -0.02)}
.layer{position:absolute;height:auto;max-width:none;will-change:transform;user-select:none;-webkit-user-drag:none}
.l-back{z-index:1}.l-mid{z-index:3}.l-front{z-index:5}
/* depth order (Tyler, Oct 28): back mountain < logo + tags < next mountain < ground < front */
/* dark ground under the front layer: its top edge is the front cut-out's own torn bottom edge, so the dark sections meet the landscapes along Tyler's curve and parallax layers never show below it */
.ground{position:absolute;z-index:4;fill:var(--paper);overflow:visible;pointer-events:none}
.logo-float{position:absolute;z-index:2;left:50%;top:calc(var(--sw) * 0.0172);width:calc(var(--sw) * 0.1583);aspect-ratio:1;transform:translateX(-50%);will-change:transform}
.logo-float img,.logo-float svg{position:absolute;inset:0;width:100%;height:100%}
.logo-stars{animation:spin 90s linear infinite;transform-origin:50% 50%;fill:#111;overflow:visible}
/* each star counter-rotates about its own centre at the ring's rate, so it stays upright (Ferris wheel) */
.logo-stars .st{transform-box:fill-box;transform-origin:50% 50%;animation:spin 90s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-tag{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(13px,1vw,18px);line-height:1.35;margin:0}
.hero-tag-l,.hero-tag-r{position:absolute;z-index:2;top:calc(var(--sw) * 0.085);will-change:transform}
.hero-tag-l{right:calc(50% + var(--sw) * 0.115);text-align:right}
.hero-tag-r{left:calc(50% + var(--sw) * 0.115)}
.hero-tag-m{display:none}
.photo-credit{position:absolute;z-index:6;right:var(--pad);bottom:14px;margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(237,237,237,.7);background:transparent;padding:3px 8px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.logo-stars,.logo-stars .st{animation:none}.layer,.logo-float,.hero-tag{transform:none!important}}

/* intro: the flat ground under the landscapes fades into the paper texture, so the curve meets it with no seam */
.intro{background:linear-gradient(var(--paper),rgba(106,102,99,0) clamp(160px,22vw,320px))}
.intro{padding:clamp(40px,6vw,96px) 0 clamp(56px,8vw,120px)}
.intro-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,80px);align-items:end}
.intro h1{font-size:calc(clamp(52px,8.4vw,132px) * var(--disp-k))}
.lede{font-size:clamp(19px,1.5vw,23px);margin:0 0 28px;max-width:34em}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

/* credits marquee (Caora-style running type) */
.credits{background:linear-gradient(rgba(18,18,18,.62),rgba(18,18,18,.62)),var(--deep);color:var(--cream);padding:36px 0 40px}
.credits .eyebrow{color:var(--silver)}
.marquee{overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;align-items:center;animation:marq 48s linear infinite}
.marquee span{font-family:var(--font-artist);font-weight:400;text-transform:uppercase;font-size:calc(clamp(40px,6vw,92px) * var(--artist-k));line-height:1.05;padding:0 .35em}
/* artist logos: each artist's own wordmark, recoloured to the strip's cream. Height = a base cap height x the logo's optical factor (--lh) */
.marquee{--logo-cap:calc(clamp(40px,6vw,92px) * .6)}  /* = the cap height the marquee type had (Hamilton at .66) */
.marquee .mlogo{display:block;flex:none;height:calc(var(--logo-cap) * var(--lh,1));width:auto;max-width:none;margin:0 calc(var(--logo-cap) * .6);user-select:none;-webkit-user-drag:none}
.marquee .star{width:clamp(20px,2.4vw,36px);height:clamp(20px,2.4vw,36px);fill:var(--silver);flex:none}
@keyframes marq{to{transform:translateX(-50%)}}
.credits .marquee-track{animation-duration:96s}  /* 21 names: twice the old track length, so twice the time keeps the old speed */
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}.marquee{overflow-x:auto}}

/* work — Nutshell-style project cards */
.work{padding:clamp(64px,8vw,120px) 0 clamp(40px,6vw,80px)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.section-note{max-width:26em;margin:0;color:var(--grey)}
.more{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:15px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px)}
.card{text-decoration:none;display:block;group:card}
.card-img{display:block;overflow:hidden;aspect-ratio:4/5;background:var(--panel);border-radius:4px}
.card-img img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:grayscale(.15) contrast(1.02);transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s}
.card:hover .card-img img{transform:scale(1.04);filter:none}
.card-meta{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:14px 2px 6px;border-bottom:1px solid var(--line)}
.card-artist{font-family:var(--font-artist);font-weight:400;text-transform:uppercase;font-size:calc(29px * var(--artist-k));line-height:1.1}
.card-proj{grid-column:1;color:var(--grey);font-size:16px}
.card-tag{grid-column:2;grid-row:1/3;align-self:center;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px;border:1.5px solid var(--ink);border-radius:999px;padding:5px 10px;white-space:nowrap}
.reel{margin:clamp(40px,6vw,80px) 0 0}
.reel video{width:100%;aspect-ratio:16/9;background:#000;border-radius:4px;object-fit:cover}
.reel figcaption{display:flex;justify-content:space-between;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:13px;padding-top:12px;color:var(--grey)}
.strip-head{margin-top:clamp(48px,6vw,80px)}
.strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 12px;scrollbar-width:thin}
.strip img{flex:none;width:min(78vw,520px);aspect-ratio:16/9;object-fit:cover;scroll-snap-align:start;border-radius:4px}

/* Caora-style knockout type */
.knock{padding:clamp(24px,4vw,48px) 0;overflow:hidden}
.knock-text{font-family:var(--disp);font-weight:400;text-transform:uppercase;text-align:center;line-height:.95;font-size:calc(clamp(84px,21vw,360px) * var(--disp-k));letter-spacing:.01em;background:linear-gradient(rgba(16,16,16,.12),rgba(16,16,16,.12)),url(assets/img/canyon-full.jpg) 50% 62%/190% auto no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* services */
.services{padding:clamp(56px,7vw,110px) 0}
.packages{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.pkg{background:var(--panel);border:1.5px solid var(--line);border-radius:6px;padding:28px 26px 26px;display:flex;flex-direction:column}
.pkg-n{font-family:var(--disp);font-size:calc(22px * var(--disp-k));margin:0 0 18px;color:var(--navy);font-weight:400}
.pkg h3{font-size:calc(clamp(34px,3.2vw,48px) * var(--disp-k))}
.pkg-sub{margin:8px 0 18px;color:var(--grey)}
.pkg ul{list-style:none;margin:0 0 22px;padding:0;flex:1}
.pkg li{padding:9px 0 9px 26px;border-top:1px solid var(--line);position:relative}
.pkg li::before{content:"★";position:absolute;left:0;top:9px;color:var(--navy);font-size:14px}
.pkg-rate{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:14px;margin:0 0 16px}
.pkg .btn{align-self:flex-start}

.book{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,80px);margin-top:clamp(64px,8vw,120px);scroll-margin-top:90px}
.book-intro h2{font-size:calc(clamp(44px,5.6vw,84px) * var(--disp-k));margin-bottom:20px}
.small{font-size:16px;color:var(--grey)}
.form{display:grid;gap:18px}
.form label{display:grid;gap:6px;align-content:start;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.06em}
.form input,.form textarea{font:inherit;font-size:17px;text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink);background:var(--panel);border:1.5px solid rgba(243,241,238,.5);border-radius:6px;padding:13px 14px;width:100%;min-height:50px}
.form textarea{resize:vertical}
.opt{font-weight:400;text-transform:none;color:var(--grey);letter-spacing:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips legend{width:100%}
.chip{position:relative;display:inline-flex!important}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;min-height:0}
.chip span{display:inline-block;border:1.5px solid var(--ink);border-radius:999px;padding:10px 16px;font-size:15px;letter-spacing:.02em;text-transform:none;font-weight:700;background:transparent;transition:background .15s,color .15s}
.chip input:checked+span{background:var(--ink);color:var(--paper)}
.chip input:focus-visible+span{outline:3px solid #8ec5ec;outline-offset:2px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin:0;font-weight:700;min-height:1.5em}
.form-status.ok{color:#c9f2cf}.form-status.err{color:#ffd9c9}

/* shop — Caora colour block */
.shop{background:var(--blue);color:var(--cream);padding:0 0 clamp(64px,8vw,120px);scroll-margin-top:70px}
.marquee-shop{border-bottom:1.5px solid rgba(201,208,214,.4);padding:14px 0;margin-bottom:clamp(48px,6vw,90px)}
.marquee-shop span{font-size:calc(clamp(22px,2.6vw,36px) * var(--artist-k))}
.marquee-shop .star{fill:var(--silver);width:18px;height:18px}
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.shop-art{position:relative}
.shop-art img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;filter:contrast(1.05)}
.shop-knock{position:absolute;left:-.04em;bottom:-.14em;z-index:2;font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:.82;font-size:calc(clamp(70px,10vw,150px) * var(--disp-k));color:var(--cream);mix-blend-mode:normal;text-shadow:none}
.shop-copy .eyebrow{color:var(--silver)}
.shop-copy h2{font-size:calc(clamp(44px,5.2vw,80px) * var(--disp-k));margin-bottom:20px}
.ticks{list-style:none;padding:0;margin:20px 0 28px}
.ticks li{padding:8px 0 8px 28px;position:relative;border-top:1px solid rgba(201,208,214,.35)}
.ticks li::before{content:"★";position:absolute;left:0;color:var(--silver)}
.wl-row{display:flex;gap:10px}
.wl-row input{flex:1;border-color:var(--cream);background:var(--cream);color:#111}
.waitlist .form-status.ok{color:var(--cream)}.waitlist .form-status.err{color:#ffd9c9}

/* about */
.about{padding:clamp(64px,8vw,120px) 0;scroll-margin-top:70px}
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,6vw,96px);align-items:center}
.about-img img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;filter:grayscale(1) contrast(1.05)}
.about-img{margin:0}
.about-copy h2{margin-bottom:22px}
.about-copy p{max-width:34em}
.handles{display:flex;gap:18px;flex-wrap:wrap;font-weight:700}

.contact{padding:clamp(56px,7vw,100px) 0;border-top:1.5px solid var(--line);scroll-margin-top:70px}
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,80px)}
.contact h2{margin-bottom:16px}

.footer{background:var(--deep);color:var(--cream);padding:56px 0 110px}
.footer-grid{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:32px;align-items:center}
.footer-logo{position:relative;width:120px;height:120px}
.footer-logo img,.footer-logo svg{position:absolute;inset:0;width:100%;height:100%}
.footer p{margin:0;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:14px;line-height:1.7}
.footer a{text-decoration:none}.footer a:hover{text-decoration:underline}
.fine{color:rgba(237,237,237,.62)}

.float-book{position:fixed;right:18px;bottom:18px;z-index:60;background:var(--blue);color:#eef2f5;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:14px;text-decoration:none;padding:14px 20px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.18);transition:transform .25s,opacity .25s,background-color .35s,color .35s}
.float-book:hover{background:var(--navy)}
.float-book.hide{opacity:0;transform:translateY(20px);pointer-events:none}



/* ===== Round 8 (Oct 29, Tyler 1:12 PM): light photocopy ground below the landing; dark header + dark artist strip kept;
   photos in thin black 35mm film-scan edges ===== */

/* header: the dark scrolled bar + mobile menu exactly as before the light ground (vars re-scoped to the header only) */
.site-header{--ink:#ededed;--paper:#272727;--line:rgba(237,237,237,.2)}

/* artist strip: stays the dark band with cream logos */
.credits{background:#1b1b1b;color:var(--cream)}
.credits .eyebrow{color:var(--silver)}
.credits{position:relative}
.marquee .star{fill:var(--silver)}

/* ViewMaster disc removed in round 9 (Tyler 1:34 PM: "not loving it") */

/* footer: dark like the scrolled header (r9, Tyler 1:34 PM) */
.footer{background:#272727;color:#ededed;border-top:0}
.footer .logo-stars{fill:#ededed}
.footer-logo img{filter:invert(1)}
.chip span{background:transparent}

/* packages: the original cards, re-inked for the light ground */
.pkg{background:rgba(20,18,16,.10);border:1.5px solid rgba(243,241,238,.42);border-radius:6px}
.pkg-n{color:var(--navy)}
.pkg li{border-top:1px solid rgba(2,43,61,.55)}
.pkg li::before{color:var(--navy)}

/* 35mm film-scan edge: thin uneven black rebate, slightly rounded, like a scanned negative's frame.
   --fe = top right bottom left (px); each frame gets its own so they read as separate scans */
.card-img,.about-img{position:relative;--fe:5px 7px 6px 5px;--fr:4px}
.card-img{border-radius:var(--fr);background:#0d0c0b}
.card-img::after,.about-img::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border:solid #0d0c0b;border-width:var(--fe);border-radius:var(--fr);
  box-shadow:inset 0 0 1.2px 1px rgba(13,12,11,.75),inset 0 0 0 .5px rgba(13,12,11,.9)}
.card-img img{border-radius:calc(var(--fr) - 1px)}
.cards .card:nth-child(3n+1) .card-img{--fe:5px 6px 7px 5px}
.cards .card:nth-child(3n+2) .card-img{--fe:6px 5px 5px 7px;--fr:5px}
.cards .card:nth-child(3n) .card-img{--fe:5px 8px 5px 6px;--fr:3px}
.cards .card:nth-child(4) .card-img{--fe:7px 5px 6px 5px}
.about-img{--fe:6px 5px 8px 6px;--fr:5px;border-radius:var(--fr);overflow:hidden;background:#0d0c0b}
.about-img img{border-radius:var(--fr)}
.strip img{border:solid #0d0c0b;border-width:5px 6px 6px 5px;border-radius:4px;background:#0d0c0b;box-sizing:border-box}
.strip img:nth-child(3n+2){border-width:6px 5px 5px 7px;border-radius:5px}
.strip img:nth-child(3n){border-width:5px 7px 6px 5px;border-radius:3px}


/* ===== Round 9 (Oct 29, Tyler 1:34 PM): #6a6663 ground with light ink, dark footer, barn red -> Super Sport blue with silver chrome ===== */
.form input::placeholder,.form textarea::placeholder{color:rgba(243,241,238,.62)}
.wl-row input::placeholder{color:#5f6870}

/* ===== Round 10 (Oct 29, Tyler 2:09 PM): no chrome anywhere, solid colours only; blue ONLY on the shop block + floating Book pill;
   heading face -> AWT Hamilton Antique Ext ===== */
/* shop headings: solid light silver-white on the blue, no gradient, no shadow */
.shop-copy h2,.shop-knock{color:#eef2f5;background:none;-webkit-text-fill-color:currentColor;filter:none;text-shadow:none}

/* buttons below the landing back to neutral: dark #272727 pill with light type; hover flips to a light-outline */
main .btn-ink{background:#272727;border-color:#272727;color:#ededed}
main .btn-ink:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
/* "Join the waitlist" sits on the blue shop block, so it keeps the shop palette (solid, no rim) */
.shop .btn-cream:hover{background:var(--navy);border-color:var(--navy);color:#eef2f5}

/* floating "Book a show" pill: solid Super Sport blue at every scroll position, no chrome rim */
.float-book{background:var(--blue);border:2px solid var(--blue);padding:12px 18px;color:#eef2f5;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.float-book:hover{background:var(--navy);border-color:var(--navy)}

/* package numbers, stars and rules on the grey ground: neutral dark ink (no blue outside the shop) */
.pkg-n{color:#272727}
.pkg li{border-top:1px solid rgba(39,39,39,.5)}
.pkg li::before{color:#272727}

/* Hamilton Antique Ext: short caps on a tall em, so tighter leading; On the Road sized so "ON THE" fills the phone width and wraps to two lines on desktop */
h1,h2,h3{line-height:.94}
.knock-text{font-size:clamp(36px,9.6vw,190px);line-height:.92}
@media (max-width:600px){.knock-text{font-size:14vw}:root{--heading-k:.62}}  /* phone: headings a touch bigger, still no overflow at 390 */
.pkg-n{font-size:calc(28px * var(--disp-k))}  /* phone: ON / THE / ROAD, ROAD fills the width */
.shop-knock{line-height:.8}

/* artist strip: plain light stars + eyebrow */
.credits .eyebrow{color:#ededed}
.credits .marquee .star{fill:#ededed}

/* tablet */
@media (max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .packages{grid-template-columns:1fr}
  .intro-grid,.book,.shop-grid,.about-grid,.contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:auto 1fr}
}
/* phone */
@media (max-width:760px){
  :root{--sw:190vw}
  body{font-size:17px}
  .nav{padding:14px 16px}
  .nav-toggle{color:inherit;display:inline-flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;background:none;border:0;padding:0 10px;cursor:pointer}
  .nav-toggle span:not(.sr){display:block;height:2px;background:currentColor;transition:transform .25s}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
  .nav-links{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;background:var(--paper);color:var(--ink);padding:8px 16px 24px;border-bottom:1.5px solid var(--line);transform:translateY(-130%);transition:transform .3s;z-index:-1}
  .nav-links.open{transform:none}
  .nav-links .gap{display:none}
  .nav-links li{width:100%;border-top:1px solid var(--line)}
  .nav-links a{display:block;font-size:calc(28px * var(--menu-k));font-family:var(--font-menu);padding:14px 0}
  .nav-mark{width:66px}
  .hero{padding-top:74px}
  .hero-tag-m{display:block;text-align:center;font-size:13px;position:relative;z-index:5}
  .hero-tag-l,.hero-tag-r{display:none}
  .scene{margin-top:4vw}
  .logo-float{width:46vw;top:calc(var(--sw) * 0.006)}
  .photo-credit{font-size:10px;right:12px;bottom:8px}
  .cards{grid-template-columns:1fr}
  .card-img{aspect-ratio:4/3}
  .about-img img{aspect-ratio:4/3;object-position:50% 30%}
  .shop-art img{aspect-ratio:1}
  .row2{grid-template-columns:1fr}
  .wl-row{flex-direction:column}
  .reel figcaption span:last-child{display:none}
  .footer-grid{grid-template-columns:1fr}
  .float-book{left:16px;right:16px;bottom:14px;text-align:center;justify-content:center;display:flex}
}

@media (min-width:761px){.photo-credit{left:var(--pad);right:auto}}

input,select,textarea{font-family:var(--body)}

/* services cards: photo window (Oct 29) */
.pkg{background:linear-gradient(rgba(16,16,16,.6),rgba(16,16,16,.6)),url(assets/img/canyon-full.jpg) 50% 50%/cover no-repeat,#2a2826;border:1.5px solid rgba(243,241,238,.35)}
.pkg-n,.pkg li::before{color:#ededed}
.pkg li{border-top:1px solid rgba(243,241,238,.28)}
.pkg-sub{color:#d9d6d1}

/* Oct 29 4:00 PM: texture only above the artist band (intro, dark text); solid ground below */
.intro{background:linear-gradient(var(--paper),rgba(106,102,99,0) clamp(160px,22vw,320px)),var(--tex) 0 0/2048px auto repeat,var(--paper);color:#121212;--ink:#121212}
.intro h1,.intro h2,.intro p,.intro .lede{color:#121212}
.intro .btn-line{color:#121212;border-color:#121212}
.intro .btn-line:hover{background:#121212;color:#ededed}

/* On the Road: two lines, ROAD sized to the width of ON THE (fit in pkgwin.js) */
.knock-text .k-line{display:block;width:max-content;margin:0 auto;white-space:nowrap;line-height:.9}

/* Oct 29 4:05 PM: even breathing room around On the Road */
.knock{padding:clamp(40px,5.4vw,80px) 0}
.services{padding-top:clamp(56px,6.3vw,92px)}
.knock-text .k-line+.k-line{margin-top:.06em}

/* Oct 29 4:10 PM: one pinned canyon, compositor-smooth. No scroll JS: each window holds a position:fixed
   copy of the same photo (cover, centred on the viewport) and clips it, so the browser's compositor keeps
   it locked to the screen while the page scrolls. 100lvh keeps the photo's scale steady when the phone's
   toolbar collapses. */
.canyon-fix{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;background:url(assets/img/canyon-full.jpg) 50% 50%/cover no-repeat;pointer-events:none}
/* service cards: window = clip-path inset; dark overlay + border on ::after; content paints above both */
.pkg{position:relative;isolation:isolate;-webkit-clip-path:inset(0 round 6px);clip-path:inset(0 round 6px);background:#2a2826;border-color:transparent}
.pkg::before{content:"";position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;background:url(assets/img/canyon-full.jpg) 50% 50%/cover no-repeat;pointer-events:none;z-index:-2}
.pkg::after{content:"";position:absolute;inset:-1.5px;background:rgba(16,16,16,.6);border:1.5px solid rgba(243,241,238,.35);border-radius:6px;pointer-events:none;z-index:-1}
/* On the Road, CSS-only path (no JS / no SVG clip support): fixed background clipped to the letters (smooth on desktop) */
.knock-text{background:linear-gradient(rgba(16,16,16,.12),rgba(16,16,16,.12)) fixed,url(assets/img/canyon-full.jpg) 50% 50%/cover no-repeat fixed;-webkit-background-clip:text;background-clip:text}
/* On the Road, main path: real letters in an SVG clipPath (built in pkgwin.js on load/resize/fonts only) cut a window onto a fixed canyon layer */
.knock-text.svgclip{position:relative;background:none;-webkit-background-clip:border-box;background-clip:border-box}
.knock-win{position:absolute;left:0;right:0;top:-.25em;bottom:-.25em;-webkit-clip-path:url(#knockClip);clip-path:url(#knockClip);pointer-events:none}
.knock-win .canyon-fix{background:linear-gradient(rgba(16,16,16,.12),rgba(16,16,16,.12)),url(assets/img/canyon-full.jpg) 50% 50%/cover no-repeat}
.k-base{display:inline-block;width:0;height:0;vertical-align:baseline}
.knock-svg{position:absolute;width:0;height:0;overflow:hidden}

/* Oct 29 draft copy: Off the Road + What's Next blocks (reuse .section-head / .packages / .pkg) */
.section-off{margin-top:clamp(64px,8vw,120px)}
.next{margin-top:clamp(56px,7vw,100px);padding-top:clamp(20px,2.4vw,30px);border-top:1.5px solid currentColor;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(14px,5vw,80px);align-items:baseline}
.next .eyebrow{margin:0}
.next-line{font-size:clamp(19px,1.5vw,23px);margin:0;max-width:34em}
@media (max-width:760px){.next{grid-template-columns:1fr}}

/* about portrait (Oct 29) */
.about-img img{aspect-ratio:4/5;object-position:50% 40%}
.about-img img{aspect-ratio:4/5;object-position:50% 50%}

/* ===== Decal test (Oct 29, Tyler 5:38 PM): buttons + preset section restyled after his vintage Ford oil-filter decal.
   Flat orange-red sampled from the decal (#e3372f), near-black type, white outer ring + thin black keyline,
   condensed caps (Oswald, already bundled). Solid colours only: no shadows, gradients, chrome or glows. ===== */
:root{
  --decal:#e3372f;      /* decal fill, median of the orange-red pixels in Tyler's ref */
  --decal-ink:#0b0b0b;  /* decal black; 4.6:1 on --decal */
  --decal-white:#ffffff;/* decal ring + fill-in box */
  --decal-font:"Oswald","Arial Narrow",sans-serif;
}

/* badge buttons (below the landing only: the header's Book button keeps its look) */
main .btn,.float-book{isolation:isolate;font-family:var(--decal-font);font-weight:600;letter-spacing:.07em;text-transform:uppercase;font-size:17px;line-height:1;border:3px solid var(--decal-white);border-radius:999px;box-shadow:none;padding:13px 24px;min-height:50px;transition:background-color .2s,color .2s}
main .btn{position:relative}
main .btn::before,.float-book::before{content:"";position:absolute;inset:0;border:1.5px solid var(--decal-ink);border-radius:inherit;pointer-events:none}
main .btn-big{font-size:19px;padding:17px 32px}
/* primary: orange decal badge */
main .btn-ink,main .btn-cream,.shop .btn-cream,.float-book{background:var(--decal);color:var(--decal-ink);border-color:var(--decal-white)}
main .btn-ink:hover,main .btn-cream:hover,.shop .btn-cream:hover,.float-book:hover{background:var(--decal-ink);color:var(--decal-white);border-color:var(--decal-white)}
/* secondary: the white "fill-in" box */
main .btn-line,.intro .btn-line{background:var(--decal-white);color:var(--decal-ink);border-color:var(--decal-white)}
main .btn-line:hover,.intro .btn-line:hover{background:var(--decal);color:var(--decal-ink);border-color:var(--decal-white)}
main .btn:focus-visible,.float-book:focus-visible{outline:3px solid var(--decal-ink);outline-offset:3px}

/* floating Book pill: the badge, no drop shadow */
.float-book{display:inline-flex;align-items:center;justify-content:center;font-size:16px;padding:12px 22px}
@media (max-width:760px){.float-book{display:flex}}

/* preset section: the decal itself */
.shop{background:var(--decal);color:var(--decal-ink)}
.marquee-shop{border-bottom:1.5px solid var(--decal-ink)}
.marquee-shop span{color:var(--decal-ink)}
.marquee-shop .star{fill:var(--decal-ink)}
.shop-copy h2{color:var(--decal-ink)}
.shop-knock{color:var(--decal-white)}
.shop-art img{border:3px solid var(--decal-white);outline:1.5px solid var(--decal-ink);outline-offset:-4.5px}
/* "Shop · Coming November" in the white fill-in box, like REPLACE AT ___ MILES */
.shop-copy .eyebrow{display:inline-block;background:var(--decal-white);color:var(--decal-ink);border:1.5px solid var(--decal-ink);font-family:var(--decal-font);font-weight:600;letter-spacing:.08em;font-size:15px;line-height:1;padding:8px 12px 7px;margin-bottom:20px}
.ticks li{border-top:1px solid rgba(11,11,11,.4)}
.ticks li::before{color:var(--decal-ink)}
.wl-row input{background:var(--decal-white);border:1.5px solid var(--decal-ink);border-radius:6px;color:var(--decal-ink)}
.wl-row input::placeholder{color:#55504c}
.waitlist .form-status.ok,.waitlist .form-status.err{color:var(--decal-ink)}
.shop :focus-visible{outline-color:var(--decal-ink)}

/* Oct 29 5:45 PM: Tyler asked to tone the red down on the big section. Section gets a faded, dustier decal tone; buttons keep the full decal red. */
:root{--decal-soft:#d4735f}
.shop{background:var(--decal-soft)}

/* Oct 29 5:46 PM: Tyler: darker red/maroon section, text in the bright decal red */
:root{--decal-maroon:#4a1012}
.shop{background:var(--decal-maroon);color:var(--decal)}
.shop h2,.shop p,.shop li,.shop .shop-copy h2,.marquee-shop span,.shop-knock,.ticks li::before{color:var(--decal)}
.marquee-shop{border-bottom-color:var(--decal)}
.marquee-shop .star{fill:var(--decal)}
.ticks li{border-top-color:rgba(227,55,47,.45)}
.shop-copy .eyebrow{color:var(--decal-ink)}
.shop .btn,.shop .btn *{color:var(--decal-ink)}
.shop-art img{outline-color:var(--decal-maroon)}
.waitlist .form-status.ok,.waitlist .form-status.err{color:var(--decal)}
.shop :focus-visible{outline-color:var(--decal)}

/* Oct 29 6:08 PM: pill hidden until the artist banner is passed */
.float-book.pre{opacity:0;transform:translateY(20px);pointer-events:none;visibility:hidden;transition:opacity .25s,transform .25s,visibility 0s .25s}
.float-book:not(.pre){visibility:visible}
/* Oct 29 6:10 PM: header Book hides once the floating pill takes over */
.nav-book{transition:opacity .25s,visibility 0s}
.past-credits .nav-book{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility 0s .25s}

/* Oct 29 6:12 PM: About photo as a circle inside the rotating star ring from the landing */
.about-img.about-orbit{position:relative;aspect-ratio:1;width:100%;max-width:520px;margin:0 auto;background:none;overflow:visible;border-radius:0}
.about-img.about-orbit::after{display:none}
.about-stars{position:absolute;inset:0;width:100%;height:100%;fill:#111;overflow:visible;animation:spin 90s linear infinite;transform-origin:50% 50%}
.about-stars .st{transform-box:fill-box;transform-origin:50% 50%;animation:spin 90s linear infinite reverse}
.about-disc{position:absolute;inset:16%;border-radius:50%;overflow:hidden;background:#0d0c0b}
.about-img.about-orbit .about-disc img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 30%;border-radius:0;filter:grayscale(1) contrast(1.05)}
@media (prefers-reduced-motion:reduce){.about-stars,.about-stars .st{animation:none}}
/* Oct 29 6:13 PM: Tyler prefers the header Book staying put the whole way; floating pill dropped */
.past-credits .nav-book{opacity:1;visibility:visible;pointer-events:auto}
.float-book{display:none!important}
/* Oct 29 6:16 PM: floating pill on MOBILE only (after artist banner, header Book hands off to it); desktop keeps header Book throughout */
@media (max-width:760px){.float-book{display:flex!important}.past-credits .nav-book{opacity:0;visibility:hidden;pointer-events:none}}

.about-img.about-orbit .about-disc img{object-position:50% 50%;filter:none}
/* Oct 29 6:37 PM: back to the normal photo (booth version ditched) */
.about-img.about-orbit .about-disc img{object-position:50% 30%;filter:grayscale(1) contrast(1.05)}
/* Oct 29 7:02 PM: square face-centred crop for the circle */
.about-img.about-orbit .about-disc img{object-position:50% 50%}

/* Oct 29 7:09 PM: On the Road letters tinted with the decal red (photo cut-out kept) */
.knock-win .canyon-fix{background:linear-gradient(var(--decal),var(--decal)),url(assets/img/canyon-full.jpg) 50% 50%/cover no-repeat;background-blend-mode:multiply,normal}
.knock-text:not(.svgclip){background:linear-gradient(var(--decal),var(--decal)) fixed,url(assets/img/canyon-full.jpg) 50% 50%/cover no-repeat fixed;background-blend-mode:multiply,normal;-webkit-background-clip:text;background-clip:text}
/* Oct 29 7:10 PM tint v2: brighter */
.knock-win .canyon-fix{background:url(assets/img/canyon-red.jpg) 50% 50%/cover no-repeat;background-blend-mode:normal}
.knock-text:not(.svgclip){background:url(assets/img/canyon-red.jpg) 50% 50%/cover no-repeat fixed;background-blend-mode:normal;-webkit-background-clip:text;background-clip:text}


/* ===== r11 (Oct 29 7:44 PM, Tyler) ===== */
/* 1. "Built around you." ~1.5x on desktop. The face is very wide ("AROUND" alone is ~9.25em), so at 1.5x the headline gets the full row
   and the lede + buttons sit under it; on phones it fills the content width exactly (the most "AROUND" can take at 390 without overflow) */
.intro h1{font-size:calc(clamp(78px,12.6vw,198px) * var(--disp-k))}
.intro-grid{grid-template-columns:1fr;align-items:start;row-gap:clamp(28px,3.4vw,52px)}
@media (max-width:600px){.intro h1{font-size:calc((100vw - 2 * var(--pad)) / 9.45)}}
/* 2. artist band as a 35mm strip: sprocket notches top + bottom ride inside the moving track.
   Each half of the (duplicated) track carries its own notch rows with repeat "round", so a whole number of notches
   fits each half exactly and the -50% loop lands on the same phase (no jump). */
.credits .marquee{--perf:clamp(15px,1.55vw,24px);--perf-h:calc(var(--perf) * .587);--perf-gap:calc(var(--perf) * .42)}
.credits .marquee-track{position:relative;padding:calc(var(--perf-h) + var(--perf-gap) * 2.1) 0}
.credits .marquee-track::before,.credits .marquee-track::after{content:"";position:absolute;top:0;bottom:0;width:50%;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475 279' preserveAspectRatio='none'%3E%3Crect x='138' y='0' width='198' height='279' rx='42' fill='%236a6663'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475 279' preserveAspectRatio='none'%3E%3Crect x='138' y='0' width='198' height='279' rx='42' fill='%236a6663'/%3E%3C/svg%3E");
  background-size:var(--perf) var(--perf-h),var(--perf) var(--perf-h);
  background-repeat:round no-repeat,round no-repeat;
  background-position:0 var(--perf-gap),0 calc(100% - var(--perf-gap))}
.credits .marquee-track::before{left:0}
.credits .marquee-track::after{left:50%}
.credits{padding-bottom:24px}
/* 3. shop marquee in the site heading face */
.marquee-shop span{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:var(--disp-ls);line-height:1;font-size:calc(clamp(34px,4vw,56px) * var(--disp-k))}


/* ===== r12 (Oct 29 7:44 PM, Tyler): Work = Director's reel + vertical video row (ref milesmurphy.com/tour); Frames from the road = full IG carousels.
   Solid colours only: no shadows, gradients, glows, chrome, polaroid frames or film-strip graphics. JS lives in work.js (script.js untouched). ===== */
/* Director's reel, IG cover as poster */
.dreel{margin:0}
.dreel-media{position:relative;background:var(--decal-ink);border-radius:4px;overflow:hidden}
.dreel-media video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--decal-ink)}
.dreel-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}
main .btn.dreel-play{font-size:18px;padding:16px 28px}
.dreel-play span{font-size:.8em;margin-right:.1em}
.dreel figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:8px 20px;flex-wrap:wrap;padding-top:14px}
.dreel-title{font-family:var(--disp);letter-spacing:var(--disp-ls);text-transform:uppercase;font-size:calc(34px * var(--disp-k));line-height:1.1;color:var(--ink)}
.dreel-link{font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.dreel-link:hover{color:var(--decal)}
/* vertical row: 4 across on desktop, swipe row on phones */
.vrow-head{margin:clamp(40px,5vw,72px) 0 16px;color:var(--ink)}
.vrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.vt{display:block;min-width:0;text-decoration:none;color:var(--ink)}
.vt-media{display:block;position:relative;aspect-ratio:9/16;background:var(--decal-ink);border-radius:4px;overflow:hidden}
.vt-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vt-cap{display:block;padding-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.vt-artist{font-family:var(--disp);letter-spacing:var(--disp-ls);text-transform:uppercase;font-size:calc(26px * var(--disp-k))}
.vt-proj{font-family:var(--body);font-size:14px;color:var(--grey);margin-left:.35em}
.vt:hover .vt-artist,.vt:focus-visible .vt-artist{color:var(--decal)}
.vt-more .vt-media{background:var(--decal);display:flex;align-items:center;justify-content:center;transition:background-color .2s}
.vt-more-txt{font-family:var(--disp);letter-spacing:var(--disp-ls);text-transform:uppercase;font-size:calc(40px * var(--disp-k));line-height:1.15;color:var(--decal-ink);text-align:center;padding:0 14px;transition:color .2s}
.vt-more:hover .vt-media{background:var(--decal-maroon)}
.vt-more:hover .vt-more-txt{color:var(--decal)}
.vt-more .vt-artist{font-family:var(--body);text-transform:none;font-size:14px;color:var(--grey)}
@media (max-width:760px){
  .vrow{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 6px;scroll-padding-inline:var(--pad);scrollbar-width:none}
  .vrow::-webkit-scrollbar{display:none}
  .vt{flex:0 0 min(62vw,300px);scroll-snap-align:start}
}
/* Frames from the road: the whole carousel, one continuous panorama, snapping per slide */
.frames{margin-top:clamp(56px,7vw,104px)}
.frames>.eyebrow{color:var(--ink);margin-bottom:18px}
.fc+.fc{margin-top:clamp(36px,4.5vw,64px)}
.fc{--fh:min(clamp(340px,40vw,600px),74vh)}
.fc-bar{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-bottom:14px}
.fc-credit{margin:0;font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:14px}
.fc-credit a{color:var(--ink);text-decoration:none}
.fc-credit a:hover{color:var(--decal);text-decoration:underline;text-underline-offset:4px}
.fc-nav{display:flex;align-items:center;gap:10px}
.fc-count{font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--grey);min-width:3.6em;text-align:right;font-variant-numeric:tabular-nums}
main .btn.fc-btn{width:46px;height:46px;min-height:46px;padding:0;font-size:20px;line-height:1}
main .btn.fc-btn:disabled{opacity:.35;cursor:default}
main .btn.fc-btn:disabled:hover{background:var(--decal);color:var(--decal-ink)}
.fc-view{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:4px;background:var(--decal-ink);cursor:grab;-webkit-user-select:none;user-select:none}
.fc-view::-webkit-scrollbar{display:none}
.fc-view.drag{scroll-snap-type:none;cursor:grabbing}
.fc-view:focus-visible{outline:3px solid var(--decal);outline-offset:3px}
.fc-track{position:relative;display:flex;height:var(--fh);width:calc(var(--fh) * .8 * var(--n))}
.fc-track img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.fc-snap{flex:1 1 0;scroll-snap-align:start}
@media (max-width:760px){
  .fc{--fh:calc(min(84vw,420px) * 1.25)}
  .fc-view{margin:0 calc(-1 * var(--pad));border-radius:0;padding-inline:var(--pad);scroll-padding-inline:var(--pad);background:transparent}
  .fc-credit{font-size:13px}
}

/* r12 fixes after first render: play button over the poster (main .btn sets position:relative), tile captions as Miles Murphy-style two short lines */
main .btn.dreel-play{position:absolute}
.vt-cap{white-space:normal;overflow:visible}
.vt-artist,.vt-proj{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt-artist{font-size:calc(24px * var(--disp-k))}
.vt-proj{margin:3px 0 0;font-size:13px}
.vt-more-txt{font-size:15px;line-height:1.35;padding:0 10px}
@media (max-width:760px){.vt-more-txt{font-size:14px}}
main .btn.dreel-play{white-space:nowrap}
main .btn.fc-btn:disabled{opacity:1;background:var(--decal-maroon);color:var(--grey);cursor:default}
main .btn.fc-btn:disabled:hover{background:var(--decal-maroon);color:var(--grey)}
@media (max-width:600px){main .btn.dreel-play{font-size:15px;padding:12px 18px;min-height:44px}.dreel-title{font-size:calc(26px * var(--disp-k))}}
/* keep the IG cover's logo clear: play button sits bottom-left */
.dreel-play{left:clamp(10px,1.6vw,22px);top:auto;bottom:clamp(10px,1.6vw,22px);transform:none}
@media (max-width:600px){.vt-artist{font-size:calc(19px * var(--disp-k))}main .btn.dreel-play{font-size:13px;padding:9px 14px;min-height:38px;border-width:2px}}


/* ===== r13 (Oct 29 8:03 PM, Tyler): headings in Inter ExtraBold 800 (as on the Inter test); intro back to side-by-side layout, headline bigger ===== */
:root{--font-heading:"Inter","Helvetica Neue",Arial,sans-serif;--heading-k:.78;--disp-ls:-.02em}
@media (max-width:760px){:root{--heading-k:.82}}
h1,h2,h3,.knock-text,.pkg-n,.shop-knock,.marquee-shop span{font-weight:800!important;letter-spacing:-.02em}
.intro-grid{grid-template-columns:1.1fr 1fr;align-items:end;row-gap:0}
.intro h1{font-size:calc(clamp(60px,10.6vw,172px) * var(--disp-k))}
@media (max-width:1000px){.intro-grid{grid-template-columns:1fr}}
@media (max-width:600px){.intro h1{font-size:calc((100vw - 2 * var(--pad)) / 4.9)}}


/* ===== r14 (Oct 29 8:07 PM, Tyler): Recent work row = his IG reposts (6 tiles + More on Instagram). Desktop: horizontal scroll-snap row, ~4 tiles in view with the next one peeking, arrow buttons in the site's button style; phone: swipe row (r12 rules). ===== */
.vrow-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 20px;margin:clamp(40px,5vw,72px) 0 16px}
.vrow-bar .vrow-head{margin:0}
.vrow-nav{display:flex;gap:10px;flex:none}
@media (min-width:761px){
  .vrow{display:flex;gap:clamp(12px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:6px}
  .vrow::-webkit-scrollbar{display:none}
  .vt{flex:0 0 calc((100% - 3 * clamp(12px,1.6vw,22px)) / 4.25);scroll-snap-align:start}
  .vrow.drag{scroll-snap-type:none;cursor:grabbing}
  .vrow.drag .vt{pointer-events:none}
}
@media (max-width:760px){.vrow-nav{display:none}}


/* ===== r15 (Oct 29 8:10 PM, Tyler): artist banner modeled on a real 35mm strip (his reference: black strip, square perfs near the edges, edge codes).
   Eyebrow sits above the strip on the page ground, not inside it. Perfs are cut-outs (page ground colour) and ride the moving track. ===== */
.credits{background:transparent!important;padding:clamp(28px,4vw,52px) 0 clamp(28px,4vw,52px)!important}
.credits .eyebrow{color:#121212!important;margin-bottom:14px}
.credits .marquee{background:#111;--perf:clamp(13px,1.25vw,20px);--perf-h:calc(var(--perf) * .62);--perf-gap:calc(var(--perf) * .55);--code-h:calc(var(--perf) * .62)}
.credits .marquee-track{padding:calc(var(--perf-gap) + var(--perf-h) + var(--code-h) + var(--perf-gap) * 1.2) 0!important}
.credits .marquee-track::before,.credits .marquee-track::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='none'%3E%3Crect x='5' y='0' width='10' height='20' rx='2' fill='%236a6663'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='none'%3E%3Crect x='5' y='0' width='10' height='20' rx='2' fill='%236a6663'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12'%3E%3Cg font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='8' fill='%23cfcfcf' letter-spacing='.5'%3E%3Ctext x='30' y='9' %3E2%3C/text%3E%3Ctext x='95' y='9'%3ELANDSLIDE%3C/text%3E%3Ctext x='185' y='9'%3E3%3C/text%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12'%3E%3Cg font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='8' fill='%23cfcfcf' letter-spacing='.5'%3E%3Ctext x='10' y='9'%3E%E2%96%B8 1A%3C/text%3E%3Ctext x='90' y='9'%3E2%3C/text%3E%3Ctext x='150' y='9'%3E%E2%96%B8 2A%3C/text%3E%3C/g%3E%3C/svg%3E")!important;
  background-size:var(--perf) var(--perf-h),var(--perf) var(--perf-h),calc(var(--perf) * 12) var(--code-h),calc(var(--perf) * 12) var(--code-h)!important;
  background-repeat:round no-repeat,round no-repeat,round no-repeat,round no-repeat!important;
  background-position:0 var(--perf-gap),0 calc(100% - var(--perf-gap)),0 calc(var(--perf-gap) + var(--perf-h) + var(--perf-gap) * .35),0 calc(100% - var(--perf-gap) - var(--perf-h) - var(--perf-gap) * .35)!important}

/* r15b (8:13 PM, Tyler): plain strip, no edge codes */
.credits .marquee{--code-h:0px;--perf-gap:calc(var(--perf) * .5)}
.credits .marquee-track::before,.credits .marquee-track::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='none'%3E%3Crect x='5' y='0' width='10' height='20' rx='2' fill='%236a6663'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='none'%3E%3Crect x='5' y='0' width='10' height='20' rx='2' fill='%236a6663'/%3E%3C/svg%3E")!important;
  background-size:var(--perf) var(--perf-h),var(--perf) var(--perf-h)!important;
  background-repeat:round no-repeat,round no-repeat!important;
  background-position:0 var(--perf-gap),0 calc(100% - var(--perf-gap))!important}

/* r15c (8:24 PM, Tyler): seam under "Built around you". Intro drew its own copy of the texture starting at its top edge, so it met the page texture at a different offset under the intro. Let the page texture run through instead (same look, one continuous sheet). */
.intro{background:linear-gradient(var(--paper),rgba(106,102,99,0) clamp(160px,22vw,320px))!important;background-color:transparent!important}

/* ===== r16 (Oct 29 8:18 PM, Tyler): THE RIG, gear from his Amazon storefront (lists = categories), Shop buttons carry tag tylercoleervi-20.
   Section title lives in index.html (id="rig-h"). Solid colours only: no shadows, gradients, glows or chrome. JS for the rows lives in rig.js. ===== */
.rig{padding:clamp(64px,8vw,120px) 0 clamp(48px,6vw,88px)}
.rig-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,min(34vw,440px));grid-template-areas:"intro photo" "yt photo";column-gap:clamp(28px,5vw,80px);row-gap:clamp(24px,3vw,40px);align-items:start}
.rig-intro{grid-area:intro}
.rig-intro h2{margin:0 0 clamp(14px,1.6vw,22px)}
.rig-lede{margin:0 0 clamp(22px,2.4vw,32px);font-family:var(--body);font-size:clamp(18px,1.5vw,22px);line-height:1.45;color:var(--ink);max-width:30em}
.rig-photo{grid-area:photo;margin:0;border-radius:4px;overflow:hidden;background:var(--decal-ink)}
.rig-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.rig-yt{grid-area:yt;align-self:end;background:var(--decal-maroon);color:var(--decal);border-radius:4px;padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.rig-yt-tag{margin:0;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--decal)}
.rig-yt-h{margin:0;font-size:clamp(26px,2.6vw,40px);line-height:1.05;text-transform:uppercase;color:var(--cream)}
.rig-yt-p{margin:0;font-family:var(--body);font-size:16px;color:var(--cream)}
.rig-yt-soon{display:inline-block;margin-top:6px;background:var(--decal);color:var(--decal-ink);border:2px solid var(--decal-white);border-radius:999px;font-family:var(--decal-font);font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:14px;line-height:1;padding:9px 16px 8px}
.rig-bar .rig-cat-h{margin:0;color:var(--ink);display:flex;align-items:center;gap:10px}
.rig-n{display:inline-block;background:var(--decal-ink);color:var(--ink);border-radius:999px;font-size:12px;letter-spacing:.06em;line-height:1;padding:5px 9px 4px}
.rig-row{display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:4px}
.rig-row::-webkit-scrollbar{display:none}
.rig-row:focus-visible{outline:3px solid var(--decal);outline-offset:4px}
.rig-row.drag{scroll-snap-type:none;cursor:grabbing}
.rig-row.drag .gear{pointer-events:none}
.gear{flex:0 0 calc((100% - 4 * clamp(12px,1.4vw,20px)) / 5.3);scroll-snap-align:start;min-width:0;display:flex;flex-direction:column;background:var(--cream);color:var(--decal-ink);border-radius:4px;padding:10px 10px 12px}
.gear-img{display:block;aspect-ratio:1/1;background:var(--cream);border-radius:2px;overflow:hidden}
.gear-img img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.gear-name{margin:10px 2px 0;font-family:var(--head);font-weight:700;font-size:16px;line-height:1.2;letter-spacing:.01em;color:var(--decal-ink);text-transform:none}
.gear-note{margin:6px 2px 0;font-family:var(--body);font-size:13px;line-height:1.35;color:#4a4643;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gear-name,.gear-note{margin-bottom:12px}
.gear-name:has(+.gear-note){margin-bottom:0}
main .btn.gear-shop{margin-top:auto;align-self:flex-start;font-size:14px;padding:9px 18px 8px;min-height:38px;border-width:2px}
.rig-aff{margin:clamp(28px,3vw,40px) 0 0;font-family:var(--body);font-size:13px;color:var(--grey)}
@media (min-width:761px){.nav-links .nav-rig{display:none}}
@media (max-width:1100px){.gear{flex-basis:calc((100% - 3 * clamp(12px,1.4vw,20px)) / 4.3)}}
@media (max-width:900px){
  .rig-top{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);grid-template-areas:"intro photo" "yt yt"}
}
@media (max-width:760px){
  .rig-top{grid-template-columns:1fr;grid-template-areas:"intro" "photo" "yt";row-gap:22px}
  .rig-photo img{aspect-ratio:4/3;object-position:50% 30%}
  .rig-row{margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 4px;scroll-padding-inline:var(--pad)}
  .gear{flex-basis:min(42vw,200px)}
  .rig-nav{display:none}
  .gear-name{font-size:15px}
  .gear-note{font-size:12px}
}

/* ===== r17 (Oct 29 8:32 PM, Tyler): the Rig moved off the homepage onto its own page, gear.html ("GEAR"), linked only from the header.
   Homepage nav gets GEAR on desktop + phone menu (replaces the r16 phone-only "Rig" item). The r16 .rig styles above drive the page. ===== */
/* Gear page: logo shows in the header at the top (there is no big landing logo on this page) */
.page-gear .nav-mark{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
/* room under the fixed header */
.page-gear .rig{padding-top:clamp(132px,11vw,176px);min-height:calc(100vh - 220px)}
/* the page title is the h1 here; same size as the section h2s */
.page-gear .rig h1{font-size:calc(clamp(44px,7vw,104px) * var(--disp-k));margin:0 0 clamp(14px,1.6vw,22px)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
@media (max-width:760px){.page-gear .rig{padding-top:104px}}
/* Gear page: no light landing behind the header, so it wears the dark scrolled bar from the top (same look as the homepage header once scrolled) */
.page-gear .site-header{color:var(--ink);background:rgba(39,39,39,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line)}
.page-gear .nav-mark img{filter:invert(1)}
.page-gear .site-header .btn-ink,.page-gear .site-header:not(.scrolled) .btn-ink{background:#ededed;color:#272727;border-color:#ededed}
/* homepage nav: one more word (GEAR); tighten the link gap a touch on narrower desktops so CONTACT keeps clear of Book */
@media (min-width:761px) and (max-width:1200px){.nav-links{gap:clamp(24px,5vw,110px)}}

/* r17b (8:42 PM, Tyler: "Nav feels uneven"). Desktop: the 6 links sit in equal-width columns mirrored around the centred logo,
   with the same margin both sides (room for Book on the right, matching empty room on the left). */
@media (min-width:761px){
  .nav{position:relative}
  .nav-links{--bookw:110px;position:absolute;left:calc(var(--pad) + var(--bookw));right:calc(var(--pad) + var(--bookw));top:50%;transform:translateY(-50%);
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr)) clamp(110px,14vw,240px) repeat(3,minmax(0,1fr));gap:0!important;justify-items:center;flex:none}
  .nav-links .gap{width:auto!important}
  .nav-book{margin-left:auto}
}

/* ===== r18 (Oct 29 9:03 PM, Tyler): (1) speck under the front landscape: stray matting flecks removed from land-az01(-sm).webp (no CSS);
   (2) seam in the artist strip between Nolen Durham and Brandon Lake: the perfs were two 50% halves each "round"-fitting its own
   whole number of holes, so the join drew a sliver + uneven pitch. Now marquee.js draws the perfs as ONE strip (.perfs) with a fixed
   pitch that wraps at one hole, so the pitch is even everywhere; the text names get the same visible gap as the logos;
   (3) hover/drag/wheel/swipe scrolling: marquee.js drives the track (transform via rAF) on the homepage, so the CSS keyframe is off for
   .credits only (class .js-marq, added by the script; without it the r15b strip still runs). Shop marquee untouched. ===== */
.credits.js-marq .marquee{position:relative;overflow:hidden!important;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.credits.js-marq .marquee-track{animation:none!important;will-change:transform}
.credits.js-marq .marquee-track::before,.credits.js-marq .marquee-track::after{display:none!important}
.credits .marquee .perfs{position:absolute;left:0;top:0;height:100%;width:calc(100% + 4 * var(--perf));pointer-events:none;will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='none'%3E%3Crect x='5' y='0' width='10' height='20' rx='2' fill='%236a6663'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='none'%3E%3Crect x='5' y='0' width='10' height='20' rx='2' fill='%236a6663'/%3E%3C/svg%3E");
  background-size:var(--perf) var(--perf-h),var(--perf) var(--perf-h);
  background-repeat:repeat-x,repeat-x;
  background-position:0 var(--perf-gap),0 calc(100% - var(--perf-gap))}
@media (hover:hover) and (pointer:fine){.credits.js-marq .marquee{cursor:grab}.credits.js-marq .marquee.dragging{cursor:grabbing}}
/* text names (Micah Tyler, Nolen Durham): same visible gap to the stars as the logos */
.credits .marquee span{padding:0 calc(var(--logo-cap) * .6 - .05em)}

/* ===== r19 — stop sideways pan on phones (Oct 30) ===== */
html,body{overflow-x:hidden;max-width:100%;overscroll-behavior-x:none}
@supports (overflow:clip){html,body{overflow-x:clip}}


/* Nov 1: Tour group label under the services intro, matches Production */
.section-tour{margin-top:clamp(40px,5vw,72px)}


/* ===== r21 (Nov 1) — polish pass: smooth wheel, headline reveals, work stills, lazy media. Appended; nothing above edited. ===== */

/* r21 smooth wheel (smooth.js + vendor/lenis): the library's own base rules */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent],.lenis.lenis-smooth [data-lenis-prevent-wheel]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}

/* r21 headline reveal (reveal.js): each line rises out of its own slot. Only headings below the landing get .rl-wait */
.rl{display:block;overflow:hidden;padding:.12em 0 .16em;margin:-.12em 0 -.16em}
.rl-wait .rl-i{display:block;transform:translate3d(0,108%,0);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.rl-wait.rl-in .rl-i{transform:none}
@media (prefers-reduced-motion:reduce){.rl-wait .rl-i{transform:none;transition:none}}

/* r21 work tiles: the best still sits on top; the video fades in only once it is actually playing */
.vt-media .vt-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .35s ease}
.vt-media .vt-still.is-in{opacity:1}
.vt-media video{opacity:0;transition:opacity .25s ease}
.vt-media.is-playing video{opacity:1}
.vt-media video{z-index:1}

/* r21 lazy media: no alt-text flash while an image waits for its turn */
img[data-src]{color:transparent}

/* r21 canyon photo (On the Road + service cards) loads only as that part of the page gets close (lazy-media.js
   adds html.canyon-go). Until then: the cards keep their dark base, the On the Road letters show solid decal red. */
html:not(.canyon-go) .pkg,html:not(.canyon-go) .pkg::before,html:not(.canyon-go) .canyon-fix{background-image:none!important}
html:not(.canyon-go) .knock-win .canyon-fix{background-color:#e3372f}
html:not(.canyon-go) .knock-text:not(.svgclip){background-image:none!important;-webkit-text-fill-color:#e3372f;color:#e3372f}
/* r21b (Nov 1, 11:15 PM): jitter pass. Nothing visual changes.
   - while the smooth wheel runs, the browser's own smooth-scroll never fights it
   - the pinned canyon photo layers (service cards + On the Road) get their own GPU layer, so they stay put without repainting each frame
   - the scrolled header drops its backdrop blur (it sits at 94% opaque, so the blur was invisible) — blur re-renders whatever passes under it every frame, the biggest per-frame cost in Safari */
html.lenis,html.lenis body{scroll-behavior:auto!important}
.canyon-fix,.pkg::before{will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden}
.site-header.scrolled,.page-gear .site-header{-webkit-backdrop-filter:none;backdrop-filter:none}
.layer,.logo-float,.hero-tag[data-depth]{backface-visibility:hidden}
/* ===== end r21 ===== */


/* ===== r23 (Nov 1, 11:52 PM, Tyler): "LET'S GET ROLLING" — bigger heading, letters roll into place like boulders (roll.js).
   The heading now spans the whole booking block (above the intro + form), sized to fill the width:
   one line on desktop, two lines (LET'S GET / ROLLING.) on tablet and phone. Inter 800 as everywhere. ===== */
.book .roll-h{grid-column:1/-1;font-size:min(calc((100vw - 2 * var(--pad)) / 10.1),122px);line-height:.92;
  margin:0 0 calc(22px - clamp(28px,5vw,80px));position:relative}
.book .roll-h .roll-br{display:none}
@media (max-width:1000px){
  .book .roll-h{font-size:min(calc((100vw - 2 * var(--pad)) / 5.15),150px)}
  .book .roll-h .roll-br{display:inline}
}
/* ===== end r23 ===== */

/* ===== r24 (Nov 2, 12:04 AM, Tyler): "LET'S GET" rises in exactly like every other big heading (the r21 .rl/.rl-i reveal),
   then "ROLLING." slides in smoothly from the left out of its own slot and settles. One word, no letters, no rotation, no dust (roll.js v2). ===== */
.book .roll-h{display:flex;flex-wrap:wrap;column-gap:.24em}
.book .roll-h .rl{flex:0 0 auto}
.roll-h .roll-w{overflow:clip}
.roll-h .roll-i{display:block}
.roll-h.rl-wait .roll-i{transform:translate3d(-105%,0,0);opacity:0;
  transition:transform .95s cubic-bezier(.16,1,.3,1) .36s,opacity .6s cubic-bezier(.16,1,.3,1) .36s}
.roll-h.rl-wait.rl-in .roll-i{transform:none;opacity:1}
@media (max-width:1000px){.book .roll-h{display:block}.book .roll-h .rl{display:block}}
@media (prefers-reduced-motion:reduce){.roll-h.rl-wait .roll-i{transform:none;opacity:1;transition:none}}
/* ===== end r24 ===== */

/* ===== r25 (Nov 2, 12:11 AM, Tyler): "Have each letter of 'ROLLING' roll individually into place." Smooth, no boulder feel.
   roll.js v3 splits ROLLING. into letters; each rolls in from the left (travel + matching turn), single file, and settles.
   Undoes the r24 one-word slide. The word stays unbroken; screen readers read the plain word (.roll-sr). ===== */
.roll-h.rl-wait .roll-i{transform:none;opacity:1;transition:none}
.roll-h .roll-i{white-space:nowrap}
.roll-h .roll-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.roll-h .roll-c{display:inline-block;transform-origin:50% 52%;backface-visibility:hidden}
.roll-h.roll-on .roll-w{overflow:visible;overflow-x:clip;padding-right:.25em;margin-right:-.25em}
.roll-h.roll-on.rl-wait:not(.roll-done) .roll-c{opacity:0}
@media (max-width:1000px){
  .roll-h.roll-on .roll-w{margin-left:calc(-1 * var(--pad));padding-left:var(--pad);margin-right:calc(-1 * var(--pad));padding-right:var(--pad)}
}
@media (prefers-reduced-motion:reduce){.roll-h .roll-c{opacity:1!important;transform:none!important}}
/* ===== end r25 ===== */

/* ===== r26 (Nov 2, 12:27 AM, Tyler): "'rolling' jumps up suddenly to the correct place after the animation is finished."
   roll.js v4 no longer swaps anything at the end (no .roll-done, no cancelled animations). Each ROLLING letter keeps its own
   layer from the first frame to forever, resting at the same 3D identity transform as its last keyframe, so the final animated
   frame and the resting heading are the same picture. Letters are hidden only until the heading triggers (.rl-in); from then
   on the animations (fill both) own them. Look, size, timing and placement unchanged. ===== */
.roll-h.roll-on .roll-c{will-change:transform;transform:translate3d(0px,0px,0px) rotate(0deg);vertical-align:baseline}
.roll-h.roll-on.rl-wait.rl-in .roll-c{opacity:1}
@media (prefers-reduced-motion:reduce){.roll-h .roll-c{will-change:auto}}
/* ===== end r26 ===== */

/* ===== r27 (Nov 2, 12:44 AM, Tyler): package titles "slide in from the left with a cool animation like these" (two reels).
   pkgreveal.js v1 splits each .pkg h3 into letters (aria-hidden) beside a plain screen-reader copy (.pr-sr).
   On scroll-in the whole title glides in from the card's left edge (the card's clip-path is the edge, so nothing overflows) while the
   letters type on left to right, 42ms apart: each one arrives stretched and leaning, snaps upright, and lands decal red (#e3372f,
   a solid copy of the letter on top) for ~110ms before it is white. Every animation fills both ways and its last frame equals the resting
   style below, which never changes afterwards: no class is removed and nothing is swapped, so there is no end-snap.
   Only transform and opacity animate. Copy, size, font (Inter 800) and layout unchanged. ===== */
.pkg h3.pr-on{position:relative}
.pkg h3 .pr-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pkg h3 .pr-probe{position:absolute;left:0;top:0;visibility:hidden;white-space:nowrap;pointer-events:none}
.pkg h3 .pr-v{display:inline;}
.pkg h3 .pr-w{display:inline-block;white-space:nowrap}
.pkg h3.pr-on .pr-c{display:inline-block;position:relative;will-change:transform,opacity;transform:translate3d(0px,0px,0px) skewX(0deg) scaleX(1);transform-origin:0 85%;opacity:0}
.pkg h3.pr-on .pr-c::after{content:attr(data-c);position:absolute;left:0;top:0;color:#e3372f;opacity:0;pointer-events:none}
.pkg h3.pr-on.pr-in .pr-c{opacity:1;animation:pr-type .46s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(var(--pr-d,0ms) + var(--i) * 42ms)}
.pkg h3.pr-on.pr-in .pr-c::after{animation:pr-flash .2s linear both;animation-delay:calc(var(--pr-d,0ms) + var(--i) * 42ms)}
.pkg h3.pr-on .pr-w{will-change:transform;transform:translate3d(0px,0px,0px)}
.pkg h3.pr-on.pr-in .pr-w{animation:pr-glide .9s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--pr-d,0ms)}
@keyframes pr-type{
  0%{opacity:0;transform:translate3d(-.32em,0px,0px) skewX(-22deg) scaleX(1.35)}
  .5%{opacity:1}
  100%{opacity:1;transform:translate3d(0px,0px,0px) skewX(0deg) scaleX(1)}
}
@keyframes pr-flash{0%{opacity:1}55%{opacity:1}56%{opacity:0}100%{opacity:0}}
@keyframes pr-glide{0%{transform:translate3d(-1.1em,0px,0px)}100%{transform:translate3d(0px,0px,0px)}}
@media (prefers-reduced-motion:reduce){.pkg h3 .pr-c,.pkg h3 .pr-w{animation:none!important;opacity:1!important;transform:none!important;will-change:auto}.pkg h3 .pr-c::after{display:none}}
/* ===== end r27 ===== */

/* ===== Nov 5: nav jumps land more centered (more space above each section) ===== */
#work,#services,#shop,#about,#contact,#book{scroll-margin-top:clamp(110px,20vh,220px)!important}
@media (max-width:760px){#work,#services,#shop,#about,#contact,#book{scroll-margin-top:clamp(80px,14vh,140px)!important}}

/* ===== Nov 5b: Work + Services land higher (their own top padding already adds space) ===== */
#work,#services{scroll-margin-top:clamp(60px,8vh,90px)!important}
@media (max-width:760px){#work,#services{scroll-margin-top:clamp(50px,7vh,70px)!important}}

/* ===== Nov 5c: About lands flush so the red shop section above doesn't peek in ===== */
#about{scroll-margin-top:0!important}

/* ===== Nov 5d: About + Contact on solid cream with black text (like the light sections, no texture) ===== */
.about,.contact{--ink:#0b0b0b;background:#f3eee4!important;background-image:none!important;color:#0b0b0b}
.about h1,.about h2,.about h3,.about p,.about li,.about figcaption,.about .eyebrow,.about span,
.contact h2,.contact h3,.contact p,.contact label,.contact .eyebrow{color:#0b0b0b!important}
.about a:not(.btn),.contact a:not(.btn){color:#0b0b0b!important}
.contact .form input,.contact .form textarea,.contact .form select{background:#fffdf8!important;color:#0b0b0b!important;border:1.5px solid #0b0b0b!important}
.contact .form input::placeholder,.contact .form textarea::placeholder{color:rgba(11,11,11,.45)!important}