/* ============================================================
   WRM — With Raw Materials
   Base: withrawmaterials.com tokens (paper, ink, olive; Instrument
   Serif display, EB Garamond editorial, DM Sans body, mono labels).
   Extended: nav, menu, cart, shop, product, materials, world, FAQ.
   ============================================================ */

:root{
  --paper:#E8DFC8; --ink:#1C1A17; --ink-soft:#3A352E; --muted:#6E6458;
  --rule:rgba(28,26,23,.18); --olive:#8B7B2B; --olive-soft:#9C8D3F; --ember:#7B2C22;
  --menu:#8f9a6b;               /* muted olive from the menu mockup */
  --display:"Instrument Serif",serif;
  --editorial:"EB Garamond","Cormorant Garamond",Georgia,serif;
  --body:"DM Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --nav-h:64px; --gutter:clamp(20px,5vw,40px); --max:1400px;
  /* Hamburger rules drawn as an SVG stroke so they rasterise at the same device-pixel
     weight as the cart icon's stroke (both stroke-width .9 on a 24-unit viewBox). */
  --ham:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 19.43" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="square"><path d="M1.5 3.6h21M1.5 9.9h21M1.5 16.1h21"/></svg>');
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;background:#E8DFC8}
body{overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper) url("/img/texture.jpg") repeat;
  background-size:900px 900px; background-blend-mode:multiply; -webkit-tap-highlight-color:transparent;
  color:var(--ink); font-family:var(--body); font-weight:400; line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
/* grain + vignette (from live site) */
body::before{content:"";position:fixed;inset:0 0 env(safe-area-inset-bottom,0) 0;pointer-events:none;z-index:100;opacity:.14;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
  background:radial-gradient(ellipse 120% 80% at 50% -10%,rgba(91,106,122,.08),transparent 60%)}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input{font:inherit;color:inherit}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}
.arr{display:inline-block;transition:transform .25s ease}
a:hover .arr,button:hover .arr{transform:translateX(3px)}

/* ---------- Header ---------- */
.nav{position:fixed;inset:0 0 auto 0;height:calc(var(--nav-h) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);z-index:200;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gutter);
  transition:background .3s ease,box-shadow .3s ease}
.nav.solid{background:rgba(232,223,200,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--rule)}
.nav-logo{justify-self:center;display:grid;place-items:center;min-width:44px;min-height:44px}
.nav-logo img{height:34px;width:auto}
.nav-btn{width:44px;height:44px;display:grid;place-items:center;position:relative}
.nav-menu{justify-self:start}
.nav-menu span{position:absolute;left:9px;top:50%;width:26px;height:1.5px;margin-top:-.75px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.nav-menu span:nth-child(1){transform:translateY(-7px)}
.nav-menu span:nth-child(3){transform:translateY(7px)}
.nav-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(0) rotate(45deg)}
.nav-menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(0) rotate(-45deg)}
.nav-cart{justify-self:end}
.nav-cart svg{width:25px;height:25px;shape-rendering:geometricPrecision}
.nav-cart[hidden]{display:none}
.nav-cart-count{position:absolute;top:4px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:9.5px;line-height:16px;text-align:center}
.nav-cart-count[hidden]{display:none}
.nav.on-dark{color:#fff;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,0))}
.nav.menu-open{background:transparent!important;color:var(--ink);box-shadow:none}
.nav.menu-open .nav-menu span{background:var(--ink)}
.nav.menu-open .nav-logo img{filter:none}
.nav.on-dark .nav-menu span{background:#fff}
.nav.on-dark .nav-logo img{filter:invert(1) brightness(1.15)}
.nav.on-dark .nav-cart-count{background:#fff;color:#111}

/* ---------- Menu overlay (olive panel, per mockup) ---------- */
.menu{position:fixed;inset:0;height:100dvh;z-index:190;padding-top:env(safe-area-inset-top);background:var(--menu);
  transform:translateY(-100%);transition:transform .5s var(--ease);overflow-y:auto}
.menu[aria-hidden="false"]{transform:none}
.menu-list{display:flex;flex-direction:column;min-height:100%;padding:calc(var(--nav-h) + 24px) var(--gutter) calc(40px + env(safe-area-inset-bottom));max-width:720px}
.menu-item{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;
  padding:18px 0;font-family:var(--editorial);font-size:26px;color:var(--ink);
  text-decoration:none;transition:padding-left .25s var(--ease)}
.menu-item:hover{padding-left:6px}
.menu-item .chev{font-family:var(--body);font-size:22px;line-height:1;transition:transform .25s var(--ease)}
.menu-item[aria-expanded="true"] .chev{transform:rotate(90deg)}
.menu-sub{display:none;flex-direction:column;padding-left:22px}
.menu-sub.open{display:flex}
.menu-sub .menu-item{font-size:21px;padding:14px 0}
.menu-sub .menu-sub .menu-item{font-size:18px;padding:12px 0;color:var(--ink-soft)}
.menu-item.soon{color:rgba(28,26,23,.5);cursor:default}
.menu-item.soon:hover{padding-left:0}
.menu-item .tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-left:12px}
.menu-foot{margin-top:auto;padding-top:48px;font-family:var(--editorial);font-size:16px;display:flex;gap:28px;flex-wrap:wrap}
.menu-foot a{text-decoration:none;border-bottom:1px solid transparent}
.menu-foot a:hover{border-color:var(--ink)}

/* ---------- Cart drawer ---------- */
.scrim{position:fixed;inset:0;z-index:205;background:rgba(28,26,23,.35);opacity:0;transition:opacity .3s}
.scrim.show{opacity:1}
.scrim[hidden]{display:none}
.cart{position:fixed;top:0;right:0;bottom:0;height:100dvh;width:min(420px,100%);z-index:210;background:var(--paper);
  box-shadow:-20px 0 60px rgba(28,26,23,.18);transform:translateX(100%);transition:transform .45s var(--ease);
  display:flex;flex-direction:column}
.cart[aria-hidden="false"]{transform:none}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:calc(16px + env(safe-area-inset-top)) 16px 16px 24px;border-bottom:1px solid var(--rule)}
.cart-title{font-family:var(--display);font-size:24px}
.cart-close{font-size:30px;line-height:1;width:48px;height:48px;display:grid;place-items:center;font-weight:300}
.cart-body{flex:1;overflow-y:auto}
.cart-empty{padding:48px 24px;font-family:var(--editorial);font-style:italic;color:var(--muted);text-align:center}
.cart-item{display:grid;grid-template-columns:72px 1fr auto;gap:16px;padding:18px 24px;border-bottom:1px solid var(--rule);align-items:center}
.cart-item img{width:72px;height:72px;object-fit:cover}
.cart-item-name{font-family:var(--editorial);font-size:17px}
.cart-item-sub{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.cart-item-price{font-family:var(--editorial);font-size:16px;margin-top:6px}
.qty{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px}
.qty button{width:36px;height:36px;border:1px solid var(--rule)}
.qty button:hover{border-color:var(--ink)}
.cart-remove{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:8px;padding:8px 0;min-height:32px}
.cart-remove:hover{color:var(--ember)}
.cart-foot{padding:20px 24px calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--rule)}
.cart-note{font-family:var(--editorial);font-style:italic;font-size:13px;color:var(--muted);text-align:center;margin:12px 0 0}
.cart-foot[hidden]{display:none}
.cart-total{display:flex;justify-content:space-between;font-family:var(--editorial);font-size:18px;margin-bottom:14px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:14px 22px;border:1px solid var(--ink);color:var(--ink);text-decoration:none;transition:background .25s,color .25s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-fill{background:var(--ink);color:var(--paper);width:100%;justify-content:center}
.btn-fill:hover{background:var(--ember)}
.btn[disabled]{opacity:.45;cursor:default}
.btn[disabled]:hover{background:transparent;color:var(--ink)}
.link{font-family:var(--editorial);font-size:17px;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:1px;display:inline-block;position:relative}
.link::after{content:"";position:absolute;inset:-10px -8px}
.link:hover{color:var(--olive);border-color:var(--olive)}

/* ---------- Page transitions ---------- */
.page{animation:pageIn .6s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(8px);animation:rise .9s ease .1s forwards}
.reveal.d2{animation-delay:.22s}.reveal.d3{animation-delay:.38s}.reveal.d4{animation-delay:.54s}
@keyframes rise{to{opacity:1;transform:none}}
.observe{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease}
.observe.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.page,.reveal,.observe{animation:none;opacity:1;transform:none;transition:none}}

/* ============================================================
   HOME — exact replica of withrawmaterials.com
   ============================================================ */
.hero{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:calc(var(--nav-h) + 20px) 24px 80px;position:relative}
.hero-card{width:min(1100px,100%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:40px}
.logo-wrap{width:60%;max-width:420px;aspect-ratio:1122/960}
.logo-wrap img{width:100%;height:100%;object-fit:contain}
h1.headline{font-family:var(--display);font-weight:400;font-size:clamp(36px,5.4vw,74px);line-height:1.02;letter-spacing:-.01em;margin:0;white-space:nowrap}
h1 .italic{font-style:italic;color:var(--ink-soft)}
h1 .soft{font-style:italic;color:var(--muted)}
.notify{display:flex;align-items:stretch;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);width:min(480px,100%)}
.notify input{flex:1;appearance:none;background:transparent;border:0;padding:16px 8px;font-size:16px;outline:none;min-width:0;border-radius:0}
.notify input::placeholder{color:var(--muted);font-style:italic}
.notify button{border-left:1px solid var(--rule);padding:0 22px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;transition:background .25s,color .25s}
.notify button:hover{background:var(--ink);color:var(--paper)}
.scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-family:var(--editorial);font-style:italic;font-size:14px;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none}
.scroll-hint::after{content:"";width:1px;height:38px;background:var(--olive);animation:dropline 2.2s ease-in-out infinite;transform-origin:top}
@keyframes dropline{0%{transform:scaleY(.3);opacity:.3}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.3);opacity:.3}}

