/* William Penn Settlement, LLC — brand tokens and base typography.
   Implements the Woven production identity, Edition 1 (brand/guide/).

   Loaded by every page BEFORE that page's inline <style>, so pages can still
   own their layout while the brand owns colour and type. Do not restate a
   hex value or a font name in a page; use the tokens.

   The --green / --stone / --brass names are the site's original variables,
   kept as aliases so existing rules pick up the brand palette without being
   rewritten one by one. New work should use the --wps- names.

   NOTE ON THE NAMES: --green has never been green and --wps-sage is no longer
   sage. The identity moved from a sage-and-navy keystone to a brass-and-navy
   woven ribbon, and renaming a token used ~450 times across 48 pages would
   have been a far larger and riskier change than repointing it. Both now
   resolve to brand colours. New work should use --wps-brass. */

:root{
  /* Core palette. Values 1-3 are the guide's named colours; 4 and 5 are the
     artwork's own tonal fills, published in the colour table, reused here so
     the page and the logo are literally the same inks. */
  --wps-navy:#0A2B4B;         /* Penn Navy: headings, links, footer ground */
  --wps-brass:#9F8254;        /* Antique Brass: rules, accents, marks */
  --wps-parchment:#F6F0E4;    /* Parchment: page ground */
  --wps-ink:#0F2847;          /* the descriptor navy: body text */
  --wps-brass-deep:#846735;   /* the flanking-rule brass; dark enough for text */

  /* Supporting tones. NOT in the guide — the identity supplies three colours
     and the artwork's tonal fills, which is enough for a logo and not enough
     for a website with forms, tables and secondary text. These are mixed from
     the palette above so they stay in family, and they are picked to land on
     the contrast ratios the tones they replace were carrying. */
  --wps-slate:#4C6276;        /* secondary text, captions: 5.58:1 on parchment */
  --wps-rule:#CBB99C;         /* hairlines and dividers: 1.69:1, as before */
  --wps-stone:#E6DCC8;        /* card and field borders, table rules */
  --wps-white:#FFFFFF;

  /* Deprecated: the sage-era names, repointed at their brass counterparts.
     Do not use these in new work. */
  --wps-sage:var(--wps-brass);
  --wps-sage-light:var(--wps-rule);

  --wps-serif:"EB Garamond",Garamond,"Times New Roman",serif;
  --wps-sans:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;

  /* Display face, for H1 and H2 only. The brand guide board asks for Trajan
     Pro "or similar classic serif"; Cinzel is that, from the same source —
     both are drawn from the Roman inscriptional capitals on Trajan's Column —
     and it is OFL, served from Google Fonts alongside the other two. Trajan
     Pro itself was not adopted: it is Adobe-licensed, so web use would put the
     site's headings behind a subscription that can lapse silently, and being
     capitals-only it could never carry H3, body or the tagline anyway.

     Cinzel has no true lowercase either — its lowercase glyphs are small caps
     — which is exactly why it is scoped to H1 and H2, the two that are already
     text-transform:uppercase. H3 is title case and stays on EB Garamond. */
  --wps-display:"Cinzel","EB Garamond",Garamond,"Times New Roman",serif;

  --wps-radius:2px;
  --wps-shadow:0 1px 2px rgba(10,43,75,.08);

  /* Legacy aliases — original names, current colours. See the note above. */
  --green:var(--wps-navy);
  --green-deep:var(--wps-ink);
  --stone:var(--wps-parchment);
  --ink:var(--wps-ink);
  --brass:var(--wps-brass);
  --brass-soft:var(--wps-rule);
  --sage-ink:var(--wps-slate);
  --white:var(--wps-white);
}

/* Alerts: wire-fraud warnings, validation errors, figures that have to stand
   out. This was keystone-red (#7E2D26), the one colour outside the palette;
   it is now Penn Navy, so the site is on-palette everywhere.

   THE TRADE THAT COMES WITH THAT, and the reason this is a named token rather
   than a bare var(--wps-navy) at each site: navy is also the body and heading
   colour, so colour alone no longer distinguishes an alert from ordinary text.
   Every alert therefore carries a non-colour cue as well — validation messages
   are prefixed "Error —", switch to role="alert", and go semibold; emphasised
   figures in tables carry weight. Keep the cue if this token ever moves to a
   documented warning colour; the colour is not doing the work by itself. */
:root{ --wps-alert:var(--wps-navy); }

/* Body is the serif. EB Garamond runs small: 18px is the brand size and 16px
   the floor. Line height 1.5. */
body{
  font-family:var(--wps-serif);
  font-size:18px;
  line-height:1.5;
  color:var(--wps-ink);
  background:var(--wps-parchment);
}

/* H1 and H2 are uppercase and letterspaced; H3 is title case, untracked.
   H1 and H2 take the display face, H3 stays on the text serif — see the
   --wps-display note above for why the split is not cosmetic. */
h1,h2,h3{font-family:var(--wps-serif);font-weight:500;color:var(--wps-navy)}
h1,h2{font-family:var(--wps-display)}
h1{font-size:42px;letter-spacing:.12em;text-transform:uppercase;line-height:1.15}
h2{font-size:30px;letter-spacing:.10em;text-transform:uppercase;line-height:1.2}
h3{font-size:22px;letter-spacing:0;text-transform:none;line-height:1.25}

/* Kickers and labels: sans, uppercase, widely tracked. Slate, because Sage on
   parchment is 2.6:1 and fails for text at this size. */
.eyebrow,.kicker{
  font-family:var(--wps-sans);font-weight:600;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--wps-slate);
}
.tagline{font-style:italic;color:var(--wps-navy)}

/* UI runs on the sans: forms, tables, buttons, captions, metadata. */
input,select,textarea,button,table,.meta,figcaption{font-family:var(--wps-sans)}
input,select,textarea{
  font-size:16px;color:var(--wps-ink);background:var(--wps-white);
  border:1px solid var(--wps-stone);border-radius:var(--wps-radius);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--wps-navy);outline-offset:1px;border-color:var(--wps-navy)}

/* Figures line up in columns without a monospace face. */
td,th,input,.num,[inputmode=numeric],[inputmode=decimal]{font-variant-numeric:tabular-nums}

/* Buttons: sans, uppercase, tracked. Navy is the primary action; sage is
   reserved for the single calculator submit and never carries meaning alone. */
.btn{
  font-family:var(--wps-sans);font-weight:600;font-size:14px;
  letter-spacing:.10em;text-transform:uppercase;
  border-radius:var(--wps-radius);
}
/* The one sanctioned sage fill: the calculator's single submit. Text is Ink,
   not white — Ink on Sage is 4.96:1 and passes AA, white on Sage is 2.91:1
   and does not. Two classes, because pages load their own .btn rule after
   this file. */
.btn.btn-accent{background:var(--wps-sage);border-color:var(--wps-sage);color:var(--wps-ink)}
.btn.btn-accent:hover{background:var(--wps-sage-light);border-color:var(--wps-sage-light);color:var(--wps-ink)}

a{text-underline-offset:3px;text-decoration-color:var(--wps-sage-light)}
a:hover{text-decoration-color:var(--wps-sage)}

hr{border:0;border-top:1px solid var(--wps-sage-light)}

/* A grid item's automatic minimum size is min-content, not zero. So one table
   cell with white-space:nowrap can push its column wider than the viewport,
   and the whole page scrolls sideways — while overflow-x:auto on the box
   *inside* the item never gets a chance to help, because the item around it is
   already too wide. That is exactly what made /transfer-tax/pittsburgh and
   /transfer-tax/greensburg scroll horizontally on a phone: widest figures,
   widest columns. min-width:0 restores the ability to shrink, so the table's
   own scroll container does the work.

   Every page defines its own `.split` grid in an inline <style>, but this file
   is linked ahead of those and nothing sets min-width on the children, so one
   rule here reaches all of them. It is inert wherever the content already
   fits. */
.split>*{min-width:0}

