/* «Riviera» in the style of oddritualgolf.com (live CSS read 21/10/2026: odd-ritual-gc.webflow.css, styles-2026.css,
   the inline Lumos variables). Measures in comments are the reference at 1470x800 / 390x844.
   Colours only from the token store (tokens.css, compiled from brand-profiles/forma.json); the reference's roles map
   to FORMA's: white → warm white (neutral-99), black → brown-deep, #818181 → secondary-36 (AA on paper, the
   reference's grey is not), #ccc → sand, #f4f4f4 → sand-light, brand blue → brown. */

:root {
  --paper: var(--color-neutral-99);
  --ink: var(--color-brown-deep);
  --muted: var(--color-secondary-36);
  --faded: var(--color-sand);
  --surface: var(--color-sand-light);
  --brand: var(--color-brown);
  --night: var(--color-brown-deep);
  --on-night: var(--color-sand);
  --on-night-2: var(--color-sand-on-brown-secondary);
  --f-sans: var(--font-body);
  --f-serif: var(--font-display);
  /* Lumos fluid sizes of the reference */
  --margin: clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem);   /* 16 → 20 */
  --gutter: 0.625rem;                                       /* 10 */
  --h2: clamp(1.75rem, 1.5rem + 1.25vw, 2.625rem);          /* 28 → 42 */
  --num: clamp(1.75rem, 1.6786rem + 0.3571vw, 2rem);        /* 28 → 32 */
  --alt-l: clamp(1.1406rem, 1.0563rem + 0.3472vw, 1.375rem);/* 18.25 → 22 */
  --display: clamp(3.6rem, 2.5rem + 4.9vw, 7rem);           /* the SVG title «MORE THAN JUST GOLF», ~112 px */
  --sp-15: clamp(5rem, 1.389rem + 14.815vw, 15rem);         /* 80 → 240: section padding */
  --sp-10: clamp(6rem, 4.6rem + 5.88vw, 10rem);             /* 96 → 160 */
  --nav-h: 4.1875rem;                                       /* 67 */
  /* eases of the reference (CustomEase in scripts-2026.js; ease-2 and expo sampled into linear()) */
  --e1: cubic-bezier(.15, 0, .15, 1);
  --e2: linear(0, 0.127 2%, 0.232 4%, 0.321 6%, 0.396 8%, 0.463 10%, 0.547 13%, 0.618 16%, 0.696 20%, 0.773 25%, 0.833 30%, 0.892 36%, 0.942 43%, 0.970 50%, 0.988 60%, 0.995 70%, 0.998 80%, 1);
  --e3: cubic-bezier(.65, .01, .05, .99);
  --expo: linear(0, 0.129 2%, 0.242 4%, 0.384 7%, 0.5 10%, 0.621 14%, 0.713 18%, 0.797 23%, 0.856 28%, 0.905 34%, 0.938 40%, 0.964 48%, 0.979 56%, 0.99 66%, 0.996 78%, 1);
  --e-ui: cubic-bezier(.32, .72, 0, 1);
  color-scheme: light;
}
@media (max-width: 767px) { :root { --margin: 0.5rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--night); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1 var(--f-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--brand); color: var(--paper); }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
[hidden] { display: none !important; }

/* ---------- type (reference: body-upper, u-text-style-h2/h3/h4/small, text-style_alt-large/med, hero numbers) ---------- */
.t-upper { font: 600 0.875rem/1.1 var(--f-sans); text-transform: uppercase; }
.t-h2 { font: 600 var(--h2)/1 var(--f-sans); letter-spacing: -0.03em; text-transform: uppercase; }
.t-h3 { font: 500 var(--h2)/1 var(--f-sans); letter-spacing: -0.03em; }
.t-h4 { font: 600 1.125rem/1 var(--f-sans); text-transform: uppercase; }
.t-small { font: 400 0.875rem/1.3 var(--f-sans); color: var(--muted); }
.t-alt-l { font: 400 var(--alt-l)/1 var(--f-serif); text-transform: uppercase; }
.t-alt-m { font: 400 1rem/1 var(--f-serif); text-transform: uppercase; }
.t-num { font: italic 400 var(--num)/1 var(--f-serif); }
.t-display { font: 400 var(--display)/0.9 var(--f-serif); text-transform: uppercase; letter-spacing: -0.005em; }
.muted { color: var(--muted); }

/* bracketed label «( View all products )» — the brackets are thin, grey (reference: .orgc-detail + .detail-svg) */
.detail { display: inline-flex; align-items: center; gap: 0.375rem; font: 600 0.875rem/1.1 var(--f-sans); text-transform: uppercase; white-space: nowrap; }
.br { font: 400 1.15em/1 var(--f-serif); color: var(--muted); transform: translateY(-0.04em); }

/* ---------- grid (Lumos: 12 columns, gutter 10, margin 16→20; phone: one column, margin 8) ---------- */
.u-container { padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

/* ---------- logo (the traced client SVGs as masks, coloured by the token of the moment) ---------- */
.logo-mark, .logo-word, .logo-lockup { display: block; background: currentColor; mask: var(--src) center / contain no-repeat; -webkit-mask: var(--src) center / contain no-repeat; }
.logo-mark { --src: url(logo/forma-emblema.svg); aspect-ratio: 446 / 583; }
.logo-word { --src: url(logo/forma-wordmark.svg); aspect-ratio: 824 / 181; }
.logo-lockup { --src: url(logo/forma-lockup.svg); aspect-ratio: 1028 / 1080; }

/* ---------- nav (reference: .orgc-nav, 67 tall; logo 24 tall at 20,20; links right) ---------- */
.r-nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); color: var(--on-night); background: transparent; transition: transform .3s ease-out, background-color .3s; }
/* over the paper sections the nav is a solid brown bar with sand type (curator, 21/10 14:08: «manterrei una barra
   marrone nel menu fissa»); over the night it stays transparent, as on the reference */
.r-nav[data-theme="bar"] { background: var(--night); }
.r-nav.pull-up { transform: translateY(-100%); }
/* three columns, the two outer ones equal: the burger sits in the exact centre of the screen (curator 21/10 15:08:
   the reference's 110 px toggle at column 7 was «decentrata» with «linee troppo lunghe»: a classic two-line burger) */
.r-nav-in { height: 100%; padding-inline: var(--margin); display: grid; grid-template-columns: 1fr auto 1fr; column-gap: var(--gutter); align-items: center; }
.r-logo { display: block; width: max-content; justify-self: start; }
.r-logo .logo-word { height: 1.5rem; }
.r-toggle { position: relative; display: grid; place-content: center; gap: 6px; width: 2.75rem; height: 2.75rem; }
.r-toggle i { display: block; width: 1.625rem; height: 1.5px; background: currentColor; }
.r-toggle-text { position: absolute; left: 100%; top: 50%; margin-top: -0.48em; overflow: clip; pointer-events: none; }
.r-toggle-text span { display: block; transform: translateX(-105%); transition: transform .4s var(--e-ui); }
@media (hover: hover) { .r-toggle:hover .r-toggle-text span { transform: none; } }
.r-links { display: flex; gap: 1.25rem; align-items: center; justify-self: end; }
/* the cart icon keeps a 44 px hit area without moving off the margin */
.r-cart { display: inline-flex; align-items: center; gap: .25rem; padding: .6875rem; margin: -.6875rem; }
.r-cart-ico { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.r-count::before { content: "("; }
.r-count::after { content: ")"; }
@media (max-width: 767px) {
  .r-nav { height: 3.9375rem; }
  .r-logo .logo-word { height: 1.25rem; }
  .r-links { gap: 0.875rem; }
}

/* ---------- menu (reference: panels 55 % tall fall from -101 %; links h2 at column 7; close at column 12; photo below) ---------- */
.r-menu { position: fixed; inset: 0; z-index: 100; height: 100dvh; --menu-h: 55dvh; } /* the light panel's height */
.r-menu-overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--night) 40%, transparent); cursor: pointer; }
.r-menu-panel { position: relative; height: 100%; overflow: hidden; pointer-events: none; }
.r-menu-panel > * { pointer-events: auto; }
.r-menu-bg { position: absolute; inset: 0; pointer-events: none; }
.r-bg-full { position: absolute; inset: 0; overflow: hidden; background: var(--night); }
.r-menu-extras { position: absolute; inset: auto 0 0 0; padding-bottom: 1.25rem; align-items: end; color: var(--on-night); }
.r-menu-mark { grid-column: 1 / 2; width: 3.5rem; color: var(--on-night); }
.r-menu-sign { grid-column: 7 / 11; }
.r-menu-place { grid-column: 11 / 13; }
.r-bg-panel { position: absolute; inset: 0 0 auto 0; height: var(--menu-h); background: var(--paper); }
.r-bg-panel.first { background: var(--brand); }
.r-menu-inner { position: relative; z-index: 1; height: var(--menu-h); padding-block: 1.25rem; display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); }
.r-menu-layout { align-items: start; }
.r-menu-img { grid-column: 1 / 6; position: relative; }
/* the photo runs from the top of the panel's content to its bottom, at the same margin (curator 06/11/2026: «la
   ingrandiamo fino al limite del bordo… la tiriamo fino a giù»; it was one column, 96×120 px): its height is the
   panel's minus the two 1.25rem paddings, 4:5 from that, stopped at the fifth column on a tall, narrow window (the
   photo is then cropped at the sides). Taken out of the row, so the links' bottom row does not move. qa/menu_foto.mjs */
