:root {
  --bg: #eceae4;
  --paper: #f4f1ec;
  --text: #121212;
  --ink: #121212;
  --muted: #5e5c57;
  --on-ink: #f4f1ec;
  --on-ink-dim: #c8c4bc;
  --line: rgba(18, 18, 18, 0.14);
  --orange: #ff4b00;
  --black: #121212;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img, video { display: block; width: 100%; object-fit: cover; background: #000; }

.word { font-size: 14px; line-height: 20px; letter-spacing: 0.01em; }
.muted { color: var(--muted); }
.kicker { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.orange { color: var(--text); font-weight: 800; }
.display {
  font-weight: 800;
  font-size: 64px;
  line-height: 66px;
  letter-spacing: -0.045em;
  margin: 0;
}
.title {
  font-weight: 800;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.04em;
  margin: 0;
}
.bar, .text-btn {
  border: 0;
  background: transparent;
  padding: 0;
}
.bar, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 16px;
  background: var(--orange);
  color: var(--text);
  font-weight: 800;
  font-size: 17px;
  border: 0;
  border-radius: 0;
}
.bar:active, .btn:active { opacity: 0.85; }
.btn-ink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 16px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 800;
  font-size: 17px;
  border: 0;
  border-radius: 0;
}
.bar.wide { width: 100%; }
.text-btn { color: var(--text); font-size: 14px; line-height: 20px; }
.text-btn.quiet { color: var(--muted); }
.field {
  width: 100%;
  min-height: 52px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  padding: 12px 0;
  margin: 0 0 8px;
  outline: none;
}
.field::placeholder { color: var(--muted); }
textarea.field { min-height: 96px; }
.error { color: var(--text); font-weight: 700; font-size: 16px; line-height: 22px; min-height: 22px; }

