:root {
  --paper: #eee9df;
  --paper-2: #e5ddd0;
  --ink: #1d1b18;
  --brown: #653b2b;
  --moss: #656148;
  --line: rgba(29, 27, 24, 0.28);
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
button { color: inherit; font: inherit; }

.announcement { height: 27px; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--ink); color: var(--paper); font-size: 10px; letter-spacing: .17em; }
.site-header { position: absolute; z-index: 20; top: 27px; left: 0; right: 0; height: 86px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 3.4vw; color: #f4efe6; border-bottom: 1px solid rgba(255,255,255,.34); }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 38px); text-transform: uppercase; font-size: 11px; letter-spacing: .14em; }
.nav-right { justify-content: flex-end; }
.nav a, .text-link { position: relative; }
.nav a::after, .text-link::after { content: ""; position: absolute; height: 1px; left: 0; right: 100%; bottom: -5px; background: currentColor; transition: right .3s ease; }
.nav a:hover::after, .text-link:hover::after { right: 0; }
.wordmark { color: #fff; font: 600 clamp(27px, 2.6vw, 40px)/1 var(--serif); letter-spacing: .12em; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.menu-toggle, .mobile-shop { display: none; }
.mobile-panel { display: none; }

.hero { min-height: calc(100svh - 27px); display: grid; grid-template-columns: 48% 52%; position: relative; background: #202017; color: #eee9df; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 58%); }
.hero-copy { min-height: calc(100svh - 27px); padding: 29vh 7vw 9vh; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.eyebrow { margin: 0 0 24px; font-size: 11px; letter-spacing: .19em; text-transform: uppercase; }
.hero h1 { margin: 0 0 24px; font: italic 400 clamp(72px, 11vw, 180px)/.78 var(--serif); letter-spacing: -.07em; }
.hero-line { max-width: 390px; font: 400 clamp(20px, 2.3vw, 34px)/1.14 var(--serif); }
.text-link { display: inline-flex; width: fit-content; align-items: center; gap: 24px; padding-bottom: 4px; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
.hero .text-link { margin-top: 6vh; }
.hero-image { margin: 0; min-height: calc(100svh - 27px); position: relative; overflow: hidden; }
.hero-image img { filter: saturate(.72) contrast(1.02); object-position: center 42%; }
.hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.2), transparent 35%, rgba(0,0,0,.18)); }
.hero-image figcaption { display: none; }
.hero-index { position: absolute; z-index: 3; right: 3.4vw; bottom: 2.5vh; margin: 0; font-size: 10px; letter-spacing: .16em; }

.statement { padding: clamp(110px, 15vw, 230px) 7vw; display: grid; grid-template-columns: 20% 1fr 25%; gap: 4vw; align-items: end; }
.statement .eyebrow { align-self: start; margin-top: 12px; }
.statement h2 { margin: 0; font: 400 clamp(45px, 6.1vw, 100px)/.96 var(--serif); letter-spacing: -.045em; }
.statement h2 em, .final-manifesto em, .gnomies-copy em { font-weight: 400; color: var(--brown); }
.production-note { margin: 0 0 16px; color: var(--brown); font: 15px/1.4 var(--serif); }
.statement-copy { margin: 0; max-width: 280px; font: 18px/1.5 var(--serif); }

.shop-section { padding: 0 3.4vw clamp(120px, 14vw, 220px); }
.section-heading { padding-bottom: 30px; display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 8vw; border-bottom: 1px solid var(--ink); }
.section-heading .eyebrow { margin: 0 0 9px; }
.section-heading h2 { margin: 0; font: 400 clamp(40px, 4.5vw, 72px)/1 var(--serif); }
.section-heading .text-link { margin-bottom: 8px; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2vw; padding-top: 24px; }
.product-card { min-width: 0; }
.product-image { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-2); }
.product-image img { transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.product-card:hover img { transform: scale(1.025); }
.product-meta { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline; padding-top: 13px; }
.product-meta h3 { margin: 0; font: 400 18px/1.2 var(--serif); }
.product-meta p { margin: 0; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }

.collection { min-height: 88vh; display: grid; grid-template-columns: 62% 38%; background: var(--paper-2); }
.collection-image { min-height: 88vh; overflow: hidden; }
.collection-image img { object-position: center center; }
.collection-copy { padding: 10vw 6vw; display: flex; flex-direction: column; justify-content: center; }
.collection-copy h2 { margin: 0 0 36px; font: 400 clamp(64px, 8vw, 128px)/.8 var(--serif); letter-spacing: -.06em; }
.collection-copy > p:not(.eyebrow) { max-width: 370px; margin: 0 0 60px; font: 22px/1.35 var(--serif); }

.human-moment { position: relative; height: 100svh; background: #494436; color: white; overflow: hidden; }
.human-moment img { object-position: center 45%; filter: saturate(.82); }
.human-moment::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.38)); }
.human-moment p { position: absolute; z-index: 2; left: 5vw; bottom: 4vw; margin: 0; font: 400 clamp(32px, 5.5vw, 88px)/.92 var(--serif); letter-spacing: -.035em; }

