/*
Theme Name: SpeakEasyGuides Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.5.1.1791635375
Updated: 2026-10-10 08:29:35

*/

/* ==========================================================================
   SpeakEasyGuides — production homepage stylesheet
   Consolidated from the approved reference cascade
   (style.css -> variants.css -> entrance.css -> home.css) into one
   maintainable file. Composition is equivalent; the cascade is not.

   Approved visual contract (docs: HOMEPAGE-ACCEPTANCE.md):
     black #080808 · gold #d8b56a · warm white #f7f5ef · muted #aaa8a1
     Italiana display · DM Sans body · Georgia italic accents
     No green or red design accents.
   ========================================================================== */

:root{
  --black:#080808;
  --char:#10100f;
  --char-2:#14120d;
  --gold:#d8b56a;
  --gold-soft:#e1c78d;
  --gold-deep:#a99978;
  --warm:#f7f5ef;
  --warm-dim:#d7d1c6;
  --muted:#aaa8a1;
  --rule:rgba(255,255,255,.13);

  --display:'Italiana',Georgia,'Times New Roman',serif;
  --body:'DM Sans','Helvetica Neue',Arial,sans-serif;
  --accent:Georgia,'Times New Roman',serif;

  --pad:7%;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--black);color:var(--warm);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.intro-locked{overflow:hidden}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1.08}
p{margin:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.eyebrow{
  font-family:var(--body);font-size:9px;font-weight:500;
  letter-spacing:2.4px;text-transform:uppercase;color:var(--gold);margin:0;
}
.em{font-family:var(--accent);font-style:italic}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- buttons */
.gold-button{
  display:inline-flex;align-items:center;gap:28px;justify-content:space-between;
  background:var(--gold);color:#120f09;
  font-family:var(--body);font-size:11px;font-weight:500;
  letter-spacing:1.6px;text-transform:uppercase;
  padding:19px 26px;min-width:250px;border:0;cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.gold-button:hover{background:var(--gold-soft);transform:translateY(-2px)}
.outline{
  display:inline-block;border:1px solid rgba(216,181,106,.5);color:var(--gold);
  font-size:9px;letter-spacing:1.6px;text-transform:uppercase;
  padding:13px 18px;transition:border-color .3s,color .3s;
}
.outline:hover{border-color:var(--gold);color:var(--gold-soft)}
.text-link{
  font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid rgba(216,181,106,.4);padding-bottom:6px;
  transition:border-color .3s;align-self:flex-start;
}
.text-link:hover{border-color:var(--gold)}

/* ----------------------------------------------------------------- header */
.site-header{
  position:absolute;top:0;left:0;right:0;z-index:40;
  height:105px;padding:0 var(--pad);
  display:flex;align-items:center;gap:40px;
  background:linear-gradient(rgba(0,0,0,.8),transparent);
}
.brand{font-family:var(--display);font-size:27px;letter-spacing:.5px;line-height:1}
.brand span{
  display:block;font-family:var(--body);font-size:6px;letter-spacing:2px;
  color:var(--gold-deep);margin-top:11px;text-transform:uppercase;
}
.site-nav{display:flex;gap:34px;margin-left:auto}
.site-nav a{
  font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--warm-dim);
  transition:color .3s;
}
.site-nav a:hover{color:var(--gold)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--rule);
  color:var(--warm);padding:11px 14px;font-size:9px;letter-spacing:1.6px;
  text-transform:uppercase;cursor:pointer;font-family:var(--body)}

