/* ==========================================================================
   Maison de Nona — coming soon (horizontal, four panels)
   Brand: BRAND_IDENTITY_CANONICAL.md · Typography & Spacing v1 · Route B.
   Layout: mdn-horizontal-wireframes.html (approved). No supergraphic.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — v5 digital design language (23 October 2026)

   Self-hosted and shipped with the site: no CDN request, no dependency on a
   font being installed locally. Both families are SIL OFL 1.1; licence texts
   and provenance are in /fonts. Subsets are split so a visitor downloads only
   what their text needs.

   Cormorant Garamond 400 — expressive / display
   Nunito Sans 400-700    — UI, labels, body, counter, CTA
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Variable file: one download covers every UI weight in use. */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/nunito-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/nunito-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces and ink — v5 digital design language, adapted from the Nona
     Concierge workspace and the DNA Community UI baseline. */
  --paper: #FFFEFA;                 /* page base */
  --surface: #F8F7F2;               /* secondary neutral surface */
  --surface-2: #F0EEEA;             /* photo field / quiet fill */
  --ink: #272722;                   /* body and label ink, 14.9:1 on paper */
  --muted: #6A6962;                 /* captions and meta, 5.5:1 on paper */
  --line: #E9E6DF;                  /* dividers and quiet strokes */

  /* Maison identity accent — replaces the reference terracotta. */
  --burgundy: #6D1631;              /* identity, action, focus, 11.5:1 on paper */
  --oxblood: #4B1024;               /* hover only */
  /* Nona Blush #D5B7BB is restricted and intentionally unused here. */

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ui: "Nunito Sans", system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --header-h: 34px;
  --margin: 24px;                    /* page margin: 24 mobile / 48 tablet / 64 desktop */
  --gutter: 16px;
  --cta-zone: 60px;                  /* space reserved above the fixed CTA on mobile */
  --cta-clear: 0px;                  /* space reserved right of the meta row on desktop */

  /* Wordmark-to-display separation. H = measured cap ink height of the
     wordmark artwork at display size (ink box 1302×145; capital M ≈ 0.78 of
     ink height): 160px wide → H ≈ 14px; 184px → H ≈ 16px. The 1.25S term from
     the superseded Route B formula is not applied to Cormorant; the clear
     space below is judged on the rendered setting and kept generous. */
  --logo-cap-h: 14px;
  /* Three lines on phones: "Your Private" / "Sanctuary," / "Opening Soon".
     Sized on the longest of those, "Opening Soon": 5.64em in Cormorant
     Garamond, 6.25em in the Georgia fallback. The divisor uses the Georgia
     figure so the line still fits if the webfont never arrives.
     42 @320 · 50 @375 · 53 @390, capped at 56. */
  --hero-size: clamp(2.5rem, calc((100vw - 48px) / 6.5), 3.5rem);
  --media-gap-floor: 48px;
  --logo-to-hero: max(calc(2 * var(--logo-cap-h)), var(--media-gap-floor));

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 48em) {
  :root {
    --header-h: 56px;
    --margin: 48px;
    --gutter: 24px;
    --cta-zone: 0px;
    --cta-clear: 264px;
    --logo-cap-h: 16px;
    /* 768–1023: three lines still, "Opening Soon" against a 7-of-12 copy
       column, Georgia-safe. 57 @768 · 64 cap from ~900. */
    --hero-size: clamp(2.75rem, calc(8.9vw - 11px), 4rem);
    --media-gap-floor: 64px;
  }
}

@media (min-width: 64em) {
  :root {
    /* From 1024 the copy column (8 of 12) holds "Your Private Sanctuary," on
       one line: 9.13em in Cormorant, 10.47em in Georgia — the Georgia figure
       sets the limit. 54 @1024 · 76 @1440, capped at 84. */
    --hero-size: clamp(2.75rem, 5.3vw, 5.25rem);
  }
}

