/* ============================================================
   The Journal of Natural Law — shared stylesheet
   Build 03 (final): the two scoped shells (body.home / body.page)
   are collapsed into one. A single modular type scale and spacing
   scale live in :root; every size references a token. One nav mark
   size, one nav type treatment, one finalized footer. Contrast meets
   WCAG AA. Motion honors prefers-reduced-motion and degrades without
   JS. The decorative SVG ornamentation (rose, corner, seal, cartouche,
   vline, ornrule, masthead) is preserved and restyled in context only.

   Body-class hooks (body.home / body.page) remain ONLY where a real
   layout difference requires it — never to give the same shared
   element two different values. Each surviving hook is commented.
   ============================================================ */

/* ---- self-hosted fonts (no external requests) ---- */
@font-face{font-family:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/libre-caslon-display-v18-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/libre-caslon-text-v5-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Libre Caslon Text';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/libre-caslon-text-v5-latin-italic.woff2') format('woff2')}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/libre-caslon-text-v5-latin-700.woff2') format('woff2')}

/* ---- design tokens ---- */
  :root{
    /* palette */
    --navy:#28324f; --navy-2:#1f2840; --navy-3:#2c375a;
    --gold:#c5a24e; --gold-2:#dcc07c; --gold-text:#7c5f22; --gold-wash:#fbf3df;
    --ivory:#f5efe0; --ivory-2:#faf6ec; --ivory-alt:#f0e9d7;
    --ink:#23211b; --ink-soft:#5d5746;
    --rule:rgba(35,33,27,.16); --rule-gold:rgba(197,162,78,.5);
    --field:#fbf8f0; --field-line:rgba(35,33,27,.28); --err:#9a3324; --ok:#3f6b3f;
    --display:"Libre Caslon Display",Georgia,"Times New Roman",serif;
    --text:"Libre Caslon Text",Georgia,"Times New Roman",serif;
    --mono:url("/jnlmonomask.v2.png");
    --wrap:1080px;

    /* ---- type scale ----
       Modular ramp, ratio 1.25 (major third), anchored at the 1.12rem base.
       Inner-page base wins site-wide (17 of 18 pages, better long-form reading);
       the homepage's larger feel is carried by display headings and the hero,
       not a larger base. Every heading, lead, caption, label, and component
       size references one of these tokens. The hero masthead layers a fluid
       clamp() on top of --fs-display as a deliberate display exception. */
    --body-size:1.12rem;       /* single source; was 1.18 (home) / 1.12 (page) */
    --fs-eyebrow:0.72rem;      /* base / 1.25^2  — kickers, labels, tags, roles */
    --fs-caption:0.9rem;       /* base / 1.25    — captions, meta, hints, fine */
    --fs-small:1rem;           /* base / 1.25^.5 — small body, card copy */
    --fs-base:1.12rem;         /* base */
    --fs-lead:1.25rem;         /* base * 1.25^.5 — ledes, taglines */
    --fs-h3:1.4rem;            /* base * 1.25 */
    --fs-h2:1.75rem;           /* base * 1.25^2 */
    --fs-h1:2.19rem;           /* base * 1.25^3 */
    --fs-display:2.73rem;      /* base * 1.25^4  — display ceiling (hero clamps over this) */
    --lh-tight:1.05;           /* display/heading line-height (one value; was 1.05/1.06) */
    --lh-body:1.62;

    /* ---- spacing scale ----
       8px base unit and its multiples. Governs section padding, stack gaps,
       and component margins so vertical rhythm is identical home-to-inner. */
    --sp-1:0.5rem;   /* 8  */
    --sp-2:1rem;     /* 16 */
    --sp-3:1.5rem;   /* 24 */
    --sp-4:2rem;     /* 32 */
    --sp-5:2.5rem;   /* 40 */
    --sp-6:3.5rem;   /* 56 */
    --sp-section:clamp(3.4rem,7vw,5.8rem); /* one section rhythm, home + inner */

    /* ---- motion constants (live once) ---- */
    --motion-dur:.7s;
    --motion-ease:cubic-bezier(.2,.7,.2,1);
  }

