/* Tokens from docs/BRAND.md: neutral paper and ink, one accent (twilight),
   and the horizon line as the signature. The renders carry the colour. */

@font-face { font-family: "Brand Wide"; src: url("../fonts/brand-wide.woff2") format("woff2"); font-weight: 300 600; font-display: swap; }
@font-face { font-family: "Brand Text"; src: url("../fonts/brand-text.woff2") format("woff2"); font-weight: 400 650; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Brand Wide Fallback"; src: local("Arial"); size-adjust: 124%; ascent-override: 84%; descent-override: 20%; }

:root {
  --paper: #FFFFFF; --mist: #F3F4F7; --ink: #0B1020; --graphite: #5A6273; --hairline: #D9DEE7; --twilight: #1D3570; --on-twilight: #FFFFFF;
  --night: #0B1020; --night-mist: #121828; --night-ink: #EEF1F6; --night-graphite: #9AA3B5; --night-hairline: #262E42; --night-twilight: #9DB2F2;
  --cream: #FFF8EC;
  --horizon: linear-gradient(90deg, #1D3570 0%, #7A5A8A 55%, #FFCC70 100%);

  --bg: var(--paper); --surface: var(--mist); --fg: var(--ink); --fg2: var(--graphite); --line: var(--hairline);
  --accent: var(--twilight); --on-accent: var(--on-twilight);

  --wide: "Brand Wide", "Brand Wide Fallback", "Helvetica Neue", Arial, sans-serif;
  --text: "Brand Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --max: 77.5rem;
  --band: clamp(5rem, 11vw, 9.5rem);
  --bar: 4rem;
  /* the room of the frame preview: by day on the light page, in the evening on the dark one (the number after ?
     is raised when a drawing changes, so that browsers fetch it again) */
  --room: url("../svg/room-day.svg?4"); --room-wall: #E8E5E0; --room-shade: 38, 30, 20; --room-dim: 1;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--night); --surface: var(--night-mist); --fg: var(--night-ink); --fg2: var(--night-graphite); --line: var(--night-hairline);
    --accent: var(--night-twilight); --on-accent: var(--night);
    --room: url("../svg/room-night.svg?4"); --room-wall: #1A2030; --room-shade: 0, 0, 0; --room-dim: .84;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--night); --surface: var(--night-mist); --fg: var(--night-ink); --fg2: var(--night-graphite); --line: var(--night-hairline);
  --accent: var(--night-twilight); --on-accent: var(--night);
  --room: url("../svg/room-night.svg?4"); --room-wall: #1A2030; --room-shade: 0, 0, 0; --room-dim: .84;
  color-scheme: dark;
}
/* the sky is always night */
.hero, .night {
  --bg: var(--night); --surface: var(--night-mist); --fg: var(--night-ink); --fg2: var(--night-graphite); --line: var(--night-hairline);
  --accent: var(--night-twilight); --on-accent: var(--night);
}

/* a page in another language than it is written in stays hidden until its words are set (js/i18n.js), or for 2.5 s */
.wording body { visibility: hidden; animation: wording 0s 2.5s forwards; }
@keyframes wording { to { visibility: visible; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 1rem); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1.0625rem/1.6 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 1em; max-width: 62ch; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 500; }
h2 { font: 500 clamp(1.125rem, .93rem + 1vw, 1.75rem)/1.35 var(--wide); letter-spacing: .14em; text-transform: uppercase; text-wrap: balance; margin-bottom: 1.1em; }
h1, h2, .hero-line, .artwork-cap, .sign, .line, .readout h3, .almanac h3 { font-feature-settings: "case"; }
h3 { font: 600 1.0625rem/1.4 var(--text); margin-bottom: .4em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--on-accent); }

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: 1rem; z-index: 40; padding: .6rem 1rem; background: var(--bg); color: var(--fg); border: 1px solid var(--line); translate: 0 -400%; }
.skip:focus { translate: 0; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band); background: var(--bg); color: var(--fg); }
.band.mist { background: var(--surface); }
.lead { font-size: clamp(1.2rem, 1.06rem + .68vw, 1.6rem); line-height: 1.42; max-width: 34em; }
.quiet { color: var(--fg2); font-size: .9375rem; }
/* a short list in the type of the text it follows: a hairline in the horizon's colours stands where a bullet would */
.list { margin: -.35em 0 1em; padding: 0; list-style: none; max-width: 34em; }
.list li { position: relative; margin: .3em 0; padding-left: 1.7em; text-wrap: pretty; }
.list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 1em; height: 2px; border-radius: 1px; background: var(--horizon); }
.fig { font-family: var(--mono); font-size: .92em; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.head > :last-child { margin-bottom: 0; }

/* a spec sheet: term and value on hairlines */
.sheet { margin: 0; }
.sheet > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.sheet > div:last-child { border-bottom: 1px solid var(--line); }
.sheet dt { color: var(--fg2); font-size: .9375rem; }
.sheet dd { margin: 0; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.5rem; border: 1px solid var(--accent); border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent); font: 500 .9375rem/1 var(--text); letter-spacing: .01em; text-decoration: none; cursor: pointer; }
.button:hover { background: color-mix(in srgb, var(--accent) 86%, var(--fg)); border-color: transparent; }
.button.small { min-height: 2.25rem; padding: 0 .95rem; font-size: .875rem; }

