/* ============================================================
   MIND OF MILLER — design system
   cream paper · terracotta frame · hand-inked line art
   photographs pinned into the drawing as physical objects
   ============================================================ */

:root{
  --cream:      #FDF6D2;
  --cream-2:    #F8EDBE;
  --orange:     #E6754B;
  --orange-dp:  #C9542F;
  --ink:        #33241B;
  --ink-soft:   #6B5748;
  --pink:       #E9738F;
  --rose:       #F5AFA8;
  --mustard:    #F0C24B;
  --sage:       #93B58C;
  --sky:        #86B7D8;
  --frame:      18px;

  --display: 'Anton', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --script:  'Caveat Brush', 'Bradley Hand', cursive;
  --body:    'Poppins', 'Avenir Next', 'Segoe UI', sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background: var(--orange);
  color: var(--ink);
  font-family: var(--body);
  font-size:17px; line-height:1.6;
  overflow-x:hidden;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='9' fill='none' stroke='%2333241B' stroke-width='2.5'/%3E%3Cline x1='20' y1='20' x2='26' y2='26' stroke='%2333241B' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") 14 14, auto;
}
a{ color:inherit; }
::selection{ background:var(--mustard); color:var(--ink); }

/* --- the terracotta frame --- */
.frame{ position:fixed; inset:0; z-index:90; pointer-events:none; border:var(--frame) solid var(--orange); }
.frame::after{ content:''; position:absolute; inset:0; box-shadow: inset 0 0 0 2px rgba(51,36,27,.16); }

