/* ===========================================================
   Disco In Dalmatia — Paola & Lovre
   Olive, rust and cream from the couple's moodboard. Text is Poiret
   One; the names, titles and small details are Bitcount, the pixel
   face of the original paolalovre.com; Pinyon Script does the
   flourishes. All three are served from the site, trimmed to the
   letters it uses (Latin, with Croatian's č ć đ š ž).
   =========================================================== */

@font-face{ font-family:"Poiret One"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/poiret-one-400.woff2") format("woff2"); }
@font-face{ font-family:"Bitcount Prop Single"; font-style:normal; font-weight:300; font-display:swap;
  src:url("../fonts/bitcount-prop-single-300.woff2") format("woff2"); }
@font-face{ font-family:"Bitcount Prop Single"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/bitcount-prop-single-400.woff2") format("woff2"); }
@font-face{ font-family:"Pinyon Script"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/pinyon-script-400.woff2") format("woff2"); }

/* No zooming by accident on a phone. Three parts work together: the
   viewport tag (maximum-scale=1, user-scalable=no) stops pinch zoom on
   Android; touch-action:manipulation stops double-tap zoom everywhere; and
   site.js cancels iOS's pinch gesture, which ignores the viewport tag.
   While Our Story's photo viewer is open, site.js lifts the lock so its
   photos can be pinched larger; its photo strip still swipes sideways. */
html{ touch-action:manipulation; }
.sd__photos{ touch-action:pan-x pan-y pinch-zoom; }

:root{
  --olive:     #5c5f28;   /* the moodboard ground                 */
  --olive-2:   #4c5022;   /* one step deeper, for alternate bands */
  --moss:      #353c1b;
  --rust:      #b4552e;   /* the badge                            */
  --rust-2:    #8f3f20;
  --rust-ui:   #a2461f;   /* rust for surfaces that carry text: 5.0:1 with cream */
  --peach:     #f6cdb0;   /* small accent text on olive: 4.6:1                 */
  --gold:      #e0b45c;
  --cream:     #f3e8d4;
  --cream-2:   #e8dac0;
  --paper:     #fbf6ec;
  --ink-dark:  #23260f;
  --night:     #14160a;

  /* Every band sets these, so a component dropped into any band picks
     up the right colours without a variant of its own. */
  --bg:        var(--olive);
  --fg:        var(--cream);
  --muted:     rgba(243,232,212,.9);
  --hairline:  rgba(243,232,212,.30);

  --header-h:  74px;
  --shell:     1240px;
  --gutter:    clamp(18px, 5vw, 64px);
  --radius:    20px;

  --main:   "Poiret One", "Josefin Sans", "Century Gothic", sans-serif;     /* the main face */
  --pixel:  "Bitcount Prop Single", ui-monospace, "Courier New", monospace; /* small details, Light and Regular */
  --sans:   var(--main);
  --script: "Pinyon Script", "Snell Roundhand", cursive;

  --grain-o:  .28;       /* the same everywhere, or seams show */
  /* printed grain, drawn once and reused everywhere: black specks with transparency, so
     plain layering darkens just as a multiply blend would, without its cost per frame */
  --grain: 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='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }
html{ font-synthesis:none; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); }

/* clip, not hidden: hidden would make the body a scroll container and
   quietly break the sticky header. The hidden line is for old Safari. */
html, body{ overflow-x:hidden; overflow-x:clip; }
body{
  margin:0;
  background:var(--olive);
  color:var(--fg);
  font-family:var(--sans);
  font-size:19px;
  line-height:1.65;
  letter-spacing:.01em;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img, svg{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
/* A class that sets display otherwise beats the browser's own [hidden]
   rule, and "hidden" content would still show. */
[hidden]{ display:none !important; }

.skip{ position:absolute; left:12px; top:-60px; z-index:100; padding:10px 16px; border-radius:10px;
  background:var(--cream); color:var(--ink-dark); font-weight:400; text-decoration:none; }
.skip:focus{ top:12px; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter);
  /* the page runs under a phone's rounded corners and notch (viewport-fit=cover): keep words clear of them */
  padding-inline:max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.shell--narrow{ max-width:900px; }
.center{ text-align:center; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Bands --------------------------------------------------- */

/* Each band starts in the colour of the band above it and eases into
   its own over --blend, so sections flow into one another instead of
   meeting at a hard line. --prev is written into the markup. */
.band{
  --bg:var(--olive); --fg:var(--cream);
  --muted:rgba(243,232,212,.9); --hairline:rgba(243,232,212,.28);
  --card:rgba(20,22,10,.22);
  --label:var(--peach);
  --blend:clamp(140px, 17vw, 240px);
  position:relative; isolation:isolate;
  background-color:var(--bg);
  background-image:linear-gradient(180deg, var(--prev, var(--bg)) 0, var(--bg) var(--blend));
  background-image:linear-gradient(180deg,
    var(--prev, var(--bg)) 0,
    color-mix(in oklab, var(--prev, var(--bg)) 90%, var(--bg)) calc(var(--blend) * .2),
    color-mix(in oklab, var(--prev, var(--bg)) 65%, var(--bg)) calc(var(--blend) * .4),
    color-mix(in oklab, var(--prev, var(--bg)) 35%, var(--bg)) calc(var(--blend) * .6),
    color-mix(in oklab, var(--prev, var(--bg)) 10%, var(--bg)) calc(var(--blend) * .8),
    var(--bg) var(--blend));
  color:var(--fg);
  padding-block:clamp(84px, 11vw, 150px);
  overflow:hidden;
}
.band::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--grain); opacity:var(--grain-o);
}
.band--deep  { --bg:var(--olive-2); }
.band--moss  { --bg:var(--moss); }
.band--night { --bg:var(--night); }
.band--rust  { --bg:var(--rust-ui); --label:var(--cream-2); --card:rgba(60,20,5,.22); }
.band--cream, .on-light {
  --bg:var(--cream); --fg:var(--ink-dark);
  --muted:rgba(35,38,15,.76); --hairline:rgba(35,38,15,.2);
  --card:rgba(255,255,255,.5);
  --label:var(--rust-2);
}
.band--tight { padding-block:clamp(44px, 6vw, 76px); }
/* two sections that belong together sit closer */
.band--close-b{ padding-bottom:clamp(28px, 4vw, 56px); }
.band--close-t{ padding-top:clamp(36px, 5vw, 72px); --blend:clamp(90px, 10vw, 150px); }
.band--quick{ --blend:clamp(80px, 9vw, 130px); }   /* a shorter blend in from the section above */

/* ---------- Decoration: leaves, arches, the disco ball's shadow ------
   Each sits in a layer the size of its section, behind the content,
   fading out towards the section's top and bottom edges. */

.decos{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.band > .decos:not(.decos--free), .page-hero > .decos:not(.decos--free), .hero > .decos:not(.decos--free), .site-footer > .decos:not(.decos--free){
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 min(160px, 22%), #000 calc(100% - min(160px, 22%)), transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 min(160px, 22%), #000 calc(100% - min(160px, 22%)), transparent 100%);
}
.deco{ position:absolute; z-index:-1; pointer-events:none; }
/* Leaves: the three leaf shadows the couple chose, black with transparency,
   so they read as shade on any colour. Each sits at an edge of the screen,
   partly off it, behind everything. They drift in from their edge the
   first time they scroll into view (site.js adds .is-in), then sway in a
   slow breeze. A page has only a few, spaced out. */
.leaf{
  position:absolute; z-index:-1; top:var(--top, 10%); width:var(--w, 460px); pointer-events:none; opacity:0;
  transform:translateX(var(--from)) rotate(var(--r, 0deg));
  transition:transform 2.4s cubic-bezier(.16,.84,.3,1), opacity 1.8s ease;
  animation:leafSway var(--sway, 9s) ease-in-out infinite alternate;
}
/* the picture is on a layer of its own, so a leaf can be mirrored in
   place while the leaf itself pivots on the edge it grows from */
.leaf::before{ content:""; position:absolute; inset:0; background:center/contain no-repeat; transform:scaleX(var(--sx, 1)); }
/* the pictures load once a leaf comes within two screens (site.js adds .is-near) */
.leaf--1{ aspect-ratio:640/583; } .leaf--1.is-near::before, html:not(.js) .leaf--1::before{ background-image:url("../img/leaves/leaf-1.webp"); }
.leaf--2{ aspect-ratio:560/818; } .leaf--2.is-near::before, html:not(.js) .leaf--2::before{ background-image:url("../img/leaves/leaf-2.webp"); }
.leaf--3{ aspect-ratio:760/506; } .leaf--3.is-near::before, html:not(.js) .leaf--3::before{ background-image:url("../img/leaves/leaf-3.webp"); }
.leaf--l{ left:calc(var(--w, 460px) * var(--out, -.3)); --from:-45%; transform-origin:0 40%; }
.leaf--r{ right:calc(var(--w, 460px) * var(--out, -.3)); --from:45%; transform-origin:100% 40%; }
.leaf.is-in, html:not(.js) .leaf{ opacity:var(--o, .9); transform:translateX(0) rotate(var(--r, 0deg)); }
@keyframes leafSway{ from{ rotate:-1.6deg; } to{ rotate:1.6deg; } }

/* The narrow arches, as on the invitation: three across the width of a
   section, touching, big, their legs running off its bottom edge. The row
   is as wide as its section and as tall as its arches' shape makes it;
   --ah is how far up the section it may reach (its tops sit there, or
   lower on narrow screens, where the row is shorter). They draw
   themselves in, ring by ring, as they scroll into view. Their layer is
   .decos--free, so the section's edge fade does not touch them; the legs
   fade out just before the bottom edge instead. */
.decos--free{ container-type:size; }
.arches{
  left:0; right:0; top:auto; bottom:0; height:min(var(--ah, 55%), 66.58cqw); overflow:hidden;
  color:var(--tint, var(--moss)); opacity:var(--o, .9);
  -webkit-mask-image:linear-gradient(to top, transparent 0, #000 var(--fade, 20%)); mask-image:linear-gradient(to top, transparent 0, #000 var(--fade, 20%));
}
/* fine lines for an elegant look: 5 of the drawing's units (about 3px on a
   wide screen); a little more on phones, where the drawing is much smaller */
.arches svg{ position:absolute; left:0; top:0; width:100%; height:auto; stroke-width:var(--sw, 5); }
@media (max-width:640px){ .arches svg{ stroke-width:var(--sw, 6.5); } }
.arches path{ fill:none; stroke:currentColor; stroke-dasharray:1; stroke-dashoffset:1; }
.arches.is-in path{ animation:arcDraw 1.9s cubic-bezier(.55,.1,.25,1) calc(var(--r) * 70ms) forwards; }

@keyframes arcDraw{ to{ stroke-dashoffset:0; } }
html:not(.js) .arches path{ stroke-dashoffset:0; }
/* The disco ball's shadow: the couple's drawing of a mirror ball, black
   with transparency like the leaves, and softened a touch. One per page at
   most, none on the homepage (it has the real ball). It hangs on its chain
   from the top of the first section under the opening, drops into place
   the first time it scrolls into view, then sways a little. */
.disco-shadow{
  position:absolute; z-index:-1; top:var(--top, 12%); width:var(--w, 340px); aspect-ratio:600/613; pointer-events:none;
  background:center/contain no-repeat;
  opacity:0; transform:translateY(-18%); transform-origin:50% -80%;
  transition:transform 2.4s cubic-bezier(.16,.84,.3,1), opacity 1.8s ease;
  animation:ballSway 7s ease-in-out infinite alternate;
}
.disco-shadow::before{ /* the chain */
  content:""; position:absolute; left:50%; bottom:99%; width:max(2px, .7%); height:120vh; translate:-50% 0; background:#000;
}
.disco-shadow--r{ right:calc(var(--w, 340px) * var(--out, -.18)); }
.disco-shadow--l{ left:calc(var(--w, 340px) * var(--out, -.18)); }
.disco-shadow.is-near, html:not(.js) .disco-shadow{ background-image:url("../img/disco-shadow.webp"); }
.disco-shadow.is-in, html:not(.js) .disco-shadow{ opacity:var(--o, .16); transform:none; }
@keyframes ballSway{ from{ rotate:-2deg; } to{ rotate:2deg; } }

/* ---------- Type ----------------------------------------------------- */

.label{
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:400; font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--label); margin:0 0 16px;
}
.label::before{ content:"\2726"; font-size:1.05em; letter-spacing:0; }

.h2{
  font-weight:400; text-transform:uppercase;
  font-size:clamp(32px, 4.6vw, 60px); line-height:1.08; letter-spacing:.06em;
  margin:0 0 22px;
}
.h3{ font-weight:400; font-size:clamp(21px, 2vw, 25px); line-height:1.25; letter-spacing:.04em; margin:0 0 8px; }

/* Headings: clean and solid, in the pixel face. (The chrome lives in the
   title images; drawn onto live text with a glow it read as neon.) */
.chrome{ color:var(--cream); }
.band--cream .chrome, .on-light .chrome, .chrome.on-light{ color:var(--ink-dark); }

.script{ font-family:var(--script); font-weight:400; line-height:1.05; letter-spacing:0; text-transform:none; }
.lede{ font-size:clamp(19px, 1.7vw, 23px); line-height:1.6; color:var(--muted); max-width:58ch; margin:0 0 1em; }
.prose p{ max-width:62ch; margin:0 0 1.05em; color:var(--muted); }
.prose p:last-child{ margin-bottom:0; }
.center .lede, .center .prose p{ margin-inline:auto; }
.center .lede{ text-wrap:balance; }      /* no word left alone on the last line */

.text-link{
  display:inline-flex; align-items:center; gap:.5em; margin-top:10px;
  font-weight:400; font-size:15px; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--link, var(--peach));
  border-bottom:2px solid currentColor; padding-bottom:4px;
}
.text-link::after{ content:"\2192"; transition:transform .25s ease; }
.text-link:hover::after{ transform:translateX(5px); }
.band--cream .text-link, .on-light .text-link{ --link:var(--rust-ui); }
.band--rust .text-link{ --link:var(--cream); }

/* ---------- Buttons -------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; padding:0 26px; border-radius:999px;
  background:var(--rust-ui); color:var(--cream);
  font-weight:400; font-size:14px; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; border:0; cursor:pointer;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.55);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover{ background:var(--rust-2); transform:translateY(-2px); }
.btn:focus-visible, a:focus-visible, button:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

/* ---------- Header ---------------------------------------------------- */

.site-header{
  position:sticky; top:0; z-index:60;
  height:var(--header-h);
  background:rgba(45,48,20,.95);
  border-bottom:1px solid rgba(243,232,212,.12);
  color:var(--cream);
}
/* Badge in the middle, two links either side of it. Each link sits
   centred in its own column, so the four balance round the badge
   whatever their lengths. On phones the badge and names move to the
   left and open the menu when tapped. */
.site-header .shell{ height:100%; display:flex; align-items:center; }
.site-header nav{ flex:1; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; flex:none; }
.brand img{ width:50px; height:50px; transition:transform .5s cubic-bezier(.3,1.6,.5,1); }
.brand:hover img{ transform:rotate(-14deg) scale(1.06); }
.brand span{ font-weight:400; font-size:15px; letter-spacing:.08em; text-transform:uppercase; line-height:1.2; white-space:nowrap; }
.brand small{ display:block; font-weight:400; font-size:11.5px; letter-spacing:.12em; color:rgba(243,232,212,.72); }
.brand--mobile{ display:none; }

.nav{ display:grid; grid-template-columns:1fr 1fr auto 1fr 1fr; align-items:center; justify-items:center;
  list-style:none; margin:0; padding:0; }
.nav__brand{ padding-inline:clamp(10px,2.4vw,40px); }
.nav a:not(.brand){
  position:relative; display:inline-flex; align-items:center; gap:.5em;
  font-size:14px; font-weight:400; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; color:rgba(243,232,212,.82);
  padding-block:6px; white-space:nowrap; transition:color .18s ease;
}
.nav a:not(.brand)::before{ content:"\2726"; font-size:11px; color:var(--gold); opacity:0; transform:scale(.3) rotate(-90deg);
  transition:opacity .25s ease, transform .35s cubic-bezier(.3,1.6,.5,1); }
.nav a:not(.brand):hover, .nav a[aria-current="page"]{ color:var(--cream); }
.nav a:not(.brand):hover::before, .nav a[aria-current="page"]::before{ opacity:1; transform:none; }

.nav-toggle{ appearance:none; background:none; border:0; padding:6px 10px 6px 0; margin:0; color:var(--cream); cursor:pointer;
  font:inherit; text-align:left; -webkit-tap-highlight-color:transparent; }
.brand__caret{ width:8px; height:8px; margin:0 0 4px 2px; border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  rotate:45deg; transition:rotate .3s ease, translate .3s ease; }
.nav-toggle[aria-expanded="true"] .brand__caret{ rotate:-135deg; translate:0 4px; }

/* ---------- Home hero ----------------------------------------------------
   The ball hangs over the names and throws its light across the room:
   the specks drift sideways the way reflections do off a turning ball. */

.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:calc(86svh - var(--header-h));      /* short enough that the ribbon shows in the first view */
  display:grid; place-items:center; text-align:center;
  padding-block:clamp(26px,4vw,52px) clamp(96px,9vw,120px);
  background:radial-gradient(130% 90% at 50% 0%, #2f3213 0%, #43461c 38%, #5c5f28 78%);
  color:var(--cream);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--grain); opacity:var(--grain-o);
}

.reflections{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.reflections i{
  position:absolute; left:0; top:var(--y);
  width:calc(var(--s) * 1.25); height:var(--s); border-radius:2px;
  background:rgba(255,250,236,var(--o));
  box-shadow:0 0 calc(var(--s) * .8) rgba(255,244,222,calc(var(--o) * .5));
  animation:drift var(--t) linear var(--d) infinite, glint 2.8s ease-in-out var(--d) infinite alternate;
  will-change:transform;
}
@keyframes glint{ from{ opacity:.35; } to{ opacity:1; } }
@keyframes drift{
  from{ transform:translateX(-12vw); }
  to  { transform:translateX(112vw); }
}

.hero__inner{ position:relative; }
.hero__ball{ display:grid; place-items:center; }
.hero__ball .ball{ --size:clamp(150px, 21vw, 268px); margin-block:0 4px; }
.hero__kicker{ font-family:var(--pixel); font-weight:300; font-size:clamp(18px,2.3vw,31px); line-height:1.2; letter-spacing:.06em;
  color:var(--peach); margin:clamp(16px,2.2vw,26px) 0 clamp(10px,1.4vw,16px); }
/* the names in the dotted Bitcount lettering of the badge */
.hero__title{ margin:0; font-family:var(--pixel); font-weight:300; font-size:clamp(36px,8.4vw,128px); line-height:1;
  letter-spacing:.02em; text-transform:uppercase; color:var(--cream);
  text-shadow:0 .04em 0 rgba(20,22,10,.4), 0 .2em .5em rgba(0,0,0,.3); }
.hero__when{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.3em 1em;
  margin:clamp(14px,2vw,22px) 0 0;
  font-weight:400; font-size:clamp(14px,1.5vw,18px); letter-spacing:.22em; text-transform:uppercase;
}
.hero__when i{ font-style:normal; color:var(--gold); }

.hero__sticker{
  position:absolute; z-index:2; right:clamp(14px,5vw,80px); top:clamp(18px,4vw,48px);
  width:clamp(78px,10vw,140px); height:auto;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.4));
  animation:spin 36s linear infinite;
}
@keyframes spin{ to{ rotate:360deg; } }

.scroll-cue{
  position:absolute; left:50%; bottom:clamp(20px,3vw,34px); translate:-50% 0; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-weight:400; font-size:11.5px; letter-spacing:.3em; text-transform:uppercase; text-decoration:none;
  color:rgba(243,232,212,.8);
}
.scroll-cue::after{ content:""; width:1.5px; height:38px; background:linear-gradient(var(--cream), transparent);
  animation:cue 2.2s ease-in-out infinite; transform-origin:top; }
@keyframes cue{ 0%{ transform:scaleY(0); opacity:1; } 60%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(1); opacity:0; } }

/* ---------- Ribbon ticker -------------------------------------------- */

.ribbon-wrap{ position:relative; z-index:3; overflow:hidden; margin:-58px 0 -44px; padding:30px 0; pointer-events:none; }
.ribbon{
  position:relative;
  margin:0 -3vw; padding:14px 0;
  background:var(--cream); color:var(--ink-dark);
  rotate:-2deg; overflow:hidden;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.55);
}
.ribbon__track{
  display:flex; align-items:center; gap:clamp(18px,2.4vw,30px); width:max-content;
  font-weight:400; font-size:clamp(16px,2vw,23px); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  animation:slide 120s linear infinite;
}
.ribbon__track i{ font-style:normal; color:var(--rust); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- Interior page hero ---------------------------------------- */

.page-hero{
  position:relative; isolation:isolate; overflow:hidden; text-align:center;
  background:radial-gradient(130% 90% at 50% 0%, #3a3d17 0%, #4c5022 40%, #5c5f28 80%);
  color:var(--cream);
  padding-block:clamp(52px,7vw,96px) clamp(120px,14vw,180px);
}
.page-hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--grain); opacity:var(--grain-o);
}
.page-title{ margin:0; }
/* Travel & Explore and its pages: the title in the homepage's dotted lettering, a shorter opening, no arches */
.page-hero--bit{ padding-block:clamp(40px,5vw,70px) clamp(34px,4.5vw,60px); }
.page-title--bit{ font-family:var(--pixel); font-weight:300; font-size:clamp(34px,6.4vw,96px); line-height:1.05;
  letter-spacing:.02em; text-transform:uppercase; color:var(--cream); text-wrap:balance;
  text-shadow:0 .04em 0 rgba(20,22,10,.4), 0 .2em .5em rgba(0,0,0,.3); }
