/* Mini Barn Market, illustrated (MOCKUP)
   The Lodge's sibling. Same poster language (inline-SVG illustration, painted
   signs, pill controls, hill lines between bands), in the barn's own colours:
   barn red, cream, deep barn-wood brown, warm gold and a touch of sage.
   Roboto Slab for lettering (the nearest match to the logo's slab), Caveat
   Brush for anything hand-painted or chalked, Literata for reading. */

:root {
  --barn: #c1272d;
  --barn-dk: #8e1f24;
  --barn-deep: #6a161b;
  --cream: #fbf6e7;
  --paper: #f4e8cf;
  --paper-2: #efe0c2;
  --wood: #4a2c1d;
  --wood-dk: #2e1b12;
  --wood-lt: #6b4129;
  --gold: #f2b43c;
  --gold-soft: #ffd98a;
  --gold-ink: #8a6410;
  --sage: #8fa383;
  --sage-dk: #4f6247;
  --dusk: #221a26;
  --dusk-2: #2b2133;
  --night: #1d1620;
  --ink: #2a1d16;
  --ink-soft: #5a4a3f;
  --slab: "Roboto Slab", Rockwell, Georgia, serif;
  --brush: "Caveat Brush", "Segoe Print", cursive;
  --body: "Literata", Georgia, serif;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
@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.65; overflow-x: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 1rem; }
figure, blockquote { margin: 0; }
section { scroll-margin-top: 1rem; }

.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 44rem; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--gold); color: var(--ink); padding: .6rem 1.1rem; border-radius: 999px; font-family: var(--slab); font-weight: 700; }
.skip:focus { left: 1rem; top: 1rem; }
.hp { position: absolute; left: -9999px; }

.eyebrow { font-family: var(--slab); font-weight: 700; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 .8rem; }
.eyebrow-barn { color: var(--barn); }
.eyebrow-gold { color: var(--gold); }

/* ---------- Pills: every control is a pill ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.9rem; padding: .7rem 1.4rem; border-radius: 999px; font-family: var(--slab); font-weight: 700; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; text-align: center; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.pill-gold { background: var(--gold); color: var(--wood-dk); }
.pill-barn { background: var(--barn); color: var(--cream); }
.pill-ghost { border-color: rgba(251,246,231,.7); color: var(--cream); background: rgba(29,22,32,.25); }
.pill-line { border-color: var(--wood); color: var(--wood); }
@media (hover: hover) {
  .pill-gold:hover { box-shadow: 0 0 1.4rem rgba(242,180,60,.6); transform: translateY(-1px); }
  .pill-barn:hover { background: var(--barn-dk); transform: translateY(-1px); }
  .pill-ghost:hover { background: var(--cream); color: var(--ink); }
  .pill-line:hover { background: var(--wood); color: var(--cream); }
}
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------- Hero ---------- */
.hero { position: relative; color: var(--cream); overflow: hidden; isolation: isolate;
  background:
    radial-gradient(40rem 26rem at 78% 36%, rgba(242,180,60,.16), transparent 70%),
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(253,243,216,.8), transparent),
    radial-gradient(1px 1px at 28% 8%, rgba(253,243,216,.7), transparent),
    radial-gradient(1.5px 1.5px at 44% 26%, rgba(253,243,216,.6), transparent),
    radial-gradient(1px 1px at 6% 46%, rgba(253,243,216,.6), transparent),
    radial-gradient(1px 1px at 36% 58%, rgba(253,243,216,.5), transparent),
    radial-gradient(1.5px 1.5px at 92% 10%, rgba(253,243,216,.7), transparent),
    linear-gradient(180deg, #151428 0%, #241c33 50%, #33283a 100%);
}

.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; padding: 1rem var(--gutter); max-width: 80rem; margin: 0 auto; position: relative; z-index: 3; }
.brand { display: block; flex: none; }
.brand img { width: clamp(132px, 15vw, 210px); height: auto; filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
.nav { display: flex; flex-wrap: wrap; gap: .45rem; margin-left: auto; }
.nav a { display: inline-flex; align-items: center; min-height: 2.4rem; padding: .35rem .95rem; border-radius: 999px; border: 2px solid rgba(251,246,231,.28); font-family: var(--slab); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--cream); }
.nav a[aria-current="page"] { background: var(--barn); border-color: var(--barn); }
@media (hover: hover) { .nav a:hover { border-color: var(--gold); color: var(--gold-soft); } .nav a[aria-current="page"]:hover { color: var(--cream); } }
@media (max-width: 34rem) {
  .topbar { justify-content: center; }
  .nav { margin-left: 0; justify-content: center; }
  .nav a { font-size: .72rem; padding: .3rem .8rem; letter-spacing: .1em; }
}

