/* ==========================================================================
   MAGIC BOX EVENT CAMPUS — "Company Group" pages
   Source of truth: Figma file 1L78PvvlnqBfvCR1pQvS4e, page "Magic Box V1"
     visit.html   <- frame 30:2 "Visit"
     contact.html <- frame 31:2 "Contact"
     about.html   <- frame 32:2 "About"
     news.html    <- frame 33:2 "News"
   Loaded after css/site.css (frozen). Nav + footer markup/visuals come from
   site.css sections 8 & 9; everything here is page-specific composition for
   the four pages above, shared where the frames repeat a pattern.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. NAV "ON LIGHT" MODIFIER
   The Contact and News frames have no dark hero under the nav — per the
   instruction left in index.html's markup-contract comment ("If a future
   page has no dark hero under the nav, add a site-nav--on-light modifier
   ... rather than editing this markup"), this modifier is added to the
   header on those two pages only. Nav markup itself stays identical to the
   contract; only this class is appended and the logo recolors via filter
   (no new image asset needed — same src, same alt, same layout).
   --------------------------------------------------------------------------- */
.site-nav--on-light{
  background:rgba(255,250,240,.86);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  box-shadow:0 1px 0 rgba(36,42,47,.08);
}
.site-nav--on-light .site-logo img{filter:brightness(0) saturate(100%)}
.site-nav--on-light .nav-links a{color:var(--ink)}
.site-nav--on-light .nav-links a.is-active{color:var(--burgundy)}
.site-nav--on-light .btn-pill-light{background:var(--ink);color:var(--cream)}
.site-nav--on-light .btn-pill-light:hover{box-shadow:0 10px 22px rgba(36,42,47,.22)}

/* nav-links active state for on-dark nav (Visit / About) */
.site-nav .nav-links a.is-active{color:var(--yellow)}

/* ---------------------------------------------------------------------------
   1. SHARED: dcard — small white bordered info card
   --------------------------------------------------------------------------- */
.dcard{
  background:#fff;
  border:1px solid rgba(36,42,47,.12);
  border-radius:20px;
  padding:30px 26px;
}
.dcard .dcard-eyebrow{
  display:block;
  font-family:var(--label);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--burgundy);
  margin-bottom:14px;
}
.dcard h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:23px;
  line-height:1.12;
  margin-bottom:10px;
}
.dcard p{
  font-family:var(--cond);
  font-size:12.5px;
  line-height:1.65;
  color:rgba(36,42,47,.68);
}

/* ---------------------------------------------------------------------------
   2. SHARED: dark hero (grain photo + gradient tint), used by visit/about
   --------------------------------------------------------------------------- */
.cg-hero{
  position:relative;
  min-height:649px;
  color:#fff;
  background:var(--ink);
  padding-top:80px;
}
.cg-hero-media{position:absolute;inset:0;overflow:hidden}
.cg-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cg-hero-tint{
  position:absolute;inset:0;
  background:var(--gradient-warm);
  mix-blend-mode:multiply;
  opacity:.5;
}
.cg-hero-vignette{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(24,8,18,0) 45%, rgba(24,8,18,.5) 100%);
}
/* phones crop the artwork in tighter behind the copy, so the busy murals sit
   directly under the lede — a deeper bottom-weighted scrim keeps the serif
   legible without dulling the top of the frame. Desktop untouched. */
@media (max-width:900px){
  .cg-hero-vignette{
    background:linear-gradient(180deg, rgba(24,8,18,.14) 0%, rgba(24,8,18,.38) 46%, rgba(24,8,18,.72) 100%);
  }
  /* client, Aug 9: phone heroes fill the viewport like desktop, content
     centred in the frame (visit's --full variant already rides full-screen
     with its own composition, leave it be) */
  .cg-hero{min-height:100svh}
  .cg-hero:not(.cg-hero--full){display:flex;flex-direction:column;justify-content:center;padding-bottom:40px}
}
.cg-hero--dtla .cg-hero-vignette{
  background:linear-gradient(90deg, rgba(24,8,18,.66) 0%, rgba(24,8,18,.22) 62%),
             linear-gradient(0deg, rgba(24,8,18,.78) 0%, rgba(0,0,0,0) 58%);
}
.cg-hero--dtla .cg-hero-tint{display:none}
.cg-hero-content{
  position:relative;
  z-index:2;
  /* padding-block only — this element also carries .wrap, and the old
     shorthand zeroed its horizontal padding, bleeding the hero copy flush to
     the viewport edge and out of line with the nav and every section below */
  padding-block:clamp(96px,16vw,160px) clamp(64px,8vw,113px);
}
.cg-hero-content .eyebrow{margin-bottom:24px;display:block}
.cg-hero-content h1{
  font-family:var(--serif);
  font-weight:400;
  /* T1 unification: matches Contact/News' already-established 95px hero
     scale (clamp 44/8vw, line-height 1) instead of running its own
     40/7.6vw/1.02 -- same family, used by about.html + visit.html. */
  font-size:clamp(44px,8vw,95px);
  line-height:1;
  letter-spacing:-.015em;
  max-width:680px;
  margin-bottom:26px;
}
.cg-hero-content .lede{
  font-family:var(--serif);
  font-size:clamp(17px,2vw,21px);
  line-height:1.5;
  color:rgba(255,255,255,.9);
  max-width:560px;
  margin-bottom:38px;
}
.cg-hero--dtla .lede{color:rgba(255,255,255,.9)}
.cg-hero-cta{display:flex;gap:16px;flex-wrap:wrap}

