/* ==========================================================================
   KORKODILOS — Step 1: the original site, with a better jaw.

   The mechanism (from the 2020 theme): KORKO is the upper jaw, fixed at the
   top; –DILOS is the lower jaw, rising with the footer. At the end of every
   page they lock into KORKO–DILOS and the mouth is closed.

   Step 1 refinements (no new content):
   1. the upper jaw OPENS while you read: it lifts and only its "teeth" stay
      under the menu → much more room for the text;
   2. content is swallowed at the jaw line instead of running over the letters;
   3. at the end the upper jaw comes down to BITE the rising –DILOS (+ chomp);
   4. the footer map works again (no API key / billing), light text on dark.
   ========================================================================== */

/* Fonts are licensed (Ogust) and live on a separate Netlify site, not in this public repository:
   https://unrivaled-queijadas-404cd2.netlify.app/fonts  (source folder: CREATIVE CODING/korkodilos-fonts) */
@font-face{font-family:"Canela";src:url(https://unrivaled-queijadas-404cd2.netlify.app/fonts/Canela-Light-Gr-Web.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Monument Grotesk";src:url(https://unrivaled-queijadas-404cd2.netlify.app/fonts/MonumentGrotesk-Regular.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-036F,U+2000-206F,U+20AC,U+2190-21FF,U+2122}
@font-face{font-family:"Aeonik Greek";src:url(https://unrivaled-queijadas-404cd2.netlify.app/fonts/AeonikPro-Regular-Greek.woff) format("woff");font-weight:400;font-display:swap;unicode-range:U+0370-03FF,U+1F00-1FFF}
@font-face{font-family:"Monument Extended";src:url(https://unrivaled-queijadas-404cd2.netlify.app/fonts/MonumentExtended-Ultrabold.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  --base:#ECEAE5; --ink:#28282A;
  --orange:#FF831E; --brown:#7D4921; --green:#006837; --pink:#E59E8F;
  /* Monument has no Greek glyphs → Greek in the sans falls to Aeonik Pro (unicode-range) */
  --serif:"Canela",Georgia,serif;
  --sans:"Monument Grotesk","Aeonik Greek",Helvetica,Arial,sans-serif;   /* Greek letters are drawn by Aeonik Pro */
  --display:"Monument Extended","Canela","Arial Black",sans-serif;
  --pad:72px;                 /* original .container side padding */
  --logo-top:90px;            /* original .header__logo padding-top */
  --gum:74px;                 /* where the lifted jaw disappears (under the menu) */
  /* set by JS, from the real logo size (as the original jsVars did) */
  --jaw:300px;                /* closed upper jaw height (= original header height) */
  --foot-h:300px;             /* original --footer-height */
}
@media (max-width:768px){:root{--pad:15px;--logo-top:70px;--gum:58px}}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--base)}
body{font-family:var(--serif);font-weight:300;font-size:50px;line-height:1.1;color:var(--ink);background:var(--base);-webkit-font-smoothing:antialiased;font-synthesis:none;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.bg-base{background:var(--base)}
.bg-orange{background:var(--orange)}
.bg-pink{background:var(--pink)}
.bg-brown{background:var(--brown);color:var(--base)}   /* was ink on brown: unreadable */
.bg-green{background:var(--green);color:var(--base)}   /* was ink on green: unreadable */

.container{position:relative;width:100%;max-width:1440px;padding:0 var(--pad);margin:0 auto}

/* ==========================================================================
   UPPER JAW — KORKO
   ========================================================================== */
.jaw-top{position:fixed;inset:0 0 auto;height:0;z-index:100;color:var(--ink);transition:color .3s}
.jaw-top.on-dark{color:var(--base)}
.menu-open .jaw-top{color:var(--ink)}
.jaw-top__label,.jaw-top__menu,.jaw-top__lang,.burger{position:absolute;z-index:3;font-family:var(--sans);font-weight:400}
.jaw-top__label{top:35px;left:var(--pad);font-size:16px}
.jaw-top__menu{top:28px;left:50%;transform:translateX(-50%);display:flex;font-size:24px}
.jaw-top__menu a{padding:0 4px}
.jaw-top__menu a:not(:last-child)::after{content:","}
.jaw-top__menu a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.jaw-top__lang{top:31px;right:calc(var(--pad) + 66px);font-size:16px;display:flex}   /* was top:85px — sat on the "O" of KORKO */
.jaw-top__lang a{padding:4px 2px}
.jaw-top__lang a+a::before{content:"/";margin-right:2px}
.jaw-top__lang a[aria-disabled="true"]{opacity:.4;cursor:default}
.burger{top:30px;right:var(--pad);width:42px;height:30px}
.burger span,.burger span::before,.burger span::after{position:absolute;left:0;width:100%;height:3px;background:currentColor}
.burger span{top:50%;margin-top:-1.5px;transition:transform .4s .3s}
.burger span::before,.burger span::after{content:"";transition:top .3s .3s,bottom .3s .3s,opacity .2s .3s,transform .4s}
.burger span::before{top:-13px}
.burger span::after{bottom:-13px}
.menu-open .burger span{transform:rotate(45deg)}
.menu-open .burger span::before{top:0;transform:rotate(-90deg);transition:top .3s,transform .4s .3s}
.menu-open .burger span::after{bottom:0;opacity:0;transition:bottom .3s,opacity .2s .3s}

/* the jaw: a window that starts at the gum line; the logo slides up into it */
.jaw-top__mouth{position:absolute;left:0;right:0;top:var(--gum);height:calc(var(--jaw) - var(--gum));overflow:hidden;z-index:2;pointer-events:none}
.jaw-top__logo{display:block;position:absolute;left:0;right:0;top:calc(var(--logo-top) - var(--gum));max-width:1150px;margin:0 auto;padding:0 25px;pointer-events:auto;transform:translate3d(0,calc(var(--lift,0) * -1px),0);will-change:transform}
.jaw-top__logo span{display:block;width:100%;aspect-ratio:1150/190;background:currentColor;-webkit-mask:url(../assets/img/logo.svg) center/contain no-repeat;mask:url(../assets/img/logo.svg) center/contain no-repeat}
.jaw-top .jaw-top__logo{color:var(--ink)}   /* the logo stays ink, as designed */

/* chomp — a small bite when the jaws meet */
.jaw-top.chomp .jaw-top__logo span{animation:chompTop .45s cubic-bezier(.3,1.7,.5,1)}
.jaw-bottom.chomp .jaw-bottom__logo span{animation:chompBot .45s cubic-bezier(.3,1.7,.5,1)}
@keyframes chompTop{35%{transform:translateY(10px)}}
@keyframes chompBot{35%{transform:translateY(-10px)}}

/* ==========================================================================
   OVAL MENU (original offcanvas)
   ========================================================================== */
.offcanvas{position:fixed;inset:0;z-index:1;background:var(--base);color:var(--ink);transform:translateY(-100%);transition:transform .4s;display:flex;flex-direction:column;justify-content:center;align-items:center}
.menu-open .offcanvas{transform:none}
.menu-open{overflow:hidden}
.menu-open .jaw-top__mouth{visibility:hidden}
.offcanvas a{width:calc(100% - 30px);max-width:475px;height:27vh;margin:-20px auto;display:flex;align-items:center;justify-content:center;border-radius:50%;font-family:var(--display);font-weight:800;font-size:40px;text-transform:uppercase;transition:transform .6s ease .3s}
.offcanvas a:nth-child(1){background:var(--orange);transform:rotate(-10deg)}
.offcanvas a:nth-child(2){background:var(--brown);transform:rotate(10deg)}
.offcanvas a:nth-child(3){background:var(--green);transform:rotate(-10deg)}
.offcanvas a:nth-child(4){background:var(--pink);transform:rotate(10deg)}
.offcanvas a:hover,.offcanvas a:focus-visible{transform:rotate(0);transition-delay:0s}

/* ==========================================================================
   CONTENT (original theme values)
   ========================================================================== */
.section{min-height:100vh;position:relative}
.section--fit{min-height:0;padding-bottom:var(--sec)}
.section--fit .content{padding-top:var(--sec)}
.section--fit .content.content--top{padding-top:calc(var(--jaw) + 50px)}
.content{padding:50px 0}
/* TYPE SCALE (11 Oct): L lead 22→36 · M body 18→22 · S ui 15 · XS label 13 */
:root{--fs-l:clamp(22px,calc(14px + 1.5vw),36px);--fs-m:clamp(18px,calc(15px + .45vw),22px);--fs-s:15px;--fs-xs:13px;--sec:120px}
@media (max-width:768px){:root{--sec:70px}}
.content p{font-weight:300;margin-bottom:.9em;line-height:1.2;font-size:var(--fs-l)}
.content p:last-child{margin-bottom:0}
.content p strong{font-family:var(--sans);font-weight:400}
.content p em{font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;font-style:normal;vertical-align:.35em;margin-right:.6em}
.content p img{display:block;height:auto}
.content p img.aligncenter{margin:0 auto}
.content p img.offset-top{margin-top:-150px}
.content--top{padding-top:calc(var(--jaw) + 50px);position:relative;z-index:1}
.content--top img{margin:auto;display:block}
.content--sm{max-width:935px}

.home-images{display:flex;flex-wrap:wrap;justify-content:space-between;min-height:100vh}
.home-images img{max-width:calc(50% - 25px)}
.home-images img:first-child{transform:translateY(-50px);align-self:flex-end}
.home-images img:last-child{transform:translateY(-55%);align-self:flex-start}

.two-images{min-height:100vh;position:relative}
.two-images img{position:absolute}
.two-images img:first-child{top:0;left:var(--pad);margin-top:50px;max-width:90%}
.two-images img:last-child{bottom:0;right:var(--pad);margin-bottom:150px;max-width:75%}

.two-images-offset{height:100vh;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
.two-images-offset img:first-child{margin-left:calc(var(--pad) * -1);margin-top:100px;width:100%;max-width:60%;max-height:120vh;flex:1;object-fit:cover}

.calendar-bottom{width:100%;height:100vh;object-fit:cover;display:block}

@media (max-width:768px){
  .home-images img{max-width:90%}
  .home-images img:first-child{order:2}
  .home-images img:last-child{transform:translateY(-45%);margin-left:auto}
  .two-images-offset img:first-child{margin-left:0;margin-top:150px;max-width:80%}
  .two-images-offset img:last-child{max-width:135px;margin-bottom:-85%}
  .content p img.offset-top{margin-top:-50%;max-width:70%}
}

/* ==========================================================================
   LOWER JAW — –DILOS + footer (one screen: closes under KORKO)
   ========================================================================== */
.jaw-bottom{position:relative;background:var(--jaw-bg,var(--base))}
.jaw-bottom__logo{padding:0 0 50px}
.jaw-bottom__logo .wrap{max-width:1150px;margin:0 auto;padding:0 25px}
.jaw-bottom__logo span{display:block;width:100%;aspect-ratio:1151/190;background:var(--ink);-webkit-mask:url(../assets/img/dilos.svg) center/contain no-repeat;mask:url(../assets/img/dilos.svg) center/contain no-repeat}
.footer{display:flex;min-height:var(--foot-h);font-family:var(--sans);font-size:16px;line-height:1.1;color:var(--base);background:var(--brown)}
.footer__map{flex:1;position:relative;display:block;overflow:hidden;background:var(--orange);min-height:200px;--ground:var(--orange)}
.footer__map:hover{--ground:var(--pink)}
.footer__map-svg,.footer__map-svg svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* schematic map: studio-orange ground, cream streets, pink Kerameikos, ink metro */
.km-ground{fill:var(--ground);transition:fill .3s}
.km-park{fill:var(--base);opacity:.35}
.km-site{fill:var(--pink)}
.km-road path{fill:none;stroke:var(--base);stroke-linecap:round;stroke-linejoin:round}
.km-pedestrian path{stroke-dasharray:1 10;opacity:.9}
.km-rail path{fill:none;stroke:var(--ink);stroke-width:4;stroke-dasharray:14 8;opacity:.55}
.km-label{font-family:var(--serif);font-size:26px;fill:var(--ink)}
.km-metro circle{fill:var(--ink)}
.km-metro text{font-family:var(--sans);font-size:22px;fill:var(--base)}
.km-metro .km-st{font-family:var(--serif);font-size:26px;fill:var(--ink)}
.footer__pin{position:absolute;left:50%;top:50%;z-index:2;width:64px;height:64px;margin:-76px 0 0 -32px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--ink);color:var(--base);display:grid;place-items:center;box-shadow:0 6px 16px rgba(40,40,42,.3)}
.footer__pin svg{width:44px;height:44px;display:block;transform:rotate(45deg)}
.footer__map-cta{position:absolute;left:25px;bottom:25px;z-index:2;background:var(--ink);color:var(--base);padding:8px 12px;border-radius:99px;font-size:13px;letter-spacing:.03em}
.footer__cols{width:60%;display:flex;flex-wrap:wrap;justify-content:space-between;align-content:flex-start;position:relative;padding-bottom:70px}
.footer__credits{position:absolute;left:25px;right:25px;bottom:22px;font-size:11px;letter-spacing:.03em;line-height:1.5;opacity:.75}
.footer__block{padding:50px 25px 0}
.footer__block p{margin-bottom:10px}
.footer__block ul{list-style:none}
.footer a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .2s}
.footer a:hover{text-decoration-color:currentColor}

/* ==========================================================================
   CTA — "Book a class" (the theme's hidden .fixed-bottom-right badge)
   ========================================================================== */
.book-badge{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;align-items:center;gap:10px;padding:5px 18px 5px 5px;border-radius:99px;background:var(--ink);color:var(--base);box-shadow:0 8px 24px rgba(40,40,42,.22);transition:transform .45s cubic-bezier(.3,1.5,.5,1),opacity .35s,background .25s,color .25s}
.book-badge:hover,.book-badge:focus-visible{background:var(--orange);color:var(--ink)}
.book-badge__k{flex:none;width:44px;height:44px;border-radius:50%;background:var(--base);color:var(--ink);display:grid;place-items:center}
.book-badge__k svg{width:34px;height:34px;display:block}
.book-badge__label{font-family:var(--serif);font-size:18px;line-height:1;white-space:nowrap}
.book-badge__label i{font-style:normal;font-family:var(--sans);display:inline-block;transition:transform .25s}
.book-badge:hover .book-badge__label i{transform:translateX(4px)}
.book-badge__label small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.04em;text-transform:uppercase;opacity:.7;margin-top:6px}
.book-badge.is-hidden{opacity:0;transform:scale(.6);pointer-events:none}
.menu-open .book-badge{opacity:0;pointer-events:none}

.ph{background:repeating-linear-gradient(-45deg,transparent 0 5px,rgba(236,234,229,.18) 5px 6px)}

@media (max-width:768px){
  .book-badge{right:12px;bottom:12px}
  .jaw-top__label{top:25px}
  .jaw-top__menu{display:none}
  .burger{width:35px;height:20px;top:23px}
  .burger span::before{top:-9px}.burger span::after{bottom:-9px}
  .jaw-top__lang{top:22px;right:75px}
  .jaw-top__logo,.jaw-bottom__logo .wrap{padding:0 var(--pad)}
  .offcanvas a{font-size:28px;height:calc(100vh / 4 + 15px)}
  .footer{flex-direction:column;font-size:14px;line-height:1.3}
  .footer__cols{width:100%;padding-bottom:20px}
  .footer__credits{position:static;width:100%;padding:30px 15px 0}
  .footer__block{padding:25px 15px 0}
  .footer__map{order:2;min-height:0}
  body:not(.page-contact) .footer__map{display:none}   /* no map in the mobile footer, except on Contact */
  .page-contact .footer__map{min-height:260px}
}

@media (prefers-reduced-motion:reduce){
  .jaw-top.chomp .jaw-top__logo span,.jaw-bottom.chomp .jaw-bottom__logo span{animation:none!important}
  .offcanvas,.offcanvas a{transition:none}
}

/* ==========================================================================
   STEP 3 — Alex's new structure (11 Oct 2026)
   Same palette and type; new blocks: Greek labels, offer cards (tilted like the
   oval menu), booking band, tutors + CV pop-up, weekly programme, specials.
   ========================================================================== */
.bg-ink{background:var(--ink);color:var(--base)}
.label-gr{font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase}   /* small titles: Monument, Greek letters via Aeonik */
.lead-small,.content p.lead-small{font-size:var(--fs-m);line-height:1.35}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:.03em;text-transform:uppercase;padding:14px 24px;border-radius:99px;background:var(--ink);color:var(--base);transition:background .25s,color .25s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.btn:hover,.btn:focus-visible{background:var(--orange);color:var(--ink);transform:translateY(-2px) rotate(-2deg)}
.btn--light{background:var(--base);color:var(--ink)}
.btn .gr{font-family:var(--sans)}
.ph-note{font-family:var(--sans);font-size:12px;letter-spacing:.04em;text-transform:uppercase;opacity:.6}

/* Alex portrait with the philosophy */
.portrait{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:50px;align-items:start}
.portrait figure{position:sticky;top:calc(var(--gum) + 120px)}
.portrait figure img{width:100%;border-radius:2px}
.portrait figcaption{font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase;margin-top:12px}

/* classes: packages + actions */
.packages{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 50px}
.packages li{border:1.5px solid currentColor;border-radius:999px;padding:18px 24px;display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-m)}
.packages b{font-weight:300}
.actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* tutors + CV pop-up */
.tutors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding:20px 0 0}   /* 4 people (Oct 2026) */
.tutor{text-align:left;display:flex;flex-direction:column;gap:14px}
.tutor__img{aspect-ratio:4/5;border-radius:0;overflow:hidden;background:var(--base);display:grid;place-items:center;color:var(--ink)}
.tutor__img img{width:100%;height:100%;object-fit:cover}
.tutor__img .k{width:45%;opacity:.25}
.tutor__name{font-size:var(--fs-m);line-height:1.2}
.tutor__cv{font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase}
.cv{border:0;padding:0;margin:auto;width:min(760px,calc(100% - 30px));max-height:calc(100vh - 40px);border-radius:28px;background:var(--base);color:var(--ink);overflow:auto}
.cv::backdrop{background:rgba(40,40,42,.6)}
.cv[open]{animation:cvIn .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes cvIn{from{transform:translateY(30px) rotate(-2deg);opacity:0}}
.cv__inner{display:grid;grid-template-columns:220px minmax(0,1fr);gap:34px;padding:40px}
.cv__img{aspect-ratio:4/5;border-radius:0;overflow:hidden;background:var(--orange);display:grid;place-items:center}
.cv__img img{width:100%;height:100%;object-fit:cover}
.cv__img .k{width:45%;opacity:.35}
.cv h2{font-weight:300;font-size:var(--fs-l);line-height:1.1}
.cv__role{font-family:var(--sans);font-size:13px;letter-spacing:.05em;text-transform:uppercase;margin:10px 0 22px;opacity:.7}
.cv ul{list-style:none;font-size:var(--fs-m);line-height:1.35;display:grid;gap:8px}
.cv ul li::before{content:"— "}
.cv__close{position:absolute;top:18px;right:22px;font-family:var(--sans);font-size:14px;letter-spacing:.04em}

/* calendar: specials (events, workshops, new series) — these do have a book CTA */
.specials{display:grid;gap:0;padding:10px 0 0}
.special{display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:30px;align-items:center;padding:30px 0;border-top:1.5px solid currentColor}
.special:last-child{border-bottom:1.5px solid currentColor}
.special__date{font-size:var(--fs-l);line-height:1}
.special__date small{display:block;font-family:var(--sans);font-size:var(--fs-xs);margin-top:8px}
.special__type{display:inline-block;font-family:var(--sans);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:99px;background:var(--ink);color:var(--base);margin-bottom:10px}
.special__type--event{background:var(--orange);color:var(--ink)}
.special__type--workshop{background:var(--green);color:var(--base)}
.special__type--series{background:var(--brown);color:var(--base)}
.special h3{font-weight:300;font-size:var(--fs-l);line-height:1.1}
.special p{font-size:var(--fs-m);line-height:1.35;margin-top:6px;max-width:640px}
.special__side{text-align:right;display:grid;gap:12px;justify-items:end}
.special__side > span{font-size:var(--fs-m)}   /* the price only — it used to enlarge the button text too */

@media (max-width:1024px){
}
@media (max-width:768px){
  .portrait,.cv__inner{grid-template-columns:1fr}
  .cv__img{max-width:200px}
  .cv__inner{padding:30px 22px}
  .packages{grid-template-columns:1fr}
  .tutors{grid-template-columns:1fr 1fr;gap:20px}
  .special{grid-template-columns:1fr;gap:12px}
  .special__side{text-align:left;justify-items:start}
}

/* --- 11 Oct, round 2 --- */
.empty-note{font-size:var(--fs-m);line-height:1.35;padding:30px 0;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
.empty-note a{text-decoration:underline;text-underline-offset:4px}
.k-hero{display:grid;place-items:center;color:var(--ink)}
/* booking placeholder dialog (until the booking app) */
.book-dlg .cv__inner{grid-template-columns:1fr}
.book-dlg ul{margin-top:10px}
.book-dlg a{text-decoration:underline;text-underline-offset:4px}
.book-dlg__or{font-size:var(--fs-s,15px);margin:24px 0 6px;opacity:.75}
.book-dlg__student{font-size:var(--fs-m);line-height:1.35;margin:28px 0 14px;padding-top:22px;border-top:1.5px solid currentColor}
.book-dlg .btn{text-decoration:none}
/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding-bottom:20px}
.contact-grid h2{font-family:var(--sans);font-weight:400;font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;margin-bottom:14px}
.contact-grid p{font-size:var(--fs-m);line-height:1.4}
.contact-grid a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .2s}
.contact-grid a:hover{text-decoration-color:currentColor}
@media (max-width:768px){.contact-grid{grid-template-columns:1fr;gap:28px}.tutors{gap:24px 14px}}
.section--fit .content p img.offset-top{margin-top:0}   /* fitted sections: no image pulled up into the previous text */

