@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-grotesk.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --paper: #ffffff;
  --ink: #000000;
  --dim: #9a9a9a;
  --wash: #f0f0f0;
  --tile: #000000;
  --tile-ink: #ffffff;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pad: 14px;
  --gap: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #000; --ink: #fff; --dim: #777; --wash: #161616; --tile: #fff; --tile-ink: #000; color-scheme: dark; }
}
:root[data-theme="dark"] { --paper: #000; --ink: #fff; --dim: #777; --wash: #161616; --tile: #fff; --tile-ink: #000; color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
img, video { display: block; max-width: 100%; }

.mono { font: 400 13px/1.08 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.dim { color: var(--dim); }
.u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.dot::before { content: "●"; margin-right: .8em; font-size: 12px; }
a.dot:hover, button.dot:hover, .nav button:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Header */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  padding: 14px var(--pad) 12px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  background: var(--paper);
}
.brand { white-space: nowrap; }
.right { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.nav { display: flex; gap: 6px 14px; flex-wrap: wrap; }
.nav button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 2px; }
.tools { display: flex; gap: 14px; font-size: 20px; line-height: 1; letter-spacing: 0; }
.tools button { width: 20px; height: 20px; display: grid; place-items: center; }
.tools svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.3; fill: none; }

.lead { display: grid; grid-template-columns: 1fr 1fr; padding: 72px var(--pad) 44px; }
.lead p { grid-column: 2; margin: 0; max-width: 46ch; }

/* Board */
.board { display: grid; gap: 0 var(--gap); padding: 0 var(--pad) 80px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 34px; min-width: 0; }
.intro-wrap { margin-bottom: 34px; }