/* --------------------------------------------------------------- entrance */
.entrance{
  position:fixed;inset:0;z-index:100;background:var(--black);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.entrance[hidden]{display:none}
.photo-stage{position:absolute;inset:0}
.entrance-photo,.closed-establishing{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.closed-establishing{z-index:2;transition:opacity .6s linear}
.entrance-photo{z-index:1}
.scene-vignette{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse at 50% 48%,transparent 30%,rgba(0,0,0,.72) 100%);
}
.entrance-blackout{
  position:absolute;inset:0;z-index:5;background:#000;opacity:0;pointer-events:none;
  transition:opacity .55s linear;
}
.entrance-copy{
  position:relative;z-index:6;text-align:center;padding:0 24px;
  transition:opacity .7s var(--ease),transform .9s var(--ease);
}
.entrance-copy .kicker{
  font-family:var(--body);font-size:10px;letter-spacing:4px;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:26px;
}
.entrance-title{
  font-family:var(--display);font-size:clamp(46px,8.5vw,104px);line-height:1;
  letter-spacing:-1px;margin:0;color:var(--warm);
}
.entrance-title b{color:var(--gold);font-weight:400}
.entrance-line{width:52px;height:1px;background:var(--gold);margin:30px auto}
.entrance-sub{font-size:9px;letter-spacing:3.4px;text-transform:uppercase;color:var(--muted)}
.enter-button{
  margin-top:42px;background:transparent;border:1px solid rgba(216,181,106,.55);
  color:var(--gold);font-family:var(--body);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;padding:18px 36px;cursor:pointer;
  display:inline-flex;gap:18px;align-items:center;
  transition:background .4s,color .4s,border-color .4s;
}
.enter-button:hover{background:var(--gold);color:#120f09;border-color:var(--gold)}
.entrance-caption{
  position:absolute;bottom:46px;left:0;right:0;z-index:6;text-align:center;
  font-family:var(--accent);font-style:italic;font-size:14px;color:var(--gold-deep);
}
.skip-entrance{
  position:absolute;top:28px;right:var(--pad);z-index:7;background:none;border:0;
  color:var(--muted);font-family:var(--body);font-size:9px;letter-spacing:2px;
  text-transform:uppercase;cursor:pointer;padding:8px;
}
.skip-entrance:hover{color:var(--gold)}

/* door swing — the slab is a cropped layer of the closed photograph */
.photo-doorway{position:absolute;z-index:3;overflow:hidden;
  left:37.2%;right:36.3%;top:9.5%;bottom:11.5%;perspective:1400px}
.photo-door{
  position:absolute;inset:0;transform-origin:left center;
  background-image:url('https://speakeasyguides.com/wp-content/uploads/2026/10/seg-door-closed-v2.jpg');
  background-size:calc(100vw * 1.0) auto;
  transform:rotateY(0deg);
}
.entrance.is-opening .photo-door{
  animation:doorswing 2.6s var(--ease) forwards;
}
@keyframes doorswing{
  0%{transform:rotateY(0deg);filter:brightness(1)}
  100%{transform:rotateY(-86deg);filter:brightness(.45)}}
.entrance.is-pushing .photo-stage{animation:pushthrough 1.9s var(--ease) forwards}
@keyframes pushthrough{to{transform:scale(2.45)}}
.entrance.is-advancing .photo-stage{animation:approach 1.6s var(--ease) forwards}
@keyframes approach{to{transform:scale(1.18)}}

.replay-entrance{
  position:fixed;right:20px;bottom:18px;z-index:45;
  background:rgba(12,12,12,.72);backdrop-filter:blur(10px);
  border:1px solid var(--rule);color:var(--muted);
  font-family:var(--body);font-size:9px;letter-spacing:1.6px;text-transform:uppercase;
  padding:10px 14px;cursor:pointer;
}
.replay-entrance:hover{color:var(--gold);border-color:rgba(216,181,106,.45)}

/* ------------------------------------------------------------------- hero */
.hero, /* ------------------------------------------------------------------- hero */
#seg-hero{position:relative;height:95svh;min-height:810px;max-height:1100px;overflow:hidden}
.hero-image{
  position:absolute;inset:0;
  background:url('https://speakeasyguides.com/wp-content/uploads/2026/10/seg-door-interior-v2.jpg') 56% 46%/cover no-repeat;
  /* Deliberately NOT dimmed with a brightness filter. The photograph is
     already a low-key night interior; the directional shade below supplies
     type contrast on the left while the bar itself stays at full colour. */
  animation:cinema 28s ease-in-out infinite alternate;
}
@keyframes cinema{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.72) 34%,
                    rgba(0,0,0,.12) 62%,rgba(0,0,0,0) 78%),
    linear-gradient(0deg,var(--black),transparent 30%);
}
.film-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.045;
  background-image:radial-gradient(#fff 1px,transparent 1px);
  background-size:3px 3px;
}
.hero-copy, #seg-hero-copy{position:relative;z-index:5;padding:220px var(--pad) 120px;max-width:1180px}
.hero-copy .eyebrow, #seg-hero-copy .eyebrow{font-size:8px;letter-spacing:2.4px;max-width:420px;line-height:1.9}
.hero h1, #seg-hero h1{font-size:clamp(66px,7.6vw,122px);line-height:1;letter-spacing:-3px;margin:22px 0 0}
.hero h1 .em, #seg-hero h1 .em{font-size:.74em;display:block;color:var(--gold);letter-spacing:-2px;margin-top:4px}
.hero .answer, #seg-hero .answer{
  font-size:15px;line-height:1.95;color:var(--warm-dim);
  margin:34px 0 36px;max-width:620px;
  border-left:1px solid rgba(216,181,106,.45);padding-left:22px;
}
.hero-secondary{
  position:absolute;left:var(--pad);bottom:125px;z-index:5;
  font-size:10px;letter-spacing:1px;color:#c9bd9f;display:flex;gap:30px;align-items:center;
}
.hero-secondary span{font-size:19px}
.hero-bottom{
  position:absolute;left:var(--pad);right:var(--pad);bottom:34px;z-index:5;
  display:flex;gap:40px;flex-wrap:wrap;align-items:baseline;
  border-top:1px solid var(--rule);padding-top:22px;
  font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);
}
.hero-stats{display:flex;gap:34px;margin-left:auto;flex-wrap:wrap}
.hero-stats b{
  font-family:var(--display);font-size:21px;letter-spacing:0;color:var(--gold);
  font-weight:400;margin-right:8px;font-variant-numeric:tabular-nums;
}
.motion-toggle{
  position:absolute;right:var(--pad);bottom:90px;z-index:6;
  background:none;border:1px solid var(--rule);color:var(--muted);
  font-family:var(--body);font-size:9px;letter-spacing:1.6px;text-transform:uppercase;
  padding:10px 14px;cursor:pointer;
}
.motion-toggle:hover{color:var(--gold)}
body.motion-paused .hero-image,
body.motion-paused .ticker-track{animation-play-state:paused}

