/* Department of Small Matters — shared document styling for the answer library.
   Matches the generated legal pages so the guidance is visibly the same
   institution. Kept as one file rather than inlined seven times: these pages
   are generated by scripts/build-answer-library.cjs, and seven drifting copies
   of the same rules is the defect that put divergent landing pages in two
   folders. */

@font-face{font-family:'Cormorant Garamond';src:url('./fonts/CormorantGaramond-Roman.ttf') format('truetype');font-style:normal;font-weight:300 700;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('./fonts/CormorantGaramond-Italic.ttf') format('truetype');font-style:italic;font-weight:300 700;font-display:swap}
@font-face{font-family:'Cormorant SC';src:url('./fonts/CormorantSC-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Cormorant SC';src:url('./fonts/CormorantSC-Medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'Cormorant SC';src:url('./fonts/CormorantSC-SemiBold.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:'Gelasio';src:url('./fonts/Gelasio-Roman.ttf') format('truetype');font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:'Gelasio';src:url('./fonts/Gelasio-Italic.ttf') format('truetype');font-style:italic;font-weight:400 700;font-display:swap}
@font-face{font-family:'Space Mono';src:url('./fonts/SpaceMono-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url('./fonts/SpaceMono-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}

:root{
  --paper:#f4edd8; --sheet:#f8f1de; --ink:#1c1812; --ink-mid:#3d3526; --ink-light:#665a45;
  --gold:#7a6330; --gold-mid:#9a7b3a; --red:#8b2020; --navy:#1e3a5f; --emerald-dark:#1e4a37; --line:#cbbd9e;
  --serif:'Cormorant Garamond',Georgia,serif; --sc:'Cormorant SC',Georgia,serif;
  --read:'Gelasio',Georgia,'Times New Roman',serif; --mono:'Space Mono',ui-monospace,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; color:var(--ink); font-family:var(--read); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-color:var(--paper);
  background-image:radial-gradient(circle at 18% 27%, rgba(139,115,64,.06) 0 1px, transparent 1.6px), radial-gradient(circle at 76% 63%, rgba(28,24,18,.035) 0 1px, transparent 1.5px);
  background-size:18px 20px, 24px 30px; padding:26px}
a{color:var(--navy)}
svg{display:block}
.frame{position:relative; max-width:900px; margin:0 auto; padding:30px 44px 40px;
  border:2px solid var(--navy);
  box-shadow:inset 0 0 0 4px var(--paper), inset 0 0 0 5px rgba(30,58,95,.5), 0 30px 80px -50px rgba(28,24,18,.5)}

/* header */
.masthead{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:14px 4px 20px; border-bottom:3px double var(--navy)}
.lockup{display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink)}
.lockup .mark{width:52px; height:52px; flex:0 0 auto}
.lockup .bar{width:1px; height:38px; background:rgba(28,24,18,.22)}
.lockup .word{font-family:var(--sc); font-size:20px; letter-spacing:.14em; text-transform:uppercase; display:block; line-height:1.05}
.lockup .tag{font-family:var(--read); font-style:italic; font-size:12.5px; color:var(--ink-light); margin-top:3px; display:block}
.backlink{font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--navy); text-decoration:none; border-bottom:1px solid var(--gold-mid); padding-bottom:3px}

/* doc head */
.dochead{text-align:center; padding:56px 0 8px}
.kicker{font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--red)}
/* Keep every heading word intact. A previous repair made the long word
   ACKNOWLEDGEMENT break as ACKNOWLEDGEME / NT, which removed horizontal
   overflow but replaced it with a visible typesetting defect. The phone tier
   below provides a scale that fits the longest approved word instead. */
.dochead h1{font-family:var(--serif); font-weight:600; font-size:clamp(34px,5.4vw,52px); text-transform:uppercase;
  letter-spacing:.03em; color:var(--navy); line-height:1.04; margin:14px 0 0;
  overflow-wrap:normal; hyphens:none; text-wrap:balance}
.diamond{position:relative; width:56px; height:1px; margin:20px auto; background:var(--gold-mid)}
.diamond::after{content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; transform:translate(-50%,-50%) rotate(45deg); background:var(--gold-mid)}
.meta{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-light)}
.lede{max-width:660px; margin:22px auto 0; font-family:var(--serif); font-style:italic; font-size:21px; line-height:1.5; color:var(--ink-mid); text-align:center}

/* the direct answer, given first and set apart */
.finding{max-width:720px; margin:44px auto 0; padding:26px 30px; background:var(--sheet);
  border:3px double var(--navy); box-shadow:0 18px 40px -30px rgba(78,54,18,.6)}
.finding .lbl{font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--red); display:block; padding-bottom:12px; border-bottom:1px solid rgba(139,32,32,.28)}
.finding p{margin:14px 0 0; font-size:18px}

/* body */
.doc{max-width:720px; margin:0 auto; padding-top:20px}
.doc section{padding-top:40px}
.doc h2{font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); margin:0 0 16px; padding-bottom:11px; border-bottom:1px solid var(--line)}
.doc h3{font-family:var(--sc); font-size:19px; letter-spacing:.06em; color:var(--navy); margin:22px 0 6px}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 14px; padding-left:22px}
.doc li{margin:0 0 8px}
.doc strong{font-weight:600}
.doc .note{font-style:italic; color:var(--ink-light); font-size:15.5px}

/* schedule of examples */
.schedule{margin:0 0 14px; padding:0; list-style:none; border-top:1px solid var(--line)}
.schedule li{margin:0; padding:11px 0 11px 26px; border-bottom:1px solid var(--line); position:relative}
.schedule li::before{content:""; position:absolute; left:4px; top:19px; width:5px; height:5px; transform:rotate(45deg); background:var(--gold-mid)}

/* onward enquiries */
.onward{max-width:720px; margin:52px auto 0; padding:24px 26px; border:1px solid var(--line); background:rgba(248,241,222,.55)}
.onward .lbl{font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--red); display:block; margin-bottom:12px}
.onward ul{margin:0; padding-left:22px}
.onward li{margin:0 0 7px}

/* footer */
.site-footer{display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; gap:24px;
  margin-top:56px; padding:28px 4px 8px; border-top:3px double var(--navy)}
.foot-brand .word{font-family:var(--sc); font-size:16px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink)}
.foot-brand .ftag{font-family:var(--read); font-style:italic; font-size:13px; color:var(--ink-light); margin-top:3px}
.registrar{text-align:center; color:var(--navy)}
.registrar .r{font-family:var(--serif); font-style:italic; font-size:32px; border-bottom:1px solid var(--ink-light); display:inline-block; padding:0 10px 2px}
.registrar .rl{font-family:var(--sc); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-light); margin-top:6px}
.reference{text-align:right; font-family:var(--mono); font-weight:700; font-size:10px; letter-spacing:.05em; color:var(--ink-light); line-height:2}
.reference a{text-decoration:none; border-bottom:1px solid var(--gold-mid)}
.colophon{margin-top:20px; padding-top:16px; border-top:1px solid var(--line); text-align:center; font-family:var(--serif); font-style:italic; font-size:13px; color:var(--ink-light)}

@media (max-width:640px){
  body{padding:14px}
  .frame{padding:22px 20px 30px}
  /* Long approved words receive their own balanced scale. Shrinking every
     answer heading made the shorter pages needlessly timid; breaking a word
     made the long page look typeset by accident. */
  .dochead h1.long-word{font-size:clamp(22px,6.5vw,34px); letter-spacing:.025em}
  .site-footer{grid-template-columns:1fr; text-align:center; gap:18px}
  .reference{text-align:center}
  .backlink{order:3}
}
@media print{ body{padding:0; background:#fff} .frame{box-shadow:none; max-width:none} }