/* ==========================================================================
   ROUND 3 (11 Oct 2026) — picked by Stavros from _proposals/round3.html
   ========================================================================== */
/* A · photos in a calm column: in the normal flow, alternating, never overlapping */
.photos{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(40px,6vw,90px);padding:var(--sec) 0}
.photos>img{width:min(62%,calc(78vh * var(--ar,1)));height:auto}   /* never taller than ~a screen; size known before the photo loads */
.photos>:nth-child(even){margin-left:auto}
.photos>img:nth-child(even){width:min(44%,calc(78vh * var(--ar,1)))}
.photos .k-hero{aspect-ratio:1;width:380px;max-width:44%}
.photos .k-hero svg{width:100%;height:100%;display:block}
@media (max-width:768px){.photos>img,.photos>img:nth-child(even){width:100%}.photos .k-hero{width:220px;max-width:60%;margin:0 auto}}

/* C · offers as full-width colour bands */
.bands{display:block}
.band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;gap:40px;align-items:baseline;padding:50px var(--pad)}
.band__inner{display:contents}
.band b{font-family:var(--sans);font-weight:400;font-size:var(--fs-s);letter-spacing:.05em;text-transform:uppercase}
.band p{font-size:var(--fs-l);line-height:1.2}
.band__x{font-size:var(--fs-m);white-space:nowrap}
.band__x i{font-style:normal;font-family:var(--sans);display:inline-block;margin-left:8px;transition:transform .25s}
.band:hover .band__x i,.band:focus-visible .band__x i{transform:translateX(6px)}
.band.bg-orange{background:var(--orange)}.band.bg-brown{background:var(--brown);color:var(--base)}.band.bg-pink{background:var(--pink)}
@media (max-width:768px){.band{grid-template-columns:1fr;gap:12px;padding:36px var(--pad)}}