@media (min-width: 75em) {
  :root {
    --margin: 64px;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 100%;
  line-height: 1.625;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
p,
figure,
dl,
dd,
ul {
  margin: 0;
}

/* The one list on the page is a row of contact links: no markers, no indent,
   so it stays on the same left axis as the label, headline and address. */
ul {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 3px;
}

/* Utility labels — Nunito Sans 500, uppercase, +0.08em */
.kicker,
.panel-meta,
.header-location,
.counter,
.header-link,
.map-label,
.text-link,
.details dt {
  font-family: var(--ui);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 20;
  padding: 0.75rem 1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ui);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
  outline-color: var(--ink);
}

/* --------------------------------------------------------------------------
   Header — slim fixed utility bar
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 10px;
  /* The wordmark shares the panels' left axis (LAYOUT-ALIGN-01): header and
     panel padding are both --margin, so the logo, labels, headlines and body
     all start on one line. The right utilities keep their own optical edge. */
  padding: 0 var(--margin);
  background: rgba(255, 254, 250, 0.97);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  height: 100%;
  min-width: 0;
}

.wordmark {
  width: 160px;          /* core wordmark floor: 160 CSS px (Typography v1 §4) */
  height: auto;
}

.header-location {
  display: none;
  text-align: center;
  color: var(--ink);
}

.header-utility {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
}

.header-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 34px;
  margin-left: -8px;
  padding: 0 8px;
  color: var(--burgundy);
  text-decoration: none;
}

/* extend the touch target to 44px tall inside the 34px header */
.header-link::before {
  content: "";
  position: absolute;
  inset: -5px 0;
}

.header-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.counter {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.counter-current {
  color: var(--burgundy);
}

/* Counter cannot update without JS; hide it rather than show a stale number */
html:not(.js) .counter {
  display: none;
}

@media (min-width: 48em) {
  .site-header {
    grid-template-columns: 1fr auto 1fr;
    column-gap: 16px;
  }

  .header-utility {
    gap: 14px;
  }

  .wordmark {
    width: 184px;
  }

  .header-location {
    display: block;
  }

  .header-link {
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   Track — native horizontal scroll with gentle snap
   -------------------------------------------------------------------------- */

.track {
  position: fixed;
  inset: var(--header-h) 0 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.track::-webkit-scrollbar {
  height: 4px;
}

.track::-webkit-scrollbar-thumb {
  background: var(--line);
}

.track:focus-visible {
  outline-offset: -3px;
}

.panel {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow-x: hidden;
  overflow-y: auto;            /* only engages on very short viewports */
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  row-gap: 14px;
  padding: 18px var(--margin) calc(14px + var(--cta-zone));
}

.panel-grid {
  min-height: 0;
  display: grid;
}

.photo {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--surface-2);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bottom meta row — keeps clear of the fixed CTA on the right */
.panel-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 12px;
  padding-right: var(--cta-clear);
  color: var(--muted);
}

.panel-meta > * {
  min-width: 0;
}

.panel-meta > :last-child {
  flex: none;
  white-space: nowrap;
}

/* When both items cannot share a line, the second one wraps under the first
   and stays on the left axis instead of overflowing the panel. */
@media (max-width: 29.99em) {
  .panel-meta > :last-child {
    white-space: normal;
  }
}

.meta-heading {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

.meta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  margin: -14px 0;             /* keep the row's visual height, grow the hit area */
  color: var(--burgundy);
  text-decoration: none;
  white-space: nowrap;
}

.meta-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.only-wide {
  display: none;
}

.only-narrow {
  display: inline;
}

/* Kicker → headline spacing ≥ 0.5S (Typography v1 §6) */
.kicker {
  margin-bottom: 24px;
  color: var(--ink);
}

@media (min-width: 48em) {
  .panel {
    padding: 24px var(--margin) 22px;
    row-gap: 18px;
  }

  .only-wide {
    display: inline;
  }

  .only-narrow {
    display: none;
  }

  .kicker {
    margin-bottom: 28px;
  }
}

/* --------------------------------------------------------------------------
   Type roles
   -------------------------------------------------------------------------- */

/* Hero — Cormorant Garamond 400, large expressive setting from the wireframe.
   Title case as supplied by the owner: no text-transform anywhere. Leading and
   tracking follow the reference display setting, loosened just enough for the
   descenders in "Sanctuary," and "Opening". */
.display {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--hero-size);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--burgundy);
  text-wrap: balance;
}

/* Two lines once the copy column can hold "Your Private Sanctuary," */
@media (min-width: 64em) {
  .hero-br-narrow {
    display: none;
  }
}

/* Emotional statement — Cormorant Garamond 400, sentence case */
.statement {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.25rem, 9vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 15ch;
  color: var(--burgundy);
  text-wrap: balance;
}

/* Location — selected editorial headline, Cormorant Garamond 400 */
.location-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.125rem, 9.5vw, 3.5rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--burgundy);
}

