/* ============================================================
     Barrowdork — generator pages, Shadowdark styling
     Everything ....... Montserrat (400/500/600/700/800 + italic)
     Page title ....... JSL Blackletter, self-hosted from JBLACK.TTF
     Shared with index.html — keep the two in step.
     ============================================================ */
  @font-face{
    font-family: 'JSL Blackletter';
    src: url('JBLACK.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  :root{
    --paper:      #f4f2ec;
    --panel:      #ffffff;
    --ink:        #12110f;
    --ink-soft:   #55524b;
    --rule:       #12110f;
    --rule-faint: rgba(18,17,15,0.22);
    --bar-bg:     #12110f;
    --bar-fg:     #f4f2ec;
    --line-rgb:   18,17,15;
  }
  html[data-theme="night"]{
    --paper:      #0e0e0d;
    --panel:      #161614;
    --ink:        #f0ede4;
    --ink-soft:   #9d998f;
    --rule:       #f0ede4;
    --rule-faint: rgba(240,237,228,0.24);
    --bar-bg:     #f0ede4;
    --bar-fg:     #0e0e0d;
    --line-rgb:   240,237,228;
  }

  *{ box-sizing: border-box; }
  html{ -webkit-text-size-adjust: 100%; }
  html, body{
    margin:0; padding:0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    transition: background 0.2s linear, color 0.2s linear;
  }
  body{
    min-height: 100vh;
    padding: 0 0 64px;
    background-image:
      repeating-linear-gradient(135deg,
        rgba(var(--line-rgb),0.05) 0px, rgba(var(--line-rgb),0.05) 1px,
        transparent 1px, transparent 5px),
      radial-gradient(ellipse at top left, rgba(var(--line-rgb),0.05), transparent 55%),
      radial-gradient(ellipse at bottom right, rgba(var(--line-rgb),0.06), transparent 55%);
  }
  .wrap{ max-width: 720px; margin: 0 auto; padding: 0 18px; }

  /* ---------- breadcrumb ---------- */
  .crumbs{
    padding: 16px 0 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .crumbs a{
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule-faint);
    padding-bottom: 2px;
  }
  .crumbs a:hover{ border-bottom-color: var(--rule); }
  .crumbs .sep{ color: var(--ink-soft); margin: 0 7px; }
  .crumbs .here{ color: var(--ink-soft); font-weight: 500; }

  /* ---------- masthead ---------- */
  .top-bar{
    position: relative;
    text-align:center;
    padding: 26px 0 0;
  }
  .eyebrow{
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 10px;
    padding: 0 56px;
  }
  .theme-toggle{
    position: absolute;
    top: 18px; right: 0;
    min-width: 44px; min-height: 44px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink);
    font-family:'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
  }
  .theme-toggle:hover{ background: var(--bar-bg); color: var(--bar-fg); }

  h1{
    font-family:'JSL Blackletter', 'Times New Roman', serif;
    font-weight: 400;
    text-align:center;
    font-size: clamp(34px, 9vw, 54px);
    line-height: 1.08;
    margin: 0 0 12px;
  }
  .sub{
    text-align:center;
    font-style: italic;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0 0 28px;
  }

  /* ---------- section bars + panels (shared with index.html) ---------- */
  section{ margin-bottom: 34px; }
  .bar{
    background: var(--bar-bg);
    color: var(--bar-fg);
    font-family:'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 9px 14px;
    margin: 0;
    line-height: 1.25;
  }
  .bar-note{
    display:block;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: none;
    opacity: 0.8;
    margin-top: 2px;
  }
  .panel{
    border: 2px solid var(--rule);
    background: var(--panel);
    transition: background 0.2s linear, border-color 0.2s linear;
  }
  .panel > .bar{ border-bottom: 2px solid var(--rule); }
  .panel-body{ padding: 18px 16px; }

  /* ---------- the sheet ---------- */
  .tablet{
    border: 2px solid var(--rule);
    background: var(--panel);
    transition: background 0.2s linear, border-color 0.2s linear;
  }
  .tablet-inner{ padding: 20px 16px; }

  fieldset{
    border: none;
    border-top: 2px solid var(--rule);
    margin: 0 0 26px;
    padding: 0;
  }
  fieldset:last-of-type{ margin-bottom: 22px; }
  legend{
    background: var(--bar-bg);
    color: var(--bar-fg);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 7px 12px;
    margin: 0;
    line-height: 1.3;
  }
  legend .n{
    display: block;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: none;
    opacity: 0.85;
    margin-top: 3px;
  }

  .hint{
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 10px 0 0;
  }

  /* ---------- toggles ---------- */
  .toggle-row{
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 12px;
  }
  .toggle{
    flex: 1 1 auto;
    min-height: 44px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding: 8px 14px;
    border: 2px solid var(--rule);
    background: transparent;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s linear, color 0.15s linear;
  }
  .toggle:hover{ background: var(--rule-faint); }
  .toggle.active{
    background: var(--bar-bg);
    color: var(--bar-fg);
  }

  /* ---------- fields ---------- */
  .field-row{
    display:flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 12px;
  }
  .field{ flex: 1 1 160px; min-width: 0; }
  .field label{
    display:block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 5px;
  }
  select, input[type="text"]{
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    background: var(--paper);
    color: var(--ink);
    border: 2px solid var(--rule);
    border-radius: 0;
    font-family:'Montserrat', sans-serif;
    font-size: 16px;   /* 16px minimum stops iOS from zooming on focus */
    line-height: 1.3;
  }
  select:focus, input[type="text"]:focus{
    outline: 2px solid var(--rule);
    outline-offset: 1px;
  }
  input[type="text"]::placeholder{ color: var(--ink-soft); opacity: 0.75; }

  .checkbox-row{
    display:flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 0;
  }
  .checkbox-row input[type="checkbox"]{
    width: 20px; height: 20px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: var(--ink);
  }
  .checkbox-row label{
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink);
    cursor: pointer;
  }

  .dice{
    flex: 0 0 auto;
    width: 46px; height: 46px;
    background: transparent;
    border: 2px solid var(--rule);
    color: var(--ink);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.15s linear, color 0.15s linear;
  }
  .dice:hover{ background: var(--bar-bg); color: var(--bar-fg); border-color: var(--bar-bg); }
  .dice:active{ transform: translateY(1px); }

  .preview-line{
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--rule-faint);
    font-size: 15px;
    font-weight: 600;
    text-align:center;
    color: var(--ink);
    min-height: 42px;
  }
  .preview-line:empty{ display:none; }

  /* ---------- forge + result ---------- */
  .forge-btn{
    display:block;
    width:100%;
    min-height: 52px;
    padding: 15px 16px;
    background: var(--bar-bg);
    color: var(--bar-fg);
    border: 2px solid var(--bar-bg);
    font-family:'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
    transition: opacity 0.15s linear;
  }
  .forge-btn:hover{ opacity: 0.85; }
  .forge-btn:active{ transform: translateY(1px); }

  .result{
    margin-top: 18px;
    padding: 24px 16px;
    border: 2px solid var(--rule);
    text-align:center;
    min-height: 104px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .empty{ color: var(--ink-soft); font-style: italic; font-size: 15px; }
  .name-out{
    font-family:'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(19px, 5vw, 26px);
    line-height: 1.3;
    letter-spacing: 0.01em;
  }
  .name-out .letter{
    display:inline-block;
    opacity: 0;
    animation: carve 0.26s ease forwards;
  }
  @keyframes carve{ to{ opacity:1; } }
  .trait-out{
    margin-top: 10px;
    font-size: 14px;
    font-style: italic;
    color: var(--ink-soft);
    line-height: 1.5;
  }

  .result-actions{
    display:flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
  }
  .mini-btn{
    flex: 1 1 140px;
    min-height: 46px;
    padding: 12px 14px;
    background: transparent;
    color: var(--ink);
    border: 2px solid var(--rule);
    font-family:'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.15s linear, color 0.15s linear;
  }
  .mini-btn:hover{ background: var(--bar-bg); color: var(--bar-fg); border-color: var(--bar-bg); }
  .mini-btn:active{ transform: translateY(1px); }

  /* ---------- footer ---------- */
  .footer-quote{
    text-align:center;
    margin: 34px 0 0;
    padding-top: 22px;
    border-top: 2px solid var(--rule);
    font-style: italic;
    font-size: 15px;
    color: var(--ink-soft);
  }

  .hidden{ display:none !important; }

/* ============================================================
   index.html
   ============================================================ */
.masthead{
    padding: 30px 0 4px;
    text-align:center;
    position: relative;
    margin-bottom: 26px;
  }
.masthead h1{
    font-family:'JSL Blackletter', 'Times New Roman', serif;
    font-weight: 400;
    font-size: clamp(44px, 13vw, 76px);
    line-height: 1;
    margin: 0 0 12px;
    letter-spacing: 0.01em;
  }
.tagline{
    font-family:'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0;
    opacity: 0.88;
  }
.kicker{
    font-family:'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    margin: 14px 0 0;
    opacity: 0.78;
  }
.datestone{
    max-width: 540px;
    margin: 0 auto 38px;
    text-align:center;
    border-top: 1px solid var(--rule-faint);
    border-bottom: 1px solid var(--rule-faint);
    padding: 14px 8px 16px;
  }
.datestone-label{
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 6px;
  }
.date-line{
    font-family:'Montserrat', sans-serif;
    font-size: clamp(17px, 4.4vw, 21px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0;
  }
.weather-row{
    display:flex;
    align-items: center;
    gap: 12px;
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--rule-faint);
  }
.weather{ flex:1; min-width:0; text-align:center; }
.dice-sm{
    flex: 0 0 auto;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--rule-faint);
    color: var(--ink-soft);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.15s linear, color 0.15s linear, border-color 0.15s linear;
  }
