/* ==========================================================================
   Woods' Heritage Museum, Rupanyup
   Shared stylesheet for every page.

   Structured in blocks so the WordPress conversion can lift them
   component by component. Order: tokens, base, utilities, header,
   heroes, page sections, forms, footer, motion, responsive.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  --paper:#ece2cf;
  --paper-2:#e3d6bd;
  --card:#f6efe1;
  --ink:#211d1a;
  --ink-2:#2c2622;
  --cream:#f6efe1;
  --red:#c8392c;
  --red-deep:#a02416;
  --coral:#f0846a;       /* red, lifted for use on dark grounds */
  --coral-soft:#f4a48f;
  --coral-pale:#e7a892;
  --muted:#6a5d4d;
  --body-on-paper:#43382c;
  --body-on-ink:#d9ccb8;
  --rule:rgba(33,29,26,.16);
  --rule-light:rgba(246,239,225,.2);
  --tape:rgba(180,150,96,.55);
  --shadow:rgba(33,29,26,.26);

  --font-display:"Figtree",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --font-hand:"Kalam",cursive;

  --maxw:1200px;
  --gutter:32px;
  --section-y:84px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Paper grain. Fixed so it reads as the sheet the site is printed on
   rather than a texture that scrolls with the content. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>");
}

h1,h2,h3{
  font-family:var(--font-display);
  margin:0;line-height:1.0;letter-spacing:-.025em;font-weight:800;
}
h4{font-family:var(--font-display);margin:0;font-weight:800;letter-spacing:-.015em}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%;display:block}
::selection{background:var(--red);color:#fff}

:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}
.visit :focus-visible,.intro :focus-visible,footer :focus-visible{outline-color:var(--coral)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--red);color:#fff;padding:12px 20px;font-weight:700;text-decoration:none;
}
.skip:focus{left:12px;top:12px}

/* --------------------------------------------------------------------------
   3. Utilities
   -------------------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2}

section{padding:var(--section-y) 0}
.section-tight{padding:56px 0}

.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--red);
}
.eyebrow-block{display:block;margin-bottom:16px}
.red{color:var(--red)}
.on-dark .eyebrow,.eyebrow-light{color:var(--coral)}

.lede{max-width:1200px}
.lede h2{font-size:clamp(2.2rem,5.5vw,4rem)}
.lede p{font-size:1.22rem;margin-top:22px;color:var(--body-on-paper);max-width:70ch}

.head2{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.head2 h2{font-size:clamp(2rem,5vw,3.4rem);margin-top:12px}
.head2 p{color:var(--muted);max-width:52ch;margin-top:12px}

/* Running text fills the full grid column. No narrower measure: body copy is
   meant to occupy the same width as everything else on the page. */
.prose p{color:var(--body-on-paper);font-size:1.06rem}
.prose p + p{margin-top:18px}
.prose h2{font-size:clamp(2rem,4.6vw,3.2rem)}
.prose .lead{font-size:1.22rem;color:var(--body-on-paper)}

/* Buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--font-body);font-weight:700;font-size:.95rem;
  padding:15px 26px;border-radius:4px;border:2px solid var(--ink);
  background:transparent;color:var(--ink);cursor:pointer;
  transition:background .22s,color .22s,border-color .22s;
}
.btn.solid{background:var(--red);border-color:var(--red);color:#fff}
.btn.solid:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn.ghost:hover{background:var(--ink);color:var(--cream)}
.btn.ondark{border-color:var(--cream);color:var(--cream)}
.btn.ondark:hover{background:var(--cream);color:var(--ink)}
.btn svg{width:18px;height:18px;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn-row.mt{margin-top:28px}

/* --------------------------------------------------------------------------
   4. Header and primary navigation
   -------------------------------------------------------------------------- */
