/* =====================================================================
   PARKER & PARKER — Homepage Redesign
   Design system v3 — tokens + LOCKED components
   TYPE: ONE serif throughout — Goudy Old Style (Adobe Fonts).
     Dev fallback: Sorts Mill Goudy (Google) — lacks bold; not the production face.
     No sans-serif in the reading experience. Italic = accent, same face/size/color.
   COLOR: cream ground; deep near-black green #12301f as a RESTRAINED ACCENT only.
   ===================================================================== */

:root{
  /* ---- Color: deep oiled-leather green #12301f — ACCENT ONLY (never a large flat fill) ---- */
  --pp-green:        #12301f;  /* hairlines, kicker marks, stars, dividers, footer/end-card */
  --pp-green-deep:   #0d2417;  /* darker only — hover/depth */
  --pp-green-dark:   #12301f;
  --pp-cream:        #F5F0E8;
  --pp-paper:        #FBF8F2;
  --pp-white:        #FFFFFF;
  --pp-walnut:       #5D4037;
  --pp-ink:          #2A241F;
  --pp-ink-soft:     #6B6056;
  --pp-border:       #E2D9C5;
  --pp-border-soft:  #ECE4D2;
  --pp-charcoal:     #1C1813;  /* near-black ground for B&W photo sections */

  /* ---- Type family — ONE serif throughout (Goudy Old Style) ---- */
  --pp-serif-display: 'goudy-old-style', 'Sorts Mill Goudy', 'Goudy Old Style', Georgia, 'Times New Roman', serif;
  --pp-serif-body:    'goudy-old-style', 'Sorts Mill Goudy', 'Goudy Old Style', Georgia, 'Times New Roman', serif;
  /* nav/labels/eyebrows/buttons all use the SAME serif — differentiated by case + tracking, not face */
  --pp-nav:           'goudy-old-style', 'Sorts Mill Goudy', 'Goudy Old Style', Georgia, serif;
  --pp-sans:          'goudy-old-style', 'Sorts Mill Goudy', 'Goudy Old Style', Georgia, serif;
  /* quiet humanist reserved ONLY for pure UI plumbing (input text, legal microcopy) — never a grotesque */
  --pp-ui:            'Albert Sans', system-ui, sans-serif;

  /* ---- Type scale (recommended defaults; H1 follows existing theme) ---- */
  --pp-text-micro:    11px;
  --pp-text-small:    13px;
  --pp-text-base:     17px;
  --pp-text-lg:       19px;
  --pp-text-h3:       24px;
  --pp-text-h2:       32px;
  --pp-text-h1:       52px;
  --pp-text-display:  64px;

  --pp-lh-tight:1.06; --pp-lh-snug:1.18; --pp-lh-normal:1.6; --pp-lh-loose:1.78;
  --pp-ls-eyebrow:0.24em; --pp-ls-heading:0; --pp-ls-button:0.18em; --pp-ls-nav:0.18em;

  --pp-s-1:4px; --pp-s-2:8px; --pp-s-3:12px; --pp-s-4:16px; --pp-s-5:24px;
  --pp-s-6:32px; --pp-s-7:48px; --pp-s-8:64px; --pp-s-9:96px; --pp-s-10:128px;

  --pp-radius-sm:3px; --pp-radius:4px; --pp-radius-lg:6px;
  --pp-shadow-sm:0 2px 8px rgba(40,30,20,0.08);
  --pp-shadow:0 14px 40px rgba(40,30,20,0.18);
  --pp-shadow-lg:0 22px 60px rgba(0,0,0,0.35);

  --pp-glass-dark-bg:rgba(245,240,232,0.10);
  --pp-glass-dark-border:rgba(245,240,232,0.22);
  --pp-glass-light-bg:rgba(255,255,255,0.55);
  --pp-glass-light-border:rgba(93,64,55,0.20);
  --pp-glass-blur:blur(16px) saturate(120%);

  /* layout */
  --maxw:1240px;
  --gutter:clamp(20px,5vw,84px);

  /* fluid display sizes for hero/section headings */
  --fs-h1: clamp(40px, 5.4vw, 66px);
  --fs-h2: clamp(28px, 3.4vw, 44px);
}

