/* Strong Eleven sub-pages: the programming board (see DESIGN.md) */
:root{
  --board:#111315;--board-2:#171a1d;--frame:#2c3136;--ghost:#262b30;
  --chalk:#eef0ee;--chalk-2:#b3babe;--chalk-3:#8d959a;
  --blue:#6aa8ff;--blue-hi:#93c0ff;--on-blue:#0a1220;--red:#ff4a3d;
  --f-display:'Sofia Sans Extra Condensed','Sofia Sans Condensed',sans-serif;
  --f-cond:'Sofia Sans Condensed','Sofia Sans',sans-serif;
  --f-body:'Sofia Sans',sans-serif;
  --gut:clamp(20px,4vw,40px);--ease:cubic-bezier(.16,1,.3,1);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;color-scheme:dark;scrollbar-color:var(--frame) var(--board)}
body{background:var(--board) var(--noise);color:var(--chalk);font-family:var(--f-body);font-size:1.0625rem;line-height:1.65;overflow-x:clip;-webkit-tap-highlight-color:transparent}
img{max-width:100%;height:auto;display:block}
picture{display:contents}
a{color:var(--blue);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--blue-hi)}
::selection{background:var(--blue);color:var(--on-blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* header */
header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:0 var(--gut);background:rgba(17,19,21,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--frame)}
header .brand{display:block;width:58px;flex:none}
header .brand img{width:100%;height:auto}
header .cta,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.6em 1.3em;border-radius:6px;background:var(--blue);color:var(--on-blue);font-family:var(--f-cond);font-weight:700;font-size:1rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;border:0}
@media (hover:hover){header .cta:hover,.btn:hover{background:var(--blue-hi);color:var(--on-blue);box-shadow:0 6px 18px rgba(0,0,0,.35)}}
header .cta,.btn,.bookbar .wa{transition:transform 160ms var(--ease),background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
header .cta:active,.btn:active,.bookbar .wa:active{transform:scale(.97)}
.btn.alt{background:none;color:var(--blue);border:1px solid var(--frame)}
@media (hover:hover){.btn.alt:hover{background:none;color:var(--blue-hi);border-color:var(--blue);box-shadow:none}}

/* page */
main{position:relative;max-width:900px;margin:0 auto;padding:clamp(28px,5vw,56px) var(--gut) clamp(56px,8vw,96px)}
main::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--gut)/2 - 1px);width:2px;background:var(--chalk);opacity:.22;border-radius:2px}
.crumbs{font-family:var(--f-cond);font-weight:600;font-size:.95rem;letter-spacing:.03em;color:var(--chalk-3);margin-bottom:18px}
.crumbs a{color:var(--chalk-2)}
h1,h2,h3{font-family:var(--f-display);font-weight:800;line-height:.95;text-transform:uppercase;text-wrap:balance;color:var(--chalk)}
h1{font-size:clamp(2.8rem,9vw,5rem);margin-bottom:.35em}
h1 span{color:inherit}
h2{font-size:clamp(1.9rem,5vw,2.6rem);margin:1.6em 0 .5em}
h3{font-family:var(--f-cond);font-weight:700;font-size:1.3rem;margin:1.2em 0 .4em}
p{max-width:65ch;margin-bottom:1em}
.lead{font-size:clamp(1.1rem,1.8vw,1.25rem);color:var(--chalk-2)}
strong{color:var(--chalk);font-weight:700}
.hero-img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 30%;margin:8px 0 28px;border:2px solid var(--frame);border-radius:8px}

/* lists: chalk ticks */
main ul{list-style:none;margin:0 0 1.2em}
main ul li{position:relative;padding:6px 0 6px 34px}
main ul li::before{content:"";position:absolute;left:2px;top:.55em;width:20px;height:20px;border:2px solid var(--chalk);border-radius:3px;opacity:.9}
main ul li::after{content:"";position:absolute;left:8px;top:calc(.55em + 4px);width:9px;height:5px;border-left:2.5px solid var(--chalk);border-bottom:2.5px solid var(--chalk);transform:rotate(-45deg)}

/* price table on the board */
table{width:100%;border-collapse:collapse;margin:8px 0 18px;background:var(--board-2);border:2px solid var(--frame);border-radius:8px;overflow:hidden;font-family:var(--f-cond);font-weight:600;font-size:1.1rem;font-variant-numeric:tabular-nums}
th,td{padding:14px 20px;text-align:left;border-top:1px dashed var(--frame)}
tr:first-child th{border-top:0;color:var(--chalk-3);font-weight:600;font-size:.95rem;letter-spacing:.05em;text-transform:uppercase}
td:last-child,th:last-child{text-align:right}
td:last-child{font-family:var(--f-display);font-weight:800;font-size:1.6rem;white-space:nowrap}

.box{background:var(--board-2);border:2px solid var(--frame);border-radius:8px;padding:20px 24px;margin:24px 0;line-height:1.8}
.map{border:2px solid var(--frame);border-radius:8px;overflow:hidden}
.map iframe{display:block;width:100%;height:320px;border:0!important;filter:grayscale(1) invert(.92) contrast(.85)!important}
.form{margin:24px 0;background:var(--board-2);border:2px solid var(--frame);border-radius:8px;overflow:hidden}
.form-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px dashed var(--frame);font-family:var(--f-cond);font-weight:600;color:var(--chalk-2)}
.form-bar a{display:inline-flex;align-items:center;min-height:44px}
.form iframe{display:block;width:100%;height:860px;border:0;background:#fff;color:#111315}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}
.en-block{margin-top:48px;padding:22px 24px 8px;background:var(--board-2);border:2px solid var(--frame);border-radius:8px}
.en-block h2{margin-top:0}
.en-block p{color:var(--chalk-2)}

/* footer */
footer{border-top:1px solid var(--frame);padding:48px var(--gut) 40px;color:var(--chalk-2)}
footer .foot{max-width:900px;margin:0 auto}
footer .motto{display:flex;align-items:center;gap:16px;margin-bottom:22px;font-family:var(--f-display);font-weight:800;font-size:clamp(1.6rem,4vw,2.2rem);line-height:.95;text-transform:uppercase;color:var(--chalk)}
footer .motto img{width:72px;height:72px;border-radius:50%}
footer p{margin-bottom:.6em;font-size:.98rem}
footer nav{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:14px}
footer nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--chalk-2);text-decoration:none;font-family:var(--f-cond);font-weight:600;letter-spacing:.03em}
footer nav a:hover{color:var(--chalk)}

/* phone booking bar */
.bookbar{display:none}
@media (max-width:760px){
  body.has-bar{padding-bottom:78px}
  .bookbar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(17,19,21,.96);border-top:1px solid var(--frame)}
  .bookbar .btn{flex:1}
  .bookbar .wa{display:inline-flex;align-items:center;justify-content:center;width:52px;min-height:48px;border:1px solid var(--frame);border-radius:6px;color:var(--chalk)}
  .bookbar .wa svg{width:24px;height:24px;fill:currentColor}
  header .cta{min-height:44px;padding:.5em 1em;font-size:.9rem}
  th,td{padding:12px 14px}
}