/* ==========================================================================
   Jack Ranch Cafe & Market — Contact page
   Loaded after style.css; only page-specific blocks live here. The topbar,
   header, buttons, display headings (.hd), reveal helper and footer all come
   from the shared sheet.
   ========================================================================== */

/* ============================================================== PROGRESS = */
.progress{position:fixed;inset:0 0 auto;height:3px;z-index:60;pointer-events:none}
.progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--gold),var(--brick));
  box-shadow:0 0 12px -2px rgba(125,31,31,.9);
  transition:width .12s linear;
}

/* ================================================================== HERO = */
/* Centred banner, unlike the About page's left-aligned one: the storefront is
   fitted to the height and the wash is heaviest top and bottom so the copy
   sits in the calm middle of the photograph. */
.chero{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--wood-3);color:var(--cream);
  min-height:var(--hero-h);display:flex;align-items:center;
  text-align:center;
}
.chero__bg{
  position:absolute;inset:-4% 0;z-index:0;transform-origin:50% 60%;
  background-color:var(--wood-3);
  background-image:url("../img/hero-bg.png");
  background-image:image-set(url("../img/hero-bg.webp") type("image/webp"),
                             url("../img/hero-bg.png")  type("image/png"));
  background-size:cover;background-position:50% 60%;background-repeat:no-repeat;
  transform:translate3d(0,var(--py,0px),0);
  animation:cheroZoom 30s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes cheroZoom{from{scale:1}to{scale:1.11}}
.chero__wash{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(20,12,7,.72) 0%,rgba(24,14,8,.4) 34%,
                           rgba(24,14,8,.46) 62%,rgba(18,11,6,.86) 100%),
    radial-gradient(64% 74% at 50% 52%,rgba(28,17,11,.28),rgba(20,12,7,.72) 100%);
}
.chero__inner{position:relative;z-index:3;padding-block:4.4rem 6.4rem}
.chero .eyebrow{justify-content:center;display:flex;gap:.5rem}
.chero__title{
  font-size:clamp(2.5rem,7vw,5rem);line-height:1;
  letter-spacing:.02em;text-transform:uppercase;--hd-pitch:1.04em;
  /* centred, so the squeeze has to scale about the middle */
  transform-origin:center;
}
.chero__text{
  max-width:34rem;margin:1.1rem auto 0;color:#f0e2c8;
  font-size:clamp(1rem,1.25vw,1.13rem);
}
.chero__rule{display:flex;align-items:center;justify-content:center;gap:.8rem;max-width:14rem;margin:1.4rem auto 0}
.chero__rule i{height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold))}
.chero__rule i:last-child{background:linear-gradient(270deg,transparent,var(--gold))}
.chero__rule b{color:var(--gold);font-size:.8rem;animation:starPulse 3.6s ease-in-out infinite}
@keyframes starPulse{
  0%,100%{transform:scale(1);filter:none}
  50%{transform:scale(1.3) rotate(18deg);filter:drop-shadow(0 0 8px rgba(211,164,92,.9))}
}
/* The roadside route marker, standing at the right of the shot. */
.chero__shield{
  position:absolute;right:clamp(1rem,4vw,4rem);top:clamp(1.4rem,4vh,3rem);z-index:2;
  width:clamp(46px,5vw,64px);
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.6));
  animation:shieldSway 7s ease-in-out infinite;
}
.chero__shield svg{width:100%;height:auto}
.chero__shield path{fill:#1f4d2e;stroke:#f6ecd8;stroke-width:2.5}
.chero__shield-top{font-family:var(--f-cond);font-size:8px;letter-spacing:.06em;fill:#f6ecd8}
.chero__shield-num{font-family:var(--f-cond);font-weight:700;font-size:24px;fill:#f6ecd8}
@keyframes shieldSway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(2deg)}}
.chero .mote{background:radial-gradient(circle,rgba(255,214,152,.55),rgba(255,214,152,0) 70%)}

/* ========================================================== BANNER BAR == */
/* What used to be a pale strip below the hero now sits along the foot of the
   photograph: cream on the dark wash, divided by hairlines, with the live
   status light first. */
.chero{padding-bottom:0}
.chero__bar{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  background:linear-gradient(180deg,rgba(16,10,5,0),rgba(14,9,4,.78) 42%,rgba(12,8,4,.9));
  border-top:1px solid rgba(211,164,92,.34);
  backdrop-filter:blur(1.5px);
}
.chero__barIn{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1rem,3vw,2.4rem);padding:.95rem 0;flex-wrap:wrap;
}
.chero__script{
  font-family:var(--f-script);font-size:1.34rem;color:var(--gold-lt);
  line-height:1;padding-bottom:.18rem;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.chero__facts{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:0 clamp(.9rem,2.2vw,1.9rem);
}
.chero__facts li{
  position:relative;display:flex;align-items:center;gap:.55rem;
  padding-left:clamp(.9rem,2.2vw,1.9rem);
  font-family:var(--f-cond);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:#c9b294;
}
.chero__facts li:first-child{padding-left:0}
/* hairline between each fact */
.chero__facts li:not(:first-child)::before{
  content:"";position:absolute;left:0;top:.15rem;bottom:.15rem;width:1px;
  background:linear-gradient(180deg,transparent,rgba(211,164,92,.45),transparent);
}
.chero__facts b{color:#f2e3c6;font-weight:600}
.chero__facts b::after{content:"·";margin:0 .4rem;color:rgba(211,164,92,.6)}
.chero__ic{width:16px;height:16px;color:var(--gold-lt);flex:none}
.chero__ic svg{width:100%;height:100%;fill:currentColor}
/* the status light, on the dark ground */
.ribbon__dot{
  width:9px;height:9px;border-radius:50%;flex:none;
  background:#a48f6a;box-shadow:0 0 0 3px rgba(164,143,106,.22);
}
.is-open .ribbon__dot{
  background:#59b16a;box-shadow:0 0 0 3px rgba(89,177,106,.28);
  animation:livePulse 2.6s ease-out infinite;
}
.is-shut .ribbon__dot{background:#c9553f;box-shadow:0 0 0 3px rgba(201,85,63,.26)}
@keyframes livePulse{
  0%{box-shadow:0 0 0 3px rgba(89,177,106,.35)}
  70%,100%{box-shadow:0 0 0 12px rgba(89,177,106,0)}
}

/* =========================================================== GET IN TOUCH = */
/* The details used to sit in four boxes. They are set like a menu instead:
   label, dotted leader, value -- with the counter phone promoted to a display
   line, which is what most visitors actually want. */
.touch{
  position:relative;
  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;
  padding:var(--band) 0;
}
.touch::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(56% 60% at 24% 34%,rgba(255,244,218,.5),transparent 70%);
}
.touch__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,4.5vw,4rem);
  align-items:center;
}
.touch__h{
  font-family:var(--f-west);font-weight:400;
  font-size:clamp(1.5rem,2.7vw,2.15rem);line-height:1.16;
  text-transform:uppercase;color:var(--wood);margin-bottom:.9rem;
  letter-spacing:.03em;
}
.touch__lead{color:var(--ink-soft);max-width:28rem}

/* the counter phone, as a display line rather than a label in a box */
.touch__num{
  display:inline-block;margin-top:1.5rem;
  font-size:clamp(1.8rem,4vw,3rem);letter-spacing:.01em;line-height:1;
  --hd-pitch:1.1em;
}
.touch__numnote{
  margin-top:.55rem;font-family:var(--f-cond);font-size:.76rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}
.touch__cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.7rem}
.touch__cta .btn--ghost{--fg:var(--wood);border-color:rgba(43,26,18,.7)}
.touch__cta .btn--ghost:hover{color:var(--cream)}

/* ---- the ledger ---- */
.ledger{margin:0;padding:0}
.ledger__row{
  display:grid;grid-template-columns:minmax(9rem,1fr) auto;align-items:baseline;
  column-gap:.9rem;padding:1.05rem 0;
  border-bottom:1px dashed rgba(125,31,31,.3);
  transition:padding-left .4s var(--ease);
}
.ledger__row:first-child{border-top:1px dashed rgba(125,31,31,.3)}
.ledger__row:hover{padding-left:.45rem}
.ledger dt{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--f-cond);font-weight:600;font-size:.78rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brick);
  white-space:nowrap;
}
/* the leader: a dotted run between label and value, drawn with a gradient so
   it stretches to whatever room is left */
