/* ---------- tokens ---------- */
:root {
  --charcoal: #2B2D31;
  --olive: #3A4027;
  --terracotta: #8D321F;
  --beige: #C29B72;

  --cream: #F8F3EC;
  --paper: #FFFDF8;
  --ink: #2B2621;
  --ink-soft: #6b6156;

  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.23, 1, 0.32, 1);
  --container: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.modal-open { overflow: hidden; }

h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; margin: 0; color: var(--charcoal); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 0.6rem;
}
.sep { color: var(--beige); margin: 0 0.35em; }
.muted { color: var(--ink-soft); font-style: italic; }

/* ---------- reveal on scroll ---------- */
/* opacity only — no transform. A translateY/scale entrance moves the
   element's actual bounding box for the length of the transition, and
   the connector-line system (script.js drawConnectors) measures real
   card positions to draw its lines; if a line gets measured mid-
   transition it points at a spot the card is still animating away
   from, then visibly snaps once the card settles. A pure opacity fade
   never moves the box, so a line is correct the instant it's drawn,
   no matter when that happens relative to the reveal */
.reveal {
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { opacity: 1; transition: none; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("assets/background.jpg");
  background-size: cover;
  background-position: center 65%;
  transform: scale(1.06);
  z-index: -3;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20,19,17,0.55) 0%, rgba(24,21,18,0.62) 45%, rgba(24,20,16,0.88) 100%);
  z-index: -2;
}
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__content {
  position: relative;
  text-align: center;
  color: var(--paper);
  padding: 6rem 1.5rem 4rem;
  max-width: 760px;
}

.hero__title {
  margin: 0 0 1.8rem;
  color: var(--paper);
  font-size: clamp(2.1rem, 5.6vw, 3.3rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* each letter animates on its own: rises in on load, then every few
   seconds a soft glint travels letter-by-letter across the word */
.hero__title-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out);
}
.hero__title.is-visible .hero__title-letter {
  opacity: 1;
  transform: translateY(0);
  animation: letter-glint 4.5s ease-in-out infinite;
}
@keyframes letter-glint {
  0%, 88%, 100% { color: var(--paper); text-shadow: none; }
  94% { color: var(--beige); text-shadow: 0 0 10px rgba(194,155,114,0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__title-letter { opacity: 1; transform: none; transition: none; animation: none; }
}

.hero__portrait {
  width: 176px;
  height: 176px;
  margin: 0 auto 1.6rem;
  border-radius: 50%;
  padding: 6px;
  background: linear-gradient(160deg, var(--terracotta), var(--beige));
  box-shadow: 0 12px 36px rgba(0,0,0,0.38);
}
.hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid rgba(248,243,236,0.85);
  display: block;
}

.hero__name {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--paper);
  font-size: clamp(1.15rem, 2.8vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.hero__dates {
  margin: 0.9rem 0 0;
  font-size: 1.05rem;
  color: rgba(248,243,236,0.88);
  letter-spacing: 0.01em;
}

.hero__tagline {
  margin: 1.4rem auto 0;
  max-width: 44rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(0.95rem, 2.4vw, 1.1rem);
  line-height: 1.5;
  color: rgba(248,243,236,0.82);
}

.scroll-cue {
  display: inline-flex;
  margin-top: 2.6rem;
  color: rgba(248,243,236,0.75);
  animation: bob 2.4s ease-in-out infinite;
}
.scroll-cue__dot { animation: dotmove 2.4s ease-in-out infinite; transform-origin: center; }
@keyframes bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(6px);} }
@keyframes dotmove { 0%,100% { transform: translateY(0); opacity: 1;} 50% { transform: translateY(9px); opacity: 0.4;} }
@media (prefers-reduced-motion: reduce) {
  .scroll-cue, .scroll-cue__dot { animation: none; }
}

/* ---------- family tree ----------
   Every generation is a flat, independent row (never nested inside
   another row), so width never compounds and cards can't overlap no
   matter how many generations get added. The connector lines are not
   hand-positioned — script.js measures every card's real on-screen
   position after layout and draws one SVG path linking each parent
   pair to their children, the same technique used by proper family
   tree charts (orthogonal: down from the parents, across, down into
   each child). Resize-safe since it's recomputed on resize. */
