/* Fonts, vendored (no Google Fonts request): subsets built by _tools/perf/subset-fonts.mjs, licences next to the files.
   Anybody keeps both axes (the display lines use wdth 68-128, weights 620-700). Instrument Sans is the text face, weights 400-700, width fixed at 100. */
@font-face { font-family: 'Anybody'; font-style: normal; font-weight: 300 800; font-stretch: 50% 150%; font-display: swap; src: url(../assets/fonts/anybody-latin-it.woff2) format('woff2');
  unicode-range: U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2002-200A, U+2010-2015, U+2018-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../assets/fonts/instrument-sans-latin-it.woff2) format('woff2');
  unicode-range: U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2002-200A, U+2010-2015, U+2018-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122, U+2212; }

/* Dimorio site: tokens (keep --ink and --volt in sync with js/config.js F.INK / F.VOLT) */
:root {
  --ink: #0D1730;        /* deep ink: the story */
  --paper: #FFFFFF;      /* daylight: prices and the app */
  --graphite: #16202C;   /* text on paper (v3 ink) */
  --mist: #A9B3C7;       /* secondary text on ink */
  --mute: #5D6778;       /* secondary text on paper */
  --line: #E4E7EE;       /* hairlines on paper */
  --volt: #3A57FF;       /* the one electric accent */
  --volt-deep: #2B45E6;  /* accent text and hover on paper */
  --display: 'Anybody', 'Instrument Sans', system-ui, sans-serif;
  --text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gut: clamp(20px, 5vw, 72px);
  --vh: 100vh;
  --svh: 100vh;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@supports (height: 100lvh) { :root { --vh: 100lvh; --svh: 100svh; } }

* { box-sizing: border-box; }
html { background: var(--ink); color: var(--paper); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.55 var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 30; background: var(--paper); color: var(--graphite); padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 500; }
.skip:focus { top: 12px; }

/* ---------- header ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  padding: calc(16px + env(safe-area-inset-top)) var(--gut) 16px; color: var(--paper); transition: color .35s; pointer-events: none; }
.nav a { pointer-events: auto; }
.nav.on-paper { color: var(--graphite); }
.plain .nav { background: rgba(13, 23, 48, .94); transition: color .35s, background .35s; }
.plain .nav.on-paper { background: rgba(255, 255, 255, .96); }
.mark { font: 700 23px/1 var(--display); font-variation-settings: 'wdth' 128; letter-spacing: -.01em; text-decoration: none; }
/* bar contents (action button, menu trigger) and the overlay: css/menu.css */

/* ---------- canvas and rail ---------- */
#gl { position: fixed; left: 0; top: 0; width: 100%; height: var(--vh); display: block; z-index: 0; pointer-events: none; }
.rail { position: fixed; right: calc(var(--gut) * .5); top: 50%; transform: translateY(-50%); z-index: 9; display: flex; flex-direction: column; gap: 2px; transition: opacity .4s; }
.rail.away { opacity: 0; pointer-events: none; }
.rail button { position: relative; display: block; width: 28px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--paper); }
.rail button::before { content: ''; position: absolute; right: 12px; top: 50%; width: 2px; height: 12px; margin-top: -6px; border-radius: 2px; background: rgba(169, 179, 199, .5); transition: height .4s var(--ease), margin .4s var(--ease), background .3s; }
.rail button[aria-current="step"]::before { height: 26px; margin-top: -13px; background: var(--volt); }
.rail button span { position: absolute; right: 26px; top: 50%; transform: translate(6px, -50%); white-space: nowrap; font-size: 14px; font-weight: 500; opacity: 0; transition: opacity .25s, transform .3s var(--ease); pointer-events: none; text-shadow: 0 1px 12px rgba(13, 23, 48, .8); }
.rail button:hover span, .rail button:focus-visible span { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 899px) { .rail { display: none; } }

/* ---------- story (shared) ---------- */
.step { position: relative; }
.copy { z-index: 2; }
.line { margin: 0; position: relative; font-family: var(--display); font-weight: 620; font-variation-settings: 'wdth' 80;
  font-size: clamp(44px, 7.4vw, 124px); line-height: .95; letter-spacing: -.028em; max-width: 12.5ch; text-wrap: balance; }
.hero-line { font-size: clamp(42px, 6.6vw, 112px); max-width: 14ch; }

/* ---------- story: GL mode ---------- */
.plain #gl, .plain .rail, .plain .knob { display: none; }
.gl .step { height: calc(var(--len, 280) * 1vh); }
.gl .step + .step { margin-top: calc(-1 * var(--vh)); }
.gl .stage { position: sticky; top: 0; height: var(--vh); overflow: hidden; }
.gl .plainfig { display: none; }
.gl .copy { position: absolute; left: var(--gut); right: var(--gut); bottom: calc(var(--vh) - var(--svh) + clamp(28px, 8vh, 96px));
  transform: translate3d(0, calc((.5 - var(--p, 0)) * 5vh), 0); will-change: transform; }
.gl .step-hero .copy { transform: none; }
.l-base { color: rgba(169, 179, 199, .46); }
.l-top { position: absolute; left: 0; top: 0; width: 100%; color: var(--paper); clip-path: inset(-.25em calc(100% - var(--p, 0) * 100%) -.25em 0); }
.gl .step-hero { cursor: default; touch-action: pan-y; }
/* hero poster: the real first frame as a plain image from the first paint, under the copy and above the canvas; js/story.js fades it out
   once the WebGL hero has drawn. Same crop as the shader (object-position is set inline), same fades into the ink. */
