/* The blog's front pages (server/homepage.ts): Writing as the table, the AMA as decks, on the
   design system's paper (the AMA's table), in EB Garamond and blue-black ink. From the
   directions Mustafa chose on 2026-11-06 (homes.css in the session's notes). */
:root[data-ds] { --bg-canvas: var(--bg-sunken); --paper-raised: color-mix(in oklab, var(--bg-surface) 60%, var(--bg-sunken));
  --serif: "EB Garamond", Georgia, serif; --note-shadow-near: oklch(0.2 0.02 60 / 0.16); --note-shadow-far: oklch(0.2 0.02 60 / 0.09); }
[data-theme="dark"] { --note-shadow-near: oklch(0 0 0 / 0.55); --note-shadow-far: oklch(0 0 0 / 0.35); }
:focus, :focus-visible { outline: none !important; }
* { box-sizing: border-box; }
html, html * { scrollbar-width: none; }
html::-webkit-scrollbar, html *::-webkit-scrollbar { display: none; }
body { margin: 0; min-height: 100vh; background: var(--bg-sunken); color: var(--text-ink); font-family: var(--serif); -webkit-text-size-adjust: 100%; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--paper-texture) 0 0 / var(--paper-texture-size) repeat;
  filter: var(--paper-texture-filter); mix-blend-mode: var(--paper-texture-blend); opacity: var(--paper-texture-opacity); }
a { color: inherit; text-decoration: none; }
.theme { position: fixed; z-index: 20; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); }
@media (max-width: 959.98px) { .theme { position: absolute; } }

/* The torn paper every note is cut from: ama/paper.css (.paper.torn) */

/* ── The masthead the homepages share ── */
.mast { display: grid; justify-items: center; padding: 3.2rem 1rem 0; }
.mast-bear { width: 64px; height: auto; margin-bottom: 0.6rem; }
[data-theme="dark"] .mast-bear { filter: brightness(1.12); }
.mast-name { margin: 0; font: 600 clamp(1.85rem, 1.5rem + 1.4vw, 2.3rem)/1.1 var(--serif); letter-spacing: -0.01em; text-align: center; }
.mast-nav { display: flex; gap: var(--space-lg); margin-top: 0.7rem; font: 400 var(--text-ui)/1.4 var(--font-ui); }
.mast-nav a { position: relative; color: var(--fg-muted); padding: 2px 0 6px; }
.mast-nav a[aria-current] { color: var(--fg-default); }
.section-name { margin: 0 0 1rem; font: 500 var(--text-meta)/1.4 var(--font-ui); color: var(--fg-subtle); letter-spacing: 0.02em; }

/* ═══ Home B · The table ═══ */
.table { width: min(76rem, 100% - 2.5rem); margin: 3.5rem auto 6rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem 2.4rem; align-items: start; }
/* Laid out by homes.js: papers dropped on a table, packed under one another (no rows) */
.table.is-laid { display: block; position: relative; }
.table.is-laid .slipnote { position: absolute; margin: 0; }
@media (max-width: 760px) { .table { grid-template-columns: 1fr; gap: 1.6rem; } }
.slipnote { position: relative; isolation: isolate; display: block; padding: 1.4rem 1.5rem 1.2rem; rotate: var(--tilt, 0deg);
  filter: drop-shadow(0 1px 1px var(--note-shadow-near)) drop-shadow(0 4px 7px var(--note-shadow-far)); transition: rotate var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out); }
.slipnote:hover { rotate: 0deg; translate: 0 -3px; }
/* The newest, a landscape paper alone across the top, centred, as the AMA in front is; its words
   the size of every other paper's */