/* under a dotted title, the subtitle is in the headings' face, as "City guides" is */
.page-hero--bit .page-sub{ margin-top:10px; font-family:var(--main); font-weight:400; text-transform:uppercase;
  font-size:clamp(22px,2.8vw,38px); line-height:1.1; letter-spacing:.08em; }
.page-title img{ height:auto; margin-inline:auto; width:min(var(--tw, 760px), 92vw); }
/* Our Story opens like the homepage: the dotted title, the subtitle like "Join us in
   Croatia", the line under it like the homepage's date line */
.page-hero--home .page-sub{ margin-top:clamp(12px,1.6vw,18px); font-family:var(--pixel); font-weight:300; text-transform:none;
  font-size:clamp(18px,2.3vw,31px); line-height:1.2; letter-spacing:.06em; color:var(--peach); }
.page-hero--home .page-intro{ max-width:none; margin-top:clamp(14px,2vw,22px); font-family:var(--pixel); font-weight:400;
  font-size:clamp(12px,1.3vw,15px); line-height:1.8; letter-spacing:.2em; text-transform:uppercase; color:var(--cream); }
.page-sub{ font-family:var(--script); font-size:clamp(34px,4.2vw,58px); line-height:1.05; color:var(--peach); margin:12px 0 0; }
.page-intro{ max-width:60ch; margin:18px auto 0; font-size:clamp(18px,1.6vw,21px); color:rgba(243,232,212,.9); }
.back-link{ display:inline-flex; gap:.5em; margin:0 0 20px; font-weight:400; font-size:12.5px;
  letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:var(--peach); }
.back-link:hover{ color:var(--cream); }

/* ---------- The pixel face: small details only ---------------------------- */

.label, .nav a, .brand span, .nav-toggle, .text-link, .btn, .back-link, .stepnav a,
.ribbon__track, .flip-unit > span, .ticket__dow, .ticket__mon, .ticket__when,
.dayp__time, .dayp__tab, .stage__when, .stage__open, .sd__when, .sd__nav button,
.opt__tag, .postcard__how, .ideas em, .wear-tips b, .tips b, .model__count, .foot-when,
.foot-nav a, .music-toggle, .areas .pick, .credits-box summary, .scroll-cue, .hero__when,
.map-overlay text, .step-head .label{
  font-family:var(--pixel); font-weight:300;
}
/* Regular, sparingly: where a small word has to carry */
.nav a[aria-current="page"], .btn, .opt__tag, .hero__when{ font-weight:400; }
b, strong{ font-weight:400; color:var(--fg); }

/* ---------- Countdown ---------------------------------------------------
   Each number rolls: the old one slides up and out as the new one comes
   up from below. site.js builds the two layers and swaps them. */

/* sits in the middle of the red: the red runs from the ribbon's lower edge
   (14px into the band) to about halfway through the fade into the next
   section, so the top padding is 14px + the bottom padding + half that fade */
.countdown-band{ --blend:clamp(70px, 8vw, 110px); padding-block:clamp(92px, 9.5vw, 137px) clamp(28px, 3.3vw, 48px); }
.countdown-band + .band{ --blend:clamp(100px, 10.4vw, 150px); }
/* When: the stamp and the date sit in the middle of the plain cream, between the
   fade in from the red above and the fade into the olive below */
.band--when{ padding-block:clamp(120px, 13vw, 190px) clamp(32px, 3.4vw, 50px); }
.countdown-band .script-line{ font-family:var(--pixel); font-weight:300; font-size:clamp(20px,2.6vw,34px); line-height:1.2; letter-spacing:.16em;
  text-transform:uppercase; margin:0 0 clamp(22px,3vw,34px); color:var(--cream); }
.flipclock{ display:flex; justify-content:center; align-items:flex-start; flex-wrap:wrap; gap:clamp(10px,2.2vw,26px); margin:0; padding:0; list-style:none; }
.flip-unit{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.flip-unit > span{ font-weight:400; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:rgba(243,232,212,.88); }
.flip{
  --h:clamp(56px, 10.5vw, 146px);
  position:relative; overflow:hidden; height:var(--h); min-width:calc(var(--h) * 1.1);
  border-radius:calc(var(--h) * .12);
  background:linear-gradient(180deg, #2a2d11, #1c1e0b);
  box-shadow:0 22px 34px -18px rgba(40,12,2,.75), inset 0 0 0 1px rgba(243,232,212,.06);
  font-weight:400; font-size:calc(var(--h) * .56); line-height:var(--h); letter-spacing:.02em;
  color:var(--cream);
}
.flip--wide{ min-width:calc(var(--h) * 1.56); }
.flip__now, .flip__next{ position:absolute; inset:0; display:grid; place-items:center; padding-inline:.12em; white-space:nowrap; }
.flip__next{ transform:translateY(70%); opacity:0; }
.flip.is-rolling .flip__now{ transform:translateY(-70%); opacity:0; transition:transform .6s cubic-bezier(.6,0,.2,1), opacity .45s ease; }
.flip.is-rolling .flip__next{ transform:none; opacity:1; transition:transform .6s cubic-bezier(.6,0,.2,1), opacity .5s ease .08s; }
.countdown-fallback{ margin:0; }

/* ---------- Info pieces (homepage) -------------------------------------
   One piece of information at a time, each with its own picture,
   instead of three look-alike cards in a row. */

.info__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,90px); align-items:center; }
.info__grid--flip > :first-child{ order:2; }
.info__text .lede{ margin-bottom:22px; }
/* beside the stamp: a short letter from the two of them, signed */
.letter{ max-width:40em; margin-bottom:22px; }
.letter p{ margin:0 0 .9em; font-size:clamp(16.5px, 1.3vw, 18.5px); line-height:1.65; color:var(--muted); }
.letter__sign{ margin-top:1.2em !important; }
.letter__sign b{ display:block; margin-top:2px; font-family:var(--script); font-weight:400; font-size:clamp(34px, 3.1vw, 44px); line-height:1.15;
  color:var(--rust-2); }
.info__text .h2{ margin-bottom:18px; }

/* WHEN: a postage stamp from Zadar (the drawing is stamp.py in the
   generator), tilted a little and lifted by its own shadow, which follows
   the perforations. It is a picture only, not a link. */
.stamp{ display:block; width:min(440px, 100%); margin-inline:auto; rotate:-3deg; -webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 18px 22px rgba(35,38,15,.32)) drop-shadow(0 2px 3px rgba(35,38,15,.2));
  transition:rotate .45s cubic-bezier(.3,1.5,.5,1), scale .45s ease, translate .45s ease; }
/* like the polaroids: it straightens and lifts under the pointer, and a tap gives it a little pop */
.stamp:hover{ rotate:0deg; scale:1.03; translate:0 -6px; }
.stamp.is-pop{ animation:stampPop .7s cubic-bezier(.3,1.5,.5,1); }
@keyframes stampPop{ 0%{ scale:1; } 35%{ scale:1.06; rotate:2deg; } 100%{ scale:1; } }

.stamp__svg{ display:block; width:100%; height:auto; overflow:visible; }
.stamp__arc, .stamp__name{ font-family:var(--sans); }
.stamp__small{ font-family:var(--pixel); font-weight:300; }

/* PARTY: the chrome line (in the chrome of the old calendar 4), with a polaroid
   tucked in against each side of it */
.party{ --blend:clamp(80px, 9vw, 130px); padding-block:clamp(110px, 12vw, 170px) clamp(40px, 4vw, 56px); }   /* centred in the black */
.party__grid{ display:flex; align-items:center; justify-content:center; }
.party-line{ position:relative; z-index:1; flex:0 1 auto; width:min(720px, 54vw); height:auto; filter:drop-shadow(0 10px 30px rgba(0,0,0,.6)); }
.party__grid .polaroid{ flex:0 0 clamp(150px, 17vw, 240px); }
.party__grid .polaroid:first-child{ margin-right:calc(clamp(8px, 2.2vw, 34px) * -1); }
.party__grid .polaroid:last-child{ margin-left:calc(clamp(8px, 2.2vw, 34px) * -1); }
.polaroid{
  margin:0; background:#faf6ee; padding:10px 10px 34px; border-radius:4px;
  box-shadow:0 26px 40px -20px rgba(0,0,0,.8);
  rotate:var(--r, -7deg); transition:rotate .4s cubic-bezier(.3,1.5,.5,1), scale .4s ease;
}
.polaroid img{ width:100%; aspect-ratio:1; object-fit:cover; filter:saturate(.9) contrast(1.02); }
.polaroid figcaption{ font-family:var(--script); font-size:26px; line-height:1; color:var(--ink-dark); text-align:center; margin-top:8px; }
.polaroid:hover{ rotate:0deg; scale:1.04; }

/* WHERE: the map */
/* the homepage map: the other airport cities in gold, joined to Zadar,
   each with a small fan of photos (sized in cqw, so they scale with the map) */
.map-card--home{ container-type:inline-size; }
.hm-route{ fill:none; stroke:var(--gold); stroke-width:3; stroke-linecap:round; stroke-dasharray:1 10; opacity:.95;
  animation:mmRoute 2.6s linear infinite; }