main { position: relative; }

.tree-wrap {
  padding: 4.5rem 1.5rem;
  max-width: 1760px;
  margin: 0 auto;
  position: relative;
  background: #F8F3EC;
  overflow: hidden;
}

/* soft warm light flares drifting behind the tree — script.js animates
   each flare's position/opacity every frame (initBackgroundGlow); these
   rules are just the first-paint / reduced-motion static positions */
.tree-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.tree-glow__flare {
  position: absolute;
  width: 42vw;
  height: 42vw;
  min-width: 280px;
  min-height: 280px;
  max-width: 560px;
  max-height: 560px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  transform: translate(-50%, -50%);
}
.tree-glow__flare:nth-child(1) { left: 18%; top: 22%; background: radial-gradient(circle, rgba(255,253,248,0.95), rgba(255,253,248,0) 70%); }
.tree-glow__flare:nth-child(2) { left: 74%; top: 58%; background: radial-gradient(circle, rgba(194,155,114,0.6), rgba(194,155,114,0) 70%); }
.tree-glow__flare:nth-child(3) { left: 45%; top: 84%; background: radial-gradient(circle, rgba(141,50,31,0.2), rgba(141,50,31,0) 70%); }

#tree-root { position: relative; z-index: 1; }

/* the tree's layout (nested rows, side branches, measured connector
   lines) assumes real screen width to breathe — below the phone
   breakpoint it can't lay out legibly, so swap it for a plain notice
   instead of shipping a broken/squished chart */
.tree-mobile-notice { display: none; }
@media (max-width: 640px) {
  .tree-glow, #tree-root { display: none; }
  .tree-mobile-notice {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.9rem;
    padding: 3rem 1.25rem;
  }
  .tree-mobile-notice__icon { color: var(--terracotta); }
  .tree-mobile-notice__title {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--ink);
  }
  .tree-mobile-notice__text {
    margin: 0;
    max-width: 34ch;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-soft);
  }
}
/* reserves a dedicated left gutter for a side branch's multi-line
   connector spine (see renderRaisaSiblingsView in script.js) — the
   spine routes to the left of the row's own content, and since that
   content is centered, it otherwise sits right at the row's own edge
   with no room to breathe, however its own margin is tuned */
#tree-root.side-branch-view { padding-left: 4.5rem; }
@media (max-width: 640px) {
  #tree-root.side-branch-view { padding-left: 2.5rem; }
}

.tree-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* hovering a card traces its connector lines down to its ancestors:
   every line dims except the ones on that person's own path, which
   brighten and thicken */
.connector-line {
  transition: opacity 240ms ease, stroke 240ms ease, stroke-width 240ms ease;
}
.tree-svg.is-tracing .connector-line { opacity: 0.15; }
.tree-svg.is-tracing .connector-line.is-traced {
  opacity: 1;
  stroke: #8D321F;
  stroke-width: 2.2;
}

/* the "which side of the family" prompt shown before any tree */
.side-chooser {
  text-align: center;
  padding: 1rem 0 2rem;
}
.side-chooser__intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin: 0 0 2.4rem;
}
.side-chooser__options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.side-chooser__link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.side-card {
  appearance: none;
  font-family: var(--font-sans);
  background: var(--paper);
  border: 1px solid rgba(194,155,114,0.35);
  border-radius: 20px;
  width: 260px;
  padding: 2.2rem 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(43,38,33,0.04);
  transition: transform 220ms var(--ease-out-soft), box-shadow 220ms var(--ease-out-soft), border-color 220ms var(--ease-out-soft);
}
@media (hover: hover) and (pointer: fine) {
  .side-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(43,38,33,0.12);
    border-color: rgba(141,50,31,0.32);
  }
}
.side-card:active { transform: translateY(-1px) scale(0.98); }
.side-card:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.side-card__avatar {
  width: 96px;
  height: 96px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(194,155,114,0.5);
}
.side-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-card__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 0.4rem;
}
.side-card__name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.28;
  color: var(--charcoal);
}
.side-card__surname {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ink-soft);
}

/* floating button that tracks the tree section while scrolling —
   pinned to the left-middle of the viewport, only shown once a side
   is picked and the tree itself is on screen (see initSideFab) */