/* ----------------------------------------------------------------- finder */
.finder, /* ----------------------------------------------------------------- finder */
#seg-finder{
  background:var(--warm);color:#1a1813;padding:44px var(--pad);
  display:flex;align-items:flex-end;gap:55px;flex-wrap:wrap;
}
.finder .eyebrow, #seg-finder .eyebrow{color:#8a7540}
.finder h2, #seg-finder h2{font-size:32px;color:#14120d;margin-top:8px}
.finder form, #seg-finder form{display:flex;gap:20px;align-items:flex-end;margin-left:auto;flex-wrap:wrap}
.finder label, #seg-finder label{
  display:flex;flex-direction:column;gap:9px;
  font-size:8px;letter-spacing:2px;text-transform:uppercase;color:#7c7667;
}
.finder select, #seg-finder select{
  font-family:var(--body);font-size:13px;color:#14120d;background:transparent;
  border:0;border-bottom:1px solid #c9c2b2;padding:9px 30px 9px 0;min-width:215px;
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#8a7540 50%),
                   linear-gradient(135deg,#8a7540 50%,transparent 50%);
  background-position:calc(100% - 13px) 55%,calc(100% - 8px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.finder select:focus-visible, #seg-finder select:focus-visible{outline-offset:4px}

/* ----------------------------------------------------------------- ticker */
.ticker{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--black)}
.ticker-track{
  display:flex;gap:56px;white-space:nowrap;padding:23px 0;
  font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-deep);
  animation:marquee 46s linear infinite;width:max-content;
}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------------ cards */
.section{padding:100px var(--pad)}
.section-heading{display:flex;justify-content:space-between;gap:50px;
  align-items:flex-end;flex-wrap:wrap;margin-bottom:54px}
.section-heading h2{font-size:clamp(42px,5.2vw,68px);margin-top:12px}
.section-heading h2 .em{color:var(--gold)}
.section-heading>p{max-width:320px;font-size:13px;line-height:1.9;color:var(--muted)}

.cards{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:30px;align-items:start}
.card{display:flex;flex-direction:column}
.card:nth-child(2){padding-top:65px}
.card:nth-child(3){padding-top:130px}
.card-media{position:relative;height:360px;overflow:hidden;background:var(--char)}
.card:first-child .card-media{height:460px}
.card-media img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.6) brightness(.9);transition:filter .5s,transform .8s var(--ease)}
.card:hover .card-media img{filter:saturate(.85) brightness(1);transform:scale(1.04)}
.card-media::after{content:'';position:absolute;inset:0;
  box-shadow:inset 0 -40px 70px rgba(0,0,0,.25);pointer-events:none}
/* Dignified fallback until cleared photography exists for a venue. */
.card-media.no-photo{
  background:
    radial-gradient(ellipse at 50% 62%,rgba(216,181,106,.22),transparent 62%),
    linear-gradient(160deg,#17150f,#0b0b0a);
  display:flex;align-items:center;justify-content:center;
}
.card-media.no-photo span{
  font-size:8px;letter-spacing:2.4px;text-transform:uppercase;color:#6d6555;
  border:1px solid rgba(255,255,255,.07);padding:11px 15px;
}
.card-tags{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 10px;
  font-size:8px;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold-deep)}
.card-tags .nrhp{color:var(--gold)}
.card-city{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.card h3{font-size:clamp(26px,2.6vw,36px);margin:10px 0 12px}
.card p{font-size:13px;line-height:1.85;color:var(--muted)}
.card .text-link{margin-top:18px}
.empty-note{font-size:13px;color:var(--muted);line-height:1.9}

.provenance{
  font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:#6d6555;
  border:1px solid var(--rule);padding:11px 15px;display:inline-block;margin-bottom:34px;
}

/* ----------------------------------------------------------------- cities */
.cities, /* ----------------------------------------------------------------- cities */
#seg-cities{background:var(--char)}
.city-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 60px}
.city-tile{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:35px 0;border-top:1px solid var(--rule);color:inherit;font-family:inherit;
}
.city-tile .idx{font-size:8px;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold-deep)}
.city-tile strong{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(38px,4.6vw,58px);margin:22px 0 14px;transition:transform .4s var(--ease);
}
.city-tile:hover strong{transform:translateX(12px);color:var(--gold)}
.city-tile i{display:block;font-family:var(--accent);font-style:italic;
  font-size:14px;color:var(--muted)}
.city-tile .count{font-size:9px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold-deep);margin-top:9px;display:block}

/* ------------------------------------------------------------ night guide */
.night-guide, /* ------------------------------------------------------------ night guide */
#guide{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
  padding:110px var(--pad)}
.guide-photo, #seg-guide-photo{height:640px;position:relative;overflow:hidden}
.guide-photo img, #seg-guide-photo img{height:100%;width:100%;object-fit:cover;filter:saturate(.7)}
.guide-photo span, #seg-guide-photo span{position:absolute;bottom:25px;left:25px;right:25px;
  border-top:1px solid rgba(216,181,106,.5);padding-top:15px;
  font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-soft)}
.guide-copy h2, #seg-guide-copy h2{font-size:clamp(36px,4.3vw,54px);line-height:1.12}
.guide-copy h2 .em, #seg-guide-copy h2 .em{color:var(--gold)}
.guide-copy>p:not(.eyebrow), #seg-guide-copy>p:not(.eyebrow){font-size:13px;line-height:1.9;color:var(--muted);margin:25px 0}
.guide-steps{margin:30px 0 38px}
.guide-steps>div{display:flex;gap:25px;border-top:1px solid var(--rule);padding:18px 0}
.guide-steps .num{font-family:var(--accent);color:var(--gold);font-size:22px;font-style:italic}
.guide-steps p{font-size:12px;line-height:1.8;margin:0;color:var(--muted)}
.guide-steps b{display:block;font-weight:500;color:#eee9dc;margin-bottom:3px}

/* ------------------------------------------------------------- owner band */
.owners, /* ------------------------------------------------------------- owner band */
#owners{background:var(--char-2);padding:96px var(--pad)}
.owners-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center}
.owners h2, #owners h2{font-size:clamp(36px,4.4vw,56px);line-height:1.12}
.owners h2 .em, #owners h2 .em{color:var(--gold)}
.owners>.owners-inner>div>p, #owners>.owners-inner>div>p{font-size:13px;line-height:1.95;color:var(--muted);margin:24px 0}
.tiers{display:flex;flex-direction:column;gap:0}
.tier{display:flex;gap:24px;align-items:baseline;
  border-top:1px solid var(--rule);padding:20px 0}