.r-menu-img-in { position: absolute; top: 0; left: 0; height: calc(var(--menu-h) - 2.5rem); width: min(100%, calc((var(--menu-h) - 2.5rem) * .8)); overflow: hidden; background: var(--surface); }
.r-menu-img-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.r-menu-img-in img.is-on { opacity: 1; }
.r-menu-list { grid-column: 7 / 12; }
.r-menu-list li { overflow: hidden; padding-right: .1em; }
.r-menu-link { display: block; padding-block: 0.125rem; transition: color .1s ease-out; }
@media (hover: hover) {
  .r-menu-list:hover .r-menu-link { color: var(--faded); }
  .r-menu-list .r-menu-link:hover { color: var(--brand); }
}
.r-menu-close { grid-column: 12 / 13; justify-self: end; }
.r-menu-bottom { align-items: end; }
.r-menu-bot { grid-column: 7 / 12; display: grid; gap: 0.25rem; justify-items: start; }
.r-menu-ig { grid-column: 12 / 13; justify-self: end; }
@media (max-width: 767px) {
  .r-menu { --menu-h: 65dvh; }
  .r-menu-img { display: none; }
  .r-menu-layout { grid-template-columns: 1fr auto; }
  .r-menu-layout > .r-menu-list { grid-column: 1 / 2; }
  .r-menu-layout > .r-menu-close { grid-column: 2 / 3; grid-row: 1; }
  .r-menu-bottom { grid-template-columns: 1fr auto; }
  .r-menu-bottom > .r-menu-bot { grid-column: 1 / 2; }
  .r-menu-bottom > .r-menu-ig { grid-column: 2 / 3; }
  .r-menu-extras { grid-template-columns: auto 1fr; row-gap: .25rem; }
  .r-menu-extras > .r-menu-mark { grid-column: 1 / 2; grid-row: 1 / 3; width: 2.5rem; margin-right: var(--gutter); }
  .r-menu-extras > .r-menu-sign, .r-menu-extras > .r-menu-place { grid-column: 2 / 3; justify-self: end; font-size: .75rem; }
}

/* ---------- bag (reference: Webflow cart, right sidebar) ---------- */
.bag-veil { position: fixed; inset: 0; z-index: 110; background: color-mix(in srgb, var(--night) 40%, transparent); opacity: 0; pointer-events: none; transition: opacity .6s var(--e1); }
.bag { position: fixed; inset: 0 0 0 auto; z-index: 111; width: min(28rem, 100vw); display: grid; grid-template-rows: auto 1fr auto; background: var(--paper); color: var(--ink); transform: translateX(100%); transition: transform .8s var(--e1); }
.bag-open .bag { transform: none; }
.bag-open .bag-veil { opacity: 1; pointer-events: auto; }
.bag-head { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem var(--margin); border-bottom: 1px solid var(--ink); }
.bag ul { margin: 0; padding: 0 var(--margin); overflow: auto; }
.bag-item { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: var(--gutter); align-items: start; padding: var(--gutter) 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); }
.bag-item img { width: 5.5rem; aspect-ratio: 4 / 5; height: auto; object-fit: cover; background: var(--surface); }
.bag-name { font: 600 0.875rem/1.1 var(--f-sans); text-transform: uppercase; margin-bottom: .375rem; }
.bag-meta { font: 400 0.875rem/1.3 var(--f-sans); color: var(--muted); }
.bag-remove { font: 600 0.75rem/1 var(--f-sans); text-transform: uppercase; color: var(--muted); }
.bag-empty { padding: 2rem 0; font: 400 0.875rem/1.3 var(--f-sans); color: var(--muted); }
.bag-foot { padding: 1.25rem var(--margin); display: grid; gap: var(--gutter); border-top: 1px solid var(--ink); }
.r-btn { display: flex; align-items: center; justify-content: center; height: 3rem; background: var(--ink); color: var(--paper); font: 600 0.875rem/1 var(--f-sans); text-transform: uppercase; }
.r-btn:disabled { opacity: .35; cursor: not-allowed; }
.r-btn.is-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* ---------- cursor label (reference: .cursor, mix of «( Prev )» texts that follow the mouse) ---------- */
.r-cursor { position: fixed; left: 0; top: 0; z-index: 200; display: flex; gap: .375rem; align-items: center; color: var(--paper); opacity: 0; pointer-events: none; transition: opacity .3s ease-out; will-change: transform; }
.r-cursor .br { color: inherit; opacity: .7; }
.c-vis .r-cursor { opacity: 1; }

/* ---------- preloader (reference: brown-black curtain, logo, brand wipe, photo, collapse) ---------- */
.r-pre { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: var(--night); clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0); }
.no-pre .r-pre { display: none; }
.r-pre-inner { position: absolute; width: calc(2 * (100vw - 2 * var(--margin) + var(--gutter)) / 12); display: flex; align-items: center; justify-content: center; clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0); }
.r-pre-logo { position: absolute; width: 78%; color: var(--on-night); opacity: 0; } /* inside the photo box, so the brown wipe covers it whole */
.r-pre-bg { position: absolute; inset: 0; background: var(--brand); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
.r-pre-img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; overflow: clip; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
.r-pre-img img { position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .r-pre-inner { width: 46vw; } }

/* ---------- page transition (reference: Barba, the old page slides 20vh down to 40 %, the new one is unclipped from the top) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: r-leave 1s var(--e3) both; }
::view-transition-new(root) { animation: r-enter 1s var(--e3) both; }
@keyframes r-leave { to { transform: translateY(20vh); opacity: .4; } }
@keyframes r-enter { from { transform: translateY(-20vh); clip-path: inset(0 0 100% 0); } to { transform: none; clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* ================================ HOME ================================ */
.r-page { position: relative; }

/* ---------- the tie's scope: night + first paper section (Atelier's choreography on Riviera's dark brown) ----------
   Three sticky layers in one stacking order: the night (0) leaves with the brown, the stage with the tie (1) stays
   until the end of «FORMA nasce…», the words (2) stay on top and readable. Curator 21/10 15:08: the tie fell out
   with the brown; it now falls into the paper section and ends there. */
.r-tie { position: relative; background: var(--paper); }
.r-stage { position: sticky; top: 0; z-index: 1; height: 100vh; height: 100svh; overflow: hidden; pointer-events: none; }
.r-dark { position: relative; margin-top: -100vh; margin-top: -100svh; background: var(--night); color: var(--on-night); }
.r-night { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; overflow: hidden; }
.night { position: absolute; inset: 0; background:
  radial-gradient(120% 90% at 50% 110%, color-mix(in srgb, var(--color-sand) 7%, transparent), transparent 60%),
  var(--night); }
/* the glow that follows the tie, on a layer of its own that the compositor moves (25/10/2026: drawn as a gradient placed
   by two custom properties on .r-tie, it restyled the tie's whole scope and repainted the night on every frame: on a
   phone at 3× a screen of pixels a frame, curator «la cravatta a volte si blocca da mobile»). The same ellipse as before,
   55 % × 60 % of the night and transparent beyond 70 % of it, so its box moved by its own size never shows an edge;
   riviera.js tie() puts its centre on the tie, and here it rests where the old default stood (55 %, 48 %) */
.night-glow { position: absolute; inset: 0; background: radial-gradient(55% 60% at 50% 50%, var(--color-brown) 0%, transparent 70%); transform: translate3d(5%, -2%, 0); will-change: transform; }
.night::after { content: ""; position: absolute; inset: 0; background: radial-gradient(85% 85% at 50% 50%, transparent 55%, color-mix(in srgb, var(--night) 80%, black) 100%); opacity: .55; }
.tie-poster, .tie-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tie-canvas { opacity: 0; transition: opacity .6s; }
.r-tie.live .tie-canvas { opacity: var(--fade, 1); }
.r-tie.live .tie-poster { opacity: 0; transition: opacity .8s .2s; }
/* the hand-over when the page had already moved before the tie's first frame (27/10/2026, riviera.js tie()): the tie
   starts from the picture's own pose and then joins the scroll, so the picture gives way at once instead of fading for a
   second under a tie that is already moving */
.r-tie.late .tie-canvas { transition-duration: .1s; }
.r-tie.late.live .tie-poster { transition: opacity .1s; }
/* the hand turns the tie from the opening to its fall (curator 23/10), the label «( Trascina )» shows in act 2 only */
.can-spin .tie-canvas, .can-drag .tie-canvas { pointer-events: auto; cursor: grab; touch-action: pan-y; }
/* the label and the pins follow the tie every frame: on layers of their own, so moving them repaints nothing (25/10) */
.drag-hint { position: absolute; left: 0; top: 0; display: flex; gap: .375rem; align-items: center; color: var(--on-night); opacity: 0; transition: opacity .6s; translate: -50% -50%; will-change: transform; }
.drag-hint .br { color: var(--on-night-2); }
.can-drag .drag-hint { opacity: 1; }
.pin { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: .625rem; opacity: 0; transition: opacity .6s; pointer-events: auto; will-change: transform; }
.pin b { width: .75rem; height: .75rem; margin: -.375rem 0 0 -.375rem; border-radius: 50%; background: var(--on-night); box-shadow: 0 0 0 .375rem color-mix(in srgb, var(--color-sand) 25%, transparent); }
.pin em { font-style: normal; padding: .4375rem .625rem; background: var(--paper); color: var(--ink); white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity .4s, transform .4s var(--e-ui); }
.pin:hover em, .pin:focus-within em { opacity: 1; transform: none; }
.show-pins .pin { opacity: 1; }
@media (hover: none) { .show-pins .pin em { opacity: 1; transform: none; } }

/* the words pass the pointer through to the tie (drag in act 2, pins in act 3); their links and buttons keep it */
.r-acts { position: relative; margin-top: -100vh; margin-top: -100svh; z-index: 2; pointer-events: none; }
.r-acts a, .r-acts button { pointer-events: auto; }
.r-act { position: relative; min-height: 100vh; min-height: 100svh; }
/* act 01, the hero (reference: two-tone h2 bottom left). The reference's slide numbers and «Scroll» are gone
   (curator 21/10: «elimina i numeretti nella hero», 15:08: «elimina il testo "scorri"») */
.r-hero { display: flex; flex-direction: column; justify-content: flex-end; }
.r-hero-copy { padding: 0 0 1.25rem var(--margin); max-width: 32.344em; display: grid; gap: .25rem; } /* reference: .hero-intro_copy 52ch, 532 px at 1470. In em since 14/11/2026: ch is the width of the font's «0», and Switzer's (0.576em) is narrower than Neue Montreal's (0.622em, Regular): 52ch fell from 517 to 479 px and the hero went from 3 lines to 4. 52 × 0.622 = 32.344em keeps the approved box whatever the grotesk */
.r-hero-copy a { color: var(--on-night); }
.r-hero-title { color: var(--on-night-2); }
@media (max-width: 767px) {
  .r-hero-copy { padding-left: .625rem; }
}
/* act 02: FORMA's reels fill the screen and the tie passes under them (curator 22/10, version 19: «riempire lo schermo è
   essenziale quando ci sono i video su un sito, se no sembrano finestrine sperdute»). The act is v17's 1.15 screens plus
   0.65, the tie's keys are placed on that sum (riviera.js CAP, FILM): change them together. The reels are pinned for 0.58
   of a screen (the track), in which the scroll opens them (riviera.js film, 0.42) and holds them; then they leave upward
   and the tie comes out from under them */
.r-capsule { min-height: 180vh; }
.r-film { --film-nav: var(--nav-h); --film-avail: calc(100svh - var(--film-nav) - var(--margin)); }
.r-film-track { height: calc(100vh + 58vh); height: calc(100svh + 58vh); }
.r-film-pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
/* the open window: on a landscape screen three reels side by side across the page's margins, from the nav down to a
   margin's distance from the bottom — four columns each with the grid's gutter between them, so their edges are the
   grid's. The reels are 9:16 and the window is wider (2.0 at 1470×800), so each fills its column by cropping top and bottom,
   14.6 % there; past 2.2 the window stops widening (an ultra-wide screen would crop a third) and stays centred */
.r-film-stage { position: absolute; top: var(--film-nav); bottom: var(--margin); left: 0; right: 0; margin-inline: auto; width: min(100% - 2 * var(--margin), var(--film-avail) * 2.2); }
.r-film-win { position: absolute; inset: 0; }
.r-film-strip { position: absolute; inset: 0; display: flex; gap: var(--gutter); transform-origin: 50% 50%; }
.r-film-reel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: var(--brand); }
/* cropped more at the foot than at the head: a reel keeps faces clear of Instagram's top bar and leaves the bottom fifth
   to its caption and buttons */
