/* SlowCards landing (slowcards.art).
   One stylesheet: tokens first, then components in the order of the page.
   No inline styles anywhere (the Content Security Policy forbids them). */

/* ---------- fonts (local WOFF2, Latin subsets; licences next to the files) ---------- */
@font-face{font-family:'Playwrite DK Loopet';src:url("../fonts/playwrite-dk-loopet-400.3b3efd8c7ab3.woff2") format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url("../fonts/cormorant-garamond-600.3fdbfa17004d.woff2") format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url("../fonts/cormorant-garamond-500-italic.e83fdb4f3422.woff2") format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Figtree';src:url("../fonts/figtree-400.8abb4496d8f0.woff2") format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url("../fonts/figtree-500.176cb7d3bde2.woff2") format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url("../fonts/figtree-600.4e303942a184.woff2") format('woff2');font-weight:600;font-style:normal;font-display:swap}
/* Stand-ins shown until the web fonts arrive (font-display: swap). They are system fonts scaled to
   the widths and the vertical metrics of our faces, so the headline wraps into the same lines and
   nothing below it jumps when the swap happens. Values computed with fontTools from the WOFF2
   files against Times New Roman / Arial (Liberation Serif / Sans are metric-compatible with them). */
@font-face{font-family:'Cormorant Fallback';font-weight:600;font-style:normal;src:local('Times New Roman Bold'),local('TimesNewRomanPS-BoldMT'),local('Liberation Serif Bold'),local('LiberationSerif-Bold');size-adjust:91%;ascent-override:101.5%;descent-override:31.5%;line-gap-override:0%}
@font-face{font-family:'Cormorant Fallback';font-weight:500;font-style:italic;src:local('Times New Roman Italic'),local('TimesNewRomanPS-ItalicMT'),local('Liberation Serif Italic'),local('LiberationSerif-Italic');size-adjust:88%;ascent-override:105%;descent-override:32.6%;line-gap-override:0%}
@font-face{font-family:'Figtree Fallback';font-weight:400 500;font-style:normal;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans');size-adjust:100%;ascent-override:95%;descent-override:25%;line-gap-override:0%}
@font-face{font-family:'Figtree Fallback';font-weight:600;font-style:normal;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold');size-adjust:94.7%;ascent-override:100.3%;descent-override:26.4%;line-gap-override:0%}

/* ---------- tokens ---------- */
:root{
  --canvas:#FFF9EE;--surface:#FFFFFF;--paper:#FBEFE4;--ink:#3A362C;--ink-soft:#6B6455;
  /* --muted and --card-accent are a touch darker than the brand colours (#857858, #B5561E)
     so that small text keeps a 4.5:1 contrast on canvas, paper and chip backgrounds.
     --card-foot is for the footer of the card back, which sits on the sage blob. */
  --muted:#756A4D;--card-accent:#AD5019;--card-foot:#5F5949;
  --line:#F0E4CC;--line-strong:#DDCBA3;--chip:#FBEED6;--terracotta:#B5561E;--terracotta-dark:#8E3F12;--on-terracotta:#FFFFFF;
  --orange:#F7931E;--moss:#3E4B2D;--sage:#A9B79A;--sage-soft:#E3EAD9;--blue:#8FA9C4;--peach:#F6C9A0;
  --shadow:rgba(193,122,51,.18);
  --serif:'Cormorant Garamond','Cormorant Fallback',Georgia,'Times New Roman',serif;
  --sans:'Figtree','Figtree Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --script:'Playwrite DK Loopet','Segoe Script','Bradley Hand',cursive;
  --gutter:24px;
  /* Height of the sticky header (0 while it scrolls with the page); landing.js keeps it exact. */
  --header-h:0px;
}
@media (max-width:420px){:root{--gutter:20px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* landing.js adds .smooth after the first paint, so opening /en/#garden jumps straight to the section */
@media (prefers-reduced-motion:no-preference){html.smooth{scroll-behavior:smooth}}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 16px/24px var(--sans);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,ol,figure,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
button{font:inherit;color:inherit}
a{color:var(--terracotta)}
a:hover{color:var(--terracotta-dark)}
:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
section[id],.sim{scroll-margin-top:calc(var(--header-h) + 16px)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:20;background:var(--moss);color:var(--canvas);padding:12px 18px;border-radius:999px;font:600 15px/1 var(--sans);text-decoration:none}
.skip:focus{top:12px;color:var(--canvas)}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}

/* ---------- typography ---------- */
.eyebrow{font:500 13px/16px var(--sans);letter-spacing:.3px;text-transform:uppercase;color:var(--muted)}
.big{font:600 clamp(40px,5.4vw,68px)/1.06 var(--serif);color:var(--moss)}
/* One sentence per block: the headline breaks between its sentences, and each balances on its own. */
.big__line{display:block;text-wrap:balance}
.sec{font:600 clamp(30px,3.6vw,44px)/1.12 var(--serif);color:var(--moss);text-wrap:balance}
.lead{font:400 19px/30px var(--sans);color:var(--ink-soft);max-width:34em;text-wrap:pretty}
.lead--sm,.sec-head .lead{font-size:17px;line-height:27px}
.h2{font:600 22px/28px var(--serif);color:var(--moss)}
.title{font:600 17px/24px var(--sans)}
.p{font:400 16px/24px var(--sans)}
.soft{color:var(--ink-soft)}
.small{font:400 14px/20px var(--sans);color:var(--ink-soft)}
.cap{font:400 13px/18px var(--sans);color:var(--muted)}
.label{font:500 13px/16px var(--sans);letter-spacing:.3px;text-transform:uppercase}
.script{font-family:var(--script);font-weight:400;color:var(--terracotta)}
.num{font:400 22px/1.4 var(--script);color:var(--terracotta)}
.lnk{font:500 15px/20px var(--sans);color:var(--ink);text-decoration:none;padding:12px 4px}
.lnk:hover{color:var(--terracotta)}
.lnk--sm{font-size:14px}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:6px 28px;border-radius:999px;border:0;
  background:var(--terracotta);color:var(--on-terracotta);font:600 16px/1.2 var(--sans);cursor:pointer;text-decoration:none;text-align:center;
  transition:background-color .15s,color .15s}
.btn:hover{background:var(--terracotta-dark);color:var(--on-terracotta)}
.btn.ghost{background:transparent;color:var(--terracotta);box-shadow:inset 0 0 0 1.5px var(--terracotta)}
.btn.ghost:hover{background:var(--chip);color:var(--terracotta-dark)}
.btn.quiet{background:var(--chip);color:var(--ink)}
button.btn.quiet:hover{background:#F6E3C2;color:var(--ink)}
.btn--light{background:var(--canvas);color:var(--moss)}
.btn--light:hover{background:#fff;color:var(--moss)}
.btn .i{width:20px;height:20px}
.ib{width:52px;height:52px;flex:none;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);display:inline-flex;
  align-items:center;justify-content:center;color:var(--ink-soft);cursor:pointer;padding:0;transition:border-color .15s,color .15s}
.ib:hover{border-color:var(--terracotta);color:var(--terracotta)}
.ib--sm{width:44px;height:44px}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;background:var(--chip);
  font:500 13px/1 var(--sans);color:var(--ink);white-space:nowrap;border:0;text-decoration:none}
a.chip:hover,button.chip:hover,label.chip:hover{background:#F6E3C2;color:var(--ink)}
.chip.on,a.chip.on:hover,button.chip.on:hover{background:var(--moss);color:var(--canvas)}
button.chip,label.chip{cursor:pointer}
.i{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;flex:none;background:var(--sage)}
/* Path and edition colours: keep in sync with web/content/shared.py (covered by a test). */
.dot--uwaznosc{background:#8FA98B}
.dot--rytm{background:#E0A458}
.dot--dom{background:#C98B6B}
.dot--wspomnienia{background:#B58E7A}
.dot--relacje{background:#D98C7E}
.dot--ja{background:#8FA9C4}
.dot--tesknoty{background:#A99BC0}
.dot--natura{background:#7FA07A}
.dot--granice{background:#C7A56A}
.dot--radosci{background:#E7A66B}
.dot--boze-narodzenie{background:#B23A2E}
.dot--nowy-rok{background:#C9A227}
.dot--bliskosc{background:#D9727E}
.dot--wiosna{background:#8DB56E}
.dot--lato{background:#E9A23B}
/* Accent of each Plus deck (web/content/shared.py, same test). */
.dot--deck-we-dwoje{background:#C9667E}
.dot--deck-bez-pospiechu{background:#C7465E}
.dot--deck-rodzinna{background:#E1A42B}
.dot--deck-smielej{background:#E0556E}
.dot--deck-kink{background:#B01E3C}
/* A small badge: "Plus" next to a feature, "18+" next to the deck for grown-ups. */
.tag,.age{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;
  font:600 11px/1 var(--sans);letter-spacing:.4px;text-transform:uppercase;vertical-align:1px}
.tag{background:var(--chip);color:var(--card-accent)}
.age{background:var(--terracotta-dark);color:#fff;height:22px;font-size:12px;letter-spacing:.6px}

/* ---------- card 2:3 (all inner sizes in cqw, so the card scales as one piece) ---------- */
.cardwrap{container-type:inline-size}
.card{position:relative;aspect-ratio:2/3;border-radius:5.2cqw;background:var(--paper);overflow:hidden;
  box-shadow:0 12px 32px var(--shadow);container-type:inline-size;color:#3A362C}
.card .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.card .leaf{position:absolute;left:50%;top:3.6%;width:6.5%;height:auto;transform:translateX(-50%)}
/* Question zone: 7.6%–31.5% of the card height, 82% of its width. The illustration starts
   at 33.5% at the earliest, so text that stays inside the zone never touches the painting.
   The size below is the safe no-script default; landing.js shrinks it further when needed.
   As the last line of defence the zone clips vertically, so even a forced minimum font
   size or a missing web font cannot paint handwriting over the illustration. */
.card .q{position:absolute;left:9%;right:9%;top:7.6%;height:23.9%;display:flex;align-items:center;justify-content:center;
  text-align:center;font:400 16px/1.62 var(--script);font-size:5.3cqw;color:var(--card-accent);text-wrap:balance;margin:0;
  overflow-y:clip;overflow-clip-margin:.5cqw}
.card .q__t{display:block;max-width:100%;overflow-wrap:break-word}
.card .q--m{font-size:4.9cqw}
.card .q--s{font-size:4.4cqw}
.card .q--xs{font-size:4cqw;line-height:1.5}
.card .wm{position:absolute;left:50%;top:90.5%;width:33%;height:auto;transform:translate(-50%,-50%)}
/* The back is set as one piece and always fits its card; nothing on a card scrolls.
   landing.js works through three settings, in this order:
   --k  type and spacing together: raised (to 1.12) while there is room, lowered when the text
        is long. Body text and labels stop at 12 px and 10 px, so from there on only the title
        and the spacing give way;
   --s  spacing alone (it follows --k until the script takes it lower), with tighter lines
        (.rev--tight);
   --f  the last resort for a text far beyond the editorial limits: the whole type scale,
        floors included. */
.card .rev{--k:1;--s:var(--k);--f:1;position:absolute;inset:0;padding:calc(8.5cqw*var(--s)) 8.5cqw calc(6cqw*var(--s));display:flex;flex-direction:column;gap:calc(3.4cqw*var(--s));overflow:hidden}
.card .rev--dense{--k:.9}
.card .rev--denser{--k:.8}
.card .rev__leaf{width:7%;height:auto;flex:none}
.card .rev__head{display:flex;flex-direction:column;gap:1.4cqw}
.card .rev .rt{font:600 calc(6.6cqw*var(--k)*var(--f))/1.2 var(--serif);color:#3E4B2D}
.card .rev .rc{font:500 calc(max(10px,3.3cqw*var(--k))*var(--f))/1.3 var(--sans);letter-spacing:.3cqw;text-transform:uppercase;color:var(--muted)}
.card .rev .rp{font:400 calc(max(12px,4cqw*var(--k))*var(--f))/1.5 var(--sans);color:#3A362C}
.card .rev .rl{font:600 calc(max(10px,3.4cqw*var(--k))*var(--f))/1.3 var(--sans);letter-spacing:.2cqw;text-transform:uppercase;color:var(--card-accent)}
.card .rev__qs{display:flex;flex-direction:column;gap:calc(1.6cqw*var(--s))}
.card .rev .rq{font:italic 500 calc(max(13px,4.5cqw*var(--k))*var(--f))/1.34 var(--serif);color:#3A362C;display:flex;gap:2cqw;align-items:baseline}
.card .rev .rq img{width:2.6cqw;height:auto;flex:none}
.card .rev .step{background:#FBEED6;border-radius:3.6cqw;padding:calc(3.4cqw*var(--s)) 4cqw;display:flex;flex-direction:column;gap:1.2cqw}
/* The footer sits on the sage blob (36% over paper), hence a darker ink than --muted. */
.card .rev .foot{font:400 calc(max(10px,3.1cqw*var(--k))*var(--f))/1.3 var(--sans);color:var(--card-foot);margin:auto 0 0;text-align:center}
/* „Warto wiedzieć”: the part a card of „Kink” has and no other card does (decision 24a).
   A hairline in the soft ink of the deck separates it from the small step above it. */
.card .rev__know{display:flex;flex-direction:column;gap:1.2cqw;padding-top:calc(2.6cqw*var(--s));
  border-top:.4cqw solid var(--deck-soft,#C9BFA3)}
.card .rev__know .rp{font-style:italic}
.card .rev--tight .rt{line-height:1.12}
.card .rev--tight .rp{line-height:1.4}
.card .rev--tight .rq{line-height:1.26}
/* The two colour washes reach past the edges of the card. Their layer clips them, so the card
   itself has nothing that sticks out of its box. */
.card__wash{position:absolute;inset:0;overflow:hidden;overflow:clip}
.blob{position:absolute;border-radius:58% 42% 55% 45%/48% 60% 40% 52%;filter:blur(1.2cqw)}
.blob--peach{right:-14%;top:-8%;width:58%;height:30%;background:#F6C9A0;opacity:.42}
.blob--sage{left:-18%;bottom:-6%;width:62%;height:28%;background:#A9B79A;opacity:.36}
/* cover: paper, a leaf pattern (vector tile), a thin frame and the seal with the orange emblem */
.cover__pattern{position:absolute;inset:0;background:url("../img/brand/cover-pattern.6ca999b193c1.svg") 0 0/26cqw 26cqw}
.cover__frame{position:absolute;inset:5%;border:.6cqw solid #E7C9A4;border-radius:4cqw}
.cover__seal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64%;aspect-ratio:1;border-radius:50%;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6cqw}
.cover__seal img{width:30%;height:auto}
.cover__name{font-size:7cqw;line-height:1.4;color:var(--card-accent)}
/* The caption names the kind of deck, so it is longer than a wordmark and wraps inside the seal. */
.cover__by{font:500 2.7cqw/1.4 var(--sans);letter-spacing:.42cqw;text-transform:uppercase;color:var(--muted);
  max-width:80%;text-align:center;text-wrap:balance}
/* ---------- Plus decks: a card of its own paper and ink ----------
   Only the paper, the inks and the deck mark change. The logotype and the leaf mark keep the
   brand colours on every deck, the dark one included (docs/spec/10-talie-plus.md).
   --deck-body, --deck-title, --deck-step and the two washes dress the back of a card, so the
   reverse of a dark deck stays as readable as the reverse of a light one. */
.card--deck{--deck-paper:var(--paper);--deck-ink:var(--card-accent);--deck-soft:var(--muted);--deck-body:#3A362C;
  --deck-title:#3E4B2D;--deck-step:#FBEED6;--deck-wash-a:#F6C9A0;--deck-wash-b:#A9B79A;background:var(--deck-paper)}
.card--deck .q,.card--deck .cover__name{color:var(--deck-ink)}
.card--deck .cover__seal{background:var(--deck-paper)}
.card--deck .cover__by{color:var(--deck-soft)}
.card--deck .rev .rt{color:var(--deck-title)}
.card--deck .rev .rp,.card--deck .rev .rq{color:var(--deck-body)}
.card--deck .rev .rl{color:var(--deck-ink)}
.card--deck .rev .rc,.card--deck .rev .foot{color:var(--deck-soft)}
.card--deck .rev .step{background:var(--deck-step)}
.card--deck .blob--peach{background:var(--deck-wash-a)}
.card--deck .blob--sage{background:var(--deck-wash-b)}
.card--deck-we-dwoje{--deck-paper:#F8E8E4;--deck-ink:#93324E;--deck-soft:#8A5A63;--deck-body:#4A3138;--deck-title:#6E2340;
  --deck-step:#F6E0D4;--deck-wash-a:#E9B8BC;--deck-wash-b:#8FA7A3}
.card--deck-bez-pospiechu{--deck-paper:#2C1B2E;--deck-ink:#EACB9C;--deck-soft:#C2A98C;--deck-body:#F0DFC8;--deck-title:#EACB9C;
  --deck-step:#3E2742;--deck-wash-a:#7A2440;--deck-wash-b:#4B2E5C}
.card--deck-rodzinna{--deck-paper:#FBF4DF;--deck-ink:#2D5A8A;--deck-soft:#7A6A46;--deck-body:#3A362C;--deck-title:#1F4668;
  --deck-step:#F2E6C4;--deck-wash-a:#F2D27A;--deck-wash-b:#9CC1DE}
/* The two decks of „We dwoje nocą” (decision 24): the same dark treatment as the night deck,
   in their own papers - cherry for „Śmielej”, violet black for „Kink”. */
.card--deck-smielej{--deck-paper:#3A1420;--deck-ink:#F2CDA6;--deck-soft:#CBAA8E;--deck-body:#F3E2CE;--deck-title:#F2CDA6;
  --deck-step:#4D1D2B;--deck-wash-a:#8E1F3C;--deck-wash-b:#5C2140}
.card--deck-kink{--deck-paper:#1E1A24;--deck-ink:#EADBC0;--deck-soft:#C6B294;--deck-body:#EFE2CC;--deck-title:#EADBC0;
  --deck-step:#2E2834;--deck-wash-a:#7A1B30;--deck-wash-b:#3C3A45}
/* The frame of a dark deck follows its leaf colour, not its accent. */
.card--deck-bez-pospiechu .cover__frame{border-color:rgba(217,169,91,.5)}
.card--deck-smielej .cover__frame{border-color:rgba(217,169,91,.5)}
.card--deck-kink .cover__frame{border-color:rgba(200,164,106,.5)}
.cover__pattern--we-dwoje{background-image:url("../img/plus/tile-we-dwoje.4617fc59623c.svg")}
.cover__pattern--bez-pospiechu{background-image:url("../img/plus/tile-bez-pospiechu.33db85c1acd7.svg")}
.cover__pattern--rodzinna{background-image:url("../img/plus/tile-rodzinna.61d53b09c7e8.svg")}
.cover__pattern--smielej{background-image:url("../img/plus/tile-smielej.56dfdca97119.svg")}
.cover__pattern--kink{background-image:url("../img/plus/tile-kink.499eebe03b14.svg")}

/* ---------- header ---------- */
.site-header{background:var(--canvas)}
.site-header__in{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap;padding-block:18px}
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none;margin-right:auto}
.brand__name{font-size:24px;line-height:1.5}
.brand__wm{width:96px;align-self:center}
.site-nav{display:flex;gap:0 20px}
.site-nav .lnk{white-space:nowrap}
.lang{display:flex;gap:8px}
.lang .chip{height:32px}
/* The pills keep their look; the area that takes a tap is taller and reaches half-way to the
   neighbour, so the next language is not hit by mistake. */
.lang .chip,.pill{position:relative}
.lang .chip::after,.pill::after{content:"";position:absolute;inset:-8px -4px}
@media (max-width:1179px){
  /* Two rows: the brand and the languages, then the section links in a single row.
     If the row is wider than the screen it scrolls sideways instead of wrapping. */
  .site-header__in{padding-block:14px 6px;gap:4px 12px}
  .site-nav{order:3;flex:0 0 calc(100% + var(--gutter)*2);min-width:0;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);
    gap:0 18px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav .lnk{flex:none;padding-block:9px;font-size:14px}
  .site-nav .lnk:focus-visible{outline-offset:-3px}
}
@media (max-width:640px){
  /* Slowtico has a band of its own further down; on a phone the row keeps to the page sections. */
  .site-nav .lnk--out{display:none}
}
@media (max-width:420px){
  .brand{gap:6px}
  .brand__name{font-size:20px}
  .brand__wm{width:62px}
  .lang .chip{height:30px;padding:0 8px;font-size:12px}
  .site-nav{gap:0 14px}
}
@media (max-width:380px){
  /* Small phones: tighter links, so the four section links fit without scrolling in Spanish too. */
  .site-nav{gap:0 8px}
  .site-nav .lnk{padding-inline:3px}
}
@media (max-width:340px){
  /* Narrowest phones: the brand and the three languages still share one row. */
  .site-header__in{column-gap:8px}
  .brand{gap:5px}
  .brand__name{font-size:17px}
  .brand__wm{width:50px}
  .lang{gap:6px}
  .lang .chip{padding:0 7px}
  .lang .chip::after{inset:-8px -3px}
}
@media (min-width:1180px){
  /* One row, and it sticks: only from the width at which brand, links and languages fit in all
     three languages, with the stand-in fonts as well (a wrapped header would move the whole
     page when the web fonts arrive). Below that the header scrolls away with the page. */
  :root{--header-h:68px}
  .site-header{position:sticky;top:0;z-index:10;box-shadow:0 1px 0 var(--line)}
  .site-header__in{padding-block:12px}
  /* The same size as on a phone, so "Talie dodatkowe" and "Barajas adicionales" fit the row. */
  .site-nav{gap:0 14px}
  .site-nav .lnk{font-size:14px;padding-inline:2px}
}
/* In December the calendar takes the one spare place in the row; Slowtico keeps its band
   further down the page and its link in the footer. */
.site-nav:has(.lnk--now) .lnk--out{display:none}

/* ---------- sections ---------- */
.section__in,.band__in{display:flex;flex-direction:column;gap:40px}
.section{padding-block:80px}
.band{padding-block:72px}
.band--surface{background:var(--surface);border-block:1px solid var(--line)}
.band--paper{background:var(--paper)}
.band--moss{background:var(--moss);padding-block:64px}
.sec-head{display:flex;flex-direction:column;gap:14px}
.sec-head--split{flex-direction:row;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between}
.sec-head--split .sec{flex:1 1 420px}
.sec-head--split .lead{flex:1 1 380px}
/* Call to action: the buttons that do something, and under them the stores that are not open yet. */
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cta--centre{align-items:center}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cta--centre .cta-row,.cta--centre .soon{justify-content:center}
/* A note, on purpose unlike a button: small, no fill, dashed outline. */
.soon{display:flex;flex-wrap:wrap;gap:8px}
.soon__item,.pill-soon{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;border:1px dashed var(--line-strong);
  font:500 13px/1 var(--sans);color:var(--ink-soft);white-space:nowrap}
@media (max-width:640px){
  .section{padding-block:56px}
  .band{padding-block:52px}
  .section__in,.band__in{gap:32px}
  .lead{font-size:17px;line-height:27px}
}
@media (max-width:420px){
  .soon{gap:6px}
  .soon__item{padding:0 9px}
}

/* ---------- hero ---------- */
.hero{overflow:hidden}
.hero__in{display:flex;flex-wrap:wrap;align-items:center;gap:40px;padding-block:36px 72px}
.hero__copy{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:24px}
.fan{flex:1 1 420px;min-width:0;max-width:500px;margin-inline:auto;position:relative;aspect-ratio:500/470}
.fan__card{position:absolute}
.fan__card--left{left:0;top:8.5%;width:46%;transform:rotate(-9deg)}
.fan__card--right{right:0;top:8.5%;width:46%;transform:rotate(8deg)}
.fan__card--centre{left:21%;top:2%;width:58%}
@media (max-width:640px){
  .hero__in{padding-block:20px 56px;gap:28px}
  .hero__copy{gap:20px}
  .cta-row{gap:10px}
  /* On a phone the middle card is the one people read, so it gets more of the width. */
  .fan{aspect-ratio:500/525}
  .fan__card--left,.fan__card--right{top:13%}
  .fan__card--centre{left:17%;width:66%}
}

/* ---------- ritual ---------- */
.steps{display:flex;flex-wrap:wrap;gap:32px}
.steps__item{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:8px}

/* ---------- card up close ---------- */
.anatomy{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:48px 56px}
/* The card and its notes share one width, so they share both edges. The numbered pins sit on
   the card edge and reach 14 px into the page margin. */
.anat{--anat-w:min(400px,100%);display:flex;flex-direction:column;align-items:center;gap:28px}
.anat__card{position:relative;width:var(--anat-w)}
.anat__notes{width:var(--anat-w);display:flex;flex-direction:column;gap:14px}
.anat__label{font:500 13px/16px var(--sans);letter-spacing:.3px;text-transform:uppercase;color:var(--muted)}
.notes{display:flex;flex-direction:column;gap:14px;counter-reset:note}
.notes--back{counter-reset:note 3}
.notes li{counter-increment:note;position:relative;padding-left:42px;font:400 15px/22px var(--sans);color:var(--ink-soft);border-radius:8px}
.notes li::before{content:counter(note);position:absolute;left:0;top:-2px}
.notes strong{display:block;font:600 17px/24px var(--sans);color:var(--ink)}
.pin__dot,.notes li::before{width:28px;height:28px;border-radius:50%;background:var(--terracotta);color:#fff;font:600 14px/28px var(--sans);text-align:center}
/* The numbers on the card are buttons: each opens a bubble with its note and lights up the note
   in the list; a note in the list lights up its number. Without JavaScript they stay plain
   markers (rendered disabled) and the list under the card says it all.
   The button is the still part: it is centred on its point with margins and carries the area
   that takes the tap, which ends where the page margin of a phone ends (20 px from the middle
   of the number). Only the dot inside it grows, so nothing here can ever widen the page. */
.pin{position:absolute;z-index:2;width:28px;height:28px;margin:-14px 0 0 -14px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.pin:disabled{cursor:default}
.pin::after{content:"";position:absolute;inset:-6px;border-radius:50%}
.pin__dot{display:block;box-shadow:0 0 0 3px var(--canvas),0 2px 8px rgba(58,54,44,.18)}
.pin:focus-visible{outline:none}
.pin:focus-visible .pin__dot{outline:3px solid var(--terracotta);outline-offset:3px}
.pin.is-active .pin__dot{transform:scale(1.22);box-shadow:0 0 0 3px var(--canvas),0 0 0 5px var(--terracotta),0 6px 16px rgba(181,86,30,.3)}
.anatomy.has-active .pin:not(.is-active) .pin__dot{opacity:.42}
.notes li.is-active{background:var(--chip);box-shadow:0 0 0 10px var(--chip)}
.notes li.is-active::before{box-shadow:0 0 0 2px var(--chip),0 0 0 4px var(--terracotta)}
.notes li:focus-visible{outline-offset:10px;border-radius:8px}
/* Transitions start only once the script has taken over, so nothing animates while the page loads. */
.anatomy[data-ready] .pin__dot{transition:transform .15s,opacity .15s,box-shadow .15s}
.anatomy[data-ready] .notes li{transition:background-color .15s,box-shadow .15s}
.anatomy[data-ready] .notes li::before{transition:box-shadow .15s}
/* The bubble: paper, a hairline, a soft shadow and a small pointer. landing.js builds it, fills
   it from the list and places it next to the number, always inside the window. */
.tip{position:absolute;left:0;top:0;z-index:5;width:max-content;max-width:min(288px,calc(100vw - 16px));padding:13px 16px 15px;
  background:var(--canvas);border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 14px 34px rgba(58,54,44,.16),0 2px 6px rgba(58,54,44,.08);
  opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility 0s .15s}
.tip[data-side="below"]{transform:translateY(-4px)}
.tip.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .15s,transform .15s}
.tip__title{font:600 20px/24px var(--serif);color:var(--moss)}
.tip__text{margin-top:4px;font:400 14px/20px var(--sans);color:var(--ink-soft);text-wrap:pretty}
.tip__arrow{position:absolute;left:var(--tip-arrow,50%);bottom:-7px;width:12px;height:12px;background:var(--canvas);border:solid var(--line-strong);border-width:0 1px 1px 0;
  border-radius:0 0 3px;transform:translateX(-50%) rotate(45deg)}
.tip[data-side="below"] .tip__arrow{bottom:auto;top:-7px;border-width:1px 0 0 1px;border-radius:3px 0 0}
/* Next to an edge of the window the pointer moves to a corner of the bubble; that corner is
   squared off, so the pointer still sits on the number. */
.tip[data-side="above"][data-lean="left"]{border-bottom-left-radius:4px}
.tip[data-side="above"][data-lean="right"]{border-bottom-right-radius:4px}
.tip[data-side="below"][data-lean="left"]{border-top-left-radius:4px}
.tip[data-side="below"][data-lean="right"]{border-top-right-radius:4px}
@media (prefers-reduced-motion:reduce){
  .anatomy[data-ready] .pin__dot,.anatomy[data-ready] .notes li,.anatomy[data-ready] .notes li::before,.tip,.tip.is-open{transition:none}
  .tip,.tip[data-side="below"]{transform:none}
}
.pin--1{left:61%;top:5.4%}
.pin--2{left:0;top:19.5%}
.pin--3{left:100%;top:59%}
.pin--4{left:0;top:15%}
.pin--5{left:100%;top:31%}
.pin--6{left:0;top:56%}
.pin--7{left:100%;top:80%}
@media (min-width:900px){
  .anatomy{grid-template-columns:repeat(2,minmax(0,1fr))}
  .anat{--anat-w:min(340px,100%)}
}
@media (min-width:1100px){
  .anat{--anat-w:min(400px,100%)}
}

/* ---------- try: phone mock-up with the draw simulation ---------- */
.try{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);grid-template-areas:"head sim" "more sim";gap:36px 72px;align-items:start}
.try__head{grid-area:head;display:flex;flex-direction:column;gap:18px;align-self:end}
.try__more{grid-area:more;display:flex;flex-direction:column;gap:20px}
.more{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:22px 28px}
.more__item{display:flex;gap:14px;align-items:flex-start}
.more__icon{width:44px;height:44px;border-radius:50%;background:var(--canvas);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--terracotta);flex:none}
.more .small{margin-top:2px}
/* Card width in the mock-up: as wide as the phone allows and 345 px at most, so the back is set
   in a readable size; and never so tall that the window cannot show the card together with the
   arrows and the two buttons under it. --sim-chrome is everything in that view except the card:
   8 above, 30 of margins and gap around the stage, the controls, 16 below. */
.sim{--sim-chrome:172px;--sim-controls:106px;--card-fit:max(280px,calc((100vh - var(--header-h) - var(--sim-chrome))*2/3));
  grid-area:sim;width:100%;max-width:440px;margin-inline:auto;display:flex;flex-direction:column;gap:10px;border-radius:44px}
@supports (height:100svh){
  .sim{--card-fit:max(280px,calc((100svh - var(--header-h) - var(--sim-chrome))*2/3))}
}
.sim:focus{outline:none}
.sim:focus-visible{outline:3px solid var(--terracotta);outline-offset:6px}
.phone{background:var(--canvas);border:8px solid #fff;border-radius:44px;box-shadow:0 0 0 1px var(--line),0 24px 56px rgba(193,122,51,.2);overflow:hidden;display:flex;flex-direction:column}
.phone__top{padding:26px 22px 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:center}
.phone__date{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phone__title{grid-column:1/-1;font:600 28px/34px var(--serif);color:var(--moss)}
.pills{display:flex;gap:8px}
.pill{height:32px;padding:0 11px}
.phone__body{padding:8px 16px 16px;display:flex;flex-direction:column;align-items:center;gap:12px}
.stage{position:relative;width:min(100%,345px,var(--card-fit));aspect-ratio:2/3;margin:14px 0 8px}
.stage__deck{position:absolute;inset:0}
.stage__persp{position:absolute;inset:0;perspective:1600px}
.stage__under{position:absolute;inset:0;container-type:inline-size;transition:opacity .3s}
.stage__under .card{box-shadow:0 6px 16px rgba(193,122,51,.14)}
.stage__under--1{transform:translateY(3%) rotate(-5deg)}
.stage__under--2{transform:translateY(1.5%) rotate(4deg)}
.sim:not([data-state="cover"]) .stage__under{opacity:0}
/* A calm turn: the card is edge-on after about a third of the time, then settles with a slight
   overshoot, like a damped spring. Only transform is animated. */
.flipper{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.45,0,.2,1.15)}
.slot{position:absolute;inset:0;container-type:inline-size;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:opacity .11s}
.slot--b{transform:rotateY(180deg)}
.slot.is-swapping{opacity:0}
.sim[data-state="front"] .stage,.sim[data-state="back"] .stage{cursor:pointer}
.deck-btn{position:absolute;inset:0;z-index:3;border:0;background:transparent;border-radius:14px;cursor:pointer;padding:0}
.deck-btn:disabled{cursor:default}
.deck-btn:focus-visible{outline-offset:6px}
@media (prefers-reduced-motion:no-preference){
  /* The deck "breathes" while it waits; the button on top of it stays still. */
  .sim[data-ready][data-state="cover"] .stage__deck{animation:breathe 4s ease-in-out infinite alternate}
}
@keyframes breathe{from{transform:translateY(-2px)}to{transform:translateY(2px)}}
@media (prefers-reduced-motion:reduce){
  /* No rotation: the two sides cross-fade instead. */
  .flipper{transform:none!important;transition:none}
  .slot{-webkit-backface-visibility:visible;backface-visibility:visible;transform:none;opacity:0;visibility:hidden;transition:opacity .15s,visibility 0s .15s}
  .slot.is-active{opacity:1;visibility:visible;transition:opacity .15s}
  .slot.is-active.is-swapping{opacity:0}
}
/* Always as tall as the arrows plus the buttons, so the mock-up keeps its height when a card is drawn. */
.sim__under{width:100%;min-height:var(--sim-controls);padding-inline:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.sim__hint{font-size:17px;line-height:1.6;text-align:center}
.sim__browse{display:flex;align-items:center;justify-content:center;gap:10px}
.sim__counter{min-width:5.5em;text-align:center;font:500 14px/20px var(--sans);color:var(--ink-soft)}
.sim__actions{display:flex;gap:10px;width:100%}
.sim__actions .btn{flex:1 1 0;min-width:0;padding-inline:12px;font-size:15px}
/* The trial of a deck (decision 22): the demo counter in place of the arrows, and the quiet
   note that takes over from "draw another" once today's two cards are gone. */
.sim__demo{text-align:center;text-wrap:pretty}
.sim__spent{width:100%;display:flex;flex-direction:column;gap:10px}
.sim__spent-text{text-align:center;text-wrap:pretty}
.sim__spent-row{display:flex;gap:10px;width:100%}
.sim__spent-row .btn{flex:1 1 0;min-width:0;padding-inline:12px;font-size:15px}
.phone__nav{display:flex;justify-content:space-around;align-items:center;height:70px;padding:0 8px 6px;border-top:1px solid var(--line);background:var(--canvas)}
.phone__nav>span{display:flex;flex-direction:column;align-items:center;gap:4px;font:500 12px/14px var(--sans);color:var(--muted);min-width:60px}
.phone__nav .on{color:var(--terracotta);font-weight:600}
/* The padlock of the locked tab sits in the corner of its icon, so the label stays on one
   line with the other tabs instead of becoming a third row. */
.phone__nav .ic{position:relative;display:flex}
.phone__nav .lock{position:absolute;right:-4px;bottom:-2px;width:13px;height:13px;stroke-width:2.6;padding:1px;border-radius:50%;background:var(--canvas)}
.sim__caption{text-align:center;color:var(--ink-soft);font-size:14px;line-height:20px;margin-top:8px}
.sim__keys,.sim__noscript{text-align:center}
@media (hover:none){.sim__keys{display:none}}
/* Without JavaScript the deck cannot be drawn from: no keyboard tip, and the hint steps back. */
.sim:not([data-ready]) .sim__keys{display:none}
.sim:not([data-ready]) .sim__hint{color:var(--muted)}
@media (max-height:820px){
  /* Low windows (small laptops, phones): tighter spacing, so the card can stay large. */
  .sim{--sim-chrome:146px;--sim-controls:98px}
  .phone__top{padding-top:18px}
  .phone__body{padding-top:6px;gap:10px}
  .stage{margin:6px 0}
  .sim__under{gap:8px}
  .sim__actions .btn{min-height:46px}
}
@media (max-width:979px){
  .try{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "sim" "more";gap:32px}
}
@media (max-width:480px){
  /* On a phone the mock-up gives nearly all of its width to the card. */
  .sim,.phone{border-radius:36px}
  .phone{border-width:4px}
  .phone__top{padding-inline:16px}
  .phone__body{padding-inline:4px;padding-bottom:14px}
  .sim__under{padding-inline:10px}
  .phone__title{font-size:26px;line-height:32px}
  .sim__actions .btn{font-size:14px;padding-inline:8px}
}

/* ---------- ten paths ---------- */
.paths{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:16px}
.path{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:6px}
.path .dot{margin-bottom:6px}
.path__name{font:600 20px/24px var(--serif);color:var(--moss)}
.specials{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;background:var(--paper);border-radius:24px;padding:24px 28px}
.specials__head{flex:0 1 260px;display:flex;flex-direction:column;gap:4px}
/* The editions are set like words in a balanced paragraph: if they need a second row, the
   rows come out even (3 + 2) instead of leaving the last edition on a row of its own. */
.specials__list{flex:1 1 420px;text-wrap:balance;margin-bottom:-8px}
.specials .chip{background:var(--canvas);gap:8px;margin:0 4px 8px 0;vertical-align:top}
@media (max-width:480px){
  .paths{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .path{padding:14px}
  .path__name{font-size:18px;line-height:22px}
  .specials{padding:20px}
}

/* ---------- sample cards ---------- */
.tabs{display:flex;flex-direction:column;gap:28px}
.tabs__set{display:flex;gap:6px}
.tabs__label{height:40px;padding:0 18px;font-size:14px}
.tabs__radio:checked+.tabs__label{background:var(--moss);color:var(--canvas)}
.tabs__radio:focus-visible+.tabs__label{outline:3px solid var(--terracotta);outline-offset:3px}
/* The grid takes the full width of the page column, so it starts on the same edge as the heading. */
.samples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px;width:100%}
/* Language tabs without script: the checked radio hides the other two panels.
   Browsers without :has() simply show all three languages one after another. */
.tabs:has(#samples-pl:checked) .samples:not(.samples--pl),
.tabs:has(#samples-en:checked) .samples:not(.samples--en),
.tabs:has(#samples-es:checked) .samples:not(.samples--es){display:none}
/* position:relative keeps the visually hidden text inside the scrolling row on phones */
.sample__link{position:relative;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);border-radius:18px}
.sample__card{margin-bottom:10px;transition:transform .3s}
.sample__link:hover .sample__card{transform:translateY(-4px)}
.sample__title{font:600 22px/28px var(--serif);color:var(--moss)}
.sample__cat{display:flex;align-items:center;gap:8px;font:500 13px/18px var(--sans);color:var(--ink-soft)}
.sample__link:focus-visible{outline-offset:8px}
@media (prefers-reduced-motion:reduce){.sample__card{transition:none}.sample__link:hover .sample__card{transform:none}}
@media (max-width:899px){
  .samples{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
}
@media (max-width:559px){
  /* One row that scrolls sideways inside its own box; the page itself never scrolls sideways. */
  .samples{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter)*-1);width:auto;
    padding:8px var(--gutter) 24px;scroll-padding-inline:var(--gutter);-webkit-overflow-scrolling:touch}
  .sample{flex:0 0 86%;max-width:320px;scroll-snap-align:start}
}

/* ---------- editions for special days ----------
   Five of them, so the rows are 5, then 3 + 2; below 760 px each edition is a row of its own,
   with its card beside the text. No edition is ever left alone at the end of a row. */
.editions{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.edition{display:flex;gap:18px;align-items:flex-start}
.edition__card{flex:0 0 132px;max-width:132px}
.edition__copy{display:flex;flex-direction:column;gap:8px}
.edition__window{display:flex;align-items:center;gap:8px;color:var(--muted)}
.edition__window .dot{width:10px;height:10px}
.edition__first{font-style:italic}
.edition__link{align-self:flex-start;color:var(--terracotta);padding-left:0}
.editions__note{max-width:62ch;text-wrap:pretty}
@media (min-width:760px){
  .editions{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px}
  .edition{flex-direction:column;gap:16px}
  .edition__card{flex:none;width:100%;max-width:236px}
}
@media (min-width:1020px){
  .editions{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* ---------- Plus decks ----------
   One deck is a row: its back next to the description, and under both the three cards of its
   demo set, which a visitor can turn over. */
.decks{display:flex;flex-direction:column;gap:56px}
.deck{display:flex;flex-direction:column;gap:26px}
.deck__intro{display:flex;gap:28px;align-items:flex-start}
.deck__shot{flex:0 0 160px;max-width:160px;display:flex;flex-direction:column;gap:8px}
.deck__shot .cardwrap{width:100%}
.deck__shot .cap{text-align:center}
.deck__copy{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px}
.deck__eyebrow{display:flex;align-items:center;gap:8px;color:var(--muted)}
.deck__paths{text-wrap:pretty}
.deck__paths-label{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;font-weight:600}
.deck__soon{margin-top:2px;display:flex}
.deck__demo{display:flex;flex-direction:column;gap:16px}
.deck__demo-head{display:flex;flex-wrap:wrap;gap:4px 10px;color:var(--muted)}
.deck__demo-hint{color:var(--ink-soft)}
.deck__trial{max-width:62ch;text-wrap:pretty}
.specials--table{background:var(--chip)}
/* The sentence as a column of the row - only when it is one. Nested in a column of its own
   (the tile of „We dwoje”) a basis of 420 px would be read as a height and stretch the tile. */
.specials__text{text-wrap:pretty}
.specials>.specials__text{flex:1 1 420px}
@media (max-width:559px){
  .deck__intro{gap:18px}
  .deck__shot{flex:0 0 108px;max-width:108px}
}

/* ---------- demo cards of a deck ----------
   The same card component as the simulation: a tap on a card turns it over, the pills under it
   change the language of the card. Three across on a computer, two on a tablet, one on a phone. */
.demos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px;width:100%}
.demo{display:flex;flex-direction:column;align-items:center;gap:10px}
.demo__stage{position:relative;width:100%;max-width:340px;aspect-ratio:2/3}
.demo__stage .stage__persp{position:absolute;inset:0;perspective:1600px}
/* The button covers the whole card, so a tap anywhere on it turns the card over. */
.demo__btn{position:absolute;inset:0;z-index:3;border:0;background:transparent;border-radius:18px;cursor:pointer;padding:0}
.demo__btn:disabled{cursor:default}
.demo__btn:focus-visible{outline:3px solid var(--terracotta);outline-offset:6px}
.demo__caption{display:flex;flex-direction:column;gap:2px;text-align:center}
.demo__title{font:600 18px/24px var(--serif);color:var(--moss)}
.demo__path{color:var(--muted)}
.demo__pills{justify-content:center}
@media (max-width:899px){
  .demos{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
}
@media (max-width:559px){
  .demos{grid-template-columns:minmax(0,1fr);gap:28px;justify-items:center}
  .demo{width:100%;max-width:340px}
}

/* ---------- the night application: the announcement on the home page and its own page ----------
   Decision 23: „We dwoje nocą” is an application of its own. Both places are set in the colours
   of its deck - plum paper, warm sand ink - and say nothing a child should not read. */
.band--night{background:#2C1B2E;border-block:1px solid #43294A}
.night-teaser{flex-flow:row wrap;gap:22px 40px;align-items:center;justify-content:space-between}
.night-teaser__copy{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:10px}
.night-teaser__eyebrow,.night-eyebrow{display:flex;align-items:center;gap:10px;color:#C2A98C}
.night-teaser__title,.night-title{color:#EACB9C}
.night-teaser__lead,.night-lead{color:#F0DFC8;max-width:46em}
.age--night{background:#C7465E;color:#fff}
.btn--night{background:#EACB9C;color:#2C1B2E}
.btn--night:hover{background:#F3DDB6;color:#2C1B2E}
.night-hero{background:#2C1B2E;border-bottom:1px solid #43294A}
.night-hero__in{display:flex;flex-wrap:wrap;gap:44px;align-items:center;padding-block:52px}
.night-hero__copy{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.night-adults{max-width:46em;border-left:2px solid #6A4660;padding-left:14px;color:#E3CDB4;text-wrap:pretty}
.night-paths{color:#C2A98C;text-wrap:pretty}
.night-paths .deck__paths-label{color:#A98E86}
.night-hero__cover{flex:0 1 240px;min-width:0;margin-inline:auto;display:flex;flex-direction:column;gap:10px}
.night-hero__cap{color:#C2A98C;text-align:center;text-wrap:pretty}
.night-stores{display:flex;flex-direction:column;gap:8px}
.night-stores__title{color:#C2A98C}
.soon__item--night{border-color:#6A4660;color:#E3CDB4}
.night-about .feature__icon{background:var(--paper);border-color:#E7D3B4}
.night-about .feature__icon img{width:24px;height:auto}
.night-back{margin-top:6px}
.night-back-section{padding-block:28px}
/* The sentence under a group of cards or under a grid: a quiet aside, never a headline. */
.night-note{margin-top:18px;max-width:52em;text-wrap:pretty}
/* „Warto wiedzieć” said next to the cards of „Kink” (decision 24a). */
.deck__know{max-width:60em;border-left:2px solid var(--line-strong);padding-left:14px;text-wrap:pretty}
/* „We dwoje” as the deck this application lets a visitor buy on top of its own (decision 23b):
   its cover and two sentences, no card. The tile is set like the panels of the decks above it,
   only smaller: the back of the deck on the left, the copy next to it and nothing else. The
   cover is what gives the tile its height (on a phone it is the copy), so no beige is left
   over; the copy never drops below the cover, and its measure stays a readable one. */
.night-extra{display:flex;gap:22px 28px;align-items:center}
.night-extra__shot{flex:0 0 140px;max-width:140px;margin:0}
.night-extra__shot .cardwrap{width:100%}
.night-extra__copy{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px}
.night-extra__copy .specials__text{max-width:52ch}
@media (max-width:559px){
  .night-extra{gap:18px}
  .night-extra__shot{flex:0 0 108px;max-width:108px}
}
/* „Zostaje u Was” on the dark band: cards in the paper of the night deck, so the promise about
   the phone reads as part of the application and not as a legal note. */
.night-privacy{display:flex;flex-direction:column;gap:22px}
.night-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(236px,100%),1fr));gap:16px;list-style:none}
.night-list__item{background:#38213A;border:1px solid #4E3254;border-radius:18px;padding:18px;
  display:flex;flex-direction:column;gap:6px}
.night-list__item .title{color:#EACB9C}
.night-list__item .small{color:#E3CDB4;text-wrap:pretty}
.night-privacy__note{color:#E3CDB4}
.lnk--night{color:#EACB9C;text-decoration-color:#8E6B86}
.lnk--night:hover{color:#F3DDB6}
/* The stores are the target of the button under the simulation, so they must not end up
   behind the sticky header. */
.night-stores{scroll-margin-top:calc(var(--header-h) + 24px)}
/* The mock-up of the night application: the same component as on the home page, dressed in
   the colours of its deck (plum paper, warm sand ink, raspberry accent). The logotype and the
   leaf mark on the cards keep the brand colours - that is settled in .card--deck. */
/* The copy stands over the mock-up, which is centred like every phone on this site, so the
   whole section reads as one column instead of leaning to the left. */
.night-sim .sec-head{align-items:center;text-align:center}
.night-sim .sec{color:#EACB9C}
.night-sim .lead{color:#F0DFC8}
.night-sim :focus-visible{outline-color:#EACB9C}
.sim--night{margin-top:6px}
.sim--night .phone{background:#2C1B2E;border-color:#53365A;box-shadow:0 0 0 1px #43294A,0 24px 56px rgba(0,0,0,.34)}
.sim--night .phone__date{color:#C2A98C}
.sim--night .phone__title{color:#EACB9C}
.sim--night .pill{background:#43294A;color:#E3CDB4}
.sim--night button.pill:hover{background:#573A5E;color:#F0DFC8}
.sim--night .pill.on,.sim--night button.pill.on:hover{background:#EACB9C;color:#2C1B2E}
.sim--night .stage__under .card{box-shadow:0 6px 16px rgba(0,0,0,.34)}
.sim--night .sim__hint{color:#C7465E}
.sim--night .sim__demo,.sim--night .sim__caption{color:#C2A98C}
.sim--night .sim__spent-text{color:#F0DFC8}
.sim--night .btn.quiet{background:#43294A;color:#F0DFC8}
.sim--night button.btn.quiet:hover{background:#573A5E;color:#F0DFC8}
.sim--night .sim__actions .btn:not(.quiet){background:#C7465E;color:#fff}
.sim--night .sim__actions .btn:not(.quiet):hover{background:#D9596F;color:#fff}
.sim--night .phone__nav{background:#2C1B2E;border-top-color:#43294A}
.sim--night .phone__nav>span{color:#A98E86}
.sim--night .phone__nav .on{color:#EACB9C}
.sim--night .phone__nav .lock{background:#2C1B2E}
.sim--night .sim__noscript{color:#C2A98C}
@media (max-width:759px){
  .night-hero__in{padding-block:34px;gap:28px}
}

/* ---------- a few more things ---------- */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:26px 32px}
.feature{display:flex;gap:14px;align-items:flex-start}
.feature__icon{width:44px;height:44px;border-radius:50%;background:var(--canvas);border:1.5px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;color:var(--terracotta);flex:none}
.feature .small{margin-top:4px}

/* ---------- free and Plus ---------- */
.plans-notes{display:flex;flex-wrap:wrap;gap:20px 36px}
.plans-note{flex:1 1 320px;min-width:0;display:flex;gap:12px;align-items:flex-start}
.plans-note img{width:26px;flex:none;margin-top:2px}
.plans{width:100%;border-collapse:collapse;text-align:left}
.plans th,.plans td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.plans thead th{font:600 13px/18px var(--sans);letter-spacing:.3px;text-transform:uppercase;color:var(--muted);
  border-bottom:1.5px solid var(--line-strong)}
.plans__feature{font:500 16px/24px var(--sans);color:var(--ink)}
.plans__col{font:400 15px/22px var(--sans);color:var(--ink-soft);width:22%}
.plans__col--plus{background:var(--chip);color:var(--ink)}
.plans tbody tr:last-child th,.plans tbody tr:last-child td{border-bottom:0}
@media (max-width:719px){
  /* On a phone every row becomes a small card; the two values keep the names of their columns,
     printed from data-label (the markup is not repeated). */
  .plans,.plans tbody,.plans tr,.plans th,.plans td{display:block}
  .plans thead{display:none}
  .plans tr{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 16px;margin-bottom:12px}
  .plans th,.plans td{border-bottom:0;padding:0}
  /* Two classes, so these win over ".plans td" above and the cells really become rows. */
  .plans .plans__feature{padding-bottom:10px}
  .plans .plans__col{width:auto;display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    padding:7px 0;border-top:1px solid var(--line);text-align:right}
  .plans .plans__col--plus{background:none}
  .plans .plans__col::before{content:attr(data-label);flex:none;font-weight:600;color:var(--muted);text-align:left}
}

/* ---------- the calendar in the header and the hero ---------- */
.lnk--now{color:#B23A2E;font-weight:600}
.banner{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;max-width:34em;padding:14px 18px;
  border-radius:18px;background:var(--chip);border:1px solid var(--line-strong);text-decoration:none;color:var(--ink)}
.banner:hover{background:#F6E3C2;color:var(--ink)}
.banner__label{color:#B23A2E}
.banner__text{font:400 16px/24px var(--sans);color:var(--ink-soft);flex:1 1 14em}
.banner__cta{font:600 15px/24px var(--sans);color:var(--terracotta)}

/* ---------- garden ---------- */
.garden{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.garden__copy{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:18px}
.garden__images{flex:1 1 460px;min-width:0;display:flex;gap:14px}
.garden__images img{flex:1;min-width:0;width:0;aspect-ratio:1;object-fit:cover;border-radius:20px}
@media (max-width:640px){.garden{gap:32px}.garden__images{gap:10px}.garden__images img{border-radius:14px}}

/* ---------- three promises ---------- */
.promises{display:flex;flex-wrap:wrap;gap:32px}
.promises__item{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:10px}
.promises__item img{width:30px}

/* ---------- Slowtico band ---------- */
.slowtico{display:flex;flex-wrap:wrap;gap:32px;align-items:center}
.slowtico__copy{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:14px}
.slowtico__label{color:#F9C98A}
.slowtico .sec{color:#FFF9EE}
.slowtico__text{font:400 17px/27px var(--sans);color:#E9EFDD;max-width:34em;text-wrap:pretty}
/* The sentence about the workshop suggestions inside the application (decision 28). */
.slowtico__note{color:#E9EFDD;max-width:40em;border-left:2px solid #F9C98A;padding-left:14px;text-wrap:pretty}
.band--moss :focus-visible{outline-color:#FFF9EE}

/* ---------- final call and footer ---------- */
.final{padding-block:64px}
.final__in{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.final__mark{width:44px}
.site-footer{border-top:1px solid var(--line)}
.site-footer__in{padding-block:28px;display:flex;flex-direction:column;gap:14px}
/* Company details: a small, quiet paragraph above the links. */
.site-footer__registry{max-width:78ch;text-wrap:pretty}
.site-footer__row{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.site-footer__copy{margin-right:auto}
.site-footer__nav{display:flex;flex-wrap:wrap;gap:0 14px}
@media (max-width:420px){
  /* Two by two, so no link is left alone on the last row. */
  .site-footer__nav{display:grid;grid-template-columns:repeat(2,max-content);gap:0 28px}
}
/* The note the licence of the IP-to-country database asks for: the smallest line on the page. */
.site-footer__geo a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.site-footer__geo a:hover{color:var(--terracotta)}

/* ---------- the Christmas calendar (/kalendarz/) ---------- */
.advent-hero{background:var(--paper);border-block:1px solid var(--line)}
.advent-hero__in{display:flex;flex-wrap:wrap;gap:44px;align-items:center;padding-block:48px}
.advent-hero__copy{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.big--sm{font-size:clamp(34px,4.2vw,56px);line-height:1.08;text-wrap:balance}
.advent-eyebrow{color:#B23A2E}
.advent-state{max-width:36em;text-wrap:pretty}
.advent-count,.advent-preview{color:var(--muted)}
.advent-cta{background:#9E3327}
.advent-cta:hover{background:#7E2820}
/* The viewer: the same card component as the simulation, without the phone around it. */
.viewer{flex:0 1 320px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px;border-radius:24px}
.viewer:focus{outline:none}
.viewer:focus-visible{outline:3px solid var(--terracotta);outline-offset:6px}
.viewer__stage{position:relative;width:min(100%,300px);aspect-ratio:2/3;cursor:pointer}
.viewer__stage .stage__persp{position:absolute;inset:0;perspective:1600px}
.viewer__caption{font:600 15px/22px var(--sans);color:var(--moss);text-align:center}
.viewer__bar{display:flex;flex-direction:column;align-items:center;gap:10px}
.viewer__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.viewer__actions .btn{min-height:46px;padding-inline:20px;font-size:15px}
/* Twenty-four windows: six across on a computer, four on a phone. */
.doors{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.door{position:relative}
.door__open,.door__shut{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:2/3;
  border-radius:12px;overflow:hidden;text-decoration:none}
.door__open{background:var(--paper);box-shadow:0 6px 16px var(--shadow)}
.door__open:focus-visible{outline-offset:4px}
.door__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.door__badge{position:absolute;top:6px;left:6px;z-index:1;width:26px;height:26px;border-radius:50%;background:#9E3327;
  color:#FFF6E3;font:600 13px/26px var(--sans);text-align:center;box-shadow:0 2px 6px rgba(120,30,25,.3)}
.door__now{position:absolute;bottom:0;left:0;right:0;z-index:1;padding:5px 4px;background:#9E3327;color:#FFF6E3;
  font:600 11px/1.2 var(--sans);letter-spacing:.6px;text-transform:uppercase;text-align:center}
.door--today .door__open{box-shadow:0 0 0 3px #C9A227,0 6px 18px rgba(201,162,39,.45)}
/* A window that has not opened: the server never sent its card, so there is nothing to show. */
.door__shut{flex-direction:column;gap:4px;background:#2F5A43;color:#E7EFE8}
.door__shut::after{content:"";position:absolute;inset:6px;border:1px solid rgba(255,249,238,.25);border-radius:8px}
.door__n{font-size:26px;line-height:1.3;color:#F6D488}
.door__date{font:600 10px/1 var(--sans);letter-spacing:.8px;text-transform:uppercase;color:rgba(255,249,238,.82)}
.steps--dark .h2{color:#FFF9EE}
.steps--dark .p{color:#E9EFDD}
.num--gold{color:#F6D488}
.advent-how .steps{padding-block:4px}
.advent-app{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
.advent-app__copy{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:18px}
.advent-app__mark{width:48px}
.viewer{scroll-margin-top:calc(var(--header-h) + 16px)}
@media (max-width:759px){
  .advent-hero__in{padding-block:32px;gap:28px}
  .viewer{flex:1 1 100%;margin-inline:auto}
}
@media (max-width:559px){
  .doors{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .door__badge{top:4px;left:4px;width:21px;height:21px;font-size:11px;line-height:21px}
  .door__n{font-size:20px}
  .door__now{font-size:9px;letter-spacing:.4px}
}

/* ---------- placeholder pages ---------- */
.stub__in{min-height:56vh;padding-block:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center}
.stub__mark{width:44px}