/* Systole — Kardiologie in Frankfurt (fictional cardiology practice, demo by FIB Consulting).
   The v2 look Filip asked for (1. 11. 2026, "červené pozadí, bílý text, srdce skleněné, liquid glass") from the prototype
   in docs/prototypy/kardiologie/: a red page with white type, the name across the full width, in front of it a beating
   heart of glass, panels as "liquid glass", and the page as a circulatory system (artery down the right edge, vein up the
   left, a capillary bed over every section, drawn on a fixed canvas by flow.js). Instrument Sans (text; headings at
   87.5 % width) and IBM Plex Mono (labels), both SIL OFL, served by the site itself. No serif, no italics. */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;src:url(fonts/instrument-sans-latin-standard-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

:root{
  --red:#B10F22;--red-2:#9C0C1D;--red-3:#5E0611;--ink:#FFFFFF;--mist:rgba(255,255,255,.86);--soft:rgba(255,255,255,.80);--line:rgba(255,255,255,.26);--line-2:rgba(255,255,255,.4);
  --rose:#FFC2CA;--artery:#6A0414;--pulse:#FFFFFF;--vein:#2B0B55;--vein-hi:#E6C9FF;
  --glass:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.04) 55%,rgba(255,255,255,.09));
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --m:max(22px,4vw);--maxw:1560px;--ease:cubic-bezier(.2,.7,.2,1);
  --kit-bar-bg:#5E0611;--kit-bar-fg:#F6D9DD;--kit-focus:#FFFFFF;--kit-accent:#FFFFFF;--kit-font:var(--sans);--kit-line:var(--line);
  --kit-msg-bg:#5E0611;--kit-msg-fg:#FFFFFF;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--red);-webkit-text-size-adjust:100%;color-scheme:dark}