.r-film-video, .r-film-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.r-film-pic[hidden] { display: none; } /* the reel as a picture when a start is refused (riviera.js film, refused) */
.r-film-veil { position: absolute; inset: 0; background: var(--night); opacity: 0; pointer-events: none; }
.r-film-toggle { position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-night); }
.r-film-toggle:focus-visible { outline-offset: -.5rem; } /* the window clips everything outside it */
.r-film-state { opacity: 0; transition: opacity .4s var(--e-ui); }
.r-film.is-paused .r-film-state { opacity: 1; }
/* the copy on the first reel's foot, over a shade cut to the copy's own box (the reel's width, the text's height and a
   fade above it), not to the whole window; it arrives once the window is open (the reference's content: 0.7 s, in at 1,
   out under 0.75). The shade is what the reel's brightest frames ask: the white pocket lining at 1.2 s read 2.97:1 under
   72/55 %, 4.64:1 under 78/70 % (375×667), 6.4:1 under 80/76 % (bench of 22/10 on every second of the reel, three
   screens); film_reveal (t) measures this one */
.r-film-copy { position: absolute; left: 0; bottom: 0; width: calc((100% - 2 * var(--gutter)) / 3); display: grid; gap: .375rem; justify-items: start; padding: 4.5rem 1.25rem 1.25rem; color: var(--on-night);
  background: linear-gradient(to top, color-mix(in srgb, var(--night) 80%, transparent), color-mix(in srgb, var(--night) 72%, transparent) 50%, transparent);
  pointer-events: none; opacity: 0; transform: translateY(.75rem); transition: opacity .7s var(--e1), transform .7s var(--e1); }
.r-film.is-open .r-film-copy { opacity: 1; transform: none; }
.r-film-copy h2 { text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .r-film-copy { transform: none; transition: opacity .3s; } }
.r-film-copy .t-small { color: var(--on-night); max-width: 22.392em; } /* 36ch of Neue Montreal Regular (see .r-hero-copy) */
.r-det-copy .t-small { color: var(--on-night-2); max-width: 22.392em; } /* 36ch of Neue Montreal Regular */
/* a screen taller than wide-enough (phones, a tablet held upright) shows one reel alone, the laptop's middle one, the
   spot (curator 22/10 evening: «su mobile l'unico video da mostrare è quello centrale»; v19–v20 showed the first): as
   wide as the page's margins allow and 9:16, or, where the screen is too short for that, as tall as it allows with up
   to a tenth cropped from top and bottom; centred in the space under the nav. The copy lies across its foot */
@media (max-width: 767px), (max-aspect-ratio: 6/5) {
  .r-film { --film-w: min(100vw - 2 * var(--margin), var(--film-avail) * 0.625); --film-h: min(var(--film-avail), var(--film-w) * 16 / 9); }
  .r-film-stage { width: var(--film-w); height: var(--film-h); margin-block: auto; }
  .r-film-reel:not(:nth-child(2)) { display: none; }
  .r-film-copy { width: 100%; }
}
.r-dark .br { color: var(--on-night-2); }
/* act 03: the tie hangs on the left, seen from behind; the title on the right */
.r-details { min-height: 125vh; display: flex; align-items: center; padding-top: 18vh; }
.r-details .grid { width: 100%; }
.r-det-copy { grid-column: 8 / 13; display: grid; gap: 1.5rem; }
/* the close is long on purpose: the tie rolls itself up over about 580 px of scroll (it was 180, «troppo veloce»),
   then falls into the paper section while the brown leaves */
.r-exit { min-height: 150vh; }
@media (max-width: 767px) {
  /* phone: the reel under the phone's nav (63 px), its copy a size smaller in padding */
  .r-film { --film-nav: 3.9375rem; }
  .r-film-copy { padding: 3.75rem 1rem 1rem; }
  .r-details { align-items: flex-start; padding-top: calc(var(--nav-h) + 1rem); }
  .r-det-copy { padding-right: 34vw; }
  /* the phone has no pins on the tie, and since 22/10 evening no list of them either (curator: «elimina i testi tra
     parentesi: etichetta FORMA, il passante tiene la coda, la punta foderata») */
  .pins { display: none; }
}

/* reveal of the act titles by words (Girard-Perregaux, as in Atelier: 0.07 s apart, 1.6 s rise) */
[data-reveal="words"] .w { display: inline-block; transform: translateY(40px) rotate(3deg); opacity: 0; transition: transform 1.6s var(--e1), opacity 2.5s var(--e1); transition-delay: calc(var(--i) * 0.07s); }
[data-reveal="words"].is-in .w { transform: none; opacity: 1; }

/* ---------- light part ---------- */
.r-light { position: relative; background: var(--paper); color: var(--ink); }
/* the intro closes the tie's scope: no background of its own (the scope's paper shows, the tie lands on it), the
   words above the tie; the gap before the strip lives here, so the stage stays on screen until the landing is over */
.r-intro { position: relative; z-index: 2; color: var(--ink); padding-top: 1.25rem; padding-bottom: var(--sp-15); }
.r-intro-logo { grid-column: 1 / 7; }
.r-intro-logo .logo-lockup { width: calc((100vw - 2 * var(--margin) - 11 * var(--gutter)) / 12); }
.r-intro-text { grid-column: 7 / 13; }
@media (max-width: 767px) { .r-intro-logo { margin-bottom: 9rem; } .r-intro-logo .logo-lockup { width: 5.4rem; } }

/* featured strip (reference: 470x588 cards, gap 10, info panel inside the card, label in the serif) */
.r-featured { padding-top: 0; } /* its sp-15 gap moved into .r-intro, same rhythm on the page */
.r-or-label { text-align: center; color: var(--muted); }
.r-featured .r-or-label { margin-bottom: 3rem; }
.r-strip { overflow: hidden; cursor: grab; touch-action: pan-y; }
.r-strip-track { display: flex; gap: var(--gutter); width: max-content; will-change: transform; }
.r-strip.dragging { cursor: grabbing; }
.r-strip.dragging .r-card { pointer-events: none; }
.r-all { display: flex; justify-content: center; padding: 3rem 0 var(--sp-10); }