/* ---- universal element base ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:74px; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--ivory); color:var(--ink);
  font-family:var(--text); font-size:var(--body-size); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"onum" 1,"liga" 1; font-variant-ligatures:common-ligatures}
h1,h2,h3{font-family:var(--display); font-weight:400; line-height:var(--lh-tight); margin:0; color:var(--navy)}
p{margin:0 0 1em}
a{color:#7c3a2e; text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
/* keyboard focus ring — visible on links, buttons, nav, and controls (WCAG 2.4.7) */
:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
/* text fields carry their own inset gold ring; suppress the outline so it never doubles */
input[type=text]:focus-visible,input[type=email]:focus-visible,input[type=number]:focus-visible,input[type=file]:focus-visible,textarea:focus-visible{outline:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(1.2rem,4vw,2.4rem)}
.skip{position:absolute; left:-9999px; top:auto}
.skip:focus{left:12px; top:10px; z-index:1000; background:var(--gold); color:var(--navy-2);
  padding:8px 14px; border-radius:6px}
.label{font-family:var(--text); text-transform:uppercase; letter-spacing:.22em;
  font-size:var(--fs-eyebrow); font-weight:700}
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
svg.rose,svg.corner{fill:currentColor}
.prose{max-width:680px; margin:0 auto}
.prose p:last-child{margin-bottom:0}

/* ============================================================
   NAVIGATION — one canonical bar, identical on every page.
   One mark size (34px), one type treatment (spaced uppercase).
   ============================================================ */
.nav{position:sticky; top:0; z-index:60; background:var(--navy); border-bottom:1px solid var(--rule-gold)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:13px; min-width:0}
.brand .mark{width:34px; height:calc(34px * 575/820); background:var(--gold);
  -webkit-mask:var(--mono) center/contain no-repeat; mask:var(--mono) center/contain no-repeat; flex:none}
.brand .name{font-family:var(--display); color:var(--ivory); font-size:1.18rem;
  letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.menu{display:flex; align-items:center; gap:1.5rem; list-style:none; margin:0; padding:0}
.menu a{color:var(--ivory); font-family:var(--text); font-size:.8rem;
  text-transform:uppercase; letter-spacing:.16em; opacity:.85}
.menu a:hover{color:var(--gold-2); opacity:1; text-decoration:none}
/* Active page (Build 02): gold label + underline, restyled to sit in the unified nav. */
.menu a[aria-current="page"]{color:var(--gold-2); opacity:1}
.menu a[aria-current="page"]::after{content:""; display:block; height:1.5px; background:var(--gold-2); margin-top:3px; border-radius:1px}
.navtoggle{display:none; background:none; border:1px solid var(--rule-gold); color:var(--ivory);
  border-radius:6px; padding:7px 9px; cursor:pointer; font-size:1rem; line-height:1}

/* ============================================================
   HERO — shared chrome. The homepage hero (full masthead) and the
   inner-page hero (single title) share frame, corners, cartouche,
   vline, and ornrule styling. The two differ only in scale of the
   centered block, so the homepage-only masthead rules are scoped
   under body.home as a genuine layout difference (commented).
   ============================================================ */
.hero{background:var(--navy); color:var(--ivory); position:relative; overflow:hidden}
.hero-frame{position:relative; border:1px solid var(--rule-gold); border-radius:4px; text-align:center}
.corner{position:absolute; color:var(--gold)}
.cartouche{display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--gold); border-radius:14px}
.cartouche .mark{background:var(--gold);
  -webkit-mask:var(--mono) center/contain no-repeat; mask:var(--mono) center/contain no-repeat}
.vline{display:flex; align-items:center; justify-content:center; gap:.85rem;
  color:var(--gold); text-transform:uppercase; letter-spacing:.28em; font-size:var(--fs-caption); margin-bottom:var(--sp-3)}
.vline .rose{width:11px; height:11px; color:var(--gold)}
.ornrule{display:flex; align-items:center; justify-content:center; gap:14px; margin:var(--sp-3) auto}
.ornrule .seg{height:1px; background:var(--rule-gold)}
.ornrule .rose{color:var(--gold)}

