/* Type: the same faces as BuldreAppen, self-hosted (SIL OFL, see
   /fonts) so the maker and its apps read as one family and no visitor's
   IP address goes to Google Fonts. Barlow Semi Condensed for headings
   and the boulder tiles, Atkinson Hyperlegible for text. */
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap;
  src: url(/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap;
  src: url(/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap;
  src: url(/fonts/barlow-semi-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap;
  src: url(/fonts/barlow-semi-condensed-latin-700-normal.woff2) format("woff2"); }

/* Colour: BuldreAppen's dark theme, so its screenshots sit on the page
   without a seam. Amber is the summit -- the logo's top pixel -- and is
   kept for the one tile and the main button. */
:root {
  --bg: #0A1622;
  --surface: #10202F;
  --line: #26405A;
  --ink: #E6EDF3;
  --muted: #96A8B9;
  --link: #8DBDF0;
  --summit: #E7B45C;
  --summit-ink: #0A1622;
  --topped: #1F8A36;
  --live: #4CB866;
  --att: #2366BE;
  --att-2: #3479D2;
  --focus: #FFC400;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --wrap: 1120px;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: clamp(32px, 4.4vw, 48px); margin-bottom: 20px; }
h3 { font-size: clamp(26px, 3vw, 34px); }
p { margin: 0 0 16px; }
.lead { font-size: 19px; color: var(--muted); max-width: 34em; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: .01em;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--summit); color: var(--summit-ink); }
.btn-primary:hover { background: #F0C477; color: var(--summit-ink); }
.btn-quiet { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-quiet:hover { border-color: var(--muted); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Header ── */
.site-head { padding: 22px 0; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo svg { width: 40px; height: auto; }
/* The wordmark is the logo's own lettering (Georgia bold, as in the SVG
   BuldreAppen's footer uses), not the page's type. */
.wordmark { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 25px; letter-spacing: -0.03em; color: #C9DBEE; }
.wordmark span { color: var(--summit); }
.site-nav { display: flex; gap: 22px; }
.site-nav a { color: var(--muted); text-decoration: none; font-size: 16px; padding: 6px 0; }
.site-nav a:hover { color: var(--ink); }

/* ── Hero ── */
.hero { padding: clamp(24px, 6vw, 72px) 0 clamp(48px, 8vw, 96px); }
.hero .wrap { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: 1.1fr 1fr; gap: 56px; } }
.hero h1 { font-size: clamp(44px, 6vw, 76px); line-height: .95; letter-spacing: -0.02em; max-width: 9em; }
.hero .lead { margin: 24px 0 32px; }

/* The mountain: the logo's pyramid of squares, drawn as BuldreAppen's
   boulder tiles and numbered from the foot up, so the summit is the last
   boulder. Green = topped, striped = attempted, outline = untried, as in
   the app. Each tile spans two of 14 half-columns, which gives the
   half-tile offset between rows. */
.mountain {
  container-type: inline-size;
  display: grid; grid-template-columns: repeat(14, 1fr); gap: 1.6cqi;
  width: 100%; max-width: 540px; margin: 0 auto; padding-top: 4px;
}
.t {
  grid-column: var(--c) / span 2; grid-row: var(--r);
  position: relative; aspect-ratio: 1; border-radius: 2.2cqi;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 4.4cqi; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--muted); border: 1.5px solid var(--line); background: var(--surface);
  animation: stack .42s cubic-bezier(.2, .8, .3, 1.2) both;
  animation-delay: calc(250ms + var(--i) * 55ms);
}
.t small { position: absolute; top: 1.1cqi; right: 1.4cqi; font-family: var(--font-body); font-weight: 700; font-size: 2.1cqi; }
.t.topped { background: var(--topped); border-color: var(--topped); color: #fff; }
.t.att { background: repeating-linear-gradient(135deg, var(--att) 0 6px, var(--att-2) 6px 12px); border-color: var(--att); color: #fff; }
.t.topped::before, .t.summit::before { content: '✓'; position: absolute; top: 1.1cqi; left: 1.4cqi; font-family: var(--font-body); font-size: 2.3cqi; }
.t.summit { background: var(--summit); border-color: var(--summit); color: var(--summit-ink); animation-duration: .6s; }
@keyframes stack { from { opacity: 0; transform: translateY(-14px) scale(.85); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .t { animation: none; } }

/* ── Sections ── */
.section { padding: clamp(56px, 8vw, 96px) 0; border-top: 1px solid var(--line); }

/* ── On now (filled from the apps' public data; hidden when empty) ── */
.now { padding: 0 0 clamp(48px, 7vw, 80px); }
.now h2 { font-size: clamp(26px, 3vw, 32px); margin-bottom: 8px; }
.events { list-style: none; margin: 0 0 16px; padding: 0; }
.event {
  display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) { .event { grid-template-columns: 1fr auto; gap: 24px; } }
.event-title { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.15; }
.event-meta { color: var(--muted); font-size: 15px; margin-top: 4px; }
.event-status { font-weight: 700; color: var(--ink); }
.event-status.is-live::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--live); margin-right: 7px; vertical-align: 1px; }
.event .btn { min-height: 44px; font-size: 17px; padding: 0 18px; }

/* ── Apps ── */
.app { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 900px) { .app { grid-template-columns: minmax(240px, 300px) 1fr; gap: 64px; } }
.app + .app { margin-top: clamp(56px, 8vw, 88px); padding-top: clamp(56px, 8vw, 88px); border-top: 1px solid var(--line); }
.app-name { margin-bottom: 6px; }
.app-sport { color: var(--muted); margin-bottom: 20px; }
.facts { list-style: none; margin: 0 0 28px; padding: 0; max-width: 36em; }
.facts li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts li:first-child { border-top: 1px solid var(--line); }
.facts strong { font-family: var(--font-display); font-weight: 600; font-size: 20px; display: block; line-height: 1.2; margin-bottom: 2px; }
.facts span { color: var(--muted); font-size: 16px; }

figure { margin: 0; }
figcaption { color: var(--muted); font-size: 14px; margin-top: 10px; }
.phone img { border-radius: 26px; border: 1.5px solid var(--line); width: 100%; max-width: 300px; }
@media (max-width: 899px) { .phone { order: 2; } .phone img { margin: 0 auto; } .phone figcaption { text-align: center; } }
.screen { margin-top: 36px; }
.screen img { border-radius: 10px; border: 1.5px solid var(--line); }
.more { color: var(--muted); margin-top: clamp(40px, 6vw, 64px); }

/* Kompiskamp has no screenshot yet: name, what it does, a link. */
.app.small { display: block; max-width: 40em; }

/* ── Sponsor, about, contact ── */
.two { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 900px) { .two { grid-template-columns: 1fr 1fr; gap: 64px; } }
.plain-list { margin: 0 0 28px; padding-left: 1.2em; color: var(--muted); }
.plain-list li { margin-bottom: 6px; }
.plain-list li::marker { color: var(--summit); }

.facts-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; margin: 24px 0 0; }
.facts-dl dt { color: var(--muted); }
.facts-dl dd { margin: 0; }

form { display: grid; gap: 18px; }
label { display: grid; gap: 6px; font-weight: 700; font-size: 15px; }
label .opt { font-weight: 400; color: var(--muted); }
input, textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-weight: 400;
}
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--surface); }
textarea { min-height: 140px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form .btn { justify-self: start; }

/* ── Footer ── */
.site-foot { border-top: 1px solid var(--line); padding: 32px 0 40px; color: var(--muted); font-size: 15px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: center; }
.site-foot .logo svg { width: 28px; }
.site-foot .wordmark { font-size: 19px; }
.site-foot .wrap > :first-child { margin-right: auto; }

/* ── Header: the page you're on ── */
.site-nav a[aria-current="page"] { color: var(--ink); }

/* ── Front page: one card per app, leading into the hub ── */
.teasers { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: clamp(32px, 5vw, 48px); }
@media (min-width: 760px) { .teasers { grid-template-columns: repeat(3, 1fr); } }
.teaser {
  display: flex; flex-direction: column; gap: 10px; padding: 22px;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface);
  text-decoration: none; color: var(--ink);
}
.teaser:hover { border-color: var(--muted); color: var(--ink); }
.teaser-mark { display: inline-flex; gap: 5px; height: 18px; margin-bottom: 4px; }
.teaser-mark i { width: 18px; border-radius: 4px; }
.teaser h3 { font-size: 30px; }
.teaser .app-sport { margin: 0; }
.teaser p { color: var(--muted); font-size: 16px; margin: 0; flex: 1; }
.teaser .go { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--link); }
.teaser:hover .go { color: var(--ink); }

/* Each app's mark: three of its own result tiles. BuldreAppen: topped,
   attempted, untried. FrisbeegolfAppen: birdie (circle), par, bogey
   (square), as on a scorecard. Kompiskamp: a shared scoreboard. */
.mark-buldre i:nth-child(1) { background: var(--topped); }
.mark-buldre i:nth-child(2) { background: repeating-linear-gradient(135deg, var(--att) 0 4px, var(--att-2) 4px 8px); }
.mark-buldre i:nth-child(3) { box-shadow: inset 0 0 0 1.5px var(--line); }
.mark-golf i:nth-child(1) { background: var(--topped); border-radius: 50%; }
.mark-golf i:nth-child(2) { box-shadow: inset 0 0 0 1.5px var(--muted); }
.mark-golf i:nth-child(3) { background: var(--summit); border-radius: 0; }
.mark-kompis i { background: var(--line); }
.mark-kompis i:nth-child(2) { background: var(--link); }

/* ── The hub (/appar/) ── */
.hub-head { padding: clamp(16px, 4vw, 48px) 0 clamp(24px, 4vw, 40px); }
.hub-head h1 { font-size: clamp(44px, 6vw, 72px); line-height: .95; letter-spacing: -0.02em; }
.hub-head .lead { margin: 18px 0 0; }

/* The two choices: who you are, and which app. Sticky on a wide screen, so
   they stay at hand while scrolling through the apps; on a phone they'd take
   a third of the screen. */
.picker {
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); padding: 14px 0;
}
@media (min-width: 760px) { .picker { position: sticky; top: 0; } }
.picker .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.pick legend { float: left; margin-right: 6px; color: var(--muted); font-size: 15px; padding: 0; }
.seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button, .chip {
  font: inherit; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .01em;
  min-height: 42px; padding: 0 16px; border-radius: 9px; cursor: pointer;
  color: var(--muted); background: transparent; border: 0;
}
.seg button[aria-pressed="true"] { background: var(--summit); color: var(--summit-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1.5px solid var(--line); }
.chip[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: var(--surface); }
.seg button:hover, .chip:hover { color: var(--ink); }

/* Without JavaScript everything shows; with it, the choices hide the rest. */
.is-hidden { display: none !important; }
.role-note { color: var(--muted); font-size: 15px; margin: 0 0 18px; }
.app-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 8px; }
.for-role { margin-top: 8px; }
.for-role h4 { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 0 0 6px; color: var(--muted); letter-spacing: .02em; text-transform: uppercase; }
.hub-empty { color: var(--muted); padding: 24px 0; }

/* What each app suits, side by side. */
.compare-wrap { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 16px; }
.compare th, .compare td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-family: var(--font-display); font-size: 20px; }
.compare tbody th { color: var(--muted); font-weight: 400; width: 22%; }

/* On the hub, "Pågår no" is a list above the apps, not a section of its own. */
.hub-now { padding: clamp(32px, 5vw, 48px) 0; }
.hub-now h2 { font-size: clamp(26px, 3vw, 32px); margin-bottom: 8px; }
.hub-now .hub-empty { padding: 4px 0 0; margin: 0; }