/* ------------------------------------------------------------------ bar */
.top { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--bar); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-inline: var(--gutter); color: var(--night-ink); border-bottom: 1px solid transparent; transition: background-color .25s, border-color .25s, color .25s; }
.top.solid, .top.plain { color: var(--fg); background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); border-bottom-color: var(--line); }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; }
.brand .mark { width: 2.1rem; height: 2.1rem; }
.brand .word { height: .68rem; width: auto; }
.top-nav { display: none; gap: clamp(1.1rem, 2.2vw, 2.25rem); }
.top-nav a { color: inherit; font-size: .9375rem; text-decoration: none; opacity: .86; white-space: nowrap; }
.top-nav a:hover, .top-nav a[aria-current] { opacity: 1; text-decoration: underline; }
.top-end { display: flex; align-items: center; gap: .5rem; }
.theme { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.theme:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.lang { height: 2.5rem; min-width: 2.5rem; padding: 0 .55rem; border: 0; border-radius: 1.25rem; background: none; color: inherit; font: 500 .8125rem/1 var(--mono); letter-spacing: .06em; cursor: pointer; }
.lang:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
/* the language of the page, and the list of them all under it */
.lang-pick { position: relative; }
.lang-pick summary { display: grid; place-items: center; list-style: none; -webkit-user-select: none; user-select: none; }
.lang-pick summary::-webkit-details-marker { display: none; }
.lang-pick[open] summary { background: color-mix(in srgb, currentColor 12%, transparent); }
.lang-pick ul { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 5; display: grid; gap: .15rem; min-width: 10rem; margin: 0; padding: .4rem; list-style: none;
  border-radius: var(--r-hold); background: var(--bg); color: var(--fg); box-shadow: 0 0 0 1px var(--edge), 0 24px 48px -22px rgba(11, 16, 32, .4); }
.lang-pick li button { width: 100%; min-height: 2.5rem; padding: 0 .85rem; border: 0; border-radius: calc(var(--r-field) - .25rem); background: none; color: inherit; font: inherit;
  font-size: .9375rem; text-align: left; cursor: pointer; transition: background-color var(--ease), box-shadow var(--ease); }
.lang-pick li button:hover { background: var(--tone-2); }
.lang-pick li button[aria-current] { box-shadow: var(--chosen); }
/* the basket, and how many artworks are in it */
.basket { position: relative; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-right: .25rem; border-radius: 50%; color: inherit; text-decoration: none; }
.basket:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.basket-count { position: absolute; top: .15rem; right: .05rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .28rem; border-radius: 1rem; background: #FFCC70; color: #0B1020;
  font: 500 .6875rem/1.05rem var(--mono); text-align: center; }
.basket-count[hidden] { display: none; }
.top .button .short { display: none; }
@media (max-width: 30em) { .top .button .long { display: none; } .top .button .short { display: inline; } }
@media (max-width: 30em) {                             /* a phone: the bar holds the mark, the language, the theme, the basket and the way in */
  .top { gap: .4rem; }
  .brand { flex: none; gap: .5rem; }
  .brand .mark { width: 1.9rem; height: 1.9rem; }
  .brand .word { height: .6rem; }
  .top-end { gap: 0; }
  .lang, .theme, .basket { width: 2.15rem; min-width: 0; padding: 0; margin: 0; }
  .top .button.small { padding: 0 .6rem; margin-left: .25rem; }
}
@media (max-width: 21.5em) { .brand .word { display: none; } }      /* the narrowest phones: the mark alone, so the way in stays whole */
.top .button { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 45%, transparent); }
.top .button:hover { background: color-mix(in srgb, currentColor 12%, transparent); border-color: currentColor; }
.top.solid .button, .top.plain .button { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
@media (min-width: 64em) { .top-nav { display: flex; } }
@media (min-width: 90em) {                                          /* wide enough for equal sides: the links stand in the middle of the page, whatever the widths of the logo and of the buttons */
  .top { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
  .top-end { justify-self: end; }
}

/* ----------------------------------------------------------------- hero */
/* Every word of the hero stands in the ground, as on the Artwork, and the sky stays the sky's. The words take the room
   they need at the foot (the second row). The picture fills the row above them and reaches down behind their top by
   its own ground: what lies under the lowest point of its Skyline (--g of its height; --ratio is its height over its
   width). So at any size and in any language the Skyline stands above the words. Where they need more than the
   picture's ground, the picture ends above the foot of the screen and the words carry the terrain's own colour on
   beneath it; where they need less, the picture fills the screen. --g is the lowest ground of the places' stills
   (wide: Paranal; tall: Uluru): measure a new place before it goes in (docs/SITE.md, "The first screen"). */
.hero { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100vh; height: 100svh; min-height: 34rem; overflow: hidden;
  background: var(--night); color: var(--night-ink); --g: .215; --ratio: .5625; }
.hero-sky { position: relative; grid-row: 1; height: max(calc(100% / (1 - var(--g))), calc(100% + var(--g) * var(--ratio) * 100vw)); max-height: max(100svh, 34rem); }
.hero-sky picture, .hero-sky img, .hero-film { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-sky img, .hero-film { object-fit: cover; object-position: 50% 100%; }
.hero-film { opacity: 0; }
.hero-moment { transition: opacity 1s ease; }
.hero.quick .hero-moment { transition-duration: .15s; }
.js .hero:not(.at-moment) .hero-moment { opacity: 0; }
.hero.on-film .hero-film { opacity: 1; }
.hero-sky, .hero-place { transition: opacity .6s ease; }            /* the hero turns to another place: its sky and its caption fade */
.hero.turning .hero-sky, .hero.turning .hero-place { opacity: 0; }
.hero::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 9rem; pointer-events: none; background: linear-gradient(rgba(4, 6, 10, .5), rgba(4, 6, 10, 0)); }
.hero-caption { position: relative; grid-row: 2; z-index: 2; padding: 1.1rem var(--gutter); text-align: center; }
.hero-caption::before { content: ""; position: absolute; inset: -3rem 0 0; z-index: -1; pointer-events: none;      /* the fade begins 3rem above the text */
  background: linear-gradient(rgba(8, 9, 14, 0), rgb(8, 9, 14) 7.5rem); }                    /* the terrain's own colour */
.hero h1 { font: 300 clamp(.98rem, .5rem + 1.3vw, 1.85rem)/1.4 var(--wide); letter-spacing: .22em; margin-right: -.22em; text-transform: uppercase; text-wrap: balance; }
/* what the product is, in one sentence, and the way to it: on the first screen, before anything has to be scrolled */
.hero-what { margin: .45rem auto 0; max-width: none; font-size: clamp(1rem, .93rem + .34vw, 1.2rem); line-height: 1.45; color: rgba(238, 241, 246, .94); text-wrap: balance; }
.hero-act { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .7rem 1.75rem; margin: .95rem auto 0; max-width: none; }
.hero-more { display: inline-flex; align-items: center; gap: .55rem; color: var(--night-ink); font-size: .9375rem; }
.hero-more::after { content: ""; width: .45rem; height: .45rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; rotate: 45deg; translate: 0 -30%; }
.hero-rule { display: block; width: clamp(4rem, 9vw, 7rem); height: 1px; margin: clamp(1.1rem, 2vw, 1.5rem) auto clamp(.7rem, 1.3vw, 1rem); background: rgba(226, 232, 242, .45); }
.hero-line { display: flex; flex-wrap: wrap; justify-content: center; gap: .1em 1.9em; margin: 0 auto .5em; max-width: none;
  font: 400 clamp(.7rem, .58rem + .32vw, .84rem)/1.6 var(--wide); letter-spacing: .17em; text-transform: uppercase; color: rgba(226, 232, 242, .86); }
.hero-line .fig { font-size: 1.04em; letter-spacing: .08em; }
.hero-line .pair { display: inline-flex; gap: 1.5em; }
.hero-note { margin: .8em auto 0; max-width: none; font-size: clamp(.72rem, .66rem + .16vw, .8rem); letter-spacing: .05em; color: rgba(214, 221, 235, .62); }
/* One sentence and one way in. The place and its minute are the last, quiet line, on the row of the film's buttons.
   The second half of the sentence, the rule and the note stay off the first screen (every Artwork carries the note). */
.hero-what .more, .hero-rule, .hero-note { display: none; }
.hero-place { display: flex; flex-direction: column; justify-content: center; min-height: 2.5rem; margin-top: 1rem; padding-inline: 7rem; }   /* clear of the buttons */
.hero-place .hero-line { margin: 0; font-size: clamp(.64rem, .5rem + .3vw, .8rem); color: rgba(226, 232, 242, .72); }
/* A wide window: the way in stands in the middle of the last row, between the film's buttons and the place with its
   minute, so that the words need no more than the picture's own ground and the top of the sky is not cut. */
@media (min-aspect-ratio: 801/1000) and (min-width: 56em) {
  .hero-caption { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-bottom: .9rem; }
  .hero h1, .hero-what { grid-column: 1 / -1; }
  .hero-act { grid-column: 2; }
  .hero-place { grid-column: 3; grid-row: 3; justify-self: end; margin-top: .95rem; padding-inline: 1.5rem 0; }
  .hero-place .hero-line { justify-content: flex-end; text-align: right; font-size: .68rem; letter-spacing: .12em; line-height: 1.5; }   /* a long place name on one line */
}
/* An upright screen, the tall pictures (Uluru's ground, 16 to 9). The place and its minute stand beside the film's
   buttons, under a hairline; the coordinates and the weekday stay off a phone. */
@media (max-aspect-ratio: 4/5) {
  .hero { --g: .2; --ratio: 1.7778; }
  .hero-caption { padding-top: 1.25rem; }
  .hero h1 { font-size: clamp(.9rem, .5rem + 1.7vw, 1.4rem); }
  .hero-what { margin-top: .5rem; font-size: .9375rem; }
  .hero-line .pair, .hero-line:nth-child(2) > span:first-child { display: none; }
  .hero-act { margin-top: .9rem; }
  .hero-rule { display: block; width: 100%; margin: 1rem 0 .7rem; background: rgba(226, 232, 242, .16); }
  .hero-place { margin-top: 0; padding-inline: 6.4rem 0; }
  .hero-place .hero-line { justify-content: flex-end; gap: 0 1.3em; font-size: .66rem; line-height: 1.55; text-align: right; }
}
@media (max-aspect-ratio: 4/5) and (max-height: 45rem) { .hero-more { display: none; } }      /* a short phone: the button alone */

.scrub { position: absolute; inset: auto 0 0; z-index: 3; height: 2.75rem; }
.scrub[hidden] { display: none; }
.scrub-track { position: absolute; inset: 0; --p: 1; }
.scrub-track::before { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: rgba(226, 232, 242, .2); }
.scrub-fill { position: absolute; inset: auto 0 0; height: 2px; background: var(--horizon); clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0); }
.scrub-thumb { position: absolute; z-index: 1; bottom: -4px; left: calc(var(--p) * 100%); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; opacity: 0;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .16); transition: opacity .2s; }
.scrub:hover .scrub-thumb, .hero.on-film .scrub-thumb { opacity: 1; }
.scrub-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.scrub-input:focus-visible ~ .scrub-thumb { outline: 2px solid var(--night-twilight); outline-offset: 3px; opacity: 1; }
.scrub-play { position: absolute; left: var(--gutter); bottom: 1.1rem; z-index: 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid rgba(226, 232, 242, .4); border-radius: 50%; background: rgba(4, 6, 10, .3); color: var(--night-ink); cursor: pointer; }
.scrub-play:hover, .scrub-next:hover { border-color: #fff; }
.scrub-next { position: absolute; left: calc(var(--gutter) + 3.1rem); bottom: 1.1rem; z-index: 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid rgba(226, 232, 242, .4); border-radius: 50%; background: rgba(4, 6, 10, .3); color: var(--night-ink); cursor: pointer; }
.scrub-next[hidden] { display: none; }
.scrub-play .i-pause, .hero.playing .scrub-play .i-play { display: none; }
.hero.playing .scrub-play .i-pause { display: block; }

/* ------------------------------------------------- every sky happens once */
.once { display: grid; gap: 2.5rem; }
.once-say .lead { margin: 0; }
.once-ask .quiet { margin-bottom: .8rem; }
.once-do { margin: 0; }
@media (min-width: 58em) {
  .once { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; row-gap: 3.5rem; }
  .once-say { grid-column: 1 / 8; }
  .once-ask { grid-column: 9 / 13; grid-row: 1 / 3; padding-top: .35rem; }
  .once-do { grid-column: 1 / 7; }
}

/* ------------------------------------------------------------ products */
.hero + .band { padding-top: clamp(3.25rem, 6vw, 5rem); }
.hero + .band .head { margin-bottom: clamp(1.75rem, 3.2vw, 2.5rem); }
.seg { display: flex; gap: clamp(1.5rem, 4vw, 2.75rem); border-bottom: 1px solid var(--line); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.seg button { padding: .85rem 0; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--fg2); font: 500 1.0625rem/1.2 var(--text); cursor: pointer; }
.seg button:hover { color: var(--fg); }
.seg button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); }
html:not(.js) .seg { display: none; }
.product { display: grid; gap: 2.5rem; align-items: center; }
.product[hidden] { display: none; }
.product + .product { margin-top: 4rem; }
.js .product + .product { margin-top: 0; }
.js .product h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }      /* the tab says it */
.product-view { display: grid; place-items: center; min-width: 0; }
.product-say .sheet { margin: 1.6rem 0; }
.price { margin: 0; font-size: 1.25rem; font-weight: 500; }
.act { margin: 1.25rem 0 0; }
.button.ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.button.ghost:hover { background: var(--surface); border-color: var(--fg2); }
@media (min-width: 58em) {
  .product { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; }
  .product-view { grid-column: 1 / 8; }
  .product-say { grid-column: 9 / 13; }
}

