/* Guest-session site. Structure and colour come from na/tokens.css and na/spice.css. */

* { box-sizing: border-box; }
html { scroll-snap-type: y proximity; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--na-color-bg);
  color: var(--na-color-ink);
  font: 400 var(--na-text-lg)/var(--na-line-height-text) var(--na-font-text);
}
a { color: var(--na-color-accent); text-underline-offset: 0.2em; }
a:focus-visible { outline: 2px solid var(--na-color-accent); outline-offset: 3px; }

.slide {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: var(--na-space-lg) var(--na-space-md);
  scroll-snap-align: start;
  border-bottom: var(--na-border-width) solid var(--na-color-border);
}
.inner { width: 100%; max-width: 68rem; margin-inline: auto; }

h1, h2 {
  margin: 0 0 var(--na-space-md);
  font: 400 clamp(2rem, 1.3rem + 2.8vw, 3.6rem)/1.05 var(--na-font-display);
  color: var(--na-color-heading);
  max-width: 24ch;
}
h1 { font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5rem); max-width: 16ch; }
p { margin: 0 0 var(--na-space-sm); max-width: 44rem; }
.lead { font-size: var(--na-text-xl); line-height: 1.3; color: var(--na-color-ink-muted); max-width: 34rem; }
.muted { color: var(--na-color-ink-muted); }
.small { font: 400 var(--na-text-sm)/1.4 var(--na-font-ui); color: var(--na-color-ink-muted); }
.mono { font-family: var(--na-font-mono); }

/* Facts list: the brand slash is the bullet. */
ul.facts { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
ul.facts li { position: relative; padding-left: 1.7em; margin-bottom: var(--na-space-xs); }
ul.facts li::before {
  content: "";
  position: absolute; left: 0.2em; top: 0.3em;
  width: 0.42em; height: 1em;
  background: var(--na-color-accent);
  transform: skewX(calc(var(--na-slash-angle) * -1));
}
ul.facts strong { font-weight: 600; }

/* Cover */
.cover .inner { display: grid; grid-template-columns: 1fr minmax(15rem, 22rem); gap: var(--na-space-lg); align-items: center; }
.cover .who { font: 600 var(--na-text-base)/1.4 var(--na-font-ui); margin-top: var(--na-space-md); }
.cover .when { font: 400 var(--na-text-sm)/1.4 var(--na-font-mono); color: var(--na-color-ink-muted); margin: 0; }
.portrait { position: relative; isolation: isolate; margin: 0 var(--na-hatch-offset) var(--na-hatch-offset) 0; }
.portrait .na-hatch { position: absolute; inset: 0; z-index: -1; transform: translate(var(--na-hatch-offset), var(--na-hatch-offset)); border: var(--na-border-width-strong) solid var(--na-color-ink); }
.portrait img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 8%;
  background: var(--na-color-bg-raised);
  border: var(--na-border-width-strong) solid var(--na-color-ink);
}

/* Topic map */
.map { border-top: var(--na-border-width-strong) solid var(--na-color-ink); }
.map > div {
  display: grid; grid-template-columns: 1fr 1.1fr 2fr; gap: var(--na-space-sm); align-items: baseline;
  padding: var(--na-space-xs) 0; border-bottom: var(--na-border-width) solid var(--na-color-border);
}
.map .topic { font: 400 var(--na-text-xl)/1.1 var(--na-font-display); color: var(--na-color-heading); }
.map .piece { font: 600 var(--na-text-sm)/1.3 var(--na-font-mono); color: var(--na-color-accent); }
.map .what { font-size: var(--na-text-base); }

/* Timeline (SVG on wide screens, list on narrow) */
.tl { display: block; width: 100%; height: auto; overflow: visible; }
.tl text { font: 400 16px var(--na-font-ui); fill: var(--na-color-ink); }
.tl .tl-guides line { stroke: var(--na-color-ink-muted); stroke-width: 1; stroke-dasharray: 3 4; }
.tl .tl-marks text { fill: var(--na-color-ink-muted); }
.tl .tl-marks .yr { font: 700 17px var(--na-font-mono); fill: var(--na-color-accent); }
.tl .tl-lanes text { font: 500 15px var(--na-font-mono); fill: var(--na-color-ink-muted); }
.tl .b rect { fill: var(--na-color-bg); stroke: var(--na-color-ink); stroke-width: 2; }
.tl .b text { text-anchor: middle; font-weight: 600; }
.tl .b.soft rect { fill: var(--na-color-bg-raised); }
.tl .b.ink rect { fill: var(--na-color-ink); }
.tl .b.ink text { fill: var(--na-color-bg); }
.tl .b.accent rect { fill: var(--na-color-accent); stroke: var(--na-color-accent); }
.tl .b.accent text { fill: var(--na-color-accent-ink); }
@media (min-width: 52.01rem) { ol.timeline { display: none; } }
@media (max-width: 52rem) { .tl { display: none; } }