/* ---------------------------------------------------------------------------
   3. SHARED: soft cream / dark utility bands
   --------------------------------------------------------------------------- */
.section-cream-soft{background:var(--cream-soft, #f7f0e2)}
.section-dark{background:var(--ink);color:rgba(255,250,240,.78)}
.section-dark .eyebrow--gold{color:var(--yellow)}

/* ---------------------------------------------------------------------------
   4. SHARED: generic section head (eyebrow + serif h2)
   --------------------------------------------------------------------------- */
.cg-head{margin-bottom:48px}
.cg-head .eyebrow{display:block;margin-bottom:18px}
.cg-head h1,
.cg-head h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(32px,5vw,58px);
  line-height:1.08;
  letter-spacing:-.01em;
}
.cg-head p.cg-sub{
  font-family:var(--cond);
  font-size:14.5px;
  line-height:1.75;
  color:rgba(36,42,47,.68);
  max-width:44ch;
  margin-top:20px;
}
.section-dark .cg-head h1,
.section-dark .cg-head h2{color:var(--cream)}

/* ---------------------------------------------------------------------------
   5. SHARED: "Let's Make Magic" gradient CTA panel (About / News)
   --------------------------------------------------------------------------- */
.magic-cta{
  position:relative;
  border-radius:38px;
  padding:15px;
  background-image:linear-gradient(95deg,#8F6686 0%,#9A1E1B 32%,#C4571F 66%,#FFB71B 100%);  /* matched to index.html's CTA frame */
}
.magic-cta::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  opacity:.5;
  mix-blend-mode:overlay;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
}
.magic-cta-inner{
  position:relative;
  z-index:1;
  background:var(--cream);
  border-radius:27px;
  padding:clamp(40px,6vw,72px) clamp(28px,6vw,86px);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:40px;
  align-items:center;
}
.magic-cta-words{
  font-family:var(--serif);
  font-weight:400;
  color:var(--burgundy);
  font-size:clamp(52px,8vw,122.4px);
  line-height:.92;
  letter-spacing:-.015em;
  white-space:nowrap;
}
.magic-cta-words span{display:block}
.magic-cta-right .site-logo{margin-bottom:28px}
.magic-cta-right .site-logo .lg-mark{height:19px}
.magic-cta-right .site-logo .lg-word{height:18px}
.magic-cta-right p.msg{
  font-family:var(--serif);
  font-size:clamp(19px,2vw,29px);
  line-height:1.32;
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding-bottom:28px;
  margin-bottom:24px;
  max-width:34ch;
}
.magic-cta-contacts{
  display:flex;
  gap:64px;
  margin-bottom:32px;
  flex-wrap:wrap;
}
.magic-cta-contacts h4{
  font-family:var(--cond);
  font-weight:700;
  font-size:13.5px;
  margin-bottom:10px;
}
.magic-cta-contacts p{
  font-family:var(--cond);
  font-size:13px;
  color:rgba(36,42,47,.65);
  line-height:1.7;
}
.magic-cta-buttons{display:flex;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.magic-cta-right .addr{
  font-family:var(--label);
  font-weight:400;
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(36,42,47,.7);
}
@media (max-width:900px){
  .magic-cta-inner{grid-template-columns:1fr;text-align:left}
  .magic-cta-words{font-size:clamp(48px,14vw,64px)}
}

/* ---------------------------------------------------------------------------
   6. VISIT PAGE
   --------------------------------------------------------------------------- */
.visit-facts{margin-top:-84px;position:relative;z-index:3}
.visit-facts .grid4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.parking-section .wrap{
  display:grid;
  grid-template-columns:minmax(280px,1fr) 1.5fr;
  gap:48px;
  align-items:start;
}
.parking-copy p{
  font-family:var(--cond);
  font-size:14.5px;
  line-height:1.75;
  color:rgba(36,42,47,.68);
  max-width:36ch;
  margin-top:24px;
}
.lot-cards{display:flex;flex-direction:column;gap:16px}
.lot-cards .dcard{padding:24px 26px}
.lot-total{
  font-family:var(--label);
  font-weight:700;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(36,42,47,.68);
  margin-top:16px;
}

.ways-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-bottom:24px;
}
.ways-grid .dcard h3{margin-bottom:14px}
.ways-note{
  font-family:var(--cond);
  font-size:12.5px;
  line-height:1.65;
  color:rgba(36,42,47,.68);
  max-width:60ch;
}

.find-us-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}
.find-us-copy .eyebrow{display:block;margin-bottom:22px}
/* T1 unification: was its own 68px/1.04 -- now the same section-opening
   scale used elsewhere (this plays the identical eyebrow+h2 role, on ink). */
.find-us-copy h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(32px,5vw,58px);
  line-height:1.08;
  letter-spacing:-.01em;
  color:var(--cream);
  margin-bottom:20px;
}
.find-us-copy h2 em{color:var(--yellow);font-style:italic}
.find-us-copy p.addr-line{
  font-family:var(--serif);
  font-size:21px;
  color:rgba(255,250,240,.78);
  margin-bottom:12px;
}
.find-us-copy p.addr-note{
  font-family:var(--cond);
  font-size:13px;
  color:rgba(255,250,240,.66);
  line-height:1.7;
}
.find-us-media{
  border-radius:20px;
  overflow:hidden;
  position:relative;
  aspect-ratio:680/340;
}
.find-us-media img{width:100%;height:100%;object-fit:cover;display:block}
.find-us-media::after{
  content:"";
  position:absolute;inset:0;
  background:var(--gradient-warm);
  mix-blend-mode:multiply;
  opacity:.35;
}

.faq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 64px;
}
.faq-col .faq-col-label{
  display:block;
  font-family:var(--label);
  font-weight:700;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--burgundy);
  margin-bottom:16px;
}
.faq-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 0;
  border-top:1px solid rgba(36,42,47,.14);
}
.faq-col .faq-row:last-child{border-bottom:1px solid rgba(36,42,47,.14)}
.faq-row .q{
  font-family:var(--serif);
  font-size:23px;
  color:var(--ink);
}
.faq-row .plus{
  font-family:var(--serif);
  font-size:22px;
  color:var(--burgundy);
  flex-shrink:0;
}

@media (max-width:900px){
  .visit-facts .grid4{grid-template-columns:1fr 1fr}
  .parking-section .wrap{grid-template-columns:1fr}
  .ways-grid{grid-template-columns:1fr}
  .find-us-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr;gap:0}
}
@media (max-width:480px){
  .visit-facts .grid4{grid-template-columns:1fr}
  .visit-facts{margin-top:32px}
}

/* ---------------------------------------------------------------------------
   7. CONTACT PAGE
   --------------------------------------------------------------------------- */
.contact-hero{
  padding:clamp(140px,18vw,224px) 0 80px;
  text-align:center;
  background:var(--cream);
}
.contact-hero .eyebrow{display:block;margin-bottom:22px}
.contact-hero h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(44px,8vw,95px);
  line-height:1;
  letter-spacing:-.015em;
  margin-bottom:26px;
}
.contact-hero h1 em{color:var(--burgundy);font-style:italic}
.contact-hero .lede{
  font-family:var(--serif);
  font-size:21px;
  line-height:1.5;
  color:rgba(36,42,47,.78);
  max-width:32ch;
  margin:0 auto;
}

.contact-quickcards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:56px;
}
.contact-quickcards .dcard{padding:26px}
.contact-quickcards .dcard h3{font-size:20px;margin-bottom:8px}

.inquiry-section{background:var(--cream-soft,#f7f0e2)}
.inquiry-grid{
  display:grid;
  grid-template-columns:minmax(260px,1fr) 1.5fr;
  gap:48px;
  align-items:start;
}
.inquiry-copy p.lede{
  font-family:var(--cond);
  font-size:14px;
  line-height:1.7;
  color:rgba(36,42,47,.68);
  max-width:34ch;
  margin-top:22px;
}
.inquiry-person{
  border-top:1px solid rgba(36,42,47,.14);
  margin-top:34px;
  padding-top:22px;
}
.inquiry-person .name{
  font-family:var(--serif);
  font-size:20px;
  color:var(--ink);
  margin-bottom:6px;
}
.inquiry-person .role{
  font-family:var(--label);
  font-weight:700;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(36,42,47,.68);
  margin-bottom:14px;
}
.inquiry-person a,.inquiry-person p{
  display:block;
  font-family:var(--cond);
  font-size:13.5px;
  color:var(--burgundy);
  line-height:1.9;
}

.mb-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 24px;
}
.mb-form .field{display:flex;flex-direction:column;gap:8px}
.mb-form .field.full{grid-column:1/-1}
.mb-form label{
  font-family:var(--label);
  font-weight:700;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#2c333a;
}
.mb-form input,.mb-form textarea{
  font-family:var(--cond);
  font-size:14px;
  color:var(--ink);
  background:#fff;
  border:1px solid rgba(36,42,47,.2);
  border-radius:12px;
  padding:0 18px;
  height:44px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.mb-form textarea{padding:14px 18px;height:92px;resize:vertical;font-family:var(--cond)}
.mb-form input:focus,.mb-form textarea:focus{
  border-color:var(--burgundy);
  box-shadow:0 0 0 3px rgba(154,30,27,.12);
}
.mb-form-foot{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  margin-top:6px;
}
.mb-form-foot .fine{
  font-family:var(--cond);
  font-size:11.5px;
  line-height:1.6;
  color:rgba(36,42,47,.68);
  /* was 36ch, which stacked this into a five-line column beside the button
     and left most of the row empty. It has the whole remaining width. */
  flex:1 1 340px;
  max-width:none;
  margin:0;
}

.decks-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.decks-grid .dcard{padding:28px 26px}
.decks-grid .dcard-eyebrow{margin-bottom:10px}
.decks-grid h3{font-size:23px;margin-bottom:14px}
.decks-grid .req-link{
  display:inline-block;
  margin-top:20px;
  font-family:var(--label);
  font-weight:700;
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--burgundy);
}

.contact-find-us .find-us-grid{align-items:center}

@media (max-width:900px){
  .contact-quickcards{grid-template-columns:1fr}
  .inquiry-grid{grid-template-columns:1fr}
  .mb-form{grid-template-columns:1fr}
  .decks-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .decks-grid{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   8. ABOUT PAGE
   --------------------------------------------------------------------------- */
.who-we-are .wrap{
  display:grid;
  grid-template-columns:minmax(280px,1fr) 1.4fr;
  gap:48px;
  align-items:start;
}
.who-we-are h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(32px,5vw,58px);
  line-height:1.08;
}
.who-we-are-copy p{
  font-family:var(--cond);
  font-size:14.5px;
  line-height:1.75;
  color:rgba(36,42,47,.68);
  /* shared body-copy line-length cap (matches .faq-a-inner p / .visit-map-foot p
     elsewhere in this file) -- this column is 1.4fr of the wrap and was running
     to ~99 characters per line on wide viewports with no cap set */
  max-width:52ch;
}
.who-we-are-copy p + p{margin-top:20px}

.stat-band{padding:56px 0}
.stat-band .wrap{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.stat-band h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(36px,4.5vw,68px);
  color:var(--cream);
  margin-bottom:18px;
  white-space:nowrap;
}
.stat-band .stat-label{
  display:block;
  font-family:var(--label);
  font-weight:700;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--yellow);
}

.location-section .wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}
.location-media{border-radius:20px;overflow:hidden;aspect-ratio:669/360}
.location-media img{width:100%;height:100%;object-fit:cover;display:block}
.location-copy .eyebrow{display:block;margin-bottom:20px}
/* T1 unification: was its own 50px/1.1 -- now the same section-opening
   scale as .cg-head h2 / .who-we-are h2 (this plays the identical
   eyebrow+h2 role, just beside the location photo). */