/* The logo is artwork: never re-set, never stretched, never redrawn, never
   recoloured path by path. assets/brand/ holds the supplied vectors, copied
   by tools/build-brand-assets.py — not rendered, not composed.

   The full lockup carries the company name, so it is what every logo slot
   shows, at every width. That is a deliberate, recorded departure from the
   guide's 400px working minimum, and the reasoning is worth keeping:

   - The lockup is 2.116 wide to 1 tall, so the guide's 400px minimum is 189px
     of height. That is why the header is no longer a 76px bar and no longer
     sticky — a 210px bar pinned to the top of a phone would eat a third of
     the viewport on every scroll.
   - On a 390px phone the lockup cannot reach 400px inside the viewport: the
     page gutters leave about 342px. This previously fell back to the
     standalone ribbon, which is on-spec but anonymous — the ribbon alone does
     not say who the company is, and a title company's name at the top of the
     page is worth more than the last 15% of descriptor size. So the lockup
     scales down instead, to roughly 342px at 390px of viewport.
   - What that costs: the guide sets 400px so the small "SETTLEMENT, LLC"
     descriptor lands near 8pt. At 342px it renders nearer 7pt. It stays
     legible on a phone held at reading distance, and the company name above
     it is unaffected — the wordmark is the large half of the lockup.

   If the descriptor ever needs to hold its size on a phone, the fix is a
   narrower page gutter on small screens, not a return to the bare ribbon.

   Clear space is CSS padding, never baked into the pixels: the guide asks for
   half the height of the large W on all sides. */
.brand{display:flex;align-items:center;text-decoration:none;padding:22px 0}
.brand img{display:block;width:400px;height:auto;max-width:100%}
@media(max-width:1100px){.brand img{width:340px}}
@media(max-width:480px){.brand{padding:14px 0}.brand img{width:100%}}

/* Footer: the reverse lockup, which the guide specifies for a solid navy
   field, on the same always-show-the-name rule as the header. */
.brand-footer{display:block;margin-bottom:18px}
.brand-footer img{display:block;width:420px;height:auto;max-width:100%}
@media(max-width:480px){.brand-footer img{width:100%}}

/* Document mastheads (the printable agent sheet) follow the header's rule. */
@media(max-width:480px){.masthead img{width:100%;max-width:100%}}
  .masthead .ribbon{display:block;width:150px}
}

/* ===== PRE-LAUNCH GATE =====================================================
   Hides anything that must not go live until the PA agency licence issues.
   AT LAUNCH: delete this one rule. The gated markup is already in place and
   correct, so nothing else has to be written — see the launch checklist in
   README.md for the rest (the opening-soon bar, /order in the sitemap, the
   noindex tag, and swapping the mailto: order CTAs). */
.prelaunch{display:none!important}

/* ===== CO-BRANDING (shared: /buyer-guide, /net-sheet, /refinance-guide) =====
   The .cobrand band itself is styled per page, because the three pages size it
   differently. These are the pieces the logo added, which no page defines, so
   they live here once rather than three times. Behaviour is in
   assets/wps-cobrand.js. Everything stays in the visitor's browser. */
.cobrand .cbinner{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cobrand .cblogo{display:block;max-width:210px;max-height:70px;width:auto;height:auto;object-fit:contain}
.cobrand .cbtext{min-width:0}

/* Logo picker, screen only — .noprint on the form already hides it in print. */
.cblogorow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.cblogorow input[type=file]{font-family:var(--wps-sans);font-size:13px;max-width:100%}
.cblogoclear{font-family:var(--wps-sans);font-size:12px;font-weight:600;letter-spacing:.04em;
  background:none;border:1px solid var(--wps-sage-light);color:var(--wps-slate);
  padding:5px 10px;cursor:pointer}
.cblogoclear:hover{border-color:var(--wps-navy);color:var(--wps-navy)}
.cbnote{font-family:var(--wps-sans);font-size:12.5px;color:var(--wps-slate);margin:6px 0 0;min-height:1.2em}
.cbnote.bad{color:var(--wps-alert);font-weight:600}

@media(max-width:640px){.cobrand .cblogo{max-width:150px;max-height:56px}}
@media print{.cblogorow,.cbnote{display:none!important}}