/* =========================================================
   DEADECTIVES — stylesheet
   Sections below match the HTML comments in index.html.
   Quick edits:
   - Colors: change the variables in :root
   - Fonts: change the font-family values just below :root
   ========================================================= */

:root{
  --paper: #f3ede0;   /* page background */
  --line: #1c1913;    /* all hairline borders */
  --ink: #1c1913;     /* headings / primary text */
  --ink-soft: #55503f;/* secondary/muted text */
  --accent: #f74a1e;  /* the one accent color — palette's Blazing Flame */
  --redact: #141210;  /* redaction bars */
  --memo-paper: #fffdf8; /* tip-line torn memo notes */
  --border-w: 2px;     /* structural borders — sheet/masthead/section/case/staff outlines */
  --border-w-sub: 1.5px; /* secondary dividers — internal rows/cards inside those */

  /* ---- reference palette ----
     Not used anywhere in this stylesheet — just parked here so it's
     handy to copy from for other designs. Swap these in for --paper/
     --ink/--accent/etc. above if you want to re-theme the site itself. */
  --swatch-seagrass: #4c9d81;
  --swatch-fuchsia-plum: #b851a6;
  --swatch-french-blue: #38498c;
  --swatch-blazing-flame: #f74a1e;
  --swatch-golden-sand: #e1ca76;
  --swatch-almond-silk: #edd4cc;
  --swatch-tea-green: #c9dbab;
  --swatch-ash-grey: #b6cabb;
}

/* ---------- local display fonts ----------
   Three decorative faces, each with one job — don't reuse them
   for body copy or small labels, they're illegible at that size.
   Files live in assets/fonts/ relative to assets/css/styles.css. */
@font-face{ font-family: "Monograph"; src: url("../fonts/monograph-Regular.ttf") format("truetype"); font-display: swap; }
@font-face{ font-family: "Kaoly"; src: url("../fonts/Kaoly Demo-Regular.ttf") format("truetype"); font-display: swap; }
@font-face{ font-family: "Milestone Script"; src: url("../fonts/MilestoneFreeVersion-Script.otf") format("opentype"); font-display: swap; }
@font-face{ font-family: "Magic Vintage"; src: url("../fonts/Magic Vintage TTF.ttf") format("truetype"); font-display: swap; }

/* Crimson Pro (body + labels), self-hosted. Open source, SIL Open Font License 1.1.
   Variable fonts: one file covers every weight from 200 to 900. */