header.site{
  position:sticky;top:0;z-index:40;
  background:rgba(236,226,207,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
  transition:background .25s ease,box-shadow .25s ease;
}
header.site.shrink{background:rgba(236,226,207,.97);box-shadow:0 8px 22px -16px var(--shadow)}

/* The header runs the full width of the window rather than sitting on the
   1200px content grid. It buys the seven nav items a lot more room, which is
   what lets the desktop nav survive down to much narrower screens. The logo
   and the buttons sit against the gutter, not the grid: that is deliberate. */
.head{
  width:100%;margin:0 auto;padding:13px var(--gutter);
  display:flex;align-items:center;gap:15px;transition:padding .25s ease;
}
header.site.shrink .head{padding:7px var(--gutter)}

.brand{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.brand picture{display:block}
.brand img{height:60px;width:auto;transition:height .25s ease}
header.site.shrink .brand img{height:44px}

/* Logo left, nav in the middle, phone and button right. The nav takes all the
   space between the two fixed ends and centres itself in it. */
.nav{flex:1;display:flex;justify-content:center;min-width:0}
.nav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav a{
  display:block;text-decoration:none;font-family:var(--font-body);
  font-weight:600;font-size:.95rem;padding:9px 9px;border-radius:3px;
  color:var(--ink);position:relative;transition:color .2s;
}
/* The active page is marked with a red rule under the label, echoing the
   mono eyebrow rules used through the rest of the site. */
.nav a::after{
  content:"";position:absolute;left:9px;right:9px;bottom:3px;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.nav a:hover{color:var(--red)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--red)}

.head-actions{display:flex;align-items:center;gap:16px;flex:none}
.phone{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);
  font-weight:700;font-size:.98rem;letter-spacing:-.01em;text-decoration:none;
  color:var(--ink);white-space:nowrap;transition:color .2s;
}
.phone:hover{color:var(--red)}
.phone svg{width:16px;height:16px;opacity:.75}
.cta-sm{
  display:inline-flex;align-items:center;background:var(--red);color:#fff;
  font-weight:700;font-size:.84rem;padding:11px 18px;border-radius:4px;
  text-decoration:none;white-space:nowrap;transition:background .2s;
}
.cta-sm:hover{background:var(--red-deep)}
header.site.shrink .cta-sm{padding:9px 16px}
/* Short label swaps in on very narrow screens, see the 420px block below. */
.cta-short{display:none}

/* Mobile menu button */
.nav-toggle{
  display:none;margin-left:auto;width:46px;height:40px;padding:0;
  border:2px solid var(--ink);border-radius:4px;background:transparent;
  cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .25s,opacity .2s}
.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)}

/* --------------------------------------------------------------------------
   5. Home hero, full-bleed photographic banner
   -------------------------------------------------------------------------- */
.hero{position:relative;min-height:min(84svh,740px);display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
/* Each slide is a <picture> (or a .slide-video) so the browser can take the
   WebP. The fade lives on the slide; the media just fills it. */
.hero-bg picture,.hero-bg .slide-video{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.hero-bg picture.active,.hero-bg .slide-video.active{opacity:1}
.hero-bg img,.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%}
/* The video slide carries a real poster <img> underneath, so if the clip is
   never loaded (phone, slow link, data saver, reduced motion) the slide still
   reads as a proper photograph rather than a black box. The clip, when it does
   mount, simply paints on top. */
.hero-bg .slide-video video{z-index:1}
/* The scrim has to hold up over the brightest slide, not the darkest. The
   shops clip and the sunlit frontage are both far lighter than the gallery
   interiors this was first tuned against, so it carries more weight on the
   left where the headline sits. */
.hero-bg::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(95deg,rgba(24,20,17,.93) 0%,rgba(24,20,17,.80) 34%,rgba(24,20,17,.46) 62%,rgba(24,20,17,.16) 100%),
    linear-gradient(0deg,rgba(24,20,17,.6),transparent 42%);
}
/* Keep the horizontal gutter from .wrap. Writing "padding: 54px 0 60px" here
   would zero it out and pull the headline 32px left of every other block on
   the page. */
