/* =========================================================
   PHIL'S GOOD YOGA — Website Design System
   Built by Pelayo (Project Janus)
   ---------------------------------------------------------
   This file is the shared foundation for every section of the
   single landing page. New sections should pull from these
   variables rather than hard-coding colors/fonts/spacing.
   ========================================================= */

:root {
  /* --- Brand palette v2 (locked 9/16) ---
     Retired the forest green + sun gold mood-board colors. New system is
     Sand + Sage + Black, with the black itself sampled directly from
     Aman's own site (their real button/CTA charcoal, not a pure #000) —
     this pairing is now the bellwether for the brand going forward. */
  --black:          #313131;  /* primary "black" — hero/dark sections + button fill, sampled from aman.com */
  --black-soft:     #404040;  /* hover / secondary state for black, also sampled from aman.com */
  --sage:           #7A9E7E;  /* the one accent color kept from the old mood board */
  --sand:           #E9DFC8;  /* warm neutral background */
  --cream:          #FBF8F1;  /* off-white, for text/labels on dark backgrounds */
  --ink:            #313131;  /* near-black text on light backgrounds (matches --black) */
  --ink-secondary:  #52514E;
  --ink-muted:      #898781;
  --hairline:       #E1E0D9;

  /* --- Type (unchanged / locked separately) --- */
  --font-display: 'Playfair Display', Georgia, serif;   /* headlines */
  --font-sub:     'Montserrat', Helvetica, sans-serif;   /* subheads / nav / labels */
  --font-body:    'Lato', Helvetica, sans-serif;         /* body copy */

  /* --- Spacing scale --- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;

  /* --- Layout --- */
  --max-width: 1280px;
  --radius-btn: 2px;   /* was a 999px pill — Aman's own buttons are square-cornered */
  --radius-soft: 12px;
  --radius-card: 22px; /* Experience cards specifically — Paul's reference mocks want a generous curve here */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* --- Buttons ---
   Styled after Aman's own buttons (sampled from aman.com): sentence
   case, not all-caps; square corners, not a pill; modest tracking. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-2px); }

.btn-outline-light {
  background: transparent;
  color: var(--cream);
  border-color: rgba(251, 248, 241, 0.55);
}
.btn-outline-light:hover {
  background: rgba(251, 248, 241, 0.12);
  border-color: var(--cream);
}

.btn-mono {
  background: var(--black);
  color: #fff;
}
.btn-mono:hover { background: var(--black-soft); }

/* Same weight/prominence as btn-mono (a solid filled pill, not an
   outline) but light-on-dark instead — for use on a solid --black
   background, where btn-mono's own black fill would have almost no
   contrast against it (this was true of the hero's "Reserve" button
   before this fix — it rendered as just the dot and text, no visible
   button shape, since the pill and the page behind it were the same
   color). Use btn-mono on light/photo backgrounds, btn-cream on solid
   dark ones. */
.btn-cream {
  background: var(--cream);
  color: var(--black);
}
.btn-cream:hover { background: var(--sand); }

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34C759; /* online-status green */
  animation: dot-blink 1.6s ease-in-out infinite;
}

@keyframes dot-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--black); /* shows while image loads */
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

/* Gradient so the overlapping type + nav stay legible over any photo */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(49,49,49,0.55) 0%, rgba(49,49,49,0.05) 22%, rgba(49,49,49,0.05) 45%, rgba(49,49,49,0.75) 78%, rgba(49,49,49,0.94) 100%);
}

/* --- Nav --- */
.hero__nav {
  position: relative;
  /* Higher than .mobile-menu's z-index (50): on mobile, .hero__nav-links and
     .hero__nav-cta are both display:none, so the toggle button is the only
     thing left in this stacking context — nothing to visually clash with the
     overlay. Without this, the overlay paints above .hero__nav's entire
     stacking context once opened, and the toggle becomes unclickable even
     though it individually sits inside a "z-index: 2" ancestor — z-index only
     compares within the same stacking context, so a local bump on the toggle
     alone wouldn't fix it. */
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-md);
}

.hero__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sub);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--cream);
}

.hero__logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sage);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--black);
  font-size: 1rem;
}

/* Nav links are centered in the bar independently of the CTA button,
   which stays pinned to the right regardless of link count/width.
   Sentence case + normal tracking, matching Aman's own nav (sampled
   from aman.com — their nav links run plain, no caps, no tracking). */
.hero__nav-links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  list-style: none;
  gap: var(--space-md);
}

.hero__nav-links a {
  font-family: var(--font-sub);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--cream);
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.hero__nav-links a:hover { opacity: 1; }

.hero__nav-cta {
  position: relative;
  z-index: 1;
}

.hero__nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--cream);
  font-size: 1.6rem;
  cursor: pointer;
}

/* --- Overlapping headline block --- */
.hero__content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--space-md);
}

.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-sub);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: var(--space-sm);
}

.hero__headline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--cream);
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.hero__headline .accent {
  color: var(--sage);
}

.hero__note {
  margin-top: var(--space-md);
  max-width: 46ch;
}

.hero__note-label {
  display: block;
  font-family: var(--font-sub);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 0.6rem;
}