.hero-grid { display: grid; gap: 2.2rem; max-width: 80rem; margin: 0 auto; padding: clamp(1rem, 4vw, 3rem) var(--gutter) 0; position: relative; z-index: 2; }
.hero-text { align-self: center; }
.lamp { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.2rem; padding: .4rem 1rem; border-radius: 999px; background: rgba(242,180,60,.12); border: 2px solid rgba(242,180,60,.5); font-family: var(--slab); font-weight: 700; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); }
.lamp i { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(242,180,60,.22), 0 0 14px rgba(242,180,60,.9); }
.js .lamp i { animation: glow 3.6s ease-in-out infinite; }
@keyframes glow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.hero h1 { font-family: var(--slab); font-weight: 800; font-size: clamp(2.9rem, 11vw, 5.6rem); line-height: .95; letter-spacing: .01em; text-transform: uppercase; color: var(--cream); text-shadow: 0 4px 0 var(--barn-deep), 0 0 2.5rem rgba(242,180,60,.25); margin-bottom: 1.3rem; }
.hero h1 em { font-style: normal; color: var(--gold); }
.lede { font-size: clamp(1.08rem, 2.2vw, 1.25rem); line-height: 1.6; max-width: 33rem; color: rgba(251,246,231,.9); margin-bottom: 1.7rem; }

.poster { width: 100%; max-width: 30rem; margin: 0 auto; justify-self: center; }
.scene { display: block; width: 100%; height: auto; border-radius: .35rem; box-shadow: 0 2rem 4rem rgba(0,0,0,.55), 0 0 0 1px rgba(251,246,231,.15); }

/* Movement only, never opacity, so the words are there whether or not the
   animation runs. */
.js .hero-text { animation: rise 1.1s cubic-bezier(.2,.7,.2,1) .2s backwards; }
.js .poster { animation: rise 1.3s cubic-bezier(.2,.7,.2,1) .35s backwards; }
@keyframes rise { from { transform: translateY(1.2rem); } to { transform: none; } }

@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); gap: 4rem; padding-top: 2.5rem; }
  .poster { margin: 0; max-width: 32rem; }
}
.hero-ridge { display: block; width: 100%; height: clamp(70px, 10vw, 150px); margin-top: -2.5rem; position: relative; z-index: 1; }