.hero-inner{position:relative;z-index:3;color:var(--cream);padding:54px var(--gutter) 60px;width:100%}
.hero .eyebrow{color:var(--coral-soft)}
.hero h1{color:#fff;font-size:clamp(3rem,8vw,6.4rem);font-weight:900;margin-top:16px}
.hero h1 .red{color:var(--coral-soft)}
.hero .sub{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.4rem,3vw,2.1rem);letter-spacing:-.02em;margin-top:8px;color:#f5dccb;
}
.hero p{font-size:1.16rem;max-width:42ch;margin:22px 0 30px;color:#ece0cf}
.hero .btn.ghost{border-color:var(--cream);color:var(--cream)}
.hero .btn.ghost:hover{background:var(--cream);color:var(--ink)}

/* "As seen on Postcards" stamp. Hidden until the segment airs: add the
   is-live class to reveal it. */
.banner-stamp{
  display:none;position:absolute;top:22px;right:20px;z-index:5;
  background:var(--red);color:#fff;font-family:var(--font-mono);
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 14px;transform:rotate(4deg);box-shadow:0 10px 22px -8px rgba(0,0,0,.55);
}
.banner-stamp.is-live{display:block}

.hero-nav{position:absolute;z-index:6;right:var(--gutter);bottom:22px;display:flex;align-items:center;gap:6px}
/* The bar is 4px tall, but the button around it is finger-sized. Drawing the
   bar as a pseudo-element keeps the look while giving a real tap target. */
.hero-nav button{
  appearance:none;border:0;padding:0;cursor:pointer;background:transparent;
  width:30px;height:38px;display:flex;align-items:center;justify-content:center;
  transition:width .3s;
}
.hero-nav button::after{
  content:"";display:block;width:100%;height:4px;border-radius:2px;
  background:rgba(246,239,225,.45);transition:background .3s;
}
.hero-nav button:hover::after{background:rgba(246,239,225,.75)}
.hero-nav button[aria-current="true"]{width:46px}
.hero-nav button[aria-current="true"]::after{background:var(--red)}

/* --------------------------------------------------------------------------
   6. Inner page hero, a compact band rather than a full banner
   -------------------------------------------------------------------------- */
.page-hero{position:relative;overflow:hidden;background:var(--ink)}
.page-hero picture{position:absolute;inset:0}
.page-hero img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;
}
.page-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(24,20,17,.9) 0%,rgba(24,20,17,.66) 48%,rgba(24,20,17,.3) 100%);
}
/* Same as .hero-inner: keep the gutter so the page title lines up with the
   content below it. */
