/* ===========================================================
   No Tomorrow: shared styles
   Used by: index.html, food.html, travelers.html, work-with-us.html
   =========================================================== */

:root{
  /* palette: warm charcoal screening room, bone text, low-sun amber */
  --ink:        #242019;   /* base background, warm charcoal */
  --ink-2:      #2C2820;   /* raised surface */
  --ink-3:      #373228;   /* card / border on dark */
  --paper:      #EDE6D6;   /* primary warm bone text */
  --paper-dim:  #B6AC97;   /* secondary text */
  --paper-faint:#7C7363;   /* tertiary / captions */
  --amber:      #D8A94F;   /* low-sun amber accent */
  --amber-soft: #E7C988;   /* lighter amber for hovers */
  --line:       rgba(237,230,214,0.16);

  --maxw: 1180px;
  --gut: clamp(20px, 5vw, 64px);
  --nav-h: 88px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:"DM Sans", system-ui, sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:"Fraunces", Georgia, serif;
  font-weight:300;
  font-optical-sizing:auto;
  letter-spacing:-0.01em;
  line-height:1.08;
  margin:0;
}

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

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

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--gut);
  padding-right:var(--gut);
}

/* ---- eyebrow + horizon device ---- */
.eyebrow{
  font-size:0.72rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--paper-faint);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:0.8em;
  margin:0 0 1.4rem;
}
.eyebrow::before{
  content:"";
  width:34px;
  height:1px;
  background:var(--amber);
  display:inline-block;
}

/* ---------- NAV ---------- */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
  border-bottom:1px solid transparent;
}
header.nav.scrolled{
  background:rgba(36,32,25,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-h);
}
.wordmark{
  display:inline-flex;
  align-items:center;
  gap:0.5em;
}
.nav-inner .wordmark img{
  height:58px; width:auto; display:block;   /* top-left logo */
}
.nav-links{
  display:flex; align-items:center; gap:1.6rem;
  font-size:0.8rem; letter-spacing:0.05em;
  color:var(--paper-dim);
}
.nav-links a{ transition:color .2s ease; }
.nav-links a:hover, .nav-links a.active{ color:var(--paper); }
.nav-cta{
  color:var(--paper);
  border:1px solid var(--line);
  padding:0.55em 1.1em;
  border-radius:1px;
  transition:border-color .25s ease, color .25s ease;
}
.nav-cta:hover{ border-color:var(--amber); color:var(--amber-soft); }
.nav-toggle{ display:none; background:none; border:0; color:var(--paper); cursor:pointer; padding:8px; }

/* ---------- HERO (home) ---------- */
.hero{
  padding-top:clamp(120px, 16vh, 190px);
  padding-bottom:clamp(56px, 8vh, 96px);
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr 330px;
  gap:clamp(28px, 3vw, 52px);
  align-items:center;
  max-width:1000px;
  margin:0 auto;
}
.hero-head{
  max-width:640px;
}
.hero h1{
  font-size:clamp(2.4rem, 5vw, 4.2rem);
  line-height:1.04;
  margin:0 0 1.6rem;
}
.hero h1 em{ font-style:italic; color:var(--amber); font-weight:300; }
.hero-sub{
  font-size:clamp(1.02rem, 1.4vw, 1.16rem);
  color:var(--paper-dim);
  max-width:560px;
  line-height:1.7;
}
.hero-sub p{ margin:0 0 1.05em; }
.hero-sub p:last-child{ margin-bottom:0; }
.hero-cta{ margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap; }

/* vertical intro film stage (9:16) */
.film-vert{
  position:relative;
  aspect-ratio:9/16;
  width:100%;
  max-width:330px;
  margin:0;
  background:
    linear-gradient(180deg, rgba(255,250,240,0.12) 0%, rgba(0,0,0,0.16) 100%),
    linear-gradient(135deg, #7a7060 0%, #5f5645 100%);
  border:1px solid var(--line);
  border-radius:2px;
  overflow:hidden;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:1.2rem;
}
.film-vert::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; top:auto;
  height:42%; background:linear-gradient(180deg, rgba(20,17,13,0) 0%, rgba(20,17,13,0.78) 100%);
  pointer-events:none;
}
.film-vert video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- SUB-PAGE HERO ---------- */
.page-hero{
  padding-top:clamp(150px, 22vh, 240px);
  padding-bottom:clamp(36px, 6vh, 64px);
}
.page-hero h1{
  font-size:clamp(2.4rem, 6.4vw, 4.8rem);
  line-height:1.03;
  margin:0 0 1.5rem;
}
.page-hero h1 em{ font-style:italic; color:var(--amber); }
.page-hero .prose{ max-width:600px; }

