/* ============================================================
   PRINTFORCLASS — GLOBAL DESIGN SYSTEM  (site.css)
   The desk and the sheet. Locked visual language.
   ------------------------------------------------------------
   SURFACES (three, never a fourth outside these):
     1. --desk  warm ground     2. --sheet paper     3. wash accents
   SIGNATURE: .trace  (solid rule / dashed guide / solid rule)
   FONTS: self-host Fraunces + Nunito Sans as subsetted woff2 in
          /assets/fonts/ and add @font-face below. Andika is loaded
          ONLY on pages whose printable output needs it — never here.
   No external assets. No JS animation dependency. All motion is CSS
   and disabled under prefers-reduced-motion.
   ============================================================ */

/* ---- @font-face — production; point at self-hosted files ----
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-600.woff2) format("woff2");
  font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-700.woff2) format("woff2");
  font-weight:700;font-display:swap;font-style:normal}
@font-face{font-family:"Nunito Sans";src:url(/assets/fonts/nunitosans-400.woff2) format("woff2");
  font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:"Nunito Sans";src:url(/assets/fonts/nunitosans-700.woff2) format("woff2");
  font-weight:700;font-display:swap;font-style:normal}
------------------------------------------------------------ */

:root{
  /* ---- SURFACE ---- */
  --desk:#EDEBE4;
  --desk-deep:#E3E0D6;
  --sheet:#FFFFFF;
  --sheet-warm:#FBFBF9;

  /* ---- INK ---- */
  --ink:#17253F;
  --ink-soft:#5B6880;
  --ink-faint:#98A1B0;
  --rule:#DEE3EC;

  /* ---- CATEGORY INKS + washes ---- */
  --blue:#2F5FE0;   --blue-wash:#E4EBFC;   --blue-deep:#1E43AC;
  --coral:#F0503A;  --coral-wash:#FDE7E3;  --coral-deep:#C63C29;
  --green:#1F9268;  --green-wash:#DFF2EA;  --green-deep:#15704F;
  --marker:#FFD84D;

  /* --- Phase 2: spec alignment --- */
  --paper:#FFFFFF;
  --card:#FFFFFF;
  --muted:#68758A;
  --blue-light:#EEF3FF; --coral-light:#FFF0ED; --green-light:#EDF8F4; --gold-light:#FFF7E3;              /* spec name; alias of --sheet */
  /* explicit 8-128 spacing scale (spec). --sp-* kept as legacy aliases below. */
  --space-8:0.5rem;   --space-12:0.75rem; --space-16:1rem;   --space-24:1.5rem;
  --space-32:2rem;    --space-48:3rem;    --space-64:4rem;   --space-96:6rem;
  --space-128:8rem;
  --focus-ring:0 0 0 3px var(--blue-wash);
  --focus-outline:2.5px solid var(--blue);

  /* ---- TYPE ---- */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* modular-ish scale with deliberate editorial jumps */
  --step--1:.8125rem;
  --step-0:1rem;
  --step-1:1.1875rem;
  --step-2:1.5rem;
  --step-3:2.125rem;
  --step-4:3rem;
  --step-5:3.625rem;
  --lh-tight:1.06;
  --lh-body:1.65;

  /* ---- GEOMETRY ---- */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:100px;

  /* ---- PAPER DEPTH (restrained — paper on a desk, not a floating card) ---- */
  --shadow-rest:0 1px 2px rgba(23,37,63,.06), 0 8px 24px -12px rgba(23,37,63,.18);
  --shadow-lift:0 2px 4px rgba(23,37,63,.07), 0 16px 34px -16px rgba(23,37,63,.24);

  /* ---- SPACING (uneven rhythm; see --band-tall / --band-tight) ---- */
  --band-tall:100px;
  --band-tight:72px;

  /* ---- MOTION ---- */
  --ease:cubic-bezier(.22,.8,.3,1);
  --dur:.2s;

  --maxw:1120px;
}

/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--desk);color:var(--ink);
  font-family:var(--body);font-size:var(--step-0);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:var(--blue);text-underline-offset:.15em}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:2px;border-radius:2px}

/* ============ LAYOUT ============ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-24)}
.band{padding:var(--band-tall) 0}
.band--tight{padding:var(--band-tight) 0}
.band--blue{background:var(--blue-wash)}
.band--coral{background:var(--coral-wash)}
.band--green{background:var(--green-wash)}
.band--desk{background:var(--desk-deep)}
/* rounded full-bleed field used inside a wrap */
.field{border-radius:20px;padding:var(--space-48) var(--space-32)}
.field--desk{background:var(--desk-deep)}

