/* Phramed shared stylesheet. Tokens, type, and the handful of primitives every page uses.
   Pages link this first and keep only what is specific to them. One look, one file.
   Added 2026-09-07 when the per-page token blocks (17 copies) were retired. */

:root{
  color-scheme:light;
  /* Surfaces */
  --paper:#eeeeec;--paper-2:#dadadd;--card:#f6f6f4;--surface:#f6f6f4;--surface-2:#dadadd;
  --deep:#2a2c30;--deep-2:#202226;--cream-on-deep:#eeeeec;
  /* Ink. --muted and --faint both clear 4.5:1 on --paper. */
  --ink:#2a2c30;--muted:#5a5c63;--faint:#6b6d74;
  --line:rgba(42,44,48,.12);--line-2:rgba(42,44,48,.2);
  /* Accent. Buttons and small text use --accent-deep or --accent-ink; --accent is for fills and large marks.
     Rebrand 2026-09-13: cream+terracotta read as an AI-generated-design default (confirmed against a
     live competitor's palette, not just a hunch). Cool Graphite & Bright Plum replaces it -- graphite
     ink/surfaces, a single saturated plum accent, nothing warm-toned left in the system. */
  --accent:#8a3d63;--accent-deep:color-mix(in srgb,var(--accent) 78%,#17151a);--accent-ink:color-mix(in srgb,var(--accent) 60%,#17151a);--accent-soft:color-mix(in srgb,var(--accent) 22%,#fff);
  --accent-text:color-mix(in srgb,var(--accent) 66%,#17151a);
  --ok:#5f7350;--ok-text:#485a3c;--bad:#a3341f;--warn:#a8863b;--warn-text:#6b5420;
  /* Depth: cool-tinted to match the graphite ink, three steps plus the card resting shadow. */
  --sh-1:0 1px 2px rgba(30,31,36,.06),0 2px 6px -2px rgba(30,31,36,.12);
  --sh-2:0 14px 34px -14px rgba(30,31,36,.3);
  --sh-3:0 30px 70px -24px rgba(30,31,36,.38);
  --sh-card:0 1px 2px rgba(30,31,36,.05),0 8px 24px -16px rgba(30,31,36,.18);
  --grain-op:.05;--grain-blend:multiply;
  /* Type. Rebrand 2026-09-13: Fraunces swapped for Frank Ruhl Libre -- more distinctive, and
     unlike Fraunces/Bodoni/Playfair, not already used on another Sullivan Creative or Handled
     site this session. No italic exists for it on Google Fonts (checked the actual API response,
     not assumed), so nothing sets font-style:italic on --disp anywhere -- emphasis is carried by
     weight and --accent color instead (see .wordmark and weddings/index.html's hero em).
     Source Sans 3 still carries everything that is read or typed. */
  --disp:"Frank Ruhl Libre","Fraunces Fallback",Georgia,"Times New Roman",serif;
  --body:"Source Sans 3","Source Sans Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp-weight:500;
  /* Radii: one scale. r-1 controls, r-2 inputs and buttons, r-3 cards, r-4 sheets. */
  --r-1:6px;--r-2:10px;--r-3:14px;--r-4:20px;--r-pill:999px;
  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Layers */
  --z-nav:100;--z-sticky:100;--z-rail:100;--z-drawer:300;--z-gate:700;--z-lb:800;--z-toast:900;
  --wm:none;
}
[data-theme="dark"]{
  color-scheme:dark;
  --paper:#1c1a1f;--paper-2:#242228;--card:#242228;--surface:#242228;--surface-2:#2d2b31;
  --ink:#e6e5e2;--muted:#a9a6ac;--faint:#948f97;
  --line:rgba(230,229,226,.12);--line-2:rgba(230,229,226,.22);
  --accent-deep:color-mix(in srgb,var(--accent) 70%,#fff);--accent-ink:color-mix(in srgb,var(--accent) 55%,#fff);--accent-soft:color-mix(in srgb,var(--accent) 25%,#000);
  --accent-text:color-mix(in srgb,var(--accent) 70%,#fff);
  --sh-1:0 1px 2px rgba(0,0,0,.3),0 2px 6px -2px rgba(0,0,0,.4);
  --sh-2:0 14px 34px -14px rgba(0,0,0,.6);
  --sh-3:0 30px 70px -24px rgba(0,0,0,.7);
  --sh-card:0 1px 2px rgba(0,0,0,.25),0 8px 24px -16px rgba(0,0,0,.5);
  --ok:#8ba578;--ok-text:#b5cfa3;--warn:#cf9066;--warn-text:#cf9066;--grain-op:.04;--grain-blend:screen;
}

/* Metric-matched fallbacks so the swap to the webfont does not move the page. Width ratio
   re-measured 2026-09-13 after the Frank Ruhl Libre swap (headless Chrome, real
   getBoundingClientRect comparison against the actual hero sentence, not estimated): it runs
   106% the width of Times New Roman, versus Fraunces' 113%. Ascent/descent overrides are
   carried over from the Fraunces measurement -- width dominates layout shift more than vertical
   metrics do, and re-deriving those precisely needs the font's own OS/2 table, not a DOM
   measurement. Source Sans 3 still runs 93% the width of Arial. Pages render in these until the
   webfont lands, then swap in place. */
@font-face{font-family:"Fraunces Fallback";src:local("Times New Roman"),local("TimesNewRoman");size-adjust:106%;ascent-override:88%;descent-override:23%}
@font-face{font-family:"Source Sans Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica");size-adjust:93%;ascent-override:99%;descent-override:29%}

/* Type defaults. Titles get the display face with optical sizing on; nothing else does. */
h1,h2,h3{font-family:var(--disp);font-weight:var(--disp-weight);font-optical-sizing:auto;text-wrap:balance}
h1{letter-spacing:-.015em}h2{letter-spacing:-.01em}

/* Wordmark. Rebrand 2026-09-13: replaces the two-image lockup (a "P"-with-lens mark plus a
   hand-lettered PNG baked into the old terracotta palette). Real text -- recolors with the
   theme automatically, never misspells, scales at any size. Pages set their own font-size per
   context the same way they used to set .ph-word's height; this file owns color and weight only.
   Upright, not italic: Frank Ruhl Libre (swapped in the same day) has no italic cut on Google
   Fonts, so weight + letter-spacing carry the distinctiveness instead of a synthesized slant. */
.wordmark{font-family:var(--disp);font-weight:700;font-optical-sizing:auto;
  letter-spacing:-.01em;line-height:1;color:var(--ink);display:inline-block;white-space:nowrap}
.wordmark--accent{color:var(--accent-deep)}
body{font-family:var(--body);font-optical-sizing:auto}
::selection{background:var(--accent-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px;border-radius:4px}

/* Buttons. Pages may size them; they should not recolor them. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.7rem 1.15rem;
  border-radius:var(--r-2);border:1px solid transparent;font:inherit;font-weight:600;font-size:.95rem;line-height:1;
  color:var(--ink);background:var(--card);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .14s var(--ease),filter .2s,background .2s,border-color .2s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent-deep);color:#fff;box-shadow:var(--sh-2)}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--line-2)}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Labels */
.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-ink);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:.35em;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  padding:.25em .6em;border-radius:var(--r-pill);background:var(--paper-2);color:var(--muted);white-space:nowrap}

/* Toast. Hidden means off screen and, when it has nothing to say, not rendered at all. */
.toast{position:fixed;left:50%;bottom:1.4rem;z-index:var(--z-toast);transform:translate(-50%,calc(100% + 3rem));
  background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;border-radius:var(--r-2);font-size:.9rem;font-weight:500;
  box-shadow:var(--sh-3);max-width:min(92vw,28rem);transition:transform .35s var(--ease)}
.toast.show{transform:translate(-50%,0)}
.toast:empty{display:none}

/* Fallback shell: a 404, an empty view, a bare route. One look for every page a stranger lands on. */
.phr-shell{min-height:100svh;display:grid;place-items:center;padding:2rem;text-align:center;background:var(--paper);color:var(--ink)}
.phr-shell>div{max-width:34rem}
.phr-shell .phr-mark{height:34px;margin:0 auto 1.4rem;display:block}
.phr-shell h1{font-size:clamp(1.6rem,4vw,2.1rem);margin:0 0 .5rem}
.phr-shell p{color:var(--muted);margin:0 0 1.4rem;line-height:1.6}
.phr-shell a{color:var(--accent-ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--accent-soft)}

@media(prefers-reduced-motion:reduce){.btn,.toast{transition:none}}