/* page hero with an image on the right */
.hero-split{
  display:grid; grid-template-columns:1fr 0.92fr;
  gap:clamp(32px, 5vw, 72px); align-items:center;
}
.hero-figure{ margin:0; position:relative; }
.hero-figure img{ width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:2px; }
.hero-figure::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--amber); opacity:0; transition:opacity .4s ease;
}
.hero-figure:hover::after{ opacity:0.9; }
.hero-figure figcaption{
  margin-top:0.9rem; font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--paper-faint);
}

/* intro film placeholder (home hero) */
.film-stage{
  margin-top:clamp(40px, 6vh, 72px);
  position:relative;
  aspect-ratio:16/9;
  width:100%;
  background:
    linear-gradient(180deg, rgba(255,250,240,0.12) 0%, rgba(0,0,0,0.16) 100%),
    linear-gradient(135deg, #7a7060 0%, #5f5645 100%);
  border:1px solid var(--line);
  border-radius:2px;
  overflow:hidden;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:1.4rem;
}
.film-stage::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; background:rgba(20,17,13,0.22);
}
.play-ring{
  width:84px; height:84px; border-radius:50%;
  border:1px solid var(--amber);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2;
  background:rgba(237,230,214,0.30);
}
.play-ring::before{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid var(--amber);
  opacity:0; animation:pulse 3.4s ease-out infinite;
}
@keyframes pulse{
  0%{ transform:scale(1); opacity:.5; }
  70%{ transform:scale(1.5); opacity:0; }
  100%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .play-ring::before{ animation:none; } }
.play-ring svg{ margin-left:4px; }
.stage-label{
  position:relative; z-index:2;
  font-size:0.74rem; letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(20,17,13,0.75);
}

/* ---------- SECTION BASICS ---------- */
section{ position:relative; }
.band{ padding-block:clamp(72px, 11vh, 140px); }
.band-tight{ padding-block:clamp(48px, 7vh, 88px); }
.lede{
  font-family:"Fraunces", serif;
  font-weight:300;
  font-size:clamp(1.5rem, 3.2vw, 2.5rem);
  line-height:1.28;
  letter-spacing:-0.01em;
  max-width:880px;
}
.prose{
  max-width:620px;
  color:var(--paper-dim);
  font-size:1.05rem;
  line-height:1.72;
}
.prose p{ margin:0 0 1.15em; }
.prose p:last-child{ margin-bottom:0; }

.horizon{ height:1px; background:var(--line); }

/* section heading used on sub-pages */
.sec-head{ margin-bottom:2.4rem; }
.sec-head h2{ font-size:clamp(1.8rem, 4vw, 2.8rem); }

/* "view more" link */
.more-link{
  display:inline-flex; align-items:center; gap:0.6em;
  margin-top:2rem; color:var(--amber-soft);
  font-size:0.84rem; letter-spacing:0.08em; text-transform:uppercase;
  border-bottom:1px solid transparent; padding-bottom:3px;
  transition:border-color .25s ease, gap .25s ease;
}
.more-link:hover{ border-color:var(--amber); gap:0.95em; }

/* ---------- MANIFESTO ---------- */
.manifesto .lede em{ font-style:italic; color:var(--amber-soft); }
.manifesto-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px, 6vw, 96px); align-items:start; margin-top:2.6rem;
}

/* ---------- WHO WE ARE (bio) ---------- */
.bio{
  margin-top:clamp(56px, 8vh, 104px);
  display:grid; grid-template-columns:0.85fr 1fr;
  gap:clamp(32px, 5vw, 72px); align-items:center;
}
.bio-photo{ margin:0; position:relative; }
.bio-photo img{ width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:2px; }
.bio-photo::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--amber); opacity:0; transition:opacity .4s ease;
}
.bio-photo:hover::after{ opacity:0.9; }
.bio-photo figcaption{
  margin-top:0.9rem; font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--paper-faint);
}
.bio-name{ font-family:"Fraunces", serif; font-weight:300; font-size:clamp(1.8rem, 3.4vw, 2.6rem); margin:0.4rem 0 1.4rem; }
.bio-text .prose{ max-width:560px; }

