/* ----------------------------------------------------------------------------
   Layout — landscape kiosk (WA65F 65", 1920 × 1080 design surface)

      ┌──────────────────────────────────────────────┐  ← HEADER (104 px),
      │ HEADER                                        │     spans both columns
      ├───────────────────────────────┬──────────────┤
      │                               │ Restaurants  │
      │                               │ Dining       │
      │   MAP CANVAS (~67% w)         │ Meetings     │  CATEGORY RAIL (640 px)
      │    pan / zoom / pins          │ In-House     │  scrollable, primary
      │    floating zoom controls     │ Wellness     │  tap zone.
      │                               │ Adventure    │
      │                               │ Rooms…       │
      └───────────────────────────────┴──────────────┘
   ----------------------------------------------------------------------------*/

/* ──────────────────────────────────────────────────────────────────────
   KIOSK STAGE — fluid landscape layout, designed at 1920 × 1080. There is
   no transform-scale: every size is in rem and the rem root scales with the
   viewport width (reset.css), so the stage simply fills the screen and the
   contents reflow/scale to fit. The stage is the containing block for the
   absolutely-positioned overlays (.attract, .poi-modal, .detail-view,
   .nav-circle) so `inset: 0` on those covers the full stage.
   ────────────────────────────────────────────────────────────────────── */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  overflow: hidden;
}
#kiosk-stage {
  /* Fills the viewport exactly. No transform-scale / letterbox — sizing is
     handled fluidly by the rem root (see reset.css), so the design fills any
     screen edge-to-edge. position:relative keeps it the containing block for
     the absolutely-positioned overlays (.attract, .poi-modal, .detail-view,
     .nav-circle). */
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--color-bg);
}

.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--w-rail);  /* map | category rail */
  grid-template-rows: var(--h-header) minmax(0, 1fr);
  grid-template-areas:
    "header header"
    "map    rail";
  height: 100%;            /* fills the 1920 × 1080 stage */
  width: 100%;
  background: var(--color-bg);
}
.header     { grid-area: header; }
.map-canvas { grid-area: map; }
.cat-grid   { grid-area: rail; }

/* ──────────────────────────────────────────────────────────────────────
   HEADER
   ────────────────────────────────────────────────────────────────────── */
.header {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--s-6);
  align-items: center;
  padding: 0 var(--s-7);
  background: var(--color-bg);
  z-index: 5;
}
.header::after {
  content: '';
  position: absolute;
  left: var(--s-7);
  right: var(--s-7);
  bottom: 0;
  height: 0.1rem;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-brand-gold) 30%,
    var(--color-brand-gold) 70%,
    transparent 100%
  );
  opacity: 0.5;
}
.header__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
  justify-self: start;
}
.header__wordmark .eyebrow {
  font-family: var(--font-label);
  font-size: 1.4rem;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-ink-soft);
  text-transform: uppercase;
}
.header__wordmark .title {
  font-family: var(--font-serif);
  font-size: 2.8rem;
  color: var(--color-brand);
  margin-top: var(--s-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.header__wordmark .subtitle {
  font-family: var(--font-label);
  font-size: 1.2rem;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-brand-gold);
  text-transform: uppercase;
  margin-top: 0.6rem;
}
.header__brand {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.header__logo {
  font-family: var(--font-serif);
  font-size: 5rem;
  color: var(--color-brand);
  letter-spacing: var(--ls-display);
  line-height: 1;
  padding-left: var(--ls-display);
}
.header__rule {
  width: 8rem;
  height: 0.1rem;
  background: var(--color-brand-gold);
  opacity: 0.7;
}
.header__resort {
  font-family: var(--font-label);
  font-size: 1.1rem;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-ink-soft);
  text-transform: uppercase;
}

/* ──────────────────────────────────────────────────────────────────────
   MAP CANVAS
   ────────────────────────────────────────────────────────────────────── */
.map-canvas {
  position: relative;
  overflow: hidden;
  touch-action: none;
  background:
    radial-gradient(ellipse at 50% 40%, var(--color-bg-warm) 0%, var(--color-bg-deep) 100%);
}
.map-stage {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
  contain: layout style paint;
}
.map-stage svg {
  width: 100%;
  height: 100%;
  display: block;
  /* Hotspot tap detection uses elementFromPoint() on pointer-up, so the SVG
   * itself must remain hit-testable even though the canvas owns the gesture. */
  pointer-events: auto;
}
.map-stage .basemap-image { pointer-events: none; }
.map-canvas::before,
.map-canvas::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2.4rem;
  pointer-events: none;
  z-index: 2;
}
.map-canvas::before { top: 0;   background: linear-gradient(180deg, rgba(0,0,0,0.05), transparent); }
.map-canvas::after  { bottom: 0; background: linear-gradient(0deg, rgba(0,0,0,0.05), transparent); }

.map-controls {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  z-index: 4;
}
.map-ctl {
  width: var(--tap-lg);
  height: var(--tap-lg);
  border-radius: var(--r-md);
  background: var(--ctl-bg);
  border: 0.1rem solid var(--ctl-border);
  box-shadow: var(--shadow-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 3.6rem;
  font-weight: 300;
  color: var(--ctl-ink);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out),
              background-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.map-ctl:active { transform: scale(0.94); }
.map-ctl svg { width: 3.2rem; height: 3.2rem; color: var(--ctl-ink); }
.map-ctl--recenter { font-size: 2.2rem; }

.map-hint {
  position: absolute;
  left: 50%;
  bottom: var(--s-5);
  transform: translateX(-50%);
  background: rgba(30, 58, 82, 0.88);
  color: #fff;
  padding: 1.2rem var(--s-5);
  border-radius: var(--r-pill);
  font-family: var(--font-label);
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
  z-index: 3;
  box-shadow: var(--shadow-2);
}
.map-hint.hidden { opacity: 0; transform: translate(-50%, 1.2rem); }

/* Subtle wash applied when a category filter is active. Kept gentle —
 * the user complained the strong wash hid the artwork; now the basemap
 * stays clearly visible and the matching pins themselves are what pop
 * (see .hotspot[data-filter-match] rules in components.css). */
.map-dim {
  position: absolute;
  inset: 0;
  background: rgba(15, 30, 50, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
  z-index: 1;
}
.app[data-filter-active="true"] .map-dim { opacity: 1; }

/* ──────────────────────────────────────────────────────────────────────
   CATEGORY RAIL — primary navigation, right-hand scrollable column.
   Each tile is a horizontal row (icon · label · count).
   ────────────────────────────────────────────────────────────────────── */
.cat-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--color-bg);
  border-left: 0.1rem solid var(--color-line);
}
.cat-tile {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  min-height: 9.6rem;
  flex: 0 0 auto;
  text-align: left;
  border-radius: var(--r-lg);
  background: var(--color-surface);
  border: 0.1rem solid var(--color-line);
  box-shadow: var(--shadow-1);
  font-family: var(--font-label);
  font-size: 1.8rem;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out);
  contain: layout style;
}
.cat-tile__icon {
  width: 6.4rem;
  height: 6.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cat-tint, rgba(184, 145, 73, 0.12));
  color: var(--cat-color, var(--color-brand-gold));
  flex-shrink: 0;
}
.cat-tile__icon svg { width: 3.6rem; height: 3.6rem; }
.cat-tile__label {
  line-height: 1.15;
  flex: 1 1 auto;
  text-align: left;
  font-size: 1.9rem;
}
.cat-tile__count {
  font-family: var(--font-sans);
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-ink-faint);
}
.cat-tile:active { transform: scale(0.97); }
.cat-tile[aria-pressed="true"] {
  background: var(--cat-color, var(--color-brand-gold));
  border-color: var(--cat-color, var(--color-brand-gold));
  color: #fff;
  box-shadow: var(--shadow-2);
}
.cat-tile[aria-pressed="true"] .cat-tile__icon {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.cat-tile[aria-pressed="true"] .cat-tile__count { color: rgba(255, 255, 255, 0.78); }

html[data-stage-mode="responsive"] .cat-tile {
  gap: clamp(0.8rem, 2vw, 1.2rem);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  min-height: clamp(10.4rem, 21vw, 15.6rem);
}

html[data-stage-mode="responsive"] .cat-tile__icon {
  width: clamp(4.2rem, 11vw, 6rem);
  height: clamp(4.2rem, 11vw, 6rem);
}

html[data-stage-mode="responsive"] .cat-tile__icon svg {
  width: clamp(2.4rem, 6vw, 3.4rem);
  height: clamp(2.4rem, 6vw, 3.4rem);
}

html[data-stage-mode="responsive"] .cat-tile__label {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
}

html[data-stage-mode="responsive"] .cat-tile__count {
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
}

/* Footer pad removed in the landscape layout — the two-column body fills
   the stage and there is no decorative bottom row. */

/* ──────────────────────────────────────────────────────────────────────
   ATTRACT SCREEN — Split Stage: promo media (left) + today's events (right).
   Tap anywhere → map view. Absolute (not fixed) inside #kiosk-stage.
   ────────────────────────────────────────────────────────────────────── */
.attract {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: row;
  color: #fff;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--t-slow) var(--ease-out),
    visibility 0s linear 0s;
}
.attract[data-open="false"] {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t-slow) var(--ease-out),
    visibility 0s linear var(--t-slow);
}

/* LEFT — promo stage (68%). Holds the carousel, brand fallback, and CTA. */
.attract__promo {
  position: relative;
  flex: 0 0 68%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #3A342E 0%, #1E2F43 52%, #1E3A52 100%);
}

/* Carousel fills the promo panel; object-fit: cover (set on slider media). */
.attract__carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;           /* app.js shows it once media mounts */
}
.attract__carousel,
.attract__carousel .slider,
.attract__carousel .slider__track,
.attract__carousel .slider__slide,
.attract__carousel .slider__media {
  width: 100%;
  height: 100%;
}
.attract__carousel .slider__media {
  object-fit: cover;       /* COVER — fill panel, crop overflow */
}
.attract__carousel::after {  /* legibility wash under the CTA */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(16, 22, 30, 0.22) 0%, rgba(14, 26, 40, 0.30) 60%, rgba(18, 39, 61, 0.42) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Brand fallback — centered; hidden when a promo is showing. */
.attract__brand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  text-align: center;
}
.attract:not(.is-no-promo) .attract__brand { display: none; }
.attract__mark {
  font-family: var(--font-serif);
  font-size: var(--attract-mark-size);
  letter-spacing: var(--ls-display);
  color: var(--color-brand-gold);
  line-height: 1;
  padding-left: var(--ls-display);
}
.attract__rule {
  width: 14rem; height: 0.1rem;
  background: var(--color-brand-gold);
  opacity: 0.8; margin-top: var(--s-3);
}
.attract__sub {
  font-family: var(--font-label);
  font-size: 1.8rem;
  letter-spacing: var(--ls-eyebrow);
  color: rgba(255, 255, 255, 0.78);
  text-transform: uppercase;
}

/* CTA — horizontally centered in the promo panel, vertically mid. */
.attract__cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  text-align: center;
  pointer-events: none;    /* the whole .attract handles the tap */
}
.attract__pulse {
  width: 6.4rem; height: 6.4rem;
  border-radius: 50%;
  border: 0.2rem solid var(--color-brand-gold);
  box-shadow: 0 0 0 0 rgba(216, 184, 120, 0.5);
  animation: attractPulse 2s infinite;
}
@keyframes attractPulse {
  70%  { box-shadow: 0 0 0 2.4rem rgba(216, 184, 120, 0); }
  100% { box-shadow: 0 0 0 0 rgba(216, 184, 120, 0); }
}
.attract__cta-sub {
  font-family: var(--font-label);
  font-size: 2.0rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0.2rem 1.4rem rgba(0, 0, 0, 0.8);
}

/* No-promo state: brand is the centered hero, so drop the CTA beneath it. */
.attract.is-no-promo .attract__cta {
  top: auto;
  bottom: 10%;
  transform: translateX(-50%);
}

/* RIGHT — events panel (32%). Solid (no blur) per Chrome 114 + 4 GB. */
.attract__events {
  flex: 0 0 32%;
  height: 100%;
  z-index: 4;
  background: #111A15;
  padding: 4.5rem 3.4rem 3rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.attract.is-no-events .attract__events { display: none; }
.attract.is-no-events .attract__promo  { flex-basis: 100%; }
.attract.is-no-promo  .attract__promo  { flex-basis: 62%; }
.attract.is-no-promo  .attract__events { flex-basis: 38%; }
/* Neither feed present → brand backdrop fills the whole stage (this combined
   selector outranks the is-no-promo 62% rule above). */
.attract.is-no-events.is-no-promo .attract__promo { flex-basis: 100%; }

.attract__events-title {
  font-family: var(--font-label);
  font-size: 1.7rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-brand-gold);
  margin: 0 0 2rem;
}
.attract__events-list {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.attract__event-row {
  padding: 1.4rem 0;
  border-bottom: 0.1rem solid rgba(216, 184, 120, 0.18);
  text-align: left;
}
.attract__event-row:last-child { border-bottom: none; }
.attract__event-time {
  font-family: var(--font-label);
  font-size: 1.9rem;
  letter-spacing: 0.03em;
  color: var(--color-brand-gold);
}
.attract__event-name {
  font-family: var(--font-serif);
  font-size: 3.0rem;        /* big, foyer-legible */
  line-height: 1.08;
  margin: 0.3rem 0 0;
}
.attract__event-loc {
  font-family: var(--font-sans);
  font-size: 1.8rem;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 0.3rem;
}
.attract__events-pager {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  padding-top: 1.6rem;
}
.attract__events-pager .dot {
  width: 0.9rem; height: 0.9rem;
  border-radius: 50%;
  background: rgba(216, 184, 120, 0.35);
}
.attract__events-pager .dot.is-on { background: var(--color-brand-gold); }

html[data-stage-mode="responsive"] {
  --h-header: clamp(8.8rem, 11vw, 11rem);
  --h-footer: clamp(3.2rem, 6vh, 8.8rem);
  --nav-gutter: clamp(2.8rem, 5vw, 8.4rem);
  --attract-mark-size: clamp(5.8rem, 13vw, 8.4rem);
  --attract-title-size: clamp(4.2rem, 10vw, 7.2rem);
  --attract-sub-size: clamp(1.6rem, 3.8vw, 2.1rem);
}

html[data-stage-mode="responsive"] .app {
  /* Same landscape two-column shape, but a fluid rail so it stays sane on
   * laptop/preview widths instead of eating half a narrow screen. */
  grid-template-columns: minmax(0, 1fr) clamp(26rem, 32vw, 56rem);
  grid-template-rows: var(--h-header) minmax(0, 1fr);
}

html[data-stage-mode="responsive"] .header {
  padding: 0 clamp(1.8rem, 5vw, 3.2rem);
}

html[data-stage-mode="responsive"] .header::after {
  left: clamp(1.8rem, 5vw, 3.2rem);
  right: clamp(1.8rem, 5vw, 3.2rem);
}

html[data-stage-mode="responsive"] .header__wordmark .title {
  font-size: clamp(1.8rem, 4.2vw, 2.8rem);
}

html[data-stage-mode="responsive"] .header__logo {
  font-size: clamp(3.4rem, 8vw, 5rem);
}

html[data-stage-mode="responsive"] .map-controls {
  top: clamp(1.2rem, 3vw, 2rem);
  right: clamp(1.2rem, 3vw, 2rem);
}

html[data-stage-mode="responsive"] .map-ctl {
  width: clamp(5.6rem, 14vw, 8.8rem);
  height: clamp(5.6rem, 14vw, 8.8rem);
  font-size: clamp(2.4rem, 6vw, 3.4rem);
}

html[data-stage-mode="responsive"] .map-ctl svg {
  width: clamp(2.2rem, 6vw, 3rem);
  height: clamp(2.2rem, 6vw, 3rem);
}

html[data-stage-mode="responsive"] .map-hint {
  width: min(calc(100% - 3.2rem), 42rem);
  bottom: clamp(1.2rem, 3.5vh, 2.4rem);
  padding: 1rem 1.8rem;
  font-size: clamp(1.1rem, 2.7vw, 1.5rem);
  text-align: center;
}

html[data-stage-mode="responsive"] .cat-grid {
  gap: clamp(1rem, 2.5vw, 1.6rem);
  padding: clamp(1.4rem, 3.2vw, 2.2rem) clamp(1.4rem, 3.2vw, 2.2rem) 0;
}

@media (max-width: 560px), (max-height: 760px) {
  html[data-stage-mode="responsive"] .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ──────────────────────────────────────────────────────────────────────
   SIDE-MOUNTED NAV CIRCLES (Lands End pattern)
   Vertical centre = adult shoulder height. Both circles are reserved
   gutters; .detail-view content has matching padding so neither circle
   overlaps any name, body copy, or image.
   ────────────────────────────────────────────────────────────────────── */
.nav-circle {
  /* absolute so the circle scales with the kiosk-stage. See note on
   * .attract above for why we don't use position: fixed here. */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 11rem;
  height: 11rem;
  border: 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-3);
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--color-brand);
  cursor: pointer;
  z-index: 70;
  transition: transform var(--t-fast) var(--ease-out),
              background-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out);
}
.nav-circle svg { width: 4.4rem; height: 4.4rem; }
.nav-circle:active { transform: translateY(-50%) scale(0.94); }

