/* The site treelune.app (docs/design/website.md). The frame never changes: the icon's night blue
   for titles, links and buttons, on an off-white barely blue, the night blue as ground in dark.
   Only the opening band takes a theme's colours and font. */

:root {
  --night: #1E2A47;
  --bg: #F6F7FA;
  --surface: #FFFFFF;
  --shot-ground: #ECEEF2;
  --ink: #1B2233;
  --muted: #5A6375;
  --line: #DDE1E8;
  --accent: var(--night);
  --header: 56px;
  /* Tag colours, the default theme's (DefaultDrawing.kt) */
  --red: #C94A4A; --orange: #D9772B; --yellow: #B8961A; --green: #4E9A45;
  --teal: #2E8F84; --blue: #3D6FC6; --purple: #7A55B0; --pink: #C4508D; --grey: #8C8699;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1E2A47; --surface: #25335A; --shot-ground: #2B3A63; --ink: #EEF0F5;
    --muted: #AEB6C8; --line: #34446F; --accent: #F2E6BF;
    --red: #F08A8A; --orange: #F5AE72; --yellow: #EBD36A; --green: #8FD08A; --teal: #79CFC4; --blue: #8DB0F0; --purple: #BE9BE3; --pink: #EE95C3; --grey: #B8B2C2;
  }
}
:root[data-theme="dark"] {
  --bg: #1E2A47; --surface: #25335A; --shot-ground: #2B3A63; --ink: #EEF0F5;
  --muted: #AEB6C8; --line: #34446F; --accent: #F2E6BF;
  --red: #F08A8A; --orange: #F5AE72; --yellow: #EBD36A; --green: #8FD08A; --teal: #79CFC4; --blue: #8DB0F0; --purple: #BE9BE3; --pink: #EE95C3; --grey: #B8B2C2;
}

* { box-sizing: border-box; }
/* One section, one screen: each fills the screen under the header, and the scrolling always settles
   on a section's start. The header's height is counted once, by the page's scroll-padding. The page
   scrolls in the body, not in the window: a phone's browser folds its address bar away only as the
   window scrolls, so it keeps it, and the screen keeps its height and the sections their starts. */
html { height: 100%; overflow: hidden; }
body { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scroll-padding-top: var(--header); }
.band, .privacy, section { scroll-snap-align: start; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
/* A section's content is laid out in the screen's height: what does not fit is made smaller, never left below */
section {
  height: calc(100svh - var(--header)); padding: clamp(16px, 5svh, 56px) 0; display: flex; flex-direction: column; justify-content: center;
}
section > .wrap { width: 100%; min-height: 0; }
h2 { font-size: min(30px, 4.4svh); line-height: 1.2; margin: 0 0 min(12px, 1.4svh); }
.lead { color: var(--muted); max-width: 640px; margin: 0 0 min(36px, 4svh); font-size: clamp(12px, 2.4svh, 17px); }

/* Header, sticky, neutral */
header {
  position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
header .wrap { display: flex; align-items: center; gap: 16px; height: calc(var(--header) - 1px); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); text-decoration: none; transition: opacity .3s; }
.brand.away { opacity: 0; pointer-events: none; }
header nav { margin-left: auto; display: flex; gap: 18px; font-size: 15px; }
header nav a { color: var(--muted); text-decoration: none; white-space: nowrap; }
header nav a:hover { color: var(--accent); }
/* The section on screen, its link underlined; on a phone, its name and rank in place of the brand's name */
header nav a[aria-current="true"] { color: var(--accent); text-decoration: underline 2px; text-underline-offset: 6px; }
.where, .where-rank { display: none; }
/* A phone, upright or on its side, and a narrow window: only Install and the other language stay, the
   scrolling going from one section to the next */
@media (max-width: 820px), (max-height: 500px) and (orientation: landscape) {
  .brand:has(.where:not(:empty)) .brand-name { display: none; }
  .where { display: inline; white-space: nowrap; }
  .where-rank { display: inline; font-size: 12px; font-weight: 400; color: var(--muted); opacity: .8; white-space: nowrap; }
  header nav a:not(.always) { display: none; }
}

.buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 12px 20px; border-radius: 10px; font-weight: 600; text-decoration: none;
  background: var(--night); color: #fff;
}
.btn.ghost { background: transparent; color: inherit; border: 1.5px solid currentColor; }
/* A button for what is not there yet: shown, faded, never touched */
.btn.soon { opacity: .5; cursor: default; }