/* calendar: days above the line, classes below; whole week in one row, also on phones */
.cal{padding:10px 0 20px}
.cal__row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.cal__h{font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;padding-bottom:10px;border-bottom:1.5px solid currentColor}
.cal__body{padding-top:12px;align-items:start}
.cal__d{display:flex;flex-direction:column;gap:8px}
.cal__s{background:var(--base);color:var(--ink);border-radius:10px;padding:12px;font-family:var(--sans);font-size:var(--fs-s)}
.cal__d:empty::after{content:"—";opacity:.5;font-family:var(--sans)}
.cal .s{display:none}
.cal-note{font-family:var(--sans);font-size:var(--fs-xs);opacity:.85}
@media (max-width:768px){
  .cal__row{gap:4px}
  .cal__h{font-size:11px;letter-spacing:.02em;text-align:center}
  .cal__s{font-size:12px;padding:8px 2px;text-align:center;border-radius:8px}
  .cal .l{display:none}.cal .s{display:inline}
}

/* --- Round 4 (11 Oct 2026): landing = A (wide photo under KORKO), "Τι κάνουμε" = C contained --- */
.hero{margin:0 0 40px}
.hero img{width:100%;aspect-ratio:16/8;object-fit:cover;object-position:50% 55%}
.content p.hero__intro{max-width:935px}
@media (max-width:768px){.hero img{aspect-ratio:4/5}.hero{margin-bottom:26px}}
.ti-block{background:var(--orange);border-radius:4px;padding:44px 40px 46px;margin:var(--sec) 0 0}
.ti-block__label{font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;margin-bottom:28px}
.ti-block__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ti-col{display:flex;flex-direction:column;gap:14px;padding:0 28px;border-left:1.5px solid var(--ink)}
.ti-col:first-child{border-left:0;padding-left:0}
.ti-col:last-child{padding-right:0}
.ti-col b{font-family:var(--sans);font-weight:400;font-size:var(--fs-s);letter-spacing:.04em;text-transform:uppercase}
.ti-col__p{font-size:var(--fs-m);line-height:1.3}
.ti-col__x{margin-top:auto;padding-top:10px;font-size:var(--fs-m)}
.ti-col__x i{font-style:normal;font-family:var(--sans);display:inline-block;transition:transform .25s}
.ti-col:hover .ti-col__x i,.ti-col:focus-visible .ti-col__x i{transform:translateX(6px)}
@media (max-width:768px){
  .ti-block{padding:30px 20px 32px}
  .ti-block__cols{grid-template-columns:1fr;gap:26px}
  .ti-col{border-left:0;padding:16px 0 0;border-top:1.5px solid var(--ink)}
  .ti-col:first-child{border-top:0;padding-top:0}
}

