/* Built on the companion stylesheet's system (ddm.nyuu.page): its palette, type and spacing ladders,
   and its three constructions. A thing is styled for what it is, not for where it sits. */

/* ── faces ── */
@font-face { font-family: "Quicksand"; src: url("./fonts/quicksand-variable.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "M PLUS Rounded 1c"; src: url("./fonts/mplus-rounded-1c-kana.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sarasa Digits"; src: url("./fonts/sarasa-digits.woff2") format("woff2"); unicode-range: U+0030-0039; font-display: swap; }
@font-face { font-family: "Quicksand fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 103.1%; }
@font-face { font-family: "IM Fell English"; src: url("./fonts/imfell-400-italic.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Fell Stand-in"; src: local("Georgia Italic"), local("Georgia-Italic"), local("Georgia"); font-style: italic; size-adjust: 77.67%; ascent-override: 90.53%; descent-override: 36.33%; line-gap-override: 0%; }

/* ── the palette, and the ladders ── */
:root {
  --room: #3F5A6E; --paper: #FFFFFF; --rule: #AFA8A1;
  --page-dice: #A8D0E8; --page-dice-hi: #BFDCEE; --page-dice-sh: #4A9BCC; --page-dice-deep: #28729E;
  --rose: #F7CBD3; --rose-deep: #B44A62; --link: #7C2B3D; --peach: #FFDDBE; --butter: #FFEDB0;
  --mint: #C5E8D2; --mint-deep: #3D7C57; --sky: #C9E4F2; --sky-deep: #3F6E8C; --cloud: #DDE4E8;
  --purple: #653D7C; --row-lit: #F6F4F1;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ink: #000000; --on-room: #E7ECEF;
  --type-display: 1.6rem; --type-head: 1.25rem; --type-sub: 1.1rem; --type-body: 1rem;
  --type-small: .92rem; --type-fine: .8rem; --type-micro: .72rem;
  --gap-1: .1rem; --gap-2: .2rem; --gap-3: .3rem; --gap-4: .45rem;
  --gap-5: .6rem; --gap-6: .9rem; --gap-7: 1.2rem; --gap-8: 1.8rem;
  --hairline: 1px; --pen: 2px; --bevel: 3px; --slab: 6px; --frame: 12px;
}
html { font-size: 16px; }
@media (min-width: 640px)  { html { font-size: 17px; } }
@media (min-width: 1000px) { html { font-size: 18px; } }
@media (min-width: 1500px) { html { font-size: 19px; } }
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--room); color: var(--ink);
  font-family: "Quicksand", "Quicksand fallback", "M PLUS Rounded 1c", sans-serif; line-height: 1.65;
  --face: var(--page-dice); --face-lit: var(--page-dice-hi); --face-shade: var(--page-dice-sh); --face-drop: var(--page-dice-deep);
}

/* ── emoji ── */
/* The glyph stays in the span, so copy, search and screen readers still meet real text;
   text-indent shoves it out of view and the asset paints in its place. */
.emoji {
  display: inline-block; width: 1.2em; height: 1.2em; overflow: hidden; text-indent: 200%;
  white-space: nowrap; background-repeat: no-repeat; background-position: center;
  background-size: contain; vertical-align: -0.2em;
}
.site-map .emoji, aside .emoji {
  filter: drop-shadow(-1px -1px 0 rgba(255, 255, 255, .85)) drop-shadow(1px -1px 0 rgba(255, 255, 255, .85))
          drop-shadow(-1px 1px 0 rgba(255, 255, 255, .85)) drop-shadow(1px 1px 0 rgba(255, 255, 255, .85)); }

/* ── the construction ── */
main > section, .masthead {
  background: var(--paper);
  border: var(--frame) solid; border-color: var(--face-lit) var(--face-shade) var(--face-shade) var(--face-lit);
  box-shadow: 5px 5px 0 var(--face-drop);
}
.door, summary, aside {
  background: var(--face);
  border: var(--bevel) solid; border-color: var(--face-lit) var(--face-shade) var(--face-shade) var(--face-lit);
  box-shadow: 4px 4px 0 var(--face-drop);
}
.stat { border: var(--hairline) solid var(--rule); box-shadow: none; }
.door:hover, summary:hover { background: color-mix(in srgb, var(--face) 93%, white); }
details[open] > summary {
  position: relative; left: 4px; top: 4px; box-shadow: none;
  border-color: var(--face-shade) var(--face-lit) var(--face-lit) var(--face-shade); text-shadow: .03em 0 0 currentColor;
}

/* ── surfaces ── */
main > section, .masthead { --pad: 1.6rem; color: var(--ink); padding: var(--gap-7) var(--pad); margin: var(--gap-8) 0; }
.wrap { max-width: 52rem; margin: 0 auto; padding: 0 var(--gap-7) 4rem; }
main { color: var(--on-room); }
footer { text-align: center; padding: var(--gap-8) var(--gap-7); }
.makers-mark {
  display: inline-block; margin: 0; padding: var(--gap-4) var(--gap-7);
  background: var(--paper); color: var(--ink);
  border: var(--frame) solid; border-color: var(--face-lit) var(--face-shade) var(--face-shade) var(--face-lit);
  box-shadow: 5px 5px 0 var(--face-drop);
  font-family: "IM Fell English", "Fell Stand-in", serif; font-style: italic; font-size: var(--type-body);
}
.masthead { padding: var(--gap-8) var(--gap-7) var(--gap-7); text-align: center; }
.masthead h1 { margin: 0; font-size: var(--type-display); letter-spacing: .02em; }
.masthead p { margin: var(--gap-4) 0 0; font-size: var(--type-small); }
/* A door is a key you go through: to another page, to a place on this one. */
.door {
  display: inline-block; text-decoration: none; color: var(--ink);
  padding: var(--gap-2) var(--gap-5); margin: var(--gap-2) var(--gap-1); line-height: 1.45;
}
.site-map { display: flex; gap: var(--gap-4); justify-content: center; flex-wrap: wrap; margin-top: var(--gap-6); font-size: var(--type-small); }
.door:focus-visible { outline: 3px solid var(--rose-deep); outline-offset: 2px; }

/* ── type ── */
h2 { margin: 0 0 var(--gap-3); font-size: var(--type-head); }
h3 { font-size: var(--type-sub); margin: var(--gap-7) 0 var(--gap-4); }
h4 { font-size: var(--type-small); margin: 0 0 var(--gap-3); }
p { margin: var(--gap-5) 0; }
.purpose { font-size: var(--type-small); margin: 0 0 var(--gap-6); }
.purpose p { margin: 0; }
ul, ol { padding-left: var(--gap-7); }
li { margin: var(--gap-3) 0; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--gap-3) var(--gap-6); margin: var(--gap-5) 0; }
dt { font-weight: 700; }
dd { margin: 0; }
/* A link that leaves the site stays text rather than being dressed as a control.
   nyuu.page is still us, so it is written in our own accent; everywhere else is plainly elsewhere. */
a[href^="http"] { color: var(--link); text-underline-offset: .18em; }
a[href*="nyuu.page"] { color: var(--ink); text-decoration-color: var(--link); text-decoration-thickness: var(--pen); }
a[href^="http"]:hover { color: var(--ink); }
code { font-family: var(--mono); font-size: var(--type-fine); }
pre { font-family: var(--mono); font-size: var(--type-fine); white-space: pre-wrap; margin: var(--gap-4) 0; padding: var(--gap-4) var(--gap-5); background: var(--row-lit); border: var(--hairline) solid var(--rule); }
hr { border: none; border-top: var(--pen) solid var(--rule); margin: var(--gap-7) 0 var(--gap-1); }
blockquote { margin: var(--gap-5) 0; padding: var(--gap-2) 0 var(--gap-2) var(--gap-6); border-left: var(--slab) solid var(--face-shade); font-style: italic; }
blockquote cite { display: block; font-style: normal; font-size: var(--type-fine); margin-top: var(--gap-2); }

/* ── tables ── */
table { border-collapse: collapse; width: 100%; margin: var(--gap-5) 0; font-size: var(--type-small); }
th {
  text-align: left; font-size: var(--type-fine); text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; padding: var(--gap-3) var(--gap-5); border-bottom: var(--pen) solid var(--ink);
}
td { padding: var(--gap-4) var(--gap-5); border-top: var(--hairline) solid var(--rule); }
tr:hover td { background: var(--row-lit); }
tbody th { text-transform: none; letter-spacing: 0; font-size: var(--type-small); border-bottom: none; border-top: var(--hairline) solid var(--rule); font-weight: 600; white-space: nowrap; vertical-align: top; }
tbody th small { display: block; font-size: var(--type-fine); font-weight: 400; }
.numeric, .nums td, .grid td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
  font-family: "Sarasa Digits", Quicksand, "Quicksand fallback", sans-serif; }
.nums thead th:not(:first-child), .grid thead th:not(:first-child) { text-align: right; }
td.good { background: var(--mint); } td.bad { background: var(--rose); } td.mid { background: var(--butter); }
tr:hover td.good { background: color-mix(in srgb, var(--mint) 88%, black 0%); }
td.na { font-style: italic; }
.table-scroll { overflow-x: auto; }
.grid tbody th { font-family: var(--mono); font-size: var(--type-fine); font-weight: 400; }

/* ── drawers ── */
details { margin: 0; }
summary { display: inline-block; padding: var(--gap-1) var(--gap-4); cursor: pointer; font-weight: 600; font-family: var(--mono); font-size: var(--type-fine); }
summary::before { content: "▸ "; }
details[open] > summary::before { content: "▾ "; }
details[open] > summary { margin-bottom: var(--gap-4); }
details:not([open]) > *:not(summary) { display: none; }
.grid .case { font-family: "Quicksand", "Quicksand fallback", sans-serif; font-size: var(--type-small); font-weight: 400; white-space: normal; min-width: 30ch; max-width: 60ch; }
.grid .case p { margin: var(--gap-3) 0; }
summary:focus-visible { outline: 3px solid var(--rose-deep); outline-offset: 2px; }

/* ── small boxes inside panels ── */
aside { padding: var(--gap-6) var(--gap-6); margin: var(--gap-6) 0; font-size: var(--type-small); box-shadow: none;
  --face: var(--peach); --face-lit: #FFEEDE; --face-shade: #D89340; --face-drop: #A96C22; }
aside p { margin: 0; }
.stat-row { display: flex; gap: var(--gap-6); flex-wrap: wrap; margin: var(--gap-6) 0; }
.stat { flex: 1 1 130px; padding: var(--gap-6) var(--gap-6); text-align: center; }
.stat-number { font-size: var(--type-display); font-weight: 700; font-variant-numeric: tabular-nums;
  font-family: "Sarasa Digits", Quicksand, "Quicksand fallback", sans-serif; }
.stat-label { font-size: var(--type-fine); }
.legend { display: flex; flex-wrap: wrap; gap: var(--gap-3) var(--gap-7); font-size: var(--type-fine); margin: var(--gap-4) 0 0; }
.legend span::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; margin-right: var(--gap-3); border: var(--hairline) solid var(--rule); }
.legend .g::before { background: var(--mint); } .legend .b::before { background: var(--rose); } .legend .m::before { background: var(--butter); }
.bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--gap-6) var(--gap-8); margin: var(--gap-5) 0; font-size: var(--type-small); }
.bar { display: grid; grid-template-columns: 6.5rem 1fr 3rem; align-items: center; gap: var(--gap-4); margin: var(--gap-2) 0; }
.bar .who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .track { height: .8em; background: var(--cloud); border: var(--hairline) solid var(--rule); }
.bar .fill { display: block; height: 100%; background: var(--rose-deep); }
.bar .val { text-align: right; font-variant-numeric: tabular-nums; font-family: "Sarasa Digits", Quicksand, "Quicksand fallback", sans-serif; }
@media (max-width: 700px) { .table-scroll { margin-inline: calc(-1 * var(--pad, 0px)); } }