/* Titan's Trail: Engraved Arcana. Bone parchment cards with notched corners and a double sepia rule, on a dark umber
   table; oxblood and old gold used sparingly; small-caps serif titles. The same tokens as the game's fx/Arcana.java.
   Motion is present but quiet: cards are dealt in and lift a little; nothing bounces. */
/* Self-hosted (Google Fonts, SIL OFL) so no visitor's IP goes to a third party. Latin and latin-ext only. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cormorant-sc-0ybmGD4kxqXBmOVLG30OGwsmWBMk9BfzwDM.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cormorant-sc-0ybmGD4kxqXBmOVLG30OGwsmWBMk-hfz.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cormorant-sc-0ybmGD4kxqXBmOVLG30OGwsmdBQk9BfzwDM.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cormorant-sc-0ybmGD4kxqXBmOVLG30OGwsmdBQk-hfz.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/eb-garamond-SlGFmQSNjdsmc35JDF1K5GRwUjcdlttVFm-rI7e8QL9zU6ingQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/eb-garamond-SlGFmQSNjdsmc35JDF1K5GRwUjcdlttVFm-rI7e8QL99U6g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/eb-garamond-SlGUmQSNjdsmc35JDF1K5GR7SDktYw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/eb-garamond-SlGUmQSNjdsmc35JDF1K5GR1SDk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/eb-garamond-SlGUmQSNjdsmc35JDF1K5GR7SDktYw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/eb-garamond-SlGUmQSNjdsmc35JDF1K5GR1SDk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --table: #2a2118;
  --table-deep: #1c150e;
  --ink: #3f3225;
  --ink-text: #3a2e21;
  --card: #e6dcc6;
  --card-dim: #d9ccb0;
  --hover: #d8c08c;
  --oxblood: #8b3a2b;
  --gold: #b8893a;
  --verdigris: #3f7f74;
  --lapis: #4b4a7a;
  --muted: #7d6a52;
  --on-table: #e6dcc6;
  --on-table-dim: #b9a98a;
  --display: "Cormorant SC", "Cormorant Garamond", Georgia, serif;
  --text: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --notch: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  --notch-sm: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}

* { box-sizing: border-box; }
html { background: var(--table-deep); scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--on-table);
  font: 1.12rem/1.6 var(--text);
  font-variant-numeric: lining-nums tabular-nums;
  background: linear-gradient(180deg, var(--table) 0%, var(--table-deep) 100%) fixed;
}

::selection { background: var(--gold); color: var(--table-deep); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
* { scrollbar-color: var(--gold) var(--table-deep); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--table-deep); }
::-webkit-scrollbar-thumb { background: var(--muted); border: 3px solid var(--table-deep); }
input, textarea, select { caret-color: var(--oxblood); }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem 5rem; position: relative; }

/* ---- the header: an engraved rail ---- */
header.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1.25rem; flex-wrap: nowrap;
  margin: 0 calc(50% - 50vw); padding: 0.75rem calc(50vw - 50% + 1.25rem);
  background: var(--table-deep);
  border-bottom: 1px solid var(--gold);
  box-shadow: 0 3px 0 -2px rgba(184, 137, 58, 0.45);
}
.mark { font: 600 1.25rem/1 var(--display); letter-spacing: 0.12em; text-decoration: none; white-space: nowrap; color: var(--card); }
.mark::before, .mark::after { content: "\2726"; color: var(--gold); font-size: 0.75em; margin: 0 0.5em; vertical-align: 0.15em; }
nav { display: flex; gap: 0.25rem; margin-inline: auto; }
nav a {
  display: flex; align-items: baseline; gap: 0.45rem; text-decoration: none; color: var(--on-table-dim);
  font: 600 1.05rem/1 var(--display); letter-spacing: 0.08em; padding: 0.45rem 0.8rem; border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
nav a::before { content: attr(data-n); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--gold); }
nav a:hover { color: var(--card); border-bottom-color: rgba(184, 137, 58, 0.6); }
nav a[aria-current="page"] { color: var(--card); border-bottom-color: var(--gold); }
.hdr-right { display: flex; gap: 0.5rem; align-items: center; }
.hl {
  display: inline-flex; align-items: center; gap: 0.45rem; font: 600 0.95rem/1 var(--display); letter-spacing: 0.08em;
  color: var(--card); text-decoration: none; cursor: pointer; background: transparent;
  border: 1px solid rgba(184, 137, 58, 0.7); padding: 0.45rem 0.8rem; clip-path: var(--notch-sm);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.hl:hover { background: rgba(184, 137, 58, 0.18); }
.hl code { border: 0; background: none; padding: 0; font-size: 0.8rem; color: var(--on-table-dim); }

/* ---- type ---- */
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.1; text-wrap: balance; letter-spacing: 0.05em; }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); margin: 3rem 0 1rem; color: var(--card); }
h2 { font-size: 1.6rem; margin: 2.6rem 0 0.9rem; color: var(--card); display: flex; align-items: center; gap: 0.75rem; }
h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(184, 137, 58, 0.7), transparent); }
h3 { font-size: 1.25rem; margin: 0 0 0.3rem; }
p { margin: 0 0 1rem; max-width: 44rem; }
.lede { font-size: 1.25rem; color: var(--on-table-dim); font-style: italic; }
.muted { color: var(--on-table-dim); }
.card .muted, .wcard .muted, .fcard .muted, .post .muted, .tile .muted, .scroll .muted { color: var(--muted); }
.small { font-size: 0.9rem; }
a { color: var(--gold); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.card a, .post a, .fcard a { color: var(--oxblood); }
code, kbd { font: 0.88em ui-monospace, "Cascadia Code", Consolas, monospace; background: rgba(0, 0, 0, 0.25); color: var(--hover); padding: 0.1em 0.4em; }

/* ---- a card: parchment, notched corners, the double rule ---- */
.card, .wcard, .fcard, .msg, .tile, .post, .mapbox, .notice, .privacy-card, .scroll, .switch {
  position: relative; background: var(--card); color: var(--ink-text);
  clip-path: var(--notch);
  transition: transform 0.55s var(--ease), background-color 0.35s var(--ease);
}
.card::before, .wcard::before, .fcard::before, .msg::before, .tile::before, .post::before, .mapbox::before, .scroll::before, .switch::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid var(--ink); clip-path: var(--notch);
  box-shadow: inset 0 0 0 4px var(--card), inset 0 0 0 5px rgba(63, 50, 37, 0.45);
}
.card, .fcard, .msg, .post { padding: 1.2rem 1.4rem; }
.card { display: flex; align-items: center; gap: 1.1rem; max-width: 40rem; }
.card img { width: 72px; height: 72px; image-rendering: pixelated; border: 1px solid var(--ink); outline: 3px double var(--ink); outline-offset: 2px; background: var(--card-dim); }
.card .name { font: 600 1.7rem/1.1 var(--display); letter-spacing: 0.05em; }
.tier { font: 600 0.85rem/1 var(--display); letter-spacing: 0.18em; color: var(--muted); }
.tier[data-tier="linked"] { color: var(--lapis); } .tier[data-tier="moderator"] { color: var(--verdigris); } .tier[data-tier="admin"] { color: var(--oxblood); }

