/* ============================================================
   BELLBOTTOMS DESIGN LAB — retro / playful-brutalist system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* 70s warm palette */
  --paper:    #F2E8D2;
  --paper-2:  #EADFC4;
  --ink:      #1C1712;
  --ink-soft: #423a2e;
  --mustard:  #E7A427;
  --orange:   #8B0D19;
  --avocado:  #6E7A38;
  --teal:     #2C6E68;
  --pink:     #E0577F;
  --cream:    #FBF5E6;

  --bg:   var(--paper);
  --fg:   var(--ink);
  --line: var(--ink);

  --ff-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --ff-serif:   'Instrument Serif', Georgia, serif;
  --ff-body:    'Space Grotesk', system-ui, sans-serif;
  --ff-mono:    'DM Mono', ui-monospace, monospace;

  --maxw: 1240px;
  --gut: clamp(16px, 4vw, 56px);
  --border: 2.5px solid var(--line);
  --shadow: 6px 6px 0 var(--ink);
  --radius: 14px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* lights-off / accessible high-contrast dark mode */
body.lights-off {
  --paper:#15120d; --paper-2:#1d1a13; --cream:#211d15;
  --ink:#F4ECD8; --ink-soft:#cbbfa6; --line:#F4ECD8;
  --bg:#15120d; --fg:#F4ECD8;
  --orange:#D2552A;
  --shadow: 6px 6px 0 #000;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--ff-body);
  background:var(--bg);
  color:var(--fg);
  font-size:17px; line-height:1.55;
  overflow-x:hidden;
  transition: background .5s var(--ease), color .5s var(--ease);
  cursor: url("assets/brand/cur-arrow.png") 2 2, auto;          /* classic XP arrow */
}
/* classic pointing hand on anything clickable */
a, button, [role="button"], .work-row, [data-locked], .lights-btn, .toggle, summary, label[for] {
  cursor: url("assets/brand/cur-hand.png") 10 2, pointer;
}
@media (hover:none){ body{cursor:auto;} }
img,video { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; border:none; background:none; }
::selection { background:var(--orange); color:var(--cream); }

/* film grain over everything */
body::after {
  content:''; position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}
body.lights-off::after { mix-blend-mode:screen; opacity:.35; }

/* paper texture (Texturelabs Paper 349, high-passed) — soft-light keeps tone neutral, adds fiber */
body::before {
  content:''; position:fixed; inset:0; z-index:8999; pointer-events:none;
  background:url("assets/brand/paper.webp") center/cover no-repeat;
  mix-blend-mode:soft-light; opacity:.9;
}
body.lights-off::before { mix-blend-mode:soft-light; opacity:.6; }

/* ---------- custom cursor ---------- */
.cursor {
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:14px; height:14px; border-radius:50%;
  background:var(--orange);
  transform:translate(-50%,-50%);
  transition:width .18s var(--ease),height .18s var(--ease),background .18s,border-radius .18s;
  mix-blend-mode:difference;
}
.cursor::after{
  content:attr(data-label);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.05em; color:var(--cream);
  text-transform:uppercase; opacity:0; transition:opacity .15s; white-space:nowrap;
}
.cursor.lg { width:74px; height:74px; background:var(--teal); mix-blend-mode:normal; }
.cursor.lg::after{ opacity:1; }
.cursor.drag { width:84px; height:84px; background:var(--pink); mix-blend-mode:normal; }
.cursor.drag::after{ opacity:1; }
.cursor.link { width:46px; height:46px; background:var(--mustard); mix-blend-mode:normal; }
.cursor.link::after{ opacity:1; color:var(--ink); }
@media (hover:none){ .cursor{display:none;} }