.location-copy h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(32px,5vw,58px);
  line-height:1.08;
  letter-spacing:-.01em;
  margin-bottom:22px;
}
.location-copy h2 em{color:var(--burgundy);font-style:italic}
.location-copy p{
  font-family:var(--cond);
  font-size:14.5px;
  line-height:1.75;
  color:rgba(36,42,47,.68);
  margin-bottom:26px;
  /* shared body-copy line-length cap, see .who-we-are-copy p above */
  max-width:52ch;
}
.chip-row{display:flex;gap:12px;flex-wrap:wrap}
.chip{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 16px;
  border-radius:100px;
  border:1px solid rgba(36,42,47,.2);
  font-family:var(--label);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
}

.explore-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.explore-card{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  background:var(--ink);
  aspect-ratio:431/360;
  display:block;
}
.explore-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.explore-card:hover img{transform:scale(1.04)}
.explore-card::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(18,12,16,.92) 0%, rgba(18,12,16,.38) 55%, rgba(18,12,16,.18) 100%);
}
.explore-card-inner{
  position:absolute;inset:22px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:16px;
  z-index:1;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:#fff;
}
.explore-card .eyebrow--on-dark{display:block;margin-bottom:12px}
.explore-card h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(36px,4vw,54px);
  line-height:1;
  margin-bottom:14px;
}
.explore-card p{
  font-family:var(--serif);
  font-size:16px;
  line-height:1.4;
  color:rgba(255,255,255,.92);
  margin-bottom:22px;
}
.explore-card .cta-link{
  font-family:var(--label);
  font-weight:700;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--yellow);
}

@media (max-width:900px){
  .who-we-are .wrap{grid-template-columns:1fr}
  .stat-band .wrap{grid-template-columns:1fr 1fr;row-gap:32px}
  .location-section .wrap{grid-template-columns:1fr}
  .explore-grid{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   9. NEWS PAGE
   --------------------------------------------------------------------------- */
/* Hero now reuses the shared .cg-hero/.cg-hero--dtla pattern (see section 2
   above) instead of its own flat, photo-free treatment -- no page-specific
   hero rules needed here anymore. */

.news-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.news-card{
  background:#fff;
  border:1px solid rgba(36,42,47,.12);
  border-radius:20px;
  overflow:hidden;
  display:block;
  /* these are links to the spotlight pages and never read as such: no hover
     response, no read-more affordance. Same lift + image zoom the site's
     other cards use, so the page stops feeling like a dead end. */
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.news-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 48px -24px rgba(36,42,47,.28);
  border-color:rgba(36,42,47,.2);
}
.news-card .thumb img{transition:transform .5s ease}
.news-card:hover .thumb img{transform:scale(1.04)}
.news-read{
  display:inline-block;
  margin-top:14px;
  font-family:var(--label);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--burgundy);
  transition:color .2s ease;
}
.news-card:hover .news-read{color:var(--ink)}
.news-card .thumb{aspect-ratio:429/200;overflow:hidden}
.news-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.news-card .body{padding:26px}
.news-card .kicker{
  display:block;
  font-family:var(--label);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--burgundy);
  margin-bottom:16px;
}
.news-card h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:26px;
  line-height:1.12;
  color:var(--ink);
  margin-bottom:14px;
}
.news-card p{
  font-family:var(--cond);
  font-size:13px;
  line-height:1.65;
  color:rgba(36,42,47,.68);
}

@media (max-width:900px){
  .news-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   10. REFINEMENT PASS — v1 -> real site (visit / contact / about / news)
   Added at the end per project convention: everything above this block is
   frozen 1:1-Figma composition; this block adds the behavior needed to make
   the four pages work — nav scroll state on light-nav pages, functioning FAQ
   accordions, the contact form's inline success state, and the rebalanced
   grids left behind after the no-personal-contact-info content fixes
   (Wayne's email/phone removed everywhere; Contact's Email/Call cards
   removed since the form is the single action).
   ========================================================================== */

/* ---- on-light nav: once .scrolled kicks in it goes ink-glass like every other page, so undo the light-nav recolor ---- */
.site-nav--on-light.scrolled .site-logo img{filter:none}
.site-nav--on-light.scrolled .nav-links a{color:rgba(255,255,255,.92)}
.site-nav--on-light.scrolled .nav-links a.is-active{color:var(--yellow)}
.site-nav--on-light.scrolled .btn-pill-light{background:rgba(255,255,255,.95);color:var(--ink)}

/* ---- FAQ rows are now buttons; answers expand via a grid-rows transition ---- */
.faq-row{
  background:none;
  border:none;
  border-top:1px solid rgba(36,42,47,.14);
  width:100%;
  text-align:left;
  font:inherit;
  color:inherit;
}
.faq-col .faq-row:last-of-type{border-bottom:1px solid rgba(36,42,47,.14)}
.faq-row .plus{transition:transform .25s ease;display:inline-block}
.faq-row[aria-expanded="true"] .plus{transform:rotate(45deg)}
.faq-a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s cubic-bezier(.2,.6,.2,1);
}
.faq-row[aria-expanded="true"] + .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden}
.faq-a-inner p{
  font-family:var(--cond);
  font-size:14px;
  line-height:1.7;
  color:rgba(36,42,47,.68);
  padding:0 0 22px;
  max-width:52ch;
}
/* single-column FAQ variant (Visit + About each ended up with one category after the client/booking split) */
.faq-grid--single{grid-template-columns:1fr;max-width:680px}
/* client (Aug 9): in the contact page's two-column FAQ the 52ch cap left the
   opened answers hugging half their column — let them run the column's width,
   a touch larger so the longer measure stays comfortable */