@font-face{ font-family: "Crimson Pro"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("../fonts/CrimsonPro-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family: "Crimson Pro"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("../fonts/CrimsonPro-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family: "Crimson Pro"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("../fonts/CrimsonPro-Italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family: "Crimson Pro"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("../fonts/CrimsonPro-Italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Crimson Pro", Georgia, serif; /* body copy */
  font-size: 20px;
  line-height: 1.55;
}

a{ color: var(--accent); }

/* ---------- headings ----------
   h1 = site wordmark (Monograph). .section-head h2 = section titles
   (Kaoly). .headline / .case-body h3 = case headers — currently Magic
   Vintage; swap the font-family on that line to "Milestone Script"
   (also declared above as a @font-face) to go back to the script look,
   nothing else needs to change. Everything else (card/tile/dashed-box
   h3s) falls through to bold Crimson Pro. */
h1,h2,h3{ margin: 0; text-wrap: balance; }
h2,h3{ font-family: "Crimson Pro", Georgia, serif; font-weight: 700; }
h1{ font-family: "Monograph", Georgia, serif; font-weight: 400; }
.section-head h2{ font-family: "Kaoly", Georgia, serif; font-weight: 400; }
.headline, .case-body h3{ font-family: "Magic Vintage", cursive; font-weight: 400; }

/* ---------- stacked paragraphs ----------
   Used instead of bulleted lists wherever a block needs a few short
   lines with breathing room between them — no markers, just spacing. */
.stack p{ margin:0 0 10px; font-size:.95rem; }
.stack p:last-child{ margin-bottom:0; }
.stack.center p{ text-align:center; }
.stack.left p{ text-align:left; }
.stack.news p{ text-align:justify; hyphens:auto; }

/* ---------- front-page teasers: newspaper column treatment ----------
   Applied to the whole cell (not just the stack) so the eyebrow and
   headline sit full-width above two justified, hyphenated columns of
   body text — same idea as .case-body, just for the shorter teaser
   cards. column-fill:balance forces the two columns to split evenly
   instead of filling the first one and spilling the rest into the
   second, which is what caused the lopsided look before. */
.news-cell{
  column-count: 2;
  column-gap: 20px;
  column-rule: var(--border-w-sub) solid var(--line);
  column-fill: balance;
}
.news-cell > .eyebrow,
.news-cell > .headline,
.news-cell > p{ column-span: all; }

/* ---------- icons ----------
   Every icon is inline SVG in index.html, marked with an
   <!-- icon: name --> comment above it. To swap one, replace
   the <svg>...</svg> block — just keep class="icon" so sizing/color
   still apply. */
.icon{ width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.sheet{
  max-width: 1040px;
  margin: 28px auto;
  border: var(--border-w) solid var(--line);
}

/* ---------- dateline bar ---------- */
.dateline{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  padding: 8px 20px;
  border-bottom: var(--border-w) solid var(--line);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- masthead ---------- */
.masthead{
  display:grid;
  grid-template-columns: 100px 1fr 200px;
  align-items:center;
  border-bottom: var(--border-w) solid var(--line);
}
.masthead .brand-icon{ padding: 20px; border-right: var(--border-w) solid var(--line); color: var(--ink); }
.masthead .brand-mid{ text-align:center; padding: 22px 10px; }
.masthead h1{ font-size: clamp(2.6rem, 6vw, 4.2rem); letter-spacing: .01em; }
.masthead .subtitle{
  font-size: .9rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 6px; font-family:"Crimson Pro",Georgia,serif; font-style:italic; font-weight:600;
}
.masthead .stats{
  border-left: var(--border-w) solid var(--line); height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding: 16px 20px;
}
.masthead .stat{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.masthead .stat b{ display:block; font-size:1rem; color:var(--ink); font-family:"Crimson Pro",Georgia,serif; font-weight:700; letter-spacing:0; text-transform:none; }
.masthead .stat + .stat{ margin-top:10px; }

/* ---------- nav ---------- */
nav.tabs{ display:flex; border-bottom: var(--border-w) solid var(--line); overflow-x:auto; }
nav.tabs a{
  flex:1; text-align:center; padding: 12px 10px;
  text-decoration:none; color: var(--ink);
  font-family:"Crimson Pro",Georgia,serif; font-style:italic; font-weight:600; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  border-right: var(--border-w) solid var(--line);
  white-space:nowrap;
}
nav.tabs a:last-child{ border-right:none; }
nav.tabs a:hover{ background: rgba(28,25,19,.06); }

/* ---------- front-page teaser grid ---------- */
.row{ display:grid; border-bottom: var(--border-w) solid var(--line); }
.sheet > .row:last-child{ border-bottom:none; }
.cell{ border-right: var(--border-w) solid var(--line); padding: 30px; }
.row > .cell:last-child{ border-right:none; }
.row.cols-2{ grid-template-columns: 1.6fr 1fr; }
.row.cols-2.rev{ grid-template-columns: 1fr 1.6fr; }
.row.cols-3{ grid-template-columns: 1fr 1fr 1fr; }

.eyebrow{
  font-family:"Crimson Pro",Georgia,serif; font-style:italic; font-weight:600; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color: var(--ink-soft); margin: 0 0 10px;
}
.headline{ font-size: clamp(1.6rem, 3vw, 2.3rem); line-height:1.08; margin-bottom: 24px; }
.dashed{
  border: var(--border-w) dashed var(--line);
  padding: 24px;
  height:100%;
  display:flex; flex-direction:column; justify-content:center;
}
.dashed .icon-wrap{ width:70px; height:70px; margin: 0 auto 16px; color: var(--ink); }
.dashed h3{ text-align:center; font-size:1.3rem; margin-bottom:14px; }
.dashed .mono-line{ font-size:.78rem; text-align:center; letter-spacing:.06em; margin: 6px 0; }

/* ---------- contact memo: spacing overrides ----------
   Scoped to .dashed.memo so the Tip Line / Reach the Office boxes
   (which also use .dashed) aren't affected. */
.dashed.memo .icon-wrap{ margin-bottom: 10px; }
.dashed.memo h3{ margin-bottom: 10px; }
.dashed.memo .cta{ text-align:center; margin-top: 22px; }

/* ---------- tip line: rotating memo stack ----------
   Ten torn-paper notes cross-fade in sequence, on an endless loop,
   pure CSS (no JS, no backend — a fixed static set you write yourself).
   Hovering the stack pauses whichever note is currently showing. */
.postit-stack{ position:relative; height:190px; margin-top:8px; }
.postit-stack:hover .postit{ animation-play-state: paused; }
.postit{
  position:absolute; top:0; left:0; right:0; margin:0 auto;
  width: 92%; max-width:260px; height:180px;
  background: var(--memo-paper);
  clip-path: polygon(
    0% 9%, 4% 3%, 8% 10%, 12% 2%, 16% 8%, 20% 1%, 24% 7%, 28% 3%,
    32% 9%, 36% 2%, 40% 8%, 44% 1%, 48% 6%, 52% 3%, 56% 9%, 60% 2%,
    64% 7%, 68% 1%, 72% 8%, 76% 3%, 80% 9%, 84% 2%, 88% 7%, 92% 1%,
    96% 8%, 100% 3%,
    100% 100%, 0% 100%
  );
  padding: 28px 22px 18px;
  font-family: "Milestone Script", cursive;
  font-size: 1.5rem;
  line-height: 1.22;
  color: var(--ink);
  display:flex; align-items:center; justify-content:center; text-align:center;
  opacity: 0;
  animation: postit-cycle 60s infinite;
}
.postit:nth-child(1){ transform: rotate(-3deg); animation-delay: 0s; }
.postit:nth-child(2){ transform: rotate(2deg); animation-delay: 6s; }
.postit:nth-child(3){ transform: rotate(-2deg); animation-delay: 12s; }
.postit:nth-child(4){ transform: rotate(3deg); animation-delay: 18s; }
.postit:nth-child(5){ transform: rotate(-1deg); animation-delay: 24s; }
.postit:nth-child(6){ transform: rotate(2deg); animation-delay: 30s; }
.postit:nth-child(7){ transform: rotate(-3deg); animation-delay: 36s; }
.postit:nth-child(8){ transform: rotate(1deg); animation-delay: 42s; }
.postit:nth-child(9){ transform: rotate(-2deg); animation-delay: 48s; }
.postit:nth-child(10){ transform: rotate(3deg); animation-delay: 54s; }
@keyframes postit-cycle{
  0%{ opacity: 0; }
  1.2%{ opacity: 1; }
  8%{ opacity: 1; }
  10%{ opacity: 0; }
  100%{ opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .postit-stack{ height:auto; display:flex; flex-direction:column; gap:10px; }
  .postit{ position:static; opacity:1; animation:none; transform:none !important; }
}

.teaser-tile{ display:flex; flex-direction:column; height:100%; }
.teaser-tile .icon-wrap{ width:44px; height:44px; margin-bottom:14px; color: var(--accent); }
.teaser-tile h3{ font-size:1.15rem; margin-bottom: 10px; }
.teaser-tile p{ margin:0; color: var(--ink-soft); font-size:.95rem; flex:1; }
.more-link{ font-family:"Crimson Pro",Georgia,serif; font-style:italic; font-weight:600; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; margin-top:14px; display:inline-block; text-decoration:none; }

/* ---------- full sections (shared) ---------- */
.section{ padding: 56px 20px; border-bottom: var(--border-w) solid var(--line); }
.sheet > .section:last-of-type{ border-bottom:none; }
.section-head{ text-align:center; margin-bottom: 40px; }
.section-head h2{ font-size: clamp(2rem, 4vw, 2.7rem); }
.section-inner{ max-width: 780px; margin: 0 auto; }

/* ---------- services ---------- */
.rate-list{ border: var(--border-w) solid var(--line); }
.rate-row{
  display:flex; justify-content:space-between; gap:20px; align-items:baseline;
  padding: 18px 22px; border-bottom: var(--border-w-sub) solid var(--line);
}
.rate-row:last-child{ border-bottom:none; }
.rate-row h3{ font-size:1.05rem; margin-bottom:4px; }
.rate-row p{ margin:0; color: var(--ink-soft); font-size:.95rem; max-width:50ch; }
.rate-row .fee{ font-family:"Crimson Pro",Georgia,serif; font-style:italic; font-weight:600; font-size:.82rem; color: var(--accent); white-space:nowrap; }

/* ---------- case files ---------- */
.case-file{ border: var(--border-w) solid var(--line); margin-bottom: 34px; }
.case-file:last-child{ margin-bottom:0; }
.case-file .case-head{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding: 12px 22px; border-bottom: var(--border-w) solid var(--line);
  font-family:"Crimson Pro",Georgia,serif; font-style:italic; font-weight:600; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft);
}
.case-head .status{ color: var(--accent); font-weight:700; }
/* ---------- case body: newspaper column treatment ---------- */
.case-body{
  padding: 26px;
  column-count: 2;
  column-gap: 28px;
  column-rule: var(--border-w-sub) solid var(--line);
}
.case-body h3{ font-size: 1.6rem; margin-bottom:14px; column-span: all; }
.case-body p{ margin: 0 0 12px; hyphens: auto; }
.redacted{ background: var(--redact); color: var(--redact); padding: 0 6px; border-radius:2px; user-select:none; }
.evidence-list{ margin-top: 14px; break-inside: avoid; }

details.folder{ margin-top: 20px; border-top: var(--border-w-sub) dashed var(--line); padding-top: 16px; column-span: all; }
details.folder summary{ cursor:pointer; font-family:"Crimson Pro",Georgia,serif; font-style:italic; font-weight:600; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; list-style:none; }
details.folder summary::-webkit-details-marker{ display:none; }
details.folder summary::before{ content:"\261E  "; }
details.folder[open] summary::before{ content:"\25BC  "; font-size:.7em; }
.letter{
  margin-top:16px; background: rgba(28,25,19,.03); border: var(--border-w-sub) solid var(--line);
  padding: 24px; white-space: pre-wrap; font-size:.95rem; line-height:1.65;
}
.letter .fillin{ color: var(--accent); border-bottom: 1px dotted var(--accent); }

/* ---------- staff ---------- */
.staff-grid{ display:grid; grid-template-columns: repeat(3,1fr); border: var(--border-w) solid var(--line); }
.staff-card{ padding: 24px; border-right: var(--border-w-sub) solid var(--line); border-bottom: var(--border-w-sub) solid var(--line); }
.staff-card:nth-child(3n){ border-right:none; }
.staff-card h3{ font-size:1.3rem; margin-bottom:2px; }
.staff-role{ font-family:"Crimson Pro",Georgia,serif; font-style:italic; font-weight:600; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color: var(--accent); margin-bottom:12px; }
.staff-card dl{ margin:0; font-size:.86rem; }
.staff-card dt{ font-family:"Crimson Pro",Georgia,serif; font-style:italic; font-weight:600; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-soft); margin-top:10px; }
.staff-card dd{ margin:2px 0 0; }

/* ---------- contact ---------- */
.contact-wrap{ display:flex; justify-content:center; }
.btn{
  display:inline-block; font-family:"Crimson Pro",Georgia,serif; font-style:italic; font-weight:600; font-size:.82rem; letter-spacing:.06em;
  text-decoration:none; color: var(--paper); background: var(--ink); padding: 13px 24px; margin-top: 8px;
}
.btn:hover{ background: var(--accent); }
.sign-off{ font-style: italic; color: var(--ink-soft); margin-top: 18px; }

/* ---------- footer ---------- */
footer.foot{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; padding: 14px 20px; font-size:.72rem; letter-spacing:.04em; color: var(--ink-soft); }
.legal-btn{
  font-family: "Crimson Pro", Georgia, serif; font-size:.72rem; letter-spacing:.04em;
  color: var(--ink-soft); background:none; border:none; padding:0; cursor:pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.legal-btn:hover{ color: var(--ink); }

/* ---------- legal notice modal ---------- */
.legal-modal{
  max-width: 420px;
  margin: auto;
  padding: 26px;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--line);
}
.legal-modal::backdrop{ background: rgba(20,18,14,.55); }
.legal-modal h3{ font-size:1.2rem; margin-bottom:12px; }
.legal-modal p{ margin: 0 0 18px; font-size:.95rem; }
.legal-modal form{ text-align:right; }

/* ---------- responsive ---------- */
@media (max-width: 760px){
  .masthead{ grid-template-columns: 1fr; }
  .masthead .brand-icon{ display:none; }
  .masthead .stats{ border-left:none; border-top: var(--border-w) solid var(--line); flex-direction:row; gap:24px; justify-content:center; padding: 14px; }
  .masthead .stat + .stat{ margin-top:0; }
  .row.cols-2, .row.cols-2.rev, .row.cols-3{ grid-template-columns: 1fr; }
  .cell{ border-right:none; border-bottom: var(--border-w) solid var(--line); }
  .row > .cell:last-child{ border-bottom:none; }
  .staff-grid{ grid-template-columns: 1fr; }
  .staff-card{ border-right:none; }
}

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }