/* =====================================================================
   OLD TOWN ANTIQUES & BOOKS  —  "Enamel & Awning"  (blue-forward)
   Lake Superior blue lead · warm cream paper · navy for depth ·
   brass + agate as fine accents only.
   Signature: scalloped awning valance + tailored white "piping" welt.
   ===================================================================== */

/* ------------------------------------------------------------------ *
 * 1. TOKENS
 * ------------------------------------------------------------------ */
:root{
  --blue:      #2c6cb0;   /* Lake Superior blue — the lead      */
  --blue-br:   #3f88d0;   /* bright hover / highlight           */
  --blue-lt:   #6ba7dd;   /* light blue for accents on dark     */
  --blue-deep: #1d4d82;   /* deeper blue panels                 */
  --navy:      #152a49;   /* depth only                         */
  --navy-deep: #0f2038;   /* footer                             */
  --sky:       #eef4fb;   /* pale blue wash (lightened)         */
  --sky-2:     #e0ecf7;
  --cream:     #faf6ee;   /* warm near-white paper              */
  --cream-2:   #f1ebdd;
  --ink:       #16273d;   /* text on light                      */
  --ink-soft:  #47566a;
  --brass:     #c6a24f;   /* fine accent only (stars, rails)    */
  --brass-br:  #e0c07c;
  --agate:     #b0492a;   /* small warm pop                     */
  --star:      #f4eedf;
  --white:     #ffffff;

  --line:      rgba(22,39,61,.13);
  --line-2:    rgba(22,39,61,.26);
  --line-bl:   rgba(255,255,255,.28);   /* hairline on blue/navy  */
  --pipe:      rgba(255,255,255,.92);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sign:  "Oswald", "Arial Narrow", sans-serif;
  --body:  "Figtree", system-ui, sans-serif;
  --mono:  "Space Mono", ui-monospace, monospace;

  --step--1: clamp(.82rem, .79rem + .14vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.12rem + .4vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.35rem + .75vw, 2.1rem);
  --step-3:  clamp(2rem, 1.7rem + 1.5vw, 3.1rem);
  --step-4:  clamp(2.6rem, 2.1rem + 2.6vw, 4.6rem);
  --step-5:  clamp(3.2rem, 2.4rem + 4vw, 6rem);

  --wrap: 1180px;
  --gap:  clamp(1.5rem, 1rem + 2vw, 3rem);
  --bay:  clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ------------------------------------------------------------------ *
 * 2. RESET / BASE
 * ------------------------------------------------------------------ */
*{ box-sizing:border-box; margin:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  font-family:var(--body); font-size:var(--step-0); line-height:1.62;
  color:var(--ink); background:var(--cream);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
h1,h2,h3{ line-height:1.05; font-weight:600 }
.wrap{ width:min(100% - 2.4rem, var(--wrap)); margin-inline:auto }
.anchor{ display:block; position:relative; top:-80px; visibility:hidden }
section{ scroll-margin-top:80px }

.kicker{
  font-family:var(--sign); text-transform:uppercase; letter-spacing:.18em;
  font-size:var(--step--1); font-weight:500; color:var(--ink-soft); margin-bottom:1rem;
}
.kicker--blue{ color:var(--blue) }
.kicker--onblue{ color:var(--blue-lt) }

.sec-head{ max-width:46ch; margin-bottom:clamp(2rem, 1.5rem + 2vw, 3.2rem) }
.sec-head--center{ margin-inline:auto; text-align:center }
.sec-title{ font-family:var(--serif); font-size:var(--step-3); letter-spacing:.005em }
.sec-title--light{ color:var(--cream) }
.sec-note{ margin-top:.9rem; color:var(--ink-soft); font-size:var(--step-1); font-family:var(--serif); font-style:italic }

/* star + star ratings */
.star{ display:inline-block; width:.8em; height:.8em; vertical-align:-.05em; background:var(--brass);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%) }
.stars{ display:inline-flex; gap:3px }
.stars i{ width:15px; height:15px; background:var(--blue);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%) }
.stars--gold i{ background:var(--brass) }

/* ------------------------------------------------------------------ *
 * 3. BUTTONS / LINKS
 * ------------------------------------------------------------------ */
.btn{
  --bg:var(--blue); --fg:#fff;
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--sign); text-transform:uppercase; letter-spacing:.09em; font-weight:600;
  font-size:var(--step--1); padding:.85em 1.5em; background:var(--bg); color:var(--fg);
  border:1px solid transparent; border-radius:2px; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
}
.btn--blue{ background:linear-gradient(180deg,var(--blue-br),var(--blue));
  box-shadow:0 1px 0 rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.28) }
.btn--blue:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(28,77,130,.7), inset 0 1px 0 rgba(255,255,255,.34) }
.btn--ghost{ --fg:var(--ink); background:transparent; border-color:var(--line-2) }
.btn--ghost:hover{ background:rgba(22,39,61,.05); transform:translateY(-2px) }
.btn--ghost-light{ --fg:var(--cream); border-color:var(--line-bl) }
.btn--ghost-light:hover{ background:rgba(255,255,255,.08) }
.btn--sm{ padding:.6em 1em; font-size:.72rem }

.link-arrow{ font-family:var(--sign); text-transform:uppercase; letter-spacing:.1em; font-weight:600;
  font-size:var(--step--1); color:var(--blue); border-bottom:2px solid transparent; padding-bottom:2px;
  transition:border-color .2s, gap .2s }