/* Homepage hero (layout difference: full masthead block, no inner-page analog).
   The homepage hero is intentionally a step grander than the inner-page hero —
   larger corner marks, cartouche, rose, and frame padding — to seat the full
   masthead and keep the home page senior to a policy header. This is hierarchy,
   not drift: the two heroes are different layouts, so each ornament size is set
   once per hero, never the same element given two arbitrary values. */
  body.home .hero .wrap{padding-top:clamp(3rem,7vw,5.2rem); padding-bottom:clamp(3rem,7vw,5.2rem)}
  body.home .hero-frame{padding:clamp(2.4rem,6vw,4rem) clamp(1.2rem,5vw,3rem)}
  body.home .corner{width:24px; height:24px}
  body.home .corner.tl{top:-12px; left:-12px} body.home .corner.tr{top:-12px; right:-12px}
  body.home .corner.bl{bottom:-12px; left:-12px} body.home .corner.br{bottom:-12px; right:-12px}
  body.home .cartouche{padding:13px 30px; margin-bottom:1.4rem}
  body.home .cartouche .mark{width:92px; height:calc(92px * 575/820)}
  body.home .masthead-title{margin:0 0 1.4rem; color:var(--gold)}
  /* Fluid display exception: masthead layers a viewport clamp over --fs-display
     to preserve the homepage's larger feel after the base drop to 1.12rem. */
  body.home .masthead-title span{display:block; text-transform:uppercase;
    font-size:clamp(2.1rem,7.4vw,4rem); letter-spacing:.03em; line-height:1.04}
  body.home .masthead-title span:nth-child(3){font-size:clamp(1.3rem,4vw,2rem); letter-spacing:.12em; margin:.05em 0}
  body.home .ornrule{margin:1.6rem auto}
  body.home .ornrule .seg{width:min(120px,22vw)}
  body.home .ornrule .rose{width:16px; height:16px}
  body.home .tagline{max-width:640px; margin:0 auto 2rem; color:var(--ivory); font-size:var(--fs-lead); line-height:1.5}
  body.home .cta{display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center}
  body.home .hero-meta{margin:var(--sp-4) 0 0; color:rgba(245,239,224,.62); font-size:var(--fs-caption); letter-spacing:.04em}

/* Inner-page hero (layout difference: single centered title, narrower frame,
   ornaments one step smaller than the homepage hero — the compact counterpart
   to the masthead above). Sized once here for this layout. */
  body.page .hero .wrap{padding:clamp(2.4rem,5.5vw,3.6rem) clamp(1.2rem,4vw,2.4rem)}
  body.page .hero-frame{padding:clamp(2rem,5vw,3rem) clamp(1.2rem,4vw,2.4rem); max-width:820px; margin:0 auto}
  body.page .corner{width:22px; height:22px}
  body.page .corner.tl{top:-11px; left:-11px} body.page .corner.tr{top:-11px; right:-11px}
  body.page .corner.bl{bottom:-11px; left:-11px} body.page .corner.br{bottom:-11px; right:-11px}
  body.page .cartouche{padding:12px 30px; margin-bottom:1rem}
  body.page .cartouche .mark{width:84px; height:calc(84px * 575/820)}
  body.page .hero h1{color:var(--gold); font-size:clamp(2rem,6vw,3.1rem); letter-spacing:.01em; margin-bottom:1rem}
  body.page .ornrule{margin:1.2rem auto 1.1rem}
  body.page .ornrule .seg{width:min(110px,20vw)}
  body.page .ornrule .rose{width:15px; height:15px}
  body.page .hero .tagline{max-width:560px; margin:0 auto; color:var(--ivory); font-size:var(--fs-lead); line-height:1.55; opacity:.92}

/* ============================================================
   BUTTONS — shared base; the inner-page (navy-filled) and homepage
   (transparent) variants differ by surface, a real visual role, so
   the fill is set per context, not duplicated wholesale.
   ============================================================ */
.btn{display:inline-block; font-family:var(--text); text-transform:uppercase;
  letter-spacing:.14em; font-size:.78rem; padding:.85em 1.5em; border:1px solid var(--gold);
  color:var(--gold); border-radius:3px; transition:background .25s,color .25s; white-space:nowrap}
.btn:hover{background:var(--gold); color:var(--navy-2); text-decoration:none}
  /* homepage hero CTAs sit on navy (no fill); inner-page form buttons fill navy */
  body.home .btn--solid{background:var(--navy); border-color:var(--navy); color:var(--ivory)}
  body.home .btn--solid:hover{background:var(--navy-2); border-color:var(--navy-2); color:var(--gold-2)}

/* ============================================================
   SECTIONS — one rhythm via --sp-section, home and inner alike.
   ============================================================ */
