/* ==========================================================================
   Sukhmal Dry Fruits Korner — sukhmal-dry-fruits-korner.otlusites.com
   One hand-written stylesheet. Nothing is loaded from another domain.

   WHERE THE LOOK COMES FROM
   Sukhmal owns two surfaces and the site is built out of both. Outside,
   the shopfront board is a deep slate-navy (#36445F sampled off the
   daylight photograph) with white letters and one small orange tag.
   Inside, every counter has its name written in gold script on gloss
   black — "Roasted 'N' Salted", "Hand Mixed Blends" — and the logo is
   the same gold on the same black.

   So the page alternates: a warm stone paper for reading, cut across by
   full-bleed lacquer bands that are the shop's own black boards, carrying
   the shop's own gold lettering. The gold is theirs; it is kept to
   hairlines, small caps and the seal rather than poured into fills,
   because gold used large stops reading as gold. The burnt orange comes
   off the dried apricots in their logo and off the "Organic Farms" tag on
   the signboard, and it appears about four times in the whole document.

   The dark scheme is the shop at closing time rather than an inversion:
   the page drops to a deeper ink than the bands, so the bands stay
   legible as raised panels instead of dissolving into the page, and the
   gold lifts to honey so it reads as metal and not as mud.

   TYPE
   Fraunces for anything said out loud. Their logotype is a high-contrast
   serif with a swash, and Fraunces is the only open face with an optical
   size axis warm enough to sit next to it — the display settings here run
   opsz high and WONK on, which is what gives the headings their splayed
   leg. Karla for everything read quietly: it is cut for Indian setting,
   it holds up at 320px, and it does not fight the serif. Two families.
   ========================================================================== */

/* ---- fonts, self-hosted -------------------------------------------------
   Both faces are cut to Google's "latin" subset, which does not carry the
   rupee sign. The third file is Fraunces subset down to that one glyph —
   2 KB — and it is registered under BOTH families, so a ₹ renders from a
   real self-hosted file wherever it lands rather than from whatever the
   phone happens to have. Karla has no ₹ in any subset at all.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-rupee.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20B9;
}
@font-face {
  font-family: "Karla";
  src: url("/assets/fonts/karla-latin.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("/assets/fonts/fraunces-rupee.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20B9;
}

/* ---- the six, light ---------------------------------------------------- */

:root {
  color-scheme: light;
  --bg:          #EEE9E0;   /* warm stone, greyed — not a yellow cream     */
  --bg-sunk:     #E6E0D3;   /* one step down, for inset panels             */
  --ink:         #1C2434;   /* their signboard navy, taken darker          */
  --muted:       #4A5468;
  --line:        #D9D2C4;
  --accent:      #7E5F1E;   /* their gold, dark enough to set text in      */
  --accent-lit:  #9A7629;   /* the same gold for rules and ornament        */
  --accent-ink:  #F3EFE7;
  --ember:       #A8420C;   /* dried apricot, from the logo                */

  /* the lacquer band — the shop's own black board */
  --band:        #1C2434;
  --band-ink:    #EFE9DE;
  --band-muted:  #A9B0C1;
  --band-gold:   #D6AC5E;
  --band-line:   rgba(214, 172, 94, .30);
  --band-sunk:   rgba(0, 0, 0, .22);

  /* a light plate to stand cut-out product shots on, so they are never a
     glowing rectangle on a dark page */
  --plate:       #FBF8F2;
  --plate-line:  #E2DACA;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --pad:   clamp(1.15rem, 5vw, 2.75rem);
  --gap:   clamp(3.75rem, 8vw, 7rem);
  --wide:  74rem;
  --read:  36rem;
}

/* ---- the six, dark. Written twice on purpose; see design.md. ----------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:         #11151E;
    --bg-sunk:    #161B26;
    --ink:        #EFE9DE;
    --muted:      #A2AABC;
    --line:       #262E3C;
    --accent:     #D6AC5E;
    --accent-lit: #E0BA72;
    --accent-ink: #141A25;
    --ember:      #E4763C;

    --band:       #1D2534;   /* lifted ABOVE the page, so it still reads   */
    --band-ink:   #EFE9DE;
    --band-muted: #A9B0C1;
    --band-gold:  #D6AC5E;
    --band-line:  rgba(214, 172, 94, .32);
    --band-sunk:  rgba(0, 0, 0, .28);

    --plate:      #E7E1D5;   /* warm, not white                            */
    --plate-line: #CFC6B4;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:         #11151E;
  --bg-sunk:    #161B26;
  --ink:        #EFE9DE;
  --muted:      #A2AABC;
  --line:       #262E3C;
  --accent:     #D6AC5E;
  --accent-lit: #E0BA72;
  --accent-ink: #141A25;
  --ember:      #E4763C;

  --band:       #1D2534;
  --band-ink:   #EFE9DE;
  --band-muted: #A9B0C1;
  --band-gold:  #D6AC5E;
  --band-line:  rgba(214, 172, 94, .32);
  --band-sunk:  rgba(0, 0, 0, .28);

  --plate:      #E7E1D5;
  --plate-line: #CFC6B4;
}

/* ---- ground ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--bg);
  padding: .7rem 1rem; z-index: 100;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--pad); }

/* ---- display type ------------------------------------------------------ */

h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.012em; }

h1 {
  font-size: clamp(2.35rem, 6.4vw, 4.15rem);
  line-height: 1.03;
  font-variation-settings: "opsz" 144, "wght" 430, "SOFT" 24, "WONK" 1;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.85rem, 4.1vw, 2.85rem);
  line-height: 1.1;
  font-variation-settings: "opsz" 96, "wght" 450, "SOFT" 18, "WONK" 1;
  text-wrap: balance;
}
h3 {
  font-size: 1.24rem;
  line-height: 1.24;
  font-variation-settings: "opsz" 30, "wght" 560, "SOFT" 10, "WONK" 0;
}

/* the eyebrow — a shelf label */
.kicker {
  font-family: var(--sans);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.05rem;
  display: flex; align-items: center; gap: .8rem;
}
.kicker::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: linear-gradient(to right, var(--accent-lit), transparent);
  opacity: .55;
}
.band .kicker { color: var(--band-gold); }
.band .kicker::after { background: linear-gradient(to right, var(--band-gold), transparent); opacity: .5; }

.lede {
  font-size: clamp(1.09rem, 1.9vw, 1.28rem);
  line-height: 1.56;
  color: var(--muted);
  max-width: 34rem;
  margin: 1.35rem 0 0;
}
.band .lede { color: var(--band-muted); }

p { margin: 0 0 1.05em; max-width: var(--read); }
p:last-child { margin-bottom: 0; }
h2 + p { margin-top: 1.05rem; }

/* the divider from their own logo: a lozenge between two hairlines */
/* the divider is the lozenge-and-dots that sits under the wordmark on
   their own logo. Three elements rather than box-shadows, because a
   box-shadow on a rotated box rotates with it and comes out crooked. */
.orn { display: flex; align-items: center; justify-content: center; gap: .58rem;
       margin: 2.6rem 0 0; border: 0; }
.orn::before, .orn::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.orn i { flex: none; background: var(--accent-lit); }
.orn i:nth-child(2) { width: 7px; height: 7px; transform: rotate(45deg); }
.orn i:nth-child(1), .orn i:nth-child(3) { width: 3px; height: 3px; border-radius: 50%; opacity: .8; }
.band .orn::before, .band .orn::after { background: var(--band-line); }
.band .orn i { background: var(--band-gold); }