.side-fab {
  position: fixed;
  left: 24px;
  top: 50%;
  z-index: 50;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  appearance: none;
  border: 1px solid rgba(194,155,114,0.45);
  border-radius: 999px;
  background: var(--paper);
  color: var(--terracotta);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.7rem 1.15rem 0.7rem 0.9rem;
  box-shadow: 0 10px 26px rgba(43,38,33,0.16);
  cursor: pointer;
  transition: box-shadow 200ms ease, border-color 200ms ease, opacity 200ms ease;
}
.side-fab[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .side-fab:hover { box-shadow: 0 14px 32px rgba(43,38,33,0.22); border-color: rgba(141,50,31,0.4); }
}
.side-fab:active { transform: translateY(-50%) scale(0.95); }
.side-fab:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.side-fab__icon {
  display: flex;
}
@media (max-width: 640px) {
  .side-fab { left: 10px; padding: 0.6rem 0.9rem 0.6rem 0.7rem; font-size: 0.74rem; }
}

.tree-row {
  position: relative;
  z-index: 1;
  padding: 4rem 0;
}

.tree-row__units {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 4.2rem 2.6rem;
}

.row-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.row-unit__people { position: relative; display: flex; align-items: center; gap: 0.6rem; }
.couple__sprig { flex-shrink: 0; }

/* an ex-spouse (broken bond) card — positioned off to the side rather
   than as a normal flex sibling, so it never widens this row-unit or
   shifts where its row centers (see personUnitHTML in script.js) */
.row-unit__ex {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
@media (max-width: 640px) {
  .row-unit__ex {
    position: static;
    transform: none;
    margin-left: 0;
    margin-top: 0.4rem;
    flex-direction: column;
  }
}

/* a unit's own children (e.g. cousins under an aunt/uncle) nested
   right below it with a short local tick, instead of a full row */
.unit-children { position: relative; margin-top: 32px; }
.unit-children::before {
  content: "";
  position: absolute;
  top: -32px; left: 50%;
  width: 1.5px; height: 32px;
  background: rgba(58,64,39,0.4);
  transform: translateX(-50%);
}
.unit-children__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* opens a side branch's own dedicated view (see renderRaisaSiblingsView
   in script.js) — styled as a card (reusing .card's own sizing/hover/
   focus behavior) so it reads as "one more relative to meet" sitting
   next to the person it branches off of, not as a UI chrome element */
.card--branch {
  appearance: none;
  font-family: inherit;
  color: inherit;
  border-style: dashed;
  border-color: rgba(141,50,31,0.4);
  background: var(--cream);
}
@media (hover: hover) and (pointer: fine) {
  .card--branch:hover { border-color: rgba(141,50,31,0.6); }
}
.card__branch-cta {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--terracotta);
}

@media (max-width: 640px) {
  .row-unit__people { flex-direction: column; gap: 0.4rem; }
  .tree-row { padding: 2.4rem 0; }
  /* everything below this width stacks into one column — left-align
     it instead of each level (a row's siblings, a unit's own nested
     kids) independently centering in its own available width, which
     is what was producing a different indent per level even though
     they're conceptually one flush list */
  .tree-row__units { gap: 2.8rem 1.4rem; justify-content: flex-start; }
  .row-unit { align-items: flex-start; }
  .unit-children { margin-top: 26px; }
  .unit-children::before { top: -26px; left: 0; transform: none; }
  .unit-children__row { justify-content: flex-start; }
}

/* ---------- cards ---------- */
.card {
  background: var(--paper);
  border: 1px solid rgba(194,155,114,0.35);
  border-radius: 16px;
  padding: 1.3rem 1.4rem;
  text-align: center;
  box-shadow: 0 1px 2px rgba(43,38,33,0.04);
  position: relative;
  cursor: pointer;
  transition: transform 220ms var(--ease-out-soft), box-shadow 220ms var(--ease-out-soft), border-color 220ms var(--ease-out-soft);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(43,38,33,0.10);
    border-color: rgba(141,50,31,0.32);
  }
}
.card:active { transform: translateY(-1px) scale(0.98); }
.card:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

