/* ============================================================================
   Base — design tokens, reset, typography and layout primitives.
   Everything visual on the public site starts from these values.
   ========================================================================== */

/* Metric-matched fallbacks.
   The two web fonts arrive from Google after first paint, and the swap from a
   fallback of different proportions reflowed every block of text on the page —
   measured at 0.36 to 0.49 CLS on the listing pages, which is squarely in the
   range Core Web Vitals calls poor. Blocking the fonts dropped those to 0.01.

   These override the fallback's metrics so it occupies the same space as the
   real face, and the swap becomes invisible. size-adjust is the measured ratio
   of the two fonts' advance widths at the same size; the ascent and descent
   overrides come from the real font's own box. Re-measure if the families
   change. */
@font-face{
  font-family:"Fraunces Fallback";
  src:local("Georgia"),local("Times New Roman"),local("Times");
  size-adjust:86.27%;
  ascent-override:98%;
  descent-override:26%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Public Sans Fallback";
  src:local("Helvetica Neue"),local("Helvetica"),local("Arial");
  size-adjust:104.24%;
  ascent-override:95%;
  descent-override:23%;
  line-gap-override:0%;
}

:root{
  /* ink & paper */
  --ink:#2B2430;
  --ink-soft:#5A4F60;
  --ink-faint:#8C8192;
  --paper:#FBF7F2;
  --paper-2:#F2EDE5;
  --paper-3:#EAE3D8;

  /* brand */
  --moss:#4F6B54;
  --moss-deep:#3A5040;
  --moss-tint:#EAF0E9;
  --apricot:#D98E52;
  --apricot-deep:#B46B32;
  --amber:#E6B47C;
  --rose:#C2867F;

  /* state */
  --danger:#B5544B;
  --danger-bg:#FBEEEC;
  --success:#4F6B54;
  --success-dot:#5E9E5A;

  /* dark sections — page heroes, the CTA band and the footer */
  --hero-1:#2F2A3C;
  --hero-2:#4E4356;
  --hero-3:#6A5A5F;
  --hero-accent:#F0C48B;
  --on-dark:#F7F1E9;
  --footer-bg:#241E29;

  /* structure */
  --line:rgba(43,36,48,.14);
  --line-soft:rgba(43,36,48,.08);
  --card:rgba(251,247,242,.94);
  --shadow:0 26px 60px -34px rgba(43,36,48,.5);
  --shadow-sm:0 10px 26px -18px rgba(43,36,48,.45);
  --radius:6px;
  --radius-lg:12px;

  /* type */
  --display:"Fraunces","Fraunces Fallback",Georgia,"Times New Roman",serif;
  --body:"Public Sans","Public Sans Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;

  --pad:clamp(20px,5vw,64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-weight:300;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:300;line-height:1.08;margin:0;letter-spacing:-.015em}
em{font-style:italic}
a{color:inherit}
img{max-width:100%;height:auto}
hr{border:0;border-top:1px solid var(--line);margin:0}
:focus-visible{outline:2px solid var(--moss);outline-offset:2px}

/* --------------------------------------------------------------- layout */
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.wrap-narrow{max-width:860px;margin:0 auto;padding:0 var(--pad)}

.sec{padding:clamp(64px,9vw,120px) 0}
.sec-sm{padding:clamp(44px,6vw,76px) 0}

.tint{background:var(--paper-2)}
.tint-3{background:var(--paper-3)}
.dark{background:var(--ink);color:var(--on-dark)}
.dark p{color:rgba(243,237,228,.76)}
.moss{background:var(--moss-deep);color:var(--on-dark)}
.moss p{color:rgba(241,237,228,.8)}

.split{display:grid;gap:clamp(30px,5vw,72px)}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;align-items:start}}
.split-wide{display:grid;gap:clamp(30px,5vw,64px)}
@media(min-width:980px){.split-wide{grid-template-columns:1.35fr 1fr;align-items:start}}

.cols{display:grid;gap:24px}
@media(min-width:640px){.cols-2{grid-template-columns:1fr 1fr}}
@media(min-width:760px){.cols-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:640px) and (max-width:899px){.cols-4{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.cols-4{grid-template-columns:repeat(4,1fr)}}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* hairline grid — the house pattern from the original homepage */
.hgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:700px){.hgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.hgrid.three{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.hgrid.four{grid-template-columns:repeat(4,1fr)}}

/* ----------------------------------------------------------- typography */
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--moss);margin:0}
.eyebrow.light{color:var(--amber)}
.dark .eyebrow,.moss .eyebrow{color:var(--amber)}

.sechead{max-width:64ch;margin-bottom:clamp(34px,5vw,58px)}
.sechead h2{font-size:clamp(2rem,4.6vw,3.4rem);margin:14px 0 0}
.sechead h2 em{color:var(--moss)}
.dark .sechead h2 em,.moss .sechead h2 em{color:var(--amber)}
.sechead p{color:var(--ink-soft);margin:18px 0 0;max-width:56ch}
.sechead.center{margin-left:auto;margin-right:auto;text-align:center}
.sechead.center p{margin-left:auto;margin-right:auto}

.prose p{color:var(--ink-soft);margin:0 0 18px;max-width:66ch}
.prose p:last-child{margin-bottom:0}
.prose h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin:44px 0 16px}
.prose h3{font-size:1.3rem;margin:32px 0 12px}
.prose ul,.prose ol{color:var(--ink-soft);padding-left:22px;margin:0 0 18px}
.prose li{margin-bottom:8px}
.prose a{color:var(--moss);font-weight:500}

.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}
.skeleton{
  background:linear-gradient(90deg,var(--paper-2),var(--paper-3),var(--paper-2));
  background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:6px;color:transparent;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes pulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.5);opacity:0}}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}