/* Koda Moss — paused site
   Palette and type lifted from the live Shopify theme so the two read as one brand. */

@font-face {
  font-family: 'Chivo';
  src: url('/fonts/chivo-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #2b2b2b;
  --fg: #f0eee9;
  --muted: #a5a29b;
  --card: #343434;
  --line: #454545;
  --accent: #ffa266;
  --accent-ink: #2b2b2b;
  --olive: #55543b;
  --cream: #faeed8;
  /* the theme's "alternative-2" scheme, used for every second section */
  --bone: #f0eee9;
  --bone-ink: #272722;
  --bone-muted: #6b6a62;
  --heading: 'Chivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body: Helvetica, Arial, sans-serif;
  --wrap: 1100px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--heading);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.4rem, 7vw, 4.5rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- announcement ---------- */

.announce {
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--heading);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0.7rem var(--pad);
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(43, 43, 43, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
  flex-wrap: wrap;
}

.brand img { width: 84px; }

.nav {
  display: flex;
  gap: clamp(0.9rem, 2.5vw, 2rem);
  align-items: center;
  font-family: var(--heading);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav a { color: var(--fg); white-space: nowrap; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--accent); text-decoration: none; }

/* ---------- burger and drawer ---------- */

.burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--fg);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.scrim[hidden] { display: none; }

/* the page must not scroll underneath an open drawer */
.nav-open, .nav-open body { overflow: hidden; }

/* the burger becomes the close button, so it has to stay above the scrim */
.nav-open .site-header { z-index: 50; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--heading);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.95rem 2rem;
  border-radius: 999px;
  border: 2px solid var(--accent);
  transition: background 0.15s ease, color 0.15s ease;
}

.btn:hover { background: transparent; color: var(--accent); text-decoration: none; }

.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn-ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: min(78vh, 640px);
  display: flex;
  align-items: center;
  background: #1d1d1d url('/img/hero-forest.jpg') center / cover no-repeat;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 20, 20, 0.86) 0%, rgba(20, 20, 20, 0.55) 55%, rgba(20, 20, 20, 0.3) 100%);
}

