/* ==========================================================================
   Jack Ranch Cafe & Market -- page sections (hero, about, history, favorites, reviews, visit)
   index / about / history / contact -- base.css ke saath load hoti hai.
   ========================================================================== */

/* =================================================================== HERO = */
/* The whole photo must be visible -- never cropped. Two things make that work:
   the hero carries the photo's own aspect ratio, and the background uses
   `contain` rather than `cover`. At the ratio the two are identical and the
   image fills edge to edge; if anything ever forces a different ratio,
   `contain` still shows the complete photo and the dark hero colour fills the
   remainder, instead of slicing part of the image away.
   Note this rules out a zoom or a parallax drift on the photo -- both work by
   overflowing the frame, which is exactly the cropping we are avoiding. */
/* The band is a little shorter than the photograph's own ratio, so the hero
   takes less vertical room; `cover` with the framing pushed above centre pays
   for that out of the empty foreground at the bottom of the shot, leaving the
   sign, the porch and the sunset whole. Below 960px the stacked layout goes
   back to `contain` and shows the complete photo. */
.hero{
  position:relative;overflow:hidden;isolation:isolate;background:#f4e9d2;
  aspect-ratio:1665/730;
}
.hero__bg{
  position:absolute;inset:0;
  background:url("../img/hero-bg.png") 50% 26%/cover no-repeat;
}
/* Motion lives on its own overlay so the photograph itself stays untouched. */
.hero__glow{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(38% 55% at 20% 44%,rgba(255,206,130,.2),transparent 70%);
  animation:glowDrift 19s ease-in-out infinite alternate;
}
@keyframes glowDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(5%,-4%,0) scale(1.14)}
}
/* A warm CREAM wash, not a dark one. The heading artwork is solid dark brown
   (letter brightness sits around 48/255) so it needs a light ground: over the
   old dark vignette it measured 1.16:1. The photo's left side also carries very
   dark patches (5th-percentile luminance 26 -- trees and shadowed ground), so
   simply removing the vignette is not enough either; the wash has to actively
   lift that side. It thins out to the right so the storefront stays readable. */
.hero__vignette{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(250,243,228,.9) 0%,rgba(249,241,224,.8) 26%,
                          rgba(248,239,220,.45) 46%,rgba(246,236,216,.1) 62%,
                          rgba(40,24,15,.28) 100%);
}
.hero__inner{position:relative;z-index:2;height:100%;display:flex;align-items:center;padding-block:1.9rem}
/* The copy is centred on the wordmark rather than flush left: the traced
   artwork carries its own side padding, so a left-aligned paragraph sat off to
   one side of the lettering above it. */
.hero__copy{
  max-width:34rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}

/* ---- wordmark ---- */
/* The heading is the original painted artwork traced into vector outlines
   (assets/img/heading.png -> paths, inline in the markup). That keeps the
   letterforms exactly as drawn -- the spurs on the S, M and Y that no webfont
   we have reproduces -- while letting CSS own the colour, the texture and the
   motion, and it stays crisp at any size.
   Each line is drawn three times off one set of outlines via <use>: a lighter
   copy nudged up for the lit top edge, the gradient body over it, then a fine
   grain pattern on top. */
