/* Sempre Photography, in the colours of Momenti: the dark room obsidian, the light room pearl,
   white for the one button that matters on dark and ink on light as the brand says, and the
   ice-to-violet aurora as the one light: the numerals, the chosen pill, the focus, the glow of
   the opening page. Cormorant Garamond for the lines read once, Jost for everything else; the
   photographs as prints with real depth. Every colour through a token: the dark room on :root,
   the light room under .light. DESIGN.md has the reasons. */
:root {
  color-scheme: dark;
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* the dark room */
  --bg: #0A0B0D;
  --surface: #111317;
  --surface-2: #171A1F;
  --text: #F3F4F6;
  --text-2: #B4B9C0;
  --text-3: #6C717A;
  --line: rgb(255 255 255 / 0.08);
  --line-strong: rgb(255 255 255 / 0.18);
  --edge: rgb(255 255 255 / 0.24);
  --fill: rgb(255 255 255 / 0.03);
  --aurora-a: #9AD6FF;
  --aurora-b: #B59CFF;
  --aurora: linear-gradient(135deg, var(--aurora-a), var(--aurora-b));
  --aurora-fill: rgb(154 214 255 / 0.1);
  --aurora-glow-a: rgb(154 214 255 / 0.16);
  --aurora-glow-b: rgb(181 156 255 / 0.14);
  --print-halo: 0 36px 110px -16px rgb(154 214 255 / 0.42), 0 -24px 90px -16px rgb(181 156 255 / 0.3);
  --accent: var(--aurora-a);
  --primary: #F3F4F6;
  --primary-hover: #FFFFFF;
  --primary-text: #0A0B0D;
  --primary-glow: rgb(154 214 255 / 0.4);
  --focus: rgb(154 214 255 / 0.55);
  --error: #FF8A80;
  --print-border: 0px;
  --print-paper: transparent;
  --shadow-print: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 24px -8px rgb(0 0 0 / 0.55), 0 32px 64px -16px rgb(0 0 0 / 0.65);
  --shadow-print-lift: 0 2px 4px rgb(0 0 0 / 0.4), 0 20px 36px -10px rgb(0 0 0 / 0.6), 0 48px 80px -20px rgb(0 0 0 / 0.7);
  /* the scale */
  --display: clamp(36px, 7.4vw, 108px);
  --title: clamp(36px, 4.6vw, 64px);
  --group: clamp(24px, 2vw, 28px);
  --lead: clamp(19px, 1.5vw, 22px);
  --body: 18px;
  --small: 14px;
  --numeral: clamp(48px, 5vw, 76px);
  /* the rhythm */
  --section: clamp(88px, 10vw, 144px);
  --group-gap: clamp(40px, 5vw, 72px);
  --gutter: clamp(20px, 4vw, 48px);
  --wrap: 1280px;
  --radius: 2px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
}
.light {
  --bg: #F4F5F8;
  --surface: #FFFFFF;
  --surface-2: #EEF0F4;
  --text: #121418;
  --text-2: #555B64;
  --text-3: #8B9099;
  --line: rgb(18 20 24 / 0.08);
  --line-strong: rgb(18 20 24 / 0.18);
  --edge: rgb(18 20 24 / 0.24);
  --fill: rgb(18 20 24 / 0.03);
  --aurora-a: #3D8BE8;
  --aurora-b: #7B5CE6;
  --aurora-fill: rgb(61 139 232 / 0.1);
  --aurora-glow-a: rgb(61 139 232 / 0.1);
  --aurora-glow-b: rgb(123 92 230 / 0.08);
  --print-halo: 0 36px 110px -16px rgb(61 139 232 / 0.32), 0 -24px 90px -16px rgb(123 92 230 / 0.24);
  --accent: var(--aurora-a);
  --primary: #121418;
  --primary-hover: #000000;
  --primary-text: #F4F5F8;
  --primary-glow: rgb(61 139 232 / 0.3);
  --focus: rgb(61 139 232 / 0.5);
  --error: #C4453A;
  --print-border: 10px;
  --print-paper: #FFFFFF;
  --shadow-print: 0 1px 2px rgb(18 20 24 / 0.08), 0 18px 36px -18px rgb(18 20 24 / 0.3);
  --shadow-print-lift: 0 2px 4px rgb(18 20 24 / 0.08), 0 28px 48px -20px rgb(18 20 24 / 0.35);
  background: var(--bg);
  color: var(--text);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: #0A0B0D; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font: 300 var(--body)/1.6 var(--sans);
  letter-spacing: 0.01em;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* a breath of film grain over everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--aurora-a); color: #0A0B0D; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius); }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; text-wrap: balance; hyphens: none; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