.app-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
.app-rail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 28px 24px;
  border-right: 1px solid var(--line);
  position: sticky;
  top: 0;
  height: 100vh;
}
.app-rail a.on { font-weight: 800; }
.rail-name { margin-top: auto; }
.manage { width: min(760px, calc(100% - 64px)); margin: 12px auto 88px; }
.manage-group { margin-top: 28px; }
.manage-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.manage-row h2 { margin: 4px 0 0; font-size: 28px; line-height: 32px; font-weight: 800; letter-spacing: -0.04em; }
.manage-actions { display: flex; gap: 16px; flex-shrink: 0; }
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 40px;
  flex-wrap: nowrap;
}
.nav-links { display: flex; align-items: center; gap: 28px; flex: 1; margin-left: 28px; }
.nav-space { margin-left: auto; }
.nav .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; letter-spacing: -0.04em; }
.brand img { width: 28px; height: 18px; display: block; }
.nav a, .nav-sheet a { color: var(--muted); font-size: 15px; }
.nav a.on, .nav-sheet a.on, .nav-links a[href="/signin"], .nav-links a[href="/join"], .nav-links a[href="/"]:last-child { color: var(--text); }
.burger { display: none; width: 40px; height: 40px; margin-left: auto; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.burger span { display: block; width: 18px; height: 2px; background: var(--text); transition: transform 0.15s ease, opacity 0.15s ease; }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-sheet { display: none; }
.home { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.home-body {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 8px;
  padding: 12px 56px 40px;
}
.home h1 { max-width: 9ch; }
.home .lead { max-width: 36ch; margin: 24px 0 32px; }
.stage { position: relative; height: 700px; width: min(640px, 100%); margin: 28px auto 0; }
.device {
  position: absolute;
  left: 50%;
  top: 0;
  width: 292px;
  transform: translateX(-50%);
  filter: drop-shadow(0 36px 48px rgba(0, 0, 0, 0.55));
}
.bezel {
  padding: 9px;
  border-radius: 42px;
  background: linear-gradient(160deg, #4a4a4a 0%, #141414 42%, #2c2c2c 100%);
}
.screen {
  position: relative;
  border-radius: 34px;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  min-height: 560px;
  display: flex;
  flex-direction: column;
}
.island {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 86px;
  height: 22px;
  margin-left: -43px;
  border-radius: 20px;
  background: #000;
}
.screen-kicker { margin: 40px 18px 0; font-size: 13px; color: var(--muted); }
.screen-title {
  margin: 4px 18px 12px;
  font-weight: 800;
  font-size: 30px;
  line-height: 34px;
  letter-spacing: -0.04em;
}
.screen img { width: calc(100% - 36px); height: 290px; margin: 0 18px; object-fit: cover; }
.dash-screen { min-height: 560px; }
.dash-screen img { height: 168px; }
.dash-screen .screen-title { font-size: 26px; line-height: 30px; margin-bottom: 8px; }
.dash-screen .screen-kicker { margin-bottom: 2px; }
.screen-label { margin: 0 18px; font-size: 12px; line-height: 16px; color: var(--muted); }
.screen-mini { margin: 6px 0 0; font-weight: 800; font-size: 16px; line-height: 20px; letter-spacing: -0.03em; }
.screen-split { margin: 4px 18px 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.screen-split .screen-label, .screen-split .screen-caption { margin-left: 0; margin-right: 0; }
.dash-screen .screen-caption { margin-top: 8px; }
.dash-screen .screen-bar { margin-top: 12px; margin-bottom: 14px; }
.screen-caption { margin: 14px 18px 0; font-size: 15px; line-height: 22px; }
.screen-bar {
  margin: 18px 18px 18px;
  height: 48px;
  background: var(--orange);
  color: #000;
  font-weight: 800;
  text-align: center;
  line-height: 48px;
}
.chip {
  position: absolute;
  z-index: 2;
  background: var(--ink);
  color: var(--on-ink);
  border: 0;
}
.chip-note { left: 0; bottom: 36px; width: 210px; padding: 18px 18px 16px; }
.chip-body { margin: 8px 0 0; font-weight: 800; font-size: 22px; line-height: 26px; letter-spacing: -0.03em; }
.chip-done { right: 0; top: 28px; width: 196px; }
@media (min-width: 1100px) {
  .home-body {
    grid-template-columns: minmax(320px, 0.9fr) minmax(560px, 1.1fr);
    align-items: center;
    gap: 48px;
    padding: 12px 72px 56px 56px;
  }
  .stage { margin: 0 0 0 auto; height: 740px; }
}
.chip-done img { width: 100%; height: 132px; object-fit: cover; display: block; }
.chip-done div { padding: 12px 14px 14px; }
.chip-title { margin: 4px 0 0; font-weight: 800; font-size: 18px; line-height: 22px; letter-spacing: -0.03em; }
.examples { padding: 12px 56px 96px; }
.examples .title { max-width: 14ch; margin: 8px 0 8px; }
.reel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.reel::-webkit-scrollbar { display: none; }
.scroller {
  height: 3px;
  margin-top: 22px;
  background: var(--line);
  cursor: pointer;
  touch-action: none;
}
.scroller-thumb {
  height: 100%;
  background: var(--text);
}
.reel-card { width: 280px; flex: 0 0 280px; scroll-snap-align: start; }
.reel-card a { color: inherit; display: block; }
.reel-card h2 { margin: 4px 0 8px; font-size: 22px; line-height: 26px; font-weight: 800; letter-spacing: -0.03em; }
.reel-card img, .reel-card video, .reel-card .trend-blank { aspect-ratio: 4 / 5; }
.reel-actions { display: flex; gap: 18px; margin-top: 10px; align-items: center; }
.icon-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.icon-btn svg { width: 22px; height: 22px; display: block; }
.icon-btn path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.icon-btn.on path { fill: currentColor; stroke: none; }
.icon-btn span:empty { display: none; }
.trend { margin-top: 36px; }
a.proof-card { display: block; color: inherit; }
.trend-blank {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  padding: 14px;
  background: var(--ink);
  color: var(--on-ink-dim);
  font-size: 14px;
  line-height: 20px;
}
.dash-app {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 56px;
  padding: 8px 48px 88px;
  align-items: start;
}
.dash-app > div > .title { max-width: 16ch; margin: 8px 0 8px; }
.dash-app aside { position: sticky; top: 16px; }
.dash-empty, .ask-empty { color: var(--muted); max-width: 36ch; }
.today-dream {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  gap: 22px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.today-photo img, .today-photo video { aspect-ratio: 4 / 5; }
.today-blank {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  padding: 14px;
  background: var(--ink);
  color: var(--on-ink-dim);
  font-size: 14px;
  line-height: 20px;
}
.today-dream h2 { margin: 4px 0 8px; font-weight: 800; font-size: 36px; line-height: 40px; letter-spacing: -0.04em; }
.today-dream p { margin: 0 0 8px; }
.today-actions { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.done-line { margin: 8px 0; }
.start-dream { margin-top: 12px; }
.ask-block { margin-bottom: 28px; }
.ask-card { padding: 16px 0; border-top: 1px solid var(--line); }
.ask-card h3 { margin: 2px 0 6px; font-size: 20px; line-height: 24px; font-weight: 800; letter-spacing: -0.03em; }
.ask-card p { margin: 0 0 6px; }
.ask-photo img, .ask-photo video { width: 100%; aspect-ratio: 16 / 10; margin-bottom: 10px; }
.board { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 22px; }
.proof-card img, .proof-card video { aspect-ratio: 4 / 5; }
.proof-card-body { padding-top: 12px; }
.proof-card-body h2 { margin: 2px 0 8px; font-weight: 800; font-size: 26px; line-height: 30px; letter-spacing: -0.04em; }
.proof-card-body p { margin: 0 0 8px; }
.keep { margin-top: 4px; }
.mission { max-width: 720px; padding: 48px 40px 80px; }
.mission p { max-width: 42ch; }

.arrival { min-height: 100vh; display: grid; grid-template-columns: 58% 42%; }
.arrival-photo { position: relative; min-height: 100vh; background: #000; }
.arrival-photo img, .arrival-photo video { height: 100vh; }
.arrival-photo .on-photo {
  position: absolute;
  left: 28px;
  bottom: 28px;
  right: 28px;
}
.arrival-copy {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 28px 48px 48px;
}
.arrival-copy .top { display: flex; justify-content: space-between; align-items: center; }
.arrival-copy .grow { margin-top: auto; }
.arrival-copy .display { margin: 18px 0 16px; }
.arrival-copy .sub { max-width: 420px; margin-bottom: 28px; }
.arrival-plain { min-height: 100vh; display: flex; flex-direction: column; padding: 28px 8vw 64px; }
.arrival-plain .display { max-width: 16ch; margin-top: auto; }

.split { min-height: 100vh; display: grid; grid-template-columns: 58% 42%; }
.split-photo img, .split-photo video { height: 100vh; }
.split-form { padding: 28px 48px; display: flex; flex-direction: column; justify-content: center; }
.split-form h1 { font-size: 32px; line-height: 36px; font-weight: 800; letter-spacing: -0.04em; margin: 0 0 28px; max-width: 16ch; }
.account { min-height: 100vh; display: flex; flex-direction: column; padding: 28px 8vw 64px; }
.account .top { margin-bottom: 64px; }
.account form { width: min(480px, 100%); }
.account h1 { font-size: 32px; line-height: 36px; font-weight: 800; letter-spacing: -0.04em; margin: 0 0 28px; max-width: 18ch; }
.account #switch, .account #skip { margin-top: 18px; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 28px; }
.choice {
  min-height: 44px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--text);
  padding: 0 14px;
  font-weight: 700;
  border-radius: 0;
}
.choice.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.suggest { width: min(640px, 100%); }
.suggest-card { padding: 22px 0; border-top: 1px solid var(--line); }
.title-field { font-weight: 800; font-size: 28px; line-height: 34px; letter-spacing: -0.04em; }
.milestone-row { display: flex; gap: 12px; align-items: center; }
.milestone-row .field { flex: 1; }
.milestones { margin: 12px 0 0; padding-left: 18px; }
.milestones li { margin: 4px 0; }
.dream-dash { width: min(1120px, calc(100% - 64px)); margin: 12px auto 88px; }
.dream-dash .title { margin: 8px 0 6px; }
.dream-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.dream-head .meter { max-width: 280px; }
.dream-actions { display: flex; align-items: center; gap: 16px; }
.dream-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); gap: 48px; align-items: start; margin-top: 12px; }
.dream-side { position: sticky; top: 16px; }
.meter { display: none; }
.progress { margin: 8px 0 20px; font-weight: 800; font-size: 32px; line-height: 36px; letter-spacing: -0.04em; }
.profile-grid { width: min(1120px, calc(100% - 64px)); margin: 36px auto 80px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.profile-card { color: inherit; }
.profile-card h2 { margin: 10px 0 4px; font-size: 22px; line-height: 26px; font-weight: 800; letter-spacing: -0.03em; }
.profile-card img, .profile-card video, .profile-card .today-blank { aspect-ratio: 4 / 5; }
.dash-block { margin-top: 28px; }
.stone { padding: 16px 0; border-top: 1px solid var(--line); }
.stone h2 { margin: 2px 0 8px; font-size: 24px; line-height: 28px; font-weight: 800; letter-spacing: -0.03em; }
.stone img, .stone video { width: min(220px, 100%); aspect-ratio: 4 / 5; margin: 8px 0; }
.explore { padding: 8px 40px 80px; }
.explore .title { margin-bottom: 8px; }
.explore-block { margin-top: 28px; }
.explore-row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; }
.explore-card { width: 240px; flex: 0 0 240px; }
.explore-card h2 { margin: 4px 0 8px; font-size: 20px; line-height: 24px; font-weight: 800; letter-spacing: -0.03em; }
.explore-card img, .explore-card video, .explore-card .trend-blank { aspect-ratio: 4 / 5; margin-bottom: 10px; }
.proof-top { padding: 16px 0; border-top: 1px solid var(--line); }
.proof-frame { position: relative; }
.proof-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 10px 12px 12px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 800;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: -0.03em;
}
.proof-top img, .proof-top video { width: 100%; aspect-ratio: 4 / 5; margin-bottom: 8px; background: #141414; }
#file { margin: 12px 0 20px; }
.suggest select.field { margin-top: 8px; }

.page { max-width: 1200px; margin: 0 auto; padding: 0 0 96px; }
.sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0 16px;
}
.sticky.stuck { align-items: center; border-bottom: 1px solid var(--line); }
.sticky.stuck .title { font-size: 20px; line-height: 24px; }
.sticky-meta { padding-top: 28px; }
.proof { width: min(960px, 100%); margin: 0 auto 96px; }
.proof img, .proof video { aspect-ratio: 4 / 5; }
.proof .caption { margin: 32px 0 0; }
.proof .meta { margin-top: 12px; display: flex; gap: 16px; }
.column { width: min(720px, calc(100% - 40px)); margin: 0 auto; }
.feed-item { margin: 0 0 64px; }
.feed-item img, .feed-item video { aspect-ratio: 4 / 5; }
.feed-item .title { margin-top: 16px; }
.search {
  width: min(720px, calc(100% - 40px));
  margin: 48px auto 32px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  min-height: 52px;
  padding: 12px 0;
  outline: none;
}
.band { width: min(960px, 100%); margin: 32px auto 48px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.pair img, .pair video { aspect-ratio: 4 / 5; }
.comments { margin-top: 20px; }
.comments p { margin: 0 0 10px; }
.reply { display: flex; gap: 12px; margin-top: 8px; }
.reply input { flex: 1; }
.profile-name { padding: 48px 0 0; }
.profile-block { width: min(960px, 100%); margin: 48px auto; }
.danger { margin-top: 64px; }

@media (max-width: 800px) {
  .display { font-size: 40px; line-height: 44px; }
  .title { font-size: 32px; line-height: 36px; }
  .app-shell { display: block; }
  .app-rail {
    position: sticky;
    height: auto;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    z-index: 3;
  }
  .rail-name { margin-top: 0; margin-left: auto; }
  .manage, .manage-row { width: auto; display: block; }
  .manage { width: calc(100% - 40px); }
  .manage-actions { margin-top: 8px; }
  .nav { padding: 12px 16px 12px 20px; }
  .nav-links { display: none; }
  .burger { display: flex; }
  .nav-sheet { display: flex; flex-direction: column; gap: 4px; padding: 4px 20px 16px; border-bottom: 1px solid var(--line); }
  .nav-sheet[hidden] { display: none; }
  .nav-sheet .nav-space { display: none; }
  .nav-sheet a { font-size: 18px; line-height: 24px; padding: 12px 0; }
  .home-body { padding: 8px 20px 28px; }
  .home h1 { max-width: none; }
  .chip { display: none; }
  .stage { height: 620px; margin-top: 36px; }
  .examples { padding: 8px 20px 64px; }
  .reel-card { width: 78vw; flex-basis: 78vw; }
  .explore { padding: 8px 20px 64px; }
  .dash-app { grid-template-columns: 1fr; gap: 28px; padding: 8px 20px 64px; }
  .dash-app aside { position: static; }
  .today-dream { grid-template-columns: 1fr; }
  .today-actions { flex-direction: column; align-items: stretch; }
  .board { grid-template-columns: 1fr; }
  .arrival, .split { grid-template-columns: 1fr; }
  .arrival-photo, .arrival-photo img, .arrival-photo video, .split-photo img, .split-photo video { height: 70vh; min-height: 0; }
  .arrival-copy, .split-form { min-height: 0; padding: 20px 20px 32px; }
  .arrival-copy .grow { margin-top: 20px; }
  .bar { width: 100%; }
  .sticky .bar { display: none; }
  .page { padding-bottom: 120px; }
  .sticky, .sticky-meta { padding-left: 20px; padding-right: 20px; }
  .proof { width: 100%; margin-bottom: 48px; }
  .proof .caption, .proof .meta, .proof .comments { padding: 0 20px; }
  .pair { grid-template-columns: 1fr; }
  .dream-dash, .profile-grid { width: calc(100% - 40px); }
  .dream-head, .dream-grid, .profile-grid { display: block; }
  .dream-side { position: static; }
  .dream-actions { margin-top: 16px; }
  .dream-actions .bar { width: 100%; }
  .owner-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: var(--bg);
  }
}

.flag {
  display: inline-block;
  background: var(--ink);
  color: var(--orange);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 8px;
}
.mine {
  margin: 0 12px 12px;
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px;
  min-height: 72px;
}
.mine .add { color: var(--orange); font-weight: 700; }
.shot { position: relative; min-height: 420px; background: var(--ink) center/cover no-repeat; overflow: hidden; }
.shot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot.mid { min-height: 300px; }
.label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ink);
  color: var(--on-ink);
  padding: 10px 12px 12px;
}
.label .who { margin: 0; color: var(--on-ink-dim); font-size: 13px; line-height: 18px; }
.label h2 { margin: 0; color: var(--on-ink); }
.dur {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  padding: 4px 6px;
}
.under { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px 14px; }