.r-card { display: grid; gap: .5rem; user-select: none; -webkit-user-drag: none; }
.r-card.is-strip { width: calc(4 * (100vw - 2 * var(--margin) - 11 * var(--gutter)) / 12 + 3 * var(--gutter)); transition: scale .3s linear .1s; }
.r-strip.pressed .r-card { scale: .95; }
.r-card-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.r-card-img .r-ph { position: absolute; inset: 0; background: linear-gradient(var(--e1c, var(--surface)) 0 50%, var(--e2c, var(--surface)) 50% 100%); }
.r-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-card-img .is-wide img { object-fit: contain; }
.r-card-hover { opacity: 0; transition: opacity .2s; }
.r-card:hover .r-card-hover { opacity: 1; }
.r-card-info { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); z-index: 2; display: grid; gap: .25rem; padding: .5rem var(--gutter); background: var(--paper); border-radius: .125rem; }
.r-card-cat { color: var(--muted); }
.r-card-price { display: flex; justify-content: space-between; margin-top: 2.5rem; }
.r-card-row { display: flex; justify-content: space-between; gap: 1rem; }
@media (max-width: 767px) { .r-card.is-strip { width: calc(100vw - 2 * var(--margin)); } .r-card-price { margin-top: 2rem; } }

/* CTA photographs, 6/3/3 columns (reference: 710x844, 350x436, 350x511) */
.r-ctas { align-items: start; row-gap: 1rem; }
.r-cta { display: grid; gap: .5rem; position: relative; }
.r-cta.is-big { grid-column: 1 / 7; }
.r-cta.is-mid { grid-column: 7 / 10; }
.r-cta.is-tall { grid-column: 10 / 13; }
.r-cta-img { position: relative; overflow: clip; color: var(--paper); background: var(--surface); }
.r-cta.is-big .r-cta-img { aspect-ratio: 710 / 844; }
.r-cta.is-mid .r-cta-img { aspect-ratio: 4 / 5; }
.r-cta.is-tall .r-cta-img { aspect-ratio: 350 / 511; }
.r-cta-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-cta-img::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--night) 20%, transparent); opacity: 0; transition: opacity .3s ease-out; }
.r-cta-hover { position: absolute; left: 0; right: 0; top: 50%; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 1rem var(--gutter); opacity: 0; transition: opacity .3s ease-out; translate: 0 -50%; }
.r-cta-hover .br { color: inherit; }
.r-cta:hover .r-cta-hover, .r-cta:hover .r-cta-img::after { opacity: 1; }
.r-credit { color: var(--muted); font-size: .75rem; }
[data-img-scroll] img { height: 120%; top: auto; bottom: 0; will-change: transform; }
@media (max-width: 767px) {
  .r-ctas > * { grid-column: 1 / -1 !important; }
  .r-cta > .t-upper { display: none; }
  .r-cta .r-cta-img { aspect-ratio: 374 / 423 !important; }
  .r-cta-hover { opacity: 1; top: 0; translate: none; }
  .r-cta-img::after { opacity: 1; background: linear-gradient(color-mix(in srgb, var(--night) 35%, transparent), transparent 30%); }
}

/* centred block (reference: «ORGC©2025 / Designed and made locally»; grey bold caps; the icon 48 wide) */
.r-orinfo { padding-top: 7rem; padding-bottom: var(--sp-15); display: grid; gap: 2.5rem; justify-items: center; text-align: center; color: var(--muted); }
.r-or-cols { width: 100%; }
.r-or-cols .t-upper { color: var(--muted); }
.r-or-side { grid-column: 1 / 4; }
.r-or-side.is-right { grid-column: 10 / 13; }
.r-or-mid { grid-column: 4 / 10; max-width: 24.457em; justify-self: center; } /* 37ch of Neue Montreal Semibold (0.661em) */
/* the emblem: 10rem wide on a laptop and 8rem on a phone (3rem until 23/10), with more air above it (curator: «un po'
   più in basso… un po' più grande… rendere protagonista anche lui»). The box is the emblem's ink (301.56 / 400.77).
   The flat picture is the site's own forma-emblema.svg (no extra request), whose 446×583 box holds the ink at
   12.718, 12.25, 420.432 × 558.75 (src/site/logo-vettoriale.py): grown and shifted so its ink lies on the box. The
   canvas is the box grown so the turning object never touches its edge, sized from createEmblem's fill (0.84 of the
   canvas height): left −(0.8 · 1/0.84 / 0.7525 − 1) / 2, top −(1/0.84 − 1) / 2, so facing front the 3D lies exactly
   on the flat emblem (qa/emblema.mjs (c)) */
.r-or-emblem { --w: 10rem; position: relative; width: var(--w); aspect-ratio: 301.56 / 400.77; margin-top: 3.5rem; color: var(--brand); }
@media (max-width: 767px) { .r-or-emblem { --w: 8rem; margin-top: 2rem; } }
.r-or-emblem > .logo-mark { position: absolute; left: -3.025%; top: -2.192%; width: 106.081%; height: 104.34%; aspect-ratio: auto; transition: opacity .25s; }
.r-or-emblem > canvas { position: absolute; left: -13.28%; top: -9.524%; width: 126.57%; height: 119.05%; display: block;
  opacity: 0; transition: opacity .25s; touch-action: pan-y; }
.r-or-emblem.is-3d > canvas { opacity: 1; }
.r-or-emblem.is-3d > .logo-mark { opacity: 0; }
@media (max-width: 767px) { .r-or-side { display: none; } }

/* Tie capsule walk. Curator 21/10 evening: the scroll shows the seven suits one by one, no click. With the script
   (.is-walk) the frame is pinned under the nav over a track as long as the walk (--sw-units steps of --sw-step,
   riviera.js tieWalk); without it, a plain section on the first suit. The text under the photos is as wide as them, and
   its height is the tallest of the seven (--sw-info-h, measured), so nothing moves when the suit changes */
/* a step per suit of 36 % of the screen (25/10, curator: «la sezione tie capsule sette colori è ancora troppo lenta e
   poco reattiva»): any short scroll still brings the next suit («ad ogni scroll si seleziona l'abito seguente», the settle
   in riviera.js tieWalk), a normal trackpad flick (about 670 px) now carries two, and the seven take three screens of
   scroll instead of six. From 21/10 to v30 it was 70 %, tuned so a normal flick carried one */
.r-switch { padding-bottom: var(--sp-15); --sw-step: 36vh; --sw-step: 36svh; }
.r-switch.is-walk .r-sw-track { height: calc(100svh - var(--nav-h) + var(--sw-units) * var(--sw-step)); }
.r-sw-pin { height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); }
.r-switch.is-walk .r-sw-pin { position: sticky; top: var(--nav-h); }
.r-sw {
  --sw-col: calc(5 * (100vw - 2 * var(--margin) - 11 * var(--gutter)) / 12 + 4 * var(--gutter));
  --sw-ph: calc(100svh - var(--nav-h) - 4.75rem - var(--sw-info-h, 4.5rem));
  --sw-pw: min(var(--sw-col), calc(var(--sw-ph) * .8));
  --sw-fit: 1.36;
  height: 100%; box-sizing: border-box; padding-block: .75rem 3.25rem; grid-template-rows: auto minmax(0, 1fr); row-gap: .75rem;
}
.r-sw-label { grid-column: 1 / 7; grid-row: 1; text-align: left; }
.r-sw-names { grid-column: 1 / 7; grid-row: 2; align-self: center; display: flex; flex-direction: column;
  --sw-name: min(var(--h2), calc((100svh - var(--nav-h) - 7rem) / 8.4)); }
/* the name in ink follows the card in front over 0.3 s, the reference's dots' transition (duration-300, Tailwind's ease) */
.r-sw-name { display: flex; align-items: baseline; gap: 1rem; padding-block: .125rem; font-size: var(--sw-name);
  color: color-mix(in srgb, var(--ink) calc(var(--on, 0) * 100%), var(--faded)); transition: color .3s cubic-bezier(.4, 0, .2, 1); }
.r-sw-name .t-num { font-size: 1rem; width: 2rem; color: var(--muted); }
.r-sw-info { display: grid; align-content: start; justify-items: start; gap: .625rem; min-height: var(--sw-info-h, 0); }
.r-sw-text .t-small { margin-top: .375rem; }

/* the stack (curator 23/10, 21st.dev's vertical-image-stack): the cards are --sw-cw × --sw-ch (4:5) at the middle of the
   stack's box, the reference's perspective (1200 px on a 420 px card) scaled to the card, and riviera.js moves them. The
   counter stays on the card in front */
.r-sw-slides { position: relative; perspective: calc(var(--sw-ch) * 2.857); user-select: none; -webkit-user-select: none; }
.r-sw-slide, .r-sw-count { position: absolute; left: calc((100% - var(--sw-cw)) * var(--sw-ax, .5)); top: calc(50% - var(--sw-ch) / 2);
  width: var(--sw-cw); height: var(--sw-ch); margin: 0; }
.r-sw-slide { background: var(--surface); transform-style: preserve-3d; }
.r-switch:not(.is-walk) .r-sw-slide:not(:first-child) { display: none; }
.r-sw-slide img { width: 100%; height: 100%; object-fit: cover; }
/* the hand on the stack (riviera.js tieWalk, 23/10 evening): the mouse grabs it, and on a touch screen the stack takes the
   finger while the frame is pinned (.is-held), with no pan of its own there (a pinch still zooms); the names take their
   ink from the stack on every frame, so they keep no transition of their own */