.tier .price{font-family:var(--display);font-size:27px;color:var(--gold);
  min-width:118px;font-variant-numeric:tabular-nums}
.tier .what b{display:block;font-weight:500;color:#eee9dc;font-size:13px;margin-bottom:4px}
.tier .what p{font-size:12px;line-height:1.8;color:var(--muted);margin:0}
.owner-ctas{display:flex;gap:18px;flex-wrap:wrap;margin-top:34px;align-items:center}

/* ------------------------------------------------------------- manifesto */
.manifesto, /* ------------------------------------------------------------- manifesto */
#seg-manifesto{padding:100px var(--pad);background:var(--char-2);text-align:center}
.manifesto h2, #seg-manifesto h2{font-size:clamp(44px,6.6vw,85px);line-height:1.05;margin:18px 0 28px}
.manifesto h2 .kicker, #seg-manifesto h2 .kicker{display:block;font-family:var(--body);font-size:11px;
  letter-spacing:4px;text-transform:uppercase;color:var(--gold-deep);margin-bottom:22px}
.manifesto h2 .em, #seg-manifesto h2 .em{color:var(--gold)}
.manifesto>p, #seg-manifesto>p{font-size:14px;line-height:2;color:var(--muted);max-width:640px;margin:0 auto 30px}
.manifesto .text-link, #seg-manifesto .text-link{align-self:center}

/* --------------------------------------------------------------- journal */
.stories{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.stories article{border-top:1px solid var(--rule);padding-top:26px}
.stories span{font-size:8px;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold-deep)}
.stories h3{font-family:var(--display);font-size:clamp(26px,2.8vw,34px);margin:18px 0 14px;
  line-height:1.2}
.stories p{font-size:13px;line-height:1.85;color:var(--muted)}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--black);border-top:1px solid var(--rule);padding:84px var(--pad) 40px}
.site-footer .brand{font-size:30px}
.site-footer h2{font-size:clamp(34px,4.3vw,55px);margin:40px 0}
.site-footer h2 .em{color:var(--gold)}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;
  border-top:1px solid var(--rule);padding-top:38px;margin-top:20px}
.footer-cols h4{font-family:var(--body);font-size:9px;letter-spacing:2px;
  text-transform:uppercase;color:var(--warm);margin:0 0 18px;font-weight:500}
.footer-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.footer-cols a{font-size:11px;color:#c7b27c;transition:color .3s}
.footer-cols a:hover{color:var(--gold)}
.footer-bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--rule);margin-top:40px;padding-top:26px;
  font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);line-height:2}

/* ---------------------------------------------------------------- dialog */
dialog{
  border:1px solid var(--rule);background:var(--char);color:var(--warm);
  max-width:560px;width:calc(100% - 40px);padding:44px;
}
dialog::backdrop{background:rgba(0,0,0,.82)}
dialog h2{font-size:34px;margin:14px 0 18px}
dialog p{font-size:13px;line-height:1.9;color:var(--muted);margin-bottom:16px}
dialog .close{position:absolute;top:14px;right:18px;background:none;border:0;
  color:var(--muted);font-size:26px;cursor:pointer;line-height:1}

/* ------------------------------------------------------------ responsive */
@media(max-width:1050px){
  .site-nav{display:none}
  .nav-toggle{display:block}
  .site-nav.is-open{display:flex;position:absolute;top:105px;left:0;right:0;
    flex-direction:column;gap:0;background:var(--char);padding:8px var(--pad) 22px;
    border-top:1px solid var(--rule)}
  .site-nav.is-open a{padding:15px 0;border-bottom:1px solid var(--rule)}
  .finder{display:block}
  .finder form{margin-top:25px;margin-left:0}
  .cards{grid-template-columns:1fr 1fr}
  .card:nth-child(3){padding-top:0}
  .night-guide{gap:40px}
  .guide-photo{height:560px}
  .owners-inner{grid-template-columns:1fr;gap:44px}
  .hero-stats{margin-left:0;width:100%}
  .footer-cols{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .site-header{height:85px}
  .brand{font-size:21px}
  .brand span{font-size:5px;letter-spacing:1px}
  .outline{font-size:8px;padding:12px 10px}
  .site-nav.is-open{top:85px}
  .hero, #seg-hero{min-height:800px;height:100svh}
  .hero-copy, #seg-hero-copy{padding:200px var(--pad) 110px}
  .hero h1, #seg-hero h1{font-size:62px;letter-spacing:-2px}
  .hero h1 .em, #seg-hero h1 .em{font-size:.66em}
  .hero-copy .eyebrow, #seg-hero-copy .eyebrow{max-width:280px;font-size:7px}
  .hero .answer, #seg-hero .answer{font-size:13.5px;max-width:none}
  .hero-image{background-position:51% center}
  .hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.45)),
                        linear-gradient(0deg,var(--black),transparent 62%)}
  .hero-secondary{bottom:118px}
  .hero-bottom{bottom:30px;gap:16px}
  .hero-stats{gap:20px}
  .motion-toggle{bottom:112px;font-size:8px}
  .section{padding:66px var(--pad)}
  .finder, #seg-finder{padding:35px var(--pad)}
  .finder form, #seg-finder form{display:grid}
  .finder select, #seg-finder select{min-width:0;width:100%}
  .cards{grid-template-columns:1fr;gap:44px}
  .card:nth-child(n){padding-top:0}
  .card:nth-child(n) .card-media{height:320px}
  .city-grid{grid-template-columns:1fr}
  .night-guide, #guide{grid-template-columns:1fr;gap:40px;padding:66px var(--pad)}
  .guide-photo, #seg-guide-photo{height:420px}
  .stories{grid-template-columns:1fr;gap:40px}
  .manifesto, #seg-manifesto{padding:80px var(--pad)}
  .footer-cols{grid-template-columns:1fr;gap:30px}
  .tier{flex-direction:column;gap:8px}
  .tier .price{min-width:0}}


