:root{
  --bg:#f2f1ee; --ink:#141416; --muted:#525a66; --accent:#5b6675; --silver:#b9bdc4; --teal:#0f8f85;
  --glass:rgba(255,255,255,.72); --line:rgba(20,20,22,.08); --line2:rgba(20,20,22,.16);
  --glass-solid:rgba(255,255,255,.88);   /* phones and no-blur: the card without backdrop-filter */
  --glass-bar:rgba(255,255,255,.975);    /* the pinned action row: the card scrolls UNDER it, so it must not show through */
  --scrim-a:rgba(242,241,238,.94); --scrim-b:rgba(242,241,238,.86); --scrim-c:rgba(242,241,238,0);
  --ui:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Manrope",system-ui,-apple-system,sans-serif;   /* το τελικό «ς» της Inter Tight σε μεγάλο μέγεθος διαβάζεται σαν κόμμα */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--ui);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.has-cursor{cursor:none}
body.has-cursor a,body.has-cursor button{cursor:none}
a{color:inherit}
:where(a,button,input,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:inherit}
.skip{position:fixed;left:-9999px;top:0;z-index:50;font-weight:800;font-size:13px;text-decoration:none;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 14px 0}
.skip:focus{left:0;top:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
::selection{background:rgba(91,102,117,.22)}

#scene{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 60%,rgba(20,20,22,.10) 100%)}
.grain{position:fixed;inset:-20%;width:140%;height:140%;z-index:2;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .75 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.4s steps(7) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-2%,1%)}40%{transform:translate(1%,-2%)}60%{transform:translate(-1%,2%)}80%{transform:translate(2%,1%)}100%{transform:translate(0,0)}}
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:8;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--silver),var(--ink));transform-origin:left;transform:scaleX(0)}

/* custom cursor */
.cursor{position:fixed;left:0;top:0;z-index:40;pointer-events:none;transform:translate(var(--x,-100px),var(--y,-100px));mix-blend-mode:difference}
.cursor::before{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#fff}
.cursor::after{content:attr(data-label);position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);
  display:grid;place-items:center;font:800 10px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:#fff;white-space:nowrap;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),background .35s,border-color .35s;transform:scale(1)}
body.is-hover .cursor::after{transform:scale(2.4);background:rgba(255,255,255,.12);border-color:transparent;font-size:5px}
body.on-ui .cursor::after{transform:scale(.6);border-color:rgba(255,255,255,.5)}
body.touch .cursor{display:none}

/* loader */
#loader{position:fixed;inset:0;z-index:30;background:var(--bg);display:grid;place-items:center}
.loader-inner{display:grid;gap:16px;justify-items:center}
.loader-name{font-family:var(--display);font-weight:800;font-size:clamp(24px,3.4vw,40px);letter-spacing:-.035em}
.loader-bar{width:180px;height:2px;background:rgba(20,20,22,.1);border-radius:2px;overflow:hidden}
.loader-bar i{display:block;height:100%;width:100%;background:var(--ink);transform-origin:left;transform:scaleX(0);transition:transform .3s ease}
.loader-hint{font-size:12px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.loader-pct{font-family:var(--display);font-weight:700;font-size:12px;color:var(--muted);letter-spacing:.06em}

/* chrome */
.topbar{position:fixed;top:0;left:0;right:0;z-index:9;display:flex;justify-content:space-between;align-items:center;padding:24px clamp(18px,4vw,44px)}
.topbar::before{content:"";position:absolute;inset:0 0 -34px 0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(242,241,238,.92) 0%,rgba(242,241,238,.55) 55%,rgba(242,241,238,0) 100%)}
.brand{font-family:var(--display);font-weight:800;font-size:20px;text-decoration:none;letter-spacing:-.04em;display:flex;align-items:center;gap:10px}
.brand i{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#e6e8ec,#9a9fa8);box-shadow:0 1px 4px rgba(20,20,22,.25)}
.topnav{display:flex;gap:6px}
.topnav a{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:10px 14px;border-radius:999px;color:var(--muted);transition:color .3s,background .3s}
.topnav a:hover{color:var(--ink);background:rgba(20,20,22,.05)}
.snd{flex:none;width:34px;height:34px;margin-right:8px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.55);display:grid;place-items:center;padding:0;cursor:pointer}
.snd:hover{border-color:var(--ink)}
.snd svg{width:17px;height:17px;display:block}
.snd .spk{fill:var(--ink);opacity:.6;transition:opacity .25s}
.snd .w1,.snd .w2{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;opacity:0;transition:opacity .3s}
.snd[data-on="1"] .spk{opacity:1}
.snd[data-on="1"] .w1{opacity:1}
.snd[data-on="1"] .w2{opacity:.55}
body.room-dark .snd{background:rgba(255,255,255,.06)}
.lang{flex:none;font-size:12px;font-weight:800;letter-spacing:.1em;padding:10px 12px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.55);color:var(--ink);margin-right:10px;font-family:var(--ui)}
.lang:hover{border-color:var(--ink)}
.cta{flex:none;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:11px 18px;border-radius:999px;border:1px solid var(--line2);
  background:rgba(255,255,255,.72);transition:border-color .3s,background .3s,transform .3s}
.cta:hover{border-color:var(--ink);background:rgba(20,20,22,.06);transform:translateY(-1px)}
.dots{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:9;display:grid;background:rgba(242,241,238,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:6px 2px}
.dots button{width:24px;height:24px;border:0;padding:0;background:none;position:relative}
.dots button::before{content:"";position:absolute;inset:8px;border-radius:50%;background:rgba(20,20,22,.46);transition:transform .4s cubic-bezier(.2,.7,.2,1),background .4s}
.dots button:hover::before{background:rgba(20,20,22,.6)}
.dots button.active::before{background:var(--ink);transform:scale(1.5)}
.counter{position:fixed;left:clamp(18px,4vw,44px);bottom:26px;z-index:9;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--muted)}
.counter b{color:var(--ink);font-weight:800}

/* stage */
main{position:relative;z-index:3}
.stage{min-height:130vh;display:grid;align-items:center;padding:0 clamp(20px,4vw,72px);position:relative}
.stage.outro{min-height:100vh}
/* The hero is the only panel you meet before you know what the page does, so it is the one that must
   HOLD. It is longer than the others and its text is pinned while the desk stays still; the camera
   leaves only once the name has been read. It used to be readable for 100 px of scroll, against 850
   for every other section. */
.stage.hero{min-height:160vh}
.stage.outro{align-items:end;padding-bottom:9vh}
.stage[data-side="right"] .panel{justify-self:end}
#projects .panel{max-width:576px}      /* τα chips και τα κουμπιά ακουμπούσαν στην άκρη */
#projects .stats{margin:0 0 16px}
#projects .chips{gap:9px}
#projects .chips span{padding:7px 13px}
/* «Περισσότερα για το project» sat 18 px under the «Αυτόματες ειδοποιήσεις» pill: four rounded shapes
   stacked into one cluster. A rule and real air turn it into an action row instead of another chip. */
