#gbm-living-hero, #gbm-living-hero * { all: revert; box-sizing: border-box; }
@font-face {
  font-family: Display;
  src: url("/assets/living-hero-display.c61121326019.woff2") format('woff2');
  font-display: swap;
}
@font-face {
  font-family: Sans;
  src: url("/assets/living-hero-sans.55414fb29b24.woff2") format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
#gbm-living-hero {
  --ink: #07110d;
  --bone: #ede4d0;
  --brass: #c5a56b;
  --hair: rgba(237, 228, 208, .23);
  --gutter: clamp(24px, 5.2vw, 90px);
  display: block;
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font: 400 14px/1.6 Sans, Arial, sans-serif;
}
#gbm-living-hero * { box-sizing: border-box; }
#gbm-living-hero a { color: inherit; text-decoration: none; }
#gbm-living-hero button { font: inherit; color: inherit; cursor: pointer; }
#gbm-living-hero button, #gbm-living-hero a { -webkit-tap-highlight-color: transparent; }
#gbm-living-hero a:focus-visible, #gbm-living-hero button:focus-visible { outline: 2px solid var(--brass); outline-offset: 5px; }
#gbm-living-hero button:disabled { cursor: default; opacity: .55; }
#gbm-living-hero [hidden] { display: none !important; }
#gbm-living-hero .hero { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100svh; background: var(--ink); }
#gbm-living-hero .private {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px var(--gutter) 0;
  color: #e3dccb;
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
#gbm-living-hero .private span:last-child { color: var(--brass); }
#gbm-living-hero .site-header {
  position: relative;
  z-index: 12;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding: 16px var(--gutter) 20px;
}
#gbm-living-hero .wordmark { display: flex; gap: 12px; align-items: center; font-size: 12px; letter-spacing: .5px; font-weight: 700; line-height: 1.12; }
#gbm-living-hero .wordmark .mark { font: italic 35px/1 Display, Georgia, serif; border: 1px solid #c5a56b88; border-radius: 50%; width: 42px; height: 42px; display: grid; place-items: center; color: var(--brass); }
#gbm-living-hero .site-nav { display: flex; gap: clamp(22px, 2.4vw, 42px); align-items: center; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; }
#gbm-living-hero .site-nav a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid transparent; }
#gbm-living-hero .site-nav a:hover { border-color: var(--brass); }
#gbm-living-hero .menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; background: none; border: 0; }
#gbm-living-hero .menu-toggle span { display: block; width: 22px; height: 1px; background: var(--bone); margin: 6px 0; }
#gbm-living-hero .menu-panel { display: none; position: absolute; z-index: 20; top: 100px; left: var(--gutter); right: var(--gutter); background: #102018fa; padding: 16px 24px; border: 1px solid var(--hair); }
#gbm-living-hero .menu-panel.open { display: flex; flex-direction: column; gap: 8px; }
#gbm-living-hero .menu-panel a { display: flex; align-items: center; min-height: 44px; font-size: 16px; }

/* Full-screen desktop cinema. The visual belongs to the entire hero, behind
   header and rails. The stage grows between protected content rows, so viewport
   filling also increases the artwork instead of adding a blank footer band.
   Full-frame contain keeps all three heads in tall desktop windows. */
#gbm-living-hero .hero-stage {
  position: static;
  display: grid;
  flex: 1 0 auto;
  grid-template-rows: 1fr auto;
  min-height: 500px;
}
#gbm-living-hero .visual { position: absolute; z-index: 0; inset: 0; overflow: hidden; background: var(--ink); }
/* Size the desktop media box to its rendered source ratio, so the bottom mask
   fades the actual image edge even when the viewport is taller than the film. */
