/*
  iseeido website.

  Colours are the Signal palette, approved by Nader on 3 October 2026 for the
  app and the website. Its source of truth is
  ../smart-navigation-website/design/signal-palette.md: change a colour there
  first, then here and in the app. Signal is dark only, like the app.

  Type is Atkinson Hyperlegible Next and Atkinson Hyperlegible Mono, designed
  by the Braille Institute for low-vision readers. Self-hosted under the SIL
  Open Font License (assets/fonts/OFL.txt). No request leaves this site.

  Motion is limited to three things, all switched off by
  prefers-reduced-motion: the hero route draws itself once, the journey line
  fills as it scrolls into view, and buttons give under a press.
*/

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("/assets/fonts/atkinson-hyperlegible-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Signal tokens (names follow signal-palette.md) */
  --bg: #111110;            /* background: graphite */
  --surface: #1C1B19;       /* surface: cards, sheets */
  --raised: #272522;        /* surfaceRaised */
  --hairline: #66625A;      /* hairline: edges and dividers */
  --text: #F5F3EE;          /* textPrimary */
  --text-2: #ADA89E;        /* textSecondary, never dimmer */
  --accent: #FFD23F;        /* signal yellow: the way, main buttons */
  --accent-hover: #FFDD6E;  /* hover only; ink on it stays above 13:1 */
  --accent-dim: #5A4A14;
  --on-accent: #111110;     /* onAccent: ink on yellow, never white */
  --street: #9AA3FF;        /* periwinkle: the street */
  --street-dim: #3B4170;

  --font: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* One radius for every panel, tile and button. Nothing is pill-shaped. */
  --radius: 14px;
  --wrap: 75rem;
  --gutter: clamp(1rem, 0.4rem + 3vw, 2.5rem);
  --section: clamp(4rem, 2.6rem + 4vw, 6.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* z-index scale: only the skip link sits above the page. */
  --z-skip: 100;
}

/* The palette's own Increase Contrast pair. */
@media (prefers-contrast: more) {
  :root {
    --hairline: #8A857C;
    --text-2: #C9C4BA;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1;
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

h3 {
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

p,
ul,
ol,
figure {
  margin: 0;
}

p,
li {
  text-wrap: pretty;
}

img,
svg {
  display: block;
  max-width: 100%;
}

strong {
  font-weight: 700;
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-color: var(--accent);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

[id] {
  scroll-margin-top: 1.5rem;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  top: -10rem;
  left: 1rem;
  z-index: var(--z-skip);
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
}

.skip:focus {
  top: 1rem;
}

/* Placeholder that must be resolved before publishing. */
.todo {
  padding: 0 0.3em;
  border-radius: 4px;
  background: var(--accent-dim);
  color: var(--text);
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--raised);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 1.5rem;
  row-gap: 0.25rem;
  min-height: 4.5rem;
  padding-block: 0.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  color: var(--text);
  font-size: 1.4375rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.brand-mark {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
}

.site-nav ul,
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav ul {
  gap: 0.25rem;
  margin-right: -0.75rem;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.75rem;
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.site-nav a:hover {
  background: var(--surface);
}

.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.45em;
}

@media (max-width: 559px) {
  .site-nav {
    width: 100%;
  }

  .site-nav ul {
    margin: 0 0 0 -0.75rem;
  }
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.375rem;
  border-radius: var(--radius);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.2s var(--ease-out),
    box-shadow 0.2s var(--ease-out),
    transform 0.2s var(--ease-out);
}

.button svg {
  flex: none;
  width: 1.2em;
  height: 1.2em;
}

.button-primary {
  background: var(--accent);
  color: var(--on-accent);
}

.button-primary:hover {
  background: var(--accent-hover);
}

@media (prefers-reduced-motion: no-preference) {
  .button:active {
    transform: translateY(1px) scale(0.985);
  }
}

/* ---------- Hero ---------- */

.hero {
  padding-top: clamp(2.75rem, 1.5rem + 4vw, 5.5rem);
}

.eyebrow {
  margin-bottom: 1.5rem;
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 500;
}

.hero h1 {
  max-width: 13.5em;
  font-size: clamp(2.6rem, 1.2rem + 4.6vw, 4.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.hero .lead {
  max-width: 33em;
  margin-top: 1.5rem;
  color: var(--text-2);
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
  line-height: 1.5;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.hero-figure {
  margin-top: clamp(2.75rem, 1.5rem + 3.5vw, 4.75rem);
}

.journey-map {
  width: 100%;
  height: auto;
}

.journey-map--portrait {
  display: none;
}

@media (max-width: 719px) {
  .journey-map--landscape {
    display: none;
  }

  .journey-map--portrait {
    display: block;
  }
}

/* Labels drawn inside the maps, with a graphite halo like map labels. */
.map-label {
  fill: var(--text);
  font-family: var(--font);
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 6px;
  stroke-linejoin: round;
}

.map-legend {
  display: grid;
  gap: 0.5rem 2rem;
  margin-top: 1rem;
  color: var(--text-2);
  font-size: 1rem;
}

@media (min-width: 720px) {
  .map-legend {
    grid-template-columns: 1fr 1fr;
  }

  .map-legend span:last-child {
    padding-left: 4%;
  }
}

.map-legend span {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.map-legend span::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 0.3125rem;
  border-radius: 3px;
}

.legend-street::before {
  background: var(--street);
}

.legend-inside::before {
  background: var(--accent);
}

/* The route draws itself once: street first, then the door, then inside. */
@media (prefers-reduced-motion: no-preference) {
  .draw {
    stroke-dasharray: 1 2;
    stroke-dashoffset: 1.01;
    animation: route-draw var(--dur, 1.4s) cubic-bezier(0.45, 0, 0.2, 1) var(--delay, 0.3s) forwards;
  }

  .appear {
    opacity: 0;
    animation: route-appear 0.5s var(--ease-out) var(--delay, 0s) forwards;
  }

  .pop {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: route-pop 0.5s var(--ease-out) var(--delay, 0s) forwards;
  }
}

@keyframes route-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes route-appear {
  to {
    opacity: 1;
  }
}

@keyframes route-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- Sections ---------- */

.section {
  padding-block: var(--section);
}

.section h2 {
  max-width: 17em;
  font-size: clamp(2.05rem, 1.3rem + 2.6vw, 3.4rem);
  font-weight: 780;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.section-lead {
  max-width: 34em;
  margin-top: 1.25rem;
  color: var(--text-2);
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
}

/* ---------- One journey: a line diagram, like a transit map ---------- */

.journey-layout {
  display: grid;
  gap: clamp(2.75rem, 2rem + 3vw, 5rem);
}

@media (min-width: 1024px) {
  .journey-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
  }

  .journey-intro {
    position: sticky;
    top: 2.5rem;
  }
}

.stops {
  --stop-gap: clamp(3rem, 2.4rem + 2vw, 4.5rem);
  display: grid;
  gap: var(--stop-gap);
  list-style: none;
  padding: 0;
}

.stop {
  position: relative;
  padding-left: 5rem;
}

.stop p {
  max-width: 32em;
  margin-top: 0.6rem;
  color: var(--text-2);
}

.stop-marker {
  position: absolute;
  top: -0.35rem;
  left: 0;
  width: 3.25rem;
  height: 3.25rem;
}

.stop-line {
  position: absolute;
  top: 3.6rem;
  bottom: calc(-1 * var(--stop-gap) + 0.5rem);
  left: calc(1.625rem - 3px);
  width: 6px;
  border-radius: 3px;
  transform-origin: top;
}

.stop--street h3 {
  color: var(--street);
}

.stop--street .stop-line {
  background: var(--street);
}

.stop--door .stop-line {
  background: var(--accent);
}

.stop--inside h3 {
  color: var(--accent);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stop-line {
      animation: line-fill linear both;
      animation-timeline: view();
      animation-range: entry 60% cover 55%;
    }
  }
}

@keyframes line-fill {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

/* ---------- Your places ---------- */

.places-layout {
  display: grid;
  gap: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .places-layout {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .places-figure {
    order: -1;
  }
}

.align-map {
  width: 100%;
  height: auto;
}

.how-list {
  display: grid;
  gap: 2rem 2.5rem;
  margin-top: 2.5rem;
  list-style: none;
  padding: 0;
}

@media (min-width: 720px) {
  .how-list {
    grid-template-columns: 1fr 1fr;
  }
}

.how-list li {
  padding-top: 1rem;
  border-top: 2px solid var(--hairline);
}

.how-list p {
  margin-top: 0.5rem;
  color: var(--text-2);
}

/* ---------- Inside: tiles of different sizes ---------- */

.bento {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2.25rem, 1.5rem + 2vw, 3.5rem);
  list-style: none;
  padding: 0;
}

@media (min-width: 720px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile--spoken {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .tile--spoken {
    grid-column: span 7;
    grid-row: span 2;
  }

  .tile--stairs,
  .tile--feel {
    grid-column: span 5;
  }

  .tile--talk,
  .tile--find {
    grid-column: span 6;
  }
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 12.5rem;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  border-radius: var(--radius);
  background: var(--surface);
}

.tile p {
  max-width: 30em;
  color: var(--text-2);
}

.tile-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: auto;
  padding-bottom: 1.25rem;
  box-sizing: content-box;
}

.tile--spoken {
  background: var(--raised);
}

.tile--spoken .tile-icon {
  margin-bottom: 0;
}

.tile--spoken .tile-quote {
  margin-top: auto;
  padding-top: 2rem;
  color: var(--text);
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.25rem);
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.tile--find {
  background: var(--accent);
  color: var(--on-accent);
}

.tile--find p {
  color: var(--on-accent);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bento .tile {
      animation: tile-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}

@keyframes tile-in {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Siri: the sentence is the design ---------- */

.siri {
  border-block: 1px solid var(--raised);
}

/* Two classes, so it outranks ".section h2". */
.section .siri-phrase {
  max-width: 14em;
  font-size: clamp(2.3rem, 0.9rem + 5.4vw, 5.75rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.035em;
}

.siri-phrase .dest {
  color: var(--accent);
}

.siri-body {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  .siri-body {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
    gap: 3rem;
  }
}

.siri-body > p {
  max-width: 30em;
  color: var(--text-2);
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
}

.phrases-label {
  margin-bottom: 0.75rem;
  color: var(--text-2);
}

.phrases {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
}

.phrases li {
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-family: var(--mono);
  font-size: 1rem;
}

/* ---------- Privacy ---------- */

.privacy-grid {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2.25rem, 1.5rem + 2vw, 3rem);
}

@media (min-width: 900px) {
  .privacy-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.privacy-col {
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  border-radius: var(--radius);
}

.privacy-col--kept {
  background: var(--surface);
}

/* The only data that leaves is for the street leg, so it wears the street's colour. */
.privacy-col--sent {
  box-shadow: inset 0 0 0 2px var(--street-dim);
}

.privacy-col h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.privacy-col h3 svg {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
}

.privacy-col--sent h3 svg {
  color: var(--street);
}

.privacy-col ul {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.25rem;
  padding-left: 1.25rem;
  color: var(--text-2);
}

.privacy-col li::marker {
  color: var(--hairline);
}

.privacy-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  margin-top: 2rem;
  font-size: 1.1875rem;
}

.privacy-foot strong {
  font-weight: 750;
}

/* ---------- What you need ---------- */

.needs {
  padding-top: 0;
}

.needs-layout {
  display: grid;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .needs-layout {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
  }
}

.needs-list {
  list-style: none;
  padding: 0;
}

.needs-list li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--hairline);
}

.needs-list svg {
  width: 2rem;
  height: 2rem;
  color: var(--text-2);
}

.needs-list p {
  color: var(--text-2);
}

.needs-list strong {
  color: var(--text);
}

.needs-status {
  margin-top: 1.5rem;
  color: var(--text-2);
}

/* ---------- Built on ICIDO ---------- */

.closing {
  padding-top: 0;
}

.closing-panel {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  border-radius: var(--radius);
  background: var(--surface);
}

@media (min-width: 720px) {
  .closing-panel {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 2.25rem;
  }
}

.closing-panel img {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 22.5%;
}

.closing-panel h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.4rem);
}

.closing-panel p {
  max-width: 40em;
  margin-top: 0.75rem;
  color: var(--text-2);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  color: var(--text);
  font-weight: 700;
  text-decoration-color: var(--accent);
}

.text-link svg {
  flex: none;
  width: 1.1em;
  height: 1.1em;
}

.closing-panel .text-link {
  margin-top: 0.5rem;
}

/* ---------- Footer ---------- */

.site-footer {
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--raised);
  color: var(--text-2);
  font-size: 1rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2.5rem;
}

.footer-inner .brand {
  font-size: 1.25rem;
}

.footer-inner .brand-mark {
  width: 1.875rem;
  height: 1.875rem;
}

.footer-nav ul {
  gap: 0 1.5rem;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
}

/* ---------- Text pages: support, privacy, not found ---------- */

.page {
  padding-block: clamp(2.75rem, 1.5rem + 3vw, 4.5rem) var(--section);
}

/* The reading column keeps a comfortable measure, aligned with the logo. */
.prose > * {
  max-width: 44rem;
}

.prose h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.2vw, 3.9rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.prose .lead {
  margin-top: 1.25rem;
  color: var(--text-2);
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
}

.prose .meta {
  margin-top: 0.75rem;
  color: var(--text-2);
  font-size: 1rem;
}

.prose h2 {
  margin-top: 3.25rem;
  font-size: clamp(1.625rem, 1.35rem + 1vw, 2.125rem);
  font-weight: 760;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.prose h3 {
  margin-top: 2.25rem;
  font-size: 1.25rem;
}

.prose p,
.prose ul,
.prose ol {
  margin-top: 0.9rem;
}

.prose ul,
.prose ol {
  padding-left: 1.4rem;
}

.prose li + li {
  margin-top: 0.5rem;
}

.prose li::marker {
  color: var(--text-2);
}

.prose a {
  text-decoration-color: var(--accent);
}

.prose .actions {
  margin-top: 2rem;
}

.contents {
  margin-top: 2.25rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  background: var(--surface);
}

.contents h2 {
  margin: 0;
  font-size: 1.125rem;
  letter-spacing: 0;
}

.contents ul {
  margin-top: 0.5rem;
}

/* ---------- Forced colours (Windows contrast themes) ---------- */

@media (forced-colors: active) {
  .button,
  .tile,
  .privacy-col,
  .closing-panel,
  .contents,
  .phrases li {
    border: 2px solid CanvasText;
  }

  .stop-line {
    background: CanvasText;
  }
}