/* Hanken Grotesk, self-hosted (assets/fonts, SIL Open Font License). Same subsets and weights Google Fonts served. */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/hanken-grotesk-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/hanken-grotesk-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/hanken-grotesk-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/hanken-grotesk-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/hanken-grotesk-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/hanken-grotesk-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* =========================================================
   Kate Vallon — portfolio
   Desktop (>= 900px): homepage → slide into one scrolling page with a pinned nav.
   Phone (< 900px): one scrolling page; options scroll to sections.
   Product stories take over the screen on both.
   ========================================================= */

:root {
  --ink: #111111;
  --body: #333333;
  --muted: #6b6b6b;
  --muted-2: #555555;
  --rule: #111111;
  --line: #e2e2e2;
  /* The home and accent colors are set live by main.js from its color palette. These are
     the starting values (forest) and the values used if the script doesn't run. */
  --home-bg: #02513d;
  --home-name: #ffffff;
  --home-type: #ffffff;
  --accent: #02513d;
  --bg: #ffffff;
  --paper: #ffffff;
  --story-bar-h: 76px;
  --pad: clamp(32px, 8.4vw, 120px);
  --ease-slide: cubic-bezier(.3, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
main { overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { max-width: 100%; }
[hidden] { display: none !important; }
body.story-open { overflow: hidden; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }


/* ---------- slide animations ---------- */
@keyframes in-right  { from { transform: translateX(100%); } to { transform: none; } }
@keyframes out-right { from { transform: none; } to { transform: translateX(100%); } }
@keyframes swap-in-right { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes swap-in-left  { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
.anim-in-right  { animation: in-right .55s var(--ease-slide) both; }
.anim-out-right { animation: out-right .45s var(--ease-slide) both; }
.anim-swap-right { animation: swap-in-right .45s var(--ease-slide) both; }
.anim-swap-left  { animation: swap-in-left .45s var(--ease-slide) both; }

/* =========================================================
   HOMEPAGE
   ========================================================= */
#home { background: var(--home-bg); color: var(--home-type); }
.home-name {
  margin: 0;
  font-size: clamp(56px, 5.6vw, 80px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--home-name);
}
.home-name span { display: inline-block; white-space: nowrap; margin-left: -0.03em; }
.home-bio {
  margin: 0;
  color: var(--home-type);
  padding-top: 28px;
  max-width: 700px;
  font-size: 18px;
  line-height: 1.5;
}
.home-bio--more { padding-top: 16px; }
.home-loc { margin-top: 32px; display: flex; align-items: center; gap: 10px; min-height: 40px; }
.home-loc-btn { width: 40px; height: 40px; margin-left: -9px; display: flex; align-items: center; justify-content: center; color: var(--home-type); }
.home-loc-chip { padding: 8px 14px; background: rgba(0, 0, 0, .2); color: var(--home-type); font-size: 16px; line-height: 1.3; white-space: nowrap; opacity: 0; transform: translateX(-6px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.home-loc:hover .home-loc-chip, .home-loc.open .home-loc-chip, .home-loc-btn:focus-visible + .home-loc-chip { opacity: 1; transform: none; }
.opt-t { display: flex; align-items: baseline; gap: 8px; font-size: 16px; font-weight: 700; transition: color .2s ease; }
.opt-arrow::after { content: "→"; }
.opt-d { font-size: 13px; color: var(--home-type); max-width: 250px; }
/* The homepage is a saturated color, so hover can't use the (deep) highlight color */
.opt:hover .opt-t { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
#home :focus-visible { outline-color: currentColor; }
#home .home-nav { border-color: var(--home-type); }
#home .opt { border-color: var(--home-type); }

/* =========================================================
   SECTIONS (shared)
   ========================================================= */
.sec-head h2 { margin: 0; font-size: 16px; font-weight: 500; color: var(--accent); }
.sec-head p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }

/* Select products */
.prod { display: grid; color: var(--ink); }
.prod-eyebrow { font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--muted); }
.prod-title { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; transition: color .2s ease; }
.prod-sum { margin: 0; color: var(--body); line-height: 1.55; }
.prod-more { font-weight: 500; min-height: 44px; display: flex; align-items: center; transition: color .2s ease; }
.prod:hover .prod-title, .prod:hover .prod-more { color: var(--accent); }
.prod:focus-visible { outline-offset: 8px; }
.prod-img { display: flex; align-items: center; justify-content: center; }
.prod-img img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* The full range */
.range-intro { margin: 0; max-width: 820px; color: #222222; line-height: 1.5; }
.range-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; flex-wrap: wrap; }
.range-bar p { margin: 0; color: var(--muted-2); }
.filters { display: flex; flex-wrap: wrap; column-gap: 28px; }
.filters button {
  min-height: 44px; font-weight: 500; color: var(--muted-2);
  text-underline-offset: 6px; text-decoration-thickness: 2px;
}
.filters button:hover { color: var(--ink); }
.filters button.on { color: var(--accent); text-decoration-line: underline; }

/* Gallery: hairline grid; the tile you hover (or tap) grows and shows its caption.
   Same structure and values as the first site's gallery (Replit), in this site's style.
   Desktop: 6 columns of 3 square tiles. The open tile's column grows to 1.55, the tile to 3
   in its column; its picture shrinks to make room for the caption. Gallery height never changes.
   Phone (under 820px): rows of 3; the open tile takes its row, neighbors become slivers. */
.grid {
  --motion: 450ms cubic-bezier(.22, 1, .36, 1);
  --gap: 1px;
  --dim: .72;
  --gridline: #cfcfcf;
  margin-top: 24px;
}
.dgal, .mgal { background: var(--gridline); padding: 1px; }
.dgal { height: clamp(520px, 42vw, 560px); display: flex; gap: var(--gap); }
.dcol { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--gap); flex: 1 1 0; transition: flex-grow var(--motion); }
.dcol.on-col { flex-grow: 1.55; }
.dslot, .mslot { min-width: 0; min-height: 0; flex: 1 1 0; background: var(--bg); pointer-events: none; transition: flex-grow var(--motion); }
.gtile {
  position: relative; min-width: 0; min-height: 0; flex: 1 1 0;
  overflow: hidden; cursor: pointer; isolation: isolate; background: var(--bg);
  transition: flex-grow var(--motion), filter var(--motion);
}
.dgal .gtile.on { flex-grow: 3; }
.gtile:focus-visible { outline-offset: -3px; }
.has-active .gtile:not(.on) { filter: brightness(var(--dim)); }
.gtile-inner { width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; }

/* Picture: fits inside the tile. A cut-off edge (crop in work-data.js) has no padding at
   rest and the picture sits on it. In the open tile the picture is centered. */
.gtile-imgwrap {
  min-width: 0; min-height: 0; flex: 1 1 auto; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 14px;
  transition: padding var(--motion);
}
.gtile img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: var(--ox, 50%) var(--oy, 50%); }
.gtile:not(.on).crop-t { --oy: 0%; }
.gtile:not(.on).crop-b { --oy: 100%; }
.gtile:not(.on).crop-l { --ox: 0%; }
.gtile:not(.on).crop-r { --ox: 100%; }
.gtile:not(.on).crop-t .gtile-imgwrap { padding-top: 0; }
.gtile:not(.on).crop-b .gtile-imgwrap { padding-bottom: 0; }
.gtile:not(.on).crop-l .gtile-imgwrap { padding-left: 0; }
.gtile:not(.on).crop-r .gtile-imgwrap { padding-right: 0; }
.gtile.on .gtile-imgwrap { padding: 12px; }

/* Caption: folded away at rest; in the open tile it takes its natural height */
.gtile-cap {
  min-height: 0; max-height: 0; flex-shrink: 0; opacity: 0; overflow: hidden; padding: 0;
  transition: max-height var(--motion), opacity var(--motion), padding var(--motion);
}
.gtile.on .gtile-cap { max-height: 320px; opacity: 1; padding: 0 12px 12px; }
.gtile-cap h4 { margin: 0 0 4px; font-size: 14px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.gtile-cap .co { margin: 0 0 6px; font-size: 12px; line-height: 1.3; color: var(--muted); }
.gtile-cap .bd { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted-2); }
.gtile-cap .cs { display: inline-flex; align-items: center; min-height: 28px; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--accent); }

/* Phone rows */
.mgal { display: none; }
.mrow { display: flex; gap: var(--gap); width: 100%; height: clamp(124px, 28vw, 180px); min-height: 0; transition: height var(--motion); }
.mrow + .mrow { margin-top: var(--gap); }
.mrow.on-row { height: 340px; }
.mgal .gtile-imgwrap { padding: 10px; }
.mrow.on-row .gtile:not(.on), .mrow.on-row .mslot { flex-grow: .08; }
.mrow.on-row .gtile:not(.on) .gtile-imgwrap { padding: 0; }
.mrow.on-row .gtile:not(.on) img { object-fit: cover; }

/* Desktop motion is a little heavier than phone (as in the first site) */
@media (min-width: 820px) { .grid { --motion: 450ms cubic-bezier(.3, .3, .4, 1); } }

/* Ink cursor over the desktop gallery: says "look around", not "click".
   It pulls in and hands over to the normal pointer on a real link; shrinks over caption text. */
.ink-cursor { position: fixed; z-index: 1000; top: 0; left: 0; width: 72px; height: 72px; pointer-events: none; opacity: 0; transform: translate3d(-999px, -999px, 0); will-change: transform, opacity; transition: opacity 120ms ease; }
.ink-cursor.is-visible { opacity: 1; }
.ink-cursor svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ink-cursor circle { fill: var(--accent); }
.dgal[data-ink="on"] *, .dgal[data-ink="link-pending"] * { cursor: none; }
.dgal[data-ink="link"] a.cs { cursor: pointer; }
@media (pointer: coarse) { .ink-cursor { display: none; } }


/* The gossip */
.quote { margin: 0; }
.who { display: flex; gap: 16px; align-items: flex-start; }
.who img { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.who > span { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.who strong { font-weight: 700; }
.who > span > span { color: var(--muted); }
.quote blockquote { margin: 0; color: var(--body); line-height: 1.55; }

/* Contact */
.contact-intro h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
.contact-intro p { margin: 0; color: var(--body); line-height: 1.5; }
.ext { font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.ext:hover { color: var(--accent); }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 500; }
.contact-form input, .contact-form textarea {
  font: inherit; font-size: 16px; font-weight: 400; color: var(--ink);
  border: 1px solid #c4c4c4; border-radius: 0; background: #fff; padding: 0 14px;
}
.contact-form input { height: 48px; }
.contact-form textarea { padding: 12px 14px; resize: vertical; min-height: 180px; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.contact-form [aria-invalid="true"] { border-color: var(--accent); }
.contact-form button[type="submit"] {
  align-self: flex-start; height: 52px; padding: 0 32px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 500;
  transition: background .2s ease;
}
.contact-form button[type="submit"]:hover:not([disabled]), .contact-form button[type="submit"]:focus-visible { background: var(--accent); }
.contact-form button[disabled] { opacity: .6; cursor: default; }

/* Contact: a full-width block in the current color, so the page ends the way it began */
#contact { background: var(--accent); color: var(--paper); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: var(--pad); padding-right: var(--pad); display: flex; flex-direction: column; justify-content: center; border-top: 0; }
#contact .contact { width: 100%; }
#contact .contact-intro h3, #contact .contact-intro p, #contact .contact-form label { color: var(--paper); }
#contact .ext { color: var(--paper); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
#contact .ext:hover { color: var(--paper); text-decoration-thickness: 3px; }
#contact .contact-form input, #contact .contact-form textarea { background: rgba(0, 0, 0, .16); border-color: rgba(255, 255, 255, .65); color: var(--paper); }
#contact .contact-form input:focus-visible, #contact .contact-form textarea:focus-visible { outline: 2px solid var(--paper); border-color: var(--paper); }
#contact .contact-form [aria-invalid="true"] { border-color: #fff; box-shadow: inset 0 0 0 1px #fff; }
#contact .contact-form button[type="submit"] { background: var(--paper); color: var(--accent); }
#contact .contact-form button[type="submit"]:hover:not([disabled]), #contact .contact-form button[type="submit"]:focus-visible { background: #fff; color: var(--accent); }
#contact .contact-form button[type="submit"]:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
#contact .form-status, #contact .form-status.err { color: var(--paper); }
#contact .form-status.err { font-weight: 600; }
.form-status { margin: 0; font-size: 14px; color: var(--body); min-height: 1.5em; }
.form-status.err { color: var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* =========================================================
   PRODUCT STORIES (take over the screen)
   ========================================================= */
#story { position: fixed; inset: 0; z-index: 40; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: var(--bg); }
.story-bar { position: sticky; top: 0; z-index: 2; height: 76px; display: flex; align-items: center; padding: 0 calc(var(--pad) - 12px); background: var(--bg); }
.story-back { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.story-back:hover { color: var(--accent); }
.story-body, .story-pn { max-width: calc(1040px + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.story-slot { padding-top: 40px; display: flex; flex-direction: column; gap: 20px; }
.story-eyebrow { font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--muted); }
.story-slot h1 { margin: 0; font-size: 52px; line-height: 1.12; font-weight: 700; letter-spacing: -0.025em; }
.slot-note { margin-top: 36px; height: 360px; border: 1px dashed #c4c4c4; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 15px; }
/* ---- story header: project name, headline, details, full-width hero ---- */
.story-eyebrow--name { font-size: 20px; font-weight: 500; color: var(--ink); }
.story-slot h1 { max-width: 20em; }
.story-meta { margin: 36px 0 0; display: grid; grid-template-columns: 1fr 1fr 2fr; column-gap: 32px; row-gap: 20px; }
.story-meta dt { font-size: 14px; color: var(--muted); }
.story-meta dd { margin: 4px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink); }
.story-hero { margin: 40px calc(50% - 50vw) 0; }
.story-hero img { display: block; width: 100%; height: auto; }

/* Story header: title and details sit on the current color, then the story turns white */
.story-bar { background: transparent; transition: background-color .2s ease; }
#story.scrolled .story-bar { background: var(--bg); }
.story-back { color: var(--paper); }
.story-back:hover { opacity: .7; }
#story.scrolled .story-back { color: var(--ink); }
#story.scrolled .story-back:hover { color: var(--accent); opacity: 1; }
.story-slot { padding-top: 0; gap: 0; }
.story-head { display: flex; flex-direction: column; gap: 20px; padding: 40px 0 56px; background: var(--accent); color: var(--paper); box-shadow: 0 0 0 100vmax var(--accent); clip-path: inset(calc(-1 * var(--story-bar-h)) -100vmax 0 -100vmax); }
.story-head .story-eyebrow, .story-head h1, .story-head .story-meta dt, .story-head .story-meta dd { color: var(--paper); }
.story-hero { margin-top: 0; }

/* ---- story body (the locked part): centered text, images with captions beside them ---- */
.story-content { padding-top: 88px; }
.story-text, .story-pull, .story-rule { max-width: 700px; margin-left: auto; margin-right: auto; }
.story-text h2 { margin: 0 0 28px; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.story-text p { margin: 0 0 24px; font-size: 18px; line-height: 1.6; color: var(--body); }
.story-rule { margin-top: 64px; margin-bottom: 56px; border-top: 1px solid var(--line); position: relative; }
.story-rule::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 2px; background: var(--accent); }
.story-pull { margin-top: 0; margin-bottom: 0; font-size: 24px; line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.story-fig { margin: 88px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) 260px; column-gap: 40px; align-items: start; }
.story-fig--wide { display: block; }
.story-fig img, .story-fig video { display: block; width: 100%; height: auto; }
.story-fig .slot-note { margin-top: 0; height: 280px; }
.story-pair { display: grid; grid-template-columns: minmax(0, 1fr) 220px; column-gap: 40px; align-items: start; }
.story-fig figcaption strong { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 600; color: var(--ink); }
.story-fig figcaption p { margin: 0 0 15px; font-size: 16px; line-height: 1.6; color: #555; }

/* ---- password gate (locked stories) ---- */
.gate { position: relative; padding: 72px 0 24px; }
.gate-ghost { position: absolute; left: 0; right: 0; top: 72px; bottom: 0; display: flex; flex-direction: column; gap: 22px; filter: blur(7px); opacity: .9; overflow: hidden; }
.gate-ghost i { display: block; height: 16px; border-radius: 8px; background: #d9d4d4; }
.gate-ghost i:first-child { height: 34px; }
.gate-card { position: relative; width: min(100%, 440px); margin: 0 auto; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 40px rgba(0, 0, 0, .08); padding: 32px; }
.gate-card h2 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
.gate-lede { margin: 10px 0 0; font-size: 16px; color: var(--body); }
.gate-form { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.gate-form label { display: block; width: 100%; font-size: 15px; font-weight: 500; }
.gate-form input { display: block; width: 100%; height: 46px; margin-top: 8px; padding: 0 14px; border: 1px solid #bdbdbd; border-radius: 0; font: inherit; font-size: 16px; background: #fff; color: var(--ink); }
.gate-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.gate-form button { height: 48px; padding: 0 24px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 500; transition: background-color .2s ease; }
.gate-form button:hover { background: var(--accent); }
.gate-form button[disabled] { opacity: .6; cursor: default; }
.gate-status { margin: 0; min-height: 0; font-size: 14px; color: var(--accent); }
.gate-status:empty { display: none; }
.gate-ask { margin: 22px 0 0; font-size: 16px; }
.gate-link { padding: 0; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.gate-link:hover, .gate-link:focus-visible { color: var(--accent); }
.gate-opt { font-weight: 400; color: var(--muted); }
.gate-form textarea { display: block; width: 100%; margin-top: 8px; padding: 12px 14px; border: 1px solid #bdbdbd; border-radius: 0; font: inherit; font-size: 16px; line-height: 1.5; background: #fff; color: var(--ink); resize: vertical; }
.gate-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.gate-form input[aria-invalid="true"] { border-color: var(--accent); }
.gate-note { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.story-private .slot-note { margin-top: 0; }

.story-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; margin-top: 96px; margin-bottom: 96px; }
.story-pn::before { content: ""; grid-column: 1 / -1; border-top: 1px solid var(--rule); margin-bottom: 24px; }
.story-pn > a { display: flex; flex-direction: column; gap: 6px; }
.story-pn .pn-next { align-items: flex-end; text-align: right; }
.pn-l { font-size: 14px; color: var(--muted); }
.pn-t { display: flex; gap: 8px; font-size: 20px; font-weight: 500; transition: color .2s ease; }
.story-pn > a:hover .pn-t { color: var(--accent); }

/* =========================================================
   DESKTOP (>= 900px)
   ========================================================= */
@media (min-width: 900px) {
  /* The homepage is the top of the page. Its options sit at the bottom of the first
     screen and stick to the top once they reach it, by clicking or by scrolling. */
  #home .home-nav { display: none; }

  .home-inner {
    /* --bar-h and --after-h are measured by main.js so the options land at the bottom
       of the first screen. On screens taller than 900px the name moves down by 45% of
       the extra height, so it doesn't sit stranded at the top. */
    min-height: calc(100vh - var(--bar-h, 150px) - var(--after-h, 120px));
    padding: max(clamp(48px, 13vh, 120px), calc(120px + (100vh - 900px) * 0.45)) var(--pad) 0;
    display: flex; flex-direction: column;
  }
  .home-gap { flex-grow: 1; min-height: 48px; }

  .m-bar, .m-scrim { display: none; }
  /* Each section introduces itself with a small label (phones get the same label, with a rule above it) */
  .sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; }
  .sec-head h2 { display: none; }
  .sec-head p { margin: 0; }
  #contact .sec-head { display: none; }

  /* At rest the bar is part of the homepage, so it takes the homepage color; once stuck it turns white */
  .site-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--home-bg); padding: 0 var(--pad) 12px; color: var(--home-type); }
  /* The white backdrop fades in over the homepage color. (Transitioning the background itself
     made it lag behind the drifting homepage color and show as a strip.) */
  .site-bar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg); opacity: 0; transition: opacity .35s ease; }
  body.bar-stuck .site-bar::before { opacity: 1; }
  body.bar-stuck .site-bar { color: var(--ink); }
  .site-bar :focus-visible { outline-color: currentColor; }
  .site-bar-name { height: 64px; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
  body.bar-stuck .site-bar-name { opacity: 1; visibility: visible; transition: opacity .3s ease .1s, visibility 0s; }
  .site-bar-name a { display: flex; align-items: center; min-height: 44px; font-size: 21px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; }
  .site-nav { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid currentColor; }
  .site-nav a { display: flex; flex-direction: column; padding-top: 20px; min-height: 44px; }
  .sn-t { position: relative; display: flex; align-items: baseline; gap: 8px; font-size: 16px; font-weight: 700; transition: color .2s ease; }
  .sn-t::before {
    content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 3px; background: var(--accent);
    transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .7, .2, 1);
  }
  .sn-arrow { transition: opacity .25s ease; }
  /* Subtext takes no height, so the pinned bar stays slim; the space below the bar is held by .bar-after */
  .sn-d { display: block; height: 0; overflow: visible; white-space: nowrap; font-size: 13px; color: var(--home-type); transform: translateY(6px); transition: opacity .25s ease; }
  .site-nav a:hover .sn-t { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
  body.bar-stuck .site-nav a:hover .sn-t { color: var(--accent); text-decoration: none; }
  body.bar-stuck .sn-d, body.bar-stuck .sn-arrow { opacity: 0; }
  body.bar-stuck .sn-d { visibility: hidden; }
  body.bar-stuck .site-nav a.active .sn-t { color: var(--accent); }
  body.bar-stuck .site-nav a.active .sn-t::before { transform: scaleX(1); }
  .bar-after { height: 90px; background: var(--home-bg); }

  main { padding: 0 var(--pad) 0; }
  .sec { padding-top: 56px; padding-bottom: 56px; }
  /* A quiet divider and extra air between the four sections (products, range, gossip, contact) */
  .sec ~ .sec { margin-top: 0; padding-top: 56px; border-top: 1px solid #c4c4c4; }
  #contact { min-height: calc(100vh - var(--bar-h, 129px)); padding-bottom: 56px; }
  .form-status:empty { min-height: 0; margin-top: -20px; }

  .prod { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding: 32px 0; border-bottom: 1px solid var(--line); }
  .prod:first-child { padding-top: 0; }
  .prod:last-child { border-bottom: 0; padding-bottom: 0; }
  .prod-text { grid-column: 1 / span 5; display: flex; flex-direction: column; align-self: start; gap: 14px; }
  .prod-title { font-size: 36px; }
  .prod-sum { font-size: 17px; }
  .prod-more { font-size: 15px; }
  .prod-img { grid-column: 7 / span 6; height: 340px; }

  .range-intro { font-size: 20px; }
  .range-bar { margin-top: 32px; }
  .range-bar p { font-size: 16px; }
  .filters button { font-size: 15px; }

  .quote { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: 32px 0; border-bottom: 1px solid var(--line); }
  .quote:first-child { padding-top: 0; }
  .quote:last-child { padding-bottom: 0; }
  .quote:last-child { border-bottom: 0; }
  .who { grid-column: 1 / span 4; }
  .who img { width: 56px; height: 56px; }
  .who strong { font-size: 17px; }
  .who > span > span { font-size: 14px; }
  .quote blockquote { grid-column: 5 / span 8; font-size: 20px; max-width: 660px; text-wrap: pretty; }

  .contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-top: 16px; }
  .contact-intro { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 12px; }
  .contact-intro h3 { font-size: 36px; }
  .contact-intro p { font-size: 17px; }
  .ext { font-size: 16px; }
  .contact-form { grid-column: 6 / span 7; }
  .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

}
}

/* Narrower laptops: keep the four options on one line */
@media (min-width: 900px) and (max-width: 1180px) {
  .sn-t { font-size: 16px; }
  .sn-d { font-size: 14px; }
  .prod-title { font-size: 30px; }
  .prod-sum { font-size: 16px; }
  .prod-img { height: 280px; }
}

/* =========================================================
   PHONE & TABLET (< 900px)
   ========================================================= */
/* The gallery keeps six columns down to 820px (as in the first site), then switches to rows */
@media (max-width: 819.98px) {
  .dgal { display: none; }
  .mgal { display: block; }
}

@media (max-width: 899.98px) {
  :root { --pad: 20px; }

  .home-inner { padding: 64px var(--pad) 40px; }
  .home-name { font-size: 48px; line-height: 1.1; }
  .home-bio { padding-top: 20px; font-size: 17px; }
  /* gap between bio and options: at most 160px, shrinks on short screens so options stay in view */
  .home-gap { height: clamp(24px, calc(100vh - 400px), 160px); height: clamp(24px, calc(100svh - 400px), 160px); }
  .home-nav { display: flex; flex-direction: column; border-bottom: 1px solid var(--rule); }
  .opt { height: 72px; display: flex; flex-direction: column; justify-content: center; gap: 4px; border-top: 1px solid var(--rule); }
  .opt-t { justify-content: space-between; font-size: 16px; }
  .opt-arrow::after { content: "↓"; }
  .opt-d { font-size: 14px; max-width: none; }

  .site-bar, .bar-after { display: none; }

  .m-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line);
    opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .25s ease, transform .25s ease;
  }
  .m-bar.show { opacity: 1; transform: none; pointer-events: auto; }
  .m-bar-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; height: 52px; padding: 0 8px; }
  .m-bar-name { justify-self: center; display: flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
  .m-menu-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
  .m-menu-btn .i-close { display: none; }
  body.menu-open .m-menu-btn .i-open { display: none; }
  body.menu-open .m-menu-btn .i-close { display: block; }
  .m-menu { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.65, 0, .35, 1); padding: 0 var(--pad); }
  body.menu-open .m-menu { max-height: 280px; }
  .m-menu a { height: 64px; display: flex; flex-direction: column; justify-content: center; gap: 2px; border-top: 1px solid var(--rule); }
  .m-menu a:last-child { margin-bottom: 12px; }
  .m-t { font-size: 18px; font-weight: 500; }
  .m-d { font-size: 14px; color: var(--muted); }
  .m-scrim { position: fixed; inset: 0; z-index: 29; background: rgba(17, 17, 17, .28); display: none; }
  body.menu-open .m-scrim { display: block; }

  main { padding: 0 var(--pad) 0; }
  .sec { padding-top: 56px; }
  .sec-head { border-top: 1px solid var(--rule); padding-top: 14px; }
  #contact { min-height: calc(100vh - 52px); min-height: calc(100svh - 52px); padding-bottom: 56px; }

  .products { display: flex; flex-direction: column; padding-top: 8px; }
  .prod { display: flex; flex-direction: column; gap: 10px; padding: 28px 0; border-bottom: 1px solid var(--line); }
  .prod:last-child { border-bottom: 0; }
  .prod-text { display: contents; }
  .prod-img { order: -1; height: 210px; margin-bottom: 8px; }
  .prod-eyebrow { font-size: 13px; }
  .prod-title { font-size: 26px; }
  .prod-sum { font-size: 16px; }
  .prod-more { font-size: 15px; }

  .range-intro { margin-top: 28px; font-size: 16px; }
  .range-bar { margin-top: 28px; flex-direction: column; align-items: flex-start; }
  .range-bar p { font-size: 14px; }
  .filters { column-gap: 20px; }
  .filters button { font-size: 14px; }

  .quotes { padding-top: 8px; }
  .quote { display: flex; flex-direction: column; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line); }
  .quote:last-child { border-bottom: 0; }
  .who { align-items: center; gap: 12px; }
  .who img { width: 44px; height: 44px; }
  .who > span { padding-top: 0; }
  .who strong { font-size: 16px; }
  .who > span > span { font-size: 14px; }
  .quote blockquote { font-size: 16px; }

  .contact { display: flex; flex-direction: column; gap: 24px; padding-top: 28px; }
  .contact-intro { display: flex; flex-direction: column; gap: 8px; }
  .contact-intro h3 { font-size: 26px; }
  .contact-intro p { font-size: 17px; }
  .ext { font-size: 15px; }
  .row2 { display: flex; flex-direction: column; gap: 20px; }
  .contact-form input, .contact-form textarea { font-size: 16px; }
  .contact-form button[type="submit"] { align-self: stretch; }

  :root { --story-bar-h: 56px; }
  .story-bar { height: 56px; padding: 0 8px; }
  .story-head { padding: 24px 0 36px; }
  .story-eyebrow { font-size: 13px; }
  .story-slot h1 { font-size: 32px; }
  .slot-note { height: 240px; }
  .story-content { padding-top: 56px; }
  .story-text h2 { font-size: 24px; margin-bottom: 20px; }
  .story-text p { font-size: 16px; margin-bottom: 20px; }
  .story-rule { margin-top: 44px; margin-bottom: 40px; }
  .story-pull { font-size: 20px; }
  .story-fig { margin-top: 56px; grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .story-fig .slot-note { height: 200px; }
  .story-pair { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .story-eyebrow--name { font-size: 16px; }
  .story-meta { grid-template-columns: 1fr; margin-top: 28px; }
  .story-meta dd { font-size: 15px; }
  .gate { padding-top: 40px; }
  .gate-ghost { top: 40px; }
  .gate-card { padding: 24px 20px; }
  .gate-card h2 { font-size: 20px; }
  .gate-lede, .gate-ask { font-size: 15px; }
  .story-pn { margin-top: 64px; margin-bottom: 48px; column-gap: 16px; }
  .pn-t { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* The homepage colors change on their own, so type there must follow instantly, never lag behind a fade */
#home .opt-t { transition: none; }
@media (min-width: 900px) { body:not(.bar-stuck) .sn-t { transition: none; } }