#projects .more{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
#skills .panel{max-width:640px;padding:28px 34px 30px}
#skills .list{gap:7px}
#skills .list li{font-size:14.5px}
#skills .soft-list{gap:8px 18px}
#skills .soft-list li{font-size:13px;line-height:1.4}
#skills .soft-list b{font-size:13.5px}
#skills h3.skill-group{margin:14px 0 6px}
.panel{position:relative;max-width:500px;width:100%;padding:36px 40px 38px;border-radius:28px;background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 30px 80px rgba(20,20,30,.12),inset 0 1px 0 rgba(255,255,255,.7);
  opacity:0;transform:translateY(40px) scale(.98);transition:opacity .7s ease,transform 1s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.stage.is-active .panel{opacity:1;transform:none;pointer-events:auto}
body.in-flight .stage.is-active .panel{opacity:0;transform:translateY(40px) scale(.98);pointer-events:none;transition-duration:.2s}
.panel .num{position:absolute;right:26px;top:14px;font-family:var(--display);font-weight:800;font-size:96px;line-height:1;letter-spacing:-.06em;color:rgba(20,20,22,.05);pointer-events:none;user-select:none}
.panel-hero{background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;padding:0;max-width:min(46vw,760px);
  position:sticky;top:26vh}   /* το όνομα ΜΕΝΕΙ όσο το διαβάζεις· χωρίς αυτό έφευγε από την κορυφή σε 100 px scroll */
.panel-center{justify-self:center;text-align:center}

.eyebrow{margin:0 0 16px;font-size:12px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--silver)}
.panel-center .eyebrow{justify-content:center}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.045em;perspective:800px}
h3.skill-group{letter-spacing:.2em}
h1{font-weight:800;font-size:clamp(52px,7.6vw,122px);line-height:.9;margin-bottom:26px}
h2{font-weight:800;font-size:clamp(34px,4.6vw,64px);line-height:.98;margin-bottom:16px}
h3{font-weight:800;font-size:21px;line-height:1.2;margin-bottom:8px;letter-spacing:-.02em}
h3 span{display:block;font-family:var(--ui);font-weight:500;font-size:14px;color:var(--muted);margin-top:4px;letter-spacing:0}
h4,h3.skill-group{font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.lead{font-size:clamp(16px,1.3vw,19px);color:var(--muted);margin:0 0 14px}
.panel-hero .lead{font-size:clamp(17px,1.45vw,22px);max-width:540px;color:#3a4049}
.word{display:inline-block;white-space:nowrap}
.char{display:inline-block;will-change:transform,opacity}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

.list{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.list li{padding-left:20px;position:relative;font-size:15px}
.list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.project{margin-top:6px;padding-top:12px}
.project p{margin:0 0 16px;font-size:15px}
.project-small{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 14px}
.stats div{display:grid;gap:2px}
.stats b{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.1vw,30px);line-height:1;letter-spacing:-.04em}
.stats small{font-size:11.5px;color:var(--muted);letter-spacing:.04em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.55)}
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--ui);font-weight:800;font-size:14px;line-height:1.5;letter-spacing:.01em;padding:13px 20px;border-radius:999px;color:var(--ink);cursor:pointer;
  border:1px solid var(--line2);background:rgba(255,255,255,.6);transition:background .3s,border-color .3s,transform .3s}
.btn:hover{background:rgba(20,20,22,.06);border-color:var(--ink);transform:translateY(-2px)}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-primary:hover{background:#000;border-color:#000;color:#fff}
.fine{margin:26px 0 0;font-size:12px;color:var(--muted)}

.placeholder{color:#8a6a3a!important;opacity:.92}
.placeholder.btn,.chips span.placeholder{border-style:dashed}
.project.placeholder h3{color:var(--accent)}

/* hero extras */
.scroll-hint{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);display:grid;justify-items:center;gap:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);opacity:0;transition:opacity 1s .8s}
.stage.is-active .scroll-hint{opacity:1}
.scroll-hint i{width:1px;height:44px;background:linear-gradient(180deg,var(--ink),transparent);animation:hint 1.9s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.ticker{position:absolute;left:0;right:0;bottom:0;height:44px;overflow:hidden;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(242,241,238,0),rgba(242,241,238,.75));display:flex;align-items:center;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker div{display:flex;gap:38px;white-space:nowrap;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);animation:tick 38s linear infinite;padding-right:38px}
.ticker span::before{content:"◦";color:var(--accent);margin-right:14px}
@keyframes tick{to{transform:translateX(-50%)}}

/* fallbacks */
body.reduced .panel,body.no-webgl .panel{opacity:1;transform:none;pointer-events:auto}
body.reduced .grain,body.reduced .ticker div,body.reduced .scroll-hint i{animation:none}
body.no-webgl #scene{display:none}
body.no-webgl{background:radial-gradient(1100px 700px at 15% 10%,#dfe9ec,transparent),radial-gradient(900px 700px at 90% 95%,#f3e4d6,var(--bg))}
body.no-webgl .stage{min-height:auto;padding-top:14vh;padding-bottom:4vh}
body.no-webgl .scroll-hint,body.no-webgl .dots,body.no-webgl .ticker{display:none}
body.debug .panel{transition:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  .grain,.ticker div,.scroll-hint i{animation:none!important}
  .panel{opacity:1!important;transform:none!important;pointer-events:auto!important}}

/* soft skills */
.soft-list{margin:6px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.soft-list li{font-size:13.5px;line-height:1.45;color:var(--muted);padding-left:14px;position:relative}
.soft-list li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--silver)}
.soft-list b{display:block;color:var(--ink);font-weight:800;font-size:14px}

/* small screens: the object lives in the upper half, the text is a bottom sheet */
@media (max-width:820px){
  /* Στα 402 px το «made by Kondylakis» ΑΚΟΥΜΠΟΥΣΕ το κουμπί του ήχου και στα 360 τυλιγόταν σε δύο σειρές.
     Το gap εγγυάται αέρα, το nowrap απαγορεύει το τύλιγμα, και το μέγεθος ακολουθεί το πλάτος της οθόνης. */
  .topbar{padding:14px 16px;gap:10px}
  .brand{font-size:clamp(12px,3.9vw,17px);white-space:nowrap;flex:none}
  .cta{padding:9px 14px;font-size:11px}
  .stage{align-items:end;padding:0 12px calc(12px + env(safe-area-inset-bottom))}
  .stage.hero{align-items:start;padding-top:15vh}
  .panel,.stage[data-side="right"] .panel{max-width:none;justify-self:stretch;padding:20px 20px 22px;border-radius:22px;max-height:70vh;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .panel.has-more{-webkit-mask-image:linear-gradient(180deg,#000 84%,rgba(0,0,0,.25) 100%);mask-image:linear-gradient(180deg,#000 84%,rgba(0,0,0,.25) 100%)}
  /* Projects is the tallest card by far (946 px of content in a 521 px box), and its call to action was
     the part that fell off the bottom. Give it a little more box and pin the buttons to it: the rest of
     the card scrolls underneath them. Without this the main link of the biggest project is never seen. */
  #projects .panel.has-more{-webkit-mask-image:none;mask-image:none}
  #projects .panel.has-more::after{display:none}
  #projects .more{position:sticky;bottom:-22px;z-index:2;margin:18px -20px -22px;padding:13px 20px 20px;background:var(--glass-bar);box-shadow:0 -10px 18px -12px rgba(0,0,0,.35)}
  .panel.has-more::after{content:"";position:sticky;bottom:-22px;display:block;height:26px;margin:-26px -20px -22px;background:radial-gradient(60% 100% at 50% 100%,rgba(20,20,22,.10),transparent 70%);pointer-events:none}
  .panel-hero{max-height:none;overflow:visible;padding:0;background:none}
  .panel .num{font-size:56px;right:16px;top:8px}
  h1{font-size:clamp(42px,13vw,72px);margin-bottom:18px}
  h2{font-size:clamp(28px,8vw,40px);margin-bottom:12px}
  .lead{font-size:15px;margin-bottom:10px}
  .panel-hero .lead{font-size:16px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats b{font-size:24px}
  .chips span{font-size:12px;padding:6px 10px}
  .list li{font-size:14px}
  .soft-list{grid-template-columns:1fr}
  #contact .links .btn{padding:10px 16px;font-size:13.5px}
  .dots,.topnav,.counter{display:none}
  .lang{padding:8px 10px;font-size:11px;margin-right:8px}
  .snd{width:30px;height:30px;margin-right:6px}
  .scroll-hint{bottom:calc(40px + env(safe-area-inset-bottom))}
  @media (max-height:700px){.scroll-hint{display:none}}
  .cursor{display:none}
}
@media (max-width:392px){                    /* το «ΕΠΙΚΟΙΝΩΝΙΑ» στενεύει για να χωρέσει ολόκληρο το όνομα δίπλα του */
  .topbar{padding:13px 12px;gap:9px}
  .brand{font-size:clamp(11px,3.7vw,15px)}
  .cta{padding:8px 10px;font-size:10.5px;letter-spacing:.05em}
  .lang{padding:8px 8px;margin-right:5px}
  .snd{width:30px;height:30px;margin-right:4px}
}
@media (max-width:372px){                    /* iPhone SE, 13 mini, οθόνες-εξώφυλλα: όλα στενεύουν μαζί, τίποτα δεν κόβεται */
  .topbar{padding:12px 10px;gap:8px}
  .brand{font-size:clamp(10px,3.4vw,14px)}
  .cta{padding:7px 9px;font-size:10px;letter-spacing:.04em}
  .lang{padding:8px 6px;margin-right:4px;font-size:11px}
  .snd{width:28px;height:28px;margin-right:3px}
}
body.touch .panel:not(.panel-hero),body.no-blur .panel:not(.panel-hero){backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--glass-solid)}
/* phones: the hero text sits over the 3D desk, so it gets a soft scrim that fades out before the desk (no card edge) */
body.touch .panel-hero{padding:18px 16px 44px;border-radius:0;background:linear-gradient(180deg,var(--scrim-a) 0%,var(--scrim-b) 55%,var(--scrim-c) 100%);mask-image:none}
/* at the very top: only the desk and the hint; the hint goes once the name is in */
body.hero-gate .stage.hero .scroll-hint{opacity:1;transition-delay:.3s}
body.hero-gate .stage.hero.is-active .scroll-hint{opacity:0;transition-delay:0s}
body.touch .drawer-backdrop,body.no-blur .drawer-backdrop{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(20,20,22,.36)}
body.no-blur .dots{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(242,241,238,.94)}
/* weak phones: the full-screen animated grain and the vignette are pure fill-rate for almost no gain at that size */
body.light-3d .grain,body.no-grain .grain{display:none}
body.light-3d .vignette{opacity:.55}

/* drawer: more about a project */
.stage.outro h2{font-size:clamp(30px,3.4vw,46px)}
.more{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.drawer-backdrop{position:fixed;inset:0;z-index:40;background:rgba(20,20,22,.28);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;transition:opacity .35s;touch-action:none}
.drawer-backdrop.open{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:41;width:min(520px,100%);padding:44px 40px 40px;background:rgba(255,255,255,.96);border-left:1px solid var(--line);
  box-shadow:-30px 0 80px rgba(20,20,30,.15);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;transform:translateX(102%);transition:transform .55s cubic-bezier(.2,.7,.2,1),visibility 0s linear .55s;visibility:hidden}
.drawer.open{transform:none;visibility:visible;transition:transform .55s cubic-bezier(.2,.7,.2,1),visibility 0s}
.drawer .eyebrow{font-size:12px;line-height:1.5;margin:0 0 16px}
.drawer .fine{margin:22px 0 0;font-size:12px;line-height:1.5}
.drawer h2{font-size:clamp(28px,2.6vw,38px);line-height:1.05;margin:0 0 18px}
.drawer h2 span{display:block;font-family:var(--ui);font-weight:500;font-size:14px;color:var(--muted);margin-top:6px;letter-spacing:0}
.drawer h3{font-size:15px;letter-spacing:.02em;margin:22px 0 8px}
.drawer p{font-size:15px;line-height:1.6;margin:0 0 12px}
.defs{margin:8px 0 6px;display:grid;grid-template-columns:auto 1fr;gap:8px 16px}
.defs dt{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--ink)}
.defs dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.drawer-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:#fff;font:400 26px/1 var(--ui);color:var(--ink)}
.drawer-close:hover{background:rgba(20,20,22,.06)}
body.drawer-open .cursor{display:none}
body.drawer-open{cursor:auto}body.drawer-open a,body.drawer-open button{cursor:pointer}
@media (max-width:820px){
  .drawer{top:auto;left:0;right:0;bottom:0;width:100%;max-height:86vh;max-height:min(86dvh,calc(100dvh - 24px));border-left:0;border-top:1px solid var(--line);border-radius:22px 22px 0 0;padding:34px 22px calc(28px + env(safe-area-inset-bottom));transform:translateY(102%)}
  .drawer.open{transform:none}
}

.btn-ghost{background:none;border-color:var(--line)}
.sites{display:flex;flex-wrap:wrap;gap:8px}
.sites a{font-size:13px;font-weight:700;text-decoration:none;padding:8px 12px;border-radius:999px;border:1px solid var(--line2);color:var(--ink)}
.sites a:hover{background:rgba(20,20,22,.06)}

/* contact form (in its drawer) */
.contact-form{display:grid;gap:14px;margin-top:6px}
.contact-form label{display:grid;gap:6px}
.contact-form label span{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.contact-form input:not([type=checkbox]),.contact-form textarea{font:500 16px/1.5 var(--ui);color:var(--ink);width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line2);background:rgba(255,255,255,.8);outline:0;transition:border-color .25s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.contact-form textarea{resize:vertical;min-height:140px}
.contact-form input:not([type=checkbox]):focus,.contact-form textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,20,22,.08)}
.contact-form input:not([type=checkbox]).invalid,.contact-form textarea.invalid{border-color:#b3261e}
.contact-form .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.contact-form .consent{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.55)}
/* A checkbox nobody can see the state of is a checkbox nobody can use: it was a blank white pill,
   identical checked and unchecked (accent-color does nothing once appearance is none), so on a phone
   the form looked broken and no message could be sent. Drawn by hand now, tick and all. */
.contact-form .consent input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;width:23px;height:23px;min-width:23px;margin:0;padding:0;
  border:1.5px solid var(--line2);border-radius:7px;background:var(--glass-solid);background-repeat:no-repeat;background-position:center;background-size:15px 15px;
  cursor:pointer;transition:background-color .16s,border-color .16s,transform .16s}
.contact-form .consent input[type=checkbox]:active{transform:scale(.92)}
.contact-form .consent input[type=checkbox]:checked{background-color:var(--ink);border-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.4 8.4l3 3 6.2-6.6'/%3E%3C/svg%3E")}
.contact-form .consent input[type=checkbox]:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.contact-form .consent{cursor:pointer;-webkit-tap-highlight-color:transparent}
.contact-form .consent span{font-size:13.5px;line-height:1.5;color:var(--muted);font-weight:500;letter-spacing:0;text-transform:none}
.contact-form .consent span a{color:var(--ink);font-weight:700}
.contact-form .consent.invalid{border-color:#b3261e}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:4px}
.form-actions .btn{font-family:var(--ui)}
.form-actions .btn[disabled]{opacity:.55;transform:none;pointer-events:none}
.form-actions .form-status{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted);flex:1 1 200px;min-height:1.4em}
.form-status.ok{color:#1d6b46}
.form-status.err{color:#b3261e}
.turnstile{min-height:0}
.turnstile:not([hidden]){min-height:65px}

/* ---------- night: when the room the visitor sees is dark, the page is dark too ---------- */
body.room-dark{--bg:#0e1424;--ink:#f3f2ef;--muted:#a9b2c2;--accent:#93a3bd;--silver:#6b7688;
  --glass:rgba(16,20,32,.62);--line:rgba(255,255,255,.10);--line2:rgba(255,255,255,.22);
  --glass-solid:rgba(13,17,29,.92);
  --glass-bar:rgba(13,17,29,.975);
  --scrim-a:rgba(10,14,26,.94); --scrim-b:rgba(10,14,26,.86); --scrim-c:rgba(10,14,26,0)}
body.room-dark .topbar::before{background:linear-gradient(180deg,rgba(10,14,26,.92) 0%,rgba(10,14,26,.55) 55%,rgba(10,14,26,0) 100%)}
body.room-dark .panel{box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)}
body.room-dark .panel .num{color:rgba(255,255,255,.06)}
body.room-dark .chips span,body.room-dark .btn,body.room-dark .cta,body.room-dark .lang,body.room-dark .sites a{background:rgba(255,255,255,.06);color:var(--ink)}
body.room-dark .btn:hover,body.room-dark .cta:hover,body.room-dark .sites a:hover{background:rgba(255,255,255,.13);border-color:var(--ink)}
body.room-dark .btn-primary{background:#f3f2ef;color:#11151f;border-color:#f3f2ef}
body.room-dark .btn-primary:hover{background:#fff;color:#11151f;border-color:#fff}
body.room-dark .dots{background:rgba(14,20,36,.72)}
body.room-dark .dots button::before{background:rgba(255,255,255,.42)}
body.room-dark .dots button.active::before{background:#fff}
body.room-dark .progress i{background:linear-gradient(90deg,#5b6675,#fff)}
body.room-dark .drawer{background:rgba(14,18,28,.97);border-left-color:rgba(255,255,255,.12)}
body.room-dark .drawer-close{background:rgba(255,255,255,.08);color:var(--ink)}
body.room-dark .contact-form input:not([type=checkbox]),body.room-dark .contact-form textarea,body.room-dark .contact-form .consent{background:rgba(255,255,255,.06);color:var(--ink)}
body.room-dark .contact-form .consent input[type=checkbox]{background-color:rgba(255,255,255,.08)}
body.room-dark .contact-form .consent input[type=checkbox]:checked{background-color:var(--ink);border-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2311151f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.4 8.4l3 3 6.2-6.6'/%3E%3C/svg%3E")}
body.room-dark .contact-form input:focus,body.room-dark .contact-form textarea:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.12)}
body.room-dark .vignette{background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(0,0,0,.35) 100%)}
body.room-dark .ticker{background:linear-gradient(180deg,rgba(14,20,36,0),rgba(14,20,36,.75));border-top-color:rgba(255,255,255,.10)}
body.room-dark .brand i{background:linear-gradient(135deg,#dfe3ea,#79818f)}