/* --- Round 5 (11 Oct 2026): landing film strip, photos in "Τι κάνουμε", tutor rectangles --- */
.film{position:relative;margin:0 0 40px}
.film__track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.film__track::-webkit-scrollbar{display:none}
.film__track img{flex:none;height:clamp(280px,56vh,560px);width:auto;scroll-snap-align:start}
.film__btn{position:absolute;bottom:14px;width:42px;height:42px;border-radius:50%;background:var(--base);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:42px;text-align:center;box-shadow:0 2px 10px rgba(40,40,42,.18);transition:opacity .2s}
.film__prev{right:66px}.film__next{right:14px}
.film__btn[disabled]{opacity:.35;cursor:default}
@media (max-width:768px){.film__track img{height:clamp(260px,62vh,420px)}.film__btn{display:none}.film{margin-bottom:26px}}
.ti-col img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;margin-bottom:6px}
.tutor__role{font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase;opacity:.75;margin-top:-6px}
.tutor__cv{text-decoration:underline;text-underline-offset:3px}

/* --- Round 6 (11 Oct 2026) --- */
/* Studio: the K walks across the page from left to right, chomping */
.k-walk{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:clamp(120px,16vw,240px);overflow:hidden;color:var(--ink)}
.k-walk__k{position:absolute;left:var(--pad);top:0;height:100%;aspect-ratio:1;transform:translateX(0)}
.k-walk__k svg{width:100%;height:100%;display:block;--korko-duration:1.8s}
.k-walk.is-walking .k-walk__k{transition:transform 7s cubic-bezier(.4,0,.6,1);transform:translateX(var(--walk,0px))}
@media (prefers-reduced-motion:reduce){.k-walk.is-walking .k-walk__k{transition:none}}
/* "Τι κάνουμε": equal columns, equal grey boxes, everything on the same lines */
.ti-block__cols{gap:56px}
.ti-col{position:relative;padding:0;border-left:0;display:grid;grid-template-rows:auto auto 1fr auto;gap:14px}
.ti-col+.ti-col::before{content:"";position:absolute;left:-28px;top:0;bottom:0;border-left:1.5px solid var(--ink)}
.ti-col:first-child,.ti-col:last-child{padding:0}
.ph-img{display:grid;place-items:center;width:100%;aspect-ratio:3/2;background:rgba(40,40,42,.14);font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;opacity:.9;margin-bottom:6px}
.ti-col__x{padding-top:6px}
@media (max-width:768px){
  .ti-block__cols{gap:34px}
  .ti-col+.ti-col::before{left:0;right:0;top:-17px;bottom:auto;border-left:0;border-top:1.5px solid var(--ink)}
  .ti-col{border-top:0;padding:0}
}
/* language switch: the current language is solid, the other is faded */
.jaw-top__lang a:not([aria-current]){opacity:.45}
.jaw-top__lang a:not([aria-current]):hover{opacity:1}