.page-hero .inner{position:relative;z-index:3;color:var(--cream);padding:72px var(--gutter) 76px}
.page-hero .eyebrow{color:var(--coral-soft);display:block;margin-bottom:14px}
.page-hero h1{color:#fff;font-size:clamp(2.4rem,6vw,4.4rem);font-weight:900;max-width:18ch}
.page-hero h1 .red{color:var(--coral-soft)}
.page-hero .sub{margin-top:20px;font-size:1.14rem;color:#e6d9c6;max-width:52ch}

/* --------------------------------------------------------------------------
   7. Dark intro band
   -------------------------------------------------------------------------- */
.intro{background:var(--ink-2);color:var(--cream)}
/* Same band, but in the deeper ink. Needed wherever a dark section sits
   directly above the footer, which is also --ink-2: without this the two
   run together into one shapeless block. */
.intro.deep{background:var(--ink)}
.intro-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
/* Handwriting is reserved for a quoted voice, and nothing else: a visitor on
   the home page, a visitor on the Museum page, the museum's own words about
   its future on History. If it is not something somebody said, it is not
   set in Kalam. */
.intro h2{
  font-family:var(--font-hand);font-weight:700;letter-spacing:0;line-height:1.28;
  font-size:clamp(2.3rem,5.2vw,3.9rem);max-width:22ch;
}
.intro .lede{max-width:none}
.intro .lede p{color:var(--body-on-ink)}
.intro .red{color:var(--coral)}
.intro .plate{transform:rotate(-2.5deg)}
.intro .plate .ph img{aspect-ratio:3/2;object-fit:cover}

/* --------------------------------------------------------------------------
   8. Taped photo plate, the signature device
   -------------------------------------------------------------------------- */
.plate{
  position:relative;background:var(--card);padding:16px;border-radius:3px;
  box-shadow:0 26px 50px -26px var(--shadow);border:1px solid var(--rule);
}
.plate::before,.plate::after{
  content:"";position:absolute;width:78px;height:24px;background:var(--tape);top:-10px;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.plate::before{left:24px;transform:rotate(-4deg)}
.plate::after{right:24px;transform:rotate(4deg)}
.plate .ph{overflow:hidden;border:1px solid var(--rule)}
.plate .ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.plate .cap{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-top:11px;text-align:center;
}
.plate.tilt-right{transform:rotate(2deg)}
.plate.tilt-left{transform:rotate(-2deg)}

/* --------------------------------------------------------------------------
   9. Tile grid
   -------------------------------------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.tile{
  background:var(--card);border:1px solid var(--rule);border-radius:4px;overflow:hidden;
  box-shadow:0 16px 34px -28px var(--shadow);
  transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
}
.tile:hover{transform:translateY(-7px);box-shadow:0 30px 50px -26px var(--shadow)}
.tile .art{aspect-ratio:7/5;overflow:hidden;background:#ddceb2;flex:none}
.tile .art img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tile:hover .art img{transform:scale(1.05)}
.tile .body{padding:22px 24px;flex:1}
.tile h3{font-size:1.5rem;font-weight:800}
.tile p{font-size:.95rem;color:var(--muted);margin:7px 0 0}
a.tile:hover h3{color:var(--red)}

/* --------------------------------------------------------------------------
   10. Split, feature rows
   -------------------------------------------------------------------------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.feature h2{font-size:clamp(2.1rem,5vw,3.6rem)}
.feature p{margin:20px 0;font-size:1.1rem;color:var(--body-on-paper);max-width:46ch}
.feature .media img{border-radius:4px;border:1px solid var(--rule);box-shadow:0 24px 44px -30px var(--shadow)}

/* --------------------------------------------------------------------------
   11. Timeline
   -------------------------------------------------------------------------- */
.timeline{margin-top:26px;display:flex;flex-direction:column}
.ms{display:flex;gap:18px;align-items:baseline;border-top:1px solid var(--rule);padding:14px 0}
.ms .yr{
  font-family:var(--font-mono);font-weight:600;color:var(--red);
  font-size:.9rem;letter-spacing:.04em;min-width:78px;flex:none;
}
.ms .tx{font-size:1rem;color:var(--body-on-paper)}
.on-dark .ms{border-top-color:var(--rule-light)}
.on-dark .ms .yr{color:var(--coral)}
.on-dark .ms .tx{color:var(--body-on-ink)}

/* --------------------------------------------------------------------------
   12. Dark stat band (visit details, group numbers)
   -------------------------------------------------------------------------- */
.visit{background:var(--ink);color:var(--cream)}
.visit .eyebrow{color:var(--coral)}
.visit h2{font-size:clamp(2rem,5vw,3.4rem);margin-top:12px}
.vg{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:44px}
.vcell{border-top:2px solid rgba(246,239,225,.22);padding-top:20px}
.vcell .vi{width:34px;height:34px;color:var(--coral);margin-bottom:16px;stroke-width:1.7}
.vcell .k{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--coral-pale);margin-bottom:10px;
}
.vcell .v{font-family:var(--font-display);font-weight:800;font-size:1.7rem;letter-spacing:-.01em;line-height:1.08}
.vcell .s{font-size:.9rem;color:#cdbfa9;margin-top:6px}
.visit .note{margin-top:36px;display:inline-flex;align-items:center;gap:10px;font-size:1rem;color:#e9dcc6}
.visit .note svg{width:20px;height:20px;color:var(--coral);flex:none}

/* A closing call to action: the last thing on a page, where there is nothing
   left to read and only somewhere to go next. Centred, because there is no
   column of content for it to line up with. */
.closer{text-align:center}
.closer h2,.closer p,.closer .lead{margin-left:auto;margin-right:auto}
.closer .note{justify-content:center}
.closer .btn-row{justify-content:center}

/* Same cells on the paper ground */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin:0}
.fact{border-top:2px solid var(--rule);padding-top:20px}
.fact dt{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.fact dd{margin:0;font-family:var(--font-display);font-weight:800;font-size:1.7rem;letter-spacing:-.01em;line-height:1.08}
.fact .s{display:block;font-family:var(--font-body);font-weight:400;font-size:.9rem;color:var(--muted);margin-top:6px;letter-spacing:0}

/* --------------------------------------------------------------------------
   13. Reviews carousel
   -------------------------------------------------------------------------- */
.rev-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:36px}
.rev-head h2{font-size:clamp(2rem,5vw,3.2rem)}
.rev-head .tag{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-weight:600;
}
.rev-head .tag .g-icon{width:16px;height:16px;flex:none}
.rev{
  background:var(--card);border-radius:6px;padding:28px 26px;
  border-top:4px solid var(--red);box-shadow:0 16px 34px -30px var(--shadow);
}
.rev .stars{color:var(--red);letter-spacing:3px;margin-bottom:14px}
.rev p{
  font-family:var(--font-display);font-weight:700;font-size:1.28rem;
  line-height:1.32;letter-spacing:-.015em;margin:0 0 16px;
}
.rev .who{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rev-carousel{position:relative}
.rev-track{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -ms-overflow-style:none;scrollbar-width:none;padding-bottom:6px;
}
.rev-track::-webkit-scrollbar{display:none}
.rev-track .rev{scroll-snap-align:start;flex:0 0 calc((100% - 48px)/3);display:flex;flex-direction:column}
.rev-track .rev .who{margin-top:auto}
.rev-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px;flex-wrap:wrap}
.rev-dots{display:flex;align-items:center;gap:6px}
.rev-dots button{
  width:30px;height:38px;border:0;padding:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:width .3s;
}
.rev-dots button::after{
  content:"";display:block;width:100%;height:4px;border-radius:2px;
  background:rgba(33,29,26,.22);transition:background .3s;
}
.rev-dots button:hover::after{background:rgba(33,29,26,.4)}
.rev-dots button[aria-current="true"]{width:46px}
.rev-dots button[aria-current="true"]::after{background:var(--red)}
.rev-nav{display:flex;gap:10px}
.rev-nav button{
  width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);background:transparent;
  color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;
}
.rev-nav button:hover{background:var(--ink);color:var(--cream)}
.rev-nav svg{width:20px;height:20px}

/* --------------------------------------------------------------------------
   14. Museum page: the walking route
   The numbering is the order you actually walk the building, so it earns
   its place. Room numbers, not decoration.
   -------------------------------------------------------------------------- */
.room{padding:var(--section-y) 0;border-top:1px solid var(--rule)}
.room:first-of-type{border-top:0}
.room-head{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;margin-bottom:38px}
.room-no{
  font-family:var(--font-mono);font-weight:600;font-size:.78rem;letter-spacing:.16em;
  color:var(--red);border:2px solid var(--red);border-radius:50%;
  width:62px;height:62px;display:flex;align-items:center;justify-content:center;flex:none;
}
.room-head h2{font-size:clamp(2rem,5vw,3.3rem)}
.room-head p{margin-top:14px;font-size:1.08rem;color:var(--body-on-paper);max-width:60ch}

.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mosaic figure{margin:0;overflow:hidden;border-radius:4px;border:1px solid var(--rule);background:#ddceb2}
.mosaic img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;transition:transform .5s ease}
.mosaic figure:hover img{transform:scale(1.04)}
.mosaic .m-wide{grid-column:span 2}
/* A wide cell spans two columns plus the gap, so to sit level with a normal
   3/2 cell beside it its ratio has to be about (2c+g) / (c*2/3), which works
   out near 3.08 at every width the three column grid is used. Give it the old
   taller crop and every row with a wide image but no tall one leaves a band of
   empty background beside it. */
.mosaic .m-wide img{aspect-ratio:3.08}
.mosaic .m-tall{grid-row:span 2}
.mosaic .m-tall img{height:100%;aspect-ratio:auto}

/* --------------------------------------------------------------------------
   14b. Lightbox
   Progressive enhancement: js/site.js wraps each gallery figure in a button.
   Without JS the mosaic is just pictures, exactly as before.
   -------------------------------------------------------------------------- */
.lb-open{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  font:inherit;color:inherit;
}
.mosaic figure:has(.lb-open){position:relative}
/* A small cue that the photo opens, kept quiet so it does not fight the image */
.lb-open::after{
  content:"";position:absolute;right:10px;bottom:10px;width:30px;height:30px;
  border-radius:50%;background:rgba(33,29,26,.55) no-repeat center;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6efe1' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='6'/><path d='M15.5 15.5 20 20M11 8.5v5M8.5 11h5'/></svg>");
  background-size:17px;opacity:0;transition:opacity .25s;pointer-events:none;
}
.mosaic figure:hover .lb-open::after,.lb-open:focus-visible::after{opacity:1}

.lb{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(20,17,14,.94);padding:clamp(12px,3vw,40px);
}
.lb[hidden]{display:none}
.lb-stage{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.lb-media{display:flex;align-items:center;justify-content:center;min-height:0}
.lb-media img{max-width:100%;max-height:78vh;width:auto;height:auto;border-radius:3px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.lb-cap{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;
  color:rgba(246,239,225,.78);text-align:center;max-width:70ch;line-height:1.5;
}
.lb-count{display:block;margin-top:6px;color:rgba(246,239,225,.5);letter-spacing:.16em;text-transform:uppercase;font-size:.68rem}
.lb button{
  position:absolute;border:2px solid rgba(246,239,225,.5);background:rgba(20,17,14,.6);
  color:var(--cream);border-radius:50%;width:52px;height:52px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s;
}
.lb button:hover{background:var(--red);border-color:var(--red)}
.lb button svg{width:22px;height:22px}
.lb-close{top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px)}
.lb-prev{left:clamp(8px,2vw,28px);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(8px,2vw,28px);top:50%;transform:translateY(-50%)}
body.lb-open-lock{overflow:hidden}

@media (max-width:600px){
  .lb-media img{max-height:64vh}
  .lb button{width:46px;height:46px}
  .lb-prev{left:6px}
  .lb-next{right:6px}
  .lb-prev,.lb-next{top:auto;bottom:14px;transform:none}
  .lb-close{top:10px;right:10px}
}

/* --------------------------------------------------------------------------
   14c. Video cards (Gallery)
   preload="none" in the markup means nothing downloads until someone presses
   play. Five clips is about 29 MB, which nobody should pay for by accident.
   -------------------------------------------------------------------------- */
.vid-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.vid{
  background:var(--card);border:1px solid var(--rule);border-radius:4px;overflow:hidden;
  box-shadow:0 16px 34px -28px var(--shadow);display:flex;flex-direction:column;
}
.vid video{width:100%;aspect-ratio:16/9;display:block;background:#161310;object-fit:cover}
.vid .body{padding:20px 22px 22px}
.vid h3{font-size:1.3rem}
.vid p{font-size:.94rem;color:var(--muted);margin-top:7px}
.vid .len{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);display:block;margin-bottom:8px;
}
.vid-note{
  display:inline-flex;align-items:flex-start;gap:10px;margin-bottom:34px;
  font-size:.97rem;color:var(--muted);max-width:64ch;
}
.vid-note svg{width:19px;height:19px;color:var(--red);flex:none;margin-top:2px}
@media (max-width:760px){ .vid-grid{grid-template-columns:1fr} }

/* --------------------------------------------------------------------------
   15. Lists, nearby cards
   -------------------------------------------------------------------------- */
.ticks{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.ticks li{position:relative;padding-left:32px;color:var(--body-on-paper)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.44em;width:18px;height:10px;
  border-left:2.5px solid var(--red);border-bottom:2.5px solid var(--red);
  transform:rotate(-45deg);
}
.on-dark .ticks li{color:var(--body-on-ink)}
.on-dark .ticks li::before{border-color:var(--coral)}

.nearby{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.nearby article{
  background:var(--card);border:1px solid var(--rule);border-radius:4px;padding:28px 26px;
  border-top:4px solid var(--red);
}
.nearby h3{font-size:1.35rem}
.nearby p{margin-top:10px;font-size:.97rem;color:var(--muted)}

/* --------------------------------------------------------------------------
   15b. FAQ
   Built on <details>/<summary>, so it opens and closes, is reachable by
   keyboard and is readable by screen readers with no JavaScript at all.
   -------------------------------------------------------------------------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:800;font-size:1.18rem;
  letter-spacing:-.015em;color:var(--ink);transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red)}
/* the plus turns into a minus when the answer is open */
.faq summary::after{
  content:"";flex:none;width:20px;height:20px;margin-top:3px;
  background:no-repeat center/20px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8392c' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
  transition:transform .25s;
}
.faq details[open] summary::after{
  transform:rotate(45deg);
}
.faq .a{padding:0 0 24px;max-width:70ch}
.faq .a p{color:var(--body-on-paper);font-size:1.02rem}
.faq .a p + p{margin-top:14px}
.faq .a a{color:var(--red);text-decoration:underline;text-underline-offset:3px}

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */
.form{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:30px 28px;box-shadow:0 16px 34px -30px var(--shadow)}
.field{margin-bottom:18px}
.field label{
  display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.field input[type=text],.field input[type=email],.field textarea{
  width:100%;font-family:var(--font-body);font-size:1rem;color:var(--ink);
  background:#fffdf7;border:2px solid var(--rule);border-radius:4px;padding:13px 14px;
  transition:border-color .2s;
}
.field input:focus,.field textarea:focus{border-color:var(--red);outline:none}
.field textarea{resize:vertical;min-height:110px}
.field-check{display:flex;align-items:center;gap:11px}
.field-check input{width:24px;height:24px;accent-color:var(--red);flex:none}
/* The label is part of the target: tapping the words should tick the box. */
.field-check label{padding:9px 0;cursor:pointer}
.field-check label{margin:0;text-transform:none;letter-spacing:0;font-family:var(--font-body);font-size:.97rem;color:var(--ink)}
/* The honeypot has to be genuinely reachable in the DOM for a bot to find it,
   so it is moved off screen rather than display:none, and taken out of the
   tab order in the markup. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-status{margin-top:14px;font-size:.95rem;font-weight:600;line-height:1.5}
.form-status:empty{margin:0}
.form-status.is-working{color:var(--muted)}
.form-status.is-ok{
  color:#1c6b46;background:#e6f2ea;border-left:3px solid #1c6b46;
  padding:12px 14px;border-radius:3px;
}
.form-status.is-error{
  color:var(--red-deep);background:#fbe9e7;border-left:3px solid var(--red);
  padding:12px 14px;border-radius:3px;
}
.form button[type=submit][disabled]{opacity:.65;cursor:progress}
.form-note{margin-top:14px;font-size:.85rem;color:var(--muted)}

/* --------------------------------------------------------------------------
   17. Contact cards
   -------------------------------------------------------------------------- */
.cta-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cta-card{
  display:flex;flex-direction:column;gap:8px;text-decoration:none;
  background:var(--card);border:1px solid var(--rule);border-top:4px solid var(--red);
  border-radius:4px;padding:26px 24px;transition:transform .25s,box-shadow .25s;
}
.cta-card:hover{transform:translateY(-5px);box-shadow:0 24px 40px -28px var(--shadow)}
.cta-card .k{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.cta-card .v{font-family:var(--font-display);font-weight:800;font-size:1.3rem;letter-spacing:-.015em;overflow-wrap:break-word}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
footer.site{background:var(--ink-2);color:var(--cream)}
.foot{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;padding:56px 0;align-items:stretch}
.foot-map{display:flex;min-height:100%}
footer.site h2{font-size:clamp(2.2rem,5vw,3.4rem);margin-top:12px}
footer.site .lead{max-width:34ch;color:var(--body-on-ink);margin:16px 0 26px}
.foot-cta{display:flex;flex-wrap:wrap;gap:13px;margin:28px 0 0}
.info{font-size:1rem;line-height:1.65}
.info a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(246,239,225,.35)}
.info a:hover{border-bottom-color:var(--coral);color:var(--coral)}
.info .k{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--coral-pale);display:block;margin:13px 0 4px;
}
.mapframe{width:100%;height:100%;min-height:300px;border:1px solid var(--rule-light);border-radius:8px;display:block}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 18px;padding:14px 0;border-top:1px solid rgba(246,239,225,.18)}
.foot-nav a{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(246,239,225,.72);text-decoration:none;padding:10px 0;display:inline-block;
}
.foot-nav a:hover{color:var(--coral)}
.fbar{
  padding:20px 0;border-top:1px solid rgba(246,239,225,.18);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:rgba(246,239,225,.6);
}

/* --------------------------------------------------------------------------
   19. Motion
   -------------------------------------------------------------------------- */
.rise{opacity:0;transform:translateY(20px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.06s}.d2{animation-delay:.18s}.d3{animation-delay:.3s}.d4{animation-delay:.42s}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none}
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important}
  html{scroll-behavior:auto}
  .tile:hover{transform:none}
  .cta-card:hover{transform:none}
}

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
/* Narrow desktops and tablets in landscape. Tightening the nav here is what
   lets seven items survive down to 1024px, which is a real device width.
   Above 1150px everything stays roomy. */
@media (min-width:1024px) and (max-width:1150px){
  .head{gap:12px}
  .nav a{padding:9px 7px}
  .nav a::after{left:7px;right:7px}
  .brand img{height:54px}
}

/* Hand over to the menu button below 1024px. Seven nav items plus the logo,
   the phone number and the header button need about 1000px before they
   collide, and 1024 is a common tablet width worth keeping the full nav on.
   Adding Articles and Volunteers in phase 2 will not fit: the nav will need
   grouping, or items moved into the footer. */
@media (max-width:1023px){
  .nav{display:none}
  .nav-toggle{display:flex;order:4;margin-left:0}
  .head{gap:14px}
  .head-actions{margin-left:auto}

  /* Open state: the nav drops out of the header as a full-width panel. */
  .nav[data-open="true"]{
    display:block;position:absolute;left:0;right:0;top:100%;
    background:var(--paper);border-bottom:1px solid var(--rule);
    box-shadow:0 22px 40px -24px var(--shadow);padding:10px var(--gutter) 20px;
  }
  .nav[data-open="true"] ul{flex-direction:column;align-items:stretch;gap:0}
  .nav[data-open="true"] a{padding:15px 4px;border-bottom:1px solid var(--rule);border-radius:0;font-size:1.05rem}
  .nav[data-open="true"] a::after{display:none}
  .nav[data-open="true"] a[aria-current="page"]{color:var(--red)}
}

@media (max-width:920px){
  .intro-grid,.feature,.foot{grid-template-columns:1fr;gap:40px}
  .grid{grid-template-columns:1fr 1fr}
  .vg,.facts{grid-template-columns:repeat(2,1fr)}
  .nearby,.cta-trio{grid-template-columns:1fr}
  .rev-track .rev{flex:0 0 calc((100% - 24px)/2)}
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .mosaic .m-wide{grid-column:span 2}
  .mosaic .m-tall{grid-row:span 1}
  .mosaic .m-tall img{aspect-ratio:3/2}
  /* The founders portrait leads the History page on desktop; on mobile the
     words should come first. */
  .feature.media-first .media{order:2}
}

@media (max-width:600px){
  :root{--gutter:20px;--section-y:60px}
  .phone{display:none}
  .brand img{height:52px}
  .grid{grid-template-columns:1fr}
  .vg,.facts{grid-template-columns:1fr 1fr}
  .mosaic{grid-template-columns:1fr}
  .mosaic .m-wide{grid-column:span 1}
  .mosaic .m-wide img,.mosaic .m-tall img{aspect-ratio:3/2}
  .rev-track .rev{flex:0 0 100%}
  .room-head{grid-template-columns:1fr;gap:18px}
  .room-no{width:54px;height:54px}
  .banner-stamp{font-size:.62rem;padding:7px 11px}
  .hero-nav{right:20px;bottom:14px}
  .hero-nav button{width:28px}
  .hero-nav button[aria-current="true"]{width:40px}
  .plate.tilt-right,.plate.tilt-left,.intro .plate{transform:none}
}

/* Small phones. At 320px the logo, the header button and the menu toggle
   together overflowed the viewport, which is a reflow failure, not just a
   tight fit. Everything in the header gets a little smaller and the header
   button drops to its short label. */
@media (max-width:420px){
  :root{--gutter:16px}
  .head{gap:10px}
  .brand img{height:44px}
  header.site.shrink .brand img{height:38px}
  .cta-sm{font-size:.78rem;padding:10px 13px}
  header.site.shrink .cta-sm{padding:8px 12px}
  .nav-toggle{width:42px;height:38px}
  .cta-full{display:none}
  .cta-short{display:inline}
}