/* what there is to choose: size, frame, front */
.opts { display: flex; flex-wrap: wrap; gap: .5rem; min-width: 0; margin: 0 0 1.1rem; padding: 0; border: 0; }
.opts legend { padding: 0; margin-bottom: .45rem; color: var(--fg2); font-size: .9375rem; }
.opts label { position: relative; cursor: pointer; }
.opts input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.opts span { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: 0 .9rem; border: 1px solid var(--line); border-radius: var(--r-field); background: var(--bg); font-size: .9375rem; }
.opts input:checked + span { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.opts input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.opts small { color: var(--fg2); font-size: .75rem; }
#glass-note { margin: -.4rem 0 1.4rem; }
.opts i { width: .95rem; height: .95rem; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--fg) 38%, transparent); }
.opts i.black { background: #16181D; }
.opts i.white { background: #FFFFFF; }
.opts i.oak { background: #C9A777; }

/* the frame preview: the artwork in a room, to scale. The room is drawn in centimetres (svg/room-day.svg and
   room-night.svg: 220 wide, 225 high, the floor 22 above the bottom edge, a sideboard 160 wide); --cm is one
   centimetre here, --w and --h are the print, --face the width of the frame's moulding. The print hangs with its
   middle 140 cm above the floor. */
.room { width: min(100%, 42rem); margin: 0; }
.room figcaption { padding-top: .8rem; color: var(--fg2); font-size: .9375rem; }
.wall { position: relative; aspect-ratio: 220 / 225; overflow: hidden; container-type: inline-size;
  background: var(--room-wall) var(--room) center / 100% 100% no-repeat; }
.wall > * { --cm: calc(100cqw / 220); }
.wall-piece { --w: 50; --h: 70; --face: 2; position: absolute; left: 50%; translate: -50% 0; width: calc((var(--w) + 2 * var(--face)) * var(--cm));
  bottom: calc((22 + 140 - (var(--h) + 2 * var(--face)) / 2) * var(--cm)); filter: brightness(var(--room-dim));
  transition: width .35s ease, bottom .35s ease; }
.product[data-size="30x40"] .wall-piece { --w: 30; --h: 40; }
.product[data-size="60x90"] .wall-piece { --w: 60; --h: 90; }
.product[data-shape="landscape"] .wall-piece { --w: 70; --h: 50; }
.product[data-shape="landscape"][data-size="30x40"] .wall-piece { --w: 40; --h: 30; }
.product[data-shape="landscape"][data-size="60x90"] .wall-piece { --w: 90; --h: 60; }
/* the frame: its moulding, the shadow it throws to the lower right (the light comes from the left), and the glass */
.frame { --f1: #2B2E34; --f2: #14161A; position: relative; padding: calc(var(--face) * var(--cm));
  background: linear-gradient(135deg, var(--f1), var(--f2) 46%, var(--f1));
  box-shadow: 0 0 0 .5px rgba(var(--room-shade), .45), calc(.5 * var(--cm)) calc(1 * var(--cm)) calc(1.8 * var(--cm)) rgba(var(--room-shade), .26),
    calc(1.6 * var(--cm)) calc(3.2 * var(--cm)) calc(7 * var(--cm)) rgba(var(--room-shade), .24); }
.frame::after { content: ""; position: absolute; inset: calc(var(--face) * var(--cm)); pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .05));
  box-shadow: inset 0 calc(.2 * var(--cm)) calc(.55 * var(--cm)) rgba(0, 0, 0, .5), inset 0 0 0 .5px rgba(0, 0, 0, .5); }
.product[data-finish="white"] .frame, .frame[data-finish="white"] { --f1: #FBFAF7; --f2: #E4E2DC; }
.product[data-finish="oak"] .frame, .frame[data-finish="oak"] { --f1: #D9BD94; --f2: #B8935F; }
/* a print without a frame: the sheet alone on the wall */
.frame.bare { padding: 0; background: none; box-shadow: calc(.3 * var(--cm)) calc(.7 * var(--cm)) calc(1.6 * var(--cm)) rgba(var(--room-shade), .3); }
.frame.bare::after { inset: 0; background: none; box-shadow: none; }

/* the artwork: the engine's picture, with its caption set in type where annotate.py puts it */
.artwork { position: relative; margin: 0; aspect-ratio: var(--ar, 5 / 7); overflow: hidden; background: var(--night); container-type: inline-size; }
.artwork img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.artwork:has(.artwork-cap)::after { content: ""; position: absolute; inset: calc(var(--scrim) * 100%) 0 0;
  background: linear-gradient(rgba(4, 6, 10, 0), rgba(4, 6, 10, .09) 22%, rgba(4, 6, 10, .3) 50%, rgba(4, 6, 10, .51) 78%, rgba(4, 6, 10, .6)); }
.artwork-cap { position: absolute; inset: 0; z-index: 1; color: #ECF0F6; font-family: var(--wide); font-weight: 300; text-align: center; text-transform: uppercase; }
.artwork-cap > * { position: absolute; inset-inline: 0; top: calc(var(--y) * 100%); translate: 0 -50%; line-height: 1; white-space: nowrap; }
.artwork-cap .n { font-size: calc(var(--s0) * 100cqw); letter-spacing: .2em; margin-right: -.2em; opacity: .92; }
.artwork-cap .d { font-size: calc(var(--s1) * 100cqw); letter-spacing: .18em; margin-right: -.18em; color: #C8D0DE; opacity: .84; }
.artwork-cap .f { font-size: calc(var(--s2) * 100cqw); letter-spacing: .08em; text-transform: none; color: #A8B1C4; opacity: .75; }
.artwork-cap .r { left: 50%; right: auto; width: calc(var(--hw) * 200cqw); margin-left: calc(var(--hw) * -100cqw); height: 1px; background: rgba(200, 208, 222, .36); translate: 0 0; }

.sheet-print { width: min(100%, 28rem); box-shadow: 0 1px 2px rgba(11, 16, 32, .22), 0 30px 44px -32px rgba(11, 16, 32, .5); }
.product[data-shape="landscape"] .sheet-print { width: min(100%, 38rem); }
.product[data-caption="none"] .artwork-cap, .product[data-caption="none"] .artwork::after { display: none; }      /* a wallpaper of the sky alone */
.devices { position: relative; width: min(100%, 40rem); padding: 0 0 7% 0; }
.screen { border: clamp(5px, .8vw, 9px) solid #16181D; border-radius: clamp(6px, 1vw, 10px); overflow: hidden; background: var(--night);
  box-shadow: 0 40px 56px -40px rgba(11, 16, 32, .6); }
.screen img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.phone { position: absolute; right: 5%; bottom: 0; width: 21%; border: clamp(3px, .5vw, 6px) solid #16181D; border-radius: clamp(10px, 1.8vw, 20px); overflow: hidden; background: var(--night);
  box-shadow: 0 24px 34px -22px rgba(11, 16, 32, .7); }
.phone img { width: 100%; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: 50% 100%; }

/* ---------------------------------------------------------- look again */
.look { background: var(--bg); color: var(--fg); padding-top: var(--band); }
.look-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.switches { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; margin: 1.6rem 0 0; padding: 0; border: 0; font-size: .9375rem; color: var(--fg2); }
.switches label { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; }
.switches input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); }
.look-sky, .look-pic { position: relative; }
.look-pic { background: #05070C; }
.look-pic img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sky-map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; -webkit-user-select: none; user-select: none; }
.sky-map.tall { display: none; }
@media (max-aspect-ratio: 4/5) {
  .look-pic img { aspect-ratio: 9 / 16; }
  .sky-map.wide { display: none; }
  .sky-map.tall { display: block; }
}
/* The names are set as the artwork sets its caption: the wide cut, light and letter-spaced, with no outline. A soft
   shadow under the whole drawing keeps them readable over the star clouds. Sizes and tracking are the ones
   tools/make_site.py measures the names with when it places them (sky_svg). */
.sky-map { filter: drop-shadow(0 0 calc(1.5px * var(--u)) rgba(4, 6, 10, .9)) drop-shadow(0 0 calc(7px * var(--u)) rgba(4, 6, 10, .55)); }
.sky-map text { font-family: var(--wide); font-weight: 300; font-size: calc(11.5px * var(--u)); letter-spacing: .08em; fill: #DCE3EE; fill-opacity: .8; }
.sky-lines { fill: none; stroke: #96B0DC; stroke-opacity: .36; stroke-width: calc(1px * var(--u)); stroke-linecap: round; }
.sky-const text { font-size: calc(12.5px * var(--u)); letter-spacing: .32em; text-transform: uppercase; fill: #AABEE6; fill-opacity: .6; }
.sky-dso text { font-size: calc(10.5px * var(--u)); fill: #D3C6E2; fill-opacity: .66; }
.sky-body text { font-size: calc(15px * var(--u)); letter-spacing: .24em; text-transform: uppercase; fill: #F2F5F9; fill-opacity: .95; }
.sky-pt { cursor: pointer; outline: none; }
.sky-pt .hit { fill: transparent; }
.sky-pt .ring { fill: none; stroke: #FFCC70; stroke-width: calc(1.5px * var(--u)); opacity: 0; transition: opacity .15s; }
.sky-pt:hover .ring, .sky-pt:focus-visible .ring, .sky-pt.on .ring { opacity: 1; }
.sky-pt:hover text, .sky-pt:focus-visible text, .sky-pt.on text { fill: #fff; fill-opacity: 1; }
.look[data-off~="lines"] .sky-lines, .look[data-off~="lines"] .sky-const, .look[data-off~="stars"] .sky-star text, .look[data-off~="dso"] .sky-dso { display: none; }
.readout { display: grid; align-content: start; gap: .3rem 2.5rem; min-height: 7rem; padding: 1.6rem var(--gutter) 0; background: var(--bg); }
@media (min-width: 58em) and (min-aspect-ratio: 4/5) {      /* a wide picture: the readout sits in the dark of its ground */
  .readout { position: absolute; inset: auto 0 0; min-height: 0; padding: 0 var(--gutter) clamp(1.5rem, 3.2vw, 3rem); background: none;
    max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; pointer-events: none; }
}
/* what the pointer is on, written like the caption of the artwork: name, hairline, the facts in small capitals */
.readout h3 { font: 300 clamp(.95rem, .82rem + .45vw, 1.2rem)/1.4 var(--wide); letter-spacing: .2em; text-transform: uppercase; margin: 0; }
.readout h3::after { content: ""; display: block; width: 3.4rem; height: 1px; margin: .7rem 0 .2rem; background: rgba(200, 208, 222, .4); }
.readout .sub { color: var(--fg2); font: 300 .8125rem/1.5 var(--wide); letter-spacing: .1em; margin: 0; }      /* Greek letters keep their case */
.readout ul { display: flex; flex-wrap: wrap; gap: .2rem 2.4rem; margin: .45rem 0 0; padding: 0; list-style: none;
  font: 400 .75rem/1.7 var(--wide); letter-spacing: .15em; text-transform: uppercase; font-feature-settings: "case"; }
.readout li { color: var(--fg2); }
.readout li b { color: var(--fg); font-weight: 400; }

/* ---------------------------------------------------------- the Almanac */
/* What the engine words itself (the Almanac card, its specimen) stands in the page once per language; the page shows
   its own. ponytail: one pair of selectors per language beside English; a third language adds its pair here. */
[data-lang] { display: none; }                                         /* what the page holds once per language shows in the page's own */
html[lang="en"] [data-lang="en"], html[lang="de"] [data-lang="de"], html[lang="es"] [data-lang="es"], html[lang="pt"] [data-lang="pt"], html[lang="fr"] [data-lang="fr"], html[lang="it"] [data-lang="it"], html[lang="pl"] [data-lang="pl"], html[lang="hr"] [data-lang="hr"] { display: revert; }
.almanac-row { display: grid; gap: 3rem; align-items: start; }
.almanac-row > * { min-width: 0; }
.almanac-say .fact { margin-top: 1.8rem; padding-left: 1.1rem; border-left: 2px solid var(--accent); }
@media (min-width: 62em) {
  .almanac-row { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; }
  .almanac-say { grid-column: 1 / 6; position: sticky; top: calc(var(--bar) + 2.5rem); }
  .almanac { grid-column: 7 / 13; }
}
.almanac { --fg: #0B1020; --fg2: #5A6273; --line: rgba(11, 16, 32, .16); background: var(--cream); color: var(--fg); padding: clamp(1.4rem, 3.2vw, 2.75rem);
  font-size: .875rem; line-height: 1.5; box-shadow: 0 1px 2px rgba(11, 16, 32, .14), 0 34px 50px -36px rgba(11, 16, 32, .45); }
.almanac p { max-width: none; }
.almanac-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.almanac-brand { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: .6rem; }
.almanac-brand .mark { width: 1.7rem; height: 1.7rem; }
.almanac-brand .word { height: .52rem; width: auto; }
.almanac-line { height: 2px; margin: .8rem 0 1.5rem; background: var(--horizon); }
.almanac h3 { font: 500 1rem/1.3 var(--wide); letter-spacing: .2em; text-transform: uppercase; margin: 0 0 .9rem; }
.almanac h4 { font: 600 .875rem/1.4 var(--text); margin: 1.6rem 0 .35rem; }
.almanac .where { margin: 0 0 .2rem; }
.almanac table { width: 100%; border-collapse: collapse; }
.almanac th, .almanac td { padding: .42rem .75rem .42rem 0; border-top: 1px solid var(--line); text-align: left; vertical-align: baseline; font-weight: 400; }
.almanac tr:last-child > * { border-bottom: 1px solid var(--line); }
.almanac thead th { border-top: 0; color: var(--fg2); font-size: .8125rem; padding-top: 0; }
.almanac td.fig, .almanac th.num { text-align: right; padding-right: 0; padding-left: .75rem; }
.almanac td.fig { font-size: .8125rem; }
@media (max-width: 30em) {
  .almanac { font-size: .8125rem; }
  .almanac th, .almanac td { padding-right: .45rem; }
  .almanac td.fig, .almanac th.num { padding-left: .45rem; }
  .almanac td.fig, .almanac thead th { font-size: .75rem; }
}
.almanac .sm { color: var(--fg2); font-size: .8125rem; }
.almanac-foot { margin-top: 1.8rem; }
.almanac-foot p { margin: 0; }
.almanac-scroll { overflow-x: auto; }
.front { margin: clamp(2.5rem, 6vw, 4.5rem) 0 0; }
.front a { display: block; border: 1px solid var(--line); background: #fff; }
.front img { width: 100%; }
.front figcaption { padding-top: .8rem; color: var(--fg2); font-size: .9375rem; }

/* -------------------------------------------------------------- details */
.details { display: grid; gap: 2rem 1.5rem; }
.detail { margin: 0; }
.detail-pic { display: block; position: relative; overflow: hidden; background: var(--night); }
.detail-pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.scale { position: absolute; left: 1rem; bottom: .9rem; width: calc(var(--bar-w) * 1%); height: 7px; border: solid rgba(255, 255, 255, .85); border-width: 0 1px 1px; }
.scale span { position: absolute; left: 0; bottom: 9px; color: rgba(255, 255, 255, .9); font: 400 .72rem/1 var(--mono); white-space: nowrap; text-shadow: 0 0 6px rgba(4, 6, 10, .9); }
.detail figcaption { padding-top: .8rem; color: var(--fg2); font-size: .9375rem; }
@media (min-width: 52em) { .details { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------- layers */
.build { display: grid; gap: 2rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.build-view { position: relative; margin: 0; aspect-ratio: 5 / 7; overflow: hidden; background: #000; box-shadow: 0 1px 2px rgba(11, 16, 32, .2), 0 30px 44px -34px rgba(11, 16, 32, .5); }
.build-view picture, .build-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.build-view picture { opacity: 0; transition: opacity .35s ease; }
.build-view picture:first-child, .build:not(:has(:checked)) .build-view picture { opacity: 1; }      /* no choice known: the whole artwork */
.build:has([value="2"]:checked) .build-view picture:nth-child(-n+2), .build:has([value="3"]:checked) .build-view picture:nth-child(-n+3),
.build:has([value="4"]:checked) .build-view picture:nth-child(-n+4), .build:has([value="5"]:checked) .build-view picture:nth-child(-n+5),
.build:has([value="6"]:checked) .build-view picture { opacity: 1; }
@supports not selector(:has(a)) { .build-view picture { opacity: 1; } }
.build-steps { margin: 0; padding: 0; border: 0; min-width: 0; }
.build-steps legend { padding: 0; margin-bottom: .9rem; color: var(--fg2); font-size: .9375rem; }
.build-steps label { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1.1rem; align-items: center; padding: .8rem .9rem .8rem 1rem; border-top: 1px solid var(--line);
  border-left: 2px solid transparent; cursor: pointer; }
.build-steps label:last-child { border-bottom: 1px solid var(--line); }
.build-steps label:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.build-steps label:has(:checked) { border-left-color: var(--accent); background: var(--surface); }
.build-steps label:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.build-steps input { position: absolute; opacity: 0; pointer-events: none; }
.build-steps img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; background: #000; }
.build-steps span { color: var(--fg2); font-size: .9375rem; line-height: 1.45; }
.build-steps b { display: block; color: var(--fg); font-weight: 600; font-size: 1.0625rem; }
@media (min-width: 58em) {
  .build { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: center; }
  .build-view { grid-column: 1 / 6; }
  .build-steps { grid-column: 7 / 13; }
}
/* the six layers on the first page: one after the other, each leading to its part of made.html (a layer alone is dark
   to its edge: a hairline keeps its sheet apart from the night page) */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.strip a { display: block; color: var(--fg); text-decoration: none; }
.strip img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; background: #000; box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 9%, transparent), 0 1px 2px rgba(11, 16, 32, .2), 0 22px 30px -26px rgba(11, 16, 32, .5); }
.strip .fig { display: block; margin-top: .8rem; color: var(--fg2); font-size: .75rem; letter-spacing: .08em; }
.strip b { display: block; font-weight: 600; font-size: .9375rem; line-height: 1.35; }
.strip a:hover b { text-decoration: underline; text-underline-offset: .2em; }
@media (min-width: 52em) { .strip { grid-template-columns: repeat(6, 1fr); gap: 1.5rem; } }
.strip + .act { margin: 0 0 clamp(3rem, 6vw, 5rem); }

/* ---------------------------------------------- how it is made (made.html) */
.made-top { padding-top: calc(var(--bar) + clamp(3rem, 7vw, 5.5rem)); }
.made-top .build { margin-bottom: 0; }
.build-view figcaption { position: absolute; inset: auto 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .1em 1.6em; padding: 2.2rem 1rem 1.1rem;
  background: linear-gradient(rgba(4, 6, 10, 0), rgba(4, 6, 10, .6)); color: rgba(226, 232, 242, .86);
  font: 400 clamp(.62rem, .56rem + .2vw, .72rem)/1.6 var(--wide); letter-spacing: .17em; text-transform: uppercase; }
.build-view figcaption .fig { font-size: 1.04em; letter-spacing: .08em; }
.layers { display: grid; gap: clamp(4rem, 9vw, 8rem); }
.layer { display: grid; gap: 2rem; align-items: center; scroll-margin-top: calc(var(--bar) + 1.5rem); }
.layer-pic { width: min(100%, 30rem); margin: 0 auto; aspect-ratio: 5 / 7; overflow: hidden; background: #000; box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 9%, transparent), 0 1px 2px rgba(11, 16, 32, .2), 0 30px 44px -34px rgba(11, 16, 32, .5); }
.layer-pic img { width: 100%; height: 100%; object-fit: cover; }
.layer-no { margin: 0 0 .7rem; color: var(--fg2); font: 500 .8125rem/1 var(--mono); letter-spacing: .1em; }
.layer h2 { margin-bottom: .7em; }
.layer .lead { margin-bottom: .9em; }
.layer .sheet { margin: 1.8rem 0 0; }
.layer .sheet > div { grid-template-columns: 5.75rem 1fr; }
.held { margin-top: 1.7rem; padding-left: 1.1rem; border-left: 2px solid var(--accent); }
.held h3 { margin: 0 0 .3rem; color: var(--fg2); font: 400 .6875rem/1.5 var(--wide); letter-spacing: .17em; text-transform: uppercase; }
.held ul { margin: 0; padding: 0; list-style: none; }
.held li { color: var(--fg2); }
.held b { margin-right: .3em; color: var(--fg); font: 500 .96em var(--mono); font-variant-numeric: tabular-nums; }
@media (min-width: 58em) {
  .layer { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; }
  .layer-pic, .layer-say { grid-row: 1; }
  .layer-pic { grid-column: 1 / 6; }
  .layer-say { grid-column: 7 / 13; }
  .layer:nth-child(even) .layer-pic { grid-column: 8 / 13; }
  .layer:nth-child(even) .layer-say { grid-column: 1 / 7; }
}
.grade { margin-bottom: clamp(3rem, 6vw, 5rem); }
.made .order h2 { font: 300 clamp(1.125rem, .8rem + 1.5vw, 2rem)/1.35 var(--wide); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1em; }

.rules { display: grid; gap: 2rem 1.5rem; margin-bottom: 2.5rem; }
.rules > div { padding-top: 1.2rem; border-top: 1px solid var(--line); }
.rules p { margin: 0; }
@media (min-width: 52em) { .rules { grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 6vw, 6rem); } }

/* ---------------------------------------------------- moments */
.moments { display: grid; gap: 2.5rem 1.5rem; }
.moment { margin: 0; }
.moment .artwork { box-shadow: 0 1px 2px rgba(11, 16, 32, .2), 0 30px 44px -34px rgba(11, 16, 32, .5); }
.moment figcaption { padding-top: 1.1rem; }
.moment figcaption b { display: block; font-weight: 600; }
.moment figcaption .fig { color: var(--fg2); white-space: normal; }
.moment figcaption p { margin: .35rem 0 0; color: var(--fg2); font-size: .9375rem; }
@media (min-width: 46em) { .moments { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------- founder, questions */
.founder, .faq { display: grid; gap: 1rem; }
.sign { margin: 1.8rem 0 0; font: 400 .8125rem/1.4 var(--wide); letter-spacing: .18em; text-transform: uppercase; }
@media (min-width: 58em) {
  .founder, .faq { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; }
  .founder h2, .faq h2 { grid-column: 1 / 5; }
  .founder-say, .faq-list { grid-column: 6 / 13; }
}
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.05rem 0; font-weight: 500; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: .6rem; height: .6rem; margin-right: .2rem; border: solid var(--fg2); border-width: 0 1.5px 1.5px 0; rotate: 45deg; translate: 0 -25%; transition: rotate .2s; }
.faq-list details[open] summary::after { rotate: 225deg; translate: 0 25%; }
.faq-list details p { margin: 0 0 1.3rem; color: var(--fg2); }

/* ----------------------------------------------------------------- order */
.order { padding-block: var(--band); background: var(--bg); color: var(--fg); text-align: center; }
.order .line { margin: 0 auto clamp(3rem, 7vw, 5.5rem); max-width: 22em; font: 300 clamp(1.25rem, .8rem + 2.3vw, 2.75rem)/1.35 var(--wide); letter-spacing: .2em; text-transform: uppercase; text-wrap: balance; }
.order h2 { font: 600 1.0625rem/1.4 var(--text); letter-spacing: 0; text-transform: none; margin-bottom: .6em; }
.order .lead { margin-inline: auto; max-width: 30em; }
.order-state { margin: 2rem auto 0; color: var(--fg2); }

/* ------------------------------------------------------------------ foot */
.foot { background: var(--bg); color: var(--fg2); border-top: 1px solid var(--line); font-size: .9375rem; }
.foot::after { content: ""; display: block; height: 2px; background: var(--horizon); }
/* the brand, then the two groups of links as columns (a link to a line, so no language wraps them), the note on a line of its own */
.foot-row { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 2rem 3rem; padding-block: 2.75rem 2rem; }
.foot .brand { grid-column: 1 / -1; color: var(--fg); }
.foot-nav { display: flex; flex-direction: column; gap: .7rem; }
.foot-nav a { width: fit-content; color: inherit; text-decoration: none; white-space: nowrap; }
.foot-nav a:hover, .foot-nav a[aria-current] { color: var(--fg); text-decoration: underline; }
.foot-note { grid-column: 1 / -1; margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--line); max-width: none; font-size: .8125rem; }
.foot-line { display: none; }
/* a wide window: the brand fills the room beside the links, large, with its line under it */
@media (min-width: 58em) {
  .foot-row { grid-template-columns: 1fr auto auto; grid-template-rows: auto 1fr; column-gap: clamp(3rem, 7vw, 7rem); row-gap: 0; padding-block: 3.5rem 2.25rem; }
  .foot .brand { grid-column: 1; grid-row: 1; justify-self: start; gap: clamp(1rem, 1.6vw, 1.5rem); }
  .foot .brand .mark { width: clamp(5rem, 8vw, 7.5rem); height: clamp(5rem, 8vw, 7.5rem); }
  .foot .brand .word { height: clamp(1.4rem, 2.3vw, 2.1rem); }
  .foot-line { display: block; grid-column: 1; grid-row: 2; margin: 1.1rem 0 0; max-width: none; font: 400 .8125rem/1.4 var(--wide); letter-spacing: .18em; text-transform: uppercase; font-feature-settings: "case"; }
  .foot-nav { grid-row: 1 / 3; }
  .foot-note { margin-top: 2.5rem; }
}

/* ------------------------------------------------- credits, legal pages */
.page { padding-top: calc(var(--bar) + clamp(3rem, 7vw, 5.5rem)); }
.page h1, .made h1 { font: 500 clamp(1.25rem, 1rem + 1.2vw, 2rem)/1.3 var(--wide); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1em; }
.page h2 { font: 600 1.125rem/1.4 var(--text); letter-spacing: 0; text-transform: none; margin: 2.4rem 0 .5rem; }
.page ul { max-width: 62ch; margin: 0 0 1em; padding-left: 1.2rem; }
.page li { margin-bottom: .45rem; }
.credits { margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.credits > div { display: grid; gap: .35rem 1.5rem; padding: 1.15rem 0; border-top: 1px solid var(--line); }
.credits > div:last-child { border-bottom: 1px solid var(--line); }
.credits dt { font-weight: 600; }
.credits dd { margin: 0; }
.credits dd p { margin: 0 0 .35rem; }
.credits dd p:last-child { margin: 0; }
.credits .lic { color: var(--fg2); font-size: .9375rem; }
.sources { margin: .6rem 0 0; padding: 0; list-style: none; max-width: 62ch; }
.sources li { margin: 0 0 .55rem; }
.sources b { display: block; font-weight: 600; }
@media (min-width: 52em) { .credits > div { grid-template-columns: 16rem 1fr; } }
/* what is still missing on a legal page: unmistakable, so that it cannot go live unnoticed */
mark.todo { padding: .05em .4em; border-radius: 2px; background: #FFE3A3; color: #0B1020; }
.todo-note { max-width: 62ch; padding: .8rem 1rem; border-left: 3px solid #FFCC70; background: color-mix(in srgb, #FFCC70 18%, var(--bg)); }
/* a legal page holds its text twice: German on the German page, English on every other */
html[lang="de"] .legal-en, html:not([lang="de"]) .legal-de { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* the whole sky: an upright print beside a landscape one */
.fullsky { display: grid; gap: 2.5rem 1.5rem; align-items: start; }
.fullsky figure { margin: 0; }
.fullsky img { display: block; width: 100%; height: auto; box-shadow: 0 1px 2px rgba(11, 16, 32, .2), 0 30px 44px -34px rgba(11, 16, 32, .5); }
.fullsky figcaption { padding-top: 1.1rem; color: var(--fg2); font-size: .9375rem; }
.fullsky figcaption p { margin: 0 0 .9rem; }
@media (min-width: 46em) { .fullsky { grid-template-columns: 5fr 7fr; } }

/* ==== Shape and surface: the system (October 2026) =====================================================================
   One rule for every part of the site; the shop's parts follow it in shop.css, the look tool in skyrender/static/style.css.
     pressed   a pill: everything a hand presses, whether it acts or picks one of a row of its like:
               buttons, switches, chips, the bar's and the film's controls                             --r-pill
     typed     soft: what is typed into (fields)                                                       --r-field
     held      softer: what holds something (cards, panels) and every picture of the pages: a piece
               cut from a print, a layer, a Moment, the room a print hangs in; the Almanac --r-hold
     paper     sharp: the Artwork in its frame on the wall, and the Preview with the stage it stands on
               (so also the Artwork in the basket, which is the Preview's own picture). Paper has corners.
   What is pressed has one of two heights: --h-press where it leads on (the way in, the next step, the tabs of the
   products), --h-small everywhere else (a chip, a switch, a button in a row of text or in the bar). It has one of three
   faces: the accent (the one way on), a tone (anything else), and glass over the sky (the bar's button and the film's
   on the first screen). Its words are set in one size; a button's are semibold, a choice's medium.
   What can be chosen stands on a tone (--tone), never in a hairline box. What is chosen stands out of it in a ring
   (--chosen), whatever its shape: one sign for it everywhere. Hairlines (--edge) only part the rows of a list. Movement
   only answers a hand (--ease). Palette and type are the brand's and unchanged (docs/BRAND.md). */
:root {
  --r-pill: 999px; --r-field: .75rem; --r-hold: 1.25rem;
  --h-press: 3.125rem; --h-small: 2.75rem;
  --tone: color-mix(in srgb, var(--fg) 5%, var(--bg));              /* where something can be chosen ... */
  --tone-2: color-mix(in srgb, var(--fg) 10%, var(--bg));           /* ... and under the pointer */
  --edge: color-mix(in srgb, var(--fg) 17%, transparent);           /* the edge of a field, the line between the rows of a list */
  --chosen: inset 0 0 0 2px var(--fg);
  --ease: .16s ease;
}
/* The four designs to choose from (8 October; one stays, then the switch goes): ?design=original|soft|round|rounder (site.js).
   round is the rule above. original is the site before 7 October: corners of 3 px and hairline boxes (the block below is off). */
html[data-design="original"] { --r-pill: 3px; --r-field: 3px; --r-hold: 3px; }
html[data-design="soft"] { --r-pill: .5rem; --r-field: .375rem; --r-hold: .5rem; }
html[data-design="rounder"] { --r-pill: 999px; --r-field: 1rem; --r-hold: 1.75rem; }

:where(html:not([data-design="original"])) {        /* the four designs to choose from: original turns this block off (?design=, site.js) */
/* pressed */
.button { min-height: var(--h-press); padding: 0 1.7rem; border-radius: var(--r-pill); font-weight: 600; letter-spacing: 0;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease), scale var(--ease); }
.button:active { scale: .98; }
.button.small { min-height: var(--h-small); padding: 0 1.25rem; font-size: .9375rem; }
.button.ghost { background: var(--tone); border-color: transparent; }
.button.ghost:hover { background: var(--tone-2); border-color: transparent; }
.skip { border-radius: var(--r-pill); }
.seg { gap: .25rem; width: fit-content; max-width: 100%; padding: .25rem; border-bottom: 0; border-radius: var(--r-pill); background: var(--tone); }
.seg button { min-height: calc(var(--h-press) - .5rem); margin-bottom: 0; padding: 0 1.4rem; border: 0; border-radius: var(--r-pill); font-size: .9375rem; transition: background-color var(--ease), color var(--ease), box-shadow var(--ease); }
.theme, .basket, .lang, .scrub-play, .scrub-next { border-radius: var(--r-pill); }
/* glass: over the sky of the first screen the bar's button and the film's two are of one kind */
.top .button, .scrub-play, .scrub-next { background: rgba(4, 6, 10, .3); border-color: rgba(226, 232, 242, .4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.top .button:hover, .scrub-play:hover, .scrub-next:hover { background: rgba(4, 6, 10, .45); border-color: #fff; }
.top.solid .button, .top.plain .button { -webkit-backdrop-filter: none; backdrop-filter: none; }
.opts { margin-bottom: 1.6rem; }
.opts legend { margin-bottom: .6rem; font-size: .875rem; }
.opts span { min-height: var(--h-small); padding: 0 1rem; border: 0; border-radius: var(--r-pill); background: var(--tone); font-weight: 500; transition: background-color var(--ease), box-shadow var(--ease); }
.opts label:hover span { background: var(--tone-2); }

/* chosen: the ring */
.opts input:checked + span, .seg button[aria-selected="true"], .build-steps label:has(:checked) { background: var(--bg); box-shadow: var(--chosen); }

/* held: cards, and the pictures of the pages. Sharp stays the Artwork in its frame on the wall (and the Preview, shop.css) */
.almanac, .detail-pic, .layer-pic, .build-view, .wall, .sheet-print, .sheet-print .artwork, .moment .artwork, .fullsky img, .front a { border-radius: var(--r-hold); }
.front a { overflow: hidden; }
.strip img { border-radius: var(--r-field); }
.screen { border-radius: var(--r-hold); }
.phone { border-radius: var(--r-hold); }
.build-steps label { margin-top: .5rem; padding: .7rem 1rem; border: 0; border-radius: var(--r-hold); background: var(--tone); transition: background-color var(--ease), box-shadow var(--ease); }
.build-steps label:last-child { border-bottom: 0; }
.build-steps label:hover { background: var(--tone-2); }
.build-steps label:has(:focus-visible) { outline-offset: 2px; }
.build-steps img { border-radius: calc(var(--r-field) / 2); }
.almanac-say .fact { border-radius: 0; }

/* the rows of a list keep their hairline, in the one colour */
.sheet > div, .rules > div, .faq-list details, .credits > div, .almanac th, .almanac td, .foot, .foot-note, .top.solid, .top.plain { border-color: var(--edge); }
}

/* the first screen: the way in stands clear of the foot of the screen, with the film's buttons and the place on its row */
@media (min-aspect-ratio: 801/1000) and (min-width: 56em) {
  .hero { --foot: clamp(2.4rem, 7vh, 4.2rem); }
  .hero-caption { padding-bottom: var(--foot); }
  .scrub-play, .scrub-next { bottom: 1.6rem; }
  .hero-place { translate: 0 calc(var(--foot) - 1.3rem); }      /* the place stays on the row of the buttons, at the foot of the screen */
}