.wordmark{
  margin:0 0 1.15rem;line-height:0;
  filter:drop-shadow(0 7px 12px rgba(58,29,10,.36));
}
.wordmark__art{width:clamp(272px,39vw,520px);height:auto;display:block;overflow:visible}
.wordmark__line{
  animation:hdIn .95s var(--ease) both;animation-delay:calc(var(--d,0s) + .12s);
}
.wordmark__bevel{fill:#a8703c;transform:translateY(-2.5px)}
.wordmark__grain{fill:url(#wmGrain)}

/* ---- display headings ---- */
/* Every h1/h2 on the site wears the hero wordmark's finish, so the headings
   read as one family: a tone gradient poured through the glyphs, a lit top
   edge, a fine grain over it, and a soft drop shadow. The three background
   layers repeat every --hd-pitch down the block, which is what gives a
   two-line heading the same ramp on each line instead of one ramp stretched
   across both.
   Nested decorative bits (the gold stars, the rule strokes) opt out of the
   clipped fill and keep their own colour. */
.hd{
  /* The artwork's caps are narrower and taller than Alfa Slab One sets them --
     measured against the h1 artwork at matched cap height, the painted word is
     420px wide where Alfa Slab needs 559. The squeeze below plus the larger
     font sizes on each heading reproduce those proportions: same overall width
     as the design, but tall narrow letters instead of wide ones.
     (The spurs on the S, M and Y are the one thing this cannot reproduce --
     see the note on .wordmark.) */
  --hd-sx:.94;
  transform:scaleX(var(--hd-sx));transform-origin:left center;
  letter-spacing:.045em;line-height:1.16;
  --hd-pitch:1.16em;
  --hd-1:#7d4c27;--hd-2:#5b3116;--hd-3:#3b2010;--hd-4:#2b1509;--hd-5:#4d2b14;
  --hd-glint:rgba(255,226,182,.5);
  --hd-edge:#43240f;
  --hd-shadow:0 6px 11px rgba(58,29,10,.32);
  font-family:var(--f-west);font-weight:400;
  background-image:
    repeating-linear-gradient(92deg,rgba(255,224,180,.05) 0 1px,rgba(20,9,3,.07) 1px 4px),
    linear-gradient(180deg,var(--hd-glint) 0 4%,rgba(255,226,182,0) 14%),
    linear-gradient(177deg,var(--hd-1) 0%,var(--hd-2) 26%,var(--hd-3) 62%,
                           var(--hd-4) 88%,var(--hd-5) 100%);
  background-size:auto,100% var(--hd-pitch),100% var(--hd-pitch);
  background-repeat:repeat,repeat,repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.5px var(--hd-edge);
  filter:drop-shadow(var(--hd-shadow));
  opacity:0;
}
/* On the dark timber, brick and photographic panels the same finish is poured
   in cream and gold instead. */
.hd--light{
  --hd-1:#fff6e6;--hd-2:#f3e1c0;--hd-3:#e0c391;--hd-4:#c99e5c;--hd-5:#eddcb4;
  --hd-glint:rgba(255,255,255,.6);
  --hd-edge:#e7d3ae;
  --hd-shadow:0 8px 16px rgba(0,0,0,.55);
}
.hd b,.hd i{-webkit-text-fill-color:currentColor}
.sechead__title.hd,.reviews__title.hd,.why__title.hd{transform-origin:center}
/* A transform does not shrink the box, so a squeezed line wraps as if it were
   still full width. Headings in narrow columns get their box widened by
   1/--hd-sx, which puts the wrap point back where the eye expects it. Only
   those, though: doing it to a heading that already has room would push its
   (invisible) box past the edge of the page. */
.split__storyText h2{width:calc(100% / var(--hd-sx))}
.hd.is-in{animation:hdIn .95s var(--ease) both;animation-delay:var(--d,0s)}

/* One entrance for every heading: the block wipes up from its baseline while
   it rises the last few pixels. The rest state has to over-inset, or the clip
   would keep trimming the drop shadow once the animation settles. */
@keyframes hdIn{
  0%  {opacity:0;transform:translateY(20px) scaleX(var(--hd-sx,1));clip-path:inset(0 0 48% 0)}
  60% {opacity:1}
  100%{opacity:1;transform:scaleX(var(--hd-sx,1));clip-path:inset(-25% -8% -30% -8%)}
}

/* Screen-reader-only copy of the heading text: the artwork carries the visual,
   this carries the meaning. */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}


.hero__text{color:var(--ink);font-size:clamp(1rem,1.25vw,1.13rem);max-width:27rem}
.hero__cta{display:flex;justify-content:center;gap:1rem;margin-top:2rem;flex-wrap:wrap}
.hero__cta .btn--ghost{--fg:var(--wood);border-color:rgba(43,26,18,.75)}
.hero__cta .btn--ghost::before{background:var(--wood)}
.hero__cta .btn--ghost:hover{color:var(--cream)}

/* dust motes */
.dust{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.mote{
  position:absolute;bottom:-8%;border-radius:50%;
  background:radial-gradient(circle,rgba(150,96,38,.5),rgba(150,96,38,0) 70%);
  animation:float linear infinite;
}
@keyframes float{
  0%{transform:translate3d(0,0,0) scale(.6);opacity:0}
  12%{opacity:.85}
  88%{opacity:.5}
  100%{transform:translate3d(var(--dx,20px),-118vh,0) scale(1.25);opacity:0}
}

.scroll-cue{
  position:absolute;left:50%;bottom:1.5rem;z-index:3;translate:-50% 0;
  width:26px;height:44px;border:2px solid rgba(43,26,18,.45);border-radius:14px;
  display:grid;place-items:start center;padding-top:7px;
  transition:border-color .3s;
}
.scroll-cue:hover{border-color:var(--brick)}
.scroll-cue span{width:4px;height:8px;border-radius:2px;background:var(--brick);animation:wheel 1.6s var(--ease) infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(18px);opacity:0}}

/* =============================================================== FEATURES = */
/* The plaster band carries one enamel plaque, not four cards: a double-ruled
   cream panel with corner brackets, split into four bays by star-topped dashed
   dividers, with the medallions straddling the top edge. The plaster's
   brightest area is luminance 210, and the plaque itself is lighter again, so
   the headings sit near 11:1 and the copy near 5:1. */
.features{
  background-color:#e4d0b3;
  background-image:url("../img/background.png");
  background-image:image-set(url("../img/background.webp") type("image/webp"),
                             url("../img/background.png")  type("image/png"));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-block:1px solid rgba(125,31,31,.14);
  padding:var(--band) 0;
}
.features__head{text-align:center;margin-bottom:2.6rem}
.features__head .script{color:var(--brick);opacity:.9}
.features__rule{
  display:flex;align-items:center;justify-content:center;gap:.75rem;
  max-width:15rem;margin:.35rem auto 0;
}
.features__rule i{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(125,31,31,.55))}
.features__rule i:last-child{background:linear-gradient(270deg,transparent,rgba(125,31,31,.55))}
.features__rule b{color:#bd8526;font-size:.7rem}

/* ---- the plaque ---- */
.plaque{
  position:relative;border-radius:10px;
  background:linear-gradient(180deg,#fffdf6 0%,#fbf3e2 46%,#f4e8ce 100%);
  border:1px solid rgba(125,31,31,.3);
  /* the second, inner rule -- drawn with inset shadows so no extra element is
     needed and the radius stays consistent */
  box-shadow:0 28px 48px -30px rgba(43,26,18,.8),
             inset 0 0 0 5px rgba(255,255,255,.6),
             inset 0 0 0 6px rgba(211,164,92,.55),
             inset 0 1px 0 rgba(255,255,255,.8);
}
.plaque__corner{
  position:absolute;width:15px;height:15px;z-index:2;
  border:2px solid rgba(125,31,31,.55);
}
.plaque__corner--tl{left:11px;top:11px;border-right:0;border-bottom:0}
.plaque__corner--tr{right:11px;top:11px;border-left:0;border-bottom:0}
.plaque__corner--bl{left:11px;bottom:11px;border-right:0;border-top:0}
.plaque__corner--br{right:11px;bottom:11px;border-left:0;border-top:0}

.plaque__bays{display:grid;grid-template-columns:repeat(4,1fr)}
.bay{
  position:relative;text-align:center;
  padding:3.7rem 1.6rem 2.5rem;border-radius:8px;
  transition:background .45s var(--ease);
}
.bay:hover{background:radial-gradient(70% 80% at 50% 12%,rgba(125,31,31,.07),transparent 72%)}
/* star-topped dashed divider between bays */
.bay+.bay::before{
  content:"";position:absolute;left:0;top:2.7rem;bottom:2.1rem;width:1px;
  background:repeating-linear-gradient(180deg,rgba(125,31,31,.36) 0 5px,transparent 5px 12px);
}
.bay+.bay::after{
  content:"\2605";position:absolute;left:0;top:1rem;translate:-50% 0;
  font-size:.62rem;line-height:1;color:#bd8526;
}

/* ---- medallion straddling the top edge ---- */
/* The thick cream ring is the trick: it reads as a hole punched in the plaque
   with the enamel sitting in it, without masking the panel. */
.bay__medal{
  position:absolute;top:-30px;left:50%;translate:-50% 0;
  width:70px;height:70px;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  color:var(--cream);
  background:radial-gradient(circle at 34% 26%,var(--brick-lt),var(--brick) 58%,var(--brick-dk));
  border:6px solid #fffdf6;
  box-shadow:0 12px 20px -10px rgba(43,26,18,.9),
             inset 0 0 0 1px rgba(246,236,216,.25);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.bay__medal svg{width:27px;height:27px;fill:currentColor;transition:transform .5s var(--ease)}
/* Flat cream artwork -- medal ke laal enamel par wahi rang jo pehle SVG ka
   tha, isliye koi tint nahi chahiye. Height auto taaki har icon apna
   anupaat rakhe (burger chauda hai, cup lamba). */
.bay__medal img{width:32px;height:auto;max-height:32px;object-fit:contain;transition:transform .5s var(--ease)}
/* glaze on the enamel, and a specular sweep on hover */
.bay__medal::before{
  content:"";position:absolute;inset:-28% 0 auto -18%;height:72%;
  background:radial-gradient(60% 70% at 32% 30%,rgba(255,240,214,.5),transparent 70%);
  pointer-events:none;
}
.bay__medal::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:-40%;width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,246,225,.55),transparent);
  transform:translateX(-120%) rotate(18deg);
}
.bay:hover .bay__medal{
  transform:rotate(-8deg) scale(1.07);
  box-shadow:0 16px 26px -10px rgba(43,26,18,.9),0 0 0 6px rgba(211,164,92,.2);
}
.bay:hover .bay__medal::after{animation:glaze .85s var(--ease)}
@keyframes glaze{to{transform:translateX(420%) rotate(18deg)}}
.bay:hover .bay__medal svg{transform:scale(1.1) rotate(8deg)}

.bay h3{
  font-family:var(--f-cond);font-weight:600;font-size:.95rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--wood);
}
.bay h3::after{
  content:"";display:block;width:24px;height:2px;margin:.62rem auto .72rem;
  background:var(--brick);border-radius:2px;
  transition:width .45s var(--ease),background .45s;
}
.bay:hover h3::after{width:52px;background:var(--gold)}
.bay p{font-size:.9rem;color:var(--ink-soft);max-width:16.5rem;margin-inline:auto}