.dice-sm:hover{ background: var(--bar-bg); color: var(--bar-fg); border-color: var(--bar-bg); }
.dice-sm:active{ transform: translateY(1px); }
.w-roll{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 4px;
  }
.w-desc{ font-size: 16px; line-height: 1.5; }
.w-effect{
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 6px;
  }
.w-unseason{
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px dashed var(--rule-faint);
  }
.w-unseason .u-label{
    display:block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 4px;
  }
.w-unseason .u-name{
    font-family:'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
  }
.w-unseason .u-desc{ font-size: 15px; }
.btn{
    display:block;
    width:100%;
    min-height: 48px;
    padding: 13px 16px;
    background: var(--bar-bg);
    color: var(--bar-fg);
    border: 2px solid var(--bar-bg);
    font-family:'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align:center;
    text-decoration:none;
    cursor: pointer;
    border-radius: 0;
    transition: opacity 0.15s linear;
  }
.btn:hover{ opacity: 0.82; }
.btn:active{ transform: translateY(1px); }
.shelf{
    display:grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
@media (min-width: 700px){
    .shelf{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  }
.card{ display:flex; flex-direction:column; }
.card .panel-body{ display:flex; flex-direction:column; flex:1; }
.card ul{
    margin: 0 0 16px;
    padding-left: 20px;
  }
.card li{ margin-bottom: 5px; font-size: 15px; line-height: 1.5; }
.card li::marker{ color: var(--ink-soft); }
.specimen{
    border: 1px solid var(--rule-faint);
    padding: 14px 12px;
    text-align:center;
    margin-bottom: 16px;
  }
.spec-label{
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 8px;
  }
.spec-name{
    font-family:'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.01em;
    line-height: 1.3;
    min-height: 25px;
  }
.spec-name .letter{ display:inline-block; opacity:0; animation: carve 0.26s ease forwards; }
.spec-tail{ font-size: 13px; color: var(--ink-soft); margin-top: 5px; }
.card-actions{ display:flex; gap: 10px; margin-top:auto; }
.card-actions .btn{ flex:1; }
.niche{
    border: 2px dashed var(--rule-faint);
    background: transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding: 34px 22px;
    min-height: 170px;
  }
.niche-title{
    font-family:'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 8px;
  }
.niche-text{ font-size: 14px; color: var(--ink-soft); }
.rumor-box{
    border: 1px solid var(--rule-faint);
    padding: 22px 18px;
    min-height: 110px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    margin-bottom: 16px;
  }
.rumor-roll{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 10px;
  }
.rumor-text{
    font-family:'Montserrat', sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(16px, 4.2vw, 19px);
    line-height: 1.55;
    animation: fadeup 0.4s ease forwards;
  }
@keyframes fadeup{ from{ opacity:0; } to{ opacity:1; } }
.rumor-empty{ color: var(--ink-soft); font-size: 15px; }
.lead{ margin: 0 0 16px; font-size: 15px; color: var(--ink-soft); }
.about ul{ margin: 0; padding-left: 22px; }
.about li{ margin-bottom: 10px; }
.about li:last-child{ margin-bottom: 0; }
.about strong{ font-weight: 700; }
footer{
    margin-top: 40px;
    padding-top: 22px;
    border-top: 2px solid var(--rule);
    text-align:center;
  }
.footer-small{
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0;
  }

/* ============================================================
   calendar.html
   ============================================================ */
.navbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
  }
.navbtn{
    flex: 0 0 auto;
    width: 46px; height: 46px;
    background: transparent;
    border: 2px solid var(--rule);
    color: var(--ink);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.15s linear, color 0.15s linear;
  }
.navbtn:hover{ background: var(--bar-bg); color: var(--bar-fg); border-color: var(--bar-bg); }
.navbtn:disabled{ opacity: 0.28; cursor: default; }
.navbtn:disabled:hover{ background: transparent; color: var(--ink); border-color: var(--rule); }
.navlabel{ flex: 1 1 auto; text-align:center; min-width: 0; }
.navlabel .big{
    font-size: clamp(22px, 6vw, 30px);
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.15;
  }
.navlabel .small{
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 3px;
  }
.yearhouse{ text-align:center; font-size: 14px; line-height:1.55; color: var(--ink-soft); margin: 14px 0 0; }
.yearhouse strong{ color: var(--ink); }
.yearhouse .aside{ display:block; font-size: 12px; margin-top: 4px; }
.todaybtn{
    display:block;
    margin: 14px auto 0;
    min-height: 40px;
    padding: 10px 18px;
    background: transparent;
    border: 2px solid var(--rule);
    color: var(--ink);
    font-family:'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
  }
.todaybtn:hover{ background: var(--bar-bg); color: var(--bar-fg); border-color: var(--bar-bg); }
.cal-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-head{
    text-align:center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-bottom: 5px;
    overflow: hidden;
  }
.cal-head .long{ display:none; }
@media (min-width: 560px){
    .cal-head .long{ display:inline; }
    .cal-head .short{ display:none; }
  }
.cal-cell{ cursor: pointer; }
.cal-cell:active{ opacity: 0.7; }
.cal-cell.selected{ outline: 2px solid var(--rule); outline-offset: -2px; }
.day-detail{
  border: 1px solid var(--rule-faint);
  padding: 12px 14px;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
}
.day-detail .dd-date{ font-weight: 700; margin-bottom: 6px; }
.day-detail .dd-lines div{ margin-bottom: 3px; }
.day-detail .dd-lines div:last-child{ margin-bottom: 0; }
.day-detail .dd-hint{ color: var(--ink-soft); font-style: italic; }
.cal-cell{
    min-height: 74px;
    border: 1px solid var(--rule-faint);
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:flex-start;
    padding: 6px 2px 5px;
    gap: 3px;
    position: relative;
    overflow: hidden;
  }
.cal-cell .dnum{
    font-size: clamp(13px, 3.4vw, 16px);
    font-weight: 600;
    line-height: 1;
  }
.cal-cell .mkt{
    font-size: clamp(7px, 1.9vw, 10px);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    line-height: 1.05;
    text-align:center;
    color: var(--ink-soft);
    max-width: 100%;
  }
.cal-cell .fest{
    font-size: clamp(7px, 1.9vw, 10px);
    font-weight: 700;
    line-height: 1.05;
    text-align:center;
    max-width: 100%;
  }
.cal-cell .m{ margin-top: auto; }
.cal-cell.event{ border: 2px solid var(--rule); }
.cal-cell.event .dnum{ font-weight: 800; }
.cal-cell.today{
    background: var(--bar-bg);
    color: var(--bar-fg);
    border-color: var(--bar-bg);
  }
.cal-cell.today .mkt{ color: var(--bar-fg); opacity: 0.85; }
.m{ width: 9px; height: 9px; border-radius: 50%; display:block; flex: 0 0 auto; }
.m.full{ background: currentColor; }
.m.dark{ border: 1.5px solid currentColor; background: transparent; }
.m.none{ visibility: hidden; }
.moonname{
    text-align:center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    margin: 0 0 14px;
  }
.month-events{ margin: 16px 0 0; padding: 0; list-style: none; }
.month-events li{
    font-size: 14px;
    line-height: 1.5;
    padding-top: 9px;
    margin-top: 9px;
    border-top: 1px solid var(--rule-faint);
    color: var(--ink-soft);
  }
.month-events li:first-child{ border-top: none; margin-top: 0; padding-top: 0; }
.month-events b{ color: var(--ink); font-weight: 700; }
.ref-grid{
    display:grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin: 6px 0 16px;
  }
.ref-day{
    border: 2px solid var(--rule);
    padding: 8px 2px;
    text-align:center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.25;
    overflow: hidden;
  }
.ref-day .nums{ display:block; font-weight: 500; opacity: 0.65; margin-top: 3px; }
.legend{ margin: 0; padding: 0; list-style: none; }
.legend li{
    display:flex; align-items:center; gap: 12px;
    font-size: 14px; line-height: 1.45; margin-bottom: 11px;
  }
.legend li:last-child{ margin-bottom: 0; }
.swatch{
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border: 1px solid var(--rule-faint);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-size: 11px; font-weight: 700; gap: 2px;
  }
.swatch.event{ border: 2px solid var(--rule); }
.swatch.today{ background: var(--bar-bg); color: var(--bar-fg); border-color: var(--bar-bg); }
.swatch .mkt{ font-size: 7px; font-weight: 700; text-transform: uppercase; color: var(--ink-soft); }
.prose p{ margin: 0 0 12px; font-size: 15px; line-height: 1.6; }
.prose p:last-child{ margin-bottom: 0; }
.prose b{ font-weight: 700; }

/* ============================================================
   Reconciliations — where one page needs a variant
   ============================================================ */
  .wrap.wide{ max-width: 900px; }                 /* index runs wider for the shelf */
  footer .footer-quote{ border-top: none; margin: 0 0 10px; padding-top: 0; }

  /* footer socials — handles shown because they differ from the site name */
  .socials{
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display:flex;
    flex-wrap: wrap;
    justify-content:center;
    gap: 8px 18px;
  }
  .socials a{
    display:inline-block;
    min-height: 32px;
    color: var(--ink);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--rule-faint);
    padding-bottom: 3px;
  }
  .socials a:hover{ border-bottom-color: var(--rule); }
  .socials a span{
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ink-soft);
  }

  .plain-list{ margin: 0; padding-left: 22px; }
  .plain-list li{ margin-bottom: 9px; font-size: 15px; line-height: 1.55; }
  .plain-list li:last-child{ margin-bottom: 0; }
  .plain-list b{ font-weight: 700; }