/* ==========================================================================
   WordPress / Elementor integration
   Elementor wraps every section and widget in its own containers, which add
   padding and bottom margins our layout does not want. These unwind that so
   the approved composition survives the trip into the builder.
   ========================================================================== */
.elementor-section.hero{position:relative;height:95svh;min-height:810px;max-height:1100px;overflow:hidden}
.elementor-section.hero > .elementor-container{height:100%;max-width:none}
.elementor-widget{margin-bottom:0 !important}
.elementor-widget-text-editor p{margin:0}
.elementor-section .elementor-container{max-width:none}
.hero .elementor-widget-heading h1, #seg-hero .elementor-widget-heading h1{font-size:clamp(66px,7.6vw,122px);line-height:1;letter-spacing:-3px;margin:22px 0 0}
.elementor-widget-button .elementor-button{all:unset}
.gold-button .elementor-button{display:inline-flex;align-items:center;gap:28px;
  justify-content:space-between;background:var(--gold);color:#120f09;font-family:var(--body);
  font-size:11px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;
  padding:19px 26px;min-width:250px;cursor:pointer}
.text-link .elementor-button{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold);border-bottom:1px solid rgba(216,181,106,.4);padding-bottom:6px}
.seg-css-holder{display:none !important}
/* Elementor's img{height:auto} wins specificity ties and collapses card photos
   to a strip. This is specific enough to beat it. */
.elementor-widget-image.guide-photo img,
.seg-home .card-media img{height:100% !important;width:100%;object-fit:cover}

/* ==========================================================================
   Elementor integration — minimal and targeted.

   Lessons from building this live:
   * Elementor 4.x saves `_css_classes` on sections but does not render it, so
     every section hook here is an `_element_id`.
   * `.elementor-widget-wrap` is flex-wrap:wrap by design. Overriding that
     globally broke column layout across the page; it is scoped to the hero.
   * Let Elementor size its own columns. A display:grid override collapsed the
     guide and owner columns to ~100px.
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */
section#seg-hero{
  position:relative;padding:0;overflow:hidden;
  height:95svh;min-height:810px;max-height:1100px;
  background:url('https://speakeasyguides.com/wp-content/uploads/2026/10/seg-door-interior-v2.jpg')
             56% 46%/cover no-repeat;
}
section#seg-hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.72) 34%,
                    rgba(0,0,0,.12) 62%,rgba(0,0,0,0) 78%),
    linear-gradient(0deg,#080808,transparent 30%);
}
section#seg-hero > .elementor-container{
  position:relative;z-index:2;max-width:100%;width:100%;height:100%;
}
#seg-hero-copy{width:100%;max-width:100%}
#seg-hero-copy > .elementor-widget-wrap{
  flex-wrap:nowrap;flex-direction:column;justify-content:center;align-items:flex-start;
  height:100%;width:100%;padding:0 7%;
}
#seg-hero-copy > .elementor-widget-wrap > .elementor-element{width:100%;max-width:760px}
#seg-hero h1{max-width:900px}
#seg-hero .answer{max-width:620px}
.hero-image,.hero-shade,.film-grain{display:none}
#seg-hero .hero-bottom,#seg-hero .hero-secondary,#seg-hero .motion-toggle{z-index:3}

/* --- section grounds and padding ----------------------------------------- */
section#seg-finder{background:var(--warm);padding:44px 7%}
section#seg-shortlist{padding:100px 7%}
section#seg-cities{background:var(--char);padding:100px 7%}
section#guide{padding:110px 7%}
section#owners{background:var(--char-2);padding:96px 7%}
section#seg-manifesto{background:var(--char-2);padding:100px 7%;text-align:center}
section#journal{padding:100px 7%}
section#seg-runtime{padding:0;height:0;overflow:hidden}
#seg-finder > .elementor-container,
#seg-shortlist > .elementor-container,
#seg-cities > .elementor-container,
#guide > .elementor-container,
#owners > .elementor-container,
#seg-manifesto > .elementor-container,
#journal > .elementor-container{max-width:100%;width:100%}

/* --- the two split sections: Elementor's own 50/50 columns, plus a gap ---- */
#guide > .elementor-container,
#owners > .elementor-container{gap:70px;align-items:center}
#seg-guide-photo .elementor-widget-image,
#seg-guide-photo .elementor-widget-image img{height:640px}
#seg-guide-photo img{width:100%;object-fit:cover;filter:saturate(.7)}