/* ================================================================== ABOUT = */
/* The one section on the page that does not follow the band pattern: an arched
   travel-poster panel, a mile-marker strip and a ribbon down the left edge. The
   aged paper (not the plaster used by Features and Reviews) sets it apart from
   the light band that follows it. */
.about{
  position:relative;overflow:hidden;
  background-color:#eddfc0;
  background-image:url("../img/story-bg.png");
  background-image:image-set(url("../img/story-bg.webp") type("image/webp"),
                             url("../img/story-bg.png")  type("image/png"));
  background-size:cover;background-position:center;background-repeat:no-repeat;
  border-bottom:1px solid rgba(125,31,31,.14);
  padding:var(--band) 0;
}
.about::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(56% 66% at 20% 40%,rgba(255,242,212,.6),transparent 68%),
    linear-gradient(180deg,rgba(74,38,14,.13),transparent 12%);
}
/* Ribbon down the outer edge -- pure typography, and the section's signature. */
.about__ribbon{
  position:absolute;left:.7rem;top:50%;translate:0 -50%;z-index:2;
  writing-mode:vertical-rl;rotate:180deg;
  font-family:var(--f-cond);font-weight:600;font-size:.7rem;
  letter-spacing:.42em;text-transform:uppercase;color:rgba(125,31,31,.55);
  padding:1.4rem .2rem;
}
.about__ribbon::before,.about__ribbon::after{
  content:"";position:absolute;left:50%;translate:-50% 0;width:1px;height:1.1rem;
  background:rgba(125,31,31,.45);
}
.about__ribbon::before{top:0}
.about__ribbon::after{bottom:0}

.about__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(1.6rem,3.6vw,3.2rem);
  align-items:center;
}
/* Pictures left, words right. Ordered in CSS rather than in the markup so the
   heading is still the first thing a screen reader reaches. */
.about__copy{order:2}
.about__art{order:1}
.about .eyebrow b{color:#bd8526}
.about__copy h2{margin-bottom:1.1rem;text-transform:uppercase}
.about__lead{font-size:clamp(1rem,1.16vw,1.1rem);color:var(--wood)!important}
.about__copy>p:not(.eyebrow){color:var(--ink-soft);margin-bottom:.9rem;max-width:33rem}

/* ---- mile markers ---- */
.markers{
  list-style:none;margin:1.6rem 0 0;padding:1.1rem 0 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  border-top:1px dashed rgba(125,31,31,.3);
}
.markers li{position:relative;padding-right:1rem}
.markers li+li{padding-left:1.1rem}
.markers li+li::before{
  content:"";position:absolute;left:0;top:.15rem;bottom:.35rem;width:1px;
  background:repeating-linear-gradient(180deg,rgba(125,31,31,.4) 0 4px,transparent 4px 9px);
}
.markers b{
  display:block;font-family:var(--f-west);font-weight:400;
  font-size:clamp(1.15rem,1.75vw,1.5rem);line-height:1;color:var(--brick);
  -webkit-text-stroke:.7px rgba(92,20,20,.5);
  margin-bottom:.35rem;
}
.markers span{
  display:block;font-family:var(--f-cond);font-size:.76rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);line-height:1.5;
}
.about__cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.7rem}
.about__cta .btn--ghost{--fg:var(--wood);border-color:rgba(43,26,18,.7)}
.about__cta .btn--ghost:hover{color:var(--cream)}

/* ---- the photograph ---- */
/* Framed the way the rest of the site frames things -- a cream panel, a second
   rule inside it, corner brackets and a brick name plate -- rather than as a
   snapshot pinned to a board. Straight, not tilted: the copy beside it is the
   thing that should feel relaxed, not the picture. */
.about__art{position:relative;justify-self:center;width:min(100%,620px)}
.shot{
  position:relative;margin:0;padding:14px;border-radius:8px;
  background:linear-gradient(180deg,#fffdf6,#f5ead2);
  border:1px solid rgba(125,31,31,.28);
  box-shadow:0 30px 52px -30px rgba(43,26,18,.8),
             inset 0 0 0 5px rgba(255,255,255,.6),
             inset 0 0 0 6px rgba(211,164,92,.5);
  transition:box-shadow .5s var(--ease),border-color .5s;
}
.shot:hover{
  border-color:rgba(211,164,92,.85);
  box-shadow:0 36px 60px -30px rgba(43,26,18,.85),
             inset 0 0 0 5px rgba(255,255,255,.7),
             inset 0 0 0 6px rgba(211,164,92,.75);
}
.shot__corner{
  position:absolute;width:14px;height:14px;z-index:2;
  border:2px solid rgba(125,31,31,.55);
}
.shot__corner--tl{left:9px;top:9px;border-right:0;border-bottom:0}
.shot__corner--tr{right:9px;top:9px;border-left:0;border-bottom:0}
.shot__corner--bl{left:9px;bottom:9px;border-right:0;border-top:0}
.shot__corner--br{right:9px;bottom:9px;border-left:0;border-top:0}

.shot__frame{
  position:relative;overflow:hidden;border-radius:4px;
  outline:1px solid rgba(43,26,18,.22);
}
.shot__frame picture{display:block}
.shot__frame img{
  width:100%;height:auto;display:block;
  filter:saturate(1.02) contrast(1.02);
  transition:transform 1.1s var(--ease),filter .6s var(--ease);
}
.shot:hover .shot__frame img{transform:scale(1.035)}
/* the warm wash the sunset gives the shot, lifted a touch on hover */
.shot__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(78% 88% at 50% 44%,transparent 55%,rgba(60,32,14,.3));
  transition:opacity .6s var(--ease);
}
.shot:hover .shot__frame::after{opacity:.5}