.notice { padding: 0.9rem 1.3rem; margin: 1.5rem 0; max-width: 44rem; background: var(--hover); color: var(--ink-text); font-style: italic; }
.notice.info { background: var(--card-dim); }

/* ---- buttons: notched plates ---- */
.btn {
  display: inline-block; font: 600 1.05rem/1 var(--display); letter-spacing: 0.1em; text-decoration: none; cursor: pointer;
  color: var(--ink-text); background: var(--card); border: 0; padding: 0.8rem 1.5rem; clip-path: var(--notch-sm);
  box-shadow: inset 0 0 0 1px var(--ink), inset 0 0 0 3px var(--card), inset 0 0 0 4px rgba(63, 50, 37, 0.4);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn:hover { background: var(--hover); transform: translateY(-2px); color: var(--ink-text); }
.btn:active { transform: translateY(0); transition-duration: 0.1s; }
.btn.quiet { background: transparent; color: var(--card); box-shadow: inset 0 0 0 1px rgba(184, 137, 58, 0.7); }
.btn.quiet:hover { background: rgba(184, 137, 58, 0.18); color: var(--card); }
.card .btn.quiet, .post .btn.quiet { color: var(--ink-text); box-shadow: inset 0 0 0 1px var(--ink); }
button.btn:disabled { opacity: 0.55; cursor: default; transform: none; }

/* ---- forms ---- */
input[type="search"], input[type="text"], textarea, select {
  width: 100%; max-width: 40rem; padding: 0.7rem 0.9rem; font: inherit; color: var(--ink-text); background: var(--card);
  border: 1px solid var(--ink); outline: 1px solid rgba(63, 50, 37, 0.35); outline-offset: -4px; transition: box-shadow 0.3s var(--ease);
}
input[type="search"] { max-width: 24rem; }
input:focus, textarea:focus, select:focus { outline: 1px solid var(--gold); box-shadow: 0 0 0 3px rgba(184, 137, 58, 0.35); }
select { width: auto; }
label { display: block; color: var(--on-table-dim); font: 600 0.95rem/1.4 var(--display); letter-spacing: 0.08em; margin-bottom: 0.25rem; }
.card label, .fcard label, .post label { color: var(--muted); }
[hidden] { display: none !important; }

/* ---- the status line ---- */
.status { display: inline-flex; align-items: center; gap: 0.6rem; font-style: italic; color: inherit; margin: 0 0 1rem; }
.dot { display: inline-block; width: 0.6rem; height: 0.6rem; background: var(--muted); transform: rotate(45deg); }
td .dot, .key .dot { margin-right: 0.5rem; }
.status[data-state="up"] .dot { background: var(--verdigris); animation: beat 2.4s var(--ease) infinite; }
@keyframes beat { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---- tables inside a parchment card ---- */
.scroll { overflow-x: auto; padding: 0.8rem; }
.scroll:has(> table[hidden]) { display: none; }
table { width: 100%; border-collapse: collapse; font-size: 1rem; position: relative; }
th { text-align: left; font: 600 0.95rem/1 var(--display); letter-spacing: 0.12em; color: var(--muted); padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--ink); }
td { padding: 0.55rem 0.8rem; border-bottom: 1px dotted rgba(63, 50, 37, 0.45); vertical-align: top; color: var(--ink-text); }
tbody tr { transition: background 0.25s var(--ease); }
tbody tr:hover td { background: rgba(216, 192, 140, 0.45); }
td.pos { font: 600 1.2rem/1 var(--display); }
tbody tr:nth-child(1) td.pos { color: var(--oxblood); }

/* ---- chips ---- */
.chip { display: inline-block; font: 600 0.82rem/1 var(--display); letter-spacing: 0.12em; color: var(--ink-text); border: 1px solid var(--ink); padding: 0.25rem 0.6rem; }
.chip[data-status="open"] { background: var(--hover); } .chip[data-status="in_progress"] { background: #b9d3cd; } .chip[data-status="resolved"] { background: var(--card-dim); }
.rank { font: 600 1.1rem/1 var(--display); color: var(--oxblood); }

/* ---- tabs ---- */
.wtabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.6rem 0 1.3rem; border-bottom: 1px solid rgba(184, 137, 58, 0.5); }
.wtabs .btn { background: transparent; color: var(--on-table-dim); box-shadow: none; clip-path: none; padding: 0.6rem 1rem; }
.wtabs .btn:hover { color: var(--card); transform: none; }
.wtabs .btn[aria-selected="true"] { color: var(--card); box-shadow: inset 0 -2px 0 var(--gold); }

/* ---- tickets, privacy ---- */
.thread { display: grid; gap: 0.8rem; margin: 1.25rem 0; max-width: 44rem; }
.msg.staff { background: #d6e1dc; }
.msg .who { font: 600 0.9rem/1.3 var(--display); letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.25rem; }
.msg .body, .post .body { white-space: pre-wrap; overflow-wrap: anywhere; }
tr.click { cursor: pointer; } tr.sel td { background: var(--hover); }
.privacy { display: grid; gap: 0.8rem; max-width: 40rem; }
.switch { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.9rem 1.1rem; }
.switch input { margin-top: 0.35rem; width: 1.1rem; height: 1.1rem; accent-color: var(--oxblood); flex: none; position: relative; }
.switch label { margin: 0; color: var(--ink-text); font: 1.05rem/1.4 var(--text); letter-spacing: 0; cursor: pointer; position: relative; }
.switch .muted { color: var(--muted); }
.find { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin: 1rem 0 1.5rem; }
.find label { flex-basis: 100%; }

/* ---- war map ---- */
.mapbox { margin: 1rem 0; max-width: 48rem; overflow: hidden; padding: 6px; }
#map { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; background: var(--card-dim); position: relative; }
.m-grid line { stroke: var(--ink); stroke-width: 0.6; stroke-opacity: 0.25; vector-effect: non-scaling-stroke; }
.m-grid text, .m-zones text { fill: var(--muted); letter-spacing: 0.08em; }
.m-node, .m-site { cursor: pointer; outline: none; }
.legend { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0.5rem 0; }
.key { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; }
.key i { width: 0.7rem; height: 0.7rem; display: inline-block; transform: rotate(45deg); border: 1px solid var(--ink); }
#table td, #table th { white-space: nowrap; }

/* ---- guides grid ---- */
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.2rem; margin: 1.2rem 0; }
.wcard { display: block; padding: 1.2rem 1.3rem 1.1rem; text-decoration: none; color: var(--ink-text); animation: deal 0.7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes deal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
a.wcard:hover { transform: translateY(-5px); }
.wcard .wname { font: 600 1.3rem/1.15 var(--display); letter-spacing: 0.04em; margin: 0 0 0.35rem; position: relative; }
.wcard p, .wcard .tier { position: relative; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.1rem; margin: 1.3rem 0; }
.fcard { animation: deal 0.7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.fcard h2 { font-size: 1.1rem; margin: 0 0 0.5rem; color: var(--ink-text); }
.fcard h2::after { display: none; }

/* ---- home: the deck ---- */
/* The deck owns the first screen: it sits centred in the viewport, and the news waits below for anyone who scrolls. */
.hero { min-height: calc(100vh - 4.5rem); min-height: calc(100svh - 4.5rem); display: flex; flex-direction: column; justify-content: center; padding: 1rem 0 3.5rem; position: relative; }
.scroll-cue { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  font: 600 0.9rem/1 var(--display); letter-spacing: 0.18em; color: var(--on-table-dim); text-decoration: none; transition: color 0.3s var(--ease); }
.scroll-cue::after { content: "\2726"; color: var(--gold); animation: cue 2.4s var(--ease) infinite; }
.scroll-cue:hover { color: var(--card); }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(5px); opacity: 1; } }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin: 1.2rem 0; justify-content: center; }
.deck { display: flex; justify-content: center; align-items: flex-end; margin: 1.5rem 0 2rem; min-height: 25rem; }
.tile {
  --r: 0; --y: 0; display: flex; flex-direction: column; width: 15rem; min-height: 23rem; margin-inline: -0.4rem; padding: 0;
  text-decoration: none; color: var(--ink-text);
  transform: translateY(calc(var(--y) * 1px)) rotate(calc(var(--r) * 0.6deg)); transform-origin: 50% 120%;
  animation: dealfan 0.9s var(--ease) backwards; animation-delay: calc(var(--i) * 90ms);
  transition: transform 0.6s var(--ease);
}
@keyframes dealfan { from { opacity: 0; transform: translateY(60px) rotate(0deg); } to { opacity: 1; transform: translateY(calc(var(--y) * 1px)) rotate(calc(var(--r) * 0.6deg)); } }
.tile:hover, .tile:focus-visible { z-index: 5; transform: translateY(-22px) rotate(0deg); }
.tile .num { position: relative; display: block; text-align: center; padding-top: 1.1rem; font: 600 1rem/1 var(--display); letter-spacing: 0.35em; color: var(--oxblood); }
.tile .art { flex: 1; display: grid; place-items: center; font: 4.4rem/1 var(--display); color: var(--ink); position: relative; margin: 0.4rem 1.1rem 0; }
.tile .art::before { content: ""; position: absolute; width: 8.5rem; height: 8.5rem; border: 1px solid rgba(63, 50, 37, 0.6); transform: rotate(45deg); transition: transform 0.8s var(--ease); }
.tile .art::after { content: ""; position: absolute; width: 6.5rem; height: 6.5rem; border: 1px solid rgba(63, 50, 37, 0.35); transform: rotate(45deg); }
.tile:hover .art::before { transform: rotate(135deg); }
.tile .art b { position: relative; font-weight: 400; }
.tile .ban { position: relative; text-align: center; font: 600 1.35rem/1.1 var(--display); letter-spacing: 0.1em; padding: 0.7rem 0.5rem 0.4rem; margin: 0 1.1rem; border-top: 1px solid var(--ink); }
.tile .ban::before, .tile .ban::after { content: "\2726"; color: var(--oxblood); font-size: 0.6em; margin: 0 0.5em; vertical-align: 0.25em; }
.tile .d { position: relative; padding: 0.3rem 1.2rem 1.2rem; font-size: 1rem; font-style: italic; text-align: center; min-height: 3.6rem; color: var(--muted); }
.tile.c1 .art { color: var(--oxblood); } .tile.c2 .art { color: var(--verdigris); } .tile.c3 .art { color: var(--gold); } .tile.c4 .art { color: var(--lapis); } .tile.c5 .art { color: var(--ink); }
.tile .btn { margin-top: 0.4rem; padding: 0.7rem 1.1rem; font-size: 0.98rem; }
/* The Server card holds the copy button: a little wider than the rest, and always on top of its neighbours. */
.deck .tile.c3 { width: 17.5rem; z-index: 3; }
.deck .tile.c3:hover { z-index: 6; }
.cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem; }
.feed { display: grid; gap: 1.1rem; }
.post h3 { position: relative; font-size: 1.3rem; }
.post p { margin: 0.2rem 0; max-width: none; position: relative; }
.post .body { position: relative; }