body{background:var(--red);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-weight:700;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
h1,h2{font-stretch:87.5%;letter-spacing:-.03em}
p,li{text-wrap:pretty}
::selection{background:#fff;color:var(--red)}
:focus-visible{outline:2.5px solid var(--kit-focus);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--m);padding-right:var(--m)}
.mono{font:500 11.5px/1.45 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.muted{color:var(--soft)}
.link{color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em}
.link:hover{color:var(--rose)}
.big{font:700 clamp(24px,2.4vw,34px)/1.05 var(--sans);letter-spacing:-.03em;text-decoration:none}
sup.fn{font:500 .62em var(--mono);line-height:0;margin-left:1px}sup.fn a{text-decoration:none;color:var(--rose)}
/* liquid glass: a translucent pane with a bright rim and a soft highlight across the top */
.glass{position:relative;background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(105%);backdrop-filter:blur(16px) saturate(105%);border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.22),inset 0 -14px 30px rgba(255,255,255,.04)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 60% at 15% -10%,rgba(255,255,255,.22),transparent 55%)}
.glass>*:not(.kit-sr){position:relative}
.kit-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the vessels: a fixed canvas between the section backgrounds (z-index -1) and the content (positioned, after it) */
.flow{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
.lay{position:relative}

/* ---------- buttons: pills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border:0;border-radius:999px;text-decoration:none;cursor:pointer;
  font:600 15px/1 var(--sans);white-space:nowrap;background:#fff;color:var(--red);transition:background .2s,color .2s}
.btn:hover{background:#FFE3E7}
.btn-glass{background:var(--glass);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.22)}
.btn-glass:hover{background:rgba(255,255,255,.26);color:#fff}
.btn:disabled{opacity:.4;cursor:default}
.btn:disabled:hover{background:#fff}
.acts{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- header ---------- */
.top{position:relative;z-index:50;background:var(--red)}
.top-bar{display:flex;align-items:center;gap:24px;min-height:74px}
.brand{display:grid;gap:3px;text-decoration:none;line-height:1}
.brand b{font:700 25px/1 var(--sans);font-stretch:87.5%;letter-spacing:-.03em;text-transform:uppercase}
.brand span{color:var(--mist)}
.menu{margin-left:auto;display:flex;align-items:center;gap:26px}
.menu ul{display:flex;gap:24px;list-style:none;font-size:15.5px}
.menu ul a{display:block;padding:8px 0;text-decoration:none;white-space:nowrap}
.menu ul a:hover,.menu ul a[aria-current="page"]:not([href*="#"]){text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1.5px}
.menu .btn{min-height:44px;padding:0 20px}
.menu-btn{display:none;margin-left:auto;width:46px;height:46px;border:0;background:transparent;cursor:pointer;position:relative;color:var(--ink)}
.burger,.burger::before,.burger::after{position:absolute;left:12px;width:22px;height:2px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.burger{top:22px}.burger::before,.burger::after{content:"";left:0}.burger::before{top:-7px}.burger::after{top:7px}
.menu-btn[aria-expanded="true"] .burger{background:transparent}
.menu-btn[aria-expanded="true"] .burger::before{transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .burger::after{transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1100px){
  .menu-btn{display:block}
  .menu{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;gap:16px;padding:8px var(--m) 24px;background:var(--red);border-bottom:1px solid var(--line-2)}
  .menu.is-open{display:flex}
  .menu ul{flex-direction:column;gap:0}
  .menu ul a{font:700 30px/1.1 var(--sans);font-stretch:87.5%;letter-spacing:-.03em;padding:8px 0}
}
.crumb{display:flex;gap:10px;padding-top:18px;color:var(--soft)}
.crumb a{color:var(--soft)}

/* ---------- page head of sub pages ---------- */
.ph{padding-top:clamp(24px,4vw,56px);padding-bottom:clamp(40px,5vw,72px);border-bottom:1px solid var(--line)}
.ph-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:28px 48px;align-items:end}
.ph h1{font-size:clamp(48px,8vw,140px);line-height:.9;letter-spacing:-.04em}
.ph .lead{font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--mist);max-width:30em}
.ph .acts{margin-top:22px}
@media(max-width:860px){.ph-in{grid-template-columns:1fr}}

/* ---------- the cover (home): the name across the page, the glass heart in front of it ---------- */
.cover{position:relative;min-height:max(720px,calc(100svh - 74px - 37px));overflow:hidden;background:var(--red);isolation:isolate}
.stage{position:absolute;inset:0;z-index:2;pointer-events:none}
.stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;opacity:0;transition:opacity 1.2s ease}
.cover.is-live .stage canvas{opacity:1}
.heart-still{position:absolute;left:50%;top:0;height:100%;transform:translateX(-50%)}
.heart-still img{height:100%;width:auto;max-width:none;transition:opacity 1.2s ease}
.cover.is-live .heart-still img{opacity:0}
.word{position:relative;z-index:1;display:block;margin-top:clamp(6px,1.2vw,18px);padding:0 var(--m);font:700 20vw/.8 var(--sans);font-stretch:87.5%;letter-spacing:-.03em;white-space:nowrap;text-transform:uppercase;color:#fff;transition:color .6s}
.cover.is-live .word{color:transparent}                     /* the glass heart refracts its own copy, drawn in WebGL */
.side{position:absolute;z-index:3;top:calc(clamp(6px,1.2vw,18px) + 15.5vw + 24px);color:var(--mist);line-height:1.5}
.side.l{left:var(--m)}.side.r{right:var(--m);text-align:right}
.side a{text-decoration:none}
.cover-foot{position:absolute;z-index:3;left:var(--m);right:var(--m);bottom:clamp(26px,3vw,44px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end}
.cover-foot h1{font-size:clamp(36px,4vw,68px);line-height:.95;letter-spacing:-.025em;max-width:7em}
.cover-foot .lead{margin-top:16px;max-width:28em;font-size:clamp(16px,1.15vw,18px);line-height:1.5;color:var(--mist)}
.cover-foot .r{display:grid;justify-items:end;gap:14px}
.sos{font-size:14.5px;color:var(--mist);text-align:right;max-width:26em}.sos b{color:#fff}
.cover .kit-sr{position:absolute}
@media(max-width:760px){
  .cover{min-height:0;display:flex;flex-direction:column;padding-bottom:30px}
  .word{order:1;font-size:24vw}
  .stage{order:2;position:relative;inset:auto;height:118vw;margin-top:-26vw}
  .side{display:none}
  .cover-foot{order:3;position:relative;left:auto;right:auto;bottom:auto;margin:-6vw var(--m) 0;grid-template-columns:minmax(0,1fr)}
  .cover-foot .r{justify-items:start}.sos{text-align:left}
}

/* ---------- the notice (Aushang), the sign on the door ---------- */
.notice{margin-top:clamp(28px,4vw,56px)}
.notice-in{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:20px 40px;align-items:end;padding:30px 36px 34px}
.notice .k{color:var(--rose);margin-bottom:10px}
.notice-in h2{font-size:clamp(24px,2.3vw,34px);line-height:1.15;letter-spacing:-.01em;font-stretch:100%;max-width:20em}
.notice-in p{margin-top:8px;color:var(--mist)}
.notice-in ul{display:grid;gap:8px;list-style:none;align-self:center;font-size:15.5px;color:var(--mist)}
.notice-in ul a{color:var(--ink)}
@media(max-width:860px){.notice-in{grid-template-columns:1fr;gap:18px;padding:26px 22px}}

/* ---------- sections; the capillary bed [data-supply] above each one is drawn by flow.js ---------- */
.sec{position:relative;padding-bottom:clamp(30px,3vw,50px)}
.sec.alt::before{content:"";position:absolute;inset:0;background:var(--red-2);z-index:-1}
.supply{height:72px;margin:clamp(40px,4vw,64px) 0 clamp(36px,4vw,56px)}
.sec-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:end;margin-bottom:clamp(30px,4vw,52px)}
.sec-h h2,h2.xl{font-size:clamp(40px,5vw,84px);line-height:.92;letter-spacing:-.03em}
.sec-h p{color:var(--mist);max-width:31em}
.k{display:block;margin-bottom:14px;color:var(--rose)}
.more{display:inline-block;margin-top:24px;font-weight:600;text-decoration:none;border-bottom:1.5px solid #fff;padding-bottom:2px}
.sec-foot{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:clamp(24px,3vw,40px)}
@media(max-width:760px){.sec-h{grid-template-columns:1fr;gap:14px}}
/* how the heart pumps */
.pump{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,5vw,80px);align-items:start}
.pump h2{margin-bottom:22px}
.pump p{color:var(--mist);max-width:31em}.pump p+p{margin-top:14px}
figure.fig{padding:22px 24px 18px}
.fig canvas{display:block;width:100%;height:150px}
.fig figcaption{display:flex;gap:14px;margin-top:12px;font-size:14.5px;color:var(--mist)}
.fig figcaption b{font:500 12.5px/1.6 var(--mono);color:#fff;white-space:nowrap}
/* examinations as a numbered list */
.list{list-style:none;border-top:1.5px solid #fff}
.list li{display:grid;grid-template-columns:56px minmax(0,4fr) minmax(0,6fr) auto;gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.list .n{font:500 13px var(--mono);color:var(--rose)}
.list h3{font:600 22px/1.25 var(--sans)}
.list h3 small{display:block;font-size:14.5px;font-weight:400;color:var(--soft);margin-top:2px}
.list p{color:var(--mist);font-size:16px}
.list a{font-weight:600;text-decoration:none;white-space:nowrap}.list a:hover{text-decoration:underline}
/* examinations in detail (untersuchungen.html) */
.exam{display:grid;grid-template-columns:72px minmax(0,5fr) minmax(0,4fr);gap:20px 32px;padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--line)}
.exam:first-of-type{border-top:1.5px solid #fff}
.exam .n{font:500 13px var(--mono);color:var(--rose);padding-top:8px}
.exam h2{font-size:clamp(28px,2.6vw,40px);line-height:1.05;margin-bottom:12px}
.exam h2 small{display:block;font:400 15px/1.4 var(--sans);font-stretch:100%;letter-spacing:0;color:var(--soft);margin-top:6px}
.exam p{color:var(--mist)}.exam p+p{margin-top:10px}
.exam dl{display:grid;gap:10px;align-content:start;padding:20px 22px}
.exam dt{font:500 11.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--rose)}
.exam dd{color:var(--ink);font-size:15.5px;margin-bottom:4px}
/* blood pressure */
.bp{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(30px,5vw,80px);align-items:start}
.tbl{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:16px}
table.data caption{text-align:left;font-size:14.5px;color:var(--mist);margin-bottom:10px}
table.data th,table.data td{text-align:left;padding:13px 12px 13px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
table.data thead th{font-weight:600;font-size:14px;color:var(--mist);border-bottom:1.5px solid #fff}
table.data td.v{font:500 16px var(--mono);white-space:nowrap}
table.data td i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:10px;vertical-align:0;box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.bp .note{margin-top:18px;color:var(--mist);font-size:15.5px}
.bp-now{font:500 15px var(--mono);color:#fff}
/* next free times, as glass chips */
.slots{display:flex;flex-wrap:wrap;gap:10px}
.slots a,.slot-chip{display:grid;gap:2px;min-width:132px;padding:12px 18px;text-decoration:none;border-radius:16px;position:relative;background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.22)}
.slots b{font-weight:600}.slots span{font:500 14px var(--mono);color:var(--mist)}
.slots a:hover{background:rgba(255,255,255,.28)}
.termin p.small{margin-top:20px;max-width:44em;color:var(--mist);font-size:15.5px}
/* emergency band */
.sos-band{position:relative}
.sos-band::before{content:"";position:absolute;inset:0;background:var(--red-3);z-index:-1}
.sos-band .supply{margin-bottom:10px}
.sos-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;padding:20px 0 clamp(70px,7vw,100px)}
.sos-in h2{font-size:clamp(40px,5vw,84px);line-height:.92}
.sos-in p{color:var(--mist);max-width:32em}.sos-in p+p{margin-top:12px}.sos-in a{color:#fff}
@media(max-width:760px){.sos-in{grid-template-columns:1fr;gap:14px}}
/* emergency page: the three steps and the warning signs */
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.steps3>div{padding:26px 28px 30px}
.steps3 .n{font:700 clamp(44px,5vw,72px)/1 var(--sans);font-stretch:87.5%;letter-spacing:-.04em}
.steps3 h3{font-size:26px;margin:10px 0 10px}
.steps3 p{color:var(--mist);font-size:15.5px}.steps3 p+p{margin-top:8px}
.signs{list-style:none;display:grid;gap:10px;max-width:46em}
.signs li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;color:var(--mist);font-size:16.5px}
.signs li::before{content:"—";color:var(--rose)}
.callout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 28px;align-items:center;padding:24px 26px;margin-top:22px}
.callout b{font:700 clamp(30px,3.6vw,54px)/1 var(--sans);font-stretch:87.5%;letter-spacing:-.04em;color:#fff}
.callout p{color:var(--mist)}
/* cards, two columns, practice */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{padding:24px 26px 26px}
.card h3{font-size:24px;line-height:1.1}
.card .sub{color:var(--rose);margin:6px 0 14px}
.card p{color:var(--mist);font-size:15.5px}.card p+p{margin-top:8px}
.card ul{padding-left:18px;color:var(--mist);font-size:15.5px;display:grid;gap:4px;margin-top:8px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,60px)}
.two p{color:var(--mist)}.two p+p{margin-top:10px}
.two h3{font-size:22px;margin-bottom:10px}
.two ul{padding-left:18px;color:var(--mist);display:grid;gap:6px}
.prax{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.prax>div{padding:24px 26px}
.prax h3{font:600 17px/1.3 var(--sans);margin-bottom:8px}
.prax p{color:var(--mist);font-size:16px}.prax p+p{margin-top:10px}.prax .tiny{font-size:13.5px;color:var(--soft)}
.prax a{color:var(--ink)}
.kit-hours{font-size:15px;color:var(--mist)}
.kit-hours th{font-weight:400}
.kit-hours tr.is-today th,.kit-hours tr.is-today td{color:var(--ink)}
.status{display:inline-block;margin-top:14px;color:var(--rose)}
@media(max-width:1100px){.bp,.pump,.two{grid-template-columns:minmax(0,1fr)}.cards,.prax,.steps3{grid-template-columns:repeat(2,minmax(0,1fr))}.list li{grid-template-columns:44px minmax(0,1fr) auto}.list p{grid-column:2/4}.exam{grid-template-columns:56px minmax(0,1fr)}.exam dl{grid-column:2}}
@media(max-width:760px){.cards,.prax,.steps3{grid-template-columns:minmax(0,1fr)}.list li{grid-template-columns:34px minmax(0,1fr);gap:4px 12px}.list li>a{grid-column:2}.exam{grid-template-columns:minmax(0,1fr);gap:12px}.exam .n{padding:0}.exam dl{grid-column:1}.callout{grid-template-columns:1fr}table.data th,table.data td{padding-right:8px}}

/* ---------- the heart in 3D (herz-3d.html): the viewer and its panel ---------- */
.h3d{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:18px;align-items:start}
.viewer{position:relative;height:min(78vh,760px);min-height:460px;border-radius:26px;overflow:hidden;touch-action:none;cursor:grab;outline:0;background:var(--red-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.16)}
.viewer:focus-visible{box-shadow:inset 0 0 0 2px #fff}
.viewer:active{cursor:grabbing}
.viewer canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;opacity:0;transition:opacity .9s ease}
.viewer.is-live canvas{opacity:1}
.viewer .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .9s ease}
.viewer.is-live .still{opacity:0}
.inset{position:absolute;right:18px;bottom:18px;width:min(30%,190px);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.7);pointer-events:none;background:var(--red-2)}
.inset canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;opacity:1}
.inset::after{content:attr(data-label);position:absolute;left:50%;top:100%;transform:translate(-50%,8px);white-space:nowrap;font:500 10.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mist)}
.viewer .hint{position:absolute;left:18px;bottom:16px;color:var(--mist);pointer-events:none}
.viewer:not(.is-live) .hint{display:none}
.hover{position:absolute;left:0;top:0;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13px;white-space:nowrap;pointer-events:none;opacity:1;transition:opacity .2s}
.hover:empty{opacity:0}
.tag{position:absolute;left:0;top:0;font-size:12.5px;line-height:1.25;color:#fff;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .5s}
.viewer.is-live.is-aufbau .tag{opacity:1}
.tag::before{content:"";position:absolute;top:0;height:1px;width:var(--len,40px);background:currentColor;opacity:.55}
.tag::after{content:"";position:absolute;top:-2.5px;width:6px;height:6px;border-radius:50%;background:#fff}
.tag span{position:absolute;top:-9px}.tag small{display:block;color:var(--mist);font-size:12px}
.tag.l::before{left:0}.tag.l::after{left:calc(var(--len,40px) - 3px)}.tag.l span{right:8px;text-align:right}
.tag.r::before{right:0}.tag.r::after{right:calc(var(--len,40px) - 3px)}.tag.r span{left:8px}
.panel{padding:22px 24px 26px;display:grid;gap:18px;align-content:start}
.tabs{display:flex;gap:6px;padding:4px;border-radius:999px;background:rgba(255,255,255,.12)}
.tabs button{flex:1;min-height:40px;border:0;border-radius:999px;background:transparent;color:#fff;font:600 14.5px var(--sans);cursor:pointer}
.tabs button[aria-selected="true"]{background:#fff;color:var(--red)}
.panel h2{font:700 clamp(24px,2.2vw,32px)/1.05 var(--sans);font-stretch:87.5%;letter-spacing:-.02em}
.panel p{color:var(--mist);font-size:15.5px}
.panel p+p{margin-top:8px}
.conds{display:grid;gap:6px;list-style:none}
.conds button{width:100%;text-align:left;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:baseline;padding:10px 12px;border:0;border-radius:14px;background:transparent;color:#fff;font:600 15px var(--sans);cursor:pointer}
.conds button:hover{background:rgba(255,255,255,.12)}
.conds button[aria-pressed="true"]{background:#fff;color:var(--red)}
.conds button>span:first-child{font:500 12px var(--mono);letter-spacing:.04em;color:inherit;opacity:.75}
.conds button small{display:block;font-weight:400;font-size:13px;opacity:.8;margin-top:2px}
.ct h3{font:700 20px/1.2 var(--sans);margin-bottom:6px}
.ct .sos{margin-top:10px;font-weight:600;color:#fff;text-align:left;max-width:none}
.strip{margin-top:14px;padding:16px 22px 12px}
.strip canvas{display:block;width:100%;height:92px}
.strip .cap{display:flex;gap:14px;margin-top:8px;font-size:14px;color:var(--mist)}.strip .cap b{font:500 12px/1.6 var(--mono);color:#fff;white-space:nowrap}
.h3d-note{padding-top:clamp(30px,4vw,56px);max-width:46em;color:var(--mist);font-size:15.5px}
.h3d-text{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 28px;margin-top:clamp(28px,4vw,48px)}
.h3d-text h3{font-size:22px;margin-bottom:10px}
.h3d-text p{color:var(--mist);font-size:15.5px}
@media(max-width:1000px){.h3d{grid-template-columns:minmax(0,1fr)}.viewer{height:min(70vh,560px)}.h3d-text{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.viewer{margin:0 calc(var(--m) * -1);border-radius:0;height:118vw;min-height:0}.tag{display:none}}
/* the teaser of the 3D page on the home page */
.teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px 48px;align-items:center}
.teaser-pic{display:block;position:relative;border-radius:26px;overflow:hidden;background:var(--red-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.16)}
.teaser-pic img{width:100%;height:auto;aspect-ratio:1200/1000;object-fit:cover}
.teaser-pic span{position:absolute;left:18px;bottom:16px;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chips a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;text-decoration:none;font:600 14px var(--sans);background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.chips a:hover{background:rgba(255,255,255,.26)}
@media(max-width:1100px){.teaser{grid-template-columns:minmax(0,1fr)}}

/* ---------- booking ---------- */
.book{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px 48px;align-items:start}
.reasons{display:grid;border:0;border-top:1.5px solid #fff}
.reason{position:relative;display:block;cursor:pointer}
.reason input{position:absolute;opacity:0;inset:0}
.reason span{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:15px 14px;border-bottom:1px solid var(--line);transition:background .2s}
.reason b{font-weight:700;font-size:18px}.reason small{grid-column:1;color:var(--mist);font-size:14px}
.reason em{grid-row:1/3;grid-column:2;align-self:center;font:500 12px var(--mono);font-style:normal;color:var(--mist)}
.reason:hover span{background:rgba(255,255,255,.08)}
.reason input:checked+span{background:rgba(255,255,255,.18)}
.reason input:checked+span small,.reason input:checked+span em{color:#fff}
.reason input:checked+span b::before{content:"→ "}
.reason input:focus-visible+span{outline:2.5px solid var(--kit-focus);outline-offset:-3px}
.panel-b{position:relative;padding:22px;border-radius:22px;background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.22)}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.cal-head h3{font-size:18px;letter-spacing:-.01em}
.cal-nav{display:flex;gap:6px}
.cal-nav button{width:42px;height:42px;border:0;border-radius:999px;background:rgba(255,255,255,.14);cursor:pointer;font-size:17px;color:var(--ink)}
.cal-nav button:hover{background:rgba(255,255,255,.26)}
.cal-nav button:disabled{opacity:.35;cursor:default}
.days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.day h4{font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--mist);margin-bottom:8px;text-align:center}
.day h4 b{display:block;font:700 16px var(--sans);text-transform:none;letter-spacing:0;color:var(--ink)}
.day ul{list-style:none;display:grid;gap:6px}
.slot{width:100%;min-height:42px;border:0;border-radius:12px;background:rgba(255,255,255,.12);font:500 14px var(--mono);color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.slot:hover{background:rgba(255,255,255,.28)}
.slot[aria-pressed="true"]{background:#fff;color:var(--red)}
.day .off{font-size:13px;color:var(--soft);text-align:center;padding:8px 0}
.cal-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.cal-foot p{font-size:14.5px;color:var(--mist)}
.form{display:grid;gap:14px;margin-top:16px}
.field{display:grid;gap:5px}
.field label{font-weight:600;font-size:15px}
.field input{min-height:48px;padding:0 14px;border:1px solid var(--line-2);border-radius:12px;background:rgba(255,255,255,.1);font:400 16px var(--sans);color:var(--ink)}
.field input:focus{outline:2.5px solid var(--kit-focus);outline-offset:1px}
.hint,.form-note{font-size:14px;color:var(--mist)}
.phone-card{margin-top:20px;padding:20px 0;border-top:1.5px solid #fff}
@media(max-width:900px){.book{grid-template-columns:minmax(0,1fr)}.days{grid-template-columns:repeat(5,minmax(112px,1fr));overflow-x:auto;padding-bottom:6px}}

/* holographic appointment ticket (reference #19): white card with a rose-and-violet sheen */
.ticket-wrap{margin-top:18px;perspective:1100px}
.ticket{--mx:.5;--my:.3;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 124px;max-width:580px;color:var(--red-3);transform-style:preserve-3d;border-radius:22px;overflow:hidden;
  transform:rotateX(calc((var(--my) - .5) * -10deg)) rotateY(calc((var(--mx) - .5) * 14deg));transition:transform .15s linear;
  background:linear-gradient(115deg,#FFFFFF,#FFF1F3 45%,#F6E9FF);box-shadow:0 30px 60px -30px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.8)}
.ticket::before{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.28;
  background:linear-gradient(calc(110deg + var(--mx) * 60deg),#FFC2CA 0%,#E6C9FF 25%,#FFD9A8 50%,#E6C9FF 75%,#FFC2CA 100%);
  background-size:220% 220%;background-position:calc(var(--mx) * 100%) calc(var(--my) * 100%)}
.ticket::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at calc(var(--mx) * 100%) calc(var(--my) * 100%),rgba(255,255,255,.7),rgba(255,255,255,0) 42%)}
.ticket-main{position:relative;z-index:1;padding:20px 22px;display:grid;gap:10px}
.ticket-main .mono{color:var(--red)}
.ticket-main h3{font-size:30px;letter-spacing:-.04em;color:var(--red)}
.ticket-main dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14.5px}
.ticket-main dt{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:rgba(94,6,17,.7);padding-top:3px}
.ticket-main .muted{color:rgba(94,6,17,.6)}
.ticket-bar{height:34px;margin-top:4px;background:repeating-linear-gradient(90deg,var(--red-3) 0 2px,transparent 2px 4px,var(--red-3) 4px 5px,transparent 5px 8px,var(--red-3) 8px 11px,transparent 11px 12px);opacity:.85}
.ticket-stub{position:relative;z-index:1;display:grid;place-content:center;gap:8px;text-align:center;padding:16px 10px;border-left:2px dashed rgba(94,6,17,.4);cursor:grab;touch-action:none;transition:transform .6s var(--ease),opacity .6s}
.ticket-stub b{font:700 32px var(--sans);letter-spacing:-.04em;color:var(--red)}
.ticket-stub small{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(94,6,17,.7)}
.ticket-stub button{border:0;border-radius:999px;background:var(--red);color:#fff;padding:8px 10px;font:600 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.ticket.is-torn .ticket-stub{transform:translate(40px,30px) rotate(14deg);opacity:0}
.ticket-note{margin-top:12px;font-size:14px;color:var(--mist);max-width:580px}
.link-btn{border:0;background:none;padding:0;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.ticket-wrap .kit-form-msg{max-width:580px;border-radius:14px}
@media(max-width:560px){.ticket{grid-template-columns:1fr}.ticket-stub{border-left:0;border-top:2px dashed rgba(94,6,17,.4)}}

/* ---------- prose, FAQ, sources, footer, dock ---------- */
.prose{max-width:780px;padding-top:36px;padding-bottom:48px}
.prose h1{font-size:clamp(44px,6vw,84px);line-height:.92;letter-spacing:-.04em;margin-bottom:22px}
.prose h2{font-size:22px;font-stretch:100%;letter-spacing:-.02em;margin:30px 0 8px}
.prose p,.prose li{color:var(--mist)}
.prose ul{padding-left:20px;display:grid;gap:4px}
.prose a{color:var(--ink)}
.faq{max-width:900px;border-top:1.5px solid #fff}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;padding:22px 2px;font-weight:600;font-size:clamp(18px,1.5vw,21px);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 24px/1 var(--mono);color:var(--mist);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 2px 22px;color:var(--mist);max-width:64ch}
.src{padding-top:56px;padding-bottom:40px}
.src h2{font-size:16px;font-stretch:100%;letter-spacing:-.005em}.src h2 span{font-weight:400;color:var(--mist);margin-left:8px}
.src ol{margin-top:10px;padding-left:22px;display:grid;gap:4px;font-size:14px;color:var(--mist)}
.src a{color:var(--mist)}
.foot{position:relative;padding:0 0 calc(28px + env(safe-area-inset-bottom,0px));overflow:hidden}
.foot .supply{margin:20px 0 4px}
.foot-word{font:700 31vw/.78 var(--sans);font-stretch:87.5%;letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap;width:max-content;margin-left:-.03em;padding-top:1vw;color:var(--ink)}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px 48px;margin-top:clamp(28px,4vw,56px);padding-top:24px;border-top:1px solid var(--line-2)}
.foot h2{font:500 11.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mist);margin-bottom:10px}
.foot nav h2+ul+h2{margin-top:18px}
.foot ul{list-style:none;display:grid;gap:4px;font-size:15.5px}
.foot a{color:var(--ink)}
.foot-brand p+p{margin-top:12px;font-size:15.5px;color:var(--mist)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:40px;padding-top:16px;border-top:1px solid var(--line);color:var(--mist)}
.foot-base strong{font-weight:500;color:var(--ink)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr}}
.dock{display:none}
@media(max-width:760px){
  .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;gap:0;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--red-3);border-top:1px solid var(--line)}
  .dock a{flex:1;display:flex;align-items:center;justify-content:center;min-height:54px;text-decoration:none;font:600 14px var(--sans);color:#fff}
  .dock .dock-main{background:#fff;color:var(--red)}
  .foot{padding-bottom:84px}
}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.ticket{transform:none}.ticket-stub{transition:none}.stage canvas,.viewer canvas{transition:none}}