/* --- typography must take our palette, not Elementor's globals ----------- */
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3{color:var(--warm);font-family:var(--display);font-weight:400}
.elementor-widget-heading .em{color:var(--gold);font-family:var(--accent);font-style:italic}
#seg-hero h1 .em{display:block;font-size:.74em;margin-top:4px;letter-spacing:-2px}
#seg-manifesto h2 .kicker{display:block;font-family:var(--body);font-size:11px;
  letter-spacing:4px;text-transform:uppercase;color:var(--gold-deep);margin-bottom:22px}
.elementor-widget-text-editor,.elementor-widget-text-editor p{color:var(--muted)}
#seg-hero .answer{color:var(--warm-dim)}
.elementor-widget-text-editor .eyebrow{color:var(--gold)}
#seg-finder .elementor-widget-heading h2{color:#14120d}
#seg-finder .eyebrow{color:#8a7540}
.elementor-widget{margin-bottom:0}

/* --- buttons ------------------------------------------------------------- */
#seg-btn-gold-button .elementor-button{display:inline-flex;align-items:center;gap:28px;
  background:var(--gold);color:#120f09;font-family:var(--body);font-size:11px;
  font-weight:500;letter-spacing:1.6px;text-transform:uppercase;padding:19px 26px;
  min-width:250px;border:0;border-radius:0}
#seg-btn-text-link .elementor-button{background:transparent;color:var(--gold);
  font-size:10px;letter-spacing:1.6px;text-transform:uppercase;padding:0 0 6px;
  border-bottom:1px solid rgba(216,181,106,.4);border-radius:0}

@media(max-width:860px){
  section#seg-hero{height:100svh;min-height:760px}
  #seg-hero-copy > .elementor-widget-wrap{padding:0 7%}
  #seg-hero h1{font-size:62px;letter-spacing:-2px}
  #guide > .elementor-container,
  #owners > .elementor-container{flex-direction:column;gap:40px}
  #seg-guide-photo .elementor-widget-image,
  #seg-guide-photo .elementor-widget-image img{height:420px}
  section#guide,section#owners,section#seg-shortlist,
  section#seg-cities,section#seg-manifesto,section#journal{padding:66px 7%}
}

/* ==========================================================================
   The aliasing pass turned `.night-guide{display:grid}` into
   `#guide{display:grid}` — but #guide is now the SECTION, and Elementor's
   .elementor-container is its only child, so the container landed in a single
   grid track at 579px and both columns collapsed. Layout belongs on the
   container; the section is only a full-bleed band.
   ========================================================================== */
section#seg-hero,section#seg-finder,section#seg-shortlist,section#seg-cities,
section#guide,section#owners,section#seg-manifesto,section#journal,
section#seg-runtime{display:block !important}
section#seg-hero{position:relative}

#guide > .elementor-container,
#owners > .elementor-container{
  display:flex !important;gap:70px;align-items:center;width:100%;max-width:100%;
}
#guide > .elementor-container > .elementor-column,
#owners > .elementor-container > .elementor-column{
  flex:1 1 calc(50% - 35px);width:calc(50% - 35px);max-width:none;
}
#seg-finder > .elementor-container{display:flex !important;align-items:flex-end;
  gap:55px;flex-wrap:wrap;width:100%;max-width:100%}
#seg-shortlist > .elementor-container,
#seg-cities > .elementor-container,
#seg-manifesto > .elementor-container,
#journal > .elementor-container{display:block !important;width:100%;max-width:100%}
#seg-manifesto > .elementor-container{text-align:center}

@media(max-width:860px){
  #guide > .elementor-container,
  #owners > .elementor-container{flex-direction:column;gap:40px}
  #guide > .elementor-container > .elementor-column,
  #owners > .elementor-container > .elementor-column{flex:1 1 100%;width:100%}
}

/* The hero's bottom rule and stats are absolutely positioned at bottom:34px.
   The copy column needs bottom padding to clear them, or the CTA collides. */
#seg-hero-copy > .elementor-widget-wrap{padding:60px 7% 190px}
@media(max-width:860px){
  #seg-hero-copy > .elementor-widget-wrap{padding:40px 7% 210px}
}

/* Elementor gives widget wrappers position:relative, so the hero's absolutely
   positioned furniture (bottom rule, stats, motion toggle) anchored to the
   widget instead of the section and floated mid-hero. Making those wrappers
   static lets them resolve against #seg-hero. */
#seg-hero .elementor-widget-html,
#seg-hero .elementor-widget-html > .elementor-widget-container{position:static}
#seg-hero-copy > .elementor-widget-wrap{padding:60px 7% 150px}
@media(max-width:860px){
  #seg-hero-copy > .elementor-widget-wrap{padding:40px 7% 190px}
}

/* ==========================================================================
   Header, hero note and footer — matching the approved reference
   ========================================================================== */
section#seg-header{position:absolute;top:0;left:0;right:0;z-index:40;
  padding:0;background:transparent;height:0;overflow:visible}
section#seg-header > .elementor-container{max-width:100%;width:100%}
section#seg-header .elementor-widget-html,
section#seg-header .elementor-widget-html > .elementor-widget-container{position:static}
.site-header{height:105px;padding:0 7%;display:flex;align-items:center;gap:40px;
  background:linear-gradient(rgba(0,0,0,.8),transparent)}
