@font-face { font-family: 'Portal Display'; src: url('/fonts/portal-display-latin.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Portal Reading'; src: url('/fonts/portal-reading-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root { color-scheme: dark; font-family: 'Portal Reading', sans-serif; background: #101010; color: #fafafa; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: radial-gradient(ellipse at 15% 25%, #262219 0, transparent 55%), #101010; }
main { max-width: 1120px; margin: auto; padding: clamp(32px, 7vw, 80px) 24px; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.8fr); gap: 16px 64px; align-items: start; }
main > img { grid-column: 1 / -1; width: 52px; height: 52px; border-radius: 12px; margin-bottom: 20px; }
.kicker { color: #c6a66a; letter-spacing: .12em; font-size: .75rem; margin-top: 24px; }
h1 { grid-column: 1; font: 700 clamp(2.2rem,5vw,4rem)/1.08 'Portal Display',sans-serif; letter-spacing: -.04em; margin: 8px 0 16px; }
p, li { color: #b9b9b9; line-height: 1.65; }
.actions { grid-column: 1; display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }
button, .actions a { border: 1px solid #454545; border-radius: 8px; min-height: 48px; padding: 12px 20px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; background: #242424; color: #fff; }
button { background: #e0bd78; color: #151515; border-color: #e0bd78; }
button:disabled { opacity: .65; cursor: wait; }
a:focus-visible, button:focus-visible { outline: 2px solid #e0bd78; outline-offset: 4px; }
section { grid-column: 2; grid-row: 2 / 7; margin: 0; padding: 28px; border: 1px solid #343434; border-radius: 14px; background: #1b1b1b; align-self: center; }
h2 { font: 700 1.15rem 'Portal Display',sans-serif; margin-top: 0; }
ul { padding-left: 20px; margin-bottom: 0; } li + li { margin-top: 8px; }
.back { color: #ddd; }
#description, #status { grid-column: 1; margin: 0; }
#status { font-size: .8rem; }
.back { grid-column: 1 / -1; margin-top: 32px; font-size: .85rem; text-decoration: none; }
[hidden] { display: none !important; }
@media (max-width: 760px) { main { grid-template-columns: minmax(0,1fr); gap: 16px; padding: 32px 20px; } section { grid-column: 1; grid-row: auto; margin-top: 20px; } h1 { font-size: clamp(2.2rem,9vw,3.2rem); } .actions > * { flex: 1 1 180px; } }