/* =====================================================================
   The Archive (page-templates/the-archive.php) and each entry (single-mm_entry.php).
   Loaded on those pages only; uses the tokens in main.css.
   The Archive stands on iron-gall, the blue-black ink old records were written in. Since 0.20 it is a
   card catalogue: one drawer, its sections as index tabs along the top edge, the entries as cards
   filed edge-on one hairline apart. Pressing a card lifts it out of the drawer to read. Nothing
   reloads: assets/js/archive.js files, filters and opens the cards in place, and without it every
   tab, filter and title is a plain link.
   Pressable: the tabs, the dropdowns, the search, each card's title, the links under the cards.
   A ruling's standing and an entry's audience are words with a small mark, never colour alone.
   1. Ground   2. Title   3. Index tabs   4. The drawer and its tools   5. Cards   6. Motion
   7. Notes under the cards   8. The page's own words   9. Marks   10. An entry   11. Small screens
   ===================================================================== */

/* ---------- 1. Ground ---------- */
html:has(> body.mm-archive),body.mm-archive{background-color:var(--gall)}
body.mm-archive{--card:rgba(0,0,0,.24);--page-rule:rgba(160,186,204,.16);--steel:#9fbad0;--sage:#a6c78a;--vitae:#ea7b6c;--brew:#74cfc3;
  --drawer:#151e25;--card-up:#1b2630;--lift:0 22px 48px -22px rgba(0,0,0,.75),0 0 0 1px rgba(160,186,204,.12)}

/* ---------- 2. Title ---------- */
.ar-hero{display:grid;justify-items:start;gap:12px;padding-block:clamp(40px,7vw,88px) clamp(22px,3vw,34px)}
.ar-hero h1{margin:0;max-width:18ch;font:var(--display-wght) calc(clamp(46px,7.4vw,96px) * var(--display-scale))/.98 var(--display);text-wrap:balance}
.ar-hero .mm-lede{margin:0;max-width:56ch;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--ash)}
/* The way to the rulings step by step: "Making your character" (0.21). */
.ar-guide{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;margin:0;max-width:66ch;color:var(--ash);font-size:16px}
.ar-guide .mm-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700}

/* ---------- 3. Index tabs: one per section, with what this visitor may read in it ---------- */
.cat{padding-bottom:clamp(36px,6vw,72px)}
.cat-tabs{scroll-margin-top:calc(var(--top-h,64px) + 16px);position:relative;z-index:1;display:flex;align-items:flex-end;gap:4px;margin:0;padding:0 0 0 2px;list-style:none;overflow-x:auto;scrollbar-width:none}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tabs li{flex:none}
.cat-tab{display:flex;align-items:baseline;gap:10px;min-height:48px;padding:14px 18px 12px;border-radius:4px 4px 0 0;color:var(--bone);
  font:700 15.5px/1 var(--ui);white-space:nowrap;text-decoration:underline 2px rgba(242,235,225,.55);text-underline-offset:.32em;
  transition:background-color 220ms var(--ease),box-shadow 220ms var(--ease),text-decoration-color var(--quick)}
.cat-tab:hover{background:rgba(242,235,225,.045);text-decoration-color:var(--gold)}
.cat-tab .n{display:inline-block;min-width:1ch;font:700 13.5px/1 var(--ui);color:var(--gold);font-variant-numeric:tabular-nums;transition:opacity var(--quick)}
.cat-tab.is-empty .n{opacity:.45}
/* The open drawer's tab: the same colour as the drawer it's joined to, with a gold label edge. */
.cat-tab[aria-current]{background:var(--drawer);text-decoration:none;box-shadow:inset 0 2px 0 var(--gold);cursor:default}
/* A tab strip wider than the screen scrolls; its edges fade where there's more. */
.cat-tabs.is-more-right{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.cat-tabs.is-more-left{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)}
.cat-tabs.is-more-left.is-more-right{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}

