/* ============ Brand tokens ============ */
  :root {
    --forest: #1f2419;      /* dark ground, from the hero leaves */
    --forest-2: #2a3020;
    --moss: #585830;        /* leaf in the KS mark */
    --sage: #c6c6a4;        /* wordmark */
    --lichen: #e6e6d4;      /* light ground */
    --paper: #f5f5ec;
    --bark: #6b4126;        /* K and S letters */
    --clay: #8a3a2e;        /* donate buttons: muted oxblood between bark and red */
    --clay-deep: #722f25;
    --ink: #20241a;

    --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --body: "Figtree", "Avenir Next", "Segoe UI", system-ui, sans-serif;

    --gutter: clamp(16px, 5vw, 64px);
    --maxw: 1240px;
    color-scheme: light;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--forest);
    color: var(--paper);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  h1, h2, h3 {
    font-family: var(--display);
    font-variation-settings: "SOFT" 60, "WONK" 0;
    font-weight: 500;
    line-height: 1.05;
    margin: 0;
    text-wrap: balance;
  }
  p { margin: 0; }
  .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
  .eyebrow {
    font-family: var(--body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  :focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; border-radius: 2px; }
  .skip {
    position: absolute; left: -999px; top: 8px; z-index: 50;
    background: var(--paper); color: var(--ink); padding: 8px 14px; border-radius: 4px;
  }
  .skip:focus { left: 8px; }

  /* ============ Buttons ============ */
  .btn {
    display: inline-flex; align-items: center; gap: 0.5em;
    font-family: var(--body); font-weight: 600; font-size: 0.95rem;
    text-decoration: none;
    padding: 0.8em 1.4em;
    border-radius: 999px;
    border: 1.5px solid transparent;
    transition: background-color .2s, color .2s, border-color .2s;
  }
  .btn-sage { background: var(--sage); color: var(--ink); }
  .btn-sage:hover { background: var(--paper); }
  .btn-donate { background: var(--clay); color: #f7efe6; box-shadow: 0 8px 20px -12px rgba(60,18,12,.7); }
  .btn-donate:hover { background: var(--clay-deep); color: #fff8f0; }
  .nav .btn-donate[aria-current="page"] { box-shadow: inset 0 0 0 1.5px rgba(247,239,230,.35); }
  .btn-line { border-color: rgba(245,245,236,.55); color: var(--paper); }
  .btn-line:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

  /* ============ Header ============ */
  .site-header {
    position: absolute; inset: 0 0 auto 0; z-index: 10;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .site-header .wrap {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-block: 22px;
  }
  .logo { flex: none; }
  .logo img.wordmark { width: clamp(150px, 16vw, 200px); height: auto; }
  .logo img.mark { width: 44px; height: auto; display: none; }
  .nav { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 28px); }
  .nav-links { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 28px); }
  .menu-toggle {
    display: none; position: relative;
    width: 46px; height: 46px; flex: none;
    background: none; border: 0; border-radius: 6px; cursor: pointer;
  }
  .menu-toggle span {
    position: absolute; left: 9px; right: 9px; height: 2.4px; border-radius: 2px; background: var(--paper);
    transition: transform .2s ease, opacity .2s ease;
  }
  .menu-toggle span:nth-child(1) { top: 13px; }
  .menu-toggle span:nth-child(2) { top: 22px; }
  .menu-toggle span:nth-child(3) { top: 31px; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  .nav a.text-link {
    text-decoration: none; font-weight: 500; font-size: 0.95rem;
    color: var(--paper);
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
  }
  .nav a.text-link:hover { border-bottom-color: var(--sage); }
  .nav .btn { padding: 0.6em 1.15em; font-size: 0.88rem; }

  /* ============ Hero ============ */
  .hero {
    position: relative;
    background: var(--forest) url("assets/img/hero-leaves.jpg") center / cover no-repeat;
    isolation: isolate;
  }
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(90deg, rgba(31,36,25,.72) 0%, rgba(31,36,25,.45) 48%, rgba(31,36,25,.15) 100%),
      linear-gradient(180deg, rgba(31,36,25,.55) 0%, rgba(31,36,25,0) 22%);
  }
  .hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: clamp(32px, 6vw, 88px);
    padding-block: clamp(120px, 16vw, 180px) clamp(64px, 9vw, 120px);
  }
  .hero h1 {
    font-size: clamp(3.2rem, 8.2vw, 7rem);
    font-weight: 450;
    letter-spacing: -0.015em;
    line-height: 0.95;
    color: var(--paper);
  }
  .hero h1 em {
    display: block;
    font-style: italic;
    font-weight: 400;
    color: var(--sage);
  }
  .hero .lead {
    margin-top: clamp(22px, 3vw, 32px);
    max-width: 34ch;
    font-family: var(--display);
    font-variation-settings: "SOFT" 60, "WONK" 0;
    font-size: clamp(1.2rem, 1.9vw, 1.5rem);
    font-weight: 350;
    line-height: 1.4;
    color: #ecebdf;
  }
  .hero .lead strong { font-weight: 550; color: var(--paper); }
  .hero .actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

  .portrait { margin: 0; justify-self: end; width: min(100%, 400px); }
  .portrait .frame {
    border-radius: 200px 200px 6px 6px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    max-width: 100%;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
  }
  .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  .portrait figcaption {
    margin-top: 16px;
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    color: #deddcc;
    font-size: 0.92rem;
  }
  .portrait .no {
    font-family: var(--display);
    font-variation-settings: "SOFT" 60, "WONK" 0;
    font-style: italic;
    font-size: 1.35rem;
    color: var(--sage);
    font-variant-numeric: lining-nums;
  }

  /* ============ Mission ============ */
  .mission { background: var(--lichen); color: var(--ink); overflow: hidden; }
  .marquee {
    padding-block: clamp(8px, 1.2vw, 12px);
    overflow: hidden;
    white-space: nowrap;
  }
  .marquee-track {
    display: inline-flex;
    align-items: center;
    animation: drift 40s linear infinite;
  }
  .marquee span {
    display: inline-flex;
    align-items: center;
    font-family: var(--display);
    font-variation-settings: "SOFT" 100, "WONK" 0;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 3.2vw, 2.5rem);
    line-height: 1.15;
    color: var(--bark);
    padding-right: 0.6em;
  }
  .marquee span::after {
    content: "";
    flex: none;
    width: 0.62em; height: 1em;
    margin-left: 0.6em;
    background: url("../assets/brand/olive-branch.png") center / contain no-repeat;
  }
  @keyframes drift { to { transform: translateX(-50%); } }

  .mission .wrap { padding-block: clamp(56px, 8vw, 104px); }
  .mission-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(24px, 5vw, 72px);
    align-items: end;
  }
  .mission-head .eyebrow { color: var(--moss); margin-bottom: 14px; }
  .mission h2 {
    font-size: clamp(2.3rem, 4.8vw, 3.8rem);
    color: var(--bark);
    letter-spacing: -0.01em;
  }
  .mission-head p:not(.eyebrow) {
    font-family: var(--display);
    font-variation-settings: "SOFT" 60, "WONK" 0;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 350;
    line-height: 1.4;
    max-width: 30ch;
  }
  .steps {
    list-style: none; margin: clamp(48px, 7vw, 88px) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 56px);
    counter-reset: step;
  }
  .steps li { border-top: 1.5px solid var(--moss); padding-top: 22px; }
  .steps .num {
    font-family: var(--display);
    font-variation-settings: "SOFT" 100, "WONK" 0;
    font-size: 3.4rem;
    line-height: 1;
    font-weight: 300;
    color: var(--moss);
    font-variant-numeric: lining-nums;
  }
  .steps h3 {
    margin-top: 18px;
    font-size: 1.55rem;
    color: var(--ink);
  }
  .steps p { margin-top: 12px; color: #3b3f33; max-width: 36ch; }

  /* ============ Project / Give ============ */
  .project { background: var(--forest); }
  .project .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    padding-block: clamp(64px, 9vw, 120px);
  }
  .project figure { margin: 0; }
  .project .photo {
    border-radius: 6px; overflow: hidden;
    aspect-ratio: 4 / 5; max-width: 100%;
  }
  .project .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; }
  .project figcaption { margin-top: 12px; font-size: 0.85rem; color: #a9ab92; }
  .project .eyebrow { color: var(--sage); }
  .project h2 {
    margin-top: 16px;
    font-size: clamp(2.5rem, 5vw, 4.1rem);
    color: var(--paper);
    letter-spacing: -0.01em;
  }
  .project h2 em { display: block; font-style: italic; font-weight: 400; color: var(--sage); }
  .project .body { margin-top: 22px; color: #dcdccb; max-width: 44ch; font-size: 1.05rem; }

  .give {
    margin-top: 36px;
    background: var(--forest-2);
    border: 1px solid rgba(198,198,164,.22);
    border-radius: 8px;
    padding: clamp(22px, 3vw, 32px);
    display: grid; gap: 14px;
  }
  .give-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .give h3 { font-size: 1.7rem; color: var(--paper); }
  .status {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--sage);
    border: 1px solid rgba(198,198,164,.4);
    border-radius: 999px; padding: 5px 12px;
  }
  .status::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sage);
    animation: pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse { 50% { opacity: .3; } }
  .promise {
    font-family: var(--display);
    font-variation-settings: "SOFT" 60, "WONK" 0;
    font-style: italic;
    font-size: 1.3rem;
    color: var(--sage);
    line-height: 1.3;
  }
  .give .note { color: #cfcfbd; font-size: 0.97rem; }
  .give .note a { color: var(--paper); text-underline-offset: 3px; }
  .fine { font-size: 0.8rem; color: #9fa28a; line-height: 1.5; padding-top: 12px; border-top: 1px solid rgba(198,198,164,.15); }

  /* ============ Footer ============ */
  .site-footer { background: var(--paper); color: var(--ink); }
  .site-footer .wrap {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px));
  }
  .site-footer .mark { width: 64px; height: auto; }
  .foot-meta { display: flex; gap: 8px 32px; flex-wrap: wrap; align-items: center; font-size: 0.95rem; }
  .foot-meta a { color: var(--bark); font-weight: 500; text-underline-offset: 3px; }
  .foot-meta .ein { color: #5d6152; font-variant-numeric: tabular-nums; }

  /* ============ Responsive ============ */
  @media (max-width: 900px) {
    .hero .wrap, .project .wrap, .mission-head { grid-template-columns: minmax(0, 1fr); }
    .portrait { justify-self: start; width: min(100%, 340px); }
    .steps { grid-template-columns: minmax(0, 1fr); }
    .project .photo { aspect-ratio: 4 / 3; }
    .hero::before {
      background: linear-gradient(180deg, rgba(31,36,25,.7) 0%, rgba(31,36,25,.5) 60%, rgba(31,36,25,.35) 100%);
    }
  }
  @media (max-width: 560px) {
    .logo img.wordmark { display: none; }
    .logo img.mark { display: block; }
    .nav .btn { padding: 0.6em 0.9em; font-size: 0.8rem; white-space: nowrap; }
  }

  /* ============ Shared: nav state, page heroes ============ */
  .nav a[aria-current="page"].text-link { border-bottom-color: var(--sage); }
  .page-hero {
    position: relative;
    isolation: isolate;
    background-color: var(--forest);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .page-hero .wrap { padding-block: clamp(140px, 17vw, 200px) clamp(64px, 9vw, 112px); }
  .page-hero h1 {
    font-size: clamp(3rem, 9vw, 7.5rem);
    font-weight: 400;
    font-style: italic;
    font-variation-settings: "SOFT" 100, "WONK" 0;
    letter-spacing: -0.015em;
    line-height: 0.95;
    color: var(--paper);
    text-align: center;
  }

  /* ============ Our Mission ============ */
  .hero-mission { background-image: url("../assets/img/texture-berries-dark.jpg"); }
  .hero-mission::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: url("../assets/brand/spiral-line.png") right center / auto 110% no-repeat;
    pointer-events: none;
  }
  .hero-mission h1 { color: var(--sage); font-size: clamp(2.8rem, 7vw, 6rem); }
  .goals { margin-top: clamp(72px, 11vw, 150px); }
  .goals h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--paper); }
  .goals .steps { margin-top: 36px; }
  .goals .steps li { border-top-color: rgba(198,198,164,.45); }
  .goals .steps .num { color: var(--sage); font-size: 1rem; font-family: var(--body); font-weight: 600; letter-spacing: 0.16em; }
  .goals .steps h3 { color: var(--paper); margin-top: 12px; }
  .goals .steps p { color: #d6d6c4; }
  .goals .steps p a { color: var(--sage); text-underline-offset: 3px; }

  .began { background: var(--lichen); color: var(--ink); }
  .began .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 88px);
    align-items: center;
    padding-block: clamp(64px, 9vw, 120px);
  }
  .began h2 { font-size: clamp(2.3rem, 4.8vw, 3.8rem); color: var(--bark); }
  .began .story { margin-top: 24px; display: grid; gap: 1em; max-width: 52ch; font-size: 1.06rem; color: #33372b; }
  .began .story .pull {
    font-family: var(--display);
    font-variation-settings: "SOFT" 60, "WONK" 0;
    font-style: italic;
    font-size: 1.45rem;
    line-height: 1.3;
    color: var(--moss);
  }
  .began-art {
    position: relative;
    margin: 0;
    background: var(--forest) url("../assets/img/texture-leaves-dark.jpg") center / cover no-repeat;
    border-radius: 6px;
    padding: clamp(20px, 4vw, 44px);
  }
  .began-art img { width: 100%; height: auto; border-radius: 3px; filter: sepia(.15); }
  .began-art figcaption { margin-top: 12px; font-size: 0.85rem; color: #c9cab5; }

  /* ============ Donate ============ */
  .hero-donate { background-image: url("../assets/img/texture-seedpods-dark.jpg"); background-position: center 30%; }
  .hero-donate::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(31,36,25,.55) 0%, rgba(31,36,25,.25) 45%, rgba(31,36,25,.6) 100%);
  }
  .hero-donate .wrap { text-align: center; }
  .hero-donate .eyebrow { color: var(--sage); margin-bottom: 18px; }
  .hero-donate .sub {
    margin: 26px auto 0; max-width: 36ch;
    font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 0;
    font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 350; line-height: 1.4; color: #ecebdf;
  }
  .hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .hero-status { margin-top: 22px; }

  .pull {
    font-family: var(--display);
    font-variation-settings: "SOFT" 60, "WONK" 0;
    font-style: italic;
    font-size: 1.45rem;
    line-height: 1.3;
    color: var(--moss);
  }

  .text-arrow { color: var(--sage); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(198,198,164,.5); padding-bottom: 2px; }
  .text-arrow:hover { color: var(--paper); border-bottom-color: var(--paper); }
  .give-link { color: var(--paper); font-weight: 500; text-underline-offset: 3px; }
  .give-link:hover { color: var(--sage); }

  .give-section {
    background: var(--moss) url("../assets/img/texture-leaf-olive.jpg") center / cover no-repeat;
  }
  .give-section .wrap { padding-block: clamp(64px, 9vw, 120px); display: grid; justify-items: center; }
  .give-feature {
    margin-top: 0;
    width: min(100%, 620px);
    background: rgba(31,36,25,.94);
    border-color: rgba(198,198,164,.3);
    padding: clamp(26px, 4.5vw, 48px);
    gap: 18px;
    box-shadow: 0 30px 70px -30px rgba(0,0,0,.55);
  }
  .give-feature .status { justify-self: start; }
  .give-feature h2 { font-size: clamp(2.3rem, 5vw, 3.4rem); color: var(--paper); }
  .give-lead {
    font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 0;
    font-size: 1.3rem; font-weight: 350; line-height: 1.4; color: #ecebdf;
  }
  .expect { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 0; }
  .expect li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
    padding-block: 12px; border-top: 1px solid rgba(198,198,164,.18);
  }
  .expect li:last-child { border-bottom: 1px solid rgba(198,198,164,.18); }
  .expect strong { color: var(--paper); font-weight: 600; }
  .expect span { color: #bfc1aa; font-size: 0.95rem; }

  /* ============ How 100% is possible ============ */
  .how100 { background: var(--lichen); color: var(--ink); }
  .how100 .wrap { padding-block: clamp(64px, 9vw, 120px); }
  .how100-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(24px, 5vw, 72px);
    align-items: end;
  }
  .how100 .eyebrow { color: var(--moss); margin-bottom: 14px; }
  .how100 h2 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); color: var(--bark); letter-spacing: -0.01em; }
  .how100-copy { display: grid; gap: 1em; max-width: 50ch; font-size: 1.06rem; color: #33372b; }

  .flow { margin-top: clamp(40px, 6vw, 72px); display: grid; gap: 16px; }
  .flow-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(90px, 0.9fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 0;
  }
  .flow-src, .flow-dest { border-radius: 8px; padding: 18px 22px; }
  .flow-src { background: var(--paper); border: 1.5px solid var(--bark); }
  .flow-tag { font-weight: 600; color: var(--bark); line-height: 1.35; display: block; }
  .flow-dest { background: var(--forest); color: var(--paper); display: grid; gap: 4px; }
  .flow-dest strong { font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 0; font-weight: 500; font-size: 1.4rem; }
  .flow-dest small { font-size: 0.92rem; color: #cfd0bc; }
  .flow-row-alt .flow-src { border-color: var(--moss); border-style: dashed; }
  .flow-row-alt .flow-tag { color: var(--moss); }
  .flow-row-alt .flow-dest { background: var(--moss); }
  .flow-row-alt .flow-dest small { color: #e2e2cf; }
  .flow-line { position: relative; height: 2px; background: var(--bark); margin-inline: 10px; }
  .flow-row-alt .flow-line { background: var(--moss); }
  .flow-line::after {
    content: ""; position: absolute; right: -2px; top: 50%;
    width: 10px; height: 10px;
    border-top: 2px solid; border-right: 2px solid;
    border-color: inherit;
    color: var(--bark);
    border-top-color: var(--bark); border-right-color: var(--bark);
    transform: translateY(-50%) rotate(45deg);
  }
  .flow-row-alt .flow-line::after { border-top-color: var(--moss); border-right-color: var(--moss); }
  .flow-line span {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    background: var(--lichen); padding: 0 10px;
    font-family: var(--display); font-variation-settings: "SOFT" 100, "WONK" 0;
    font-size: 1.5rem; font-weight: 500; color: var(--bark);
    font-variant-numeric: lining-nums tabular-nums;
  }
  .flow-row-alt .flow-line span { color: var(--moss); }
  .how100-foot { margin-top: clamp(36px, 5vw, 56px); display: grid; gap: 10px; max-width: 60ch; }
  .how100-foot a { color: var(--bark); font-weight: 500; text-underline-offset: 3px; }

  @media (max-width: 900px) {
    .began .wrap, .how100-head, .where-head { grid-template-columns: minmax(0, 1fr); }
    .flow-row { grid-template-columns: minmax(0, 1fr); }
    .flow-line { height: 44px; width: 2px; margin: 0 0 0 28px; }
    .flow-line::after { right: auto; left: 50%; top: auto; bottom: -2px; transform: translateX(-50%) rotate(135deg); }
    .flow-line span { left: 18px; transform: translateY(-50%); padding: 0; font-size: 1.25rem; }
    .hero-mission::after { background-size: auto 70%; background-position: right bottom; opacity: .8; }
  }

  /* ============ Kind Stranger cards (shared) ============ */
  .ks-card {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    max-width: 100%;
    container-type: inline-size;
    perspective: 1600px;
    cursor: pointer;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
  }
  .ks-card:focus-visible { outline: 2px solid var(--clay); outline-offset: 6px; }
  .ks-inner {
    position: absolute; inset: 0;
    transform-style: preserve-3d;
    transition: transform .8s cubic-bezier(.45,.05,.2,1);
  }
  .ks-card.is-flipped .ks-inner { transform: rotateY(180deg); }
  .ks-face {
    position: absolute; inset: 0;
    border-radius: 10px;
    background: var(--forest) url("../assets/img/texture-leaves-dark.jpg") center / cover no-repeat;
    box-shadow: 0 2px 4px rgba(20,24,14,.2), 0 26px 50px -18px rgba(20,24,14,.6);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
  }
  .ks-front {
    display: grid; grid-template-rows: minmax(0, 1fr) auto;
    gap: 4.5cqi; padding: 5cqi 5cqi 5.5cqi;
  }
  .ks-photo { border-radius: 50cqi 50cqi 4px 4px; overflow: hidden; min-height: 0; background: #1c2117; }
  .ks-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  .ks-cap { display: grid; gap: .6cqi; padding-inline: 1cqi; padding-right: 20cqi; }
  .ks-no {
    font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 0;
    font-style: italic; font-size: clamp(11px, 4.6cqi, 17px); color: var(--sage);
    font-variant-numeric: lining-nums;
  }
  .ks-name {
    font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 0;
    font-size: clamp(15px, 7.6cqi, 28px); line-height: 1.1; color: var(--paper);
  }
  .ks-place { font-size: clamp(10.5px, 4cqi, 14.5px); color: #c9cab5; }
  .ks-turn {
    position: absolute; right: 5cqi; bottom: 5.5cqi;
    font: 600 clamp(9px, 3.3cqi, 12px)/1 var(--body); letter-spacing: .08em; text-transform: uppercase;
    color: var(--forest); background: var(--sage);
    padding: 1.8cqi 2.6cqi; border-radius: 999px;
    transition: background-color .2s;
  }
  .ks-card:hover .ks-turn { background: var(--paper); }
  .ks-sample {
    display: none;
    position: absolute; top: 7cqi; left: 7cqi;
    font: 600 clamp(8px, 3cqi, 11px)/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
    color: var(--paper); background: rgba(138,58,46,.9); padding: 1.6cqi 2.4cqi; border-radius: 3px;
  }
  .ks-card.is-sample .ks-sample { display: block; }
  .ks-back {
    transform: rotateY(180deg);
    display: flex; flex-direction: column; gap: 1.4cqi;
    padding: 8cqi 7cqi 6cqi;
    background: linear-gradient(rgba(31,36,25,.88), rgba(31,36,25,.94)), var(--forest) url("../assets/img/texture-leaves-dark.jpg") center / cover no-repeat;
  }
  .ks-back .ks-name { font-size: clamp(18px, 9cqi, 34px); }
  .ks-story {
    margin-top: 4cqi; padding-top: 4cqi;
    border-top: 1px solid rgba(198,198,164,.25);
    font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 0;
    font-size: clamp(12px, 5.2cqi, 19px); line-height: 1.45; font-weight: 350;
    color: #ecebdf;
    overflow: auto; min-height: 0; flex: 1;
  }
  .ks-return {
    font: 600 clamp(9px, 3.2cqi, 12px)/1 var(--body); letter-spacing: .12em; text-transform: uppercase;
    color: var(--sage); opacity: .8;
  }

  /* Homepage deck: shuffles like a stack of cards */
  .ks-deck-area { justify-self: end; width: min(100%, 360px); display: grid; gap: 22px; justify-items: center; }
  .ks-deck { position: relative; width: 100%; aspect-ratio: 2 / 3; }
  .ks-deck > .ks-card { position: absolute; inset: 0; transition: transform .45s ease; }
  .ks-deck .is-top { transform: rotate(-1.5deg); z-index: 3; }
  .ks-deck .is-under { transform: translate(14px, 10px) rotate(3.5deg); z-index: 2; }
  .ks-deck .is-rising { transform: rotate(-1.5deg); z-index: 2; transition: transform .45s ease .35s; }
  .ks-deck .is-leaving { animation: ks-shuffle-out .9s cubic-bezier(.5,0,.3,1) forwards; }
  .ks-deck .is-top:not(.is-leaving):hover { transform: rotate(-1.5deg) translateY(-6px); }
  .ks-deck .is-fading { opacity: 0; transition: opacity .25s ease; }
  .ks-deck-back {
    position: absolute; inset: 0; z-index: 1; border-radius: 10px;
    background: var(--forest-2) url("../assets/img/texture-leaves-dark.jpg") center / cover no-repeat;
    transform: translate(-12px, 12px) rotate(-5deg);
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.6);
    opacity: .85;
  }
  @keyframes ks-shuffle-out {
    0%   { transform: rotate(-1.5deg); z-index: 3; }
    45%  { transform: translate(68%, -6%) rotate(11deg); z-index: 3; }
    55%  { transform: translate(68%, -6%) rotate(11deg); z-index: 1; }
    100% { transform: translate(14px, 10px) rotate(3.5deg); z-index: 1; }
  }
  .ks-deck-hint {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
    font-size: 0.92rem; color: #deddcc;
  }
  .ks-deck-hint strong { font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 0; font-style: italic; font-weight: 400; color: var(--sage); font-size: 1.1rem; }
  .ks-pause {
    font: 600 0.72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
    color: var(--sage); background: none; border: 1px solid rgba(198,198,164,.45);
    border-radius: 999px; padding: 7px 13px; cursor: pointer;
  }
  .ks-pause:hover { background: rgba(198,198,164,.12); }
  .hero { overflow-x: clip; }

  /* Donate: Samoury's card over the sunset photo */
  .project .photo-stack { position: relative; }
  .project-card {
    position: absolute; left: -28px; bottom: -44px; z-index: 2;
    width: clamp(170px, 42%, 240px);
    transform: rotate(-3deg);
    transition: transform .3s ease;
  }
  .project-card:hover { transform: rotate(-3deg) translateY(-6px); }
  .project .photo-stack + figcaption { margin-top: 60px; padding-left: calc(clamp(170px, 42%, 240px) - 12px); }
  .project .actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

  /* Donate: where your donation goes */
  .give-section .wrap { padding-block: clamp(64px, 9vw, 120px) 0; }
  .give-feature { position: relative; z-index: 1; margin-bottom: -72px; }
  .where { background: var(--lichen); color: var(--ink); }
  .where .wrap { padding-block: clamp(56px, 8vw, 104px) clamp(64px, 9vw, 120px); }
  .where .how100-copy { margin-top: 20px; }
  .where-head {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(24px, 5vw, 72px); align-items: end;
  }
  .where .eyebrow { color: var(--moss); margin-bottom: 14px; }
  .where h2 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); color: var(--bark); letter-spacing: -0.01em; }
  .where .steps { margin-top: clamp(40px, 6vw, 64px); }
  .where h3.sub-head { margin-top: clamp(56px, 8vw, 96px); font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--bark); }
  .where .how100-copy { margin-top: 16px; }

  /* ============ Map page ============ */
  .hero-map { background-image: url("../assets/img/texture-berries-dark.jpg"); }
  .hero-map::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(31,36,25,.35); }
  .hero-map .wrap { text-align: center; padding-block: clamp(130px, 15vw, 180px) clamp(48px, 6vw, 72px); }
  .hero-map .eyebrow { color: var(--sage); margin-bottom: 16px; }
  .hero-map .sub {
    margin: 22px auto 0; max-width: 40ch;
    font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 0;
    font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 350; line-height: 1.4; color: #ecebdf;
  }
  .map-section { background: var(--lichen); color: var(--ink); }
  .map-section .wrap { padding-block: clamp(40px, 6vw, 72px) clamp(64px, 9vw, 112px); max-width: 1320px; }
  .map-frame {
    position: relative;
    border-radius: 6px;
    padding: clamp(8px, 1.4vw, 16px);
    background: #efe9d3;
    box-shadow: 0 1px 0 rgba(107,65,38,.15), 0 30px 60px -30px rgba(31,36,25,.45);
    transform: rotate(-.3deg);
  }
  .map-scroll { overflow-x: auto; border-radius: 3px; }
  .map-swipe { display: none; margin: 10px 0 0; font-size: .85rem; color: #5d6152; text-align: center; }
  .route-map { display: block; width: 100%; min-width: 640px; height: auto; border: 1px solid rgba(107,65,38,.35); }
  .ml-sea-fill { fill: #ebe5ce; }
  .ml-grid { fill: none; stroke: var(--moss); stroke-opacity: .13; stroke-width: .8; }
  .ml-ripples path { fill: none; stroke: var(--moss); stroke-linejoin: round; }
  .ml-ripples .r3 { stroke-width: 18; stroke-opacity: .05; }
  .ml-ripples .r2 { stroke-width: 11; stroke-opacity: .07; }
  .ml-ripples .r1 { stroke-width: 5; stroke-opacity: .12; }
  .r1dots circle { fill: none; stroke: var(--moss); stroke-opacity: .12; stroke-width: 5; }
  .ml-land { fill: #d6d1b1; stroke: var(--bark); stroke-width: 1.1; stroke-opacity: .7; }
  .ml-lake { fill: #ebe5ce; stroke: var(--bark); stroke-width: .8; stroke-opacity: .55; }
  .ml-islands circle { fill: #d6d1b1; stroke: var(--bark); stroke-width: .8; stroke-opacity: .7; }
  .ml-labels text { font-family: var(--display); fill: var(--bark); }
  .ml-ocean { font-size: 18px; letter-spacing: .4em; font-style: italic; fill-opacity: .55; text-anchor: middle; }
  .ml-sea { font-size: 13px; font-style: italic; fill-opacity: .55; text-anchor: middle; }
  .ml-labels .ml-cont { font-size: 13px; letter-spacing: .35em; fill-opacity: .5; text-anchor: middle; font-weight: 600; }
  .ml-compass circle { fill: none; stroke: var(--bark); stroke-opacity: .5; }
  .ml-compass .needle { fill: var(--bark); fill-opacity: .55; }
  .ml-compass .needle2 { fill: var(--moss); fill-opacity: .4; }
  .ml-compass text { font: 600 12px var(--display); fill: var(--bark); }
  .leg { fill: none; stroke: var(--bark); stroke-width: 2.2; stroke-linecap: round; }
  .leg-car { stroke-dasharray: 7 6; }
  .leg-sail { stroke: #3f5a6b; stroke-dasharray: 1 7; stroke-width: 2.6; }
  .leg-train { stroke: var(--ink); stroke-width: 1.6; }
  .leg-train-ties { stroke: var(--ink); stroke-width: 7; stroke-dasharray: 1.4 5; stroke-linecap: butt; stroke-opacity: .75; }
  .route-end { fill: var(--bark); }
  .pin { cursor: pointer; outline: none; }
  .pin-hit { fill: transparent; }
  .pin-dot {
    fill: var(--clay); stroke: #f5f1e2; stroke-width: 2.5;
    transition: r .15s ease, fill .15s ease;
    filter: drop-shadow(0 1.5px 1.5px rgba(31,36,25,.35));
  }
  .pin.is-sample .pin-dot { fill: #a0655a; }
  .pin:hover .pin-dot, .pin.is-active .pin-dot, .pin.is-current .pin-dot, .pin:focus-visible .pin-dot { r: 9.5; fill: var(--clay-deep); }
  .pin:focus-visible .pin-dot { stroke: var(--ink); }

  .map-legend {
    margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center;
    font-size: .92rem; color: #4a4e40;
  }
  .map-legend .key { display: inline-flex; align-items: center; gap: 10px; }
  .map-legend svg { flex: none; }
  .map-legend .hint { margin-left: auto; font-family: var(--display); font-style: italic; font-size: 1.05rem; color: var(--bark); }

  .ks-list-wrap { margin-top: clamp(48px, 7vw, 80px); }
  .ks-list-wrap h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--bark); }
  .ks-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 28px; }
  .ks-list button {
    width: 100%; text-align: left; cursor: pointer;
    display: grid; grid-template-columns: 3.2em 1fr; column-gap: 8px;
    background: none; border: 0; border-top: 1px solid rgba(88,88,48,.25);
    padding: 12px 0; font: inherit; color: var(--ink);
  }
  .ks-list button:hover .l-name { color: var(--clay); }
  .ks-list .l-no { grid-row: span 2; font-family: var(--display); font-style: italic; color: var(--moss); font-variant-numeric: lining-nums tabular-nums; }
  .ks-list .l-name { font-weight: 600; }
  .ks-list .l-place { font-size: .88rem; color: #5d6152; }

  .ks-dialog {
    border: 0; padding: 0; background: transparent; color: var(--paper);
    width: min(100vw - 32px, 440px); max-height: 100vh; overflow: visible;
  }
  .ks-dialog::backdrop { background: rgba(20,24,14,.72); backdrop-filter: blur(3px); }
  .ks-dialog-inner { display: grid; gap: 16px; justify-items: center; padding-block: 12px; }
  .ks-dialog-card { width: min(100%, 360px, calc((100vh - 200px) * 2 / 3)); }
  .ks-dialog-hint { font-family: var(--display); font-style: italic; color: var(--sage); font-size: 1.05rem; text-align: center; }
  .ks-dialog-nav { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
  .ks-dialog-nav button, .ks-close {
    font: 600 .8rem/1 var(--body); letter-spacing: .06em;
    color: var(--paper); background: rgba(31,36,25,.8); border: 1px solid rgba(198,198,164,.4);
    border-radius: 999px; padding: 10px 16px; cursor: pointer;
  }
  .ks-dialog-nav button:hover, .ks-close:hover { background: var(--paper); color: var(--ink); }
  .ks-close { justify-self: end; }

  @media (max-width: 900px) {
    .ks-deck-area { justify-self: center; width: min(100%, 300px); }
    .project-card { left: -8px; bottom: -40px; width: clamp(150px, 46%, 210px); }
    .project .photo-stack + figcaption { padding-left: 0; margin-top: 56px; text-align: right; }
    .map-legend .hint { margin-left: 0; width: 100%; }
    .route-map { min-width: 760px; }
    .map-swipe { display: block; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .marquee-track, .status::before { animation: none; }
    .ks-inner { transition: none; }
    .ks-deck > .ks-card, .project-card { transition: none; }
    .ks-deck .is-top:not(.is-leaving):hover, .project-card:hover { transform: rotate(-1.5deg); }
  }

  [hidden] { display: none !important; }
  .map-legend .legend-title { font: 600 .75rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--moss); }


  /* ============ Donate: project + form ============ */
  .hero-compact .wrap { padding-block: clamp(120px, 13vw, 160px) clamp(40px, 5vw, 64px); }
  .hero-compact h1 { font-size: clamp(2.8rem, 7.4vw, 6rem); }
  .give-main { background: var(--forest); color: var(--paper); }
  .give-main .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    grid-template-areas: "intro form" "photo form" "about form";
    column-gap: clamp(32px, 5vw, 72px);
    row-gap: clamp(28px, 4vw, 44px);
    align-items: start;
    padding-block: clamp(48px, 6vw, 80px) clamp(72px, 9vw, 112px);
  }
  .give-intro { grid-area: intro; }
  .give-about { grid-area: about; }
  .give-photo { grid-area: photo; margin: 0; }
  .give-form { grid-area: form; }
  .now-badge {
    display: inline-flex; align-items: center; gap: 12px;
    font: 600 clamp(.85rem, 1.2vw, 1rem)/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
    color: var(--forest); background: var(--sage);
    padding: 12px 18px 12px 14px; border-radius: 999px;
  }
  .now-badge .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 4px rgba(138,58,46,.25); animation: pulse 2.4s ease-in-out infinite; }
  .give-intro h2 {
    margin-top: 22px;
    font-size: clamp(2.8rem, 6vw, 5rem);
    letter-spacing: -0.015em; line-height: .98;
    color: var(--paper);
  }
  .give-intro h2 em { display: block; font-style: italic; font-weight: 400; color: var(--sage); }
  .give-about .body { color: #dcdccb; max-width: 48ch; font-size: 1.06rem; }
  .promise-line {
    margin-top: 18px;
    font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 0;
    font-style: italic; font-size: 1.3rem; color: var(--sage);
  }
  .give-photo .photo-stack { position: relative; }
  .give-photo .photo { border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; }
  .give-photo .photo img { width: 100%; height: 100%; object-fit: cover; }
  .give-photo figcaption { margin-top: 60px; padding-left: calc(clamp(170px, 42%, 240px) - 12px); font-size: .85rem; color: #a9ab92; }

  .give-form {
    position: sticky; top: 24px;
    display: grid; gap: 20px;
    background: var(--paper); color: var(--ink);
    border-radius: 10px;
    padding: clamp(22px, 3vw, 34px);
    box-shadow: 0 30px 70px -30px rgba(0,0,0,.65);
  }
  .give-form-head { display: grid; gap: 12px; }
  .give-form h3 { font-size: clamp(1.8rem, 3vw, 2.3rem); color: var(--bark); }
  .status-light { color: var(--moss); border-color: rgba(88,88,48,.45); justify-self: start; }
  .status-light::before { background: var(--clay); }
  .give-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
  .give-form legend { font: 600 .75rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--moss); margin-bottom: 10px; padding: 0; }
  .give-form input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
  .seg-row { display: grid; grid-template-columns: 1fr 1fr; background: var(--lichen); border-radius: 999px; padding: 4px; }
  .seg-row span { display: block; text-align: center; padding: 10px 12px; border-radius: 999px; font-weight: 600; cursor: pointer; color: #4a4e40; transition: background-color .15s, color .15s; }
  .seg-row input:checked + span { background: var(--forest); color: var(--paper); }
  .amount-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .amount-grid .amount-other { grid-column: 1 / -1; }
  .amount-grid span {
    display: block; text-align: center; cursor: pointer;
    padding: 12px 6px; border-radius: 8px;
    border: 1.5px solid rgba(88,88,48,.3);
    font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 0;
    font-size: 1.25rem; font-variant-numeric: lining-nums tabular-nums;
    transition: border-color .15s, background-color .15s, color .15s;
  }
  .amount-grid .amount-other span { font-family: var(--body); font-size: .95rem; font-weight: 600; }
  .amount-grid span:hover { border-color: var(--bark); }
  .amount-grid input:checked + span { background: var(--bark); border-color: var(--bark); color: var(--paper); }
  .give-form input:focus-visible + span { outline: 2px solid var(--clay); outline-offset: 2px; }
  .other-field { margin-top: 12px; display: grid; gap: 6px; }
  .other-field label { font-size: .9rem; color: #4a4e40; }
  .money { display: flex; align-items: center; gap: 6px; border: 1.5px solid rgba(88,88,48,.35); border-radius: 8px; padding: 0 12px; background: #fff; }
  .money span { font-family: var(--display); font-size: 1.2rem; color: var(--bark); }
  .money input { border: 0; outline: 0; font: 500 1.15rem var(--body); padding: 11px 0; width: 100%; background: transparent; color: var(--ink); }
  .money:focus-within { border-color: var(--bark); }
  .give-total { font-size: 1rem; color: #4a4e40; border-top: 1px solid rgba(88,88,48,.2); padding-top: 16px; }
  .give-total strong { font-family: var(--display); font-size: 1.6rem; color: var(--ink); font-weight: 500; margin-inline: 4px; font-variant-numeric: lining-nums; }
  .btn-wide { width: 100%; justify-content: center; padding: 1em; font-size: 1rem; }
  .btn-donate:disabled { opacity: .72; cursor: not-allowed; }
  .give-form .note { color: #4a4e40; font-size: .95rem; }
  .give-form .note a { color: var(--bark); font-weight: 600; text-underline-offset: 3px; }
  .give-form .fine { color: #6b6f5e; border-top-color: rgba(88,88,48,.18); }

  /* Donate buttons placed around the site */
  .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: clamp(40px, 6vw, 64px); }
  .cta-row p { font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 0; font-style: italic; font-size: 1.3rem; }
  .cta-row.on-dark p { color: var(--sage); }
  .cta-row.on-light p { color: var(--bark); }

  @media (max-width: 900px) {
    .give-main .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "photo" "form" "about"; }
    .give-form { position: static; }
    .give-photo figcaption { padding-left: 0; margin-top: 56px; text-align: right; }
  }

  /* ============ Shop ============ */
  .hero-shop { background-image: url("../assets/img/texture-berries-dark.jpg"); }
  .hero-shop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(31,36,25,.4); }
  .hero-shop .wrap { text-align: center; padding-block: clamp(130px, 15vw, 180px) clamp(48px, 6vw, 72px); }
  .hero-shop .eyebrow, .hero-map .eyebrow { color: var(--sage); margin-bottom: 16px; }
  .hero-shop .sub {
    margin: 22px auto 0; max-width: 38ch;
    font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 0;
    font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 350; line-height: 1.4; color: #ecebdf;
  }

  .scene {
    --slant: clamp(44px, 8vw, 120px);
    --tl: var(--slant); --tr: 0px; --bl: 0px; --br: var(--slant);
    position: relative; z-index: 1;
    margin-top: calc(-1 * var(--slant));
  }
  .scene-bottle { z-index: 2; }
  .scene-shirt { z-index: 3; }
  .scene::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-color: var(--forest); background-size: cover; background-position: center;
    clip-path: polygon(0 var(--tl), 100% var(--tr), 100% calc(100% - var(--br)), 0 calc(100% - var(--bl)));
  }
  /* boundaries alternate direction so the eye zigzags down the page */
  .scene-bottle { --tl: var(--slant); --tr: 0px; --bl: var(--slant); --br: 0px; }
  .scene-shirt  { --tl: 0px; --tr: var(--slant); --bl: 0px; --br: var(--slant); }
  .scene-keskes::before { background-image: radial-gradient(ellipse at 35% 55%, rgba(40,26,12,0) 20%, rgba(40,26,12,.45) 100%), url("../assets/img/texture-leaf-olive.jpg"); }
  .scene-bottle::before { background-image: linear-gradient(180deg, rgba(20,24,20,.15), rgba(20,24,20,.45)), url("../assets/img/shop/bg-sunset-soft.jpg"); }
  .scene-shirt::before  { background-image: url("../assets/img/texture-seedpods-dark.jpg"); }
  .hero-shop { padding-bottom: 0; }
  .hero-shop .wrap { padding-bottom: calc(clamp(48px, 6vw, 72px) + var(--slant, 60px)); }

  .scene .wrap {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: center; gap: clamp(24px, 5vw, 72px);
    padding-block: calc(var(--slant) + clamp(28px, 4vw, 56px));
  }
  .scene-right .wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .scene-right .scene-product { order: 2; }
  .scene-product { display: grid; place-items: center; position: relative; z-index: 2; }
  .scene-product img { width: 100%; height: auto; max-height: min(70vh, 680px); object-fit: contain; filter: drop-shadow(0 40px 50px rgba(10,12,8,.45)); }
  .scene-product img { transform: rotate(var(--rot, 0deg)); }
  .scene-keskes { --rot: -4deg; }
  .scene-bottle .scene-product img { width: auto; max-width: 100%; max-height: min(74vh, 700px); }
  .scene-bottle { --rot: 5deg; }
  .scene-shirt { --rot: -3deg; }
  .scene-bottle .scene-product { margin-top: calc(-1.3 * var(--slant)); }
  .scene-shirt .scene-product { margin-top: calc(-1.1 * var(--slant)); }
  .placard { position: relative; z-index: 3; }
  .shop-close { position: relative; margin-top: calc(-1 * clamp(44px, 8vw, 120px)); }
  .shop-close .wrap { padding-top: calc(clamp(44px, 8vw, 120px) + clamp(40px, 6vw, 72px)); }
  .placard {
    background: rgba(31,36,25,.88);
    backdrop-filter: blur(6px);
    color: var(--paper);
    border-radius: 8px;
    padding: clamp(24px, 3.4vw, 40px);
    display: grid; gap: 14px;
    max-width: 440px;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
  }
  .scene-right .placard { justify-self: end; }
  .placard-no { font: 600 .75rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--sage); }
  .placard h2 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); color: var(--paper); letter-spacing: -0.01em; }
  .placard-line { font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 0; font-size: 1.2rem; line-height: 1.45; font-weight: 350; color: #e6e5d6; }
  .placard-impact {
    padding-top: 14px; border-top: 1px solid rgba(198,198,164,.25);
    font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 0; font-style: italic;
    font-size: 1.25rem; line-height: 1.35; color: var(--sage);
  }
  .placard-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 6px; }
  .placard-ask { font-size: .88rem; color: #c9cab5; }
  .placard-ask a { color: var(--paper); text-underline-offset: 3px; }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .scene-product img { animation: product-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
      .placard { animation: placard-rise linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    }
  }
  @keyframes product-rise { from { transform: translateY(48px) scale(.96) rotate(var(--rot, 0deg)); } to { transform: rotate(var(--rot, 0deg)); } }
  @keyframes placard-rise { from { transform: translateY(36px) rotate(var(--prot, 0deg)); } to { transform: rotate(var(--prot, 0deg)); } }

  .shop-close { background: var(--lichen); color: var(--ink); z-index: 4; clip-path: polygon(0 clamp(44px, 8vw, 120px), 100% 0, 100% 100%, 0 100%); }
  .shop-close .wrap { padding-bottom: clamp(56px, 8vw, 96px); display: grid; justify-items: center; text-align: center; }
  .shop-close .pull { font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--bark); }
  .shop-close .cta-row { justify-content: center; margin-top: 24px; }

  @media (max-width: 900px) {
    .scene { --slant: 13vw; }
    .scene .wrap, .scene-right .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: calc(var(--slant) + 12px) calc(var(--slant) + 20px); }
    .scene-right .scene-product { order: 0; }
    .scene-product { width: 84%; }
    .scene-keskes .scene-product, .scene-shirt .scene-product { justify-self: start; }
    .scene-bottle .scene-product { justify-self: end; width: 60%; }
    .scene-product img { max-height: 40vh; }
    .scene-bottle .scene-product img { max-height: 50vh; }
    .placard, .scene-right .placard { max-width: none; width: 86%; margin-top: -28px; padding: 18px 20px; gap: 8px; }
    .placard-line { display: none; }
    .placard-ask { font-size: .8rem; }
    .scene-keskes .placard, .scene-shirt .placard { justify-self: end; }
    .scene-bottle .placard { justify-self: start; }
    .placard h2 { font-size: 1.9rem; }
    .placard-line { font-size: 1.05rem; }
    .placard-impact { font-size: 1.1rem; padding-top: 10px; }
    .scene-bottle .scene-product { margin-top: calc(-1.6 * var(--slant)); }
    .scene-shirt .scene-product { margin-top: calc(-1.4 * var(--slant)); }
    .shop-close { margin-top: -13vw; clip-path: polygon(0 13vw, 100% 0, 100% 100%, 0 100%); }
    .shop-close .wrap { padding-top: calc(13vw + 40px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .now-badge .dot { animation: none; }
  }
  @media (max-width: 560px) {
    .now-badge { font-size: .72rem; letter-spacing: .1em; padding: 10px 14px 10px 12px; gap: 10px; }
  }

  /* Donate on phones: straight to the form */
  @media (max-width: 760px) {
    .hero-donate { display: none; }
    .give-main .wrap { padding-top: calc(84px + env(safe-area-inset-top, 0px)); row-gap: 18px; }
    .now-badge { background: none; color: var(--sage); padding: 0; font-size: .72rem; letter-spacing: .14em; }
    .give-intro h2 { margin-top: 10px; font-size: 2.2rem; line-height: 1.05; }
    .give-intro h2 em { display: inline; }
    .give-form { gap: 14px; padding: 20px 18px; }
    .give-form-head { display: none; }
    .give-form legend { margin-bottom: 8px; }
    .seg-row span { padding: 9px 10px; }
    .amount-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .amount-grid span { padding: 10px 2px; font-size: 1.1rem; }
    .amount-grid .amount-other span { padding: 9px 2px; }
    .give-total { padding-top: 12px; }
    .give-form .note { font-size: .88rem; }
    .give-form .fine { font-size: .72rem; }
    .give-about { margin-top: 12px; }
  }

  /* ============ Round 9 ============ */
  /* Nav on phones: words when they fit, three-line menu when they don't */
  @media (max-width: 760px) {
    .nav, .nav-links { gap: 14px; }
    .nav a.text-link { font-size: .88rem; white-space: nowrap; }
    .nav .btn { padding: .6em .85em; font-size: .78rem; white-space: nowrap; }
  }
  @media (max-width: 430px) {
    .nav { gap: 10px; }
    .menu-toggle { display: inline-block; }
    .site-header .wrap { position: relative; }
    .nav-links {
      display: none;
      position: absolute; top: calc(100% - 14px); right: var(--gutter); left: auto;
      flex-direction: column; align-items: flex-end; gap: 2px;
      background: rgba(31,36,25,.94); border-radius: 8px;
      padding: 10px 16px; box-shadow: 0 18px 30px -18px rgba(0,0,0,.7); z-index: 20;
    }
    .nav-links.is-open { display: flex; }
    .nav-links a.text-link { padding: 8px 0; font-size: 1.05rem; border-bottom: 0; }
    .nav-links a[aria-current="page"].text-link { color: var(--sage); }
  }

  /* 100% statement beside donate buttons */
  .actions, .cta-row { align-items: center; }
  .hundred {
    font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 0;
    font-style: italic; font-size: 1.15rem; color: var(--sage);
  }
  .cta-row .hundred { font-size: 1.15rem; }

  /* Homepage project: badge over the photo, Samoury on the photo */
  .project-figure { margin: 0 0 40px; display: grid; gap: 18px; justify-items: start; }
  .project-figure .photo-stack { width: 100%; }

  /* Donate form: live-looking */
  .give-msg { font-size: .9rem; color: var(--bark); text-align: center; }
  .give-form .fine { margin-top: -4px; }

  @media (max-width: 900px) {
    .project .photo { aspect-ratio: 4 / 3; }
  }
  @media (max-width: 760px) {
    .give-main .wrap { row-gap: 14px; }
    .give-intro h2 { font-size: 2.1rem; }
    .give-intro .promise-line { margin-top: 6px; font-size: 1.1rem; }
    .give-photo { margin-bottom: 30px; }
    .give-photo .photo { aspect-ratio: 16 / 6; }
    .give-photo .project-card { width: 100px; left: -4px; bottom: -34px; }
    .give-form h3 { display: none; }
    .give-form { gap: 14px; padding: 18px 16px; }
    .give-form .fine { font-size: .7rem; }
  }
  @container (max-width: 130px) {
    .ks-turn, .ks-sample, .ks-front .ks-no, .ks-front .ks-place { display: none; }
    .ks-cap { padding-right: 0; }
    .ks-front { padding: 6cqi; gap: 5cqi; }
    .ks-front .ks-name { font-size: 13px; }
  }

  /* ============ Round 10 ============ */
  /* Button + statement, centered together */
  .cta-group { display: inline-grid; justify-items: center; gap: 10px; text-align: center; }
  .actions.cta-group { display: inline-grid; margin-top: 32px; }
  .project .cta-group { margin-top: 28px; }
  .cta-group .hundred { font-size: 1.1rem; }
  .hundred.on-light { color: var(--bark); }
  .cta-center { display: flex; justify-content: center; margin-top: clamp(40px, 6vw, 64px); }
  .goals .cta-group { margin-top: clamp(40px, 6vw, 64px); }

  /* Deck: small next arrow to the right of the stack */
  .ks-deck-wrap { position: relative; width: 100%; }
  .ks-next-card {
    position: absolute; top: 50%; right: -46px; transform: translateY(-50%);
    width: 34px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
    opacity: .75; transition: opacity .2s, transform .2s;
  }
  .ks-next-card::before {
    content: ""; position: absolute; left: 11px; top: 13px;
    border-style: solid; border-width: 9px 0 9px 13px;
    border-color: transparent transparent transparent var(--sage);
  }
  .ks-next-card:hover { opacity: 1; transform: translateY(-50%) translateX(3px); }
  .ks-next-card:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-radius: 4px; }
  @media (max-width: 900px) { .ks-next-card { right: -40px; } }

  /* Donate: brief + links */
  .brief { margin-top: 14px; color: #dcdccb; font-size: 1.02rem; max-width: 46ch; }
  .brief a, .how-link { color: var(--sage); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
  .how-link { font-family: var(--body); font-style: normal; font-size: .95rem; margin-left: 4px; }
  .brief a:hover, .how-link:hover { color: var(--paper); }

  /* The whole story */
  .story {
    position: relative; overflow: hidden;
    background: var(--paper) url("../assets/brand/spiral-line.png") right -120px center / auto 130% no-repeat;
    color: var(--ink);
  }
  .story::before { content: ""; position: absolute; inset: 0; background: rgba(245,245,236,.82); }
  .story .wrap { position: relative; padding-block: clamp(56px, 8vw, 104px); }
  .story .eyebrow { color: var(--moss); margin-bottom: 14px; }
  .story h2 { font-size: clamp(2.3rem, 4.8vw, 3.6rem); color: var(--bark); }
  .story-body { margin-top: 22px; display: grid; gap: 1em; max-width: 56ch; font-size: 1.08rem; color: #33372b; }
  .story-body p:nth-child(2) {
    font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 0;
    font-size: 1.35rem; line-height: 1.4; color: var(--bark);
  }
  .story-cta { margin-top: 32px; }

  @media (max-width: 760px) {
    .brief { margin-top: 8px; font-size: .95rem; line-height: 1.45; }
    .give-intro .promise-line { margin-top: 4px; }
    .story { background-size: auto 80%; background-position: right -140px bottom -40px; }
  }

  /* Map hover: a small version of the card */
  .map-tip {
    position: absolute; z-index: 5; width: 128px; pointer-events: none;
    display: grid; gap: 4px;
    padding: 8px 8px 10px;
    border-radius: 8px;
    background: var(--forest) url("../assets/img/texture-leaves-dark.jpg") center / cover no-repeat;
    box-shadow: 0 2px 4px rgba(20,24,14,.2), 0 18px 34px -14px rgba(20,24,14,.7);
    transform: rotate(-1.5deg);
  }
  .tip-photo { aspect-ratio: 3 / 3.4; border-radius: 60px 60px 3px 3px; overflow: hidden; background: #1c2117; margin-bottom: 4px; }
  .tip-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  .map-tip .tip-no { font-family: var(--display); font-style: italic; font-size: .72rem; color: var(--sage); padding-inline: 2px; }
  .map-tip .tip-name { font-family: var(--display); font-size: 1.05rem; line-height: 1.1; color: var(--paper); padding-inline: 2px; }

  /* Shop: paper placards behind, product lifted in front */
  .scene-product { z-index: 4; }
  .scene-product img { filter: drop-shadow(0 12px 12px rgba(10,12,8,.35)) drop-shadow(0 50px 60px rgba(10,12,8,.55)); }
  .placard {
    z-index: 1;
    background: #eee7d0 url("../assets/img/paper-crinkled.jpg") center / cover;
    backdrop-filter: none;
    color: var(--ink);
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(107,65,38,.2), 0 24px 40px -24px rgba(10,12,8,.6);
    outline: 1px solid rgba(107,65,38,.4); outline-offset: -8px;
    --prot: 1.2deg;
    transform: rotate(var(--prot));
  }
  .scene-bottle .placard { --prot: -1.2deg; }
  .placard::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 3px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .placard-no { color: var(--moss); }
  .placard h2 { color: var(--bark); }
  .placard-line { color: #3b3f33; }
  .placard-impact { color: var(--moss); border-top-color: rgba(107,65,38,.25); }
  /* tuck the placard under the product */
  @media (min-width: 901px) {
    .scene-keskes .placard, .scene-shirt .placard { margin-left: -70px; }
    .scene-bottle .placard { margin-right: -70px; justify-self: end; }
  }
  @media (max-width: 900px) {
    .placard, .scene-right .placard { margin-top: -44px; padding: 56px 22px 20px; }
    .scene-product img { max-height: 44vh; }
  }
  @media (prefers-reduced-motion: reduce) { .ks-next-card:hover { transform: translateY(-50%); } }

  /* ============ Store: header bag ============ */
  .bag-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--paper); border-radius: 50%; flex: none; }
  .bag-link:hover { color: var(--sage); }
  .bag-count {
    position: absolute; top: 2px; right: 0;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    background: var(--clay); color: #fff; font: 700 .68rem/17px var(--body); text-align: center;
  }

  /* Shop: price + link on the paper label */
  a.placard, a.scene-product { text-decoration: none; color: inherit; cursor: pointer; }
  a.placard:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
  a.scene-product:hover img { transform: rotate(var(--rot, 0deg)) translateY(-6px); transition: transform .3s ease; }
  .placard-buy { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(107,65,38,.25); }
  .placard-price { font-family: var(--display); font-size: 1.5rem; color: var(--bark); font-variant-numeric: lining-nums; }
  .placard-view { font: 600 .78rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--clay); }

  /* Plain pages (product, bag, checkout) */
  .plain-page { background: var(--lichen); color: var(--ink); }
  .plain-top { height: calc(96px + env(safe-area-inset-top, 0px)); background: var(--forest); }
  .crumbs { display: flex; gap: 10px; align-items: center; font-size: .9rem; color: #5d6152; }
  .crumbs a { color: var(--bark); font-weight: 600; text-underline-offset: 3px; }

  /* Product page */
  .pd { padding-block: clamp(24px, 4vw, 44px) clamp(64px, 9vw, 110px); }
  .pd-grid { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
  .pg-main { border-radius: 8px; overflow: hidden; aspect-ratio: 1; max-width: 100%; box-shadow: 0 20px 40px -26px rgba(31,36,25,.5); }
  .pg-main img { width: 100%; height: 100%; object-fit: cover; }
  .pg-thumbs { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .pg-thumb { padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: none; aspect-ratio: 1; }
  .pg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pg-thumb.is-on { border-color: var(--bark); }
  .pd-info { position: sticky; top: 24px; display: grid; gap: 16px; }
  .pd-no { font: 600 .75rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--moss); }
  .pd-info h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); color: var(--bark); letter-spacing: -.01em; }
  .pd-price { font-family: var(--display); font-size: 1.9rem; color: var(--ink); font-variant-numeric: lining-nums; }
  .pd-short { font-size: 1.08rem; color: #33372b; max-width: 46ch; }
  .pd-impact { display: flex; gap: 12px; align-items: flex-start; background: #eee7d0 url("../assets/img/paper-crinkled.jpg") center / cover; border-radius: 4px; padding: 14px 16px; outline: 1px solid rgba(107,65,38,.35); outline-offset: -6px; }
  .pd-impact p { font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 0; font-style: italic; font-size: 1.15rem; line-height: 1.35; color: var(--moss); }
  .pd-leaf { flex: none; width: 18px; height: 26px; background: url("../assets/brand/olive-branch.png") center / contain no-repeat; }
  .pd-buy { display: grid; gap: 16px; }
  .pd-opts { border: 0; margin: 0; padding: 0; }
  .pd-opts legend { font: 600 .75rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--moss); margin-bottom: 10px; padding: 0; }
  .pd-opt-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .pd-opt-row input { position: absolute; opacity: 0; pointer-events: none; }
  .pd-opt-row span { display: inline-grid; place-items: center; min-width: 52px; height: 44px; padding: 0 12px; border: 1.5px solid rgba(88,88,48,.35); border-radius: 8px; font-weight: 600; cursor: pointer; background: var(--paper); }
  .pd-opt-row input:checked + span { background: var(--bark); border-color: var(--bark); color: var(--paper); }
  .pd-opt-row input:focus-visible + span { outline: 2px solid var(--clay); outline-offset: 2px; }
  .pd-opt-hint { margin-top: 8px; color: var(--clay); font-weight: 600; font-size: .9rem; }
  .pd-buy-row { display: flex; gap: 12px; align-items: stretch; }
  .pd-add { flex: 1; justify-content: center; font-size: 1rem; padding: .95em 1.2em; }
  .qty { display: inline-flex; align-items: center; border: 1.5px solid rgba(88,88,48,.35); border-radius: 999px; background: var(--paper); }
  .qty button { width: 40px; height: 44px; border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: var(--ink); border-radius: 999px; }
  .qty button:hover { color: var(--clay); }
  .qty-n { min-width: 22px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
  .pd-sustain { display: flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; color: var(--moss); }
  .pd-sustain .pd-leaf { width: 14px; height: 20px; }
  .pd-more { margin-top: clamp(48px, 7vw, 88px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(28px, 5vw, 72px); border-top: 1px solid rgba(88,88,48,.25); padding-top: clamp(32px, 5vw, 56px); }
  .pd-more h2, .pd-others h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--bark); margin-bottom: 14px; }
  .pd-made p { font-size: 1.06rem; color: #33372b; max-width: 60ch; margin-bottom: 1em; }
  .pd-details ul { list-style: none; padding: 0; margin: 0; }
  .pd-details li { padding: 10px 0; border-bottom: 1px solid rgba(88,88,48,.2); }
  .pd-others { margin-top: clamp(48px, 7vw, 80px); }
  .pd-other-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 640px; }
  .pd-other { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); background: var(--paper); border-radius: 8px; padding: 10px; }
  .pd-other img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; }
  .pd-other span { font-weight: 600; }
  .pd-other em { font-style: normal; font-family: var(--display); color: var(--bark); }
  .pd-other:hover span { color: var(--clay); }
  .pd-toast {
    position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50;
    display: flex; gap: 16px; align-items: center; max-width: calc(100% - 32px);
    background: var(--forest); color: var(--paper); padding: 14px 18px; border-radius: 10px;
    box-shadow: 0 20px 40px -16px rgba(0,0,0,.6); font-size: .95rem;
  }
  .pd-toast a { color: var(--sage); font-weight: 700; white-space: nowrap; text-underline-offset: 3px; }

  /* Bag page */
  .bag-page .wrap, .co-page .wrap { padding-block: clamp(28px, 5vw, 56px) clamp(64px, 9vw, 110px); }
  .bag-page h1, .co-page h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--bark); margin-bottom: 24px; }
  .bag-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
  .bag-lines { list-style: none; margin: 0; padding: 0; }
  .bag-line { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 18px; padding: 18px 0; border-top: 1px solid rgba(88,88,48,.25); align-items: start; }
  .bag-thumb img { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; display: block; }
  .bag-info { display: grid; gap: 6px; justify-items: start; }
  .bag-name { font-family: var(--display); font-size: 1.35rem; color: var(--bark); text-decoration: none; }
  .bag-opt, .bag-each { font-size: .9rem; color: #5d6152; }
  .bag-remove { background: none; border: 0; padding: 0; color: #5d6152; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; font-size: .88rem; }
  .bag-remove:hover { color: var(--clay); }
  .bag-line-total { font-family: var(--display); font-size: 1.3rem; font-variant-numeric: lining-nums tabular-nums; }
  .bag-summary, .co-summary { background: var(--paper); border-radius: 10px; padding: clamp(20px, 3vw, 28px); display: grid; gap: 12px; position: sticky; top: 24px; box-shadow: 0 20px 40px -30px rgba(31,36,25,.5); }
  .bag-summary h2, .co-summary h2 { font-size: 1.6rem; color: var(--bark); }
  .sum-row { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
  .sum-row.muted span:last-child { color: #6b6f5e; font-size: .92rem; }
  .sum-row.total { border-top: 1px solid rgba(88,88,48,.25); padding-top: 12px; font-weight: 700; font-size: 1.1rem; }
  .bag-supports { background: #eee7d0 url("../assets/img/paper-crinkled.jpg") center / cover; border-radius: 4px; padding: 12px 14px; }
  .bag-supports p { font: 600 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--moss); margin-bottom: 8px; }
  .bag-supports ul { margin: 0; padding-left: 18px; font-family: var(--display); font-style: italic; color: var(--moss); }
  .bag-continue { text-align: center; color: var(--bark); font-weight: 600; font-size: .92rem; text-underline-offset: 3px; }
  .bag-empty { display: grid; gap: 18px; justify-items: start; }
  .bag-empty-line { font-family: var(--display); font-size: 1.4rem; color: var(--bark); }

  /* Checkout */
  .co-steps { margin-bottom: 12px; }
  .co-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
  .co-form { display: grid; gap: 26px; }
  .co-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; }
  .co-form legend { font-family: var(--display); font-size: 1.4rem; color: var(--bark); margin-bottom: 4px; padding: 0; }
  .fld { display: grid; gap: 6px; font-size: .88rem; color: #4a4e40; }
  .fld input, .fld select { font: 500 1rem var(--body); color: var(--ink); background: #fff; border: 1.5px solid rgba(88,88,48,.3); border-radius: 8px; padding: 12px 12px; width: 100%; min-width: 0; }
  .fld input:focus, .fld select:focus { outline: none; border-color: var(--bark); box-shadow: 0 0 0 3px rgba(107,65,38,.15); }
  .fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .fld-row.three { grid-template-columns: 1.4fr 1fr 1fr; }
  .ship-opt { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: #fff; border: 1.5px solid rgba(88,88,48,.3); border-radius: 8px; padding: 12px 14px; cursor: pointer; }
  .ship-opt:has(input:checked) { border-color: var(--bark); box-shadow: 0 0 0 3px rgba(107,65,38,.12); }
  .ship-opt input { accent-color: var(--bark); width: 18px; height: 18px; }
  .ship-opt span { display: grid; }
  .ship-opt small { color: #6b6f5e; }
  .ship-opt em { font-style: normal; font-variant-numeric: tabular-nums; }
  .co-pay { display: flex; gap: 12px; align-items: flex-start; background: var(--paper); border: 1.5px dashed rgba(88,88,48,.4); border-radius: 8px; padding: 16px; color: #4a4e40; font-size: .95rem; }
  .co-pay svg { flex: none; color: var(--moss); margin-top: 2px; }
  .co-summary-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .co-summary-items li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
  .co-thumb { position: relative; }
  .co-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; display: block; }
  .co-thumb b { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; border-radius: 999px; background: var(--moss); color: #fff; font: 700 .72rem/20px var(--body); text-align: center; }
  .co-name { display: grid; font-weight: 600; }
  .co-name small { font-weight: 400; color: #6b6f5e; }
  .co-empty, .co-done { display: none; }
  .co-page.is-empty .co-body { display: none; }
  .co-page.is-empty .co-empty { display: grid; gap: 18px; justify-items: start; }
  .co-page.is-done .co-body, .co-page.is-done .co-steps, .co-page.is-done h1, .co-page.is-done .co-empty { display: none; }
  .co-page.is-done .co-done { display: grid; gap: 16px; justify-items: start; max-width: 560px; }
  .co-done h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--bark); }
  .co-done .eyebrow { color: var(--moss); }
  .co-preview-note { font-size: .85rem; color: #6b6f5e; }

  @media (max-width: 900px) {
    .pd-grid, .pd-more, .bag-grid, .co-body { grid-template-columns: minmax(0, 1fr); }
    .pd-info, .bag-summary, .co-summary { position: static; }
    .co-summary { order: -1; }
    .pd-other-row { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 560px) {
    .bag-line { grid-template-columns: 80px minmax(0, 1fr); }
    .bag-thumb img { width: 80px; height: 80px; }
    .bag-line-total { grid-column: 2; }
    .fld-row, .fld-row.three { grid-template-columns: 1fr; }
    .plain-top { height: calc(84px + env(safe-area-inset-top, 0px)); }
  }
  @media (max-width: 430px) { .bag-link { width: 36px; } }
  .plain-page { min-height: 78vh; }

  /* ============ Placeholder launch ============ */
  .nav-soon { opacity: .5; cursor: default; display: inline-flex; align-items: baseline; gap: 6px; }
  .nav-soon em { font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 999px; padding: 2px 6px; }
  .nav .nav-soon:hover { border-bottom-color: transparent; }
  .give-form.is-soon fieldset { opacity: .45; filter: grayscale(.6); pointer-events: none; }
  .give-form.is-soon .give-submit { background: #8d8a7c; box-shadow: none; opacity: 1; }
  .soon-badge {
    justify-self: start;
    font: 700 .72rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase;
    color: var(--paper); background: var(--moss); padding: 7px 12px; border-radius: 999px;
  }
  .soon-note { font-size: .92rem; color: #4a4e40; }
  .soon-note a { color: var(--bark); font-weight: 600; text-underline-offset: 3px; }
  @media (max-width: 760px) { .give-form.is-soon h3 { display: none; } }