section.wrap { padding-top: var(--section); padding-bottom: var(--section); }
.light > section + section { padding-top: 0; }
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 50; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.skip:focus { top: 12px; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* the scale */
.display { font-size: var(--display); font-weight: 300; line-height: 1; letter-spacing: -0.01em; }
.title { font-size: var(--title); line-height: 1.05; letter-spacing: -0.005em; margin-bottom: var(--group-gap); }
h3 { font-size: var(--group); font-weight: 500; line-height: 1.15; }
.lead { font-size: var(--lead); line-height: 1.5; }
.small, .note, .optional, .caption { font-size: var(--small); line-height: 1.5; color: var(--text-2); }
.numeral { display: block; width: max-content; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: var(--numeral); line-height: 0.9; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.facts { display: grid; gap: 28px; }
.facts li { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.facts strong { font-family: var(--serif); font-weight: 500; font-size: var(--group); line-height: 1.15; max-width: 24ch; text-wrap: balance; }
.facts span { color: var(--text-2); max-width: 36ch; }
@media (min-width: 720px) { .facts.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; } }
@media (min-width: 720px) { .facts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; } }
@media (min-width: 1000px) { .facts.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* what your restaurant gets: the facts lit, a short line of aurora drawn over each one as the block
   comes into view, on plain obsidian (the user's wish of 2026-10-22: the lines are enough) */
.facts.lit li { position: relative; padding-top: 26px; border-top: 0; }
.facts.lit li::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 2px; border-radius: 1px; background: var(--aurora); transform-origin: left; transition: transform 1100ms var(--ease-expo); transition-delay: calc(140ms + var(--i, 0) * 140ms); }
.js .facts.lit li::before { transform: scaleX(0); }
.js .facts.lit.is-in li::before { transform: scaleX(1); }
.facts.lit li:nth-child(2) { --i: 1; } .facts.lit li:nth-child(3) { --i: 2; } .facts.lit li:nth-child(4) { --i: 3; }
.facts.lit strong { font-weight: 400; font-size: clamp(24px, 2.1vw, 30px); }
/* plain facts: lines in Jost at the lead's size, as the home's statement (the join page; the user found the serif lines huge, 2026-10-22) */
.facts.plain { gap: 20px; }
.facts.plain li { font-size: var(--lead); line-height: 1.5; color: var(--text); max-width: 26ch; text-wrap: pretty; }
.facts.plain.lit li { padding-top: 12px; color: var(--text); } /* a short line sits close under its line of aurora (the gaps were "huge" to the user on the phone) */
@media (min-width: 720px) { .facts.plain.two, .facts.plain.four { gap: 28px 40px; } }

/* controls */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 12px 28px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--small);
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, border-color var(--t-hover) ease, color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}
.button.primary { background: var(--primary); border-color: transparent; color: var(--primary-text); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -8px rgb(255 255 255 / 0.25); }
.light .button.primary { box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 10px 28px -10px rgb(18 20 24 / 0.5); }
.button.quiet { border-color: var(--edge); background: var(--fill); }
.button.small { min-height: 40px; padding: 8px 20px; }
.button:active { transform: scale(0.97); }
.button[disabled] { opacity: 0.6; cursor: default; }
.link { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; text-decoration-thickness: 0.06em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .button.primary:hover { background: var(--primary-hover); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 32px -8px var(--primary-glow); }
  .button.quiet:hover { border-color: var(--text); }
  .link:hover { text-decoration-color: currentColor; }
}

