/* ============================================================
   Story Cards — Tufte / legal-typography catalog redesign
   Hierarchy comes from type, rules and whitespace — not boxes,
   pills, shadows or color-coding. See design brief in project
   notes for the full rationale; this file is the implementation.
   ============================================================ */

:root{
  /* warm paper + charcoal ink + one primary accent, but source color
     is restored as a second, meaningful accent — it encodes which
     collection a tale belongs to (a real variable), not decoration.
     Paper is a touch warmer and rules a touch stronger than the first
     pass, which read as flat/sun-bleached at this contrast level. */
  --paper: #F6EEDE;
  --ink: #1C1712;
  --ink-soft: #55503F;
  --rule: rgba(28,23,18,0.22);
  --rule-strong: rgba(28,23,18,0.4);
  --accent: #7A2426;
  --accent-deep: #591A1B;

  /* small, disciplined type scale */
  --fs-page-heading: 32px;
  --fs-story-title: 22px;
  --fs-body: 17px;
  --fs-meta: 13px;
  --fs-micro: 11px;

  --serif: 'Source Serif 4', Georgia, 'Iowan Old Style', serif;
  --sans: 'Source Sans 3', 'IBM Plex Sans', Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* omlc.css's .wrap.wide{max-width:1000px} is two classes; match its
   specificity to actually win the width override. Disciplined width,
   not edge-to-edge — a page this dense reads better bounded. */
.wrap.storycards-redesign{max-width:1240px; margin:0 auto; padding:36px 28px 100px;}
@media (max-width:700px){
  .wrap.storycards-redesign{padding:24px 18px 80px;}
}

/* ---------- quiet site chrome ----------
   The shared topbar/footer partials are used site-wide; only recolor
   them here to sit quietly against the new palette. */
.storycards-redesign .topbar{border-bottom-color:var(--rule-strong);}
.storycards-redesign .wordmark{color:var(--ink); font-family:var(--sans);}
.storycards-redesign .wordmark .dot{background:var(--accent);}
.storycards-redesign .topnav a{color:var(--ink-soft); font-family:var(--sans);}
.storycards-redesign .topnav a:hover,
.storycards-redesign .topnav a.active{color:var(--accent); border-bottom-color:var(--accent);}
.storycards-redesign footer{border-top-color:var(--rule-strong); color:var(--ink-soft); font-family:var(--sans);}
.storycards-redesign .footcols h4{color:var(--ink);}
.storycards-redesign .footcols a{color:var(--ink-soft);}
.storycards-redesign .footcols a:hover{color:var(--accent);}
.storycards-redesign .colophon{border-top-color:var(--rule-strong);}

/* ---------- editorial header ---------- */
.pagehead{margin-bottom:20px;}
.kicker{
  font-family:var(--sans); font-size:var(--fs-micro); letter-spacing:0.1em;
  text-transform:uppercase; color:var(--accent); margin-bottom:10px;
}
h1{
  font-family:var(--serif); font-weight:600; font-size:var(--fs-page-heading);
  letter-spacing:-0.01em; margin:0 0 8px; color:var(--ink);
}
.lede{
  font-family:var(--serif); font-size:17px; line-height:1.6; color:var(--ink);
  max-width:62ch; margin:0;
}
.lede a{color:var(--accent); text-decoration-color:rgba(122,36,38,0.4);}

hr.hr-major{border:none; border-top:1px solid var(--rule-strong); margin:0 0 24px;}
hr.hr-minor{border:none; border-top:1px solid var(--rule); margin:20px 0;}

/* ---------- archive toolbar: search / sources / tags / tools ----------
   Plain text index controls, not a boxed "panel" — labels, an
   underlined input, and middot-separated text links. */
.archive-toolbar label{
  display:block; font-family:var(--sans); font-size:var(--fs-micro);
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:6px;
}
.search-row{display:flex; align-items:baseline; flex-wrap:wrap; gap:12px 20px; margin-bottom:16px;}
.search-row > div, .search-row label{flex:none;}
#search{
  flex:1 1 320px; min-width:200px; font-family:var(--serif); font-size:17px;
  padding:4px 2px 8px; border:none; border-bottom:1px solid var(--rule-strong);
  background:transparent; color:var(--ink); outline:none; border-radius:0;
}
#search:focus{border-bottom-color:var(--accent);}
#search::placeholder{color:var(--ink-soft); font-style:italic;}
.result-count{
  font-family:var(--sans); font-size:var(--fs-meta); color:var(--ink-soft);
  white-space:nowrap; align-self:flex-end; padding-bottom:8px;
}

