@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#E8DFC8;
  --paper-light:#F4EEDD;
  --paper-dark:#DACBA0;
  --ink:#2B2118;
  --ink-soft:#5B4C3B;
  --burgundy:#7C2D2D;
  --burgundy-light:#9C4444;
  --gold:#A6812E;
  --navy:#1B2733;
  --navy-light:#28394B;
  --paper-on-navy:#E8DFC8;
  --serif-display:'Fraunces', serif;
  --serif-body:'Source Serif 4', serif;
  --mono:'IBM Plex Mono', monospace;
  --rule: 1px solid rgba(43,33,24,0.25);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif-body);
  font-size:18px;
  line-height:1.6;
  background-image:
    radial-gradient(circle at 15% 8%, rgba(166,129,46,0.06), transparent 45%),
    radial-gradient(circle at 90% 85%, rgba(124,45,45,0.05), transparent 50%);
}

a{color:var(--burgundy); text-decoration-thickness:1px; text-underline-offset:3px;}
a:hover{color:var(--ink);}
a:focus-visible, button:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}

.wrap{max-width:760px; margin:0 auto; padding:0 24px;}

/* ---------- Header / crest ---------- */
header.masthead{
  border-bottom:3px double var(--ink);
  padding:36px 0 28px;
}
.crest-row{
  display:flex;
  align-items:center;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
  text-align:center;
}
.crest-svg{flex-shrink:0; width:86px; height:86px;}
.masthead-text{max-width:420px;}
.masthead-eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 6px;
}
.masthead-title{
  font-family:var(--serif-display);
  font-optical-sizing:auto;
  font-weight:700;
  font-size:clamp(26px,4vw,34px);
  margin:0 0 6px;
  letter-spacing:.01em;
}
.masthead-title a{color:var(--ink); text-decoration:none;}
.masthead-sub{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--ink-soft);
  text-transform:uppercase;
}

nav.crumbs{
  font-family:var(--mono);
  font-size:12.5px;
  text-align:center;
  padding-top:14px;
  color:var(--ink-soft);
  letter-spacing:.03em;
}
nav.crumbs a{color:var(--burgundy);}

/* ---------- Entry number / eyebrow tags ---------- */
.entry-tag{
  display:inline-block;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  border:1px solid var(--ink-soft);
  padding:3px 10px;
  border-radius:2px;
  margin-bottom:18px;
}

/* ---------- Headword hero ---------- */
.headword{
  font-family:var(--serif-display);
  font-weight:900;
  font-optical-sizing:auto;
  font-size:clamp(40px,9vw,74px);
  line-height:1.02;
  margin:0 0 10px;
  letter-spacing:-0.01em;
}
.pron-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:baseline;
  margin-bottom:6px;
  font-family:var(--mono);
  color:var(--ink-soft);
  font-size:16px;
}
.pos-tag{
  font-style:italic;
  font-family:var(--serif-body);
  color:var(--burgundy);
}

.register-tags{margin:14px 0 30px;}
.register-tags span{
  display:inline-block;
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  background:var(--paper-dark);
  border:1px solid rgba(43,33,24,.3);
  padding:3px 9px;
  border-radius:2px;
  margin:0 6px 6px 0;
}

/* ---------- Section blocks ---------- */
section.block{margin:38px 0;}
h2.block-title{
  font-family:var(--mono);
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--burgundy);
  border-bottom:var(--rule);
  padding-bottom:8px;
  margin:0 0 18px;
}

.definition{font-size:20px; line-height:1.65;}

/* etymology breakdown */
.etym-breakdown{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:15px;
  margin-top:6px;
}
.etym-piece{
  background:var(--paper-light);
  border:1px solid rgba(43,33,24,.3);
  padding:8px 14px;
  border-radius:3px;
}
.etym-plus, .etym-arrow{color:var(--gold); font-weight:600;}

/* forms table */
table.forms{
  width:100%;
  border-collapse:collapse;
  font-size:16px;
  margin-top:6px;
}
table.forms td{
  padding:9px 6px;
  border-bottom:var(--rule);
}
table.forms td:first-child{
  font-family:var(--mono);
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink-soft);
  width:34%;
}

/* examples */
ol.examples{margin:0; padding-left:0; list-style:none;}
ol.examples li{
  counter-increment:ex;
  padding:12px 0 12px 34px;
  position:relative;
  border-bottom:var(--rule);
  font-size:17px;
}
ol.examples{counter-reset:ex;}
ol.examples li::before{
  content:counter(ex);
  position:absolute; left:0; top:12px;
  font-family:var(--mono);
  font-size:13px;
  color:var(--gold);
  border:1px solid var(--gold);
  width:20px; height:20px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.ex-tag{
  display:block;
  font-family:var(--mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-soft);
  margin-bottom:3px;
}

/* ---------- Perforation / tear divider ---------- */
.perforation{
  position:relative;
  margin:64px 0 0;
  border:none;
  border-top:2px dashed rgba(43,33,24,.55);
  height:0;
}
.perforation-label{
  text-align:center;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:-11px;
}
.perforation-label span{
  background:var(--paper);
  padding:0 12px;
}

/* ---------- Machine-readable section ---------- */
.machine-section{
  background:var(--navy);
  color:var(--paper-on-navy);
  margin-top:0;
  padding:44px 0 56px;
}
.machine-section .wrap{max-width:760px;}
.machine-eyebrow{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8FA7BE;
  margin-bottom:8px;
}
.machine-title{
  font-family:var(--serif-display);
  font-weight:700;
  font-size:24px;
  margin:0 0 14px;
  color:var(--paper-on-navy);
}
.machine-note{
  font-family:var(--serif-body);
  font-size:15.5px;
  color:#C9D3DC;
  max-width:60ch;
  margin-bottom:22px;
}
.machine-note a{color:#E4C77E;}
pre.jsonld{
  background:var(--navy-light);
  border:1px solid rgba(232,223,200,.18);
  border-radius:4px;
  padding:18px;
  overflow-x:auto;
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.6;
  color:#DCE6EE;
}
.machine-links{
  display:flex; gap:18px; flex-wrap:wrap;
  margin-top:20px;
  font-family:var(--mono);
  font-size:13px;
}
.machine-links a{color:#E4C77E;}

/* ---------- Footer ---------- */
footer.site-footer{
  border-top:3px double var(--ink);
  padding:26px 0 40px;
  text-align:center;
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-soft);
  letter-spacing:.03em;
}
footer.site-footer a{color:var(--burgundy);}

/* ---------- Index page: entry cards ---------- */
.entry-card{
  display:block;
  border:1px solid rgba(43,33,24,.3);
  background:var(--paper-light);
  border-radius:4px;
  padding:26px 28px;
  margin-bottom:20px;
  text-decoration:none;
  color:var(--ink);
  transition:border-color .15s ease, transform .15s ease;
}
.entry-card:hover{border-color:var(--burgundy); transform:translateX(2px);}
.entry-card .entry-tag{margin-bottom:10px;}
.entry-card .card-word{
  font-family:var(--serif-display);
  font-weight:800;
  font-size:clamp(28px,5vw,38px);
  margin:0 0 8px;
  color:var(--ink);
}
.entry-card .card-def{font-size:16.5px; color:var(--ink-soft); margin:0;}

.intro{
  font-size:18.5px;
  color:var(--ink-soft);
  max-width:62ch;
  margin:0 auto 40px;
  text-align:center;
}
.intro strong{color:var(--ink);}

main{padding:48px 0 0;}