/* ---- buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px;
  padding: .68rem 1.3rem;
  font-family: var(--sans); font-size: .93rem; font-weight: 600;
  letter-spacing: .015em;
  text-decoration: none;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--bg);
  border-radius: 1px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: transparent; color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }

.band .btn { background: var(--band-gold); border-color: var(--band-gold); color: #17202E; }
.band .btn:hover { background: transparent; color: var(--band-gold); }
.band .btn--ghost { background: transparent; color: var(--band-ink); border-color: var(--band-line); }
.band .btn--ghost:hover { background: var(--band-ink); border-color: var(--band-ink); color: #17202E; }

.btns { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.9rem; }

/* ---- the top bar ------------------------------------------------------- */

.top {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.3) blur(9px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) { .top { background: var(--bg); } }

.top__in {
  display: flex; align-items: center; gap: 1rem;
  min-height: 62px;
  width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--pad);
}

.brand { display: flex; align-items: center; gap: .62rem; text-decoration: none; margin-right: auto; }
.brand img { width: 30px; height: 30px; flex: none; }
.brand b {
  display: block;
  font-family: var(--serif); font-weight: 400; font-size: 1.16rem; line-height: 1;
  font-variation-settings: "opsz" 40, "wght" 500, "SOFT" 14, "WONK" 1;
  letter-spacing: -.01em; white-space: nowrap;
}
.brand em {
  display: block; font-style: normal;
  font-size: .565rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); margin-top: .24rem; white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav a {
  text-decoration: none; font-size: .88rem; font-weight: 500;
  color: var(--muted); padding: .35rem 0;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--accent-lit); }

.navtoggle { display: none; }

/* light / dark: one button, two states */
.theme {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 40px; padding: .45rem .78rem .45rem .62rem;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 40px;
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
}
.theme:hover { color: var(--ink); border-color: var(--accent-lit); }
.theme i {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  border: 1px solid currentColor; background: transparent;
  transition: background .15s ease, box-shadow .15s ease;
}
.theme[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-lit); }
.theme[aria-pressed="true"] i { background: var(--accent-lit); box-shadow: inset 0 0 0 1px var(--bg); }

/* ---- opener ------------------------------------------------------------ */

.hero { padding: clamp(2.6rem, 6vw, 4.6rem) 0 clamp(3rem, 7vw, 5.5rem); overflow: hidden; }
.hero__in {
  display: grid; gap: clamp(2.4rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
.hero__say { max-width: 34rem; }
.hero h1 { margin-bottom: .2em; }
.hero h1 em { font-style: normal; color: var(--accent); }

.rating {
  display: inline-flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin-top: 1.6rem; font-size: .88rem; color: var(--muted);
  text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: .3rem;
}
.rating b { font-family: var(--serif); font-size: 1.42rem; color: var(--accent); font-variation-settings: "opsz" 40, "wght" 500, "SOFT" 12, "WONK" 0; }
.rating:hover { border-bottom-color: var(--accent-lit); color: var(--ink); }

/* the photograph, with an off-register hairline behind it */
.hero__shot { position: relative; justify-self: center; width: 100%; max-width: 30rem; }
.hero__shot::before {
  content: ""; position: absolute; inset: 16px -16px -16px 16px;
  border: 1px solid var(--accent-lit); opacity: .55; pointer-events: none;
}
.hero__shot img { position: relative; width: 100%; }

@media (min-width: 62rem) {
  .hero__in { grid-template-columns: 1.06fr .94fr; }
  .hero__shot { max-width: none; }
}

/* ---- sections ---------------------------------------------------------- */

.sec { padding-block: var(--gap); }
.sec--sunk { background: var(--bg-sunk); }

/* the lacquer band: the shop's own black board, in both schemes */
.band {
  background: var(--band); color: var(--band-ink);
  padding-block: var(--gap);
  border-top: 1px solid var(--band-line);
  border-bottom: 1px solid var(--band-line);
}
.band h2, .band h3 { color: var(--band-ink); }
.band a:not(.btn) { color: var(--band-gold); }

.head { max-width: 40rem; margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem); }
.head p { color: var(--muted); }
.band .head p { color: var(--band-muted); }

/* ---- the two counters -------------------------------------------------- */

.counters { display: grid; gap: clamp(1.6rem, 3.5vw, 2.6rem); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .counters { grid-template-columns: 1fr 1fr; } }

.counter figure { margin: 0; }
/* both counters cropped to the same ratio so the two captions line up */
.counter img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border: 1px solid var(--band-line); }
.counter figcaption { margin-top: 1.15rem; }
.counter h3 { margin-bottom: .5rem; }
.counter p { color: var(--band-muted); font-size: .97rem; max-width: 26rem; }