.filter-line{
  font-family:var(--sans); font-size:var(--fs-meta); color:var(--ink-soft);
  line-height:1.9; margin:0 0 4px;
}
.filter-line-label{
  text-transform:uppercase; letter-spacing:0.08em; font-size:var(--fs-micro);
  color:var(--ink-soft); margin-right:10px;
}
.filter-sep{color:var(--rule-strong); margin:0 8px;}

.source-item{
  font-family:var(--sans); font-size:var(--fs-meta); background:none; border:none;
  padding:2px 0; margin-right:14px; cursor:pointer; color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:6px;
}
.source-item .dot{width:7px; height:7px; border-radius:50%; background:var(--src, var(--ink-soft)); flex:none; opacity:0.55;}
.source-item .bar{width:22px; height:3px; background:var(--rule); position:relative; flex:none;}
.source-item .bar i{position:absolute; inset:0; background:var(--src, var(--ink-soft)); opacity:0.55; display:block;}
.source-item[aria-pressed="true"]{color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--src, var(--accent)); text-underline-offset:3px;}
.source-item[aria-pressed="true"] .dot,
.source-item[aria-pressed="true"] .bar i{opacity:1;}
.source-item:hover{color:var(--ink);}
.source-item.all{font-weight:600;}

.tool-line{font-family:var(--sans); font-size:var(--fs-meta); color:var(--ink-soft); margin:14px 0 0;}

.text-link{
  font-family:var(--sans); font-size:var(--fs-meta); letter-spacing:0.01em;
  background:none; border:none; padding:5px 2px; margin:0; cursor:pointer;
  color:var(--ink); text-decoration:underline; text-decoration-color:transparent;
  text-underline-offset:3px; transition:color .15s ease, text-decoration-color .15s ease;
}
.text-link:hover{color:var(--accent); text-decoration-color:currentColor;}
.text-link.accent{color:var(--accent);}
.text-link:disabled{color:var(--ink-soft); opacity:0.4; cursor:default; text-decoration:none;}

.state-msg{
  font-family:var(--serif); font-style:italic; font-size:16px; color:var(--ink-soft);
  padding:40px 0;
}

/* ---------- the catalog ---------- */
.story-index{column-gap:56px;}
@media (min-width:980px){ .story-index{columns:2 460px;} }

/* Source color shows up as a hover/focus highlight (a "burst") rather
   than a permanent rule — it still names the collection, it just does
   so on interaction instead of sitting on the page at all times. */
.story-entry{
  break-inside:avoid; padding:26px 16px; margin:0 -16px;
  border-top:1px solid var(--rule);
  display:grid; grid-template-columns:112px 1fr; gap:22px;
  border-radius:2px; transition:background-color .2s ease;
}
.story-entry:hover, .story-entry:focus-within{
  background-color:color-mix(in srgb, var(--src, var(--accent)) 8%, transparent);
}
.story-index > .story-entry:first-child{border-top:none; padding-top:0;}
@media (max-width:979px){
  .story-entry{display:flex; flex-direction:column; gap:6px;}
  .story-entry .story-content{order:1;}
  .story-entry .story-margin{order:2; margin-top:6px; display:flex; flex-wrap:wrap; column-gap:18px;}
  .story-entry .story-margin > div{display:flex; gap:4px; align-items:baseline;}
}

.story-margin{font-family:var(--sans); font-size:var(--fs-micro);}
.story-margin-label{
  text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-soft); opacity:0.85;
  margin:0 0 2px;
}
.story-margin-value{color:var(--ink-soft); margin:0 0 10px; line-height:1.4;}
.story-margin-tags{font-style:italic;}