/* ---------- VERTICAL CLIP GRID (work / food clips) ---------- */
.work-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; margin-bottom:2.8rem;
}
.work-head h2{ font-size:clamp(2rem, 4.5vw, 3.2rem); }
.work-note{ color:var(--paper-faint); font-size:0.85rem; max-width:260px; }

.work-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(16px, 2vw, 26px); }
.work-grid.cols-3{ grid-template-columns:repeat(3, 1fr); }

.clip{
  position:relative; display:block; aspect-ratio:9/16;
  border:1px solid var(--line); border-radius:2px; overflow:hidden;
  transition:border-color .3s ease, transform .3s ease;
}
.clip:hover{ border-color:rgba(216,169,79,0.65); transform:translateY(-3px); }
.clip-fill{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(255,250,240,0.10) 0%, rgba(0,0,0,0.18) 100%),
    linear-gradient(135deg, #6f6552 0%, #564d3d 100%);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.clip:hover .clip-fill{ transform:scale(1.04); }
/* live video tile */
.clip video.clip-fill{ object-fit:cover; width:100%; height:100%; }
.clip-live{ cursor:pointer; }
.clip-sound{
  position:absolute; right:14px; top:14px; z-index:3;
  font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:#15110d;
  background:rgba(237,230,214,0.8); padding:0.26em 0.55em; border-radius:1px;
  user-select:none;
}
.clip-mini-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(20,17,13,0.55); background:rgba(237,230,214,0.32);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .25s ease, background .25s ease; backdrop-filter:blur(1px);
}
.clip:hover .clip-mini-play{ border-color:var(--amber); background:rgba(216,169,79,0.4); }
.clip-meta{ position:absolute; left:14px; right:14px; bottom:14px; z-index:2; display:flex; align-items:center; justify-content:space-between; }
.clip-place{
  font-size:0.66rem; letter-spacing:0.18em; text-transform:uppercase; color:#15110d; font-weight:500;
  background:rgba(237,230,214,0.78); padding:0.32em 0.6em; border-radius:1px;
}
.clip-tag{
  position:absolute; left:14px; top:14px; z-index:2;
  font-size:0.6rem; letter-spacing:0.16em; color:rgba(20,17,13,0.7);
  background:rgba(237,230,214,0.6); padding:0.22em 0.5em; border-radius:1px;
}

/* ---------- GENERIC LIGHT PLACEHOLDER ---------- */
.ph{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(255,250,240,0.10) 0%, rgba(0,0,0,0.18) 100%),
    linear-gradient(135deg, #6f6552 0%, #564d3d 100%);
}
.ph-label{
  position:absolute; left:12px; bottom:12px; z-index:2;
  font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:#15110d;
  background:rgba(237,230,214,0.72); padding:0.26em 0.55em; border-radius:1px;
}