/* ---------- 4. The drawer and its one line of tools ---------- */
.cat-drawer{padding:clamp(16px,3vw,32px) clamp(14px,3vw,36px) clamp(20px,3vw,36px);border-radius:0 4px 4px 4px;background:var(--drawer);box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.cat-intro{margin:0 0 18px;max-width:60ch;color:var(--ash);font-size:16.5px}
.cat-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 28px}
.cat-filters{display:contents}
.cat-field{display:grid;gap:3px}
.cat-field > span:first-child{font:800 11px/1.3 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--smoke)}
.cat-field select,.cat-find input{min-height:44px;border:0;border-bottom:2px solid var(--bone);border-radius:0;background-color:transparent;color:var(--bone);font:700 16px/1.2 var(--ui)}
.cat-field select{appearance:none;-webkit-appearance:none;padding:0 28px 0 0;cursor:pointer;transition:border-color var(--quick);
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f2ebe1' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 4px center}
.cat-field select:hover,.cat-find input:hover{border-bottom-color:var(--gold)}
.cat-field select option{background:var(--drawer);color:var(--bone)}
.cat-find{flex:1 1 260px;max-width:420px;margin-left:auto}
.cat-find-wrap{position:relative;display:block}
.cat-find input{width:100%;padding:0 34px 0 30px;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='none' stroke='%239d9290' stroke-width='2'%3E%3Ccircle cx='7.5' cy='7.5' r='5.5'/%3E%3Cpath d='M11.8 11.8L16.5 16.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat 2px center}
.cat-find input::placeholder{color:var(--smoke);font-weight:400}
.cat-find input::-webkit-search-cancel-button{-webkit-appearance:none}
.cat-find-clear{position:absolute;right:0;top:50%;translate:0 -50%;width:36px;height:36px;border:0;border-radius:2px;background:transparent;color:var(--bone);font:700 22px/1 var(--ui);cursor:pointer}
.cat-find-clear:hover{color:var(--gold)}
/* The Show button is for browsers without the script; with it, everything updates as you go. */
.cat.is-live .cat-go{display:none}
.cat-sum{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;margin:0;padding:18px 0 8px;border-bottom:1px solid var(--page-rule);
  font:400 14.5px/1.4 var(--ui);color:var(--ash);font-variant-numeric:tabular-nums}
.cat-link{display:inline-flex;align-items:center;min-height:32px;color:var(--bone);font:700 14.5px/1.2 var(--ui);text-decoration:underline 2px rgba(242,235,225,.55);text-underline-offset:.3em;
  transition:text-decoration-color var(--quick)}
.cat-link:hover{text-decoration-color:var(--gold)}

/* ---------- 5. Cards ---------- */
.cat-listwrap.is-morphing{overflow:clip;overflow-clip-margin:28px}
.cat-list{margin:0;padding:0;list-style:none}
.cat-group{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:26px 0 0;padding-inline:12px 14px}
.cat-group:first-child{margin-top:16px}
.cat-group-h{font:800 12px/1.4 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.cat-group + .cat-card{border-top-color:transparent}
.cat-card{border-top:1px solid var(--page-rule);border-radius:3px;
  transition:background-color 240ms var(--ease),box-shadow 240ms var(--ease),margin 280ms var(--ease),border-color 240ms}
.cat-card.is-open{margin-block:12px;border-top-color:transparent;background:var(--card-up);box-shadow:var(--lift)}
.cat-card.is-open + .cat-card{border-top-color:transparent}
.cat-head{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 18px;padding:16px 14px 16px 12px}
.cat-card--ruling .cat-head{grid-template-columns:12px minmax(0,1fr) auto}
.cat-mark{grid-row:1;align-self:center;width:9px;height:9px}
.cat-title{grid-row:1;margin:0;font:var(--display-wght) calc(23px * var(--display-scale))/1.08 var(--display);text-wrap:balance}
.cat-title a{color:var(--bone);text-decoration:underline 2px rgba(242,235,225,.5);text-underline-offset:.16em;transition:text-decoration-color var(--quick)}
.cat-title a:hover,.cat-head:hover .cat-title a{text-decoration-color:var(--gold)}
/* With the script, the whole head is the card's handle. */
.cat.is-live .cat-head{cursor:pointer}
.cat.is-live .cat-title a::after{content:"";position:absolute;inset:0;border-radius:3px}
.cat.is-live .cat-title a:focus-visible{outline:none}
.cat.is-live .cat-title a:focus-visible::after{outline:3px solid var(--focus);outline-offset:-3px}
.cat-meta{grid-row:1 / span 2;grid-column:-2;align-self:start;display:grid;justify-items:end;gap:4px;margin:4px 0 0;
  font:800 11.5px/1.3 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);white-space:nowrap}
.cat-meta:empty{display:none}
.cat-st--banned{color:var(--vitae)}
.cat-st--allowlist{color:var(--gold)}
.cat-st--changed{color:var(--steel)}
.cat-st--homebrew{color:var(--brew)}
.cat-st--allowed{color:var(--sage)}
.cat-staff{display:inline-flex;align-items:center;gap:6px;color:var(--ash)}
.cat-staff::before{content:"";width:9px;height:9px;border:2px dashed currentColor;border-radius:1px}
/* A Chronicle card says its season among everything else, and its date inside the Chronicle. */
.cat-list[data-view="chronicle"] .cat-when-season,.cat-list:not([data-view="chronicle"]) .cat-when-date{display:none}
.cat-ex{grid-column:1 / -2;margin:0;max-width:66ch;color:var(--ash);font-size:16.5px;line-height:1.5;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.cat-card--ruling .cat-ex{grid-column:2 / -2}
.is-open .cat-ex{-webkit-line-clamp:unset;color:var(--bone)}
.cat mark{padding:0 1px;border-radius:2px;background:rgba(223,182,83,.24);color:inherit}

/* The reading side: hidden without the script (the title opens the entry's page instead); with
   it, it slides open (grid rows 0fr to 1fr) and the words fade in just after. */
.cat-body{display:none}
.cat.is-live .cat-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 320ms var(--ease)}
.cat.is-live .is-open .cat-body{grid-template-rows:1fr}
.cat-body > div{min-height:0;overflow:hidden}
.cat-read{display:grid;gap:12px;padding:2px 14px 20px 12px;opacity:0;transform:translateY(-4px);transition:opacity 200ms,transform 260ms var(--ease)}
.cat-card--ruling .cat-read{padding-left:42px}
.is-open .cat-read{opacity:1;transform:none;transition-delay:90ms}
.cat-text{max-width:66ch;font-size:17px}
.cat-text > :first-child{margin-top:0}
.cat-text > :last-child{margin-bottom:0}
.cat-note{margin:0;max-width:64ch;padding:10px 14px;background:rgba(0,0,0,.22);color:var(--ash);font-size:15px;line-height:1.5}
.cat-note--staff{border-left:2px dashed rgba(242,235,225,.35)}
.cat-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin:0;font-size:14px;color:var(--smoke)}

/* ---------- 6. Motion: after a tab or filter changes, the cards settle in from the tab's side ---------- */
@keyframes cat-in{from{opacity:0;transform:translate(var(--dx,0px),8px)}to{opacity:1;transform:none}}
.cat-list.is-entering > *{animation:cat-in 280ms var(--ease) both;animation-delay:calc(min(var(--i,0),12) * 20ms)}
.cat-list.is-leaving{opacity:0;transform:translateX(calc(var(--dx,0px) * -.5));transition:opacity 120ms linear,transform 120ms linear}

/* ---------- 7. Under the cards: nothing matched, or what this visitor can't read yet ---------- */
.cat-empty,.cat-more{display:grid;justify-items:start;gap:12px;margin-top:18px;padding:18px 20px;border-radius:3px;background:rgba(0,0,0,.22)}
.cat-empty p,.cat-more p{margin:0;max-width:56ch}
.cat-row{display:flex;flex-wrap:wrap;gap:6px 20px}
.cat-staff-add{margin:22px 0 0}

/* ---------- 8. The page's own words, below the drawer ---------- */
.cat-about{padding-block:8px clamp(56px,8vw,104px)}
.cat-about .mm-prose{columns:2 340px;column-gap:clamp(28px,5vw,72px)}
.cat-about .mm-prose > *{break-inside:avoid}
.cat-about .mm-prose > :first-child{margin-top:0}
.cat-about h2{break-after:avoid;font-size:calc(26px * var(--display-scale))}

/* ---------- 9. Marks: a ruling's standing, and who may read an entry ---------- */
/* Banned is blood, an allowlist is gold, a change is steel, allowed is sage: the same colours the
   site uses for danger, rank, the keys and done. Homebrew (0.21), something made here, is a
   new-cut star in sea-glass. */
.cat-mark--banned{background:var(--vitae)}
.cat-mark--allowlist{background:var(--gold);rotate:45deg}
.cat-mark--changed{border:2px solid var(--steel);border-radius:50%}
.cat-mark--homebrew{width:11px;height:11px;background:var(--brew);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.cat-mark--allowed{background:var(--sage);border-radius:50%}
.ar-status{display:inline-flex;align-items:center;gap:7px}
.ar-status::before{content:"";flex:none;inline-size:8px;block-size:8px}
.ar-status--banned{color:var(--vitae)}
.ar-status--banned::before{background:var(--vitae)}
.ar-status--allowlist{color:var(--gold)}
.ar-status--allowlist::before{background:var(--gold);rotate:45deg}
.ar-status--changed{color:var(--steel)}
.ar-status--changed::before{border:2px solid var(--steel);border-radius:50%}
.ar-status--homebrew{color:var(--brew)}
.ar-status--homebrew::before{inline-size:10px;block-size:10px;background:var(--brew);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.ar-status--allowed{color:var(--sage)}
.ar-status--allowed::before{background:var(--sage);border-radius:50%}
/* Who may read it, when it isn't everyone. Staff only is a dashed mark: amethyst is the Code's alone. */
.ar-who{display:inline-flex;align-items:center;gap:7px;color:var(--bone)}
.ar-who::before{content:"";flex:none;inline-size:9px;block-size:9px;border:2px solid currentColor;border-radius:1px}
.ar-who--staff{color:var(--ash)}
.ar-who--staff::before{border-style:dashed}

/* ---------- 10. An entry's own page ---------- */
.ar-trail{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;font:700 15px/1.2 var(--ui)}
.ar-trail a{display:inline-flex;align-items:center;min-height:44px;color:var(--bone);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em;text-decoration-color:rgba(242,235,225,.6)}
.ar-trail a:hover{text-decoration-color:var(--gold)}
.ar-trail span{color:var(--ash)}
.ar-row-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:0;font:700 12px/1.3 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.ar-kind{color:var(--ash)}
.ar-updated{margin:0;font-size:15px;color:var(--ash)}
.ar-updated a{color:var(--bone);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.28em}
.ar-note{margin:6px 0 0;max-width:62ch;padding:12px 16px;background:var(--card);font-size:15.5px;line-height:1.55;color:var(--bone)}
.ar-note--staff{color:var(--ash);border-left:2px dashed rgba(242,235,225,.35)}
.ar-text{padding-block:0 clamp(36px,6vw,72px)}
.ar-text .mm-prose{max-width:70ch}
.ar-list--more{display:grid;gap:14px;padding-block:0 clamp(56px,8vw,112px)}
.ar-more-title{margin:0;font:700 13px/1.4 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.ar-ledger{display:grid;margin:0;padding:0;list-style:none;border-block-start:1px solid var(--page-rule)}
.ar-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;row-gap:4px;padding-block:16px 18px;border-block-end:1px solid var(--page-rule)}
.ar-row > *{grid-column:1}
.ar-row-title{margin:0;font:var(--display-wght) calc(clamp(22px,2vw,26px) * var(--display-scale))/1.1 var(--display);text-wrap:balance}
.ar-row-title a{color:var(--bone);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em;text-decoration-color:rgba(242,235,225,.45);
  transition:text-decoration-color var(--quick) var(--ease)}
.ar-row-title a:hover{text-decoration-color:var(--gold)}
.ar-row-text{margin:2px 0 0;max-width:66ch;color:var(--ash);font-size:16.5px;line-height:1.55}
.ar-row-date{grid-column:2;grid-row:1 / span 2;align-self:start;margin:0;font-size:14px;color:var(--ash);font-variant-numeric:tabular-nums;white-space:nowrap}
.ar-locked{padding-block-end:clamp(56px,10vw,140px)}
.ar-seal{position:relative;inline-size:54px;block-size:54px;border:2px solid var(--gold);border-radius:50%}
.ar-seal::after{content:"";position:absolute;inset:14px;border:2px solid var(--gold);rotate:45deg}
.ar-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

/* ---------- 11. Small screens, and less motion ---------- */
@media (max-width:720px){
  .cat-tabs{margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter)}
  .cat-tab{gap:8px;padding:13px 13px 11px;font-size:14.5px}
  .cat-find{flex-basis:100%;max-width:none;margin-left:0}
  .cat-filters > .cat-field{flex:1 1 140px;min-width:0}
  .cat-filters select{width:100%}
  .cat-head,.cat-card--ruling .cat-head{padding:14px 10px}
  .cat-head{grid-template-columns:minmax(0,1fr)}
  .cat-card--ruling .cat-head{grid-template-columns:12px minmax(0,1fr)}
  .cat-meta{order:-1;grid-row:auto;grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:4px 12px;justify-items:start;margin:0;white-space:normal}
  .cat-card--ruling .cat-meta{grid-column:2}
  .cat-title,.cat-mark{grid-row:2}
  .cat-ex,.cat-card--ruling .cat-ex{grid-column:1 / -1}
  .cat-card--ruling .cat-ex{grid-column:2}
  .cat-read{padding:0 10px 18px}
  .cat-card--ruling .cat-read{padding-left:34px}
  .ar-row{grid-template-columns:minmax(0,1fr)}
  .ar-row-date{grid-column:1;grid-row:auto}
}
@media (prefers-reduced-motion:reduce){
  .cat-list.is-entering > *{animation:none}
  .cat-list.is-leaving{transition:none}
  .cat-tab,.cat-card,.cat.is-live .cat-body,.cat-read,.cat-title a,.ar-row-title a{transition:none}
}