/* convenience aliases (kept short for layout css) */
:root{
  --green:var(--pp-green); --green-deep:var(--pp-green-deep); --green-deepest:var(--pp-green-dark);
  --cream:var(--pp-cream); --paper:var(--pp-paper); --white:var(--pp-white);
  --walnut:var(--pp-walnut); --ink:var(--pp-ink); --ink-soft:var(--pp-ink-soft);
  --border:var(--pp-border); --serif:var(--pp-serif-display); --serif-text:var(--pp-serif-body); --sans:var(--pp-sans);
  --cream-90:rgba(245,240,232,.92); --cream-70:rgba(245,240,232,.72); --cream-45:rgba(245,240,232,.46);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--pp-sans); font-size:var(--pp-text-base);
  line-height:var(--pp-lh-normal); color:var(--pp-ink); background:var(--pp-paper);
  font-feature-settings:"kern" 1,"liga" 1; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---------- DISPLAY HEADINGS (Caslon 540 — weight 400, mixed case) ---------- */
.h1{ font-family:var(--pp-serif-display); font-weight:400; font-size:var(--fs-h1);
  line-height:1.04; letter-spacing:-0.005em; margin:0; text-wrap:balance; text-transform:none; }
.h2-display{ font-family:var(--pp-serif-display); font-weight:400; font-size:var(--fs-h2);
  line-height:1.12; letter-spacing:0; margin:0; text-wrap:balance; text-transform:none; }
.lead{ font-family:var(--pp-sans); font-size:var(--pp-text-lg); line-height:1.6; }
.prose p{ margin:0 0 1.05em; max-width:64ch; text-wrap:pretty; }
.prose p:last-child{ margin-bottom:0; }

/* =====================================================================
   LOCKED COMPONENTS — implement exactly as written (brief §5.2)
   ===================================================================== */

/* ---- Eyebrow: ONE treatment (Goudy small-caps overline — walnut) ---- */
.pp-eyebrow{
  font-family:var(--pp-serif-body);
  font-size:12px;
  font-weight:400;
  letter-spacing:var(--pp-ls-eyebrow);
  text-transform:uppercase;
  color:var(--pp-walnut);
  display:block;
  margin:0 0 var(--pp-s-4);
}
/* contrast-safe eyebrow variants for dark/green surfaces (color only) */
.pp-eyebrow--light{ color:var(--cream-70); }

/* ---- Link inside heading: invisible at rest, gentle hover ---- */
h2 a, h3 a, .pp-headlink{ color:inherit; text-decoration:none; background:none; border-bottom:none; }
h2 a:hover, h3 a:hover, .pp-headlink:hover{ color:var(--pp-green-deep); transition:color .2s ease; }
.on-dark h2 a:hover, .on-dark h3 a:hover{ color:var(--pp-white); }

/* ---- Heading hierarchy (Goudy Old Style — weight 400, mixed case) ---- */
h2, .pp-h2{ font-family:var(--pp-serif-display); font-weight:400; font-size:var(--pp-text-h2);
  line-height:var(--pp-lh-snug); letter-spacing:var(--pp-ls-heading); text-transform:none; color:var(--pp-ink); margin:0; }
h3, .pp-h3{ font-family:var(--pp-serif-body); font-weight:400; font-size:var(--pp-text-h3);
  line-height:var(--pp-lh-snug); text-transform:none; color:var(--pp-ink); margin:0; }

/* ---- Body / prose (Goudy Old Style) ---- */
.pp-prose{ font-family:var(--pp-serif-body); font-size:var(--pp-text-lg);
  line-height:1.6; color:var(--pp-ink); }
.pp-prose em, .accent-italic{ font-style:italic; }   /* italic = the single accent move */

/* ---- Form field (quiet humanist UI plumbing — never a grotesque) ---- */
.pp-field{
  width:100%; font-family:var(--pp-ui); font-size:15px; padding:12px 13px;
  border:1px solid var(--pp-border); border-radius:var(--pp-radius-sm);
  background:var(--pp-white); color:var(--pp-ink);
}
.pp-field::placeholder{ color:#9A9080; }
.pp-field:focus{ outline:none; border-color:var(--pp-green); box-shadow:0 0 0 2px rgba(18,48,31,0.18); }

/* ---- Select ---- */
.pp-select{
  appearance:none; -webkit-appearance:none; padding-right:32px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--pp-green-deep) 50%),
    linear-gradient(135deg, var(--pp-green-deep) 50%, transparent 50%);
  background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}

/* ---- Submit button: primary CTA — ink fill, cream text; green only on hover ---- */
.pp-btn-primary{
  display:inline-block; width:100%; background:var(--pp-ink); color:var(--pp-cream);
  border:0; font-family:var(--pp-serif-body); font-weight:400; font-size:15px;
  letter-spacing:0.16em; text-transform:uppercase; padding:16px 28px; border-radius:var(--pp-radius-sm);
  cursor:pointer; transition:background .15s ease; text-align:center; text-decoration:none; }
