:root{
    --paper: #F1E7D3;
    --card: #FBF5E8;
    --ink: #2A2117;
    --ink-soft: #6b5f4e;
    --rule: #cfbf9d;
    --seal: #a13d2b;
    --seal-deep: #7e2f21;
    --tile: #2f6e6a;
    --tile-deep: #204d4a;
    --gold: #b6862c;
    --shadow: 0 1px 0 rgba(42,33,23,0.06), 0 8px 20px -12px rgba(42,33,23,0.25);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background: radial-gradient(1200px 600px at 10% -10%, #f6ecd9 0%, transparent 60%), var(--paper);
    color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  .wrap{max-width:1000px; margin:0 auto; padding:28px 18px 100px;}

  header{border-bottom:3px double var(--rule); padding-bottom:16px; margin-bottom:22px;}
  .eyebrow{
    font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--seal); display:flex; align-items:center; gap:8px; margin-bottom:10px;
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--seal);}
  h1{font-family:'Fraunces', serif; font-weight:600; font-size:clamp(24px,5vw,34px); margin:0 0 6px; letter-spacing:-0.01em;}
  .sub{font-size:13.5px; color:var(--ink-soft); max-width:60ch; line-height:1.5;}
  .stats{font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink-soft); margin-top:12px;}
  .stats b{color:var(--seal);}

  /* --- toolbar / legend / filters --- */
  .panel{
    background:var(--card); border:1px solid var(--rule); border-radius:2px; box-shadow:var(--shadow);
    padding:16px 18px; margin:20px 0; 
  }
  .search-row{display:flex; gap:8px; margin-bottom:14px;}
  .search-row input[type=text]{
    flex:1; font-family:'IBM Plex Mono', monospace; font-size:13px; padding:10px 12px;
    border:1px solid var(--rule); background:#fffdf7; color:var(--ink); border-radius:2px; outline:none;
  }
  .search-row input[type=text]:focus{border-color:var(--seal); box-shadow:0 0 0 3px rgba(161,61,43,0.12);}

  .legend{display:flex; flex-wrap:wrap; gap:8px 14px; margin-bottom:14px;}
  .legend-item{
    display:flex; align-items:center; gap:6px; font-family:'IBM Plex Mono', monospace; font-size:11px;
    color:var(--ink-soft); cursor:pointer; user-select:none; padding:4px 8px; border-radius:999px;
    border:1px solid var(--rule); background:#fffdf7;
  }
  .legend-item.off{opacity:0.4;}
  .legend-item.active{background:var(--ink); color:#fff; border-color:var(--ink);}
  .legend-item.active .count{color:#fff;}
  .legend-swatch{width:11px; height:11px; border-radius:2px; flex-shrink:0;}
  .legend-item .count{opacity:0.6;}

  .tag-bar{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;}
  .tag-chip{
    font-family:'IBM Plex Mono', monospace; font-size:10.5px; padding:4px 10px;
    border:1px solid var(--rule); border-radius:999px; background:#fffdf7; color:var(--ink-soft); cursor:pointer;
  }
  .tag-chip.active{background:var(--ink); color:#fff; border-color:var(--ink);}

  .tool-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
  .tool-btn{
    font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.03em;
    padding:9px 16px; border:1px solid var(--ink); border-radius:999px; background:var(--ink); color:#fff; cursor:pointer;
  }
  .tool-btn:hover{background:var(--seal-deep); border-color:var(--seal-deep);}
  .tool-btn.secondary{background:#fffdf7; color:var(--ink); border-color:var(--rule);}
  .tool-btn.secondary:hover{border-color:var(--ink);}
  .tool-btn.treasure{background:var(--gold); border-color:var(--gold); color:#fff;}
  .tool-btn.treasure:hover{background:#96691f; border-color:#96691f;}

  .result-count{font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink-soft); margin:16px 0 14px 2px;}
  .result-count b{color:var(--seal);}

  /* --- cards (from review_cards.html, unchanged) --- */
  .cards{display:flex; flex-direction:column; gap:28px;}

  .card{
    background:var(--card); border:1px solid var(--rule); border-radius:1px;
    box-shadow:var(--shadow); overflow:hidden; position:relative;
    border-top:5px solid var(--seal);
  }
  .card-head{position:relative; padding:34px 60px 36px; cursor:pointer; user-select:none; text-align:center;}
  .card-head-inner{max-width:600px; margin:0 auto;}
  .card-head:hover{background:rgba(0,0,0,0.015);}

  .card-header-row{
    display:flex; justify-content:space-between; align-items:baseline;
    font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--ink); margin-bottom:34px;
  }
  .card-header-row .right{color:var(--tile-deep);}
  .card.sivas .card-header-row .right{color:var(--seal);}

  .treasure-toggle{
    position:absolute; top:14px; right:14px; width:26px; height:26px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:16px; z-index:2;
    color:var(--rule); user-select:none;
  }
  .treasure-toggle.collected{color:var(--gold);}
  .treasure-toggle:hover{color:var(--gold);}

  .card-number{
    font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--ink-soft);
    letter-spacing:0.05em; margin-bottom:14px;
  }
  .card-title{
    font-family:'Fraunces', serif; font-weight:500; font-style:italic; font-size:25px;
    margin:0 0 30px; line-height:1.3; color:var(--ink);
  }
  .tap-hint{
    text-align:center; font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--ink-soft); margin-top:28px; opacity:0.6;
  }
  .card.open .tap-hint{display:none;}

  .card-body{display:none; padding:0 60px 44px; border-top:1px solid var(--rule);}
  .card.open .card-body{display:block; padding-top:28px;}
  .card-body-inner{max-width:600px; margin:0 auto;}
  .card-meta{font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--tile-deep); display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}

  .card-tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px;}
  .card-tags span{
    font-family:'IBM Plex Mono', monospace; font-size:10px; padding:3px 9px; border-radius:999px;
    background:#efe6d2; color:var(--ink-soft);
  }

  .synopsis{font-size:17px; line-height:1.85; color:var(--ink); margin:0; text-align:justify; hyphens:auto;}

  @media (max-width:640px){
    .card-head{padding:26px 20px 28px;}
    .card-body{padding:0 20px 34px;}
    .card-header-row{font-size:9.5px; margin-bottom:24px;}
    .card-number{font-size:11.5px; margin-bottom:10px;}
    .card-title{font-size:21px; margin-bottom:20px;}
    .synopsis{font-size:15.5px; line-height:1.72;}
    .treasure-toggle{top:10px; right:10px; font-size:15px;}
    .wrap{padding:20px 14px 80px;}
  }
  @media (min-width:900px){
    .synopsis{font-size:17.5px;}
  }

  .field-grid{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px 16px;
    font-family:'IBM Plex Mono', monospace; font-size:11px; margin-bottom:14px;
  }
  .field-grid .k{color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; font-size:9.5px;}
  .field-grid .v{color:var(--ink);}

  .footnotes{margin-bottom:14px;}
  .footnotes h4{font-family:'IBM Plex Mono', monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--gold); margin:0 0 8px;}
  .footnotes ol{margin:0; padding-left:18px;}
  .footnotes li{font-size:12.5px; line-height:1.55; color:var(--ink-soft); margin-bottom:8px;}

  .links{display:flex; gap:16px; margin-bottom:14px; flex-wrap:wrap;}
  .links a{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--seal); text-decoration:none; border-bottom:1px dashed var(--seal);}
  .links a:hover{color:var(--seal-deep); border-color:var(--seal-deep);}

  .state-msg{text-align:center; padding:60px 20px; color:var(--ink-soft); font-family:'IBM Plex Mono', monospace; font-size:13px;}

  /* --- draw / print --- */
  .draw-bar{
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 0; margin-bottom:12px; border-bottom:1px solid var(--rule);
  }
  .draw-bar-label{font-family:'Fraunces', serif; font-style:italic; font-size:16px; color:var(--ink-soft);}

  @media print{
    header, .panel, .draw-bar, .result-count, .tap-hint, .treasure-toggle{display:none !important;}
    .wrap{max-width:none; padding:0 24px;}
    .card{page-break-after:always; box-shadow:none; border:1px solid #ccc;}
    .card:last-child{page-break-after:auto;}
    .card-body{display:block !important; padding-top:0;}
    body{background:#fff;}
  }
/* ---------- archive page additions ---------- */
.tool-select{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.02em;
  padding:9px 12px; border:1px solid var(--rule); border-radius:999px;
  background:#fffdf7; color:var(--ink); cursor:pointer; outline:none;
}
.tool-select:focus{border-color:var(--seal);}

.archive-credit{
  margin-top:64px; padding-top:28px; border-top:3px double var(--rule);
  max-width:640px;
}
.archive-credit h2{
  font-family:'Fraunces',serif; font-weight:600; font-size:22px;
  margin:0 0 14px; line-height:1.25;
}
.archive-credit h2:not(:first-child){margin-top:34px;}
.archive-credit p{
  font-size:15.5px; line-height:1.8; color:var(--ink-soft); margin:0 0 16px;
}
.archive-credit strong{color:var(--ink); font-weight:600;}
.archive-credit a{color:var(--seal); text-decoration:none; border-bottom:1px dashed var(--seal);}
.archive-credit a:hover{color:var(--seal-deep);}

/* ---------- make tale text selectable ----------
   The card header is click-to-expand, which is why it was set to
   user-select:none. Titles and synopses need to be copyable, so
   selection is re-enabled there and suppressed only on the chrome. */
.card-head{user-select:text; -webkit-user-select:text;}
.card-title, .synopsis, .card-body{user-select:text; -webkit-user-select:text;}
.card-header-row,
.card-number,
.tap-hint,
.treasure-toggle{user-select:none; -webkit-user-select:none;}

/* ---------- full text / OCR transcript inside an open card ----------
   Follows review_cards.html: a small, quiet, framed box. */
.transcript-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.transcript-toggle, .print-tale-btn{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--tile-deep); background:none;
  border:1px solid var(--rule); border-radius:2px; padding:6px 10px; cursor:pointer;
}
.transcript-toggle:hover, .print-tale-btn:hover{border-color:var(--tile-deep); color:var(--ink);}
.print-tale-btn{color:var(--seal);}
.print-tale-btn:hover{border-color:var(--seal); color:var(--seal-deep);}

.transcript{
  display:none; margin-top:12px; padding:14px; background:#fffdf7;
  border:1px solid var(--rule); border-radius:2px;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; line-height:1.6;
  white-space:pre-wrap; color:var(--ink-soft);
  max-height:420px; overflow-y:auto;
  user-select:text; -webkit-user-select:text;
}
.transcript.open{display:block;}

/* ---------- print views ----------
   Both printed views are built as a separate #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 toolbar, whatever they contain. */
#print-out{display:none;}

@media print{
  /* Full text never rides along with the synopsis view — it has its own button. */
  .transcript, .transcript-actions{display:none !important;}

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

  #print-out{color:#000; font-family:'Inter', system-ui, sans-serif;}

  /* one synopsis per sheet — sized for a 4x6 card */
  #print-out .print-card{page-break-after:always; page-break-inside:avoid;}
  #print-out .print-card:last-child{page-break-after:auto;}
  #print-out .print-card-num{
    font-family:'IBM Plex Mono', monospace; font-size:9pt; color:#555;
    text-align:center; margin-bottom:10pt;
  }
  #print-out .print-card h2{
    font-family:'Fraunces', serif; font-weight:500; font-style:italic;
    font-size:17pt; line-height:1.3; text-align:center; margin:0 0 12pt;
  }
  #print-out .print-card-meta{
    font-family:'IBM Plex Mono', monospace; font-size:8pt; letter-spacing:0.08em;
    text-transform:uppercase; color:#555; text-align:center;
    margin:0 0 18pt; padding-bottom:8pt; border-bottom:0.5pt solid #999;
  }
  #print-out .print-card p{
    font-size:11pt; line-height:1.7; text-align:justify; hyphens:auto; margin:0;
  }

  /* single tale, full text */
  #print-out.tale h1{
    font-family:'Fraunces', serif; font-weight:600; font-style:italic;
    font-size:19pt; line-height:1.25; margin:0 0 4pt;
  }
  #print-out.tale .print-tale-meta{
    font-family:'IBM Plex Mono', monospace; font-size:8.5pt; letter-spacing:0.06em;
    text-transform:uppercase; color:#555;
    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:'Fraunces', serif;
    font-size:11.5pt; line-height:1.6; text-align:justify; hyphens:auto;
  }
  #print-out.tale.ocr .print-tale-text{
    font-family:'IBM Plex Mono', monospace; font-size:9pt; line-height:1.5;
    text-align:left; hyphens:none;
  }

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