.contact-faq .faq-a-inner p{max-width:none;font-size:15px;line-height:1.75}
/* client (Aug 9): the Find Us media is a live map now, not a photo — the
   grain/vignette overlays would sit over the iframe and eat every pan/zoom */
.find-us-media iframe{width:100%;height:100%;border:0;display:block}
.find-us-media.has-map::after{display:none}
/* client (rev 3, Aug 11): the ink glass bar read as a hard "line" above the
   gradient on load — the nav floats transparent now, like every other page,
   and the hero itself carries a top vignette so the links stay readable over
   the gradient's light oranges (same trick as the photo heroes' scrims) */
.contact-hero--grad{position:relative}
.contact-hero--grad::before{
  content:'';
  position:absolute;inset:0 0 auto 0;height:190px;
  background:linear-gradient(rgba(20,14,18,.58), rgba(20,14,18,0));
  pointer-events:none;
}

/* ---- Contact: quick-cards grid rebalanced to 2 after removing Email/Call ---- */
.contact-quickcards.is-dual{grid-template-columns:repeat(2,1fr);max-width:760px}

/* ---- Contact form: inline success state (no backend, no mailto) ---- */
/* ------------------------------------------------ inquiry confirmation
   The confirmation takes over the whole section rather than appending a
   card under the form. Everything behind it blurs and stops accepting
   input, so a submitted form cannot be read as one still waiting to be
   filled. No card around the copy: same treatment as the deck panels,
   type straight over the blur. js/site.js toggles .is-confirmed. */
.inquiry-section{position:relative}
.inquiry-section > .wrap{
  transition:filter .5s ease, opacity .5s ease, transform .5s ease;
}
.inquiry-section.is-confirmed > .wrap{
  filter:blur(12px);
  opacity:.35;
  transform:scale(.995);
  pointer-events:none;
  user-select:none;
}

.form-success{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  transition:opacity .45s ease;
}
.inquiry-section.is-confirmed .form-success{opacity:1}
.form-success[hidden]{display:none}

.form-success-body{
  text-align:center;
  max-width:56ch;
  transform:translateY(10px);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.inquiry-section.is-confirmed .form-success-body{transform:translateY(0)}

.fs-tick{color:var(--yellow);margin-right:14px}
.form-success h3{
  font-size:clamp(28px,3.2vw,38px);
  margin-bottom:10px;
  color:var(--ink);
}
.form-success p{
  font-family:var(--cond);
  font-size:15px;
  line-height:1.7;
  color:rgba(36,42,47,.72);
  margin:0 auto;
  max-width:46ch;
}

/* same drawn close as the deck panels, pinned to the section corner */
.fs-close{
  position:absolute;
  top:28px;
  right:clamp(24px,4vw,56px);
  width:36px;
  height:36px;
  background-color:transparent;
  border:none;
  border-radius:8px;
  cursor:pointer;
}
.fs-close span,
.fs-close span::after{
  position:absolute;
  top:50%;
  left:50%;
  width:16px;
  height:1.5px;
  background-color:var(--ink);
  content:"";
}
.fs-close span{transform:translate(-50%,-50%) rotate(45deg)}
.fs-close span::after{top:0;left:0;transform:rotate(-90deg)}
.fs-close:hover{background-color:rgba(36,42,47,.07)}
.fs-close:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .inquiry-section > .wrap,
  .form-success,
  .form-success-card{transition:none}
}
.mb-form .field-note{font-family:var(--cond);font-size:12px;line-height:1.6;color:rgba(36,42,47,.6);margin:0}

@media (max-width:900px){
  .contact-quickcards.is-dual{grid-template-columns:1fr}
}


/* contact qualification hints (response promise + what to include) */
.form-hints{
  margin-top:14px;
  font-family:var(--cond);
  font-size:13px;
  line-height:1.55;
  color:rgba(36,42,47,.62);
  max-width:38ch;
}

/* ---- Visit: embedded map (client call, Jul 17: "Map strongly recommended")
   Sits in the dark Find Us band, so the bright map tile is framed rather than
   floating: rounded to the sheet radius with a hairline and a soft lift. ---- */