/* The scene: lit at rest. */
.js .scene .flame { animation: flicker 3.4s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 22% { opacity: .82; } 30% { opacity: 1; } 61% { opacity: .9; } 70% { opacity: 1; } }
.js .tw { animation: twinkle 4.2s ease-in-out infinite; }
.js .tw2 { animation-delay: -1.4s; }
.js .tw3 { animation-delay: -2.8s; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.banner { transform-box: fill-box; transform-origin: 50% 0; }
.js .banner { animation: sway 5.5s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }

/* ---------- The ticker: a barn-wood plank ---------- */
.strip { overflow: hidden; padding-block: .9rem; color: var(--gold-soft);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 12px, rgba(0,0,0,.14) 12px 13px, rgba(0,0,0,0) 13px 26px),
    linear-gradient(180deg, var(--wood), #3d2418);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.25); }
.strip-track { display: flex; width: max-content; }
.js .strip-track { animation: slide 52s linear infinite; }
.strip-track span { font-family: var(--slab); font-weight: 700; font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; padding-inline: 1.4rem; white-space: nowrap; }
.strip-track span::after { content: "\2605"; margin-left: 2.8rem; color: var(--barn); font-size: .9em; text-shadow: 0 0 0 var(--barn); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Section heads ---------- */
.section-head { max-width: 48rem; margin-bottom: 2.6rem; }
.section-head h2, .shelf h2, .ig h2, .mapband h2, .signup h2, .stay h2 { font-family: var(--slab); font-weight: 800; font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.05; letter-spacing: .005em; text-transform: uppercase; margin-bottom: 1rem; }
.section-head h2 em, .ig h2 em { font-style: normal; }
.section-head p:not(.eyebrow) { font-size: 1.1rem; color: var(--ink-soft); max-width: 40rem; }

/* ---------- The stand: trust, and the three steps ---------- */
.trust { padding: clamp(3rem, 7vw, 5.5rem) 0; background:
  radial-gradient(46rem 20rem at 90% 10%, rgba(193,39,45,.07), transparent 70%), var(--paper); }
.trust h2 { color: var(--wood); }
.trust h2 em { color: var(--barn); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }
.step { position: relative; background: var(--cream); border-radius: 1rem; padding: 1.4rem 1.4rem 1.5rem; box-shadow: 0 .8rem 1.8rem rgba(74,44,29,.12); border-top: 6px solid var(--barn); }
.step-art { display: block; width: 100%; max-width: 13rem; height: auto; margin: 0 auto .6rem; }
@media (max-width: 47.99rem) { .step-art { max-width: 9.5rem; } }
.step-n { position: absolute; top: -1.15rem; left: 1.2rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 999px; background: var(--wood); color: var(--gold-soft); font-family: var(--slab); font-weight: 800; font-size: 1.1rem; box-shadow: 0 0 0 4px var(--paper); }
.step h3 { font-family: var(--slab); font-weight: 800; font-size: 1.3rem; line-height: 1.15; color: var(--barn-dk); margin-bottom: .4rem; }
.step p { margin: 0; color: var(--ink-soft); }

/* One quick hop for each step's picture as the section arrives. Gravity, not
   float: ~0.2 s up on a quad ease-out, ~0.2 s down on a quad ease-in. */
.step-art { transform-origin: 50% 100%; }
.js .trust.in .step-art { animation: hop .4s backwards; }
.js .trust.in .step:nth-child(2) .step-art { animation-delay: .12s; }
.js .trust.in .step:nth-child(3) .step-art { animation-delay: .24s; }
@keyframes hop {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.25,.46,.45,.94); }
  50% { transform: translateY(-14px); animation-timing-function: cubic-bezier(.55,.085,.68,.53); }
  100% { transform: translateY(0); }
}

/* ---------- The shelf: a chalkboard in a barn-wood frame ---------- */
.shelf { padding: clamp(3rem, 7vw, 5.5rem) 0; background: var(--paper-2); }
.shelf-grid { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 60rem) { .shelf-grid { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; } }
.chalk { min-width: 0; }
.chalk-board { position: relative; padding: clamp(1.4rem, 4vw, 2.4rem); border-radius: .9rem; color: #f3efe4;
  background:
    radial-gradient(30rem 16rem at 30% 20%, rgba(255,255,255,.06), transparent 70%),
    radial-gradient(20rem 12rem at 80% 90%, rgba(255,255,255,.04), transparent 70%),
    #23302a;
  box-shadow: 0 1.2rem 2.6rem rgba(46,27,18,.35), inset 0 0 0 10px var(--wood-lt), inset 0 0 0 14px var(--wood), inset 0 0 0 16px rgba(0,0,0,.25), inset 0 0 3rem rgba(0,0,0,.35);
  padding-left: clamp(1.8rem, 5vw, 2.8rem); padding-right: clamp(1.8rem, 5vw, 2.8rem); }
.shelf .chalk-board h2 { font-family: var(--brush); font-weight: 400; text-transform: none; letter-spacing: .01em; font-size: clamp(2.3rem, 6vw, 3.2rem); color: var(--gold-soft); margin: .2rem 0 .6rem; transform: rotate(-1.5deg); transform-origin: left center; }
.chalk-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .1rem; }
@media (min-width: 34rem) { .chalk-list { grid-template-columns: 1fr 1fr; column-gap: 1.4rem; } }
.chalk-list li { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; font-family: var(--brush); font-size: clamp(1.35rem, 3.6vw, 1.6rem); line-height: 1.15; border-bottom: 2px dashed rgba(243,239,228,.18); }
.chalk-list svg { flex: none; width: 2.3rem; height: 2.3rem; fill: none; stroke: #f3efe4; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.chalk-note { margin: .6rem 0 0; }
.pill-chalk { min-height: 2.6rem; padding: .4rem 1.2rem; font-family: var(--brush); font-weight: 400; font-size: clamp(1.15rem, 3.2vw, 1.3rem); letter-spacing: .02em; text-transform: none; color: var(--gold-soft); border-color: rgba(255,217,138,.6); }
.pill-chalk::after { content: " \2192"; }
@media (hover: hover) { .pill-chalk:hover { background: rgba(255,217,138,.12); border-color: var(--gold-soft); } }
.snap { background: #fffdf6; padding: .7rem .7rem 2.4rem; border-radius: .3rem; box-shadow: 0 1.2rem 2.4rem rgba(46,27,18,.25); transform: rotate(1.6deg); max-width: 34rem; justify-self: center; }
.snap img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: .15rem; }

/* ---------- Instagram ---------- */
.ig { position: relative; color: var(--cream); padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem); background:
  radial-gradient(50rem 22rem at 50% 0%, rgba(242,180,60,.12), transparent 70%), var(--dusk); }
