:root {
    color-scheme: light dark;
    --cheese: #F4BC24;
    --cheese-hi: #FFD24E;
    --cheese-lo: #DE9F12;
    --ink: #3B2306;
    --ink-soft: #6B4715;
    --rim: #D08C10;
    --hole-mid: #A56A08;
    --hole-deep: #6B4405;
    --rind: #4A2C08;
    --rind-ink: #FFE9C4;
    --emerald: #063D29;
    --emerald-big: #0B6B47;
    --gold: #FFD98A;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --cheese: #7A4E0A;
      --cheese-hi: #8E5F12;
      --cheese-lo: #664008;
      --ink: #FFEBC7;
      --ink-soft: #DDBE8C;
      --rim: #4E3305;
      --hole-mid: #35220A;
      --hole-deep: #1E1302;
      --rind: #2A1A04;
      --rind-ink: #FFE9C4;
      --emerald: #9BEFCE;
      --emerald-big: #4FD6A4;
      --gold: #FFD98A;
    }
  }
  :root[data-theme="dark"] {
    --cheese: #7A4E0A; --cheese-hi: #8E5F12; --cheese-lo: #664008;
    --ink: #FFEBC7; --ink-soft: #DDBE8C;
    --rim: #4E3305; --hole-mid: #35220A; --hole-deep: #1E1302;
    --rind: #2A1A04; --rind-ink: #FFE9C4;
    --emerald: #9BEFCE; --emerald-big: #4FD6A4; --gold: #FFD98A;
  }
  :root[data-theme="light"] {
    --cheese: #F4BC24; --cheese-hi: #FFD24E; --cheese-lo: #DE9F12;
    --ink: #3B2306; --ink-soft: #6B4715;
    --rim: #D08C10; --hole-mid: #A56A08; --hole-deep: #6B4405;
    --rind: #4A2C08; --rind-ink: #FFE9C4;
    --emerald: #063D29; --emerald-big: #0B6B47; --gold: #FFD98A;
  }

  * { box-sizing: border-box; }
  html { background: var(--rind); }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body {
    margin: 0;
    color: var(--ink);
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-size: 1.09rem;
    line-height: 1.72;
    overflow-x: hidden;
    background: var(--rind);
  }
  /* cheese surface lives on .page/.gate so overscroll above and below shows rind */
  .page, .gate {
    background-color: var(--cheese);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.28 0 0 0 0 0.17 0 0 0 0 0.02 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E"),
      radial-gradient(90rem 60rem at 80% -10%, var(--cheese-hi), transparent 60%),
      radial-gradient(80rem 50rem at -20% 60%, var(--cheese-lo), transparent 55%);
  }
  ::selection { background: var(--emerald-big); color: #FFF3DC; }
  a { color: var(--emerald); }
  :focus-visible { outline: 3px solid var(--emerald-big); outline-offset: 3px; }

  .mono {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .pr-flag { height: 0.8em; width: 1.2em; vertical-align: -0.06em; }

  /* ---------- Rind marquee ---------- */
  .rind {
    background: var(--rind);
    color: var(--rind-ink);
    overflow: hidden;
    padding: 0.28rem 0;
    border-bottom: 3px solid var(--hole-deep);
  }
  .rind.mono { font-size: 0.58rem; }
  .rind-track { display: inline-flex; white-space: nowrap; }
  .js .rind-track { animation: slide 48s linear infinite; }
  .rind-track span { padding-right: 2rem; }
  @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* ---------- Pill bar ---------- */
  .pillbar {
    position: sticky; top: 0.7rem; z-index: 20;
    width: max-content; max-width: calc(100vw - 2rem);
    margin: 1rem auto 0;
    display: flex; gap: 0.2rem;
    background: var(--rind);
    border: 1px solid var(--emerald-big);
    border-radius: 999px;
    padding: 0.3rem 0.5rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  }
  .pillbar a {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--rind-ink);
    text-decoration: none;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
  }
  .pillbar a:hover, .pillbar a:focus-visible { background: rgba(255, 233, 196, 0.16); color: var(--gold); outline: none; }

  /* ---------- Sections ---------- */
  .wrap { max-width: 66rem; margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 3rem); }
  section { padding: clamp(1.8rem, 4.5vw, 3rem) 0 0; }
  .label {
    color: var(--emerald);
    font-weight: 700;
    margin: 0 0 1.4rem;
  }
  .label::after {
    content: "";
    display: block;
    width: 3.2rem; height: 3px;
    background: var(--emerald-big);
    margin-top: 0.5rem;
  }

  /* ---------- Holes ---------- */
  .hole {
    border-radius: 48% 52% 51% 49% / 52% 48% 53% 47%;
    background: radial-gradient(circle at 32% 28%, var(--rim), var(--hole-mid) 55%, var(--hole-deep) 100%);
    box-shadow:
      inset 0 10px 24px rgba(0, 0, 0, 0.45),
      inset 0 -3px 8px rgba(255, 235, 190, 0.14);
    flex: none;
  }
  .hole.photo { position: relative; padding: clamp(7px, 1.4vw, 13px); aspect-ratio: 1 / 1; }
  .hole.photo img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: inherit;
  }
  .hole.photo::after {
    content: "";
    position: absolute; inset: clamp(7px, 1.4vw, 13px);
    border-radius: inherit;
    box-shadow: inset 0 8px 22px rgba(0, 0, 0, 0.5);
    pointer-events: none;
  }
  .holes-row {
    display: flex; align-items: center; gap: clamp(0.8rem, 3vw, 2rem);
    padding: clamp(1.4rem, 4vw, 2.4rem) 0 0;
  }
  /* scattered background holes — always behind content */
  /* overflow: clip (not hidden) so the sticky pillbar keeps sticking */
  .page { position: relative; overflow: hidden; overflow: clip; }
  .bg-holes { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
  .bg-holes .hole { position: absolute; }
  .rind, .wrap, .rind-edge, .the-end { position: relative; z-index: 1; }
  figure.fig { margin: 0; }
  figure.fig figcaption {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-soft);
    max-width: 22ch;
    line-height: 1.5;
    margin-top: 0.9rem;
  }

  /* ---------- Hero ---------- */
  .hero { padding-top: clamp(2.2rem, 5vw, 4rem); }
  .hero-grid {
    display: flex; flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.5rem, 5vw, 4rem);
  }
  .hero-text { flex: 1 1 20rem; min-width: 0; }
  h1 {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 900;
    font-size: clamp(4rem, 14vw, 9.5rem);
    letter-spacing: -0.045em;
    line-height: 0.9;
    margin: 0.2em 0 0.15em;
    text-wrap: balance;
  }
  .hero-sub {
    font-style: italic;
    font-size: clamp(1.1rem, 2.8vw, 1.45rem);
    margin: 0 0 1.2rem;
  }
  .hero-tag { color: var(--emerald); font-weight: 700; margin: 0; }
  .hero-fig { flex: 0 1 auto; margin: 0; }
  @media (max-width: 48rem) {
    .hero-fig, .bio-fig { margin-left: auto; margin-right: auto; }
    .hero-fig figcaption, .bio-fig figcaption { text-align: center; margin-left: auto; margin-right: auto; }
  }
  .hero-fig .hole.photo { width: min(74vw, 330px); cursor: pointer; }
  .js .hero-fig .hole.photo { transition: transform 0.25s ease; }
  .hero-fig .hole.photo:hover { transform: scale(1.015) rotate(-0.5deg); }
  .hero-fig button {
    all: unset; display: block; cursor: pointer;
  }
  .prrrp {
    position: absolute; left: 50%; top: -1.2rem;
    transform: translateX(-50%);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.8rem; letter-spacing: 0.08em;
    background: var(--rind); color: var(--rind-ink);
    padding: 0.25rem 0.8rem; border-radius: 999px;
    opacity: 0; pointer-events: none;
    z-index: 5;
  }
  .js .prrrp.pop { animation: prrrp-pop 0.9s ease forwards; }
  @keyframes prrrp-pop {
    0% { opacity: 0; transform: translate(-50%, 10px) scale(0.7); }
    25% { opacity: 1; transform: translate(-50%, -4px) scale(1.04); }
    75% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -22px); }
  }
  .crumb {
    position: absolute;
    width: 7px; height: 7px; border-radius: 50%;
    pointer-events: none;
    animation: crumb-fly 0.9s ease-out forwards;
  }
  @keyframes crumb-fly {
    from { opacity: 1; transform: translate(0, 0) scale(1); }
    to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.4); }
  }

  /* ---------- Bio ---------- */
  .bio-grid {
    display: flex; flex-wrap: wrap;
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: flex-start;
  }
  .bio-text { flex: 1 1 24rem; min-width: 0; max-width: 58ch; }
  .bio-text p { margin: 0 0 1.2rem; }
  .bio-fig .hole.photo { width: min(64vw, 250px); }
  .pull {
    font-style: italic;
    font-size: clamp(1.3rem, 3.4vw, 1.8rem);
    line-height: 1.4;
    max-width: 24ch;
    margin: 2.2rem 0 0;
    color: var(--ink);
    border-left: 4px solid var(--emerald-big);
    padding-left: 1rem;
  }

  /* ---------- Field notes ---------- */
  .notes {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
    border-collapse: collapse;
    width: 100%; max-width: 38rem;
  }
  .notes th, .notes td {
    text-align: left; vertical-align: top;
    padding: 0.55rem 1rem 0.55rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  }
  .notes th { color: var(--ink-soft); font-weight: 400; width: 36%; }
  .notes td { color: var(--ink); font-weight: 700; }

  .facts {
    margin: 2.4rem 0 0; padding: 0;
    list-style: none;
    max-width: 60rem;
    columns: 2; column-gap: clamp(2rem, 5vw, 4rem);
  }
  .facts li {
    break-inside: avoid;
    margin: 0 0 1.3rem;
    padding-left: 1.6rem;
    position: relative;
  }
  .facts li::before {
    content: "";
    position: absolute; left: 0; top: 0.52em;
    width: 0.75em; height: 0.75em;
    border-radius: 48% 52% 51% 49%;
    background: radial-gradient(circle at 35% 30%, var(--rim), var(--hole-deep));
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
  }
  @media (max-width: 40rem) { .facts { columns: 1; } }

  /* ---------- Gallery: swipe row on phones, staggered spread on wide ---------- */
  .board {
    display: flex; flex-wrap: nowrap;
    gap: clamp(1.4rem, 4vw, 3rem);
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 0.6rem;
    scroll-snap-type: x proximity;
  }
  .board .fig { flex: none; scroll-snap-align: start; }
  /* photo holes vary in size, like real swiss holes (bullet holes stay uniform) */
  .board .fig:nth-child(1) .hole { width: min(66vw, 265px); }
  .board .fig:nth-child(2) .hole { width: min(56vw, 205px); }
  .board .fig:nth-child(3) .hole { width: min(48vw, 175px); }
  @media (max-width: 48rem) {
    /* full-bleed swipe row: escape the wrap's side padding so holes aren't clipped */
    .board {
      margin-left: calc(-1 * clamp(1.2rem, 4vw, 3rem));
      margin-right: calc(-1 * clamp(1.2rem, 4vw, 3rem));
      padding-left: clamp(1.2rem, 4vw, 3rem);
      padding-right: clamp(1.2rem, 4vw, 3rem);
      scroll-padding-left: clamp(1.2rem, 4vw, 3rem);
    }
  }
  @media (min-width: 48rem) {
    .board { flex-wrap: wrap; overflow-x: visible; }
    .board .fig:nth-child(2) { margin-top: clamp(0rem, 5vw, 3.5rem); }
    .board .fig:nth-child(3) { margin-top: clamp(0rem, 3vw, 1.8rem); }
  }
  .board .hole.empty {
    aspect-ratio: 1 / 1;
    display: grid; place-items: center;
  }
  .board .hole.empty span {
    color: var(--gold);
    font-size: 0.62rem;
    text-align: center;
    max-width: 12ch;
    opacity: 0.85;
  }

  /* ---------- The End (rind footer, cartoon cheese-cut edge) ---------- */
  .rind-edge {
    display: block;
    width: 100%;
    height: clamp(18px, 3.5vw, 34px);
    margin-top: clamp(2.4rem, 6vw, 4rem);
    margin-bottom: -1px; /* overlap the footer so no cheese seam shows through */
    fill: var(--rind);
  }
  .the-end {
    background: var(--rind);
    color: var(--rind-ink);
    text-align: center;
    padding: 3.5rem 1.4rem 3rem;
  }
  .the-end h2 {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 900; letter-spacing: -0.02em;
    font-size: clamp(2rem, 6vw, 2.8rem);
    margin: 0.8rem 0 0.4rem;
  }
  .the-end svg { color: var(--gold); }
  .moon { display: none; }
  :root[data-theme="dark"] .moon { display: inline; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .moon { display: inline; } }
  .boop-line { font-size: 0.95rem; margin: 1.2rem 0 0.4rem; opacity: 0.9; }
  @media (max-width: 48rem) { .boop-line .aside { display: block; margin-top: 0.15rem; } }
  .boop-line strong { color: var(--gold); font-variant-numeric: tabular-nums; }
  .signoff { font-size: 0.85rem; margin: 0.2rem 0; opacity: 0.75; }
  .the-end a { color: var(--gold); }
  @media (max-width: 48rem) {
    .hero-text { text-align: center; }
    .label { text-align: center; }
    .label::after { margin-left: auto; margin-right: auto; }
  }
  .paw-trail { display: flex; justify-content: center; gap: 1.4rem; margin: 1.6rem 0 0.4rem; opacity: 0.7; }
  .paw-trail svg:nth-child(2) { transform: rotate(14deg) translateY(-6px); }
  .paw-trail svg:nth-child(3) { transform: rotate(-8deg); }
  .paw-trail svg:nth-child(4) { transform: rotate(18deg) translateY(-7px); }

  /* ---------- Confetti ---------- */
  .confetti {
    position: fixed; top: -30px;
    width: 10px; height: 10px;
    border-radius: 48% 52% 51% 49%;
    pointer-events: none; z-index: 60;
    animation: confetti-fall linear forwards;
  }
  @keyframes confetti-fall {
    from { transform: translateY(0) rotate(0); opacity: 1; }
    to { transform: translateY(110vh) rotate(420deg); opacity: 0.6; }
  }

  /* ---------- Members-only gate ---------- */
  .gate {
    position: fixed; inset: 0; z-index: 100;
    display: none;
    align-items: center; justify-content: center;
    background: var(--cheese);
    background-image: inherit;
    padding: 1.4rem;
  }
  .js .gate { display: flex; }
  .js.unlocked .gate { display: none; }
  .js:not(.unlocked) .page { visibility: hidden; }
  .gate-card {
    width: min(88vw, 24rem);
    aspect-ratio: 1 / 1;
    border-radius: 48% 52% 51% 49% / 52% 48% 53% 47%;
    background: radial-gradient(circle at 32% 26%, var(--rim), var(--hole-mid) 50%, var(--hole-deep));
    box-shadow: inset 0 14px 34px rgba(0, 0, 0, 0.55);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    color: #FFE9C4;
    padding: 2.5rem;
  }
  .gate-card .mono { color: var(--gold); margin: 0 0 0.5rem; }
  .gate-card p { font-size: 0.92rem; line-height: 1.5; margin: 0 0 1.2rem; }
  .gate-card input {
    width: 100%;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 1rem; text-align: center;
    color: #FFE9C4; background: rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(255, 233, 196, 0.4);
    border-radius: 999px;
    padding: 0.55rem 1rem;
    margin-bottom: 0.8rem;
  }
  .gate-card input::placeholder { color: rgba(255, 233, 196, 0.5); }
  .gate-card input:focus { border-color: var(--gold); outline: none; }
  .gate-card button {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 800; font-size: 0.95rem;
    color: #3B2306; background: var(--gold);
    border: none; border-radius: 999px;
    padding: 0.55rem 1.6rem;
    cursor: pointer;
  }
  .gate-msg { min-height: 1.3em; font-size: 0.8rem; font-style: italic; color: var(--gold); margin: 0.7rem 0 0; }
  .js .gate-card.shake { animation: shake 0.4s ease; }
  @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-9px); } 75% { transform: translateX(9px); } }

  @media (prefers-reduced-motion: reduce) {
    .js .rind-track, .js .prrrp.pop, .crumb, .confetti, .js .gate-card.shake { animation: none !important; }
    .js .hero-fig .hole.photo { transition: none; }
  }