.paper{
  position:relative; margin:var(--frame);
  background:var(--cream);
  min-height:calc(100vh - var(--frame)*2);
  overflow:hidden;
}
.paper::before{ /* paper grain */
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

/* ======================= PHOTO TREATMENT =======================
   Every photo is warmed toward the palette and framed like a
   physical object, so it joins the drawing instead of sitting
   on top of it.                                                  */
.ph{ position:relative; line-height:0; border-radius:3px; overflow:hidden; display:block; }
.ph img{ display:block; width:100%; height:100%; object-fit:cover; filter: saturate(.93) contrast(1.03); }
.ph::after{ content:''; position:absolute; inset:0; pointer-events:none; background:var(--orange); opacity:.11; mix-blend-mode:multiply; }

/* a taped snapshot */
.snap{
  background:var(--cream); border:2.5px solid var(--ink); border-radius:7px;
  padding:8px 8px 28px; position:relative;
  box-shadow: 5px 6px 0 rgba(51,36,27,.22);
}
.snap::before{ /* strip of tape */
  content:''; position:absolute; top:-10px; left:50%;
  transform:translateX(-50%) rotate(-2.5deg);
  width:62px; height:19px;
  background:rgba(240,194,75,.72); border:1.5px solid rgba(51,36,27,.28);
}
.snap b{
  position:absolute; left:0; right:0; bottom:5px; text-align:center;
  font-family:var(--script); font-weight:400; font-size:15px; color:var(--ink-soft);
}

/* ============================ NAV ============================ */
.topbar{
  position:fixed; top:calc(var(--frame) + 14px);
  left:calc(var(--frame) + 16px); right:calc(var(--frame) + 16px);
  z-index:80; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:9px 10px 9px 14px;
  background:var(--cream); border:2.5px solid var(--ink); border-radius:99px;
  box-shadow:0 5px 0 rgba(51,36,27,.18);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.topbar.tucked{ transform: translateY(calc(-100% - var(--frame) - 22px)); }

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand .mark{
  width:38px; height:38px; border-radius:50%;
  background:var(--orange); color:var(--cream);
  display:grid; place-items:center;
  font-family:var(--display); font-size:22px; line-height:1; padding-top:2px;
  box-shadow:0 0 0 2.5px var(--ink);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.brand:hover .mark{ transform: rotate(-12deg) scale(1.08); }
.brand b{ font-family:var(--display); font-size:19px; letter-spacing:.06em; font-weight:400; }

.menu{ display:flex; gap:4px; align-items:center; }
.menu a{
  font-size:13.5px; font-weight:600; letter-spacing:.02em;
  text-decoration:none; padding:9px 14px; border-radius:99px;
  transition: color .2s ease, background .2s ease;
}
.menu a:hover{ color:var(--cream); background:var(--orange); }
.menu a.here{ background:var(--mustard); }
.menu a.here:hover{ color:var(--ink); }
.menu a.cta{ background:var(--ink); color:var(--cream); }
.menu a.cta:hover{ background:var(--orange); }
.burger{ display:none; }

/* ============================ BUTTONS ============================ */
.btn{
  font-family:var(--body); font-weight:800; font-size:14px; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none;
  padding:15px 30px; border-radius:99px; border:2.5px solid var(--ink);
  background:var(--orange); color:var(--cream);
  box-shadow:0 5px 0 var(--ink);
  transition: transform .16s ease, box-shadow .16s ease, background .2s ease;
  display:inline-block;
}
.btn:hover{ transform:translateY(3px); box-shadow:0 2px 0 var(--ink); }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.ghost:hover{ background:var(--mustard); }
.btn.small{ padding:11px 22px; font-size:12.5px; }

/* ============================ TYPE ============================ */
.kicker{
  font-family:var(--script);
  font-size:clamp(26px,3.4vw,44px);
  color:var(--orange);
  transform:rotate(-3deg);
  display:inline-block; margin-bottom:-2px;
}
h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(52px,10.4vw,142px);
  line-height:.88; letter-spacing:.005em;
  color:var(--orange); text-transform:uppercase;
  -webkit-text-stroke:2.5px var(--ink); paint-order: stroke fill;
  text-shadow:5px 6px 0 rgba(51,36,27,.10);
}
h1 span{ display:block; }
h2{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(34px,5.4vw,68px); line-height:.95; letter-spacing:.01em;
  color:var(--ink);
}
h3{ font-family:var(--display); font-weight:400; font-size:25px; letter-spacing:.02em; text-transform:uppercase; }

/* ============================ HOME HERO ============================ */
.hero{
  position:relative; z-index:2;
  min-height:calc(100vh - var(--frame)*2);
  display:grid; place-items:center; text-align:center;
  padding:130px 24px 96px;
}
.hero-copy{ position:relative; z-index:6; }
.tagline{ margin:22px auto 0; max-width:32ch; font-size:clamp(15px,1.6vw,19px); font-weight:600; color:var(--ink-soft); }
.hero-actions{ margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* --- floating objects: drawings AND photographs --- */
.spy{ position:absolute; z-index:3; will-change:transform; animation: bob 6s ease-in-out infinite; }
.spy.draw{ filter:url(#inkwobble); }
.spy svg{ display:block; overflow:visible; }
.spy .lbl{
  position:absolute; left:50%; bottom:-16px; transform:translate(-50%,6px);
  font-family:var(--script); font-size:19px; color:var(--ink);
  background:var(--mustard); border:2px solid var(--ink); border-radius:99px;
  padding:1px 12px 3px; white-space:nowrap; z-index:5;
  opacity:0; pointer-events:none; transition: opacity .22s ease, transform .22s ease;
}
.spy:hover .lbl{ opacity:1; transform:translate(-50%,0); }
.spy > a{ display:block; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.spy:hover > a{ transform: rotate(-5deg) scale(1.07); }
.spy .snap{ width:100%; }

@keyframes bob{ 0%,100%{ translate:0 0 } 50%{ translate:0 -13px } }
.spy:nth-child(2n){ animation-duration:7.4s; animation-delay:-1.2s }
.spy:nth-child(3n){ animation-duration:8.2s; animation-delay:-2.6s }

.s-nasdaq{ top:11%; left:3.5%; width:206px; rotate:-4deg; }
.s-travel{ top:10%; right:4%;  width:198px; rotate:5deg; }
.s-xmas  { bottom:7%; left:6.5%; width:190px; rotate:3deg; }
.s-rocket{ bottom:31%; left:2%; }
.s-globe { top:46%; right:2.5%; }
.s-tree  { bottom:8%; right:7%; }
.s-sun   { top:17%; left:26%; }

.scroll-hint{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:6;
  font-family:var(--script); font-size:17px; color:var(--orange-dp);
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.scroll-hint i{ display:block; width:2px; height:26px; background:var(--orange); animation: drop 1.7s ease-in-out infinite; }
@keyframes drop{ 0%,100%{ transform:scaleY(.4); opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }

/* ==================== INTERIOR PAGE HEAD ====================
   A shorter cousin of the home hero: same frame, same drifting
   drawings, but sized so the content below it stays above the fold. */
.pagehead{
  position:relative; z-index:2; text-align:center;
  padding:170px 6vw 76px;
  overflow:hidden;
}
.pagehead h1{ font-size:clamp(44px,8vw,104px); }
.pagehead .lede{ margin:22px auto 0; max-width:56ch; font-size:17px; font-weight:600; color:var(--ink-soft); }
.pagehead .btn{ margin-top:28px; }
.pagehead .spy{ animation-duration:7s; }
.ph-1{ top:34%; left:5%; }
.ph-2{ top:24%; right:6%; }
.ph-3{ bottom:12%; right:16%; }
.ph-4{ bottom:16%; left:15%; }

.crumbs{ position:relative; z-index:4; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:14px; }
.crumbs a{ text-decoration:none; border-bottom:2px solid var(--mustard); }
.crumbs a:hover{ color:var(--orange-dp); }

/* ============================ BANDS ============================ */
.band{ position:relative; z-index:2; padding:96px 6vw; }
.band.tone{ background:var(--cream-2); }
.band.ink{ background:var(--ink); color:var(--cream); }
.band.tight{ padding-top:56px; }

.sec-head{ text-align:center; margin-bottom:52px; }
.sec-head .kicker{ font-size:clamp(22px,2.4vw,32px); margin-bottom:2px; }
.band.ink .sec-head .kicker{ color:var(--mustard); }
.band.ink h2{ color:var(--cream); }
.sec-head p{ margin:14px auto 0; max-width:56ch; font-size:16px; color:var(--ink-soft); }
.band.ink .sec-head p{ color:rgba(253,246,210,.78); }

.wrap{ max-width:1180px; margin:0 auto; }
.narrow{ max-width:760px; margin:0 auto; }

/* prose */
.prose p{ font-size:17.5px; color:var(--ink-soft); margin-bottom:18px; }
.prose p.big{ font-size:20px; color:var(--ink); font-weight:600; }
.band.ink .prose p{ color:rgba(253,246,210,.82); }

/* ------------- about ------------- */
.about{ max-width:1060px; margin:0 auto; display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:center; }
.about .snap{ rotate:-2.5deg; }
.about h2{ font-size:clamp(30px,4vw,52px); }
.about p{ margin-top:14px; color:var(--ink-soft); font-size:16.5px; }
.stats{ display:flex; gap:26px; flex-wrap:wrap; margin-top:26px; }
.stat b{ display:block; font-family:var(--display); font-weight:400; font-size:40px; line-height:1; color:var(--orange); }
.stat span{ font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); }

/* ------------- project cards ------------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:26px; max-width:1180px; margin:0 auto; }
.card{
  position:relative; background:var(--cream); color:var(--ink);
  border:2.5px solid var(--ink); border-radius:20px; padding:14px 14px 22px;
  box-shadow:7px 8px 0 var(--ink); text-decoration:none; display:block;
  transition: transform .22s ease, box-shadow .22s ease;
}
.card:hover{ transform:translate(4px,5px); box-shadow:3px 3px 0 var(--ink); }
.card .shot{ height:168px; border:2.5px solid var(--ink); border-radius:12px; overflow:hidden; background:#fff; margin-bottom:16px; }
.card .shot.logo{ background:var(--cream); padding:16px; }
.card .shot.logo img{ display:block; width:100%; height:100%; object-fit:contain; }
.card .txt{ padding:0 9px; }
.card p{ font-size:14.5px; color:var(--ink-soft); margin-top:7px; }
.tag{
  position:absolute; top:-13px; right:18px; z-index:2;
  font-weight:800; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--sage); color:var(--ink); border:2px solid var(--ink); border-radius:99px; padding:3px 11px;
}
.tag.live{ background:var(--mustard); }
.tag.exit{ background:var(--sky); }

/* ------------- travel ------------- */
.strip{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1.1fr; gap:52px; align-items:center; }
.strip h2, .strip .kicker{ text-align:left; }
.strip > div > p{ color:var(--ink-soft); margin-top:14px; max-width:46ch; }
.strip ul{ list-style:none; margin:20px 0 26px; display:flex; flex-wrap:wrap; gap:9px; }
.strip li{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:600; background:var(--cream); color:var(--ink);
  border:2px solid var(--ink); border-radius:99px; padding:6px 14px;
}
.strip li em{ font-style:normal; font-size:15px; line-height:1; }
.strip li a{ text-decoration:none; }
.strip li:has(a){ transition: background .18s ease, transform .18s ease; }
.strip li:has(a):hover{ background:var(--mustard); transform:translateY(-2px); }
.collage{ position:relative; }
.collage .big{ rotate:-2deg; }
.collage .big b{ text-align:left; padding-left:16px; } /* clear of the map pinned over the corner */
.collage .small{ position:absolute; right:-14px; bottom:-42px; width:46%; rotate:6deg; z-index:2; }
@media (min-width:901px){ .collage .small{ bottom:-56px } }

/* country chips */
.countries{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:1080px; margin:0 auto; }
.cty{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; text-decoration:none;
  background:var(--cream); color:var(--ink);
  border:2.5px solid var(--ink); border-radius:99px; padding:8px 16px;
  box-shadow:3px 4px 0 rgba(51,36,27,.18);
  transition: transform .16s ease, box-shadow .16s ease, background .2s ease;
}
a.cty:hover{ background:var(--mustard); transform:translate(2px,3px); box-shadow:1px 1px 0 rgba(51,36,27,.18); }
.cty.plain{ background:transparent; border-style:dashed; box-shadow:none; color:var(--ink-soft); }
.cty i{ font-style:normal; font-size:11px; opacity:.55; }
.legend{ text-align:center; margin-top:34px; font-size:13.5px; color:var(--ink-soft); }
.legend em{ font-style:normal; font-family:var(--script); font-size:17px; color:var(--orange-dp); }

/* ------------- video grid ------------- */
.videos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:34px 28px; max-width:1220px; margin:0 auto; }
.vid{ display:block; }
.vid .screen{
  position:relative; aspect-ratio:16/9;
  border:3px solid var(--ink); border-radius:14px; overflow:hidden;
  background:var(--ink); box-shadow:6px 7px 0 var(--ink);
}
.band.ink .vid .screen{ border-color:var(--cream); box-shadow:6px 7px 0 rgba(0,0,0,.34); }
.vid iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* --- click-to-load video poster ---
   Google Drive embeds refuse to paint until they get the real site's
   referrer, and twenty-one live iframes is a lot of page to carry. The
   facade is a designed empty state that swaps in the frame on demand. */
.facade{ cursor:pointer; display:grid; place-items:center; }
.facade .poster{ position:absolute; inset:0; }
.facade .poster::after{ background:var(--ink); opacity:.42; mix-blend-mode:normal; }
.facade .sheen{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(253,246,210,.05) 0 2px, transparent 2px 26px),
    radial-gradient(circle at 50% 45%, rgba(230,117,75,.34), transparent 62%);
}
.facade .playbtn{
  position:relative; z-index:2;
  width:76px; height:76px; border-radius:50%;
  background:var(--mustard); border:3px solid var(--ink);
  box-shadow:0 5px 0 var(--ink);
  display:grid; place-items:center;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.facade .playbtn::after{
  content:''; width:0; height:0; margin-left:6px;
  border-left:22px solid var(--ink);
  border-top:14px solid transparent; border-bottom:14px solid transparent;
}
.facade:hover .playbtn, .facade:focus-visible .playbtn{ transform:translateY(3px) scale(1.06); box-shadow:0 2px 0 var(--ink); }
.facade:focus-visible{ outline:3px solid var(--mustard); outline-offset:4px; }
.facade .hint{
  position:absolute; z-index:2; bottom:12px; left:0; right:0; text-align:center;
  font-family:var(--script); font-size:17px; color:var(--cream);
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}
.vid h3{ font-size:19px; margin-top:16px; line-height:1.15; }
.vid p{ font-size:14px; color:var(--ink-soft); margin-top:5px; }
.band.ink .vid p{ color:rgba(253,246,210,.7); }

/* one big feature video */
.feature{ max-width:900px; margin:0 auto; }
.feature .screen{
  position:relative; aspect-ratio:16/9;
  border:3px solid var(--ink); border-radius:16px; overflow:hidden;
  background:var(--ink); box-shadow:8px 9px 0 var(--ink);
}
.feature iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.feature figcaption{ margin-top:18px; text-align:center; font-family:var(--script); font-size:19px; color:var(--ink-soft); }

/* ------------- christmas archive ------------- */
.years{ display:grid; grid-template-columns:repeat(auto-fit,minmax(206px,1fr)); gap:30px 24px; max-width:1220px; margin:0 auto; }
.year{ display:block; text-decoration:none; color:var(--cream); transition: transform .24s cubic-bezier(.34,1.56,.64,1); }
.year:hover{ transform:translateY(-7px) rotate(-1.2deg); }
.year .pic{
  position:relative; aspect-ratio:4/3;
  border:3px solid var(--cream); border-radius:13px; overflow:visible;
  box-shadow:6px 7px 0 rgba(0,0,0,.34);
}
.year .pic .ph{ position:absolute; inset:0; border-radius:10px; }
.year .yr{
  position:absolute; top:-13px; left:11px; z-index:3;
  font-family:var(--display); font-weight:400; font-size:19px; letter-spacing:.05em;
  background:var(--mustard); color:var(--ink);
  border:2.5px solid var(--ink); border-radius:99px; padding:2px 12px 1px;
}
.year span{ display:block; margin-top:14px; font-size:14.5px; font-weight:600; line-height:1.35; }
.year:hover span{ color:var(--mustard); }
/* the early years, before anyone filmed anything */
.year.novideo .pic{
  aspect-ratio:4/3; border-style:dashed; border-color:rgba(253,246,210,.4);
  box-shadow:none; display:grid; place-items:center;
}
.year.novideo .pic em{ font-family:var(--script); font-size:17px; color:rgba(253,246,210,.55); font-style:normal; }
.year.novideo:hover{ transform:none; }

/* prev / next */
.pager{ display:flex; justify-content:space-between; gap:16px; max-width:1180px; margin:0 auto; flex-wrap:wrap; }
.pager a{
  display:inline-flex; flex-direction:column; gap:2px; text-decoration:none;
  border:2.5px solid var(--ink); border-radius:16px; padding:14px 22px;
  background:var(--cream); box-shadow:5px 6px 0 var(--ink);
  transition: transform .16s ease, box-shadow .16s ease;
}
.pager a:hover{ transform:translate(3px,4px); box-shadow:2px 2px 0 var(--ink); }
.pager small{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.pager b{ font-family:var(--display); font-weight:400; font-size:19px; letter-spacing:.03em; }
.pager .next{ text-align:right; margin-left:auto; }

/* ------------- contact form ------------- */
.form{ max-width:620px; margin:0 auto; text-align:left; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px; }
.field input, .field textarea{
  width:100%; font-family:var(--body); font-size:16px; color:var(--ink);
  background:var(--cream); border:2.5px solid var(--ink); border-radius:14px;
  padding:14px 16px; box-shadow:4px 5px 0 rgba(51,36,27,.16);
  transition: box-shadow .18s ease, transform .18s ease;
}
.field textarea{ min-height:170px; resize:vertical; }
.field input:focus, .field textarea:focus{ outline:none; transform:translate(2px,2px); box-shadow:2px 2px 0 var(--orange); }
.form .btn{ width:100%; }
.formnote{ margin-top:16px; font-size:13px; color:var(--ink-soft); text-align:center; }

/* ------------- footer ------------- */
.foot{
  position:relative; z-index:2; background:var(--cream);
  padding:76px 6vw 56px; text-align:center;
  border-top:2.5px solid var(--ink); overflow:hidden;
}
.foot .plane{ position:absolute; left:6%; top:26%; filter:url(#inkwobble); opacity:.9; }
.foot .camera{ position:absolute; right:7%; top:30%; filter:url(#inkwobble); opacity:.9; }
.foot .kicker{ font-size:clamp(24px,3vw,38px); }
.foot h2{ color:var(--orange); -webkit-text-stroke:2px var(--ink); paint-order:stroke fill; }
.foot > p{ max-width:44ch; margin:14px auto 0; color:var(--ink-soft); }
.foot .links{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:30px 0; position:relative; z-index:2; }
.foot .links a{ font-size:13.5px; font-weight:600; text-decoration:none; padding:8px 15px; border-radius:99px; border:2px solid var(--ink); transition:.2s; }
.foot .links a:hover{ background:var(--ink); color:var(--cream); }
.foot small{ display:block; color:var(--ink-soft); font-size:12.5px; letter-spacing:.03em; }

/* --- reveal --- */
.rv{ opacity:0; transform:translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.rv.in{ opacity:1; transform:none; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:1100px){
  .s-nasdaq{ width:168px } .s-travel{ width:162px } .s-xmas{ width:156px }
}
@media (max-width:900px){
  :root{ --frame:11px; }
  .menu{
    position:fixed; inset:0 0 auto 0; z-index:85;
    flex-direction:column; gap:0; padding:104px 24px 30px;
    background:var(--cream); border-bottom:2.5px solid var(--ink);
    transform:translateY(-102%); transition:transform .4s cubic-bezier(.22,1,.36,1);
  }
  .menu.open{ transform:none; }
  .menu a{ width:100%; text-align:center; padding:13px; font-size:16px; }
  .burger{
    display:grid; place-items:center; gap:5px; width:44px; height:44px;
    background:var(--orange); border:2.5px solid var(--ink); border-radius:12px; cursor:pointer;
  }
  .burger i{ display:block; width:20px; height:2.5px; background:var(--cream); border-radius:2px; transition:.25s; }
  .burger.open i:nth-child(1){ transform:translateY(7.5px) rotate(45deg) }
  .burger.open i:nth-child(2){ opacity:0 }
  .burger.open i:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg) }

  h1{ text-shadow:2px 3px 0 rgba(51,36,27,.09); -webkit-text-stroke-width:2px; }
  .hero-actions .btn{ width:100%; max-width:320px; }
  /* full-width buttons leave no gutter for the drawings — photos carry the hero */
  .spy.draw{ display:none; }
  .s-nasdaq{ width:124px; top:14%; left:-2% }
  .s-travel{ width:120px; top:13%; right:-2% }
  .s-xmas  { width:118px; bottom:5%; left:-2% }
  .snap{ padding:6px 6px 24px; }
  .snap b{ font-size:12.5px; }
  .snap::before{ width:48px; height:15px; top:-8px }

  .pagehead{ padding:150px 6vw 56px; }
  /* .kicker is inline-block, so centring has to come from the parent */
  .strip > div, .about > div{ text-align:center }
  .about, .strip{ grid-template-columns:1fr; gap:34px; }
  .about .snap{ max-width:340px; margin:0 auto; }
  .strip ul{ justify-content:center }
  .strip > div > p, .about p{ margin-left:auto; margin-right:auto }
  .stats{ justify-content:center }
  .collage .small{ width:42%; right:0; bottom:-30px }
  .band{ padding:74px 6vw; }
  .videos{ grid-template-columns:1fr; }
  .pager{ flex-direction:column; }
  .pager .next{ text-align:left; margin-left:0; }
  .foot .plane, .foot .camera{ display:none }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .rv{ opacity:1; transform:none; }
}