/* --- Round 7: Studio K stays on the right, filling that side, chomping in place (replaces the walk) --- */
.photo-k{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center;padding:var(--sec) 0}
.photo-k>img{width:100%;height:auto}
.photo-k__k{width:100%;aspect-ratio:1;color:var(--ink)}
.photo-k__k svg{width:100%;height:100%;display:block}
@media (max-width:768px){.photo-k{grid-template-columns:1fr}.photo-k__k{width:70%;margin:0 auto}}

/* ==========================================================================
   Round 8 (11 Oct 2026) — phone fixes from Stavros's iPhone screenshots
   ========================================================================== */
/* never pan sideways (iOS ignores overflow-x on body alone) */
html,body{overflow-x:clip}
/* closed menu: fully hidden (its ovals peeked in at the top and let iOS pan sideways) */
.offcanvas{overflow:hidden;visibility:hidden;transition:transform .4s,visibility 0s linear .4s}
.menu-open .offcanvas{visibility:visible;transition:transform .4s}
/* phone menu: the four ovals fit between the header and the bottom of the visible screen */
@media (max-width:768px){
  .offcanvas{justify-content:flex-start;padding:calc(var(--gum) + 20px) 0 max(10px,env(safe-area-inset-bottom))}
  .offcanvas a{width:88%;font-size:26px;height:calc((100vh - var(--gum) - 64px) / 4 + 18px);height:calc((100svh - var(--gum) - 64px) / 4 + 18px);margin:-9px auto}
  .offcanvas a:nth-child(odd){transform:rotate(-6deg)}
  .offcanvas a:nth-child(even){transform:rotate(6deg)}
}
/* Home: the portrait only sticks on desktop (on phones it slid over the text below) */
@media (max-width:768px){.portrait figure{position:static}}
/* pop-ups: a round × in the corner that never overlaps the title; no focus box on open */
.cv{position:fixed}   /* pop-ups stay on screen where you are (relative made the page jump to the top on open) */
.cv__close{top:14px;right:14px;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--base);font-size:0;line-height:40px;text-align:center}
.cv__close::before{content:"×";font-size:22px;font-family:var(--sans)}
.cv h2,.cv__role{padding-right:56px}
.cv h2:focus{outline:none}
@media (max-width:768px){.cv__inner{padding:28px 22px}.book-dlg ul{font-size:19px}}
/* breathing room between the last content and –DILOS (hidden under KORKO once the mouth is closed) */
main>section:last-child{padding-bottom:calc(var(--sec) + 40px)}
main>img:last-child{margin-bottom:40px}
/* footer on phones: two equal columns (address | social), credits at the very bottom */
@media (max-width:768px){
  .footer__cols{display:grid;grid-template-columns:1fr 1fr;position:relative;flex:1;padding-bottom:70px;align-content:start}
  .footer__block{padding:25px 15px 0}
  .footer__credits{position:absolute;left:15px;right:15px;bottom:max(18px,env(safe-area-inset-bottom));width:auto;padding:0}
  .page-contact .footer__map{order:0}
  .special .btn,.actions .btn{padding:10px 16px;font-size:12px}
}