.fungi-section { padding: clamp(120px, 14vw, 210px) 3.4vw; background: var(--moss); color: #f0eadf; }
.fungi-title { display: grid; grid-template-columns: 20% 1fr 32%; align-items: end; gap: 3vw; padding-bottom: 48px; }
.fungi-title .eyebrow { align-self: start; margin-top: 10px; }
.fungi-title h2 { margin: 0; font: italic 400 clamp(80px, 12vw, 180px)/.7 var(--serif); letter-spacing: -.065em; }
.fungi-title > p:last-child { margin: 0; font: 20px/1.45 var(--serif); max-width: 400px; }
.fungi-editorial { display: grid; grid-template-columns: 52% 28% 1fr; align-items: end; gap: 1.5vw; }
.fungi-editorial figure { margin: 0; }
.fungi-main { aspect-ratio: 4 / 5; }
.fungi-detail { aspect-ratio: 3 / 4; margin-bottom: 11vw !important; }
.fungi-editorial figcaption { padding-top: 10px; font-size: 9px; letter-spacing: .17em; }
.fungi-cta { align-self: end; padding: 0 0 4vw 1vw; }
.fungi-cta p { font: 20px/1.3 var(--serif); }
.round-link { width: 64px; height: 64px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; display: grid; place-items: center; font-size: 24px; transition: .3s ease; }
.round-link:hover { background: #f0eadf; color: var(--moss); transform: rotate(45deg); }

.gnomies-section { display: grid; grid-template-columns: 33% 34% 33%; background: #d8cebc; }
.gnomies-poster, .gnomies-shelf { aspect-ratio: 4 / 5; overflow: hidden; }
.gnomies-poster img { object-position: center; }
.gnomies-shelf img { object-position: center; }
.gnomies-copy { padding: 9vw 4vw; display: flex; flex-direction: column; justify-content: center; text-align: center; align-items: center; }
.gnomies-copy h2 { margin: 0 0 42px; font: 400 clamp(52px, 6vw, 94px)/.84 var(--serif); letter-spacing: -.05em; }
.gnomies-copy > p:not(.eyebrow) { max-width: 340px; margin: 0 0 50px; font: 19px/1.5 var(--serif); }

.final-manifesto { padding: clamp(120px, 16vw, 250px) 4vw; text-align: center; }
.final-manifesto h2 { margin: 0 0 60px; font: 400 clamp(50px, 8vw, 130px)/.89 var(--serif); letter-spacing: -.045em; }
.pill-link { display: inline-flex; padding: 17px 28px; border: 1px solid var(--ink); border-radius: 999px; font-size: 11px; letter-spacing: .14em; transition: .25s ease; }
.pill-link:hover { background: var(--ink); color: var(--paper); }

footer { padding: 7vw 3.4vw 3vw; background: var(--brown); color: var(--paper); }
.footer-wordmark { padding-bottom: 5vw; font: 400 clamp(74px, 17vw, 280px)/.7 var(--serif); letter-spacing: -.07em; border-bottom: 1px solid rgba(255,255,255,.4); }
.footer-grid { padding-top: 35px; display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 3vw; font-size: 10px; letter-spacing: .14em; line-height: 1.8; }
.footer-grid > div { display: flex; flex-direction: column; }
.footer-grid p { margin: 0 0 8px; }
.footer-note { justify-content: space-between; text-align: right; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .announcement { font-size: 8px; letter-spacing: .12em; }
  .site-header { position: absolute; height: 68px; padding: 0 18px; grid-template-columns: 1fr auto 1fr; }
  .nav { display: none; }
  .menu-toggle { display: flex; width: 32px; height: 32px; padding: 8px 2px; border: 0; background: none; flex-direction: column; justify-content: center; gap: 6px; cursor: pointer; }
  .menu-toggle span { display: block; width: 24px; height: 1px; background: currentColor; transition: .3s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-shop { display: block; justify-self: end; font-size: 10px; letter-spacing: .14em; }
  .wordmark { font-size: 26px; }
  .mobile-panel { display: block; position: fixed; z-index: 15; inset: 27px 0 0; padding: 110px 24px 40px; background: var(--paper); visibility: hidden; opacity: 0; transform: translateY(-15px); transition: .35s ease; }
  .mobile-panel.is-open { visibility: visible; opacity: 1; transform: none; }
  .mobile-panel nav { display: flex; flex-direction: column; }
  .mobile-panel nav a { padding: 10px 0; font: 400 42px/1.05 var(--serif); border-bottom: 1px solid var(--line); }
  .mobile-panel p { position: absolute; bottom: 28px; font-size: 11px; letter-spacing: .14em; line-height: 1.5; }
  body.menu-open { overflow: hidden; }
  body.menu-open .site-header { position: fixed; color: var(--ink); }
  body.menu-open .wordmark { color: var(--ink); text-shadow: none; }

  .hero { min-height: calc(100svh - 27px); display: block; }
  .hero-image { min-height: calc(100svh - 27px); }
  .hero-image img { object-position: 50% center; }
  .hero-copy { min-height: 0; position: absolute; z-index: 4; inset: auto 22px 48px; padding: 0; display: block; }
  .hero-copy .eyebrow, .hero-copy .hero-line { display: none; }
  .hero h1 { margin: 0 0 20px; font-size: 86px; color: white; }
  .hero .text-link { margin: 0; color: white; }
  .hero-image::after { background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 45%, rgba(0,0,0,.55)); }
  .hero-index { display: none; }

  .statement { padding: 105px 22px; display: block; }
  .statement h2 { font-size: 49px; }
  .statement-detail { margin-top: 35px; }
  .production-note { margin-bottom: 13px; font-size: 14px; }
  .statement-copy { font-size: 17px; }
  .section-heading { display: block; }
  .section-heading h2 { font-size: 43px; }
  .section-heading .text-link { margin-top: 24px; }
  .shop-section { padding: 0 14px 110px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 10px; }
  .product-meta { display: block; }
  .product-meta h3 { font-size: 16px; }
  .product-meta p { margin-top: 4px; font-size: 8px; }

  .collection { min-height: 0; display: flex; flex-direction: column; }
  .collection-image { min-height: 66vh; }
  .collection-copy { padding: 90px 24px; }
  .collection-copy h2 { font-size: 70px; }
  .collection-copy > p:not(.eyebrow) { margin-bottom: 44px; font-size: 20px; }
  .human-moment { height: 82vh; }
  .human-moment p { left: 22px; bottom: 28px; font-size: 36px; }

  .fungi-section { padding: 105px 14px; }
  .fungi-title { display: block; padding: 0 9px 45px; }
  .fungi-title h2 { font-size: 100px; margin-bottom: 35px; }
  .fungi-title > p:last-child { font-size: 18px; }
  .fungi-editorial { grid-template-columns: 67% 33%; gap: 9px; align-items: start; }
  .fungi-main { aspect-ratio: 3 / 4.5; }
  .fungi-detail { aspect-ratio: 3 / 4; margin: 70px 0 0 !important; }
  .fungi-editorial figcaption { font-size: 7px; }
  .fungi-cta { grid-column: 1 / -1; padding: 42px 8px 0; display: flex; align-items: end; justify-content: space-between; }

  .gnomies-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
  .gnomies-poster { aspect-ratio: 9 / 16; }
  .gnomies-copy { grid-column: 1 / -1; grid-row: 2; padding: 100px 22px; }
  .gnomies-copy h2 { font-size: 60px; }
  .gnomies-shelf { aspect-ratio: 9 / 16; }
  .gnomies-poster, .gnomies-shelf { grid-row: 1; }
  .final-manifesto { padding: 115px 20px; }
  .final-manifesto h2 { font-size: 50px; }
  footer { padding: 75px 20px 30px; }
  .footer-wordmark { font-size: clamp(56px, 18vw, 82px); letter-spacing: -.085em; white-space: nowrap; padding-bottom: 34px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 35px 20px; }
  .footer-note { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .product-image img, .round-link { transition: none; }
}