/* ==========================================================================
   The AnnEdible Cakery — design tokens + styles
   Register: brand. Moody / upscale / artisan. Dark charcoal stage, brass accent.
   ========================================================================== */

:root {
  /* Color — OKLCH, see DESIGN.md */
  --ink: oklch(0.16 0.02 55);
  --ink-2: oklch(0.21 0.025 55);
  --ink-3: oklch(0.26 0.025 55);
  --paper: oklch(0.96 0.012 75);
  --paper-2: oklch(0.91 0.02 70);
  --ink-text: oklch(0.94 0.015 70);
  --paper-text: oklch(0.19 0.02 50);
  --muted-on-ink: oklch(0.72 0.02 60);
  --muted-on-paper: oklch(0.38 0.02 50);
  --gold: oklch(0.74 0.13 78);
  --gold-strong: oklch(0.68 0.15 72);
  --gold-text: oklch(0.22 0.03 60);
  --cocoa: oklch(0.32 0.06 40);
  --hairline-on-ink: oklch(0.94 0.015 70 / 0.14);
  --hairline-on-paper: oklch(0.19 0.02 50 / 0.14);

  /* Type */
  --font-display: "Frank Ruhl Libre", "Iowan Old Style", serif;
  --font-body: "General Sans", "Segoe UI", system-ui, sans-serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.4rem + 0.85vw, 2.1rem);
  --step-3: clamp(2.1rem, 1.75rem + 1.5vw, 3rem);
  --step-4: clamp(2.75rem, 2.1rem + 2.8vw, 4.25rem);
  --step-5: clamp(3.2rem, 2.2rem + 4.5vw, 5.5rem);

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Motion */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 220ms;
  --dur-base: 420ms;
  --dur-slow: 900ms;

  /* z-index scale */
  --z-base: 0;
  --z-sticky-nav: 10;
  --z-overlay: 20;
  --z-modal: 30;
  --z-toast: 40;

  --radius-sm: 6px;
  --radius-md: 14px;
  --shadow-lift: 0 18px 40px -20px oklch(0.1 0.02 50 / 0.55);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
}

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

.container {
  width: min(1200px, 100% - 3rem);
  margin-inline: auto;
}

.on-paper {
  background: var(--paper);
  color: var(--paper-text);
}

.on-paper .muted {
  color: var(--muted-on-paper);
}

.muted {
  color: var(--muted-on-ink);
}

.section {
  padding-block: var(--space-9);
}

.section-head {
  max-width: 46ch;
  margin-bottom: var(--space-7);
}

.section-head .kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--gold);
  margin-bottom: var(--space-2);
}

.on-paper .section-head .kicker {
  color: var(--cocoa);
}

.section-head h2 {
  font-size: var(--step-3);
  letter-spacing: -0.02em;
}

.section-head p {
  margin-top: var(--space-3);
  font-size: var(--step-0);
}

/* ------------------------------ Buttons --------------------------------- */
.btn {
  --btn-fg: var(--ink);
  --btn-bg: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out-quart),
    background var(--dur-fast) var(--ease-out-quart),
    box-shadow var(--dur-fast) var(--ease-out-quart);
  white-space: nowrap;
}

.btn:hover {
  background: var(--gold-strong);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.btn.ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-text);
  border-color: var(--hairline-on-ink);
}

.btn.ghost:hover {
  background: oklch(0.94 0.015 70 / 0.08);
  box-shadow: none;
}

.on-paper .btn.ghost {
  --btn-fg: var(--paper-text);
  border-color: var(--hairline-on-paper);
}

.on-paper .btn.ghost:hover {
  background: oklch(0.19 0.02 50 / 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
  .btn:hover {
    transform: none;
  }
}

/* -------------------------------- Nav ------------------------------------ */
.site-nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-sticky-nav);
  padding: var(--space-4) 0;
}

/* The blur lives on a pseudo-element, not .site-nav itself: backdrop-filter on the
   nav would make it the containing block for its own position:fixed mobile menu,
   collapsing that menu's height to the nav bar's height instead of the viewport. */
.site-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  transition: background var(--dur-base) var(--ease-out-quart),
    backdrop-filter var(--dur-base) var(--ease-out-quart);
}

.site-nav.is-scrolled {
  padding-block: var(--space-3);
  box-shadow: 0 1px 0 var(--hairline-on-ink);
}

.site-nav.is-scrolled::before {
  background: oklch(0.16 0.02 55 / 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
}

.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.logo-mark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--ink-text);
}

.logo-mark img {
  height: 46px;
  width: auto;
  flex-shrink: 0;
}

.site-footer .logo-mark img {
  height: 76px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--step--1);
}

/* Only exists for the mobile full-screen overlay; without this it renders as a
   bare, browser-styled button inline in the desktop nav row. */
.close-nav {
  display: none;
}

.nav-links a {
  text-decoration: none;
  color: var(--ink-text);
  position: relative;
  padding-block: 0.25rem;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transition: right var(--dur-base) var(--ease-out-quart);
}