/* ============================================================
   zodiac.html — a set of leaves
   ============================================================ */
  .mode-row{ display:flex; flex-wrap:wrap; gap: 8px; margin-bottom: 18px; }
  .mode-row .toggle{ flex: 1 1 140px; }

  .leaves{ display:grid; grid-template-columns: 1fr; gap: 14px; }
  @media (min-width: 680px){ .leaves{ grid-template-columns: repeat(3, 1fr); } }

  .leaf{
    border: 2px solid var(--rule);
    background: var(--panel);
    display:flex;
    flex-direction:column;
    min-height: 200px;
  }
  .leaf .pos{
    background: var(--bar-bg);
    color: var(--bar-fg);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align:center;
    padding: 8px;
  }
  .leaf .leaf-body{
    padding: 16px 14px 15px;
    display:flex; flex-direction:column; flex:1;
    text-align:center;
  }
  .leaf .title{
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 3px;
  }
  .leaf .sub-title{
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 12px;
  }
  .leaf .text{ font-size: 14px; line-height: 1.55; }
  .leaf .text.italic{ font-style: italic; }
  .leaf .caveat{
    margin-top: auto;
    padding-top: 14px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--ink-soft);
  }
  .leaf.blank .title{ color: var(--ink-soft); }

  .reading-head{
    text-align:center;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 18px;
  }
  .reading-head b{ color: var(--ink); font-weight: 700; }
  .reading-empty{
    border: 2px dashed var(--rule-faint);
    padding: 34px 18px;
    text-align:center;
    font-style: italic;
    color: var(--ink-soft);
    font-size: 15px;
  }

/* ============================================================
   hire.html — The Tally House
   ============================================================ */
  .statblock{
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 14px;
  }
  .statblock th, .statblock td{
    padding: 6px 8px;
    border-bottom: 1px solid var(--rule-faint);
    text-align: left;
  }
  .statblock th{
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 11px;
    white-space: nowrap;
    width: 1%;
  }
  .statblock .dice-cell{ color: var(--ink-soft); font-size: 13px; }
  .statblock .dice-cell b{ color: var(--ink); font-weight: 700; }
  .statblock .score{
    text-align: right;
    font-weight: 700;
    font-size: 16px;
    width: 1%;
    white-space: nowrap;
  }
  .statblock .mod{
    text-align: right;
    color: var(--ink-soft);
    width: 1%;
    white-space: nowrap;
    font-size: 13px;
  }
  .statblock tr.total th, .statblock tr.total td{
    border-bottom: none;
    border-top: 2px solid var(--rule);
    padding-top: 8px;
  }
  .statblock.checks th{ text-transform: none; letter-spacing: 0.02em; font-size: 13px; }
  .statblock.checks td{ color: var(--ink-soft); font-size: 13px; }

  .npc{
    border: 2px solid var(--rule);
    background: var(--panel);
    margin-bottom: 14px;
  }
  .npc:last-child{ margin-bottom: 0; }
  .npc-head{
    background: var(--bar-bg);
    color: var(--bar-fg);
    padding: 10px 14px;
  }
  .npc-name{ font-size: 17px; font-weight: 800; letter-spacing: 0.01em; line-height: 1.2; }
  .npc-line{ font-size: 12px; font-weight: 500; opacity: 0.9; margin-top: 3px; }
  .npc-body{ padding: 14px; }
  .npc-note{ margin: 0 0 9px; font-size: 14px; line-height: 1.55; }
  .npc-note:last-child{ margin-bottom: 0; }
  .npc-tags{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rule-faint);
    margin-bottom: 10px;
  }
  .npc-block{
    border: 1px solid var(--rule-faint);
    padding: 12px;
    margin-top: 12px;
  }
  .npc-block.warn{ border-style: dashed; font-size: 14px; line-height: 1.5; }
  .npc-block.dmflag{ border: 2px dashed var(--rule); font-size: 13px; line-height: 1.5; }
  .block-label{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .block-label .muted{ font-weight: 500; color: var(--ink-soft); letter-spacing: 0.02em; }
  .fineprint{
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 8px 0 0;
  }