/* ============ TYPE ============ */
.display{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:var(--lh-tight)}
h1,.h1{font-family:var(--display);font-weight:600;font-size:var(--step-5);letter-spacing:-.025em;line-height:var(--lh-tight)}
h2,.h2{font-family:var(--display);font-weight:600;font-size:var(--step-3);letter-spacing:-.02em;line-height:1.12}
h3,.h3{font-family:var(--display);font-weight:600;font-size:var(--step-1);line-height:1.2}
.lede{font-size:var(--step-1);color:var(--ink-soft)}
.prose p{margin-bottom:.85rem;color:var(--ink-soft);max-width:68ch}
.prose strong{color:var(--ink)}
/* marginalia — captions, specimen labels, band eyebrows */
.mark-label{font-size:var(--step--1);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
/* highlighter underline on a word */
.hl{background:linear-gradient(var(--marker),var(--marker));background-size:100% .3em;background-position:0 88%;background-repeat:no-repeat}

/* ============ SIGNATURE: TRACE LINE ============ */
/* solid top rule / dashed middle guide / solid bottom rule. Replaces <hr>. */
.trace{height:11px;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);opacity:.16;position:relative}
.trace::after{content:"";position:absolute;inset:0;top:50%;border-top:1.5px dashed var(--ink)}
.trace--sm{height:8px}
/* animated draw-in on first view; opt in with .trace--draw */
@media(prefers-reduced-motion:no-preference){
  .trace--draw{width:0;animation:trace-draw .7s var(--ease) forwards}
  @keyframes trace-draw{to{width:100%}}
}

/* ============ BUTTONS ============ */
.btn{font-family:var(--body);font-weight:700;font-size:var(--step-0);
  padding:.8rem 1.5rem;border-radius:var(--r-md);border:none;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);white-space:nowrap}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 3px 0 var(--blue-deep)}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--blue-deep)}