.visit-map{
  margin-top:38px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,250,240,.16);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.6);
  background:rgba(255,250,240,.04);
  line-height:0;
}
.visit-map iframe{
  display:block;
  width:100%;
  height:440px;
  border:0;
  /* the default Google tile is cooler than the brand cream; a touch of warmth
     and contrast settles it next to the ink band without hiding detail */
  filter:saturate(.92) contrast(1.04);
}
.visit-map-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:22px; flex-wrap:wrap;
  margin-top:22px;
}
.visit-map-foot p{
  font-family:var(--cond);
  font-size:14px;
  line-height:1.6;
  color:rgba(255,250,240,.72);
  max-width:52ch;
  margin:0;
}
@media (max-width:900px){
  .visit-map iframe{ height:320px; }
  .visit-map-foot{ flex-direction:column; align-items:flex-start; }
  .visit-map-foot .btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .visit-map{ box-shadow:none; }
}

/* ---- Contact: inline submit error (shown when the form endpoint is not
   configured, or the POST fails — never a silent false confirmation) ---- */
.form-error{
  margin:4px 0 18px;
  padding:14px 18px;
  border-radius:12px;
  border:1px solid rgba(154,30,27,.34);
  background:rgba(154,30,27,.07);
  color:var(--burgundy);
  font-family:var(--cond);
  font-size:14px;
  line-height:1.6;
}
.form-error:focus{ outline:2px solid var(--burgundy); outline-offset:2px; }

/* ===========================================================================
   11. OVERHAUL PASS — Visit + Contact redesign to the venue/index standard.
   Ledger rows replace white boxes, heroes go full-screen, and the Venue
   Handbook cover becomes a live surface: its warm gradient drifting slowly
   under the site's grain.
   =========================================================================== */

/* ---- live handbook gradient (animated; grain comes from .grain) ---- */
.gradient-live{position:relative;overflow:hidden;background:#9A1E1B}
.gradient-live::before{
  content:"";position:absolute;inset:-42%;z-index:0;
  background:
    radial-gradient(50% 56% at 20% 4%, rgba(62,124,89,.9) 0%, rgba(62,124,89,0) 58%),
    linear-gradient(115deg,#8F6686 0%,#9A1E1B 34%,#C4571F 62%,#FFB71B 100%);
  animation:mbGradDrift 22s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes mbGradDrift{
  0%{transform:translate3d(-3.5%,-2.5%,0) scale(1) rotate(0deg)}
  100%{transform:translate3d(3.5%,2.5%,0) scale(1.14) rotate(2.4deg)}
}
@media (prefers-reduced-motion:reduce){.gradient-live::before{animation:none}}

/* the deck-CTA frame, animated the same way: oversized gradient panning
   behind the cream inner panel */
.magic-cta--live{background-image:none;background-color:#9A1E1B}
.magic-cta--live::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background-image:
    radial-gradient(60% 80% at 16% 0%, rgba(62,124,89,.75) 0%, rgba(62,124,89,0) 55%),
    linear-gradient(95deg,#8F6686 0%,#9A1E1B 32%,#C4571F 66%,#FFB71B 100%);
  background-size:220% 220%;
  background-position:0% 50%;
  animation:mbGradPan 16s ease-in-out infinite alternate;
}
@keyframes mbGradPan{0%{background-position:0% 40%}100%{background-position:100% 60%}}
@media (prefers-reduced-motion:reduce){.magic-cta--live::before{animation:none}}

/* ---- shared cream ledger row (replaces the white dcard boxes) ---- */
.ledger{display:grid;gap:clamp(28px,3.5vw,56px)}
.ledger--4{grid-template-columns:repeat(4,1fr)}
.ledger--3{grid-template-columns:repeat(3,1fr)}
.lg-item{border-top:1px solid rgba(36,42,47,.2);padding-top:20px}
.lg-item .lg-k{
  display:block;font-family:var(--label);font-weight:700;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--burgundy);
  margin-bottom:14px;
}
.lg-item h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.9vw,27px);
  line-height:1.12;color:var(--ink);margin-bottom:8px;
}
.lg-item p{font-family:var(--cond);font-size:13px;line-height:1.7;color:rgba(36,42,47,.62)}
.lg-item .req-link{
  display:inline-block;margin-top:16px;
  font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--burgundy);
}

/* ---------------- VISIT ---------------- */
.cg-hero--full{
  min-height:100svh;padding-top:0;
  display:flex;flex-direction:column;justify-content:center;
}
.cg-hero--full .cg-hero-content{padding-block:150px 130px;width:100%}

.parking-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(48px,6vw,96px);align-items:start}
.parking-grid .eyebrow{display:block;margin-bottom:18px}
.parking-grid h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.6vw,58px);line-height:1.08;
  letter-spacing:-.01em;
}
.parking-grid h2 em{font-style:italic;color:var(--burgundy)}
.parking-grid .parking-note{
  font-family:var(--cond);font-size:14.5px;line-height:1.75;color:rgba(36,42,47,.68);
  max-width:38ch;margin-top:24px;
}
.lot-row{
  display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:clamp(24px,3vw,48px);
  align-items:center;padding:28px 0;border-top:1px solid rgba(36,42,47,.2);
}
.lot-row .lot-num{
  font-family:var(--serif);font-weight:400;line-height:.9;
  font-size:clamp(54px,5.2vw,76px);
  color:transparent;-webkit-text-stroke:1px rgba(154,30,27,.55);
}
.lot-row strong{
  display:block;font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.8vw,24px);
  color:var(--ink);margin-bottom:6px;
}
.lot-row div span{font-family:var(--cond);font-size:13px;line-height:1.65;color:rgba(36,42,47,.62)}
.lots .lot-total{
  border-top:1px solid rgba(36,42,47,.2);padding-top:18px;margin-top:0;
  font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(36,42,47,.62);
}

.ways-note{margin-top:28px}