/* ---------- layout helpers ---------- */
.wrap { max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.mono { font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.serif-it { font-family:var(--ff-serif); font-style:italic; }

.tag {
  display:inline-block; font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.3em .7em; border:var(--border); border-radius:999px;
  background:var(--cream); white-space:nowrap;
}
.tag.fill-ink{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.tag.fill-mustard{ background:var(--mustard); }
.tag.fill-orange{ background:var(--orange); color:var(--cream); }
.tag.fill-teal{ background:var(--teal); color:var(--cream); }
.tag.fill-avocado{ background:var(--avocado); color:var(--cream); }
.tag.fill-pink{ background:var(--pink); color:var(--cream); }

/* ---------- top bar ---------- */
.bar {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--gut);
  border-bottom:var(--border); background:var(--bg);
  transition:transform .35s var(--ease), background .5s var(--ease);
}
.bar.hide { transform:translateY(-105%); }
.bar .brand { font-family:var(--ff-display); font-weight:800; font-size:1.05rem; letter-spacing:-.02em; display:flex; align-items:center; gap:.5ch; }
.bar .brand .dot { width:12px; height:12px; border-radius:50%; background:var(--orange); display:inline-block; animation:spin 6s linear infinite; }
.bar .brand .dot::after{ content:''; position:absolute; }
.bar .brand img { height:28px; width:auto; display:block; }
.bar .brand .logo-dark { display:none; }
body.lights-off .bar .brand .logo-light { display:none; }
body.lights-off .bar .brand .logo-dark { display:block; }

/* "available on request" toast */
.toast {
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(calc(100% + 80px));
  z-index:400; background:var(--ink); color:var(--cream);
  border:var(--border); border-color:var(--mustard); border-radius:999px;
  padding:.85em 1.5em; box-shadow:var(--shadow);
  font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  display:flex; align-items:center; gap:1ch; white-space:nowrap; max-width:92vw;
  transition:transform .4s var(--ease); pointer-events:none;
}
.toast.show{ transform:translateX(-50%) translateY(0); pointer-events:auto; }
.toast a{ color:var(--mustard); text-decoration:underline; text-underline-offset:3px; pointer-events:auto; }

/* locked work rows — present but not navigable */
.work-row.locked{ cursor: url("assets/brand/cur-hand.png") 10 2, pointer; }
.work-row.locked .lock { font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); display:inline-flex; align-items:center; gap:.5ch; }
.bar nav { display:flex; gap:clamp(10px,2vw,26px); align-items:center; }
.bar nav a { font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; position:relative; }
.bar nav a::after{ content:''; position:absolute; left:0; right:100%; bottom:-4px; height:2px; background:var(--orange); transition:right .3s var(--ease); }
.bar nav a:hover::after{ right:0; }
.book-cta { font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; border:var(--border); border-radius:999px; padding:.5em 1.1em; background:var(--orange); color:var(--cream); box-shadow:3px 3px 0 var(--ink); transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.book-cta:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.book-cta::after{ content:none; }
.foot-book { display:inline-block; margin-top:34px; font-family:var(--ff-display); font-weight:800; font-size:clamp(1.1rem,3vw,1.7rem); text-transform:uppercase; letter-spacing:-.01em; background:var(--mustard); color:#1C1712; border:2.5px solid var(--mustard); border-radius:999px; padding:.6em 1.4em; box-shadow:6px 6px 0 var(--orange); transition:transform .2s var(--ease); }
.foot-book:hover { transform:translate(-3px,-3px); }
.lights-btn { display:flex; align-items:center; justify-content:center; width:42px; height:42px; padding:0; border:var(--border); border-radius:999px; background:var(--cream); transition:transform .18s var(--ease), background .3s var(--ease); }
.lights-btn:hover { transform:rotate(-12deg); }
.lights-btn .ico { width:19px; height:19px; }
.ico-sun { fill:none; stroke:var(--mustard); stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.ico-moon { display:none; fill:var(--fg); stroke:none; }
body.lights-off .lights-btn { background:var(--paper-2); }
body.lights-off .ico-sun { display:none; }
body.lights-off .ico-moon { display:block; }

/* ---------- hero ---------- */
.hero { padding:140px 0 40px; position:relative; }
.hero .kicker { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
.hero h1 {
  font-family:var(--ff-display); font-weight:800; line-height:.92; letter-spacing:-.03em;
  font-size:clamp(3.2rem, 12vw, 11rem); text-transform:uppercase;
}
.hero h1 .swap { color:var(--orange); }
.hero h1 em { font-family:var(--ff-serif); font-style:italic; font-weight:400; text-transform:none; color:var(--teal); }
.hero .lede {
  font-family:var(--ff-serif); font-size:clamp(1.5rem,3.5vw,2.6rem); line-height:1.25;
  max-width:18ch; margin-top:30px;
}
.hero .lede .hl { font-style:italic; color:var(--orange); position:relative; }
.hero .meta { display:flex; flex-wrap:wrap; gap:24px; margin-top:42px; align-items:flex-end; }
.hero .meta .num { font-family:var(--ff-display); font-weight:800; font-size:2.4rem; line-height:1; }
.hero .meta .lbl { font-family:var(--ff-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); }
.marquee-wrap { overflow:hidden; border-block:var(--border); margin-top:60px; background:var(--mustard); }
body.lights-off .marquee-wrap{ background:var(--teal); }
.marquee { display:flex; gap:2.5rem; white-space:nowrap; padding:12px 0; font-family:var(--ff-display); font-weight:700; font-size:1.4rem; text-transform:uppercase; animation:scroll-x 28s linear infinite; }
.marquee span { display:inline-flex; align-items:center; gap:2.5rem; }
.marquee span::after{ content:'✺'; color:var(--orange); }

/* ---------- work index ---------- */
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin:90px 0 30px; flex-wrap:wrap; }
.section-head h2 { font-family:var(--ff-display); font-weight:800; font-size:clamp(2rem,6vw,4rem); text-transform:uppercase; letter-spacing:-.02em; line-height:.95; }
.section-head p { font-family:var(--ff-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; max-width:30ch; color:var(--ink-soft); }

.work-list { display:flex; flex-direction:column; border-top:var(--border); }
.work-row {
  display:grid; grid-template-columns: 56px 1fr auto; align-items:center; gap:24px;
  padding:26px 8px; border-bottom:var(--border); position:relative;
  transition:background .25s var(--ease), padding .3s var(--ease);
}
.work-row:hover { background:var(--cream); padding-left:22px; }
.work-row .idx { font-family:var(--ff-mono); font-size:.8rem; color:var(--ink-soft); }
.work-row .ttl { font-family:var(--ff-display); font-weight:700; font-size:clamp(1.3rem,3.2vw,2.4rem); line-height:1.02; letter-spacing:-.01em; }
.work-row .ttl .star { color:var(--orange); }
.work-row .rt { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; max-width:340px; }

/* hover flipbook preview that follows pointer */
.peek {
  position:fixed; z-index:150; width:300px; aspect-ratio:4/3; pointer-events:none;
  border:var(--border); border-radius:10px; overflow:hidden; box-shadow:var(--shadow);
  opacity:0; transform:scale(.7) rotate(-4deg); transition:opacity .18s, transform .18s var(--ease);
  background:var(--cream);
}
.peek.show { opacity:1; transform:scale(1) rotate(-3deg); }
.peek img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; opacity:0; }
.peek img.on { opacity:1; }
.peek .frameno { position:absolute; bottom:6px; right:8px; z-index:2; }

/* ---------- about strip ---------- */
.about { padding:90px 0; }
.about .big { font-family:var(--ff-serif); font-size:clamp(1.6rem,4.5vw,3.2rem); line-height:1.18; max-width:24ch; }
.about .big em { color:var(--orange); }
.about-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px; margin-top:50px; }
.about-card { border:var(--border); border-radius:var(--radius); padding:22px; background:var(--cream); box-shadow:var(--shadow); }
.about-card h4 { font-family:var(--ff-display); font-weight:800; font-size:1.1rem; text-transform:uppercase; margin-bottom:8px; }
.about-card p { font-size:.95rem; color:var(--ink-soft); }

/* ---------- meet the founder ---------- */
.founder { display:grid; grid-template-columns:minmax(260px,.85fr) 1.15fr; gap:clamp(24px,5vw,56px); align-items:center; margin-top:64px; border:var(--border); border-radius:var(--radius); padding:clamp(20px,4vw,44px); background:var(--cream); box-shadow:var(--shadow); }
@media(max-width:760px){ .founder{ grid-template-columns:1fr; } }
.founder-photo { position:relative; border:var(--border); border-radius:var(--radius); overflow:hidden; background:#8B0D19; box-shadow:5px 5px 0 var(--ink); aspect-ratio:4/5; }
.founder-photo img { width:100%; height:100%; display:block; object-fit:cover; object-position:top center; filter:contrast(1.03); }
.founder-photo { transform-style:preserve-3d; will-change:transform; }
.founder-photo .tilt-glare { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s var(--ease); mix-blend-mode:screen; border-radius:inherit; }
.founder-badge { position:absolute; left:14px; bottom:14px; font-family:var(--ff-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.12em; background:var(--paper); color:var(--ink); border:var(--border); border-radius:999px; padding:.45em 1em; }
.founder-copy h3 { font-family:var(--ff-display); font-weight:800; font-size:clamp(1.8rem,4.5vw,2.9rem); line-height:1.02; letter-spacing:-.02em; margin:14px 0 16px; text-transform:uppercase; }
.founder-copy h3 em { color:var(--orange); font-style:italic; font-family:var(--ff-serif); text-transform:none; font-weight:400; }
.founder-copy p { color:var(--ink-soft); max-width:54ch; margin-bottom:12px; }
.founder-copy p strong { color:var(--fg); }
.founder-copy p em { color:var(--orange); font-style:italic; }
.off-record { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:20px; }
.off-record .orx { font-family:var(--ff-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-soft); margin-right:4px; }
.rec-tag { font-family:var(--ff-mono); font-size:.72rem; border:2px solid var(--ink); border-radius:999px; padding:.35em .85em; background:var(--paper); transition:transform .15s var(--ease), background .15s var(--ease); }
.rec-tag:hover { transform:rotate(-2deg); background:var(--mustard); }

/* ---------- delete-60 demo ---------- */
.demo { border:var(--border); border-radius:var(--radius); padding:clamp(20px,4vw,46px); background:var(--cream); box-shadow:var(--shadow); margin-top:40px; overflow:hidden; }
.demo h3 { font-family:var(--ff-display); font-weight:800; font-size:clamp(1.4rem,3.5vw,2.2rem); text-transform:uppercase; line-height:1; }
.demo .sub { font-family:var(--ff-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); margin-top:6px; }
.demo-stage { display:grid; grid-template-columns:200px 1fr; gap:28px; margin-top:28px; align-items:center; }
@media(max-width:680px){ .demo-stage{ grid-template-columns:1fr; } }
.phone { border:var(--border); border-radius:26px; background:var(--paper); padding:14px 10px; box-shadow:var(--shadow); aspect-ratio:9/17; display:flex; flex-direction:column; gap:8px; }
.phone .el { border:2px solid var(--ink); border-radius:8px; background:var(--paper-2); height:26px; transition:opacity .4s var(--ease), transform .4s var(--ease), height .4s var(--ease); }
.phone .el.tall{ flex:1; }
.phone .el.keep{ background:var(--mustard); }
.demo.stripped .phone .el.noise{ opacity:0; transform:scale(.7); height:0; margin:-4px 0; }
.demo .switch-row{ display:flex; align-items:center; gap:16px; }
.demo .counter{ font-family:var(--ff-display); font-weight:800; font-size:clamp(2.4rem,8vw,5rem); line-height:1; color:var(--orange); }

/* big toggle switch */
.toggle { width:84px; height:44px; border:var(--border); border-radius:999px; background:var(--paper-2); position:relative; flex:0 0 auto; transition:background .3s; }
.toggle .knob{ position:absolute; top:3px; left:3px; width:34px; height:34px; border-radius:50%; background:var(--ink); transition:left .3s var(--ease), background .3s; }
.demo.stripped .toggle{ background:var(--avocado); }
.demo.stripped .toggle .knob{ left:43px; }

/* ---------- footer / contact ---------- */
.foot { border-top:var(--border); background:var(--ink); color:#FBF5E6; padding:90px 0 50px; margin-top:90px; }
body.lights-off .foot{ background:#000; }
.foot h2 { font-family:var(--ff-display); font-weight:800; font-size:clamp(2.6rem,11vw,9rem); text-transform:uppercase; line-height:.86; letter-spacing:-.03em; }
.foot h2 em{ font-family:var(--ff-serif); font-style:italic; font-weight:400; color:var(--mustard); }
.foot .links { display:flex; flex-wrap:wrap; gap:14px; margin-top:40px; }
.foot .links a { border:2.5px solid #FBF5E6; border-radius:999px; padding:.6em 1.3em; font-family:var(--ff-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; transition:background .25s, color .25s; display:inline-flex; gap:.6ch; align-items:center; }
.foot .links a:hover { background:var(--mustard); color:#1C1712; border-color:var(--mustard); }
.foot .credit { margin-top:60px; font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.06em; color:#bbae93; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ============================================================
   CASE STUDY PAGE
   ============================================================ */
.cs-hero { padding:130px 0 50px; border-bottom:var(--border); }
.cs-hero .back { font-family:var(--ff-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; display:inline-flex; gap:.5ch; align-items:center; margin-bottom:30px; }
.cs-hero .back:hover{ color:var(--orange); }
.cs-hero h1 { font-family:var(--ff-display); font-weight:800; font-size:clamp(2.4rem,7vw,6rem); line-height:.95; letter-spacing:-.02em; max-width:16ch; }
.cs-hero h1 .star{ color:var(--orange); }
.cs-meta { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.cs-proto { display:inline-flex; align-items:center; gap:.6ch; margin-top:30px; border:var(--border); background:var(--mustard); border-radius:999px; padding:.7em 1.4em; font-family:var(--ff-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; box-shadow:var(--shadow); transition:transform .2s var(--ease); }
.cs-proto:hover{ transform:translate(-2px,-2px); }

.cs-body { padding:60px 0 40px; }
.cs-body .col { max-width:760px; margin:0 auto; }
.cs-body h2 { font-family:var(--ff-display); font-weight:800; font-size:clamp(1.6rem,4vw,2.8rem); text-transform:uppercase; line-height:1; letter-spacing:-.01em; margin:54px 0 16px; }
.cs-body h2::before{ content:''; display:block; width:46px; height:6px; background:var(--orange); margin-bottom:18px; }
.cs-body h3 { font-family:var(--ff-display); font-weight:700; font-size:clamp(1.3rem,3vw,1.9rem); margin:38px 0 12px; }
.cs-body h4 { font-family:var(--ff-display); font-weight:700; font-size:1.2rem; margin:28px 0 10px; }
.cs-body p { font-size:1.12rem; line-height:1.7; margin:0 0 18px; color:var(--ink-soft); }
.cs-body p strong{ color:var(--fg); }
.cs-body a { color:var(--orange); text-decoration:underline; text-underline-offset:3px; }
.cs-body ul { margin:0 0 18px 1.1em; }
.cs-body li { margin-bottom:8px; font-size:1.1rem; color:var(--ink-soft); }
.cs-body blockquote { border-left:6px solid var(--orange); padding:6px 0 6px 24px; margin:28px 0; font-family:var(--ff-serif); font-style:italic; font-size:1.6rem; line-height:1.3; color:var(--fg); }
.cs-body .callout { border:var(--border); border-radius:var(--radius); background:var(--cream); padding:20px 24px; margin:26px 0; box-shadow:var(--shadow); font-size:1.05rem; }
.cs-body hr { border:none; border-top:var(--border); margin:46px 0; }

/* images break out wider than text column */
.cs-fig { margin:34px auto; max-width:1000px; }
.cs-fig img, .cs-fig video { width:100%; border:var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.cs-fig figcaption{ font-family:var(--ff-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-top:10px; text-align:center; }

/* scroll reveal — develop-from-grain */
.reveal { opacity:0; transform:translateY(26px); filter:blur(6px); transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); }
.reveal.in { opacity:1; transform:none; filter:none; }

/* reading progress */
.progress { position:fixed; top:0; left:0; height:5px; width:0; background:var(--orange); z-index:300; transition:width .1s linear; }

/* next project */
.cs-next { border-top:var(--border); padding:70px 0; }
.cs-next a { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.cs-next .lbl{ font-family:var(--ff-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); }
.cs-next .nm{ font-family:var(--ff-display); font-weight:800; font-size:clamp(1.6rem,5vw,3.4rem); text-transform:uppercase; line-height:.95; letter-spacing:-.02em; transition:color .2s; }
.cs-next a:hover .nm{ color:var(--orange); }

@keyframes spin{ to{ transform:rotate(360deg);} }
@keyframes scroll-x{ to{ transform:translateX(-50%);} }

/* drag gallery */
.gallery-wrap{ margin:50px 0; }
.gallery { display:flex; gap:18px; overflow-x:auto; padding:10px 0 26px; scroll-snap-type:x mandatory; cursor:grab; scrollbar-width:none; }
.gallery.dragging{ cursor:grabbing; }
.gallery::-webkit-scrollbar{ display:none; }
.gallery.dragging{ scroll-snap-type:none; }
.gallery .slide { flex:0 0 auto; width:min(74vw,460px); scroll-snap-align:center; border:var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--cream); user-select:none; }
.gallery .slide img{ width:100%; height:100%; object-fit:cover; pointer-events:none; }

@media (max-width:760px){
  .work-row{ grid-template-columns:34px 1fr; }
  .work-row .rt{ display:none; }
  body{ cursor:auto; } .cursor{ display:none; }
  button,a{ cursor:auto; }
  .bar{ padding:12px 18px; }
  .bar .brand .serif-it{ display:none; }
  .bar nav{ gap:14px; }
}

.book-cta .cta-short{ display:none; }

/* compact mobile nav */
@media (max-width:620px){
  .bar{ padding:10px 14px; gap:8px; }
  .bar .brand{ flex:0 0 auto; }                 /* never squish the logo */
  .bar .brand img{ height:20px; width:auto; max-width:none; flex:none; }
  .bar nav{ gap:8px; flex:0 0 auto; }
  .bar nav a:not(.book-cta){ display:none; }     /* drop Work/About text links */
  .lights-btn{ width:38px; height:38px; }
  .book-cta{ font-size:.64rem; padding:.5em .9em; white-space:nowrap; box-shadow:2px 2px 0 var(--ink); }
  .book-cta .cta-full{ display:none; }
  .book-cta .cta-short{ display:inline; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; filter:none; }
  .marquee{ animation:none; }
  .bar .brand .dot{ animation:none; }
}