/* ---------- HORIZONTAL SCROLLER (food slideshow on home) ---------- */
.scroller-wrap{ margin-top:2.8rem; }
.scroller{
  display:flex; gap:clamp(14px, 2vw, 22px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:18px; scrollbar-color:var(--line) transparent;
}
.scroller::-webkit-scrollbar{ height:6px; }
.scroller::-webkit-scrollbar-track{ background:transparent; }
.scroller::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.slide{ flex:0 0 clamp(240px, 38vw, 380px); scroll-snap-align:start; }
.slide .frame{ position:relative; aspect-ratio:4/3; border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.slide .frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.slide figcaption{ margin-top:0.8rem; font-size:0.8rem; letter-spacing:0.04em; color:var(--paper-faint); }
.scroll-hint{ margin-top:0.4rem; font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--paper-faint); }

/* ---------- PHOTO GALLERY (food page) ---------- */
.gallery{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(14px, 2vw, 22px); }
.gallery .cell{ position:relative; aspect-ratio:1/1; border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.gallery .cell.tall{ aspect-ratio:3/4; }
.gallery .cell.wide{ aspect-ratio:4/3; grid-column:span 2; }

/* collage / puzzle grid gallery */
.collage{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:230px;
  grid-auto-flow:dense;
  gap:16px;
}
.c-item{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:2px; display:block;
}
.c-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.c-item:hover img{ transform:scale(1.05); }
.c-item figcaption{
  position:absolute; left:10px; bottom:10px; z-index:2;
  font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:#15110d;
  background:rgba(237,230,214,0.82); padding:0.3em 0.6em; border-radius:1px;
}
.c-tall{ grid-row:span 2; }
.c-wide{ grid-column:span 2; }
.c-lg{ grid-column:span 2; grid-row:span 2; }
@media (max-width:1024px){
  .collage{ grid-template-columns:repeat(3, 1fr); grid-auto-rows:200px; }
}
@media (max-width:680px){
  .collage{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:150px; gap:12px; }
}

/* ---------- PRODUCT GRID (travelers page) ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(22px, 3vw, 44px); margin-top:2.8rem; }
.product-card{ display:flex; flex-direction:column; }
.product-card .shot{
  position:relative; aspect-ratio:1/1; border:1px solid var(--line); border-radius:2px; overflow:hidden;
  transition:border-color .3s ease;
}
.product-card .shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .shot img{ transform:scale(1.04); }
.product-card .shot.pack{ background:#F4EFE6; }
.product-card .shot.pack img{ object-fit:contain; padding:14%; }
.product-card:hover .shot.pack img{ transform:none; }
.product-card:hover .shot{ border-color:rgba(216,169,79,0.5); }
.product-cat{ margin-top:1.1rem; font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--amber); }
.product-name{ font-family:"Fraunces", serif; font-weight:400; font-size:1.22rem; margin:0.45rem 0 0.6rem; }
.product-why{ color:var(--paper-dim); font-size:0.95rem; line-height:1.62; }
.product-link{ margin-top:0.9rem; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--paper-faint); display:inline-flex; align-items:center; gap:0.5em; }
.product-card:hover .product-link{ color:var(--amber-soft); }

/* simple resource list (travelers "before you go") */
.resource-list{ list-style:none; padding:0; margin:2.2rem 0 0; }
.resource-list li{ padding:1.3rem 0; border-top:1px solid var(--line); display:grid; grid-template-columns:200px 1fr; gap:1.4rem; align-items:baseline; }
.resource-list li:last-child{ border-bottom:1px solid var(--line); }
.resource-list .r-name{ font-family:"Fraunces", serif; font-size:1.12rem; color:var(--paper); }
.resource-list .r-text{ color:var(--paper-dim); font-size:0.98rem; line-height:1.62; }
.resource-list a{ color:var(--amber-soft); border-bottom:1px solid rgba(216,169,79,0.4); transition:border-color .2s ease; }
.resource-list a:hover{ border-color:var(--amber); }

.disclosure{ margin-top:2.4rem; font-size:0.8rem; color:var(--paper-faint); max-width:620px; line-height:1.6; }

/* ---------- WHY ---------- */
.why{ text-align:center; }
.why .lede{ margin:0 auto; }
.why .signoff{ margin-top:2rem; color:var(--paper-faint); font-size:0.8rem; letter-spacing:0.22em; text-transform:uppercase; }

/* ---------- BRANDS / lists ---------- */
.brands-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px, 6vw, 88px); align-items:start; }
.list{ list-style:none; padding:0; margin:1.8rem 0 0; }
.list li{ padding:1.05rem 0; border-top:1px solid var(--line); display:flex; align-items:baseline; gap:1rem; font-size:1.02rem; }
.list li:last-child{ border-bottom:1px solid var(--line); }
.list .k{ color:var(--amber); font-size:0.72rem; letter-spacing:0.12em; min-width:34px; font-family:"DM Sans", sans-serif; }
.deliver{ color:var(--paper-dim); font-size:0.98rem; }
.deliver span{ color:var(--paper); }

/* ---------- TRAVELERS (home section) ---------- */
.travelers{ background:var(--ink-2); }
.travelers .inner{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(32px,6vw,88px); align-items:center; }

/* ---------- PROCESS STEPS (work with us) ---------- */
.steps{ display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(28px, 4vw, 56px); margin-top:3rem; }
.step .num{ font-family:"Fraunces", serif; font-weight:300; font-size:2.6rem; color:var(--amber); line-height:1; }
.step h3{ font-family:"Fraunces", serif; font-weight:400; font-size:1.3rem; margin:0.8rem 0 0.6rem; }
.step p{ color:var(--paper-dim); font-size:0.97rem; line-height:1.62; margin:0; }

