/* Dimorio site layer: the Beta badge, load choreography, the journey on the home page, quality colours, scroll reveals and the 404 page.
   Loaded after v4.css, pages.css and menu.css. Everything that moves is driven by load or scroll (visible on a phone), never by hover alone,
   and is switched off under prefers-reduced-motion. */

/* ---------- wordmark + Beta badge ---------- */
.mark { display: inline-flex; align-items: center; gap: 10px; }
.beta { font: 600 11px/1 var(--text); font-variation-settings: normal; font-stretch: 100%; letter-spacing: .02em; padding: 4px 8px 5px; border-radius: 999px;
  border: 1px solid currentColor; opacity: .8; transform: translateY(1px); }

/* ---------- hero: sentence and call to action under the headline ---------- */
.hero-sub { margin: 20px 0 0; max-width: 40ch; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 18px rgba(13, 23, 48, .75); }
.hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 22px 0 0; }
.cta-sm { min-height: 56px; padding: 0 30px; font-size: 17px; }
.hero-beta { font-size: 15px; color: var(--mist); text-shadow: 0 1px 14px rgba(13, 23, 48, .8); }
.gl .hero-row, .gl .hero-sub { pointer-events: auto; }
.cta:focus-visible { outline-color: var(--volt); outline-offset: 4px; }
.step-hero .cta:focus-visible { outline-color: #fff; }

/* ---------- home: the journey (a real sequence, so it is numbered) ---------- */
.jr { margin: 0 0 clamp(72px, 12vh, 140px); }
.jr .p-title { max-width: 16ch; }
.jr-list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.jr-list > li { padding: 26px 28px 32px 0; border-bottom: 1px solid var(--line); }
.jr-list > li:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); padding-left: clamp(18px, 2.4vw, 32px); }
.jr-n { display: block; font: 640 clamp(56px, 6vw, 96px)/.86 var(--display); font-variation-settings: 'wdth' 68; letter-spacing: -.035em; color: var(--volt); }
.jr-list h3 { margin: 16px 0 8px; font: 620 clamp(24px, 2.3vw, 32px)/1.02 var(--display); font-variation-settings: 'wdth' 80; letter-spacing: -.02em; }
.jr-list p { margin: 0; max-width: 34ch; color: var(--mute); }
@media (max-width: 899px) {
  /* one column; a line runs down the numbers and fills with the scroll */
  .jr-list { display: block; border-top: 0; padding-left: 0; }
  .jr-list::before, .jr-list::after { content: ''; position: absolute; left: 21px; top: 22px; bottom: 40px; width: 2px; border-radius: 2px; }
  .jr-list::before { background: var(--line); }
  .jr-list::after { background: var(--volt); transform-origin: top; transform: scaleY(var(--jp, 0)); }
  .jr-list > li, .jr-list > li:not(:nth-child(3n + 1)) { position: relative; display: block; padding: 0 0 34px 64px; border: 0; }
  .jr-list > li:last-child { padding-bottom: 8px; }
  .jr-n { position: absolute; left: 0; top: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--paper);
    border: 2px solid var(--line); color: var(--graphite); font: 640 20px/1 var(--display); font-variation-settings: 'wdth' 100; letter-spacing: 0; transition: border-color .5s, color .5s, background .5s; }
  .rv .jr-list > li.in .jr-n { border-color: var(--volt); color: var(--volt); }
  .jr-list h3 { margin: 6px 0 6px; }
  .jr-list p { max-width: none; }
}

/* ---------- quality colours ---------- */
.qchips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.prose .qchips { padding: 0; margin: 16px 0 18px; }
.qchips li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 13px 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper);
  font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--graphite); }
.qchips li::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; }
.q-g { --c: #1F9D61; --k: 0; } .q-y { --c: #E5B800; --k: 1; } .q-o { --c: #E8742A; --k: 2; } .q-r { --c: #D6403A; --k: 3; }

/* ---------- home: the promise, as an ink block on the daylight band ---------- */
.promise { margin: 0 0 clamp(72px, 12vh, 140px); padding: clamp(28px, 4.4vw, 56px); background: var(--ink); color: var(--paper); border-radius: 22px; }
.promise h2 { margin: 0 0 18px; font: 620 clamp(34px, 4.6vw, 68px)/.98 var(--display); font-variation-settings: 'wdth' 80; letter-spacing: -.026em; max-width: 16ch; text-wrap: balance; }
.promise p { margin: 0 0 14px; max-width: 62ch; color: var(--mist); font-size: clamp(17px, 1.4vw, 19px); }
.promise .lnk { color: var(--paper); }
.pr .p-title { max-width: 14ch; }
.beta-note { margin: 18px 0 0; color: var(--mute); font-size: 15px; }

/* ---------- how it works: six steps, two columns of detail ---------- */
@media (min-width: 800px) {
  .steps.six li:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .steps.six li:nth-child(n + 4) { border-top: 1px solid var(--line); margin-top: 24px; }
}
.prose.split { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 6vw, 96px); margin-top: clamp(48px, 9vh, 96px); }
.prose.split section { max-width: 56ch; padding-bottom: 12px; }
.prose.split section > h2:first-child { margin-top: 0; }
@media (max-width: 799px) { .prose.split { grid-template-columns: 1fr; } .prose.split section + section { margin-top: 12px; } }