@media (min-width: 48em) {
  .statement {
    font-size: clamp(2rem, 4vw, 3.75rem);       /* 41 @1024 · 58 @1440 */
  }

  .location-title {
    font-size: clamp(2rem, 4.2vw, 4rem);        /* 43 @1024 · 60 @1440 */
  }
}

/* --------------------------------------------------------------------------
   01 — Hero
   -------------------------------------------------------------------------- */

.hero-grid {
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 18px;
}

/* Mobile: the wordmark sits in the header directly above; hold the full
   clear space before the first display glyph (the kicker mediates). */
.hero-copy {
  padding-top: max(32px, calc(var(--logo-to-hero) - 24px - 1.125rem));
}

.hero-photo img {
  object-position: 50% 50%;    /* keep the illuminated sign centred in any crop */
}

@media (min-width: 48em) {
  .hero-grid {
    grid-template-columns: 8fr 4fr;
    grid-template-rows: minmax(0, 1fr);
    column-gap: var(--gutter);
    align-items: end;
  }

  .hero-copy {
    padding-top: 0;
    align-self: center;
  }

  /* Hold the photograph's own 3:4 proportion so the illuminated sign is never
     cropped out of a narrow column; the height cap keeps it inside the panel. */
  .hero-photo {
    height: auto;
    aspect-ratio: 3 / 4;
    max-height: 100%;
    align-self: end;
  }

}

/* Tablet-width hero: the copy column needs 7 of 12 to hold the three headline
   lines, and the photo keeps 5 of 12 — enough for the facade to read before the
   desktop 8/4 split takes over. */
@media (min-width: 48em) and (max-width: 63.99em) {
  .hero-grid {
    grid-template-columns: 7fr 5fr;
  }
}

/* --------------------------------------------------------------------------
   02 — Statement
   -------------------------------------------------------------------------- */

.statement-grid {
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 18px;
}

.statement-copy {
  padding-top: 14px;
}

.statement-photo img {
  object-position: 50% 50%;    /* keeps the wall sign and the sofa in frame */
}

.panel-meta-wide {
  display: none;
}

