/* ====================================================================
   SITE-WIDE STYLES — storefront
   --------------------------------------------------------------------
   Shared by every public page: the front page, custom, materials,
   studio and contact. Extracted from norrtelje-printlab.html when the
   single scrolling page was split up, so a change to the nav, footer
   or theme happens in one place rather than five.

   Page-specific rules stay in that page's own <style> block.
==================================================================== */

  :root {
    --nav-h: 76px;           /* explicit fixed nav height */
    --hero-clearance: 140px; /* gap below nav before hero meta-row */
  }
  :root,
  [data-theme="dark"] {
    --bg: #0a0a0a;
    --bg-2: #141414;
    --bg-3: #1c1c1c;
    --ink: #f2f0eb;
    --mute: #6b6b6b;
    --rule: #262626;
    --accent: #c4ff3d;
    --accent-soft: rgba(196, 255, 61, 0.15);
    --accent-rgb: 196, 255, 61;
    --nav-bg: rgba(10, 10, 10, 0.6);
    --bottom-bg: rgba(10, 10, 10, 0.85);
  }

  [data-theme="light"] {
    --bg: #f0ede5;
    --bg-2: #e6e2d8;
    --bg-3: #ddd8cc;
    --ink: #15141a;
    --mute: #847d72;
    --rule: #c9c3b6;
    --accent: #d94f1a;
    --accent-soft: rgba(217, 79, 26, 0.15);
    --accent-rgb: 217, 79, 26;
    --nav-bg: rgba(240, 237, 229, 0.75);
    --bottom-bg: rgba(240, 237, 229, 0.88);
  }

  /* Smooth theme transitions on the surfaces that change */
  body, nav, footer, section,
  .product-card, .product-image, .upload-card, .config-field,
  .material-row, .material-detail, .maker, .contact-form,
  .status-bar, .loader, .hero-bottom, .ticker,
  .configurator, .contact, .about, .product-add, .nav-cta,
  .config-submit, .magnetic-btn {
    transition: background 0.6s ease, color 0.6s ease, border-color 0.6s ease, -webkit-text-stroke-color 0.6s ease;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; background: var(--bg); }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Archivo', -apple-system, sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  .mono {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 11px;
  }

  /* ====== GRAIN ====== */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* Light mode: subtle blueprint grid behind everything */
  [data-theme="light"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0.4;
    background-image:
      linear-gradient(rgba(21, 20, 26, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(21, 20, 26, 0.025) 1px, transparent 1px);
    background-size: 64px 64px;
  }

  /* ====== PAGE LOADER ====== */
  .loader {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 24px;
    transition: opacity 0.5s 0.2s, visibility 0s 0.7s;
  }
  .loader.done { opacity: 0; visibility: hidden; }
  .loader-logo {
    width: 36px; height: 36px;
    background: var(--accent);
    transform: rotate(45deg);
    position: relative;
    animation: loaderPulse 1.5s ease-in-out infinite;
  }
  .loader-logo::after {
    content: '';
    position: absolute;
    inset: 6px;
    background: var(--bg);
  }
  @keyframes loaderPulse {
    0%, 100% { transform: rotate(45deg) scale(1); }
    50% { transform: rotate(225deg) scale(0.85); }
  }
  .loader-bar {
    width: 200px;
    height: 1px;
    background: var(--rule);
    position: relative;
    overflow: hidden;
  }
  .loader-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform: translateX(-100%);
    animation: loaderFill 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  @keyframes loaderFill {
    to { transform: translateX(0); }
  }
  .loader-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mute);
    display: flex;
    gap: 12px;
    align-items: center;
  }
  .loader-text span { color: var(--accent); }
  .loader-text .dot {
    width: 4px; height: 4px;
    background: var(--accent);
    border-radius: 50%;
    animation: blink 0.8s infinite;
  }
  @keyframes blink { 50% { opacity: 0.2; } }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ====== NAV ====== */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: var(--nav-h);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 28px;
    background: var(--nav-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--rule);
  }
  .logo {
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
  }
  .logo-mark {
    width: 38px; height: 38px;
    background: var(--accent);
    -webkit-mask: url('assets/logo.png') center/contain no-repeat;
            mask: url('assets/logo.png') center/contain no-repeat;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .logo:hover .logo-mark { transform: scale(1.08); }

  .nav-links { display: flex; gap: 28px; justify-self: center; }
  .nav-links a {
    color: var(--ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    padding: 4px 0;
    overflow: hidden;
  }
  .nav-links a span {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.5, 0, 0.1, 1);
  }
  .nav-links a span:nth-child(2) {
    position: absolute;
    left: 0; top: 100%;
    color: var(--accent);
  }
  .nav-links a:hover span:nth-child(1) { transform: translateY(-100%); }
  .nav-links a:hover span:nth-child(2) { transform: translateY(-100%); }

  /* Current page. Now that the site is several pages rather than one long
     scroll, "where am I" has to be answerable at a glance — an underline
     plus the accent colour, not colour alone (which excludes anyone who
     can't distinguish it). */
  .nav-links a.active { color: var(--accent); }
  .nav-links a.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--accent);
  }

  .nav-actions { justify-self: end; display: flex; gap: 16px; align-items: center; }
  .nav-clock {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--mute);
    letter-spacing: 0.05em;
  }
  .nav-clock span { color: var(--accent); }
  .nav-cta {
    background: var(--accent);
    color: var(--bg);
    padding: 11px 20px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: transform 0.3s;
    position: relative;
  }
  .nav-cta:hover { transform: translateY(-1px); }

  /* Theme toggle */
  .theme-toggle {
    width: 36px; height: 36px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color 0.3s, color 0.3s, background 0.3s;
    font-family: inherit;
    position: relative;
    overflow: hidden;
  }
  .theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
  .theme-toggle svg {
    position: absolute;
    transition: opacity 0.4s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  /* dark theme: show sun (to switch TO light); hide moon */
  .theme-toggle[data-theme="dark"] .ico-sun { opacity: 1; transform: rotate(0); }
  .theme-toggle[data-theme="dark"] .ico-moon { opacity: 0; transform: rotate(-90deg); }
  /* light theme: show moon (to switch TO dark); hide sun */
  .theme-toggle[data-theme="light"] .ico-sun { opacity: 0; transform: rotate(90deg); }
  .theme-toggle[data-theme="light"] .ico-moon { opacity: 1; transform: rotate(0); }

  /* ====== HERO ====== */
  .hero {
    position: relative;
    min-height: 100vh;
    /* Padding-top = exact nav height + a generous clearance.
       Both values live in CSS variables so the math is always right
       regardless of what's inside the nav. */
    padding: calc(var(--nav-h) + var(--hero-clearance)) 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .hero-meta-row {
    display: flex;
    justify-content: space-between;
    /* Pinned just under the fixed nav so the status reads as part of the
       header chrome, instead of floating awkwardly in the middle of the
       hero image. Absolute positioning keeps it out of the flex flow so
       the headline can still sit `margin-top: auto` for bottom-alignment. */
    position: absolute;
    top: calc(var(--nav-h) + 12px);
    left: 0; right: 0;
    padding: 0 28px;
    z-index: 3;
    /* Subtle gradient pad behind it so the labels stay legible if a future
       hero image is bright at the top. Cheap, no extra element needed. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  }
  .hero-meta-row .mono { color: var(--mute); }
  .hero-meta-row .live { display: inline-flex; align-items: center; gap: 8px; }
  .hero-meta-row .live::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); }
    50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0); }
  }

  /* Hero background image — printer head shot. Sized to fill the area
     below the nav. background-position keeps the subject on the right
     side of the viewport so the big headline (anchored bottom-left) has
     clean dark space to sit on. */
  .hero-image {
    position: absolute;
    top: var(--nav-h);
    right: 0; bottom: 0; left: 0;
    z-index: 1;
    background-image: url('/assets/hero.png');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: heroImageIn 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards;
  }
  /* Gradient overlay — fades dark on the left so the headline reads cleanly
     even when the image gets bright. On wider screens this becomes a stronger
     vignette; on phones it covers more of the image since the headline takes
     up more of the canvas. */
  .hero-image-overlay {
    position: absolute;
    top: var(--nav-h);
    right: 0; bottom: 0; left: 0;
    z-index: 2;
    background:
      linear-gradient(to right, var(--bg) 0%, rgba(0,0,0,0.5) 40%, transparent 75%),
      linear-gradient(to top,   var(--bg) 0%, transparent 25%);
    pointer-events: none;
    opacity: 0;
    animation: heroImageIn 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards;
  }
  /* Light theme: the dark printer image fights the cream background. Drop
     opacity heavily so it reads as faint atmosphere; the orange accent +
     headline still carry the visual weight. */
  [data-theme="light"] .hero-image { opacity: 0.18; }
  [data-theme="light"] .hero-image-overlay {
    background:
      linear-gradient(to right, var(--bg) 0%, rgba(240,237,229,0.7) 40%, transparent 80%);
  }
  @keyframes heroImageIn {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* Scroll indicator */
  .scroll-indicator {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--mute);
    opacity: 0;
    animation: fadeUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) 1.4s forwards;
    pointer-events: none;
  }
  .scroll-indicator .mono {
    writing-mode: vertical-rl;
    letter-spacing: 0.2em;
    font-size: 10px;
  }
  .scroll-track {
    width: 1px;
    height: 60px;
    background: var(--rule);
    position: relative;
    overflow: hidden;
  }
  .scroll-thumb {
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform: translateY(-100%);
    animation: scrollThumb 2.4s cubic-bezier(0.6, 0, 0.4, 1) infinite;
  }
  @keyframes scrollThumb {
    0% { transform: translateY(-100%); }
    50% { transform: translateY(0); }
    100% { transform: translateY(100%); }
  }
  @media (max-width: 760px) { .scroll-indicator { display: none; } }
  .hero-glow {
    position: absolute;
    width: 60%; height: 60%;
    /* Pushed down by the nav-clearance so the blur doesn't bleed into the nav. */
    top: calc(var(--nav-h) + 20%); left: 20%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.08) 0%, transparent 60%);
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
  }

  .hero-headline {
    position: relative;
    z-index: 3;
    padding: 0 28px;
    margin-top: auto;
    pointer-events: none;
  }
  .hero-headline h1 {
    font-weight: 800;
    font-size: clamp(56px, 14vw, 220px);
    line-height: 0.85;
    letter-spacing: -0.05em;
    text-transform: uppercase;
  }
  .hero-headline h1 .outline {
    -webkit-text-stroke: 1.5px var(--ink);
    color: transparent;
  }
  .hero-headline h1 .accent { color: var(--accent); }

  /* Letter-by-letter reveal */
  .reveal-char {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    animation: charIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  }
  @keyframes charIn {
    to { transform: translateY(0); opacity: 1; }
  }

  .hero-bottom {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 40px;
    padding: 40px 28px 28px;
    border-top: 1px solid var(--rule);
    margin-top: 32px;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .hero-bottom .col {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  }
  .hero-bottom .col:nth-child(1) { animation-delay: 1.2s; }
  .hero-bottom .col:nth-child(2) { animation-delay: 1.3s; }
  .hero-bottom .col:nth-child(3) { animation-delay: 1.4s; }
  .hero-bottom .col:nth-child(4) { animation-delay: 1.5s; }
  @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

  .hero-bottom .col .mono { color: var(--mute); margin-bottom: 8px; display: block; }
  .hero-bottom .col .value {
    font-weight: 600;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .hero-bottom .col p { font-size: 13px; color: var(--mute); line-height: 1.5; margin-top: 6px; }
  .hero-bottom .col.lead .value { font-size: 18px; font-weight: 500; line-height: 1.35; }

  /* Counter animation */
  .counter { display: inline-block; min-width: 1ch; }

  /* ====== TICKER ====== */
  .ticker {
    overflow: hidden;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
    padding: 18px 0;
    position: relative;
    z-index: 4;
  }
  .ticker-track {
    display: flex;
    gap: 60px;
    white-space: nowrap;
    animation: scroll 30s linear infinite;
    width: max-content;
  }
  .ticker:hover .ticker-track { animation-play-state: paused; }
  .ticker-item {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 60px;
  }
  .ticker-item::after {
    content: '✦';
    color: var(--accent);
    font-size: 12px;
  }
  @keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* ====== REVEAL ON SCROLL ====== */
  .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .reveal.in { opacity: 1; transform: translateY(0); }

  /* ====== SECTION SHARED ====== */
  section { padding: 100px 28px; position: relative; }
  .section-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    margin-bottom: 60px;
    align-items: end;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rule);
  }
  .section-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--accent);
    margin-bottom: 16px;
  }
  .section-label::before {
    content: '';
    width: 24px; height: 1px;
    background: var(--accent);
  }
  .section-title {
    font-size: clamp(40px, 6vw, 88px);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.04em;
    text-transform: uppercase;
  }
  .section-title .outline { -webkit-text-stroke: 1px var(--ink); color: transparent; }
  .section-title em {
    font-style: italic;
    font-family: 'Archivo Narrow', sans-serif;
    font-weight: 400;
    color: var(--accent);
  }

  /* ====== CATALOG ====== */
  .catalog-section { padding: 100px 0; }
  .catalog-section .section-header { padding-left: 28px; padding-right: 28px; }
  .catalog-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 0 28px 32px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
  }
  .catalog-scroll::-webkit-scrollbar { height: 4px; }
  .catalog-scroll::-webkit-scrollbar-thumb { background: var(--rule); }

  .product-card {
    flex: 0 0 380px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 4px;
    overflow: hidden;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    transition: border-color 0.4s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
  }
  .product-card:hover {
    border-color: var(--accent);
    transform: translateY(-6px);
  }
  /* Mouse-follow spotlight */
  .product-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 200px at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), 0.08), transparent 50%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
    z-index: 4;
  }
  .product-card:hover::before { opacity: 1; }

  .product-image {
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--bg-3) 0%, var(--bg-2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .product-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 32px 32px;
  }
  .product-image svg {
    position: relative;
    z-index: 1;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .product-card:hover .product-image svg { transform: rotate(8deg) scale(1.1); }
  .product-image .product-photo {
    position: relative; z-index: 1;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .product-card:hover .product-image .product-photo { transform: scale(1.04); }

  .product-badge {
    position: absolute;
    top: 16px; left: 16px;
    background: var(--bg);
    border: 1px solid var(--rule);
    padding: 4px 10px;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    z-index: 2;
  }
  .product-badge.new { color: var(--accent); border-color: var(--accent); }
  .product-badge.low { color: #e8a23a; border-color: #e8a23a; }
  .product-badge.out { color: var(--mute); border-color: var(--rule); text-decoration: line-through; }

  .product-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; position: relative; z-index: 2; }
  .product-meta { display: flex; justify-content: space-between; }
  .product-meta .mono { color: var(--mute); }
  .product-name { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
  .product-desc { font-size: 13px; color: var(--mute); line-height: 1.55; }
  .product-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
    margin-top: auto;
  }
  .product-price { font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
  .product-price .currency { color: var(--mute); font-size: 12px; font-weight: 500; margin-right: 4px; }
  .product-add {
    background: var(--ink);
    color: var(--bg);
    border: none;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background 0.3s;
    font-family: inherit;
  }
  .product-add:hover { background: var(--accent); }

  /* ====== CONFIGURATOR ====== */
  .configurator { background: var(--bg-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .config-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: start; }
  .config-visual {
    /* Square aesthetic, but capped so wide screens don't blow it up into a
       multi-screen-tall box. Cap roughly matches the natural height of the
       form on the right, so the two columns sit side-by-side. Centered
       inside its grid cell so empty space splits evenly on both sides
       rather than puddling on one. */
    aspect-ratio: 1;
    width: 100%;
    max-width: 640px;
    max-height: 640px;
    justify-self: center;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .config-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
  }
  .config-visual .glow {
    position: absolute;
    width: 60%; height: 60%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.18) 0%, transparent 60%);
    filter: blur(40px);
  }
  /* width/height: 100% are critical here — <canvas> is a CSS "replaced
     element" whose intrinsic 300×150 dimensions win over `inset: 0` alone
     (the CSS spec falls back to intrinsic size when width/height are auto,
     even with all four edges anchored). Without explicit width:100% the
     canvas would stay at 300×150 stuck in the top-left of its parent,
     and the 3D scene would render into that small chunk only. */
  #config-canvas {
    position: absolute; inset: 0; z-index: 2;
    width: 100%; height: 100%;
    display: block;
  }
  .config-callouts {
    position: absolute;
    inset: 0;
    z-index: 3;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    pointer-events: none;
  }
  .callout {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
  }
  .callout::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.2);
    animation: pulse 2s infinite;
  }
  .callout-1 { top: 18%; left: 12%; }
  .callout-2 { top: 38%; right: 10%; flex-direction: row-reverse; }
  .callout-3 { bottom: 22%; left: 14%; }

  .config-content h3 {
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin-bottom: 24px;
  }
  .config-content h3 .accent { color: var(--accent); }
  .config-content > p {
    font-size: 16px;
    color: var(--mute);
    line-height: 1.65;
    max-width: 50ch;
    margin-bottom: 32px;
  }

  .upload-card {
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 28px;
    margin-bottom: 24px;
    transition: border-color 0.3s, background 0.3s;
    position: relative;
    overflow: hidden;
  }
  .upload-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
  }
  .upload-card:hover { border-color: var(--accent); }
  .upload-card:hover::after { transform: translateX(100%); }
  .upload-card.dragover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: scale(1.01);
  }
  .upload-card.uploaded {
    border-color: var(--accent);
    border-style: solid;
  }
  .upload-card.uploaded h4 { color: var(--accent); }
  .upload-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
  .upload-card-head .mono { color: var(--accent); }
  .upload-card-head .arrow { color: var(--accent); font-size: 18px; transition: transform 0.3s; }
  .upload-card:hover .upload-card-head .arrow { transform: translate(4px, -4px); }
  .upload-card h4 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
  .upload-card p { font-size: 13px; color: var(--mute); margin: 0; }

  .config-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
  .config-field {
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
    position: relative;
  }
  .config-field:hover { border-color: var(--mute); }
  .config-field:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .config-field:focus-within label { color: var(--accent); }
  .config-field label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mute);
    transition: color 0.3s;
  }
  .config-field select,
  .config-field input {
    background: transparent;
    border: none;
    color: var(--ink);
    font-family: 'Archivo', sans-serif;
    font-size: 14px;
    font-weight: 500;
    outline: none;
    padding: 0;
    width: 100%;
  }
  .config-field input::placeholder { color: var(--mute); }
  .config-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' stroke='currentColor' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    color: var(--ink);
  }
  .config-field select option { background: var(--bg-2); color: var(--ink); }

  /* Magnetic button */
  .magnetic-wrap { display: inline-block; }
  .config-submit, .magnetic-btn {
    width: 100%;
    background: var(--accent);
    color: var(--bg);
    border: none;
    padding: 18px;
    border-radius: 999px;
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s;
    position: relative;
    overflow: hidden;
  }
  .config-submit:hover, .magnetic-btn:hover { background: #d5ff5e; }

  /* ====== MATERIALS — interactive selector ====== */
  .materials-wrap {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start;
  }

  .material-selector {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 6px;
    overflow: hidden;
  }
  .material-row {
    background: var(--bg-2);
    padding: 24px 28px;
    transition: background 0.3s, padding-left 0.4s;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
  }
  .material-row:hover { background: var(--bg-3); padding-left: 36px; }
  .material-row.active {
    background: var(--bg-3);
    padding-left: 36px;
  }
  .material-row.active .material-row-name { color: var(--accent); }
  .material-row-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--mute); }
  .material-row-name {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    transition: color 0.3s;
  }
  .material-row-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .material-detail {
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 40px;
    min-height: 480px;
    position: relative;
    overflow: hidden;
  }
  .material-detail::before {
    content: '';
    position: absolute;
    top: -50%; right: -30%;
    width: 80%; height: 200%;
    background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.06), transparent 60%);
    pointer-events: none;
  }

  .material-display {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s, transform 0.5s;
  }
  .material-display.show { opacity: 1; transform: translateY(0); }

  .material-display .mono { color: var(--accent); margin-bottom: 16px; display: block; }
  .material-display h3 {
    font-size: 72px;
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .material-display .tagline {
    font-family: 'Archivo Narrow', sans-serif;
    font-size: 22px;
    font-style: italic;
    color: var(--mute);
    margin-bottom: 40px;
  }
  .material-display .spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--rule);
  }
  .material-display .spec .mono { color: var(--mute); margin-bottom: 6px; }
  .material-display .spec .val { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }

  /* ====== ABOUT ====== */
  .about { padding: 100px 0; background: var(--bg); }
  .about-hero { padding: 0 28px 80px; border-bottom: 1px solid var(--rule); }
  .about-hero h2 {
    font-size: clamp(48px, 9vw, 160px);
    font-weight: 800;
    line-height: 0.88;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    max-width: 14ch;
    margin-top: 20px;
  }
  .about-hero h2 .outline { -webkit-text-stroke: 1.5px var(--ink); color: transparent; }
  .about-hero h2 .narrow { font-family: 'Archivo Narrow', sans-serif; font-style: italic; font-weight: 400; color: var(--accent); }

  /* Was 1fr 1fr for 2 maker cards; bumped to give the makers column more room
     now that there are 3 cards in it. Text column shrinks proportionally. */
  .about-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; padding: 80px 28px 0; align-items: start; }
  .about-text { font-size: 17px; line-height: 1.7; color: var(--ink); }
  .about-text p { margin-bottom: 20px; max-width: 50ch; }
  .about-text p:last-child { color: var(--mute); }

  .makers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  @media (max-width: 1100px) {
    .makers { grid-template-columns: repeat(2, 1fr); }
  }
  .maker {
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 28px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.4s, transform 0.4s;
  }
  .maker:hover { border-color: var(--accent); transform: translateY(-4px); }
  .maker .mono { color: var(--accent); }
  .maker-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--bg-3);
    border: 1px solid var(--rule);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    color: var(--accent);
  }
  .maker-name {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
  }
  .maker-role { font-size: 14px; color: var(--mute); margin-top: 6px; }

  /* ====== CONTACT ====== */
  .contact { background: var(--bg-2); border-top: 1px solid var(--rule); }
  .contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: start; }
  .contact-big {
    font-size: clamp(36px, 5vw, 72px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin-bottom: 40px;
  }
  .contact-big .accent { color: var(--accent); }
  .contact-info dl { display: grid; grid-template-columns: auto 1fr; gap: 16px 32px; max-width: 460px; }
  .contact-info dt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mute);
    padding-top: 4px;
  }
  .contact-info dd { font-size: 16px; font-weight: 500; }
  .contact-form { background: var(--bg); border: 1px solid var(--rule); border-radius: 6px; padding: 32px; }

  /* ====== STATUS BAR ====== */
  .status-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 90;
    background: var(--bottom-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--rule);
    padding: 10px 28px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .status-bar.show { transform: translateY(0); }
  .status-now { color: var(--mute); }
  .status-now span { color: var(--accent); }
  .status-now::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
    margin-right: 8px;
    animation: pulse 1.5s infinite;
    vertical-align: middle;
  }
  .status-progress {
    height: 2px;
    background: var(--rule);
    position: relative;
    overflow: hidden;
  }
  .status-progress::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent);
    width: 67%;
    animation: progress 8s ease-in-out infinite;
  }
  @keyframes progress {
    0% { width: 0; }
    50% { width: 67%; }
    100% { width: 100%; }
  }
  .status-eta { color: var(--ink); }

  /* ====== FOOTER ====== */
  footer { background: var(--bg); padding: 100px 28px 40px; border-top: 1px solid var(--rule); }

  .footer-top {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    padding-bottom: 80px;
    border-bottom: 1px solid var(--rule);
  }
  .footer-cta h3 {
    font-size: clamp(36px, 4.5vw, 64px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin-bottom: 32px;
  }
  .footer-cta h3 .accent { color: var(--accent); }
  .footer-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: var(--bg);
    padding: 16px 28px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 0.3s;
  }
  .footer-cta-btn:hover { background: var(--ink); color: var(--bg); }

  .footer-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    align-self: end;
  }
  .footer-col { display: flex; flex-direction: column; gap: 8px; }
  .footer-col .mono { color: var(--mute); margin-bottom: 12px; }
  .footer-col a {
    color: var(--ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 2px 0;
    transition: color 0.3s, transform 0.3s;
    width: fit-content;
  }
  .footer-col a:hover { color: var(--accent); transform: translateX(4px); }


  .footer-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
    align-items: center;
  }
  .footer-row .mono { color: var(--mute); }
  .footer-tagline { text-align: center; }
  .back-to-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    text-decoration: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 16px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    transition: border-color 0.3s, color 0.3s, transform 0.3s;
  }
  .back-to-top:hover { border-color: var(--accent); color: var(--accent); }
  .back-to-top:hover svg { transform: translateY(-3px); }
  .back-to-top svg { transition: transform 0.3s; }

  /* ====== RESPONSIVE ====== */
  @media (max-width: 1000px) {
    .materials-wrap { grid-template-columns: 1fr; }
    .material-detail { min-height: 360px; }
    .hero-bottom { grid-template-columns: 1fr 1fr; }
    .footer-top { grid-template-columns: 1fr; gap: 60px; }
    .footer-cols { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 760px) {
    body { cursor: auto; }
    nav { grid-template-columns: 1fr auto; padding: 14px 18px; }
    .nav-links, .nav-clock { display: none; }
    section, .hero-meta-row, .hero-headline, .hero-bottom, .about-hero, .about-grid, .catalog-section .section-header, .status-bar { padding-left: 18px; padding-right: 18px; }
    footer { padding-left: 18px; padding-right: 18px; }
    .config-grid, .contact-grid, .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-bottom { grid-template-columns: 1fr; gap: 20px; }
    .material-display h3 { font-size: 52px; }
    .makers { grid-template-columns: 1fr; }
    .footer-row { grid-template-columns: 1fr; gap: 24px; }
    .footer-tagline { text-align: left; }
    .back-to-top { justify-self: start; }
    .product-card { flex-basis: 280px; }
    .catalog-scroll { padding: 0 18px 32px; }
    .section-header { grid-template-columns: 1fr; gap: 20px; }
    .status-bar { display: none; }
  }

/* ---- Cart drawer + checkout (used by cart.js on every page) ---- */

  /* Drag affordance */
  .catalog-scroll { cursor: grab; user-select: none; }
  .catalog-scroll.dragging { cursor: grabbing; scroll-snap-type: none; }
  .catalog-scroll a { user-select: none; }

  /* Cart icon (matches product pages) */
  .cart-icon {
    width: auto; padding: 0 16px; height: 36px;
    border: 1px solid var(--rule); border-radius: 999px;
    background: transparent; color: var(--ink); cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.06em;
    transition: border-color 0.3s, color 0.3s;
  }
  .cart-icon:hover { border-color: var(--accent); color: var(--accent); }
  .cart-icon .count {
    background: var(--accent); color: var(--bg);
    padding: 1px 7px; border-radius: 999px;
    font-weight: 700; font-size: 10px;
    min-width: 18px; text-align: center;
  }

  /* Cart drawer */
  .cart-drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5); z-index: 500;
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s, visibility 0s 0.4s;
  }
  .cart-drawer-overlay.open { opacity: 1; visibility: visible; transition: opacity 0.4s; }
  .cart-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(420px, 100%); background: var(--bg);
    border-left: 1px solid var(--rule); z-index: 600;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex; flex-direction: column;
  }
  .cart-drawer.open { transform: translateX(0); }
  .cart-head {
    padding: 24px 28px; border-bottom: 1px solid var(--rule);
    display: flex; justify-content: space-between; align-items: center;
  }
  .cart-head h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; text-transform: uppercase; margin: 0; }
  .cart-close { background: transparent; border: none; color: var(--ink); cursor: pointer; font-size: 14px; font-family: inherit; }
  .cart-close:hover { color: var(--accent); }
  .cart-items { flex: 1; overflow-y: auto; padding: 24px 28px; }
  .cart-empty { color: var(--mute); font-style: italic; text-align: center; margin-top: 60px; }
  .cart-item {
    display: grid; grid-template-columns: 60px 1fr auto;
    gap: 16px; padding: 16px 0;
    border-bottom: 1px solid var(--rule); align-items: center;
  }
  .cart-item:last-child { border-bottom: none; }
  .cart-item-thumb {
    width: 60px; height: 60px; background: var(--bg-2);
    border: 1px solid var(--rule); border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
  }
  .cart-item-info { display: flex; flex-direction: column; gap: 2px; }
  .cart-item-name { font-weight: 600; font-size: 14px; }
  .cart-item-variant { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.06em; }
  .cart-item-price { font-weight: 600; font-size: 14px; }
  .cart-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
  .cart-item-x {
    background: transparent; border: 1px solid var(--rule); color: var(--mute);
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
    font-size: 18px; line-height: 1; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
  }
  .cart-item-x:hover { border-color: #ff6b3a; color: #ff6b3a; background: rgba(255, 107, 58, 0.08); }
  .cart-foot { border-top: 1px solid var(--rule); padding: 24px 28px; background: var(--bg-2); }
  .cart-totals { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
  .cart-row { display: flex; justify-content: space-between; font-size: 14px; }
  .cart-row .mono { color: var(--mute); }
  .cart-row.total {
    padding-top: 12px; margin-top: 4px;
    border-top: 1px solid var(--rule);
    font-size: 18px; font-weight: 700;
  }
  .checkout-btn {
    width: 100%; background: var(--accent); color: var(--bg);
    border: none; padding: 16px; border-radius: 999px;
    font-family: inherit; font-weight: 700; font-size: 13px;
    letter-spacing: 0.06em; text-transform: uppercase;
    cursor: pointer; transition: background 0.3s;
  }
  .checkout-btn:hover { background: #d5ff5e; }
  [data-theme="light"] .checkout-btn:hover { background: #ef6a30; }

  /* Checkout form (used by cart.js when user hits Checkout) */
  .checkout-form-wrap { padding: 4px 4px 8px; }
  .cart-back {
    background: none; border: none; color: var(--mute);
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    letter-spacing: 0.05em; text-transform: uppercase;
    cursor: pointer; padding: 0; margin: 0 0 16px;
  }
  .cart-back:hover { color: var(--ink); }
  .checkout-heading { margin: 0 0 6px; font-size: 22px; }
  .checkout-note { color: var(--mute); font-size: 12px; line-height: 1.5; margin: 0 0 18px; font-family: 'JetBrains Mono', monospace; }
  .ck-field { display: block; margin: 0 0 12px; }
  .ck-field > span {
    display: block; font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--mute); margin: 0 0 4px;
  }
  .ck-field > input {
    width: 100%; box-sizing: border-box;
    background: var(--bg-2); border: 1px solid var(--rule);
    color: var(--ink); padding: 10px 12px; border-radius: 4px;
    font-family: inherit; font-size: 14px;
  }
  .ck-field > input:focus { outline: none; border-color: var(--accent); }
  .ck-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .ck-summary {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 14px 0; margin: 12px 0 0;
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    font-size: 16px;
  }
  .ck-summary > strong { font-size: 18px; }
  .checkout-error {
    margin: 12px 0 0; padding: 10px 12px; border-radius: 4px;
    background: rgba(255, 80, 80, 0.1); border: 1px solid rgba(255, 80, 80, 0.4);
    color: #ff9090; font-size: 13px;
  }
  .checkout-success { padding: 24px 4px; text-align: center; }
  .checkout-success h3 { margin: 0 0 12px; font-size: 24px; color: var(--accent); }
  .checkout-success .success-id {
    font-family: 'JetBrains Mono', monospace; font-size: 14px;
    color: var(--ink); margin: 0 0 16px;
    padding: 8px 12px; background: var(--bg-2);
    border-radius: 4px; border: 1px solid var(--rule);
    display: inline-block;
  }

  /* Toast */
  .toast {
    position: fixed; bottom: 28px; left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--ink); color: var(--bg);
    padding: 14px 24px; border-radius: 999px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.08em;
    z-index: 700; transition: transform 0.4s;
    display: inline-flex; align-items: center; gap: 10px;
  }
  .toast.show { transform: translateX(-50%) translateY(0); }
  .toast::before {
    content: ''; width: 8px; height: 8px;
    background: var(--accent); border-radius: 50%;
  }

  /* ---- Teaser cards (front page, below the catalogue) ----
     Short signposts to Custom / Materials / Studio so those pages are
     discoverable without relying on the nav alone. */
  .teasers { padding: 100px 28px 40px; max-width: 1400px; margin: 0 auto; }
  .teaser-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
  }
  .teaser-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 32px 30px 28px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 8px;
    text-decoration: none;
    color: var(--ink);
    transition: border-color 0.3s, transform 0.3s, background 0.3s;
  }
  .teaser-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
  }
  .teaser-card .mono { color: var(--mute); }
  .teaser-card h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .teaser-card h3 em {
    font-style: italic;
    font-family: 'Archivo Narrow', sans-serif;
    font-weight: 400;
    color: var(--accent);
  }
  .teaser-card p {
    color: var(--mute);
    font-size: 14px;
    line-height: 1.55;
    flex: 1;
  }
  .teaser-go {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    margin-top: 6px;
    transition: transform 0.3s;
  }
  .teaser-card:hover .teaser-go { transform: translateX(4px); }

  /* Single-section pages need the fixed nav cleared manually — the front
     page gets that for free from the hero's own top spacing. Without this
     the section's background and top border slide under the translucent
     nav bar. */
  body.subpage { padding-top: var(--nav-h); }

  @media (max-width: 900px) {
    .teaser-grid { grid-template-columns: 1fr; }
    .teasers { padding: 60px 18px 20px; }
  }