/* ---------- load choreography (once, on load) ---------- */
@keyframes dn-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes dn-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes dn-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .nav .mark, .pg-bar .mark { animation: dn-down .7s var(--ease) both; }
  .nav .bar-r, .pg-bar .bar-r { animation: dn-down .7s .12s var(--ease) both; }
  .hero-line { animation: dn-up .85s .12s var(--ease) both; }
  .hero-sub { animation: dn-up .9s .4s var(--ease) both; }
  .hero-row { animation: dn-up .9s .6s var(--ease) both; }
  .crumb { animation: dn-fade .6s .05s both; }
  .pg-title { animation: dn-up .85s .1s var(--ease) both; }
  .pg-lead { animation: dn-up .85s .28s var(--ease) both; }
  .nf-in > * { animation: dn-up .8s var(--ease) both; }
  .nf-in > :nth-child(2) { animation-delay: .12s; } .nf-in > :nth-child(3) { animation-delay: .24s; }
}

/* ---------- scroll reveals (html.rv is set by js/reveal.js, never under reduced motion) ---------- */
.rv [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.rv [data-reveal].in { opacity: 1; transform: none; }
.rv [data-reveal] .qchips li { opacity: 0; transform: scale(.82); transition: opacity .4s, transform .55s var(--ease); transition-delay: calc(.3s + var(--k, 0) * .13s); }
.rv [data-reveal].in .qchips li { opacity: 1; transform: none; }

/* ---------- 404 ---------- */
.nf { min-height: 100vh; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; }
.nf .nav { position: static; }
.nf-in { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: clamp(40px, 12vh, 140px) var(--gut) 64px; }
.nf-in h1 { margin: 0 0 18px; font: 620 clamp(52px, 9vw, 150px)/.92 var(--display); font-variation-settings: 'wdth' 76; letter-spacing: -.03em; max-width: 12ch; text-wrap: balance; }
.nf-in p { margin: 0 0 28px; max-width: 46ch; color: var(--mist); font-size: clamp(17px, 1.5vw, 20px); }
.nf-in .cta { text-decoration: none; }
.nf-it { margin-top: clamp(48px, 10vh, 96px); padding-top: 28px; border-top: 1px solid rgba(169, 179, 199, .28); }
.nf-it h2 { margin: 0 0 8px; font: 620 clamp(28px, 3.6vw, 48px)/1 var(--display); font-variation-settings: 'wdth' 80; letter-spacing: -.02em; }
.nf-it p { margin-bottom: 20px; }
.nf-it a { color: var(--paper); text-underline-offset: 4px; }
html[data-nf="it"] .nf-en, html[data-nf="en"] .nf-it { display: none; }
html[data-nf="it"] .nf-it { margin-top: 0; padding-top: 0; border-top: 0; }
html[data-nf="it"] .nf-it h2 { font-size: clamp(52px, 9vw, 150px); line-height: .92; font-variation-settings: 'wdth' 76; max-width: 12ch; margin-bottom: 18px; }

/* ---------- top bar: room for the Beta badge on a phone; legible over the ink and paper bands ---------- */
.nav.on-paper { background: rgba(255, 255, 255, .97); }

@media (max-width: 479px) {
  .mark { font-size: 19px; gap: 7px; }
  .beta { font-size: 10px; padding: 3px 6px 4px; }
  .bar-r { gap: 6px; }
  .bar-cta { padding: 0 14px; font-size: 14px; }
  .menu-t { display: none; }
  .menu-btn { margin: 0; padding: 0 6px; }
}
@media (max-width: 374px) { .mark { font-size: 17px; gap: 6px; } .bar-cta { padding: 0 11px; font-size: 13px; } }
@media (max-width: 899px) { .jr-n { z-index: 2; } .jr-list::before, .jr-list::after { z-index: 1; } }

/* ---------- home bar once the page has scrolled past the hero: solid, token-coloured (no title ghosting behind the wordmark) ---------- */
.nav.scrolled { background: rgba(13, 23, 48, .94); }
.nav.scrolled.on-paper { background: rgba(255, 255, 255, .97); box-shadow: 0 1px 0 var(--line); }
@supports (backdrop-filter: blur(1px)) { .nav.scrolled { background: rgba(13, 23, 48, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .nav.scrolled.on-paper { background: rgba(255, 255, 255, .97); } }
.menu-on .nav.scrolled, .menu-on .nav.scrolled.on-paper { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }