/* ===== sTorksArch base styles ===== */

/* iOS Safari / Android Chrome: use small/large viewport units where available so the
   hero doesn't jump when the browser chrome shows/hides. Falls back to 100vh. */
.hero-root {
  height: 100vh;                 /* fallback */
  height: 100svh;                /* small-viewport — no jump when toolbar is up */
  min-height: 620px;
}
@supports (height: 100dvh) {
  .hero-root { height: 100dvh; } /* dynamic: adapts as toolbar shows/hides */
}

:root {
  --bg: #fafaf8;
  --fg: #0e0f0c;
  --fg-soft: #6b6e68;
  --fg-softer: #a8aba4;
  --line: #e8e6e0;
  --line-soft: #f0eeea;
  /* Accent: oklch is Safari 15.4+ / Chrome 111+. For the 1-2% still on older browsers,
     the @supports block below swaps to hex fallbacks so the site never looks broken. */
  --accent: oklch(72% 0.04 230);     /* cool mist */
  --accent-soft: oklch(96% 0.012 230);
  --surface: #ffffff;
  --paper: #f4f2ec;
  --steel: #8a8c86;
  --max: 1440px;
  --edge: clamp(20px, 4vw, 72px);
}

html[data-accent="warm"] { --accent: oklch(72% 0.08 55); --accent-soft: oklch(96% 0.02 55); }
html[data-accent="mist"] { --accent: oklch(72% 0.04 230); --accent-soft: oklch(96% 0.012 230); }
html[data-accent="ral"]  { --accent: oklch(58% 0.14 28);  --accent-soft: oklch(96% 0.018 28); }

/* Legacy browsers that don't understand oklch (pre-Safari 15.4, pre-Chrome 111) — swap in hex */
@supports not (color: oklch(50% 0 0)) {
  :root                    { --accent: #8aadbe; --accent-soft: #f2f5f7; }
  html[data-accent="warm"] { --accent: #c7a179; --accent-soft: #f7f1ea; }
  html[data-accent="mist"] { --accent: #8aadbe; --accent-soft: #f2f5f7; }
  html[data-accent="ral"]  { --accent: #bc4a3b; --accent-soft: #f8eee9; }
}

html[data-type="thin"] { --h-weight: 200; --h-body-weight: 300; }
html[data-type="medium"] { --h-weight: 400; --h-body-weight: 400; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: var(--h-body-weight, 300);
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; color: inherit; cursor: pointer; padding: 0; }
img { display: block; max-width: 100%; }

/* Type */
.display, h1, h2 { font-family: 'Inter', sans-serif; font-weight: var(--h-weight, 200); letter-spacing: -0.03em; line-height: 0.95; }
.product-name { font-family: 'Inter', sans-serif; font-weight: 200; letter-spacing: -0.02em; text-transform: lowercase; }
.eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-soft); font-weight: 400; }
.num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: "tnum"; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.serif-i { font-family: 'Fraunces', serif; font-weight: 300; font-style: italic; }

/* Layout helpers */
.container { max-width: var(--max); margin: 0 auto; padding-left: var(--edge); padding-right: var(--edge); }
.wide { max-width: 1800px; margin: 0 auto; padding-left: var(--edge); padding-right: var(--edge); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Scroll-fade util */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 900ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* Caret / cursor-dot for hero */
.cursor-dot {
  position: fixed; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%;
  background: #fff; mix-blend-mode: difference; pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%); transition: width 0.25s, height 0.25s, opacity 0.25s;
  opacity: 0;
}
.cursor-dot.active { opacity: 0.9; }
.cursor-dot.grow { width: 64px; height: 64px; }

/* Selection */
::selection { background: var(--fg); color: var(--bg); }

/* Scrollbar */
html { scrollbar-color: var(--line) transparent; scrollbar-width: thin; }

/* ===== Responsive layer ===== */

/* Tablet landscape and below: shrink edge padding */
@media (max-width: 1024px) {
  :root { --edge: clamp(18px, 3.5vw, 40px); }
}
@media (max-width: 768px) {
  :root { --edge: clamp(16px, 4vw, 24px); }
  body { font-size: 15px; }
}

/* ---- NavBar responsive ---- */
@media (max-width: 1024px) {
  header .nav-link { display: none !important; }
  header .nav-sep { display: none !important; }
}
@media (max-width: 640px) {
  header nav { gap: 10px !important; }
  header nav a[href="#contact"] { padding: 8px 14px !important; font-size: 11px !important; }
}

/* ---- Hero ---- */
@media (max-width: 900px) {
  #top { min-height: 620px !important; }
  #top > div[style*="flex-end"] { padding-bottom: 10vh !important; }
  #top .hero-line { font-size: clamp(36px, 9vw, 64px) !important; }
  #top .hero-h1 { max-width: 100% !important; }
  #top > div[style*="bottom: 28px"] { display: none !important; }
}
@media (max-width: 640px) {
  #top { min-height: 560px !important; }
  #top .hero-line { font-size: clamp(30px, 9.5vw, 48px) !important; }
  #top p { font-size: 14px !important; }
  #top > div[style*="flex-end"] { padding-bottom: 6vh !important; }
  /* Stack subtitle + CTAs vertically */
  #top div[style*="space-between"][style*="flex-wrap"] > div:last-child { width: 100%; }
}

/* ---- Section padding tightens on small screens ---- */
@media (max-width: 768px) {
  section#why, section#atelier, section#nozzle, section#contact,
  section#products, section#families {
    padding: 56px 0 48px !important;
  }
  section#contact { padding: 64px 0 !important; }
}

/* ---- Two-column grids collapse on tablet/mobile ---- */
@media (max-width: 900px) {
  section#why .wide > div[style*="grid-template-columns: 1fr 1fr"],
  section#atelier .wide > div[style*="1.2fr 1fr"],
  section#nozzle .wide > div[style*="1.2fr 1fr"],
  section#contact .wide > div[style*="1.3fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-top: 40px !important;
  }
  section#why h2, section#atelier h2, section#nozzle h2, section#contact h2 {
    font-size: clamp(36px, 8vw, 64px) !important;
  }
  section#products h2 { font-size: clamp(34px, 7.5vw, 60px) !important; }
}