.r-switch.is-scrub .r-sw-slides { cursor: grab; }
.r-switch.is-scrub .r-sw-slides.is-grabbing { cursor: grabbing; }
.r-switch.is-scrub.is-held .r-sw-slides { touch-action: none; touch-action: pinch-zoom; }
.r-switch.is-scrub .r-sw-name { transition: none; }
.r-sw-slide img { -webkit-user-drag: none; }
/* the card is the page's paper and its photo carries the fade (riviera.js paint): no double exposure between two suits */
.r-switch.is-walk .r-sw-slide { background: var(--paper); }
.r-switch.is-walk .r-sw-slide img { background: var(--surface); }
/* the photos fade on layers of their own: the compositor changes their opacity, nothing repaints (25/10, on an iPhone a
   repainted photo is drawn again by the CPU at 3×) */
.r-switch.is-scrub .r-sw-slide img { will-change: opacity; }
.r-sw-count { z-index: 6; display: flex; align-items: flex-end; justify-content: space-between; padding: 1.25rem; color: var(--paper); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .r-sw-name { transition: none; } }

/* the layout stays (curator 23/10: «l'impaginazione va bene»): the stack takes the photo's place, as tall as the photo
   was, and the card in front is that height over --sw-fit, 1.36, so its neighbours show 18 % of a card above and below,
   the share they show in the reference's own preview frame on 21st.dev (74 px of a 420 px card); where the box is taller
   than the whole stack (2.034 cards) it shrinks to it. What passes the box's edges is cut there */
.r-sw-stage { grid-column: 8 / 13; grid-row: 1 / 3; align-self: center; justify-self: end; display: grid; gap: .75rem;
  --sw-ch: calc(var(--sw-ph) / var(--sw-fit)); --sw-cw: calc(var(--sw-ch) * .8); width: var(--sw-cw); }
.r-sw-slides { width: 100%; height: min(var(--sw-ph), calc(var(--sw-ch) * 2.034)); overflow: clip; }

@media (max-width: 767px) {
  /* the phone: the photo smaller, the names beside it, the text and the one link under both (curator 21/10 evening) */
  .r-sw { grid-template-rows: auto auto auto; align-content: center; row-gap: 1rem; padding-block: .5rem 2.5rem;
    --sw-sh: calc(100svh - var(--nav-h) - 7rem - var(--sw-info-h, 6rem)); }
  .r-sw-label { grid-column: 1 / 13; }
  .r-sw-stage { display: contents; }
  .r-sw > .r-sw-names { grid-column: 1 / 6; grid-row: 2; --sw-name: min(1.125rem, 4.9vw); } /* beats the phone's .grid > * (full width); «Stromboli» fits beside the photo down to 320 px */
  .r-sw-name { gap: .375rem; padding-block: .25rem; letter-spacing: -0.02em; }
  .r-sw-name .t-num { font-size: .75rem; width: 1.125rem; }
  .r-sw-slides { grid-column: 6 / 13; grid-row: 2; width: 100%; height: min(var(--sw-sh), calc(var(--sw-ch) * 2.034));
    --sw-ch: min(calc(var(--sw-sh) / var(--sw-fit)), calc(((100vw - 2 * var(--margin) - 11 * var(--gutter)) * 7 / 12 + 6 * var(--gutter)) * 1.25)); --sw-cw: calc(var(--sw-ch) * .8); --sw-ax: 1; }
  .r-sw-count { padding: .625rem; font-size: .75rem; }
  .r-sw-info { grid-column: 1 / 13; grid-row: 3; }
}

@media (min-width: 768px) and (max-height: 540px) {
  /* a short screen (a phone on its side): the text stands beside the photo, at its top, so the photo keeps the frame's
     height and the link never runs under the prototype badge in the corner */
  .r-sw { --sw-ph: calc(100svh - var(--nav-h) - 4rem); }
  .r-sw-label, .r-sw-names { grid-column: 1 / 6; }
  .r-sw-stage { grid-column: 6 / 13; width: auto; justify-self: stretch; align-items: start; column-gap: var(--gutter);
    grid-template-columns: min(calc(var(--sw-ph) / var(--sw-fit) * .8), 60%) minmax(0, 1fr); }
  .r-sw-info { min-height: 0; }
}

/* display title + giving back + overlapping rows (reference: .community-section, rows 355 tall, image 2:1, line on top) */
.r-comm { padding-top: 1.25rem; padding-bottom: var(--sp-15); }
.r-sec-intro { padding-bottom: var(--sp-15); }
.r-big-title { grid-column: 1 / 8; }
.r-orn { display: inline-block; width: .55em; margin-right: .18em; vertical-align: -0.02em; color: var(--brand); }
.r-giving { row-gap: 3.75rem; align-items: start; }
.r-giving-copy { grid-column: 7 / 12; display: grid; gap: .375rem; }
.r-comm-head { grid-column: 7 / 12; }
.r-rows { margin-top: 1.25rem; }
.r-row { position: relative; background: var(--paper); overflow: hidden; }
.r-row-line { height: 1px; background: var(--ink); }
.r-row .grid { padding-top: 1.25rem; align-items: start; }
.r-row-cta { grid-column: 1 / 4; }
.r-row-copy { grid-column: 4 / 7; display: grid; gap: .375rem; }
.r-row-img { grid-column: 7 / 13; aspect-ratio: 2; overflow: hidden; background: var(--surface); margin-top: -1.25rem; margin-bottom: 1rem; }
.r-row-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {
  .r-big-title { font-size: 3.7rem; }
  .r-sec-intro { padding-bottom: 1rem; }
  .r-row-cta { display: none; }
  .r-row-img { margin-top: 1rem; }
}

/* ================================ SHOP ================================ */
.r-shop-head { padding-top: calc(var(--nav-h) + 1.25rem); padding-bottom: 6rem; }
.r-filters { grid-column: 4 / 7; display: grid; gap: .1rem; }
.r-filters a { color: var(--faded); transition: color .1s; }
.r-filters a[aria-current="true"], .r-filters a:hover { color: var(--ink); }
.r-shop-row { margin-top: 5rem; align-items: end; }
.r-shop-title { grid-column: 1 / 4; }
.r-shop-coll { grid-column: 7 / 10; }
.r-shop-count { grid-column: 12 / 13; justify-self: end; }
.r-shop-grid { row-gap: 2.5rem; padding-bottom: var(--sp-15); }
.r-shop-grid .r-card { grid-column: span 4; }
@media (max-width: 767px) {
  .r-filters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
  .r-shop-head { padding-bottom: 2rem; }
  .r-shop-row { margin-top: 2.5rem; grid-template-columns: 1fr auto; }
  .r-shop-coll { display: none; }
  .r-shop-row > .r-shop-title { grid-column: 1 / 2; } .r-shop-row > .r-shop-count { grid-column: 2 / 3; }
  .r-shop-grid { grid-template-columns: 1fr 1fr; }
  .r-shop-grid > .r-card { grid-column: span 1; }
  .r-shop-grid .r-card-row { flex-direction: column; gap: .25rem; }
}

/* ================================ PRODUCT ================================ */
.r-prod { padding-top: calc(var(--nav-h) + .25rem); align-items: start; }
.r-prod-media { grid-column: 1 / 8; display: grid; gap: var(--gutter); } /* reference: 830 of 1430 */
.r-prod-main { aspect-ratio: 4 / 5; position: relative; overflow: hidden; background: var(--surface); }
.r-prod-main img, .r-prod-gallery img { width: 100%; height: 100%; object-fit: cover; }
.r-prod-main .is-wide img, .r-prod-gallery .is-wide img { object-fit: contain; }
.r-prod-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.r-prod-gallery figure { aspect-ratio: 4 / 5; position: relative; overflow: hidden; background: var(--surface); }
.r-ph { position: absolute; inset: 0; }
.r-ph.is-wide { background: linear-gradient(var(--e1c, var(--surface)) 0 50%, var(--e2c, var(--surface)) 50% 100%); }
.r-prod-info { grid-column: 8 / 13; align-self: stretch; padding-left: var(--gutter); }
.r-prod-sticky { position: sticky; top: calc(var(--nav-h) + .25rem); min-height: calc(100vh - var(--nav-h) - 1.5rem); display: flex; flex-direction: column; gap: 1rem; padding-bottom: 1.25rem; }
.r-prod-row { display: flex; justify-content: space-between; gap: 1rem; }
.r-prod-row h1 { font: inherit; }
.r-acc { border-top: 1px solid var(--ink); }
.r-acc:last-of-type { border-bottom: 1px solid var(--ink); }
.r-acc button { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: .625rem 0; }
.r-acc i { position: relative; width: .75rem; height: .75rem; }
.r-acc i::before, .r-acc i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; }
.r-acc i::after { transform: rotate(90deg); transition: transform .4s cubic-bezier(.25, 1, .5, 1), opacity .4s; }
.r-acc.open i::after { transform: rotate(90deg) scaleX(0); opacity: 0; }
.r-acc-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: all .4s cubic-bezier(.25, 1, .5, 1); }
.r-acc-body > div { overflow: hidden; }
.r-acc.open .r-acc-body { grid-template-rows: 1fr; opacity: 1; padding-bottom: 1.5rem; }
.r-suit .r-suit-links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .5rem; }
.r-buy { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: end; } /* reference: SIZE box + ADD TO CART on one row */
.r-sizes { display: grid; gap: var(--gutter); }
.r-buy .r-btn { height: 3.375rem; }
.r-buy-more { grid-column: 1 / -1; justify-self: start; }
.r-size { position: relative; }
.r-size-toggle { width: 100%; height: 3.375rem; display: flex; justify-content: space-between; align-items: center; padding: 0 1.25rem; background: var(--surface); }
.r-size-list { display: none; position: absolute; left: 0; right: 0; bottom: 100%; flex-wrap: wrap; gap: .25rem; padding: var(--gutter); background: var(--surface); border-bottom: 1px solid var(--paper); }
.r-size.show .r-size-list { display: flex; }
.r-size-list button { min-width: 2.75rem; height: 2.25rem; padding: 0 .5rem; font: 600 .875rem/1 var(--f-sans); }
.r-size-list button[aria-pressed="true"] { color: var(--brand); text-decoration: underline; text-underline-offset: .25em; }
/* a size Shopify has sold out (assets/shopify.js): struck through, not choosable */
.r-size-list button:disabled { color: var(--muted); text-decoration: line-through; cursor: default; }
.r-look { padding-top: var(--sp-10); padding-bottom: var(--sp-15); }
.r-look-title { margin-bottom: 1rem; }
.r-look-grid { row-gap: 2rem; }
.r-look-grid .r-card { grid-column: span 4; }
@media (max-width: 767px) {
  .r-prod-media, .r-prod-info { grid-column: 1 / -1; }
  .r-prod-sticky { position: static; min-height: 0; padding-top: 1.5rem; }
  .r-look-grid { grid-template-columns: 1fr 1fr; }
  .r-look-grid > .r-card { grid-column: span 1; }
}