.ledger dt::after{
  content:"";flex:1;min-width:1.4rem;height:1px;margin-left:.2rem;
  background:repeating-linear-gradient(90deg,rgba(125,31,31,.45) 0 2px,transparent 2px 6px);
  align-self:flex-end;margin-bottom:.28rem;
}
.ledger dd{
  margin:0;font-size:1.02rem;color:var(--wood);line-height:1.5;
  text-align:right;
}
.ledger dd a{transition:color .25s;border-bottom:1px solid rgba(125,31,31,.3)}
.ledger dd a:hover{color:var(--brick)}
.ledger__ic{
  width:26px;height:26px;flex:none;display:grid;place-items:center;
  border-radius:50%;color:var(--brick);
  background:rgba(125,31,31,.09);box-shadow:inset 0 0 0 1px rgba(125,31,31,.24);
  transition:transform .45s var(--ease),background .45s,color .45s;
}
.ledger__ic svg{width:14px;height:14px;fill:currentColor}
.ledger__row:hover .ledger__ic{
  transform:rotate(-8deg) scale(1.08);
  background:var(--brick);color:var(--cream);
}
/* the clock in the hours row keeps California time (contact.js sets the angles) */
.ledger .hours__clock{width:14px;height:14px;fill:none}
.ledger .hours__clock circle{stroke:currentColor;stroke-width:3;fill:none}
.ledger .hours__pin{fill:currentColor;stroke:none}
.hours__hour,.hours__min{stroke:currentColor;stroke-width:3;stroke-linecap:round}
.hours__hour{transform:rotate(var(--h,0deg));transform-origin:24px 24px}
.hours__min{transform:rotate(var(--m,0deg));transform-origin:24px 24px}
/* live open/closed tag, on the hours row */
.tag{
  display:inline-flex;align-items:center;gap:.45rem;margin-left:.7rem;
  padding:.24rem .6rem;border-radius:999px;vertical-align:.1rem;
  background:rgba(125,31,31,.08);border:1px solid rgba(125,31,31,.22);
  font-family:var(--f-cond);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--wood);white-space:nowrap;
}
.is-open .tag{background:rgba(63,143,78,.1);border-color:rgba(63,143,78,.35)}

/* ============================================================ FORM PANEL = */
.write{
  position:relative;
  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-block:1px solid rgba(125,31,31,.14);
  padding:var(--band) 0;
}
.write::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 62% at 26% 34%,rgba(255,242,212,.5),transparent 70%);
}
.write__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.6rem,3.4vw,3rem);
  align-items:stretch;
}
.write__form .reach__head{margin-bottom:1.4rem}
.write__form h2{font-size:clamp(1.5rem,2.7vw,2.15rem);text-transform:uppercase}
.write__lead{color:var(--ink-soft);margin-top:.9rem;max-width:34rem}

/* ---- the form ---- */
/* The form wears the same frame as the hours plate and the home page's feature
   plaque -- double rule, corner brackets -- with a medallion straddling its top
   edge, so it belongs to the page rather than sitting on it. */
.msg{
  position:relative;margin-top:2.2rem;
  padding:clamp(1.7rem,2.5vw,2.2rem) clamp(1.4rem,2.4vw,2.1rem) clamp(1.3rem,2vw,1.7rem);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(255,252,245,.97),rgba(246,236,216,.93));
  border:1px solid rgba(125,31,31,.28);
  box-shadow:0 28px 48px -30px rgba(43,26,18,.85),
             inset 0 0 0 5px rgba(255,255,255,.6),
             inset 0 0 0 6px rgba(211,164,92,.45);
}
.msg__medal{
  position:absolute;top:-27px;left:clamp(1.4rem,2.4vw,2.1rem);
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;color:var(--cream);
  background:radial-gradient(circle at 34% 26%,var(--brick-lt),var(--brick) 58%,var(--brick-dk));
  border:5px solid #fffdf6;
  box-shadow:0 12px 20px -10px rgba(43,26,18,.85),inset 0 0 0 1px rgba(246,236,216,.22);
}
.msg__medal svg{width:22px;height:22px;fill:currentColor}
.msg__corner{position:absolute;width:13px;height:13px;border:2px solid rgba(125,31,31,.5)}
.msg__corner--tl{left:10px;top:10px;border-right:0;border-bottom:0}
.msg__corner--tr{right:10px;top:10px;border-left:0;border-bottom:0}
.msg__corner--bl{left:10px;bottom:10px;border-right:0;border-top:0}
.msg__corner--br{right:10px;bottom:10px;border-left:0;border-top:0}

/* ---- the fields ---- */
/* Pehle do numbered fieldsets the: har ek ka legend, dashed rule aur apna
   margin -- teen alag cheezein jo sirf lambai badha rahi thin. Ab chaar
   fields ek 2x2 grid me hain aur beech me sirf ek chhota label bachta hai. */
.msg__grid{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:1.4rem;
}
.msg__label{
  display:flex;align-items:center;gap:.7rem;
  margin:.35rem 0 .8rem;
  font-family:var(--f-cond);font-weight:600;font-size:.74rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brick);
}
/* Label ke baad ki hairline -- legend ke poore dashed rule se halki hai, aur
   jagah bhi kam leti hai. */
