/* ============================================================
   JURISVILLE - shared stylesheet (v3)
   Warm minimal: deep cream paper, charcoal ink, muted gold, ledger green
   One deliberate animated illustration in the hero; everything else static.
   ============================================================ */

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

:root{
  --paper: #E9E1CC;
  --paper-deep: #DED1AF;
  --card: #F1E9D6;
  --ink: #262320;
  --ink-soft: #524C3D;
  --ink-faint: #837A5F;
  --gold: #A9812F;
  --gold-deep: #7C5E22;
  --ledger: #3F4B3B;
  --ledger-deep: #2E3730;
  --line: #D0C29B;
  --line-soft: #DACC9F;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --max: 1180px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --radius: 3px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }
button{ font-family: inherit; cursor:pointer; }

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

a:focus-visible, button:focus-visible, summary:focus-visible{
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}

/* ---------- nav ---------- */
.site-nav{
  position: sticky; top:0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 68px;
}
.brand{
  font-family: var(--serif); font-weight: 600; font-size: 1.35rem;
  letter-spacing: 0.01em; display:flex; align-items:baseline; gap:.5rem;
}
.brand .mark{ color: var(--gold-deep); font-style: italic; font-weight:500; }
.nav-links{ display:flex; align-items:center; gap: 2.2rem; }
.nav-links a{ font-size: 0.92rem; font-weight:500; color: var(--ink-soft); }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color: var(--ink); }
.nav-links a[aria-current="page"]{ border-bottom: 1px solid var(--gold-deep); }
.nav-toggle{ display:none; background:none; border:none; padding:8px; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; }

@media (max-width: 720px){
  .nav-links{
    display:none; position:fixed; inset: 68px 0 auto 0; background: var(--paper);
    flex-direction:column; align-items:flex-start; gap:0;
    border-bottom:1px solid var(--line); padding: .5rem var(--pad) 1rem;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ width:100%; padding: .8rem 0; border-bottom:1px solid var(--line-soft); }
  .nav-links a[aria-current="page"]{ border-bottom: 1px solid var(--line-soft); }
  .nav-toggle{ display:block; }
}

/* ---------- hero ---------- */
.hero{ padding: clamp(3rem,6vw,5.5rem) 0 clamp(2.5rem,5vw,3.5rem); }
.hero-grid{ display:grid; grid-template-columns: 1.6fr 1fr; gap: 3rem; align-items:center; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } .hero-illustration{ display:none; } }

.hero .eyebrow{
  font-family: var(--mono); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ledger);
  display:flex; align-items:center; gap:.6rem; margin-bottom: 1.4rem;
}
.hero .eyebrow::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background: var(--gold); display:inline-block;
}
.hero h1{
  font-family: var(--serif); font-weight:600; font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.1; letter-spacing: -0.01em; max-width: 16ch; margin: 0 0 1.3rem;
}
.hero h1 em{ font-style: italic; font-weight: 500; color: var(--gold-deep); }
.hero p.lede{
  font-size: clamp(1.02rem, 1.5vw, 1.15rem); color: var(--ink-soft);
  max-width: 50ch; margin: 0 0 2rem;
}
.hero-actions{ display:flex; gap: 1rem; flex-wrap:wrap; align-items:center; }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; font-size:.94rem; padding: .8rem 1.4rem;
  border-radius: var(--radius); border:1px solid transparent;
}
.btn-primary{ background: var(--ink); color: var(--paper); }
.btn-primary:hover{ background: var(--ledger-deep); }
.btn-ghost{ border-color: var(--line); color: var(--ink); }
.btn-ghost:hover{ border-color: var(--gold-deep); color: var(--gold-deep); }