.editorial{font-family:var(--editorial)}
.ed-page{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);position:relative}
.rule{height:1px;background:var(--olive);border:0;margin:0}
.row{display:grid;grid-template-columns:minmax(160px,1fr) 2fr;gap:40px;padding:28px 0 0}
.label{font-style:italic;font-weight:500;font-size:20px;letter-spacing:.04em;text-transform:uppercase;line-height:1.25}
.body-copy{font-size:18px;line-height:1.4;max-width:466px}
.body-copy .smallcaps{text-transform:uppercase;font-variant:small-caps;letter-spacing:.04em}
.ocean-chapter{padding:80px 0 140px}
.ocean-chapter .illus{width:calc(100% + 160px);margin:0 -80px;pointer-events:none}
.ocean-chapter .illus img{width:100%;height:auto}
.materials-header{font-style:italic;font-weight:500;font-size:22px;text-transform:uppercase;letter-spacing:.04em;line-height:1.25;margin:28px 0 70px;max-width:36%}
.material-card{position:relative;margin-bottom:80px}
.material-card .mat-col{position:relative;width:62%;margin-left:auto;min-height:300px}
.material-card .illus-bg{position:absolute;z-index:0;pointer-events:none;left:50%;top:50%;transform:translate(-50%,-50%);width:140%;max-width:360px;opacity:.95}
.material-card.salmon .illus-bg{width:110%;max-width:440px;opacity:.75;top:78%}
.material-card.algae .illus-bg{width:90%;max-width:260px}
.mat-table{position:relative;z-index:1}
.mat-table .line{display:grid;grid-template-columns:1fr 1.4fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--olive);align-items:baseline}
.mat-table .line:first-child{border-top:1px solid var(--olive)}
.mat-table .k,.mat-table .v{font-size:17px}
.mat-table .v{letter-spacing:.1em;text-transform:uppercase}
.mat-table .v .sub{display:block;text-transform:none;letter-spacing:0;margin-top:2px}
.mat-desc{position:relative;z-index:1;padding:22px 0 0;margin-left:-8px;font-size:18px;line-height:1.4}
.about-row{display:grid;grid-template-columns:minmax(160px,1fr) 2fr;gap:40px;padding:36px 0 80px;max-width:900px}
.about-label{font-style:italic;font-weight:500;font-size:22px;text-transform:uppercase;letter-spacing:.04em;line-height:1.25}
.about-body{font-size:18px;line-height:1.4;max-width:466px}
.about-body strong{font-weight:500}
.about-page{min-height:60vh;display:flex;flex-direction:column;justify-content:space-between}
.about-bottom{padding-bottom:28px}
.foot-row-live{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:24px;padding:32px 0 0}
.foot-link{font-size:17px;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s;justify-self:start;padding:10px 0;margin:-10px 0}
.foot-link.right{justify-self:end}
.foot-link:hover{border-color:var(--ink)}
.foot-logo{justify-self:center}
.foot-logo img{width:60px;filter:contrast(1.6) brightness(.7)}

.foot.on-dark{background:transparent}