.link-arrow:hover{ border-color:var(--blue) }

/* ------------------------------------------------------------------ *
 * 4. TOP PLAQUE
 * ------------------------------------------------------------------ */
.plaque{ background:var(--navy-deep); color:var(--cream) }
.plaque__row{ display:flex; gap:.6rem 1.5rem; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:.5rem 0; font-family:var(--mono); font-size:.72rem; letter-spacing:.02em }
.plaque__group{ display:inline-flex; align-items:center; gap:1.5rem; flex-wrap:wrap }
.plaque__group--right{ margin-left:auto }
.plaque__item{ display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap }
.plaque__item + .plaque__item::before{ content:"✦"; color:var(--blue-lt); margin-right:1.1rem; margin-left:-.55rem }
.plaque__soft{ color:rgba(244,238,223,.6) }
.plaque__tel:hover{ color:var(--blue-lt) }
.plaque__dir{ display:inline-flex; align-items:center; gap:.28rem; color:var(--blue-lt); text-decoration:underline; text-underline-offset:2px; margin-left:.5rem }
.plaque__dir:hover{ color:var(--cream) }
.plaque__pin{ width:.92em; height:.92em; flex:none }

/* ------------------------------------------------------------------ *
 * 5. MASTHEAD (nav + hanging awning)
 * ------------------------------------------------------------------ */
.masthead{ position:sticky; top:0; z-index:60 }
.masthead.is-stuck{ box-shadow:0 10px 30px -18px rgba(21,42,73,.5) }
/* full-bleed cream behind the nav row ONLY (not behind the awning, so the
   awning's scallop notches reveal the section below on any background) */
.nav{ display:flex; align-items:center; gap:1.2rem; padding:.85rem 0 .95rem; position:relative }
.nav::before{ content:""; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; background:var(--cream); z-index:-1 }
.brand{ display:flex; flex-direction:column; line-height:.86; margin-right:auto }
.brand__old{ font-family:var(--serif); font-weight:700; font-size:clamp(2rem, 1.5rem + 1.7vw, 2.9rem); color:var(--blue-deep); letter-spacing:.01em }
.brand__sub{ font-family:var(--sign); text-transform:uppercase; letter-spacing:.26em; font-size:.72rem; font-weight:500; color:var(--blue); margin-top:.32em; padding-left:.12em }
.brand--foot .brand__old{ color:var(--cream) }
.brand--foot .brand__sub{ color:var(--blue-lt) }

.nav__links{ display:flex; gap:1.5rem; align-items:center }
.nav__links a{ font-family:var(--sign); text-transform:uppercase; letter-spacing:.1em; font-size:.8rem; font-weight:500; color:var(--ink); padding:.3rem 0; position:relative }
.nav__links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--blue); transition:right .28s var(--ease) }
.nav__links a:hover::after{ right:0 }
.nav__links a[aria-current="page"]{ color:var(--blue) }
.nav__links a[aria-current="page"]::after{ right:0 }
.nav__cta{ white-space:nowrap }