/* name plate along the bottom, inside the frame */
.shot__plate{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-top:12px;padding:.62rem .9rem;border-radius:4px;
  background:linear-gradient(180deg,var(--brick),var(--brick-dk));
  box-shadow:inset 0 0 0 1px rgba(246,236,216,.22);
  color:var(--cream);
}
.shot__plate b{
  font-family:var(--f-cond);font-weight:600;font-size:.86rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.shot__plate span{
  font-family:var(--f-cond);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(246,236,216,.72);
}

/* ================================================================ HISTORY = */
/* Same timber as the Favorites band and the footer, at the same 1:1 tile
   scale, so every dark band reads as one material. */
.history{
  position:relative;color:var(--cream);
  background-color:#17100a;
  background-image:url("../img/footer-bg.png");
  background-image:image-set(url("../img/footer-bg.webp") type("image/webp"),
                             url("../img/footer-bg.png")  type("image/png"));
  background-size:auto;background-position:center;background-repeat:repeat;
  padding:var(--band) 0;
}
.history::before,.history::after{
  content:"";position:absolute;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,rgba(211,164,92,.55),transparent);
}
.history::before{top:0}
.history::after{bottom:0}
.history__head{margin-bottom:2.6rem}
.history__sub{
  font-family:var(--f-cond);font-size:.85rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-lt);margin-top:.7rem;
}
.history__grid{
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,4.5vw,3.6rem);
  align-items:center;
}
.history__copy p{color:#cbb494;font-size:.96rem;margin-bottom:1rem;max-width:36rem}
.history__copy i{color:#e2cba6}

/* ---- the junction ---- */
/* Drawn rather than photographed: there is no picture of the crossroads in the
   asset set, and a drawing can carry the labels the poster uses. The roads draw
   themselves in once the figure is in view. */
.junction{margin:0}
.junction svg{width:100%;height:auto;overflow:visible}
.junction__road{
  fill:none;stroke:#d9c39c;stroke-width:7;stroke-linecap:round;opacity:.9;
  stroke-dasharray:520;stroke-dashoffset:520;
}
.junction.is-in .junction__road{animation:roadDraw 1.5s var(--ease) forwards}
.junction.is-in .junction__road--41{animation-delay:.5s}
.junction.is-in .junction__road--south{animation-delay:.7s}
@keyframes roadDraw{to{stroke-dashoffset:0}}

.junction__shield{opacity:0}
.junction__shield path{fill:var(--cream);stroke:var(--wood-3);stroke-width:2}
.junction__shield text{font-family:var(--f-cond);font-weight:700;font-size:19px;fill:var(--wood-3)}
.junction.is-in .junction__shield{animation:shieldIn .6s var(--ease) .85s forwards}
.junction.is-in .junction__shield--b{animation-delay:.98s}
@keyframes shieldIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.junction__label{
  font-family:var(--f-cond);font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;fill:#a98f6b;
}
.junction__place{font-family:var(--f-slab);font-size:17px;fill:#e6d3ae;letter-spacing:.04em}
.junction__site path{fill:var(--brick-lt)}
.junction__pulse{
  fill:rgba(155,42,42,.35);transform-box:fill-box;transform-origin:center;
}
.junction.is-in .junction__pulse{animation:sitePulse 2.8s ease-out 1.2s infinite}
@keyframes sitePulse{
  0%{transform:scale(.5);opacity:.85}
  70%,100%{transform:scale(2);opacity:0}
}
.junction__site-label{
  font-family:var(--f-cond);font-weight:600;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;fill:#f0dcb6;
}
.junction__site-time{font-family:var(--f-cond);font-size:12px;letter-spacing:.14em;fill:#bfa47c}
.junction__memorial{opacity:0}
.junction__memorial rect{fill:rgba(125,31,31,.9);stroke:rgba(232,194,131,.6)}
.junction__memorial text{
  font-family:var(--f-cond);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;fill:var(--cream);
}
.junction.is-in .junction__memorial{animation:markerDrop .7s var(--ease) 1.15s forwards}
@keyframes markerDrop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

/* ---- forever 24 ---- */
.forever{display:flex;align-items:center;gap:1.1rem;margin-top:1.8rem}
.forever__num{
  flex:none;width:76px;height:76px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--f-west);font-size:1.9rem;
  color:var(--cream);background:radial-gradient(circle at 34% 28%,var(--brick-lt),var(--brick-dk));
  border:2px solid rgba(232,194,131,.55);
  box-shadow:0 14px 26px -14px #000;
  animation:foreverPulse 4.5s ease-in-out infinite;
}
@keyframes foreverPulse{
  0%,100%{box-shadow:0 14px 26px -14px #000,0 0 0 0 rgba(211,164,92,.4)}
  55%{box-shadow:0 14px 26px -14px #000,0 0 0 12px rgba(211,164,92,0)}
}
.forever__txt{
  font-family:var(--f-cond);font-size:.92rem;letter-spacing:.16em;
  text-transform:uppercase;color:#d9c19a;line-height:1.7;
}
.forever__txt b{display:block;color:var(--gold-lt);font-weight:600}

/* ---- timeline ---- */
.timeline{
  list-style:none;margin:3.2rem 0 0;padding:2.2rem 0 0;position:relative;
  display:grid;grid-template-columns:repeat(8,1fr);
}
/* The rail grows out from the left as the strip arrives. */
.timeline::before{
  content:"";position:absolute;left:0;right:0;top:2.2rem;height:2px;
  background:linear-gradient(90deg,rgba(211,164,92,.15),rgba(211,164,92,.75),rgba(211,164,92,.15));
  transform:scaleX(0);transform-origin:left;
}
.timeline.is-in::before{animation:railGrow 1.4s var(--ease) .1s forwards}
@keyframes railGrow{to{transform:scaleX(1)}}
@keyframes railGrowY{to{transform:scaleY(1)}}
.timeline li{position:relative;padding:1.5rem .7rem 0;text-align:center;opacity:0}
.timeline.is-in li{animation:stepIn .7s var(--ease) forwards;animation-delay:calc(var(--i) * .12s + .3s)}
@keyframes stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.timeline__dot{
  position:absolute;top:-6px;left:50%;translate:-50% 0;
  width:12px;height:12px;border-radius:50%;
  background:var(--gold-lt);box-shadow:0 0 0 4px rgba(23,16,10,.9);
}
.timeline li:first-child{text-align:left}
.timeline li:last-child{text-align:right}
.timeline li:first-child .timeline__dot{left:6px;translate:0 0}
.timeline li:last-child .timeline__dot{left:auto;right:6px;translate:0 0}
.timeline b{
  display:block;font-family:var(--f-cond);font-weight:600;font-size:.82rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:.3rem;
}
.timeline span:not(.timeline__dot){display:block;font-size:.84rem;color:#bda684;line-height:1.5}
.timeline .is-key .timeline__dot{
  background:var(--brick-lt);
  box-shadow:0 0 0 4px rgba(23,16,10,.9),0 0 14px 2px rgba(155,42,42,.9);
}
.timeline .is-key b{color:#f0c98d}
.timeline .is-key span:not(.timeline__dot){color:#dcc49f}

/* ============================================================== FAVORITES = */
/* Same wood plank as the footer. It peaks at luminance 42, so the cream
   heading clears 10:1 over it without any darkening layer.
   Tiled at its natural size rather than `cover`: this section runs ~2200px tall
   on a phone, where `cover` would blow the plank up 4.8x and show a 4% strip of
   it -- a flat smear with no grain left. The texture tiles seamlessly (its edge
   differences are smaller than its own internal variation) and the cards cover
   most of it anyway. */
.favorites{
  position:relative;padding:4.5rem 0 5rem;color:var(--cream);
  background-color:#17100a;
  background-image:url("../img/footer-bg.png");
  background-image:image-set(url("../img/footer-bg.webp") type("image/webp"),
                             url("../img/footer-bg.png")  type("image/png"));
  background-size:auto;
  background-position:center top;
  background-repeat:repeat;
}
.favorites::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 50% 0%,rgba(211,164,92,.14),transparent 70%);
}
.favorites>.wrap{position:relative;z-index:1}

.sechead{text-align:center;position:relative;margin-bottom:2.8rem}
.script{
  font-family:var(--f-script);font-size:1.5rem;color:var(--gold-lt);
  margin-bottom:-.2rem;
}
.sechead__title{
  font-family:var(--f-west);font-size:clamp(1.84rem,3.9vw,2.8rem);
  letter-spacing:.01em;text-transform:uppercase;
}
.sechead__title b{color:var(--gold);font-size:.72em;vertical-align:.12em}
.sechead__cta{position:absolute;right:0;bottom:.3rem}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.card{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#fbf3e2,#efe1c4);
  border:1px solid rgba(211,164,92,.55);border-radius:6px;overflow:hidden;
  color:var(--ink);box-shadow:0 20px 40px -22px rgba(0,0,0,.8);
  transform-style:preserve-3d;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.card:hover{border-color:var(--gold);box-shadow:0 34px 56px -24px rgba(0,0,0,.85)}
/* Matched to the photos' own ratio (they sit between 0.918 and 0.961, this is
   the midpoint) so `cover` trims well under 2% -- the decorative frame baked
   into each photo survives instead of being sliced off top and bottom. */
.card__media{flex:none;overflow:hidden;position:relative;aspect-ratio:47/50;background:var(--wood-3)}
.card__media picture{display:block;height:100%}
.card__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(255,224,168,.28),transparent 45%);
  opacity:0;transition:opacity .5s;
}
.card:hover .card__media::after{opacity:1}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card__media img{transform:scale(1.09)}
.card__body{flex:1;display:flex;flex-direction:column;padding:1.15rem 1.1rem 1.35rem;text-align:center}
.card__body h3{
  font-family:var(--f-cond);font-weight:600;font-size:1rem;letter-spacing:.13em;
  text-transform:uppercase;
}
.card__body p{font-size:.88rem;color:var(--ink-soft);margin:.5rem 0 .7rem;min-height:2.6em}
.price{
  display:block;margin-top:auto;font-family:var(--f-west);color:var(--brick);
  font-size:1.22rem;transition:transform .35s var(--ease);
}
.card:hover .price{transform:scale(1.12)}
.stars{display:block;color:var(--star);letter-spacing:.18em;font-size:22px;margin-top:.35rem}
.card:hover .stars{animation:twinkle .9s ease}
@keyframes twinkle{0%,100%{filter:none}50%{filter:drop-shadow(0 0 6px rgba(230,161,39,.9))}}

/* ================================================================== SPLIT = */
.split{display:grid;grid-template-columns:1fr 1fr}
/* Aged-paper photo instead of a flat gradient. Its brightest area is luminance
   223, which still leaves the body copy at 5.4:1 and the headings at 12.5:1,
   so nothing is washed over it. */
.split__story{
  position:relative;overflow:hidden;display:flex;align-items:center;
  padding:4.2rem clamp(1.5rem,3vw,2.6rem) 4.2rem clamp(1.5rem,18vw,14.5rem);
  background:#f0e3c8 url("../img/story-bg.png") center/cover no-repeat;
  background-image:image-set(url("../img/story-bg.webp") type("image/webp"),
                             url("../img/story-bg.png")  type("image/png"));
}
/* Already a sepia photograph, so no sepia filter is applied on top -- it is
   only held back a little so the copy stays the focus. */
.split__cowboy{
  position:absolute;left:clamp(-1rem,1vw,2rem);bottom:0;display:block;
  width:clamp(140px,17vw,220px);height:auto;opacity:.82;
  transition:transform 1s var(--ease),opacity .8s;
}
.split__cowboy img{width:100%;height:auto}
.split__story:hover .split__cowboy{transform:translateY(-6px) scale(1.03);opacity:.95}
.split__storyText{position:relative;z-index:1;max-width:30rem}
.eyebrow{
  font-family:var(--f-cond);font-weight:600;font-size:.78rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--brick);margin-bottom:.85rem;
}
.eyebrow b{color:var(--gold)}
.eyebrow--gold{color:var(--gold-lt)}
.split__storyText h2{
  font-family:var(--f-west);font-size:clamp(1.36rem,2.18vw,2.06rem);
  text-transform:uppercase;margin-bottom:1rem;
}
.split__storyText>p:not(.eyebrow){color:var(--ink-soft);margin-bottom:1.7rem}

/* Wood photo under a maroon wash. The wash is heaviest on the copy side and
   thins out towards the plate, so the panel keeps its brand colour where the
   text sits while the grain reads as a table surface under the food. */
.split__special{
  position:relative;overflow:hidden;display:flex;align-items:center;
  padding:4.2rem clamp(1.5rem,4vw,3rem);color:var(--cream);
  background-color:#5d1212;
  background-image:
    linear-gradient(100deg,rgba(96,18,18,.95) 0%,rgba(88,17,17,.86) 34%,
                          rgba(52,26,16,.6) 66%,rgba(34,20,13,.5) 100%),
    url("../img/footer-bg.png");
  background-image:
    linear-gradient(100deg,rgba(96,18,18,.95) 0%,rgba(88,17,17,.86) 34%,
                          rgba(52,26,16,.6) 66%,rgba(34,20,13,.5) 100%),
    image-set(url("../img/footer-bg.webp") type("image/webp"),
              url("../img/footer-bg.png")  type("image/png"));
  background-size:auto,auto;
  background-position:center,center top;
  background-repeat:no-repeat,repeat;
}
.split__special::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 90% at 88% 55%,rgba(255,208,140,.16),transparent 65%);
}
/* Narrowed to buy width for the larger plate; the button is the widest thing
   in here, so it is tightened to match rather than overflowing the column. */
.split__specialText{position:relative;z-index:2;max-width:19rem}
.split__special .btn{padding:.78rem 1.1rem;font-size:.78rem;letter-spacing:.09em}
/* Deliberately allowed to run wider than the copy column, as in the design:
   the heading sits well above the plate, so only the lower copy has to keep
   clear of it horizontally. Capped so it still wraps instead of running on. */
.split__specialText h2{
  font-family:var(--f-west);font-size:clamp(1.84rem,3.35vw,2.7rem);
  text-transform:uppercase;line-height:1;
  width:max-content;max-width:37rem;
}
.split__time{font-family:var(--f-cond);letter-spacing:.16em;color:var(--gold-lt);margin-top:.55rem;font-size:.92rem}
.split__from{font-family:var(--f-cond);letter-spacing:.1em;margin-top:1.1rem;font-size:.9rem;opacity:.9}
.split__price{
  font-family:var(--f-west);font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;
  color:var(--gold-lt);margin-bottom:1.3rem;
  text-shadow:0 8px 20px rgba(0,0,0,.4);
}
/* The plate sits in the bottom-right corner, whole. It used to be scaled up
   and bled off two edges, which sliced the mug and the rim of the plate -- the
   design has it inset, so it is inset here, and small enough that the copy
   column beside it keeps its own space. The float never travels further than
   the inset, so nothing clips mid-animation. */
.split__specialImg{
  position:absolute;right:clamp(.4rem,1vw,.9rem);bottom:clamp(.4rem,1vw,.9rem);
  width:min(58%,440px);z-index:1;display:block;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.5));
  animation:plateFloat 7s ease-in-out infinite;
}
.split__specialImg img{width:100%;height:auto}