.ig h2 { color: var(--cream); }
.ig h2 em { color: var(--gold); }
.ig-lede { font-size: 1.1rem; color: rgba(251,246,231,.82); max-width: 36rem; }
.ig-head { display: grid; gap: 1rem; align-items: end; margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); }
@media (min-width: 56rem) { .ig-head { grid-template-columns: 1fr auto; } }
.ig-handle { display: inline-flex; align-items: center; min-height: 2.9rem; padding: .55rem 1.3rem; border-radius: 999px; border: 2px solid rgba(242,180,60,.6); font-family: var(--slab); font-weight: 700; font-size: 1.05rem; color: var(--gold-soft); text-decoration: none; }
@media (hover: hover) { .ig-handle:hover { background: rgba(242,180,60,.12); } }
.ig-mark { width: 24px; height: 24px; margin-right: .55rem; }
.ig-mark rect, .ig-mark circle { fill: none; stroke: currentColor; stroke-width: 1.8; }

/* The tiles are captioned links first and embeds second. The frame is
   appended invisible and only takes over once Instagram has reported its
   height back. Ported from site.css so every tier still behaves. */
.ig-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; margin-bottom: 2rem; }
@media (min-width: 34rem) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }
.ig-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 17rem; padding: 1.5rem; border-radius: 1rem; overflow: hidden; text-decoration: none; color: var(--cream);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 38px, rgba(0,0,0,.12) 38px 40px),
    linear-gradient(180deg, #5a3522, var(--wood-dk));
  box-shadow: inset 0 0 0 2px rgba(255,217,138,.18); transition: box-shadow .2s ease, transform .2s ease; }
.ig-tile::before { content: ""; position: absolute; inset: 10px; border: 2px dashed rgba(255,217,138,.28); border-radius: .7rem; pointer-events: none; }
@media (hover: hover) { .ig-tile:hover { box-shadow: inset 0 0 0 2px var(--gold); transform: translateY(-2px); } }
.ig-cap { position: relative; z-index: 2; font-family: var(--brush); font-size: 1.55rem; line-height: 1.15; color: var(--cream); margin-bottom: .9rem; }
.ig-open { position: relative; z-index: 2; align-self: flex-start; padding: .3rem .85rem; border-radius: 999px; background: var(--gold); color: var(--wood-dk); font-family: var(--slab); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ig-open::after { content: " \2192"; }

/* tier 3: the live feed */
.ig-grid.is-feed .ig-tile { min-height: 0; padding: 0; aspect-ratio: 4 / 5; }
.ig-tile.is-live-feed { padding: 0; }
.ig-tile img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.3,1); }
@media (hover: hover) { .ig-tile:hover img { transform: scale(1.06); } }
.ig-tile.is-live-feed::before { display: block; z-index: 1; inset: auto 0 0 0; height: 72%; border: 0; border-radius: 0;
  background: linear-gradient(180deg, rgba(29,22,32,0) 0%, rgba(29,22,32,.55) 45%, rgba(29,22,32,.95) 100%); }
