:root {
  --night: #120a06; --bark: #1b100b; --brown: #2c1a11; --mid: #6b4429;
  --gold: #d9a566; --gold-soft: #ecc999; --cream: #fbf4ea; --paper: #f5ebdc; --line: rgba(44, 26, 17, .15); --hair: rgba(251, 244, 234, .14);
  --ink: #2a1810; --muted: #6e5a4a; --wine: #3a121a; --pine: #11302a;
  --serif: "Playfair Display", Georgia, serif; --sans: "Jost", system-ui, sans-serif;
  --gutter: clamp(16px, 4.4vw, 72px);
  --out: cubic-bezier(.16, .84, .24, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }
html { background: var(--night); }
body { margin: 0; background: var(--night); color: var(--cream); font: 300 17px/1.6 var(--sans); overflow-x: clip; }
body::after {   /* fine grain, as on printed paper */
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .06;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
figure, dl, dd, ul, h1, h2, h3, h4, p, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(56px, 9.6vw, 168px); }
h2 { font-size: clamp(38px, 5vw, 80px); }
h3 { font-size: clamp(26px, 2.3vw, 36px); line-height: 1.08; }
em { font-style: italic; color: var(--gold); }
.paper em { color: var(--mid); }
.kicker { font: 400 12px/1.4 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.paper .kicker { color: var(--mid); }
.lead { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; max-width: 32em; }
.fine { font-size: 14px; line-height: 1.55; opacity: .7; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.todo { padding: 0 .3em; border-bottom: 1px dashed currentColor; background: rgba(217, 165, 102, .26); white-space: nowrap; }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 26px; overflow: hidden; isolation: isolate;
  border: 1px solid var(--gold); background: var(--gold); color: var(--night); font: 400 13px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: color .45s var(--out), border-color .45s;
}
.btn::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--cream); transform: translateY(101%); transition: transform .5s var(--out); }
.btn.ghost { background: none; color: var(--cream); border-color: rgba(251, 244, 234, .45); }
.btn.dark { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.btn.dark::before, .btn.ghost-dark::before { background: var(--mid); }
.btn.ghost-dark { background: none; border-color: rgba(42, 24, 16, .4); color: var(--ink); }
.btn.thin { padding: 0 22px; font-size: 12px; background: none; color: var(--cream); border-color: rgba(251, 244, 234, .4); }
@media (hover: hover) {   /* only with a mouse: a finger's tap would leave the button lit */
  .btn:hover::before { transform: none; }
  .btn:hover { border-color: var(--cream); }
  .btn.ghost:hover, .btn.thin:hover { color: var(--night); }
  .btn.dark:hover, .btn.ghost-dark:hover { border-color: var(--mid); color: var(--cream); }
}

/* ---- menu (the footer uses the same small capitals); no logo up here: the opening is the logo */
.nav { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: clamp(14px, 1.3vw, 22px) var(--gutter); transition: background .4s; }
.nav::before { content: ""; position: absolute; z-index: -1; inset: 0 0 -30px; background: linear-gradient(rgba(18, 10, 6, .7), transparent); pointer-events: none; transition: opacity .4s; }
.nav.solid { background: rgba(18, 10, 6, .88); backdrop-filter: blur(14px); }
.nav.solid::before { opacity: 0; }
.nav nav, .foot-col a, .foot-bottom { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
.nav nav { display: flex; gap: 30px; }
.nav nav a, .foot-col a, .foot-bottom a { position: relative; text-decoration: none; }
.nav nav a { padding: 6px 0; }
.nav nav a::after, .foot-col a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--out); }
.nav nav a:hover::after, .foot-col a:hover::after { transform: scaleX(1); }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; }