.site-header .brand{font-family:var(--display);font-size:27px;letter-spacing:.5px;
  line-height:1;color:var(--warm);text-decoration:none}
.site-header .brand span{display:block;font-family:var(--body);font-size:6px;
  letter-spacing:2px;color:var(--gold-deep);margin-top:11px;text-transform:uppercase}
.site-nav{display:flex;gap:34px;margin-left:auto}
.site-nav a{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--warm-dim);text-decoration:none;transition:color .3s}
.site-nav a:hover{color:var(--gold)}
.site-header .outline{border:1px solid rgba(216,181,106,.5);color:var(--gold);
  font-size:9px;letter-spacing:1.6px;text-transform:uppercase;padding:13px 18px;
  text-decoration:none;white-space:nowrap}

/* the right-hand note over the photograph */
.hero-note{position:absolute;right:7%;bottom:175px;z-index:3;
  border-left:1px solid rgba(216,181,106,.5);padding-left:20px;text-align:left}
.hero-note span{font-size:7px;letter-spacing:2px;color:var(--gold);
  text-transform:uppercase}
.hero-note p{font-family:var(--display);font-size:27px;line-height:1.3;
  margin:13px 0 0;color:var(--warm)}

/* footer */
section#seg-footer{padding:0;background:var(--black)}
section#seg-footer > .elementor-container{max-width:100%;width:100%}
.site-footer{background:var(--black);border-top:1px solid var(--rule);
  padding:60px 7% 25px}
.site-footer .brand{font-family:var(--display);font-size:30px;color:var(--warm)}
.site-footer .brand span{display:block;font-family:var(--body);font-size:6px;
  letter-spacing:2px;color:var(--gold-deep);margin-top:9px;text-transform:uppercase}
.site-footer h2{font-family:var(--display);font-size:clamp(34px,4.3vw,55px);
  margin:40px 0;color:var(--warm);font-weight:400}
.site-footer h2 .em{color:var(--gold);font-family:var(--accent);font-style:italic}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;
  border-top:1px solid var(--rule);padding-top:38px;margin-top:20px}
.footer-cols h4{font-family:var(--body);font-size:9px;letter-spacing:2px;
  text-transform:uppercase;color:var(--warm);margin:0 0 18px;font-weight:500}
.footer-cols ul{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:12px}
.footer-cols a{font-size:11px;color:#c7b27c;text-decoration:none}
.footer-cols a:hover{color:var(--gold)}
.footer-bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--rule);margin-top:40px;padding-top:26px;
  font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);
  line-height:2}

@media(max-width:1050px){.site-nav{display:none}}
@media(max-width:680px){
  .hero-note{display:none}
  .site-header{height:85px}
  .site-header .brand{font-size:21px}
  .footer-cols{grid-template-columns:1fr 1fr;gap:28px}
}

/* The finder HTML widget carries its own <section class="finder"> with its own
   padding. Having it inside a padded Elementor section doubled the padding and
   forced the row to wrap (406px against the reference's 151px). The inner
   element owns the spacing; the Elementor section is just the band. */
section#seg-finder{padding:0}
section#seg-finder > .elementor-container{display:block !important}
.finder{padding:40px 7%;flex-wrap:nowrap;align-items:flex-end;gap:40px}
.finder > div{flex:0 0 auto}
.finder form{flex:1 1 auto;justify-content:flex-end;flex-wrap:nowrap}
.finder select{min-width:0;width:100%}
.finder label{flex:1 1 200px;max-width:260px}
.finder .gold-button{flex:0 0 auto;min-width:200px}
@media(max-width:1050px){
  .finder{flex-wrap:wrap;gap:24px}
  .finder form{flex-wrap:wrap;justify-content:flex-start}
}

/* ==========================================================================
   Elementor writes a per-page stylesheet (post-18.css) that loads AFTER the
   child theme and sets
     .elementor-widget-heading .elementor-heading-title{color:var(--e-global-color-primary)}
   which rendered every heading in Elementor's default blue. Same specificity,
   later in the cascade, so it wins. These rules target the same element with
   higher specificity.

   The proper long-term fix is to set Elementor's Global Colors to this palette
   in Site Settings; until that is done and verified compiling on this host,
   the child theme holds the palette.
   ========================================================================== */
.elementor .elementor-widget-heading .elementor-heading-title,
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title{
  color:var(--warm);font-family:var(--display);font-weight:400;
}
.elementor .elementor-widget-heading .elementor-heading-title .em{
  color:var(--gold);font-family:var(--accent);font-style:italic;
}
#seg-finder .elementor-widget-heading .elementor-heading-title{color:#14120d}
.elementor .elementor-widget-text-editor{color:var(--muted)}
.elementor #seg-hero .answer{color:var(--warm-dim)}

/* The WordPress admin bar overlaps a top-anchored header while logged in.
   Affects previews only, but it makes review confusing. */
body.admin-bar section#seg-header{top:32px}
@media screen and (max-width:782px){
  body.admin-bar section#seg-header{top:46px}
}
@media(max-width:680px){
  .site-header{padding:0 7%;gap:16px}
  .site-header .outline{font-size:8px;padding:11px 12px}
}

/* ==========================================================================
   Approved wordmark — approved-logo/logo-spec.json
   DM Sans 500 at 27px, -0.5px tracking, #f7f5ef on #080808, with the
   6px/2px tagline beneath. Replaces the Italiana setting used while the
   logo was still being decided; this is the heavier, approved mark.
   ========================================================================== */
