/* Hillside Horseshoes at Mountain Retreat
   An old county fair, out on the hillside: rust iron, dusty sage, sand-pit gold
   and creek blue on fair-paper cream, with prize rosettes for the numbers.
   Rye for the painted-sign headings, Zilla Slab for labels and scores,
   Libre Franklin for reading. */

@font-face { font-family: "Rye"; src: url("/horseshoes/fonts/rye.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url("/horseshoes/fonts/zilla-slab-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url("/horseshoes/fonts/zilla-slab-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("/horseshoes/fonts/libre-franklin.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("/horseshoes/fonts/libre-franklin-italic.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }

:root {
  --rust: #94431f;
  --rust-deep: #6c2f15;
  --rust-bright: #b0502a;
  --iron: #2f2724;
  --iron-soft: #5a4d47;
  --sage: #8fa287;
  --sage-deep: #4f6549;
  --sage-pale: #dfe5d5;
  --sand: #dcae55;
  --sand-deep: #b88a33;
  --sand-soft: #efd8a0;
  --creek: #3f7fa3;
  --creek-deep: #2b5f7e;
  --creek-pale: #dcebf1;
  --paper: #f7efdf;
  --paper-2: #efe3cb;
  --ink: #2b221e;
  --ink-soft: #5b4d45;
  --line: #e0cfae;
  --soil: #5a2f19;
  --display: "Rye", "Rockwell Extra Bold", Georgia, serif;
  --label: "Zilla Slab", Rockwell, Georgia, serif;
  --body: "Libre Franklin", system-ui, sans-serif;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 1.0625rem; line-height: 1.62; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1rem; }
figure { margin: 0; }
button { font: inherit; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 0; background: var(--sand); color: var(--ink); padding: .5rem 1rem; z-index: 50; }
.skip:focus { left: 1rem; }

.eyebrow { font-family: var(--label); font-weight: 700; font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 .7rem; }
.eyebrow-rust { color: var(--rust); }
.eyebrow-sage { color: var(--sage-deep); }
.eyebrow-sand { color: var(--sand); }
.eyebrow-creek { color: var(--creek-deep); }

h2 { font-family: var(--display); font-size: clamp(1.75rem, 4.4vw, 2.75rem); line-height: 1.12; margin-bottom: 1rem; color: var(--ink); }
.section-head { max-width: 44rem; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }

/* Pills: every control is a pill. */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.9rem; padding: .65rem 1.35rem; border-radius: 999px; font-family: var(--label); font-weight: 700; font-size: 1.02rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border: 2px solid transparent; cursor: pointer; touch-action: manipulation; transition: transform .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease; }
.pill-rust { background: var(--rust); color: var(--paper); box-shadow: 0 3px 0 var(--rust-deep); }
.pill-line { border-color: var(--rust); color: var(--rust-deep); background: rgba(247,239,223,.55); }
.pill-cream { background: var(--paper); color: var(--iron); box-shadow: 0 3px 0 rgba(47,39,36,.35); }
.pill-outline { border-color: var(--rust); color: var(--rust); background: transparent; }
.pill-creek { background: var(--creek); color: #fff; box-shadow: 0 3px 0 var(--creek-deep); }
.pill-quiet { background: var(--paper-2); color: var(--ink); border-color: var(--line); }
.pill:active { transform: translateY(2px); box-shadow: none; }
@media (hover: hover) {
  .pill-rust:hover { background: var(--rust-bright); }
  .pill-line:hover { background: var(--rust); color: var(--paper); }
  .pill-cream:hover { background: #fff; }
  .pill-outline:hover { background: var(--rust); color: var(--paper); }
  .pill-creek:hover { background: var(--creek-deep); }
  .pill-quiet:hover { border-color: var(--rust); }
}
.pill:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--creek); outline-offset: 3px; }

/* ---------- Hero: the hillside in cross-section ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; color: var(--ink);
  background: linear-gradient(180deg, #ecd6a6 0%, #f4e5c4 38%, #f6ead0 62%, #efdcb4 100%); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: radial-gradient(60rem 30rem at 85% 10%, rgba(242,207,124,.55), transparent 70%); }

.topbar { display: flex; align-items: center; gap: 1rem; padding: 1rem var(--gutter); position: relative; z-index: 4; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--display); font-size: 1.1rem; letter-spacing: .01em; color: var(--rust-deep); }
.mark { width: 2.3rem; height: 2.3rem; flex: none; }
.navlinks { display: none; list-style: none; margin: 0 0 0 auto; padding: 0; gap: 1.6rem; }
.navlinks a { font-family: var(--label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .92rem; text-decoration: none; color: var(--ink); }
@media (hover: hover) { .navlinks a:hover { color: var(--rust); } }
.navstay { margin-left: auto; min-height: 2.5rem; padding: .45rem 1.1rem; }
@media (max-width: 26rem) { .brand span { font-size: .98rem; } }
@media (min-width: 52rem) {
  .navlinks { display: flex; }
  .navstay { margin-left: 1.4rem; }
}

.hero-inner { position: relative; z-index: 3; padding: .6rem var(--gutter) 0; max-width: 42rem; }
.js .hero-inner { animation: rise 1s cubic-bezier(.2,.7,.2,1) .2s backwards; }
@keyframes rise { from { transform: translateY(1rem); } to { transform: none; } }
.hero .eyebrow { color: var(--sage-deep); }

h1 { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 1rem; }
/* A cloth banner with notched ends, like the header ribbon on a fair placard. */
.banner { position: relative; display: inline-block; font-family: var(--label); font-weight: 700; font-size: clamp(1rem, 3.2vw, 1.35rem); letter-spacing: .32em; text-transform: uppercase; color: var(--paper);
  background: var(--creek); padding: .28em 1.5em .3em 1.6em; margin: 0 0 .35rem .4rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - .7em) 50%, 100% 100%, 0 100%, .7em 50%); }
.big { font-family: var(--display); font-size: clamp(2.9rem, 11vw, 5.6rem); line-height: .95; color: var(--rust); text-shadow: 3px 3px 0 var(--sand-soft), 5px 5px 0 rgba(108,47,21,.18); letter-spacing: .005em; }
.lede { font-size: clamp(1.1rem, 2.4vw, 1.3rem); line-height: 1.5; max-width: 30rem; color: var(--ink); margin-bottom: 1.3rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

.scene-wrap { position: relative; height: clamp(20rem, 85vw, 30rem); margin-top: -1.5rem; z-index: 1; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pitch { position: absolute; right: var(--gutter); bottom: .9rem; z-index: 3; min-height: 2.6rem; padding: .45rem 1.1rem; font-size: .9rem; }

@media (min-width: 60rem) {
  .hero { min-height: clamp(44rem, 100svh, 56rem); display: flex; flex-direction: column; }
  /* The scene sits along the bottom at its own proportions, so the hills stay
     below the headline and only sky and far mountain sit behind the words. */
  .scene-wrap { position: absolute; left: 0; right: 0; bottom: 0; height: min(47.5vw, 100%); margin: 0; }
  .hero-inner { padding-top: clamp(.5rem, 3vh, 2.5rem); padding-bottom: 2rem; }
  .pitch { bottom: 1.4rem; }
}

/* Scene pieces. The at-rest picture is the ringer on the far stake. */
.flyer { visibility: hidden; }
.scene.throwing .flyer, .scene.off .flyer { visibility: visible; }
.scene.throwing .landed, .scene.throwing .ripples, .scene.off .landed, .scene.off .ripples { visibility: hidden; }
/* The score tag over the stake: a pill that hops in, holds, and fades. Only horseshoes.js ever shows it. */
.tag { pointer-events: none; }
.tag-in { opacity: 0; }
.tag rect { fill: var(--rust); stroke: var(--sand-soft); stroke-width: 2.5; }
.tag text { fill: var(--paper); font-family: var(--label); font-weight: 700; font-size: 19px; letter-spacing: .04em; }
.ripples circle { opacity: 0; transform-box: fill-box; transform-origin: center; }
.stake, .prize { transform-box: fill-box; }
.stake { transform-origin: 50% 100%; }
.prize { transform-origin: 50% 0; }

@media (prefers-reduced-motion: no-preference) {
  .sun-ring { transform-box: fill-box; transform-origin: center; animation: spin 60s linear infinite; }
  .cloud-a { animation: drift 38s ease-in-out infinite alternate; }
  .cloud-b { animation: drift 30s ease-in-out -12s infinite alternate-reverse; }
  .shimmer { animation: flow 2.4s linear infinite; }
  .flight { animation: march 1.6s linear infinite; }
  .scene.rang .ripples circle { animation: ripple 1.1s ease-out forwards; }
  .scene.rang .ripples circle + circle { animation-delay: .25s; }
  .scene.rang .stake { animation: wobble .7s ease-out; }
  .scene.rang .prize { animation: swing 1.6s ease-out; }
  .scene.rang .ding { animation: ding .6s ease-out; }
  .scene.clang .stake { animation: wobble .7s ease-out; }
  .scene.tagged .tag-in { animation: tagpop 1.9s both; }
}
/* About .2s up slowing to the top, .2s down speeding up, then it holds and fades. */
@keyframes tagpop {
  0% { opacity: 0; transform: translateY(10px); animation-timing-function: cubic-bezier(.5, 1, .89, 1); }
  10.5% { opacity: 1; transform: translateY(-10px); animation-timing-function: cubic-bezier(.11, 0, .5, 0); }
  21% { opacity: 1; transform: translateY(0); }
  78% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { from { transform: translateX(-40px); } to { transform: translateX(60px); } }
@keyframes flow { to { stroke-dashoffset: -32; } }
@keyframes march { to { stroke-dashoffset: -32; } }
@keyframes ripple { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }
@keyframes wobble { 0% { transform: rotate(0); } 20% { transform: rotate(6deg); } 45% { transform: rotate(-4deg); } 70% { transform: rotate(2deg); } 100% { transform: rotate(0); } }
@keyframes swing { 0% { transform: rotate(0); } 15% { transform: rotate(14deg); } 40% { transform: rotate(-9deg); } 65% { transform: rotate(5deg); } 100% { transform: rotate(0); } }
@keyframes ding { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.ding { transform-box: fill-box; transform-origin: 50% 100%; }

/* ---------- Ribbons ---------- */
.ribbons { background: var(--soil); color: var(--paper); padding: 1.4rem 0 1.8rem; position: relative; }
.ribbons::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--sand) 0 14px, transparent 14px 22px); opacity: .5; }
.ribbon-row { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1rem; }
.ribbon { display: flex; align-items: center; gap: .8rem; }
.rosette { position: relative; flex: none; width: 3.6rem; height: 5.4rem; color: var(--c); }
.rosette svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 2px rgba(0,0,0,.3)); }
.rosette b { position: absolute; left: 0; right: 0; top: 33.333%; transform: translateY(-50%); text-align: center; font-family: var(--display); font-weight: 400; font-size: 1.15rem; line-height: 1; color: var(--ink); }
.cap { font-family: var(--label); font-weight: 500; font-size: 1rem; line-height: 1.25; min-width: 0; overflow-wrap: break-word; }
@media (min-width: 52rem) { .ribbon-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Intro ---------- */
.intro { display: grid; gap: 2rem; padding-top: clamp(3rem, 8vw, 5.5rem); padding-bottom: clamp(3rem, 8vw, 5rem); align-items: center; }
.intro-text p { color: var(--ink-soft); }
.intro-text p:not(.eyebrow):not(.hillside-note) { max-width: 36rem; }
.hillside-note { display: flex; gap: .9rem; align-items: flex-start; background: var(--sage-pale); border-left: 4px solid var(--sage-deep); border-radius: 0 1rem 1rem 0; padding: 1rem 1.1rem; color: var(--ink) !important; margin-top: 1.4rem; }
.hillside-note svg { flex: none; width: 2.4rem; color: var(--sage-deep); margin-top: .2rem; }
.intro-photo img, .kit-photo img, .sp img { border-radius: 1rem; box-shadow: 0 1.2rem 2.4rem -1.2rem rgba(43,34,30,.45); }
.intro-photo { position: relative; }
.intro-photo figcaption { text-align: center; }
.intro-photo::after { content: ""; position: absolute; inset: .7rem -.7rem -.7rem .7rem; border: 2px dashed var(--sand); border-radius: 1.1rem; z-index: -1; }
figcaption { font-family: var(--label); font-weight: 500; font-size: .95rem; color: var(--ink-soft); margin-top: .7rem; }
@media (min-width: 60rem) { .intro { grid-template-columns: 1fr 1.25fr; gap: 3.5rem; } }

/* ---------- Kit ---------- */
.kit { background: var(--paper-2); padding: clamp(3rem, 8vw, 5rem) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kit-grid { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.kit-list { grid-column: 1 / -1; list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: 1rem; }
.kit-list li { display: flex; gap: 1rem; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: 1.1rem; padding: 1.1rem 1.2rem; }
.kit-list svg { flex: none; width: 3.8rem; height: 3.8rem; background: var(--sand-soft); border-radius: 50%; padding: .25rem; }
.kit-list h3 { font-family: var(--label); font-weight: 700; font-size: 1.22rem; color: var(--rust-deep); margin-bottom: .2rem; }
.kit-list p { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.kp2 { grid-column: 1; grid-row: 2; }
.kp1 { grid-column: 2; grid-row: 2; }
.kp1 img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.kp2 img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 80%; width: 100%; }
@media (min-width: 40rem) {
  .kit-list { grid-template-columns: 1fr 1fr; }
  .kp1 img { aspect-ratio: 1 / 1.02; object-position: 50% 62%; }
}
@media (min-width: 60rem) {
  .kit-list { grid-template-columns: repeat(4, 1fr); }
  .kit-list li { flex-direction: column; gap: .8rem; }
}

/* ---------- Scorekeeper ---------- */
.keep { background: var(--iron); color: var(--paper); padding: clamp(3rem, 8vw, 5.5rem) 0; position: relative;
  background-image: radial-gradient(rgba(239,216,160,.07) 1px, transparent 1.4px); background-size: 14px 14px; }
.keep h2 { color: var(--paper); }
.keep-sub { color: #d9cdb9; max-width: 38rem; }
.keep-grid { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 60rem) { .keep-grid { grid-template-columns: 1.35fr 1fr; gap: 2.2rem; } }

/* The scorecard lives on its own page now (/horseshoes/score/, css/score.css). This is the way in. */
.open { background: #3a302c; border: 2px solid #4d413c; border-radius: 1.4rem; padding: clamp(1.1rem, 3vw, 1.6rem); box-shadow: 0 1.5rem 3rem -1.5rem rgba(0,0,0,.7); }
.open-steps { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .8rem; }
.open-steps li { display: flex; gap: .9rem; align-items: center; }
.open-n { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 1.1rem; color: var(--ink); background: var(--sand); box-shadow: 0 0 0 3px rgba(239,216,160,.25); }
.open-steps p { margin: 0; font-family: var(--label); font-weight: 500; font-size: 1.12rem; line-height: 1.3; color: var(--paper); }
.open-steps b { color: var(--sand); }
.pill-sand { background: var(--sand); color: var(--ink); box-shadow: 0 3px 0 var(--sand-deep); }
@media (hover: hover) { .pill-sand:hover { background: #e6bd68; } }
.open-btn { width: 100%; min-height: 3.6rem; font-size: 1.12rem; }

/* The rules card: a fair entry tag, with a punched hole and string. */
.rules { position: relative; background: var(--paper); color: var(--ink); border-radius: 1.2rem; padding: 2.4rem clamp(1.1rem, 3vw, 1.7rem) 1.4rem; box-shadow: 0 1.5rem 3rem -1.5rem rgba(0,0,0,.7); background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(63,127,163,.07) 27px 28px); }
.tag-hole { position: absolute; top: .9rem; left: 50%; width: 1rem; height: 1rem; margin-left: -.5rem; border-radius: 50%; background: var(--iron); box-shadow: 0 0 0 4px var(--sand); }
.rules-k { font-family: var(--label); font-weight: 700; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--creek-deep); text-align: center; margin: .5rem 0 .2rem; }
.rules h3 { font-family: var(--display); font-size: 1.8rem; text-align: center; color: var(--rust); margin-bottom: 1.1rem; }
.rules-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.rules-list li { display: flex; gap: .9rem; align-items: flex-start; padding-bottom: .9rem; border-bottom: 1px dashed var(--line); }
.rules-list svg { flex: none; width: 3rem; height: 2.4rem; }
.rules-list li:last-child svg { height: 3.2rem; }
.rules-list h4 { font-family: var(--label); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.pts { display: inline-block; margin-left: .35rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; background: var(--sand-soft); color: var(--rust-deep); border-radius: 999px; padding: .05rem .55rem; vertical-align: .12em; }
.rules-list p { margin: .15rem 0 0; font-size: .98rem; color: var(--ink-soft); }
.rules-foot { margin: 1rem 0 0; font-size: .95rem; color: var(--ink); font-style: italic; }

/* ---------- Stream ---------- */
.stream { position: relative; background: var(--creek-pale); padding: clamp(4rem, 9vw, 6rem) 0 clamp(3rem, 8vw, 5rem); }
.stream-top { position: absolute; top: -1px; left: 0; width: 100%; height: 3rem; color: var(--iron); }
.stream-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stream-text { grid-column: 1 / -1; max-width: 40rem; margin-bottom: 1rem; }
.stream-text p:not(.eyebrow) { color: #2f4450; }
.sp5 { grid-column: 1 / -1; }

@media (min-width: 60rem) {
  .stream-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.4rem; align-items: start; }
  .stream-text { grid-column: 1 / 6; grid-row: 1 / 3; }
  .sp1 { grid-column: 6 / 9; grid-row: 1; }
  .sp2 { grid-column: 9 / 13; grid-row: 1; margin-top: 3rem; }
  .sp3 { grid-column: 1 / 6; grid-row: 2; margin-top: 1rem; }
  .sp4 { grid-column: 6 / 9; grid-row: 2; margin-top: 2rem; }
  .sp5 { grid-column: 3 / 11; grid-row: 2; margin-top: 2rem; }
}

/* ---------- Program ---------- */
.day { padding-top: clamp(3rem, 8vw, 5rem); padding-bottom: clamp(3rem, 8vw, 5rem); }
.program { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: prog; }
.program li { counter-increment: prog; position: relative; background: #fff8ea; border: 2px solid var(--line); border-radius: 1.1rem; padding: 1.2rem 1.2rem 1rem 4.2rem; }
.program li::before { content: counter(prog); position: absolute; left: 1rem; top: 1rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 1.1rem; color: var(--paper); background: var(--rust); box-shadow: 0 0 0 3px var(--sand-soft); }
.program .when { display: block; font-family: var(--label); font-weight: 700; font-size: 1.15rem; color: var(--rust-deep); margin-bottom: .2rem; }
.program p { margin: 0; color: var(--ink-soft); }
@media (min-width: 52rem) { .program { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Evening ---------- */
.evening { position: relative; min-height: clamp(26rem, 60vw, 38rem); display: flex; align-items: flex-end; padding: 2rem var(--gutter); color: var(--paper); isolation: isolate; }
.evening-photo { position: absolute; inset: 0; z-index: -2; }
.evening-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.evening::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,18,30,.0) 30%, rgba(20,16,14,.82) 100%); }
.evening-card { max-width: 34rem; margin: 0 auto 0 max(0px, calc((100% - 72rem) / 2)); background: rgba(28,21,18,.78); border: 1px solid rgba(239,216,160,.25); border-radius: 1.2rem; padding: clamp(1.2rem, 3vw, 1.8rem); }
.evening-card p:last-child { margin-bottom: 0; }
.evening-card h2 { color: var(--paper); }
.evening-card p:not(.eyebrow) { color: #f1e6d2; }

/* ---------- Good to know ---------- */
.good { padding-top: clamp(3rem, 8vw, 4.5rem); padding-bottom: clamp(3rem, 8vw, 4.5rem); }
.good-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.good-list li { background: #fff8ea; border-radius: 1rem; padding: 1.1rem 1.2rem; border-top: 4px solid var(--sage); color: var(--ink-soft); }
.good-list strong { display: block; font-family: var(--label); font-weight: 700; font-size: 1.15rem; color: var(--ink); margin-bottom: .2rem; }
.good-list a { color: var(--rust); font-weight: 600; }
@media (min-width: 52rem) { .good-list { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Stay ---------- */
.stay { position: relative; padding: clamp(4rem, 10vw, 7rem) var(--gutter); isolation: isolate; }
.stay-photo { position: absolute; inset: 0; z-index: -2; }
.stay-photo img { width: 100%; height: 100%; object-fit: cover; }
.stay::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(30,22,20,.35); }
.stay-card { position: relative; max-width: 36rem; margin: 0 auto; background: var(--paper); border-radius: 1.4rem; padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: 0 2rem 4rem -1.5rem rgba(0,0,0,.6); border: 2px solid var(--sand-soft); }
.stay-rosette { position: absolute; top: -1.6rem; right: 1.4rem; width: 3.4rem; height: 5.1rem; color: var(--rust); filter: drop-shadow(0 3px 2px rgba(0,0,0,.3)); }
.stay-card p { color: var(--ink-soft); }
.facts { list-style: none; margin: 1.2rem 0 1.4rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.facts li { text-align: center; font-family: var(--label); font-weight: 500; font-size: .85rem; line-height: 1.2; color: var(--ink-soft); background: var(--paper-2); border-radius: .9rem; padding: .7rem .3rem; }
.facts span { display: block; font-family: var(--display); font-size: 1.6rem; color: var(--rust); margin-bottom: .15rem; }
.stay-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1rem; }
.small { font-size: .9rem; margin: 0; }

/* ---------- Footer ---------- */
.foot { background: var(--iron); color: #d9cdb9; padding: 3rem 0 1.5rem; }
.foot-grid { display: grid; gap: 2rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.foot a { text-decoration: none; }
@media (hover: hover) { .foot a:hover { color: var(--sand); } }
.brand-foot { color: var(--paper); margin-bottom: .8rem; }
.foot-h { font-family: var(--label); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .85rem; color: var(--sand); margin-bottom: .6rem; }
.copy { margin-top: 2.4rem; font-size: .85rem; opacity: .7; }
@media (min-width: 52rem) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

/* The basics: a pill on the scorecard that opens the rules. Plain <details>, so it works without JavaScript. */
.basics { margin: 1rem 0 0; }
.basics-pill { list-style: none; display: inline-flex; cursor: pointer; background: transparent; color: var(--paper); border: 2px solid var(--sand); min-height: 2.75rem; padding: .45rem 1.2rem; }
.basics-pill::-webkit-details-marker { display: none; }
.basics-pill::before { content: "+"; margin-right: .45rem; font-weight: 700; color: var(--sand); }
.basics[open] .basics-pill { background: var(--sand); color: var(--ink); }
.basics[open] .basics-pill::before { content: "\2212"; color: var(--ink); }
.basics-body { margin-top: .8rem; background: var(--paper); color: var(--ink); border-radius: 1.1rem; padding: 1.1rem 1.2rem .6rem; }
.basics-body h3 { font-family: var(--display); font-size: 1.5rem; margin: 0 0 .6rem; color: var(--rust-deep); }
.basics-body dl { margin: 0; }
.basics-body dt { font-family: var(--label); font-weight: 700; letter-spacing: .04em; color: var(--ink); margin-top: .7rem; }
.basics-body dd { margin: .15rem 0 0; color: var(--ink-soft); line-height: 1.5; }
.basics-body b { color: var(--rust-deep); }
@media (hover: hover) { .basics-pill:hover { background: rgba(220,174,85,.18); } }