.poster { display: none; }
.gl .poster { display: block; position: absolute; inset: 0; z-index: 0; background: var(--ink); pointer-events: none; transition: opacity .3s ease; }
.gl .poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gl .poster::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(rgba(13, 23, 48, .5), rgba(13, 23, 48, 0) 16%), linear-gradient(rgba(13, 23, 48, 0) 38%, rgba(13, 23, 48, .45) 70%, #0D1730 100%); }
.gl .poster.pt { bottom: auto; height: 66%; }
.gl .poster.pt::after { background: linear-gradient(rgba(13, 23, 48, .5), rgba(13, 23, 48, 0) 21%), linear-gradient(rgba(13, 23, 48, 0) 70%, #0D1730 100%); }
.gl .poster.gone { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .gl .poster { transition: none; } }
@media (max-aspect-ratio: 9/10) {
  .gl .copy { bottom: auto; top: calc(var(--vh) * .6); }
}
@media (min-aspect-ratio: 9/10) {
  .gl .step-portrait .copy { right: auto; bottom: auto; top: 50%; max-width: 46vw; transform: translate3d(0, calc(-50% + (.5 - var(--p, 0)) * 5vh), 0); }
}
.knob { position: absolute; left: 0; top: 0; z-index: 3; width: 50px; height: 50px; margin: -25px 0 0 -25px; padding: 0; border: 0; border-radius: 50%;
  background: var(--paper); color: var(--ink); display: grid; place-items: center; cursor: ew-resize; box-shadow: 0 10px 30px rgba(5, 10, 30, .35); touch-action: none; }
.knob svg { width: 22px; height: 22px; }
.knob[hidden] { display: none; }

/* ---------- story: plain mode (no WebGL or reduced motion): v3 curtains ---------- */
.plain .step { padding: 0 var(--gut); }
.plain .step-hero { padding-top: 88px; }
.plain .stage { max-width: 1120px; margin: 0 auto; padding: clamp(36px, 7vh, 80px) 0; display: flex; flex-direction: column; gap: 24px; }
.plain .copy { position: static; }
.plain .line { font-size: clamp(36px, 6vw, 84px); }
.cur { margin: 0; max-width: calc(76vh * var(--arn, 1.5)); }
.cur-stage { position: relative; aspect-ratio: var(--ar); border-radius: 18px; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; background: #1B2747; cursor: ew-resize; }
.cur-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
picture { display: contents; } /* <picture> wrappers (AVIF / WebP / JPEG) must not create a box: the img inside is positioned against .cur-stage */
.cur-after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.cur-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--paper); box-shadow: 0 0 0 1px rgba(58, 87, 255, .55); pointer-events: none; }
.cur-handle { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); display: grid; place-items: center; cursor: ew-resize; box-shadow: 0 8px 24px rgba(5, 10, 30, .3); }
.cur-handle svg { width: 22px; height: 22px; }
.cur-strip { display: flex; justify-content: space-between; margin-top: 10px; }
.eye { display: inline-flex; gap: 8px; align-items: center; background: none; border: 0; color: var(--mist); font: 500 15px var(--text); padding: 10px 2px; cursor: pointer; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.eye svg { width: 20px; height: 20px; }
.eye[aria-pressed="true"] { color: var(--paper); }

/* ---------- prices: daylight ---------- */
.paper { position: relative; z-index: 4; background: var(--paper); color: var(--graphite); min-height: var(--vh); display: flex; flex-direction: column; }
.gl .paper { margin-top: calc(-1 * var(--vh)); }
.paper-in { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: clamp(104px, 16vh, 176px) var(--gut) clamp(56px, 9vh, 96px); }
.p-title { margin: 0 0 20px; font: 620 clamp(40px, 6.2vw, 100px)/.96 var(--display); font-variation-settings: 'wdth' 80; letter-spacing: -.028em; max-width: 13ch; text-wrap: balance; }
.p-lead { margin: 0 0 clamp(36px, 6vh, 64px); font-size: clamp(17px, 1.45vw, 20px); color: var(--mute); max-width: 52ch; }
.packs { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.packs::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), rgba(58, 87, 255, .1), transparent 70%); }
.pack { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; padding: clamp(22px, 3.6vh, 34px) 24px clamp(24px, 3.8vh, 36px) 0; }
.pack + .pack { border-left: 1px solid var(--line); padding-left: clamp(18px, 2.4vw, 32px); }
.pack .n { font: 640 clamp(64px, 8.4vw, 132px)/.86 var(--display); font-variation-settings: 'wdth' 68; letter-spacing: -.035em; }
.pack .u { font-size: 18px; color: var(--mute); }
.pack .eur { grid-column: 1 / -1; margin-top: 16px; font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.pack .per { grid-column: 1 / -1; font-size: 15px; color: var(--mute); }
.act { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: clamp(36px, 6vh, 64px); }
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 66px; padding: 0 36px; border-radius: 999px; background: var(--volt); color: #fff;
  font: 600 19px/1 var(--text); text-decoration: none; transition: transform .6s var(--ease), background .2s; will-change: transform; }
.cta span { display: inline-block; transition: transform .6s var(--ease); }
.cta:hover { background: var(--volt-deep); }
.cta:focus-visible { outline-color: var(--graphite); }
.act-note { margin: 0; color: var(--mute); }
.act-note a { color: var(--volt-deep); font-weight: 500; text-underline-offset: 4px; }
.foot { width: 100%; max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 22px var(--gut) calc(26px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: 15px; color: var(--mute); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--graphite); text-decoration: underline; text-underline-offset: 4px; }
.pv { margin-left: auto; }

@media (max-width: 699px) {
  .packs { grid-template-columns: 1fr; }
  .pack { grid-template-columns: auto auto 1fr; column-gap: 8px; padding: 20px 0; }
  .pack + .pack { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .pack .n { font-size: 64px; }
  .pack .eur { grid-column: 3; grid-row: 1; margin: 0; justify-self: end; font-size: 24px; }
  .pack .per { grid-column: 3; grid-row: 2; justify-self: end; }
  .cta { width: 100%; }
  .pv { margin-left: 0; }
}