@media (min-width: 48em) {
  .statement-grid {
    grid-template-columns: 7fr 5fr;
    grid-template-rows: minmax(0, 1fr);
    column-gap: calc(var(--gutter) + 4px);
    align-items: center;
  }

  .statement-copy {
    padding-top: 0;
  }

  .statement-photo {
    height: 80%;
    align-self: center;
  }

  .panel-meta-wide {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   03 — The space
   -------------------------------------------------------------------------- */

.space-grid {
  grid-template-rows: 1.5fr 0.65fr;
  row-gap: 10px;
}

.space-main img {
  object-position: 50% 50%;
}

.space-detail {
  width: 72%;
  justify-self: end;
}

.space-detail img {
  object-position: 50% 50%;
}

@media (min-width: 48em) {
  .space-grid {
    grid-template-columns: 9fr 3fr;
    grid-template-rows: minmax(0, 1fr);
    column-gap: var(--gutter);
    align-items: stretch;
  }

  .space-detail {
    width: auto;
    height: 58%;
    align-self: end;
  }
}

/* --------------------------------------------------------------------------
   04 — Location & contact
   -------------------------------------------------------------------------- */

/* The address, the links and the footer must never sit on top of each other.
   On a short viewport this panel's content row grows past the viewport and the
   panel scrolls, instead of the copy column spilling over the footer. */
.panel-location {
  grid-template-rows: minmax(min-content, 1fr) auto;
}

.location-grid {
  /* The map keeps a usable minimum height; on very short viewports the panel
     scrolls vertically rather than squeezing the address or the map. */
  grid-template-rows: minmax(150px, 0.85fr) auto;
  row-gap: 16px;
}

/* Standard map area — honest placeholder until an embed URL is configured */
.map {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background-color: var(--surface);
  background-image:
    linear-gradient(var(--line), var(--line)),
    linear-gradient(90deg, var(--line), var(--line));
  background-size: 100% 1px, 1px 100%;
  background-position: 50% 38%, 58% 50%;
  background-repeat: no-repeat;
}

.map iframe {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Sits underneath the embed: covered once the map paints, and still visible
   if the map never paints or JavaScript is off, so the panel is never an
   empty box. */
.map-fallback {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  padding: 12px 16px;
  background: rgba(248, 247, 242, 0.94);
}

.map-label {
  color: var(--muted);
}

/* Once the frame is in place the decorative grid behind it is unnecessary. */
.map.has-embed {
  background-image: none;
}

/* The embed handles its own gestures. Panel navigation stays available from
   the rest of the panel: the copy column beside it on desktop, the address
   block below it on mobile, plus the keyboard and the panel counter. */

/* Very short phones (e.g. 320 x 568): reclaim a little height so the address,
   the links and the footer all fit without the panel needing to scroll. */
@media (max-width: 47.99em) and (max-height: 40em) {
  .location-grid {
    grid-template-rows: minmax(120px, 0.85fr) auto;
    row-gap: 12px;
  }

  .location-copy {
    gap: 6px;
  }

  .location-copy .kicker {
    margin-bottom: 4px;
  }
}

.location-copy {
  display: flex;
  flex-direction: column;
  /* Start, not centre: on a short viewport a centred column overflows both
     ways and would run under the footer and the fixed CTA. */
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  min-height: 0;
}

.location-copy .kicker {
  margin-bottom: 8px;
}

/* Confirmed public address — Nunito Sans at body size, never reduced */
.address {
  margin-top: 2px;
  max-width: 34ch;
  font-family: var(--ui);
  font-size: 1rem;
  font-style: normal;
  line-height: 1.5;
  color: var(--ink);
}

.location-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 22px;
}

.details {
  display: grid;
  gap: 4px 16px;
  margin-top: 6px;
  font-size: 1rem;
  line-height: 1.625;
}

.details dt {
  color: var(--burgundy);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  color: var(--burgundy);
  text-decoration: none;
  border-bottom: 1px solid var(--burgundy);
}

.text-link:hover {
  color: var(--oxblood);
  border-color: var(--oxblood);
}

@media (min-width: 48em) {
  .location-grid {
    grid-template-columns: 7fr 5fr;
    grid-template-rows: minmax(0, 1fr);
    column-gap: calc(var(--gutter) + 2px);
    align-items: stretch;
  }

  .location-copy {
    justify-content: center;
    gap: 16px;
  }

  .location-copy .kicker {
    margin-bottom: 0;
  }

  .address {
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   Fixed CTA — Nunito Sans 600, sentence case
   Mobile: compact visible button with an invisible 44px hit area.
   -------------------------------------------------------------------------- */

.cta {
  position: fixed;
  z-index: 15;
  right: 16px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 32px;
  padding: 0 12px;
  background: var(--burgundy);
  color: var(--paper);
  font-family: var(--ui);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease);
}

/* transparent hit area → ≥ 44 × 44 CSS px */
.cta::before {
  content: "";
  position: absolute;
  inset: -6px -8px;
}

.cta:hover {
  background: var(--oxblood);
}

.cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@media (min-width: 48em) {
  .cta {
    right: var(--margin);
    bottom: 20px;
    min-height: 44px;
    padding: 0 18px;
    font-size: 0.8125rem;
  }

  .cta::before {
    inset: 0;
  }
}

/* --------------------------------------------------------------------------
   Calm entrance (JS-independent CSS animation; removed for reduced motion)
   -------------------------------------------------------------------------- */

.hero-copy > * {
  animation: settle 0.9s var(--ease) both;
}

.hero-copy > .display {
  animation-delay: 0.12s;
}

.hero-photo {
  animation: settle 1.2s var(--ease) 0.2s both;
}

@keyframes settle {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .track {
    scroll-behavior: auto;
  }

  .hero-copy > *,
  .hero-copy > .display,
  .hero-photo {
    animation: none;
  }

  .cta {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.not-found {
  position: fixed;
  inset: var(--header-h) 0 0;
  overflow-y: auto;
  display: grid;
  align-content: center;
  gap: 24px;
  padding: 32px var(--margin) 80px;
}

.not-found > * {
  justify-self: start;
}

.not-found h1 {
  max-width: 14ch;
}

.not-found p:not(.kicker) {
  max-width: 34rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  html,
  body {
    overflow: visible;
    height: auto;
  }

  .site-header,
  .track {
    position: static;
    display: block;
  }

  .panel {
    height: auto;
    page-break-inside: avoid;
  }

  .cta,
  .skip-link {
    display: none;
  }
}