/* The Good Room — temporary landing page | 2026 */
:root {
  --paper: #efeee8;
  --ink: #282924;
  --muted: #77736c;
  --gold: #a6814c;
  --display: "GFS Didot", "Bodoni 72", "Didot", "Times New Roman", Georgia, serif;
  --sans: "DejaVu Sans Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --margin: clamp(25px, 4.1vw, 76px);
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--display); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.landing { min-height: 100svh; display: grid; grid-template-columns: 52.6% 47.4%; }
.landing-content { padding: 34px var(--margin) 51px; min-height: 100svh; display: flex; flex-direction: column; }
.brand { font-family: var(--sans); display: inline-flex; align-items: center; gap: 14px; width: max-content; font-size: 16px; line-height: 1; font-weight: 700; letter-spacing: -.055em; }
.brand-arrow { color: var(--gold); font-size: 23px; font-weight: 400; line-height: .8; transform: translateY(-1px); }
.eyebrow { font-family: var(--sans); font-size: 10px; font-weight: 400; letter-spacing: .23em; text-transform: uppercase; line-height: 2.1; color: var(--muted); margin: 62px 0 0; }
.identity { margin: auto 0; padding: 20px 0 14px; }
h1 { font-family: var(--display); font-size: clamp(78px, 8.2vw, 146px); letter-spacing: -.056em; line-height: .99; font-weight: 400; margin: 0; white-space: nowrap; }
h1 em { display: block; font-style: italic; letter-spacing: -.075em; }
.tagline { font-size: clamp(19px, 2.04vw, 32px); letter-spacing: -.035em; line-height: 1.43; margin: 27px 0 0; white-space: nowrap; }
.landing-details { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 26px 20px; }
.detail-lines { margin: 0; font-family: var(--sans); font-size: 10px; font-weight: 400; letter-spacing: .20em; text-transform: uppercase; line-height: 2; }
.hours { margin-top: 17px; }
.subscribe-details { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 1px; }
.contact-email { font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: -.02em; line-height: 1.35; margin: 0; text-transform: none; overflow-wrap: anywhere; }
.subscribe-link { display: inline-flex; gap: 12px; align-items: baseline; padding-bottom: 3px; border-bottom: 1px solid var(--gold); font-family: var(--sans); font-size: 10px; line-height: 1.5; font-weight: 600; text-transform: uppercase; letter-spacing: .10em; text-decoration: none; }
.subscribe-link span { color: var(--gold); font-size: 16px; line-height: 1; }
.subscribe-link:hover { border-bottom-color: var(--ink); }
.landing-image { margin: 0; min-height: 100svh; min-width: 0; background: #d2d0c9; overflow: hidden; }
.landing-image img { display: block; height: 100%; width: 100%; min-height: 100svh; object-fit: cover; object-position: 50% 48%; filter: grayscale(.25); }
@media (max-width: 1380px) {
  .landing-details { flex-direction: column; align-items: flex-start; gap: 17px; }
  .subscribe-details { gap: 7px; }
  .eyebrow { margin-top: 52px; }
}
@media (max-width: 1100px) {
  .landing { grid-template-columns: 54% 46%; }
  h1 { font-size: clamp(65px, 7.5vw, 101px); }
  .tagline { font-size: clamp(17px, 1.95vw, 25px); white-space: normal; }
  .landing-content { padding-bottom: 36px; }
}
@media (max-width: 700px) {
  .landing { display: flex; flex-direction: column; }
  .landing-content { min-height: 76svh; padding: 25px 25px 34px; }
  .brand { font-size: 14px; }
  .brand-arrow { font-size: 19px; }
  .eyebrow { font-size: 9px; letter-spacing: .17em; margin-top: 43px; }
  .identity { margin: auto 0; padding: 56px 0; }
  h1 { font-size: clamp(63px, 12vw, 94px); }
  .tagline { font-size: clamp(16px, 4.2vw, 23px); line-height: 1.55; margin-top: 21px; }
  .detail-lines { font-size: 9px; letter-spacing: .17em; }
  .landing-details { gap: 23px; }
  .contact-email { font-size: 12px; }
  .subscribe-link { font-size: 10px; }
  .landing-image { min-height: 0; height: 43svh; flex-shrink: 0; }
  .landing-image img { min-height: 0; height: 100%; object-position: 50% 45%; }
}
@media (max-width: 370px) { h1 { font-size: 58px; } .identity { padding: 40px 0; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Keep the landing page fitted to the visible browser viewport. */
@media (min-width: 701px) {
  html, body { height: 100%; overflow-y: auto; }
  .landing { height: 100vh; height: 100dvh; min-height: 0; }
  .landing-content {
    height: 100%; min-height: 0;
    padding-top: clamp(18px, 3.3vh, 34px);
    padding-bottom: clamp(20px, 4vh, 51px);
  }
  .landing-image { height: 100%; min-height: 0; }
  .landing-image img { height: 100%; min-height: 0; }
  .eyebrow { margin-top: clamp(22px, 4.4vh, 62px); }
  .identity { min-height: 0; padding-top: 10px; padding-bottom: 8px; }
  h1 { font-size: clamp(58px, min(8.2vw, 12vh), 146px); }
  .tagline { margin-top: clamp(12px, 2vh, 27px); }
}
@media (min-width: 1101px) and (max-width: 1380px) {
  .landing-details { flex-direction: row; align-items: flex-end; gap: 12px; }
  .visit-details { flex: 0 1 auto; }
  .subscribe-details { flex: 0 1 auto; }
  .detail-lines { letter-spacing: .13em; }
}
/* On phones, let the page flow naturally so the whole image can be seen. */
@media (max-width: 700px) {
  html, body { height: auto; overflow-y: auto; }
  .landing {
    height: auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  .landing-content {
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
    padding-top: 25px;
    padding-bottom: 28px;
  }
  .eyebrow { margin-top: 28px; line-height: 1.9; }
  .identity { margin: 0; min-height: 0; padding: 42px 0 32px; }
  h1 { font-size: clamp(58px, 15vw, 82px); white-space: normal; }
  .tagline { margin-top: 16px; white-space: normal; }
  .landing-details { gap: 18px; }
  .detail-lines { line-height: 1.82; }
  .hours { margin-top: 10px; }
  .subscribe-details { gap: 8px; }
  .landing-image {
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
    background: #d7d5ce;
  }
  .landing-image img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
    object-position: center center;
  }
}
@media (max-width: 370px) {
  .identity { padding: 34px 0 26px; }
  .tagline { font-size: 15px; }
}
/* Never crop content on unusually short desktop screens or with text zoom. */
@media (min-width: 701px) and (max-height: 525px) {
  html, body { height: auto; overflow-y: auto; }
  .landing { height: auto; min-height: 100dvh; }
  .landing-content { height: auto; min-height: 100dvh; }
  .landing-image { height: 150px; min-height: 150px; }
}

.no-script-note { position: fixed; bottom: 1rem; right: 1rem; padding: .5rem .75rem; background: var(--paper); font-family: var(--sans); font-size: 12px; }


/* The Good Room's official opening announcement. */
.opening-date {
  margin: 0 0 13px;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .17em;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .opening-date { font-size: 9px; margin-bottom: 8px; letter-spacing: .14em; }
}

/* Version 6: a short, wide phone is not a desktop monitor.
   Keep the editorial split-screen in landscape, but allow vertical scrolling
   and keep the photograph full-height rather than collapsing it to 150px. */
@media (min-width: 701px) and (max-width: 1100px) and (max-height: 600px) and (orientation: landscape) {
  html, body { height: auto; overflow-y: auto; }
  .landing {
    display: block;
    height: auto;
    min-height: 100svh;
  }
  .landing-content {
    width: 56%;
    height: auto;
    min-height: max(100svh, 610px);
    padding: 20px clamp(23px, 3vw, 34px) 28px;
  }
  .brand { font-size: 14px; }
  .brand-arrow { font-size: 19px; }
  .eyebrow {
    margin-top: 27px;
    font-size: 9px;
    line-height: 1.85;
    letter-spacing: .17em;
  }
  .identity {
    margin: 30px 0 33px;
    padding: 0;
  }
  h1 {
    font-size: clamp(58px, 8.4vw, 88px);
    line-height: .99;
    white-space: normal;
  }
  .tagline {
    margin-top: 15px;
    max-width: 400px;
    font-size: clamp(16px, 2.1vw, 21px);
    line-height: 1.35;
    white-space: normal;
  }
  .landing-details {
    margin-top: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .detail-lines { font-size: 9px; line-height: 1.8; letter-spacing: .14em; }
  .hours { margin-top: 11px; }
  .opening-date { margin-bottom: 9px; }
  .subscribe-details { gap: 6px; }
  .landing-image {
    position: fixed;
    top: 0;
    right: 0;
    width: 44%;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }
  .landing-image img {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: 50% 48%;
  }
}