/* ---------- RESTAURANT FEATURE (food page) ---------- */
.feature-row{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 5vw, 72px);
  align-items:center; padding-block:clamp(40px, 6vh, 72px);
}
.feature-row + .feature-row{ border-top:1px solid var(--line); }
.feature-row .shot{ position:relative; aspect-ratio:4/5; border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.feature-row .shot img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.feature-row:hover .shot img{ transform:scale(1.04); }
.feature-row:nth-of-type(even) .shot{ order:2; }
.feat-place{ font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--amber); }
.feat-name{ font-family:"Fraunces", serif; font-weight:300; font-size:clamp(1.6rem, 3vw, 2.2rem); margin:0.4rem 0 1rem; }

/* ---------- IMAGE BLOCKS (work with us) ---------- */
.banner{ position:relative; aspect-ratio:2/1; border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.img-strip .cell img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.img-strip .cell:hover img{ transform:scale(1.04); }
.hero-figure .shot-square{ position:relative; aspect-ratio:1/1; border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.hero-figure .shot-square img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.img-strip{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(14px, 2vw, 22px); }
.img-strip figure{ margin:0; }
.img-strip .cell{ position:relative; aspect-ratio:1/1; border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.img-strip figcaption{
  margin-top:0.8rem;
  font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--paper-faint);
}
.contact-grid{ display:grid; grid-template-columns:1.25fr 0.85fr; gap:clamp(32px, 5vw, 72px); align-items:start; }
.contact-figure{ position:relative; aspect-ratio:4/5; border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.contact-grid .form{ margin-top:0; }

/* ---------- CONTACT FORM (work with us) ---------- */
.form{ max-width:660px; margin-top:2.6rem; }
.field{ margin-bottom:1.4rem; }
.field label{ display:block; font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--paper-faint); margin-bottom:0.6rem; }
.field input, .field select, .field textarea{
  width:100%; background:#EBE4D4; color:#15110d;
  border:1px solid rgba(20,17,13,0.18); border-radius:2px; padding:0.85em 1em;
  font-family:"DM Sans", sans-serif; font-size:1rem; transition:border-color .25s ease, box-shadow .25s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(20,17,13,0.42); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--amber); outline:none; box-shadow:0 0 0 2px rgba(216,169,79,0.25);
}
.field textarea{ min-height:150px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.hp{ position:absolute; left:-9999px; top:-9999px; }
button.submit{
  background:var(--amber); color:var(--ink); border:0; border-radius:1px;
  padding:1em 2.6em; font-family:"DM Sans", sans-serif; font-size:0.9rem; letter-spacing:0.06em;
  cursor:pointer; transition:background .25s ease; margin-top:0.4rem;
}
button.submit:hover{ background:var(--amber-soft); }

/* ---------- CTA / closer ---------- */
.closer{ text-align:center; padding-block:clamp(80px,12vh,150px); }
.closer h2{ font-size:clamp(2rem, 5vw, 3.6rem); margin-bottom:1.4rem; }
.closer .prose{ margin:0 auto 2.4rem; text-align:center; }
.btn{
  display:inline-block; font-size:0.86rem; letter-spacing:0.06em;
  padding:0.95em 2.2em; border:1px solid var(--amber); color:var(--amber-soft);
  border-radius:1px; transition:background .3s ease, color .3s ease;
}
.btn:hover{ background:var(--amber); color:var(--ink); }
.btn-solid{ background:var(--amber); color:var(--ink); }
.btn-solid:hover{ background:var(--amber-soft); color:var(--ink); }

/* ---------- PENNYROYAL BLOCK ---------- */
.penny{ background:var(--ink-2); }
.penny-inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 5vw, 72px); align-items:center; }
.penny .prose{ max-width:520px; }
.penny h2{ font-size:clamp(1.9rem, 4vw, 3rem); }
.penny-logo{
  aspect-ratio:1/1; border:1px solid var(--line); border-radius:2px;
  display:flex; align-items:center; justify-content:center; padding:12%;
  background:#000000;
}
.penny-logo img{ width:min(80%, 360px); height:auto; }

/* footer round emblem */
.foot-emblem{ display:inline-block; margin-top:1.1rem; }
.foot-emblem img{ height:64px; width:auto; opacity:0.9; transition:opacity .25s ease; }
.foot-emblem:hover img{ opacity:1; }