/* ---------------- CONTACT ---------------- */
/* compact hero on the OFFICIAL brand gradient (grain baked into the asset);
   sized so the Event Inquiry section starts above the fold */
.contact-hero--grad{
  color:#fff;
  padding:clamp(150px,16vw,196px) 0 clamp(72px,8vw,100px);
  background:var(--ink) url(../assets/img/brand/hero-gradient.jpg) center/cover no-repeat;
}
.contact-hero--grad .wrap{position:relative;z-index:2}
.contact-hero--grad .eyebrow{color:rgba(255,250,240,.92)}
.contact-hero--grad h1{color:#FFFAF0;margin-bottom:26px}
.contact-hero--grad h1 em{color:var(--yellow);font-style:italic}
.contact-hero--grad .lede{color:rgba(255,250,240,.92);margin:0 auto 40px}
.contact-hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.contact-hero--grad .btn-ghost{border-color:rgba(255,250,240,.55);color:#FFFAF0}

/* inquiry sits on plain cream now — the tinted band read as a seam */
.inquiry-section{background:var(--cream)}
.inquiry-copy h2{font-size:clamp(30px,4.2vw,50px);margin-top:16px}
/* client (Aug 9): the intro paragraph runs its whole column like the
   heading above it, not a 40ch island */
.inquiry-copy p.lede{max-width:none;font-size:15px;line-height:1.75}
.team-ledger{margin-top:36px}
.tl-person{border-top:1px solid rgba(36,42,47,.16);padding:16px 0 14px}
.tl-person .name{font-family:var(--serif);font-size:20px;color:var(--ink);margin-bottom:4px}
.tl-person .role{
  font-family:var(--label);font-weight:700;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--burgundy);
}

/* dark Q&A band */
.section-dark .cg-head h1 em,
.section-dark .cg-head h2 em{color:var(--yellow);font-style:italic}
.section-dark .faq-col .faq-col-label{color:var(--yellow)}
.section-dark .faq-row{border-top-color:rgba(255,250,240,.16)}
.section-dark .faq-col .faq-row:last-of-type{border-bottom-color:rgba(255,250,240,.16)}
.section-dark .faq-row .q{color:var(--cream)}
.section-dark .faq-row .plus{color:var(--yellow)}
.section-dark .faq-a-inner p{color:rgba(255,250,240,.68)}

/* cream section-head ems match the site's split heads */
.cg-head h1 em,
.cg-head h2 em{font-style:italic;color:var(--burgundy)}
.section-dark .find-us-copy h2 em{color:var(--yellow)}

@media (max-width:900px){
  .ledger--4{grid-template-columns:1fr 1fr}
  .ledger--3{grid-template-columns:1fr}
  .parking-grid{grid-template-columns:1fr;gap:36px}
  /* client, Aug 9: full-viewport phone hero, centred, room for the cue */
  .contact-hero--grad{
    padding:110px 0 90px;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
  }
}
@media (max-width:480px){
  .ledger--4{grid-template-columns:1fr}
  .lot-row{grid-template-columns:1fr;gap:10px}
}

/* ===========================================================================
   12. VISIT DEPTH PASS — the flat cream read replaced by a dark drafted
   chapter (essentials + parking), lifted ink cards, and YELLOW highlights
   everywhere the page previously used burgundy.
   =========================================================================== */
.cg-hero-content h1 em{font-style:italic;color:var(--yellow)}

/* dark drafted chapter: ink ground with the drafting-grid whisper */
.pv-dark{position:relative;background:var(--ink);color:rgba(255,250,240,.8);overflow:hidden}
.pv-dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,250,240,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,250,240,.05) 1px,transparent 1px);
  background-size:64px 64px;
}
.pv-dark > .wrap{position:relative;z-index:1}
.pv-dark + .pv-dark{padding-top:0}
.pv-dark .cg-head h1,
.pv-dark .cg-head h2{color:var(--cream)}
.pv-dark .cg-head h1 em,
.pv-dark .cg-head h2 em{color:var(--yellow);font-style:italic}
.pv-dark .eyebrow--gold{color:var(--yellow)}

/* ledger, gold-ruled on ink */
.pv-dark .lg-item{border-top-color:rgba(255,183,27,.45)}
.pv-dark .lg-item .lg-k{color:var(--yellow)}
.pv-dark .lg-item h3{color:var(--cream)}
.pv-dark .lg-item p{color:rgba(255,250,240,.62)}

/* parking on ink: yellow-stroked numerals, warm hairlines */
.pv-dark .parking-grid h2{color:var(--cream)}
.pv-dark .parking-grid h2 em{color:var(--yellow)}
.pv-dark .parking-note{color:rgba(255,250,240,.66)}
.pv-dark .lot-row{border-top-color:rgba(255,183,27,.4)}
.pv-dark .lot-row .lot-num{-webkit-text-stroke:1px rgba(255,183,27,.8)}
.pv-dark .lot-row strong{color:var(--cream)}
.pv-dark .lot-row div span{color:rgba(255,250,240,.62)}
.pv-dark .lots .lot-total{border-top-color:rgba(255,183,27,.4);color:rgba(255,250,240,.66)}

/* yellow chip label — the highlight that stays legible on cream */
.chip-gold{
  display:inline-block;background:var(--yellow);color:var(--ink);
  border-radius:100px;padding:7px 16px;margin-bottom:20px;
  font-family:var(--label);font-weight:700;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;
}

/* cream headline ems: ink over a yellow marker swash instead of burgundy */
.pv-cream .cg-head h1 em,
.pv-cream .cg-head h2 em{
  color:var(--ink);font-style:italic;
  background-image:linear-gradient(transparent 62%, rgba(255,183,27,.62) 62%, rgba(255,183,27,.62) 94%, transparent 94%);
}