ol.timeline { list-style: none; margin: 0; padding: 0; columns: 2 22rem; column-gap: var(--na-space-lg); border-top: var(--na-border-width-strong) solid var(--na-color-ink); }
ol.timeline li {
  break-inside: avoid; display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--na-space-xs);
  padding: var(--na-space-xs) 0; border-bottom: var(--na-border-width) solid var(--na-color-border);
  font-size: var(--na-text-base);
}
ol.timeline .yr { font: 600 var(--na-text-sm)/1.7 var(--na-font-mono); color: var(--na-color-accent); }

/* Pivots */
.pivots { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--na-space-md); }
.pivots article { border-top: var(--na-border-width-strong) solid var(--na-color-ink); padding-top: var(--na-space-xs); }
.pivots .yr { font: 600 var(--na-text-sm)/1.4 var(--na-font-mono); color: var(--na-color-accent); margin: 0; }
.pivots h3 { margin: 0.2rem 0 var(--na-space-xs); font: 400 var(--na-text-xl)/1.1 var(--na-font-display); color: var(--na-color-heading); }
.pivots p { font-size: var(--na-text-base); }

/* Two columns of lists */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--na-space-lg); }
.cols h3 { margin: 0 0 var(--na-space-xs); font: 400 var(--na-text-xl)/1.1 var(--na-font-display); color: var(--na-color-heading); }
.cols ul.facts { font-size: var(--na-text-base); }

/* Demo flow */
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--na-space-sm); counter-reset: step; margin: 0 0 var(--na-space-md); padding: 0; list-style: none; }
.flow li { border: var(--na-border-width-strong) solid var(--na-color-ink); padding: var(--na-space-xs) var(--na-space-sm); font-size: var(--na-text-base); }
.flow li::before { counter-increment: step; content: counter(step); display: block; font: 600 var(--na-text-sm) var(--na-font-mono); color: var(--na-color-accent); }
.flow strong { display: block; font: 400 var(--na-text-lg)/1.15 var(--na-font-display); color: var(--na-color-heading); }

/* App screenshot: warm ground so the white UI stands out */
.shot { background: color-mix(in srgb, var(--na-color-plate-accent) 55%, var(--na-color-bg)); }
.shot .inner { max-width: 82rem; display: grid; grid-template-columns: minmax(15rem, 19rem) 1fr; gap: var(--na-space-lg); align-items: center; }
.shot h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }
.shot ul.facts { font-size: var(--na-text-base); }
.shot .na-window { margin: 0 var(--na-hatch-offset) var(--na-hatch-offset) 0; }
.shot .na-window img { display: block; width: 100%; height: auto; }
.shot .na-window__foot { padding-top: var(--na-space-xs); border-top: var(--na-border-width-strong) solid var(--na-color-ink); }
@media (max-width: 52rem) { .shot .inner { grid-template-columns: 1fr; } }

/* Advice window */
.advice { max-width: 52rem; margin-right: var(--na-hatch-offset); margin-bottom: var(--na-hatch-offset); }
.advice ol { margin: 0; padding-left: 1.4em; }
.advice li { margin-bottom: 0.6rem; padding-left: 0.3em; }
.advice li::marker { font: 600 0.9em var(--na-font-mono); color: var(--na-color-accent); }
.advice li strong { font-weight: 600; }
.advice .na-window__body > * + * { margin-top: 0; }

/* Links + close */
ul.links { list-style: none; margin: 0 0 var(--na-space-md); padding: 0; max-width: 46rem; }
ul.links li { padding: var(--na-space-xs) 0; border-bottom: var(--na-border-width) solid var(--na-color-border); font-size: var(--na-text-base); }
ul.links a { font-weight: 600; }
ul.social { list-style: none; display: flex; flex-wrap: wrap; gap: var(--na-space-xs); margin: 0 0 var(--na-space-md); padding: 0; }
ul.social a {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.9rem;
  border: var(--na-border-width-strong) solid var(--na-color-ink); color: var(--na-color-ink);
  font: 600 var(--na-text-base)/1.2 var(--na-font-ui); text-decoration: none;
}
ul.social a:hover { background: var(--na-color-accent); border-color: var(--na-color-accent); color: var(--na-color-accent-ink); }
ul.social svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }
.close .na-cut { --na-cut-height: 14rem; font-size: var(--na-text-lg); }
.close .na-cut span { font-family: var(--na-font-display); font-size: var(--na-text-xl); }

/* Slide counter */
.counter {
  position: fixed; right: var(--na-space-sm); bottom: var(--na-space-xs);
  font: 500 var(--na-text-sm) var(--na-font-mono); color: var(--na-color-ink-muted);
  background: var(--na-color-bg); padding: 0.1rem 0.4rem; z-index: 10;
}

@media (max-width: 52rem) {
  .cover .inner { grid-template-columns: 1fr; }
  .portrait { max-width: 18rem; }
  .map > div { grid-template-columns: 1fr; gap: 0.15rem; }
  .slide { min-height: auto; padding: var(--na-space-lg) var(--na-space-sm); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  html { scroll-snap-type: none; }
  .slide { min-height: auto; break-after: page; border: 0; }
  .counter { display: none; }
}