@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');
:root { --cream:#f2e9d8; --paper:#fff8e9; --deep:#23452f; --leaf:#6f8f53; --tomato:#d94a32; --butter:#e7c65a; --earth:#7a5338; --ink:#1e201c; --line:rgba(30,32,28,.2); }

* { box-sizing:border-box; }
 html { scroll-behavior:smooth; background:#d8cdb9; }
 body { position:relative; margin:0; overflow-x:hidden; background:var(--cream); color:var(--ink); font:16px/1.6 Archivo,sans-serif; }
 a { color:inherit; }
 img { display:block; max-width:100%; }

.market-header { position:sticky; top:0; z-index:20; display:grid; grid-template-columns:1fr auto; align-items:center; min-height:70px; padding:14px 5vw; border-bottom:1px solid rgba(30,32,28,.16); background:rgba(242,233,216,.94); backdrop-filter:blur(12px); }
.market-brand { color:var(--deep); font:700 23px Fraunces,serif; letter-spacing:-.05em; text-decoration:none; }
.market-brand span { color:var(--tomato); }
.market-header nav,.market-header__note { display:none; }

.kicker { margin:0; color:var(--tomato); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
 h1,h2,h3,p { margin-top:0; }
 h1,h2,h3 { font-family:Fraunces,serif; font-weight:600; letter-spacing:-.055em; line-height:.98; }
 em { color:var(--tomato); font-style:italic; }

.market-opening { position:relative; display:grid; gap:34px; padding:52px 5vw 72px; background:var(--deep); color:var(--cream); overflow:hidden; }
.opening-copy { position:relative; z-index:2; }
.opening-copy .kicker { color:var(--butter); }
.opening-copy h1 { max-width:620px; margin:25px 0; font-size:clamp(40px,5.6vw,66px); }
.opening-copy h1 em { color:var(--butter); }
.opening-copy__lead { max-width:500px; margin-bottom:18px; color:var(--paper); font:500 clamp(20px,3.5vw,31px)/1.12 Fraunces,serif; letter-spacing:-.035em; }
.opening-copy > p:not(.kicker):not(.opening-copy__lead) { max-width:520px; color:rgba(255,248,233,.82); }
.market-link { display:inline-flex; gap:12px; align-items:center; margin-top:18px; padding-bottom:7px; border-bottom:2px solid var(--tomato); color:inherit; font-size:11px; font-weight:700; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
.market-link:hover,.market-link:focus-visible { color:var(--butter); }
.opening-image { position:relative; z-index:1; margin:0 -5vw; }
.opening-image img { width:100%; aspect-ratio:1.05; object-fit:cover; }
.opening-image::after { position:absolute; inset:0; background:linear-gradient(0deg,rgba(35,69,47,.72),transparent 50%); content:''; }
.opening-image figcaption { position:absolute; z-index:2; right:5vw; bottom:18px; display:grid; gap:2px; padding:12px 14px; background:var(--tomato); color:var(--paper); font-size:9px; letter-spacing:.13em; }
.opening-image figcaption strong { color:var(--butter); }
.opening-stamp { position:absolute; z-index:3; right:-16px; bottom:8px; margin:0; color:rgba(231,198,90,.92); font:600 18px/.9 Fraunces,serif; letter-spacing:-.04em; transform:rotate(-10deg); }

.market-intro { display:grid; grid-template-columns:1fr auto; gap:20px; padding:72px 5vw; background:var(--butter); color:var(--deep); }
.market-intro p { max-width:800px; margin:0; font:500 clamp(24px,5vw,44px)/1.04 Fraunces,serif; letter-spacing:-.045em; }
.market-intro span { align-self:end; color:var(--tomato); font-size:44px; }

.market-crate-section { padding:76px 5vw; background:var(--paper); }
.crate-heading { max-width:700px; }
.crate-heading h2 { max-width:660px; margin:20px 0; color:var(--deep); font-size:clamp(34px,6vw,62px); }
.crate-heading > p:last-child { max-width:540px; color:var(--earth); }
.crate-layout { display:grid; gap:36px; margin-top:48px; }
.market-notes { display:grid; border-top:1px solid var(--line); }
.market-note { display:grid; grid-template-columns:32px 1fr; gap:12px; padding:25px 0; border:0; border-bottom:1px solid var(--line); background:transparent; color:inherit; cursor:pointer; text-align:left; transition:padding .35s ease,background .35s ease; }
.market-note:focus-visible { outline:3px solid var(--tomato); outline-offset:5px; }
.market-note__number { color:var(--tomato); font-size:12px; font-weight:700; }
.market-note h3 { color:var(--deep); font-size:clamp(24px,4vw,34px); }
.market-note div p { margin:12px 0 0; color:var(--earth); font-size:14px; }
.market-note > span { grid-column:2; margin-top:12px; color:var(--tomato); font-size:10px; font-weight:700; letter-spacing:.1em; }
.market-note > span b { font-size:14px; }
.market-note.is-active { margin-inline:-12px; padding-inline:12px; background:rgba(231,198,90,.25); }

.crate-stage { position:relative; display:grid; min-height:400px; align-content:center; overflow:hidden; padding:34px 24px 24px; background:var(--deep); color:var(--paper); }
.crate-stage > :not(.produce-reveal) { position:relative; z-index:1; }
.produce-reveal { position:absolute; inset:0; margin:0; overflow:hidden; background:var(--deep); }
.produce-reveal::after { position:absolute; inset:0; background:linear-gradient(180deg,rgba(35,69,47,.2),rgba(35,69,47,.88) 82%); content:''; }
.produce-reveal img { width:100%; height:100%; object-fit:cover; opacity:.58; transform:scale(1.07); transition:opacity .55s ease,transform 1.1s cubic-bezier(.22,1,.36,1); }
.produce-reveal.is-changing img { opacity:0; transform:scale(1.17) rotate(-1.5deg); transition-duration:.25s; }
.produce-reveal figcaption { position:absolute; z-index:1; right:18px; bottom:16px; color:var(--butter); font-size:9px; font-weight:700; letter-spacing:.14em; transform:rotate(-4deg); }
.crate-stage__eyebrow { margin:0; color:var(--butter); font-size:9px; letter-spacing:.14em; }
.crate-stage__status { max-width:310px; margin:12px auto; text-align:center; }
.crate-stage__status strong { color:var(--butter); }
.crate-stage__counter { margin:0; color:rgba(255,248,233,.64); font-size:10px; letter-spacing:.12em; text-align:center; }
.crate-stage__counter span { color:var(--butter); }

.market-route { display:grid; gap:42px; padding:78px 5vw; background:var(--leaf); color:var(--paper); }
.route-copy h2 { max-width:680px; margin:22px 0; font-size:clamp(34px,6vw,62px); }
.route-copy h2 em { color:var(--deep); }
.route-copy p:not(.kicker) { max-width:580px; }
.route-tickets { display:grid; gap:10px; align-content:end; }
.route-tickets span { padding:16px; border:1px dashed rgba(255,248,233,.54); color:var(--butter); font-size:10px; letter-spacing:.13em; transform:rotate(-2deg); }
.route-tickets span:nth-child(2) { transform:rotate(2deg); }
.route-tickets span:nth-child(3) { transform:rotate(-1deg); }
.route-tickets b { color:var(--paper); font-size:16px; }

.market-growers { position:relative; padding:78px 5vw; overflow:hidden; background:var(--cream); }
.market-growers h2 { max-width:850px; margin:20px 0 34px; color:var(--deep); font-size:clamp(36px,6vw,68px); }
.market-growers > div:not(.grower-seals) { display:grid; gap:18px; max-width:800px; color:var(--earth); }
.grower-seals { display:flex; flex-wrap:wrap; gap:12px; margin-top:42px; }
.grower-seals span { display:grid; width:112px; aspect-ratio:1; place-content:center; border:1px dashed var(--tomato); border-radius:50%; color:var(--tomato); font:600 22px/1 Fraunces,serif; text-align:center; transform:rotate(-5deg); }
.grower-seals span:nth-child(2) { transform:rotate(5deg); }.grower-seals span:nth-child(3) { transform:rotate(-2deg); }
.grower-seals b { margin-top:8px; font:700 8px Archivo,sans-serif; letter-spacing:.08em; }
.market-boxes { padding:78px 5vw; background:var(--deep); color:var(--paper); }
.boxes-heading h2 { max-width:760px; margin:20px 0; font-size:clamp(36px,6vw,66px); }.boxes-heading h2 em { color:var(--butter); }
.boxes-heading > p:last-child { max-width:600px; color:rgba(255,248,233,.75); }
.box-options { display:grid; gap:14px; margin-top:44px; }
.box-options article { display:grid; gap:12px; padding:26px 22px; border:1px dashed rgba(255,248,233,.44); }
.box-options article>span { color:var(--butter); font-size:9px; font-weight:700; letter-spacing:.13em; }.box-options article>strong { font:600 34px Fraunces,serif; }.box-options article>p { margin:0; color:rgba(255,248,233,.72); }.box-options article>b { color:var(--butter); }
.box-options .is-featured { background:var(--tomato); transform:rotate(1deg); }.box-options .is-featured>span,.box-options .is-featured>b { color:var(--deep); }

.market-closing { padding:78px 5vw; background:var(--tomato); color:var(--paper); }
.market-closing .kicker { color:var(--butter); }
.market-closing h2 { max-width:700px; margin:20px 0; font-size:clamp(36px,6vw,66px); }
.market-closing h2 em { color:var(--deep); }
.market-closing div > p:not(.kicker) { max-width:570px; }
.market-closing form { display:grid; gap:14px; margin-top:38px; padding:24px; background:var(--paper); color:var(--ink); transform:rotate(-1deg); }
.market-closing label { display:grid; gap:6px; color:var(--deep); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.market-closing input,.market-closing select { width:100%; padding:12px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; color:var(--ink); font:16px Archivo,sans-serif; }
.market-closing button { min-height:50px; border:0; background:var(--deep); color:var(--butter); font-weight:700; cursor:pointer; }.form-status { min-height:20px; margin:0; color:var(--earth); font-size:12px; }
.market-footer { display:grid; gap:8px; padding:26px 5vw; background:var(--deep); color:var(--paper); }
.market-footer strong { font:600 26px Fraunces,serif; }
.market-footer span,.market-footer small { color:var(--butter); font-size:9px; letter-spacing:.12em; }

@media (min-width:760px) { body { width: min(calc(100% - clamp(24px, 4vw, 72px)), 1640px); margin-inline: auto; box-shadow: 0 0 54px rgba(20, 24, 21, .14); }
.market-header { grid-template-columns:1fr auto 1fr; }
.market-header nav { display:flex; gap:24px; }
.market-header nav a,.market-header__note { color:var(--deep); font-size:10px; font-weight:700; letter-spacing:.05em; text-decoration:none; text-transform:uppercase; }
.market-header__note { display:block; justify-self:end; color:var(--tomato); }
.market-opening { grid-template-columns:minmax(0,.9fr) minmax(440px,1.1fr); align-items:center; min-height:690px; padding-block:74px; }
.opening-image { margin:0 -5vw 0 0; }
.opening-image img { min-height:535px; aspect-ratio:auto; }
.opening-stamp { right:4vw; bottom:8%; }
.market-intro { grid-template-columns:minmax(0,1fr) auto; align-items:end; padding-block:96px; }
.crate-layout { grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr); gap:70px; align-items:start; }
.crate-stage { position:sticky; top:100px; min-height:520px; }
.market-note { grid-template-columns:40px 1fr auto; gap:20px; }
.market-note > span { grid-column:auto; align-self:center; margin:0; }
.market-route { grid-template-columns:minmax(0,1.15fr) minmax(280px,.55fr); align-items:end; padding-block:110px; }
.market-growers>div:not(.grower-seals) { grid-template-columns:1fr 1fr; gap:70px; }.grower-seals { justify-content:flex-end; margin-top:-54px; }
.box-options { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }.box-options article { min-height:290px; align-content:space-between; }
.market-closing { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.8fr); column-gap:70px; align-items:end; padding-block:110px; }
.market-closing form { margin:0; }
.market-footer { grid-template-columns:1fr auto 1fr; align-items:center; }
.market-footer small { justify-self:end; }
 }

@media (min-width:1100px) { .market-header,.market-opening,.market-intro,.market-crate-section,.market-route,.market-growers,.market-boxes,.market-closing,.market-footer { padding-right:max(5vw,calc((100vw - 1440px)/2)); padding-left:max(5vw,calc((100vw - 1440px)/2)); }
.opening-image { margin-right:calc(-1 * max(5vw,calc((100vw - 1440px)/2))); }
 }

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }
.market-note,.produce-reveal img { transition:none; }.box-options .is-featured,.grower-seals span { transform:none; }
 }