.ig-tile.is-live-feed .ig-cap { font-size: 1.2rem; line-height: 1.2; margin: 0 1.2rem .55rem; text-shadow: 0 1px 12px rgba(0,0,0,.85); }
.ig-tile.is-live-feed .ig-open { margin: 0 1.2rem 1.2rem; }
.ig-play { position: absolute; z-index: 2; top: .9rem; right: .9rem; width: 30px; height: 30px; border-radius: 50%; background: rgba(29,22,32,.66); }
.ig-play::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; margin-left: 12px; border-left: 10px solid var(--cream); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

/* tier 2: parked out of the way until MEASURE arrives */
.ig-tile iframe { position: absolute; left: -9999px; top: 0; width: 100%; height: 26rem; border: 0; display: block; background: #fff; }
.ig-tile.is-live { padding: 0; min-height: 0; background: #fff; box-shadow: none; }
.ig-tile.is-live::before { display: none; }
.ig-tile.is-live .ig-cap, .ig-tile.is-live .ig-open { display: none; }
.ig-tile.is-live iframe { position: static; }

/* ---------- Visit / Always open / Pay your way ---------- */
.trio-band { position: relative; background: var(--paper); padding: 0 0 clamp(3rem, 7vw, 5rem); }
.trio-ridge { display: block; width: 100%; height: clamp(40px, 6vw, 90px); margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.trio { display: grid; gap: 1.4rem; }
@media (min-width: 52rem) { .trio { grid-template-columns: repeat(3, 1fr); } }
.cell { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--cream); border-radius: 1rem; padding: 1.6rem 1.4rem 1.6rem; box-shadow: 0 .8rem 1.8rem rgba(74,44,29,.1); }
.badge { width: 6.5rem; height: 6.5rem; margin-bottom: .9rem; }
.cell h3 { font-family: var(--slab); font-weight: 800; font-size: 1.45rem; text-transform: uppercase; color: var(--wood); line-height: 1.1; }
.cell .subhead { font-family: var(--brush); font-size: 1.45rem; color: var(--barn); margin: .15rem 0 .6rem; transform: rotate(-1.5deg); }
.cell p:not(.subhead) { color: var(--ink-soft); max-width: 22rem; }
.cell .btn-row { margin-top: auto; padding-top: .6rem; justify-content: center; }

/* ---------- The map: on barn red ---------- */
.mapband { color: var(--cream); padding: clamp(3.5rem, 8vw, 6rem) 0; background:
  repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 46px, rgba(0,0,0,.08) 46px 48px),
  linear-gradient(180deg, var(--barn-dk), #7a1a1f); }
.map-grid { display: grid; gap: 2.6rem; align-items: center; }
@media (min-width: 60rem) { .map-grid { grid-template-columns: 1.1fr .9fr; gap: 3.5rem; } }
.mapband h2 { color: var(--cream); }
.mapband p { color: rgba(251,246,231,.9); }
.mapshot { position: relative; background: var(--cream); padding: .7rem; border-radius: .3rem; box-shadow: 0 1.4rem 2.8rem rgba(0,0,0,.4); transform: rotate(-1.4deg); }
.mapshot img { width: 100%; border-radius: .15rem; }
.tape { position: absolute; top: -.8rem; width: 6rem; height: 1.6rem; background: rgba(255,217,138,.75); box-shadow: 0 2px 4px rgba(0,0,0,.15); }
.tape-l { left: 1.2rem; transform: rotate(-6deg); }
.tape-r { right: 1.2rem; transform: rotate(5deg); }
.quote { margin: 1.4rem 0 1.6rem; padding: 0 0 0 1.2rem; border-left: 4px solid var(--gold); }
.quote p { font-family: var(--brush); font-size: clamp(1.4rem, 3.4vw, 1.75rem); line-height: 1.25; color: var(--gold-soft); margin: 0 0 .5rem; }
.quote footer { font-family: var(--slab); font-weight: 700; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(251,246,231,.8); }

/* ---------- Newsletter ---------- */
.signup { padding: clamp(3.5rem, 8vw, 5.5rem) 0; background:
  radial-gradient(40rem 18rem at 10% 0%, rgba(143,163,131,.18), transparent 70%), var(--paper); }
.form-card { position: relative; background: var(--cream); border-radius: 1rem; padding: clamp(1.5rem, 4vw, 2.6rem); padding-top: clamp(2.6rem, 5vw, 3rem); box-shadow: 0 1.4rem 3rem rgba(74,44,29,.18); border-top: 8px solid var(--sage-dk); }
.envelope { position: absolute; top: -2.4rem; right: clamp(1rem, 4vw, 2rem); width: 5.5rem; height: auto; transform: rotate(6deg); filter: drop-shadow(0 6px 8px rgba(46,27,18,.2)); }
.signup h2 { color: var(--wood); }
.form-lede { color: var(--ink-soft); font-size: 1.08rem; }
.field-pair { display: grid; gap: 0 1rem; }
@media (min-width: 34rem) { .field-pair { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .35rem; margin-bottom: 1.05rem; }
.field label { font-family: var(--slab); font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.field input { font: inherit; font-size: 1rem; padding: .8rem 1.2rem; width: 100%; min-width: 0; border: 2px solid #dccbab; border-radius: 999px; background: #fffdf6; color: var(--ink); }
.field input:focus { outline: none; border-color: var(--barn); box-shadow: 0 0 0 3px rgba(193,39,45,.18); }
.form-card form .pill { margin-top: .3rem; }
.fine { margin: 1.1rem 0 0; font-size: .88rem; color: var(--ink-soft); }

/* ---------- Stay a while ---------- */
.stay { padding: clamp(1rem, 4vw, 2rem) var(--gutter) clamp(3.5rem, 8vw, 5.5rem); background: var(--paper); }
.stay-card { max-width: 42rem; margin: 0 auto; background: var(--cream); border-radius: 1rem; overflow: hidden; box-shadow: 0 1.4rem 3.2rem rgba(74,44,29,.2); border-top: 8px solid var(--barn); }
.stay-art { display: block; width: 100%; height: clamp(90px, 18vw, 130px); }
.stay-body { padding: clamp(1.4rem, 4vw, 2.4rem); text-align: center; }
.stay h2 { color: var(--wood); }
.stay-body p:not(.eyebrow) { color: var(--ink-soft); }
.stay .btn-row { justify-content: center; }

/* ---------- Footer ---------- */
.foot { position: relative; background: var(--night); color: rgba(251,246,231,.8); padding: 0 0 1.6rem; font-size: .95rem; }
.foot-ridge { display: block; width: 100%; height: clamp(36px, 5vw, 80px); background: var(--paper); margin-bottom: 2rem; }
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .foot-grid { grid-template-columns: 2fr 1fr 1fr; } }
.foot-mark { width: 120px; height: auto; margin-bottom: 1rem; }
.foot h2 { font-family: var(--slab); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .78rem; color: var(--gold); margin-bottom: .7rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .4rem; }
.foot a { text-decoration: none; }
@media (hover: hover) { .foot a:hover { color: var(--gold-soft); } }
.foot-fine { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(251,246,231,.14); font-size: .82rem; color: rgba(251,246,231,.6); }
.sisters { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }

@media (prefers-reduced-motion: reduce) {
  .js .hero-text, .js .poster, .js .tw, .js .banner, .js .scene .flame, .js .lamp i, .js .strip-track, .js .trust.in .step-art { animation: none; }
}

/* Print: keep each card, board and picture on one page. */
@media print {
  .step, .cell, .form-card, .stay-card, .chalk-board, .poster, .mapshot, .snap, .ig-tile, .quote { break-inside: avoid; }
  .section-head h2, .ig h2, .mapband h2, .signup h2, .stay h2 { break-after: avoid; }
}

/* Tablet and print widths: steps and badges sit beside their words
   instead of stacking into tall, mostly empty cards. */
@media (min-width: 34rem) and (max-width: 47.99rem) {
  .step { display: grid; grid-template-columns: 9.5rem 1fr; column-gap: 1.4rem; align-items: center; }
  .step-art { grid-row: 1 / 3; margin: 0; }
  .step h3, .step p { grid-column: 2; }
  .step h3 { align-self: end; }
  .step p { align-self: start; }
}
@media (min-width: 34rem) and (max-width: 51.99rem) {
  .cell { display: grid; grid-template-columns: 6.5rem 1fr; column-gap: 1.6rem; text-align: left; align-items: start; }
  .cell .badge { grid-row: 1 / 5; margin: 0; }
  .cell > :not(.badge) { grid-column: 2; }
  .cell .btn-row { justify-content: flex-start; padding-top: .2rem; }
  .cell .subhead { transform-origin: left center; }
}