.story-number{
  font-family:var(--sans); font-size:var(--fs-micro); color:var(--ink-soft);
  letter-spacing:0.04em; margin:0 0 4px;
}
.story-title{margin:0 0 8px; font-size:var(--fs-story-title); line-height:1.3;}
.story-title-btn{
  font-family:var(--serif); font-weight:600; font-size:inherit; color:var(--ink);
  background:none; border:none; padding:0; margin:0; cursor:pointer; text-align:left;
  line-height:1.3;
}
.story-title-btn:hover{color:var(--src, var(--accent));}
.story-synopsis{
  font-family:var(--serif); font-size:16px; line-height:1.62; color:var(--ink);
  margin:0 0 10px; max-width:62ch;
}
.story-actions{margin:0; font-size:var(--fs-meta);}
.story-actions .text-link{margin-right:16px; padding-left:0;}
.treasure-toggle-row.active{color:var(--accent);}

.show-more{margin:28px 0 0; padding-top:20px; border-top:1px solid var(--rule);}

/* ---------- draw five / random spread ---------- */
.spread-bar{
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px;
  padding-bottom:16px; margin-bottom:8px; border-bottom:1px solid var(--rule-strong);
}
.spread-label{font-family:var(--serif); font-style:italic; font-size:18px; color:var(--ink); margin:0;}
.spread-actions{margin:0;}
.spread-actions .text-link{margin-left:16px;}