.slipnote.is-lead { grid-column: 1 / -1; justify-self: center; width: min(34rem, 100%); padding: 1.5rem 1.6rem 1.3rem; }
/* One paper across (site.js lays one column below 600px): as wide as the rest */
@media (max-width: 600px) { .slipnote.is-lead { justify-self: stretch; width: auto; } }
.s-title { margin: 0 0 0.6rem; font: 600 clamp(1.3rem, 1.2rem + 0.4vw, 1.45rem)/1.15 var(--serif); text-wrap: balance; }
.s-open { margin: 0; font: 400 1.05rem/1.5 var(--serif); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.s-meta { display: flex; gap: 0.7rem; margin: 0.9rem 0 0; font: 400 var(--text-meta)/1.4 var(--font-ui); color: var(--fg-muted); }

/* ═══ AMA A · Decks ═══ */
.decks { width: min(52rem, 100% - 2.5rem); margin: 3.2rem auto 6rem; }
.open-now { display: grid; gap: 1.4rem; width: min(34rem, 100%); margin: 0 auto 4rem; }
.deck { position: relative; display: grid; isolation: isolate; }
.deck-card { position: relative; isolation: isolate; display: grid; gap: 0.55rem; padding: 1.2rem 1.3rem 1.1rem; min-height: 8.5rem; align-content: start;
  filter: drop-shadow(0 1px 1px var(--note-shadow-near)) drop-shadow(0 4px 7px var(--note-shadow-far)); }
.deck-edge { position: absolute; z-index: -2; background: color-mix(in oklch, var(--paper-raised), var(--fg-default) 4%); --tear-x: 113px; --tear-y: 59px;
  filter: drop-shadow(0 1px 1px var(--note-shadow-near));
  -webkit-mask-image: linear-gradient(#000 0 0), var(--tear-top), var(--tear-bottom), var(--tear-left), var(--tear-right);
  mask-image: linear-gradient(#000 0 0), var(--tear-top), var(--tear-bottom), var(--tear-left), var(--tear-right);
  -webkit-mask-size: 100% 100%, 240px 5px, 240px 5px, 5px 240px, 5px 240px; mask-size: 100% 100%, 240px 5px, 240px 5px, 5px 240px, 5px 240px;
  -webkit-mask-position: 0 0, var(--tear-x, 0) 0, calc(0px - var(--tear-x, 0px)) 100%, 0 var(--tear-y, 0), 100% calc(0px - var(--tear-y, 0px));
  mask-position: 0 0, var(--tear-x, 0) 0, calc(0px - var(--tear-x, 0px)) 100%, 0 var(--tear-y, 0), 100% calc(0px - var(--tear-y, 0px));
  -webkit-mask-repeat: no-repeat, repeat-x, repeat-x, repeat-y, repeat-y; mask-repeat: no-repeat, repeat-x, repeat-x, repeat-y, repeat-y;
  -webkit-mask-composite: source-out, source-over, source-over, source-over; mask-composite: subtract, add, add, add; }
.deck-edge.e1 { inset: 7px 3px -7px; } .deck-edge.e2 { inset: 14px 6px -14px; z-index: -3; background: color-mix(in oklch, var(--paper-raised), var(--fg-default) 8%); --tear-x: 37px; --tear-y: 171px; }
.deck.is-open .deck-card { padding: 1.5rem 1.6rem 1.3rem; }
.d-name { font: 600 var(--text-ui-lg)/1.25 var(--font-ui); color: var(--fg-default); }
.d-q { font: 400 1.05rem/1.42 var(--serif); }
.d-meta { font: 400 var(--text-meta)/1.4 var(--font-ui); color: var(--fg-muted); }
.post-name { font: 600 1.2rem/1.2 var(--serif); }
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 2.4rem 1.8rem; }
.past { margin-top: 3.2rem; }
.deck.is-closed .deck-card { --stamp-host: 1; }
.ask { position: relative; isolation: isolate; padding: 0.9rem 0.45rem 0.45rem 1.1rem; rotate: 0.4deg; --tear-x: 97px; --tear-y: 41px;
  filter: drop-shadow(0 1px 1px var(--note-shadow-near)) drop-shadow(0 4px 7px var(--note-shadow-far)); }
.ask-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-xs); }
.field { min-height: calc(1.12rem * 1.45 * 3); padding-bottom: 0.4rem; font: 400 1.12rem/1.45 var(--serif); outline: none; white-space: pre-wrap; }
.field:empty::before { content: attr(data-placeholder); color: var(--text-ink-placeholder); pointer-events: none; }
.plane { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--fg-subtle); }
.plane .ic { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

.note { position: relative; isolation: isolate; padding: 1rem 1.15rem 1.15rem; filter: drop-shadow(0 1px 1px var(--note-shadow-near)) drop-shadow(0 4px 7px var(--note-shadow-far)); }
.note p { margin: 0; font: 400 1.15rem/1.45 var(--serif); }
.theirs { width: 88%; justify-self: end; rotate: -0.6deg; --tear-x: 31px; --tear-y: 77px; }
.yours { width: 88%; justify-self: start; margin-top: -6px; padding-bottom: 2.2rem; --tear-x: 151px; --tear-y: 13px; }
.yours .sig { position: absolute; right: 12px; bottom: 10px; width: 22px; height: auto; }

/* ── AMA decks, nothing open: the latest dealt open ── */
.dealt { display: grid; margin-top: 0.4rem; }
.dealt .note p { font-size: 1.08rem; }
.dealt .note + .note { margin-top: -4px; }
.dealt .theirs { margin-top: 10px; }
.more-of { justify-self: center; margin-top: 0.4rem; font: 400 var(--text-ui)/1.4 var(--font-ui); color: var(--fg-muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: var(--border-strong); }
.deck.is-front .deck-card { min-height: 0; }

/* A stamp on a note keeps inside it, clear of its torn edges */
:is(.deck-card, .note, .slipnote) > .ds-stamp-sm { right: 18px; bottom: 16px; }
/* A closed deck keeps a strip at its foot for its stamp, so it never sits on the words */
.deck.is-closed:not(.is-post) .deck-card { padding-bottom: 3.2rem; }

/* ── What the site adds to the directions ── */
.mast-home { display: block; line-height: 0; }
.table { margin-top: 3rem; }
/* Three papers across on a wide screen (site.js lays them; without the script, a grid) */
@media (min-width: 1100px) { .table:not(.is-laid) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.slipnote { color: var(--text-ink); }
.s-meta time { font-variant-numeric: tabular-nums; }
.index-empty { margin: 3rem auto; text-align: center; font: 400 var(--text-ui)/1.4 var(--font-ui); color: var(--fg-muted); }
.ask { display: block; margin: 0; }
.plane { cursor: pointer; }
.plane:disabled { cursor: default; }
.plane.is-ready { color: var(--fg-default); }
.plane.is-ready .body { fill: currentColor; }
.plane .crease { stroke-linecap: butt; }
.plane.is-ready .crease { stroke: var(--paper-raised); stroke-width: 2.1; }
.ask-error { margin: 0.35rem 2rem 0 0; font: 400 var(--text-meta)/1.4 var(--font-ui); color: var(--accent); }
.deck:hover .deck-card { translate: 0 -2px; }
.deck-card { transition: translate var(--dur-base) var(--ease-out); }