.section{padding:var(--sp-section) 0}
.section--alt{background:var(--ivory-alt)}
.section--navy{background:var(--navy); color:var(--ivory)}
.section--navy h2,.section--navy h3{color:var(--gold)}
.section--navy a{color:var(--gold-2)}
.sec-head{text-align:center; margin-bottom:var(--sp-5)}
.sec-head .rose{width:20px; height:20px; color:var(--gold)}
.sec-head h2{font-size:var(--fs-h2); margin-top:.5rem}
.sec-head .kick{color:var(--gold-text); margin-bottom:.2rem}
.center{margin-left:auto; margin-right:auto; text-align:center}

.pullquote{font-family:var(--display); font-style:italic; color:var(--gold-text);
  font-size:var(--fs-h2); line-height:1.3; text-align:center;
  max-width:760px; margin:var(--sp-5) auto; padding:0 1rem}

/* ---- homepage: current-issue / ToC / cover (homepage-only sections) ---- */
.issue-block{max-width:860px; margin:0 auto}
.issue-block + .issue-block{margin-top:3.4rem; padding-top:var(--sp-6); border-top:1px solid var(--rule)}
.issue-kicker{text-align:center; color:var(--gold-text); text-transform:uppercase; letter-spacing:.2em;
  font-size:var(--fs-eyebrow); font-weight:700; margin-bottom:var(--sp-3)}
.cover{background:var(--navy); padding:14px; border:1px solid var(--rule-gold); border-radius:3px;
  max-width:660px; margin:0 auto 1.8rem}
.cover img{width:100%; height:auto; display:block; border:1px solid rgba(197,162,78,.35)}
.cover figcaption{color:var(--gold-2); font-size:var(--fs-eyebrow); text-transform:uppercase;
  letter-spacing:.13em; text-align:center; margin-top:11px; line-height:1.5}
.panther-lead{max-width:660px; margin:0 auto 3.2rem}
.panther-lead .cover{padding:14px}
.panther-note{text-transform:none; letter-spacing:0; font-size:var(--fs-caption);
  line-height:1.6; color:var(--ink-soft); text-align:left; opacity:1; font-style:normal;
  max-width:640px; margin:.95rem auto 0; padding:0 2px}
.issue-meta{text-align:center; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.16em; font-size:var(--fs-caption); margin-bottom:.8rem}
.issue-intro{max-width:680px; margin:0 auto; text-align:center}
.archive-wrap{text-align:center; margin-top:3.4rem; padding-top:var(--sp-6); border-top:1px solid var(--rule)}
.archive-toggle{cursor:pointer}
.archive-toggle[aria-expanded="true"]{margin-bottom:var(--sp-5)}
.archive-panel[hidden]{display:none}
.placeholder{max-width:680px; margin:0 auto; text-align:center; border:1px dashed var(--rule-gold);
  border-radius:4px; padding:var(--sp-5) 1.6rem; background:rgba(40,50,79,.035)}
.placeholder .big{font-family:var(--display); font-size:var(--fs-h3); color:var(--navy); margin-bottom:.5rem}
.placeholder p{color:var(--ink-soft); margin:0 auto; max-width:520px}
.toc{margin:1.8rem auto 0; max-width:680px}
.toc .grp{color:var(--gold-text); text-transform:uppercase; letter-spacing:.18em; font-size:var(--fs-eyebrow);
  font-weight:700; margin:var(--sp-3) 0 .7rem; padding-bottom:.4rem; border-bottom:1px solid var(--rule)}
.toc .grp:first-child{margin-top:0}
.toc .grp .bk{text-transform:none; letter-spacing:0; font-style:italic; font-weight:400; color:var(--ink-soft)}
.toc ul{list-style:none; margin:0; padding:0}
.toc li{margin:0 0 .85rem}
.toc .t{display:block; font-size:var(--fs-small); line-height:1.32}
.toc .by{display:block; font-size:var(--fs-caption); color:var(--ink-soft); margin-top:.12em}
.muse{margin-top:1.9rem; text-align:center}

/* ---- homepage: board ---- */
.board-lead{max-width:640px; margin:0 auto var(--sp-5); text-align:center; color:var(--ink-soft)}
.principals{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.6rem;
  max-width:900px; margin:0 auto var(--sp-5)}
.person{padding-top:1.1rem; border-top:1px solid var(--rule)}
.person .role{color:var(--gold-text); text-transform:uppercase; letter-spacing:.17em; font-size:var(--fs-eyebrow); font-weight:700; margin-bottom:.5rem}
.person .nm{font-family:var(--display); font-size:var(--fs-h3); line-height:1.15}
.person .nm a,.toc .by a,.contact-grid h3 a{color:inherit; text-decoration:none}
.person .nm a:hover,.toc .by a:hover,.contact-grid h3 a:hover{text-decoration:underline; text-underline-offset:3px}
.person .aff{font-size:var(--fs-small); color:var(--ink-soft); margin-top:.25em}
.board-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.4rem 2.4rem; max-width:920px; margin:0 auto}
.board-grid .person .nm{font-size:var(--fs-base)} /* board-grid names: one step below principal names (--fs-h3) */
.ack{max-width:680px; margin:2.8rem auto 0; text-align:center; color:var(--ink-soft);
  font-size:var(--fs-caption); font-style:italic}

/* ---- homepage: author requirements list ---- */
.reqs{list-style:none; padding:0; margin:var(--sp-3) 0; max-width:680px}
.reqs li{position:relative; padding-left:1.5rem; margin:0 0 .7rem; line-height:1.5}
.reqs li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px;
  background:var(--gold); transform:rotate(45deg)}
.note{max-width:680px; font-size:var(--fs-caption); color:var(--ink-soft)}
.subhead{color:var(--gold-text); text-transform:uppercase; letter-spacing:.17em; font-size:var(--fs-eyebrow); font-weight:700; margin:1.7rem 0 .6rem}
.reqs li strong{font-weight:700; color:var(--ink)}

/* ---- homepage: news cards (on navy) ---- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.6rem; max-width:920px; margin:0 auto}
  /* card has two roles: news card on navy (homepage) and dossier card on ivory
     (inner pages). Surface and accent differ by context, so each is scoped. */
  body.home .card{border:1px solid var(--rule-gold); border-radius:5px; padding:1.6rem 1.7rem; background:rgba(245,239,224,.05)}
  body.home .card .tag{color:var(--gold); text-transform:uppercase; letter-spacing:.18em; font-size:var(--fs-eyebrow); font-weight:700; margin-bottom:.7rem}
  body.home .card h3{font-size:var(--fs-h3); color:var(--gold-2); margin-bottom:.5rem}
  body.home .card p{font-size:var(--fs-small); color:rgba(245,239,224,.85); margin-bottom:.9rem}
  body.home .card .when{font-size:var(--fs-caption); color:rgba(245,239,224,.7); letter-spacing:.04em}
.editable{display:inline-block; margin-bottom:.9rem; font-size:var(--fs-eyebrow); letter-spacing:.12em;
  text-transform:uppercase; color:var(--navy-2); background:var(--gold); padding:3px 9px; border-radius:4px}
.news-lead{max-width:640px; margin:0 auto var(--sp-5); text-align:center; color:rgba(245,239,224,.82)}

/* ---- homepage: rates table ---- */
.rates{border-collapse:collapse; width:100%; max-width:680px; margin:var(--sp-3) 0; font-size:var(--fs-small)}
.rates caption{text-align:left; color:var(--gold-text); text-transform:uppercase; letter-spacing:.16em;
  font-size:var(--fs-eyebrow); font-weight:700; margin-bottom:.7rem}
.rates th,.rates td{text-align:left; padding:.6rem .4rem; border-bottom:1px solid var(--rule)}
.rates th{font-family:var(--text); font-weight:700; color:var(--navy)}
.rates td:not(:first-child),.rates th:not(:first-child){text-align:right; white-space:nowrap}
.subbtns{display:flex; flex-wrap:wrap; gap:.9rem; margin:1.6rem 0}
.subnote{max-width:680px; font-size:var(--fs-caption); color:var(--ink-soft); margin-top:.4rem}

/* ---- homepage: contact grid ---- */
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.8rem; max-width:880px; margin:0 auto}
.contact-grid h3{font-size:var(--fs-h3); margin-bottom:.4rem}
.contact-grid p{font-size:var(--fs-small); margin-bottom:.3rem}
.contact-grid .role{color:var(--gold-text); text-transform:uppercase; letter-spacing:.16em; font-size:var(--fs-eyebrow); font-weight:700; margin-bottom:.5rem}