.msg__label::after{
  content:"";flex:1;height:1px;
  background:repeating-linear-gradient(90deg,rgba(125,31,31,.32) 0 4px,transparent 4px 9px);
}

/* ---- subject chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.25rem}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;inset:0;opacity:0;cursor:pointer}
.chip span{
  display:block;padding:.44rem .8rem;border-radius:999px;
  border:1px solid rgba(125,31,31,.3);background:rgba(255,253,247,.7);
  font-family:var(--f-cond);font-size:.76rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);
  transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease);
}
.chip:hover span{border-color:rgba(125,31,31,.55);color:var(--wood);transform:translateY(-2px)}
.chip input:checked+span{
  background:linear-gradient(180deg,var(--brick),var(--brick-dk));
  border-color:var(--brick-dk);color:var(--cream);
  box-shadow:0 8px 16px -10px rgba(125,31,31,.9);
}
.chip input:focus-visible+span{outline:2px solid var(--brick);outline-offset:2px}
/* Floating labels: the placeholder is a single space, so :placeholder-shown
   reports whether the field is empty without any script. */
.field{position:relative;margin-bottom:1.05rem}
/* Underlined fields rather than outlined boxes: fewer edges, and the rule
   doubles as the focus indicator. */
.field input,.field textarea{
  width:100%;font:inherit;font-size:.98rem;color:var(--wood);
  background:transparent;
  border:0;border-bottom:1px solid rgba(125,31,31,.34);border-radius:0;
  padding:1.2rem .2rem .5rem;
  transition:border-color .3s,box-shadow .3s,background .3s;
}
.field textarea{resize:vertical;min-height:7rem;padding-top:1.4rem}
.field label{
  position:absolute;left:.2rem;top:.9rem;pointer-events:none;
  font-family:var(--f-cond);font-size:.9rem;letter-spacing:.08em;color:var(--ink-soft);
  transition:transform .25s var(--ease),font-size .25s var(--ease),color .25s;
  transform-origin:left top;
}
.field input:focus,.field textarea:focus{
  outline:0;border-bottom-color:var(--brick);
  box-shadow:0 1px 0 0 var(--brick);
  background:linear-gradient(180deg,transparent 60%,rgba(125,31,31,.05));
}
.field input:not(:placeholder-shown)+label,
.field textarea:not(:placeholder-shown)+label,
.field input:focus+label,.field textarea:focus+label{
  transform:translateY(-.66rem) scale(.76);color:var(--brick);
}
/* invalid only after a submit attempt, never while the visitor is typing */
.msg.is-checked .field input:invalid,.msg.is-checked .field textarea:invalid{
  border-bottom-color:var(--brick-lt);box-shadow:0 1px 0 0 var(--brick-lt);
}
.field__count{
  position:absolute;right:.2rem;bottom:-1.25rem;
  font-family:var(--f-cond);font-size:.7rem;letter-spacing:.12em;
  color:var(--ink-soft);opacity:.75;transition:color .3s,opacity .3s;
}
.field__count.is-near{color:var(--brick);opacity:1}
.field--area{margin-bottom:1.5rem}