.intro {
  position: relative;
  background: var(--tile); color: var(--tile-ink);
  aspect-ratio: 1 / 1;
  padding: 12px;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; gap: 0 14px;
  overflow: hidden;
  container-type: inline-size;
}
.intro .mono { font-size: 10px; line-height: 1.25; }
.intro .t2 { margin-top: 70px; }
.intro .display {
  grid-column: 1 / -1; align-self: end;
  margin: 0 0 -.06em -.04em;
  font: 400 27cqw/.84 var(--sans); letter-spacing: -.035em; text-transform: uppercase;
}
.intro form { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.intro input {
  flex: 1; min-width: 0;
  background: transparent; color: inherit;
  border: 0; border-bottom: 1px solid currentColor; border-radius: 0;
  padding: 6px 0; outline: none;
  font: 400 10px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.intro input::placeholder { color: inherit; opacity: .55; }
.intro .actions { display: flex; gap: 16px; margin-top: 14px; flex-wrap: wrap; }

.cap { margin-top: 14px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sub { margin-top: 14px; display: flex; gap: 18px; flex-wrap: wrap; }

/* Cards */
.card { cursor: zoom-in; }
.media { position: relative; background: var(--wash); overflow: hidden; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.media .kind {
  position: absolute; right: 8px; top: 8px;
  background: var(--paper); color: var(--ink); padding: 3px 5px; font-size: 10px;
}
.textcard {
  background: var(--tile); color: var(--tile-ink);
  padding: 12px 12px 16px;
  min-height: 160px;
  display: flex; flex-direction: column; gap: 22px;
}
.textcard .mono { font-size: 10px; }
.textcard p {
  margin: 0; font: 400 19px/1.18 var(--sans); letter-spacing: -.01em;
  white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 12; -webkit-box-orient: vertical; overflow: hidden;
}
.textcard p.big { font-size: 28px; line-height: .95; text-transform: uppercase; letter-spacing: -.02em; overflow-wrap: break-word; word-break: normal; }
.card:hover .media img, .card:hover .media video { opacity: .92; }

.pending .media { display: grid; place-items: center; aspect-ratio: 4 / 5; }
.pending .media span { animation: blink 1.2s steps(2, start) infinite; }
.pending .bar-progress { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--ink); transition: width .2s; }
@keyframes blink { to { visibility: hidden; } }

.empty { grid-column: 1 / -1; padding: 40px 0; }

/* Drop overlay */
.drop {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  display: grid; place-items: center;
  background: var(--paper); opacity: 0; transition: opacity .12s;
}
.drop.on { opacity: .94; }
.drop div { font: 400 clamp(48px, 12vw, 180px)/.85 var(--sans); letter-spacing: -.03em; text-transform: uppercase; text-align: center; }
.drop small { display: block; margin-top: 24px; }

/* Toast */
.toast {
  position: fixed; left: var(--pad); bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px)); z-index: 60;
  background: var(--ink); color: var(--paper); padding: 10px 12px; max-width: calc(100vw - 28px);
  transform: translateY(calc(100% + 40px)); visibility: hidden; transition: transform .2s, visibility .2s;
}
.toast.on { transform: none; visibility: visible; }

/* Detail */
.detail {
  position: fixed; inset: 0; z-index: 40;
  background: var(--paper);
  display: grid; grid-template-rows: auto 1fr;
  overscroll-behavior: contain;
}
.detail[hidden] { display: none; }
.detail .bar { position: static; }
.detail .bar .right { justify-content: flex-end; gap: 22px; }
.detail-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--gap); padding: 10px var(--pad) var(--pad); min-height: 0; }
.stage { min-height: 0; display: grid; place-items: center; overflow: hidden; }
.stage img, .stage video { max-width: 100%; max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); width: auto; height: auto; object-fit: contain; }
.stage iframe { border: 0; background: var(--wash); max-width: 100%; max-height: calc(100dvh - 90px); }
.stage .textcard { width: min(560px, 100%); min-height: 0; }
.stage .textcard p { -webkit-line-clamp: unset; font-size: 26px; }
.panel { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 22px; padding-bottom: 20px; }
.panel dl { display: grid; grid-template-columns: 80px 1fr; gap: 6px 10px; margin: 0; }
.panel dt { color: var(--dim); }
.panel dd { margin: 0; overflow-wrap: anywhere; }
.panel .title {
  font: 400 26px/1.05 var(--sans); letter-spacing: -.015em;
  border: 0; padding: 0; background: none; color: inherit; width: 100%; resize: none; outline: none;
  field-sizing: content;
}
.panel .text { margin: 0; white-space: pre-line; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.panel textarea.note {
  width: 100%; min-height: 90px; resize: vertical;
  background: transparent; color: inherit;
  border: 1px solid var(--ink); border-radius: 0; padding: 10px; outline: none;
  font: 400 14px/1.4 var(--sans);
}
.panel .acts { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* Login: the name runs across the whole screen like a news ticker, the sign-in sits on top. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.login { overflow: hidden; }
.ticker { --rows: 6; position: fixed; inset: 0; overflow: hidden; display: flex; flex-direction: column; user-select: none; pointer-events: none; }
.ticker-row { flex: none; height: calc(100dvh / var(--rows)); font: 400 calc(100dvh / var(--rows) / .78)/.78 var(--sans); letter-spacing: -.035em; text-transform: uppercase; }
.ticker-track { display: inline-flex; white-space: pre; will-change: transform; animation: ticker 150s linear infinite; }
.ticker-row:nth-child(3n+2) .ticker-track { animation-duration: 190s; animation-delay: -61s; }
.ticker-row:nth-child(3n) .ticker-track { animation-duration: 120s; animation-delay: -23s; }
.ticker-row:nth-child(n+7) { content-visibility: auto; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (max-aspect-ratio: 4/5) { .ticker { --rows: 9; } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

.login-main { position: relative; z-index: 1; min-height: 100dvh; display: grid; place-items: center; padding: var(--pad); }
.login-card { width: min(400px, 100%); background: var(--paper); padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.login-card p { margin: 0; line-height: 1.3; }
.gbtn { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 16px 0 7px; background: var(--ink); color: var(--paper); cursor: pointer; }
.gbtn-logo { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: #fff; }
.gbtn-label { flex: 1; }
.gbtn-arrow { font-size: 18px; letter-spacing: 0; transition: transform .2s; }
.gbtn:hover .gbtn-arrow, .gbtn:focus-within .gbtn-arrow { transform: translateX(5px); }
.gbtn:focus-within { outline: 1px solid var(--ink); outline-offset: 3px; }
/* Google's 40px icon button, stretched over the whole button and made invisible. */
.gbtn-real { position: absolute; inset: 0; opacity: .001; }
.gbtn-real > * { transform-origin: 0 0; transform: scale(11, 1.5); }
.err { color: #d00; }

@media (max-width: 760px) {
  :root { --pad: 12px; --gap: 10px; }
  .bar { grid-template-columns: 1fr auto; row-gap: 12px; }
  .right { display: contents; }
  .tools { grid-column: 2; grid-row: 1; }
  .nav { grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); }
  .nav::-webkit-scrollbar { display: none; }
  .lead { grid-template-columns: 1fr; padding: 28px var(--pad) 28px; }
  .lead p { grid-column: 1; }
  .col { gap: 24px; }
  .intro { aspect-ratio: auto; min-height: 92vw; }
  .intro .mono { font-size: 10px; }
  .cap { font-size: 11px; margin-top: 8px; }
  .sub { margin-top: 8px; }
  .sub .mono, .sub.mono { font-size: 11px; }
  .textcard p { font-size: 15px; }
  .textcard p.big { font-size: 24px; }
  .detail .bar { grid-template-columns: auto 1fr; }
  .detail .bar .right { display: flex; grid-column: 2; }
  .detail-body { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow-y: auto; }
  .stage img, .stage video { max-height: 70dvh; }
  .panel { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .pending .media span { animation: none; }
  .toast, .drop { transition: none; }
}