/* ---- the opening: the pralines through the letters, then through the "o" */
.hero { height: 280vh; position: relative; }
.hero-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--night); }
.hero-photo, .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-photo img { object-fit: cover; will-change: transform; }
.mask { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--night); }
.hero-bottom { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: 22px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; }
.hero-bottom p:nth-child(2) { color: var(--gold); }
.hint { justify-self: end; display: flex; align-items: center; gap: 12px; }
.hint i { position: relative; width: 56px; height: 1px; background: var(--hair); overflow: hidden; }
.hint i::after { content: ""; position: absolute; inset: 0; background: var(--gold); animation: hint 2.2s var(--out) infinite; }
@keyframes hint { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.shade { position: absolute; inset: 0; z-index: 2; opacity: 0; background: linear-gradient(0deg, rgba(18, 10, 6, .94) 0%, rgba(18, 10, 6, .55) 46%, rgba(18, 10, 6, .2) 100%); pointer-events: none; }
.hero-copy { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: clamp(30px, 6vh, 64px); opacity: 0; visibility: hidden; }
.hero-copy h1 { margin: 0 0 clamp(20px, 3vh, 34px) -.05em; }
.hero-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 40px; padding-top: 22px; border-top: 1px solid rgba(251, 244, 234, .24); }

/* ---- flavours running past */
.band { padding: 16px 0; overflow: hidden; background: var(--gold); color: var(--night); }
.run { display: flex; width: max-content; font: italic 400 clamp(24px, 2.6vw, 40px) / 1.2 var(--serif); white-space: nowrap; }
.run.going { animation: run var(--run-time, 40s) linear infinite; will-change: transform; }
@keyframes run { to { transform: translateX(calc(-1 * var(--run-set, 50%))); } }
.run-set { display: flex; flex: none; }
.run span { display: inline-flex; align-items: center; }
.run span::after { content: ""; width: .22em; height: .22em; margin: 0 .7em; transform: rotate(45deg); background: currentColor; }

/* ---- sections */
.part { padding: clamp(64px, 8vw, 120px) var(--gutter); }
.who { padding-bottom: 0; }   /* two dark parts in a row: one gap between them, as everywhere else */
.part-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 60px; margin-bottom: clamp(30px, 4vw, 54px); }
.part-head .lead { opacity: .82; max-width: 26em; }
.lead-box { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pdf { display: inline-flex; align-items: center; gap: 14px; height: 62px; padding: 0 34px; border: 1px solid var(--gold); border-radius: 999px; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); text-decoration: none; transition: background .35s, color .35s; }
.pdf:hover { background: var(--gold); color: var(--night); }
.pdf small { padding: 3px 9px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; letter-spacing: .1em; }
.paper { background: var(--paper); color: var(--ink); }

/* ---- whom it's for: three cards, the one under the pointer opens wide */
.cards { display: flex; gap: 10px; height: clamp(500px, 70vh, 660px); }
.card { position: relative; flex: 1; min-width: 0; overflow: hidden; outline-offset: -2px; background: var(--tone); transition: flex-grow .8s var(--out); cursor: default; }
.card.on { flex-grow: 3; }
.card > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--out), left .8s var(--out), width .8s var(--out); }
.card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--tone) 0%, color-mix(in srgb, var(--tone) 72%, transparent) 42%, transparent 82%); transition: opacity .6s; }
.card::before { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: 50%; width: 22%; background: linear-gradient(90deg, var(--tone), transparent); opacity: 0; transition: opacity .5s; pointer-events: none; }
@media (min-width: 1151px) {   /* open: the words on the colour at the left, the photo clean at the right */
  .card.on > img { left: 50%; width: 50%; transform: none; }
  .card.on::after { opacity: 0; }
  .card.on::before { opacity: 1; transition-delay: .25s; }
  .card.on .card-in { right: 50%; }
}
.c-firme { --tone: var(--brown); }
.c-firme > img { object-position: 50% 42%; }
.c-vino > img { object-position: 50% 40%; }
.c-vino { --tone: var(--wine); }
.c-hotel { --tone: var(--pine); }
.card-in { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(18px, 2vw, 30px); }
.num { font: italic 400 22px/1 var(--serif); color: var(--gold); }
.tag { position: absolute; right: 16px; top: 18px; padding: 2px 9px; background: rgba(18, 10, 6, .7); font-size: 11px; letter-spacing: .08em; }
.card-text .kicker { margin-bottom: 8px; }
.card h3 { text-wrap: balance; }
.more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .7s var(--out), opacity .5s; }
.more-in { min-height: 0; }
.card.on .more { grid-template-rows: 1fr; opacity: 1; transition-delay: .12s; }
.more-in, .more { overflow: hidden; }
.more p { padding-top: 14px; max-width: 30em; }
.more ul { margin: 14px 0 20px; max-width: 30em; }
.more li { padding: 7px 0; border-top: 1px solid rgba(251, 244, 234, .2); font-size: 15.5px; }