.msg__foot{
  display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  margin-top:.3rem;padding-top:1.2rem;
  border-top:1px dashed rgba(125,31,31,.3);
}
.msg__send{flex:1 1 15rem;gap:.6rem}
.msg__send svg{width:18px;height:18px;fill:currentColor;transition:transform .35s var(--ease)}
.msg__send:hover svg{transform:translateX(5px)}
.msg__hint{
  font-family:var(--f-cond);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);
}
.msg__hint a{color:var(--brick);border-bottom:1px solid rgba(125,31,31,.4)}
.msg__status{
  min-height:1.4rem;margin-top:.9rem;
  font-family:var(--f-cond);font-size:.86rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brick);
  opacity:0;transform:translateY(6px);
  transition:opacity .35s,transform .35s var(--ease);
}
.msg__status.is-on{opacity:1;transform:none}
.msg__status.is-good{color:#2f7a41}

/* ---- branded panel beside it ---- */
/* The dark counterweight to the cream form: same timber as the site's dark
   bands, with a print of the coffee at the top and the phone as the one action
   in it. */
.panel{
  display:flex;flex-direction:column;border-radius:8px;overflow:hidden;
  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 -28px rgba(28,17,11,.85),
             inset 0 0 0 1px rgba(211,164,92,.3);
}
.panel__shot{position:relative;margin:0;overflow:hidden}
.panel__shot picture{display:block}
.panel__shot img{
  width:100%;height:100%;max-height:15rem;object-fit:cover;display:block;
  filter:sepia(.18) contrast(1.04);
  transition:transform 1.1s var(--ease),filter .6s var(--ease);
}
.panel:hover .panel__shot img{transform:scale(1.05);filter:none}
.panel__shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(23,16,10,.85));
}
.panel__stamp{
  position:absolute;right:1rem;bottom:1rem;z-index:2;
  width:74px;height:74px;border-radius:50%;
  display:grid;place-content:center;text-align:center;
  background:radial-gradient(circle at 34% 28%,var(--brick-lt),var(--brick) 46%,var(--brick-dk));
  border:3px solid rgba(246,236,216,.88);
  box-shadow:0 14px 24px -12px rgba(0,0,0,.9);
  animation:stampBob 6s ease-in-out infinite;
}
.panel__stamp b{
  display:block;font-family:var(--f-cond);font-weight:600;font-size:.56rem;
  letter-spacing:.24em;text-transform:uppercase;opacity:.9;
}
.panel__stamp i{display:block;font-family:var(--f-slab);font-style:normal;font-size:.9rem;line-height:1.2}
@keyframes stampBob{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-6px) rotate(3deg)}
}
.panel__body{padding:1.6rem 1.6rem 1.8rem;display:flex;flex-direction:column;flex:1}
.panel__body h3{font-size:clamp(1.1rem,1.7vw,1.4rem);text-transform:uppercase}
.panel__body p{color:#cbb494;font-size:.94rem;margin-top:.9rem}
.panel__list{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.7rem}
.panel__list li{
  display:flex;gap:.65rem;font-size:.9rem;color:#d5c0a0;line-height:1.5;
  padding-bottom:.7rem;border-bottom:1px dashed rgba(211,164,92,.28);
}
.panel__list li:last-child{border-bottom:0;padding-bottom:0}
.panel__list span{color:var(--gold-lt);font-size:.7rem;line-height:1.7;flex:none}
/* pinned to the bottom of the panel, whatever the form beside it does */
/* a warm line to close the panel, so the phone button is not left floating in
   a tall empty column beside the taller form */
.panel__sign{
  margin-top:auto;padding-top:1.6rem;
  font-family:var(--f-script);font-size:1.5rem;color:var(--gold-lt)!important;
  line-height:1.2;
}
.panel__call{align-self:flex-start;gap:.55rem;margin-top:1.1rem}
.panel__call svg{width:17px;height:17px;fill:currentColor}

/* ============================================================== FIND US = */
.findus{
  background:linear-gradient(180deg,#efe3cb,#e7d8ba);
  border-top:1px solid rgba(125,31,31,.14);
  padding:var(--band) 0;
}
.findus__grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,3.4rem);
  align-items:center;
}
.findus__copy h2{font-size:clamp(1.6rem,2.9vw,2.4rem);text-transform:uppercase}
.findus__copy>p:not(.reach__rule){color:var(--ink-soft);margin-top:1rem;max-width:30rem}
.findus__line{font-family:var(--f-script)!important;font-size:1.5rem;color:var(--brick)!important}
.findus__addr{
  display:flex;align-items:center;gap:.6rem;margin-top:1.4rem!important;
  font-family:var(--f-cond);font-size:.88rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--wood)!important;
}
.findus__ic{width:18px;height:18px;color:var(--brick);flex:none}
.findus__ic svg{width:100%;height:100%;fill:currentColor}
.findus__copy .btn{margin-top:1.5rem}

/* ---- the chart ---- */
/* A drawn map, not a screenshot: it can carry the same lettering as the rest of
   the site, weighs nothing, and stays sharp at any size. The highway draws
   itself in and the marker drops when the panel arrives. */