/* the staff hub keeps simple plates, not the deck */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.1rem; margin: 1.2rem 0; }
.tiles .tile { width: auto; min-height: 0; margin: 0; padding: 1.1rem 1.3rem; gap: 0.2rem; transform: none; animation: none; }
.tiles .tile:hover { transform: translateY(-4px); }
.tiles .tile .glyph { font-size: 1.8rem; line-height: 1; color: var(--oxblood); position: relative; }
.tiles .tile b { font: 600 1.25rem/1.2 var(--display); letter-spacing: 0.06em; position: relative; }
.tiles .tile .d { padding: 0; text-align: left; min-height: 0; }

.skills { max-height: 26rem; overflow-y: auto; }

/* ---- motion: every control answers, and pages slide ---- */
.btn, .hl {
  white-space: nowrap; overflow: hidden; vertical-align: middle;
  transition: width 0.38s var(--ease), background 0.3s var(--ease), color 0.18s var(--ease), transform 0.35s var(--ease), box-shadow 0.3s var(--ease);
}
.btn:active, .hl:active { transform: scale(0.95); transition-duration: 0.1s; }
.btn.swap-out, .hl.swap-out, .swap-out code { color: transparent; }
.btn.done, .hl.done { background: var(--hover); animation: squish 0.42s var(--ease); }
.hl.done { color: var(--ink-text); }
@keyframes squish { 0% { transform: scale(1); } 35% { transform: scale(0.92); } 70% { transform: scale(1.03); } 100% { transform: scale(1); } }