.hero .wrap { position: relative; z-index: 1; width: 100%; padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.hero p { font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 46ch; color: var(--fg); }
.hero .btn { margin-top: 1.5rem; }

.eyebrow {
  font-family: var(--heading);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.9rem;
}

/* ---------- sections ---------- */

section { padding: clamp(2.25rem, 4.5vw, 3.5rem) 0; }

/* the header is sticky, so an anchored jump has to clear it */
section[id] { scroll-margin-top: 96px; }

.section-head { max-width: 60ch; margin-bottom: 1.75rem; }
.section-head p { color: var(--muted); margin: 0; }

.section-head--center { margin-inline: auto; text-align: center; }

/* Bone sections, alternating with the dark ones exactly as the shop does.
   These are the theme's own "alternative-2" scheme: #f0eee9 on #272722. */
.section--light {
  background: var(--bone);
  color: var(--bone-ink);
}

.section--light h2,
.section--light h3,
.section--light h3 a { color: var(--bone-ink); }
.section--light .section-head p,
.section--light .card .meta,
.section--light .card .excerpt,
.section--light .quote p { color: var(--bone-muted); }
.section--light .eyebrow { color: var(--bone-ink); }
.section--light .card {
  background: transparent;
  border-color: rgba(39, 39, 34, 0.16);
}
.section--light .card:hover { border-color: var(--bone-ink); }
.section--light .card h3 a:hover { color: var(--olive); }
.section--light .btn-ghost { color: var(--bone-ink); border-color: rgba(39, 39, 34, 0.28); }
.section--light .btn-ghost:hover { background: var(--bone-ink); color: var(--bone); border-color: var(--bone-ink); }
.section--light .quote {
  background: transparent;
  border: 0;
  padding: 0.5rem 1rem;
  text-align: center;
}
.section--light .quote h3 { color: var(--bone-ink); }
.section--light .quote .who { color: var(--bone-muted); }
.section--light .carousel-dots .dot::before { background: rgba(39, 39, 34, 0.25); }
.section--light .carousel-dots .dot:hover::before { background: rgba(39, 39, 34, 0.5); }
.section--light .carousel-dots .dot.is-active::before { background: var(--olive); }

/* ---------- collaborations ----------
   The credits are the strongest thing Koda has, so they get their own flat
   treatment rather than the card chrome: picture, date, title, nothing else. */

.tiles {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(5, 1fr);
}

.tile { position: relative; }
.tile .shot { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 10px; background: #ddd9d2; display: block; }
.tile .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.tile:hover .shot img { transform: scale(1.04); }
.tile .meta {
  display: block;
  margin: 0.75rem 0 0.3rem;
  font-size: 0.76rem;
  color: var(--bone-muted);
}
.tile h3 { font-size: 1rem; line-height: 1.25; margin: 0; }
.tile h3 a { color: var(--bone-ink); }
.tile h3 a::after { content: ''; position: absolute; inset: 0; }
.tile h3 a:hover { color: var(--olive); text-decoration: none; }

@media (max-width: 1000px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile h3 { font-size: 0.92rem; }
}

/* ---------- grids ---------- */

.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card:hover { border-color: var(--accent); }

.card .thumb { aspect-ratio: 3 / 2; overflow: hidden; background: #222; display: block; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }

.card-body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.card h3 { margin: 0; font-size: 1.15rem; }
.card h3 a { color: var(--fg); }
.card h3 a:hover { color: var(--accent); text-decoration: none; }

/* The title link is stretched over the whole card, so the tap target is the
   card rather than two lines of text. The thumb link sits under it. */
.card h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card .thumb { position: relative; z-index: 0; }
.card .meta { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.card .excerpt { color: var(--muted); font-size: 0.94rem; margin: 0; }

.more { margin-top: 1.75rem; }

/* ---------- testimonials carousel ---------- */
/* Three up on desktop, one on mobile, autoplaying a single card every 4s, the
   same behaviour as the Shopify theme's gridy-slider. Built on scroll-snap so it
   degrades to a swipeable row without JS. */

.carousel { position: relative; }

.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 1.5rem) / 3);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
  overscroll-behavior-x: contain;
}

.carousel-track::-webkit-scrollbar { display: none; }

.quote {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem;
  scroll-snap-align: start;
  margin: 0;
}

.carousel-dots {
  display: flex;
  gap: 0.15rem;
  justify-content: center;
  margin-top: 1.25rem;
}

/* The dot you see is 9px; the thing you tap is 44px, which is the minimum that
   works on a phone. */
.carousel-dots .dot {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.carousel-dots .dot::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.2s ease, transform 0.2s ease;
}

.carousel-dots .dot:hover::before { background: var(--muted); }
.carousel-dots .dot.is-active::before { background: var(--accent); transform: scale(1.25); }

@media (max-width: 900px) {
  .carousel-track { grid-auto-columns: calc((100% - 1.5rem) / 2); }
}

@media (max-width: 640px) {
  .carousel-track { grid-auto-columns: 100%; gap: 1rem; }
}

.quote h3 { font-size: 1.05rem; color: var(--accent); }
.quote p { color: var(--muted); font-size: 0.94rem; }
.quote .who { color: var(--fg); font-family: var(--heading); font-size: 0.85rem; }

/* ---------- article / page body ---------- */

.masthead { padding: clamp(2rem, 4.5vw, 3rem) 0 0; }
.masthead .meta { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.masthead h1 { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 22ch; }

.lead-image { margin: 1.75rem 0 0; border-radius: 14px; overflow: hidden; }

.prose { max-width: 68ch; margin: 0 auto; padding: 2.25rem 0 clamp(2.5rem, 5vw, 4rem); }
.prose > *:first-child { margin-top: 0; }
.prose p, .prose li { color: #ddd9d2; }
.prose h2 { margin-top: 2.4em; }
.prose h3, .prose h4 { margin-top: 2em; }
.prose img { border-radius: 12px; margin: 2rem auto; }
.prose blockquote {
  margin: 2rem 0;
  padding: 0.4rem 0 0.4rem 1.4rem;
  border-left: 3px solid var(--accent);
  color: var(--fg);
  font-style: italic;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.4rem; }
.prose center { display: block; }

/* ---------- product ---------- */

.not-for-sale {
  max-width: 52ch;
  color: var(--muted);
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin: 1.5rem 0;
}

.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.gallery img { border-radius: 12px; aspect-ratio: 1; object-fit: cover; width: 100%; }

/* ---------- waitlist ---------- */

/* The Tally form carries its own Koda styling (dark ground, orange submit), so
   it is embedded plain rather than dressed. transparentBackground is left off
   deliberately: with it on, Tally paints its labels dark and they vanish here. */
.waitlist-embed {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 2rem;
  max-width: 720px;
}

/* Height is fixed here because the embed runs without Tally's resizer script.
   Generous enough that the form never scrolls inside itself. */
.waitlist-embed iframe { width: 100%; border: 0; display: block; height: 660px; }

@media (max-width: 640px) {
  .waitlist-embed iframe { height: 780px; }
}

.cta-band { background: var(--olive); border-top: 1px solid var(--line); }
.cta-band .wrap { text-align: center; max-width: 62ch; }
.cta-band h2 { color: var(--cream); }
.cta-band p { color: rgba(250, 238, 216, 0.82); }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.25rem 0 2.75rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; }
.site-footer a { color: var(--fg); }
.site-footer .cols { display: flex; flex-wrap: wrap; gap: clamp(2rem, 6vw, 4rem); }
.site-footer h4 { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.site-footer .fine { width: 100%; border-top: 1px solid var(--line); padding-top: 1.5rem; font-size: 0.8rem; }

/* ---------- misc ---------- */

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem; top: 1rem; z-index: 50;
  background: var(--accent); color: var(--accent-ink);
  padding: 0.6rem 1rem; border-radius: 8px;
}

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

/* ---------- mobile rails ----------
   On a phone the teaser rows become swipeable side by side rails instead of a
   tall stack: the categories, the collaborations, the journal cards and each
   group on the range page. The cards are sized so the next one peeks, which is
   what tells you it scrolls. Index pages keep the plain stacked grid, because a
   thirty item horizontal rail is a worse way to read a list, not a better one. */

@media (max-width: 780px) {
  .grid--rail,
  .tiles {
    grid-template-columns: none;
    grid-auto-flow: column;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    /* bleed to the screen edges so a card can sit half off the side */
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    padding-bottom: 0.25rem;
    /* without this the snap ignores the gutter and pulls the first card flush
       against the screen edge, out of line with the heading above it */
    scroll-padding-inline: var(--pad);
  }

  .grid--rail::-webkit-scrollbar,
  .tiles::-webkit-scrollbar { display: none; }

  .grid--rail { grid-auto-columns: 78%; gap: 1rem; }
  .tiles { grid-auto-columns: 46%; gap: 0.9rem; }

  .grid--rail > *,
  .tiles > * { scroll-snap-align: start; }

  /* the last card needs room to snap flush rather than fight the edge */
  .grid--rail::after,
  .tiles::after { content: ''; width: 1px; }
}

@media (max-width: 780px) {
  .site-header .wrap {
    min-height: 60px;
    gap: 0.75rem;
    justify-content: flex-start;
    padding-block: 0.5rem;
  }
  .brand img { width: 62px; }

  .burger { display: flex; }

  /* backdrop-filter on an ancestor makes position:fixed resolve against that
     ancestor instead of the viewport, which pins the drawer inside the header
     and clips it to a short box. The header is near-opaque anyway, so on mobile
     the blur goes and the background goes solid. */
  .site-header {
    backdrop-filter: none;
    background: var(--bg);
  }

  /* The nav leaves the header and becomes a drawer off the left edge, the same
     side the burger sits on, so it reads as coming from the button. */
  .nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: min(78vw, 320px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 5.5rem 1.5rem 2rem;
    background: var(--bg);
    border-right: 1px solid var(--line);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav.is-open { transform: translateX(0); }

  /* The drawer is a descendant of the header, so it paints over its own
     siblings. The burger has to stay visible and clickable to close, and the
     logo should not disappear under the panel. */
  .burger, .brand { position: relative; z-index: 45; }

  .nav a {
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
  }

  .nav a:last-child { border-bottom: 0; }
  .hero { min-height: 0; }
  .hero::after {
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.55) 0%, rgba(20, 20, 20, 0.85) 60%, rgba(20, 20, 20, 0.92) 100%);
  }
  /* footer links get room to be tapped rather than aimed at */
  .site-footer ul { gap: 0; }
  .site-footer ul a { display: inline-block; padding-block: 0.55rem; }
  .site-footer .cols { gap: 1.75rem 2.5rem; }
  /* stacked buttons rather than two half-width ones squeezed side by side */
  .more .btn, .hero .btn { display: block; text-align: center; }
  .more .btn + .btn { margin: 0.6rem 0 0 !important; }
}