/* Below this the half-panel can no longer hold the copy beside the plate, so
   the plate drops under it and centres. The padding reserves exactly the
   photo's own height (its ratio is 1785/881 = 2.026) plus breathing room, so
   the two never collide. */
@media (max-width:1150px){
  .split__specialText{max-width:none}
  .split__special{padding-bottom:calc(min(84%,460px) / 2.026 + 3.2rem)}
  .split__specialImg{
    right:50%;translate:50% 0;bottom:clamp(.8rem,1.6vw,1.3rem);width:min(84%,460px);
  }
}
@keyframes plateFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-1.4deg)}}

/* ================================================================ REVIEWS = */
/* Same plaster sheet as the Features band, so the two light sections read as
   one wall. */
.reviews{
  position:relative;
  padding:4rem 0 3.6rem;
  background-color:#e4d0b3;
  background-image:url("../img/background.png");
  background-image:image-set(url("../img/background.webp") type("image/webp"),
                             url("../img/background.png")  type("image/png"));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.reviews>.wrap{position:relative;z-index:1}
.reviews__title{
  display:flex;align-items:center;justify-content:center;gap:1.2rem;
  font-family:var(--f-west);font-size:clamp(1.45rem,3vw,2.1rem);
  text-transform:uppercase;margin-bottom:2.2rem;
}
.reviews__title i{height:2px;flex:1;max-width:9rem;background:linear-gradient(90deg,transparent,var(--brick))}
.reviews__title i:last-child{background:linear-gradient(270deg,transparent,var(--brick))}

.carousel{display:flex;align-items:center;gap:1rem}
.carousel__viewport{overflow:hidden;flex:1}
.carousel__track{display:flex;transition:transform .65s var(--ease)}
.quote{
  flex:0 0 33.3333%;margin:0;padding:0 .7rem;
}
/* The card holds all three pieces -- stars, quote, name -- so the whole
   testimonial reads as one object. The quote takes `margin:auto` so it stays
   optically centred whatever length it is, with the stars pinned to the top of
   the card and the name to the bottom. */
.quote blockquote{
  margin:0;background:linear-gradient(180deg,#fdf7e9,#f2e6cd);
  border:1px solid rgba(125,31,31,.18);border-radius:6px;
  padding:1.25rem 1.4rem 1.15rem;color:var(--ink-soft);
  text-align:center;min-height:12rem;
  display:flex;flex-direction:column;align-items:center;
  box-shadow:0 14px 30px -20px rgba(43,26,18,.55);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.quote blockquote p{margin:auto 0;font-size:.95rem;font-style:italic;position:relative;z-index:1}
/* Each card is a postcard off the counter: a dashed inner rule, a stamp in the
   corner and the ring a coffee cup leaves behind. They sit at slight opposing
   angles and straighten under the cursor. */
.quote blockquote{position:relative;overflow:hidden;isolation:isolate}
.quote blockquote::before{
  content:"46";position:absolute;top:11px;right:11px;z-index:2;
  width:30px;height:36px;display:grid;place-items:center;
  font-family:var(--f-cond);font-weight:700;font-size:.76rem;letter-spacing:.02em;
  color:var(--cream);background:var(--brick);
  box-shadow:inset 0 0 0 1.5px rgba(246,236,216,.6),0 3px 6px -3px rgba(43,26,18,.6);
  rotate:6deg;transition:rotate .45s var(--ease),scale .45s var(--ease);
}
.quote:hover blockquote::before{rotate:-5deg;scale:1.08}
.quote blockquote::after{
  content:"";position:absolute;left:-14px;bottom:-18px;z-index:0;
  width:94px;height:94px;border-radius:50%;
  border:6px solid rgba(122,74,34,.085);pointer-events:none;
}
.quote blockquote{outline:1px dashed rgba(125,31,31,.28);outline-offset:-8px}
.quote:nth-child(2n) blockquote{rotate:-.9deg}
.quote:nth-child(2n+1) blockquote{rotate:.8deg}
.quote:hover blockquote{rotate:0deg}
.reviews__head{text-align:center}
.reviews__head .script{color:var(--brick);margin-bottom:.1rem;opacity:.9}
.quote .stars{font-size:22px;letter-spacing:.24em;margin:0 0 .55rem}
.quote__by{
  margin-top:.9rem;font-family:var(--f-cond);font-weight:600;
  font-size:.85rem;letter-spacing:.1em;color:var(--wood);
}
.quote:hover blockquote{transform:translateY(-6px);box-shadow:0 22px 38px -20px rgba(43,26,18,.6)}

.carousel__nav{
  width:44px;height:44px;flex:none;border-radius:50%;
  background:var(--brick);color:var(--cream);display:grid;place-items:center;
  box-shadow:0 10px 20px -10px rgba(125,31,31,.9);
  transition:transform .3s var(--ease),background .3s;
}
.carousel__nav svg{width:20px;height:20px;fill:currentColor}
.carousel__nav:hover{background:var(--wood);transform:scale(1.12)}
.carousel__nav:active{transform:scale(.96)}

.dots{display:flex;justify-content:center;gap:.5rem;margin-top:1.6rem}
.dots button{
  width:9px;height:9px;border-radius:50%;background:rgba(125,31,31,.28);
  transition:width .35s var(--ease),background .3s;
}
.dots button.is-on{width:26px;border-radius:6px;background:var(--brick)}

/* ================================================================== VISIT = */
/* Nested inside .reviews, so it paints no band of its own. The parchment ticket
   artwork it used to sit on has been replaced by a signboard: a plank of the
   same timber as the dark bands, bolted at the corners and hung beneath the
   route the cafe stands on. */
.visit{padding-top:2.6rem}

/* ---- the route above the board ---- */
.visit__route{position:relative;margin:0 0 -1rem}
.visit__route svg{width:100%;height:auto;display:block;overflow:visible}
.visit__line{
  fill:none;stroke:rgba(125,31,31,.45);stroke-width:3;
  stroke-dasharray:11 10;stroke-linecap:round;
}
/* The car rides the same path the line is drawn from. Browsers without
   offset-path simply leave it parked at the start of the road. */
.visit__car{
  fill:var(--wood-2);
  /* Without fill-box the anchor resolves against the whole viewBox, which threw
     the car hundreds of units off the road. */
  transform-box:fill-box;
  offset-path:path("M6 58C214 22 432 18 606 38 782 58 992 58 1194 20");
  offset-rotate:auto;offset-anchor:50% 90%;offset-distance:32%;
  animation:drive 22s linear infinite;
}
@keyframes drive{from{offset-distance:0%}to{offset-distance:100%}}
/* Parked at a third of the way along when motion is off, so it still reads as
   a car on a road rather than a shape stuck to the edge. */
.visit__shield{position:absolute;width:34px;filter:drop-shadow(0 4px 8px rgba(43,26,18,.4))}
.visit__shield svg{width:100%;height:auto}
.visit__shield path{fill:var(--cream);stroke:var(--wood-3);stroke-width:2}
.visit__shield text{font-family:var(--f-cond);font-weight:700;font-size:19px;fill:var(--wood-3)}
.visit__shield--a{left:9%;top:-6px}
.visit__shield--b{right:11%;top:-10px}

/* ---- the board ---- */
.visit__board{
  position:relative;z-index:1;border-radius:8px;
  color:var(--cream);
  background-color:#1b120b;
  background-image:url("../img/footer-bg.png");
  background-image:image-set(url("../img/footer-bg.webp") type("image/webp"),
                             url("../img/footer-bg.png")  type("image/png"));
  background-size:auto;background-position:center;background-repeat:repeat;
  box-shadow:0 26px 46px -26px rgba(28,17,11,.8),
             inset 0 0 0 1px rgba(211,164,92,.32),
             inset 0 0 0 7px rgba(23,16,10,.55),
             inset 0 0 0 8px rgba(211,164,92,.18);
  padding:.4rem;
}
.visit__bolt{
  position:absolute;width:11px;height:11px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 34% 30%,#f0d5a2,#8a6534 70%,#4d3419);
  box-shadow:0 1px 2px rgba(0,0,0,.7);
}
.visit__bolt--tl{left:14px;top:14px}
.visit__bolt--tr{right:14px;top:14px}
.visit__bolt--bl{left:14px;bottom:14px}
.visit__bolt--br{right:14px;bottom:14px}

.visit__grid{
  display:grid;grid-template-columns:repeat(3,1fr) 1.35fr;
  align-items:center;position:relative;
}
.visit__item{display:flex;align-items:center;gap:1rem;padding:1.5rem 1.4rem;position:relative}
/* Dotted separators, like the ones on the timber band above. */
.visit__item+.visit__item::before,.visit__cta::before{
  content:"";position:absolute;left:0;top:16%;bottom:16%;width:1px;
  background:repeating-linear-gradient(180deg,rgba(211,164,92,.5) 0 4px,transparent 4px 10px);
}
.visit__icon{
  width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%,var(--brick-lt),var(--brick) 60%,var(--brick-dk));
  color:var(--cream);
  box-shadow:0 10px 20px -10px rgba(0,0,0,.9),inset 0 0 0 1px rgba(246,236,216,.16);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.visit__icon svg{width:22px;height:22px;fill:currentColor}
.visit__item:hover .visit__icon{
  transform:translateY(-4px) rotate(-8deg);
  box-shadow:0 14px 24px -10px rgba(0,0,0,.9),0 0 0 5px rgba(211,164,92,.14);
}
.visit__item h4{
  font-family:var(--f-cond);font-weight:600;font-size:.86rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-lt);margin-bottom:.3rem;
}
.visit__item p{font-size:.92rem;color:#d5c0a0;line-height:1.55}
.visit__item a{transition:color .25s}
.visit__item a:hover{color:var(--gold-lt)}

.visit__cta{
  position:relative;display:flex;align-items:center;gap:1.1rem;
  padding:1.4rem 1.5rem;
  background:linear-gradient(115deg,rgba(125,31,31,.45),rgba(125,31,31,.08));
  border-radius:0 6px 6px 0;
}
.visit__cta h3{
  font-family:var(--f-west);font-size:clamp(1rem,1.45vw,1.28rem);
  text-transform:uppercase;line-height:1.6;color:var(--cream);
}
.visit__btn{margin-top:.85rem;padding:.62rem 1.1rem;font-size:.74rem;letter-spacing:.12em}
.visit__hat{width:58px;flex:none;animation:hatTip 5s ease-in-out infinite}
.visit__hat svg{width:100%;height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
@keyframes hatTip{0%,82%,100%{transform:rotate(0) translateY(0)}88%{transform:rotate(-14deg) translateY(-8px)}94%{transform:rotate(4deg) translateY(0)}}


/* ============================================================ RESPONSIVE == */
@media (max-width:1080px){
  /* The cowboy cut-out has empty margins on its right, so the copy column can
     borrow a little of that space here -- without it "ROOTED IN TRADITION."
     misses one line by two pixels and breaks into three. */
  .split__story{padding-left:clamp(1.5rem,15vw,14.5rem)}
  /* Eight columns of timeline stop being readable well before the layout
     breaks, so the strip turns into a rail down the left instead. */
  .timeline{grid-template-columns:1fr;gap:1.15rem;margin-top:2.6rem;padding:0 0 0 .4rem}
  .timeline::before{
    top:.5rem;bottom:.5rem;left:5px;right:auto;width:2px;height:auto;
    background:linear-gradient(180deg,rgba(211,164,92,.15),rgba(211,164,92,.75),rgba(211,164,92,.15));
    transform:scaleY(0);transform-origin:top;
  }
  .timeline.is-in::before{animation:railGrowY 1.4s var(--ease) .1s forwards}
  .timeline li,.timeline li:first-child,.timeline li:last-child{text-align:left;padding:0 0 0 1.6rem}
  .timeline__dot,
  .timeline li:first-child .timeline__dot,
  .timeline li:last-child .timeline__dot{top:.35rem;left:0;right:auto;translate:0 0}
  .timeline b{display:inline-block;margin-right:.6rem}
  .timeline span:not(.timeline__dot){display:inline}
  .visit__grid{grid-template-columns:1fr 1fr}
  .visit__cta{grid-column:span 2}
  .visit__item:nth-child(3)::before,.visit__cta::before{display:none}
  .cards{grid-template-columns:repeat(2,1fr)}
  .sechead__cta{position:static;margin-top:1.2rem}
}

@media (max-width:960px){
  .about__grid,.history__grid{grid-template-columns:1fr}
  /* Stacked: heading and copy first, then the pictures. */
  .about__copy{order:1}
  .about__art{order:2;margin-top:1rem}
  .about__ribbon{display:none}
  .markers{gap:.8rem}
  .junction{max-width:34rem}
    /* Stacked columns are full width, so the wrap compensation is not needed --
     and would overflow the page. */
  .split__storyText h2{width:auto}
  /* Too narrow to sit text over the photo: at this width the photo's own
     ratio is only ~0.57x the viewport width tall, so the hero stacks instead
     -- complete photo across the top, copy underneath on the cream ground. */
  .hero{aspect-ratio:auto}
  .hero__bg{background-size:contain;background-position:50% 0}
  .hero__inner{height:auto;padding-top:calc(100vw * 944 / 1665 + 2rem);padding-bottom:2.75rem}
  .hero__vignette{background:none}
  .hero__glow{display:none}
  .scroll-cue{display:none}
 
  
  .plaque__bays{grid-template-columns:repeat(2,1fr)}
  .bay:nth-child(3)::before,.bay:nth-child(3)::after{display:none}
  /* second row gets its own rule for the medallions to straddle, so the
     punched-in logic holds there too */
  .bay:nth-child(n+3){padding-top:3.9rem;border-top:1px dashed rgba(125,31,31,.32)}
  .bay:nth-child(n+3)::after{content:none}
  .split{grid-template-columns:1fr}
  .split__story{padding-left:clamp(1.5rem,30vw,12rem)}
  .quote{flex-basis:50%}
}

@media (max-width:680px){
  /* The route ribbon needs width to read as a road; below this it just crowds
     the board, so it comes off and the board stands on its own. */
  .visit__route{display:none}
  .visit{padding-top:2.2rem}
  .visit__grid{grid-template-columns:1fr}
  .visit__item{padding:1.2rem 1.3rem}
  /* Stacked now, so the separators run across instead of down. */
  .visit__item+.visit__item::before,.visit__cta::before{
    left:1.3rem;right:1.3rem;top:0;bottom:auto;width:auto;height:1px;
    background:repeating-linear-gradient(90deg,rgba(211,164,92,.5) 0 4px,transparent 4px 10px);
  }
  .visit__cta{border-radius:0 0 6px 6px;padding:1.3rem}
  .markers{grid-template-columns:1fr;gap:0}
  .markers li,.markers li+li{padding:.6rem 0}
  .markers li+li::before{left:0;right:auto;top:0;bottom:auto;width:100%;height:1px;
    background:repeating-linear-gradient(90deg,rgba(125,31,31,.4) 0 4px,transparent 4px 9px)}
  /* At this width the art column is nearly full-bleed, so the print tucks
     back in rather than hanging past the section edge. */
  .forever{gap:.9rem}
  .forever__num{width:64px;height:64px;font-size:1.6rem}
  .forever__txt{font-size:.82rem;letter-spacing:.12em}
  .history__sub{font-size:.74rem;letter-spacing:.16em}
  /* Single column: one mechanism for the separators -- a dashed border on every
     bay after the first, with the medallion straddling it. */
  .plaque__bays{grid-template-columns:1fr}
  .bay+.bay::before,.bay+.bay::after{display:none}
  .bay{padding:3.6rem 1.4rem 2rem;border-top:0}
  .bay+.bay{border-top:1px dashed rgba(125,31,31,.32)}
  .cards{grid-template-columns:1fr}
  .quote{flex-basis:100%}
  .visit__grid{grid-template-columns:1fr}
  .visit__cta{grid-column:auto}
  .visit__item::before{display:none!important}
  /* The figure is a photograph with pixels down to luminance 7, so faded behind
     the copy as a watermark it dropped body text to 2.8:1. It moves below the
     copy instead and shows properly; the padding reserves its exact height
     (width x 684/365) so nothing sits on top of it. */
  .split__story{
    padding-left:1.5rem;
    padding-bottom:calc(clamp(120px,32vw,150px) * 1.873 + 2rem);
  }
  .split__cowboy{left:50%;translate:-50% 0;width:clamp(120px,32vw,150px);opacity:.9}
  .split__story:hover .split__cowboy{transform:translateY(-6px) scale(1.03);opacity:1}
  .carousel__nav{width:38px;height:38px}
}

@media (prefers-reduced-motion:reduce){
  /* Anything that hides a piece of itself until an animation reveals it needs
     an explicit resting state here. */
  .junction__road{stroke-dashoffset:0}
  .junction__shield,.junction__memorial,.timeline li{opacity:1}
  .timeline::before{transform:none}
  .wordmark__line{opacity:1;transform:none;clip-path:none}
  .hd{opacity:1;clip-path:none}
  /* Loops that would otherwise keep running. */
  .visit__car,.junction__pulse,.forever__num,
  .visit__hat,.cta__hat{animation:none}
}