/* ---------- FOOTER ---------- */
footer{ border-top:1px solid var(--line); padding-block:56px; }
.foot-inner{ display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap; }
.foot-logo img{ height:54px; width:auto; }   /* lower-left logo */
.foot-col h4{ font-family:"DM Sans", sans-serif; font-weight:500; font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--paper-faint); margin:0 0 1rem; }
.foot-col a, .foot-col p{ color:var(--paper-dim); font-size:0.95rem; margin:0 0 0.5rem; }
.foot-col a:hover{ color:var(--amber-soft); }
.foot-sister{ font-family:"Fraunces", serif; font-weight:400; font-size:1.05rem; color:var(--paper); }
.foot-bottom{
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  color:var(--paper-faint); font-size:0.78rem; letter-spacing:0.04em;
}

/* instagram profile tile (last grid slot) */
.ig-tile.ig-profile::after{ bottom:-1px; height:calc(100% + 1px); background:linear-gradient(180deg, rgba(20,17,13,0.35) 0%, rgba(20,17,13,0.72) 100%); }
.ig-tile.ig-profile .ig-profile-inner{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.9rem;
  text-align:center; padding:1.5rem;
}
.ig-tile.ig-profile .ig-profile-inner svg{ width:40px; height:40px; color:var(--paper); }
.ig-tile.ig-profile .ig-follow-label{
  font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--paper);
}
.ig-tile.ig-profile .ig-handle{
  font-family:"Fraunces", serif; font-size:1.15rem; color:var(--amber-soft);
}
.ig-tile.ig-profile:hover .ig-profile-inner svg{ color:var(--amber-soft); }

/* ---------- HOMEPAGE TEASERS ---------- */
.teaser{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px, 6vw, 80px); align-items:center; }
.teaser.flip .teaser-media{ order:2; }
.teaser-media{ position:relative; aspect-ratio:4/5; border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.teaser-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.teaser:hover .teaser-media img{ transform:scale(1.04); }
.teaser-media figcaption{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--paper);
  text-shadow:0 1px 6px rgba(0,0,0,0.5);
}
@media (max-width:820px){
  .teaser{ grid-template-columns:1fr; gap:24px; }
  .teaser.flip .teaser-media{ order:0; }
}

.teaser .prose a{ color:var(--amber); border-bottom:1px solid rgba(216,169,79,0.45); transition:color .2s ease, border-color .2s ease; }
.teaser .prose a:hover{ color:var(--amber-soft); border-color:var(--amber); }

/* ---------- POSTER-TO-INSTAGRAM TILES ---------- */
/* a tile that shows a still frame and opens the Reel on Instagram */
.ig-tile{
  position:relative; display:block; aspect-ratio:9/16;
  border:1px solid var(--line); border-radius:2px; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,250,240,0.05) 0%, rgba(0,0,0,0.16) 100%),
    linear-gradient(135deg, #4a4436 0%, #34302a 100%);
}
.ig-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.ig-tile:hover img{ transform:scale(1.05); }
.ig-tile::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:46%;
  background:linear-gradient(180deg, rgba(20,17,13,0) 0%, rgba(20,17,13,0.75) 100%);
  pointer-events:none;
}
.ig-tile .ig-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%;
  background:rgba(237,230,214,0.92);
  display:flex; align-items:center; justify-content:center; z-index:2;
  transition:transform .25s ease, background .25s ease;
}
.ig-tile:hover .ig-play{ transform:translate(-50%,-50%) scale(1.08); background:var(--amber-soft); }
.ig-tile .ig-badge{
  position:absolute; top:12px; right:12px; z-index:2;
  width:26px; height:26px; color:var(--paper); opacity:0.9;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.ig-tile .ig-cap{
  position:absolute; left:14px; right:14px; bottom:13px; z-index:2;
  font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--paper);
}
.ig-tile .ph-hint{
  position:absolute; left:0; right:0; bottom:38%; z-index:2; text-align:center;
  font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--paper-faint);
}
/* hero intro film as a poster-to-instagram tile */
.film-vert.ig-tile{ width:100%; max-width:330px; margin:0 auto; }
.work-grid.three-up{ grid-template-columns:repeat(3, 1fr); max-width:760px; margin-left:auto; margin-right:auto; }
@media (max-width:680px){ .work-grid.three-up{ grid-template-columns:repeat(2, 1fr); } }