/* ================================ «LA NOSTRA STORIA», THE MAGAZINE PIECE (curator 23/10) ================================
   Over the home, from the card «Giuseppe e Luca ( Leggi )»: its photo grows into the cover (a view transition named
   mag-photo, riviera.js magazine). The reference is the About page of oddritualgolf.com (read live 23/10): the opening
   in the night with the headline beside the picture, «( Our story )» with an uppercase statement over two columns,
   photographs laid over one another (stacked as cards on the phone), a big serif line, the logo filled with a
   photograph. It scrolls by itself (data-lenis-prevent, the page stays still under it) */
.r-mag { position: fixed; inset: 0; z-index: 75; background: var(--paper); color: var(--ink); }
.r-mag[hidden] { display: none; }
.mag-open { overflow: hidden; } /* the page under the piece stays still, Lenis or not */
.r-mag-bar { position: absolute; inset: 0 0 auto 0; z-index: 2; height: var(--nav-h); display: grid; grid-template-columns: 1fr auto; align-items: center; padding-inline: var(--margin); background: var(--night); color: var(--on-night); }
.r-mag-logo { height: 1.5rem; }
.r-mag-close { justify-self: end; padding: .75rem 0; border: 0; background: none; color: var(--on-night); cursor: pointer; }
.r-mag-close .br { color: var(--on-night-2); }
/* the focus shows as the site's links do, underlined, not as a box around a button */
.r-mag-close:focus { outline: none; }
.r-mag-close:focus-visible .dt { text-decoration: underline; text-underline-offset: .3em; }
.r-mag-scroll { position: absolute; inset: var(--nav-h) 0 0 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; outline: none; }
.r-mag-art { overflow-x: clip; }
/* the cover: the card's photo on the left (five columns, a 4:5 grown to the screen's height), the night on the right */
.r-mag-cover { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); min-height: calc(100svh - var(--nav-h)); background: var(--night); color: var(--on-night); }
.r-mag-cover-img { grid-column: 1 / 6; position: relative; margin: 0; overflow: clip; background: var(--night); }
.r-mag-cover-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; } /* anchored at the top: the heads never leave the frame */
.r-mag-cover-text { grid-column: 7 / 13; display: flex; flex-direction: column; padding: 2.25rem var(--margin) 2.75rem 0; }
.r-mag-cover-text > .t-alt-l { color: var(--on-night-2); }
.r-mag-title { margin: auto 0 1.75rem; font-size: clamp(3rem, 1.4rem + 5.2vw, 6.75rem); }
.r-mag-title [data-mag-line] { display: block; overflow: clip; padding-bottom: .04em; }
.r-mag-title [data-mag-line] > span { display: block; }
.r-mag-deck { max-width: 33rem; margin: 0; font: 500 clamp(1.125rem, 1rem + .45vw, 1.5rem)/1.3 var(--f-sans); letter-spacing: -0.01em; }
.r-mag-meta { margin-top: 1.75rem; color: var(--on-night-2); line-height: 1.3; }
/* the statement (the reference's «( Our story )»): the date on the left, a line in capitals, two columns of text */
.r-mag-intro { padding-block: clamp(5rem, 3rem + 6vw, 9rem) clamp(4rem, 3rem + 3vw, 6rem); row-gap: 2.5rem; }
.r-mag-label { grid-column: 1 / 4; grid-row: 1; color: var(--muted); }
.r-mag-state { grid-column: 4 / 12; grid-row: 1; margin: 0; font: 600 var(--h2)/1.04 var(--f-sans); letter-spacing: -0.03em; text-transform: uppercase; }
.r-mag-cols { grid-column: 4 / 12; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--gutter) * 4); }
.r-mag-cols p, .r-mag-text p { margin: 0; font: 400 1.0625rem/1.55 var(--f-sans); }
.r-mag-drop::first-letter { float: left; margin: .02em .1em 0 0; font: 400 4.75em/.8 var(--f-serif); text-transform: uppercase; }
/* photographs laid over one another, as in the reference: a big one, a second one lower and a third lower still, each
   overlapping the one before by a column. Each frame has its photo's own ratio and shows it whole: the photos are cut
   4 % above the highest head (curator 23/10: «non tagliare le teste»; a drift inside the frames hid the top of them) */
.r-mag-ph { --ar: 4 / 5; margin: 0; }
.r-mag-frame { position: relative; display: block; aspect-ratio: var(--ar); overflow: clip; background: var(--surface); }
.r-mag-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-mag-ph figcaption { margin-top: .75rem; color: var(--muted); line-height: 1.2; }
.r-mag-collage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.r-mag-collage .is-a { grid-column: 1 / 7; grid-row: 1; z-index: 1; }
.r-mag-collage .is-b { grid-column: 6 / 10; grid-row: 1; z-index: 2; margin-top: 16%; --ar: 1 / 1; }
.r-mag-collage .is-c { grid-column: 9 / 13; grid-row: 1; z-index: 3; margin-top: 34%; }
.r-mag-cap { grid-column: 1 / 7; grid-row: 2; margin: .875rem 0 0; color: var(--muted); }
/* the collage on a laptop (curator 23/10: «applichiamo un effetto parallax quando scrolliamo verso il basso da browser,
   da mobile è perfetto»). The middle photo lies on top of the other two, so no photo ever covers a face: the right one
   used to hide the face of the one lying in the window, a second subject who must show down to the collar. While the
   collage crosses the screen the photos move at three depths: the big one with the page, the right one 9 % faster, the
   middle one 14 % faster. In the middle of the passage they are where the composition puts them. The shift is a share
   of the passage, the collage's height (about 62.5vw, the big photo's) plus the screen's, so the depth is the same on
   every screen: a share of the photo's own height gave 14 % at 1470×758 and 7.9 % at 768×1024. Only the frames move,
   never a photo inside its frame (the heads). The motion is a scroll-driven animation, so the browser moves the frames
   with the piece's own scroll. Where that is missing (Firefox 155) and with reduced motion the collage stands still;
   the phone keeps its stack. Gate: qa/collage_parallasse.mjs */
@media (min-width: 768px) {
  .r-mag-collage .is-b { z-index: 3; }
  .r-mag-collage .is-c { z-index: 2; }
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .r-mag-collage { view-timeline: --r-mag-collage block; }
    .r-mag-collage .is-b .r-mag-frame, .r-mag-collage .is-c .r-mag-frame { animation: r-mag-depth-b linear both; animation-timeline: --r-mag-collage; animation-range: cover 0% cover 100%; }
    .r-mag-collage .is-c .r-mag-frame { animation-name: r-mag-depth-c; }
  }
}
@keyframes r-mag-depth-b { from { translate: 0 calc(.07 * (62.5vw + 100vh)); } to { translate: 0 calc(-.07 * (62.5vw + 100vh)); } }
@keyframes r-mag-depth-c { from { translate: 0 calc(.045 * (62.5vw + 100vh)); } to { translate: 0 calc(-.045 * (62.5vw + 100vh)); } }
.r-mag-quote { margin: 0; padding-block: clamp(6rem, 4rem + 6vw, 10rem); text-align: center; }
.r-mag-quote p { max-width: 15ch; margin: 0 auto; font-size: clamp(2.5rem, 1.5rem + 3.6vw, 5.5rem); }
.r-mag-quote footer { margin-top: 1.75rem; color: var(--muted); }
.r-mag-sec { padding-bottom: clamp(5rem, 3rem + 5vw, 8rem); row-gap: 2rem; align-items: start; }
.r-mag-text { grid-column: 1 / 5; display: grid; gap: .875rem; }
.r-mag-text h3 { margin: 1.25rem 0 0; }
.r-mag-text h3:first-child { margin-top: 0; }
.r-mag-text .detail { justify-self: start; margin-top: .75rem; }
.r-mag-wide { grid-column: 6 / 13; --ar: 1600 / 1270; }
.r-mag-sec.is-two .r-mag-side { grid-column: 1 / 7; }
.r-mag-sec.is-two .r-mag-text { grid-column: 8 / 12; position: sticky; top: 2.5rem; }
/* the close: the name of the house in plain sand (curator 09/11: «rendila minimal, beige, normale»), and under it the
   home footer's bottom line, at the same distance from the bottom edge */