@media (prefers-reduced-motion: no-preference){
  .story-index.dealt .story-entry{animation:deal-in .38s ease both;}
  .story-index.dealt .story-entry:nth-child(1){animation-delay:0ms;}
  .story-index.dealt .story-entry:nth-child(2){animation-delay:60ms;}
  .story-index.dealt .story-entry:nth-child(3){animation-delay:120ms;}
  .story-index.dealt .story-entry:nth-child(4){animation-delay:180ms;}
  .story-index.dealt .story-entry:nth-child(5){animation-delay:240ms;}
  @keyframes deal-in{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
}

/* ---------- reading view ----------
   The most typographically careful part of the site: a single
   readable column, generous margins, minimal chrome. */
body.is-reading .pagehead,
body.is-reading .hr-major,
body.is-reading .archive-toolbar,
body.is-reading .hr-minor{display:none;}

/* Reading is a 2-column layout at desktop widths: the readable column
   plus a right-hand margin of sidenotes (footnotes/fields/tags/links)
   — using the space that would otherwise sit empty next to a narrow
   reading measure, and matching the marginalia already used in the
   catalog rows. Collapses to a single stacked column below ~1050px. */
.reading-layout{display:grid; grid-template-columns:600px 230px; gap:40px; align-items:start;}
@media (max-width:900px){
  .reading-layout{display:block;}
  .reading-sidenotes{margin-top:32px; padding-top:20px; border-top:1px solid var(--rule-strong);}
}

.reading-main{padding-top:8px;}
.reading-back{margin:0 0 22px;}
.reading-back .text-link{padding-left:0;}
.reading-title{
  font-family:var(--serif); font-weight:600; font-size:30px; line-height:1.25;
  margin:0 0 8px; color:var(--ink);
}
.reading-meta{
  font-family:var(--sans); font-size:var(--fs-meta); color:var(--ink-soft); margin:0 0 20px;
}
.reading-main hr{border:none; border-top:1px solid var(--rule-strong); margin:20px 0;}
.reading-mode-switch{margin:0 0 16px; font-family:var(--sans); font-size:var(--fs-meta);}
.mode-btn{padding-left:0; margin-right:18px; color:var(--ink-soft);}
.mode-btn.active{color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px;}
.reading-body{
  font-family:var(--serif); font-size:var(--fs-body); line-height:1.68; color:var(--ink);
  margin:0; text-align:left; max-width:66ch; white-space:pre-wrap;
}

.reading-nav{margin:0 0 8px; display:flex; gap:24px;}
.reading-nav .text-link{padding-left:0;}
.reading-actions{margin:0; display:flex; gap:24px; flex-wrap:wrap;}
.reading-actions .text-link{padding-left:0;}

/* ---------- sidenotes ---------- */
.reading-sidenotes{
  font-family:var(--sans); padding-left:18px; border-left:2px solid var(--rule-strong);
}
@media (max-width:900px){ .reading-sidenotes{padding-left:0; border-left:none;} }
.reading-fields{
  display:grid; grid-template-columns:1fr; gap:10px 20px;
  font-size:var(--fs-meta); margin:0 0 18px;
}
.reading-fields dt{
  text-transform:uppercase; letter-spacing:0.06em; font-size:var(--fs-micro); color:var(--ink-soft); margin:0;
}
.reading-fields dd{margin:2px 0 0; color:var(--ink);}
.reading-tags{font-size:var(--fs-meta); color:var(--ink-soft); font-style:italic; margin:0 0 18px;}
.reading-footnotes{margin:0 0 18px;}
.reading-footnotes h3{
  font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:0.07em;
  color:var(--ink-soft); margin:0 0 8px;
}
.reading-footnotes ol{margin:0; padding-left:18px;}
.reading-footnotes li{font-family:var(--serif); font-size:14.5px; line-height:1.55; color:var(--ink-soft); margin-bottom:8px;}
.reading-links{font-size:var(--fs-meta); margin:0 0 18px;}
.reading-links a{color:var(--accent); text-decoration:underline; text-decoration-color:rgba(122,36,38,0.4); text-underline-offset:3px;}

@media (max-width:700px){
  .reading-title{font-size:24px;}
}

/* ============================================================
   Print — the 4×6 card is its own typographic artifact.
   Both views are built as a standalone #print-out node appended to
   <body>; hiding every other direct child of <body> means the printed
   page carries none of the site's nav, footer or on-screen chrome. */
#print-out{display:none;}

@media print{
  body.printing > *{display:none !important;}
  body.printing #print-out{display:block !important;}

  #print-out{color:#111; font-family:'Source Serif 4', Georgia, serif;}

  /* The 4×6 card prints landscape — as an orientation request via
     @page{size:landscape}, not a literal "6in 4in" physical paper size.
     An exact custom size isn't a real preset on most printers, and
     asking for one is what was causing Windows Chrome to tile the
     card across several physical sheets (the blank/split-page bug).
     "landscape" just flips whichever paper the printer already
     supports, so the card is bounded to a card-like max-width here
     instead of relying on the page itself being exactly 6in wide.
     printCards() injects this @page rule right before printing;
     printTale() clears it back to the portrait default below. See
     setPrintPageStyle() in the JS. */
  #print-out .print-card{
    width:100%; max-width:6in; margin:0 auto;
    page-break-after:always; page-break-inside:avoid;
  }
  #print-out .print-card:last-child{page-break-after:auto;}
  /* Number top-left, collection top-right — like a call number and a
     library stamp on a catalog card — instead of a centered meta line.
     Kind (Fairy Tale/Folktale/etc.) and other fields have been dropped
     from the printed card entirely. */
  #print-out .print-card-head{
    display:flex; justify-content:space-between; align-items:baseline; gap:12pt;
    font-family:'Source Sans 3', Helvetica, sans-serif; font-size:8pt; letter-spacing:0.05em;
    text-transform:uppercase; color:#666;
    margin:0 0 14pt; padding-bottom:6pt; border-bottom:0.5pt solid #999;
  }
  #print-out .print-card-source{text-align:right;}
  #print-out .print-card h2{
    font-family:'Source Serif 4', Georgia, serif; font-weight:600; font-style:italic;
    font-size:15pt; line-height:1.25; text-align:center; margin:0 0 12pt;
  }
  #print-out .print-card p{
    font-family:'Source Serif 4', Georgia, serif; font-size:9.5pt; line-height:1.5;
    text-align:left; hyphens:auto; margin:0;
  }

  #print-out.tale{padding:0.6in;}
  #print-out.tale h1{
    font-family:'Source Serif 4', Georgia, serif; font-weight:600;
    font-size:18pt; line-height:1.25; margin:0 0 4pt;
  }
  #print-out.tale .print-tale-meta{
    font-family:'Source Sans 3', Helvetica, sans-serif; font-size:8.5pt; letter-spacing:0.05em;
    text-transform:uppercase; color:#666;
    margin:0 0 18pt; padding-bottom:8pt; border-bottom:0.5pt solid #999;
  }
  #print-out.tale .print-tale-text{
    white-space:pre-wrap; font-family:'Source Serif 4', Georgia, serif;
    font-size:11pt; line-height:1.6; text-align:left; hyphens:auto;
  }

  @page{margin:18mm 20mm;}
}