.nav__toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:6px }
.nav__toggle span{ width:26px; height:2px; background:var(--blue-deep); transition:.3s var(--ease) }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* the scalloped awning valance — navy + cream stripes, star on each navy scallop */
.awning{
  --r-sc:15px; --sp:30px; --top:24px; height:40px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.14)),
    repeating-linear-gradient(90deg, var(--navy) 0 30px, var(--blue) 30px 60px);
  border-top:3px solid var(--brass); position:relative; z-index:1;
  /* pull the next section up behind the scallop notches so they reveal its color */
  margin-bottom:-16px;
  -webkit-mask:
    linear-gradient(#000,#000) top/100% var(--top) no-repeat,
    radial-gradient(circle var(--r-sc) at var(--r-sc) var(--top), #000 98%, transparent 100%) top left/var(--sp) 100% repeat-x;
          mask:
    linear-gradient(#000,#000) top/100% var(--top) no-repeat,
    radial-gradient(circle var(--r-sc) at var(--r-sc) var(--top), #000 98%, transparent 100%) top left/var(--sp) 100% repeat-x;
}
.awning__stars{
  position:absolute; inset:0 0 auto 0; height:var(--top,24px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='24'%3E%3Cpath d='M15 6 l1.6 4.9 5.1 0 -4.1 3 1.6 4.9 -4.2-3 -4.2 3 1.6-4.9 -4.1-3 5.1 0 z' fill='%23ffffff' opacity='.95'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:left 0 top 5px; background-size:60px 24px;
  animation:twinkle 4s ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{ opacity:1 } 50%{ opacity:.72 } }

/* reusable awning edge */
.awning-edge{ height:22px; background:var(--blue); position:relative; z-index:1 }
.awning-edge--top{
  -webkit-mask:radial-gradient(circle 15px at 15px 0, transparent 14px, #000 15px) top left/30px 100% repeat-x;
          mask:radial-gradient(circle 15px at 15px 0, transparent 14px, #000 15px) top left/30px 100% repeat-x;
}
.awning-edge--foot{ background:var(--navy-deep) }

/* mobile nav */
.mobilenav{ display:none; flex-direction:column; background:var(--blue-deep); padding:1rem 1.2rem 1.6rem }
.mobilenav.open{ display:flex }
.mobilenav a{ font-family:var(--sign); text-transform:uppercase; letter-spacing:.12em; font-size:.95rem; color:var(--cream); padding:.85rem 0; border-bottom:1px solid var(--line-bl) }
.mobilenav a:last-child{ border-bottom:0 }
.mobilenav__tel{ color:var(--blue-lt)!important }

/* ---- homepage photo banner (logo + nav overlaid on a giant photo) ---- */
.masthead--banner{ position:relative; z-index:5 }
.banner{ position:relative; overflow:hidden; height:clamp(360px, 46vw, 580px); background:var(--navy) }
.banner__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42% }
.banner__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(13,26,46,.78) 0%, rgba(13,26,46,.30) 30%, rgba(13,26,46,.12) 58%, rgba(13,26,46,.62) 100%) }
.banner__bar{ position:relative; z-index:2; display:flex; align-items:flex-start; gap:1.2rem; padding:1.5rem 0 }
.banner .brand{ line-height:.86 }
.banner .brand__old{ color:#fff; font-size:clamp(3.2rem, 2rem + 6vw, 6.4rem); text-shadow:0 3px 16px rgba(0,0,0,.42) }
.banner .brand__sub{ color:var(--brass-br); font-size:clamp(.78rem, .55rem + .7vw, 1.15rem); letter-spacing:.34em; margin-top:.5em; text-shadow:0 2px 10px rgba(0,0,0,.45) }
.banner .nav__links--onphoto,.banner .nav__cta{ margin-top:.6rem }
.nav__links--onphoto a{ color:var(--cream); text-shadow:0 1px 8px rgba(0,0,0,.4) }
.nav__links--onphoto a::after{ background:#fff }
.nav__toggle--light span{ background:#fff }
.banner__loc{ position:absolute; z-index:2; left:0; right:0; bottom:18px; text-align:center;
  font-family:var(--sign); text-transform:uppercase; letter-spacing:.26em; font-size:.72rem; color:var(--cream);
  text-shadow:0 2px 10px rgba(0,0,0,.5) }

/* ------------------------------------------------------------------ *
 * 6. PIPED PANEL (white welt on blue)
 * ------------------------------------------------------------------ */
.piped{ position:relative; background:var(--blue-deep); padding:12px; border-radius:4px;
  box-shadow:0 30px 60px -30px rgba(21,42,73,.6) }
.piped img{ border-radius:2px; width:100%; object-fit:cover }
.piped::after{ content:""; position:absolute; inset:6px; border:1.5px solid var(--pipe); border-radius:2px; pointer-events:none }
.piped--cream{ background:var(--cream); box-shadow:0 24px 50px -30px rgba(21,42,73,.4), 0 0 0 1px var(--line) }
.piped--cream::after{ border-color:rgba(22,39,61,.32) }

/* ------------------------------------------------------------------ *
 * 7. HERO
 * ------------------------------------------------------------------ */
.hero{ position:relative; padding:clamp(3.5rem, 2.5rem + 4vw, 6rem) 0 clamp(3rem, 2rem + 3vw, 4.5rem);
  background:radial-gradient(120% 95% at 82% -5%, #f6fafd 0%, var(--sky) 52%, var(--sky-2) 100%); overflow:hidden }
.hero__grain{ position:absolute; inset:0; pointer-events:none; opacity:.4; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E") }
.hero__grid{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:var(--gap); align-items:center }
.hero__title{ font-family:var(--serif); font-size:var(--step-5); font-weight:600; letter-spacing:-.01em; color:var(--blue-deep); margin:.1em 0 .5rem }
.hero__title em{ font-style:italic; color:var(--agate) }
.hero__lede{ font-size:var(--step-1); color:var(--ink-soft); max-width:42ch; margin-bottom:1.8rem }
.hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center }
.hero__proof{ margin-top:1.7rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  font-family:var(--body); font-size:.9rem; color:var(--ink-soft) }
.hero__proof em{ font-family:var(--serif); font-style:italic; color:var(--ink); font-size:1.02rem }
.hero__figure{ position:relative; margin:0; max-width:440px; margin-inline:auto }
.hero__figure .piped{ animation:floaty 8s var(--ease) infinite }
.hero__figure .piped img{ aspect-ratio:4/5 }
.hero__tag{ position:absolute; left:-14px; bottom:26px; transform:rotate(-90deg); transform-origin:left bottom;
  font-family:var(--sign); text-transform:uppercase; letter-spacing:.28em; font-size:.62rem; color:var(--blue) }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }

/* ------------------------------------------------------------------ *
 * 8. MARQUEE TICKER
 * ------------------------------------------------------------------ */
.ticker{ background:var(--blue); color:var(--cream); overflow:hidden; border-block:2px solid var(--blue-deep);
  padding:.7rem 0 }
.ticker__track{ display:inline-flex; align-items:center; gap:1.4rem; white-space:nowrap; width:max-content;
  animation:scroll-x 40s linear infinite; font-family:var(--sign); text-transform:uppercase; letter-spacing:.16em; font-size:.86rem }
.ticker__track span{ opacity:.95 }
.ticker__track i{ color:var(--blue-lt); font-style:normal }
.ticker:hover .ticker__track{ animation-play-state:paused }
@keyframes scroll-x{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ------------------------------------------------------------------ *
 * 9. INTRO
 * ------------------------------------------------------------------ */
.intro{ padding:var(--bay) 0; background:var(--cream) }
.intro__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem, 1rem + 4vw, 4.5rem); align-items:center }
.intro__copy{ max-width:58ch }
.intro__lead{ font-family:var(--serif); font-size:var(--step-3); font-weight:500; color:var(--ink); margin:.4rem 0 1.4rem; line-height:1.12 }
.intro__lead em{ font-style:italic; color:var(--blue) }
.intro__body{ font-size:var(--step-1); color:var(--ink-soft) }
.intro__fig{ margin:0 }
.intro__fig .piped img{ aspect-ratio:4/5; object-position:center 28% }
.intro__cap{ margin-top:.9rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; color:var(--ink-soft); text-align:center }

/* ------------------------------------------------------------------ *
 * 10. FINDS MOSAIC
 * ------------------------------------------------------------------ */
.finds{ padding:0 0 var(--bay); background:var(--cream) }
.mosaic{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:14px }
.tile{ position:relative; overflow:hidden; border-radius:4px; display:flex; align-items:flex-end; padding:1rem;
  isolation:isolate; box-shadow:0 0 0 1px var(--line); transition:transform .35s var(--ease), box-shadow .35s var(--ease) }
.tile--tall{ grid-row:span 2 }
.tile--wide{ grid-column:span 2 }
.tile:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -20px rgba(21,42,73,.5), 0 0 0 1px var(--line-2) }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s var(--ease) }
.tile:hover img{ transform:scale(1.05) }
.tile--photo::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(21,42,73,0) 30%, rgba(15,32,56,.8) 100%) }
.tile--photo .tile__label{ color:var(--cream) }
.tile--photo::after{ content:""; position:absolute; inset:7px; border:1.5px solid rgba(255,255,255,0); border-radius:2px; transition:border-color .35s var(--ease); pointer-events:none }
.tile--photo:hover::after{ border-color:var(--pipe) }
.tile--blue{ background:linear-gradient(160deg,var(--blue),var(--blue-deep)); flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:.15rem }
.tile--blue::after{ content:""; position:absolute; inset:7px; border:1.5px solid var(--line-bl); border-radius:2px; pointer-events:none; transition:border-color .35s var(--ease) }
.tile--blue:hover::after{ border-color:var(--pipe) }
.tile--star::before{ content:""; position:absolute; top:14px; right:14px; width:18px; height:18px; background:var(--brass-br);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%) }
.tile__label{ font-family:var(--sign); text-transform:uppercase; letter-spacing:.08em; font-weight:600; font-size:.95rem; line-height:1.1; color:var(--cream); position:relative }
.tile__hint{ font-family:var(--serif); font-style:italic; font-size:.92rem; color:rgba(244,238,223,.72) }
.tile__count{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; color:var(--blue-lt); text-transform:uppercase }
.finds__foot{ margin-top:1.6rem; font-family:var(--serif); font-style:italic; font-size:var(--step-1); color:var(--ink-soft) }
.finds__foot a{ color:var(--blue); border-bottom:2px solid var(--blue) }

/* ------------------------------------------------------------------ *
 * 11. GOOD TO KNOW
 * ------------------------------------------------------------------ */
.know{ padding:var(--bay) 0; background:var(--sky) }
.know__grid{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.know__card{ background:var(--cream); border:1px solid var(--line); border-radius:6px; padding:1.6rem 1.4rem;
  box-shadow:0 12px 26px -22px rgba(21,42,73,.5); transition:transform .3s var(--ease), box-shadow .3s var(--ease) }
.know__card:hover{ transform:translateY(-4px); box-shadow:0 20px 34px -22px rgba(21,42,73,.55) }
.know__ic{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:var(--sky-2); color:var(--blue-deep); margin-bottom:1rem }
.know__ic svg{ width:24px; height:24px; stroke-linecap:round; stroke-linejoin:round }
.know__card h3{ font-family:var(--serif); font-size:1.35rem; font-weight:600; color:var(--ink); margin-bottom:.4rem }
.know__card p{ font-size:.94rem; color:var(--ink-soft) }

/* ------------------------------------------------------------------ *
 * 12. REVIEWS
 * ------------------------------------------------------------------ */
.reviews{ padding:var(--bay) 0; background:linear-gradient(160deg,var(--blue) 0%, var(--blue-deep) 100%); color:var(--cream) }
.reviews__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.review{ background:rgba(255,255,255,.06); border:1px solid var(--line-bl); border-radius:6px; padding:1.7rem 1.6rem; margin:0;
  backdrop-filter:blur(2px) }
.review .stars{ margin-bottom:1rem }
.review blockquote{ font-family:var(--serif); font-style:italic; font-size:1.28rem; line-height:1.4; color:var(--cream); margin:0 0 1rem }
.review figcaption{ font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-lt) }

/* ------------------------------------------------------------------ *
 * 13. STORY
 * ------------------------------------------------------------------ */
.story{ padding:var(--bay) 0; background:var(--cream-2) }
.story__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--gap); align-items:center }
.story__fig{ margin:0 }
.story__fig .piped img{ aspect-ratio:4/5; object-position:center 20% }
.story__copy p{ color:var(--ink-soft); margin-bottom:1rem; max-width:52ch }
.story__copy .link-arrow{ margin-top:.4rem; display:inline-block }