.btn--primary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--blue-deep)}
.btn--coral{background:var(--coral);color:#fff;box-shadow:0 3px 0 var(--coral-deep)}
.btn--green{background:var(--green);color:#fff;box-shadow:0 3px 0 var(--green-deep)}
.btn--quiet{background:var(--sheet);color:var(--ink);border:1.5px solid rgba(23,37,63,.18)}
.btn--quiet:hover{border-color:var(--ink)}

/* ============ CARDS — printed sheets on a desk ============ */
.sheet{background:var(--sheet);border-radius:var(--r-sm);box-shadow:var(--shadow-rest);padding:1.3rem 1.2rem}
.card{background:var(--sheet);border-radius:var(--r-lg);box-shadow:var(--shadow-rest);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
a.card,.card--link{display:block;text-decoration:none;color:inherit}
.card--lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
/* paper tilt — settles flat on hover. Use sparingly, e.g. hero sheet. */
.card--tilt{transform:rotate(-1.1deg);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card--tilt:hover{transform:rotate(0);box-shadow:var(--shadow-lift)}
/* tab card — index-card with a colored top tab */
.card--tab{position:relative;padding-top:1.6rem}
.card--tab::before{content:"";position:absolute;top:0;left:1.2rem;width:46px;height:6px;border-radius:0 0 4px 4px;background:var(--tab,var(--blue))}
/* controlled overlap — pull a following sheet up under the previous one */
.overlap{margin-top:-2.5rem}
@media(max-width:640px){.overlap{margin-top:var(--space-24)}}

/* category theming hook: set --c and --c-wash on a container */
.t-charts{--c:var(--blue);--c-wash:var(--blue-wash);--tab:var(--blue)}
.t-worksheets{--c:var(--coral);--c-wash:var(--coral-wash);--tab:var(--coral)}
.t-tools{--c:var(--green);--c-wash:var(--green-wash);--tab:var(--green)}

/* ============ DECORATION PRIMITIVES ============
   Margin/gutter only. Never inside a tool slot, never behind text.
   All are aria-hidden and pointer-events:none. Max two per viewport. */
.deco{position:absolute;pointer-events:none;color:var(--ink);opacity:.14;z-index:0}
.deco svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.deco--marker{color:var(--marker);opacity:.9}
.deco--blue{color:var(--blue);opacity:.5}
.deco--coral{color:var(--coral);opacity:.5}
/* dog-ear folded paper corner on a sheet */
.dogear{position:absolute;top:0;right:0;width:26px;height:26px;
  background:linear-gradient(135deg,transparent 50%,var(--desk-deep) 50%);
  border-top-right-radius:var(--r-sm)}
/* punch holes down a left edge */
.holes{position:absolute;left:8px;top:0;bottom:0;width:10px;display:flex;flex-direction:column;justify-content:space-evenly;pointer-events:none}
.holes span{width:9px;height:9px;border-radius:50%;background:var(--desk);box-shadow:inset 0 1px 2px rgba(23,37,63,.25)}
/* faint grid / notebook hint as a section background */
.grid-hint{background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:22px 22px;opacity:.5}
/* oversized numeral used as illustration on preset cards */
.numeral{font-family:var(--display);font-weight:700;font-size:clamp(3rem,9vw,5.5rem);line-height:.8;color:var(--c,var(--blue));opacity:.16}

/* torn-paper section edge — put inside a positioned band, top or bottom */
.torn{position:absolute;left:0;width:100%;height:16px;line-height:0;color:var(--desk)}
.torn--top{top:-1px}
.torn--bottom{bottom:-1px;transform:scaleY(-1)}
.torn svg{width:100%;height:16px;fill:currentColor}

/* ============ FORM CONTROLS ============ */
.input{font-family:var(--body);font-size:var(--step-0);padding:.75rem .9rem;
  border:1.5px solid var(--rule);border-radius:var(--r-md);background:var(--sheet);color:var(--ink);width:100%}
.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash)}
/* segmented control */
.seg{display:flex;background:#F4F4F0;border-radius:8px;padding:3px;gap:2px}
.seg button{flex:1;border:none;background:transparent;font-family:var(--body);font-size:.8125rem;font-weight:700;color:var(--ink-soft);padding:.42rem .3rem;border-radius:6px;cursor:pointer;transition:background var(--dur),color var(--dur)}
.seg button[aria-pressed="true"]{background:var(--sheet);color:var(--blue);box-shadow:0 1px 3px rgba(23,37,63,.14)}
input[type=range]{accent-color:var(--blue);width:100%}

/* ============ MOTION: scroll-reveal (optional, class-gated) ============ */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .reveal.is-in{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ============ UTILITIES ============ */
.stack>*+*{margin-top:var(--space-24)}
.center{text-align:center}
.measure{max-width:62ch;margin-inline:auto}
.relative{position:relative}
.grid{display:grid;gap:var(--space-24)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-48);align-items:center}
@media(max-width:900px){
  .grid-3,.grid-4,.hero-split{grid-template-columns:1fr}
  h1,.h1{font-size:var(--step-4)}
}
@media(max-width:640px){
  .grid-2{grid-template-columns:1fr}
}
.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}

/* ============================================================
   PHASE 2 — reusable components completed to spec.
   ============================================================ */

/* (3) Text link with arrow */
.link-arrow{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;
  font-size:var(--step-0);color:var(--blue);text-decoration:none;
  transition:gap var(--dur) var(--ease),color var(--dur) var(--ease);
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.link-arrow::after{content:"";width:1em;height:1em;flex:none;
  background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
.link-arrow:hover{gap:.6rem;color:var(--blue-deep)}
.link-arrow--coral{color:var(--coral)} .link-arrow--coral:hover{color:var(--coral-deep)}
.link-arrow--green{color:var(--green)} .link-arrow--green:hover{color:var(--green-deep)}

/* (9) Icon tile — tinted rounded square holding an SVG icon */
.icon-tile{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;
  background:var(--blue-wash);color:var(--blue);flex:none}
.icon-tile svg{width:26px;height:26px}
.icon-tile--blue{background:var(--blue-wash);color:var(--blue)}
.icon-tile--coral{background:var(--coral-wash);color:var(--coral)}
.icon-tile--green{background:var(--green-wash);color:var(--green)}
.icon-tile--sm{width:44px;height:44px;border-radius:11px}
.icon-tile--sm svg{width:20px;height:20px}

/* Unified icon sizing convention (spec: 1.8-2px stroke, rounded caps/joins) */
.icon{width:24px;height:24px;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}

/* ============================================================
   ACCESSIBILITY — visible keyboard focus, consistent everywhere.
   ============================================================ */
:focus-visible{outline:var(--focus-outline);outline-offset:2px;border-radius:3px}
.btn:focus-visible{outline:var(--focus-outline);outline-offset:3px}
.input:focus{outline:none;border-color:var(--blue);box-shadow:var(--focus-ring)}
.input:focus-visible{border-color:var(--blue);box-shadow:var(--focus-ring)}
a:focus-visible,.link-arrow:focus-visible{outline:var(--focus-outline);outline-offset:3px}

@media(max-width:768px){
  .band{padding:64px 0}
  .band--tight{padding:64px 0}
}