/* ---- the range --------------------------------------------------------- */

.range { display: grid; gap: clamp(2.2rem, 5vw, 3.6rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 60rem) { .range { grid-template-columns: 1fr 20rem; } }

.groups { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .groups { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.4rem); } }

.group { padding: 1.35rem 0; border-top: 1px solid var(--line); }
.group h3 {
  font-family: var(--sans); font-size: .71rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
  margin-bottom: .55rem;
}
.group p { font-size: 1.02rem; line-height: 1.55; color: var(--ink); margin: 0; max-width: none; }
.group p i { font-style: normal; color: var(--muted); }

.note { margin-top: 1.9rem; font-size: .95rem; color: var(--muted); max-width: 32rem; }

/* the specimen plate — a cut-out product shot given a light container so it
   is never a glowing rectangle on a dark page */
.plate {
  background: var(--plate); border: 1px solid var(--plate-line);
  padding: 1.5rem 1.5rem 1.15rem;
  margin: 0;
  position: relative;
}
.plate img { width: 100%; mix-blend-mode: multiply; }
.plate figcaption {
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--plate-line);
  font-size: .82rem; line-height: 1.5; color: #4A5468;
}
.plate figcaption b {
  display: block; font-family: var(--sans); font-weight: 800;
  font-size: .67rem; letter-spacing: .18em; text-transform: uppercase;
  color: #7E5F1E; margin-bottom: .3rem;
}

/* ---- hampers ----------------------------------------------------------- */

.hamp { display: grid; gap: clamp(2rem, 4.5vw, 3.4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 60rem) { .hamp { grid-template-columns: .92fr 1.08fr; } }

.hamp__shots { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.7rem, 1.6vw, 1.15rem); align-items: start; }
.hamp__shots img { width: 100%; border: 1px solid var(--line); }
.hamp__shots figure { margin: 0; }
.hamp__shots .tall { grid-row: span 2; }
.hamp__shots .off { margin-top: clamp(1.4rem, 3.5vw, 2.8rem); }

/* their own line, off their Instagram — set as a quoted aside so it is
   not mistaken for a second heading */
.oneline {
  font-family: var(--serif);
  font-size: clamp(1.12rem, 2.1vw, 1.38rem); line-height: 1.42;
  font-variation-settings: "opsz" 44, "wght" 400, "SOFT" 22, "WONK" 1;
  color: var(--accent); max-width: 23rem;
  margin: 1.75rem 0 1.7rem;
  padding-left: 1.05rem;
  border-left: 2px solid var(--accent-lit);
}

/* ---- a photograph across the whole width ------------------------------- */

.bleed { margin: 0; }
.bleed img { width: 100%; max-height: 62vh; object-fit: cover; }
.bleed figcaption {
  max-width: var(--wide); margin-inline: auto; padding: .85rem var(--pad) 0;
  font-size: .82rem; color: var(--muted); letter-spacing: .02em;
}

/* ---- about ------------------------------------------------------------- */

.about { display: grid; gap: clamp(1.8rem, 4vw, 3.2rem); grid-template-columns: 1fr; }
@media (min-width: 56rem) { .about { grid-template-columns: 11rem 1fr; } }
.about__seal img { width: 108px; height: 108px; }
.about__seal .kicker { margin-top: 1.2rem; }

/* ---- visit ------------------------------------------------------------- */