/* Products grid header row wraps */
@media (max-width: 640px) {
  section#products .wide > div[style*="1fr auto"] {
    grid-template-columns: 1fr !important; gap: 20px !important;
  }
}

/* ---- Products gallery grid ---- */
@media (max-width: 1100px) {
  section#products .wide > div[style*="repeat(3, 1fr)"][style*="gap: 40px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px !important;
  }
}
@media (max-width: 560px) {
  section#products .wide > div[style*="repeat(3, 1fr)"][style*="gap: 40px"],
  section#products .wide > div[style*="repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  section#products .product-name { font-size: 26px !important; }
}

/* ---- Nozzle section inner grids ---- */
@media (max-width: 900px) {
  section#nozzle .wide > div[style*="repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-top: 48px !important;
  }
  section#nozzle .wide > div[style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    margin-top: 56px !important;
  }
}
@media (max-width: 520px) {
  section#nozzle .wide > div[style*="repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  section#nozzle .wide > div[style*="repeat(4, 1fr)"] > div > div {
    border-left: none !important; padding-left: 0 !important;
    border-top: 1px solid var(--line); padding-top: 24px !important;
  }
}

/* ---- Atelier spec footer: 3 cols → 2 → 1 ---- */
@media (max-width: 900px) {
  section#atelier .wide > div[style*="repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 560px) {
  section#atelier .wide > div[style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  section#atelier .wide > div[style*="repeat(3, 1fr)"] > div {
    border-right: none !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

/* ---- Contact ---- */
@media (max-width: 640px) {
  section#contact div[style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  section#contact h2 { font-size: clamp(34px, 9vw, 56px) !important; }
}

/* ---- Index table: collapse to card list on small screens ---- */
@media (max-width: 900px) {
  section#products div[style*="80px 144px 2fr"] { display: none !important; }
  section#products div.reveal > button[style*="80px 144px 2fr"] {
    display: grid !important;
    grid-template-columns: 80px 1fr auto !important;
    gap: 14px !important;
    padding: 18px 0 !important;
    align-items: center !important;
  }
  section#products div.reveal > button[style*="80px 144px 2fr"] > *:nth-child(n+5):not(.arr) { display: none; }
  section#products div.reveal > button[style*="80px 144px 2fr"] > span:nth-child(2) {
    width: 72px !important; height: 72px !important;
  }
  section#products div.reveal > button[style*="80px 144px 2fr"] > span:nth-child(3) {
    font-size: 22px !important;
  }
}