.hm-dot{ fill:var(--gold); stroke:#23260f; stroke-width:2.2; }
.hm-ring{ fill:none; stroke:var(--gold); stroke-width:2.4; opacity:0; transform-box:fill-box; transform-origin:center;
  animation:mmPing 3.2s ease-out calc(var(--k) * 1s) infinite; }
.map-card--home .hm-city text{ font-family:var(--pixel); font-weight:400; font-size:15px; letter-spacing:.12em; fill:#23260f;
  paint-order:stroke; stroke:#f3e8d4; stroke-width:4.5px; stroke-linejoin:round; }
/* on phones, three dots under Where to next show which card is showing */
.carousel-dots{ display:none; }
@media (max-width:640px){
  .carousel-dots{ display:flex; justify-content:center; gap:10px; margin-top:4px; }
  .carousel-dots i{ width:8px; height:8px; border-radius:50%; background:rgba(243,232,212,.3); transition:background .3s ease, transform .3s ease; }
  .carousel-dots i.is-on{ background:var(--gold); transform:scale(1.3); }
}
.map-pics{ position:absolute; inset:0; pointer-events:none; }
.mp{ position:absolute; left:var(--x); top:var(--y); }
.mp img{ position:absolute; left:var(--dx); top:var(--dy); width:10.5cqw; max-width:none; height:auto; aspect-ratio:1; object-fit:cover;
  translate:-50% -50%; rotate:var(--r); border:.55cqw solid #faf6ee; border-bottom-width:1.6cqw; border-radius:.4cqw;
  box-shadow:0 .8cqw 1.8cqw rgba(0,0,0,.45); }
.map-card{ position:relative; margin:0; border-radius:28px; overflow:hidden;
  box-shadow:0 34px 60px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(243,232,212,.14); background:#3f431b; }
.map-card > img{ width:100%; height:auto; }
.map-card .map-overlay{ position:absolute; inset:0; width:100%; height:100%; }
.map-overlay text{ font-family:var(--sans); font-weight:400; letter-spacing:.08em; }
.map-city circle{ fill:var(--rust-ui); stroke:var(--cream); stroke-width:2; }
.map-city text{ fill:var(--ink-dark); font-size:13px; paint-order:stroke; stroke:rgba(243,232,212,.92); stroke-width:4px; stroke-linejoin:round; }
.map-city--dim text{ fill:rgba(35,38,15,.8); }
.map-sea{ fill:rgba(243,232,212,.5); font-size:12px; letter-spacing:.4em; font-style:italic; font-weight:400; }
.map-zadar .pin{ fill:var(--rust-ui); stroke:var(--cream); stroke-width:2.2; }
.map-zadar .pulse{ fill:none; stroke:var(--gold); stroke-width:2.4; transform-box:fill-box; transform-origin:center;
  animation:pulse 2.4s ease-out infinite; }
.map-zadar .pulse:nth-of-type(2){ animation-delay:1.2s; }
@keyframes pulse{ from{ scale:.4; opacity:1; } to{ scale:2.6; opacity:0; } }
.map-zadar .tag rect{ fill:var(--ink-dark); }
.map-zadar .tag text{ fill:var(--cream); font-size:14px; stroke:none; }

/* ---------- Arch cards ------------------------------------------------- */

.arch-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(22px,3vw,36px); }
.arch-grid > *{ flex:1 1 260px; max-width:370px; }
.arch-grid--4{ display:grid; grid-template-columns:repeat(4, 1fr); }
.arch-grid--4 > *{ max-width:none; }
@media (max-width:1000px){ .arch-grid--4{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){
  .arch-grid--4{ gap:22px 14px; }
  .arch-grid--4 .arch-card__body{ padding-top:12px; }
  .arch-grid--4 .h3{ font-size:17px; }
  .arch-grid--4 .arch-card__body p{ font-size:14.5px; }
}
.arch-card{ position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.arch-card__pic{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:999px 999px 14px 14px;
  background:var(--moss); box-shadow:0 22px 40px -24px rgba(0,0,0,.7); }
.arch-card__pic img{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.arch-card__pic::after{ content:""; position:absolute; inset:10px; border-radius:inherit;
  box-shadow:inset 0 0 0 2px rgba(243,232,212,.55); pointer-events:none; }
.arch-card__body{ padding:20px 6px 0; }
.arch-card__body .h3{ display:flex; align-items:center; gap:10px; text-transform:uppercase; letter-spacing:.01em; }
a.arch-card .h3::after{ content:"\2192"; font-weight:400; transition:transform .25s ease; }
.arch-card__body p{ margin:0; color:var(--muted); font-size:16.5px; }
a.arch-card:hover .arch-card__pic img, a.arch-card:hover .mini-map{ transform:scale(1.06); }
/* the Travel card's map: the four city guides ping in turn, and dotted
   routes keep running towards Zadar */
.mini-map{ display:block; width:100%; height:100%; background:#3f431b; transition:transform .7s ease; }
.mm-route{ fill:none; stroke:var(--gold); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:1 9; opacity:.9;
  animation:mmRoute 2.4s linear infinite; }
@keyframes mmRoute{ to{ stroke-dashoffset:-40; } }
.mm-dot{ fill:var(--rust-ui); stroke:#fff8ea; stroke-width:2.5; }
.mm-city--zadar .mm-dot{ fill:var(--gold); }
.mm-ring{ fill:none; stroke:var(--rust-ui); stroke-width:2.5; opacity:0; transform-box:fill-box; transform-origin:center;
  animation:mmPing 3.2s ease-out calc(var(--k) * .8s) infinite; }
@keyframes mmPing{ 0%{ transform:scale(.7); opacity:.9; } 70%, 100%{ transform:scale(2.8); opacity:0; } }
.mini-map text{ font-family:var(--pixel); font-weight:400; font-size:19px; letter-spacing:.1em; fill:#23260f;
  paint-order:stroke; stroke:#f3e8d4; stroke-width:5px; stroke-linejoin:round; }
a.arch-card:hover .h3::after{ transform:translateX(5px); }
/* Link cards: the inside tilts towards the pointer and a glint follows
   it across the photo. The tilt lives on the inner wrapper so it never
   fights the fade-in on the card itself. */
.tilt{ perspective:1000px; }
.arch-card__inner{
  display:grid; grid-template-columns:100%; grid-template-rows:auto 1fr; align-content:start; height:100%;
  transform:translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:transform .6s cubic-bezier(.2,.9,.3,1);
}
.tilt:hover .arch-card__inner{ --lift:-8px; transition-duration:.18s; }
.arch-card__inner > .arch-card__pic{ grid-area:1 / 1; }
.glare{
  position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
  background:radial-gradient(circle at var(--gx, 50%) var(--gy, 25%), rgba(255,250,235,.55), rgba(255,250,235,0) 55%);
  mix-blend-mode:overlay; opacity:0; transition:opacity .35s ease;
}
.tilt:hover .glare{ opacity:1; }

.arch-card__num{ position:absolute; left:50%; top:18px; transform:translateX(-50%); z-index:1;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--rust-ui); color:var(--cream); font-weight:400; font-size:17px;
  box-shadow:0 0 0 4px rgba(243,232,212,.85); }

/* ---------- Split (text + picture) ------------------------------------- */

.split{ display:grid; gap:clamp(30px,5vw,70px); align-items:center;
  grid-template-columns:repeat(auto-fit, minmax(min(320px,100%),1fr)); }
.split__pic{ border-radius:999px 999px 18px 18px; overflow:hidden; aspect-ratio:4/5;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7); }
.split__pic img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Night band: sparkles --------------------------------------- */

.sparkles{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.sparkles i{
  position:absolute; display:block; width:var(--s); height:var(--s); border-radius:50%;
  background:#fff; box-shadow:0 0 var(--g) rgba(255,255,255,.85); opacity:0;
  animation:sparkle var(--t) ease-in-out var(--d) infinite;
}
@keyframes sparkle{ 0%,100%{ opacity:0; transform:scale(.4); } 50%{ opacity:var(--o); transform:scale(1); } }

/* ---------- Disco ball ------------------------------------------------
   The couple's photo of a real mirror ball, in the homepage opening.
   site.js turns it (see "The disco ball turns"): a canvas lays the
   turning ball exactly over the photo. The photo stays underneath and is
   what shows without WebGL or with reduced motion, when a soft band of
   light passes slowly across it instead. A few facets flash in turn, and
   the specks drifting across the opening are its reflections. */
.ball{ position:relative; width:var(--size, 300px); aspect-ratio:1; }
/* its shadow is a soft round shade drawn with a gradient, not a filter on the photo: a
   phone that gives the photo a layer of its own (as it does while the drifting specks
   pass behind it) can cut a filter's shadow off square at the photo's edges, which
   left a dark box round the ball */
.ball::before{ content:""; position:absolute; left:-14%; right:-14%; top:-5%; bottom:-23%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,0,0,.4) 57%, rgba(0,0,0,.2) 75%, rgba(0,0,0,.06) 88%, rgba(0,0,0,0) 100%); }
.ball__img{ position:relative; display:block; width:100%; height:auto; }
.ball__sweep{ position:absolute; inset:1%; border-radius:50%; overflow:hidden; pointer-events:none; mix-blend-mode:screen; }
.ball__sweep::before{
  content:""; position:absolute; top:-15%; bottom:-15%; left:0; width:55%; rotate:14deg;
  background:linear-gradient(90deg, transparent 0%, rgba(215,232,255,.08) 25%, rgba(235,244,255,.42) 50%, rgba(215,232,255,.08) 75%, transparent 100%);
  filter:blur(5px); transform:translateX(-120%); animation:ballSweep 8s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes ballSweep{ 0%{ transform:translateX(-120%); } 60%, 100%{ transform:translateX(220%); } }
.ball__gl{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; animation:fadeIn .5s ease both; }
@keyframes fadeIn{ from{ opacity:0; } }
.ball--spin .ball__sweep{ display:none; }
.ball__flash{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.ball__flash i{
  position:absolute; left:var(--x); top:var(--y); width:var(--s, 15%); aspect-ratio:1; translate:-50% -50%;
  background:radial-gradient(circle, #fff 0 10%, rgba(255,255,255,.85) 22%, rgba(220,235,255,0) 62%);
  clip-path:polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%);
  opacity:0; animation:facet var(--t, 4.2s) ease-in-out var(--d, 0s) infinite;
}
@keyframes facet{ 0%, 76%, 100%{ opacity:0; transform:scale(.3) rotate(0deg); } 84%{ opacity:1; transform:scale(1) rotate(25deg); } 92%{ opacity:.2; transform:scale(.6) rotate(40deg); } }

/* ---------- Music toggle ------------------------------------------
   Two faces. Before anything plays it is an invitation: a play arrow,
   the full line of text, and a slow glow to catch the eye. Once the
   track is running it collapses to dancing bars and two words, so it
   stops selling and gets out of the way. JS reveals it only when the
   audio file is actually present. No blur behind it: a fixed element
   that blurs what scrolls under it makes an iPhone redraw on every frame. */

.music-toggle{
  position:fixed; z-index:70;
  right:clamp(14px,3vw,28px); bottom:clamp(14px,3vw,28px);
  right:max(clamp(14px,3vw,28px), env(safe-area-inset-right, 0px)); bottom:calc(clamp(14px,3vw,28px) + env(safe-area-inset-bottom, 0px));
  max-width:calc(100vw - 28px);
  display:flex; align-items:center; gap:11px;
  height:48px; padding:0 22px;
  background:rgba(12,13,6,.86); color:var(--fg);
  border:1px solid var(--hairline); border-radius:90px;
  font-family:var(--sans); font-weight:400; font-size:13px; letter-spacing:.14em;
  white-space:nowrap; cursor:pointer;
  transition:border-color .2s ease, transform .2s ease, box-shadow .3s ease, padding .25s ease;
}
.music-toggle[hidden]{ display:none; }
.music-toggle:hover{ border-color:var(--fg); transform:translateY(-2px); }
.music-toggle:focus-visible{ outline:2px solid var(--rust); outline-offset:3px; }

/* The invitation glows until somebody starts the track. */
.music-toggle:not(.is-playing):not(.has-played){
  border-color:rgba(224,122,69,.55);
  animation:discoPulse 2.6s ease-in-out infinite;
}
@keyframes discoPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(224,122,69,.3); }
  60%    { box-shadow:0 0 0 10px rgba(224,122,69,0); }
}

/* Icon swaps between a play arrow and the equaliser. */
.music-toggle__icon{ position:relative; display:flex; align-items:center; justify-content:center; width:15px; height:15px; }
.music-toggle__play{
  width:0; height:0; margin-left:2px;
  border-left:11px solid var(--rust);
  border-top:7px solid transparent; border-bottom:7px solid transparent;
}
.music-toggle__bars{ display:none; align-items:flex-end; gap:3px; height:15px; }
.music-toggle__bars i{ display:block; width:3px; height:4px; background:var(--rust); border-radius:1px; }
.music-toggle.is-playing .music-toggle__play{ display:none; }
.music-toggle.is-playing .music-toggle__bars{ display:flex; }
.music-toggle.is-playing .music-toggle__bars i{ animation:eq .9s ease-in-out infinite alternate; }
.music-toggle.is-playing .music-toggle__bars i:nth-child(2){ animation-delay:.3s; }
.music-toggle.is-playing .music-toggle__bars i:nth-child(3){ animation-delay:.6s; }
@keyframes eq{ from{ height:4px; } to{ height:15px; } }

/* Exactly one label shows at a time. */
.music-toggle__label{ display:none; }
.music-toggle:not(.is-playing):not(.has-played) .music-toggle__label--invite{ display:inline; }
.music-toggle:not(.is-playing).has-played .music-toggle__label--again{ display:inline; }
.music-toggle.is-playing .music-toggle__label--on{ display:inline; color:rgba(255,255,255,.82); }

@media (max-width:620px){
  .music-toggle{ height:44px; padding:0 16px; font-size:11.5px; letter-spacing:.07em; gap:9px; }
}
/* Very narrow screens: keep the invitation, drop the quieter labels. */
@media (max-width:380px){
  .music-toggle__label--again, .music-toggle__label--on{ display:none !important; }
}


/* ---------- Our story: the journey ------------------------------------------
   Seven stops down a line that fills as you scroll. Each stop's marker
   lights up as the line reaches it, its card slides in from its side,
   and a tap opens it: the card grows into the dialog (see site.js). */

.journey{
  --p:0; --dot:66px;
  position:relative; list-style:none; margin:0 auto; padding:0; max-width:1120px;
  display:grid; gap:clamp(34px, 5vw, 70px);
}
.journey::before, .journey::after{
  content:""; position:absolute; left:50%; top:calc(var(--dot) / 2); bottom:calc(var(--dot) / 2); width:3px; margin-left:-1.5px; border-radius:3px;
  background:rgba(243,232,212,.16);
}
.journey::after{ background:linear-gradient(180deg, var(--rust), var(--gold)); transform-origin:top; transform:scaleY(var(--p)); }
html:not(.js) .journey::after{ transform:none; }

.stage{ position:relative; display:grid; grid-template-columns:1fr calc(var(--dot) + 40px) 1fr; align-items:center; }
.stage__dot{
  grid-column:2; grid-row:1; justify-self:center; position:relative; z-index:1;
  width:var(--dot); height:var(--dot); border-radius:50%; display:grid; place-items:center;
  background:var(--olive-2); color:var(--peach); box-shadow:0 0 0 2px rgba(243,232,212,.22), 0 0 0 8px var(--bg);
  transition:background .5s ease, color .5s ease, box-shadow .5s ease, scale .6s cubic-bezier(.3,1.6,.5,1);
}
.stage__dot svg{ width:46%; height:46%; }
.stage.is-reached .stage__dot, html:not(.js) .stage__dot{ background:var(--gold); color:var(--ink-dark); box-shadow:0 0 0 2px var(--gold), 0 0 0 8px var(--bg); scale:1.08; }
.stage--big.is-reached .stage__dot{ background:var(--rust-ui); color:var(--cream); box-shadow:0 0 0 2px var(--rust), 0 0 0 8px var(--bg); }

.stage__card{
  grid-row:1; appearance:none; border:0; margin:0; cursor:pointer; text-align:left; color:inherit; font:inherit;
  display:grid; grid-template-columns:minmax(0, 46%) 1fr; gap:20px; align-items:center;
  padding:14px; border-radius:22px;
  background:rgba(20,22,10,.34); box-shadow:inset 0 0 0 1px rgba(243,232,212,.12), 0 26px 44px -30px rgba(0,0,0,.85);
  transition:translate .45s cubic-bezier(.2,.9,.3,1), background .3s ease, box-shadow .3s ease;
}
.stage--left .stage__card{ grid-column:1; }
.stage--right .stage__card{ grid-column:3; }
.stage__card:hover, .stage__card:focus-visible{ translate:0 -6px; background:rgba(20,22,10,.5); box-shadow:inset 0 0 0 1px rgba(224,180,92,.5), 0 34px 50px -30px rgba(0,0,0,.9); }
.stage__card:focus-visible{ outline:3px solid var(--gold); outline-offset:4px; }
/* cards arrive from their own side */
.js .stage--left .stage__card.reveal{ transform:translateX(-46px); }
.js .stage--right .stage__card.reveal{ transform:translateX(46px); }
.js .stage .stage__card.reveal.is-in{ transform:none; }
.stage__photo{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; border-radius:14px; background:var(--moss); }
.stage__photo img{ width:100%; height:100%; object-fit:cover; transition:scale .9s cubic-bezier(.2,.9,.3,1); }
.stage__card:hover .stage__photo img{ scale:1.07; }
.stage__when{ display:block; font-weight:400; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.stage__title{ display:block; margin:6px 0 8px; font-weight:400; text-transform:uppercase; font-size:clamp(17px, 1.7vw, 22px); line-height:1.2; }
.stage__blurb{ display:block; color:var(--muted); font-size:15px; line-height:1.6; }
.stage__open{ display:inline-flex; align-items:center; gap:.45em; margin-top:12px; font-weight:400; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--peach); }
.stage__open::after{ content:"\2192"; transition:transform .25s ease; }
.stage__card:hover .stage__open::after{ transform:translateX(5px); }
.stage--big .stage__card{ background:rgba(162,70,31,.3); box-shadow:inset 0 0 0 1px rgba(224,180,92,.45), 0 26px 44px -30px rgba(0,0,0,.85); }
/* the years between the milestones: a small dot on the line, the year, and that
   year's photos scattered across the line like prints (not stops: nothing opens) */
.yr{ position:relative; display:grid; justify-items:center; gap:10px; padding-block:6px; }
.yr__dot{ position:relative; z-index:1; width:18px; height:18px; border-radius:50%; background:var(--olive-2);
  box-shadow:0 0 0 2px rgba(243,232,212,.3), 0 0 0 7px var(--bg); transition:background .5s ease, box-shadow .5s ease; }
.yr.is-reached .yr__dot, html:not(.js) .yr__dot{ background:var(--gold); box-shadow:0 0 0 2px var(--gold), 0 0 0 7px var(--bg); }
.yr__when{ position:relative; z-index:1; margin:0; padding:3px 12px; border-radius:99px; background:var(--bg); font-family:var(--pixel); font-weight:400;
  font-size:13px; letter-spacing:.2em; color:var(--gold); }
.yr__pics{ position:relative; z-index:1; list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:12px 0; max-width:100%; }
.yr__pics li{ flex:none; margin-inline:-6px; padding:6px 6px 16px; background:#fbf6ec; border-radius:3px; rotate:var(--t, 0deg);
  box-shadow:0 14px 26px -14px rgba(0,0,0,.8); transition:rotate .35s ease, translate .35s ease; }
.yr__pics li:hover{ rotate:0deg; translate:0 -6px; z-index:2; }
.yr__pics img{ display:block; width:auto; height:clamp(120px, 13vw, 168px); }
/* the longer story: inline without JavaScript, moved into the dialog with it */
.stage__detail{ grid-column:1 / -1; margin-top:12px; font-size:15.5px; color:var(--muted); }
.stage__detail p{ margin:0 0 .6em; }
.has-dialog .stage__detail{ display:none; }

/* the dialog */
.sd{
  width:min(960px, 94vw); max-height:min(92vh, 900px); max-height:min(92dvh, 900px); padding:0; border:0; border-radius:26px; overflow:hidden;
  background:var(--cream); color:var(--ink-dark);
  box-shadow:0 50px 100px -30px rgba(0,0,0,.75);
}
.sd::backdrop{ background:rgba(14,15,7,.84); }      /* no blur: on an iPhone it could cover the dialog itself */
/* Safari: an ordinary <div> panel fixed in the middle of the screen, over its own shade
   (see site.js); nothing about the page itself changes while it is open */
.sd.sd--sheet{ position:fixed; z-index:2147483001; left:50%; top:50%; margin:0; transform:translate(-50%, -50%); }
.sd-shade{ position:fixed; inset:0; z-index:2147483000; background:rgba(14,15,7,.84); touch-action:none; }
.sd[open]::backdrop{ animation:dim .45s ease; }
@keyframes dim{ from{ opacity:0; } }
.sd__inner{ height:100%; }
.sd__pic{ position:absolute; top:50%; z-index:2; translate:0 -50%; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(20,22,10,.62); color:var(--cream); font-size:24px; line-height:1; display:grid; place-items:center;
  transition:background .2s ease; }
.sd__pic:hover{ background:rgba(20,22,10,.8); }
.sd__pic--prev{ left:12px; } .sd__pic--next{ right:12px; }
.sd__pic[hidden]{ display:none; }
.sd__grid{ display:grid; grid-template-columns:1.2fr 1fr; max-height:min(92vh, 900px); }
.sd__photos{ position:relative; background:var(--olive-2); min-height:420px; overflow:hidden; }
.sd__track{ display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; }
.sd__track::-webkit-scrollbar{ display:none; }
/* whole photos, never cropped: they are the couple's own, faces and all */
.sd__track img{ flex:0 0 100%; width:100%; height:100%; min-height:420px; object-fit:contain; background:#24270f; scroll-snap-align:start; }
.sd__empty{ position:absolute; inset:0; display:grid; place-items:center; align-content:center; gap:16px; text-align:center;
  color:var(--peach); padding:30px; }
.sd__empty svg{ width:110px; height:110px; }
.sd__empty p{ margin:0; font-weight:400; font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(243,232,212,.8); }
.sd__dots{ position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:8px; }
.sd__dots button{ width:9px; height:9px; padding:0; border:0; border-radius:50%; background:rgba(243,232,212,.5); cursor:pointer; }
.sd__dots button[aria-current="true"]{ background:var(--cream); transform:scale(1.25); }
.sd__text{ position:relative; padding:clamp(28px,4vw,48px); overflow:auto; display:flex; flex-direction:column; }
.sd__when{ margin:0 0 8px; font-weight:400; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--rust-2); }
.sd__title{ font-weight:400; text-transform:uppercase; font-size:clamp(30px,3.6vw,46px); line-height:.95; letter-spacing:0; margin:0 0 18px; }
.sd__body p{ margin:0 0 1em; color:rgba(35,38,15,.82); }
.sd__nav{ margin-top:auto; padding-top:22px; display:flex; justify-content:space-between; gap:12px; border-top:1px solid rgba(35,38,15,.14); }
.sd__nav button{ appearance:none; border:0; background:none; cursor:pointer; padding:8px 0;
  font-weight:400; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--rust-ui); }
.sd__nav button:disabled{ visibility:hidden; }
.sd__close{
  position:absolute; z-index:3; top:14px; right:14px; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:var(--ink-dark); color:var(--cream); font-size:22px; line-height:1; display:grid; place-items:center;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.6);
}

/* ---------- Weekend: the opening video ------------------------------------
   The couple's video fills the screen under the header. It plays from
   YouTube (site.js builds the player), sized like background-size:cover
   plus a 60px strip above and below, where YouTube keeps its title bar
   and logo, pushed out of sight. The still covers it until it is really
   playing, so there is never a black box or a spinner; it stays for good
   if the video cannot load. */
.vhero{
  position:relative; isolation:isolate; overflow:hidden; container-type:size;
  height:calc(100svh - var(--header-h)); min-height:340px;
  background:#2d3014; color:var(--cream);
}
.vhero__screen{ position:absolute; inset:0; z-index:-2; }
/* the film served from the site itself, when it is there */
.vhero__video{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
#vhero-player{
  position:absolute; left:50%; top:50%; translate:-50% -50%; border:0; pointer-events:none;
  width:max(100cqw, 177.78cqh); height:calc(max(100cqh, 56.25cqw) + 120px);
}
.vhero__poster{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover;
  transition:opacity .6s ease, visibility 0s linear .6s; }
.vhero.is-playing .vhero__poster, .vhero.is-tap .vhero__poster{ opacity:0; visibility:hidden; }
/* paused, and for the moment YouTube shows its own buttons after a restart, the
   film stays where it is but goes softly out of focus (quickly), taking those
   buttons with it; it comes back into focus slowly */
#vhero-player{ transition:filter .3s ease; }
.vhero.is-soft #vhero-player{ filter:blur(14px) brightness(.72); transition-duration:.2s; }
/* paused by the visitor: a deeper blur, so YouTube's own paused button melts away (there is no button of ours in the middle) */
.vhero.is-held #vhero-player{ filter:blur(22px) brightness(.66); }
.vhero.is-tap #vhero-player{ pointer-events:auto; }
/* The opening: a warm flowing gradient of red, orange and yellow, like the
   couple's pick of a psychedelic loop (YouTube vcbDy5YkLTU), made here from
   five big soft blobs of colour drifting over a red ground, so it plays at
   once, with nothing to load. A 5 is up straight away and breathes while
   the film loads; the moment the film is playing (site.js adds
   .is-counting) 4-3-2-1 follow quickly, and on the 1 the colour swells and
   melts away into the film -- just as YouTube's own buttons go. Only
   transforms and fades move, so it stays smooth on a phone, even while the
   film is loading. */
.vhero__intro{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.flow__bg{ position:absolute; inset:-12%; background:#e3110c; transform-origin:50% 50%;
  transition:opacity 1.1s ease .1s, transform 1.5s cubic-bezier(.6,0,.3,1); }
.flow__bg i{ position:absolute; border-radius:50%; will-change:transform; }
.flow__bg i:nth-child(1){ left:-18%; top:18%; width:92vmax; height:74vmax;              /* the sun-yellow heart */
  background:radial-gradient(closest-side, #ffe21a 0%, rgba(255,214,0,.92) 34%, rgba(255,150,0,.45) 66%, rgba(255,120,0,0) 100%);
  animation:flowA 14s ease-in-out infinite alternate; }
.flow__bg i:nth-child(2){ left:26%; top:-34%; width:96vmax; height:86vmax;              /* orange, drifting over the top */
  background:radial-gradient(closest-side, rgba(255,128,0,.95) 0%, rgba(255,110,0,.6) 50%, rgba(255,90,0,0) 100%);
  animation:flowB 18s ease-in-out infinite alternate; }
.flow__bg i:nth-child(3){ left:44%; top:34%; width:84vmax; height:72vmax;               /* deep red, low on the right */
  background:radial-gradient(closest-side, rgba(208,0,18,.95) 0%, rgba(220,0,20,.55) 55%, rgba(225,0,20,0) 100%);
  animation:flowC 16s ease-in-out infinite alternate; }
.flow__bg i:nth-child(4){ left:72%; top:-18%; width:58vmax; height:58vmax;              /* a second, paler yellow, top right */
  background:radial-gradient(closest-side, rgba(255,236,40,.92) 0%, rgba(255,210,0,.5) 50%, rgba(255,190,0,0) 100%);
  animation:flowD 21s ease-in-out infinite alternate; }
.flow__bg i:nth-child(5){ left:-10%; top:-26%; width:70vmax; height:60vmax;             /* red again, top left */
  background:radial-gradient(closest-side, rgba(226,0,16,.9) 0%, rgba(226,0,16,.45) 55%, rgba(226,0,16,0) 100%);
  animation:flowE 19s ease-in-out infinite alternate; }
@keyframes flowA{ from{ transform:translate(0, 0) scale(1); } to{ transform:translate(22vmax, -10vmax) scale(1.18); } }
@keyframes flowB{ from{ transform:translate(0, 0) scale(1.05); } to{ transform:translate(-26vmax, 14vmax) scale(.92); } }
@keyframes flowC{ from{ transform:translate(0, 0) scale(1); } to{ transform:translate(-24vmax, -16vmax) scale(1.2); } }
@keyframes flowD{ from{ transform:translate(0, 0) scale(.9); } to{ transform:translate(-18vmax, 24vmax) scale(1.15); } }
@keyframes flowE{ from{ transform:translate(0, 0) scale(1); } to{ transform:translate(20vmax, 22vmax) scale(1.1); } }
.flow-specks{ z-index:2; transition:opacity .6s ease; }
/* the countdown, in the badge's dotted lettering: deep red on the warm colours */
.cd{ position:absolute; inset:0; z-index:3; display:grid; place-items:center; transition:opacity .35s ease; }
.cd__label{ position:absolute; left:0; right:0; top:calc(50% - clamp(104px, 20vmin, 180px)); text-align:center;
  font-family:var(--pixel); font-weight:400; font-size:clamp(12px, 1.7vmin, 16px); letter-spacing:.34em; text-transform:uppercase; color:#4a0d05;
  animation:cdIn .4s ease-out both; }
.cd__n{ display:grid; place-items:center; }
.cd__n b{ grid-area:1 / 1; font-family:var(--pixel); font-weight:300; font-size:clamp(120px, 32vmin, 270px); line-height:1; color:#3d0a04;
  text-shadow:0 0 .12em rgba(255,236,160,.55); opacity:0; }
/* the 5: in at once, breathing while the film loads */
.cd__n b:first-child{ animation:cdIn .35s ease-out both, cdBreathe .8s ease-in-out .35s infinite alternate; }
.vhero.is-counting .cd__n b:first-child{ animation:cdOut .22s ease-in both; }
/* then 4, 3, 2, 1, half a second each */
.vhero.is-counting .cd__n b:not(:first-child){ animation:cdPop .55s cubic-bezier(.3,.7,.3,1) calc(var(--i) * .55s + .18s) both; }
.vhero.is-counting .cd__n b:last-child{ animation-name:cdLast; }
@keyframes cdIn{ from{ opacity:0; transform:scale(1.06); } to{ opacity:1; transform:none; } }
@keyframes cdOut{ to{ opacity:0; transform:scale(.96); } }
@keyframes cdBreathe{ from{ transform:none; } to{ transform:scale(1.035); } }
@keyframes cdPop{ 0%{ opacity:0; transform:scale(1.08); } 18%{ opacity:1; transform:none; } 78%{ opacity:1; } 100%{ opacity:0; transform:scale(.97); } }
@keyframes cdLast{ 0%{ opacity:0; transform:scale(1.08); } 18%{ opacity:1; transform:none; } 100%{ opacity:1; } }
/* while a Play button waits on the colour, the countdown steps aside */
.vhero.is-asking .cd{ opacity:0; }
/* open: the colour swells and melts away into the film; once gone, its layers are let go */
.vhero.is-open .flow__bg{ opacity:0; transform:scale(1.25); }
.vhero.is-open .vhero__intro{ visibility:hidden; transition:visibility 0s linear 1.3s; }
.vhero.is-open .cd{ opacity:0; }
.vhero.is-open .cd *{ animation:none; }
.vhero.is-open .flow-specks{ opacity:0; }
.vhero.is-open .flow-specks i{ animation-play-state:paused; }
html:not(.js) .vhero__intro{ display:none; }
/* a little shade under the header, and a little at the foot so the buttons read; the film
   then ends cleanly where the plan begins, with no band of colour in between */
.vhero::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(35,38,15,.4) 0, transparent 16%, transparent 74%, rgba(20,22,10,.5) 100%); }
.vhero__sound, .vhero__pause, .vhero__play, .vhero__yt{ color:var(--cream); cursor:pointer;
  background:rgba(20,22,10,.62); border:1px solid rgba(243,232,212,.3);
  transition:background .3s ease, border-color .3s ease; }
.vhero__sound:hover, .vhero__pause:hover, .vhero__play:hover, .vhero__yt:hover{ background:rgba(20,22,10,.72); border-color:var(--gold); }
.vhero__ctrl{ position:absolute; z-index:2; left:clamp(14px,3vw,34px); right:clamp(14px,3vw,34px); bottom:clamp(16px,3vw,32px);
  left:max(clamp(14px,3vw,34px), env(safe-area-inset-left, 0px)); right:max(clamp(14px,3vw,34px), env(safe-area-inset-right, 0px));
  bottom:calc(clamp(16px,3vw,32px) + env(safe-area-inset-bottom, 0px));
  display:flex; justify-content:space-between; align-items:flex-end; pointer-events:none; }
.vhero__ctrl > *{ pointer-events:auto; }
.vhero__sound{ display:inline-flex; align-items:center; gap:12px; height:clamp(54px, 5.5vw, 64px); padding:0 24px 0 18px; border-radius:99px;
  font-family:var(--pixel); font-weight:400; font-size:clamp(13px, 1.3vw, 15px); letter-spacing:.16em; text-transform:uppercase; }
.vhero__pause{ width:clamp(58px, 6vw, 72px); height:clamp(58px, 6vw, 72px); border-radius:50%; display:grid; place-items:center; padding:0; }
.vhero__sound[hidden], .vhero__pause[hidden], .vhero__play[hidden]{ display:none; }
.vhero__ctrl svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.vhero__pause svg{ width:30px; height:30px; }
.vhero__sound svg path:first-child, .vhero__tri{ fill:currentColor; }
.vhero__pause .vhero__bars{ stroke-width:2.4; }
.vhero__tri, .vhero__pause.is-paused .vhero__bars{ display:none; }
.vhero__pause.is-paused .vhero__tri{ display:inline; }
.vhero__waves{ display:none; }
.vhero__sound.is-on .vhero__waves{ display:inline; }
.vhero__sound.is-on .vhero__x{ display:none; }
.vhero__play{ position:absolute; z-index:2; left:50%; top:50%; translate:-50% -50%; width:clamp(72px,8vw,92px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; }
/* just after a tap on Play, our button shows a pause sign in the middle for a moment
   (over YouTube's own), then goes */
.vhero.is-nod .vhero__play{ width:clamp(88px,9vw,104px); background:rgba(20,22,10,.8); border-color:rgba(243,232,212,.5);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.7); }
.vhero__play .vp-bars{ display:none; }
.vhero.is-nod .vhero__play{ pointer-events:none; animation:vpNod 2.6s ease forwards; }
.vhero.is-nod .vhero__play .vp-tri{ display:none; }
.vhero.is-nod .vhero__play .vp-bars{ display:inline; }
.vhero.is-nod .vhero__play svg{ margin-left:0; }
@keyframes vpNod{ 0%, 70%{ opacity:1; } 100%{ opacity:0; } }
.vhero__play svg{ width:40%; fill:currentColor; margin-left:8%; }
.vhero__yt{ position:absolute; z-index:2; left:50%; bottom:clamp(76px,10vw,110px); translate:-50% 0; padding:10px 18px; border-radius:99px;
  font-family:var(--pixel); font-weight:300; font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  display:none; }
html:not(.js) .vhero__yt, .vhero.is-broken .vhero__yt{ display:inline-flex; }
/* the Scroll hint has bright sky behind it here; on phones it would sit on
   the buttons, and a phone is swiped anyway */
.vhero .scroll-cue{ z-index:3; text-shadow:0 1px 10px rgba(0,0,0,.65); color:var(--cream); }
/* on phones: the Sound button is just its icon (a speaker, crossed out or
   with waves), as round as Pause, so the Scroll pill fits between them */
@media (max-width:640px){
  .vhero__sound{ width:58px; height:58px; padding:0; gap:0; justify-content:center; border-radius:50%; }
  .vhero__sound span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .vhero__sound svg{ width:28px; height:28px; }
  .vhero .scroll-cue{ bottom:calc(clamp(16px,3vw,32px) + env(safe-area-inset-bottom, 0px) + 7px); height:44px; box-sizing:border-box;
    flex-direction:row; align-items:center; gap:8px; padding:0 14px 0 16px; border-radius:99px;
    background:rgba(20,22,10,.62); border:1px solid rgba(243,232,212,.3); font-size:10.5px; letter-spacing:.24em; }
  .vhero .scroll-cue::after{ content:"\2193"; width:auto; height:auto; background:none; font-size:14px; letter-spacing:0; line-height:1;
    animation:cueBob 1.6s ease-in-out infinite; }
  /* if the film cannot load, its YouTube link sits above the buttons */
  .vhero .vhero__yt{ bottom:calc(clamp(16px,3vw,32px) + env(safe-area-inset-bottom, 0px) + 74px); }
}
@keyframes cueBob{ 50%{ transform:translateY(3px); } }

/* ---------- Weekend: three tickets ------------------------------------- */

.tickets{ display:grid; gap:clamp(10px,1.3vw,14px); max-width:640px; margin:clamp(18px,2.6vw,30px) auto 0; }
/* on a computer the three lie side by side, each the shape of a real ticket, not stretched across the page */
@media (min-width:981px){
  .tickets{ grid-template-columns:repeat(3, minmax(0, 350px)); justify-content:center; max-width:none; gap:clamp(18px, 2.2vw, 30px); }
  .ticket{ --stub:94px; }
  .ticket__main{ padding:18px 20px 20px; }
  .ticket__when{ letter-spacing:.1em; }
}
.ticket{
  --notch:12px; --stub:clamp(84px,12vw,124px);
  position:relative; display:grid; grid-template-columns:var(--stub) 1fr;
  background:var(--paper); color:var(--ink-dark); border-radius:18px;
  box-shadow:0 26px 40px -26px rgba(35,38,15,.6);
  rotate:var(--r, 0deg);
  /* the two notches of the perforation */
  -webkit-mask:radial-gradient(circle var(--notch) at var(--stub) 0, transparent 98%, #000) top/100% 51% no-repeat,
               radial-gradient(circle var(--notch) at var(--stub) 100%, transparent 98%, #000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle var(--notch) at var(--stub) 0, transparent 98%, #000) top/100% 51% no-repeat,
               radial-gradient(circle var(--notch) at var(--stub) 100%, transparent 98%, #000) bottom/100% 51% no-repeat;
}
.ticket__stub{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:10px 8px;
  background:var(--rust-ui); color:var(--cream); border-radius:18px 0 0 18px;
  border-right:3px dashed rgba(243,232,212,.55);
}
.ticket__dow{ font-weight:400; font-size:13px; letter-spacing:.22em; text-transform:uppercase; }
.ticket__day{ font-weight:400; font-size:clamp(38px,4.6vw,52px); line-height:1; letter-spacing:0; }
.ticket__mon{ font-weight:400; font-size:12px; letter-spacing:.24em; text-transform:uppercase; opacity:.85; }
.ticket__main{ padding:clamp(12px,1.6vw,16px) clamp(18px,2.4vw,26px); }
.ticket__title{ margin:0 0 2px; font-weight:400; text-transform:uppercase; font-size:clamp(20px,2vw,26px); letter-spacing:0; line-height:1.05; }
.ticket__when{ margin:0 0 6px; font-weight:400; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--rust-2); }
.ticket__main p{ margin:0; font-size:16px; line-height:1.5; }
.ticket__main p:last-child{ margin:0; color:rgba(35,38,15,.8); }
.ticket--main .ticket__stub{ background:var(--night); }
.ticket--main{ background:#fff9ee; box-shadow:0 30px 50px -26px rgba(35,38,15,.75), 0 0 0 2px var(--gold); }
.ticket .text-link{ font-size:12.5px; margin-top:8px; }

/* "On this page", under the video */
/* On this page: a slim row of links at the top of the plan, ruled off from it */
.band--flush{ padding-top:clamp(34px, 4.6vw, 60px); }
.wk-jump{ max-width:620px; margin:0 auto clamp(30px, 4vw, 52px); padding-bottom:clamp(20px, 2.6vw, 30px); text-align:center;
  border-bottom:1px solid var(--hairline); }
.wk-jump .label{ margin-bottom:0; }
.wk-jump .stepnav{ margin-top:0; }
.stepnav.stepnav--light a{ background:var(--paper); box-shadow:inset 0 0 0 1px rgba(35,38,15,.16), 0 6px 14px -10px rgba(35,38,15,.5); color:var(--ink-dark); }
.stepnav.stepnav--light a:hover{ background:var(--rust-ui); box-shadow:none; color:var(--cream); }
.stepnav.stepnav--light b{ background:var(--olive); color:var(--cream); }

/* the weather, under the plan */
.weather{ display:flex; align-items:center; gap:14px; max-width:880px; margin:clamp(18px,2.4vw,26px) auto 0; padding:14px 18px;
  border-radius:16px; background:rgba(224,180,92,.16); color:var(--ink-dark); font-size:15.5px; line-height:1.5; }
.weather svg{ flex:none; width:38px; height:38px; fill:none; stroke:var(--rust-ui); stroke-width:3; stroke-linecap:round;
  animation:spin 40s linear infinite; }
.weather b{ font-family:var(--pixel); font-weight:300; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--rust-ui); margin-right:6px; }

/* ---------- Weekend: Saturday, in one panel ------------------------------
   Four stops through the day. Choosing one cross-fades the sky between
   four gradients, sends the sun (or, at night, a small mirror ball) along
   its arc, and brings the stars out after dark. It moves on by itself
   while on screen, until someone picks a stop. data-k on .dayp is the
   stop being shown. */

.dayp{
  position:relative; isolation:isolate; overflow:hidden; margin:clamp(28px,4vw,44px) auto 0; max-width:1100px;
  min-height:clamp(440px, 46vw, 520px); border-radius:28px;
  display:grid; grid-template-rows:1fr auto;
  box-shadow:0 40px 70px -40px rgba(0,0,0,.8), inset 0 0 0 1px rgba(243,232,212,.1);
  --fg-now:var(--ink-dark);
}
.dayp[data-k="2"], .dayp[data-k="3"]{ --fg-now:var(--cream); }
.dayp__sky{ position:absolute; inset:0; z-index:-1; }
.dayp__layer{ position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease; }
.dayp__layer--0{ background:linear-gradient(180deg, #fbe7bf 0%, #f3cf95 70%, #eab978 100%); }
.dayp__layer--1{ background:linear-gradient(180deg, #f6c585 0%, #e59453 55%, #b4552e 100%); }
.dayp__layer--2{ background:radial-gradient(120% 90% at 70% 10%, #3b2236 0%, #1e1320 55%, #120c12 100%); }
.dayp__layer--3{ background:linear-gradient(180deg, #14160a 0%, #2e2233 45%, #9b5a4b 78%, #e8a36a 100%); }
.dayp[data-k="0"] .dayp__layer--0, .dayp[data-k="1"] .dayp__layer--1,
.dayp[data-k="2"] .dayp__layer--2, .dayp[data-k="3"] .dayp__layer--3{ opacity:1; }
.dayp__stars{ position:absolute; inset:0 0 35% 0; opacity:0; transition:opacity 1.4s ease; }
.dayp[data-k="2"] .dayp__stars{ opacity:1; }
.dayp[data-k="3"] .dayp__stars{ opacity:.45; }
/* the sun by day, the moon at night (the page keeps to one disco ball) */
.dayp__orb{
  position:absolute; left:var(--ox, 76%); top:var(--oy, 26%); width:clamp(70px, 9vw, 110px); aspect-ratio:1; translate:-50% -50%;
  border-radius:50%; background:radial-gradient(circle at 40% 38%, #fff8e2, #ffd98a 45%, #f3b05a 100%);
  transition:left 1.6s cubic-bezier(.45,.05,.3,1), top 1.6s cubic-bezier(.45,.05,.3,1), background 1.2s ease, scale 1.6s ease, box-shadow 1.2s ease;
}
.dayp[data-k="1"] .dayp__orb{ --ox:84%; --oy:60%; background:radial-gradient(circle at 40% 38%, #ffe6b8, #f59a4f 55%, #c9582a 100%); scale:1.15; }
.dayp[data-k="2"] .dayp__orb{ --ox:80%; --oy:22%; scale:.8;
  background:radial-gradient(circle at 60% 30%, rgba(150,138,112,.24) 0 9%, transparent 14%),
             radial-gradient(circle at 34% 60%, rgba(150,138,112,.2) 0 5%, transparent 9%),
             radial-gradient(circle at 70% 68%, rgba(150,138,112,.16) 0 3%, transparent 6%),
             radial-gradient(circle at 40% 36%, #fffaf0, #efe4c8 55%, #cbbd9b 100%);
  box-shadow:0 0 46px 8px rgba(255,244,214,.18); }
.dayp[data-k="3"] .dayp__orb{ --ox:74%; --oy:74%; scale:1.3; background:radial-gradient(circle at 50% 40%, #fff4d6, #ffc877 50%, #f08d4a 100%); }
.dayp .arches{ opacity:.9; }

.dayp__panes{ position:relative; display:grid; align-items:center; padding:clamp(28px,5vw,64px) clamp(24px,6vw,80px) 10px; }
.dayp__pane{ grid-area:1 / 1; max-width:520px; color:var(--fg-now);
  opacity:0; translate:0 18px; visibility:hidden;
  transition:opacity .6s ease, translate .7s cubic-bezier(.2,.8,.2,1), visibility 0s linear .6s; }
.dayp__pane.is-on{ opacity:1; translate:0 0; visibility:visible; transition-delay:.25s, .25s, 0s; }
html:not(.js) .dayp__pane{ opacity:1; visibility:visible; translate:none; position:relative; }
.dayp__icon{ width:clamp(64px,7vw,84px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; margin-bottom:16px;
  background:rgba(255,255,255,.28); color:currentColor; }
.dayp[data-k="2"] .dayp__icon, .dayp[data-k="3"] .dayp__icon{ background:rgba(243,232,212,.1); color:var(--gold); }
.dayp__icon svg{ width:56%; height:56%; overflow:visible; }
.dayp__time{ margin:0 0 6px; font-weight:400; font-size:13px; letter-spacing:.18em; text-transform:uppercase; opacity:.85; }
.dayp__title{ margin:0 0 10px; font-weight:400; text-transform:uppercase; font-size:clamp(26px,3.4vw,42px); line-height:1.05; }
.dayp__text{ margin:0; font-size:16.5px; line-height:1.65; max-width:46ch; }
.dayp__text + .dayp__text{ margin-top:.75em; }

.dayp__tabs{ position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; padding:12px; margin:14px clamp(12px,2vw,20px) clamp(12px,2vw,20px);
  border-radius:18px; background:rgba(20,22,10,.66); }      /* no blur: over the changing sky it cost an iPhone every frame */
.dayp__tab{ position:relative; overflow:hidden; appearance:none; border:0; cursor:pointer; text-align:left; padding:12px 14px 16px; border-radius:12px;
  background:transparent; color:rgba(243,232,212,.72); transition:background .3s ease, color .3s ease; }
.dayp__tab b{ display:block; font-weight:400; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.dayp__tab span{ display:block; margin-top:2px; font-size:15px; font-weight:400; }
.dayp__tab[aria-selected="true"]{ background:rgba(243,232,212,.14); color:var(--cream); }
.dayp__tab:hover{ color:var(--cream); }
/* how long until it moves on by itself */
.dayp__bar{ position:absolute; left:14px; right:14px; bottom:8px; height:2px; border-radius:2px; background:rgba(243,232,212,.14); overflow:hidden; }
.dayp__bar::after{ content:""; position:absolute; inset:0; background:var(--gold); transform:scaleX(0); transform-origin:left; }
.dayp.is-auto .dayp__tab[aria-selected="true"] .dayp__bar::after{ animation:dayBar var(--dwell, 6.5s) linear forwards; }
.dayp:not(.is-auto) .dayp__tab[aria-selected="true"] .dayp__bar::after{ transform:none; }
@keyframes dayBar{ to{ transform:none; } }

/* the icons, animated once they are on screen */
.ico .bubble{ animation:rise 2.4s ease-in infinite; transform-box:fill-box; }
.ico .bubble:nth-of-type(2){ animation-delay:.8s; } .ico .bubble:nth-of-type(3){ animation-delay:1.6s; }
@keyframes rise{ 0%{ transform:translateY(0); opacity:0; } 20%{ opacity:1; } 100%{ transform:translateY(-30px); opacity:0; } }
.ico .bell{ transform-box:fill-box; transform-origin:50% 0; animation:ring 2.2s ease-in-out infinite; }
@keyframes ring{ 0%,100%{ rotate:0deg; } 15%{ rotate:22deg; } 35%{ rotate:-18deg; } 55%{ rotate:10deg; } 70%{ rotate:0deg; } }
.ico .rays{ transform-box:view-box; transform-origin:50% 50%; animation:spin 12s linear infinite; }
.ico .blink{ animation:blink 1.6s ease-in-out infinite alternate; }
.ico .blink:nth-of-type(2n){ animation-delay:.8s; }
@keyframes blink{ from{ opacity:.25; } to{ opacity:1; } }
.ico .sunup{ animation:sunup 3.4s ease-in-out infinite alternate; }
@keyframes sunup{ from{ transform:translateY(7px); } to{ transform:translateY(-3px); } }
.ico .tilt{ transform-box:fill-box; transform-origin:50% 100%; animation:tilt 3s ease-in-out infinite; }
@keyframes tilt{ 0%,100%{ rotate:-6deg; } 50%{ rotate:6deg; } }

/* ---------- Weekend: what to wear -------------------------------------
   Real looks from the couple's Pinterest board, one at a time on a lit
   stage either side of the tips. Tap a photo (or swipe it, or use the
   arrows) for the next look; Random outfit changes both. Each look lights
   its stage in its own colour. */

.wear .sparkles{ opacity:.8; }
.wear .lede a{ color:var(--gold); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.wear .lede a:hover{ color:var(--cream); }
.wardrobe{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px) minmax(0,1fr); grid-template-areas:"her mid him";
  align-items:center; gap:clamp(14px,2.4vw,34px); margin-top:clamp(18px,2.4vw,28px); }
.look--her{ grid-area:her; } .look--him{ grid-area:him; }
.wardrobe__mid{ grid-area:mid; display:flex; flex-direction:column; align-items:center; gap:clamp(12px,1.6vw,18px); min-width:0; }
.wardrobe__random svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; }
/* "not for her": cream is too close to white, so her stage stands empty with a note */
.look__none{ position:absolute; inset:0; z-index:2; margin:0; padding:0 16%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  text-align:center; color:var(--cream); font-family:var(--pixel); font-weight:300; font-size:12px; line-height:1.7; letter-spacing:.14em; text-transform:uppercase;
  pointer-events:none; animation:noneIn .4s ease both; }
.look__none[hidden]{ display:none; }
.look__none svg{ width:clamp(56px, 6vw, 76px); height:auto; fill:none; stroke:var(--gold); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* a little heart under "For the bride", beating softly */
.look__none .look__heart{ width:clamp(24px, 2.4vw, 30px); stroke-width:1.6; animation:heartBeat 1.6s ease-in-out infinite; }
@keyframes heartBeat{ 0%, 60%, 100%{ transform:scale(1); } 15%{ transform:scale(1.16); } 30%{ transform:scale(.98); } 45%{ transform:scale(1.1); } }
@keyframes noneIn{ from{ opacity:0; transform:scale(.94); } }
.wardrobe__random circle{ fill:currentColor; stroke:none; }
.wardrobe__random:active svg{ rotate:90deg; transition:rotate .2s ease; }
@property --spot{ syntax:"<color>"; inherits:true; initial-value:#f6cdb0; }
.look{ margin:0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; transition:--spot .6s ease; }
.look__stage{ position:relative; isolation:isolate; overflow:hidden; width:min(100%, 290px); aspect-ratio:3 / 5;
  border-radius:50% 50% 16px 16px / 30% 30% 16px 16px;              /* an arch, like the ones behind the names */
  background:radial-gradient(95% 65% at 50% 28%, color-mix(in srgb, var(--spot) 26%, #23270f), #15170b 82%); }
.look__stage::before{ /* the spotlight */
  content:""; position:absolute; z-index:-1; inset:0;
  background:conic-gradient(from 180deg at 50% -4%, transparent 152deg, color-mix(in srgb, var(--spot) 22%, transparent) 168deg,
    color-mix(in srgb, var(--spot) 34%, transparent) 180deg, color-mix(in srgb, var(--spot) 22%, transparent) 192deg, transparent 208deg);
  -webkit-mask:linear-gradient(#000 50%, transparent 92%); mask:linear-gradient(#000 50%, transparent 92%); }
.look__stage::after{ content:""; position:absolute; z-index:2; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1.5px rgba(224,180,92,.6); }
.look__pic{ appearance:none; border:0; background:none; cursor:pointer; position:absolute; inset:0; padding:9% 5% 5%;
  display:flex; align-items:flex-end; justify-content:center; touch-action:pan-y; -webkit-tap-highlight-color:transparent; }
.look.is-crop .look__pic{ padding-bottom:0; }                         /* a photo cut off at the knee sits on the frame */
.look__pic img{ display:block; height:100%; width:auto; max-width:100%; object-fit:contain; object-position:50% 100%;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45)); -webkit-user-select:none; user-select:none; -webkit-user-drag:none; }
.look__pic:focus-visible{ outline:2px solid var(--gold); outline-offset:-6px; border-radius:inherit; }
.look__nav{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; }
.look__arrow{ appearance:none; flex:none; display:grid; place-items:center; width:38px; height:38px; padding:0; border-radius:50%;
  border:1px solid rgba(243,232,212,.3); background:rgba(243,232,212,.06); color:var(--cream); cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:background .2s ease, border-color .2s ease; }
.look__arrow:hover{ background:var(--rust-ui); border-color:var(--rust-ui); }
.look__arrow svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.look__dots{ display:flex; gap:6px; }
.look__dots i{ width:6px; height:6px; border-radius:50%; background:rgba(243,232,212,.28); transition:background .3s ease, transform .3s ease; }
.look__dots i.is-on{ background:var(--gold); transform:scale(1.35); }
.look__cap{ margin-top:10px; width:min(280px,100%); }
.look__name{ margin:0 0 4px; font-weight:400; text-transform:uppercase; font-size:19px; letter-spacing:0; }
.look__tip{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.45; min-height:2.9em; }

/* Tips to play with, laid out like a designer's sample table: real
   photographs of each fabric cut with pinking shears (wear-fabrics.webp),
   and the couple's own mirror ball recoloured for each colour
   (wear-balls.webp), hanging on its chain. No boxes: thin gold rules
   divide them. A tap on a fabric replays its little moment (a flash of
   light, a swing) and brings up the outfits made of it; a tap on a ball
   brings up a look in its colour. */
.wplay{ --rule:rgba(224,180,92,.24);
  --pinked:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 3.8 3.2 7.7 0 11.5 3.2 15.4 0 19.2 3.2 23.1 0 26.9 3.2 30.8 0 34.6 3.2 38.5 0 42.3 3.2 46.2 0 50 3.2 53.8 0 57.7 3.2 61.5 0 65.4 3.2 69.2 0 73.1 3.2 76.9 0 80.8 3.2 84.6 0 88.5 3.2 92.3 0 96.2 3.2 100 0 96.8 3.8 100 7.7 96.8 11.5 100 15.4 96.8 19.2 100 23.1 96.8 26.9 100 30.8 96.8 34.6 100 38.5 96.8 42.3 100 46.2 96.8 50 100 53.8 96.8 57.7 100 61.5 96.8 65.4 100 69.2 96.8 73.1 100 76.9 96.8 80.8 100 84.6 96.8 88.5 100 92.3 96.8 96.2 100 100 96.2 96.8 92.3 100 88.5 96.8 84.6 100 80.8 96.8 76.9 100 73.1 96.8 69.2 100 65.4 96.8 61.5 100 57.7 96.8 53.8 100 50 96.8 46.2 100 42.3 96.8 38.5 100 34.6 96.8 30.8 100 26.9 96.8 23.1 100 19.2 96.8 15.4 100 11.5 96.8 7.7 100 3.8 96.8 0 100 3.2 96.2 0 92.3 3.2 88.5 0 84.6 3.2 80.8 0 76.9 3.2 73.1 0 69.2 3.2 65.4 0 61.5 3.2 57.7 0 53.8 3.2 50 0 46.2 3.2 42.3 0 38.5 3.2 34.6 0 30.8 3.2 26.9 0 23.1 3.2 19.2 0 15.4 3.2 11.5 0 7.7 3.2 3.8Z'/%3E%3C/svg%3E");
  display:grid; gap:clamp(20px, 2.4vw, 28px); width:100%; margin-top:4px; }
.wplay__row{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
.wp{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.wplay__row .wp{ padding-inline:clamp(10px, 1.6vw, 20px); }
.wplay__row .wp + .wp{ border-left:1px solid var(--rule); }
.wp--colour{ padding-top:clamp(18px, 2.2vw, 26px); border-top:1px solid var(--rule); }
.wp__t{ margin:0 0 6px; font-size:15px; letter-spacing:.34em; text-indent:.34em; text-transform:uppercase; color:var(--gold); }
.wp__d{ margin:0 0 16px; max-width:34ch; color:var(--muted); font-size:14.5px; line-height:1.45; text-wrap:balance; }
.wp__pick{ color:var(--cream); }
.wp__row{ margin-top:auto; width:100%; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px 8px; }
.sw, .wp__dot{ appearance:none; border:0; padding:0; background:none; color:var(--cream); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.sw{ display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(243,232,212,.8); white-space:nowrap; transition:color .3s ease; }
/* each swatch lies a little askew, as samples do on a table, on its own soft shadow */
.sw i{ position:relative; display:block; width:100%; max-width:66px; aspect-ratio:1; rotate:var(--r, 0deg); transform-origin:50% 0;
  transition:rotate .5s cubic-bezier(.3,1.4,.5,1), translate .5s cubic-bezier(.3,1.4,.5,1); }
.sw i::before{ content:""; position:absolute; inset:9% 7% 3%; border-radius:4px; box-shadow:0 14px 18px -8px rgba(0,0,0,.85);
  transition:box-shadow .5s ease; }
.sw b{ position:absolute; inset:0; overflow:hidden; transform-origin:50% 0;
  background:url(../img/wear-fabrics.webp) calc(var(--k) * 100% / 7) 0 / 800% 100% no-repeat;
  -webkit-mask:var(--pinked) 0 0 / 100% 100% no-repeat; mask:var(--pinked) 0 0 / 100% 100% no-repeat; }
.sw:hover i, .sw:focus-visible i{ rotate:0deg; translate:0 -4px; }
.sw:hover i::before, .sw:focus-visible i::before{ box-shadow:0 22px 22px -8px rgba(0,0,0,.9); }
.sw:hover, .sw:focus-visible, .sw.is-lit{ color:var(--cream); }
.sw:focus-visible{ outline:none; }
.sw:focus-visible b{ outline:2px solid var(--gold); outline-offset:-3px; }
/* a flash of light across the fabric */
.sw b::after{ content:""; position:absolute; inset:-30%; translate:-100% 0;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.8) 50%, transparent 62%); }
.sw.is-lit b::after{ animation:sheen .9s ease-out; }
@keyframes sheen{ to{ translate:100% 0; } }
.sw--linen.is-lit b{ animation:ripple 1.2s ease-in-out; }
.sw--fringe.is-lit b{ animation:swing 1.1s ease-in-out; }
.sw--chiffon.is-lit b{ animation:ripple 1.2s ease-in-out; }
.sw--pleats.is-lit b{ animation:pleat 1s ease-in-out; }
@keyframes swing{ 25%{ transform:skewX(12deg); } 50%{ transform:skewX(-9deg); } 75%{ transform:skewX(5deg); } }
@keyframes ripple{ 30%{ transform:scale(1.05,.95) skewY(3deg); } 60%{ transform:scale(.97,1.03) skewY(-2deg); } }
@keyframes pleat{ 40%{ transform:scaleX(.72); } 70%{ transform:scaleX(1.05); } }
/* the colours: the couple's mirror ball in each, on a fine chain, swaying */
.wp--colour .wp__dots{ display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:clamp(6px,1.2vw,12px); width:100%; margin-top:auto; padding-top:30px; }
.wp__dot{ position:relative; display:flex; flex-direction:column; align-items:center; gap:11px; }
.wp__dot i{ position:relative; display:block; width:100%; max-width:54px; aspect-ratio:1; border-radius:50%;
  background:url(../img/wear-balls.webp) calc(var(--k) * 100% / 7) 0 / 800% 100% no-repeat;
  box-shadow:0 12px 16px -8px rgba(0,0,0,.85);
  transform-origin:50% -28px; animation:ballSwing 3.4s ease-in-out var(--d, 0s) infinite alternate;
  transition:box-shadow .3s ease; }
.wp__dot i::before{ /* the chain */
  content:""; position:absolute; left:50%; bottom:99%; width:1.5px; height:28px; translate:-50% 0;
  background:repeating-linear-gradient(180deg, rgba(243,232,212,.7) 0 2px, rgba(243,232,212,.18) 2px 3.5px); }
.wp__dot i::after{ /* a glint */
  content:""; position:absolute; left:20%; top:16%; width:28%; aspect-ratio:1;
  background:conic-gradient(from 0deg, transparent 0 20%, #fff 25%, transparent 30% 45%, #fff 50%, transparent 55% 70%, #fff 75%, transparent 80%);
  -webkit-mask:radial-gradient(closest-side, #000 30%, transparent); mask:radial-gradient(closest-side, #000 30%, transparent);
  opacity:0; animation:dotGlint 2.8s ease-in-out var(--d, 0s) infinite; }
.wp__dot span{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(243,232,212,.8); white-space:nowrap; transition:color .3s ease; }
.wp__dot:hover i, .wp__dot:focus-visible i{ box-shadow:0 0 22px 3px color-mix(in srgb, var(--c) 45%, transparent), 0 12px 16px -8px rgba(0,0,0,.85); }
.wp__dot:hover span{ color:var(--cream); }
.wp__dot[aria-pressed="true"] i{ box-shadow:0 0 0 2px var(--night), 0 0 0 3.5px var(--gold), 0 0 26px 6px color-mix(in srgb, var(--c) 60%, transparent); }
.wp__dot[aria-pressed="true"] span{ color:var(--gold); }
.wp__dot.is-lit i{ animation:ballSwing 3.4s ease-in-out var(--d, 0s) infinite alternate, ballPop .7s cubic-bezier(.3,1.5,.5,1); }
@keyframes ballSwing{ from{ rotate:-6deg; } to{ rotate:6deg; } }
@keyframes ballPop{ 0%{ scale:1; } 35%{ scale:1.22; } 100%{ scale:1; } }
@keyframes dotGlint{ 0%, 70%, 100%{ opacity:0; transform:scale(.4) rotate(0deg); } 82%{ opacity:1; transform:scale(1) rotate(45deg); } }

/* ---------- Travel & Explore -------------------------------------------- */

.stepnav{ list-style:none; margin:clamp(26px,3vw,36px) auto 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.stepnav a{
  display:inline-flex; align-items:center; gap:10px; padding:9px 18px 9px 9px; border-radius:99px;
  background:rgba(20,22,10,.35); box-shadow:inset 0 0 0 1px rgba(243,232,212,.22);
  font-weight:400; font-size:13px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--cream);
  transition:background .2s ease;
}
.stepnav a:hover{ background:var(--rust-ui); }
.stepnav b{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--cream); color:var(--ink-dark); font-size:14px; letter-spacing:0; }

.band--snug{ padding-block:clamp(52px, 6.5vw, 92px); --blend:clamp(70px, 8vw, 120px); }
.sn-short{ display:none; }
.step-head{ display:flex; align-items:center; gap:clamp(14px,2.4vw,28px); margin-bottom:clamp(16px,2.2vw,26px); }
.step-num{ font-weight:400; font-size:clamp(88px,12vw,160px); line-height:.8; letter-spacing:0; flex:none; background-size:100% .8em; }
.step-head .label{ margin-bottom:8px; }
.step-head .h2{ margin:0; }

/* step 3: the two postcards */
.choose{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,28px); }
/* "Greetings from..." postcards: the whole card is the postcard, a photo
   inside a white border, big letters and a stamp */
.pcard{ position:relative; display:block; container-type:inline-size; aspect-ratio:3 / 2; overflow:hidden;
  border:clamp(8px,1.1vw,12px) solid #fbf6ec; border-radius:6px; background:#2d3014; color:#fff8ea; text-decoration:none;
  rotate:var(--r, 0deg); box-shadow:0 2px 0 rgba(35,38,15,.08), 0 30px 50px -28px rgba(35,38,15,.8);
  transition:transform .45s cubic-bezier(.2,.9,.3,1.2), rotate .45s ease, box-shadow .45s ease; }
.pcard:hover, .pcard:focus-visible{ transform:translateY(-6px); rotate:0deg; box-shadow:0 2px 0 rgba(35,38,15,.08), 0 40px 60px -28px rgba(35,38,15,.85); }
.pcard__pic{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.08) contrast(1.04); }
.pcard::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,22,10,.34) 0%, rgba(20,22,10,.06) 38%, transparent 52%, rgba(20,22,10,.74) 100%); }
.pcard > span, .pcard > svg{ position:absolute; z-index:2; }
.pcard__from{ left:6cqw; top:5.5cqw; font-family:var(--script); font-size:8.6cqw; line-height:1; text-shadow:0 2px 12px rgba(0,0,0,.5); }
.pcard__big{ left:5cqw; top:16cqw; font-weight:400; text-transform:uppercase; font-size:18cqw; line-height:.9; letter-spacing:.02em; color:#fff8ea;
  text-shadow:.45cqw .45cqw 0 var(--rust-ui), .9cqw .9cqw 0 var(--rust-ui), 1.3cqw 1.3cqw 0 var(--rust-2), 1.8cqw 2cqw 2.4cqw rgba(0,0,0,.4); }
.pcard__foot{ left:0; right:0; bottom:0; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:0 4.5cqw 4.2cqw 6cqw; }
.pcard__line{ max-width:58%; font-size:clamp(13.5px, 3.4cqw, 17px); line-height:1.35; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.pcard__go{ flex:none; padding:9px 14px; border-radius:99px; background:var(--rust-ui); color:var(--cream);
  font-family:var(--pixel); font-weight:400; font-size:clamp(10px, 2.3cqw, 12px); letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.6); transition:background .2s ease; }
.pcard__go::after{ content:" \2192"; }
.pcard:hover .pcard__go{ background:var(--rust-2); }
/* a real stamp in the corner, franked with a round postmark and wavy lines that run off the card */
.pcard__stamp{ top:2.4cqw; right:0; width:27cqw; height:auto; overflow:visible; }
.pcard__stamp-t{ font-family:var(--pixel); font-weight:400; }
.pcard__ink{ opacity:.86; mix-blend-mode:multiply; }
.note{ margin:clamp(22px,3vw,30px) 0 0; font-size:16.5px; color:var(--muted); }
.note b{ color:var(--fg); }

/* step 2: map + ranked options */
.route{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start; }
.route .map-card{ position:sticky; top:calc(var(--header-h) + 20px); }
.map-route{ fill:none; stroke:var(--rust-ui); stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len); opacity:0; transition:opacity .3s ease; }
.map-route.is-on{ opacity:1; animation:drawRoute 1.3s cubic-bezier(.6,.1,.3,1) forwards; }
@keyframes drawRoute{ to{ stroke-dashoffset:0; } }
html:not(.js) .map-route{ opacity:.9; stroke-dashoffset:0; }
.map-city:not(.map-zadar).is-on circle{ fill:var(--gold); stroke:var(--ink-dark); r:8px; }
.map-zadar.is-on .pin{ fill:var(--gold); stroke:var(--ink-dark); }
/* the Travel map: cities and their photos are buttons */
.map-card--travel .tm-city{ cursor:pointer; outline:none; }
.map-card--travel .tm-hit{ fill:transparent; stroke:none; }
.map-card--travel .map-pics{ pointer-events:none; }
.map-card--travel .mp img{ pointer-events:auto; cursor:pointer; transition:scale .3s cubic-bezier(.3,1.5,.5,1), box-shadow .3s ease; }
.map-card--travel .mp:hover img, .map-card--travel .mp.is-on img{ scale:1.08; }
.map-card--travel .mp.is-on img{ box-shadow:0 0 0 .5cqw var(--gold), 0 .8cqw 1.8cqw rgba(0,0,0,.45); }
.map-card--travel .hm-city.is-on .hm-dot{ fill:var(--rust-ui); stroke:var(--cream); r:9px; }
.map-card--travel .hm-city.is-on text, .map-card--travel .hm-city:hover text, .map-card--travel .hm-city:focus-visible text{ fill:var(--rust-ui); }
.map-card--travel .hm-city:focus-visible .hm-dot{ stroke:var(--gold); stroke-width:4; }
.map-card--travel .map-zadar:focus-visible .pin{ stroke:var(--gold); stroke-width:3.5; }
.map-card--travel .map-route{ stroke-width:4.5; }

.opts{ list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:opt; }
.opt{ border-radius:18px; background:var(--card); box-shadow:inset 0 0 0 1px var(--hairline); transition:background .25s ease, box-shadow .25s ease; }
.opt.is-open{ background:rgba(20,22,10,.4); box-shadow:inset 0 0 0 2px var(--gold); }
.opt__head{
  appearance:none; border:0; background:none; width:100%; text-align:left; cursor:pointer; color:inherit;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:16px 18px;
}
.opt__rank{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--cream); color:var(--ink-dark);
  font-weight:400; font-size:17px; }
.opt.is-open .opt__rank{ background:var(--gold); }
.opt__name{ display:block; font-weight:400; text-transform:uppercase; font-size:clamp(18px,1.8vw,21px); letter-spacing:0; line-height:1.15; }
.opt__meta{ display:block; font-size:14.5px; color:var(--muted); }
.opt__tag{ padding:5px 11px; border-radius:99px; background:var(--rust-ui); color:var(--cream); font-weight:400;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.opt__body{ padding:0 18px 18px 72px; color:var(--muted); font-size:16.5px; }
.opt__body p{ margin:0 0 10px; }
.js .opt:not(.is-open) .opt__body{ display:none; }
.how{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.how li{ display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start; }
.how svg{ width:20px; height:20px; margin-top:3px; color:var(--gold); }
.how b{ color:var(--fg); }
/* the airports on a light band */
.band--cream .opt{ background:rgba(255,255,255,.55); }
.band--cream .opt.is-open{ background:#fffaf0; box-shadow:inset 0 0 0 2px var(--gold), 0 20px 36px -24px rgba(35,38,15,.5); }
.band--cream .opt__rank{ background:var(--ink-dark); color:var(--cream); }
.band--cream .opt.is-open .opt__rank{ background:var(--gold); color:var(--ink-dark); }
.band--cream .how svg{ color:var(--rust-ui); }

/* Where to stay: two big cards that turn over. Both sides share one grid
   cell, so a card is as tall as its longer side; the front's photo or map
   grows to fill whatever room the back needs. */
.stay{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,28px); }
.sflip{ min-width:0; perspective:2000px; }
.sflip__in{ position:relative; display:grid; height:100%; min-height:clamp(520px, 44vw, 620px);
  transform-style:preserve-3d; transition:transform .8s cubic-bezier(.3,.75,.25,1); }
.sflip.is-flipped .sflip__in{ transform:rotateY(180deg); }
.sflip__face{ grid-area:1 / 1; position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden; border-radius:22px;
  background:var(--paper); color:var(--ink-dark); box-shadow:0 30px 50px -30px rgba(0,0,0,.7);
  --fg:var(--ink-dark); --muted:rgba(35,38,15,.76); --label:var(--rust-2); --hairline:rgba(35,38,15,.16);
  -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.sflip__back{ transform:rotateY(180deg); padding:clamp(22px,2.6vw,32px) clamp(20px,2.6vw,32px) 0; }
.sflip.is-flipped .sflip__front, .sflip:not(.is-flipped) .sflip__back{ pointer-events:none; }
.sflip--group .sflip__front{ background:var(--rust-ui); color:var(--cream); --fg:var(--cream); --muted:rgba(243,232,212,.9); --label:var(--cream-2); }
.sflip__pics{ position:relative; flex:1 1 0; min-height:210px; }
.sflip__photo{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.sflip__polaroid{ position:absolute; top:16px; right:18px; width:clamp(78px,8.4vw,112px); height:auto; padding:5px 5px 16px; background:#fbf6ec;
  rotate:5deg; box-shadow:0 14px 26px -12px rgba(0,0,0,.7); }
.sflip__body{ padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,32px) 14px; }
.sflip__body--split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,46%); gap:18px; align-items:end; }
.sflip__body .label{ margin-bottom:8px; }
/* "Option 1" / "Option 2": a badge in each card's top-left corner (over the photo on the first) */
.sflip__opt{ display:inline-flex; align-self:flex-start; align-items:center; gap:8px; margin:0 0 14px; padding:6px 7px 6px 14px; border-radius:99px;
  background:var(--rust-ui); color:var(--cream); font-family:var(--pixel); font-weight:400; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 8px 18px -10px rgba(40,20,5,.6); }
.sflip__opt b{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--cream); color:var(--rust-ui); font-weight:400; font-size:13px; letter-spacing:0; }
.sflip__opt--corner{ position:absolute; z-index:3; top:16px; left:16px; margin:0; }     /* both badges at the same height */
/* a badge sits on the front only: some phones draw a positioned element through the turned card, so it
   also hides itself halfway through the turn (and comes back halfway through turning back) */
.sflip__opt{ -webkit-backface-visibility:hidden; backface-visibility:hidden; transition:visibility 0s linear .3s; }
.sflip.is-flipped .sflip__opt{ visibility:hidden; }
.sflip__opt--over{ background:var(--cream); color:var(--rust-ui); }
.sflip--own .sflip__front .sflip__body{ padding-top:68px; }
.sflip__opt--over b{ background:var(--rust-ui); color:var(--cream); }
.sflip__title{ margin:0 0 10px; font-weight:400; text-transform:uppercase; font-size:clamp(24px,2.6vw,32px); letter-spacing:0; line-height:1.05; }
.sflip__sub{ margin:0; font-size:16.5px; line-height:1.5; color:var(--muted); }
.sflip__sub b{ color:var(--fg); font-weight:400; }
.sflip__map{ margin:0; overflow:hidden; border-radius:14px; background:#5c5f28; box-shadow:0 0 0 1px rgba(35,38,15,.12); }
.sflip--group .sflip__map{ box-shadow:0 12px 26px -14px rgba(40,10,0,.7); }
.sflip__map svg{ display:block; width:100%; height:auto; }
.sflip__areas{ position:relative; flex:1 1 0; display:flex; min-height:280px; margin:0 clamp(20px,2.6vw,32px) 4px; }
.sflip__map--big{ position:relative; flex:1 1 auto; }
.sflip__map--big svg{ position:absolute; inset:0; height:100%; }
/* a little postcard of each area, pinned on the land to the right of the map */
.areapics{ position:absolute; top:0; bottom:0; right:4%; width:min(24%, 124px); margin:0; padding:0; list-style:none; pointer-events:none; }
.areapic{ position:absolute; left:0; right:0; padding:5px; background:#fbf6ec; border-radius:3px;
  box-shadow:0 10px 20px -10px rgba(20,22,10,.7), 0 0 0 1px rgba(35,38,15,.06); }
.areapic img{ display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; }
.areapic--3{ top:1%; right:6%; left:auto; width:100%; rotate:4deg; }
.areapic--2{ top:34%; rotate:-3deg; }
.areapic--1{ top:67%; right:4%; left:auto; width:100%; rotate:2.5deg; }
/* the button that turns a card: the whole front is its target */
.sflip__turn{ display:inline-flex; align-items:center; gap:9px; align-self:flex-start; margin:10px clamp(20px,2.6vw,32px) clamp(18px,2.2vw,24px);
  padding:9px 14px 9px 16px; border-radius:99px; border:1px solid var(--hairline); background:rgba(35,38,15,.05); color:var(--fg); cursor:pointer;
  font-family:var(--pixel); font-weight:400; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; -webkit-tap-highlight-color:transparent;
  transition:background .2s ease, border-color .2s ease; }
.sflip--group .sflip__front .sflip__turn{ border-color:rgba(243,232,212,.45); background:rgba(20,22,10,.16); }
.sflip__front .sflip__turn::before{ content:""; position:absolute; inset:0; z-index:1; }
.sflip__turn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:rotate .5s ease; }
.sflip:hover .sflip__front .sflip__turn, .sflip__turn:hover{ border-color:var(--gold); }
.sflip:hover .sflip__front .sflip__turn svg{ rotate:180deg; }
.sflip__back .sflip__turn{ margin:auto 0 clamp(18px,2.2vw,24px); }
.sflip__back .label{ margin-bottom:6px; }
/* the back of the hotel card */
.sfacts{ list-style:none; margin:2px 0 14px; padding:0; display:grid; gap:7px; }
.sfacts li{ display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start; font-size:15.5px; line-height:1.45; color:var(--muted); }
.sfacts b{ color:var(--fg); font-weight:400; }
.sfacts svg{ width:24px; height:24px; color:var(--rust-ui); }
.sstory{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start; padding:12px; border-radius:16px; background:rgba(224,180,92,.18); }
.sstory__pic{ display:block; width:clamp(74px,8vw,96px); aspect-ratio:10 / 11; height:auto; object-fit:cover; border-radius:12px; }
.sstory__t{ margin:0 0 3px; font-family:var(--pixel); font-weight:400; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--rust-2); }
.sstory p{ margin:0; font-size:14.5px; line-height:1.5; }
.sstory b{ font-weight:400; }
.sphotos{ list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.sphotos img{ display:block; width:100%; aspect-ratio:4 / 3; height:auto; object-fit:cover; border-radius:10px; }
.sflip__link{ margin:12px 0 4px; }
.sflip__face .text-link{ --link:var(--rust-ui); }
/* the back of the areas card */
.sareas{ list-style:none; margin:4px 0 12px; padding:0; display:grid; gap:10px; }
.sareas li{ display:grid; grid-template-columns:clamp(120px, 12vw, 156px) minmax(0,1fr); gap:16px; align-items:start; padding-bottom:12px; border-bottom:1px solid var(--hairline); }
/* the same little postcards as on the front, next to each number */
.sareas__pic{ display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; margin-top:2px; padding:4px; background:#fff;
  border-radius:3px; box-shadow:0 8px 16px -9px rgba(40,30,10,.55), 0 0 0 1px rgba(35,38,15,.08); rotate:-2.5deg; }
.sareas li:nth-child(2) .sareas__pic{ rotate:2deg; }
.sareas li:nth-child(3) .sareas__pic{ rotate:-1.5deg; }
.sareas b{ font-weight:400; text-transform:uppercase; font-size:17px; letter-spacing:.06em; }
.sareas p{ margin:3px 0 0; color:var(--muted); font-size:15px; line-height:1.5; }
.sareas .pick, .areas .pick{ display:inline-block; margin-left:6px; padding:2px 8px; border-radius:99px; background:var(--gold); color:var(--ink-dark);
  font-size:10.5px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; vertical-align:2px; }
/* the two Zadar maps */
.zm-sea{ fill:#5c5f28; }
.zm-land path, .zm-landfill{ fill:var(--cream); }
.zm-t{ font-family:var(--pixel); font-weight:400; font-size:12px; letter-spacing:.05em; text-transform:uppercase; fill:var(--ink-dark);
  paint-order:stroke; stroke:var(--cream); stroke-width:3.5px; stroke-linejoin:round; }
.zm-t--small{ font-size:10px; }
.zm-t--hotel{ font-size:12px; fill:var(--rust-2); }
.zm-t--big{ font-size:33px; stroke-width:7px; }
.zm-t--sub{ font-family:var(--main); font-size:26px; letter-spacing:0; text-transform:none; fill:rgba(35,38,15,.85); stroke-width:6px; }
.zm-t--sea{ fill:var(--cream); stroke:#5c5f28; }
.zm-t--credit{ font-family:var(--main); font-size:8px; letter-spacing:0; text-transform:none; fill:rgba(243,232,212,.78); stroke:none; }
.zm-t--creditbig{ font-size:15px; }
.zm-walk{ fill:none; stroke:var(--rust-ui); stroke-width:2.4; stroke-dasharray:.5 5.5; stroke-linecap:round; }
.zm-dot{ fill:var(--ink-dark); stroke:var(--cream); stroke-width:1.5; }
.zm-pin{ fill:var(--rust-ui); stroke:#fff8ea; stroke-width:1.5; }
.zm-pin-eye{ fill:#fff8ea; }
.zm-church circle{ fill:var(--rust-ui); stroke:#fff8ea; stroke-width:1.5; }
.zm-church path{ fill:none; stroke:#fff8ea; stroke-width:1.6; stroke-linecap:round; }
.zmap--areas .zm-church circle{ stroke-width:2.5; }
.zmap--areas .zm-church path{ stroke-width:2.6; }
.zm-t--key{ font-size:22px; stroke-width:6px; }
.zm-t--area{ font-family:var(--script); font-size:17px; letter-spacing:0; text-transform:none; fill:rgba(35,38,15,.75); stroke-width:3px; }
.zm-ball circle{ fill:#dcd8cd; stroke:var(--ink-dark); stroke-width:1.2; }
.zm-ball path{ fill:none; stroke:rgba(35,38,15,.5); stroke-width:.8; }
.zmap--areas .zm-ball circle{ stroke-width:2; }
.zmap--areas .zm-ball path{ stroke-width:1.3; }
.zm-area circle{ fill:var(--rust-ui); stroke:#fff8ea; stroke-width:3; }
/* without JavaScript nothing turns: both sides show, one under the other */
html:not(.js) .sflip__in{ display:flex; flex-direction:column; gap:14px; }
html:not(.js) .sflip__back{ transform:none; }
html:not(.js) .sflip__turn{ display:none; }
.small{ font-size:15px; color:var(--muted); }
.small + .small{ margin-top:-.4em; }

/* good to know: big icons that turn over when tapped. Both faces share
   one grid cell, so a card is as tall as its longer side needs. */
.flipcards{ list-style:none; margin:clamp(26px,3vw,40px) 0 0; padding:0; display:grid; gap:clamp(10px,1.4vw,16px);
  grid-template-columns:repeat(4, minmax(0,1fr)); }
.flipcard{ appearance:none; border:0; padding:0; background:none; color:inherit; cursor:pointer; width:100%; height:100%;
  display:grid; perspective:1000px; text-align:center; -webkit-tap-highlight-color:transparent; }
.flipcard__face{ grid-area:1 / 1; min-height:clamp(140px,13vw,184px); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:18px 16px; border-radius:20px; -webkit-backface-visibility:hidden; backface-visibility:hidden;
  transition:transform .75s cubic-bezier(.3,1.25,.5,1); }
.flipcard__front{ background:rgba(243,232,212,.07); box-shadow:inset 0 0 0 1px var(--hairline); }
.flipcard__front svg{ width:clamp(58px,6vw,78px); height:auto; color:var(--gold); }
.flipcard__front b{ font-weight:400; text-transform:uppercase; font-size:clamp(16px,1.6vw,19px); letter-spacing:.1em; }
.flipcard__front i{ font-style:normal; font-family:var(--pixel); font-weight:300; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.flipcard__back{ transform:rotateY(180deg); background:var(--cream); color:var(--ink-dark); box-shadow:0 18px 30px -20px rgba(0,0,0,.7); }
.flipcard__back b{ font-family:var(--pixel); font-weight:300; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--rust-ui); }
.flipcard__back span{ font-size:15px; line-height:1.5; }
.flipcard[aria-expanded="true"] .flipcard__front{ transform:rotateY(-180deg); }
.flipcard[aria-expanded="true"] .flipcard__back{ transform:rotateY(0deg); }
.flipcard:hover .flipcard__front{ box-shadow:inset 0 0 0 1px var(--gold); }
/* without JavaScript nothing turns, so both sides show, one under the other */
html:not(.js) .flipcard{ display:flex; flex-direction:column; gap:8px; }
html:not(.js) .flipcard__face{ transform:none; min-height:0; }

/* explore pages: day trips on a dark band */
.band--deep .ideas em{ color:var(--peach); }
/* each airport: the flight from the US, then the way on to Zadar */
.legs{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:14px; }
.leg{ position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; align-items:start; }
.leg:not(:last-child)::after{ content:""; position:absolute; left:13px; top:33px; bottom:-11px; border-left:2px dotted rgba(162,70,31,.5); }
.leg__n{ display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--rust-ui); color:var(--cream);
  font-family:var(--pixel); font-weight:400; font-size:13px; }
.leg__t{ margin:4px 0 6px !important; font-family:var(--pixel); font-weight:400; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--rust-2); }
.legs .how{ gap:6px; }

.ideas{ list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(min(300px,100%),1fr)); }
.ideas li{ padding:18px 20px; border-radius:16px; background:var(--card); box-shadow:inset 0 0 0 1px var(--hairline); }
.ideas b{ display:block; font-weight:400; text-transform:uppercase; font-size:16px; letter-spacing:.02em; }
.ideas span{ display:block; color:var(--muted); font-size:15.5px; }
.ideas em{ display:inline-block; margin-top:8px; font-style:normal; font-weight:400; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rust-2); }

/* Europe: a map beside two short lists; pointing at a place in a list
   lights it up on the map. The map stays in view while the lists scroll. */
.eu{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:clamp(22px,3.4vw,48px); align-items:start; }
.eu__map{ position:sticky; top:calc(var(--header-h) + 18px); margin:0; overflow:hidden; border-radius:20px; background:#3f431b;
  box-shadow:0 30px 50px -30px rgba(35,38,15,.7); }
.eu__map img{ display:block; width:100%; height:auto; }
.eu-over{ position:absolute; inset:0; width:100%; height:100%; }
.eu-drive{ fill:none; stroke:var(--gold); stroke-width:1.8; stroke-dasharray:.5 4.5; stroke-linecap:round; transition:stroke-width .2s ease; }
.eu-fly{ fill:none; stroke:rgba(243,232,212,.6); stroke-width:1.3; stroke-dasharray:5 4; transition:stroke .2s ease, stroke-width .2s ease; }
.eu-drive.is-on{ stroke-width:3; }
.eu-fly.is-on{ stroke:var(--peach); stroke-width:2.2; }
.eu-pt circle{ stroke:#3f431b; stroke-width:1.5; transition:r .2s ease; }
.eu-pt--drive circle{ fill:var(--gold); }
.eu-pt--fly circle{ fill:var(--peach); }
.eu-pt.is-on circle{ r:8px; }
.eu-over text{ font-family:var(--pixel); font-weight:400; font-size:12px; letter-spacing:.06em; text-transform:uppercase; fill:var(--cream);
  paint-order:stroke; stroke:#3f431b; stroke-width:3.5px; stroke-linejoin:round; }
.eu-pt.is-on text{ fill:var(--gold); }
.eu-hub circle{ fill:var(--cream); }
.eu-over .eu-hub text{ font-size:10px; fill:rgba(243,232,212,.78); }
.eu-zadar path{ fill:var(--rust-ui); stroke:#fff8ea; stroke-width:1.5; }
.eu-zadar circle{ fill:#fff8ea; }
.eu-over .eu-zadar text{ fill:var(--peach); }
.eu-over .eu-key text{ font-size:10px; letter-spacing:.08em; fill:rgba(243,232,212,.85); }
/* one list at a time, By car or By plane, each place opening on a tap */
.eu__tabs{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin:0 0 14px; border-radius:99px;
  background:rgba(35,38,15,.08); box-shadow:inset 0 0 0 1px var(--hairline); }
.eu__tab{ appearance:none; border:0; border-radius:99px; padding:11px 10px; background:none; color:var(--ink-dark); cursor:pointer;
  font-family:var(--pixel); font-weight:400; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; line-height:1.3;
  -webkit-tap-highlight-color:transparent; transition:background .25s ease, color .25s ease; }
.eu__tab[aria-selected="true"]{ background:var(--rust-ui); color:var(--cream); box-shadow:0 8px 16px -10px rgba(90,30,10,.8); }
html:not(.js) .eu__tabs{ display:none; }
.eu__group[hidden]{ display:none; }
html:not(.js) .eu__group + .eu__group{ margin-top:28px; }
.eu__note{ margin:0 0 6px; color:var(--muted); font-size:15px; }
.eu__list{ list-style:none; margin:0; padding:0; }
.eu-row{ border-bottom:1px solid var(--hairline); border-radius:6px; transition:background .2s ease; }
.eu-row.is-on{ background:rgba(224,180,92,.16); }
.eu-row__head{ appearance:none; border:0; background:none; width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:0 10px;
  align-items:center; padding:11px 6px; text-align:left; color:inherit; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.eu-row b{ font-weight:400; text-transform:uppercase; font-size:17px; letter-spacing:.03em; }
/* the country as a little flag sticker, tilted; its name shows on hover (and, on a phone, while the place is open) */
.flag{ position:relative; justify-self:start; display:block; width:27px; aspect-ratio:3 / 2; border-radius:3px; rotate:-5deg;
  box-shadow:0 0 0 2px #fbf6ec, 0 4px 9px -3px rgba(35,38,15,.55); transition:rotate .25s ease, scale .25s ease; }
.flag svg{ display:block; width:100%; height:100%; }
.flag::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.38) 0 16%, rgba(255,255,255,0) 36% 64%, rgba(0,0,0,.14)); }
.flag::before{ content:attr(data-name); position:absolute; z-index:3; left:50%; bottom:calc(100% + 9px); translate:-50% 4px; padding:5px 10px 4px; border-radius:99px;
  background:var(--ink-dark); color:var(--cream); font-family:var(--pixel); font-weight:400; font-size:10px; line-height:1.2; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap; box-shadow:0 8px 16px -8px rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .2s ease, translate .2s ease; }
.flag:hover, .eu-row.is-open .flag{ rotate:0deg; }
.flag:hover{ scale:1.12; }
.flag:hover::before, .eu-row__head:focus-visible .flag::before{ opacity:1; translate:-50% 0; }
@media (hover:none){ .eu-row.is-open .flag::before{ opacity:1; translate:-50% 0; } }
.eu-row em{ justify-self:end; font-style:normal; font-family:var(--pixel); font-weight:400; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.eu-row em::after{ content:"+"; display:inline-block; margin-left:10px; font-size:15px; color:var(--rust-ui); transition:rotate .25s ease; }
.eu-row.is-open em::after{ rotate:45deg; }
.eu-row__more{ margin:0; padding:0 6px 16px; color:var(--muted); font-size:15.5px; line-height:1.5; }
.eu-row__more p{ margin:0 0 12px; }
/* three little prints of the place */
.eu-row__pics{ list-style:none; margin:0; padding:0 2px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.eu-row__pics li{ padding:4px; background:#fbf6ec; border-radius:3px; rotate:-1.6deg;
  box-shadow:0 8px 16px -9px rgba(40,30,10,.55), 0 0 0 1px rgba(35,38,15,.08); }
.eu-row__pics li:nth-child(2){ rotate:1.3deg; }
.eu-row__pics li:nth-child(3){ rotate:-.7deg; }
.eu-row__pics img{ display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; }
.js .eu-row:not(.is-open) .eu-row__more{ display:none; }
.eu-row.is-open .eu-row__more{ animation:euOpen .3s ease; }
@keyframes euOpen{ from{ opacity:0; translate:0 -4px; } }
/* the map shows the chosen list; the other fades back */
.eu__map .eu-drive, .eu__map .eu-fly, .eu__map .eu-pt, .eu__map .eu-hub{ transition:opacity .35s ease; }
.js .eu__map[data-show="drive"] .eu-fly, .js .eu__map[data-show="drive"] .eu-pt--fly{ opacity:.14; }
.js .eu__map[data-show="fly"] .eu-drive, .js .eu__map[data-show="fly"] .eu-pt--drive, .js .eu__map[data-show="fly"] .eu-hub{ opacity:.14; }
.eu ~ .note{ margin-top:clamp(24px,3vw,36px); }
@media (max-width:860px){
  .eu{ grid-template-columns:1fr; }
  .eu__map{ position:relative; top:auto; }
}
@media (max-width:640px){
  .eu-row__head{ grid-template-columns:auto minmax(0,1fr); }
  .eu-row em{ grid-column:1 / -1; justify-self:start; margin-top:3px; }
  .eu__tab{ font-size:10.5px; letter-spacing:.08em; padding:10px 6px; }
  .eu-over text{ font-size:20px; stroke-width:5px; }
  .eu-over .eu-hub text, .eu-over .eu-key text{ font-size:16px; }
  .eu-pt circle{ r:7px; }
}

/* ---------- Photo credits (city pages) ------------------------------------ */

.credits{ font-size:12.5px; line-height:1.9; color:var(--muted); margin:0; }
.credits-box summary{ cursor:pointer; font-weight:400; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.credits-box[open] summary{ margin-bottom:10px; }
.credits a{ color:inherit; }
.credit{ display:block; }

/* ---------- Footer -------------------------------------------------------- */

.site-footer{
  position:relative; isolation:isolate; overflow:hidden; text-align:center;
  --prev:var(--moss); --blend:clamp(90px, 10vw, 150px);
  background-color:var(--moss); color:var(--cream);
  background-image:linear-gradient(180deg, var(--prev) 0, var(--moss) var(--blend));
  background-image:linear-gradient(180deg, var(--prev) 0,
    color-mix(in oklab, var(--prev) 90%, var(--moss)) calc(var(--blend) * .2),
    color-mix(in oklab, var(--prev) 65%, var(--moss)) calc(var(--blend) * .4),
    color-mix(in oklab, var(--prev) 35%, var(--moss)) calc(var(--blend) * .6),
    color-mix(in oklab, var(--prev) 10%, var(--moss)) calc(var(--blend) * .8),
    var(--moss) var(--blend));
  padding-block:clamp(60px,6.5vw,96px) 44px;
}
.site-footer::after{ content:""; position:absolute; inset:0; z-index:-1; background:var(--grain); opacity:var(--grain-o); }
.foot-see{ width:min(300px,70vw); height:auto; margin:0 auto clamp(22px,3vw,36px); filter:drop-shadow(0 10px 24px rgba(0,0,0,.45)); }
.foot-when{ margin:0; font-weight:400; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--peach); }
.foot-nav{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px 28px; list-style:none; padding:0; margin:26px 0 28px; }
.foot-nav a{ font-weight:400; font-size:13.5px; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; color:rgba(243,232,212,.85); }
.foot-nav a:hover{ color:var(--cream); }
.foot-badge{ width:64px; height:64px; margin:0 auto 16px; opacity:.95; }
/* the footer's arches begin a little below "See you there" (the footer's top padding,
   the badge and the lettering, then some air), never through it, however tall the footer */
.site-footer .arches{ top:calc(clamp(60px,6.5vw,96px) + 80px + min(300px,70vw) * .525 + 30px); bottom:0; height:auto; max-height:66.58cqw; }
.credits-box--foot{ max-width:720px; margin:0 auto; }   /* the homepage's photo credits, tucked under the footer links */
.credits-box--foot summary{ font-size:11px; color:rgba(243,232,212,.55); }
.credits-box--foot .credits{ font-size:12px; line-height:1.8; color:rgba(243,232,212,.62); }

/* Good to know: orange for the accents here, not gold */
.tips-band{ --accent:#f08a3c; }
.tips-band .label{ color:var(--accent); }
.tips-band .flipcard__front svg{ color:var(--accent); }
.tips-band .flipcard__front i{ color:rgba(240,138,60,.85); }
.tips-band .flipcard:hover .flipcard__front{ box-shadow:inset 0 0 0 1px var(--accent); }
.tips-band .flipcard__back b{ color:#c2561c; }
.tips-band .flipcards{ margin-top:clamp(18px,2.4vw,28px); }

/* city pages: the five sights in one row of small arches (a list on phones),
   day trips nearby, and the other guides as small cards */
.arch-grid--five{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:clamp(12px,1.6vw,22px); margin-top:clamp(22px,3vw,36px); }
.arch-grid--five > *{ max-width:none; }
.arch-grid--five .arch-card__body{ padding:12px 2px 0; }
.arch-grid--five .h3{ font-size:clamp(15px,1.25vw,18px); line-height:1.2; }
.arch-grid--five .arch-card__body p{ font-size:14px; line-height:1.5; }
.arch-grid--five .arch-card__num{ top:10px; width:34px; height:34px; font-size:14px; box-shadow:0 0 0 3px rgba(243,232,212,.85); }
@media (max-width:1000px){ .arch-grid--five{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
/* seven places (Dubrovnik): four to a row, the rest centred under them (three to a row on tablets) */
@media (min-width:641px){
  .arch-grid--seven{ --g:clamp(12px,1.6vw,22px); display:flex; flex-wrap:wrap; justify-content:center; gap:var(--g); }
  .arch-grid--seven > *{ flex:0 0 calc((100% - 3 * var(--g)) / 4); }
}
@media (min-width:641px) and (max-width:1000px){ .arch-grid--seven > *{ flex-basis:calc((100% - 2 * var(--g)) / 3); } }
.ideas--near{ grid-template-columns:repeat(4, minmax(0,1fr)); margin-top:clamp(22px,3vw,34px); }
@media (max-width:1000px){ .ideas--near{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.others{ margin-top:clamp(40px,5vw,64px); }
.others .label{ margin-bottom:8px; }
.others__t{ text-transform:uppercase; letter-spacing:.06em; font-size:clamp(20px,2vw,26px); margin:0; }
.arch-grid--mini{ display:grid; grid-template-columns:repeat(3, minmax(0,210px)); justify-content:center; gap:clamp(14px,2.4vw,32px); margin-top:clamp(18px,2.4vw,26px); }
.arch-grid--mini > *{ max-width:none; }
.arch-grid--mini .arch-card__pic{ aspect-ratio:1 / 1; }
.arch-grid--mini .arch-card__body{ padding-top:10px; }
.arch-grid--mini .h3{ font-size:17px; }
.arch-grid--mini .arch-card__body p{ font-size:14px; }

/* ---------- Motion ----------------------------------------------------------- */

/* Only hidden when the script is running (the .js class is set in <head>).
   Without it, fade-in content would stay invisible for good for anyone
   browsing with JavaScript off. */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--i, 0) * 70ms); }
.js .reveal.is-in{ opacity:1; transform:none; }

/* ---------- Responsive --------------------------------------------------------- */

@media (max-width:980px){
  .site-header .shell{ display:flex; align-items:center; }
  .site-header nav{ flex:0 0 0; }
  .brand--mobile{ display:flex; }
  .brand--mobile img{ width:44px; height:44px; }
  .nav__brand{ display:none; }
  .nav{
    position:absolute; top:var(--header-h); left:0; right:0;
    display:none; flex-direction:column; align-items:stretch; justify-items:stretch; gap:0;
    background:#2d3014; border-bottom:1px solid rgba(243,232,212,.14);
    padding:8px var(--gutter) 20px;
    box-shadow:0 24px 40px -20px rgba(0,0,0,.6);
  }
  .nav.is-open{ display:flex; }
  .nav a:not(.brand){ display:flex; padding:16px 0; font-size:15px; border-bottom:1px solid rgba(243,232,212,.1); }
  .nav a:not(.brand)::before{ opacity:1; transform:none; color:rgba(224,180,92,.5); }
  .nav a[aria-current="page"]::before{ color:var(--gold); }

  .info__grid, .route, .stay, .choose{ grid-template-columns:1fr; }
  /* stacked: Random outfit first, then the two looks, then the tips */
  .wardrobe{ grid-template-columns:1fr 1fr; grid-template-areas:"rand rand" "her him" "mid mid"; align-items:start; }
  .wardrobe__mid{ display:contents; }
  .wardrobe__random{ grid-area:rand; justify-self:center; }
  .wardrobe .wplay{ grid-area:mid; }
  .info__grid--flip > :first-child{ order:0; }
  .route .map-card{ position:relative; top:auto; max-width:560px; margin-inline:auto; width:100%; }
  .party__grid{ flex-wrap:wrap; gap:14px; }
  .party-line{ order:-1; flex:0 0 100%; width:100%; min-width:0; max-width:640px; margin:0 auto 6px; }   /* min-width:0, or the picture keeps its full 640px and runs off a phone */
  .party__grid .polaroid{ flex-basis:clamp(130px, 38vw, 210px); margin:0; }
  .sd__grid{ grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); max-height:min(92vh, 900px); max-height:min(92dvh, 900px); }
  .sd__photos, .sd__track img{ min-height:0; }
  .sd__photos{ aspect-ratio:1; }     /* square: tall phone photos and wide ones both show well */
  .sd__text{ min-height:0; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .flipcards{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* the journey runs down the left on narrower screens */
@media (max-width:860px){
  .journey{ --dot:52px; gap:30px; }
  .journey::before, .journey::after{ left:calc(var(--dot) / 2); }
  .stage{ grid-template-columns:calc(var(--dot) + 18px) 1fr; align-items:start; }
  .stage__dot{ grid-column:1; justify-self:start; }
  .stage--left .stage__card, .stage--right .stage__card{ grid-column:2; grid-template-columns:1fr; gap:14px; }
  .js .stage--left .stage__card.reveal, .js .stage--right .stage__card.reveal{ transform:translateX(30px); }
  .stage__detail{ grid-column:2; }
  /* the year strips hang off the line on the left, their photos in a row you can swipe */
  .yr{ grid-template-columns:calc(var(--dot) + 18px) minmax(0,1fr); justify-items:start; align-items:center; gap:8px 0; }
  .yr__dot{ grid-column:1; grid-row:1; justify-self:center; }
  .yr__when{ grid-column:2; grid-row:1; }
  .yr__pics{ grid-column:2; flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
    max-width:100%; padding:8px 10px 14px; margin-inline:-10px; scroll-snap-type:x proximity; }
  .yr__pics::-webkit-scrollbar{ display:none; }
  .yr__pics li{ scroll-snap-align:start; margin-inline:0 -4px; }
  .yr__pics img{ height:128px; }
}

@media (max-width:640px){
  body{ font-size:17px; }
  .hero .arches{ height:min(var(--ah), 53cqw); }
  /* the ribbon comes up over the lower arches (and the red with it); the names and arches stay put */
  .ribbon-wrap{ margin-top:-118px; }
  .leaf--desk{ display:none; }      /* a leaf that would only show cut off at the screen's edge, over a card */     /* on a phone the row is as wide as the screen: shorter, and it stays below the names */
  .brand span{ font-size:13.5px; }
  .brand small{ display:none; }
  .hero__sticker{ top:14px; right:10px; }
  .opt__body{ padding-left:18px; }
  .opt__head{ grid-template-columns:auto 1fr; }
  .opt__tag{ grid-column:2; justify-self:start; }
  .ticket{ --stub:88px; }   /* the stub and its notches move together */
  .ticket__when{ font-size:11px; letter-spacing:.1em; }
  .ticket__dow{ font-size:10.5px; letter-spacing:.08em; }
  .sflip__body--split{ grid-template-columns:1fr; gap:14px; }
  .sflip__pics{ min-height:190px; }
  .sflip__in{ min-height:0; }
  .sflip__areas{ flex:none; flex-direction:column; gap:12px; min-height:0; }
  .sflip__map--big{ flex:none; height:clamp(320px, 110vw, 440px); }
  /* on a phone the three postcards stand in a column down the right of the map, above the Old Town's label */
  .areapics{ right:6px; width:27%; }
  .areapic--3{ top:1.5%; }
  .areapic--2{ top:25%; }
  .areapic--1{ top:48.5%; }
  .sareas li{ grid-template-columns:112px minmax(0,1fr); gap:12px; }
  .sareas .pick{ margin-left:2px; }
  .sphotos{ gap:6px; }
  .pcard__line{ max-width:52%; }
  .flipcards{ grid-template-columns:1fr 1fr; gap:10px; }
  .flipcard__back span{ font-size:14px; }
  /* the Saturday panel is only as tall as its longest stop needs */
  .dayp{ min-height:0; grid-template-rows:auto auto; }
  .dayp__panes{ align-items:start; padding:22px 20px 4px; }
  .dayp__icon{ width:52px; margin-bottom:10px; }
  .dayp__title{ font-size:24px; margin-bottom:8px; }
  .dayp__text{ font-size:15.5px; line-height:1.55; }
  /* the step buttons two by two, not in a long column */
  .stepnav{ display:grid; grid-template-columns:1fr 1fr; gap:8px; max-width:420px; }
  .stepnav li{ display:flex; }
  .stepnav li:last-child:nth-child(odd){ grid-column:1 / -1; justify-self:center; }
  .stepnav a{ width:100%; justify-content:flex-start; gap:8px; padding:7px 12px 7px 7px; font-size:11.5px; letter-spacing:.08em; }
  .stepnav b{ flex:none; width:26px; height:26px; font-size:12px; }
  /* the Weekend's three "On this page" links in one row */
  .wk-jump .stepnav{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; max-width:none; }
  .wk-jump .stepnav li:last-child:nth-child(odd){ grid-column:auto; justify-self:stretch; }
  .wk-jump .stepnav a{ gap:6px; padding:5px 8px 5px 5px; font-size:10px; letter-spacing:.04em; line-height:1.15; text-align:left; }
  .wk-jump .stepnav b{ width:22px; height:22px; font-size:10.5px; }
  .sn-long{ display:none; }
  .sn-short{ display:inline; }
  .dayp__orb{ width:54px; --ox:84% !important; --oy:12% !important; }
  .dayp__tabs{ gap:4px; padding:8px; }
  .dayp__tab{ padding:12px 6px 16px; text-align:center; }
  .dayp__tab b{ display:none; }              /* the time is in the panel above */
  .dayp__tab span{ font-size:13px; }
  .dayp__bar{ left:8px; right:8px; }
  /* the two fabric tips side by side, their swatches two by two; the colours under them */
  .wplay{ align-self:stretch; gap:20px; }
  .wplay__row .wp{ padding-inline:10px; }
  .wplay__row .wp:first-child{ padding-left:0; }
  .wplay__row .wp:last-child{ padding-right:0; }
  .wp__t{ font-size:14px; }
  .wp__d{ font-size:13.5px; margin-bottom:14px; }
  .wplay__row .wp__row{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px 10px; }
  .wp--colour .wp__dots{ grid-template-columns:repeat(4, minmax(0,1fr)); row-gap:28px; padding-top:24px; }
  .wp__dot i{ max-width:50px; transform-origin:50% -22px; }
  .wp__dot i::before{ height:22px; }
  .step-head{ align-items:flex-end; }
  .polaroid{ padding:7px 7px 24px; }
  .wardrobe{ gap:14px 10px; }
  .look__stage{ width:100%; }
  .look__nav{ gap:6px; margin-top:10px; }
  .look__arrow{ width:34px; height:34px; }
  .look__dots{ gap:5px; }
  .look__dots i{ width:5px; height:5px; }
  .flipclock{ gap:8px; }
  .flip-unit{ gap:10px; }
  .flip-unit > span{ font-size:10.5px; letter-spacing:.16em; }
  /* the three "where next" cards become a row you swipe through, the
     next one peeking in from the edge so it is obvious there is more */
  .arch-grid--list{ display:flex; flex-wrap:nowrap; justify-content:flex-start; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1); padding:8px var(--gutter) 20px; scroll-padding-inline:var(--gutter); scrollbar-width:none; }
  .arch-grid--list::-webkit-scrollbar{ display:none; }
  .arch-grid--list > .arch-card{ flex:0 0 76%; max-width:none; scroll-snap-align:start; }
  .look__name{ font-size:16px; }
  .look__tip{ font-size:13.5px; }
}

@media (max-width:640px){
  /* the five sights as a list: a small arch beside each */
  .arch-grid--five{ grid-template-columns:1fr; gap:14px; }
  .arch-grid--five > .arch-card{ display:grid; grid-template-columns:clamp(96px, 28vw, 120px) minmax(0,1fr); gap:14px; align-items:start; }
  .arch-grid--five .arch-card__body{ padding:2px 0 0; }
  .arch-grid--five .h3{ font-size:17px; }
  .arch-grid--five .arch-card__num{ top:6px; }
  .ideas--near{ grid-template-columns:1fr; }
  .arch-grid--mini{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
  .arch-grid--mini .h3{ font-size:13.5px; gap:4px; }
  .arch-grid--mini .arch-card__body p{ display:none; }
}

@media (max-width:380px){
  .look__tip{ display:none; }
}