/* ---------- WRITINGS PAGE ---------- */
.writing-hero{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(32px,5vw,64px); align-items:center; }
.writing-hero-img{
  position:relative; aspect-ratio:1/1; width:100%;
  border:1px solid var(--line); border-radius:2px; overflow:hidden;
}
.writing-hero-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:820px){
  .writing-hero{ grid-template-columns:1fr; gap:28px; }
}
.writing-list{ margin-top:2.6rem; border-top:1px solid var(--line); }
.writing{
  display:grid; grid-template-columns:200px 1fr; gap:clamp(20px,3vw,36px); align-items:start;
  padding:clamp(24px,3vw,36px) 0; border-bottom:1px solid var(--line);
  transition:padding-left .3s ease;
}
.writing:hover{ padding-left:12px; }
.writing .w-thumb{ position:relative; aspect-ratio:4/3; border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.writing .w-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.writing:hover .w-thumb img{ transform:scale(1.05); }
.writing .w-meta{ font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--amber); }
.writing h2{ font-family:"Fraunces", serif; font-weight:400; font-size:clamp(1.4rem,3vw,2rem); line-height:1.25; margin:0.6rem 0 0.7rem; color:var(--paper); }
.writing p{ color:var(--paper-dim); font-size:1rem; line-height:1.7; margin:0 0 1rem; max-width:640px; }
.writing .w-link{ font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--paper-faint); display:inline-flex; align-items:center; gap:0.5em; }
.writing:hover .w-link{ color:var(--amber-soft); }
.writing-sub{
  margin-top:3rem; padding:clamp(24px,3vw,32px); border:1px solid var(--line); border-radius:2px;
  background:var(--ink-2); text-align:center;
}
.writing-sub p{ color:var(--paper-dim); font-size:0.97rem; line-height:1.7; margin:0 0 1.2rem; }
@media (max-width:640px){
  .writing{ grid-template-columns:1fr; gap:14px; }
  .writing .w-thumb{ max-width:280px; }
}

/* ---------- WWU / MOVING ABROAD PAGE ---------- */

/* disclaimer callout */
.callout{
  border:1px solid var(--line);
  border-left:2px solid var(--amber);
  background:var(--ink-2);
  padding:clamp(20px, 3vw, 32px);
  border-radius:2px;
  max-width:820px;
}
.callout h3{
  font-family:"DM Sans", sans-serif; font-weight:500;
  font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--amber); margin:0 0 0.9rem;
}
.callout p{ color:var(--paper-dim); font-size:0.97rem; line-height:1.7; margin:0 0 0.9em; }
.callout p:last-child{ margin-bottom:0; }

/* quick jump links */
.jumps{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }

/* stages of the process */
.stages{ display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(20px, 2.5vw, 34px); margin-top:2.8rem; }
.stage{ border-top:1px solid var(--line); padding-top:1.4rem; }
.stage .s-num{
  font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--amber);
}
.stage h3{ font-family:"Fraunces", serif; font-weight:400; font-size:1.16rem; margin:0.7rem 0 0.6rem; }
.stage p{ color:var(--paper-dim); font-size:0.94rem; line-height:1.65; margin:0; }

/* the guide / product block */
.guide{ background:var(--ink-2); }
.guide-inner{
  display:grid; grid-template-columns:0.8fr 1fr;
  gap:clamp(32px, 5vw, 72px); align-items:center;
}
.guide-cover{
  position:relative; aspect-ratio:3/4;
  border:1px solid var(--line); border-radius:2px; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,250,240,0.10) 0%, rgba(0,0,0,0.18) 100%),
    linear-gradient(135deg, #6f6552 0%, #564d3d 100%);
  display:flex; align-items:center; justify-content:center;
}
.guide-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.guide h2{ font-size:clamp(1.8rem, 3.6vw, 2.6rem); }
.guide-price{
  font-family:"Fraunces", serif; font-size:1.5rem; color:var(--paper);
  margin:1.4rem 0 0.4rem;
}
.guide-price .note{ font-family:"DM Sans", sans-serif; font-size:0.8rem; color:var(--paper-faint); letter-spacing:0.06em; }
.guide-includes{ list-style:none; padding:0; margin:1.6rem 0 0; }
.guide-includes li{
  color:var(--paper-dim); font-size:0.97rem; line-height:1.6;
  padding:0.5rem 0 0.5rem 1.4rem; position:relative;
}
.guide-includes li::before{
  content:""; position:absolute; left:0; top:1.05rem;
  width:8px; height:1px; background:var(--amber);
}
/* where the Shopify Buy Button embed goes */
.buy-slot{
  margin-top:2rem; padding:1.2rem;
  border:1px dashed rgba(216,169,79,0.45); border-radius:2px;
  max-width:420px;
}
.buy-slot .placeholder{
  font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--paper-faint);
}