.site-header .brand,
.site-footer .brand{
  font-family:var(--body);font-weight:500;font-size:27px;
  letter-spacing:-0.5px;line-height:1.1;color:var(--warm);
}
.site-header .brand span,
.site-footer .brand span{
  display:block;font-family:var(--body);font-weight:400;font-size:6px;
  letter-spacing:2px;line-height:1.4;color:var(--gold-deep);
  margin-top:11px;text-transform:uppercase;
}
.site-footer .brand{font-size:30px}
@media(max-width:680px){
  .site-header .brand{font-size:21px}
  .site-header .brand span{font-size:5px;letter-spacing:1.4px;margin-top:8px}
}

/* ==========================================================================
   Standing pages — about, policies, owner funnel
   Ivory reading surface, comfortable measure, dark chrome top and bottom.
   ========================================================================== */
section#seg-pagehero{background:var(--char);padding:170px 7% 70px;position:relative}
section#seg-pagehero > .elementor-container{max-width:100%;width:100%}
#seg-pagehero-copy > .elementor-widget-wrap{max-width:820px;flex-wrap:nowrap}
section#seg-pagehero .elementor-widget-heading h1{
  font-size:clamp(42px,5.4vw,76px);line-height:1.04;letter-spacing:-2px;
  margin:18px 0 0;color:var(--warm);max-width:16ch}
section#seg-pagehero .answer{font-size:17px;line-height:1.85;color:var(--warm-dim);
  border-left:1px solid rgba(216,181,106,.45);padding-left:22px;
  margin:30px 0 32px;max-width:66ch}
section#seg-pagehero .eyebrow{color:var(--gold)}

section#seg-article{background:var(--bone, #f7f5ef);padding:86px 7% 96px}
section#seg-article > .elementor-container{max-width:100%;width:100%}
#seg-article-col > .elementor-widget-wrap{max-width:720px;margin:0 auto;flex-wrap:nowrap}
section#seg-article .elementor-widget-heading h2{
  font-family:var(--display);font-size:clamp(28px,3.2vw,40px);line-height:1.15;
  color:#14120d;margin:56px 0 18px;font-weight:400}
section#seg-article .elementor-widget:first-child .elementor-heading-title{margin-top:0}
section#seg-article .elementor-widget-text-editor,
section#seg-article .elementor-widget-text-editor p{
  font-family:var(--body);font-size:17px;line-height:1.85;color:#39342c}
section#seg-article .elementor-widget-text-editor p + p{margin-top:20px}
section#seg-article strong{color:#14120d;font-weight:500}
section#seg-article a{color:var(--oxblood,#6E1F24);text-decoration:underline;
  text-decoration-color:rgba(110,31,36,.35);text-underline-offset:3px}
section#seg-article a:hover{text-decoration-color:currentColor}
section#seg-article ul.related{list-style:none;margin:22px 0;padding:0;
  display:flex;flex-direction:column;gap:12px}
section#seg-article ul.related li{font-size:16px;line-height:1.7;color:#39342c;
  border-top:1px solid #ddd5c6;padding-top:12px}
section#seg-article table.facts{width:100%;border-collapse:collapse;margin:24px 0;
  font-size:15.5px}
section#seg-article table.facts th,
section#seg-article table.facts td{text-align:left;padding:13px 14px;
  border-bottom:1px solid #e0d8c8;vertical-align:top;color:#39342c}
section#seg-article table.facts th{font-family:var(--body);font-size:11px;
  letter-spacing:1.4px;text-transform:uppercase;color:#7c7667;width:32%;font-weight:500}
section#seg-article table.facts tr:nth-child(odd) th,
section#seg-article table.facts tr:nth-child(odd) td{background:#efe9dc}
section#seg-article .tiers{margin:26px 0}
section#seg-article .tier{border-top:1px solid #ddd5c6;padding:22px 0;
  display:flex;gap:26px;align-items:baseline}
section#seg-article .tier .price{font-family:var(--display);font-size:28px;
  color:var(--oxblood,#6E1F24);min-width:120px}
section#seg-article .tier .what b{display:block;color:#14120d;font-weight:500;
  font-size:16px;margin-bottom:5px}
section#seg-article .tier .what p{font-size:15px;line-height:1.75;color:#5c564b;margin:0}
section#seg-article #seg-btn-text-link .elementor-button{color:var(--oxblood,#6E1F24);
  border-bottom-color:rgba(110,31,36,.4)}
section#seg-article .elementor-widget-button{margin-top:26px}

@media(max-width:680px){
  section#seg-pagehero{padding:130px 7% 50px}
  section#seg-article{padding:56px 7% 64px}
  section#seg-article .tier{flex-direction:column;gap:8px}
  section#seg-article .tier .price{min-width:0}
}

/* `.elementor-widget-wrap` defaults to row with flex-wrap:wrap, and its children
   are width:100% so they stack. Setting flex-wrap:nowrap WITHOUT a direction
   turns that into a single row — which put the page H1 and its answer block
   side by side and overflowed the viewport. Always pair the two. */
#seg-pagehero-copy > .elementor-widget-wrap,
#seg-article-col > .elementor-widget-wrap{
  flex-direction:column;flex-wrap:nowrap;align-items:stretch;
}
#seg-pagehero-copy > .elementor-widget-wrap > .elementor-element,
#seg-article-col > .elementor-widget-wrap > .elementor-element{width:100%}