/* ---------- hero illustration: a notebook page turning ---------- */
.hero-illustration{
  border:1px solid var(--line); border-radius: 8px; background: var(--card);
  padding: 1.8rem; display:flex; align-items:center; justify-content:center;
}
.notebook{ display:flex; align-items:stretch; width: 220px; height: 150px; }
.notebook-page{
  flex:1; background: var(--paper); border:1px solid var(--line);
  padding: 14px 12px; display:flex; flex-direction:column; gap:8px; justify-content:center;
}
.left-page{ border-radius: 4px 0 0 4px; border-right:none; }
.notebook-spine{
  width:14px; background: var(--ledger); display:flex; flex-direction:column;
  align-items:center; justify-content:space-evenly; z-index:2;
}
.coil{ width:6px; height:6px; border-radius:50%; background: var(--card); display:block; }
.right-page-wrap{ flex:1; position:relative; perspective: 700px; }
.right-page-wrap .notebook-page{
  position:absolute; inset:0; border-radius: 0 4px 4px 0; border-left:none;
  backface-visibility: hidden;
}
.flip-page{ transform-origin: left center; animation: pageTurn 4.5s ease-in-out infinite; }
.nb-line{ height:4px; background: var(--gold); opacity:.55; border-radius:2px; display:block; }
.nb-line.highlight{ background: var(--gold-deep); opacity:1; height:5px; }
@keyframes pageTurn{
  0%   { transform: rotateY(0deg); }
  38%  { transform: rotateY(-175deg); }
  60%  { transform: rotateY(-175deg); }
  100% { transform: rotateY(0deg); }
}
@media (prefers-reduced-motion: reduce){
  .flip-page{ animation: none; }
}

/* ---------- category index (interactive coverage-style pills) ---------- */
.category-section{ padding: 0 0 clamp(2.5rem,5vw,3.5rem); }
.category-label{
  font-family: var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ink-faint); margin: 0 0 .8rem;
}
.category-index{ display:flex; flex-wrap:wrap; gap:.7rem; }
.category-tab{
  background: var(--card); border:1px solid var(--line); border-radius: 999px;
  padding: .55rem 1.1rem;
  font-family: var(--mono); font-size:.82rem; letter-spacing:.02em;
  color: var(--ink-soft);
}
.category-tab:hover{ color: var(--gold-deep); border-color: var(--gold-deep); background: var(--paper-deep); }

/* ---------- section headers ---------- */
.section{ padding: clamp(3rem,6vw,4.5rem) 0; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  margin-bottom: 2.2rem; flex-wrap:wrap;
  border-bottom: 1px solid var(--line); padding-bottom: 1.1rem;
}
.section-head h2{ font-family: var(--serif); font-weight:600; font-size: clamp(1.5rem,2.6vw,2rem); margin:0; }
.section-head .sub{ font-family: var(--mono); font-size:.78rem; color: var(--ink-faint); letter-spacing:.06em; text-transform:uppercase; }
.section-head a.see-all{ font-size:.9rem; font-weight:600; color: var(--ledger); white-space:nowrap; }
.section-head a.see-all:hover{ color: var(--gold-deep); }

/* ---------- pinned / featured ---------- */
.pinned-grid{ display:grid; grid-template-columns: 1.4fr 1fr; gap: 1.6rem; }
@media (max-width: 860px){ .pinned-grid{ grid-template-columns: 1fr; } }

