/* ============================================================
   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;
    --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 * 579/829); color:var(--gold); 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{color:var(--gold)}
.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 * 579/829)}
  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 plate, narrower
   frame, ornaments one step smaller than the homepage masthead — the compact
   counterpart to the masthead above). The plate carries an eyebrow kicker, the
   gold title, an ornrule, and (where the page has one) a one-line tagline. Sized
   once here for this layout.

   The hero renders as the first child of <main>, but <main> carries content
   padding (.formwrap / .hub). So the hero breaks out to full viewport width and
   cancels the body region's top padding, seating the navy band flush under the
   sticky nav exactly like the homepage hero, while its own .wrap padding gives
   the framed plate clearance from the nav edge — the fix for the cramped top. */
  body.page .formwrap > .hero:first-child,
  body.page .hub > .hero:first-child{width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw)}
  body.page .formwrap:has(> .hero:first-child),
  body.page .hub:has(> .hero:first-child){padding-top:0}
  /* Reinstate the gap between the navy band's lower edge and the first content,
     applied to the content wrapper (not the region) so the band itself stays
     flush under the nav while the prose/dossier opens with air above it. */
  body.page .formwrap:has(> .hero:first-child) > .wrap,
  body.page .hub:has(> .hero:first-child) > .wrap{padding-top:clamp(2.4rem,4.5vw,3.4rem)}
  body.page .hero .wrap{padding:clamp(3rem,5.5vw,4.4rem) clamp(1.2rem,4vw,2.4rem) clamp(2.6rem,5vw,3.6rem)}
  body.page .hero-frame{padding:clamp(2.2rem,5vw,3.2rem) clamp(1.4rem,4vw,2.6rem); max-width:760px; 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 .hero .eyebrow{color:var(--gold); opacity:.92; margin-bottom:.85rem}
  body.page .hero h1{color:var(--gold); font-size:clamp(1.95rem,5.4vw,2.9rem); letter-spacing:.01em; margin:0}
  body.page .ornrule{margin:1.15rem auto}
  body.page .ornrule .seg{width:min(96px,18vw)}
  body.page .ornrule .rose{width:14px; height:14px}
  body.page .hero .tagline{max-width:560px; margin:0 auto; color:var(--ivory); font-size:var(--fs-lead); line-height:1.55; opacity:.92}
  /* When no tagline follows, the ornrule is the closing ornament: shed its lower margin. */
  body.page .hero .ornrule:last-child{margin-bottom:0}

  /* Slim plate — the four JS webhook forms (submit / review / revise / status).
     Same ornaments and frame so the plate stays part of the set, but reduced
     vertical padding and a tighter title so a full-grand plate never pushes the
     stepper and form fields down the page. */
  body.page .hero--slim .wrap{padding:clamp(2.4rem,4.5vw,3.4rem) clamp(1.2rem,4vw,2.4rem) clamp(2rem,4vw,2.8rem)}
  body.page .hero--slim .hero-frame{padding:clamp(1.6rem,3.6vw,2.3rem) clamp(1.4rem,4vw,2.4rem); max-width:680px}
  body.page .hero--slim h1{font-size:clamp(1.7rem,4.4vw,2.4rem)}
  body.page .hero--slim .eyebrow{margin-bottom:.65rem}
  body.page .hero--slim .ornrule{margin:.95rem auto}

/* ============================================================
   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:20px; border:1px solid var(--rule-gold); border-radius:3px;
  max-width:660px; margin:0 auto 1.8rem;
  box-shadow:0 10px 30px -8px rgba(31,40,64,.45), 0 2px 6px rgba(31,40,64,.25)}
.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:20px 20px 0}
.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.
   ============================================================ */
/* Body region below the hero. Top pad is deliberately modest — the hero plate
   above now provides the page's opening breath, so this only needs to set the
   gap between plate and first content, not carry the whole top rhythm. */
.formwrap{padding:clamp(2.4rem,4.5vw,3.4rem) 0 clamp(3rem,6vw,4.6rem)}
.dossier{max-width:760px; margin:0 auto}
/* Shared hub spacing — the landing/hub pages (for-authors, subscribe, contact,
   issues) render <main class="hub"> but historically styled it only inline (or
   not at all, leaving content flush under the nav). One canonical rhythm here so
   every hub seats the same distance below the hero plate. */
.hub{padding:clamp(2.2rem,4.5vw,3.2rem) 0 clamp(2.6rem,5vw,3.6rem)}

.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.9rem}
.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:14px; height:14px; 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 * 579/829); color:var(--gold)}
.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}}