.nav-links a:hover::after {
  right: 0;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--ink-text);
  padding: var(--space-2);
}

.nav-toggle svg {
  width: 26px;
  height: 26px;
}

@media (max-width: 880px) {
  .nav-links {
    position: fixed;
    inset: 0;
    top: 0;
    background: var(--ink);
    flex-direction: column;
    justify-content: center;
    gap: var(--space-7);
    font-size: var(--step-1);
    transform: translateY(-100%);
    transition: transform var(--dur-base) var(--ease-out-quart);
    z-index: var(--z-overlay);
  }

  .nav-links.is-open {
    transform: translateY(0);
  }

  .nav-links .close-nav {
    display: block;
    position: absolute;
    top: var(--space-5);
    right: var(--space-6);
    background: none;
    border: none;
    color: var(--ink-text);
  }

  .nav-links .close-nav svg {
    width: 28px;
    height: 28px;
  }

  .nav-toggle {
    display: block;
  }

  .nav-cta {
    gap: var(--space-2);
  }

  .nav-cta .btn {
    padding: 0.7rem 1rem;
    font-size: 0.78rem;
  }
}

/* -------------------------------- Hero ------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--ink-text);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    oklch(0.12 0.02 55 / 0.35) 0%,
    oklch(0.12 0.02 55 / 0.35) 35%,
    oklch(0.1 0.02 55 / 0.92) 100%
  );
}

.hero-content {
  position: relative;
  z-index: var(--z-base);
  padding-block: var(--space-9) var(--space-8);
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--step--1);
  color: var(--gold);
  margin-bottom: var(--space-4);
  letter-spacing: 0.02em;
}

.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.hero h1 {
  font-size: var(--step-5);
  line-height: 1;
  letter-spacing: -0.03em;
  max-width: 16ch;
}

.hero h1 em {
  font-style: italic;
  color: var(--gold);
}

.hero-sub {
  margin-top: var(--space-5);
  max-width: 46ch;
  font-size: var(--step-1);
  color: var(--ink-text);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline-on-ink);
  font-size: var(--step--1);
}

.hero-meta div strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.hero-meta div span {
  color: var(--muted-on-ink);
}

.scroll-cue {
  position: absolute;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted-on-ink);
  font-size: var(--step--1);
  writing-mode: vertical-rl;
}

.scroll-cue .line {
  width: 1px;
  height: 46px;
  background: var(--muted-on-ink);
  animation: scrollcue 2.4s var(--ease-out-quart) infinite;
}

@keyframes scrollcue {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.1% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

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

@media (max-width: 600px) {
  .scroll-cue {
    display: none;
  }
}

/* ------------------------------ Reveal ------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out-quint),
    transform var(--dur-slow) var(--ease-out-quint);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="scale"] {
  transform: scale(0.96);
}

[data-reveal="scale"].is-visible {
  transform: scale(1);
}

[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-base) var(--ease-out-quart),
    transform var(--dur-base) var(--ease-out-quart);
}

[data-reveal-group].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 70ms; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 140ms; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 210ms; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 280ms; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 350ms; }
[data-reveal-group].is-visible > *:nth-child(7) { transition-delay: 420ms; }
[data-reveal-group].is-visible > *:nth-child(8) { transition-delay: 490ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ------------------------------- Menu -------------------------------------- */
.menu-section {
  position: relative;
}

.menu-category {
  margin-bottom: var(--space-9);
}

.menu-category:last-child {
  margin-bottom: 0;
}

.menu-category-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--hairline-on-paper);
}

.menu-category-head h3 {
  font-size: var(--step-2);
}

.menu-category-head span {
  font-size: var(--step--1);
  color: var(--muted-on-paper);
  white-space: nowrap;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}

.menu-tile {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper-2);
  isolation: isolate;
  transition: transform var(--dur-base) var(--ease-out-quart);
}

.menu-tile:hover {
  transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
  .menu-tile,
  .menu-tile:hover {
    transition: none;
    transform: none;
  }
}

.menu-tile .photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.menu-tile .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out-quart);
}

.menu-tile:hover .photo img {
  transform: scale(1.06);
}

.menu-tile .info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
}

.menu-tile .info h4 {
  font-size: var(--step-0);
  font-weight: 500;
}

.menu-tile .info .price {
  font-family: var(--font-display);
  font-size: var(--step-0);
  color: var(--cocoa);
  white-space: nowrap;
}

/* Feature tile: one real photo legitimately shows several priced items (the whole
   cake case), so it gets a single wide card with a list instead of faking one
   photo-per-item like the rest of the grid. */
.menu-tile--feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
}

.menu-tile--feature .photo {
  aspect-ratio: auto;
  height: 100%;
}

.info--list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
}

.info--list h4 {
  font-size: var(--step-1);
  font-weight: 500;
}

.info--list ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.info--list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--step--1);
}