/* prints: photographs with real depth, white-bordered on pearl, bare on obsidian */
.print {
  margin: 0;
  position: relative;
  aspect-ratio: 3 / 2;
  max-width: 100%;
  padding: var(--print-border);
  background: var(--print-paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-print);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.print img { width: 100%; height: 100%; min-width: 0; object-fit: cover; opacity: 0; transition: opacity 900ms ease; }
.print img.loaded { opacity: 1; }
.print.r23 { aspect-ratio: 2 / 3; }
@media (hover: hover) and (pointer: fine) {
  .print:hover { transform: translateY(-3px); box-shadow: var(--shadow-print-lift); }
  .step.is-in .print:hover { box-shadow: var(--shadow-print-lift), var(--print-halo); }
}
@media (min-width: 900px) { .bleed { aspect-ratio: 21 / 9; } }

/* the bar: nothing on the opening, glass once the page moves, paper over the light rooms */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px var(--gutter);
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  color: #F3F4F6;
  border-bottom: 1px solid transparent;
  transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease;
}
.nav.solid { background: rgb(10 11 13 / 0.62); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border-bottom-color: rgb(255 255 255 / 0.08); }
.nav.on-light { color: #121418; }
.nav.on-light.solid { background: rgb(244 245 248 / 0.8); border-bottom-color: rgb(18 20 24 / 0.08); }
.nav .top-action { background: #F3F4F6; color: #0A0B0D; }
.nav.on-light .top-action { background: #121418; color: #F4F5F8; }
.nav .home { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; min-height: 40px; }
.nav .mark.on-light, .nav.on-light .mark.on-dark { display: none; }
.nav.on-light .mark.on-light { display: block; }
/* the name beside the mark is the logo's own lettering, Sempre over PHOTOGRAPHY, the mark as tall as it so that the two read as one
   logo in proportion, white or black to match the room, on every screen (the user's wish of 2026-10-22; the brand pack has no horizontal lockup) */
.nav .home { gap: 10px; }
.nav .mark { width: auto; height: 36px; }
.nav .words { display: block; height: 32px; width: auto; }
@media (min-width: 900px) { .nav .home { gap: 12px; } .nav .mark { height: 44px; } .nav .words { height: 36px; } } /* larger on the desktop (the user's wish of 2026-10-22); the mark is the solid one, whose crescent holds at small sizes */
.nav .words.on-light, .nav.on-light .words.on-dark { display: none; }
.nav.on-light .words.on-light { display: block; }
.nav .links { display: none; gap: 28px; align-items: center; font-size: 14px; letter-spacing: 0.02em; }
.nav .links a { opacity: 0.85; transition: opacity var(--t-hover) ease; min-height: 40px; display: inline-flex; align-items: center; }
.nav .links a:hover { opacity: 1; }
.nav .links .sheet-only { display: none; }
.nav .menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  opacity: 0.85;
  cursor: pointer;
}
.nav .menu svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; fill: none; }
@media (min-width: 900px) { .nav .links { display: flex; } }
@media (max-width: 899px) {
  .nav { gap: 14px; }
  .nav .menu { display: inline-flex; }
  .nav .top-action { display: none; }
  /* the open sheet: the bar's glass is dropped, since a backdrop filter would hold the fixed sheet inside the
     bar (the sheet opened inside the bar once the page had scrolled, the user's report of 2026-10-22) */
  .nav.open { color: #F3F4F6; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
  .nav.open .links { display: grid; position: fixed; inset: 0; z-index: 40; align-content: center; justify-items: center; text-align: center; gap: 8px; padding: var(--gutter); background: #0A0B0D; color: #F3F4F6; font-family: var(--serif); font-size: clamp(28px, 7.6vw, 36px); letter-spacing: 0; }
  .nav.open .links a { opacity: 1; }
  .nav.open .links .sheet-only { display: inline-flex; margin-top: 28px; font-family: var(--sans); font-size: 15px; letter-spacing: 0.04em; }
  /* the logo over the links while the sheet is open (the user's wish of 2026-10-22) */
  .nav.open .links::before { content: ""; width: 150px; height: 127px; margin-bottom: 36px; background: url("brand/sempre-logo-white-solid.svg") center / contain no-repeat; } /* the solid logo, its crescent white (the user's wish of 2026-10-22) */
  html.sheet { overflow: hidden; } /* the page behind the sheet does not scroll */
  /* on the phone the bar is glass from the first moment, not only once the page has moved (the user found it nicer, 2026-10-22) */
  .nav:not(.open) { background: rgb(10 11 13 / 0.62); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border-bottom-color: transparent; } /* no line under the bar on the phone (the user's wish) */
  .nav.on-light:not(.open) { background: rgb(244 245 248 / 0.8); border-bottom-color: transparent; }
  .nav.open .menu { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: var(--gutter); z-index: 41; color: #F3F4F6; }
  .nav.open .home { visibility: hidden; } /* the small mark in the bar gives way to the logo on the sheet */
}
/* the opening of the site on a phone: the logo alone on obsidian, which fades away after a moment and lets
   the page in (the user's wish of 2026-10-22); once a session, the phone only; the opening's own
   motion waits behind it */
.splash { display: none; }
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  html.splash-on .splash, html.splash-off .splash { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: #0A0B0D; }
  .splash img { width: 150px; height: auto; opacity: 0; animation: splash-logo 700ms var(--ease-out) 120ms forwards; }
  html.splash-off .splash { animation: splash-away 600ms var(--ease-out) forwards; }
  html.splash-on .hero .rise, html.splash-on .hero .arrive, html.splash-on .hero-photo img, html.splash-on .hero::before { animation-play-state: paused; }
}
@keyframes splash-logo { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes splash-away { to { opacity: 0; visibility: hidden; } }

/* the opening: the words on clean obsidian at the left, the photograph at the right bleeding to
   the edge, a soft seam between them; the two lines rise from their masks, the picture settles
   and then drifts slowly; the aurora glows faintly behind the words */
.hero { position: relative; min-height: min(100svh, 920px);
  --hero-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); display: grid; grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); background: #0A0B0D; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -14%; bottom: -30%;
  width: 60%; height: 80%;
  background: radial-gradient(closest-side, var(--aurora-glow-a), transparent 70%);
  opacity: 0;
  animation: glow 3s ease 900ms both;
  pointer-events: none;
}
@keyframes glow { to { opacity: 1; } }
.hero-words { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 0; padding: 150px var(--gutter) 80px var(--hero-left); max-width: calc(560px + var(--hero-left)); min-width: 0; }
.hero.inner .hero-photo img.tall { object-position: 50% 28%; }
.hero h1 { color: #F3F4F6; font-size: clamp(38px, 4.4vw, 64px); max-width: 22ch; }
.hero h1.long { font-size: clamp(36px, 3.7vw, 49px); max-width: 26ch; } /* a longer headline, still two lines: measured against the 512px column */
.hero .lede { max-width: 42ch; margin-top: 28px; font-size: var(--lead); line-height: 1.5; color: #F3F4F6; opacity: 0.9; }
.hero .remember span { white-space: nowrap; } /* the two sentences break only between themselves */
.hero .remember { margin-top: 22px; width: max-content; max-width: 100%; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: calc(var(--lead) * 1.12); line-height: 1.4; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero .button.quiet { color: #F3F4F6; border-color: rgb(243 244 246 / 0.4); }
.hero-photo { position: relative; z-index: 1; margin: 0; min-width: 0; overflow: hidden; }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 40%; transform: scale(1.08); animation: hero-in 2400ms var(--ease-expo) both, hero-drift 28s var(--ease-soft) 2400ms infinite alternate; }
.hero-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, #0A0B0D 0%, rgb(10 11 13 / 0.6) 7%, rgb(10 11 13 / 0) 20%), linear-gradient(to bottom, rgb(10 11 13 / 0.5), transparent 20%), linear-gradient(to top, rgb(10 11 13 / 0.3), transparent 26%); }
@keyframes hero-in { to { transform: scale(1); } }
@keyframes hero-drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.05) translate(-1.5%, -1%); } }
.lines .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.lines .rise { display: block; }
/* the opening of a page of words alone (the privacy policy): no picture, the same left edge and the same glow, a modest height */
.hero.plain { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.hero.plain .hero-words { padding: 180px var(--gutter) 72px var(--hero-left); max-width: calc(720px + var(--hero-left)); }
.hero .dated { margin-top: 22px; font-size: var(--small); color: var(--text-2); }
@media (max-width: 899px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  /* the whole photograph, nothing cut away: a square frame for a square picture (the user found
     the cropped one "weirdly shifted" on 2026-10-22); the tall one keeps a 4 : 5 frame with headroom */
  /* the picture starts under the bar, so that the bar covers no face (the user's wish of 2026-10-22) */
  .hero-photo { order: -1; aspect-ratio: 1 / 1; max-height: 72svh; margin-top: calc(52px + env(safe-area-inset-top, 0px)); }
  .hero-photo img { object-position: 50% 50%; }
  /* the events opening on the phone only: the picture a quarter wider than its frame and held to the right, so that its left
     side is cropped a little and the table sits in proportion (the user's wish of 2026-10-22; the desktop is untouched) */
  .hero-photo img.right { width: 126%; max-width: none; left: auto; right: 0; } /* max-width: none, since every picture is capped at its frame otherwise */
  .hero-photo.tall { aspect-ratio: 4 / 5; }
  .hero.inner .hero-photo img.tall { object-position: 50% 12%; }
  .hero-photo::before { background: linear-gradient(to top, #0A0B0D 0%, #0A0B0D 20%, rgb(10 11 13 / 0.85) 36%, rgb(10 11 13 / 0) 62%), linear-gradient(to bottom, rgb(10 11 13 / 0.5), transparent 24%); }
  /* the words take the same height on every page, so that every opening is the same size on the
     phone too (the user's wish of 2026-10-22); the longest words, the restaurants page's, set it */
  /* the words start over the faded foot of the picture, so that they stand higher and the picture takes less of the
     screen while nothing of it is cut away (the user's wish of 2026-10-22) */
  /* the words start at the top of their block on every page, so that the headline begins at the same height over the picture's
     fade everywhere (centred, a shorter page's headline sat lower) */
  .hero-words { padding: 40px var(--gutter) 64px; max-width: none; min-height: 492px; margin-top: -34vw; align-content: start; } /* the words a little lower against the black behind them (the user's wish of 2026-10-22) */
  .hero h1 { font-size: clamp(36px, 10.4vw, 52px); }
  .hero h1.long { font-size: clamp(30px, 8.6vw, 52px); }
  .hero.plain .hero-words { margin-top: 0; min-height: 0; padding: calc(124px + env(safe-area-inset-top, 0px)) var(--gutter) 56px; }
}

/* how an evening goes: three steps, picture and words alternating, numerals in the aurora */
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--group-gap); }
/* as a step comes into view, a halo of aurora comes up behind its picture (the user's wish of
   2026-10-22, after a thread that drew itself on scroll made the page misbehave and was removed) */
.step .print { transition: transform 320ms var(--ease-out), box-shadow 1600ms var(--ease-out); }
.step.is-in .print { box-shadow: var(--shadow-print), var(--print-halo); }
.step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.step > * { min-width: 0; }
.step .words { display: grid; gap: 14px; max-width: 44ch; }
.step p { color: var(--text-2); }
.step .note { color: var(--text-2); }
@media (min-width: 900px) {
  .steps { gap: calc(var(--group-gap) * 1.4); }
  .step { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
  .step:nth-child(even) .print { order: 2; }
}
/* the gallery under the opening of the events page: first the kinds of events running slowly to
   the right on a band of aurora, which parts the opening from the pictures; then, on the light
   room (the user wanted white around the gallery, 2026-10-22), a strip of pictures as prints with
   their white borders and real depth, which scrolls sideways, still under the hand (the widening
   was too much for the eyes, the user's word); under the strip a bar with a hairline that fills
   with aurora as the strip is scrolled and the two round arrows at the right, so that nothing lies
   on the pictures */
.gallery { position: relative; padding-bottom: 56px; }
.gallery .strip-wrap { margin-top: 40px; }
.strip { --edge: var(--gutter); display: flex; gap: 28px; padding: 12px var(--edge) 36px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: none; outline: none; }
.strip::-webkit-scrollbar { display: none; }
.strip:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.slide { flex: 0 0 auto; width: clamp(300px, 44vw, 700px); aspect-ratio: 3 / 2; margin: 0; padding: var(--print-border); background: var(--print-paper); border-radius: var(--radius); box-shadow: var(--shadow-print); scroll-snap-align: start; }
.slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slide.sq { width: calc(clamp(300px, 44vw, 700px) * 2 / 3); aspect-ratio: 1 / 1; } /* a square picture, as tall as the others */
.strip-bar { display: flex; align-items: center; gap: 32px; }
.strip-bar.wrap { max-width: none; } /* the strip and its bar start at the gutter, further left than the page's measure (the user's wish of 2026-10-22) */
.strip-track { flex: 1 1 auto; height: 1px; background: var(--line-strong); }
.strip-fill { height: 100%; width: 0; background: var(--aurora); transition: width 400ms var(--ease-out); }
.strip-nav { display: flex; gap: 10px; }
.arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--text); display: grid; place-items: center; cursor: pointer; transition: opacity 300ms var(--ease-out), border-color 200ms, background 200ms; }
.arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.arrow:hover { border-color: var(--text); background: var(--fill); }
.arrow.off { opacity: 0.3; pointer-events: none; }
.kinds-band { display: flex; overflow: hidden; background: var(--aurora); color: #0A0B0D; }
/* one track holding the two identical runs is moved by exactly half its width, so the loop joins without a jump
   (two runs moved on their own jumped mid-word on the phone, the user's report of 2026-10-22) */
.kinds-track { display: flex; width: max-content; will-change: transform; animation: kinds-run 110s linear infinite; }
.kinds-run { display: flex; flex: 0 0 auto; }
.kinds-run span { display: inline-flex; align-items: center; gap: 26px; padding: 12px 0 12px 26px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(19px, 1.5vw, 24px); letter-spacing: 0.01em; white-space: nowrap; }
.kinds-run span::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.5; }
@keyframes kinds-run { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* to the left (the user's wish of 2026-10-22) */
.kinds-band:hover .kinds-track { animation-play-state: paused; }
/* easy, and without risk */
.trial, .teaser {
  margin-top: var(--group-gap);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 32px 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.trial p, .teaser p { font-family: var(--serif); font-size: var(--group); line-height: 1.2; max-width: 28ch; }
.join-band { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--group-gap); align-items: center; }
.join-words { display: grid; gap: 20px; justify-items: start; }
.join-words .title { margin-bottom: 0; }
.join-words .lead { color: var(--text-2); max-width: 44ch; }
@media (min-width: 900px) { .join-band { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; } }
.trial, .teaser { background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06); }

/* questions, in two groups by audience, quiet: not the foreground */
.questions.quiet .title { font-size: clamp(28px, 2.8vw, 38px); margin-bottom: 40px; }
.questions.quiet summary { font-family: var(--sans); font-weight: 300; font-size: var(--body); padding: 14px 0; color: var(--text); }
.questions.quiet details p { font-size: 16px; padding-bottom: 18px; }
.questions.quiet .q-group h3 { font-size: 15px; letter-spacing: 0.04em; font-family: var(--sans); font-weight: 300; margin-bottom: 10px; }
.q-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.q-group { min-width: 0; }
.q-group h3 { margin-bottom: 16px; color: var(--text-2); font-weight: 400; }
@media (min-width: 900px) { .q-groups { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; } }
.questions .list { border-top: 1px solid var(--line-strong); }
.questions details { border-bottom: 1px solid var(--line); }
.questions summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; font-family: var(--serif); font-weight: 500; font-size: var(--group); line-height: 1.2; cursor: pointer; list-style: none; min-height: 44px; transition: color var(--t-hover) ease; }
.questions summary::-webkit-details-marker { display: none; }
.plus { flex: none; width: 16px; height: 16px; stroke: var(--text-2); stroke-width: 1.2; fill: none; transition: transform 300ms var(--ease-out); }
details[open] .plus { transform: rotate(45deg); }
.questions details p { padding: 0 0 24px; max-width: 60ch; color: var(--text-2); animation: fade 400ms ease both; }

/* become a partner */
.partner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; padding-bottom: var(--section); }
.partner > * { min-width: 0; }
.partner .intro .title { margin-bottom: 20px; }
.partner .intro .lead { color: var(--text-2); max-width: 36ch; }
.inquiry {
  display: grid;
  gap: 24px 28px;
  padding: 36px clamp(20px, 3vw, 44px) 40px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  box-shadow: var(--shadow-print);
}
.choice { margin: 0; padding: 0; border: 0; }
.choice legend { padding: 0; margin-bottom: 12px; font-size: 16px; color: var(--text-2); letter-spacing: 0.02em; }
.choice label { display: inline-flex; margin: 0 10px 10px 0; vertical-align: top; }
.choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 22px; border: 1px solid var(--edge); background: var(--fill); border-radius: 999px; font-size: var(--small); letter-spacing: 0.03em; cursor: pointer; transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease, color var(--t-hover) ease; }
.choice input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: 16px; color: var(--text-2); letter-spacing: 0.02em; }
.req { color: var(--accent); }
.field .optional { color: var(--text-2); }
.field input, .field textarea {
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  letter-spacing: inherit;
  transition: border-color var(--t-hover) ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.field input.wrong { border-bottom-color: var(--error); }
.field .error { display: none; font-size: var(--small); color: var(--error); }
.field .error:not(:empty) { display: block; }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 4px; }
.note-line { font-size: var(--small); color: var(--text-2); }
.note-line.error { color: var(--error); }
.thanks { padding: 32px 0; }
@media (min-width: 900px) {
  .partner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .inquiry { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .choice, .field.full, .send, .hp { grid-column: 1 / -1; }
  .thanks { grid-column: 2; }
}

/* the two doors on the home page */
.doors { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--group-gap); }
.door { display: grid; gap: 14px; align-content: start; min-width: 0; }
.door h3 { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.15; margin-top: 12px; font-weight: 500; }
.door p { color: var(--text-2); max-width: 44ch; }
.door .button { justify-self: start; margin-top: 6px; }
@media (hover: hover) and (pointer: fine) { .door:hover .print { transform: translateY(-3px); box-shadow: var(--shadow-print-lift); } .door:hover .button { border-color: var(--text); } }
@media (min-width: 900px) { .doors { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }

/* the mission, on the dark room */
.mission { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: center; text-align: center; }
.mission > * { min-width: 0; }
.mission-line { font-family: var(--serif); font-weight: 300; font-size: var(--display); line-height: 1; letter-spacing: -0.01em; }
.mission .lead { max-width: 58ch; color: var(--text-2); }
.mission-always { width: max-content; max-width: 100%; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: calc(var(--lead) * 1.2); line-height: 1.3; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* the kinds of events, under the band */

/* the packages: three on hairlines, as a menu */
/* the packages as cards, like the plans of a subscription (the user's wish of 2026-10-22): the name,
   whom it is for, the price, what it includes with a tick of aurora, the button; the middle one is
   the one most chosen, framed in aurora, with the main button */
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 36px 32px 32px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow-print); }
.plan.featured { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--aurora) border-box; box-shadow: var(--shadow-print-lift), 0 0 80px -20px var(--aurora-glow-a); }
.plan .pick { position: absolute; top: -14px; left: 32px; padding: 5px 14px; border-radius: 999px; background: var(--aurora); color: #0A0B0D; font-size: 13px; letter-spacing: 0.04em; }
.plan h3 { font-size: clamp(30px, 2.6vw, 38px); font-weight: 400; }
.plan .price { margin-top: 10px; font-family: var(--serif); font-size: clamp(38px, 3.2vw, 48px); line-height: 1; letter-spacing: -0.01em; }
.plan .price .from { display: block; margin-bottom: 4px; font-family: var(--sans); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.plan .includes { display: grid; gap: 0; margin-top: 18px; margin-bottom: 26px; }
.plan .includes li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); color: var(--text-2); }
.plan .includes li::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 4px; background: var(--aurora); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.plan .button { margin-top: auto; align-self: stretch; }
.extras { margin-top: 32px; max-width: none; font-size: 15px; line-height: 1.6; color: var(--text-2); text-align: center; text-wrap: balance; }
.star { color: var(--accent); margin-left: 2px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: stretch; } .plan.featured { transform: translateY(-12px); } }