.visit { display: grid; gap: clamp(2rem, 4.5vw, 3.4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 58rem) { .visit { grid-template-columns: 1.02fr .98fr; } }

.facts { display: grid; gap: 0; margin: 0; }
.facts > div { padding: 1.15rem 0; border-top: 1px solid var(--band-line); }
.facts dt {
  font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--band-gold); margin-bottom: .42rem;
}
.facts dd { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--band-ink); }
/* underline rather than a border, so the padding that makes these a
   proper thumb target does not drag the rule away from the baseline */
.facts dd a {
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: var(--band-line);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  padding-block: .62rem; margin-block: -.5rem;   /* ~44px of thumb, same rhythm */
}
.facts dd a:hover { text-decoration-color: var(--band-gold); }
.facts dd small { display: block; font-size: .85rem; color: var(--band-muted); margin-top: .3rem; }

.visit__shot img { width: 100%; border: 1px solid var(--band-line); }
.visit__shot figcaption { margin-top: .85rem; font-size: .84rem; color: var(--band-muted); }

/* ---- the enquiry form -------------------------------------------------- */

.enquiry { max-width: 32rem; margin-top: 2.2rem; }
.enquiry__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry__field { margin-bottom: 1.05rem; }
.enquiry label {
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .45rem;
}
.enquiry__optional { font-weight: 500; letter-spacing: .06em; text-transform: none; opacity: .8; }
.enquiry input, .enquiry textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--plate);
  border: 1px solid var(--line); border-radius: 1px;
  padding: .72rem .85rem;
  min-height: 46px;
}
:root[data-theme="dark"] .enquiry input, :root[data-theme="dark"] .enquiry textarea { background: var(--bg-sunk); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .enquiry input,
  :root:not([data-theme="light"]) .enquiry textarea { background: var(--bg-sunk); }
}
.enquiry input:focus, .enquiry textarea:focus { border-color: var(--accent); outline-offset: 1px; }
.enquiry textarea { resize: vertical; }
.enquiry button[type="submit"] {
  min-height: 48px; padding: .72rem 1.9rem; cursor: pointer;
  font-family: var(--sans); font-size: .93rem; font-weight: 600; letter-spacing: .015em;
  background: var(--ink); color: var(--bg);
  border: 1px solid var(--ink); border-radius: 1px;
}
.enquiry button[type="submit"]:hover { background: transparent; color: var(--ink); }
.enquiry button[type="submit"][disabled] { opacity: .55; cursor: progress; }
.enquiry__done { font-family: var(--serif); font-size: 1.2rem; color: var(--accent); max-width: none;
  font-variation-settings: "opsz" 40, "wght" 480, "SOFT" 16, "WONK" 1; }

/* the form, and the ways round it ---------------------------------------- */