.info--list li .price {
  font-family: var(--font-display);
  color: var(--cocoa);
  white-space: nowrap;
}

.info--list li small {
  display: block;
  font-size: 0.85em;
  color: var(--muted-on-paper);
}

@media (max-width: 640px) {
  .menu-tile--feature {
    grid-template-columns: 1fr;
  }
  .menu-tile--feature .photo {
    aspect-ratio: 4 / 5;
    height: auto;
  }
}

.menu-note {
  margin-top: var(--space-6);
  font-size: var(--step--1);
  color: var(--muted-on-paper);
}

/* ------------------------------- Craft -------------------------------------- */
.craft-section {
  background: var(--ink-2);
  overflow: hidden;
}

.craft-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-9);
  align-items: center;
}

.craft-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.craft-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 5/4;
}

.craft-copy .ethos {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-style: italic;
  color: var(--gold);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-5);
}

.craft-copy p + p {
  margin-top: var(--space-4);
}

@media (max-width: 900px) {
  .craft-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------- About/Team ---------------------------------- */
.team-lead {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-8);
}

.team-portrait {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.team-portrait img {
  width: 100%;
  height: auto; /* required: aspect-ratio is ignored once width+height attrs both resolve to definite values */
  object-fit: cover;
  aspect-ratio: 3/4; /* matches the source photo's real 1440x1920 ratio exactly, zero crop */
}

@media (max-width: 900px) {
  .team-lead {
    grid-template-columns: 1fr;
  }
}

.team-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

.team-strip figure {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}

.team-strip img {
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: auto; /* required: aspect-ratio is ignored once width+height attrs both resolve to definite values */
  transition: transform var(--dur-slow) var(--ease-out-quart);
}

/* candid-bread-case-peek.jpg is a square source with the subject's face in the
   left third; a centered 3:4 crop would cut straight through it. */
.team-strip img.obj-left {
  object-position: 20% center;
}

.team-strip figure:hover img {
  transform: scale(1.05);
}

.team-strip figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-3);
  font-size: var(--step--1);
  color: var(--ink-text);
  background: linear-gradient(0deg, oklch(0.1 0.02 50 / 0.85), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .team-strip img {
    transition: none;
  }
}

/* ------------------------------- Visit/Ambiance ------------------------------- */
/* The source photos are square Instagram crops (1:1) — the grid respects that
   instead of stretching one into a tall portrait cell and cropping it hard. */
.ambiance-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}

.ambiance-gallery figure {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1;
}

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

.amenity-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
  font-size: var(--step--1);
  color: var(--muted-on-ink);
}

.amenity-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.amenity-list svg {
  width: 18px;
  height: 18px;
  color: var(--gold);
  flex-shrink: 0;
}

/* ------------------------------- Visit / Location ----------------------------- */
.visit-section {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  min-height: 640px;
}

.visit-info {
  padding: var(--space-9) var(--space-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
}

.visit-info h2 {
  font-size: var(--step-3);
}

.visit-block {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.visit-block svg {
  width: 22px;
  height: 22px;
  color: var(--cocoa);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.visit-block strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-0);
}

.hours-table {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.35rem 1.5rem;
  font-size: var(--step--1);
}

.hours-table span:nth-child(odd) {
  color: var(--muted-on-paper);
}

.visit-cta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.map-embed {
  position: relative;
  min-height: 360px;
  background: radial-gradient(120% 140% at 20% 0%, oklch(0.32 0.06 40 / 0.6), transparent 60%), var(--ink-2);
}

.map-embed::before {
  content: "Map loading. If it doesn't appear, use Get Directions.";
  position: absolute;
  inset: auto var(--space-4) var(--space-4) var(--space-4);
  z-index: -1;
  color: var(--ink-text);
  font-size: var(--step--1);
  background: oklch(0.1 0.02 50 / 0.55);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
  filter: grayscale(0.25) contrast(1.05);
}

@media (max-width: 900px) {
  .visit-section {
    grid-template-columns: 1fr;
  }
  .map-embed {
    min-height: 340px;
  }
}

/* ---------------------------------- Footer ------------------------------------- */
.site-footer {
  background: var(--ink-2);
  padding-block: var(--space-8) var(--space-6);
  border-top: 1px solid var(--hairline-on-ink);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-7);
}

.footer-brand p {
  margin-top: var(--space-4);
  max-width: 32ch;
  color: var(--muted-on-ink);
  font-size: var(--step--1);
}

.footer-col h5 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-on-ink);
  margin-bottom: var(--space-4);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--step--1);
}

.footer-col a {
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out-quart);
}

.footer-col a:hover {
  color: var(--gold);
}

.social-row {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.social-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hairline-on-ink);
  transition: border-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart);
}

.social-row a:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.social-row svg {
  width: 18px;
  height: 18px;
}

.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline-on-ink);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--step--1);
  color: var(--muted-on-ink);
}

@media (max-width: 800px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 500px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}