/* the four typefaces, self-hosted (Google Fonts, SIL Open Font License); latin + latin-ext only */
/* Caveat 500, latin-ext */
@font-face{ font-family:'Caveat'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/caveat-500-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Caveat 500, latin */
@font-face{ font-family:'Caveat'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/caveat-500-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Caveat 700, latin-ext */
@font-face{ font-family:'Caveat'; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/caveat-500-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Caveat 700, latin */
@font-face{ font-family:'Caveat'; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/caveat-500-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* DM Mono 400, latin-ext */
@font-face{ font-family:'DM Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/dm-mono-400-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* DM Mono 400, latin */
@font-face{ font-family:'DM Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/dm-mono-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* DM Mono 500, latin-ext */
@font-face{ font-family:'DM Mono'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/dm-mono-500-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* DM Mono 500, latin */
@font-face{ font-family:'DM Mono'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/dm-mono-500-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* DM Serif Display 400 italic, latin-ext */
@font-face{ font-family:'DM Serif Display'; font-style:italic; font-weight:400; font-display:swap; src:url(../fonts/dm-serif-display-400-italic-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* DM Serif Display 400 italic, latin */
@font-face{ font-family:'DM Serif Display'; font-style:italic; font-weight:400; font-display:swap; src:url(../fonts/dm-serif-display-400-italic-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* DM Serif Display 400, latin-ext */
@font-face{ font-family:'DM Serif Display'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/dm-serif-display-400-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* DM Serif Display 400, latin */
@font-face{ font-family:'DM Serif Display'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/dm-serif-display-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Karla 400 italic, latin-ext */
@font-face{ font-family:'Karla'; font-style:italic; font-weight:400; font-display:swap; src:url(../fonts/karla-400-italic-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Karla 400 italic, latin */
@font-face{ font-family:'Karla'; font-style:italic; font-weight:400; font-display:swap; src:url(../fonts/karla-400-italic-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Karla 400, latin-ext */
@font-face{ font-family:'Karla'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/karla-400-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Karla 400, latin */
@font-face{ font-family:'Karla'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/karla-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Karla 500, latin-ext */
@font-face{ font-family:'Karla'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/karla-400-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Karla 500, latin */
@font-face{ font-family:'Karla'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/karla-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Karla 700, latin-ext */
@font-face{ font-family:'Karla'; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/karla-400-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Karla 700, latin */
@font-face{ font-family:'Karla'; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/karla-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* KOKPIT kafeterija — preview (Opcija B „Love is in the air")
   Palette sampled from the real place: white brick, the greige awning, its red script,
   the oleanders, the barrels. One continuous paper background for the whole page. */

:root{
  --brick:#F3EDE3; --tenda:#D8CEBF; --tenda2:#E6DCCD;
  --pink:#E0708F; --red:#B8262E; --red-d:#8F1C23;
  --leaf:#4F6B3A; --barrel:#7A5236; --ink:#2B2422; --teal:#2E93BA;
  --f-head:'DM Serif Display',Georgia,serif;
  --f-body:'Karla',system-ui,sans-serif;
  --f-mono:'DM Mono',ui-monospace,monospace;
  --pad:clamp(16px,2vw,40px);
  --padR:var(--pad);
  /* canvas weave — the awning's fabric, used inside the display type */
  --weave: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='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .96  0 0 0 0 .92  0 0 0 -2.6 1.25'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
          repeating-linear-gradient(0deg,rgba(255,240,230,.10) 0 1px,transparent 1px 3px),
          repeating-linear-gradient(90deg,rgba(60,0,0,.10) 0 1px,transparent 1px 3px);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .2  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media (min-width:1100px){ :root{ --padR:max(var(--pad),176px); } }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--ink); font:400 17px/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased; overflow-x:clip;
  background:var(--grain),
    linear-gradient(180deg,var(--brick) 0,var(--brick) 900px,var(--tenda2) 2100px,var(--brick) 3200px,var(--tenda2) 4600px);
  background-color:var(--brick);
}
a{ color:inherit; }
img,svg{ display:block; }
h1,h2,h3,p,ul,ol,figure,blockquote{ margin:0; padding:0; }
ul,ol{ list-style:none; }

.display{ font-family:var(--f-head); font-weight:400; letter-spacing:-.012em; }
.mono-label{ font:500 11px/1.3 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--red); }
/* the client's emoji, drawn with the site's own symbols: sized to the text, decorative */
.gl{ display:inline-block; width:1em; height:1em; vertical-align:-.12em; margin-left:.28em; fill:var(--red); color:var(--red); }
.gl-pink{ fill:var(--pink); color:var(--pink); }
.gls{ white-space:nowrap; }

/* ───── top bar ───── */
.top{
  position:fixed; inset:0 0 auto 0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--padR) 14px var(--pad); transition:background .3s, box-shadow .3s;
}
.top.solid{ background:rgba(243,237,227,.92); backdrop-filter:blur(6px); box-shadow:0 1px 0 rgba(43,36,34,.1); }
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand-k{ color:var(--red); fill:var(--red); }
.top-nav{ display:flex; gap:clamp(14px,2.4vw,34px); font:500 12px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; }
.top-nav a{ text-decoration:none; padding:6px 0; border-bottom:1.5px solid transparent; }
.top-nav a:hover{ border-color:var(--red); }
.top-tel{ color:var(--red); }

/* ───── persistent companion: the route + plane ───── */
.route{ position:fixed; z-index:30; right:clamp(26px,2.6vw,52px); top:18vh; bottom:16vh; width:60px; display:none; }
@media (min-width:1100px){ .route{ display:block; } }
.route-line{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.route-line line{ stroke-linecap:round; }
.r-todo{ stroke:rgba(43,36,34,.28); stroke-width:2; stroke-dasharray:1 9; }
.r-done{ stroke:var(--red); stroke-width:2; stroke-dasharray:8 7; }
.route-stop{ position:absolute; left:50%; transform:translate(-50%,-50%); width:14px; height:14px; text-decoration:none; }
.route-stop i{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--ink); background:var(--brick); transition:background .3s,border-color .3s; }
.route-stop.on i{ background:var(--red); border-color:var(--red); }
.route-stop span{ position:absolute; right:22px; top:50%; transform:translateY(-50%); white-space:nowrap;
  font:500 10px/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; opacity:.55; transition:opacity .3s; }
.route-stop.on span, .route-stop:hover span{ opacity:1; color:var(--red); }
.route-plane{ position:absolute; left:50%; top:0; fill:var(--red); transform:translate(-50%,-50%) rotate(90deg); transition:top .25s linear; }
.route-count{ position:absolute; left:50%; bottom:-38px; transform:translateX(-50%); font:500 11px/1 var(--f-mono); letter-spacing:.12em; white-space:nowrap; }
.route-count span{ color:var(--red); }

/* phones/tablets: the plane taxis along the bottom edge */
.runway{ position:fixed; left:0; right:0; bottom:0; height:3px; z-index:30; background:repeating-linear-gradient(90deg,rgba(43,36,34,.25) 0 2px,transparent 2px 10px); }
.runway-done{ position:absolute; left:0; top:0; bottom:0; width:0; background:var(--red); }
.runway-plane{ position:absolute; bottom:1px; left:0; fill:var(--red); transform:translateX(-50%); }
@media (min-width:1100px){ .runway{ display:none; } }

/* ───── reveals (gated behind .js; geometry sweep in app.js) ───── */
.js .reveal{ opacity:0; transform:translateY(14px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in{ opacity:1; transform:none; }
.js .wipe{ --clipy:-48%; --clipx:-6%; clip-path:inset(var(--clipy) 100% var(--clipy) var(--clipx)); transition:clip-path 1.1s cubic-bezier(.7,0,.2,1); }
.js .wipe.in{ clip-path:inset(var(--clipy) var(--clipx) var(--clipy) var(--clipx)); }
.js .sec-title span:nth-child(2){ transition-delay:.15s; }

/* ═══════════ HERO ═══════════ */
/* the hero fills the first screen (the ticker starts below the fold) and its content sits as one block in the middle */
/* the hero is exactly one screen: address + headline on top, the line and the ticket in the bottom corners,
   and the headline sized from the viewport HEIGHT as well as width so it fills what's between them */
.hero{ position:relative; min-height:100vh; min-height:100svh; padding:clamp(92px,10vh,118px) var(--padR) clamp(26px,4vh,46px) var(--pad); display:flex; flex-direction:column; }
.loc{ font:500 12px/1.3 var(--f-mono); letter-spacing:.22em; text-transform:uppercase; color:var(--red); }
.loc span{ white-space:nowrap; } .loc i{ font-style:normal; }
.hero-head{ position:relative; margin-top:clamp(-46px,-2.6vw,-10px); }
.hero-title{
  /* widest line „in the air…" is ~4.8em: fit it inside the content box (minus room for the heart's tail),
     and fit two lines into the screen height left over by the nav, address and the bottom row */
  font-size:clamp(64px, min(calc((100vw - var(--pad) - var(--padR) - 100px) / 4.8), calc((100svh - 330px) / 2.05)), 480px); line-height:1.0; color:var(--red); padding-top:.06em;
  position:relative; z-index:2;
}
.hero-title > span{ display:block; }
.hero-title .l2{ padding-left:clamp(0px,2vw,40px); white-space:nowrap; }
/* texture inside the type: the awning's canvas weave over the red ink */
.hero-title .l1, .hero-title .l2t, .hero-title .dots, .sec-title span{
  background:var(--weave), linear-gradient(var(--red),var(--red));
  background-size:220px 220px,auto,auto,auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding:.12em .14em .26em 0; margin:-.12em -.14em -.26em 0;
}
.hero-title .dots{ display:inline-block; }
.hero-title .l1{ margin-right:0; padding-right:0; }   /* a block: its right-side bleed would poke past a slim gutter */
.hero-title .mb{ display:none; }

/* skywriting: a dashed heart drawn out of the „…" by a small plane */
.sky{ position:absolute; z-index:1; overflow:visible; pointer-events:none; width:var(--skyw,460px); height:auto; left:0; top:0; }
.sky path{ fill:none; stroke:var(--pink); stroke-width:3.2; stroke-linecap:round; stroke-dasharray:var(--dash,0 0); }
.sky-plane{ position:absolute; z-index:3; left:0; top:0; width:var(--ps,44px); height:var(--ps,44px); fill:var(--red); pointer-events:none; opacity:0; transition:opacity .4s; }
.sky-plane.on{ opacity:1; }

.hero-foot{ margin-top:auto; padding-top:clamp(24px,2.6vw,48px); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,110px); align-items:start; }
.hero-copy{ max-width:600px; padding-top:clamp(6px,.9vw,16px); }  /* level with the ticket's red header, not its rotated corner */
.lead{ font-family:var(--f-head); font-size:clamp(19px,1.35vw,24px); line-height:1.35; max-width:44ch; color:rgba(43,36,34,.62); }
/* the crew's sign-off under the line */
.crew{ margin-top:10px; font:500 11px/1.3 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--red); }
.crew .gl{ width:1.35em; height:1.35em; vertical-align:-.36em; margin-left:.5em; }
.crew .gl + .gl{ margin-left:.3em; }
.ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.btn{ font:500 12px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  padding:17px 26px; background:var(--ink); color:var(--brick); transition:background .25s; }
.btn:hover{ background:var(--red); }
.btn.ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:var(--brick); }

.ticket{ justify-self:end; width:min(100%,440px); position:relative; transform:rotate(1.2deg);
  filter:drop-shadow(0 18px 22px rgba(43,36,34,.16)) drop-shadow(0 1px 0 rgba(43,36,34,.12)); --notch:60px; }
.tk-paper{ background:#FBF8F2;
  -webkit-mask:radial-gradient(circle 13px at 0 var(--notch),#0000 98%,#000) left/51% 100% no-repeat, radial-gradient(circle 13px at 100% var(--notch),#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 13px at 0 var(--notch),#0000 98%,#000) left/51% 100% no-repeat, radial-gradient(circle 13px at 100% var(--notch),#0000 98%,#000) right/51% 100% no-repeat; }
.js .ticket.reveal{ transform:translateY(14px) rotate(1.2deg); }
.js .ticket.reveal.in{ transform:rotate(1.2deg); }
.tk-top{ height:60px; display:flex; align-items:center; gap:14px; padding:0 24px; background:var(--red); color:var(--brick); }
.tk-k{ fill:var(--brick); color:var(--brick); flex:none; }
.tk-h{ flex:1; font:400 25px/1.1 var(--f-head); padding-top:.06em; }
/* one departure row: every day, same hours */
.tk-body{ padding:12px 24px 16px; border-top:2px dashed rgba(43,36,34,.25); }
.dep-row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:12px 0 8px; }
.dep-row span{ font:500 11px/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; }
.dep-row b{ font:400 clamp(30px,2.5vw,44px)/1.1 var(--f-head); letter-spacing:-.01em; white-space:nowrap; color:var(--red); }

/* ═══════════ TICKER (airmail edges) ═══════════ */
.ticker{ position:relative; overflow:hidden; background:var(--ink); color:var(--brick); padding:22px 0; }
.ticker::before, .ticker::after{ content:""; position:absolute; left:0; right:0; height:9px;
  background:repeating-linear-gradient(-45deg,var(--red) 0 14px,var(--brick) 14px 24px,var(--pink) 24px 38px,var(--brick) 38px 48px); }
.ticker::before{ top:0; } .ticker::after{ bottom:0; }
.ticker-track{ display:flex; align-items:center; gap:34px; width:max-content; animation:tick 46s linear infinite; padding-top:6px; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker span{ font:400 clamp(30px,3.4vw,54px)/1.15 var(--f-head); white-space:nowrap; padding-top:.06em; }
.ticker span.o{ font-style:italic; color:var(--pink); }
.ticker svg{ fill:var(--brick); color:var(--brick); flex:none; opacity:.8; }
@keyframes tick{ to{ transform:translateX(-50%); } }

/* ═══════════ O NAMA ═══════════ */
/* a zigzag: story · wide photo, then wide photo · story */
.about{ padding:clamp(40px,3.4vw,64px) var(--padR) clamp(30px,4vw,70px) var(--pad); }
.about-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(24px,3vw,56px); row-gap:clamp(48px,5vw,96px); margin-top:clamp(20px,2.2vw,42px); align-items:center; }
/* desktop: row 1 = the story beside the pilot (lifted to the title line, as tall as title + story); row 2 = the farmer beside the thank-you */
.about-a{ grid-column:1 / span 5; grid-row:1; align-self:start; padding-top:clamp(10px,2vw,40px); }
.snap-1{ grid-column:8 / span 4; grid-row:1; align-self:stretch; }
.snap.snap-1{ margin-top:calc(-1.12 * clamp(52px,7.4vw,140px) - clamp(20px,2.2vw,42px)); }
.snap-2{ grid-column:1 / span 6; grid-row:2; align-self:start; }
.about-b{ grid-column:7 / span 6; grid-row:2; align-self:start; }
@media (min-width:1100px){
  /* the pilot fills its cell: top at the title, bottom at the end of the story; the painting is cropped to fit */
  .snap.snap-1{ display:flex; }
  .snap-1 .snap-in{ flex:1; display:flex; }
  .snap-1 .photo-img{ flex:1; aspect-ratio:auto; }
  /* the thank-you runs the farmer's full height; the P.S. drops to the photo's bottom edge, tilted like a note */
  .about-b{ align-self:stretch; display:flex; flex-direction:column; padding-top:clamp(24px,3vw,56px); }
  .about-b .about-h{ font-size:clamp(40px,3.3vw,64px); }
  .about-b .about-txt{ margin-bottom:clamp(24px,2.4vw,44px); font-size:clamp(20px,1.6vw,30px); }
  .about-b .about-ps{ margin-top:auto; margin-bottom:clamp(50px,5.4vw,100px); font-size:clamp(22px,1.95vw,38px); transform:rotate(-2.6deg); transform-origin:left bottom; }
}
/* dotted flights pass behind the photos */
.snap{ position:relative; z-index:1; }
.flight{ position:relative; z-index:0; width:100%; height:auto; overflow:visible; pointer-events:none; }
.flight path{ fill:none; stroke:var(--pink); stroke-width:2.6; stroke-dasharray:2 10; stroke-linecap:round; }
.flight use{ fill:var(--red); }
.flight-p{ grid-column:5 / span 8; grid-row:1; align-self:start; margin-top:calc(-1.12 * clamp(52px,7.4vw,140px) - clamp(20px,2.2vw,42px)); margin-bottom:-50%; }
.flight-1, .flight-2{ display:none; }
.about-h{ font-size:clamp(34px,2.8vw,56px); line-height:1.08; color:var(--red); padding-top:.06em; margin-bottom:.35em; }
.about-say{ font:400 clamp(24px,2vw,38px)/1.3 var(--f-head); }
.about-txt{ font:400 clamp(19px,1.42vw,27px)/1.52 var(--f-head); color:rgba(43,36,34,.82); }
.about-emoji{ font-size:.8em; vertical-align:.04em; }
.about-txt.lead-in, .about-b .about-txt.lead-in{ margin-bottom:.8em; }
/* the P.S.: a handwritten note under the thank-you, slightly askew */
.about-ps{ margin-top:.9em; font:500 clamp(26px,2vw,38px)/1.18 'Caveat','Segoe Print',cursive; color:var(--red); transform:rotate(-1.6deg); transform-origin:left center; }
.about-ps b{ font-weight:700; margin-right:.15em; }
.about-ps .gl{ width:.8em; height:.8em; vertical-align:-.06em; }
/* a hand-drawn double stroke under „moguće je uvek“ */
.ps-mark{ padding-bottom:.16em; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M3%2010.5C30%207%2052%2012%2080%208.5S130%205.5%20160%208.8%20188%207.5%20197%206.2%22%20fill%3D%22none%22%20stroke%3D%22%23B8262E%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14%2013.2C48%2010.6%2096%2011.8%20150%2010.4%22%20fill%3D%22none%22%20stroke%3D%22%23B8262E%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.75%22%2F%3E%3C%2Fsvg%3E") left bottom/100% .42em no-repeat; }
.ps-heart{ font-size:.78em; vertical-align:.06em; }
/* the photos: postcards in the airmail stripe, grey „?" until the real photo is in */
.snap{ --r:.8deg; margin:0; padding:10px; transform:rotate(var(--r)); box-shadow:0 18px 36px -22px rgba(43,36,34,.5);
  background:repeating-linear-gradient(-45deg,var(--red) 0 14px,var(--brick) 14px 24px,var(--pink) 24px 38px,var(--brick) 38px 48px); }
.snap-2{ --r:-.8deg; }
.js .snap.reveal{ transform:translateY(14px) rotate(var(--r)); }
.js .snap.reveal.in{ transform:rotate(var(--r)); }
.snap-in{ background:#FBF8F2; padding:12px; }
.snap-1 .photo-img{ aspect-ratio:1100/971; }
.snap-2 .photo-img{ aspect-ratio:1024/690; }
.snap .photo-img img{ object-fit:cover; }
.snap .photo-img span{ font-size:clamp(90px,8vw,160px); }

/* ═══════════ MENU ═══════════ */
.menu{ padding:clamp(80px,10vw,160px) var(--padR) clamp(30px,4vw,70px) var(--pad); }
.menu-head{ grid-column:1 / span 8; grid-row:1; }
.sec-title{ font-size:clamp(52px,7.4vw,140px); line-height:1.04; color:var(--red); padding-top:.08em; }
.sec-title span{ display:block; }
.sec-title span:nth-child(2){ padding-left:.9em; font-style:italic; }

.menu-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(24px,3vw,56px); row-gap:clamp(40px,5vw,80px); }
.mcol{ display:flex; flex-direction:column; gap:clamp(48px,5vw,90px); min-width:0; }
.mcol-l{ grid-column:1 / span 7; grid-row:2; }
.mcol-r{ grid-column:9 / span 4; grid-row:2; }
/* the real red cup with the white winged K; its steam rises as a dotted trail */
.cup{ grid-column:9 / span 4; grid-row:1; align-self:end; margin:0; }
.cup svg{ width:100%; height:auto; max-width:420px; overflow:visible; }
/* v2: the real cup photo replaces the drawing everywhere; cropped to the cup, edges feathered into the page; the section clips the feather */
.menu{ overflow-x:clip; }
.cup .cup-art{ display:none; }
.cup-photo{ display:block; width:120%; max-width:none; height:auto; margin:-11.7% 0 -16.2% -.3%;
  -webkit-mask:radial-gradient(ellipse 42% 50% at 42% 47%,#000 74%,#0000 100%); mask:radial-gradient(ellipse 42% 50% at 42% 47%,#000 74%,#0000 100%); }
.cup .saucer{ fill:var(--tenda); } .cup .saucer-top{ fill:none; stroke:rgba(43,36,34,.18); stroke-width:2; }
.cup .cup-body{ fill:var(--red); } .cup .cup-rim{ fill:var(--red-d); } .cup .coffee{ fill:#C99A62; }
.cup .cup-handle{ stroke:var(--red); stroke-width:16; stroke-linecap:round; }
.cup .cup-k{ fill:#fff; color:#fff; }
.cup .steam path{ stroke:var(--pink); stroke-width:3.4; stroke-dasharray:2 11; }
.js .cup .steam{ clip-path:inset(100% 0 0 0); transition:clip-path 2.4s cubic-bezier(.4,0,.2,1) .4s; }
.js .cup.in .steam{ clip-path:inset(-10% 0 0 0); }
.cup figcaption{ margin-top:12px; font:500 11px/1.5 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; opacity:.65; }

.fleet-list{ margin-top:18px; counter-reset:f; }
.fleet-list li{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:24px; padding:20px 0 18px; border-top:1px solid rgba(43,36,34,.2); }
.fleet-list li:last-child{ border-bottom:1px solid rgba(43,36,34,.2); }
.fleet-list h3{ grid-column:1; grid-row:1; position:relative; font:400 clamp(36px,3.6vw,64px)/1.1 var(--f-head); letter-spacing:-.01em; padding-top:.06em; width:fit-content; }
.fleet-list h3 em{ font-style:italic; color:var(--red); }
.fleet-list p{ grid-column:1; grid-row:2; margin-top:6px; opacity:.75; font-size:16px; }
.fleet-list .price{ grid-column:2; grid-row:1 / span 2; align-self:center; font:400 clamp(34px,3vw,54px)/1 var(--f-head); color:var(--red); padding-top:.06em; }
.cocktails li{ display:block; padding:0; }
.cocktail{ all:unset; box-sizing:border-box; width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; column-gap:24px; padding:14px 0 12px; cursor:pointer; }
.cocktail h3{ font-size:clamp(34px,3.2vw,58px); transition:color .25s; }
.cocktail .price{ grid-row:1; font-size:clamp(30px,2.6vw,48px); }
.cocktail h3::after{ content:"?"; display:inline-block; margin-left:.4em; width:1.3em; height:1.3em; border-radius:50%; font:500 .26em/1.3em var(--f-mono); text-align:center; vertical-align:.9em;
  color:var(--red); box-shadow:inset 0 0 0 1.5px var(--red); opacity:.5; transition:opacity .25s, background .25s, color .25s; }
.cocktail h3 em{ color:inherit; }
.cocktail:hover h3, .cocktail:focus-visible h3{ color:var(--red); }
/* „Dodirnite za fotografiju": pops up over the first cocktail, its arrow on the „?" chip, and goes once a photo is opened */
.tap-hint{ position:absolute; left:calc(100% - .17em); bottom:calc(100% - .12em); width:0; height:0; pointer-events:none; }
.tap-hint span{ position:absolute; left:-16px; bottom:8px; white-space:nowrap; padding:8px 11px 7px; background:var(--red); color:#fff;
  font:500 10.5px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; box-shadow:0 10px 18px -10px rgba(43,36,34,.6);
  opacity:0; transform:translateY(8px) scale(.9); transform-origin:16px 100%; }
.tap-hint span::after{ content:""; position:absolute; left:10px; top:100%; border:6px solid transparent; border-top-color:var(--red); border-bottom:0; }
.fleet.in .tap-hint span{ animation:hint-in .5s cubic-bezier(.3,1.5,.5,1) 1.1s forwards, hint-bob 2.6s ease-in-out 1.9s infinite; }
.fleet.tapped .tap-hint span{ animation:none; opacity:0; transition:opacity .3s; }
html:not(.js) .tap-hint span{ opacity:1; transform:none; }
@keyframes hint-in{ to{ opacity:1; transform:none; } }
@keyframes hint-bob{ 0%,100%{ transform:none; } 50%{ transform:translateY(-4px); } }
.cocktail:hover h3::after, .cocktail:focus-visible h3::after{ opacity:1; background:var(--red); color:#fff; }
.cocktail:focus-visible{ outline:2px dashed var(--red); outline-offset:4px; }

.plist li{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:7px 0; border-bottom:1px dotted rgba(43,36,34,.3); font-size:16px; }
.plist li b{ font:500 16px/1 var(--f-body); font-variant-numeric:tabular-nums; white-space:nowrap; }
.plist li small{ display:block; font-size:13px; opacity:.65; }
.plist li i{ font-style:normal; font-size:13px; opacity:.6; margin-left:.45em; white-space:nowrap; }
.plist .plist-h{ border:0; padding:22px 0 6px; font:400 clamp(26px,2vw,34px)/1.15 var(--f-head); color:var(--red); }
.plist .plist-h:first-child{ padding-top:10px; }
.coffee-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.coffee .coffee-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
@media (min-width:1500px){ .mcol-l{ grid-column:1 / span 7; } .mcol-r{ grid-column:8 / span 5; } .cup{ grid-column:8 / span 5; }
  .coffee .coffee-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; } }
.food-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.4vw,40px); }
.wide{ grid-column:1 / -1; }
.wide-cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,2.4vw,44px); align-items:start; }
.plist .plist-h small{ display:inline; margin-left:.6em; font:500 10.5px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink); opacity:.55; }
.plist .plist-s{ border:0; padding:16px 0 2px; font:500 10.5px/1.3 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--red); }
@media (min-width:1100px) and (max-width:1499px){ .mcol-l{ grid-column:1 / span 7; } .mcol-r{ grid-column:8 / span 5; } }

/* the single frame: an airmail envelope */
.envelope{ padding:12px; background:repeating-linear-gradient(-45deg,var(--red) 0 16px,#fff 16px 26px,var(--teal) 26px 42px,#fff 42px 52px); box-shadow:0 18px 40px -24px rgba(43,36,34,.45); transform:rotate(-1.2deg); }
.js .envelope.reveal{ transform:translateY(14px) rotate(-1.2deg); }
.js .envelope.reveal.in{ transform:rotate(-1.2deg); }
.env-in{ --stamp:clamp(112px,9.5vw,136px); --pad:clamp(26px,2.6vw,44px); position:relative; background:#FBF8F2; padding:var(--pad); }
/* the stamp: the owner's Santa-pilot window painting, perforated, stuck over the corner */
/* the stamp: the owner's Santa-pilot window painting, perforated, stuck over the corner */
.env-stamp{ position:absolute; z-index:1; right:-16px; top:-24px; width:var(--stamp); transform:rotate(5deg); filter:drop-shadow(0 8px 10px rgba(43,36,34,.3)); }
.stamp-paper{ display:block; aspect-ratio:3/4; padding:7px; background:#fff;
  -webkit-mask:radial-gradient(circle 3.4px,#0000 96%,#000) -4.5px -4.5px/9px 9px round, linear-gradient(#000 0 0) center/calc(100% - 9px) calc(100% - 9px) no-repeat;
  mask:radial-gradient(circle 3.4px,#0000 96%,#000) -4.5px -4.5px/9px 9px round, linear-gradient(#000 0 0) center/calc(100% - 9px) calc(100% - 9px) no-repeat; }
.stamp-paper img{ display:block; width:100%; height:100%; object-fit:cover; }
.env-stamp svg{ fill:var(--red); }
.env-title{ font-size:clamp(40px,3.4vw,58px); line-height:1.08; color:var(--red); margin:0 0 14px; padding-top:.06em; padding-right:clamp(104px,9vw,128px);
  min-height:calc(var(--stamp) * 4 / 3 - 24px - var(--pad) - 6px); }  /* the list always starts below the stamp, even when the title fits one line */
.env-foot{ margin-top:22px; font-size:16px; padding-left:14px; border-left:3px solid var(--pink); }

/* ═══════════ REVIEWS ═══════════ */
.reviews{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr); gap:clamp(36px,5vw,110px); padding:clamp(60px,7vw,120px) var(--padR) clamp(90px,10vw,170px) var(--pad); }
.rev-side{ position:relative; container-type:inline-size; }
.reviews .sec-title{ font-size:clamp(48px,22cqi,140px); white-space:nowrap; }
.reviews .sec-title span{ margin-right:0; }   /* one long line: keep its bleed inside the column */
.postmark{ --pm:clamp(240px,22vw,380px); position:relative; width:var(--pm); aspect-ratio:1; margin-top:clamp(40px,5vw,80px); color:var(--red); }
.pm-ring{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.pm-ring text{ font:500 14px var(--f-mono); letter-spacing:.14em; fill:currentColor; }
.pm-num{ position:absolute; inset:0; display:grid; place-items:center; font:400 calc(var(--pm) * .27)/1 var(--f-head); letter-spacing:.01em; padding-top:.04em;
  -webkit-text-stroke:.018em currentColor; paint-order:stroke fill; }  /* DM Serif's 7 has a hairline diagonal: thicken it */
.pm-sub{ position:absolute; left:0; right:0; bottom:30%; text-align:center; font:500 10px/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; font-style:normal; }
.js .postmark{ opacity:0; transform:scale(1.35) rotate(-14deg); transition:opacity .25s ease, transform .5s cubic-bezier(.3,1.6,.5,1); }
.js .postmark.in{ opacity:1; transform:rotate(-8deg); }
html:not(.js) .postmark{ transform:rotate(-8deg); }

.cards{ column-count:2; column-gap:clamp(22px,2.4vw,40px); padding-top:clamp(0px,2vw,30px); }
@media (min-width:1700px){ .cards{ column-count:3; } }
.card{ break-inside:avoid; margin:0 0 clamp(22px,2.4vw,40px); background:#FBF8F2; padding:26px 26px 20px; position:relative;
  box-shadow:0 1px 0 rgba(43,36,34,.08), 0 16px 34px -26px rgba(43,36,34,.5); transform:rotate(var(--r,0deg)); }
.card::before{ content:""; position:absolute; inset:8px; border:1px solid rgba(43,36,34,.1); pointer-events:none; }
.js .card.reveal{ transform:translateY(14px) rotate(var(--r,0deg)); }
.js .card.reveal.in{ transform:rotate(var(--r,0deg)); }
.card blockquote{ font:400 clamp(21px,1.6vw,27px)/1.34 var(--f-head); padding-right:58px; }
.card blockquote[lang="en"]{ font-style:italic; }
/* the wide one: a postcard's back — the message left, a dashed rule, stamp and sender right */
.card.card-wide{ column-span:all; display:grid; grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); column-gap:clamp(24px,3vw,52px); padding:30px 30px 26px; margin-top:clamp(6px,1vw,14px); }
.card.card-wide blockquote{ padding-right:0; align-self:center; }
.card.card-wide figcaption{ margin-top:0; border-top:0; border-left:1px dashed rgba(43,36,34,.3); padding:84px 0 4px clamp(18px,2vw,30px); justify-content:flex-end; gap:8px; }
.card-wide .who, .card-wide .meta{ padding-bottom:6px; border-bottom:1px solid rgba(43,36,34,.16); }
.card figcaption{ margin-top:20px; padding-top:12px; border-top:1px dashed rgba(43,36,34,.3); display:flex; flex-direction:column; }
.who{ font:italic 400 22px/1.3 var(--f-head); color:var(--leaf); padding-top:.04em; }
.meta{ font:500 10.5px/1.4 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; opacity:.6; }
.stamp{ position:absolute; right:18px; top:18px; width:50px; height:58px; display:grid; place-items:center; background:var(--c); transform:rotate(5deg);
  outline:4px dotted #FBF8F2; outline-offset:-2px; box-shadow:inset 0 0 0 5px var(--c), inset 0 0 0 6px rgba(255,255,255,.55); }
.stamp svg{ fill:#fff; color:#fff; }
.s-red{ --c:var(--red); } .s-pink{ --c:var(--pink); } .s-leaf{ --c:var(--leaf); } .s-teal{ --c:var(--teal); }

/* real data as graphics: Google's review topics */
.topics{ margin-top:clamp(40px,4vw,70px); max-width:420px; }
.topics ol{ margin-top:12px; border-top:2px solid var(--ink); }
.topics li{ display:flex; align-items:baseline; gap:18px; padding:10px 0 8px; border-bottom:1px solid rgba(43,36,34,.18); }
.topics b{ font:400 clamp(34px,2.6vw,46px)/1.1 var(--f-head); color:var(--red); min-width:1.6em; padding-top:.04em; }
.topics span{ font-size:17px; }
.topics-src{ margin-top:10px; font:500 10px/1.4 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; opacity:.55; }

/* ═══════════ FOOTER: the arrival ═══════════ */
.foot{ position:relative; overflow-x:clip; background:var(--ink); color:var(--brick); padding:clamp(130px,12vw,200px) var(--padR) 0 var(--pad); --tc:var(--pink); }
.foot::before{ content:""; position:absolute; left:0; right:0; top:0; height:10px;
  background:repeating-linear-gradient(-45deg,var(--red) 0 14px,var(--brick) 14px 24px,var(--pink) 24px 38px,var(--brick) 38px 48px); }
.foot-route{ position:absolute; left:var(--pad); top:30px; width:calc(100% - var(--pad) - var(--padR)); height:clamp(90px,9vw,150px); overflow:visible; pointer-events:none; }
.foot-route path{ fill:none; stroke:var(--pink); stroke-width:2.6; stroke-dasharray:2 10; stroke-linecap:round; vector-effect:non-scaling-stroke; opacity:.75; }
.foot-plane{ position:absolute; left:0; top:0; fill:var(--pink); pointer-events:none; }
.foot-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); gap:clamp(36px,6vw,120px); align-items:end; }
.foot .mono-label{ color:var(--pink); }
.foot-dest{ container-type:inline-size; }
/* sized to the column so „Bulevar Crvene Armije" holds one line and 9G the second, at every width */
.foot-addr{ font-size:clamp(32px,9.6cqi,104px); line-height:1.08; margin:14px 0 18px; }
.foot-addr span{ display:block; background:var(--weave), linear-gradient(var(--tc),var(--tc)); background-size:220px 220px,auto,auto,auto;
  -webkit-background-clip:text; background-clip:text; color:transparent; padding:.12em .14em .26em 0; margin:-.12em -.14em -.26em 0; }
.foot-city{ font-size:17px; opacity:.8; margin-bottom:28px; max-width:60ch; }
.btn.light{ background:var(--brick); color:var(--ink); display:inline-block; }
.btn.light:hover{ background:var(--pink); }
.foot-info{ margin:0; }
.foot-info div{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:16px 0 14px; border-top:1px solid rgba(243,237,227,.18); }
.foot-info div:last-child{ border-bottom:1px solid rgba(243,237,227,.18); }
.foot-info dt{ font:500 11px/1.3 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; opacity:.7; }
.foot-info dd{ margin:0; font:400 clamp(24px,2vw,34px)/1.15 var(--f-head); text-align:right; padding-top:.04em; }
.foot-info a{ text-decoration:none; border-bottom:1.5px solid var(--pink); }
.foot-info a:hover{ color:var(--pink); }
.foot-bar{ display:flex; align-items:center; gap:16px; margin-top:clamp(60px,6vw,100px); padding:22px 0 26px; border-top:1px solid rgba(243,237,227,.18);
  font:500 11px/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; }
.foot-bar svg{ fill:var(--pink); color:var(--pink); }

/* ═══════════ COCKTAIL PHOTO ═══════════ */
.photo{ border:0; padding:12px; width:min(calc(100vw - 32px),440px); max-height:calc(100svh - 32px); overflow:visible; color:var(--ink);
  background:repeating-linear-gradient(-45deg,var(--red) 0 14px,var(--brick) 14px 24px,var(--pink) 24px 38px,var(--brick) 38px 48px);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55); transform:rotate(-1.2deg); }
.photo[open]{ animation:post .45s cubic-bezier(.3,1.4,.5,1); }
@keyframes post{ from{ opacity:0; transform:translateY(24px) rotate(-5deg) scale(.94); } }
.photo::backdrop{ background:rgba(43,36,34,.62); backdrop-filter:blur(3px); }
html:has(.photo[open]){ overflow:hidden; }
.photo-in{ position:relative; background:#FBF8F2; padding:16px 16px 18px; }
.photo-img{ position:relative; aspect-ratio:4/5; display:grid; place-items:center; background:#D3CDC4; overflow:hidden; }
.photo-img span{ font:400 clamp(120px,30vw,180px)/1 var(--f-head); color:#A69E94; padding-top:.08em; }
.photo-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photo-cap{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-top:14px; padding-top:12px; border-top:1px dashed rgba(43,36,34,.3); }
.photo-cap b{ font:400 clamp(28px,6vw,36px)/1.1 var(--f-head); padding-top:.06em; }
.photo-price{ font:400 clamp(26px,5.4vw,32px)/1 var(--f-head); color:var(--red); white-space:nowrap; }
.photo-x{ all:unset; position:absolute; z-index:2; right:24px; top:24px; padding:9px 12px 8px; background:var(--ink); color:var(--brick); cursor:pointer;
  font:500 11px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; }
.photo-x span{ margin-left:4px; }
.photo-x:hover, .photo-x:focus-visible{ background:var(--red); }

/* ═══════════ O NAMA ON PHONES: boarding pass → story popup ═══════════ */

.pass{ all:unset; display:none; box-sizing:border-box; width:100%; cursor:pointer; -webkit-tap-highlight-color:transparent;
  position:relative; isolation:isolate; }
/* the shadow is its own layer: filter drop-shadow over a masked child is unreliable in mobile Safari */
.pass::before{ content:""; position:absolute; z-index:-1; inset:6px 4px 0; transform:rotate(-1deg); border-radius:6px;
  box-shadow:0 22px 26px -6px rgba(43,36,34,.5), 0 8px 12px -4px rgba(43,36,34,.3); }
.pass-in{ --seam:84px; display:grid; grid-template-columns:minmax(0,1fr) var(--seam); transform:rotate(-1deg); transition:transform .25s cubic-bezier(.3,1.4,.5,1);
  -webkit-mask:radial-gradient(circle 10px at calc(100% - var(--seam)) 0,#0000 98%,#000) top/100% 51% no-repeat, radial-gradient(circle 10px at calc(100% - var(--seam)) 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 10px at calc(100% - var(--seam)) 0,#0000 98%,#000) top/100% 51% no-repeat, radial-gradient(circle 10px at calc(100% - var(--seam)) 100%,#0000 98%,#000) bottom/100% 51% no-repeat; }
.pass:active .pass-in{ transform:rotate(-1deg) scale(.97); }
.pass:focus-visible{ outline:2px solid var(--teal); outline-offset:6px; }
.pass-main{ position:relative; overflow:hidden; display:flex; align-items:center; min-width:0; min-height:112px; padding:20px 18px 18px; background:var(--red); color:var(--brick); }
/* a faint winged K stamped behind, and a dotted take-off toward the stub */
.pass-wm{ position:absolute; right:-36px; top:-16px; fill:var(--brick); color:var(--brick); opacity:.13; transform:rotate(-8deg); }
.pass-path{ position:absolute; right:12px; bottom:12px; fill:none; stroke:var(--brick); stroke-width:2; stroke-linecap:round; stroke-dasharray:1 7; opacity:.75; }
.pass-plane{ position:absolute; right:10px; bottom:40px; fill:var(--brick); transform:rotate(-40deg); }
.pass-q{ position:relative; font:400 clamp(30px,9.4vw,38px)/1.02 var(--f-head); padding-top:.06em; }
.pass-q em{ display:block; color:#FFD3DD; }
.pass-stub{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--ink); padding-right:7px;
  background:repeating-linear-gradient(-45deg,var(--red) 0 7px,var(--brick) 7px 12px,var(--pink) 12px 19px,var(--brick) 19px 24px) right/7px 100% no-repeat, #FBF8F2;
  border-left:2px dashed rgba(43,36,34,.28); font:500 10px/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; }
.pass-stub svg{ fill:var(--red); animation:taxi 2.4s ease-in-out infinite; }
@keyframes taxi{ 0%,100%{ transform:translateX(-3px); } 50%{ transform:translateX(5px); } }

.story{ border:0; padding:10px; width:min(calc(100vw - 24px),520px); max-height:calc(100svh - 24px); overflow:visible; color:var(--ink);
  background:repeating-linear-gradient(-45deg,var(--red) 0 14px,var(--brick) 14px 24px,var(--pink) 24px 38px,var(--brick) 38px 48px);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55); }
.story[open]{ animation:post .45s cubic-bezier(.3,1.4,.5,1); }
.story::backdrop{ background:rgba(43,36,34,.62); backdrop-filter:blur(3px); }
html:has(.story[open]){ overflow:hidden; }
.story-in{ display:flex; flex-direction:column; max-height:calc(100svh - 44px); background:#FBF8F2; }
.story-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px 12px; border-bottom:1px dashed rgba(43,36,34,.3); }
.story-title{ font-size:36px; line-height:1.1; color:var(--red); padding-top:.06em; }
.story .story-x{ position:static; flex:none; }
.story-body{ overflow-y:auto; overscroll-behavior:contain; padding:22px 16px 26px; }
.story .about-grid{ grid-template-columns:minmax(0,1fr); margin-top:0; row-gap:30px; }
.story .about-a, .story .snap-1, .story .about-b, .story .snap-2{ grid-column:1; grid-row:auto; }
.story .snap{ width:100%; padding:0; background:none; box-shadow:none; transform:none; }
/* phone popup: the photos fade into the paper instead of a hard edge */
.story .photo-img{ background:none;
  -webkit-mask:linear-gradient(90deg,#0000,#000 5%,#000 95%,#0000), linear-gradient(#0000,#000 5%,#000 95%,#0000); -webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,#0000,#000 5%,#000 95%,#0000), linear-gradient(#0000,#000 5%,#000 95%,#0000); mask-composite:intersect; }
.story .snap-in{ padding:0; }
.story .about-h{ font-size:30px; }
.story .about-a{ padding-top:0; }
.story .flight{ display:none; }
.story .about-say{ font-size:23px; }
.story .about-txt{ font-size:19px; }
.story .about-ps{ font-size:27px; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1099px){
  .menu-grid{ grid-template-columns:minmax(0,1fr); }
  .menu-head, .cup{ grid-column:1; grid-row:auto; margin-top:0; }
  .mcol{ display:contents; }
  .fleet{ order:1; } .food{ order:2; } .coffee{ order:3; } .envelope{ order:4; } .sweet{ order:5; } .drinks{ order:6; }
  .wide-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .menu-head{ order:0; } .cup{ order:0; }
  .cup{ max-width:300px; justify-self:end; margin-top:-20px; }
  .coffee .coffee-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
  .envelope{ max-width:600px; }
  .hero{ min-height:auto; }
  .hero-title{ font-size:clamp(64px,15.5vw,170px); }
  .hero-title .l2{ padding-left:clamp(20px,5vw,60px); }
  .reviews{ grid-template-columns:minmax(0,1fr); }
  .about-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .about-a{ grid-column:1; grid-row:1; } .snap-1{ grid-column:2; grid-row:1; } .snap-2{ grid-column:1; grid-row:2; } .about-b{ grid-column:2; grid-row:2; }
  .flight-p{ display:none; }
  .flight-1{ display:block; }
  .flight-1{ grid-column:1; grid-row:1; } .flight-2{ grid-column:2; grid-row:2; }
  .about-a, .about-b, .snap-1, .snap-2, .snap.snap-1{ margin-top:0; align-self:center; }
  .about-a{ align-self:start; }
  .flight-1{ align-self:end; } .flight-2{ display:none; }
  .rev-side .sec-title{ flex-basis:100%; }
  .rev-side{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:30px; }
  .rev-side .postmark{ margin-top:0; }
  .topics{ margin-top:0; flex:1 1 320px; }
}
@media (max-width:820px){
  .hero-foot{ grid-template-columns:minmax(0,1fr); }
  .foot-grid{ grid-template-columns:minmax(0,1fr); }
  .ticket{ justify-self:start; width:min(100%,520px); }
}
@media (max-width:600px){
  body{ font-size:16px; }
  .top-nav a:not(.top-tel){ display:none; }
  .brand-k{ width:76px; height:30px; }
  .hero{ min-height:auto; padding-top:104px; }
  .hero-title{ line-height:1.02; font-size:clamp(64px,27vw,140px); }
  .hero-title .l2{ padding-left:0; white-space:normal; }
  .hero-title .mb{ display:inline; }
  .cup{ justify-self:center; }
  .loc{ font-size:11px; letter-spacing:.14em; }
  .loc span{ display:block; } .loc i{ display:none; }
  .hero-foot{ padding-top:22px; }
  .lead{ font-size:18px; }
  .ctas{ margin-top:18px; gap:10px; } .btn{ padding:14px 18px; }
  .sec-title{ line-height:1.1; }
  .sec-title span:nth-child(2){ padding-left:.4em; }
  .coffee .coffee-cols, .food-cols, .wide-cols{ grid-template-columns:minmax(0,1fr); gap:0; }
  .cocktail{ column-gap:14px; padding:12px 0 10px; }
  .fleet-list li{ column-gap:14px; }
  .cards{ column-count:1; }
  .card blockquote{ padding-right:54px; }
  .rev-side{ display:block; }
  .rev-side .postmark{ margin:36px auto 0; }
  .topics{ margin-top:56px; }
  .ticket{ width:min(100%,300px); --notch:38px; }
  .tk-top{ height:38px; padding:0 14px; gap:10px; } .tk-k{ width:38px; height:15px; } .tk-h{ font-size:18px; }
  .tk-body{ padding:6px 14px 8px; }
  .dep-row{ gap:10px; padding:8px 0 5px; } .dep-row span{ font-size:9.5px; letter-spacing:.16em; } .dep-row b{ font-size:24px; }
  .about-say{ font-size:26px; } .about-txt{ font-size:20px; }
  .about-grid{ grid-template-columns:minmax(0,1fr); }
  .about-a, .snap-1, .about-b, .snap-2{ grid-column:1; grid-row:auto; }
  .snap{ width:min(100%,420px); }
  .tap-hint span{ left:auto; right:-16px; transform-origin:calc(100% - 16px) 100%; }
  .tap-hint span::after{ left:auto; right:10px; }
  .card.card-wide{ display:block; padding:26px 26px 20px; }
  .card.card-wide blockquote{ padding-right:54px; }
  .card.card-wide figcaption{ margin-top:20px; padding:12px 0 0; border-left:0; border-top:1px dashed rgba(43,36,34,.3); gap:0; }
  .card-wide .who, .card-wide .meta{ padding-bottom:0; border-bottom:0; }
  /* O nama folds into the boarding pass (only when JS can open the popup) */
  .js .about .sec-title, .js .about > .about-grid{ display:none; }
  .js .pass{ display:block; }
  .flight{ display:none; }
  .about{ padding-top:104px; padding-bottom:24px; }
  .js .pass{ width:92%; margin:0 auto; }
  .pass-in{ --seam:82px; }
  .pass-main{ min-height:100px; padding:16px 16px 15px; }
  .pass-q{ font-size:clamp(27px,8.4vw,34px); }
  .menu{ padding-top:104px; }
  /* the menu title runs on one line */
  .menu-head .sec-title{ font-size:clamp(32px,11vw,58px); letter-spacing:-.015em; margin:0 -10px; transform:translateX(-3px); white-space:nowrap; text-align:center; position:relative; z-index:1; }
  .menu-head .sec-title span{ display:inline; }
  .menu-head .sec-title span:nth-child(2){ padding-left:.24em; }
  .cup{ width:100%; max-width:none; margin:-6px 0 -12px; }
}
}

@media (prefers-reduced-motion:reduce){
  .js .cup .steam{ clip-path:none; transition:none; }
  html{ scroll-behavior:auto; }
  .js .reveal, .js .wipe, .js .postmark, .js .card.reveal, .js .envelope.reveal{ opacity:1; transform:none; clip-path:none; transition:none; }
  .photo[open], .story[open]{ animation:none; }
  .pass-stub svg{ animation:none; }
  .tap-hint span, .fleet.in .tap-hint span{ animation:none; opacity:1; transform:none; }
  .js .snap.reveal{ transform:rotate(var(--r)); }
  .js .postmark{ transform:rotate(-8deg); }
  .ticker-track{ animation:none; }
}