/* what we offer, what we ask */
.offer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--group-gap); align-items: start; }
.asks { display: grid; }
.asks li { padding: 14px 0; border-top: 1px solid var(--line); }
.asks li:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .offer { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; } }

/* selects, like the fields */
.field select { width: 100%; min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; letter-spacing: inherit; cursor: pointer; }
.field select:focus { outline: none; border-bottom-color: var(--accent); }
/* the parts of a form that follow a choice: shown as if they were the form's own fields */
.inquiry .for { display: contents; }

/* the close */
.close { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 56px; padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); color: var(--text-2); font-size: 15px; justify-items: center; text-align: center; }
.close .logo { width: 120px; height: auto; }
.close-lines { display: grid; gap: 6px; justify-items: center; }
.close-mission { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(24px, 2vw, 30px); line-height: 1.2; color: var(--text); }
.close-tag { color: var(--text-2); }
/* the mailbox, a quiet link under a hairline, lit by the aurora under the hand */
.close-contact a { color: var(--text); border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; transition: border-color 160ms ease; }
.close-contact a:hover { border-color: transparent; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.close .small { color: var(--text-2); font-size: 14px; margin-top: 10px; }
.close-legal { margin-top: 2px; font-size: 14px; }
.close-legal a { color: var(--text-2); border-bottom: 1px solid var(--line); padding-bottom: 1px; transition: border-color 160ms ease, color 160ms ease; }
.close-legal a:hover { color: var(--text); border-color: var(--line-strong); }

/* the privacy policy: chapters on hairlines, the title at the left and the words at the right on the desktop, the words in one measure */
.policy { display: grid; grid-template-columns: minmax(0, 1fr); }
.chapter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 44px 0 52px; border-top: 1px solid var(--line-strong); }
.chapter:first-child { border-top: 0; padding-top: 0; }
.chapter > * { min-width: 0; }
.chapter h2 { font-size: clamp(28px, 2.8vw, 38px); line-height: 1.1; }
.chapter .text { max-width: 62ch; }
.chapter h3 { font-size: clamp(21px, 1.7vw, 24px); font-weight: 500; line-height: 1.2; margin-top: 28px; margin-bottom: 8px; }
.chapter .text > :first-child { margin-top: 0; } /* a chapter starts at the same height whether with a heading or a paragraph */
.chapter p:first-child + h3 { margin-top: 24px; }
.chapter ul + p { margin-top: 1em; }
.chapter .points { display: grid; gap: 12px; margin-top: 12px; }
.chapter .points li { position: relative; padding-left: 24px; }
.chapter .points li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-2); } /* a dot, not a dash (the user's wish of 2026-10-27) */
.chapter strong { color: var(--text); font-family: var(--serif); font-weight: 500; font-size: 1.1em; }
.chapter a { color: var(--text); border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; transition: border-color 160ms ease; }
.chapter a:hover { border-color: transparent; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.contact-line { color: var(--text-2); }
@media (min-width: 900px) {
  .chapter { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; padding: 56px 0 64px; }
  .chapter h2 { position: sticky; top: 104px; }
}


/* motion: the opening settles within 1.2 s; sections rise once as they arrive; one drifting picture */
@media (prefers-reduced-motion: no-preference) {
  .hero .rise { transform: translateY(105%); animation: line-up 800ms var(--ease-expo) forwards; animation-delay: calc(120ms + var(--i, 0) * 100ms); }
  .hero .rise[data-i="1"] { --i: 1; }
  .hero .arrive { opacity: 0; transform: translateY(12px); animation: load-rise 600ms var(--ease-out) forwards; }
  .hero .eyebrow.arrive { animation-delay: 60ms; }
  .hero .lede.arrive { animation-delay: 440ms; }
  .hero .remember.arrive { animation-delay: 560ms; }
  .hero .actions.arrive { animation-delay: 680ms; }
  .js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--d, 0ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo img { animation: none; transform: none; }
  .hero::before { animation: none; opacity: 1; }
  html { scroll-behavior: auto; }
  .print, .print img, .bleed img, .button, .slide { transition: none; }
  .kinds-track { animation: none; }
  .print img, .bleed img { opacity: 1; }
}
@keyframes line-up { to { transform: none; } }
@keyframes load-rise { to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes fade { from { opacity: 0; } }

/* the phone and the small tablet: each section its own composition */
@media (max-width: 899px) {
  :root { --section: clamp(80px, 14vw, 120px); }
  /* the band as two rows of unequal halves, low enough that each picture keeps its people
     (at 84vh the narrow cells showed a sliver of a picture; the user's wish of 2026-10-22,
     "na telefonu sve kako treba") */
  .slide { width: 84vw; }
  /* room under the foot for a browser's bottom bar, so that the whole foot shows on every page (the user's wish of 2026-10-22) */
  .close { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .slide.sq { width: 56vw; }
  .strip { gap: 16px; padding-bottom: 28px; }
  .gallery .strip-wrap { margin-top: 24px; }
  .strip-bar { gap: 20px; }
  .gallery { padding-bottom: 40px; }
  li { text-wrap: pretty; }
}