.r-mag-end { padding-block: clamp(4.5rem, 3rem + 4vw, 7rem) calc(3.25rem + var(--cookie-space, 0px)); background: var(--night); color: var(--on-night); text-align: center; }
.r-mag-word { aspect-ratio: 824 / 181; mask: url(logo/forma-wordmark.svg) center / contain no-repeat; -webkit-mask: url(logo/forma-wordmark.svg) center / contain no-repeat; background: var(--on-night); }
.r-mag-end .r-foot-bottom { text-align: left; }
.r-mag-last { margin: 3rem 0 0; font-size: clamp(2.25rem, 1.4rem + 3vw, 4.5rem); }
.r-mag-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2.5rem; margin-top: 2.25rem; }
.r-mag-ctas .br { color: var(--on-night-2); }
/* the entrances, as the rest of the page (ease-1, 1 s): a line of the title rises out of its own mask, the rest rises
   1.5 rem and fades in; only with the script, and never with reduced motion */
.r-mag.is-js [data-mag-in] { transition: opacity 1s cubic-bezier(.15, 0, .15, 1), translate 1s cubic-bezier(.15, 0, .15, 1); }
.r-mag.is-js [data-mag-in]:not(.is-in) { opacity: 0; translate: 0 1.5rem; }
.r-mag-cover-text .r-mag-deck { transition-delay: .12s; }
.r-mag-cover-text .r-mag-meta { transition-delay: .22s; }
.r-mag.is-js [data-mag-line] > span { transition: translate 1.1s cubic-bezier(.15, 0, .15, 1); }
.r-mag.is-js [data-mag-line]:nth-child(2) > span { transition-delay: .08s; }
.r-mag.is-js:not(.is-shown) [data-mag-line] > span { translate: 0 105%; }
@media (prefers-reduced-motion: reduce) {
  .r-mag.is-js [data-mag-in], .r-mag.is-js [data-mag-line] > span { transition: none; opacity: 1; translate: none; }
}
/* the photo that grows from the card into the cover, and back (mag-photo), over the sheet of the piece fading in or out
   (mag-sheet). The page itself stays still: its snapshot is not animated, because the page's own snapshot moved between
   the two states (the scroll is locked while the piece is open) and showed a band of the home under the sheet (23/10,
   frames paused at 300 and 450 ms) */
::view-transition-group(mag-photo) { animation-duration: .9s; animation-timing-function: cubic-bezier(.65, .01, .05, .99); overflow: clip; }
::view-transition-old(mag-photo), ::view-transition-new(mag-photo) { height: 100%; object-fit: cover; animation-duration: .9s; }
::view-transition-group(mag-sheet), ::view-transition-old(mag-sheet), ::view-transition-new(mag-sheet) { animation-duration: .5s; }
/* the photo over the sheet: the browser stacks the two groups by its own order, which put the photo under (23/10) */
::view-transition-group(mag-sheet) { z-index: 1; }
::view-transition-group(mag-photo) { z-index: 2; }
::view-transition-group(root) { animation: none; }
::view-transition-old(root) { display: none; }
::view-transition-new(root) { animation: none; }
@media (max-width: 767px) {
  .r-mag-logo { height: 1.25rem; }
  /* the phone's cover is a cover: the title over the foot of the photograph, on a shade of the night, so the first
     screen holds both; the words and the credit follow under it */
  .r-mag-cover { display: block; min-height: 0; }
  .r-mag-cover-img { aspect-ratio: 4 / 5; }
  .r-mag-cover-img::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to bottom, transparent, var(--night) 88%); }
  .r-mag-cover-text { position: relative; z-index: 1; margin-top: -11.5rem; padding: 0 var(--margin) 2.5rem; }
  .r-mag-title { margin: .875rem 0 1.5rem; font-size: clamp(2.75rem, 12.5vw, 3.75rem); }
  .r-mag-label, .r-mag-state, .r-mag-cols, .r-mag-text, .r-mag-wide, .r-mag-sec.is-two .r-mag-text, .r-mag-sec.is-two .r-mag-side { grid-column: 1 / -1; grid-row: auto; }
  .r-mag-intro { row-gap: 1.5rem; }
  .r-mag-cols { grid-template-columns: 1fr; row-gap: 1.25rem; }
  /* the phone: the three photographs as cards that stack while the article scrolls, each one coming to rest a little
     lower and further right than the one under it, as in the reference on a phone */
  .r-mag-collage { display: block; padding-bottom: 1rem; }
  .r-mag-collage .r-mag-ph { position: sticky; top: calc(1rem + var(--i, 0) * 1.5rem); width: 84%; margin: 0 0 32vh calc(var(--i, 0) * 8%); }
  .r-mag-cap { margin-top: 0; }
  .r-mag-collage .is-a { --i: 0; } .r-mag-collage .is-b { --i: 1; } .r-mag-collage .is-c { --i: 2; margin-bottom: 1.25rem; }
  .r-mag-quote p { font-size: clamp(2.25rem, 10.5vw, 3rem); }
  .r-mag-wide, .r-mag-sec.is-two .r-mag-side { width: 100%; }
  .r-mag-sec.is-two .r-mag-text { position: static; }
  .r-mag-sec.is-two { row-gap: 2.5rem; }
  .r-mag-ctas { flex-direction: column; align-items: center; }
  .r-mag-end { padding-bottom: calc(2.5rem + var(--cookie-space, 0px)); }
  .r-mag-end .r-foot-bottom { margin-top: 3.5rem; }
}

/* ================================ FOOTER (approved, Lacoste-style) ================================ */
/* The approved footer (the giant FORMA, «la bottom line mi piace molto in stile Lacoste») laid out as the reference's
   (curator 24/10: «possiamo impostarla come Odd Ritual? con le stesse animazioni e impostazione, mantenendo FORMA
   gigante stile Lacoste»; oddritualgolf.com read live on 24/10, clients/forma/ref-oddritual-2026-10-24: .footer,
   .footer-col.has-line, .footer-h_line, .footer-link.is-menu). On a laptop:
   - one screen, as the reference's (min-height 100svh): at the top the signature from column 1 and the consultation
     line in capitals from column 7; in the middle the giant FORMA; at the bottom the columns and the last row;
   - three columns, Shop, Social and Contatti, three grid columns each at the places they had among four: a title, a
     hairline (0.5 px, the text's colour at 50 %), the links in small capitals stacked with no gap, faded until the
     mouse is on them, when they take the full colour at once and nothing else moves;
   - the last row: the rights on the left, the motto in small type on the right.
   Kept from FORMA: the brown and the sand, the signature in the serif, the giant FORMA (the reference has none).
   Departures: the reference's newsletter is left out (FORMA has none); its credit at 20 % opacity in the last row
   becomes the motto in the faded sand, which reads at 4.5:1. On a tablet the columns go two to a row (the reference
   too, below 992 px). First try, same day: the giant FORMA between the columns and the last row made the footer about
   1.4 screens tall. Version 29, same day: the reference's photo window (.footer-menu_imgs_wrap), copied in version 28,
   opened over the giant FORMA and the curator removed it («elimina le foto a comparsa perché coprono il logo…
   l'animazione della freccetta è sufficiente»), with the «Assistenza» column and the number beside WhatsApp. Version
   30: the reference's arrow ([text-btn-icon]) went too («eliminerei anche la freccetta e lascerei solo il cambio
   colore»); keyboard focus takes the site's focus line again, which the footer had turned off while the arrow marked
   the focus. Gate: qa/footer_laptop.mjs */
/* 3.25rem under the last row instead of the reference's 1.25rem: the prototype's badge is fixed in the corner (.proto,
   .75rem from the bottom and 1.6875rem tall), and the motto must not go under it */
.r-foot { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto auto; column-gap: var(--gutter); min-height: 100svh; padding: 1.25rem var(--margin) calc(3.25rem + var(--cookie-space, 0px)); background: var(--brand); color: var(--on-night); }
.r-foot-top { display: contents; }
.r-foot-sign { grid-column: 1 / 7; grid-row: 1; margin: 0; font: 400 clamp(1.75rem, 3vw, 2.75rem)/1.1 var(--f-serif) !important; text-transform: uppercase; }
.r-foot-big { grid-column: 1 / -1; grid-row: 2; align-self: center; display: block; margin-block: 2.5rem; }
.r-foot-big .logo-word { width: 100%; }
.r-foot-cols { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); }
.r-foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gutter); min-width: 0; }
.r-foot-col > .t-upper { margin: 0; }
.r-foot-line { display: block; align-self: stretch; height: .5px; background: currentColor; opacity: .5; }
.r-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
.r-foot-col li { max-width: 100%; font: 600 .875rem/1.1 var(--f-sans); text-transform: uppercase; color: var(--on-night-2); overflow-wrap: anywhere; }
.r-foot-col a:hover, .r-foot-col a:focus-visible { color: var(--on-night); }
.r-foot-bottom { grid-column: 1 / -1; grid-row: 4; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .75rem; margin-top: 4.25rem; font: 600 .875rem/1.1 var(--f-sans); text-transform: uppercase; } /* 6.5rem until 14/11: the legal row below (1.25rem + one .75rem/1.3 line ≈ 2.25rem) takes its height from here, so the footer stays one screen */
.r-foot-bottom > .r-d { font-size: .75rem; color: var(--on-night-2); }
/* the legal line (14/11/2026): company name and VAT number left, the four legal pages right, under the bottom line and in
   its secondary colour, so the curator's line stays the last word in size and weight */
