/* Wildborne — playwildborne.com
   Built from the game's style guide: Soot & Bone, Silkscreen at whole multiples of one UI pixel (--u), plates with a cut corner,
   and the ordered dither for anything that arrives or leaves. Colour is kept for the meters and the seasons. */

:root {
  color-scheme: dark;
  --u: 2px;

  --soot-0: #0B0A09;
  --soot-1: #15130F;
  --soot-2: #1F1C17;
  --soot-3: #2D2821;
  --ash: #4C4339;
  --plate: rgba(21, 19, 15, 0.78);
  --panel: rgba(21, 19, 15, 0.96);
  --scrim: rgba(11, 10, 9, 0.6);

  --bone: #F1EADA;
  --bone-hot: #FFF8E9;
  --bone-dim: #B8AE9B;
  --bone-faint: #7B7367;
  --bone-lip: #A39780;
  --hi: rgba(241, 234, 218, 0.10);

  --blood: #D9483B;
  --grain: #D9A940;
  --leaf: #76A944;
  --water: #4C9FD1;
  --frost: #9DCBE7;
  --ember: #E07B35;

  --spring: #8EC261;
  --summer: #E4C64F;
  --autumn: #D27936;
  --winter: #AFCFE6;

  --flint: #8C9096;
  --copper: #C9733F;
  --bronze: #B38D41;
  --iron: #8E99A3;

  --font-px: "Silkscreen", "Lucida Console", "Courier New", monospace;
  --font-prose: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--soot-0); color: var(--bone); font: 400 18px/30px var(--font-prose); }
p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: var(--bone); }
a:hover { color: var(--bone-hot); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- The game's pixels ---------- */

/* A plate: fill, edge, highlight and lip painted behind the content and cut at one corner pixel. */
.px { position: relative; isolation: isolate; --fill: var(--plate); --edge: transparent; --ew: 0px; --hi-c: transparent; --lip: transparent; }
.px::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fill);
  box-shadow:
    inset 0 0 0 var(--ew) var(--edge),
    inset 0 calc(var(--ew) + var(--u)) 0 0 var(--hi-c),
    inset 0 calc(-1 * (var(--ew) + var(--u))) 0 0 var(--lip);
  clip-path: polygon(var(--u) 0, calc(100% - var(--u)) 0, calc(100% - var(--u)) var(--u), 100% var(--u), 100% calc(100% - var(--u)), calc(100% - var(--u)) calc(100% - var(--u)), calc(100% - var(--u)) 100%, var(--u) 100%, var(--u) calc(100% - var(--u)), 0 calc(100% - var(--u)), 0 var(--u), var(--u) var(--u));
}

/* Focus is four corner brackets two pixels clear, never a hue. */
.px:focus-visible { outline: none; }
.px:focus-visible::after, .px.is-focus::after {
  content: ""; position: absolute; inset: calc(-2 * var(--u)); pointer-events: none;
  --b: var(--bone); --L: calc(3 * var(--u)); --t: var(--u);
  background:
    linear-gradient(var(--b), var(--b)) left top / var(--L) var(--t) no-repeat,
    linear-gradient(var(--b), var(--b)) left top / var(--t) var(--L) no-repeat,
    linear-gradient(var(--b), var(--b)) right top / var(--L) var(--t) no-repeat,
    linear-gradient(var(--b), var(--b)) right top / var(--t) var(--L) no-repeat,
    linear-gradient(var(--b), var(--b)) left bottom / var(--L) var(--t) no-repeat,
    linear-gradient(var(--b), var(--b)) left bottom / var(--t) var(--L) no-repeat,
    linear-gradient(var(--b), var(--b)) right bottom / var(--L) var(--t) no-repeat,
    linear-gradient(var(--b), var(--b)) right bottom / var(--t) var(--L) no-repeat;
}
.plate { --fill: var(--plate); padding: calc(4 * var(--u)); }
.panel { --fill: var(--panel); --edge: var(--ash); --ew: var(--u); --hi-c: var(--hi); padding: calc(7 * var(--u)) calc(7 * var(--u)) calc(6 * var(--u)); }
.well { --fill: var(--soot-1); --edge: var(--soot-3); --ew: var(--u); }

/* Type in whole multiples of Silkscreen's eight pixels. */
.t1 { font: 400 calc(8 * var(--u)) / calc(10 * var(--u)) var(--font-px); }
.t1b { font: 700 calc(8 * var(--u)) / calc(10 * var(--u)) var(--font-px); }
.t2 { font: 700 calc(16 * var(--u)) / calc(20 * var(--u)) var(--font-px); }
.t3 { font: 700 calc(24 * var(--u)) / calc(28 * var(--u)) var(--font-px); }
.t4 { font: 700 calc(32 * var(--u)) / calc(36 * var(--u)) var(--font-px); }
.t6 { font: 700 calc(48 * var(--u)) / calc(52 * var(--u)) var(--font-px); }
.dim { color: var(--bone-dim); }
.faint { color: var(--bone-faint); }
.lit { text-shadow: 0 var(--u) 0 var(--soot-0); }
.prose { color: var(--bone-dim); max-width: 60ch; }
.prose.small { font-size: 16px; line-height: 26px; }
.line { display: flex; align-items: center; gap: calc(3 * var(--u)); }
.ico { width: calc(7 * var(--u)); height: calc(7 * var(--u)); flex: none; display: block; shape-rendering: crispEdges; }
.ico.sm { width: calc(5 * var(--u)); height: calc(5 * var(--u)); }