.pp-btn-primary:hover{ background:var(--pp-green); }
.pp-btn-primary--auto{ width:auto; } /* layout composition for inline page CTAs */

/* ---- Trust bar cell ---- */
.pp-trust-bar{ display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--pp-border); border-bottom:1px solid var(--pp-border); }
.pp-trust-cell{ padding:var(--pp-s-5) var(--pp-s-4); text-align:center;
  border-right:1px solid var(--pp-border); background:rgba(255,255,255,0.55); }
.pp-trust-cell:last-child{ border-right:0; }
.pp-trust-cell .pp-trust-big{ font-family:var(--pp-serif-display); font-weight:400;
  font-size:30px; color:var(--pp-ink); letter-spacing:0; }
.pp-trust-cell .pp-trust-star{ color:var(--pp-green); }
.pp-trust-cell .pp-trust-cap{ font-family:var(--pp-serif-body); font-size:12px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--pp-ink-soft); margin-top:11px; line-height:1.5; }
@media (max-width:900px){ .pp-trust-bar{ grid-template-columns:1fr 1fr; } }

/* ---- Glass form cards ---- */
.pp-form-glass-dark{ background:var(--pp-glass-dark-bg);
  -webkit-backdrop-filter:var(--pp-glass-blur); backdrop-filter:var(--pp-glass-blur);
  border:1px solid var(--pp-glass-dark-border); border-radius:var(--pp-radius-lg);
  padding:var(--pp-s-6); color:var(--pp-cream); box-shadow:var(--pp-shadow-lg); }
.pp-form-glass-light{ background:var(--pp-glass-light-bg);
  -webkit-backdrop-filter:var(--pp-glass-blur); backdrop-filter:var(--pp-glass-blur);
  border:1px solid var(--pp-glass-light-border); border-radius:var(--pp-radius-lg);
  padding:var(--pp-s-6); color:var(--pp-ink); box-shadow:var(--pp-shadow); }

/* =====================================================================
   GENERIC BUTTONS (content CTAs) — Goudy small-caps, to match locked primary
   ===================================================================== */
.btn{ font-family:var(--pp-serif-body); font-weight:400; font-size:15px;
  letter-spacing:0.16em; text-transform:uppercase; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center;
  gap:.5em; padding:15px 30px; border:0; border-radius:var(--pp-radius-sm); cursor:pointer;
  text-decoration:none; transition:background .2s,color .2s,border-color .2s; line-height:1.2; }
.btn--primary{ background:var(--pp-ink); color:var(--pp-cream); }
.btn--primary:hover{ background:var(--pp-green); }
.btn--ghost{ background:transparent; color:var(--pp-ink); border:1px solid var(--pp-ink); }
.btn--ghost:hover{ background:var(--pp-ink); color:var(--pp-cream); }
.btn--ghost-light{ background:transparent; color:var(--pp-cream); border:1px solid var(--cream-45); }
.btn--ghost-light:hover{ background:var(--pp-cream); color:var(--pp-green-deep); border-color:var(--pp-cream); }

/* discreet text link (Goudy small-caps — "→" links) */
.tlink{ font-family:var(--pp-serif-body); font-size:13px; font-weight:400; letter-spacing:0.14em; text-transform:uppercase;
  text-decoration:none; color:var(--pp-ink); border-bottom:1px solid var(--pp-green); padding-bottom:4px;
  transition:border-color .2s,color .2s; display:inline-block; }
.tlink:hover{ color:var(--pp-green); border-color:var(--pp-ink); }
.tlink--light{ color:var(--pp-cream); border-color:var(--cream-45); }
.tlink--light:hover{ border-color:var(--pp-cream); }

/* ---------- LAYOUT HELPERS ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(60px,8vw,124px); }
.rule{ height:1px; background:var(--pp-border); border:0; margin:0; }
.hairline-accent{ height:1px; width:54px; background:var(--pp-green); border:0; opacity:0; }
[data-accent="hair"] .hairline-accent{ opacity:.5; }

/* ---------- a11y ---------- */
.visually-hidden{ 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{ outline:2.5px solid var(--pp-green); outline-offset:3px; }
.on-dark :focus-visible{ outline-color:var(--pp-cream); }
.skip-link{ position:absolute; left:12px; top:-60px; background:var(--pp-green); color:var(--pp-cream);
  padding:10px 16px; font-family:var(--pp-nav); font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; z-index:2000; transition:top .2s; border-radius:2px; text-decoration:none; }
.skip-link:focus{ top:12px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.001ms!important; transition-duration:.001ms!important; } }