/* ---- the collection: only the products; the Mini and Midi stacked, the Maxi big beside them, the bags below.
   Every small tile is the same size, the Maxi takes two by two, so all the gaps line up.
   The picture has its own room above the caption, so no box or bag reaches over the line. */
.shelf { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(640px, 48vw, 980px); gap: 10px; }
.tile { position: relative; overflow: hidden; display: flex; flex-direction: column; background: radial-gradient(70% 70% at 50% 42%, #3a2216, var(--bark) 74%); }
.pic { flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; padding: 18px 18px 16px; }
.pic img { width: 100%; height: var(--h, 75%); object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .6)); transition: transform .9s var(--out); }
@media (hover: hover) { .tile:hover .pic img { transform: translateY(-6px) scale(1.03); } }   /* a finger would leave the box lifted */
.s-mini { --h: 70%; }
.s-midi { --h: 89%; }
.s-bag { --h: 90%; }
.s-maxi { grid-column: 2 / span 2; grid-row: 1 / span 2; --h: 88%; background: radial-gradient(60% 62% at 50% 44%, #42271a, var(--bark) 76%); }
@media (min-width: 901px) {   /* sized by the tile's own height, so a longer name below never shrinks the picture */
  .tile { container-type: size; }
  .pic { padding: 24px 18px 40px; }   /* the boxes and bags stand clear of the caption's line */
  .pic img { height: var(--hq, 40cqh); max-height: 100%; }
  .s-mini { --hq: 41.5cqh; }
  .s-midi { --hq: 53cqh; }
  .s-bag { --hq: 54cqh; }
  .s-maxi { --hq: 45.5cqh; }
  .s-maxi .pic { align-items: center; }   /* the tall tile: the box in the middle, not low with room above */
}
.cap { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 14px; padding: 24px 28px 26px; border-top: 1px solid var(--hair); }
.cap .no { grid-column: 1 / -1; font: italic 400 14px/1 var(--serif); color: var(--gold); margin-bottom: 10px; }
.cap h3 { font-size: clamp(22px, 1.7vw, 28px); }
.cap h3 span { display: block; margin-top: 6px; font: italic 400 clamp(15px, 1.1vw, 18px) / 1.3 var(--serif); color: var(--gold-soft); letter-spacing: 0; }
.cap p { grid-column: 1; font-size: 13.5px; opacity: .72; }
.cap .desc { margin: 12px 0 10px; max-width: 30em; font-size: 14.5px; line-height: 1.45; opacity: .88; }
.cap b { grid-column: 2; grid-row: 2 / span 3; font: 400 24px/1.1 var(--serif); color: var(--gold-soft); text-align: right; white-space: nowrap; }
.cap b i { display: block; font: 300 12.5px/1.4 var(--sans); color: var(--cream); opacity: .72; font-style: normal; }

/* ---- personalisation: what can carry their name */
.custom { background: var(--wine); }
.custom-grid { display: grid; gap: clamp(36px, 4vw, 56px); }
.custom-head { max-width: 46em; }
.custom-head h2 { margin-bottom: 22px; }
.custom-head .lead { opacity: .88; }
.custom-head .fine { margin: 14px 0 28px; }
.options { display: grid; margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr 1fr; column-gap: clamp(30px, 5vw, 80px); }
.options li { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; padding: 24px 0; border-top: 1px solid rgba(251, 244, 234, .18); }
.options .n { grid-row: 1 / span 3; padding-top: 6px; font: italic 400 20px/1 var(--serif); color: var(--gold); }
.options h3 { font-size: clamp(22px, 1.9vw, 30px); margin-bottom: 6px; }
.options p { grid-column: 2; max-width: 34em; font-size: 15.5px; opacity: .82; }
.options b { grid-column: 2; padding-top: 10px; font: italic 400 18px/1.35 var(--serif); color: var(--gold-soft); }

/* ---- the story */
.story { position: relative; overflow: hidden; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 110px); align-items: center; }
.story-pic, .story-text { position: relative; z-index: 1; }
.story-pic { aspect-ratio: 4 / 4.6; }
.story-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.year { position: absolute; top: clamp(24px, 4vw, 64px); right: calc(var(--gutter) - .05em); font: italic 400 clamp(120px, 20vw, 340px) / .8 var(--serif); letter-spacing: -.04em; color: #ecdcc6; pointer-events: none; user-select: none; }
.story-text h2 { margin-bottom: 24px; }
.story-text > p:not(.kicker) { max-width: 36em; }
.story-text > p:not(.kicker) + p { margin-top: 14px; }
.story blockquote { margin: 30px 0 38px; font: italic 400 clamp(23px, 2vw, 31px) / 1.3 var(--serif); color: var(--ink); max-width: 24em; }
.story blockquote::before { content: "\201C"; display: block; height: .62em; margin-left: -.04em; font: normal 400 3.2em/1 var(--serif); color: var(--gold); }
.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.proof li { position: relative; padding-top: 18px; border-top: 1px solid var(--line); }
.proof li::before { content: ""; position: absolute; left: 0; top: -1px; width: 32px; height: 2px; background: var(--gold); }
.proof span { display: block; margin-bottom: 6px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.proof b { display: block; font: italic 400 clamp(19px, 1.5vw, 23px) / 1.25 var(--serif); }

/* ---- the enquiry: only the form, in the middle, large */
.ask-part { border-top: 1px solid var(--line); }
.ask-wrap { max-width: 980px; margin: 0 auto; }
.ask-head { text-align: center; margin-bottom: clamp(30px, 4vw, 50px); }
.ask-head h2 { font-size: clamp(44px, 6vw, 92px); margin-bottom: 18px; }
.ask-head .lead { margin: 0 auto; opacity: .82; }
.field { position: relative; display: block; margin-bottom: 22px; }
.field > span { display: block; margin-bottom: 4px; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea {
  width: 100%; min-height: 56px; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(42, 24, 16, .45); border-radius: 0; background: transparent; outline: none; font-size: 20px; font-weight: 300; transition: border-color .3s, box-shadow .3s;
}
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus { border-color: var(--mid); box-shadow: 0 1px 0 var(--mid); }
.field ::placeholder { color: currentColor; opacity: .4; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.ask .row { justify-content: center; gap: 14px; margin-top: 12px; }
.ask .btn { padding: 0 38px; }
.ask .fine { margin-top: 16px; text-align: center; }

/* ---- the round Messenger, Instagram and WhatsApp buttons, as on the old site */
.social { display: flex; justify-content: center; gap: 14px; }
.social a { display: block; width: 50px; height: 50px; border-radius: 50%; transition: transform .35s var(--out), box-shadow .35s; }
.social a:hover { transform: translateY(-3px); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .5); }
.social img { display: block; width: 100%; height: 100%; }
.ask-or { margin: 30px 0 14px; text-align: center; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.foot-mid .social { margin-top: 26px; }

/* ---- the end: the big logo in the middle, plain white */
.foot { position: relative; overflow: hidden; padding: clamp(90px, 11vw, 170px) var(--gutter) 22px; background: var(--night); }
.foot::before { content: ""; position: absolute; left: 50%; top: 0; width: min(1100px, 120vw); aspect-ratio: 1.6; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(217, 165, 102, .14), transparent); pointer-events: none; }
.foot-main { position: relative; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.foot-mid { order: -1; }
.foot-mid { display: flex; flex-direction: column; align-items: center; text-align: center; }
.foot-logo { display: block; width: clamp(138px, 16.25vw, 250px); margin: 22px auto 40px; color: var(--cream); transition: opacity .4s; }
.foot-logo svg { display: block; width: 100%; height: auto; fill: currentColor; }
.foot-logo:hover { opacity: .85; }
.foot-col h4 { margin-bottom: 14px; font: 400 11.5px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.foot-col { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; }
.foot-col h4 { flex: 0 0 100%; }
.foot-col a { margin: 4px 14px; padding: 3px 0; }
.foot-col .br { display: none; }
.foot-bottom { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-top: clamp(80px, 9vw, 140px); padding-top: 18px; border-top: 1px solid var(--hair); opacity: .7; }

@media (min-width: 901px) {   /* a computer: no "Javite se", the contacts right under the page links; copyright and "Na vrh" side by side */
  .foot-col.end h4 { display: none; }
  .foot-col.end { margin-top: -20px; }
  .foot-bottom { flex-direction: row; justify-content: center; gap: 36px; }
}

/* ---- rising into view */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--out), transform 1s var(--out); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---- phones and small tablets */
@media (max-width: 900px) {
  /* a phone's browser takes its bars' colour from the top of the page: the whole page one plain colour, the one
     seen under the logo, and no grain over it that would lighten what the browser picks up */
  :root { --night: #17100d; }
  body::after { display: none; }
  body { font-size: 16.5px; }
  html { scroll-padding-top: 0; }
  .nav { display: none; }   /* on a phone no bar stays over the page */
  .btn { padding: 0 18px; font-size: 12.5px; letter-spacing: .1em; }
  .btn.thin { padding: 0 14px; font-size: 11px; }
  .kicker { font-size: 11px; letter-spacing: .22em; margin-bottom: 10px; }
  .hero { height: 250vh; }
  h1 { font-size: clamp(50px, 15vw, 88px); }
  .hero-bottom { grid-template-columns: 1fr auto; font-size: 10.5px; letter-spacing: .18em; }
  .hero-bottom p:first-child { display: none; }
  .hero-foot { gap: 16px; }
  .hero-foot .row { width: 100%; }
  .hero-foot .btn { flex: 1; }

  .part-head { gap: 12px; }
  .cards { flex-direction: column; height: auto; gap: 10px; }
  .card, .card.on { flex: none; }
  .card > img { position: relative; height: 300px; transform: none; }
  .card::before { display: none; }
  .card::after { inset: 0 0 auto; height: 302px; background: linear-gradient(0deg, var(--tone), transparent 50%); }
  .card-in { position: static; margin-top: -54px; padding: 0 18px 22px; }
  .num { position: absolute; z-index: 1; left: 18px; top: 18px; }
  .card-text { position: relative; z-index: 1; }
  .card .more { grid-template-rows: 1fr; opacity: 1; }
  .card h3 { white-space: normal; }

  /* one under the other; every picture gets the same frame, so the bags stand equally tall and the Midi is as
     wide as the Maxi (the Maxi is only taller, as the real boxes are) */
  .shelf { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 8px; }
  .s-maxi { grid-column: auto; grid-row: auto; }
  .pic { flex: none; height: 270px; padding: 20px 16px 18px; }
  .s-mini { --h: 48%; }
  .s-midi { --h: 70%; }
  .s-maxi { --h: 100%; }
  .s-maxi .pic { height: 333px; padding-top: 75px; }   /* the Maxi with room above it (the owner) */
  .s-bag { --h: 92%; }
  .cap { padding: 16px 18px 20px; }
  .cap h3 { font-size: 24px; }
  .cap h3 span { font-size: 17px; }
  .cap .desc { font-size: 15.5px; line-height: 1.5; }
  .cap p { font-size: 14px; }
  .cap b { font-size: 22px; }

  .options { grid-template-columns: 1fr; }
  .story { grid-template-columns: 1fr; }
  .story-pic { aspect-ratio: 4 / 3.6; margin-bottom: 36px; }
  .year { top: auto; bottom: 28%; font-size: 150px; }
  .proof { grid-template-columns: 1fr; gap: 14px; }
  .pair { grid-template-columns: 1fr; }
  .field input, .field textarea { font-size: 18px; min-height: 50px; }
  .ask .btn { flex: 1 1 100%; }
  .foot-col a { margin: 4px 10px; }
  .foot-logo { width: min(40vw, 181px); }
  .foot-col .br { display: block; flex: 0 0 100%; }   /* three links, then two */
  .foot-bottom { font-size: 11px; }
}

/* ---- nothing moves for those who asked for that */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: auto; }
  .mask, .hero-bottom { display: none; }
  .shade { opacity: 1; }
  .hero-copy { opacity: 1; visibility: visible; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .card, .more, .card > img, .card::before, .card::after { transition: none; }
  .hint i::after, .run.going { animation: none; }
}