.hero__note-text {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--sand);
}

.hero__note-sign {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 700;
  font-size: 1rem;
  color: var(--cream);
}

.hero__actions {
  margin-top: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .hero__nav-links { display: none; }
  .hero__nav-toggle { display: block; }
  .hero__headline { font-size: clamp(2.6rem, 13vw, 4.5rem); }
  /* Only one Reserve Today button on a phone screen — the nav pill and
     the hero's own button both sit in the same first view on mobile,
     which reads as one too many. The hero button (with the note and
     headline it belongs to) stays; the nav pill drops. Desktop keeps
     both. */
  .hero__nav-cta { display: none; }
}

/* --- Mobile menu ---
   A full-screen overlay opened by .hero__nav-toggle. Hidden by default
   (opacity/visibility, not display:none, so the fade transition can
   actually run); js/main.js adds/removes .mobile-menu--open. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  background: var(--black);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.mobile-menu--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}

.mobile-menu__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.mobile-menu__links a {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 2.2rem;
  color: var(--cream);
}

.mobile-menu__socials { margin-bottom: 0; }

/* =========================================================
   ABOUT
   ========================================================= */

.section-label {
  display: block;
  font-family: var(--font-sub);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-sm);
}

.about {
  background: var(--sand);
  padding: var(--space-xl) 0;
}

.about__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-lg);
  align-items: center;
}

.about__video {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-soft);
  background: var(--black); /* shows briefly while the video loads */
}

.about__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 3rem);
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: var(--space-md);
}

.about__bio {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink-secondary);
  max-width: 52ch;
}

@media (max-width: 820px) {
  .about__inner {
    grid-template-columns: 1fr;
  }
  .about__media {
    max-width: 340px;
  }
}

/* =========================================================
   EXPERIENCES
   Cream section, black cards — the one place the hero's black
   comes back post-About, so the page reads as one system rather
   than three unrelated sections.
   ========================================================= */

.experiences {
  background: var(--cream);
  padding: var(--space-xl) 0 var(--space-lg);
}

.experiences__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.15rem, 5.2vw, 3rem);
  color: var(--ink);
  margin-bottom: var(--space-lg);
  white-space: nowrap;
}

/* Bounded to the same max-width as the rest of the page (not full-bleed),
   so on any screen — including wide desktop monitors — the five cards'
   combined width overflows this box and a horizontal scroll is always
   required to reach the last card. That's deliberate: it's meant to make
   someone stop and scroll, not take in all five at a glance. */
.experiences__track {
  display: flex;
  gap: var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 var(--space-md) var(--space-sm);
  /* Without this, mandatory scroll-snap silently overrides the padding
     above: on load, Chromium snaps the first card's "start" edge to the
     scrollport edge, which cancels the left inset entirely (scrollLeft
     lands on 32px instead of 0, so the card renders flush left despite
     the padding). scroll-padding tells the snap calculation to treat
     this inset as part of the snap area instead of dead space to
     scroll past. */
  scroll-padding-left: var(--space-md);
  scroll-padding-right: var(--space-md);
  scrollbar-width: none;
  cursor: grab;
}

/* While a click-and-hold drag is actually in progress (see js/main.js):
   disable snapping so the manual scrollLeft assignment doesn't fight
   the snap points, and block text selection while dragging across it. */
.experiences__track--dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.experiences__track::-webkit-scrollbar { display: none; }

.exp-card {
  position: relative;
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(340px, 80vw);
  /* Taller than the original 3/4.3 — gives the frosted panel more
     photo above it to breathe against, so a line of extra title/copy
     on one card reads as a small difference in a tall frame instead
     of a jarring jump in a tight one. */
  aspect-ratio: 3 / 5;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--black); /* shows while the photo loads */
  /* Two layers: a tight, low-blur shadow close enough to the edge that
     its own corner curve is actually visible (a single soft 40px-blur
     shadow washes the 22px corner radius out into a flat-looking band),
     plus the original soft ambient shadow underneath for depth. */
  box-shadow:
    0 6px 14px -6px rgba(0, 0, 0, 0.45),
    0 20px 40px -20px rgba(0, 0, 0, 0.4);
}

.exp-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Light overall darken so the top of the photo stays legible even
   before it reaches the blurred panel at the bottom. */
.exp-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(49,49,49,0.15) 0%, rgba(49,49,49,0.05) 35%, rgba(49,49,49,0.35) 100%);
}

/* The frosted glass panel — back to the OG v1 treatment: a blurred
   pane over the photo (not a flat color block, not a whole-photo
   blur), sized naturally by its own content rather than forced into
   a fixed height. The card above was made taller instead, so the
   couple of lines' difference between a short card and a long one
   reads as a small, easy variance in a tall frame rather than a
   fight to make every panel an identical box. */
.exp-card__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-md) var(--space-md) var(--space-sm);
  background: rgba(49, 49, 49, 0.55);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  color: var(--cream);
}

.exp-card__tag {
  display: block;
  font-family: var(--font-sub);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 0.5rem;
}

.exp-card__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

.exp-card__copy {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--sand);
  margin-bottom: var(--space-sm);
}