.nav-home {
  left: 0;
  border-radius: 0 50% 50% 0;
  padding-right: 1.2rem;
}
.nav-back {
  right: 0;
  border-radius: 50% 0 0 50%;
  padding-left: 1.2rem;
}

html[data-stage-mode="responsive"] .nav-circle {
  width: clamp(6.8rem, 16vw, 8rem);
  height: clamp(6.8rem, 16vw, 8rem);
}

html[data-stage-mode="responsive"] .nav-circle svg {
  width: clamp(2.4rem, 6vw, 3.4rem);
  height: clamp(2.4rem, 6vw, 3.4rem);
}

html[data-stage-mode="responsive"] .nav-home {
  padding-right: clamp(0.8rem, 2vw, 1.2rem);
}

html[data-stage-mode="responsive"] .nav-back {
  padding-left: clamp(0.8rem, 2vw, 1.2rem);
}

/* Home is visible on home + detail (always offers a way back to attract).
 * Back is visible only on detail (one step back to the map). */
body[data-view="home"]   .nav-home,
body[data-view="detail"] .nav-home { display: flex; }
body[data-view="detail"] .nav-back { display: flex; }

/* When the POI modal is open over the map, hide the side nav circles so
 * they don't compete with the modal backdrop. */
.poi-modal[data-open="true"] ~ .nav-home,
.poi-modal[data-open="true"] ~ .nav-back {
  opacity: 0;
  pointer-events: none;
}

/* ── Theme toggle (part of the floating map-controls stack) ─────────── */
.map-ctl--theme { font-size: 2.2rem; }
.map-ctl--theme svg { width: 3rem; height: 3rem; }

/* ──────────────────────────────────────────────────────────────────────
   ORIENTATION GUARD
   ────────────────────────────────────────────────────────────────────── */
.orientation-guard { display: none; }

@media (orientation: portrait) {
  /* The design is landscape. If a panel is mounted portrait, hide the whole
   * stage and let the orientation-guard take over asking to rotate. */
  #kiosk-stage,
  .app, .detail-view, .poi-modal, .attract, .nav-back { display: none !important; }
  .orientation-guard {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--s-5);
    height: 100vh;
    width: 100vw;
    background: var(--color-brand);
    color: #fff;
    text-align: center;
    padding: var(--s-7);
  }
  .orientation-guard h1 {
    font-family: var(--font-serif);
    font-size: 5.6rem;
    margin: 0;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .orientation-guard p {
    font-family: var(--font-sans);
    font-size: 2.2rem;
    max-width: 60rem;
    line-height: 1.5;
    opacity: 0.85;
  }
  .orientation-guard .mark {
    width: 6.4rem;
    height: 0.4rem;
    background: var(--color-brand-gold);
    margin-top: var(--s-3);
  }
}