#gbm-living-hero .poster, #gbm-living-hero .film { position: absolute; top: 0; right: 0; width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: right top; mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%); transition: opacity .85s; }
#gbm-living-hero .poster { opacity: 1; }
#gbm-living-hero .film { opacity: 0; }
#gbm-living-hero .film.playing { opacity: 1; }
#gbm-living-hero .visual:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #07110d 0%, #07110de8 20%, #07110d40 40%, transparent 58%), linear-gradient(0deg, #07110d 0%, #07110d99 11%, transparent 32%, transparent 88%, #07110d 100%);
  pointer-events: none;
}
#gbm-living-hero .light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at var(--lx,78%) var(--ly,25%), #c59a5614, transparent 48%); mix-blend-mode: screen; }
#gbm-living-hero .hero-copy {
  position: relative;
  z-index: 2;
  grid-row: 1;
  align-self: center;
  width: 34%;
  padding: 36px 0 36px var(--gutter);
}
#gbm-living-hero .eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--brass); }
#gbm-living-hero .eyebrow:before { content: ''; width: 28px; height: 1px; flex: none; background: var(--brass); }
#gbm-living-hero h1 { font: 400 clamp(46px, 4.3vw, 96px)/1.02 Display, Georgia, serif; letter-spacing: -1.5px; margin: 0; }
#gbm-living-hero .line { display: block; }
#gbm-living-hero .emphasis { color: var(--brass); font-style: italic; }
#gbm-living-hero .description { text-wrap: balance; max-width: 35ch; margin: 24px 0 22px; color: #e0dfd0; font-size: 16px; line-height: 1.7; }
#gbm-living-hero .primary { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 48px; padding: 14px 20px; background: var(--brass); color: var(--ink); border: 1px solid var(--brass); font-size: 13px; letter-spacing: .4px; transition: background .3s; }
#gbm-living-hero .primary:hover { background: #dfc28f; }
#gbm-living-hero .arrow { display: inline-block; position: relative; width: 40px; height: 1px; flex: none; background: var(--ink); }
#gbm-living-hero .arrow:after { content: ''; width: 7px; height: 7px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); position: absolute; right: 0; top: -3px; transform: rotate(45deg); }
#gbm-living-hero .subject-strip { position: relative; z-index: 2; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-left: 41%; margin-right: var(--gutter); padding: 12px 0 24px; text-align: center; }
#gbm-living-hero .subject { min-width: 0; font-size: 13px; line-height: 1.5; }
#gbm-living-hero .subject small { display: block; margin-bottom: 5px; color: #e6c58e; font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; }
#gbm-living-hero .subject a { border-bottom: 1px solid transparent; }
#gbm-living-hero .subject a:hover { border-color: var(--brass); }
#gbm-living-hero .motion-button { position: absolute; z-index: 4; right: var(--gutter); bottom: 240px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ede4d088; border-radius: 50%; background: #091410e8; font-size: 13px; }
#gbm-living-hero .motion-button:hover { border-color: var(--brass); }
#gbm-living-hero .hero-controls { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 var(--gutter); padding: 18px 0 8px; border-top: 1px solid var(--hair); }
#gbm-living-hero .chapters { display: grid; grid-template-columns: repeat(4, auto); gap: 30px; }
#gbm-living-hero .chapter { position: relative; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 0; border: 0; background: none; color: #c3c4b8; text-align: left; font-size: 12px; line-height: 1.5; }
#gbm-living-hero .chapter b { color: #9c9f91; font-size: 10px; font-weight: 400; }
#gbm-living-hero .chapter[aria-pressed=true] { color: var(--bone); }
#gbm-living-hero .chapter[aria-pressed=true]:before { content: ''; position: absolute; left: 0; top: -19px; height: 2px; width: 40px; background: var(--brass); }
#gbm-living-hero .chapter:hover { color: var(--brass); }
#gbm-living-hero .mode { font-size: 10px; letter-spacing: 1px; color: #b8bcad; text-transform: uppercase; }
#gbm-living-hero .hero-foot { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: start; gap: 24px; margin: 0 var(--gutter); padding: 12px 0 24px; color: #d8d6c7; font-size: 11px; line-height: 1.6; }
#gbm-living-hero .hero-foot a { display: inline-flex; align-items: center; min-height: 44px; flex: none; white-space: nowrap; }
#gbm-living-hero .hero-foot span { text-wrap: balance; }

/* Tablet: captions remain attached to the full-width artwork.
   The two-column editorial deck uses the available width at 800 and 640. */
/* Wide but tall windows need the same attached media/caption composition.
   A width-only breakpoint leaves the captions below a large empty stage. */