/* ============================================================
   INNER-PAGE COMPONENTS — context card, forms, receipt, prose.
   These markup blocks appear only on inner pages, so they carry no
   homepage counterpart and need no scoping; class names are unique.
   ============================================================ */
.formwrap{padding:clamp(2.2rem,5vw,3.6rem) 0 clamp(3rem,6vw,4.6rem)}
.dossier{max-width:760px; margin:0 auto}

.ctx{background:var(--navy); color:var(--ivory); border:1px solid var(--rule-gold); border-radius:4px; padding:1.3rem 1.5rem; margin-bottom:1.6rem; text-align:center}
.ctx .ck{color:var(--gold); text-transform:uppercase; letter-spacing:.2em; font-size:var(--fs-eyebrow); font-weight:700; margin-bottom:.5rem}
.ctx .cid{font-family:var(--display); color:var(--gold-2); letter-spacing:.05em; font-size:var(--fs-small); margin-bottom:.2rem}
.ctx .ctitle{font-family:var(--display); font-size:var(--fs-h3); color:var(--ivory); line-height:1.2}
.ctx .cnote{margin:.7rem 0 0; font-size:var(--fs-caption); color:rgba(245,239,224,.72)}

  /* .card on inner pages: dossier card on ivory (distinct from homepage news card) */
  body.page .card{position:relative; background:var(--ivory-2); border:1px solid var(--rule-gold); border-radius:4px; padding:clamp(1.6rem,4vw,2.6rem)}
  body.page .card .corner{position:absolute; width:22px; height:22px; color:var(--gold)}
  body.page .card .corner.tl{top:-11px; left:-11px} body.page .card .corner.tr{top:-11px; right:-11px}
  body.page .card .corner.bl{bottom:-11px; left:-11px} body.page .card .corner.br{bottom:-11px; right:-11px}
  body.page .card h2{font-size:var(--fs-h2); margin-bottom:.5rem}
.eyebrow{color:var(--gold-text); text-transform:uppercase; letter-spacing:.2em; font-size:var(--fs-eyebrow); font-weight:700; margin-bottom:.4rem}
.lede{color:var(--ink-soft); max-width:54ch; margin-bottom:1.7rem}

.field{margin-bottom:1.4rem}
.field > label,.legend{display:block; font-family:var(--text); text-transform:uppercase; letter-spacing:.13em; font-size:var(--fs-eyebrow); font-weight:700; color:var(--navy); margin-bottom:.5rem}
.req{color:var(--gold-text); font-weight:700}
.opt{color:var(--ink-soft); text-transform:none; letter-spacing:0; font-weight:400; font-size:.82em; font-style:italic; margin-left:.4rem}
.hint{font-size:var(--fs-caption); color:var(--ink-soft); margin:.35rem 0 0}
textarea{width:100%; font-family:var(--text); font-size:var(--fs-small); color:var(--ink); background:var(--field); border:1px solid var(--field-line); border-radius:3px; padding:.7rem .85rem; line-height:1.55; resize:vertical; min-height:8rem; transition:border-color .18s, box-shadow .18s}
textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(197,162,78,.22)}
textarea::placeholder{color:#a59a82}

/* text-like inputs: same cream field + gold focus ring as the textarea, single-line */
input[type=text],input[type=email],input[type=number]{width:100%; font-family:var(--text); font-size:var(--fs-small); color:var(--ink); background:var(--field); border:1px solid var(--field-line); border-radius:3px; padding:.6rem .85rem; line-height:1.4; transition:border-color .18s, box-shadow .18s}
input[type=text]:focus,input[type=email]:focus,input[type=number]:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(197,162,78,.22)}
input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder{color:#a59a82}
input[type=number]{appearance:textfield; -moz-appearance:textfield}
.field.bad input[type=text],.field.bad input[type=email],.field.bad input[type=number]{border-color:var(--err)}

/* file inputs: field surface + a styled selector button in the site's button language */
input[type=file]{width:100%; font-family:var(--text); font-size:var(--fs-caption); color:var(--ink-soft); background:var(--field); border:1px solid var(--field-line); border-radius:3px; padding:.55rem .7rem; cursor:pointer; transition:border-color .18s, box-shadow .18s}
input[type=file]:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(197,162,78,.22)}
.field.bad input[type=file]{border-color:var(--err)}
input[type=file]::file-selector-button{font-family:var(--text); font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:.1em; color:var(--gold); background:var(--navy); border:1px solid var(--gold); border-radius:3px; padding:.45em 1em; margin-right:.9rem; cursor:pointer; transition:background .2s, color .2s}
input[type=file]::file-selector-button:hover{background:var(--gold); color:var(--navy-2)}

.field.bad textarea,.field.bad .recgrid{border-color:var(--err)}
.field.bad .recgrid{box-shadow:0 0 0 3px rgba(154,51,36,.14); border-radius:4px}
.errline{display:none; color:var(--err); font-size:var(--fs-caption); margin-top:.4rem}
.field.bad .errline{display:block}

.recgrid{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
.reccard{position:relative; cursor:pointer; border:1px solid var(--field-line); border-radius:4px; background:var(--field); padding:1.1rem 1.2rem; transition:border-color .18s, box-shadow .18s, background .18s}
.reccard:hover{border-color:var(--gold)}
.reccard:has(input:focus-visible){border-color:var(--gold); box-shadow:0 0 0 3px rgba(197,162,78,.3)}
.reccard input{position:absolute; opacity:0; pointer-events:none}
.reccard .rk{font-family:var(--display); font-size:var(--fs-small); color:var(--navy); display:block; margin-bottom:.2rem}
.reccard .rd{font-size:var(--fs-caption); color:var(--ink-soft); line-height:1.45}
.reccard.sel{border-color:var(--gold); background:var(--gold-wash); box-shadow:0 0 0 3px rgba(197,162,78,.18)}
.reccard.sel::after{content:""; position:absolute; top:11px; right:13px; width:7px; height:12px; border:solid var(--gold); border-width:0 2px 2px 0; transform:rotate(43deg)}
.check{display:flex; gap:.7rem; align-items:flex-start; line-height:1.5; cursor:pointer}
.check input{margin-top:.2rem; width:18px; height:18px; accent-color:var(--navy); flex:none; cursor:pointer}
.check span{font-size:var(--fs-small); color:var(--ink)}

.nav-btns{display:flex; align-items:center; justify-content:flex-end; gap:1rem; margin-top:var(--sp-4)}
  /* inner-page form buttons fill navy (distinct surface role from hero CTAs) */
  body.page .btn{padding:.85em 1.7em; background:var(--navy); cursor:pointer; transition:background .22s, color .22s, opacity .22s}
  body.page .btn:hover{background:var(--gold); color:var(--navy-2)}
  body.page .btn[disabled]{opacity:.45; cursor:not-allowed}
  body.page .btn[disabled]:hover{background:var(--navy); color:var(--gold)}

.banner{display:none; margin-top:1.3rem; border:1px solid var(--err); background:rgba(154,51,36,.06); border-radius:3px; padding:.9rem 1.1rem; color:var(--err); font-size:var(--fs-small)}
.banner.on{display:block}
.banner a{color:var(--err); font-weight:700}
.guard{display:none; text-align:center; color:var(--ink-soft); padding:1rem 0}
.guard.on{display:block}

.receipt{display:none; max-width:680px; margin:0 auto; text-align:center}
.receipt.on{display:block}
.seal{position:relative; width:96px; height:96px; margin:0 auto 1.6rem}
.seal svg{width:100%; height:100%; color:var(--gold)}
.receipt h2{color:var(--navy); font-size:var(--fs-h2); margin-bottom:.7rem}
.receipt .rlede{color:var(--ink-soft); max-width:48ch; margin:0 auto}
.preview-note{margin-top:var(--sp-4); font-size:var(--fs-caption); color:var(--ink-soft); font-style:italic; border-top:1px dashed var(--rule); padding-top:1rem}

/* ---- inner-page prose (policy/guideline body) ---- */
.prose h3{font-size:var(--fs-h3); margin:2.1rem 0 .5rem; color:var(--navy)}
.prose p{margin:0 0 1em; color:var(--ink)}
.prose .lead{font-size:var(--fs-base); color:var(--ink-soft); margin-bottom:1.6rem}
.prose ul{margin:0 0 1.2em; padding-left:1.2rem}
.prose li{margin:.35rem 0}
.prose .rule{display:flex; align-items:center; justify-content:center; gap:13px; margin:2.4rem 0 1.2rem}
.prose .rule .seg{height:1px; width:80px; background:var(--rule)}
.prose .rule .rose{width:13px; height:13px; color:var(--gold)}

/* ============================================================
   FOOTER — one finalized treatment, identical on every page.
   Publisher + ISSN + copyright/cover-credit + one contact line.
   No footerFine branch. Mark size (56px) is its own role, distinct
   from the nav mark (34px).
   ============================================================ */
.foot{background:var(--navy-2); color:rgba(245,239,224,.8); padding:var(--sp-6) 0 2.4rem; border-top:1px solid var(--rule-gold)}
.foot .top{display:flex; align-items:center; gap:14px; justify-content:center; margin-bottom:1.2rem}
.foot .mark{width:56px; height:calc(56px * 575/820); background:var(--gold);
  -webkit-mask:var(--mono) center/contain no-repeat; mask:var(--mono) center/contain no-repeat}
.foot .wm{font-family:var(--display); color:var(--ivory); font-size:var(--fs-h3)}
.foot .links{display:flex; flex-wrap:wrap; gap:1.3rem; justify-content:center; margin:1.2rem 0;
  list-style:none; padding:0}
.foot .links a{color:var(--gold-2); text-transform:uppercase; letter-spacing:.14em; font-size:var(--fs-eyebrow)}
.foot .fine{text-align:center; font-size:var(--fs-caption); line-height:1.7; color:rgba(245,239,224,.65); margin-top:1.1rem}
.foot .fine a{color:var(--gold-2)}
.foot .fine .issn{letter-spacing:.06em}

/* ============================================================
   MOTION — reveal + hero entrance. Content is visible by default;
   JS adds the .js hook to enable motion (no-JS sees everything).
   Constants live in :root. Reduced-motion disables all of it.
   ============================================================ */
.reveal{opacity:1; transform:none}
body.js .reveal{opacity:0; transform:translateY(16px); transition:opacity var(--motion-dur) ease, transform var(--motion-dur) ease}
body.js .reveal.is-in{opacity:1; transform:none}
.hero .anim{opacity:1}
body.js .hero .anim{opacity:0; animation:fadeUp .95s var(--motion-ease) forwards}
body.js .hero .anim:nth-child(1){animation-delay:.05s}
body.js .hero .anim:nth-child(2){animation-delay:.18s}
body.js .hero .anim:nth-child(3){animation-delay:.31s}
body.js .hero .anim:nth-child(4){animation-delay:.44s}
body.js .hero .anim:nth-child(5){animation-delay:.57s}
body.js .hero .anim:nth-child(6){animation-delay:.7s}
@keyframes fadeUp{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
/* receipt seal pop (inner-page webhook success) */
body.page.anim .receipt.on .seal{animation:pop .5s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes pop{from{opacity:0; transform:scale(.8)} to{opacity:1; transform:none}}

/* cross-page crossfade on navigation — progressive enhancement; ignored where unsupported */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.24s; animation-timing-function:ease}

/* ============================================================
   RESPONSIVE — one mobile nav behavior for the canonical nav.mainnav.
   ============================================================ */
@media (max-width:860px){
  .cover{max-width:100%}}
@media (max-width:720px){
  body{--body-size:1.06rem}
  .navtoggle{display:inline-block}
  nav.mainnav{position:absolute; top:64px; left:0; right:0; background:var(--navy);
    border-bottom:1px solid var(--rule-gold);
    opacity:0; transform:translateY(-10px); visibility:hidden; pointer-events:none;
    transition:opacity .26s var(--motion-ease), transform .26s var(--motion-ease), visibility 0s linear .26s}
  nav.mainnav.open{opacity:1; transform:translateY(0); visibility:visible; pointer-events:auto;
    transition:opacity .26s var(--motion-ease), transform .26s var(--motion-ease), visibility 0s}
  .menu{flex-direction:column; align-items:flex-start; gap:0; padding:.6rem 0}
  .menu li{width:100%}
  .menu a{display:block; padding:.7rem clamp(1.2rem,4vw,2.4rem); width:100%}
  .recgrid{grid-template-columns:1fr}
  .brand .name{font-size:1.02rem}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
  body.js .reveal{opacity:1; transform:none}
  body.js .hero .anim{opacity:1}
  ::view-transition-old(root),::view-transition-new(root){animation:none !important}}