/* ==========================================================================
   In Prima Persona
   Palette derived from the client's own logo (see clients/inprimapersona/brand.md).
   ========================================================================== */

:root{
  /* logo-derived */
  --ink:#282828;
  --ink-soft:#5C5C5C;                  /* 6.46:1 on --paper */
  --ink-faint:#6B6B6B;                 /* 5.15:1 — was #8A8A8A at 3.09:1, failed AA */
  --cream:#F0E6BE;
  --blush:#E6C8C8;
  --sage:#B4D2C8;
  --lilac:#D2BEC8;
  --sky:#AAC8DC;

  /* grounds */
  --paper:#FBFAF7;
  --paper-warm:#F6F2E9;
  --line:#E4DFD4;
  --white:#FFFFFF;

  --maxw:1200px;
  --gutter:1.25rem;
  --radius:2px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* MOBILE FIRST spacing scale. These are the phone values; the breakpoints below
     grow them. Previously the mobile layout was desktop spacing with a smaller clamp,
     which is why the page scrolled forever. */
  --sp-section:2.5rem;      /* vertical padding inside a section */
  --sp-head:1.5rem;         /* section heading -> content */
  --sp-stack:1.75rem;       /* gap between stacked blocks */
  --sp-hero-top:1.75rem;
  --sp-hero-bottom:2.5rem;
}

@media (min-width:640px){
  :root{
    --gutter:2rem;
    --sp-section:3.5rem; --sp-head:2rem; --sp-stack:2.25rem;
    --sp-hero-top:2.5rem; --sp-hero-bottom:3rem;
  }
}
@media (min-width:1000px){
  :root{
    --gutter:3rem;
    --sp-section:5.5rem; --sp-head:2.75rem; --sp-stack:3.25rem;
    --sp-hero-top:3.5rem; --sp-hero-bottom:4.5rem;
  }
}

/* Justify needs ~55-60+ characters per line to distribute space evenly; below
   that a phone-width column gets bad, uneven word-gaps. Applying it everywhere
   the mobile column is narrower than that just to have Italian hyphenation
   is what created the ragged text on the philosophy grid, LexWellness intro,
   accordions and the chi-sono/service articles — left-align by default, and
   only justify once the column is wide enough to look clean. */