nav a { background: linear-gradient(var(--gold), var(--gold)) no-repeat 50% 100% / 0% 1px; border-bottom: 0; transition: color 0.3s var(--ease), background-size 0.45s var(--ease); }
nav a:hover { background-size: 60% 1px; }
nav a[aria-current="page"] { background-size: 100% 1px; }

.wtabs .btn { transition: color 0.3s var(--ease), box-shadow 0.45s var(--ease); }
.pane:not([hidden]) { animation: paneIn 0.45s var(--ease); }
@keyframes paneIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

a.wcard, .tile, .tiles .tile, tbody tr { will-change: transform; }
input, textarea, select { transition: box-shadow 0.3s var(--ease), outline-color 0.3s var(--ease); }

/* Page to page: the rail stays put, the page slides; forward moves left, back moves right. Browsers without
   cross-document view transitions get a plain fade-up of the page instead. */
@view-transition { navigation: auto; }
header.top { view-transition-name: rail; }
::view-transition-old(root) { animation: 0.24s var(--ease) both pageOut; }
::view-transition-new(root) { animation: 0.46s var(--ease) both pageIn; }
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: pageOutBack; }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: pageInBack; }
@keyframes pageOut { to { opacity: 0; transform: translateX(-28px); } }
@keyframes pageIn { from { opacity: 0; transform: translateX(36px); } }
@keyframes pageOutBack { to { opacity: 0; transform: translateX(28px); } }
@keyframes pageInBack { from { opacity: 0; transform: translateX(-36px); } }
/* Browsers without cross-page view transitions (Firefox, older Safari): site.js slides the page out on a link
   click, and the head script marks the arriving page so it slides in. */