/* Buttons */
.btn { --ink: var(--bone); display: inline-flex; align-items: center; gap: calc(4 * var(--u)); font: 700 calc(8 * var(--u)) / calc(8 * var(--u)) var(--font-px); color: var(--ink); padding: calc(3 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u)); text-decoration: none; white-space: nowrap; min-height: 44px; }
.btn:hover { color: var(--ink); }
.btn.big { font-size: calc(16 * var(--u)); line-height: calc(16 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(7 * var(--u)); }
.btn.primary { --fill: var(--bone); --ink: var(--soot-1); --lip: var(--bone-lip); }
.btn.primary:hover { --fill: var(--bone-hot); }
.btn.primary:active { --lip: transparent; transform: translateY(var(--u)); }
.btn.secondary { --fill: var(--soot-2); --edge: var(--ash); --ew: var(--u); --lip: var(--soot-0); padding: calc(4 * var(--u)) calc(7 * var(--u)) calc(5 * var(--u)); }
.btn.secondary.big { padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(7 * var(--u)); }
.btn.secondary:hover { --fill: var(--soot-3); --edge: var(--bone-dim); }
.btn .ico { width: 20px; height: 20px; }

/* Segments, counted rather than estimated, as the meters and the calendar draw them. */
.bar { display: inline-flex; align-items: flex-end; gap: var(--u); line-height: 0; }
.seg { display: block; width: calc(2 * var(--u)); height: calc(5 * var(--u)); background: var(--soot-3); }
.seg.on { background: var(--c, var(--bone)); }
.seg.part { background: var(--c, var(--bone)); opacity: 0.45; }
.seg.at { height: calc(7 * var(--u)); background: var(--bone); opacity: 1; }
.bar.wide .seg { width: calc(5 * var(--u)); height: calc(2 * var(--u)); }
.year { display: flex; gap: calc(2 * var(--u)); align-items: flex-end; max-width: calc(382 * var(--u)); }
.year i { display: block; flex: 1 1 0; max-width: calc(10 * var(--u)); height: calc(3 * var(--u)); }
.year i.today { height: calc(6 * var(--u)); }
.meters { display: inline-flex; flex-direction: column; gap: 6px; padding: 16px 20px; }
.meter { display: flex; align-items: center; gap: calc(3 * var(--u)); }
.mlabel { width: calc(42 * var(--u)); font: 700 calc(8 * var(--u)) / calc(7 * var(--u)) var(--font-px); }
.cause { display: flex; align-items: center; gap: calc(2 * var(--u)); padding-left: calc(52 * var(--u)); font: 400 calc(8 * var(--u)) / calc(7 * var(--u)) var(--font-px); color: var(--bone-dim); }
.switch { display: inline-flex; flex-wrap: wrap; --fill: var(--soot-0); --edge: var(--soot-3); --ew: var(--u); padding: var(--u); gap: var(--u); }
.switch button { font: 700 calc(8 * var(--u)) / calc(7 * var(--u)) var(--font-px); padding: calc(4 * var(--u)) calc(6 * var(--u)); min-height: 44px; color: var(--bone-faint); background: none; border: 0; cursor: pointer; }
.switch button:hover { color: var(--bone); }
.switch button[aria-pressed="true"] { background: var(--bone); color: var(--soot-1); }
.key { --fill: var(--soot-2); --edge: var(--bone-faint); --ew: var(--u); --lip: var(--soot-0); display: inline-flex; justify-content: center; padding: calc(3 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)); font: 700 calc(8 * var(--u)) / calc(7 * var(--u)) var(--font-px); color: var(--bone); }
.chain { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chain .ico { width: 6px; height: 10px; color: var(--bone-faint); }

/* Ordered dither, never a fade: the soot ramps that bring the world in and take it away. */
.dith-h { background: url(../img/dither-h.png) repeat-y 0 0 / 192px 8px; image-rendering: pixelated; }
.dith-up { background: url(../img/dither-v-up.png) repeat-x 0 0 / 8px 96px; image-rendering: pixelated; }
.dith-down { background: url(../img/dither-v.png) repeat-x 0 0 / 8px 96px; image-rendering: pixelated; }
.dith-half { background: url(../img/dither-half.png) repeat 0 0 / 8px 8px; image-rendering: pixelated; }

/* ---------- The page ---------- */

.wrap { width: 100%; max-width: 1232px; margin: 0 auto; padding: 0 32px; }
.sec { padding: 128px 0; }
.sec.alt { background: var(--soot-1); }
.kicker { display: flex; align-items: center; gap: calc(4 * var(--u)); margin-bottom: 24px; color: var(--bone-faint); }
.kicker i { display: block; width: calc(10 * var(--u)); height: calc(3 * var(--u)); background: var(--c); }
.head { margin: 0 0 24px; max-width: 22ch; }
.shot { position: relative; padding: var(--u); margin: 0; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.cap { position: absolute; left: calc(4 * var(--u)); bottom: calc(4 * var(--u)); }

.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 5; padding: 24px 0; }
.navrow { display: flex; align-items: center; gap: 32px; }
.brand { text-decoration: none; color: var(--bone); }
.links { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.navlink { --fill: transparent; font: 700 calc(8 * var(--u)) / calc(8 * var(--u)) var(--font-px); color: var(--bone-dim); text-decoration: none; padding: calc(5 * var(--u)) calc(4 * var(--u)); min-height: 44px; display: inline-flex; align-items: center; }
.navlink:hover { color: var(--bone); }

.hero { position: relative; min-height: 860px; display: flex; align-items: center; overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero-scrim { position: absolute; top: 0; bottom: 0; left: 0; width: 42%; background: var(--scrim); }
.hero-dither { position: absolute; top: 0; bottom: 0; left: 42%; width: 192px; opacity: 0.6; }
.hero-in { position: relative; z-index: 2; padding-top: 120px; padding-bottom: 140px; }
.hero-copy { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.hero h1 { margin: 0; }
.lede { margin-top: 24px; font-size: 20px; line-height: 32px; color: var(--bone); max-width: 34ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.hero-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; }
.clock { position: absolute; right: 32px; bottom: 120px; z-index: 2; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.seasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.season { display: flex; flex-direction: column; gap: 16px; }
.season .shot { aspect-ratio: 4 / 3; }
.season h3 { margin: 0; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pair .span { grid-column: span 2; }
.weather { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.weather .shot { aspect-ratio: 16 / 10; }
.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 16px; margin-top: 56px; }
.mosaic .big { grid-column: span 2; grid-row: span 2; }
.mosaic .wide { grid-column: span 2; }
.bands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.band { display: flex; flex-direction: column; gap: 12px; }
.ages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 64px; }
.age { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.age.later { opacity: 0.45; }
.world-panel { display: flex; flex-direction: column; gap: 28px; padding: 28px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.viewer { aspect-ratio: 16 / 9; margin-top: 40px; }
.viewer .veil { position: absolute; inset: 2px; opacity: 0.55; }
.viewer .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.viewer:not(.trailer) .veil, .viewer:not(.trailer) .play { display: none; }
.thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.thumb { padding: var(--u); border: 0; background: none; cursor: pointer; --fill: var(--soot-1); --edge: var(--soot-3); --ew: var(--u); }
.thumb:hover { --edge: var(--bone-dim); }
.thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cta { position: relative; overflow: hidden; padding: 160px 0; }
.cta-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-veil { position: absolute; inset: 0; opacity: 0.85; }
.cta-edge { position: absolute; left: 0; right: 0; height: 96px; }
.cta-in { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.platforms { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }
.socials { display: flex; gap: 12px; flex-wrap: wrap; }
.social { --fill: var(--soot-2); --edge: var(--ash); --ew: var(--u); --lip: var(--soot-0); width: 48px; height: 48px; display: inline-grid; place-items: center; color: var(--bone); }
.social:hover { --fill: var(--soot-3); --edge: var(--bone-dim); color: var(--bone-hot); }
.social svg { shape-rendering: crispEdges; }
.foot { border-top: var(--u) solid var(--soot-3); padding: 48px 0 64px; }
.footrow { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.footcol { display: flex; flex-direction: column; gap: 12px; }
.plain { text-decoration: none; }

@media (max-width: 1180px) {
  .links { display: none; }
  .nav .btn { margin-left: auto; }
}
@media (max-width: 1020px) {
  .seasons, .facts, .ages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split.flip { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .weather, .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bands { grid-template-columns: minmax(0, 1fr); }
  .thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-scrim { width: 70%; }
  .hero-dither { left: 70%; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .sec { padding: 80px 0; }
  .t6, .t4 { font-size: calc(24 * var(--u)); line-height: calc(28 * var(--u)); }
  .t3 { font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); }
  .seasons, .weather, .pair { grid-template-columns: minmax(0, 1fr); }
  .pair .span { grid-column: auto; }
  .mosaic { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 200px; }
  .mosaic .big, .mosaic .wide { grid-column: auto; grid-row: auto; }
  .hero { min-height: 0; flex-direction: column; align-items: stretch; }
  .hero-scrim { width: 100%; }
  .hero-dither { display: none; }
  .clock { position: relative; right: auto; bottom: auto; margin: 0 16px 120px; }
  .nav .btn { display: none; }
  .btn.big, .btn.secondary.big { font-size: calc(8 * var(--u)); line-height: calc(8 * var(--u)); padding: calc(6 * var(--u)) calc(8 * var(--u)) calc(7 * var(--u)); }
}