.chart{
  margin:0;position:relative;border-radius:5px;overflow:hidden;
  border:10px solid #fdfaf0;outline:1px solid rgba(43,26,18,.25);
  box-shadow:0 26px 46px -26px rgba(43,26,18,.6);
  rotate:-.8deg;
  transition:transform .55s var(--ease),rotate .55s var(--ease);
}
.chart.is-in{rotate:-.8deg}
.chart:hover{rotate:0deg;transform:translateY(-6px)}
.chart svg{width:100%;height:auto;display:block}
.chart__contours path,.chart__creek path{fill:none;stroke-linecap:round}
.chart__contours path{stroke:rgba(122,84,44,.16);stroke-width:1.6}
.chart__creek path{stroke:rgba(96,124,138,.32);stroke-width:2;stroke-dasharray:1 0}
.chart__road{fill:none;stroke-linecap:round}
.chart__road--case{stroke:#8a6a3f;stroke-width:11}
.chart__road--line{stroke:#f4e6c8;stroke-width:4;stroke-dasharray:14 11}
.chart__road{stroke-dasharray:900;stroke-dashoffset:900}
.chart__road--line{stroke-dasharray:14 11}
.chart.is-in .chart__road--case{animation:chartRoad 1.8s var(--ease) .15s forwards}
.chart a {
    display: block;
    cursor: pointer;
}

.chart a img {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.chart a:hover img {
    transform: scale(1.02);
    opacity: 0.9;
}
@keyframes chartRoad{to{stroke-dashoffset:0}}
.chart__road--line{opacity:0}
.chart.is-in .chart__road--line{animation:fadeIn .7s var(--ease) 1.5s forwards}
@keyframes fadeIn{to{opacity:1}}

.chart__shield{opacity:0}
.chart__shield path{fill:#1f4d2e;stroke:#f6ecd8;stroke-width:2}
.chart__shield text{font-family:var(--f-cond);font-weight:700;font-size:17px;fill:#f6ecd8}
.chart.is-in .chart__shield{animation:popIn .55s var(--ease) 1.1s forwards}
.chart.is-in .chart__shield--b{animation-delay:1.3s}
@keyframes popIn{from{opacity:0;transform:translateY(-7px) scale(.9)}to{opacity:1;transform:none}}

.chart__mark{opacity:0;transform-box:fill-box;transform-origin:bottom center}
.chart.is-in .chart__mark{animation:pinDrop .75s cubic-bezier(.2,1.5,.4,1) 1.55s forwards}
@keyframes pinDrop{
  from{opacity:0;transform:translateY(-26px) scale(.8)}
  to{opacity:1;transform:none}
}
.chart__mark-pin{fill:var(--brick)}
.chart__mark-dot{fill:#f6ecd8}
.chart__mark-ring{fill:rgba(125,31,31,.22)}
.chart.is-in .chart__mark-ring{animation:markRing 2.8s ease-out 2.2s infinite}
@keyframes markRing{
  0%{transform:scale(.4);opacity:.8}
  70%,100%{transform:scale(1.9);opacity:0}
}
.chart__mark-ring{transform-box:fill-box;transform-origin:center}
.chart__here{
  font-family:var(--f-west);font-size:19px;fill:var(--brick);letter-spacing:.02em;
  opacity:0;
}
.chart__here--sub{font-family:var(--f-cond);font-size:12px;letter-spacing:.18em;fill:var(--wood-2);text-transform:uppercase}
.chart.is-in .chart__here{animation:fadeIn .6s var(--ease) 1.95s forwards}
.chart__place,.chart__town{
  font-family:var(--f-cond);letter-spacing:.14em;text-transform:uppercase;
  fill:#7a5a35;font-size:12px;
}
.chart__town{font-size:14px;fill:var(--wood-2);letter-spacing:.2em}
.chart__towndot{fill:var(--wood-2)}

/* ---- route notes ---- */
.routes{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.9rem}
.routes li{display:flex;gap:.9rem;align-items:flex-start}
.routes__ic{
  flex:none;width:40px;color:var(--wood-2);margin-top:.15rem;
  transition:transform .45s var(--ease);
}
.routes__ic svg{width:100%;height:auto;fill:currentColor}
.routes li:hover .routes__ic{transform:translateX(5px)}
.routes b{
  display:block;font-family:var(--f-cond);font-weight:600;font-size:.84rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--wood);
}
.routes span{display:block;font-size:.92rem;color:var(--ink-soft);margin-top:.15rem}

/* ================================================================ NOTES = */
.notes{
  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;
}
.notes__head{text-align:center;margin-bottom:2.4rem}
.notes__head .script{color:var(--brick);opacity:.9}
.notes__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
/* No cards here either: the three notes sit straight on the band, divided by
   the same dotted rule the ledger uses. */
/* Layout: vignette baayein, matter daayein -- teen columns, beech me wahi
   dotted rule. Pehle sab centre me stack tha, jo band ko unnecessarily
   uncha kar deta tha aur reference layout se mel nahi khata tha.
   Do hi flex items hain -- art aur `.note__body` -- isliye heading, matter
   aur link body ke andar normal flow me stack rehte hain. */
.note{
  position:relative;display:flex;align-items:flex-start;gap:1.05rem;
  text-align:left;padding:.2rem 1.1rem;
  transition:transform .45s var(--ease);
}
/* min-width:0 zaroori hai, warna lambi lines flex item ko chaudा kar deti
   hain aur column apni jagah se bahar nikal jata hai. */
.note__body{flex:1;min-width:0}
.note+.note::before{
  content:"";position:absolute;left:0;top:.2rem;bottom:.2rem;width:1px;
  background:repeating-linear-gradient(180deg,rgba(125,31,31,.36) 0 4px,transparent 4px 10px);
}
.note:hover{transform:translateY(-6px)}
/* Line-drawn vignettes rather than filled icons -- they sit better on paper. */
.note__art{display:block;flex:none;width:clamp(96px,9.5vw,128px);margin:0;color:var(--wood-2)}
.note__art img{width:100%;height:auto;display:block}
.note__art svg{width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.note:hover .note__art{animation:artNudge .8s var(--ease)}
@keyframes artNudge{40%{transform:translateY(-5px) rotate(-3deg)}}
.note h3{
  font-family:var(--f-cond);font-weight:600;font-size:.98rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--wood);
}
.note h3::after{
  content:"";display:block;width:24px;height:2px;margin:.55rem 0 .6rem;
  background:var(--brick);border-radius:2px;
  transition:width .45s var(--ease),background .45s;
}
.note:hover h3::after{width:50px;background:var(--gold)}
.note p{font-size:.9rem;color:var(--ink-soft);max-width:none}
.note__link{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;
  font-family:var(--f-cond);font-weight:600;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brick);
  transition:gap .3s var(--ease),color .3s;
}
.note__link span{transition:transform .3s var(--ease)}
.note__link:hover{color:var(--brick-dk)}
.note__link:hover span{transform:translateX(4px)}

/* ================================================================== FAQ = */
/* <details>/<summary> so the keyboard and screen-reader behaviour is native.
   The panel animates with a grid-row trick rather than a measured max-height,
   which keeps it honest at any content length. */
.faq{
  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-top:1px solid rgba(125,31,31,.14);
  padding:var(--band) 0;
}
/* Rows on the paper rather than a stack of boxes: one hairline between each,
   and the open panel is the only thing that gets a tint. */
.faq__list{max-width:52rem;margin-inline:auto}
.qa{
  border-bottom:1px dashed rgba(125,31,31,.3);
  transition:background .4s;
}
.qa:first-child{border-top:1px dashed rgba(125,31,31,.3)}
.qa[open]{background:linear-gradient(180deg,rgba(255,251,242,.6),transparent)}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem .4rem;cursor:pointer;list-style:none;
  transition:background .35s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover .qa__q{color:var(--brick)}
.qa__q{transition:color .3s}
.qa summary:focus-visible{outline:2px solid var(--brick);outline-offset:-3px}
.qa__q{
  font-family:var(--f-cond);font-weight:600;font-size:.95rem;
  letter-spacing:.06em;color:var(--wood);
}
/* the sign turns from + to − as the panel opens */
.qa__sign{
  position:relative;flex:none;width:26px;height:26px;border-radius:50%;
  background:rgba(125,31,31,.1);border:1px solid rgba(125,31,31,.3);
  transition:background .35s,border-color .35s,transform .4s var(--ease);
}
.qa__sign::before,.qa__sign::after{
  content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;
  translate:-50% -50%;background:var(--brick);border-radius:2px;
  transition:transform .4s var(--ease),opacity .3s;
}
.qa__sign::after{rotate:90deg}
.qa[open] .qa__sign{background:var(--brick);border-color:var(--brick);transform:rotate(180deg)}
.qa[open] .qa__sign::before,.qa[open] .qa__sign::after{background:var(--cream)}
.qa[open] .qa__sign::after{opacity:0}
.qa__a{
  padding:0 3rem 1.3rem .4rem;color:var(--ink-soft);font-size:.95rem;line-height:1.7;
  animation:qaOpen .45s var(--ease);
}
.qa__a a{color:var(--brick);border-bottom:1px solid rgba(125,31,31,.4)}
@keyframes qaOpen{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}

/* ================================================================== CTA = */
.ccta{
  position:relative;overflow:hidden;text-align:center;color:var(--cream);
 background-image: url(../img/map-bg.png);
  border-block:3px solid rgba(211,164,92,.35);
  padding:clamp(2.4rem,4.5vw,3.6rem) 0;
}
/* A faint chart of the crossroads behind the band, drawn in CSS so it costs
   nothing: two roads and the towns either side. */
.ccta__map{
  position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:
    linear-gradient(96deg,transparent calc(50% - 1px),rgba(246,236,216,.9) 50%,transparent calc(50% + 1px)),
    linear-gradient(8deg,transparent calc(50% - 1px),rgba(246,236,216,.55) 50%,transparent calc(50% + 1px)),
    repeating-linear-gradient(96deg,rgba(246,236,216,.18) 0 12px,transparent 12px 26px);
  background-size:100% 100%,100% 100%,100% 3px;
  background-position:0 0,0 0,0 58%;
  background-repeat:no-repeat;
}
.ccta::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,226,178,.14) 50%,transparent 65%);
  transform:translateX(-100%);animation:ccSweep 8s ease-in-out 2s infinite;
}
@keyframes ccSweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.ccta__inner{position:relative;z-index:1}
.ccta h2{font-size:clamp(1.5rem,3.2vw,2.5rem);text-transform:uppercase}
.ccta .reach__rule{margin-inline:auto;max-width:12rem}
.ccta__sub{
  font-family:var(--f-cond);font-size:.9rem;letter-spacing:.1em;
  color:#f3ddbe;margin-top:.9rem;
}
.ccta__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}
.ccta .eyebrow{display:flex;justify-content:center;gap:.5rem}
.ccta__btn{border-color:var(--cream)}
.ccta__btn::before{background:var(--cream)}
.ccta__btn:hover{color:var(--brick-dk)}