.card__avatar {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 0.7rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream);
  border: 2px solid rgba(194,155,114,0.5);
}
.card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.card__role {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 0.5rem;
  white-space: nowrap;
}
.role-line { display: block; }
.role-line--sub {
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-soft);
  font-size: 0.95em;
}

.card__name {
  font-size: 1.1rem;
  line-height: 1.28;
  margin-bottom: 0.15rem;
  white-space: nowrap;
}
.name-line { display: block; }
.card__surname {
  margin: 0 0 0.55rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.card__surname.is-placeholder,
.name-line.is-placeholder { opacity: 0.45; }
.card__dates {
  /* borrows a little of the card's own side padding — the Cyrillic
     "ДД.ММ.РРРР" placeholder digits run visibly wider than real numerals
     at the same font-size, so a birth/death line built from placeholders
     can trip fitDateRanges' shrink-to-fit (script.js) purely from letter
     width, not from actually having more to say than a fully-known date;
     the extra room keeps it at the same full size those get */
  margin: 0 -12px;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
/* the birth(–death) line is never allowed to wrap — script.js shrinks
   its font just enough to fit instead (see fitDateRanges) */
.dates-line--range { white-space: nowrap; }
.dates-line--age { white-space: nowrap; }
.dates-line { display: block; }

/* fixed width (not max-width) so every card of a given size lines up
   as a uniform block, regardless of how short its content is */
.card--sm { width: 220px; }
.card--xs { width: 188px; padding: 0.9rem 1rem; }
.card--xs .card__avatar { width: 44px; height: 44px; }
.card--xs .card__name { font-size: 0.92rem; }
.card--xs .card__role { font-size: 0.62rem; }
.card--xs .card__surname { font-size: 0.78rem; }
.card--xs .card__dates { font-size: 0.68rem; letter-spacing: -0.01em; }

/* ---------- modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24,20,16,0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 220ms ease;
}
.modal.is-open .modal__backdrop { opacity: 1; }

.modal__panel {
  position: relative;
  background: var(--paper);
  border-radius: 22px;
  max-width: 380px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 2.2rem 1.8rem 1.8rem;
  text-align: center;
  box-shadow: 0 30px 60px rgba(24,20,16,0.35);
  opacity: 0;
  transform: scale(0.94) translateY(10px);
  transition: opacity 240ms var(--ease-out-soft), transform 240ms var(--ease-out-soft);
}
.modal.is-open .modal__panel { opacity: 1; transform: scale(1) translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .modal__backdrop, .modal__panel { transition: none; }
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(194,155,114,0.4);
  background: var(--cream);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.modal__close:hover { background: var(--beige); color: var(--paper); }
.modal__close:active { transform: scale(0.92); }

.modal__avatar {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(194,155,114,0.5);
}
.modal__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.modal__role {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 0.4rem;
}
.modal__name { font-size: 1.4rem; margin: 0 0 0.1rem; }
.modal__name .name-line { display: block; }
.modal__surname { color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 0.6rem; }
.modal__surname.is-placeholder { opacity: 0.5; }
.modal__dates { font-size: 0.92rem; margin: 0 0 1.2rem; }

.modal__bio-wrap {
  border-top: 1px solid rgba(194,155,114,0.3);
  padding-top: 1.1rem;
  text-align: left;
}
.modal__bio-wrap .eyebrow { display: block; }
.modal__bio { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--ink); }
.modal__bio.is-placeholder { color: var(--ink-soft); font-style: italic; }

/* ---------- footer ---------- */
.footer {
  padding: 1.8rem 1.5rem 1.6rem;
  color: var(--paper);
  background: var(--charcoal);
}
.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
}
.footer p {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
}
.footer__copyright {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.8rem;
  color: var(--beige);
  opacity: 0.85;
}
.footer__copyright a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(194,155,114,0.5);
  text-underline-offset: 2px;
  transition: text-decoration-color 160ms var(--ease-out);
}
.footer__copyright a:hover,
.footer__copyright a:focus-visible { text-decoration-color: var(--beige); }

/* ---------- responsive tweaks ---------- */
@media (max-width: 640px) {
  .tree-wrap { padding: 2.75rem 1rem; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
}