/* ---- Product drawer responsive ---- */
@media (max-width: 720px) {
  div[style*="zIndex: 200"] > div[style*="min(900px"] { padding: 0 !important; }
  div[style*="zIndex: 200"] h2[class*="product-name"] { font-size: clamp(56px, 15vw, 96px) !important; }
  div[style*="zIndex: 200"] div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="zIndex: 200"] div[style*="padding: '28px 40px'"],
  div[style*="zIndex: 200"] div[style*="padding: '40px'"],
  div[style*="zIndex: 200"] div[style*="padding: '0 40px 40px'"] {
    padding: 24px !important;
  }
}

/* ---- Footer ---- */
@media (max-width: 768px) {
  footer .wide[style*="1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    align-items: flex-start !important;
  }
  footer .wide[style*="1fr 1fr 1fr"] > div:last-child {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
  footer .wide[style*="marginTop: 60px"],
  footer .wide:last-child {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
}

/* ---- Tweaks panel: stays fixed-bottom-right but shrinks ---- */
@media (max-width: 560px) {
  div[class*="tweaks"], div[data-tweaks] {
    width: calc(100vw - 24px) !important;
    max-width: 360px !important;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---- Touch targets ---- */
@media (hover: none) and (pointer: coarse) {
  a, button { min-height: 44px; }
  header nav a { min-height: 36px; display: inline-flex; align-items: center; }
}

/* Mist animation */
@keyframes mistFloat {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: 0; }
  20%  { opacity: 0.35; }
  80%  { opacity: 0.2; }
  100% { transform: translate3d(24px,-60px,0) scale(1.3); opacity: 0; }
}
@keyframes mistFloat2 {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: 0; }
  30%  { opacity: 0.25; }
  100% { transform: translate3d(-20px,-70px,0) scale(1.25); opacity: 0; }
}

.mist-puff {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%);
  filter: blur(14px);
  pointer-events: none;
}


/* ================================================================
   Installations map (Leaflet)
   Muted, off-white styling to sit inside the site's light palette.
   ================================================================ */
.iml-wrap {
  position: relative;
  width: 100%;
  border: 1px solid var(--line);
  background: #f4f2ee;
  overflow: hidden;
}
.iml-map {
  width: 100%;
  height: 760px;
  background: #eeece7;
  /* Desaturate the basemap so category colors read cleanly */
  filter: saturate(0.55) contrast(0.95) brightness(1.02);
  /* Let Leaflet handle all touch gestures (pinch-zoom, pan) on iOS + Android
     instead of the browser's default page-zoom / scroll behavior. */
  touch-action: none;
}
@media (max-width: 768px) { .iml-map { height: 520px; } }
/* Leaflet 1.9 sets mix-blend-mode: plus-lighter on .leaflet-container img.leaflet-tile,
   which washes the basemap to white over our off-white site background. Reset it. */
.iml-map.leaflet-container img.leaflet-tile,
.iml-map .leaflet-tile-pane img.leaflet-tile { mix-blend-mode: normal !important; }

/* Pins — simple dot with a soft ring on hover */
.iml-pin { background: transparent !important; border: 0 !important; }
.iml-dot {
  display: block;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--dot, #1f4a6e);
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.06);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.iml-pin:hover .iml-dot {
  transform: scale(1.35);
  box-shadow: 0 2px 6px rgba(0,0,0,0.30), 0 0 0 6px rgba(31,74,110,0.12);
}

/* Popups — stripped of Leaflet's default chrome, restyled to match site type */
.iml-popup .leaflet-popup-content-wrapper {
  background: #fafaf8;
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  padding: 0;
}
.iml-popup .leaflet-popup-content { margin: 0; padding: 14px 16px; min-width: 180px; }
.iml-popup .leaflet-popup-tip { background: #fafaf8; border: 1px solid var(--line); }
.iml-pop-n { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px; color: var(--fg); line-height: 1.3; letter-spacing: -0.005em; }
.iml-pop-m { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-softer); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.iml-pop-sw { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Legend / filter row */
.iml-legend {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 20px; background: #fafaf8; border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.iml-total { display: flex; align-items: baseline; gap: 10px; }
.iml-total-n { font-family: 'Inter', sans-serif; font-weight: 200; font-size: 38px; letter-spacing: -0.03em; color: var(--fg); line-height: 1; }
.iml-total-l { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-softer); }
.iml-cats { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.iml-cat {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.iml-cat:hover { color: var(--fg); border-color: var(--fg-softer); }
.iml-cat.on { color: var(--fg); background: #f2efe8; border-color: #d8d3c8; }
.iml-cat:not(.on) { opacity: 0.45; }
.iml-cat:not(.on):hover { opacity: 0.75; }
.iml-sw { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); }
.iml-cat-n { font-weight: 400; color: var(--fg-softer); margin-left: 2px; font-variant-numeric: tabular-nums; }
.iml-cat.on .iml-cat-n { color: var(--fg-soft); }

/* Leaflet zoom controls — tone down to match site */
.leaflet-control-zoom a {
  background: #fafaf8 !important;
  color: var(--fg-soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 300 !important;
}
.leaflet-control-zoom a:hover { background: #f2efe8 !important; color: var(--fg) !important; }
.leaflet-control-attribution { background: rgba(250,250,248,0.85) !important; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px !important; letter-spacing: 0.08em; color: var(--fg-softer) !important; }
.leaflet-control-attribution a { color: var(--fg-soft) !important; }
.leaflet-attribution-flag { display: none !important; }

@media (max-width: 560px) {
  .iml-total-n { font-size: 30px; }
  .iml-legend { padding: 14px 14px; gap: 14px; }
  .iml-cat { padding: 6px 10px 6px 8px; font-size: 9px; letter-spacing: 0.14em; }
}

/* ---- Journal: related products grid responsive ---- */
@media (max-width: 980px) {
  .jrn-related { grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; }
}
@media (max-width: 720px) {
  .jrn-related { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
}
@media (max-width: 420px) {
  .jrn-related { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* ---- Journal article body paragraphs ----
   Bodies are JSX fragments containing their own <p> children, so the renderer
   doesn't wrap them. Style each <p> here so spacing/typography match across
   all four articles without each <p style={...}> repeating itself. */
.jrn-body > p,
.jrn-body p {
  font-size: clamp(16px, 1.1vw, 17px);
  line-height: 1.75;
  color: var(--fg);
  text-wrap: pretty;
  max-width: 68ch;
  margin: 20px 0 0;
}
.jrn-body > p:first-child,
.jrn-body > :first-child p:first-child {
  margin-top: 0;
}

/* ---- Read-more cue ----
   The whole card is the link; the cue gives a visible affordance and a
   small arrow nudge on hover. Underline only the label text, not the arrow,
   so the arrow can travel cleanly. */
.jrn-card .jrn-readmore {
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
  padding-bottom: 2px;
}
.jrn-card:hover .jrn-readmore,
.jrn-card:focus-visible .jrn-readmore {
  border-bottom-color: var(--fg);
}
.jrn-card:hover .jrn-readmore-arrow,
.jrn-card:focus-visible .jrn-readmore-arrow {
  transform: translateX(4px);
}

/* ---- Journal: mobile / tablet layout ----
   The journal pages were built grid-first: every card and every body section
   uses a left column for the date / number meta and a right column for the
   text. On a phone, that left column eats half the screen and the prose
   collapses into a 2-word ladder. Stack everything on small viewports so the
   page reads like an actual mobile article. */
@media (max-width: 720px) {
  /* Index + post cards: stack date above title */
  .jrn-card {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 28px 0 !important;
  }
  .jrn-card > div:first-child {
    padding-top: 0 !important;
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
  }
  .jrn-card > div:first-child > div {
    margin-top: 0 !important;
  }
  /* Inline the "read time" line next to the date instead of stacking */
  .jrn-card > div:first-child > div + div::before {
    content: "·";
    margin-right: 14px;
    color: var(--fg-softer);
  }

  /* TL;DR + numbered body sections: stack meta above text */
  .jrn-tldr,
  .jrn-section {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .jrn-section > div:first-child {
    padding-top: 0 !important;
  }
}

/* Tighten the article hero on phones — clamp() with vw alone leaves the
   headline + tag row uncomfortably loose on small screens. */
@media (max-width: 640px) {
  main article > header { padding: 24px 0 32px !important; }
  main article > header h1.display {
    font-size: clamp(30px, 8.5vw, 44px) !important;
    margin-top: 24px !important;
  }
  main article > header > .wide > div:first-child {
    gap: 10px !important;
    font-size: 10px !important;
  }
  /* Body section padding shrinks */
  .jrn-section { padding-top: 36px !important; padding-bottom: 36px !important; }
  /* Reduce big section padding */
  main article > section { padding-top: 36px !important; padding-bottom: 48px !important; }
}