.feature-card, .post-card{
  background: var(--card); border:1px solid var(--line);
  border-radius: var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
}
.feature-card:hover, .post-card:hover{ border-color: var(--gold-deep); }
.card-mark{
  aspect-ratio: 16/8; position:relative; background: var(--ledger);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.post-card .card-mark{ aspect-ratio: 16/9; }
.card-mark svg{ width: 46%; height:46%; opacity:.9; }
.card-body{ padding: 1.5rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.meta-row{
  display:flex; align-items:center; gap:.7rem; font-family: var(--mono);
  font-size:.74rem; color: var(--ink-faint); letter-spacing:.03em;
}
.tag{
  font-family: var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.03em;
  text-transform: uppercase; color: var(--ledger); background: #E2D8B8;
  padding: .28rem .6rem; border-radius: 999px;
}
.feature-card h3{ font-family: var(--serif); font-size: 1.55rem; font-weight:600; margin:0; line-height:1.2; }
.post-card h3{ font-family: var(--serif); font-size: 1.15rem; font-weight:600; margin:0; line-height:1.28; }
.card-body p{ color: var(--ink-soft); margin:0; font-size:.94rem; }
.read-more{ margin-top:auto; font-weight:600; font-size:.88rem; color:var(--ink); display:inline-flex; align-items:center; gap:.4rem; }

.pinned-side{ display:flex; flex-direction:column; gap: 1.6rem; }

/* ---------- about line (condensed, no heavy section) ---------- */
.about-line{
  border-top: 1px solid var(--line); padding: 1.8rem 0;
  color: var(--ink-soft); font-size: .95rem; max-width: 66ch;
}
.about-line strong{ color: var(--ink); font-weight:600; }

/* ---------- footer ---------- */
footer{ padding: 1.8rem 0 2.6rem; }
.foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.foot-brand{ font-family: var(--serif); font-weight:600; font-size:1.1rem; }
.foot-note{ font-size:.85rem; color: var(--ink-faint); }

/* ============================================================
   BLOG PAGE
   ============================================================ */
.archive-head{ padding: clamp(2.6rem,6vw,4rem) 0 2rem; }
.archive-head .eyebrow{
  font-family: var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--ledger); margin-bottom: 1rem; display:block;
}
.archive-head h1{ font-family: var(--serif); font-weight:600; font-size: clamp(2rem,4.5vw,3rem); margin:0 0 .8rem; }
.archive-head p{ color: var(--ink-soft); max-width: 58ch; margin:0; }

.archive-layout{ display:grid; grid-template-columns: 220px 1fr; gap: 2.6rem; align-items:start; }
@media (max-width: 860px){ .archive-layout{ grid-template-columns: 1fr; } }

.filter-panel{ position: sticky; top: 90px; }
.filter-panel h4{
  font-family: var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ink-faint); margin: 0 0 .9rem;
}
.filter-list{ display:flex; flex-direction:column; gap:.15rem; border-top:1px solid var(--line); }
.filter-list button{
  all:unset; cursor:pointer; padding: .65rem 0; border-bottom:1px solid var(--line-soft);
  font-size:.92rem; color: var(--ink-soft); display:flex; justify-content:space-between;
}
.filter-list button:hover{ color: var(--ink); }
.filter-list button.active{ color: var(--gold-deep); font-weight:600; }
@media (max-width: 860px){
  .filter-panel{ position: static; top: auto; }
  .filter-list{ flex-direction:row; flex-wrap:wrap; border-top:none; }
  .filter-list button{ background: var(--card); border:1px solid var(--line); border-radius:999px; padding:.45rem .9rem; }
}

.entry-list{ display:flex; flex-direction:column; }
.entry{ border-bottom: 1px solid var(--line); padding: 1.7rem 0; }
.entry summary{
  list-style:none; cursor:pointer; display:flex; gap: 1.4rem; align-items:baseline;
  justify-content:space-between;
}
.entry summary::-webkit-details-marker{ display:none; }
.entry-main{ display:flex; flex-direction:column; gap:.5rem; }
.entry-meta{ display:flex; gap:.8rem; align-items:center; font-family:var(--mono); font-size:.74rem; color: var(--ink-faint); }
.entry h3{ font-family: var(--serif); font-weight:600; font-size: 1.35rem; margin:0; line-height:1.25; }
.entry p.excerpt{ color: var(--ink-soft); margin:.2rem 0 0; font-size:.95rem; max-width: 60ch; }
.entry-plus{
  flex-shrink:0; width: 34px; height:34px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; position:relative; margin-top:.2rem;
}
.entry-plus::before, .entry-plus::after{ content:''; position:absolute; background: var(--ink); }
.entry-plus::before{ width:12px; height:1.4px; }
.entry-plus::after{ width:1.4px; height:12px; }
.entry[open] .entry-plus::after{ display:none; }
.entry[open] .entry-plus{ border-color: var(--gold-deep); }
.entry:hover .entry-plus{ border-color: var(--gold-deep); }
.entry:hover .entry-plus::before, .entry:hover .entry-plus::after{ background: var(--gold-deep); }

.entry-full{ padding-top: 1.4rem; max-width: 68ch; color: var(--ink); }
.entry-full p{ margin: 0 0 1.05rem; color: var(--ink-soft); }
.entry-full p:first-of-type::first-letter{
  font-family: var(--serif); font-size: 3.1rem; float:left; line-height:.8;
  padding: .1rem .4rem 0 0; color: var(--gold-deep); font-weight:600;
}
.entry-full h4{ font-family: var(--serif); font-size:1.15rem; margin: 1.4rem 0 .6rem; color: var(--ink); }
.entry-full blockquote{
  margin: 1.2rem 0; padding-left: 1.1rem; border-left: 3px solid var(--gold);
  font-family: var(--serif); font-style:italic; font-size: 1.08rem; color: var(--ink);
}

@media (max-width: 600px){
  .entry summary{ flex-direction:row; }
  .entry h3{ font-size:1.15rem; }
}