:root{
    --ink:#15110c;
    --ink-raised:#1e1811;
    --ink-line: rgba(243,235,221,0.14);
    --parchment:#f3ebdd;
    --parchment-dim:#c3b8a4;
    --gold:#d9a441;
    --terracotta:#c1502e;
    --palm:#3e6e47;
    --focus:#d9a441;
    --gutter: clamp(20px, 5vw, 72px);
    --spine-w: 258px;
  }

  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} }

  body{
    margin:0;
    background: var(--ink);
    color: var(--parchment);
    font-family:'Karla', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height:1.6;
  }
  body::before{
    content:''; position:fixed; inset:0; pointer-events:none; z-index:200;
    border-top:4px solid var(--terracotta);
    border-bottom:4px solid var(--palm);
    box-shadow: inset 4px 0 0 var(--gold), inset -4px 0 0 var(--gold);
  }

  h1,h2,h3{
    font-family:'Fraunces', Georgia, serif;
    color: var(--parchment);
    margin:0;
    letter-spacing:-0.012em;
    text-wrap: balance;
  }

  a{ color:inherit; }
  img,.aspect{max-width:100%;}

  .wrap{ max-width: 1020px; padding-inline: var(--gutter); }

  .c-terracotta{ color: var(--terracotta); }
  .c-gold{ color: var(--gold); }
  .c-palm{ color: var(--palm); }

  .eyebrow{
    font-family:'Space Mono', 'Courier New', monospace;
    font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase;
    color: var(--gold); margin:0 0 14px;
  }

  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    font-family:'Space Mono', monospace; font-size:0.78rem; letter-spacing:0.06em;
    text-transform:uppercase; text-decoration:none;
    padding: 12px 22px; border-radius:2px; white-space:nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  }
  .btn-solid{ background: var(--gold); color:#1c1509; font-weight:700; }
  .btn-solid:hover, .btn-solid:focus-visible{ background:#e8b559; transform: translateY(-1px); }
  .btn-ghost{ border:1px solid var(--ink-line); color: var(--parchment); }
  .btn-ghost:hover, .btn-ghost:focus-visible{ border-color: var(--gold); color: var(--gold); }
  a:focus-visible, button:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }

  /* ---------- overall frame: fixed spine + scrolling content ---------- */
  .site{ display:flex; align-items:stretch; min-height:100vh; }

  .spine{
    width: var(--spine-w); flex:none;
    position:sticky; top:0; align-self:flex-start; height:100vh;
    display:flex; flex-direction:column; justify-content:space-between;
    padding: 34px 28px; border-right:1px solid var(--ink-line);
    background: var(--ink); z-index:40;
  }
  .spine-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .wordmark{
    display:flex; align-items:baseline; gap:8px;
    font-family:'Fraunces', serif; font-weight:400; font-size:1rem;
    text-decoration:none; white-space:nowrap;
  }
  .cart-link{
    display:flex; align-items:center; justify-content:center; flex:none;
    width:30px; height:30px; border-radius:50%; border:1px solid var(--ink-line);
    color: var(--parchment-dim); text-decoration:none;
  }
  .cart-link svg{ width:16px; height:16px; }
  .cart-link:hover, .cart-link:focus-visible{ color: var(--gold); border-color: var(--gold); }
  .wordmark .logo{
    display:block; width:124px; height:auto;
    mix-blend-mode:lighten;
  }

  .spine-nav{ display:flex; flex-direction:column; gap:20px; }
  .spine-nav a{
    display:flex; align-items:baseline; gap:12px; text-decoration:none;
    font-family:'Space Mono', monospace; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
    color: var(--parchment-dim); border-left:2px solid transparent; padding-left:10px; margin-left:-12px;
  }
  .spine-nav a:nth-child(1){ color: var(--terracotta); }
  .spine-nav a:nth-child(2){ color: var(--gold); }
  .spine-nav a:nth-child(3){ color: var(--palm); }
  .spine-nav a:nth-child(4){ color: var(--terracotta); }
  .spine-nav a:nth-child(5){ color: var(--gold); }
  .spine-nav a .nav-no{ font-size:0.72rem; }
  .spine-nav a:nth-child(1) .nav-no{ color: var(--terracotta); }
  .spine-nav a:nth-child(2) .nav-no{ color: var(--gold); }
  .spine-nav a:nth-child(3) .nav-no{ color: var(--palm); }
  .spine-nav a:nth-child(4) .nav-no{ color: var(--terracotta); }
  .spine-nav a:nth-child(5) .nav-no{ color: var(--gold); }
  .spine-nav a:hover, .spine-nav a:focus-visible{ color: var(--parchment); border-color: var(--gold); }
  .spine-cta{ width:100%; }

  .content{ flex:1; min-width:0; }

  @media (max-width:860px){
    .site{ flex-direction:column; }
    .spine{
      position:sticky; width:100%; height:auto; flex-direction:row;
      align-items:center; justify-content:space-between; gap:16px;
      padding: 14px var(--gutter); border-right:none; border-bottom:1px solid var(--ink-line);
    }
    .spine-top{ flex:none; }
    .wordmark .logo{ width:68px; }
    .spine-nav{
      flex:1 1 auto; min-width:0; flex-direction:row; gap: clamp(14px,3vw,26px);
      overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
    }
    .spine-nav::-webkit-scrollbar{ display:none; }
    .spine-nav a{
      flex:none; white-space:nowrap;
      border-left:none; padding-left:0; margin-left:0; border-bottom:1px solid transparent;
    }
    .spine-nav a .nav-no{ display:none; }
    .spine-cta{ display:none; }
    .spine::after{
      content:''; position:absolute; top:0; right:0; bottom:0; width:36px;
      background:linear-gradient(to right, transparent, var(--ink) 75%);
      pointer-events:none;
    }
  }

  /* ---------- section rhythm ---------- */
  section{ padding-block: clamp(52px,8vw,100px); }
  .groove{ height:1px; background-image: repeating-linear-gradient(90deg, var(--ink-line) 0 6px, transparent 6px 15px); }

  /* ---------- hero ---------- */
  .hero{ position:relative; overflow:hidden; max-width:1320px; padding-block: clamp(56px,8vw,110px) clamp(64px,9vw,116px); }
  .hero-copy{ position:relative; z-index:1; max-width:700px; }
  .brand-seal{ display:flex; align-items:baseline; gap:12px; margin:0 0 22px; }
  .seal-ii{ font-family:'Fraunces', serif; font-style:normal; font-weight:400; font-size:1.15rem; letter-spacing:0.02em; color: var(--parchment-dim); }
  .seal-legacy{ font-family:'Alex Brush', cursive; font-weight:400; font-size:clamp(2rem,4vw,2.9rem); color: var(--gold); }
  .tags{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin:0 0 20px;
    font-family:'Space Mono', monospace; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; }
  .tag-sep{ color: var(--ink-line); }
  .tag-red{ color: var(--terracotta); } .tag-green{ color: var(--palm); } .tag-gold{ color: var(--gold); }
  .hero-title{ font-size: clamp(2.4rem, 5.6vw, 4.4rem); font-weight:500; letter-spacing:-0.02em; line-height:1.06; }
  .hero-title .amp{ font-style:italic; font-weight:300; color: var(--parchment-dim); }
  .hero-title .cursive-legacy{ font-family:'Alex Brush', cursive; font-style:normal; font-weight:400; color: var(--gold); font-size:2.1em; margin-left:0.08em; }
  .hero-sub{ max-width:50ch; margin: 24px 0 32px; color: var(--parchment-dim); font-size: clamp(1rem, 1.3vw, 1.1rem); }
  .hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }


  /* ---------- manifesto ---------- */
  .manifesto h2{ font-size: clamp(1.6rem,3vw,2.2rem); font-weight:500; margin-bottom:18px; white-space:nowrap; }
  @media (max-width:480px){ .manifesto h2{ white-space:normal; } }
  .manifesto-inline-photo{
    display:block; width:100%; max-width:280px; height:auto;
    border-radius:2px; border:1px solid var(--ink-line); margin: 0 0 28px;
  }
  .quote-block{ margin-bottom:26px; }
  .quote-block:last-of-type{ margin-bottom:0; }
  .manifesto blockquote{
    margin: 0; font-family:'Fraunces', serif; font-style:italic; font-weight:400;
    font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height:1.42; color: var(--parchment); max-width: 46ch;
  }
  .manifesto blockquote::before{ content:"“"; color: var(--gold); }
  .manifesto blockquote::after{ content:"”"; color: var(--gold); }
  .manifesto-cite{
    display:block; margin-top:16px; font-family:'Space Mono', monospace; font-size:0.74rem;
    letter-spacing:0.08em; text-transform:uppercase; color: var(--gold);
  }
  .manifesto-lede{ margin:0 0 26px; max-width:52ch; color: var(--parchment); font-family:'Karla', 'Helvetica Neue', Arial, sans-serif; font-size:1.05rem; font-style:normal; }
  .manifesto-note{ margin-top:20px; max-width:52ch; color: var(--parchment-dim); }

  /* ---------- what we do: stacked rows ---------- */
  #what-we-do h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight:500; white-space:nowrap; margin-bottom:40px; }
  @media (max-width:480px){ #what-we-do h2{ white-space:normal; } }
  .pillars{ display:flex; flex-direction:column; }
  .pillar{ display:grid; grid-template-columns: 92px 1fr; gap: clamp(20px,4vw,48px); padding-block:30px; border-top:1px solid var(--ink-line); transition: transform .25s ease; }
  .pillar:hover{ transform: translateX(6px); }
  .pillar:first-child{ border-top:none; padding-top:0; }
  .pillar-mark{ font-family:'Fraunces', serif; font-weight:300; font-size:clamp(2rem,4.2vw,3rem); line-height:1; }
  .pillar h3{ font-size:1.25rem; font-weight:500; font-style:italic; margin-bottom:10px; }
  .pillar p{ color: var(--parchment-dim); margin:0; max-width:56ch; }
  @media (max-width:620px){ .pillar{ grid-template-columns:1fr; } .pillar-mark{ margin-bottom:4px; } }

  /* ---------- roster: horizontal crate ---------- */
  #roster h2{ font-size: clamp(1.6rem,3vw,2.2rem); font-weight:500; margin-bottom:14px; white-space:nowrap; }
  @media (max-width:480px){ #roster h2{ white-space:normal; } }
  .roster-lede{ color: var(--parchment-dim); max-width:58ch; margin:0 0 36px; }
  .roster-grid{
    display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:14px; scrollbar-color: var(--ink-line) transparent; scrollbar-width:thin;
  }
  .roster-grid::-webkit-scrollbar{ height:6px; }
  .roster-grid::-webkit-scrollbar-thumb{ background: var(--ink-line); border-radius:3px; }
  .roster-slot{
    flex:0 0 clamp(190px,24vw,230px); scroll-snap-align:start;
    border:1px dashed var(--ink-line); border-radius:2px; padding:24px 20px;
    display:flex; flex-direction:column; gap:8px; min-height:150px; justify-content:space-between;
    transition: transform .25s ease, border-style .15s ease, box-shadow .25s ease;
  }
  .roster-slot:hover{ border-style:solid; transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,0.35); }
  .roster-slot:nth-child(1){ border-color: var(--terracotta); }
  .roster-slot:nth-child(2){ border-color: var(--gold); }
  .roster-slot:nth-child(3){ border-color: var(--palm); }
  .roster-slot .slot-no{ font-family:'Space Mono', monospace; font-size:0.72rem; letter-spacing:0.08em; }
  .roster-slot:nth-child(1) .slot-no{ color: var(--terracotta); }
  .roster-slot:nth-child(2) .slot-no{ color: var(--gold); }
  .roster-slot:nth-child(3) .slot-no{ color: var(--palm); }
  .roster-slot .slot-status{ font-family:'Fraunces', serif; font-style:italic; color: var(--parchment-dim); font-size:1.02rem; }
  .roster-slot .slot-genre{ font-family:'Space Mono', monospace; font-size:0.7rem; color: var(--parchment-dim); letter-spacing:0.05em; text-transform:uppercase; }

  /* ---------- media ---------- */
  #media h2{ font-size: clamp(1.6rem,3vw,2.2rem); font-weight:500; margin-bottom:14px; white-space:nowrap; }
  @media (max-width:480px){ #media h2{ white-space:normal; } }
  .media-lede{ color: var(--parchment-dim); max-width:58ch; margin:0 0 34px; }
  .media-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; margin-bottom:26px; }
  .media-card{
    border:1px dashed var(--ink-line); border-radius:2px; padding:26px 22px;
    display:flex; flex-direction:column; gap:12px;
    transition: transform .25s ease, border-style .15s ease, box-shadow .25s ease;
  }
  .media-card:hover{ border-style:solid; transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,0.35); }
  .media-card-link{ color:inherit; text-decoration:none; cursor:pointer; }
  .media-card-link:focus-visible{ border-style:solid; transform:translateY(-4px); outline:2px solid var(--palm); outline-offset:3px; }
  .media-card:nth-child(1){ border-color: var(--terracotta); }
  .media-card:nth-child(2){ border-color: var(--gold); }
  .media-card:nth-child(3){ border-color: var(--palm); }
  .media-frame{ width:38px; height:38px; }
  .media-frame svg{ width:100%; height:100%; }
  .media-card:nth-child(1) .media-frame{ color: var(--terracotta); }
  .media-card:nth-child(2) .media-frame{ color: var(--gold); }
  .media-card:nth-child(3) .media-frame{ color: var(--palm); }
  .media-tag{ font-family:'Space Mono', monospace; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; }
  .media-card:nth-child(1) .media-tag{ color: var(--terracotta); }
  .media-card:nth-child(2) .media-tag{ color: var(--gold); }
  .media-card:nth-child(3) .media-tag{ color: var(--palm); }
  .media-card h3{ font-family:'Fraunces', serif; font-style:italic; font-weight:500; font-size:1.2rem; }
  .media-card p{ color: var(--parchment-dim); margin:0; }
  .yt-embed{ position:relative; aspect-ratio:16/9; max-width:880px; border:1px solid var(--ink-line); border-radius:2px; overflow:hidden; background:#000; }
  .yt-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  .link-arrow{ display:inline-flex; gap:8px; align-items:center; margin-top:20px; text-decoration:none;
    font-family:'Space Mono', monospace; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--gold); }
  .link-arrow:hover, .link-arrow:focus-visible{ color:#e8b559; }
  .notify-form{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; max-width:460px; }
  .notify-input{
    flex:1 1 220px; min-width:0; background: var(--ink-raised); color: var(--parchment);
    border:1px solid var(--ink-line); border-radius:2px; padding:12px 14px;
    font-family:'Karla', sans-serif; font-size:0.92rem;
  }
  .notify-input::placeholder{ color: var(--parchment-dim); }
  .notify-input:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-color: var(--gold); }
  .notify-btn{ border:none; cursor:pointer; }
  .notify-note{ margin-top:12px; font-size:0.85rem; color: var(--palm); }
  .notify-note.is-error{ color: var(--terracotta); }
  .notify-alt{ margin-top:10px; font-size:0.82rem; color: var(--parchment-dim); }
  .notify-alt a{ color: var(--gold); text-decoration:none; border-bottom:1px solid var(--ink-line); }
  .notify-alt a:hover, .notify-alt a:focus-visible{ border-color: var(--gold); }
  .roster-grid + .notify-form{ margin-top:30px; }

  /* ---------- scroll reveal ---------- */
  .reveal{ opacity:0; transform:translateY(18px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.is-visible{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
  }
  .visually-hidden{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  @media (max-width:760px){ .media-grid{ grid-template-columns:1fr; } }

  /* ---------- shop ---------- */
  #shop h2{ font-size: clamp(1.6rem,3vw,2.2rem); font-weight:500; margin-bottom:14px; white-space:nowrap; }
  @media (max-width:480px){ #shop h2{ white-space:normal; } }
  .shop-lede{ color: var(--parchment-dim); max-width:58ch; margin:0 0 34px; }
  .shop-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:20px; margin-bottom:26px; }
  .shop-card{
    border:1px dashed var(--ink-line); border-radius:2px; padding:28px 24px;
    display:flex; flex-direction:column; gap:12px;
    transition: transform .25s ease, border-style .15s ease, box-shadow .25s ease;
  }
  .shop-card:hover{ border-style:solid; transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,0.35); }
  .shop-card:nth-child(1){ border-color: var(--terracotta); }
  .shop-card:nth-child(2){ border-color: var(--palm); }
  .shop-frame{ width:40px; height:40px; }
  .shop-frame svg{ width:100%; height:100%; }
  .shop-card:nth-child(1) .shop-frame{ color: var(--terracotta); }
  .shop-card:nth-child(2) .shop-frame{ color: var(--palm); }
  .shop-tag{ font-family:'Space Mono', monospace; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; }
  .shop-card:nth-child(1) .shop-tag{ color: var(--terracotta); }
  .shop-card:nth-child(2) .shop-tag{ color: var(--palm); }
  .shop-card h3{ font-family:'Fraunces', serif; font-style:italic; font-weight:500; font-size:1.3rem; }
  .cursive-gold{ font-family:'Alex Brush', cursive; font-style:normal; font-weight:400; color: var(--gold); font-size:1.35em; }
  .cursive-gold-lg{ font-size:2.2em; }
  .shop-card p{ color: var(--parchment-dim); margin:0; }
  @media (max-width:640px){ .shop-grid{ grid-template-columns:1fr; } }

  /* ---------- contact: centered outro ---------- */
  #contact .wrap{ display:flex; flex-direction:column; align-items:center; text-align:center; }
  #contact h2{ font-size: clamp(1.9rem,4vw,2.7rem); font-weight:500; margin-bottom:16px; max-width:16ch; }
  #contact p{ color: var(--parchment-dim); max-width:52ch; margin-bottom:28px; }
  .contact-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }

  /* ---------- footer ---------- */
  footer{ border-top:1px solid var(--ink-line); padding-block: 36px; }
  .footer-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; align-items:center; }
  .footer-logo{ display:flex; align-items:center; gap:10px; }
  .footer-logo img{ width:26px; height:26px; border-radius:50%; object-fit:cover; border:1.5px solid var(--gold); }
  .footer-inner .wordmark-small{ font-family:'Fraunces', serif; font-size:1rem; }
  .footer-inner .wordmark-small .ii{ font-family:'Fraunces', serif; font-style:normal; font-weight:400; font-size:1em; letter-spacing:0.01em; color: var(--parchment-dim); }
  .footer-inner .wordmark-small em{ font-family:'Alex Brush', cursive; font-weight:400; font-size:1.55em; color: var(--gold); }
  footer p{ margin:0; color: var(--parchment-dim); font-size:0.82rem; }
  .spine-nav a[aria-current="page"]{ color: var(--parchment); border-color: var(--gold); }