.r-foot-legal { grid-column: 1 / -1; grid-row: 5; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 1.25rem; font: 400 .75rem/1.3 var(--f-sans); color: var(--on-night-2); }
.r-foot-legal i { font-style: normal; }
.r-foot-legal a:hover, .r-foot-legal a:focus-visible { color: var(--on-night); }
@media (max-width: 991px) { .r-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; } }
/* phone footer (curator 21/10: «troppo testo e impaginato male»; 23/10: the two square WhatsApp and Instagram buttons
   «sanno troppo di AI slop… studia un design elegante», the laptop stays as it is). The reference's own phone footer
   (oddritualgolf.com, read 23/10: «Social | Instagram», «Get in touch | email, phone», a label column and a value
   column between hairlines): three rows, each one link the whole width of the screen, a label in small capitals, the
   value and an arrow; the signature and the consultation line above, the big name, a one-word close. The address
   lives in its row (it opens the map), so it is not written twice. No row of categories (curator 23/10 evening: «da
   mobile nella bottom line elimina la riga con: giacche pantaloni camicie t shirt scarpe»; the menu has them). The
   rules below set the phone's own sizes, so the laptop's layout of 24/10 does not reach it */
.r-foot-m, .r-m { display: none; }
@media (max-width: 767px) {
  .r-foot { display: block; min-height: 0; padding: 3.5rem var(--margin) calc(2.5rem + var(--cookie-space, 0px)); }
  .r-foot-top { display: block; padding-bottom: 2.25rem; }
  .r-foot-cols, .r-d { display: none; }
  .r-m { display: inline; }
  .r-foot-sign { font-size: 1.75rem !important; }
  .r-foot-m { display: block; }
  .r-foot-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
  .r-foot-rows li { border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
  .r-foot-rows a { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; min-height: 3.375rem; color: var(--on-night); text-decoration: none; }
  .r-foot-rows .t-upper { font-size: .75rem; color: var(--on-night-2); }
  .r-foot-rows .r-foot-v { font: 400 .9375rem/1.25 var(--f-sans); overflow-wrap: anywhere; }
  @media (max-width: 360px) { .r-foot-rows .r-foot-v { font-size: .875rem; } } /* @formalageometriadellostile on one line down to 320 px */
  .r-foot-rows i { font: 400 1rem/1 var(--f-sans); font-style: normal; color: var(--on-night-2); transition: translate .3s ease-out; }
  .r-foot-rows a:active i { translate: .25rem 0; }
  .r-foot-big { margin-block: 2.5rem 0; }
  .r-foot-bottom { align-items: normal; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); font: 600 .75rem/1.1 var(--f-sans); color: var(--on-night-2); }
}
/* phone: every grid child takes the full width, after all the column placements above (same specificity, later
   wins); the phone layouts that keep two columns name their parent and so win over this rule */
@media (max-width: 767px) { .grid > * { grid-column: 1 / -1; } }
/* the legal pages (14/11/2026): the drafts of clients/forma/legale/, one reading column in the shop's light shell; the
   title in the display serif, the sections in the site's small capitals, a field the client has not given yet in a
   visible mark (markdown.mjs), never filled in by the page */
.r-legal { padding-top: calc(var(--nav-h) + 3.5rem); padding-bottom: 7rem; }
.r-legal > * { max-width: 44rem; margin-inline: auto; }
.r-legal h1 { margin-block: 0 2.5rem; font: 400 var(--h2)/1 var(--f-serif); text-transform: uppercase; }
.r-legal h2 { margin-block: 3rem 1rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); font: 600 .875rem/1.1 var(--f-sans); text-transform: uppercase; }
.r-legal p, .r-legal li, .r-legal td { font: 400 .9375rem/1.55 var(--f-sans); }
.r-legal p, .r-legal ul, .r-legal ol { margin-block: 0 1rem; }
.r-legal ul, .r-legal ol { padding-left: 1.25rem; list-style: disc; }
.r-legal ol { list-style: decimal; }
.r-legal li::marker { color: var(--muted); }
.r-legal strong { font-weight: 600; }
.r-legal a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; overflow-wrap: anywhere; }
.r-legal code { font: inherit; font-weight: 600; white-space: nowrap; }
.r-legal hr { border: 0; height: 0; margin-block: 3rem 0; }
.r-legal blockquote { margin: 0 auto; padding: 1.5rem 1.5rem .5rem; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.r-legal-table { overflow-x: auto; margin-block: 0 1.5rem; }
.r-legal table { width: 100%; border-collapse: collapse; }
.r-legal th { padding: 0 .75rem .5rem 0; text-align: left; vertical-align: bottom; font: 600 .75rem/1.2 var(--f-sans); text-transform: uppercase; color: var(--muted); }
.r-legal td { padding: .75rem .75rem .75rem 0; vertical-align: top; border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); font-size: .875rem; line-height: 1.45; }
.r-legal mark.r-da { padding: .05em .3em; background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--ink); font-style: normal; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
@media (max-width: 767px) {
  .r-legal { padding-top: calc(var(--nav-h) + 2rem); padding-bottom: 5rem; }
  .r-legal th, .r-legal td { min-width: 8rem; }
  .r-foot-legal { display: block; margin-top: .75rem; }
  .r-foot-legal > span { display: block; }
  .r-foot-legal > span + span { margin-top: .375rem; }
  .r-foot-name { display: none; } /* phone: at most 30 words in the footer (qa/phone_fit.mjs); «FORMA» is in the bottom line and the full name on Note legali */
}
/* the cookie note (09/11/2026): in the corner that holds nothing — bottom left (a photo on the shop and the product
   page), bottom right on the home, whose title sits bottom left; on a phone the home's title fills the bottom, so there
   the note sits under the bar. The site's night and its «( link )». Where it would sit on the prototype badge (.proto,
   bottom right: offset + .5rem padding ×2 + one line), it stands above it at the badge's own offset; when the badge goes
   at launch, the rule goes with it (the published link, 09/11: only the badge's edge showed under the note). While it is
   open, the footer and the article's close grow at the bottom by --cookie-space (riviera.js), so their last line can be
   scrolled above it */
.r-cookie { position: fixed; left: var(--margin); bottom: var(--margin); z-index: 90; display: flex; align-items: flex-end; gap: 1.5rem; max-width: 29rem; padding: 1rem 1.125rem; background: var(--night); color: var(--on-night); border: 1px solid color-mix(in srgb, currentColor 18%, transparent); opacity: 0; translate: 0 1rem; transition: opacity .6s cubic-bezier(.15, 0, .15, 1), translate .6s cubic-bezier(.15, 0, .15, 1); }
.r-cookie.is-in { opacity: 1; translate: none; }
.r-cookie p { margin: 0; font: 400 .8125rem/1.4 var(--f-sans); color: var(--on-night-2); }
.r-cookie button { flex: none; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.r-cookie-act { flex: none; display: flex; gap: 1rem; align-items: baseline; } /* «( Informativa )» → cookie.html (14/11), then «( Ok )» */
.r-cookie .br { color: var(--on-night-2); }
[data-page="home"] .r-cookie { left: auto; right: var(--margin); }
[data-page="home"] .proto ~ .r-cookie { right: .75rem; bottom: calc(.75rem + 1.6875rem + .75rem); } /* stacked: one right edge */
@media (max-width: 767px) {
  .r-cookie, [data-page="home"] .r-cookie { left: var(--margin); right: var(--margin); max-width: none; gap: 1rem; }
  .proto ~ .r-cookie { bottom: calc(.5rem + 1.3125rem + .5rem); }
  [data-page="home"] .r-cookie, [data-page="home"] .proto ~ .r-cookie { right: var(--margin); bottom: auto; top: calc(var(--nav-h) + var(--margin)); translate: 0 -1rem; }
  [data-page="home"] .r-cookie.is-in { translate: none; }
  /* two actions beside the sentence left it five lines in a third of the width (14/11): the sentence takes the width,
     the actions go under it, to the right */
  .r-cookie { flex-wrap: wrap; row-gap: .75rem; }
  .r-cookie p { flex: 1 1 100%; }
  .r-cookie-act { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .r-cookie { transition: none; translate: none; } }
.proto { position: fixed; right: .75rem; bottom: .75rem; z-index: 70; padding: .5rem .75rem; background: color-mix(in srgb, var(--night) 85%, transparent); color: var(--on-night); font: 600 .6875rem/1 var(--f-sans); text-transform: uppercase; }
@media (max-width: 767px) { .proto { right: .5rem; bottom: .5rem; padding: .375rem .5rem; font-size: .5625rem; } .proto-more { display: none; } }