html.arrive main { animation: 0.46s var(--ease) both pageIn; }
html.arrive.back main { animation-name: pageInBack; }
html.leaving main { animation: 0.2s var(--ease) both pageOut; }
html.leaving.back main { animation-name: pageOutBack; }

@media (max-width: 52rem) {
  .hero { min-height: 0; padding-bottom: 1rem; }
  .scroll-cue { display: none; }
  .cols { grid-template-columns: 1fr; gap: 0; }
  .deck { flex-wrap: wrap; gap: 1rem; min-height: 0; }
  .tile { margin-inline: 0; transform: none; width: min(46%, 15rem); min-height: 0; }
  .tile:hover { transform: translateY(-6px); }
  .tile.c3, .deck .tile.c3 { order: -1; width: 100%; }
  .tile .art { min-height: 7rem; font-size: 3.2rem; }
  .tile .art::before { width: 5.5rem; height: 5.5rem; }
  .tile .art::after { width: 4rem; height: 4rem; }
  @keyframes dealfan { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
  .hl code { display: none; }
}
@media (max-width: 40rem) {
  .wrap { padding: 0 1rem 4rem; }
  header.top { flex-wrap: wrap; padding-block: 0.6rem; }
  .mark { font-size: 1.05rem; }
  .hdr-right { margin-left: auto; }
  nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  nav a { white-space: nowrap; padding: 0.45rem 0.4rem; font-size: 0.95rem; gap: 0.3rem; }
  nav { justify-content: space-between; }
  nav a::before { display: none; } /* the numerals are decoration; at phone width they push Account off the rail */
  .tile .ban { font-size: 1.1rem; letter-spacing: 0.05em; margin: 0 0.6rem; }
  .tile .ban::before, .tile .ban::after { display: none; }
  .hero { padding-top: 1.2rem; }
}
/* Reduced motion means less travel, not none: fades, colour and the button morph stay; slides, swoops and the
   squish become plain fades. (Windows reports "reduce" whenever its animation effects are switched off, so killing
   all motion here made the whole site snap for anyone with that setting.) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @keyframes deal { from { opacity: 0; } to { opacity: 1; } }
  @keyframes dealfan { from { opacity: 0; } to { opacity: 1; } }
  @keyframes paneIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes squish { 0% { transform: scale(1); } 40% { transform: scale(0.97); } 100% { transform: scale(1); } }
  .tile:hover, .tile:focus-visible { transform: translateY(-8px); }
  .tile:hover .art::before { transform: rotate(45deg); }
}

/* ---- footer: legal and contact on every page ---- */
.foot { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid rgba(184, 137, 58, 0.45); font-size: 0.95rem; color: var(--on-table-dim); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0 0 0.8rem; }
.foot-links a { font: 600 0.95rem/1.4 var(--display); letter-spacing: 0.06em; color: var(--on-table-dim); text-decoration: none; }
.foot-links a:hover { color: var(--card); text-decoration: underline; }
.foot p { max-width: none; margin: 0 0 0.4rem; font-size: 0.85rem; }

/* ---- long-form text (privacy, rules) ---- */
.prose { max-width: 44rem; }
.prose h2 { font-size: 1.35rem; }
.prose li { margin-bottom: 0.4rem; }
.prose strong { font-weight: 500; color: var(--card); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }