/* iOS: without this, Safari inflates tiny/hidden text (ex. the font-size:0 wordmark
   trick), which opened a visible gap inside "the First Look" on real iPhones. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Editorial visual layer for generated venue and city SEO pages. */

:root {
  --seo-page: #FAFAF8;
  --seo-cream: #F8F4EC;
  --seo-ink: #2C2C2C;
  --seo-body: #504A44;
  --seo-muted: #8B8178;
  --seo-gold: #8B7355;
  --seo-line: #E8E0D6;
}

body.seo-venue,
body.seo-city {
  display: grid;
  grid-template-columns: 166px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--seo-page);
}

body.seo-venue > header,
body.seo-city > header {
  position: sticky;
  top: 0;
  align-self: start;
  grid-column: 1;
  grid-row: 1 / span 4;
  width: auto;
  height: 100vh;
  padding: 52px 22px 30px;
  border: 0;
  border-right: 1px solid var(--seo-line);
  background: var(--seo-page);
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 40px;
}

body.seo-venue .logo-text,
body.seo-city .logo-text {
  display: block;
  width: max-content;
  max-width: 112px;
  color: var(--seo-ink);
  font-family: 'Cormorant Garamond', serif;
  font-size: 0;
  font-weight: 500;
  line-height: .9;
}

body.seo-venue .logo-text::before,
body.seo-city .logo-text::before {
  content: "the";
  display: block;
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
}

body.seo-venue .logo-text::after,
body.seo-city .logo-text::after {
  content: "First Look";
  display: block;
  font-size: 27px;
  font-weight: 500;
  white-space: nowrap;
}

body.seo-venue .logo-tagline { display: none; }

.seo-rail-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.seo-rail-nav a {
  color: var(--seo-body);
  font-size: 13px;
  line-height: 1.35;
}

.seo-rail-nav a:hover { color: var(--seo-gold); }

body.seo-city .nav-map {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--seo-gold);
  line-height: 1.45;
}

body.seo-venue > .crumb {
  grid-column: 2;
  width: 100%;
  max-width: 1120px;
  margin: 0;
  padding: 34px clamp(34px, 6vw, 82px) 0;
}

body.seo-venue > .page,
body.seo-venue > .spread,
body.seo-city > .wrap {
  grid-column: 2;
  width: 100%;
  max-width: 1120px;
  margin: 0;
  padding: 38px clamp(34px, 6vw, 82px) 96px;
}

body.seo-venue > footer,
body.seo-city > footer {
  grid-column: 2;
  padding: 30px clamp(34px, 6vw, 82px);
  border: 0;
  background: var(--seo-cream);
  text-align: left;
}

/* Venue pages */
body.seo-venue h1 {
  max-width: 880px;
  font-size: clamp(48px, 5vw, 70px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.035em;
}

body.seo-venue .page .photo {
  height: 360px;
  border-radius: 12px;
}

body.seo-venue .facts {
  gap: 26px;
  margin: 34px 0 18px;
}

body.seo-venue .fact {
  padding-top: 0;
  border: 0;
}

body.seo-venue .fact .fl { font-size: 11.5px; }
body.seo-venue .fact .fv { font-size: 29px; font-weight: 500; }
body.seo-venue .fact .fs { font-size: 13px; }
body.seo-venue .desc,
body.seo-venue .lede,
body.seo-venue .stand { font-size: 15.5px; line-height: 1.7; }

body.seo-venue .spread {
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: clamp(38px, 5vw, 70px);
}

body.seo-venue .folio-l {
  padding-right: 0;
  border: 0;
}

body.seo-venue .folio-l .photo { height: 310px; border-radius: 12px; }
body.seo-venue .vname { font-size: 40px; font-weight: 500; }
body.seo-venue .vloc { font-size: 14px; }
body.seo-venue .ql { border: 0; }
body.seo-venue .ql .qr { padding: 8px 0; border: 0; font-size: 13px; }
body.seo-venue .fh { font-size: 48px; font-weight: 500; }

body.seo-venue .unlock {
  padding: 30px 32px;
  border: 0;
  border-radius: 10px;
  background: var(--seo-cream);
}

body.seo-venue .unlock .uh { font-size: 34px; font-weight: 500; }
body.seo-venue .unlock .us { font-size: 15px; line-height: 1.65; }
body.seo-venue .unlock .uq { border: 0; }
body.seo-venue .unlock .uq .quote { border: 0; }

body.seo-venue .transparent-callout {
  padding: 18px 20px;
  border: 0;
  border-radius: 8px;
}

body.seo-venue .say {
  padding-top: 0;
  border: 0;
}

body.seo-venue .tgrid { gap: 20px; }
body.seo-venue .tgrid .tq,
body.seo-venue .tgrid .tq:nth-child(2),
body.seo-venue .tq {
  padding: 18px;
  border: 0;
  border-radius: 8px;
  background: #FFFFFF;
  font-size: 17px;
  box-shadow: 0 8px 24px rgba(85, 65, 40, .045);
}

/* City pages */
body.seo-city > .wrap { padding-top: 62px; }

body.seo-city h1 {
  max-width: 900px;
  margin: 10px 0 26px;
  font-size: clamp(48px, 5vw, 70px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.035em;
}

body.seo-city .cityhero {
  width: min(920px, 100%);
  height: 380px;
  margin: 0 0 30px;
  border-radius: 12px;
}

body.seo-city .wrap > p { max-width: 760px; font-size: 17px; line-height: 1.72; }

body.seo-city .stats {
  width: min(920px, 100%);
  gap: 28px;
  margin: 30px 0 34px;
}

body.seo-city .stat {
  padding: 4px 0 10px;
  border: 0;
  background: transparent;
  text-align: left;
}

body.seo-city .stat .v { font-size: 40px; font-weight: 500; }
body.seo-city .stat .l { font-size: 13px; line-height: 1.45; }
body.seo-city .vlist-basis { max-width: 760px; font-size: 13px; }

body.seo-city .vlist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: min(920px, 100%);
  margin-top: 18px;
}

body.seo-city .vrow {
  min-height: 74px;
  margin: 0;
  padding: 16px 18px;
  border: 0;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 8px 22px rgba(85, 65, 40, .045);
}

body.seo-city .vrow:hover {
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(85, 65, 40, .09);
}

body.seo-city .vname { font-size: 15px; }
body.seo-city .vprice { font-size: 19px; font-weight: 500; }

body.seo-city .ctabox {
  width: min(920px, 100%);
  margin-top: 38px;
  padding: 40px 36px;
  border: 0;
  border-radius: 10px;
}

body.seo-city .ctabox h3 { font-size: 36px; font-weight: 500; }
body.seo-city .ctabox p { font-size: 15.5px; }
body.seo-city .say { padding-top: 0; border: 0; }
body.seo-city .stand { font-size: 15px; }

@media (max-width: 900px) {
  body.seo-venue .spread { grid-template-columns: 1fr; }
  body.seo-venue .folio-l { padding-bottom: 10px; border: 0; }
  body.seo-venue .tgrid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  body.seo-venue,
  body.seo-city { display: block; }

  body.seo-venue > header,
  body.seo-city > header {
    position: static;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 16px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--seo-line);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .seo-rail-nav { display: none; }
  body.seo-venue .logo-text,
  body.seo-city .logo-text { max-width: none; }
  body.seo-venue .logo-text::before,
  body.seo-city .logo-text::before {
    display: inline;
    margin-right: 5px;
    font-size: 19px;
  }
  body.seo-venue .logo-text::after,
  body.seo-city .logo-text::after { display: inline; font-size: 23px; }

  body.seo-venue > .crumb { padding: 24px 20px 0; }
  body.seo-venue > .page,
  body.seo-venue > .spread,
  body.seo-city > .wrap { padding: 34px 20px 72px; }
  body.seo-venue > footer,
  body.seo-city > footer { padding: 28px 20px; }
  body.seo-venue h1,
  body.seo-city h1 { font-size: 42px; }
  body.seo-venue .page .photo,
  body.seo-city .cityhero { height: 260px; }
  body.seo-city .stats { grid-template-columns: 1fr 1fr; }
  body.seo-city .vlist { grid-template-columns: 1fr; }
}

@media (max-width: 440px) {
  body.seo-city .stats { grid-template-columns: 1fr; }
  body.seo-city .vrow { align-items: flex-start; }
}