.ask { display: grid; gap: clamp(2rem, 4vw, 3.6rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 58rem) { .ask { grid-template-columns: 1fr 19rem; } }
.ask .enquiry { margin-top: 0; }
.ask__other { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.ask__other h3 {
  font-family: var(--sans); font-size: .71rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 1.15rem;
}
.ask__other p { font-size: .92rem; color: var(--muted); margin: 1.35rem 0 0; }
.btns--stack { flex-direction: column; align-items: stretch; margin-top: 0; }
.btns--stack .btn { width: 100%; }

/* ---- footer ------------------------------------------------------------ */

.foot { background: var(--band); color: var(--band-ink); padding-block: clamp(2.8rem, 6vw, 4.2rem); }
.foot a { color: var(--band-ink); }
.foot__top { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 48rem) { .foot__top { grid-template-columns: 1.2fr 1fr 1fr; } }

.foot__brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.foot__brand img { width: 40px; height: 40px; }
.foot__brand b {
  display: block;
  font-family: var(--serif); font-weight: 400; font-size: 1.28rem; line-height: 1.1;
  font-variation-settings: "opsz" 48, "wght" 480, "SOFT" 16, "WONK" 1;
}
.foot__brand em { display: block; font-style: normal; font-size: .58rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--band-gold); margin-top: .25rem; }

.foot h4 {
  margin: 0 0 .85rem; font-family: var(--sans);
  font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--band-gold);
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.foot ul a { text-decoration: none; font-size: .95rem; color: var(--band-muted); }
.foot ul a:hover { color: var(--band-ink); }
.foot__addr { font-size: .95rem; color: var(--band-muted); margin: 1.2rem 0 0; max-width: 20rem; line-height: 1.6; }

.foot__end {
  margin-top: clamp(2.2rem, 5vw, 3.2rem); padding-top: 1.5rem;
  border-top: 1px solid var(--band-line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: .82rem; color: var(--band-muted);
}
.foot__end p { margin: 0; max-width: none; }

.foot .theme { color: var(--band-muted); border-color: var(--band-line); }
.foot .theme:hover { color: var(--band-ink); border-color: var(--band-gold); }
.foot .theme[aria-pressed="true"] { color: var(--band-gold); border-color: var(--band-gold); }
.foot .theme[aria-pressed="true"] i { background: var(--band-gold); box-shadow: inset 0 0 0 1px var(--band); }
.foot__end { --line: var(--band-line); }

.built-by {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; font-size: .74rem; letter-spacing: .06em;
  color: var(--band-muted); opacity: .72;
}
.built-by:hover { opacity: 1; }
.built-by img { width: 78px; height: 16px; }

/* ---- 404 --------------------------------------------------------------- */

.lost { display: grid; place-items: center; min-height: 68vh; text-align: center; }
.lost .btns { justify-content: center; }
.lost p { margin-inline: auto; }

/* ---- small screens ----------------------------------------------------- */

@media (max-width: 55.99rem) {
  .navtoggle {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 40px; padding: .4rem .85rem;
    background: transparent; color: var(--ink);
    border: 1px solid var(--line); border-radius: 1px;
    font-family: var(--sans); font-size: .78rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  }
  .navtoggle u { display: block; width: 14px; height: 1px; background: currentColor; position: relative; text-decoration: none; }
  .navtoggle u::before, .navtoggle u::after { content: ""; position: absolute; left: 0; width: 14px; height: 1px; background: currentColor; }
  .navtoggle u::before { top: -4px; }
  .navtoggle u::after  { top: 4px; }
  .navtoggle[aria-expanded="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: .4rem var(--pad) 1.3rem;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: 1.02rem; color: var(--ink); }
  .nav a:last-of-type { border-bottom: 1px solid var(--line); }
  .theme { align-self: flex-start; margin-top: 1.15rem; }
  .top { position: sticky; }
  .top__in { position: relative; }
  .brand em { display: none; }
}

@media (max-width: 47.99rem) {
  /* the offset hairline behind the opener photograph reads as a stray box
     once the columns stack — it only works beside the type */
  .hero__shot::before { display: none; }
}

@media (max-width: 24.5rem) {
  .brand b { font-size: 1rem; }
  .brand img { width: 26px; height: 26px; }
  .navtoggle { padding: .4rem .6rem; font-size: .72rem; }
  .btns .btn { flex: 1 1 100%; }
}

/* ---- print ------------------------------------------------------------- */

@media print {
  .top, .btns, .enquiry, .built-by, .theme, .hero__shot, .bleed, .visit__shot,
  .hamp__shots, .counter img, .plate img, .skip { display: none !important; }
  :root { --bg: #fff; --ink: #000; --muted: #333; --line: #bbb;
          --band: #fff; --band-ink: #000; --band-muted: #333; --band-gold: #555;
          --band-line: #bbb; --bg-sunk: #fff; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band, .foot { background: #fff; color: #000; border-color: #bbb; }
  .sec, .band { padding-block: 1.2rem; page-break-inside: avoid; }
  a { text-decoration: none; }
  .facts dd a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}