/* calendar, round 8: each day is one unit — columns on desktop, one under the other on phones */
.cal--days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.cal-day .cal__h{margin-bottom:12px}
.cal-day .cal__d{gap:8px}
@media (max-width:768px){
  .cal--days{grid-template-columns:1fr;gap:0;border-top:1.5px solid currentColor}
  .cal-day{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:12px;padding:12px 0;border-bottom:1.5px solid currentColor}
  .cal-day .cal__h{border-bottom:0;padding:0;margin:0;text-align:left;font-size:var(--fs-xs)}
  .cal-day .cal__d{flex-direction:row;flex-wrap:wrap;gap:8px}
  .cal-day .cal__s{font-size:var(--fs-s);padding:9px 14px;border-radius:99px}
  .cal--days .l{display:inline}.cal--days .s{display:none}
}

/* ==========================================================================
   Netlify (Eleventy + CMS) — enquiry forms
   ========================================================================== */
.special[hidden],.empty-note[hidden]{display:none}
.kform{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-top:22px}
.kform__f{display:flex;flex-direction:column;gap:6px;grid-column:1/-1}
.kform__f--half{grid-column:auto}
.kform__f span{font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase}
.kform input,.kform textarea{font:inherit;font-family:var(--serif);font-size:var(--fs-m);color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;padding:6px 0;width:100%}
.kform textarea{resize:vertical;min-height:90px}
.kform input:focus,.kform textarea:focus{outline:none;border-bottom-color:var(--orange)}
.kform__hp{position:absolute;left:-9999px}
.kform__note{grid-column:1/-1;font-family:var(--sans);font-size:var(--fs-xs);opacity:.7}
.kform .btn{grid-column:1/-1;justify-self:start}
.form-dlg .cv__inner{grid-template-columns:1fr}
.contact-form{max-width:760px;padding-top:var(--sec)}
.contact-form__h{font-family:var(--sans);font-weight:400;font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase}
@media (max-width:768px){.kform{grid-template-columns:1fr}.kform__f--half{grid-column:1/-1}}

/* calendar: a weekly class other than Monthly 4×3 shows its name under the time (set in /admin) */
.cal__t{display:block;font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.03em;text-transform:uppercase;margin-top:6px;opacity:.75}
.cal__s--other{background:var(--pink)}
@media (max-width:768px){.cal-day .cal__s--other{border-radius:12px}}

/* ==========================================================================
   ROUND 6 — Home in the oval menu, Studio "next" button, Specials hide when empty
   ========================================================================== */
/* five ovals: Home (ink) on top, then the four pages in their colours; they start below the menu row */
.offcanvas{justify-content:flex-start;padding-top:100px}
.offcanvas a{height:calc((100vh - 136px) / 5 + 20px);height:calc((100svh - 136px) / 5 + 20px)}
.offcanvas a:nth-child(1){background:var(--ink);color:var(--base);transform:rotate(10deg)}
.offcanvas a:nth-child(2){background:var(--orange);transform:rotate(-10deg)}
.offcanvas a:nth-child(3){background:var(--brown);transform:rotate(10deg)}
.offcanvas a:nth-child(4){background:var(--green);transform:rotate(-10deg)}
.offcanvas a:nth-child(5){background:var(--pink);transform:rotate(10deg)}
.offcanvas a:hover,.offcanvas a:focus-visible{transform:rotate(0)}
@media (max-width:768px){
  .offcanvas{padding-top:calc(var(--gum) + 20px)}
  .offcanvas a{height:calc((100vh - var(--gum) - 64px) / 5 + 18px);height:calc((100svh - var(--gum) - 64px) / 5 + 18px)}
  .offcanvas a:nth-child(odd){transform:rotate(6deg)}
  .offcanvas a:nth-child(even){transform:rotate(-6deg)}
  .offcanvas a:hover,.offcanvas a:focus-visible{transform:rotate(0)}
}
.actions--next{margin-top:60px}
@media (max-width:768px){.actions--next{margin-top:40px}}
[data-specials-section][hidden]{display:none}

/* ==========================================================================
   ROUND 7 — direct fixes
   ========================================================================== */