.exp-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(251, 248, 241, 0.2);
}

.exp-card__price {
  font-family: var(--font-sub);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cream);
  white-space: nowrap;
}

.exp-card__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.exp-card__cta {
  padding: 0.6rem 1.1rem;
  font-size: 0.76rem;
}

.exp-card__share {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(251, 248, 241, 0.4);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.exp-card__share:hover {
  background: rgba(251, 248, 241, 0.12);
  border-color: var(--cream);
}

/* Brief confirmation state when the link is copied instead of handed to
   a native share sheet (desktop browsers without navigator.share). */
.exp-card__share--copied {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--black);
}

/* Fallback for a card with no photo yet: plain black card (the original
   look, before backgrounds existed), so a missing mock never means a
   repeated one. */
.exp-card--plain {
  background: var(--black);
}

.exp-card--plain .exp-card__panel {
  position: static;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg) var(--space-md) var(--space-md);
}

.exp-card--plain .exp-card__copy {
  flex: 1;
}

@media (max-width: 720px) {
  .experiences__track {
    /* Match the same left inset as the section heading above it and the
       page's other content (--space-md, same as .container), instead of
       the tighter --space-sm this used to use — the card was sitting
       flush against the edge, out of step with everything above it. */
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

/* =========================================================
   TESTIMONIALS
   Light section, a breather after the dark Experience cards. Moving-
   card style per Paul's reference video: two rows of cards, each
   auto-scrolling horizontally in an infinite loop (pure CSS — a
   duplicated track sliding from 0 to -50%, which is invisible as a
   loop because the duplicate picks up exactly where the original
   left off). Pauses on hover so a card can actually be read, and
   freezes for anyone with prefers-reduced-motion set.
   ========================================================= */

.testimonials {
  background: var(--sand);
  padding: var(--space-xl) 0;
  overflow: hidden;
}

.testimonials .container {
  margin-bottom: var(--space-lg);
}

.testimonials__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.1rem, 5vw, 3rem);
  color: var(--ink);
  white-space: nowrap;
}

.testimonials__row {
  overflow: hidden;
  /* Fade the edges so cards feel like they're scrolling in/out of
     view rather than hitting a hard clipped edge. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.testimonials__row + .testimonials__row {
  margin-top: var(--space-md);
}

.testimonials__track {
  display: flex;
  gap: var(--space-md);
  width: max-content;
  animation: testimonials-scroll 36s linear infinite;
}

.testimonials__row:hover .testimonials__track {
  animation-play-state: paused;
}

@keyframes testimonials-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials__track {
    animation: none;
  }
}

.testimonial-card {
  margin: 0;
  flex: 0 0 auto;
  width: 400px;
  padding: var(--space-md);
  background: var(--cream);
  border-radius: var(--radius-soft);
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.25);
}

.testimonial-card__stars {
  color: var(--ink);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-sm);
}

.testimonial-card__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: var(--space-md);
}

.testimonial-card__footer {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.testimonial-card__name {
  font-family: var(--font-sub);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.testimonial-card__exp {
  font-family: var(--font-sub);
  font-size: 0.75rem;
  color: var(--sage);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 720px) {
  .testimonial-card {
    width: 300px;
  }
}

/* =========================================================
   FOLLOW / INSTAGRAM
   ========================================================= */

.follow {
  background: var(--cream);
  padding: var(--space-xl) 0;
}

.follow .container {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.follow__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: var(--space-sm);
}

.follow__text {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-secondary);
  max-width: 40ch;
  margin: 0 auto var(--space-md);
}

.follow__cta {
  display: inline-flex;
}

/* Static tile row (previously an auto-scrolling marquee, same technique
   as .testimonials__track — Paul asked to drop the motion until there
   are enough real photos for a loop to feel intentional rather than
   repetitive). Just a plain contained grid now: 4 across on desktop,
   2x2 on mobile, no duplicated tiles, no animation. */
.follow__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.follow__tile {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-soft);
  overflow: hidden;
}

.follow__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.follow__tile:hover img {
  transform: scale(1.05);
}

@media (max-width: 720px) {
  .follow__track {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 var(--space-sm);
  }
}

/* =========================================================
   CLOSING CTA + CONTACT
   Bookends the hero — same black, same italic display type — so the
   page opens and closes on the same note.
   ========================================================= */

.closing {
  background: var(--black);
  padding: var(--space-xl) 0;
}

.closing__inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.closing__label {
  color: var(--sage);
  text-align: center;
}

.closing__headline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  color: var(--cream);
  line-height: 1.1;
  margin-bottom: var(--space-sm);
}

.closing__sub {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--sand);
  margin-bottom: var(--space-md);
}

.closing__cta {
  margin-bottom: var(--space-md);
}

.closing__socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.closing__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--sand);
  color: var(--cream);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.closing__social svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.closing__social:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--black);
}

.closing__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-sub);
  font-size: 0.85rem;
  color: var(--sand);
}

.closing__copyright {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(251, 248, 241, 0.12);
  font-family: var(--font-sub);
  font-size: 0.75rem;
  color: var(--ink-muted);
}