/* ------------------------------------------------------------------ *
 * 14. VISIT & DIRECTIONS
 * ------------------------------------------------------------------ */
.visit{ padding:0; background:linear-gradient(160deg,var(--blue-deep),var(--navy)) }
.visit__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:stretch; padding:var(--bay) 0 }
.visit__info{ color:var(--cream); align-self:center }
.visit__intro{ color:rgba(244,238,223,.82); max-width:44ch; margin:.4rem 0 1.6rem }
.visit__facts{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem 1.5rem; margin:0 0 2rem }
.visit__facts dt{ font-family:var(--sign); text-transform:uppercase; letter-spacing:.16em; font-size:.66rem; color:var(--blue-lt); margin-bottom:.35rem }
.visit__facts dd{ font-size:var(--step-0); color:var(--cream); line-height:1.4 }
.visit__facts a:hover{ color:var(--blue-lt) }
.visit__cta{ display:flex; gap:1rem; flex-wrap:wrap }
.visit__map{ position:relative; min-height:340px; border-radius:6px; overflow:hidden;
  background:radial-gradient(120% 120% at 60% 40%, #24406a, #16273f); box-shadow:inset 0 0 0 1.5px var(--line-bl); display:block }
.visit__map-grid{ position:absolute; inset:0; opacity:.4;
  background-image:linear-gradient(var(--line-bl) 1px,transparent 1px),linear-gradient(90deg,var(--line-bl) 1px,transparent 1px); background-size:44px 44px }
.visit__road{ position:absolute; background:rgba(107,167,221,.42) }
.visit__road--h{ left:0; right:0; top:38%; height:11px }   /* E 4th St */
.visit__road--v{ top:0; bottom:0; left:62%; width:11px }    /* 10th Ave E */
.visit__roadlabel{ position:absolute; font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue-lt); background:rgba(15,32,56,.55); padding:.18em .45em; border-radius:2px; z-index:3; white-space:nowrap }
.visit__roadlabel--v{ top:16px; left:62%; transform:translateX(6px) }
.visit__roadlabel--h{ top:38%; right:16px; transform:translateY(-150%) }
.visit__pin{ position:absolute; top:56%; left:38%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%;
  background:var(--cream); display:grid; place-items:center; box-shadow:0 10px 24px -8px rgba(0,0,0,.6); z-index:2 }
.visit__pinlabel{ position:absolute; top:56%; left:38%; transform:translate(-50%, 30px); z-index:3;
  font-family:var(--sign); text-transform:uppercase; letter-spacing:.1em; font-size:.64rem; font-weight:600; color:var(--cream);
  background:var(--agate); padding:.24em .6em; border-radius:2px; white-space:nowrap }
.visit__pin .star{ background:var(--agate); width:22px; height:22px }
.visit__pin::after{ content:""; position:absolute; inset:-9px; border-radius:50%; border:1.5px solid var(--blue-lt); animation:ping 3s var(--ease) infinite }
@keyframes ping{ 0%{ transform:scale(.8); opacity:.9 } 100%{ transform:scale(1.9); opacity:0 } }
.visit__maptag{ position:absolute; left:16px; bottom:16px; font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--cream); background:rgba(15,32,56,.6); padding:.4em .7em; border-radius:2px; border:1px solid var(--line-bl); z-index:2 }

/* ------------------------------------------------------------------ *
 * 15. POSTCARD (small feature strip)
 * ------------------------------------------------------------------ */
.pcstrip{ padding:var(--bay) 0; background:var(--cream) }
.pcstrip__row{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items:center }
.pcstrip__art{ perspective:800px }
.pc--mini{ position:relative; width:260px; aspect-ratio:3/2; background:linear-gradient(135deg,#f6efe0,#efe4cd);
  border:6px solid #fff; border-radius:4px; box-shadow:0 26px 44px -24px rgba(21,42,73,.6); padding:1rem 1.1rem;
  transform:rotate(-4deg); animation:pctilt 7s var(--ease) infinite }
.pc--mini .pc__big{ font-family:var(--serif); font-weight:600; font-size:1.4rem; line-height:1; color:var(--agate); display:block }
.pc--mini .pc__big strong{ font-family:var(--sign); font-weight:700; letter-spacing:.05em; color:var(--blue-deep); font-size:2.3rem; display:block }
.pc--photo{ padding:0; overflow:hidden }
.pc--photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.pc__stamp{ position:absolute; top:12px; right:12px; width:38px; height:46px; background:var(--blue); display:grid; place-items:center; border:2px solid #fff; box-shadow:0 0 0 2px var(--blue) }
.pc__stamp .star{ background:var(--brass-br); width:18px; height:18px }
@keyframes pctilt{ 0%,100%{ transform:rotate(-4deg) translateY(0) } 50%{ transform:rotate(-1.5deg) translateY(-8px) } }
.pcstrip__title{ font-family:var(--serif); font-size:var(--step-2); font-weight:600; color:var(--ink); margin:.2rem 0 .6rem }
.pcstrip__copy p{ color:var(--ink-soft); max-width:46ch; margin-bottom:1rem }

/* ------------------------------------------------------------------ *
 * 16. FOOTER
 * ------------------------------------------------------------------ */
.foot{ background:var(--navy-deep); color:var(--cream); position:relative }
.foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--gap); padding:clamp(2.6rem, 2rem + 2vw, 4rem) 0 2rem }
.foot__blurb{ color:rgba(244,238,223,.62); margin:1rem 0 1.2rem; max-width:32ch; font-family:var(--serif); font-style:italic; font-size:var(--step-1) }
.foot__social{ display:flex; gap:1.2rem }
.foot__social a{ font-family:var(--sign); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color:var(--blue-lt) }
.foot__social a:hover{ color:var(--cream) }
.foot__col h3{ font-family:var(--sign); text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; color:var(--blue-lt); margin-bottom:1rem; font-weight:600 }
.foot__col a,.foot__col p{ display:block; color:rgba(244,238,223,.78); font-size:.92rem; padding:.2rem 0; margin:0 }
.foot__col a:hover{ color:var(--cream) }
.foot__base{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-top:1px solid var(--line-bl); padding:1.2rem 0 2rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.03em; color:rgba(244,238,223,.55) }