/* "Κλείσε θέση" on specials: never bigger than the floating "Κλείσε μάθημα" pill */
.special .btn{padding:10px 16px;font-size:12px}
/* line breaks: no lonely last word, no line ending on a tiny word (see the nbsp transform in eleventy.config.mjs) */
p,li,h1,h2,h3,figcaption,.ti-col__p,.special p{text-wrap:pretty}
/* Home: the orange "Τι κάνουμε" box sits on the pink, which runs down to –DILOS (its top margin used to leak out as a grey stripe) */
.section:has(> .container > .ti-block){display:flow-root}
.ti-block{margin-top:0}
/* Classes: one photo per section (Alex sets it in /admin; empty = none) + the photo strip under "all levels" */
.sec-photo{margin:50px 0 44px}
.sec-photo img{width:min(100%,560px);height:auto}
#monthly .sec-photo{margin-top:0}
.film--classes{margin:var(--sec) 0 0}
@media (max-width:768px){.sec-photo{margin:34px 0 30px}}
/* Studio: first photo keeps a calm landscape shape on desktop, portrait on phones (whatever photo Alex picks) */
.page-studio main > section:first-of-type .content--top img{width:100%;aspect-ratio:3/2;object-fit:cover}
@media (max-width:768px){.page-studio main > section:first-of-type .content--top img{aspect-ratio:4/5}}
/* phones: "Κλείσε θέση" is a small pill on the price line, lighter than the floating "Κλείσε μάθημα" */
@media (max-width:768px){
  .special__side{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
  .special .btn{padding:7px 12px;font-size:11px;gap:6px}
}

/* ==========================================================================
   ROUND 8 — oval menu: every word stays on top of all the ovals
   (each oval is drawn behind the words, so a lower oval never covers the word above it)
   ========================================================================== */
.offcanvas a{background:none!important;transform:none!important;position:relative}
.offcanvas a::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--oc);transform:rotate(var(--rot));transition:transform .6s ease .3s;z-index:-1}
.offcanvas a>span{display:block;transform:rotate(var(--rot));transition:transform .6s ease .3s}
.offcanvas a:nth-child(1){--oc:var(--ink);--rot:10deg}
.offcanvas a:nth-child(2){--oc:var(--orange);--rot:-10deg}
.offcanvas a:nth-child(3){--oc:var(--brown);--rot:10deg}
.offcanvas a:nth-child(4){--oc:var(--green);--rot:-10deg}
.offcanvas a:nth-child(5){--oc:var(--pink);--rot:10deg}
.offcanvas a:hover,.offcanvas a:focus-visible{--rot:0deg}
.offcanvas a:hover::before,.offcanvas a:hover>span,.offcanvas a:focus-visible::before,.offcanvas a:focus-visible>span{transition-delay:0s}
@media (max-width:768px){
  .offcanvas a:nth-child(odd){--rot:6deg}
  .offcanvas a:nth-child(even){--rot:-6deg}
  .offcanvas a:hover,.offcanvas a:focus-visible{--rot:0deg}
}
@media (prefers-reduced-motion:reduce){.offcanvas a::before,.offcanvas a>span{transition:none}}
/* desktop: the five ovals fill the screen from under the menu row to the bottom edge, evenly overlapped,
   so each word sits in its own oval (h = oval height, neighbours overlap by h/4) */
@media (min-width:769px){
  .offcanvas{--mh:calc((100vh - 130px) / 3.75);--mh:calc((100svh - 130px) / 3.75);justify-content:center;padding:100px 0 30px}
  .offcanvas a{width:min(600px,70vw);max-width:none;height:var(--mh);margin:calc(var(--mh) / -8) auto;font-size:clamp(26px,calc(var(--mh) * .2),40px)}
  .offcanvas a:nth-child(odd){--rot:7deg}
  .offcanvas a:nth-child(even){--rot:-7deg}
  .offcanvas a:hover,.offcanvas a:focus-visible{--rot:0deg}
}
/* opening (option B): the page fades to the menu, the ovals drop in one after another with a small bounce */
.offcanvas{transform:none!important;opacity:0;transition:opacity .28s ease,visibility 0s linear .28s!important}
.menu-open .offcanvas{opacity:1;transition:opacity .28s ease!important}
.offcanvas a{opacity:0;translate:0 -70px;transition:opacity .25s,translate .55s cubic-bezier(.3,1.55,.5,1)}
.menu-open .offcanvas a{opacity:1;translate:none}
.menu-open .offcanvas a:nth-child(1){transition-delay:.08s}
.menu-open .offcanvas a:nth-child(2){transition-delay:.14s}
.menu-open .offcanvas a:nth-child(3){transition-delay:.2s}
.menu-open .offcanvas a:nth-child(4){transition-delay:.26s}
.menu-open .offcanvas a:nth-child(5){transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.offcanvas,.offcanvas a{transition:none!important;translate:none}}

/* ==========================================================================
   ROUND 9
   ========================================================================== */
/* type scale A: big serif only for page intros; one serif size for everything else; one small sans size */
:root{--fs-l:clamp(22px,calc(14px + 1.4vw),34px);--fs-m:clamp(17px,calc(15px + .3vw),20px);--fs-s:13px;--fs-xs:13px}
.special h3,.special__date,.cv h2{font-size:var(--fs-m);line-height:1.25}
.special__type,.ph-note,.cal__t,.cal__s,.ti-col b,.band b,.cv__role,.cv__close{font-size:13px}
.sp-dlg h2{font-size:var(--fs-l);line-height:1.1;margin-top:12px}

/* Calendar specials: the whole row opens a pop-up with more info + "Κλείσε θέση" */
.special{position:relative;cursor:pointer;transition:background .25s}
.special__open{font:inherit;text-align:left;color:inherit}
.special__open::after{content:"";position:absolute;inset:0}
.special__open:focus-visible{outline:none}
.special:has(.special__open:focus-visible){outline:2px solid currentColor;outline-offset:4px}
.special:hover{background:rgba(40,40,42,.05)}
.special:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.special:hover .btn{background:var(--orange);color:var(--ink)}
.special:hover .btn{transform:translateX(4px)}
.sp-dlg .cv__inner--text{grid-template-columns:1fr}
.sp-dlg .cv__img{aspect-ratio:4/5}
.sp-dlg__text p{font-size:var(--fs-m);line-height:1.35;margin:0 0 .8em}
.sp-dlg .btn{margin-top:10px}

/* Classes: the price pills are links to booking; black on hover */
.packages a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border:1.5px solid currentColor;border-radius:999px;padding:18px 24px;font-size:var(--fs-m);transition:background .25s,color .25s}
.packages a:hover,.packages a:focus-visible{background:var(--ink);color:var(--base);border-color:var(--ink)}
.packages li.packages__li{border:0;padding:0;display:block}

