:root {
  color-scheme: dark;
  --canvas: #080a0c;
  --panel: #13171b;
  --border: #343c43;
  --text: #f4f5f2;
  --muted: #afb7bd;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 64px;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
  background: var(--canvas);
  color: var(--text);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; }
::selection { background: var(--text); color: var(--canvas); }
.shell { width: calc(100% - 80px); max-width: 1648px; margin-inline: auto; }
.site-header { height: 66px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 10px; border-bottom: 1px solid var(--border); }
.language-switch { display: flex; gap: 4px; flex-shrink: 0; }
.language-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; color: var(--muted); font-size: 12px; line-height: 18px; text-decoration: none; }
.language-switch a[aria-current="page"] { color: var(--text); text-decoration: underline; text-underline-offset: 5px; }
.wordmark { font-size: 12px; line-height: 18px; letter-spacing: 1.8px; text-transform: uppercase; }
.wordmark { display:flex; align-items:center; gap:10px; letter-spacing:.5px; text-transform:none; white-space:nowrap; }
.brand-mark { display:block; width:40px; height:40px; object-fit:contain; }
.intro { display:flex; align-items:center; justify-content:space-between; gap:32px; }
.intro-copy { min-width:0; }
.contact-section { width:340px; max-width:100%; flex-shrink:0; }
.contact-label { color:var(--muted); font:13px/20px Arial,sans-serif; margin:0; }
.email-link { display:inline-flex; min-height:44px; align-items:center; font:400 23px/1.4 Arial,sans-serif; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; max-width:100%; letter-spacing:-.4px; }
.email-link span { overflow-wrap:anywhere; }
.discord-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:8px; }
.discord-name { font:15px/22px Arial,sans-serif; }
.discord-label { color:var(--muted); margin-right:8px; }
.copy-discord { font:12px/18px Arial,sans-serif; border:1px solid #78838b; border-radius:24px; padding:10px 12px; min-height:44px; min-width:107px; color:var(--text); background:none; cursor:pointer; }
.copy-discord:hover { background:var(--panel); }
.copy-discord:focus-visible { outline:2px solid var(--text); outline-offset:4px; }
.copy-status { color:var(--muted); font:13px/20px Arial,sans-serif; margin:8px 0 0; }
.copy-status:empty { display:none; }
@media(width<900px){.intro{align-items:flex-start;flex-direction:column;gap:24px}.contact-section{width:100%;padding-top:20px;border-top:1px solid var(--border)}.email-link{font-size:clamp(20px,5.6vw,23px)}.discord-row{max-width:340px;justify-content:space-between}.intro .collection-label{margin-top:14px}}
@media(width<360px){.wordmark{font-size:11px;gap:5px;letter-spacing:0}.brand-mark{width:28px;height:28px}.site-header{gap:4px}.discord-row{gap:8px}.discord-name{font-size:14px}.discord-label{margin-right:6px}.copy-discord{padding-inline:10px;min-width:99px}}
main:focus { outline: none; }
.intro { padding-top: 34px; margin-bottom: 24px; }
h1 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 66px; font-weight: 400; line-height: 80px; letter-spacing: -1.5px; }
.collection-label { margin: 22px 0 0; font-size: 12px; line-height: 18px; letter-spacing: 1px; text-transform: uppercase; }
.collection-label, .project-status, .project-description { color: var(--muted); }
.project-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.project-grid > li { min-width: 0; display: flex; }
.project-card { width: 100%; min-width: 0; min-height: 258px; padding: 19px; border: 1px solid var(--border); border-radius: 18px; display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 24px; background: var(--panel); text-decoration: none; transition: border-color 160ms ease; }
.project-preview { align-self: center; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 8px; }
.project-details { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.project-status { margin: 0; font-size: 12px; font-weight: 400; letter-spacing: 1px; line-height: 18px; }
.project-title { margin: 14px 0 0; font-size: clamp(24px, calc(2.5vw - 6px), 27px); font-weight: 400; line-height: 34px; letter-spacing: -.5px; }
.project-description { margin: 6px 0 20px; font-size: 16px; line-height: 23px; }
.project-action { margin-top: auto; display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 150px; min-height: 44px; padding: 0 16px; border-radius: 24px; background: var(--text); color: var(--panel); font-size: 14px; line-height: 20px; }
.project-arrow { font-size: 19px; line-height: 20px; }
.site-footer { padding-block: 24px 40px; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; line-height: 18px; color: var(--muted); text-underline-offset: 4px; }
.skip-link { position: fixed; z-index: 10; top: 12px; left: 16px; transform: translateY(-160%); min-height: 44px; padding: 12px 18px; border-radius: 8px; background: var(--text); color: var(--canvas); }
.skip-link:focus { transform: translateY(0); }
@media (hover: hover) {
  .project-card:hover { border-color: #839098; }
  .site-footer a:hover { color: var(--text); }
}
@media (width < 1200px) {
  .project-card { padding: 15px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(186px, auto); gap: 20px; }
  .project-title { font-size: 26px; }
  .project-description { margin-bottom: 0; }
}
@media (width < 700px) {
  .shell { width: calc(100% - 32px); }
  .intro { padding-top: 28px; margin-bottom: 28px; }
  h1 { font-size: 40px; line-height: 50px; }
  .collection-label { margin-top: 32px; font-size: 11px; }
  .project-grid { grid-template-columns: minmax(0, 1fr); }
  .site-footer { padding-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { .project-action { border: 1px solid ButtonText; } }
/* Small utility pages share the approved typography, not an additional homepage section. */
.utility { max-width: 800px; margin: 0 auto; padding: 40px 24px 64px; }
.utility h1 { margin-top: 40px; font-size: clamp(40px, 7vw, 66px); }
.utility h2 { font-size: 24px; line-height: 32px; font-weight: 400; margin-top: 32px; }
.utility p { color: var(--muted); font-size: 16px; line-height: 26px; }
.utility a { display: inline-block; padding-block: 10px; min-height: 44px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.utility li { padding-block: 8px; }
.utility-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.utility .language-switch a { padding: 0 8px; }
.utility h1 { overflow-wrap: break-word; }
@media print { :root { color-scheme: light; } .skip-link, .site-footer { display: none; } .project-card { break-inside: avoid; } }