/* ==================================================================== *
 *  PAGE COMPONENTS  (Our Story · What We Carry · Visit · Contact · Postcard)
 * ==================================================================== */

/* ---- subhero (interior page header) ---- */
.subhero{ position:relative; overflow:hidden; padding:clamp(2.4rem, 2rem + 3vw, 4.2rem) 0 clamp(2.4rem, 2rem + 3vw, 3.8rem);
  background:radial-gradient(120% 100% at 80% -10%, #f8fbfe, var(--sky) 58%, var(--sky-2)) }
.subhero--blue{ background:linear-gradient(160deg,var(--blue),var(--blue-deep)); color:var(--cream) }
.subhero__in{ max-width:62ch; position:relative }
.crumb{ font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:1rem }
.crumb a{ border-bottom:1px solid transparent }
.crumb a:hover{ color:var(--blue); border-color:var(--blue) }
.subhero--blue .crumb{ color:var(--blue-lt) }
.subhero--blue .crumb a:hover{ color:var(--cream); border-color:var(--cream) }
.subhero__title{ font-family:var(--serif); font-size:var(--step-4); color:var(--blue-deep); font-weight:600; letter-spacing:-.005em }
.subhero__title em{ font-style:italic; color:var(--agate) }
.subhero--blue .subhero__title{ color:var(--cream) }
.subhero--blue .subhero__title em{ color:var(--brass-br) }
.subhero__lede{ font-size:var(--step-1); color:var(--ink-soft); margin-top:1rem; max-width:54ch }
.subhero--blue .subhero__lede{ color:rgba(244,238,223,.85) }

/* ---- generic content wrap + prose ---- */
.page{ padding:var(--bay) 0 }
.page--cream{ background:var(--cream) }
.page--sky{ background:var(--sky) }
.page--cream2{ background:var(--cream-2) }
.prose{ max-width:64ch }
.prose p{ margin-bottom:1.1rem; color:var(--ink-soft); font-size:var(--step-0) }
.prose p.lead{ font-family:var(--serif); font-size:var(--step-2); color:var(--ink); line-height:1.22; font-style:italic }
.prose h2{ font-family:var(--serif); font-size:var(--step-2); color:var(--ink); margin:2rem 0 .8rem }

/* ---- alternating photo/text rows ---- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:center;
  padding:clamp(1.8rem, 1.2rem + 2vw, 3rem) 0 }
.split--rev .split__fig{ order:2 }
.split__fig{ margin:0 }
.split__fig .piped img{ aspect-ratio:5/4 }
.split__body h2{ font-family:var(--serif); font-size:var(--step-2); color:var(--ink); margin-bottom:.6rem }
.split__body p{ color:var(--ink-soft); margin-bottom:.9rem; max-width:48ch }

/* ---- chips ---- */
.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem }
.chips li{ font-family:var(--sign); text-transform:uppercase; letter-spacing:.07em; font-size:.76rem; font-weight:500;
  color:var(--blue-deep); background:var(--cream); border:1px solid var(--line-2); border-radius:40px; padding:.5em 1.05em }
.page--sky .chips li{ background:#fff }

/* ---- photo gallery ---- */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.gallery figure{ margin:0; position:relative; overflow:hidden; border-radius:4px; box-shadow:0 0 0 1px var(--line) }
.gallery img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; transition:transform .5s var(--ease) }
.gallery figure:hover img{ transform:scale(1.05) }
.gallery figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1.4rem .8rem .6rem; color:#fff;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.05em;
  background:linear-gradient(180deg,transparent, rgba(15,32,56,.72)) }

/* ---- hours card + directions ---- */
.info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:start }
.card{ background:var(--cream); border:1px solid var(--line); border-radius:8px; padding:1.6rem 1.7rem;
  box-shadow:0 14px 30px -24px rgba(21,42,73,.5) }
.card h3{ font-family:var(--sign); text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; color:var(--blue); margin-bottom:1rem }
.hours-list{ list-style:none; display:grid; gap:.5rem }
.hours-list li{ display:flex; justify-content:space-between; gap:1rem; padding-bottom:.5rem; border-bottom:1px solid var(--line);
  font-size:.98rem }
.hours-list li:last-child{ border-bottom:0 }
.hours-list .day{ font-weight:500; color:var(--ink) }
.hours-list .hrs{ color:var(--ink-soft); font-family:var(--mono); font-size:.82rem }
.hours-list li.closed .hrs{ color:var(--agate) }
.dir-list{ list-style:none; display:grid; gap:1rem; counter-reset:d }
.dir-list li{ position:relative; padding-left:2.4rem; color:var(--ink-soft) }
.dir-list li::before{ counter-increment:d; content:counter(d); position:absolute; left:0; top:-2px; width:1.7rem; height:1.7rem;
  display:grid; place-items:center; border-radius:50%; background:var(--blue); color:#fff; font-family:var(--sign); font-size:.8rem; font-weight:600 }

/* ---- forms ---- */
.form{ display:grid; gap:1.1rem; max-width:560px }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem }
.field{ display:grid; gap:.4rem }
.field label{ font-family:var(--sign); text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; color:var(--ink-soft) }
.field input,.field textarea,.field select{ font-family:var(--body); font-size:1rem; padding:.8em .9em;
  border:1px solid var(--line-2); border-radius:4px; background:#fff; color:var(--ink); width:100% }
.field textarea{ min-height:130px; resize:vertical }
.field input:focus,.field textarea:focus,.field select:focus{ outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue) }
.form__note{ font-family:var(--mono); font-size:.7rem; color:var(--ink-soft); line-height:1.5 }

/* ---- mock / scope notice ---- */
.notice{ background:rgba(44,108,176,.08); border:1px dashed var(--blue); border-radius:6px; padding:.9rem 1.1rem;
  font-family:var(--mono); font-size:.72rem; color:var(--blue-deep); line-height:1.6 }
.notice strong{ color:var(--agate) }

/* ---- postcard picker ---- */
.steps{ display:flex; flex-wrap:wrap; gap:1.4rem; margin-bottom:2.5rem; counter-reset:s }
.steps li{ list-style:none; display:flex; align-items:center; gap:.7rem; font-family:var(--sign); text-transform:uppercase;
  letter-spacing:.08em; font-size:.82rem; color:var(--ink-soft) }
.steps li::before{ counter-increment:s; content:counter(s); width:1.9rem; height:1.9rem; display:grid; place-items:center;
  border-radius:50%; background:var(--blue); color:#fff; font-weight:600 }
.pcpick{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
.pccard{ position:relative; aspect-ratio:3/2; border:7px solid #fff; border-radius:6px; overflow:hidden; cursor:pointer;
  box-shadow:0 22px 40px -26px rgba(21,42,73,.6); display:grid; place-items:center; text-align:center;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease) }
.pccard:hover{ transform:translateY(-8px) rotate(-1.2deg); box-shadow:0 30px 50px -26px rgba(21,42,73,.7) }
.pccard::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); transition:left .6s var(--ease) }
.pccard:hover::after{ left:120% }
.pccard__era{ position:absolute; left:8px; bottom:8px; font-family:var(--mono); font-size:.58rem; letter-spacing:.08em;
  background:rgba(15,32,56,.7); color:#fff; padding:.2em .5em; border-radius:2px; z-index:3 }
.pccard__ttl{ position:relative; z-index:2 }
/* era skins */
.pccard--linen{ background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.03) 0 1px, transparent 1px 3px),
    linear-gradient(135deg,#e9dcbf,#d8c49a); color:#6a5a34 }
.pccard--linen .pccard__ttl{ font-family:var(--serif); font-style:italic; font-size:1.5rem }
.pccard--greetings{ background:linear-gradient(135deg,#20558f,#153a63); color:#fff }
.pccard--greetings .pccard__ttl{ font-family:var(--sign); font-weight:700; letter-spacing:.03em; line-height:1.02;
  font-size:clamp(1.15rem, .7rem + 2.4vw, 1.65rem); padding:0 .45em; text-wrap:balance;
  -webkit-text-stroke:1.25px rgba(255,255,255,.85); color:transparent }
.pccard--kodachrome{ background:linear-gradient(135deg,#f0a24a,#c94f2c 55%,#7d2f8a); color:#fff }
.pccard--kodachrome .pccard__ttl{ font-family:var(--sign); font-weight:600; letter-spacing:.12em; font-size:1.2rem; text-shadow:0 1px 4px rgba(0,0,0,.3) }
.pccard--continental{ background:linear-gradient(135deg,#2aa39a,#f2c14e); color:#243b2f }
.pccard--continental .pccard__ttl{ font-family:var(--serif); font-weight:700; font-size:1.5rem }
/* real-photo postcard cards */
.pcpick--two{ grid-template-columns:repeat(2,1fr); gap:22px; max-width:900px }
.pcpick--three{ grid-template-columns:repeat(3,1fr); gap:20px; max-width:1000px }
.pccard--photo{ background:#0b1a2e; padding:0 }
.pccard--photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0 }
.pccard.is-selected{ box-shadow:0 0 0 3px var(--blue), 0 22px 40px -26px rgba(21,42,73,.6) }
.pccard.is-selected::before{ content:"✓ Selected"; position:absolute; top:8px; left:8px; z-index:4;
  font-family:var(--sign); text-transform:uppercase; letter-spacing:.08em; font-size:.6rem; font-weight:600;
  background:var(--blue); color:#fff; padding:.24em .55em; border-radius:2px }
.pcpick__more{ margin-top:1.4rem; font-family:var(--serif); font-style:italic; font-size:var(--step-1); color:var(--ink-soft) }

/* compose */
.compose{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:start; margin-top:2.5rem }
.compose__preview{ position:relative; aspect-ratio:3/2; border:8px solid #fff; border-radius:6px; overflow:hidden; margin:0;
  background:#0b1a2e; box-shadow:0 26px 46px -26px rgba(21,42,73,.7); animation:pctilt 8s var(--ease) infinite }
.compose__preview img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.compose__hint{ position:absolute; z-index:2; left:10px; bottom:10px; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.06em; color:#fff; background:rgba(11,26,46,.7); padding:.3em .6em; border-radius:2px }

/* ------------------------------------------------------------------ *
 * 17. REVEAL ON SCROLL (visible by default; armed only under html.js)
 * ------------------------------------------------------------------ */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease) }
.js .reveal.in{ opacity:1; transform:none }

/* ------------------------------------------------------------------ *
 * 18. RESPONSIVE
 * ------------------------------------------------------------------ */
@media (max-width:980px){
  .nav__links,.nav__cta{ display:none }
  .nav__toggle{ display:flex }
  .hero__grid,.story__grid,.visit__grid,.intro__grid{ grid-template-columns:1fr }
  .hero__figure{ order:-1; max-width:440px }
  .story__fig,.intro__fig{ max-width:420px }
  .know__grid{ grid-template-columns:repeat(2,1fr) }
  .reviews__grid{ grid-template-columns:1fr }
  .mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px }
  .foot__grid{ grid-template-columns:1fr 1fr }
  .hero__tag{ display:none }
  .split,.info-grid,.compose{ grid-template-columns:1fr }
  .split--rev .split__fig{ order:0 }
  .split__fig{ max-width:460px }
  .pcpick{ grid-template-columns:repeat(2,1fr) }
  .gallery{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:560px){
  .plaque__row{ font-size:.64rem; gap:.5rem 1rem }
  .plaque__addr{ display:none }
  .mosaic{ grid-template-columns:1fr 1fr; grid-auto-rows:150px }
  .tile--tall{ grid-row:span 1 }
  .know__grid{ grid-template-columns:1fr }
  .pcstrip__row{ grid-template-columns:1fr; justify-items:start }
  .foot__grid{ grid-template-columns:1fr }
}

/* ------------------------------------------------------------------ *
 * 19. REDUCED MOTION
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto }
  .js .reveal{ opacity:1; transform:none }
}

/* ==================================================================
   FORM STATES (added when wiring contact + postcard handlers)
   ================================================================== */
/* the [hidden] attr must beat component display rules (e.g. .pccard{display:grid}) */
[hidden]{ display:none !important }
/* live Google Maps embed replaces the stylized placeholder on Visit */
.visit__map--live{ background:var(--sky-2); min-height:380px }
.visit__map--live iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.field__error{ font-family:var(--body); font-size:.82rem; color:var(--agate); margin-top:.35rem }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"]{ border-color:var(--agate); outline-color:var(--agate) }
.form__success{ display:flex; gap:.75rem; align-items:flex-start; padding:1rem 1.15rem; margin-bottom:1.4rem;
  background:var(--sky); border:1px solid var(--blue-lt); border-radius:6px; color:var(--ink); font-size:.95rem; line-height:1.5 }
.form__success strong{ font-family:var(--sign); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:var(--blue-deep); display:block; margin-bottom:.15rem }
.form__error-summary{ padding:1rem 1.15rem; margin-bottom:1.4rem; background:#fbeee9; border:1px solid var(--agate); border-radius:6px; color:var(--agate); font-size:.9rem }

/* cookie notice bar */
.cookie-notice{ position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:60; max-width:640px; margin-inline:auto;
  display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:var(--cream); color:var(--ink); border:1px solid var(--brass); border-radius:8px;
  padding:.9rem 1.1rem; box-shadow:0 18px 40px -20px rgba(15,32,56,.55) }
.cookie-notice__text{ font-size:.9rem; line-height:1.5; margin:0; flex:1 1 260px }
.cookie-notice__text a{ color:var(--blue); border-bottom:1px solid var(--blue) }

/* privacy / legal prose */
.legal h2{ font-family:var(--serif); font-size:var(--step-2); margin:2.2rem 0 .6rem; color:var(--ink) }
.legal p{ margin:0 0 1rem; color:var(--ink) }
.legal ul{ margin:0 0 1.2rem 1.2rem; display:grid; gap:.45rem }
.legal li{ line-height:1.55 }
.legal a{ color:var(--blue); border-bottom:1px solid var(--blue) }

/* ===== accessibility: skip link + keyboard focus ring ===== */
.skip-link{ position:absolute; left:8px; top:-52px; z-index:100; background:var(--blue); color:#fff;
  font-family:var(--sign); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem;
  padding:.7em 1.1em; border-radius:0 0 4px 4px; transition:top .18s var(--ease) }
.skip-link:focus{ top:0 }
main:focus{ outline:none }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:2px }
/* brighter ring on dark / photo / blue surfaces where blue wouldn't read */
.plaque :focus-visible,
.masthead--banner :focus-visible,
.reviews :focus-visible,
.visit :focus-visible,
.subhero--blue :focus-visible,
.foot :focus-visible,
.mobilenav :focus-visible{ outline-color:var(--brass-br) }

/* button press feedback */
.btn:active{ transform:translateY(0); box-shadow:0 1px 0 rgba(0,0,0,.14) }

/* required-field marker + legend */
.req{ color:var(--agate); font-weight:400 }
.form__req-note{ font-family:var(--mono); font-size:.7rem; letter-spacing:.02em; color:var(--ink-soft); margin:0 }

/* "Good to know" list — matches the numbered .dir-list weight, checkmark marker */
.know-list{ list-style:none; display:grid; gap:1rem; margin-top:1.1rem }
.know-list li{ position:relative; padding-left:2.4rem; color:var(--ink-soft) }
.know-list li::before{ content:"✓"; position:absolute; left:0; top:-2px; width:1.7rem; height:1.7rem;
  display:grid; place-items:center; border-radius:50%; background:var(--blue); color:#fff;
  font-family:var(--sign); font-size:.9rem; font-weight:600 }