@media (max-width:768px){
  /* phones: "Κλείσε θέση" in pink */
  .special .btn{background:var(--pink);color:var(--ink)}
  /* phones: small arrows on photo strips */
  .film__btn{display:block;width:30px;height:30px;line-height:30px;font-size:12px;bottom:10px}
  .film__prev{right:46px}.film__next{right:10px}
}
@media (max-width:768px){.sp-dlg .cv__img{max-width:none;aspect-ratio:3/2}}   /* phones: a short landscape photo on top of the pop-up */
/* pop-ups close with × only (the round-9 size rule had brought the word back) */
.cv__close{font-size:0}
/* Calendar ends with the photo inside the page margins, calm landscape size, space before –DILOS */
.calendar-end{padding-bottom:var(--sec)}
.calendar-end .calendar-bottom{width:100%;height:auto;aspect-ratio:3/2;max-height:70vh;object-fit:cover}
@media (max-width:768px){.calendar-end .calendar-bottom{aspect-ratio:4/5}}
/* privacy / terms pages */
.legal{min-height:60vh;padding-bottom:var(--sec)}
/* pop-ups: drop the browser's own max-width (it is "100% - 2em", and 1em is 50px on this site → 100px lost) */
.cv{max-width:none}
/* phones: pop-ups use almost the whole screen width, tighter inside */
@media (max-width:768px){
  .cv{width:calc(100% - 16px);max-height:calc(100svh - 16px);border-radius:22px}
  .cv__inner{padding:18px 18px 24px;gap:20px}
  .cv__close{top:10px;right:10px}
}
/* the jaw band: one soft band under the menu row in the colours of the sections behind (see site.js) */
.jaw-veil{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none}
.menu-open .jaw-veil{visibility:hidden}
/* tutor pop-up: a written bio instead of the short list */
.cv__bio p{font-size:var(--fs-m);line-height:1.4;margin:0 0 .8em}
/* Contact: the photo with the eyes sits between the details and the form */
.contact-photo{margin:60px 0 50px}
/* Calendar: messages when there are no weekly classes / no special events */
.cal-closed{margin-top:40px}
.empty-note[hidden]{display:none}
.cal-note a,.empty-note a{text-decoration:underline;text-underline-offset:4px}

/* ==========================================================================
   Round 10 (12 Oct 2026) — Stavros's marked-up screenshots
   ========================================================================== */
/* reading texts (smaller serif) never run wider than ~29em (≈ where the Home heading ends) — Home philosophy, Calendar empty message, and any like them */
.content p.lead-small,.lead-small,.empty-note{max-width:29em}
/* menu opened after scrolling on iPhone: the toolbar has collapsed, so size the ovals on the screen as it is NOW
   (dvh), not on the smallest screen (svh) — otherwise an empty strip is left at the bottom */
@media (max-width:768px){
  .offcanvas a{height:calc((100dvh - var(--gum) - 64px) / 5 + 18px)}
}
@media (min-width:769px){
  .offcanvas{--mh:calc((100dvh - 130px) / 3.75)}
}
/* Classes (pick 1B): the "everything included" note sits right under the prices, in the serif reading size; the button below it */
.ph-note--under{display:block;margin:-26px 0 30px;font-family:var(--serif);font-weight:300;font-size:var(--fs-m);line-height:1.35;letter-spacing:0;text-transform:none;opacity:1;max-width:29em}
/* big serif paragraphs (pick 2B): about 30em on wide screens too */
.content p{max-width:30em}

/* ==========================================================================
   ROUND 11 (16 Oct 2026) — Stavros's picks: 1A titles, 2 slider book button (phones), 3 map in the phone footer,
   4 Studio text beside its photo + tutors early, 5B calendar one row per day on desktop. (6 gallery, 7 workshops: parked)
   ========================================================================== */
/* 1 · section titles: the small label becomes a Canela title on its own line */
.content p > em:first-child{display:block;font-family:var(--serif);font-style:normal;font-weight:300;font-size:clamp(34px,calc(18px + 2.6vw),56px);line-height:1.05;letter-spacing:0;text-transform:none;vertical-align:0;margin:0 0 .45em}
/* 2 · book button on phones: a small slider (K circle in a short pill); a tap slides it open, then the booking box opens */
@media (max-width:768px){
  .book-badge{padding:5px 22px 5px 5px;gap:0;transition:padding .45s cubic-bezier(.3,1.3,.5,1),opacity .35s,background .25s,color .25s,transform .45s}
  .book-badge__label{max-width:0;overflow:hidden;opacity:0;transition:max-width .45s cubic-bezier(.3,1.3,.5,1),opacity .3s .1s,margin .45s}
  .book-badge::after{content:"";position:absolute;right:9px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:currentColor;opacity:.55;transition:opacity .2s}
  .book-badge.is-open{padding:5px 18px 5px 5px}
  .book-badge.is-open .book-badge__label{max-width:220px;opacity:1;margin-left:10px}
  .book-badge.is-open::after{opacity:0}
}
/* 3 · phone footer: the orange map fills the empty space under the address (the mouth still closes) */
@media (max-width:768px){
  .footer__map,body:not(.page-contact) .footer__map,.page-contact .footer__map{display:block;order:2;flex:1 1 auto;min-height:150px}
  .footer__cols{flex:none}
}
/* 4 · Studio on desktop: text beside its photo */
@media (min-width:900px){
  .page-studio .container:has(> .sec-photo){display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,80px);align-items:center;padding-bottom:var(--sec)}
  .page-studio .container:has(> .sec-photo) > .content{padding-bottom:0}
  .page-studio .container:has(> .sec-photo) .content p{font-size:var(--fs-m);line-height:1.35}
  .page-studio .container:has(> .sec-photo) .content p > em:first-child{font-size:clamp(34px,calc(18px + 2.6vw),56px);line-height:1.05}
  .page-studio .sec-photo{margin:var(--sec) 0 0;max-width:none}
  .page-studio .sec-photo img{width:100%;max-height:72vh;object-fit:cover}
}
/* 5 · weekly calendar on desktop: one row per day (like on phones) */
@media (min-width:769px){
  .cal--days{grid-template-columns:1fr;gap:0;border-top:1.5px solid currentColor;max-width:980px}
  .cal-day{display:grid;grid-template-columns:200px 1fr;align-items:center;gap:18px;padding:14px 0;border-bottom:1.5px solid currentColor}
  .cal-day .cal__h{border-bottom:0;padding:0;margin:0;font-size:var(--fs-s)}
  .cal-day .cal__d{flex-direction:row;flex-wrap:wrap;gap:10px}
  .cal-day .cal__s{font-size:var(--fs-m);padding:10px 20px;border-radius:99px}
}

/* student sign-in in the phone menu: a quieter line under the pages */
.offcanvas__login span{font-size:.55em;letter-spacing:.02em;opacity:.8}