@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/barlow-condensed-bold-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --paper: #faf4df;
  --ink: #161819;
  --pink: #ff3458;
  --muted: #c0c0b9;
  --gutter: clamp(1.35rem, 5.2vw, 6rem);
  font: 100%/1.55 "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--paper); }
button, a { font: inherit; }
button, a[href] { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #8ee5ff; outline-offset: 4px; }
.mast { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem var(--gutter); min-height: 4.55rem; border-bottom: 1px solid #393b3b; }
.brand { display: inline-flex; }
.brand img { width: 9.2rem; height: auto; }
.edition { color: var(--muted); font-size: .82rem; font-weight: 600; }
.hero { isolation: isolate; position: relative; display: grid; align-items: center; min-height: clamp(33rem,72svh,52rem); background: #1b1c1d; }
.art { position: absolute; z-index: -1; inset: 0 0 0 39%; margin: 0; clip-path: polygon(12% 0,100% 0,100% 100%,0 100%); background: #383634; }
.art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% center; }
.art::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent,rgba(0,0,0,.6)); pointer-events: none; }
figcaption { z-index: 1; position: absolute; bottom: 1.25rem; right: var(--gutter); display: flex; align-items: center; gap: .8rem; color: white; font-size: .83rem; font-weight: 600; text-shadow: 0 1px 3px #000; }
.art-switch { display: flex; }
.art-switch button { background: transparent; border: 0; padding: 0 .15rem; width: 2.2rem; height: 2.75rem; }
.art-switch button::after { content: ""; display: block; height: 4px; background: #aaa; box-shadow: 0 0 2px #000; transform: skewX(-15deg); }
.art-switch button[aria-pressed="true"]::after { background: var(--pink); }
.intro { width: 44%; padding: 3.6rem 2rem 3.6rem var(--gutter); }
.kicker { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.2rem; font-weight: 650; color: #d5d4ca; }
.kicker span { width: 2rem; height: 4px; background: var(--pink); transform: skewX(-18deg); }
h1,h2 { font-family: "Barlow Condensed","Arial Narrow",sans-serif; font-weight: 700; font-style: italic; text-transform: uppercase; }
h1 { margin: 0 0 1.25rem; font-size: clamp(4.25rem,7.6vw,8.6rem); line-height: .85; letter-spacing: -.035em; }
.lede { color: #deded5; max-width: 24rem; margin: 0 0 1.6rem; font-size: clamp(1rem,1.22vw,1.2rem); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.action { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .72rem 1.05rem; min-height: 2.85rem; border: 1px solid transparent; font-weight: 700; font-size: .9rem; text-decoration: none; }
.primary, .download[href] { background: var(--pink); color: #160810; }
.primary:hover, .download[href]:hover { background: #ff6883; }
.download[aria-disabled="true"] { border-color: #505153; color: #aaa9a2; cursor: default; }
.download-icon { font-size: 1.25rem; line-height: 1; }
#status, noscript p { color: var(--muted); font-size: .85rem; margin: .7rem 0 0; }
#logout { background: transparent; border: 0; color: var(--paper); text-decoration: underline; text-underline-offset: .2em; padding: .5rem 0; font-size: .9rem; }
.setup { display: flex; align-items: center; gap: clamp(2rem,7vw,8rem); padding: 2.2rem var(--gutter); background: #ebe8da; color: #202123; }
.setup-heading { display: flex; align-items: center; gap: 1rem; flex: none; }
.slashes { width: 1.5rem; height: 2.6rem; background: repeating-linear-gradient(108deg, transparent 0 3px,#b3173b 3px 7px,transparent 7px 10px); }
h2 { margin: 0; font-size: clamp(1.7rem,2.5vw,2.6rem); line-height: 1; }
.setup p { max-width: 48rem; margin: 0; font-size: .97rem; }
@media (max-width: 900px) {
  .hero { min-height: 34rem; }
  .intro { width: 48%; }
  .art { left: 44%; }
}
@media (max-width: 700px) {
  .mast { min-height: 3.9rem; padding-block: .95rem; }
  .brand img { width: 7.9rem; }
  .hero { display: flex; flex-direction: column; min-height: 0; align-items: stretch; }
  .art { position: relative; z-index: 0; inset: auto; height: clamp(11rem,45vw,19rem); clip-path: none; }
  .art img { object-position: center 43%; }
  figcaption { right: var(--gutter); bottom: .3rem; }
  .intro { width: 100%; padding: 1.65rem var(--gutter) 1.8rem; }
  .kicker { margin-bottom: .7rem; font-size: .88rem; }
  h1 { font-size: clamp(3.35rem,10vw,5rem); margin-bottom: .8rem; }
  h1 br { display: none; }
  h1 br::after { content: " "; }
  .lede { max-width: 32rem; margin-bottom: 1.1rem; }
  .setup { display: grid; gap: .8rem; padding-block: 1.6rem; }
  .slashes { height: 1.8rem; }
}