/* Spinball website. Every value is ported 1:1 from the UI agent's design source,
   layout/Spinball Site 1 - Wide.dc.html, where it was an inline style. The rules for
   colour, type and spacing are in layout/README.md - read it before changing a value.
   The page has no media queries: every size that changes with the screen is a clamp(). */

@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/ibm-plex-mono-300.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-500.woff2") format("woff2"); }

html, body { margin: 0; padding: 0; background: #E9E5DA; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #A63F16; text-decoration: none; border-bottom: 1px solid rgba(166,63,22,.35); }
a:hover { color: #1B1E22; border-bottom-color: #1B1E22; }

.page { background: #E9E5DA; color: #1B1E22; font-family: "IBM Plex Mono", ui-monospace, monospace; min-height: 100vh; display: flex; flex-direction: column; }
.wrap { width: 100%; padding: 0 clamp(18px,5vw,32px); flex: 1; }
.band { width: 100%; max-width: 1080px; margin: 0 auto; }

/* --- header ---------------------------------------------------------------- */
.header { width: 100%; max-width: 1080px; margin: 0 auto; padding: clamp(30px,5vw,52px) 0 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
/* the source's links with their own colour kept it on hover (inline style beats a:hover) */
a.brand, a.brand:hover { border: 0; padding: 0; display: flex; align-items: center; gap: 13px; color: #1B1E22; text-align: left; }
.brand-icon { width: 38px; height: 38px; flex: none; display: block; }
.brand-text { display: flex; flex-direction: column; gap: 3px; }
.wordmark { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(24px,4.6vw,32px); line-height: 1; letter-spacing: .16em; text-transform: uppercase; }
.brand-sub { font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .28em; text-transform: uppercase; color: #A63F16; }
.nav { display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline; }
a.nav-page { border: 0; padding: 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(27,30,34,.68); }
a.nav-page[aria-current="page"] { color: #1B1E22; }
.nav-link { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
/* Steam before its page exists: greyed out, not a link (Carsten 13/9: "ikke have coming soon med men være greyed out") */
.greyed { color: rgba(27,30,34,.68); cursor: default; }

/* --- home ------------------------------------------------------------------- */
.hero { padding: clamp(44px,9vw,104px) 0 clamp(30px,5vw,56px); }
.headline { margin: 0; max-width: 30ch; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(40px,7vw,86px); line-height: .96; letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; }
.lead { margin: 28px 0 0; max-width: 56ch; font-size: clamp(15px,2.2vw,17px); line-height: 1.75; font-weight: 300; color: rgba(27,30,34,.86); text-wrap: pretty; }
.lead-2 { margin-top: 16px; color: rgba(27,30,34,.72); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; font-weight: 500; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }
a.btn-dark, a.btn-dark:hover, .btn-dark { border: 0; background: #1B1E22; color: #E9E5DA; }
/* the same button, greyed: ink at the design's dimmed alpha (.68) over paper */
.btn-dark.greyed { background: rgba(27,30,34,.68); color: #E9E5DA; }
a.btn-line, a.btn-line:hover { border: 1px solid #1B1E22; color: #1B1E22; }

/* The hero picture sits right under the headline (Carsten 13/9: "HERO kommer op under overskiften"),
   with the same space above and below it (Carsten 13/9: "SAMME luft OVER billede, som UNDER").
   The size, as he judged it: 54 px under was too little ("endnu mere luft"), 104 px above and below
   too much on desktop ("desktop har nu for meget BÅDE over og under"), and 44 px on a phone right
   ("mobil ser fin ud"). So 44 px on a phone and at most 72 px - the step the layout puts before the
   footer. Below, it collapses with the lead paragraph's 28 px, so the larger one counts.
   The source's placeholder also had min-height:200px. With the real picture that height
   would crop the character's bat ends on a phone, so the frame keeps its 21:9 only. */
.still { width: 100%; aspect-ratio: 21/9; margin: clamp(31px,4.2vw,50px) 0; border: 1px solid rgba(27,30,34,.22); overflow: hidden; }
.still picture { display: block; height: 100%; }
.still img { display: block; width: 100%; height: 100%; object-fit: cover; }

.modes-section { padding: 0 0 clamp(34px,5vw,60px); }
.eyebrow { display: block; padding-bottom: 18px; font-size: 11px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: #A63F16; }
.eyebrow-flat { padding-bottom: 0; }
.modes { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: 0 clamp(26px,4vw,52px); }
.mode { min-width: 0; padding: 20px 0; border-top: 1px solid rgba(27,30,34,.22); display: flex; flex-direction: column; gap: 8px; }
.mode-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; }
.mode-name { margin: 0; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(24px,3.4vw,32px); line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: #1B1E22; }
.mode-tag { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #A63F16; }
/* unbuilt modes dim, they do not disappear (layout README, "Mode.built") */
.mode.unbuilt .mode-name, .mode.unbuilt .mode-tag { color: rgba(27,30,34,.68); }
.mode-body { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.7; font-weight: 300; color: rgba(27,30,34,.72); text-wrap: pretty; }

.facts { padding: 0 0 clamp(34px,5vw,60px); border-top: 1px solid rgba(27,30,34,.22); }
.fact { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 15px 0; border-bottom: 1px solid rgba(27,30,34,.14); }
.fact-key { flex: 0 0 130px; min-width: 130px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(27,30,34,.68); }
.fact-value { flex: 1 1 220px; min-width: 0; max-width: 68ch; font-size: 15px; line-height: 1.6; color: rgba(27,30,34,.9); text-wrap: pretty; }

.latest { padding: 0 0 clamp(40px,6vw,72px); }
.latest-title { margin: 14px 0 0; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(26px,4.6vw,38px); line-height: 1.06; letter-spacing: .05em; text-transform: uppercase; max-width: 26ch; text-wrap: balance; }
.latest-lead { margin: 12px 0 0; max-width: 58ch; font-size: 15px; line-height: 1.75; font-weight: 300; color: rgba(27,30,34,.78); text-wrap: pretty; }
a.btn-small, a.btn-small:hover { margin-top: 22px; border: 1px solid #1B1E22; min-height: 48px; padding: 0 22px; color: #1B1E22; }

/* --- devlog ----------------------------------------------------------------- */
/* The reading column sits INSIDE the 1080 band, left-aligned, so masthead, column and
   footer share one left edge (layout README, "Layout"). The source placed it at the
   page's padding edge instead, which on a wide screen was far left of the masthead. */
.log-col { width: 100%; max-width: 760px; }
.log-head { padding: clamp(44px,8vw,88px) 0 clamp(24px,4vw,36px); }
.log-title { margin: 0; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(46px,11vw,104px); line-height: .88; letter-spacing: .02em; text-transform: uppercase; }
.log-intro { margin: 18px 0 0; max-width: 58ch; font-size: 15px; line-height: 1.75; font-weight: 300; color: rgba(27,30,34,.72); text-wrap: pretty; }

/* The roadmap: Now, Next, Later - open milestones dim like an unbuilt mode, done ones are in ink with a check */
.road-count { margin: 16px 0 0; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #A63F16; }
.road-group { padding: clamp(24px,4vw,40px) 0 0; border-top: 1px solid rgba(27,30,34,.22); }
.road-list { list-style: none; margin: 0 0 clamp(24px,4vw,40px); padding: 0; display: flex; flex-direction: column; gap: 20px; }
.milestone { display: flex; gap: 14px; align-items: baseline; }
.milestone-check { flex: 0 0 18px; font-size: 16px; line-height: 1; color: #A63F16; }
.milestone-text { min-width: 0; }
.milestone-title { margin: 0; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(22px,3.2vw,28px); line-height: 1.05; letter-spacing: .06em; text-transform: uppercase; color: #1B1E22; }
.milestone-eta { margin: 6px 0 0; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(27,30,34,.68); }
.milestone-body { margin: 6px 0 0; max-width: 58ch; font-size: 14px; line-height: 1.7; font-weight: 300; color: rgba(27,30,34,.72); text-wrap: pretty; }
.milestone-done-in { display: inline-block; margin-top: 8px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.milestone.open .milestone-title { color: rgba(27,30,34,.68); }
.milestone.open .milestone-check { color: rgba(27,30,34,.4); }
.entry { padding: clamp(26px,4vw,44px) 0; border-top: 1px solid rgba(27,30,34,.22); display: flex; flex-direction: column; gap: 14px; }
.entry-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.entry-no { color: #A63F16; font-weight: 500; }
.entry-date, .entry-target { color: rgba(27,30,34,.68); }
.entry-title { margin: 0; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(25px,4.4vw,36px); line-height: 1.06; letter-spacing: .05em; text-transform: uppercase; max-width: 28ch; text-wrap: balance; }
.entry-body { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.75; font-weight: 300; color: rgba(27,30,34,.86); text-wrap: pretty; }
.entry-points { margin: 0; padding-left: 1.2em; max-width: 62ch; font-size: 14px; line-height: 1.75; font-weight: 300; color: rgba(27,30,34,.68); }
.entry-points li { margin-bottom: 6px; }
.shot { margin: 6px 0 0; }
.shot picture, .shot-image { display: block; width: 100%; height: auto; }
.shot-video { display: block; width: 100%; height: auto; background: #1B1E22; cursor: pointer; }
.shot figcaption { margin-top: 9px; font-size: 12px; line-height: 1.6; color: rgba(27,30,34,.55); }
.caveat { margin: 2px 0 0; max-width: 62ch; padding-left: 14px; border-left: 2px solid #A63F16; font-size: 13px; line-height: 1.7; color: rgba(27,30,34,.66); }

/* --- footer ----------------------------------------------------------------- */
.footer { margin-top: clamp(40px,6vw,72px); border-top: 1px solid rgba(27,30,34,.22); padding: clamp(32px,5vw,56px) clamp(18px,5vw,32px) clamp(26px,4vw,40px); }
.about { margin: 14px 0 0; max-width: 58ch; font-size: 15px; line-height: 1.75; font-weight: 300; color: rgba(27,30,34,.86); text-wrap: pretty; }
.about-2 { margin-top: 12px; color: rgba(27,30,34,.72); }
.links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.baseline { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(27,30,34,.14); display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(27,30,34,.68); }
.baseline-brand { display: flex; align-items: center; gap: 9px; }
.baseline-icon { width: 18px; height: 18px; flex: none; display: block; }