/* An icon on a pill of its colour, as the default theme draws a tool's icon */
.pill {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 16%, transparent);
}
.pill svg { width: 20px; height: 20px; }

/* A phone frame: thin, drawn, no real device */
.phone {
  position: relative; width: 260px; aspect-ratio: var(--screen); border-radius: 28px; padding: 8px;
  background: #11161F; box-shadow: 0 18px 40px rgba(0,0,0,.18); flex: none; overflow: hidden; container-type: inline-size;
}
.phone > img, .phone > video, .phone > .empty, .phone > .zone-screen {
  width: 100%; height: 100%; border-radius: 21px; display: block; object-fit: cover;
}
.empty { background: repeating-linear-gradient(45deg, #2a3140 0 10px, #252b38 10px 20px); }
.zoomable { cursor: zoom-in; }
/* A file not taken yet: marked on its frame, never deployed (./run site-deploy refuses it) */
.stand-in {
  position: absolute; left: 12px; right: 12px; bottom: 14px; padding: 4px 8px; border-radius: 6px;
  background: #FFE36E; color: #1B2233; font: 600 11px/1.3 system-ui, sans-serif; text-align: center;
  overflow-wrap: anywhere; pointer-events: none;
}

/* Opening band: the only place a theme dresses the page.
   Desktop: one screen under the header, three columns (pitch, phone, picker).
   Phone upright: two screens, the pitch, then the phone with its carousel.
   Short landscape: the pitch screen, then the picker on the left beside a phone sized by the width. */
.band { transition: background .35s, color .35s; height: calc(100svh - var(--header)); display: flex; flex-direction: column; position: relative; }
.band .hero {
  flex: 1; min-height: 0; width: 100%; display: grid; grid-template-columns: 1.15fr auto auto;
  grid-template-rows: minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 24px; padding-bottom: min(84px, 11svh);
}
.band .showcase, .band .phone-box { display: contents; }
/* Sizes follow the height as much as the width: the band never overflows a short screen */
.band h1 { font-size: clamp(20px, min(4.4vw, 6.2svh), 46px); line-height: 1.12; margin: 0 0 min(18px, 2svh); }
.band .ai { font-size: clamp(14px, min(1.9vw, 2.9svh), 19px); opacity: .85; margin: 0 0 min(28px, 3svh); max-width: 520px; }
.band .btn { padding: min(12px, 1.4svh) 20px; }
.band .phone { height: 100%; width: auto; }
.more {
  display: grid; place-items: center; position: absolute; bottom: min(16px, 2svh); left: 50%; transform: translateX(-50%);
  width: min(56px, 8svh); height: min(56px, 8svh); border-radius: 50%; border: 1.5px solid currentColor; padding: 0;
  color: inherit; background: transparent; cursor: pointer; opacity: .8;
}
.more span { display: block; font-size: min(28px, 4.4svh); line-height: 1; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .more span { animation: none; } html { scroll-behavior: auto; } }
.pitch-mark { display: none; }

/* The picker: each theme's name written in its own font, the light/dark switch under it */
.picker { display: flex; flex-direction: column; gap: min(4px, .5svh); position: relative; }
.picker-intro { font-size: min(14px, 2.2svh); opacity: .75; margin: 0 0 min(8px, 1svh); max-width: 180px; }
.picker-list { display: flex; flex-direction: column; gap: min(4px, .5svh); }
.picker-list button {
  font-size: min(18px, 2.7svh); line-height: 1.35; text-align: left; padding: 1px 10px; cursor: pointer; white-space: nowrap;
  border: none; border-left: 3px solid transparent; background: transparent; color: inherit; opacity: .6;
}
.picker-list button:hover { opacity: .9; }
.picker-list button[aria-pressed="true"] { opacity: 1; border-left-color: currentColor; }
.mode-switch { display: flex; margin-top: min(14px, 1.8svh); border: 1.5px solid currentColor; border-radius: 999px; overflow: hidden; align-self: flex-start; }
.mode-switch button {
  font: 600 min(13px, 2svh) system-ui, sans-serif; padding: min(6px, .8svh) 12px; border: none; cursor: pointer;
  background: transparent; color: inherit;
}
.mode-switch button[aria-pressed="true"] { background: currentColor; }
.mode-switch button[aria-pressed="true"] span { color: var(--band-bg); }

/* The carousel of a phone held upright: the choice in place between two arrows, its rank, and a swipe on the phone */
.carousel { display: none; align-items: center; justify-content: space-between; gap: 10px; width: min(100%, 360px); margin: 0 auto; }
.carousel .arrow {
  flex: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font: 600 22px/1 system-ui, sans-serif;
  border: 1.5px solid currentColor; background: transparent; color: inherit;
}
.carousel .current { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.carousel .current b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carousel .rank { font-size: 12px; opacity: .65; white-space: nowrap; }

/* Phone upright, and short landscape: the band becomes two screens, the first one the pitch alone */
@media (max-width: 820px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  /* The band, two screens, is no stop of its own: a stop taller than the screen lets the scrolling rest anywhere inside it */
  .band { height: auto; scroll-snap-align: none; }
  .band .hero { display: block; padding: 0 16px; }
  .band .pitch {
    height: calc(100svh - var(--header)); min-height: 300px; display: flex; flex-direction: column; justify-content: center;
    position: relative; padding: 16px 0 80px;
  }
  .band h1 { font-size: clamp(24px, min(8vw, 6svh), 40px); margin-bottom: 16px; }
  .band .ai { font-size: clamp(15px, min(4.4vw, 3.4svh), 19px); margin-bottom: 24px; }
  .band .btn { padding: 11px 18px; }
  .more { bottom: 20px; width: 64px; height: 64px; opacity: .85; }
  .more span { font-size: 34px; }
  .band .pitch, .band .showcase { scroll-snap-align: start; }
}

/* Phone upright, screen 1: the app's mark and name, large, above the pitch; the header's own mark waits until it is scrolled away */
@media (max-width: 820px) and (orientation: portrait) {
  .pitch-mark { display: flex; align-items: center; gap: 16px; margin-bottom: 4svh; }
  .pitch-mark svg { width: min(104px, 13svh); height: min(104px, 13svh); filter: drop-shadow(0 8px 18px rgba(30, 42, 71, .25)); }
  .pitch-mark span { font-size: min(34px, 4.6svh); font-weight: 700; }
}

/* Phone upright, screen 2: the phone as tall as the room left, then the carousel and the switch */
@media (max-width: 820px) and (orientation: portrait) {
  .band .showcase { display: flex; flex-direction: column; height: calc(100svh - var(--header)); padding: 16px 0; gap: 14px; }
  .band .phone-box { display: flex; flex: 1; min-height: 0; justify-content: center; container-type: size; }
  .band .showcase .phone { height: min(100cqh, calc(100cqw / var(--screen))); width: auto; }
  .band .picker { flex-direction: column; align-items: stretch; gap: 10px; }
  .band .carousel { display: flex; }
  .band .carousel .current b { font-size: 22px; font-weight: 400; }
  .picker-intro, .band .picker-list { display: none; }
  .mode-switch { margin-top: 0; align-self: center; }
  .mode-switch button { font-size: 13px; padding: 6px 12px; }
}

/* Short landscape, screen 1: the app's mark large on the left of the pitch */
@media (max-height: 500px) and (orientation: landscape) {
  .band .pitch { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 5vw; align-content: center; }
  .band .pitch > * { grid-column: 2; }
  .band .pitch .pitch-mark { grid-column: 1; grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: center; gap: 2svh; }
  .pitch-mark svg { width: min(150px, 34svh); height: min(150px, 34svh); filter: drop-shadow(0 8px 18px rgba(30, 42, 71, .25)); }
  .pitch-mark span { font-size: min(28px, 7svh); font-weight: 700; }
  .band .pitch .more { grid-column: auto; }
}

/* Short landscape, screen 2: the unfolded picker on the left, the phone as tall as the screen allows */
@media (max-height: 500px) and (orientation: landscape) {
  .band .showcase { display: flex; justify-content: center; align-items: center; gap: 40px; height: calc(100svh - var(--header)); padding: 4svh 0; }
  .band .phone-box { display: block; order: 2; height: 100%; }
  .band .showcase .phone { height: 100%; width: auto; }
  .band .picker { order: 1; gap: .4svh; }
  .picker-intro { font-size: min(14px, 3.8svh); margin-bottom: 1.5svh; max-width: none; white-space: nowrap; }
  .picker-list { gap: .4svh; }
  .picker-list button { font-size: min(17px, 4.2svh); line-height: 1.25; }
  .mode-switch { margin-top: 2svh; }
  .mode-switch button { font-size: min(13px, 3.6svh); padding: 1svh 12px; }
}

/* Three lines on the data */
.privacy { border-bottom: 1px solid var(--line); }
.privacy h2 { margin-bottom: 28px; }
.privacy ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 720px) { .privacy ul { grid-template-columns: 1fr; gap: 12px; } }
.privacy li { font-size: 16px; display: flex; gap: 14px; align-items: flex-start; }
.privacy b { display: block; font-size: 18px; }
@media (max-width: 820px) and (orientation: portrait) { .privacy ul { gap: 28px; } }
/* A wide screen: three cards as the other pieces' are, the icon and the name on one line above the text */
@media (min-width: 721px) {
  .privacy ul { gap: 20px; }
  .privacy li {
    display: grid; grid-template-columns: auto 1fr; align-items: center; align-content: start; gap: 6px 12px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px;
  }
  .privacy li div { display: contents; }
  .privacy li div span { grid-column: 1 / -1; color: var(--muted); font-size: 15px; }
}
/* Short landscape: three cards as the other pieces' are, the icon and the name centred on one line above the text */
@media (max-height: 500px) and (orientation: landscape) {
  .privacy h2 { margin-bottom: 2svh; }
  .privacy ul { gap: 16px; }
  .privacy li {
    font-size: 13px; line-height: 1.4; display: grid; grid-template-columns: 1fr auto auto 1fr; align-items: center; align-content: start; gap: 1.5svh 10px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 2.5svh 16px;
  }
  .privacy li .pill { grid-column: 2; }
  .privacy li div { display: contents; }
  .privacy b { grid-column: 3; font-size: 15px; }
  .privacy li span { grid-column: 1 / -1; align-self: start; }
}

/* The explorer, the site's pattern: choices beside a phone; choosing changes what the phone shows.
   The choices change sides from one section to the next (.flip). The section is one screen: the
   explorer takes the height its title leaves, and the stage is that tall, its width following. */
section[data-explore] { justify-content: flex-start; }
section[data-explore] > .wrap { flex: 1; display: flex; flex-direction: column; }
.explorer {
  flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr);
  gap: min(56px, 5vw); align-items: center;
}
.flip .explorer { grid-template-columns: auto minmax(0, 1fr); }
.flip .ex-side { order: 2; }
.ex-stage {
  display: flex; justify-content: center; align-items: center; background: var(--shot-ground); border-radius: 18px;
  height: 100%; max-height: 720px; aspect-ratio: .6; align-self: center;
}
.ex-stage .phone { height: calc(100% - min(56px, 7svh)); width: auto; }
/* The choices are tiles, several per row; the details sit in a box of fixed size, so nothing jumps and the eye goes there */
.ex-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: min(10px, 1.2svh); }
.ex-list button {
  display: flex; align-items: center; gap: 12px;
  font: 600 clamp(12px, 2.2svh, 16px)/1.3 system-ui, sans-serif; text-align: left; padding: min(12px, 1.3svh) 14px; cursor: pointer; min-height: min(64px, 7.4svh);
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink);
  transition: border-color .2s, background .2s, transform .2s;
}
/* A name too long for its tile is cut at its syllables, in the page's language */
.ex-list button > span:last-child { min-width: 0; hyphens: auto; overflow-wrap: break-word; }
.ex-list button small { display: block; font-weight: 400; font-size: 13px; margin-top: 3px; color: var(--muted); }
.ex-list button:hover { border-color: var(--accent); transform: translateY(-1px); }
.ex-list button[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent); }
.ex-caption {
  margin-top: min(18px, 2svh); height: min(190px, 24svh); overflow: hidden; padding: min(20px, 2.4svh) 22px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  box-shadow: 0 6px 20px rgba(20, 30, 60, .06);
}
.ex-caption h3 { margin: 0 0 min(8px, 1svh); font-size: min(20px, 2.8svh); }
.ex-caption p { margin: 0; color: var(--muted); font-size: clamp(12px, 2.3svh, 17px); }
.ex-caption .theme-label { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }

/* The Italian zone: its capture with a touchable frame over each tile, the chosen one outlined, the rest dimmed.
   The frames sit in a box the image's exact size, their fractions being the image's. */
.phone > .zone-frame { position: relative; width: 100%; height: 100%; border-radius: 21px; overflow: hidden; }
.zone-frame img { width: 100%; height: 100%; display: block; object-fit: fill; }
.tile-hit {
  position: absolute; padding: 0; border: none; border-radius: 3.4cqw; background: transparent; cursor: pointer;
  transition: box-shadow .25s;
}
.tile-hit:hover { box-shadow: 0 0 0 2px color-mix(in srgb, #1E2A47 60%, transparent); }
.tile-hit[aria-current="true"] { box-shadow: 0 0 0 3px #1E2A47, 0 0 0 100vmax rgba(17, 22, 31, .45); }
/* The zone drawn from the demo, while its capture is not taken */
.zone-screen {
  background: #FFF8EE; color: #2b2b2b; padding: 6cqw 4cqw; display: flex; flex-direction: column; gap: 2.6cqw; font-size: 4.2cqw;
}
.zone-screen h4 { margin: 0 0 2cqw; font-size: 6cqw; text-align: center; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.tile {
  font: inherit; color: inherit; text-align: left; cursor: pointer; background: #fff; border: 1px solid #eadfcd;
  border-radius: 3.4cqw; padding: 3.4cqw 2.8cqw; min-height: 21cqw; transition: opacity .25s, box-shadow .25s;
}
.tile small { display: block; color: #8a8a8a; font-size: 3.4cqw; }
.zone-screen.focus .tile { opacity: .35; }
.zone-screen.focus .tile[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 3px #1E2A47; }

/* Phone upright: an explorer section fills one screen, nothing but its title, the phone, the details just above the carousel */
@media (max-width: 820px) and (orientation: portrait) {
  section[data-explore] { padding: 14px 0; }
  section[data-explore] h2 { font-size: 23px; margin-bottom: 10px; }
  section[data-explore] .lead { display: none; }
  .explorer, .flip .explorer { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
  .ex-side { display: contents; }
  .ex-list { display: none; }
  .ex-caption {
    order: 1; margin: 0; padding: 10px 14px; height: calc(4 * 1.45 * 14px + 20px);
    font-size: 14px; line-height: 1.45; text-align: left; border-left-width: 3px; box-shadow: none;
  }
  .ex-caption h3, .ex-caption .theme-label { display: none; }
  .ex-caption p { font-size: 14px; }
  .ex-stage { flex: 1; min-height: 0; width: auto; height: auto; max-height: none; aspect-ratio: auto; align-self: stretch; container-type: size; }
  .ex-stage .phone { height: calc(100cqh - 20px); }
  section[data-explore] .carousel { display: flex; color: var(--ink); order: 2; }
  section[data-explore] .carousel .pill { width: 30px; height: 30px; }
  section[data-explore] .carousel .pill svg { width: 17px; height: 17px; }
}

/* Short landscape: an explorer section fills one screen, its title, the tiles and the details beside a phone as tall as the room */
@media (max-height: 500px) and (orientation: landscape) {
  section[data-explore] { padding: 3svh 0; }
  section[data-explore] h2 { font-size: min(24px, 6.5svh); margin-bottom: 2svh; }
  section[data-explore] .lead { display: none; }
  .explorer { flex: 1; min-height: 0; gap: 24px; align-items: stretch; }
  .ex-side { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
  .ex-stage { border-radius: 14px; }
  .ex-stage .phone { height: calc(100% - 16px); }
  .ex-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1svh; }
  .ex-list button { font-size: min(14px, 3.7svh); line-height: 1.2; padding: .8svh 10px; min-height: 0; gap: 8px; border-radius: 10px; }
  .ex-list button small { font-size: min(11px, 3svh); margin-top: 0; }
  .ex-list .pill { width: min(28px, 7.5svh); height: min(28px, 7.5svh); }
  .ex-list .pill svg { width: min(16px, 4.4svh); height: min(16px, 4.4svh); }
  .ex-caption { margin-top: 1.6svh; height: auto; padding: 1.4svh 14px; box-shadow: none; }
  .ex-caption h3 { font-size: min(16px, 4.4svh); margin-bottom: .8svh; }
  .ex-caption p { font-size: min(14px, 3.6svh); line-height: 1.35; }
  .ex-caption .theme-label { display: none; }
}

/* Other pieces: text cards, a breath between the phones */
.pieces h2 { margin-bottom: min(24px, 3svh); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: min(20px, 2.4svh); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: min(18px, 2.2svh) 18px; display: flex; flex-direction: column; gap: 6px; }
.card h3 { margin: 0; font-size: clamp(14px, 2.5svh, 18px); display: flex; align-items: center; gap: 12px; }
.card p { margin: 0; color: var(--muted); font-size: clamp(12px, 2.1svh, 15px); }
/* Phone upright and short landscape: the cards in a row that scrolls sideways, each settling in the middle,
   the first and the last too, its neighbours showing at the edges, each one centred; the carousel under it says the rank */
@media (max-width: 820px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  .grid {
    --card: min(78vw, 300px);
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; scrollbar-width: none;
    margin: 0 -16px; padding: 4px calc((100% + 32px - var(--card)) / 2) 8px;
  }
  .grid::-webkit-scrollbar { display: none; }
  .card { flex: 0 0 var(--card); scroll-snap-align: center; text-align: center; }
  .card h3 { justify-content: center; font-size: 18px; } .card p { font-size: 15px; }
  .pieces .carousel { display: flex; color: var(--ink); margin-top: min(16px, 2svh); }
}
/* Phone upright: tall cards, so that the row fills the screen as the other sections do */
@media (max-width: 820px) and (orientation: portrait) {
  .grid { --card: min(80vw, 340px); }
  .card { min-height: min(50svh, 440px); justify-content: center; gap: 18px; padding: 28px 24px; }
  .card h3 { flex-direction: column; gap: 16px; font-size: 24px; }
  .card .pill { width: 56px; height: 56px; } .card .pill svg { width: 30px; height: 30px; }
  .card p { font-size: 17px; }
}

/* Install, its footer at the bottom of the same screen */
.install { text-align: center; padding-bottom: 0; }
.install-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.install .lead { margin: 0 auto min(8px, 1svh); }
.install .buttons { justify-content: center; margin: min(24px, 3svh) 0 min(8px, 1svh); }
.signature { display: flex; justify-content: center; margin: 0 0 min(24px, 3svh); }
.signature svg { width: min(120px, 16svh); height: min(120px, 16svh); filter: drop-shadow(0 10px 24px rgba(30, 42, 71, .25)); }
.needs { list-style: none; padding: 0; margin: 0 0 4px; color: var(--muted); font-size: clamp(12px, 2.2svh, 15px); }
.young { color: var(--muted); font-size: clamp(12px, 2.1svh, 14px); max-width: 520px; margin: min(18px, 2svh) auto 0; }
footer { border-top: 1px solid var(--line); padding: min(24px, 3svh) 0; color: var(--muted); font-size: clamp(12px, 2.4svh, 14px); text-align: left; }
footer .wrap { display: flex; gap: 6px 18px; flex-wrap: wrap; justify-content: space-between; }
/* Short landscape: the mark and the title beside the rest, so that all of it fits one low screen */
@media (max-height: 500px) and (orientation: landscape) {
  .install-body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 5vw; align-content: center; text-align: left; }
  .install-body > * { grid-column: 2; }
  .install-body .signature { grid-column: 1; grid-row: 1 / span 6; margin: 0; }
  .install .lead, .young { margin-left: 0; }
  .install .buttons { justify-content: flex-start; }
}

/* A capture or a video alone, full screen: no arrows to its neighbour; a touch or Escape closes it */
#lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: none;
  background: rgba(10, 14, 22, .92); cursor: zoom-out;
}
#lightbox[open] { display: grid; place-items: center; }
#lightbox::backdrop { background: transparent; }
.lb-body { display: contents; }
.lb-body img, .lb-body video { max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); border-radius: 18px; object-fit: contain; }
.lb-close {
  position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid #fff; background: transparent; color: #fff; font: 400 26px/1 system-ui, sans-serif;
}