/* ============================================================ RESPONSIVE = */
@media (max-width:1080px){
  .touch__grid{grid-template-columns:1fr;gap:2.2rem}
  .write__grid{grid-template-columns:1fr;gap:2.2rem}
  .panel{max-width:34rem;margin-inline:auto}
  .panel__shot img{max-height:13rem}
  .findus__grid{grid-template-columns:1fr;gap:2.4rem}
  .findus__copy{max-width:38rem}
  .chart{max-width:38rem;margin-inline:auto}
  .notes__grid{grid-template-columns:1fr 1fr}
  .note:last-child{grid-column:span 2;max-width:26rem;margin-inline:auto}
}
@media (max-width:820px){
  .chero__barIn{justify-content:center;text-align:center}
  .chero__facts{justify-content:center}
}
@media (max-width:680px){
  /* the banner bar loses its dividers and stacks */
  .chero__inner{padding-block:3.4rem 8.4rem}
  .chero__facts{flex-direction:column;align-items:center;gap:.55rem}
  .chero__facts li,.chero__facts li:first-child{padding-left:0;font-size:.74rem}
  .chero__facts li:not(:first-child)::before{display:none}
  .chips{gap:.4rem}
  .chip span{padding:.45rem .7rem;font-size:.72rem}
  /* the ledger stacks label over value, leader dropped */
  .ledger__row{grid-template-columns:1fr;row-gap:.3rem}
  .ledger dt::after{display:none}
  .ledger dd{text-align:left}
  .tag{margin-left:0;margin-top:.4rem}
  .notes__grid{gap:0}
  .note{padding:1.2rem 0}
  .note+.note::before{
    left:0;right:0;top:0;bottom:auto;width:auto;height:1px;
    background:repeating-linear-gradient(90deg,rgba(125,31,31,.36) 0 4px,transparent 4px 10px);
  }
  .msg__foot{flex-direction:column;align-items:stretch;text-align:center}
  .msg__send{flex:1 1 auto}
  .qa summary{padding:.95rem 1rem}
  .qa__a{padding-inline:1rem}
  /* The banner keeps --hero-h at every width so the inner pages stay the same
     height as each other on phones too; the copy keeps the 8.4rem bottom
     padding set above so the stacked facts bar never runs into it. */
  .chero__shield{right:.8rem;top:1rem;width:40px}
  .msg__grid{grid-template-columns:1fr;column-gap:0}
  .notes__grid{grid-template-columns:1fr}
  .note:last-child{grid-column:auto}
}

/* ============================================================ MOTION PREF = */
@media (prefers-reduced-motion:reduce){
  .chero__bg,.chero__shield,.chero__rule b,.ccta::after,
  .ribbon__dot,.chart__mark-ring{animation:none}
  .chart__road{stroke-dashoffset:0}
  .chart__road--line,.chart__shield,.chart__mark,.chart__here{opacity:1}
  .chart__mark{transform:none}
  .panel__stamp{animation:none}
  .qa__a{animation:none}
}