/* Piotr Komborski: one-page site. Fonts are self-hosted (SIL OFL, see fonts/). */

@font-face {
  font-family: "Brygada 1918";
  src: url("fonts/brygada-1918-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Brygada 1918";
  src: url("fonts/brygada-1918-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Layout: two-column hero, quiet headline left, a cluster of glossy atomic-age product renderings right with one story card under it; About and Elsewhere follow as plain rows. */
:root {
  --paper: #F7F8FC;
  --surface: #FFFFFF;
  --ink: #1D1B3A;
  --ink-soft: #5A5878;
  --line: #E2E4EF;
  --accent: #3451D1;

  /* Story tones: enamel and metal finishes of the object set */ --aqua: #23827E; --cherry: #C8322D; --chrome: #5E6C82; --gold: #A97A22;
  --shadow: rgba(29, 27, 58, .16);

  --font-display: "Brygada 1918", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Hanken Grotesk", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --step--1: .875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: 1.75rem;
  --step-4: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #15142A;
    --surface: #1E1C3A;
    --ink: #EDECFA;
    --ink-soft: #A9A7CB;
    --line: #2F2D55;
    --accent: #9DB0FF;
    --aqua: #6FD3CE; --cherry: #F07A75; --chrome: #B5C0CF; --gold: #E7BE5C;
    --shadow: rgba(0, 0, 0, .45);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.page { max-width: 1180px; margin-inline: auto; }

/* Top bar */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.5rem;
}
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); color: var(--ink); text-decoration: none; }
.top nav { display: flex; gap: 1.5rem; }
.top nav a { color: var(--ink-soft); text-decoration: none; font-size: var(--step--1); font-weight: 500; }
.top nav a:hover { color: var(--ink); }

/* Hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: 1.5rem 4rem;
}
.intro { display: grid; gap: 1.5rem; max-width: 32rem; }
h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-4);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}
.lede { margin: 0; color: var(--ink-soft); font-size: var(--step-1); line-height: 1.55; max-width: 38ch; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; padding-top: .5rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 1.5rem; border-radius: 999px;
  font-weight: 600; font-size: var(--step--1); text-decoration: none;
  border: 1.5px solid var(--ink);
  transition: transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-quiet { color: var(--ink); background: transparent; border-color: var(--line); }

/* Orbit stage */
.orbit { display: grid; gap: 1rem; justify-items: center; }
.stage {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 6 / 5;
}
.obj {
  --tone: var(--aqua);
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w);
  aspect-ratio: 1;
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 18px;
  -webkit-tap-highlight-color: transparent;
}
.obj .ground, .obj .float { position: absolute; inset: 0; display: block; }
.obj svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* The selected object gets a tinted patch of floor; nothing bounces */
.plate { fill: color-mix(in oklab, var(--tone) 16%, transparent); stroke: color-mix(in oklab, var(--tone) 50%, transparent); stroke-width: 1; opacity: 0; transition: opacity .3s ease; }
.drop { fill: var(--shadow); filter: url(#f-soft); }
.float { will-change: transform; animation: drift var(--d, 9s) ease-in-out var(--delay, 0s) infinite; }
.float svg { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.obj:hover .float svg { transform: translateY(-3px); }
.obj[aria-pressed="true"] .float svg { transform: translateY(-5px); }
.obj[aria-pressed="true"] .plate { opacity: 1; }
.obj:focus-visible { outline-offset: 2px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Atomic-age finishes: enamel, chrome, bakelite and glass rendered with gradients */
.iv-t { fill: url(#pa-iv-t); }
.iv-l { fill: url(#pa-iv-l); }
.iv-r { fill: url(#pa-iv-r); }
.tq-t { fill: url(#pa-tq-t); }
.tq-l { fill: url(#pa-tq-l); }
.tq-r { fill: url(#pa-tq-r); }
.cr-t { fill: url(#pa-cr-t); }
.cr-l { fill: url(#pa-cr-l); }
.cr-r { fill: url(#pa-cr-r); }
.bk-t { fill: url(#pa-bk-t); }
.bk-l { fill: url(#pa-bk-l); }
.bk-r { fill: url(#pa-bk-r); }
.gd-t { fill: url(#pa-gd-t); }
.gd-l { fill: url(#pa-gd-l); }
.gd-r { fill: url(#pa-gd-r); }
.ch-t { fill: url(#pa-ch-t); }
.ch-l { fill: url(#pa-ch-l); }
.ch-r { fill: url(#pa-ch-r); }
.glass { fill: url(#pa-glass); }
.spec { fill: url(#pa-spec); }
.glint { fill: url(#pa-glint); }
.ch-h { fill: url(#pa-ch-h); }
.tq-h { fill: url(#pa-tq-h); }
.gold-h { fill: url(#pa-gold-h); }
.sph-tq { fill: url(#pa-sph-tq); }
.sph-cr { fill: url(#pa-sph-cr); }
.sph-cl { fill: url(#pa-sph-cl); }
.reel { fill: url(#pa-reel); }
.knob { fill: url(#pa-knob); }
.lt-r { fill: url(#pa-lt-r); }
.lt-a { fill: url(#pa-lt-a); }
.lt-g { fill: url(#pa-lt-g); }
.hilite { fill: url(#pa-hilite); }
.glint { fill: url(#pa-glint); } .glint-soft { fill: #FFFFFF; opacity: .28; }
.spec { fill: url(#pa-spec); opacity: .7; }
.hilite { fill: url(#pa-hilite); }
.land { fill: #0F5654; opacity: .38; }
.cl-base { fill: url(#pa-tq-h); opacity: .35; }
.flap { fill: url(#pa-iv-t); stroke: rgba(120, 96, 60, .18); stroke-width: .6; stroke-linejoin: round; }
.hole { fill: #2B2B32; opacity: .7; }
.gd-dot { fill: url(#pa-gd-t); }
.star { fill: url(#pa-gd-t); }
.rib-d, .rib-l, .tape, .needle, .atom, .ant, .leg, .ring, .ring-back, .orb-ring, .orb-ring-back { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rib-d { stroke: rgba(20, 20, 30, .2); stroke-width: .7; } .rib-l { stroke: rgba(255, 255, 255, .35); stroke-width: .6; }
.tape { stroke: #3B2A22; stroke-width: .8; } .needle { stroke: #7A1210; stroke-width: .8; }
.atom { stroke: url(#pa-gold-h); stroke-width: .9; }
.ant { stroke: url(#pa-ch-h); stroke-width: 1.4; } .leg { stroke: url(#pa-ch-h); stroke-width: 2.4; }
.ring { stroke: url(#pa-gold-h); stroke-width: 3; } .ring-back { stroke: #A97A22; stroke-width: 3; opacity: .7; }
.orb-ring { stroke: url(#pa-gold-h); stroke-width: 1.1; } .orb-ring-back { stroke: #C79B42; stroke-width: 1.1; opacity: .5; }

/* Story card */
.hint { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.story {
  width: 100%; max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.25rem 1.5rem 1.4rem;
  display: grid;
  box-shadow: 0 18px 40px -28px var(--shadow);
}
/* Every story sits in the same cell, so the card is always as tall as the longest one and nothing around it moves */
.story-panel { --tone: var(--cherry); grid-area: 1 / 1; display: grid; gap: .35rem; align-content: start; }
.story-panel:not(.is-active) { visibility: hidden; }
.story-head { display: flex; align-items: center; gap: .6rem; }
.swatch { width: .75rem; height: .75rem; border-radius: 50%; background: var(--tone); flex: none; }
.story-when { margin: 0; color: var(--ink-soft); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.story-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); line-height: 1.15; }
.story-text { margin: 0; color: var(--ink-soft); max-width: 52ch; }
.story-link { justify-self: start; font-weight: 600; font-size: var(--step--1); padding-top: .25rem; }

/* Lower sections */
.rows { display: grid; gap: 3.5rem; padding-block: 3.5rem 2rem; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); }
.row h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); line-height: 1.2; }
.prose { display: grid; gap: 1rem; max-width: 62ch; }
.prose p { margin: 0; }
.links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; }
.links li { display: grid; gap: .1rem; }
.links .label { color: var(--ink-soft); font-size: var(--step--1); }
.links a { font-weight: 600; font-size: var(--step-1); text-decoration: none; color: var(--ink); }
.links a:hover { color: var(--accent); }

.foot { padding-block: 2.5rem 3rem; color: var(--ink-soft); font-size: var(--step--1); }

/* Not-found page */
.lost {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: 3rem 5rem;
}
.lost-art { position: relative; width: min(100%, 340px); aspect-ratio: 1; justify-self: center; }
.lost-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lost-art .plate { opacity: 0; }

/* Phone: objects settle into a 4 by 2 tray under the headline */
@media (max-width: 760px) {
  .hero, .row { grid-template-columns: minmax(0, 1fr); }
  .hero { gap: 2.5rem; padding-block: .5rem 3rem; }
  .stage {
    aspect-ratio: auto;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem .25rem;
  }
  .obj { position: relative; left: auto; top: auto; width: 100%; }
  .links { grid-template-columns: minmax(0, 1fr); }
  .lost { grid-template-columns: minmax(0, 1fr); padding-block: 1rem 3rem; }
  .lost-art { width: min(100%, 220px); order: -1; }
  .top nav { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .float { animation: none; }
  .float svg, .plate, .btn { transition: none; }
}