@media (max-width: 1099px), (min-width: 1100px) and (max-aspect-ratio: 6/5) {
  #gbm-living-hero .hero { display: block; min-height: 0; }
  #gbm-living-hero .hero-stage { position: relative; display: flex; flex-direction: column; min-height: 0; }
  #gbm-living-hero .visual { position: relative; inset: auto; flex: none; aspect-ratio: 16 / 9; width: 100%; }
  #gbm-living-hero .poster, #gbm-living-hero .film { inset: 0; width: 100%; height: 100%; max-height: none; object-position: center; mask-image: none; }
  #gbm-living-hero .visual:after { background: linear-gradient(0deg, #07110d 0%, transparent 18%, transparent 90%, #07110d22 100%); }
  #gbm-living-hero .subject-strip { margin: 0; padding: 10px var(--gutter) 28px; gap: 12px; }
  #gbm-living-hero .subject small { display: none; }
  #gbm-living-hero .hero-copy { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 48px); width: 100%; padding: 0 var(--gutter) 32px; }
  #gbm-living-hero .eyebrow { margin-bottom: 16px; font-size: 9px; letter-spacing: 1.1px; }
  #gbm-living-hero h1 { font-size: clamp(42px, 5.7vw, 68px); letter-spacing: -1px; }
  #gbm-living-hero .description { margin: 0 0 20px; max-width: 35ch; }
  #gbm-living-hero .primary { gap: 12px; padding: 13px 16px; }
  #gbm-living-hero .primary .arrow { width: 28px; }
  #gbm-living-hero .motion-button { bottom: 12px; right: var(--gutter); }
  #gbm-living-hero .chapters { gap: 20px; }
  #gbm-living-hero .playback { display: none; }
}
/* A short tablet can crop lower torso, never the head safe area. At least 42vw
   of image height remains, so the complete width and upper 74% stay visible.
   Phones retain their complete frame; profiles are unaffected. */
@media (min-width: 560px) and (max-width: 1099px) {
  #gbm-living-hero .visual { max-height: max(42vw, min(47svh, 460px)); }
  #gbm-living-hero .poster, #gbm-living-hero .film { object-fit: cover; object-position: center top; }
  #gbm-living-hero .visual:after { background: linear-gradient(0deg, #07110d 0%, transparent 10%, transparent 94%, #07110d33 100%); }
}
@media (max-width: 960px) {
  #gbm-living-hero .site-nav { display: none; }
  #gbm-living-hero .menu-toggle { display: block; }
  #gbm-living-hero .private span:last-child { display: none; }
  #gbm-living-hero .site-header { padding-top: 12px; padding-bottom: 16px; }
  #gbm-living-hero .chapters { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  #gbm-living-hero .chapter { align-items: baseline; }
}
@media (max-width: 760px) {
  #gbm-living-hero .chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; }
  #gbm-living-hero .chapter { align-items: center; }
  #gbm-living-hero .chapter[aria-pressed=true]:before { width: 24px; }
}
@media (max-width: 700px) {
  #gbm-living-hero { --gutter: 24px; }
  #gbm-living-hero .wordmark { font-size: 11px; }
  #gbm-living-hero .wordmark .mark { width: 36px; height: 36px; font-size: 30px; }
  #gbm-living-hero .subject { font-size: 12px; }
  #gbm-living-hero .hero-copy { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; }
  #gbm-living-hero .eyebrow { font-size: 8px; gap: 9px; letter-spacing: .9px; }
  #gbm-living-hero .eyebrow:before { width: 18px; }
  #gbm-living-hero .primary { font-size: 12px; padding: 12px 14px; }
  #gbm-living-hero .primary .arrow { width: 20px; }
}
/* Phones: a compact single-column reading order, with no viewport-height lock. */
@media (max-width: 559px) {
  #gbm-living-hero .hero-copy { display: block; padding-bottom: 28px; }
  #gbm-living-hero .hero-heading { margin-bottom: 20px; }
  #gbm-living-hero .subject-strip { padding: 10px var(--gutter) 26px; }
  #gbm-living-hero .eyebrow { margin-bottom: 16px; font-size: 9px; }
  #gbm-living-hero h1 { font-size: clamp(39px, 10.8vw, 60px); letter-spacing: -.8px; }
  #gbm-living-hero .description { max-width: 36ch; margin: 0 0 20px; font-size: 15px; }
  #gbm-living-hero .primary { font-size: 13px; padding: 14px 18px; gap: 24px; }
  #gbm-living-hero .primary .arrow { width: 36px; }
  #gbm-living-hero .hero-controls { padding-top: 16px; }
  #gbm-living-hero .chapter[aria-pressed=true]:before { top: -17px; }
  #gbm-living-hero .hero-foot { gap: 20px; }
  #gbm-living-hero .hero-foot span { max-width: 25ch; }
}
@media (max-width: 359px) {
  #gbm-living-hero { --gutter: 18px; }
  #gbm-living-hero .private { font-size: 9px; letter-spacing: 1px; }
  #gbm-living-hero .hero-foot { flex-direction: column; gap: 10px; }
  #gbm-living-hero .hero-foot span { max-width: none; }
  #gbm-living-hero .chapter { font-size: 11px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  #gbm-living-hero *, #gbm-living-hero *:before, #gbm-living-hero *:after { animation: none !important; transition: none !important; }
}