/* partner / contact cards */
.partners{ display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(20px, 2.6vw, 32px); margin-top:2.6rem; }
.partner{
  border:1px solid var(--line); border-radius:2px;
  padding:clamp(22px, 2.6vw, 32px);
  display:flex; flex-direction:column;
  transition:border-color .3s ease, transform .3s ease;
}
.partner:hover{ border-color:rgba(216,169,79,0.5); transform:translateY(-2px); }
.partner .p-thumb{
  position:relative; width:100%; aspect-ratio:1/1;
  border:1px solid var(--line); border-radius:2px; overflow:hidden;
  margin-bottom:1.3rem;
  background:
    linear-gradient(180deg, rgba(255,250,240,0.08) 0%, rgba(0,0,0,0.16) 100%),
    linear-gradient(135deg, #6f6552 0%, #564d3d 100%);
  display:flex; align-items:center; justify-content:center;
}
.partner .p-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* use .contain for logos on a light tile */
.partner .p-thumb.contain{ background:#F4EFE6; }
.partner .p-thumb.contain img{ object-fit:contain; padding:8%; }
.partner .p-thumb .ph-note{
  font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(20,17,13,0.7);
}
.partner .p-cat{ font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--amber); }
.partner h3{ font-family:"Fraunces", serif; font-weight:400; font-size:1.3rem; margin:0.6rem 0 0.8rem; }
.partner p{ color:var(--paper-dim); font-size:0.96rem; line-height:1.68; margin:0 0 1.2rem; }
.partner .p-link{
  margin-top:auto; font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--paper-faint); display:inline-flex; align-items:center; gap:0.5em;
}
.partner:hover .p-link{ color:var(--amber-soft); }
.partner .p-flag{
  display:inline-block; margin-top:0.9rem;
  font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--paper-faint);
}

/* official links list */
.gov-list{ list-style:none; padding:0; margin:2rem 0 0; }
.gov-list li{ padding:1.1rem 0; border-top:1px solid var(--line); display:grid; grid-template-columns:230px 1fr; gap:1.4rem; align-items:baseline; }
.gov-list li:last-child{ border-bottom:1px solid var(--line); }
.gov-list .g-name{ font-family:"Fraunces", serif; font-size:1.08rem; color:var(--paper); }
.gov-list .g-text{ color:var(--paper-dim); font-size:0.95rem; line-height:1.62; }
.gov-list a{ color:var(--amber-soft); border-bottom:1px solid rgba(216,169,79,0.4); }
.gov-list a:hover{ border-color:var(--amber); }

@media (max-width:1024px){
  .stages{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:760px){
  .stages{ grid-template-columns:1fr; }
  .partners{ grid-template-columns:1fr; }
  .guide-inner{ grid-template-columns:1fr; }
  .gov-list li{ grid-template-columns:1fr; gap:0.4rem; }
}
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- responsive ---------- */
@media (max-width:1024px) and (min-width:761px){
  .work-grid{ grid-template-columns:repeat(3, 1fr); }
  .product-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:760px){
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    background:rgba(36,32,25,0.97); backdrop-filter:blur(12px);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:1rem var(--gut) 2rem; border-bottom:1px solid var(--line);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  .nav-links.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav-links a{ padding:0.85rem 0; width:100%; border-bottom:1px solid var(--line); }
  .nav-links .nav-cta{ margin-top:0.8rem; border-bottom:1px solid var(--line); }
  .nav-toggle{ display:inline-flex; }
  .nav-inner .wordmark img{ height:46px; }

  .manifesto-grid,
  .bio,
  .brands-grid,
  .travelers .inner,
  .steps,
  .penny-inner,
  .hero-split,
  .hero-grid,
  .contact-grid,
  .field-row{ grid-template-columns:1fr; }
  .film-vert{ max-width:320px; margin:0 auto; }
  .hero-head{ padding-left:0; }
  .banner{ aspect-ratio:2/1; }

  .work-grid, .work-grid.cols-3{ grid-template-columns:repeat(2, 1fr); }
  .product-grid{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2, 1fr); }
  .gallery .cell.wide{ grid-column:span 2; }

  .feature-row{ grid-template-columns:1fr; }
  .feature-row:nth-of-type(even) .shot{ order:0; }

  .resource-list li{ grid-template-columns:1fr; gap:0.4rem; }
}