@media (min-width:700px){
  .philosophy-grid p, .article p, .intro-body, .acc-body p{
    text-align:justify; hyphens:auto;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;              /* was 15.1px @300 on the live site */
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-weight:300;
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
/* The clamp MINIMUM is the phone value. These were desktop-sized minimums:
   h1 landed at 41.6px on a 390px screen, which dominated every service page. */
h1{ font-size:clamp(2.1rem,7vw,4.4rem); }
h2{ font-size:clamp(1.6rem,4.2vw,2.9rem); }
h3{ font-size:clamp(1.2rem,2.1vw,1.5rem); line-height:1.25; }
p{ margin:0 0 1.15em; max-width:68ch; }
a{ color:inherit; }

/* sticky header would otherwise swallow the top of any anchor target */
[id]{ scroll-margin-top:104px; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* focus — visible on everything, always */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2.5px solid var(--ink);
  outline-offset:3px;
  border-radius:var(--radius);
}

.skip{
  position:absolute; left:var(--gutter); top:-100px; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:.85rem 1.4rem; border-radius:var(--radius);
  font-size:.95rem; text-decoration:none;
  transition:top .18s var(--ease);
}
.skip:focus{ top:1rem; }

/* ===================== header ===================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,250,247,.88);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; min-height:76px;
}
.brand{
  display:flex; align-items:center; gap:.7rem; text-decoration:none; flex-shrink:0;
  min-height:44px;                        /* keep the logo link a legal touch target */
}
.brand img{ width:42px; height:42px; display:block; }
.brand span{
  font-family:"Fraunces",Georgia,serif; font-size:1.22rem;
  font-weight:400; letter-spacing:-.01em; white-space:nowrap;
}

/* desktop nav — ALWAYS visible ≥900px. This is audit finding F-02. */
.nav{ display:none; }
@media (min-width:900px){
  .nav{ display:flex; align-items:center; gap:.35rem; }
  .nav a{
    text-decoration:none; font-size:.94rem; color:var(--ink-soft);
    padding:.75rem .8rem;                 /* ≥44px tall target */
    border-radius:var(--radius);
    transition:color .18s var(--ease), background .18s var(--ease);
    white-space:nowrap;
  }
  .nav a:hover{ color:var(--ink); background:var(--paper-warm); }
  .nav a[aria-current="page"]{ color:var(--ink); box-shadow:inset 0 -2px 0 var(--ink); }
  .nav .cta{
    margin-left:.6rem; background:var(--ink); color:var(--paper);
    padding:.75rem 1.35rem;
  }
  .nav .cta:hover{ background:#000; color:var(--paper); }
  .menu-btn{ display:none; }
}

/* mobile menu — 44px minimum everywhere. Audit finding F-03.
   Icon-only: the word "Menu" clipped on real devices at large text sizes, because the
   brand block does not shrink and squeezed the button. */
.menu-btn{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex-shrink:0;
  background:none; border:1px solid var(--line); border-radius:var(--radius);
  padding:0; cursor:pointer; color:var(--ink);
}
.menu-btn .bars{
  display:flex; flex-direction:column; justify-content:center;
  gap:5px; width:20px;
}
.menu-btn .bars span{
  display:block; height:1.5px; width:100%;
  background:currentColor; border-radius:2px;
  transition:transform .22s var(--ease), opacity .18s var(--ease);
}
.menu-btn[aria-expanded="true"] .bars span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] .bars span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.mobile-nav{
  display:none;
  border-top:1px solid var(--line);
  background:var(--paper);
  padding:.5rem var(--gutter) 1.5rem;
}
.mobile-nav.open{ display:block; }
/* must come AFTER .menu-btn's own block, or the base rule wins on equal specificity */
@media (min-width:900px){
  .menu-btn{ display:none; }
  .mobile-nav{ display:none!important; }
}
.mobile-nav a{
  display:flex; align-items:center;
  min-height:52px;                        /* was 19px on the live site */
  padding:.5rem .25rem;
  text-decoration:none; font-size:1.02rem;
  border-bottom:1px solid var(--line);
}
.mobile-nav a:last-child{ border-bottom:none; }
.mobile-nav .cta{
  margin-top:1rem; background:var(--ink); color:var(--paper);
  justify-content:center; border-radius:var(--radius); border-bottom:none;
}

/* ===================== hero ===================== */
.hero{ padding:var(--sp-hero-top) 0 var(--sp-hero-bottom); }
.hero-grid{
  display:grid; gap:var(--sp-stack);
  grid-template-columns:1fr; align-items:center;
}
@media (min-width:900px){
  /* narrower image column keeps the portrait from over-running the text block,
     which was leaving ~137px of dead space above and below it */
  .hero-grid{ grid-template-columns:1.18fr .82fr; }
}
.eyebrow{
  font-size:.8rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500; margin:0 0 .8rem;
  line-height:1.45;
}
.hero h1{ margin-bottom:.9rem; }
.hero .lede{
  font-size:1.06rem; line-height:1.55;
  color:var(--ink-soft); max-width:34ch; margin-bottom:1.5rem;
}
@media (min-width:640px){
  .eyebrow{ font-size:.82rem; letter-spacing:.14em; margin-bottom:1.3rem; }
  .hero h1{ margin-bottom:1.4rem; }
  .hero .lede{ font-size:clamp(1.1rem,1.7vw,1.28rem); line-height:1.6; margin-bottom:2.1rem; }
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.85rem; }
/* on narrow screens the two CTAs were ragged and different widths */
@media (max-width:539px){
  .hero-actions{ display:grid; grid-template-columns:1fr; gap:.75rem; }
  .hero-actions .btn{ width:100%; }
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:.75rem 1.6rem;
  border-radius:var(--radius); text-decoration:none;
  font-size:1rem; font-weight:500; border:1.5px solid var(--ink);
  transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:#000; transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); transform:translateY(-1px); }

.portrait{ position:relative; }
.portrait img{
  width:100%; height:auto; display:block;
  border-radius:var(--radius);
  aspect-ratio:5/6; object-fit:cover; object-position:center 15%;
}
@media (max-width:899px){
  .portrait img{ aspect-ratio:4/3; object-position:center 20%; }
}
.portrait::after{
  content:""; position:absolute; inset:0;
  border:1px solid rgba(40,40,40,.09); border-radius:var(--radius);
  pointer-events:none;
}
.portrait-cap{
  margin:.9rem 0 0; font-size:.88rem; color:var(--ink-faint);
  max-width:none;
}

/* petal rule — the logo palette, used as a hairline */
.petals{ display:flex; height:4px; width:100%; }
.petals span{ flex:1; }
.petals span:nth-child(1){ background:var(--cream); }
.petals span:nth-child(2){ background:var(--blush); }
.petals span:nth-child(3){ background:var(--sage); }
.petals span:nth-child(4){ background:var(--lilac); }
.petals span:nth-child(5){ background:var(--sky); }

/* ===================== sections ===================== */
.section{ padding:var(--sp-section) 0; }
.section-warm{ background:var(--paper-warm); }
/* rhythm: the quote is a breath, not a chapter — tighten it; give the closing CTA more room */
.section-quote{ padding:calc(var(--sp-section) * .8) 0; }
.cta-band{ padding:calc(var(--sp-section) * 1.15) 0; }
.section-head{ max-width:60ch; margin-bottom:var(--sp-head); }
.section-head h2{ margin-bottom:1rem; }
.section-head p{ color:var(--ink-soft); font-size:1.06rem; max-width:56ch; }

.philosophy-grid{
  display:grid; gap:var(--sp-stack);
  grid-template-columns:1fr;
}
@media (min-width:820px){
  .philosophy-grid{ grid-template-columns:repeat(3,1fr); }
}
.philosophy-grid p{
  margin:0; font-size:1.0625rem; color:var(--ink-soft);
}
.philosophy-grid .num{
  font-family:"Fraunces",Georgia,serif; font-size:1rem;
  color:var(--ink-faint); display:block; margin-bottom:.6rem;
  padding-bottom:.6rem; border-bottom:1px solid var(--line);
}
@media (min-width:640px){
  .philosophy-grid .num{ font-size:1.1rem; margin-bottom:.9rem; padding-bottom:.9rem; }
}
/* desktop-only hover focus: a lifted box per column, offset by a matching
   negative margin so the grid track width never shifts on hover */
@media (min-width:820px){
  .philosophy-grid > div{
    padding:1.35rem; margin:-1.35rem;
    border-radius:var(--radius);
    transition:background-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
  }
  .philosophy-grid > div:hover{
    background:var(--paper);
    box-shadow:0 12px 32px rgba(40,40,40,.07);
    transform:translateY(-2px);
  }
  .philosophy-grid > div:hover .num{ color:var(--ink); border-bottom-color:var(--ink); }
}

/* service cards */
.cards{
  display:grid; gap:clamp(1.5rem,3vw,2.2rem);
  grid-template-columns:1fr;
}
/* 2-up on tablet, 3-up only when a third column can still hold a readable measure.
   At 760px a 3-up grid gave a 21ch column — unreadable. */
@media (min-width:620px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .cards{ grid-template-columns:repeat(3,1fr); } }
/* PHONE: horizontal list card. Three stacked vertical cards cost 1443px of scroll —
   nearly 40% of the page — for three links. Desktop keeps the vertical card below. */
.card{
  position:relative;
  display:grid; grid-template-columns:3px 96px 1fr;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover{ box-shadow:0 12px 32px rgba(40,40,40,.07); }
.card-accent{ height:100%; }
/* whole card is the target; the inner link keeps the accessible name */
.card .more::after{ content:""; position:absolute; inset:0; }
.card-img{ overflow:hidden; height:100%; }
.card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-body{ padding:.95rem 1rem; display:flex; flex-direction:column; justify-content:center; }
.card-body p{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; margin-bottom:.5rem;
}
/* reserve two title lines so body copy starts on the same baseline across the row */
.card h3{ font-size:1.15rem; margin-bottom:.3rem; }
.card p{ font-size:1rem; color:var(--ink-soft); }
.card .more{
  margin-top:0; text-decoration:none; font-size:.95rem; font-weight:500;
  display:inline-flex; align-items:center; gap:.4rem; min-height:0;
}

/* TABLET AND UP: back to the vertical image card */
@media (min-width:620px){
  .card{ display:flex; flex-direction:column; }
  .card:hover{ transform:translateY(-3px); }
  .card-accent{ height:6px; }
  .card-img{ aspect-ratio:3/2; height:auto; }
  .card-body{ padding:1.6rem 1.5rem 1.7rem; justify-content:flex-start; flex:1; }
  .card-body p{
    -webkit-line-clamp:none; display:block; overflow:visible;
    font-size:1rem; margin-bottom:1.4rem;
    text-align:justify; hyphens:auto;
  }
  .card h3{ font-size:clamp(1.25rem,1.7vw,1.5rem); margin-bottom:.75rem; min-height:calc(2 * 1.2em); }
  .card .more{ margin-top:auto; font-size:.95rem; min-height:44px; }
}
.card .more span{ transition:transform .2s var(--ease); }
.card:hover .more span{ transform:translateX(4px); }

/* pull quote */
.quote{ text-align:center; max-width:760px; margin-inline:auto; }
.quote blockquote{
  margin:0; font-family:"Fraunces",Georgia,serif;
  font-size:clamp(1.45rem,3.6vw,2.6rem); font-weight:300;
  line-height:1.3; letter-spacing:-.015em;
}

/* CTA band */
.cta-band{ background:var(--ink); color:var(--paper); text-align:center; }
.cta-band h2{ margin-bottom:1.1rem; }
.cta-band p{
  margin-inline:auto; color:rgba(251,250,247,.78);
  font-size:1.08rem; margin-bottom:2.1rem; max-width:46ch;
}
.cta-band .btn{
  background:var(--paper); color:var(--ink); border-color:var(--paper);
}
.cta-band .btn:hover{ background:var(--cream); border-color:var(--cream); }

/* article body (service pages) */
.article{ max-width:68ch; }
.article h2{ margin:2.6rem 0 1rem; }
.article h3{ margin:2.2rem 0 .85rem; }
.article p{ font-size:1.06rem; }
.article > p:first-of-type{
  font-size:clamp(1.12rem,1.9vw,1.32rem);
  line-height:1.55; color:var(--ink);
}
/* padding-BLOCK only: the `padding: x 0 y` shorthand here silently reset .wrap's
   horizontal gutter to 0, pushing the crumb, eyebrow and h1 flush to the screen edge. */
.page-head{ padding-block:var(--sp-section) var(--sp-head); }
.page-head .eyebrow{ margin-bottom:1rem; }
.crumb{
  font-size:.95rem; color:var(--ink-faint); text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px; gap:.4rem;
}
.crumb:hover{ color:var(--ink); }

/* ===================== chi sono ===================== */
.intro-body{
  color:var(--ink-soft); font-size:1.0625rem; line-height:1.7; max-width:46ch;
}
.pullquote{
  margin:2.5rem 0 0; padding:1.75rem 0 0;
  border-top:1px solid var(--line);
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(1.2rem,2.2vw,1.6rem); font-weight:300; line-height:1.4;
  color:var(--ink); max-width:58ch;
}
.pullquote cite{
  display:block; margin-top:.9rem;
  font-family:"Inter",sans-serif; font-size:.9rem; font-style:normal;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
}

/* ===================== blog feed ===================== */
.section-head-row{ max-width:none; display:flex; flex-wrap:wrap; gap:1.25rem 2rem;
  align-items:end; justify-content:space-between; }
.section-head-row > div{ max-width:56ch; }
.btn-sm{ min-height:44px; padding:.6rem 1.2rem; font-size:.95rem; }
.posts-empty{ display:none; }
.posts-status{ color:var(--ink-faint); font-size:1rem; margin:0; }
.posts.posts-none{
  display:block; background:var(--white); border:1px dashed var(--line);
  border-radius:var(--radius); padding:1.5rem;
}

.posts{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:700px){ .posts{ grid-template-columns:repeat(3,1fr); gap:1.5rem; } }

.post{
  display:flex; flex-direction:column; gap:.45rem;
  text-decoration:none; color:inherit;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.25rem;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.post:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(40,40,40,.07); }
.post-date{ font-size:.85rem; color:var(--ink-faint); letter-spacing:.02em; }
.post-title{
  font-family:"Fraunces",Georgia,serif; font-size:1.15rem; font-weight:400;
  line-height:1.3; letter-spacing:-.01em;
}
.post-excerpt{
  font-size:1rem; color:var(--ink-soft); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.post-more{ margin-top:.35rem; font-size:.95rem; font-weight:500; }

/* ===================== booking ===================== */
.booking{ display:grid; gap:2rem; grid-template-columns:1fr; align-items:start; }
@media (min-width:820px){ .booking{ grid-template-columns:1.15fr .85fr; gap:3.5rem; } }
.booking-copy h2{ margin:.4rem 0 1rem; }
.booking-copy p{ color:var(--ink-soft); max-width:44ch; margin-bottom:1.75rem; }
.is-placeholder{ opacity:.5; cursor:not-allowed; }

.hours{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; }
.hours h3{
  font-family:"Inter",sans-serif; font-size:.82rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint);
  margin:0 0 1rem;
}
.hours-list{ margin:0; }
.hours-list > div{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.6rem 0; border-bottom:1px solid var(--line);
  font-size:1rem;
}
.hours-list > div:last-child{ border-bottom:none; }
.hours-list dt{ color:var(--ink); }
.hours-list dd{ margin:0; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.hours-list .off dd{ color:var(--ink-faint); }
.hours-note{ margin:1rem 0 0; font-size:.9rem; color:var(--ink-faint); }

/* ===================== accordions =====================
   Native <details>: works with JS disabled, keyboard-operable, announced by
   screen readers as an expandable group. No library. */
.accordions{ max-width:68ch; margin-top:2rem; }
.acc{ border-top:1px solid var(--line); }
.acc:last-child{ border-bottom:1px solid var(--line); }
.acc summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  padding:1.05rem 0; min-height:44px;
  font-family:"Fraunces",Georgia,serif;
  font-size:1.12rem; font-weight:400; line-height:1.3;
  color:var(--ink);
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::marker{ content:""; }
.acc summary:hover{ color:#000; }
.acc summary:focus-visible{ outline:2.5px solid var(--ink); outline-offset:3px; }
/* the chevron is CSS, not markup: <summary> takes ONE heading element, so an
   inline <svg> alongside an <h2> would be invalid content */
.acc summary::after{
  content:""; flex-shrink:0;
  width:9px; height:9px; margin-right:3px;
  border-right:1.7px solid var(--ink-faint);
  border-bottom:1.7px solid var(--ink-faint);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .24s var(--ease);
}
.acc[open] summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.acc[open] summary{ color:#000; }
/* the heading inherits the summary's type; it is a landmark, not a size change */
.acc-title{
  font-family:inherit; font-size:inherit; font-weight:inherit;
  line-height:inherit; letter-spacing:inherit; color:inherit; margin:0;
}
.acc-body{ padding:0 0 1.4rem; }
.acc-body p{
  font-size:1.0625rem; color:var(--ink-soft);
}
.acc-body p:last-child{ margin-bottom:0; }
.acc-body > p:first-child{ margin-top:0; }
@media (min-width:640px){
  .acc summary{ font-size:1.22rem; padding:1.2rem 0; }
}

/* ===================== footer ===================== */
.site-footer{
  background:var(--paper-warm); border-top:1px solid var(--line);
  padding:var(--sp-section) 0 1.5rem; margin-top:0;
}
/* two link columns side by side on phones instead of three stacked blocks */
.footer-grid{
  display:grid; gap:1.5rem 1.25rem; margin-bottom:1.5rem;
  grid-template-columns:repeat(2,1fr);
}
.footer-brand{ grid-column:1 / -1; }
@media (min-width:760px){
  .footer-grid{ gap:2.5rem; margin-bottom:2.5rem; grid-template-columns:1.4fr 1fr 1fr; }
  .footer-brand{ grid-column:auto; }
}
@media (min-width:760px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.footer-grid h4{
  font-family:"Inter",sans-serif; font-size:.82rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint);
  margin:0 0 .75rem;
}
.footer-grid ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.35rem;
}
.footer-grid li a{
  display:inline-flex; align-items:center; min-height:44px;
  text-decoration:none; color:var(--ink-soft); font-size:1rem;
}
.footer-grid li a:hover{ color:var(--ink); }
.footer-brand p{ color:var(--ink-soft); font-size:1rem; max-width:38ch; }
.footer-legal{
  border-top:1px solid var(--line); padding-top:1.6rem;
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between;
  font-size:.9rem; color:var(--ink-faint);
}
.footer-legal p{ margin:0; max-width:60ch; }