:root {
  --paper: #f2eee5; --ink: #282721; --subtle: #75736c; --rule: #cfcbc2;
  --desk: #e1ddd4; --accent: #285be8; --shift: 0; --open: 0;
  --mono: "Courier New", Courier, monospace;
  --sans: Arial, Helvetica, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { margin: 0; background: var(--desk); color: var(--ink); font-family: var(--mono); }
a { color: inherit; }
button { color: inherit; font: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 20px; top: -90px; z-index: 20; padding: 12px 16px; background: var(--paper); }
.skip-link:focus { top: 10px; }
.sheet {
  position: relative; isolation: isolate;
  width: calc(100% - 64px + var(--shift) * 64px);
  max-width: calc(1120px + var(--shift) * 720px);
  min-height: calc(100svh - 64px + var(--shift) * 64px);
  margin: calc(32px - var(--shift) * 32px) auto;
  padding: 40px clamp(28px, 4.6vw, 74px) 21px;
  background: var(--paper);
  box-shadow: 0 8px 60px rgb(35 30 20 / calc(.1 - var(--shift) * .1));
  display: flex; flex-direction: column;
}
.paper-grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: calc(.6 - var(--shift) * .6); background-image: repeating-linear-gradient(1deg, transparent 0 2px, #3c302d05 3px, transparent 4px), repeating-linear-gradient(91deg, transparent 0 6px, #ffffff30 7px, transparent 8px); }
.identity { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 26px; border-bottom: 1px solid var(--rule); }
h1 { font-size: 19px; font-weight: 400; line-height: 1.15; letter-spacing: -.045em; margin: 0; }
h1 span { display: block; }
.identity-note { text-align: right; font: 10px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--subtle); padding-top: 3px; }
.identity-note span { display: block; }
.identity-note .tiny-infinity { font: 25px/.8 var(--sans); letter-spacing: 0; color: var(--accent); margin-top: 6px; opacity: var(--shift); }
.composition { flex: 1; display: grid; grid-template-columns: minmax(340px, .85fr) minmax(0, 1.15fr); align-items: stretch; gap: 20px; padding-top: 47px; padding-bottom: 33px; }
.story { position: relative; z-index: 2; align-self: start; }
.kicker { font: 9px/1.5 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--subtle); margin: 0 0 17px; }
.history { margin: 0; padding: 0; list-style: none; }
.history li { display: flex; align-items: baseline; gap: 16px; margin: 0; min-height: calc(47px - var(--open) * 17px); font-size: calc(28px - var(--open) * 9px); line-height: 1.45; letter-spacing: -.065em; --strike: 0; }
.history-index { color: var(--subtle); font: 9px/1 var(--mono); letter-spacing: 0; min-width: 16px; }
.history-word { position: relative; display: inline-block; padding-right: 4px; color: var(--ink); }
.history-detail { margin-left: 8px; font: 10px/1.4 var(--mono); letter-spacing: -.01em; white-space: nowrap; }
.strike { position: absolute; left: -4px; right: -2px; top: 53%; height: 1px; transform: scaleX(var(--strike)); transform-origin: left center; background: var(--ink); }
.future { margin-top: 26px; }
.future .kicker { margin-bottom: 14px; }
.keywords { list-style: none; padding: 0; margin: 0; font-family: var(--sans); font-size: clamp(35px, 3.38vw, 52px); font-weight: 400; letter-spacing: -.055em; line-height: 1.08; }
.keywords li { padding-bottom: 1px; }
.keywords li:last-child { color: var(--accent); }
.visual { position: relative; align-self: stretch; min-width: 0; margin: 0; min-height: 575px; }
.canvas-stage { position: absolute; inset: -20px -26px 55px -22px; }
.canvas-stage canvas { display: none; width: 100%; height: 100%; }
.portrait-fallback { position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%); margin: 0; font: 4.5px/1.15 var(--mono); letter-spacing: 0; white-space: pre; }
.js-ready .canvas-stage canvas { display: block; }
.js-ready .portrait-fallback { display: none; }
.art-caption { position: absolute; bottom: 23px; left: 32px; right: 0; display: flex; justify-content: space-between; align-items: center; font: 9px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--subtle); }
.caption-mark { color: var(--accent); font: 21px/.8 var(--sans); }
.art-caption::before { content: ''; position: absolute; top: -14px; left: 0; width: 34px; height: 1px; background: var(--rule); }
.phase-name { opacity: .8; }
.bottom-row { border-top: 1px solid var(--rule); padding-top: 15px; display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; }
.primary-nav { display: flex; align-items: center; gap: 27px; }
.primary-nav a, .primary-nav button { text-decoration: none; border: 0; background: none; padding: 9px 0; font: 12px/1.5 var(--mono); display: inline-flex; align-items: center; gap: 12px; }
.primary-nav a:hover, .primary-nav button:hover { color: var(--accent); }
.external-arrow { font: 18px/1 var(--sans); }
.controls { display: flex; align-items: center; gap: 10px; }
.controls button { background: none; border: 1px solid var(--rule); padding: 10px 13px; font: 10px/1.5 var(--mono); min-height: 39px; }
.controls button:hover { border-color: var(--accent); }
.controls #pause { min-width: 76px; }
.controls .control-icon { margin-right: 6px; font-family: var(--sans); }
.page-footer { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--subtle); font: 9px/1.5 var(--mono); }
.page-footer nav { display: flex; gap: 20px; }
.page-footer button { border: none; background: none; padding: 7px 0; font: inherit; }
.page-footer button:hover { color: var(--ink); }
.demo-label { text-transform: uppercase; letter-spacing: .12em; font-size: 8px; }
.is-digital { color-scheme: dark; }
.is-digital h1 { font-family: var(--sans); font-size: 24px; letter-spacing: -.055em; }
.is-digital .history-word { color: #9097a4; }
.is-digital .strike { background: #9097a4; }
.is-digital .history { letter-spacing: -.045em; }
.is-digital .primary-nav a, .is-digital .primary-nav button { font-family: var(--sans); font-size: 13px; }
.info-panel { width: min(460px, calc(100% - 40px)); padding: 43px 30px 30px; background: #101319; color: #f1f2f6; border: 1px solid #323943; box-shadow: 0 24px 90px #0008; font-family: var(--sans); }
.info-panel::backdrop { background: #0008; backdrop-filter: blur(4px); }
.info-panel h2 { font: 400 31px/1.1 var(--sans); letter-spacing: -.045em; margin: 18px 0; }
.info-panel p { font: 14px/1.7 var(--sans); color: #b4bcc9; }
.info-panel .panel-kicker { font: 9px/1.5 var(--mono); letter-spacing: .1em; }
.close-panel { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; background: none; color: #d4dae5; border: 1px solid #414854; font: 22px/1 var(--sans); }
.no-script-note { font: 12px/1.7 var(--mono); margin: 20px auto; padding: 0 24px; max-width: 600px; }
@media (min-width: 1550px) { .composition { grid-template-columns: minmax(470px, .85fr) minmax(0, 1.15fr); } .visual { min-height: 640px; } .keywords { font-size: 57px; } }
@media (min-width: 800px) and (max-height: 820px) { .sheet { padding-top: 27px; } .composition { padding-top: 29px; padding-bottom: 17px; } .visual { min-height: 526px; } .keywords { font-size: 39px; } .future { margin-top: 18px; } .identity { padding-bottom: 20px; } }
@media (max-width: 1040px) and (min-width: 800px) { .sheet { padding-inline: 32px; } .composition { grid-template-columns: minmax(300px, 1fr) minmax(0, 1fr); gap: 0; } .history li { font-size: calc(25px - var(--open) * 7px); } .keywords { font-size: 39px; } .art-caption { left: 0; } }
@media (max-width: 799px) {
  html { scrollbar-gutter: auto; }
  .sheet { width: calc(100% - 24px + var(--shift) * 24px); margin: calc(12px - var(--shift) * 12px) auto; min-height: calc(100svh - 24px + var(--shift) * 24px); padding: 23px 23px 18px; }
  .identity { padding-bottom: 19px; }
  h1 { font-size: 17px; }
  .is-digital h1 { font-size: 22px; }
  .identity-note { font-size: 8px; }
  .composition { grid-template-columns: 1fr; gap: 0; padding-top: 0; padding-bottom: 24px; }
  .visual { order: 0; min-height: 235px; height: 235px; margin-bottom: 5px; }
  .canvas-stage { inset: -4px -12px 16px; }
  .art-caption { left: 0; bottom: 9px; font-size: 7px; }
  .art-caption::before { display: none; }
  .caption-mark { font-size: 17px; }
  .story { order: 1; }
  .kicker { margin-bottom: 10px; font-size: 8px; }
  .history li { min-height: calc(33px - var(--open) * 7px); font-size: calc(23px - var(--open) * 6px); gap: 12px; }
  .history-detail { font-size: 9px; }
  .history-index { font-size: 8px; min-width: 13px; }
  .future { margin-top: 18px; }
  .future .kicker { margin-bottom: 10px; }
  .keywords { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: 5px; font-size: clamp(23px, 6.15vw, 37px); line-height: 1.15; letter-spacing: -.055em; }
  .bottom-row { padding-top: 10px; gap: 8px; }
  .primary-nav { gap: 22px; }
  .primary-nav a, .primary-nav button { font-size: 11px; }
  .is-digital .primary-nav a, .is-digital .primary-nav button { font-size: 12px; }
  .controls { gap: 7px; }
  .controls button { padding: 8px 10px; min-height: 36px; font-size: 9px; }
  .controls #pause { min-width: 72px; }
  .page-footer { margin-top: 11px; gap: 12px; font-size: 8px; }
  .demo-label { font-size: 7px; }
  .page-footer nav { gap: 18px; }
  .portrait-fallback { font-size: 2.9px; }
}
@media (max-width: 359px) { .sheet { padding-inline: 17px; } .visual { height: 209px; min-height: 209px; } .keywords { font-size: 22px; } .history-detail { font-size: 8px; margin-left: 6px; } .identity-note { font-size: 7px; } .controls button { font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }


/* Version 03: quieter typography; enlarged portrait; a single shared transition. */
:root { --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
.sheet { max-width: calc(1180px + var(--shift) * 720px); }
.composition { position: relative; isolation: isolate; }
.story { z-index: 2; }
.visual { z-index: 1; }
.canvas-stage { inset: -12px -20px 30px -15px; }
.canvas-stage canvas { position: absolute; inset: 0; }
#infinity-surface { z-index: 0; }
#portrait-infinity { z-index: 1; }
.healing-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.healing-flight { position: absolute; z-index: 6; transform-origin: top left; color: #c4d9e5; font-family: var(--sans); font-weight: 400; line-height: 1.08; letter-spacing: -.055em; pointer-events: none; opacity: 0; white-space: nowrap; }
.healing-flight, .healing-canvas { display: none; }
.js-ready .healing-flight, .js-ready .healing-canvas { display: block; }
#healing-source { display: inline-block; }
.keywords { line-height: 1.12; }
.art-caption { left: 18px; bottom: 5px; }
.caption-mark, .tiny-infinity { display: none !important; }
.is-digital .history-word { color: #969da7; }
.is-digital .strike { background: #969da7; }
.history li { letter-spacing: -.045em; }
.controls button { border-radius: 3px; border-color: transparent; font-family: var(--sans); font-size: 11px; }
.controls button:hover { border-color: var(--rule); }
.controls #pause { border: 1px solid var(--rule); }
.controls { gap: 5px; }
.page-footer { font-size: 10px; }
.primary-nav a, .primary-nav button { min-height: 40px; }
.page-footer button { min-height: 40px; }
@media (min-width: 800px) and (max-height: 820px) {
  .composition { padding-top: 25px; padding-bottom: 13px; }
  .visual { min-height: 490px; }
  .keywords { font-size: 38px; }
  .history li { min-height: calc(45px - var(--open) * 18px); }
}
@media (max-width: 799px) {
  .sheet { padding: 22px 23px 14px; }
  .visual { height: calc(300px - var(--shift) * 44px); min-height: 0; margin-bottom: 10px; }
  .canvas-stage { inset: 5px -9px 26px; }
  .art-caption { bottom: 5px; left: 0; }
  .keywords { font-size: clamp(22px, 6.05vw, 34px); line-height: 1.20; }
  .future { margin-top: 18px; }
  .history li { min-height: calc(31px - var(--open) * 7px); }
  .kicker { margin-bottom: 9px; }
  .page-footer { font-size: 9px; }
  .controls button { min-height: 40px; font-size: 10px; }
  .controls #pause { min-width: 76px; }
  .composition { padding-bottom: 18px; }
  .primary-nav { gap: 19px; }
  .page-footer nav { gap: 15px; }
  .demo-label { max-width: 150px; text-align: right; }
}
@media (max-width: 359px) {
  .sheet { padding-inline: 17px; }
  .visual { height: calc(261px - var(--shift) * 34px); }
  .controls button { padding-inline: 7px; font-size: 9px; }
  .keywords { font-size: 21px; }
}
@media (max-width: 799px) and (max-height: 700px) {
  .sheet { padding-top: 16px; }
  .identity { padding-bottom: 13px; }
  .visual { height: calc(230px - var(--shift) * 22px); }
  .future { margin-top: 11px; }
}

/* Version 04: continuously blended typography and colour, no scene switches. */
:root { --history-ink: #282721; }
.identity h1 { position: relative; min-height: 2.4em; font-size: 24px; }
.identity h1 .name-typed,
.identity h1 .name-modern { display: block; }
.identity h1 .name-typed {
  font: 19px/1.2 var(--mono); letter-spacing: -.045em;
  opacity: calc(1 - var(--shift));
}
.identity h1 .name-modern {
  position: absolute; left: 0; top: 0; font: 400 24px/1.15 var(--sans);
  letter-spacing: -.055em; opacity: var(--shift);
}
.history-word, .is-digital .history-word { color: var(--history-ink); }
.strike, .is-digital .strike { background: var(--history-ink); }
.primary-nav a, .is-digital .primary-nav a { font: 13px/1.5 var(--sans); }
.page-footer nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; padding-block: 7px;
}
.page-footer nav a:hover { color: var(--ink); }
.art-caption { opacity: .58; }
.controls button { min-height: 44px; }
.js-ready .canvas-stage { overflow: visible; }
@media (max-width: 799px) {
  .identity h1 { min-height: 50px; }
  .identity h1 .name-typed { font-size: 17px; }
  .identity h1 .name-modern { font-size: 22px; }
  .primary-nav a, .is-digital .primary-nav a { font-size: 12px; }
  .page-footer nav { flex-wrap: wrap; }
  .controls button { min-height: 44px; }
}
@media (max-width: 359px) { .page-footer { flex-wrap: wrap; gap: 2px; } }
/* The two information pages remain in the final, quiet dark appearance. */
.legal-page {
  --paper: #080b10; --desk: #080b10; --ink: #e8ebee;
  --subtle: #929ca8; --rule: #222932; --accent: #cba89f;
  --shift: 1; --open: 1; color-scheme: dark;
}
.legal-shell {
  width: min(1280px, 100%); min-height: 100svh; margin-inline: auto;
  padding: 38px clamp(24px,5.5vw,76px) 26px;
  display: flex; flex-direction: column; font-family: var(--sans);
}
.legal-header { display:flex; justify-content: space-between; align-items: start; gap:24px;
  padding-bottom:28px; border-bottom:1px solid var(--rule); }
.legal-brand { font: 400 24px/1.15 var(--sans); letter-spacing:-.05em; text-decoration:none; }
.legal-brand span { display:block; }
.legal-back { display:inline-flex; align-items:center; gap:12px; min-height:44px;
  font-size:13px; text-decoration:none; color:var(--subtle); }
.legal-back:hover { color:var(--ink); }
.legal-main { flex:1; padding-block:74px 100px; }
.legal-eyebrow { font:10px/1.5 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--subtle); margin:0 0 25px; }
.legal-main h1 { font:400 clamp(38px,6vw,76px)/1.04 var(--sans); letter-spacing:-.065em;
  margin:0 0 58px; overflow-wrap:anywhere; }
.legal-columns { display:grid; grid-template-columns: minmax(120px,.52fr) minmax(0,2fr); gap:35px; }
.legal-sidebar { color:var(--subtle); font:11px/1.8 var(--mono); }
.legal-sidebar p { margin-top:0; }
.legal-sidebar a { text-underline-offset:4px; }
.legal-copy { max-width:740px; min-width:0; font-size:16px; line-height:1.8; color:#b9c0ca; }
.legal-copy p { margin:0 0 22px; }
.legal-copy h2 { font:400 clamp(23px,2.5vw,30px)/1.25 var(--sans); letter-spacing:-.035em;
  color:var(--ink); margin:46px 0 18px; overflow-wrap:anywhere; hyphens:auto; }
.legal-copy h2:first-child { margin-top:0; }
.legal-copy h3 { font:500 18px/1.4 var(--sans); color:var(--ink); margin:28px 0 12px; }
.legal-copy a { text-underline-offset:4px; text-decoration-thickness:1px; overflow-wrap:anywhere; }
.legal-copy strong { color:var(--ink); font-weight:500; }
.legal-copy ul { padding-left:1.2em; margin-block:0 24px; }
.legal-copy li { margin-block:7px; }
.legal-copy .rights-note { border-left:1px solid #927970; padding-left:22px; margin:30px 0; }
.legal-copy .contact-address { color:var(--ink); font-size:18px; line-height:1.8; }
.legal-copy .source-link { font-size:13px; color:var(--subtle); }
.legal-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--rule); padding-top:14px; font:11px/1.5 var(--mono); color:var(--subtle); }
.legal-footer nav { display:flex; gap:24px; }
.legal-footer a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.legal-footer a[aria-current="page"] { color:var(--ink); }
@media (max-width:650px) {
  .legal-shell { padding-top:25px; }
  .legal-header { padding-bottom:23px; }
  .legal-brand { font-size:22px; }
  .legal-back { font-size:12px; }
  .legal-main { padding-block:48px 64px; }
  .legal-main h1 { margin-bottom:36px; }
  .legal-columns { grid-template-columns:1fr; gap:18px; }
  .legal-sidebar { font-size:10px; }
  .legal-copy { font-size:16px; }
  .legal-copy .contact-address { font-size:17px; }
  .legal-footer { gap:4px; }
}
@media print {
  .legal-page { --paper:white; --desk:white; --ink:black; --subtle:#444; --rule:#ccc; color-scheme:light; }
  .legal-shell { padding:0; }
  .legal-header, .legal-sidebar, .legal-footer { display:none; }
  .legal-columns { display:block; }
  .legal-main { padding:0; }
  .legal-copy, .legal-copy strong, .legal-copy h2 { color:black; }
  .legal-main h1 { font-size:32px; margin-bottom:25px; }
}

.legal-review-note {
  border-left: 2px solid #bda59b; background: #14171c; color: #c6cbd2;
  padding: 16px 20px; margin: 0 0 30px; font-size: 14px; line-height: 1.7;
}
.legal-review-note strong { color: #e8ebee; }


/* Version 05. Responsive preview using the approved asymmetric plasma material. */
.identity-note { display:none; }
.art-caption { display:none; }
.composition { grid-template-columns:minmax(315px,.62fr) minmax(0,1.38fr); gap:26px; }
.visual { min-height:550px; }
.canvas-stage { inset:-10px -25px 0 -30px; }
.history-word { font-family:var(--sans); letter-spacing:-.02em; }
.history li { min-height:calc(46px - var(--open)*14px); }
.history-index { min-width:17px; }
.history-section, #future-title { will-change:opacity; }
.keywords { font-size:clamp(37px,3.55vw,57px); line-height:1.1; font-weight:300; }
.future { margin-top:35px; }
.is-digital .history-word { color:#d2d8df; }
.healing-flight { font-weight:300; }
.controls button:disabled { border-color:transparent; }
@media(min-width:1550px){.composition {grid-template-columns:minmax(360px,.62fr) minmax(0,1.38fr);} .visual {min-height:660px;} }
@media(min-width:800px) and (max-height:820px){.visual {min-height:510px;} .keywords {font-size:39px;} .future {margin-top:23px;} }
@media(min-width:800px) and (max-width:1040px){.composition {grid-template-columns:290px minmax(0,1fr);gap:15px;} .canvas-stage {inset:0 -15px 0 -20px;} }
@media(max-width:799px){
 .composition {grid-template-columns:1fr;gap:0;}
 .visual {height:calc(300px - var(--shift)*20px);min-height:0;}
 .canvas-stage {inset:0 -12px 0 -12px;}
 .history li {min-height:calc(32px - var(--open)*5px);}
 .keywords {font-size:clamp(22px,6.05vw,34px);line-height:1.2;}
 .future {margin-top:23px;}
}
@media(max-width:359px){.visual {height:250px;} .keywords {font-size:21px;} }

/* Version 07: overlapping words, no marks; the remaining words move up softly. */
.history {list-style:none;}
.history li {min-height:0;height:43px;display:block;overflow:visible;font-size:clamp(22px,1.95vw,29px);line-height:1.35;}
.history-word {padding:0;font-family:var(--mono);color:var(--history-ink);}
.is-digital .history-word {color:var(--history-ink);}
.history-section {overflow:visible;}
.history-section .kicker {height:32px;margin:0;overflow:hidden;}
.story {align-self:center;}
.future {margin-top:30px;}
.keywords {line-height:1.15;}
.keywords li {overflow:visible;}
.controls button {min-width:44px;min-height:44px;}
.demo-label {opacity:.75;}
@media(max-width:799px){
  .story {align-self:start;}
  .history li {height:34px;font-size:22px;line-height:1.35;}
  .history-section .kicker {height:25px;}
  .future {margin-top:20px;}
}

/* Version 08. No labels or label spacers. Text dissolves with generous overlap. */
:root { --ink-edge:0; }
.history-section { opacity:1; }
.future { margin-top:0; }
.history-word, .identity h1 {
  text-shadow:0 1px 1px rgba(0,0,0,calc(var(--ink-edge)*.60)),
              0 0 5px rgba(0,0,0,calc(var(--ink-edge)*.22));
}
.keywords li {
  --word-enter:1; --word-wave:0;
  transform-origin:left center;
  transform:translateY(calc((1 - var(--word-enter))*4px - var(--word-wave)*1.4px));
  filter:blur(calc((1 - var(--word-enter))*.22px));
  text-shadow:0 1px 1px rgba(0,0,0,calc(var(--ink-edge)*.60)),
              0 0 calc(9px + var(--word-wave)*10px) rgba(174,206,224,calc(var(--word-wave)*.28)),
              0 0 calc(16px + var(--word-wave)*15px) rgba(240,181,148,calc(var(--word-wave)*.15));
}
@media (prefers-reduced-motion:reduce) {
  .keywords li {transform:none;filter:none;text-shadow:none;}
}

/* Version 11: three information links. A link never breaks inside its words.
   In the narrow layout the third link always starts a second line, so the row
   cannot jump while the sheet widens during the transition. */
.primary-nav { flex-wrap: wrap; row-gap: 0; }
.primary-nav a { white-space: nowrap; }
@media (max-width: 799px) {
  .primary-nav::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
  .primary-nav a:nth-child(3) { order: 2; }
}

/* Version 14: the legal links (Impressum, Datenschutz) sit at the bottom right of the
   information row, where the animation controls used to be. They reuse the footer link
   styles through the .page-footer class; the footer keeps only the draft label on the right
   and its former height, so the page layout stays as it was. */
.bottom-row .legal-links { margin-top: 0; margin-left: auto; }
.page-footer > .demo-label:only-child { margin-left: auto; }
footer.page-footer { min-height: 44px; }

/* Version 14: the name at the top left is a link to the start page (reloads it).
   Same size and look as before; the link only adds the click area. */
.identity h1 .name-link { display: block; min-height: inherit; color: inherit; text-decoration: none; }

/* Version 15: marker for the script. If this file is missing, the script keeps the page static. */
:root { --css-ready: 1; }

/* Version 15: in the narrow layout (below 800 px) the legal links always stand on their own line,
   right-aligned, below the three main links. */
@media (max-width: 799px) {
  .bottom-row .legal-links { flex: 0 0 100%; justify-content: flex-end; }
}