/* Section added on top of the replica: products, editorial-paced */
.home-products{padding:0 0 60px}
.home-products .hdr{font-family:var(--editorial);font-style:italic;font-weight:500;font-size:22px;text-transform:uppercase;letter-spacing:.04em;margin:28px 0 48px}
.plate{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:0 0 96px}
.plate:nth-child(even) .plate-img{order:2}
.plate-img{overflow:hidden}
.plate-img img{width:100%;height:auto;transition:transform 1.2s var(--ease)}
@media (hover:hover){.plate:hover .plate-img img{transform:scale(1.02)}}
.plate-txt{font-family:var(--editorial)}
.plate-name{font-family:var(--display);font-style:italic;font-size:clamp(30px,3.4vw,44px);line-height:1;margin:0 0 6px}
.plate-sub{font-size:19px;margin:0 0 22px}
.plate-sub em{font-style:italic}
.plate-desc{font-size:17px;line-height:1.45;max-width:420px;margin:0 0 24px;color:var(--ink-soft)}
.plate-full{margin:0 calc(-1 * var(--gutter)) 96px}
.plate-full .pf-media{position:relative}
.plate-full img{width:100%;display:block}
.plate-full figcaption{padding:20px var(--gutter) 0}
.plate-full .pf-cap{position:absolute;left:var(--gutter);bottom:24px;color:#fff;font-family:var(--body)}
.plate-full .pf-cap .name{display:block;font-size:19px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.plate-full .pf-cap .sub{display:block;font-size:14px;opacity:.85;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.plate-full .pf-soon{position:absolute;right:var(--gutter);bottom:26px;color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.9;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.plate-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}

/* ============================================================
   SHOP
   ============================================================ */
.pg{padding-top:calc(var(--nav-h) + 28px)!important;padding-bottom:80px}
.crumbs{font-family:var(--body);font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;padding:4px 0 28px}
.crumbs a{text-decoration:none;display:inline-block;padding:12px 6px;margin:-12px -6px}
.crumbs a:hover{color:var(--ink)}
.crumbs span.cur{color:var(--ink)}
.pg-title{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(36px,5vw,64px);line-height:1;margin:0 0 6px}
.pg-sub{font-family:var(--editorial);font-size:19px;color:var(--ink-soft);margin:0 0 44px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:40px 32px}
.card{text-decoration:none;display:block}
.card-img{position:relative;overflow:hidden;background:#111;aspect-ratio:4/5}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card-img.natural{aspect-ratio:auto}
.card-img.natural img{height:auto}
@media (hover:hover){.card:hover .card-img img{transform:scale(1.03)}}
.card-img .soon{position:absolute;right:14px;bottom:12px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.85}
.card-txt{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0 0;font-family:var(--editorial)}
.card-name{font-family:var(--display);font-style:italic;font-size:26px;line-height:1.05}
.card-var{font-size:16px;color:var(--muted);margin-top:4px}
.card-price{font-size:17px;white-space:nowrap}
.card .btn{margin-top:14px}

/* Season landing */
.season-hero{position:relative;margin:0 calc(-1 * var(--gutter));height:min(70vh,780px);overflow:hidden;background:#111}
.season-hero img{width:100%;height:100%;object-fit:cover}
.season-hero .cap{position:absolute;left:var(--gutter);bottom:28px;color:#fff;font-family:var(--editorial)}
.season-hero .cap small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.8;margin-bottom:8px}
.season-hero .cap b{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(40px,6vw,80px);line-height:1}
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;padding:56px 0 0;max-width:720px}
.cat{text-decoration:none;font-family:var(--editorial)}
.cat-img{aspect-ratio:3/2;overflow:hidden;background:#111}
.cat-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
@media (hover:hover){.cat:hover .cat-img img{transform:scale(1.03)}}
.cat-name{font-family:var(--display);font-style:italic;font-size:32px;margin:14px 0 2px}
.cat-sub{font-size:16px;color:var(--muted)}
.cat.soon{pointer-events:none}
.cat.soon .cat-img{opacity:.7}

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pd{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:start}
.pd-gallery{position:sticky;top:calc(var(--nav-h) + 16px)}
.pd-main{position:relative;overflow:hidden;background:#111;aspect-ratio:4/5}
.pd-main img{width:100%;height:100%;object-fit:cover}
.pd-main .n{position:absolute;right:14px;bottom:12px;font-family:var(--body);font-size:13px;color:#fff;opacity:.85}
.pd-thumbs{display:flex;gap:10px;margin-top:10px}
.pd-thumbs button{width:64px;height:64px;overflow:hidden;opacity:.55;border:1px solid transparent;transition:opacity .2s}
.pd-thumbs button[aria-current="true"]{opacity:1;border-color:var(--ink)}
.pd-thumbs img{width:100%;height:100%;object-fit:cover}
.pd-info{font-family:var(--editorial);padding-top:8px}
.pd-name{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(34px,4vw,52px);line-height:1;margin:0 0 6px}
.pd-meta{display:flex;justify-content:space-between;align-items:baseline;font-size:17px;color:var(--ink-soft);margin-bottom:24px}
.pd-price{font-size:22px;color:var(--ink)}
.pd-desc{font-size:18px;line-height:1.45;margin:0 0 16px}
.pd-desc.small{font-size:16px;color:var(--ink-soft)}
.pd-origin{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:22px 0 28px}
.pd-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px}
.specs{border-top:1px solid var(--olive)}
.specs h3{font-style:italic;font-weight:500;font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin:0;padding:16px 0 8px}
.specs .line{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:16px}
.specs .line:last-child{border-bottom:1px solid var(--olive)}
.specs .k{color:var(--muted)}
.specs p{font-size:16px;margin:0;padding:6px 0 16px;border-bottom:1px solid var(--olive)}

/* ============================================================
   ABOUT MATERIALS
   ============================================================ */
.mat-hero{position:relative;margin:0 calc(-1 * var(--gutter));overflow:hidden;background:#222;text-decoration:none;display:block}
.mat-hero img.tex{width:100%;height:auto;transition:transform 1.4s var(--ease)}
.mat-hero:hover img.tex{transform:scale(1.02)}
.mat-hero + .mat-hero{margin-top:8px}
.mat-hero .mat-cap{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:16px;color:#fff;text-align:center}
.mat-hero .mat-cap img.sil{width:64px;height:auto;filter:brightness(0) invert(1)}
.mat-hero .mat-cap span{font-family:var(--display);font-style:italic;font-size:22px}
.mat-detail{max-width:860px;padding:48px 0 96px}
.mat-head{margin-bottom:28px}
.mat-head .sil{height:34px;width:auto;margin-bottom:14px}
.mat-detail.algae .mat-head{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
.mat-detail.algae .mat-head .sil{height:clamp(120px,18vw,180px);margin:6px 0 0}
.mat-head h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,64px);line-height:1.04;letter-spacing:.01em;text-transform:uppercase;margin:0}
.mat-fig{margin:0 0 20px;width:min(100%,540px);position:relative}
.mat-fig img{width:100%;aspect-ratio:1;object-fit:cover}
.mat-fig figcaption{position:absolute;left:calc(100% + 12px);bottom:0;font-family:var(--editorial);font-style:italic;font-size:13px;color:var(--muted);white-space:nowrap}
.mat-body{padding-left:14px;max-width:560px}
.mat-body .sub{font-family:var(--editorial);font-style:italic;font-weight:500;font-size:22px;margin:0 0 14px}
.mat-body p{font-family:var(--body);font-size:17px;line-height:1.45;margin:0 0 14px}
.mat-cta{padding:160px 0 0 14px}

/* ============================================================
   WRM WORLD / FAQ
   ============================================================ */
.world-hero{position:relative;margin:0 calc(-1 * var(--gutter));overflow:hidden;background:#222}
.world-hero img{width:100%;height:auto;display:block}
.prose{max-width:620px;font-family:var(--editorial);font-size:19px;line-height:1.5;padding:56px 0 0}
.prose p{margin:0 0 20px}
.prose .lede{font-family:var(--display);font-style:italic;font-size:30px;line-height:1.2;margin-bottom:28px}
.faq{max-width:760px;border-top:1px solid var(--olive)}
.faq-item{border-bottom:1px solid var(--olive)}
.faq-q{width:100%;display:flex;justify-content:space-between;gap:20px;text-align:left;padding:20px 0;font-family:var(--display);font-style:italic;font-size:24px}
.faq-q .chev{font-family:var(--body);font-style:normal;font-size:18px;transition:transform .3s var(--ease)}
.faq-item.open .faq-q .chev{transform:rotate(90deg)}
.faq-a{display:none;font-family:var(--editorial);font-size:17px;line-height:1.5;padding:0 0 22px;max-width:620px;color:var(--ink-soft)}
.faq-item.open .faq-a{display:block}

/* ============================================================
   FOOTER (mockup: signup left, links right, wordmark bottom)
   ============================================================ */
/* Desktop keeps the signup form and the links side by side. The mobile markup moves
   the form out of .foot-row (so it can stack above the links), so re-create the two
   column layout here by spanning the footer itself. */
.foot{padding:56px var(--gutter) calc(24px + env(safe-area-inset-bottom));max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.foot-mark{grid-column:1/-1}
.foot-row{display:contents}
.foot-lead{font-family:var(--editorial);font-style:italic;font-size:17px;margin:0 0 10px}
.foot-field{display:flex;border-bottom:1px solid var(--ink);width:min(300px,100%)}
.foot-field input{flex:1;background:transparent;border:0;outline:none;padding:8px 0;font-size:16px;min-width:0;border-radius:0}
.foot-field button{min-width:44px;min-height:44px;display:grid;place-items:center}
.foot-field input::placeholder{color:var(--ink)}
.foot-field button{padding:0 4px;font-size:16px}
.foot-links{display:flex;flex-direction:column;gap:6px;text-align:right;font-family:var(--editorial);font-size:17px}
.foot-links a{text-decoration:none;border-bottom:1px solid transparent;display:inline-block;padding:9px 0;margin:-6px 0}
.foot-links a:hover{border-color:var(--ink)}
.foot-mark{width:100%;height:auto;margin-top:36px}
.foot.hide{display:none}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));max-width:calc(100% - 40px);text-align:center;transform:translate(-50%,20px);z-index:300;background:var(--ink);color:var(--paper);
  font-family:var(--editorial);font-size:15px;padding:12px 20px;opacity:0;transition:opacity .3s,transform .3s var(--ease);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .pd{grid-template-columns:1fr;gap:28px}
  .pd-gallery{position:static}
  .mat-cta{padding-top:120px}
  .mat-fig figcaption{position:static;display:block;text-align:right;margin-top:6px}
  .plate{grid-template-columns:1fr;gap:20px;padding-bottom:64px}
  .plate:nth-child(even) .plate-img{order:0}
}
@media (max-width:760px){
  :root{--nav-h:64px;--paper:#f5f4f2;--menu:#c6c3a1}
  html{background:var(--paper)}
  body{background-image:linear-gradient(rgba(232,231,229,.6),rgba(232,231,229,.6)),url('/img/texture.jpg');background-size:auto,844px 844px;background-blend-mode:normal}
  body::before,body::after{display:none}
  .nav-logo img{height:28px}
  .hero{padding:20px 16px 24px;display:flex;flex-direction:column;justify-content:center}
  .hero-card{gap:22px}
  .logo-wrap{width:100%;max-width:none;aspect-ratio:auto;height:55vh;display:flex;align-items:center;justify-content:center}
  h1.headline{white-space:normal;font-size:clamp(22px,6vw,30px);line-height:1.1}
  .notify{width:100%;max-width:420px}
  .notify input{padding:14px 6px}
  .notify button{padding:0 16px;font-size:10.5px;letter-spacing:.14em}
  .scroll-hint{display:none}
  .row{grid-template-columns:1fr;gap:10px;padding-top:20px}
  .label{font-size:16px}
  .body-copy{font-size:16px;line-height:1.45;max-width:none}
  .body-copy br{display:none}
  .ocean-chapter{padding:40px 0 60px}
  .ocean-chapter .illus{width:130vw;margin-left:calc(50% - 65vw);margin-right:0}
  .materials-header{font-size:17px;max-width:100%;margin:16px 0 40px}
  .material-card{margin-bottom:56px}
  .material-card .mat-col{width:100%;min-height:0}
  .material-card .illus-bg{width:80%;max-width:240px;opacity:.85}
  .material-card.salmon .illus-bg{width:90%;max-width:320px}
  .material-card.algae .illus-bg{width:70%;max-width:200px}
  .mat-table .line{grid-template-columns:.9fr 1.3fr;gap:12px;padding:10px 0}
  .mat-table .k,.mat-table .v,.mat-table .v .sub{font-size:14px}
  .mat-desc{font-size:15px;padding-top:18px}
  .about-row{grid-template-columns:1fr;gap:10px;padding:24px 0 48px}
  .about-label{font-size:17px}.about-body{font-size:16px;max-width:none}
  .foot-row-live{grid-template-columns:1fr;justify-items:center;gap:18px;padding:64px 0 48px}
  .foot-link,.foot-link.right{justify-self:center;font-size:15px}
  .cats{grid-template-columns:1fr}
  .season-hero{height:65vh}
  .menu-item{font-size:22px}
  /* Mobile menu sheets: fixed header, olive navigation, paper footer. */
  /* mockup_MENU-05/06/07.png show a lighter khaki-olive panel (~#C6C3A1) than the desktop
     token (--menu:#8f9a6b, measured mockup rgb(198,195,161)) — override color for mobile only. */
  .menu{background:#c6c3a1 url("/img/texture.jpg") repeat;background-size:900px 900px;background-blend-mode:multiply}
  .cart[aria-hidden="true"]{visibility:hidden}
  .menu-list{padding:76px 21px 30px;min-height:max(659px,calc(100dvh - 185px));max-width:none}
  .menu-item,.menu-sub .menu-item,.menu-sub .menu-sub .menu-item{font-family:var(--editorial);font-size:17px;line-height:20px;font-weight:400;border:0;padding:0;height:69px;color:var(--ink)}
  .menu-item:hover{padding-left:0}
  .menu-item .chev,.menu-expand .chev{font-family:var(--body);font-size:13px;font-weight:400}
  .menu-row{display:flex;align-items:center}
  .menu-row .menu-item{flex:1;width:auto}
  .menu-expand{height:44px;width:44px;flex:none;display:flex;align-items:center;justify-content:flex-end}
  .menu-expand .chev{transition:transform .2s}
  .menu-expand[aria-expanded="true"] .chev{transform:rotate(90deg)}
  .menu-sub{padding-left:26px;margin-top:-9px;padding-bottom:16px}
  .menu-sub .menu-item{height:50px}
  .menu-sub .menu-sub{padding-left:21px;margin-top:0;padding-bottom:0}
  .menu-sub .menu-sub .menu-item{height:48px}
  .menu-sub:has(.menu-sub.open){padding-bottom:4px}
  .menu .menu-footer{padding-top:47px;min-height:185px}
  .mobile-menu-close{display:none;position:absolute;right:6px;top:10px;width:44px;height:44px}
  .mobile-menu-close span{position:absolute;left:11px;top:21px;width:22px;height:1px;background:var(--ink);transform:rotate(45deg)}
  .mobile-menu-close span+span{transform:rotate(-45deg)}
  .nav.menu-open .mobile-menu-close{display:block}
  .nav.menu-open .nav-cart{visibility:hidden}
  .nav.menu-open .nav-logo img{filter:brightness(0)}
  .nav.menu-open .nav-menu span{background:var(--ink)}
  .nav.menu-open .nav-menu span:nth-child(1){transform:translateY(-8px)}
  .nav.menu-open .nav-menu span:nth-child(2){opacity:1}
  .nav.menu-open .nav-menu span:nth-child(3){transform:translateY(8px)}
  /* Menu overlay must always show the dark-ink WRM wordmark & hamburger, even when opened
     over a page whose nav carries .on-dark (e.g. mobile Home). */
  .nav.menu-open.on-dark .nav-logo img{filter:brightness(0)!important}
  .nav.menu-open.on-dark .nav-menu span{background:var(--ink)!important}

  /* ---- Page frame + breadcrumb (all mobile inner pages) ---- */
  .pg{padding-top:calc(var(--nav-h) + 9px)!important}
  .crumbs{font-family:var(--body);font-size:11px;line-height:15.7px;gap:4px;padding:0 0 4px;color:var(--ink)}
  .crumbs a{padding:10px 4px;margin:-10px -4px}

  /* ---- About the materials, landing (mobile_About_Material-08.png) ---- */
  .pg:has(.mat-hero){padding-bottom:330px}
  .mat-hero{height:135.641vw}
  .mat-hero img.tex{height:100%;object-fit:cover}
  .mat-hero + .mat-hero{margin-top:0}
  .mat-hero .mat-cap{gap:38px}
  .mat-hero .mat-cap img.sil{width:196px;height:auto;transform:rotate(-90deg);margin:70px -70px}
  .mat-hero + .mat-hero .mat-cap img.sil{width:auto;height:204px;transform:none;margin:0}
  .mat-hero + .mat-hero .mat-cap{top:56%;gap:28px}
  .mat-hero .mat-cap span{font-family:var(--editorial);font-size:18px;font-weight:500}

  /* ---- About the materials, landing + detail (mobile_About_Material-08/09/10.png): the whole
     page is the neutral off-white/textured tone (same as product detail pages), not the warm
     --paper beige — the .pg wrapper itself needs the override since .ed-page has no own bg. ---- */
  .pg.mat-page{background:#e9e8e6 url("/img/texture.jpg") repeat;background-size:900px 900px;background-blend-mode:multiply}

  /* ---- About the materials, detail (mobile_About_Material-09/10.png) ---- */
  .pg:has(.mat-detail){padding-bottom:106px}
  .mat-detail{padding:67px 0 0;min-height:967px;display:flex;flex-direction:column}
  .mat-head{margin-bottom:0}
  .mat-head .sil{height:auto;width:68px;margin-bottom:8px}
  .mat-head h2{font-family:var(--editorial);font-size:39px;line-height:37px;letter-spacing:0}
  .mat-detail.algae{padding-top:88px}
  .mat-detail.algae .mat-head{gap:18px;align-items:start}
  .mat-detail.algae .mat-head .sil{height:139px;width:auto;margin:6px 0 0}
  .mat-fig{width:204px;margin:36px 0 0 7px}
  .mat-fig figcaption{position:absolute;left:calc(100% + 19px);bottom:0;display:block;text-align:left;margin:0;font-size:11px}
  .mat-body{padding-left:11px;max-width:none}
  .mat-detail.algae .mat-body{margin-top:166px}
  .mat-body .sub{font-family:var(--editorial);font-style:italic;font-weight:500;font-size:16.5px;line-height:1.1;margin:12px 0 0}
  .mat-body p{font-size:13.5px;line-height:15.6px;margin:20px 0 0}
  .mat-cta{padding:0;text-align:center;margin-top:auto}
  .mat-cta .link{font-family:var(--body);font-size:11px;border-bottom-width:1px;padding-bottom:2px}

  /* ---- Header (all mobile mockups) ---- */
  .nav{padding:0 8px}
  /* The wordmark PNG's alpha peaks at 224, so brightness(0) alone renders it thin and
     slightly washed (measured stroke median 4 device px @DPR3, dark fraction .151).
     Two chained drop-shadows dilate the script and solidify the semi-transparent edges,
     taking it to stroke median 7 / dark fraction .233 so it carries the same visual
     presence as the hamburger and cart strokes either side of it. NOTE: CSS filters
     chain — each drop-shadow dilates the previous result — so offsets stay small. */
  .nav-logo img{width:58px;height:58px;
    filter:brightness(0) drop-shadow(0 0 .5px #000) drop-shadow(0 0 .35px #000)}
  .nav.solid{background:var(--paper) url('/img/texture.jpg') repeat;background-size:100% 844px;background-blend-mode:multiply;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
  .nav.on-dark{background:transparent}
  .nav.on-dark .nav-logo img{filter:brightness(0) invert(1)
      drop-shadow(0 0 .5px #fff) drop-shadow(0 0 .35px #fff)}
  .nav.on-dark.menu-open .nav-logo img{filter:brightness(0)
      drop-shadow(0 0 .5px #000) drop-shadow(0 0 .35px #000)}
  /* Hamburger rules must read at the cart icon's stroke weight. Measured on a DPR3
     screenshot (dark-pixel run lengths): the cart's vertical bars render 4 device px.
     A CSS height on the plain <span> can't hit that — it snaps to 3px at 1px and
     jumps straight to 6px at 1.275px. Rendering the rules as an inline SVG stroke,
     exactly like the cart's, makes them rasterise identically at 4px. */
  .nav-menu span{display:none}
  .nav-menu::before{content:"";width:21px;height:17px;
    background:currentColor;
    -webkit-mask:var(--ham) center/21px 17px no-repeat;
    mask:var(--ham) center/21px 17px no-repeat}
  .nav.on-dark .nav-menu::before{background:#fff}
  .nav.menu-open .nav-menu::before,
  .nav.on-dark.menu-open .nav-menu::before{background:var(--ink)}
  .nav-cart{margin-right:-5px}
  .nav-cart svg{width:34px;height:40px}
  body:has(.faq) .nav-cart svg,body:has(.world-hero) .nav-cart svg{display:none}
  body:has(.faq) .nav-cart::after,body:has(.world-hero) .nav-cart::after{content:'Cart';font-family:var(--editorial);font-size:17px}
  body:has(.faq) .nav-logo img,body:has(.world-hero) .nav-logo img{width:40px;height:40px}

  /* ---- Footer (mobile_SHOP / _Purse / _Bookmark / _Product_List / _About_Material) ----
     Per Stella's revised reference: the signup block sits ABOVE the Info/Contact/FAQ
     stack (not beside it), left-aligned, with the email underline running the full
     screen width. Gap between the lead line and "Email" measured at 6.6 css px in the
     reference vs 3.0 live, so the field gets margin-top:7px for breathing room.
     Link rhythm (54.2px apart) and wordmark (184.6px, centred) from the earlier
     reference are preserved. */
  .foot{display:block;padding:26px 20px 24px;max-width:none}
  .foot-form{display:block}
  .foot-lead{font-family:var(--body);font-style:normal;font-size:16px;line-height:1.25;margin:0}
  /* full-bleed underline: stretch edge to edge, cancelling the footer's 20px padding.
     The ">" submit is pushed to the right and shares the Info/Contact/FAQ gutter
     (measured right gap 20.7 css px) so the two right edges line up. */
  .foot-field{width:auto;margin:7px -20px 0;padding:0 20px;justify-content:space-between}
  .foot-field input{flex:0 0 auto;width:96px;padding:0 0 4px 4px;font-size:11px;line-height:13px;height:17px}
  .foot-field button{min-width:0;min-height:26px;margin:-7px -1px 0 0;padding:0;font-size:12px}
  /* Reference shows a plain chevron, not the site's default arrow glyph. */
  .foot-field .arr{font-size:0}
  .foot-field .arr::before{content:">";font-size:13px}
  .foot-row{display:block;margin:0 0 27px}
  /* Link rhythm comes from a fixed row height, so the three links sit 54.2px apart
     centre-to-centre exactly as measured, instead of hugging each other. */
  .foot-links{font-family:var(--body);font-size:13px;gap:0;line-height:1;margin-top:4px}
  .foot-links a{padding:0;margin:0;height:54.2px;line-height:54.2px;min-height:0;display:block}
  .foot-links a:first-child{height:47px;line-height:47px}
  .foot-mark{width:184.6px;margin:0 auto;display:block}
  .foot,.nav.solid{background-image:linear-gradient(rgba(232,231,229,.6),rgba(232,231,229,.6)),url('/img/texture.jpg');background-size:auto,844px 844px;background-blend-mode:normal}
  .nav.on-dark,.nav.menu-open{background:transparent}

  /* ---- Home footer variant (mobile_HOME.png): separate neutral paper treatment ---- */
  /* was border-top:50px solid #fff — an opaque white rectangle painted over the textured
     background, exposing a bright white stripe between the dark Algae Tote plate and the
     footer that mobile_HOME.png does not show (the footer's own texture runs seamlessly up
     to the dark plate above it). Use padding instead of a border so the textured background
     paints all the way through the gap. */
  .foot-home{padding:77px 20px 13px;background:#F2F2F0 url("/img/texture.jpg") repeat;background-size:900px 900px;background-blend-mode:multiply}
  .foot-home .foot-lead{font-family:var(--body);font-style:normal;font-size:13px;line-height:1.3}
  .foot-home .foot-links{font-family:var(--body);font-size:10.5px;gap:0;line-height:1.3}
  .foot-home .foot-links a{padding:20px 0;line-height:1.3}
  .foot-home .foot-mark{width:188px;margin-top:23px}
  .foot-home .arr{font-size:0}
  .foot-home .arr::before{content:">";font-size:12px}

  /* ---- Product detail footer variant (mobile_Purse.png / mobile_Bookmark.png): continues the
     page's own neutral off-white/textured tone (#e9e8e6-ish), not the warm --paper beige used on
     Shop/Home/About Materials. Lead + links keep the default editorial italic styling. ---- */
  .foot-neutral{background:#e9e8e6 url("/img/texture.jpg") repeat;background-size:900px 900px;background-blend-mode:multiply}

  /* ---- Product detail header variant (mobile_Purse.png / mobile_Bookmark.png): the nav bar is
     the SAME seamless neutral off-white paper texture as the breadcrumb row/body below it — no
     warm-beige blurred bar, no dividing shadow line, matches the mockup exactly. ---- */
  .nav.nav-neutral{background:#e9e8e6 url("/img/texture.jpg") repeat;background-size:900px 900px;background-blend-mode:multiply;
    backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}

}

/* Supplied full-resolution artwork (mobile About Materials): never crop, filter or re-encode. */
@media(max-width:760px){
  .mh-original{position:relative;width:100%;margin:0;padding:0;line-height:0;background:#fff}
  .mh-original .mh-original-art{display:block;width:100%;height:auto;max-width:none;margin:0;padding:0;border:0;filter:none;opacity:1}
  .mh-original-hit{position:absolute;display:block;padding:0!important;margin:0!important;border:0;background:transparent;color:transparent;min-width:0;min-height:0;cursor:pointer}
  /* clip-path makes Chrome hit-test the exact fractional rect, so taps on a tile edge don't go to its neighbour. */
  .mh-original-hit{clip-path:inset(0)}
  .mh-original-hit:focus-visible{outline:2px solid #9b9b79;outline-offset:-2px}
  .mh-original-email{position:absolute;display:flex;margin:0;padding:0;line-height:1}
  .mh-original-email input{width:100%;min-width:0;border:0;background:transparent;padding:0 8%;font:italic 3.1vw Georgia,serif;color:#111}
  .mh-original-email input:focus,.mh-original-email input:not(:placeholder-shown){background:#f0e6c6}
  .mh-original-email input:placeholder-shown:not(:focus){background:transparent}
  .mh-original-email button{position:absolute;right:0;top:0;height:100%;width:12%;padding:0;min-width:0;min-height:0;background:transparent;opacity:0;font-size:3vw}
  .mh-original-email:focus-within button{opacity:1}
}

/* About Materials mobile: supplied artwork unchanged, only transparent controls. */
@media(max-width:760px){
  body.mobile-materials-original{background:#fff}
  body.mobile-materials-original .page{animation:none;opacity:1;transform:none}
  body.mobile-materials-original::before,body.mobile-materials-original::after{display:none}
  body.mobile-materials-original #nav:not(.menu-open),body.mobile-materials-original #foot{display:none}
}

/* ============================================================
   MOBILE v2 — Drive redesign (design-ref/mobile-v2/*@2x.png, 751px artboards).
   Mobile only: every rule is inside max-width:760px AND scoped to body.m2, a class
   render() sets only while isMobile(). Geometry is in artboard units: 1u = 100vw/751,
   so each value below is the pixel measured on the 751px mockup.
   ============================================================ */
@media (max-width:760px){
  body.m2{--u:calc(100vw / 751);--m-serif:"Old Standard TT","EB Garamond",Georgia,serif;--m-serif-up:"Source Serif 4","EB Garamond",Georgia,serif;--m-sans:"Source Sans 3","DM Sans",system-ui,sans-serif;--m-caps:Arimo,"Helvetica Neue",Arial,sans-serif;
    --m-ink:#24221e;
    --paper-light:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),url('/img/texture.jpg');
    --paper-mid:linear-gradient(rgba(216,214,210,.46),rgba(216,214,210,.46)),url('/img/texture.jpg');
    --paper-foot:linear-gradient(rgba(218,192,133,.505),rgba(218,192,133,.505)),url('/img/texture.jpg');
    background:#fff;color:var(--m-ink)}
  /* html sits behind the real content during iOS rubber-band overscroll (top bounce and
     bottom bounce). Match it to the footer's tan tone so overscrolling past the bottom
     blends with #foot instead of flashing white or the old beige --paper above. */
  html:has(body.m2){background:#ECDFC1}
  body.m2 .page{animation:none}
  body.m2 .m2-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}

  /* ---- Header (all v2 mockups: hamburger 36-74 × 45-75, logo 343-414 × 32-94, cart 676-716 × 31-80) ---- */
  /* position:fixed so the bar stays pinned at the top while the page scrolls (was absolute,
     which let it scroll away with the content); background stays permanently transparent in
     every state (.solid/.on-dark/.nav-neutral never paint a color here, unlike desktop). */
  body.m2 .nav,body.m2 .nav.solid,body.m2 .nav.on-dark,body.m2 .nav.nav-neutral{position:fixed;inset:0 0 auto 0;height:calc(135*var(--u));padding:0;display:block;
    background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--m-ink)}
  body.m2 .nav.menu-open{position:fixed;color:#111}
  body.m2.m2-light .nav:not(.menu-open){color:#fff}
  body.m2 .nav-btn{position:absolute;min-width:0;min-height:0}
  body.m2 .nav-menu{left:calc(36*var(--u) - 12px);top:calc(45*var(--u) - 12px);width:calc(38*var(--u) + 24px);height:calc(30*var(--u) + 24px);display:block}
  body.m2 .nav-menu::before,body.m2 .nav.on-dark .nav-menu::before,body.m2 .nav.menu-open .nav-menu::before{content:"";position:absolute;left:12px;top:12px;width:calc(38*var(--u));height:calc(30*var(--u));background:currentColor;
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 30" preserveAspectRatio="none"><path d="M0 1.5h38M0 15h38M0 28.9h38" stroke="black" stroke-width="1.7"/></svg>') 0 0/100% 100% no-repeat;
            mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 30" preserveAspectRatio="none"><path d="M0 1.5h38M0 15h38M0 28.9h38" stroke="black" stroke-width="1.7"/></svg>') 0 0/100% 100% no-repeat}
  /* Edit Notes (9/7): the WRM logo carries the hamburger's line weight. The PNG's
     script stroke is thinner than the 1.7u rules, so it is dilated with stacked
     drop-shadows (each one thickens the previous result by ~.35u). */
  body.m2 .nav-logo{position:absolute;left:calc(334.8*var(--u));top:calc(25*var(--u));width:calc(92.8*var(--u));min-width:0;min-height:0;display:block;transform:none}
  body.m2 .nav-logo img,body.m2 .nav.on-dark .nav-logo img,body.m2 .nav.menu-open .nav-logo img,body.m2 .nav.on-dark.menu-open .nav-logo img{width:100%;height:auto;
    filter:brightness(0) drop-shadow(0 0 calc(.35*var(--u)) #000) drop-shadow(0 0 calc(.25*var(--u)) #000)!important}
  body.m2.m2-light .nav:not(.menu-open) .nav-logo img{filter:brightness(0) invert(1) drop-shadow(0 0 calc(.35*var(--u)) #fff) drop-shadow(0 0 calc(.25*var(--u)) #fff)!important}
  body.m2 .nav-cart{left:calc(665.7*var(--u));top:calc(24.5*var(--u));width:calc(61.2*var(--u));height:calc(61.2*var(--u));margin:0;display:block}
  body.m2 .nav-cart svg{width:100%;height:100%;display:block;stroke-width:.95}
  body.m2 .nav-cart::after{content:none}
  body.m2 .nav-cart-count{top:calc(2*var(--u));right:calc(-6*var(--u))}
  body.m2.m2-light .nav:not(.menu-open) .nav-cart-count{background:#fff;color:#111}
  body.m2 .nav.menu-open .nav-cart{visibility:hidden}
  body.m2 .mobile-menu-close{left:calc(696*var(--u) - 22px);top:calc(55.5*var(--u) - 22px);right:auto;width:44px;height:44px}
  body.m2 .mobile-menu-close span{left:50%;top:50%;width:calc(43*var(--u));height:calc(2*var(--u));margin:0;background:#111;transform:translate(-50%,-50%) rotate(42deg)}
  body.m2 .mobile-menu-close span+span{transform:translate(-50%,-50%) rotate(-42deg)}

  /* ---- Footer (every v2 mockup: 244u tall, measured on Purse@2x 2073-2317) ---- */
  body.m2 #foot,body.m2 #menu .menu-footer{position:relative;display:block;width:100%;max-width:none;height:calc(244*var(--u));min-height:0;margin:0;padding:0;
    background:var(--paper-foot);background-size:auto,calc(1000*var(--u)) auto;background-blend-mode:normal;color:#111;border:0;box-shadow:none}
  body.m2 #menu .menu-footer{position:fixed;left:0;right:0;bottom:0;z-index:2}
  body.m2 #foot.hide{display:none}
  body.m2 #foot .foot-form,body.m2 #menu .menu-footer .foot-form{display:block;margin:0;padding:0}
  body.m2 #foot .foot-lead,body.m2 #menu .menu-footer .foot-lead{position:absolute;left:calc(42*var(--u));top:calc(54.5*var(--u));margin:0;white-space:nowrap;
    font:400 calc(19.7*var(--u))/calc(27*var(--u)) var(--m-sans);letter-spacing:0}
  body.m2 #foot .foot-field,body.m2 #menu .menu-footer .foot-field{position:absolute;left:calc(41*var(--u));top:calc(100*var(--u));width:calc(438*var(--u));height:calc(38*var(--u));
    margin:0;padding:0;border:0;border-bottom:calc(1.3*var(--u)) solid rgba(17,17,17,.62);display:block}
  body.m2 #foot .foot-field input,body.m2 #menu .menu-footer .foot-field input{position:absolute;inset:0;width:100%;height:100%;padding:0 calc(5*var(--u));margin:0;border:0;background:transparent;
    font:italic 400 calc(24*var(--u))/1 var(--m-serif);color:#111;min-height:0}
  body.m2 #foot .foot-field input::placeholder,body.m2 #menu .menu-footer .foot-field input::placeholder{color:#111;opacity:1}
  body.m2 #foot .foot-field button,body.m2 #menu .menu-footer .foot-field button{position:absolute;right:0;top:0;width:calc(50*var(--u));height:100%;min-width:0;min-height:0;margin:0;padding:0;
    opacity:0;font:400 calc(26*var(--u))/1 var(--m-sans)}
  body.m2 #foot .foot-field:focus-within button,body.m2 #menu .menu-footer .foot-field:focus-within button{opacity:1}
  body.m2 #foot .foot-field .arr::before,body.m2 #menu .menu-footer .foot-field .arr::before{content:">";font-size:calc(24*var(--u))}
  body.m2 #foot .foot-field .arr,body.m2 #menu .menu-footer .foot-field .arr{font-size:0}
  body.m2 #foot .foot-row,body.m2 #menu .menu-footer .foot-row{display:contents;margin:0}
  body.m2 #foot .foot-links,body.m2 #menu .menu-footer .foot-links{position:absolute;right:calc(52*var(--u));top:calc(55*var(--u));margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-end;gap:0;
    font:400 calc(19.3*var(--u))/calc(50*var(--u)) var(--m-sans);text-align:right}
  body.m2 #foot .foot-links a,body.m2 #menu .menu-footer .foot-links a{display:block;height:calc(50*var(--u));line-height:calc(27*var(--u));margin:0;padding:0;border:0}
  body.m2 #foot .foot-links a:first-child{display:none} /* footer shows Contact + FAQ only */
  body.m2 #foot .foot-mark,body.m2 #menu .menu-footer .foot-mark{position:absolute;left:calc(184.1*var(--u));top:calc(167.8*var(--u));width:calc(381.7*var(--u));max-width:none;height:auto;margin:0;transform:none;mix-blend-mode:multiply}

  /* ---- Menu (MENU@2x / MENU_1@2x): flat #c6c3a1 panel sampled from the artboard ----
     All 4 parent rows (Shop, About Materials, WRM World, FAQ) per Andy; Shop expands to
     Fish Leather + Algae. Flow layout (not absolute) since the Shop sub-rows make the
     total row count variable. */
  body.m2 .menu{background:#c6c3a1;background-image:none}
  body.m2 .menu-list{display:block;min-height:0;padding:calc(151*var(--u)) calc(40*var(--u)) 0 calc(43*var(--u));max-width:none}
  body.m2 .m2-menu-row{position:relative;width:100%;height:calc(100*var(--u));margin:0 0 calc(33*var(--u));padding:0;display:block;border:0;appearance:none;-webkit-appearance:none;
    font:400 calc(28.1*var(--u))/1 var(--m-serif-up);font-variation-settings:'opsz' 12;color:#111;text-decoration:none;text-align:left;background:none}
  body.m2 .m2-menu-row:hover{padding-left:0}
  body.m2 .m2-menu-row .m2-menu-label{position:absolute;left:0;bottom:calc(24*var(--u));line-height:1;display:flex;align-items:flex-end;gap:calc(14*var(--u))}
  /* Edit Notes: "Arrows need to all match" — one chevron, drawn once, used by every menu row and drop-down (11 × 13u, MENU@2x). */
  body.m2 .m2-menu-row .chev,body.m2 .m2-acc-q .chev{position:absolute;right:0;top:calc(57*var(--u));width:calc(11*var(--u));height:calc(13*var(--u));font-size:0;color:inherit;transition:transform .2s;
    background:currentColor;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 13"><path d="M.6.6 10.2 6.5.6 12.4" fill="none" stroke="black" stroke-width="1.5"/></svg>') 0 0/100% 100% no-repeat;
    mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 13"><path d="M.6.6 10.2 6.5.6 12.4" fill="none" stroke="black" stroke-width="1.5"/></svg>') 0 0/100% 100% no-repeat}
  body.m2 .m2-menu-row[aria-expanded="true"] .chev{transform:rotate(90deg)}
  body.m2 .m2-menu-ocean{display:block;width:calc(170*var(--u));height:auto;max-width:none;
    filter:brightness(0) drop-shadow(0 0 calc(.5*var(--u)) #000) drop-shadow(0 0 calc(.4*var(--u)) #000) drop-shadow(0 0 calc(.3*var(--u)) #000)}
  body.m2 .m2-menu-shop{margin:0 0 calc(33*var(--u))}
  body.m2 .m2-menu-shop .m2-menu-row{margin:0}
  body.m2 .m2-menu-sub{padding-top:calc(10*var(--u))}
  body.m2 .m2-menu-sub-row{height:calc(72*var(--u));margin:0 0 calc(10*var(--u))}
  body.m2 .m2-menu-sub-row .m2-menu-label{left:calc(24*var(--u));bottom:calc(18*var(--u));font-size:calc(22*var(--u))}
  body.m2 .m2-menu-sub-row .chev{top:calc(40*var(--u))}

  /* ---- Shared: outlined caps button over photography ---- */
  body.m2 .m2-box-btn{display:inline-flex;align-items:center;justify-content:center;border:calc(1.6*var(--u)) solid #fff;color:#fff;
    font:400 calc(21.8*var(--u))/1.15 var(--m-caps);text-transform:uppercase;text-align:center;letter-spacing:0;text-decoration:none}

  /* ---- Home (HOME@2x.png 751 × 5762) ---- */
  body.m2 .m2h{position:relative;background:var(--paper-light);background-size:auto,calc(1000*var(--u)) auto;padding-bottom:calc(72*var(--u))}
  body.m2 .m2h-hero{position:relative;height:calc(1389*var(--u));overflow:hidden;background:#111}
  body.m2 .m2h-hero-img{width:100%;height:100%;object-fit:cover}
  body.m2 .m2h-ocean{position:absolute;left:calc(131.6*var(--u));top:calc(148.3*var(--u));width:calc(522*var(--u));max-width:none;filter:brightness(0) invert(1)}
  body.m2 .m2h-chapter{position:absolute;left:calc(337*var(--u));top:calc(243*var(--u));margin:0;color:#fff;font:italic 400 calc(18.4*var(--u))/1.3 var(--m-serif);text-transform:uppercase;letter-spacing:0}
  body.m2 .m2h-lede{position:absolute;left:0;right:0;top:calc(481*var(--u));margin:0;color:#fff;text-align:center;font:400 calc(22*var(--u))/calc(28*var(--u)) var(--m-sans)}
  body.m2 .m2h-credit{position:absolute;right:calc(29*var(--u));bottom:calc(25*var(--u));margin:0;color:#fff;font:400 calc(15.5*var(--u))/1.3 var(--m-sans)}
  body.m2 .m2h-plate{position:relative;display:block;line-height:0;text-decoration:none;color:#fff}
  body.m2 .m2h-plate img{width:100%;height:100%;object-fit:cover}
  body.m2 .m2h-cap{position:absolute;left:0;right:0;line-height:1;text-align:center;font:italic 400 calc(27*var(--u))/1 var(--m-serif);text-transform:uppercase;letter-spacing:0;color:#fff}
  body.m2 .m2h-purse{margin:calc(114*var(--u)) 0 0 calc(52*var(--u));width:calc(658*var(--u));height:calc(877*var(--u))}
  body.m2 .m2h-purse .m2h-cap{top:calc(774*var(--u));font-size:calc(25.1*var(--u))}
  body.m2 .m2h-bookmark{margin:calc(54*var(--u)) 0 0 calc(55*var(--u));width:calc(650*var(--u));height:calc(756*var(--u))}
  body.m2 .m2h-bookmark .m2h-cap{top:calc(181*var(--u));font-size:calc(25.9*var(--u))}
  body.m2 .m2h-tote{margin:calc(53*var(--u)) 0 0 calc(45*var(--u));width:calc(659*var(--u));height:calc(484*var(--u))}
  body.m2 .m2h-tote .m2h-cap{top:calc(229*var(--u));font-size:calc(23.1*var(--u))}
  body.m2 .m2h-gallery{position:relative;margin-top:calc(62*var(--u));height:calc(1155*var(--u));overflow:hidden}
  body.m2 .m2h-gallery>img{width:100%;height:100%;object-fit:cover}
  body.m2 .m2h-gallery::before,body.m2 .m2h-tote::before,body.m2 .m2h-world::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.3);pointer-events:none}
  body.m2 .m2h-tote::before{background:rgba(0,0,0,.33)}
  body.m2 .m2h-world::before{background:rgba(0,0,0,.41)}
  body.m2 .m2h-gallery-txt,body.m2 .m2h-gallery .m2h-credit,body.m2 .m2h-cap,body.m2 .m2h-world-btn{z-index:1}
  body.m2 .m2h-gallery-txt{position:absolute;left:0;right:0;top:calc(783*var(--u));color:#fff;text-align:center;font:400 calc(23.9*var(--u))/calc(28*var(--u)) var(--m-sans)}
  body.m2 .m2h-gallery-txt p{margin:0 0 calc(28*var(--u))}
  body.m2 .m2h-gallery .m2h-credit{right:calc(39*var(--u));bottom:calc(10*var(--u))}
  body.m2 .m2h-world{position:relative;margin:calc(201*var(--u)) 0 0 calc(21*var(--u));width:calc(708*var(--u));height:calc(300*var(--u))}
  body.m2 .m2h-world>img{width:100%;height:100%;object-fit:cover}
  body.m2 .m2h-world-btn{position:absolute;left:calc(145*var(--u));top:calc(125*var(--u));width:calc(418*var(--u));height:calc(49*var(--u));font-size:calc(21.2*var(--u))}

  /* ---- Shop (SHOP@2x.png 751 × 3225) ---- */
  body.m2 .m2s{position:relative;background:var(--paper-light);background-size:auto,calc(1000*var(--u)) auto;padding:calc(163*var(--u)) 0 calc(89*var(--u));overflow:hidden}
  body.m2 .m2s-ocean{position:absolute;left:calc(-48*var(--u));top:calc(-23*var(--u));width:calc(860*var(--u));max-width:none;z-index:2;pointer-events:none;
    filter:brightness(0) drop-shadow(0 0 calc(.3*var(--u)) #000)} /* keeps SHOP@2x's ~2u black line at phone DPRs */
  body.m2 .m2s-item{position:relative;display:block;text-decoration:none;color:var(--m-ink)}
  body.m2 .m2s-img{display:block;line-height:0;overflow:hidden}
  body.m2 .m2s-img img{width:100%;height:100%;object-fit:cover}
  body.m2 .m2s-purse .m2s-img{margin-left:calc(25*var(--u));width:calc(700*var(--u));height:calc(932*var(--u))}
  body.m2 .m2s-bookmark{margin-top:calc(68*var(--u))}
  body.m2 .m2s-bookmark .m2s-img{margin-left:calc(25*var(--u));width:calc(700*var(--u));height:calc(879*var(--u))}
  body.m2 .m2s-tote{margin-top:calc(90*var(--u))}
  body.m2 .m2s-tote .m2s-img{margin-left:calc(20*var(--u));width:calc(711*var(--u));height:calc(534*var(--u))}
  body.m2 .m2s-cap{position:relative;display:block;height:calc(78*var(--u));margin:0 calc(46*var(--u)) 0 calc(48*var(--u))}
  body.m2 .m2s-name{position:absolute;left:0;top:calc(29*var(--u));font:700 calc(22.8*var(--u))/1.2 var(--m-serif-up);font-variation-settings:'opsz' 12}
  body.m2 .m2s-sub{position:absolute;left:0;top:calc(61*var(--u));font:400 calc(19.3*var(--u))/1.2 var(--m-sans)}
  body.m2 .m2s-price{position:absolute;right:0;top:calc(35*var(--u));font:400 calc(19.3*var(--u))/1.2 var(--m-sans)}
  body.m2 .m2s-bookmark .m2s-cap{margin-top:calc(-6*var(--u))}

  /* ---- Product detail (Purse@2x / Bookmark@2x / Algae_Tote@2x.png) ---- */
  body.m2 .m2p{display:block;background:#E3E3E3;padding-top:calc(135*var(--u))}
  body.m2 .m2p-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;line-height:0;height:calc(967*var(--u));background:#fff}
  body.m2 .m2p-gallery::-webkit-scrollbar{display:none}
  body.m2 .m2p-slide{flex:0 0 100%;height:100%;overflow:hidden;scroll-snap-align:start;position:relative}
  body.m2 .m2p-slide img{width:100%;height:100%;object-fit:cover}
  body.m2 .m2p-slide+.m2p-slide img{object-fit:contain;background:#fff}
  body.m2 .m2p-body{padding:0 0 calc(105*var(--u)) calc(71*var(--u));width:calc(684*var(--u));font:400 calc(21.9*var(--u))/calc(30*var(--u)) var(--m-sans);color:#111}
  body.m2 .m2p-head{position:relative;height:calc(87*var(--u));border-bottom:calc(1*var(--u)) solid #6e6e6e;margin-right:calc(7*var(--u))}
  body.m2 .m2p-name{position:absolute;left:0;top:calc(45*var(--u));margin:0;font:700 calc(24.6*var(--u))/1 var(--m-serif-up);font-variation-settings:'opsz' 12;letter-spacing:0}
  body.m2 .m2p-price{position:absolute;right:calc(35*var(--u));top:calc(45*var(--u));font:400 calc(21.9*var(--u))/1 var(--m-sans)}
  body.m2 .m2p-variant{margin:calc(16*var(--u)) 0 0}
  body.m2 .m2p-body p{margin:calc(30*var(--u)) 0 0}
  body.m2 .m2p-body p.m2p-variant{margin-top:calc(19*var(--u))}
  body.m2 .m2p-body a{color:inherit;text-decoration:none}
  body.m2 .m2p-add{display:inline-block;margin:calc(30*var(--u)) 0 0;padding:0;min-height:44px;font:inherit;color:#111;text-decoration:underline;text-underline-offset:calc(5*var(--u));background:none;border:0}
  body.m2 .m2p-salmon-bookmark .m2p-gallery{height:calc(1009*var(--u))}
  body.m2 .m2p-salmon-bookmark .m2p-slide:first-child img{position:absolute;left:calc(66*var(--u));top:calc(140*var(--u));width:calc(624*var(--u));height:calc(723*var(--u))}
  body.m2 .m2p-salmon-bookmark .m2p-body p:nth-of-type(6){margin-top:calc(60*var(--u))} /* Bookmark@2x: extra blank line before Material */
  body.m2 .m2p-salmon-bookmark .m2p-body{padding-bottom:calc(59*var(--u))}
  body.m2 .m2p-algae-tote{padding-top:0}
  body.m2 .m2p-algae-tote .m2p-gallery{height:calc(1232*var(--u))}
  body.m2 .m2p-algae-tote .m2p-body{padding-left:calc(64*var(--u));width:calc(690*var(--u));padding-bottom:calc(80*var(--u))}
  body.m2 .m2p-algae-tote .m2p-body p.m2p-variant{margin-top:calc(26*var(--u))}
  body.m2 .m2p-algae-tote .m2p-price{right:calc(34*var(--u))}
  body.m2 .m2p-algae-tote .m2p-head{margin-right:calc(19*var(--u))}

  /* ---- About Materials stories (Salmon_ / Algae_About_Material@2x.png) ---- */
  body.m2 .m2m{display:block;background:#fff;color:#111}
  body.m2 .m2m-hero{position:relative;height:calc(846*var(--u));overflow:hidden;background:#444}
  body.m2 .m2m-hero-img{width:100%;height:100%;object-fit:cover}
  body.m2 .m2m-fish .m2m-hero::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.3);pointer-events:none} /* Salmon_About_Material@2x hero is x.70 of the photo */
  body.m2 .m2m-sil,body.m2 .m2m-title{z-index:1}
  body.m2 .m2m-sil{position:absolute;filter:brightness(0) invert(.94);max-width:none}
  body.m2 .m2m-fish .m2m-sil{left:calc(70*var(--u));top:calc(485*var(--u));width:calc(133*var(--u))}
  body.m2 .m2m-algae .m2m-sil{left:calc(84*var(--u));top:calc(183*var(--u));width:calc(76*var(--u))}
  body.m2 .m2m-title{position:absolute;left:calc(68*var(--u));margin:0;color:#f4f1ec;font:italic 400 calc(66.5*var(--u))/calc(72*var(--u)) var(--m-serif);text-transform:uppercase;letter-spacing:0}
  body.m2 .m2m-fish .m2m-title{top:calc(572*var(--u))}
  body.m2 .m2m-algae .m2m-title{top:calc(500*var(--u))}
  body.m2 .m2m-body{padding:calc(64*var(--u)) calc(64*var(--u)) 0 calc(59*var(--u));font:400 calc(21.9*var(--u))/calc(30*var(--u)) var(--m-sans)}
  body.m2 .m2m-algae .m2m-body{font-size:calc(23.9*var(--u));padding-top:calc(65*var(--u));padding-right:calc(77*var(--u))}
  body.m2 .m2m-body p{margin:0 0 calc(30*var(--u))}
  body.m2 .m2m-body blockquote{margin:0 0 calc(30*var(--u)) calc(32*var(--u));padding:0}
  body.m2 .m2m-indent{text-indent:calc(12*var(--u))}
  body.m2 .m2m-fig{margin:calc(77*var(--u)) 0 calc(103*var(--u));text-align:left}
  body.m2 .m2m-fig img{display:block;margin:0 auto;height:auto;max-width:none}
  body.m2 .m2m-kanten img{width:calc(353*var(--u));margin-left:calc(108*var(--u))}
  body.m2 .m2m-sway img{width:calc(291*var(--u));margin-left:calc(172.7*var(--u))}
  body.m2 .m2m-fig figcaption{margin-top:calc(12*var(--u));font:italic 400 calc(18.8*var(--u))/1.2 var(--m-serif)}
  body.m2 .m2m-kanten figcaption{padding-left:calc(165*var(--u))}
  body.m2 .m2m-kanten{margin-bottom:calc(93*var(--u))}
  body.m2 .m2m-sway{margin-top:calc(49*var(--u))}
  body.m2 .m2m-sway figcaption{margin-top:calc(1*var(--u))}
  body.m2 .m2m-sway figcaption{padding-left:calc(180*var(--u))}
  body.m2 .m2m-sway-p{margin-left:calc(-8*var(--u))!important;margin-top:calc(57*var(--u))!important;margin-right:calc(1*var(--u))!important}
  body.m2 .m2m-more{margin:calc(30*var(--u)) 0 0 calc(56*var(--u));font:400 calc(21.9*var(--u))/calc(30*var(--u)) var(--m-sans)}
  body.m2 .m2m-more a{color:inherit;text-decoration:underline;text-underline-offset:calc(6*var(--u))}
  body.m2 .m2-tiles{display:flex;justify-content:space-between;padding:calc(56*var(--u)) calc(21*var(--u)) calc(22*var(--u)) calc(24*var(--u))}
  body.m2 .m2-tile{position:relative;display:block;width:calc(344*var(--u));height:calc(469*var(--u));line-height:0;color:#fff;text-decoration:none}
  body.m2 .m2-tile+.m2-tile{width:calc(346*var(--u))}
  body.m2 .m2-tile img{width:100%;height:100%;object-fit:cover}
  body.m2 .m2-tile .m2-box-btn{position:absolute;left:calc(60*var(--u));top:calc(200*var(--u));width:calc(226*var(--u));height:calc(54*var(--u));font-size:calc(21.6*var(--u))}
  body.m2 .m2-tile-algae .m2-box-btn,body.m2 .m2-tile-fish .m2-box-btn{font-size:calc(19.6*var(--u))}
  body.m2 .m2-tile-fish .m2-box-btn{height:calc(81*var(--u));top:calc(186*var(--u))}

  /* ---- Accordions (Edit Notes FAQs) — same row type and chevron as the menu ---- */
  body.m2 .m2-acc{margin:calc(30*var(--u)) calc(64*var(--u)) 0 calc(59*var(--u));border-top:calc(1*var(--u)) solid #8a8a8a}
  body.m2 .m2-acc-item{border-bottom:calc(1*var(--u)) solid #8a8a8a}
  body.m2 .m2-acc-q{position:relative;display:block;width:100%;height:calc(86*var(--u));padding:0 calc(40*var(--u)) 0 0;text-align:left;font:400 calc(28.1*var(--u))/1 var(--m-serif-up);font-variation-settings:'opsz' 12;color:inherit}
  body.m2 .m2-acc-q .chev{top:50%;transform:translateY(-50%)}
  body.m2 .m2-acc-q[aria-expanded="true"] .chev{transform:translateY(-50%) rotate(90deg)}
  body.m2 .m2-acc-a{padding:0 0 calc(20*var(--u));font:400 calc(21.9*var(--u))/calc(30*var(--u)) var(--m-sans)}
  body.m2 .m2-acc-a p{margin:0 0 calc(22*var(--u))}
  body.m2 .m2-acc-a .m2-acc-qq{margin:0;font-weight:600}

  /* ---- FAQ (FAQ@2x.png: textured page; Edit Notes: shipping only) ---- */
  body.m2 .m2f{min-height:calc(1624*var(--u) - 244*var(--u));background:var(--paper-mid);background-size:auto,calc(1000*var(--u)) auto;padding:calc(200*var(--u)) 0 calc(120*var(--u))}
  body.m2 .m2f-title{margin:0 calc(64*var(--u)) calc(24*var(--u)) calc(59*var(--u));font:italic 400 calc(44*var(--u))/1 var(--m-serif);text-transform:uppercase;letter-spacing:0}
  body.m2 .m2f .m2-acc{margin-top:0}

  /* ---- WRM World (WRM_WORLD@2x.png 751 × 3882) ---- */
  body.m2 .m2w{position:relative;height:calc(3637*var(--u));background:var(--paper-mid);background-size:auto,calc(1000*var(--u)) auto;overflow:hidden}
  body.m2 .m2w-pc{position:absolute;display:block;max-width:none;object-fit:cover}
  body.m2 .m2w-top{left:0;top:0;width:calc(751*var(--u));height:calc(834.5*var(--u))}
  body.m2 .m2w-yarn{left:calc(62*var(--u));top:calc(957*var(--u));width:calc(243*var(--u));height:calc(242*var(--u))}
  body.m2 .m2w-dyedbag{left:calc(406*var(--u));top:calc(845*var(--u));width:calc(345*var(--u));height:calc(432*var(--u))}
  body.m2 .m2w-note{left:calc(349*var(--u));top:calc(1002*var(--u));width:calc(134*var(--u));height:calc(166*var(--u))}
  body.m2 .m2w-vase{left:calc(183*var(--u));top:calc(1398*var(--u));width:calc(329*var(--u));height:calc(412*var(--u))}
  body.m2 .m2w-wall{left:calc(35*var(--u));top:calc(1899*var(--u));width:calc(679*var(--u));height:calc(689*var(--u))}
  body.m2 .m2w-purse{left:0;top:calc(2764*var(--u));width:calc(347*var(--u));height:calc(475*var(--u))}
  body.m2 .m2w-calder{left:calc(403*var(--u));top:calc(2764*var(--u));width:calc(348*var(--u));height:calc(475*var(--u))}
  body.m2 .m2w-red{left:calc(289*var(--u));top:calc(2810*var(--u));width:calc(174*var(--u));height:calc(224*var(--u))}
  body.m2 .m2w-sticky{left:calc(316*var(--u));top:calc(3057*var(--u));width:calc(130*var(--u));height:calc(133*var(--u))}
  body.m2 .m2w-cap{position:absolute;margin:0;font:italic 400 calc(24*var(--u))/calc(26*var(--u)) var(--m-serif);color:#111;letter-spacing:0;white-space:nowrap}
  body.m2 .m2w-cap.m2w-light{color:#fff}
  body.m2 .m2w-c1{left:calc(183*var(--u));top:calc(719*var(--u))}
  body.m2 .m2w-c2{left:calc(62*var(--u));top:calc(1217*var(--u))}
  body.m2 .m2w-c3{left:calc(447*var(--u));top:calc(2507*var(--u));color:#fff}
  body.m2 .m2w-c4{left:calc(36*var(--u));top:calc(2603*var(--u))}
  body.m2 .m2w-c5{left:calc(8*var(--u));top:calc(3202*var(--u))}
  body.m2 .m2w-c6{left:calc(415*var(--u));top:calc(3200*var(--u))}
  body.m2 .m2w-learn{position:absolute;left:0;top:calc(3362*var(--u));width:100%;height:calc(229*var(--u));display:flex;line-height:0}
  body.m2 .m2w-learn img{height:100%;object-fit:cover;width:calc(380*var(--u))}
  body.m2 .m2w-learn img+img{width:calc(371*var(--u))}
  body.m2 .m2w-learn .m2-box-btn{position:absolute;left:calc(207*var(--u));top:calc(91*var(--u));width:calc(352*var(--u));height:calc(41*var(--u));font-size:calc(17.8*var(--u));white-space:nowrap}
}

/* ---------- Pre-launch landing gate (js/app.js landing()) ---------- */
body.landing .nav,body.landing .foot,body.landing .menu,body.landing .cart,body.landing .scrim{display:none!important}
body.landing .landing-hero{padding-top:20px}
.admin-lock{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:300;display:flex;flex-direction:row-reverse;align-items:center;gap:8px}
.admin-lock-btn{width:28px;height:28px;padding:5px;color:var(--ink);opacity:.18;transition:opacity .2s;background:none;border:0;cursor:pointer}
.admin-lock-btn:hover,.admin-lock-btn:focus-visible{opacity:.7}
.admin-lock-btn svg{width:100%;height:100%;display:block}
.admin-lock-form{display:flex;border-bottom:1px solid var(--ink);background:rgba(232,223,200,.92)}
.admin-lock-form[hidden]{display:none}
.admin-lock-form input{width:150px;border:0;background:transparent;padding:6px 4px;font-size:16px;outline:none;font-family:inherit;color:var(--ink)}
.admin-lock-form button{border:0;background:none;padding:0 6px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;color:var(--ink)}
.admin-lock.shake .admin-lock-form{animation:adminShake .35s}
@keyframes adminShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
/* Landing: same warm textured paper as Andy's reference on every width (desktop.css
   whitens html/body; mobile v2 swaps to off-white). */
html:has(body.landing){background:#E8DFC8!important}
body.landing{background:#E8DFC8 url("/img/texture.jpg") repeat!important;background-size:900px 900px!important;background-blend-mode:multiply!important;color:var(--ink)}
body.landing{--paper:#E8DFC8}
body.landing::before,body.landing::after{display:block}
@media (max-width:760px){
  body.landing .logo-wrap{height:38vh}
}

/* ---------- Shopify storefront states (js/app.js hydrateProduct / renderCart) ---------- */
[data-add]:disabled{opacity:.45;cursor:default;text-decoration:none}
#checkout:disabled{opacity:.45;cursor:default}
.cart.busy .cart-body,.cart.busy .cart-foot{opacity:.55;pointer-events:none;transition:opacity .15s}
.cart-soldout{color:var(--ember,#a5482b)}
.sp-variant{display:block;margin:12px 0 4px}
.sp-variant select{font:inherit;background:transparent;border:0;border-bottom:1px solid currentColor;padding:4px 18px 4px 0;border-radius:0;color:inherit}
.sp-page{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;padding:calc(var(--nav-h,72px) + 24px) 40px 96px;max-width:1400px;margin:0 auto}
.sp-page>.sp-msg{grid-column:1/-1;text-align:center;font-family:var(--editorial);font-style:italic;color:var(--muted);padding:120px 0}
.sp-gallery{display:grid;gap:12px}.sp-gallery img{width:100%;height:auto}
.sp-info{position:sticky;top:calc(var(--nav-h,72px) + 24px);align-self:start}
.sp-head{display:flex;justify-content:space-between;gap:24px;align-items:baseline}
.sp-head h1{font-family:var(--editorial);font-weight:400;font-size:clamp(26px,2.4vw,36px);margin:0}
.sp-desc{margin:20px 0;line-height:1.55}
.sp-add{display:inline-block;margin-top:8px;padding:0;font:inherit;background:none;border:0;color:inherit;text-decoration:underline;text-underline-offset:.25em;cursor:pointer;min-height:44px}
.sp-more{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:32px;padding:48px 40px 96px;clear:both}
.sp-card{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit}
.sp-card img{width:100%;aspect-ratio:3/4;object-fit:cover}
.sp-card-name{font-family:var(--editorial);font-size:17px}.sp-card-price{font-size:14px;color:var(--muted)}
@media (max-width:760px){
  .sp-page{grid-template-columns:1fr;gap:24px;padding:calc(var(--nav-h,64px) + 8px) 16px 64px}
  .sp-info{position:static}
  .sp-more{grid-template-columns:1fr 1fr;gap:16px;padding:32px 16px 64px}
}