/* three lifted ink cards for Getting Here */
.pv-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pv-way{
  position:relative;overflow:hidden;
  background:var(--ink);color:rgba(255,250,240,.75);
  border-radius:22px;padding:32px 30px 36px;
  box-shadow:0 26px 50px -30px rgba(24,8,18,.45);
  transition:transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s ease;
}
.pv-way::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,250,240,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,250,240,.05) 1px,transparent 1px);
  background-size:48px 48px;
}
.pv-way:hover{transform:translateY(-6px);box-shadow:0 36px 62px -30px rgba(24,8,18,.6)}
.pv-way > *{position:relative}
.pw-num{
  display:block;font-family:var(--serif);font-weight:400;font-size:46px;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,183,27,.8);margin-bottom:18px;
}
.pw-k{
  display:block;font-family:var(--label);font-weight:700;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin-bottom:12px;
}
.pv-way h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(21px,1.8vw,25px);
  color:var(--cream);margin-bottom:12px;
}
.pv-way p{font-family:var(--cond);font-size:13px;line-height:1.7;color:rgba(255,250,240,.62)}

/* FAQ: gold chip category + gold disc toggles */
.pv-faq .faq-col .faq-col-label{
  display:inline-block;background:var(--yellow);color:var(--ink);
  border-radius:100px;padding:6px 14px;letter-spacing:.2em;
}
.pv-faq .faq-row .plus{
  width:28px;height:28px;flex-shrink:0;border-radius:50%;
  background:var(--yellow);color:var(--ink);
  font-size:18px;line-height:28px;text-align:center;
}

@media (max-width:900px){
  .pv-ways{grid-template-columns:1fr}
}

/* adjacent dark bands (Visit: Find Us map + Q&A) read as one chapter */
.section-dark + .section-dark{padding-top:0}

/* ---- legal pages (privacy) -------------------------------------------
   Long-form reading copy. Narrower measure than the marketing sections and
   a clear heading rhythm, so a policy stays scannable without inventing a
   new visual language for one page. */
/* ---------------------------------------------------------------- legal page
   A centred title block over a label-column layout. The section name sits in
   its own column beside the prose, so the page uses its width and stays
   scannable, while the paragraphs keep a readable measure rather than
   stretching across the container. Stacks below 1000px. */
.legal-head{text-align:center;max-width:none}
.legal-head .legal-lede{margin-left:auto;margin-right:auto}
/* even line lengths in the title block rather than a one-word last line */
.legal-head h1,
.legal-head h2,
.legal-head .legal-lede{text-wrap:balance}
.legal-head .legal-updated{margin-bottom:0}

.legal-copy{
  margin-top:clamp(48px,5.5vw,76px);
  padding-top:clamp(40px,4.5vw,60px);
  border-top:1px solid rgba(36,42,47,.14);
}
.legal-updated{
  font-family:var(--label);
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(36,42,47,.5);
  margin:clamp(24px,2.6vw,32px) 0 0;
}

.legal-block{
  display:grid;
  grid-template-columns:minmax(150px,230px) minmax(0,66ch);
  gap:clamp(28px,3.6vw,52px);
  justify-content:center;
  padding:clamp(30px,3.4vw,44px) 0;
  border-bottom:1px solid rgba(36,42,47,.11);
}
.legal-block:first-child{padding-top:0}
.legal-block:last-child{border-bottom:none;padding-bottom:0}

.legal-block h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(21px,2.1vw,27px);
  line-height:1.18;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0;
  /* hugging the gutter pulls the two columns into one block instead of
     leaving the label floating in its own field of cream */
  text-align:right;
  /* rides down with the reader on the longer sections */
  position:sticky;
  top:118px;
  align-self:start;
}
.legal-block-body p{
  font-size:16.5px;
  line-height:1.75;
  color:rgba(36,42,47,.82);
  margin:0 0 16px;
}
.legal-block-body p:last-child{margin-bottom:0}
.legal-copy a{
  color:var(--burgundy);
  text-decoration:underline;
  text-underline-offset:2px;
}

@media (max-width:999px){
  .legal-block{
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    max-width:64ch;
    margin:0 auto;
  }
  .legal-block h3{position:static;text-align:left;font-size:clamp(20px,4.4vw,25px)}
}
@media (max-width:900px){
  .legal-block-body p{font-size:15.5px;line-height:1.72}
}
/* the legal hero is type on cream, so the lede needs its own breathing room
   rather than the tight rhythm the photo heroes use */
.legal-lede{
  font-family:var(--serif);
  font-size:clamp(17px,2vw,20px);
  line-height:1.5;
  color:rgba(36,42,47,.7);
  max-width:52ch;
  margin-top:18px;
}

/* an inline control that reads as a link but is a real button, because it
   opens the preferences panel rather than navigating anywhere */
.legal-choices-link{
  appearance:none;
  -webkit-appearance:none;
  /* inline, not the button default of inline-block, so the words after it
     wrap normally instead of being pushed onto a line of their own */
  display:inline;
  background-color:transparent;
  border:none;
  padding:0;
  font:inherit;
  color:var(--burgundy);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.legal-choices-link:hover{color:var(--ink)}

/* "Optional" sits inside the label so the form reads honestly at a glance */
.field-opt{
  margin-left:8px;
  font-size:9.5px;
  letter-spacing:.16em;
  color:rgba(36,42,47,.42);
}