:root{
    --paper:#faf7f1;        /* warm ivory — page ground, aged paper */
    --paper-2:#f1ebdc;       /* lifted panel / card fill */
    --line:#e2d7c0;          /* hairline / border on paper */
    --ink:#241c14;           /* main text — ink on paper */
    --ink-dim:#786d59;       /* muted text */
    --brass:#93702e;         /* gold accent — links, icons, CTA */
    --brass-deep:#755720;    /* darker gold — small text needing extra contrast */
    --cini:#1d6b73;          /* çini turquoise — secondary accent */
    --lac:#8c332e;           /* çini red — sparing */
    --onphoto:#f5efe0;       /* light text sitting on a dark photo scrim */
    --gold-ondark:#d8b877;   /* gold accent inside the dark artwork modal */
    --maxw:1200px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:"Hanken Grotesk",system-ui,sans-serif;
    font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:500;line-height:1.05;margin:0;letter-spacing:-.01em}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .eyebrow{font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--brass-deep);font-weight:600}
  .muted{color:var(--ink-dim)}

  /* --- nav --- */
  header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(9px);
    background:color-mix(in srgb,var(--paper) 82%,transparent);
    border-bottom:1px solid color-mix(in srgb,var(--brass) 22%,transparent)}
  .navrow{display:flex;align-items:center;justify-content:space-between;min-height:66px;padding:10px 0}
  .brand{display:flex;flex-direction:column;line-height:1}
  .brand b{font-family:"Fraunces",serif;font-weight:600;font-size:18px;letter-spacing:.02em}
  .brand span{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--cini);margin-top:4px}
  .brand .credential-line{font-size:9.5px;letter-spacing:.03em;text-transform:none;color:var(--brass-deep);
    margin-top:3px;line-height:1.3;max-width:230px}
  .navlinks{display:flex;align-items:center;gap:30px}
  .navlinks a.link{font-size:14.5px;color:var(--ink-dim);position:relative;padding:6px 0;transition:color .2s}
  .navlinks a.link:hover{color:var(--ink)}
  .navlinks a.link::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--cini);transition:width .25s}
  .navlinks a.link:hover::after{width:100%}
  .langbtn{font-family:inherit;font-size:12.5px;letter-spacing:.12em;background:none;border:1px solid color-mix(in srgb,var(--brass) 45%,transparent);
    color:var(--ink);padding:6px 11px;border-radius:100px;cursor:pointer;transition:all .2s}
  .langbtn:hover{border-color:var(--brass);color:var(--brass-deep)}
  .wa{display:inline-flex;align-items:center;gap:8px;background:var(--brass);color:#fbf6ec;
    font-weight:600;font-size:14.5px;padding:10px 18px;border-radius:100px;transition:transform .15s,background .2s}
  .wa:hover{background:var(--brass-deep);transform:translateY(-1px)}
  .wa svg{width:17px;height:17px;fill:currentColor}
  .menutoggle{display:none;background:none;border:0;color:var(--ink);cursor:pointer}

  /* --- hero --- */
  .hero{position:relative;padding:74px 0 40px}
  .herogrid{display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center}
  .hero h1{font-size:clamp(48px,7.4vw,104px);font-weight:500}
  .hero h1 em{font-style:italic;color:var(--brass)}
  .hero .lead{font-size:19px;max-width:30ch;margin:22px 0 30px;color:var(--ink-dim)}
  .hero .btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .ghost{display:inline-flex;align-items:center;gap:9px;border:1px solid color-mix(in srgb,var(--brass) 40%,transparent);
    padding:11px 20px;border-radius:100px;font-size:15px;color:var(--ink);transition:all .2s}
  .ghost:hover{border-color:var(--cini);color:var(--cini)}
  .ghost .arw{transition:transform .2s}
  .ghost:hover .arw{transform:translateY(3px)}

  .heroart{position:relative}
  .heroframe{position:relative;border:1px solid color-mix(in srgb,var(--brass) 55%,transparent);
    padding:12px;border-radius:4px;background:linear-gradient(160deg,#2b2318,#1c150e);
    box-shadow:0 30px 70px -28px rgba(36,28,20,.4)}
  .heroframe img{width:100%;height:540px;object-fit:cover;border-radius:2px}
  .artchip{position:absolute;left:24px;bottom:24px;background:color-mix(in srgb,var(--paper) 82%,transparent);
    backdrop-filter:blur(6px);border:1px solid color-mix(in srgb,var(--brass) 35%,transparent);
    padding:8px 14px;border-radius:100px;font-size:12.5px;letter-spacing:.04em;color:var(--ink)}
  .artchip b{color:var(--brass-deep);font-weight:600}

  /* --- flourish signature divider --- */
  .flourish{display:block;margin:0 auto;width:min(420px,72%);height:52px;color:var(--brass)}
  .flourish path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
    stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.6s ease}
  .flourish.drawn path{stroke-dashoffset:0}

  /* --- credibility strip --- */
  .strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:46px}
  .stripin{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 44px;padding:20px 0}
  .strip span{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);display:inline-flex;gap:11px;align-items:center}
  .strip span::before{content:"";width:5px;height:5px;background:var(--cini);border-radius:50%;transform:rotate(45deg)}

  /* --- section shell --- */
  section{padding:96px 0}
  .sechead{max-width:640px;margin-bottom:52px}
  .sechead h2{font-size:clamp(32px,4.6vw,54px);margin-top:14px}
  .sechead p{margin-top:16px;color:var(--ink-dim);font-size:17px}

  /* --- works section head: text + mobile-preview mockup --- */
  .workshead{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start}
  .workshead .sechead{margin-bottom:0}
  .phonemock{justify-self:end;text-align:center;margin-top:34px}
  .phonemock-frame{width:172px;border:1px solid color-mix(in srgb,var(--brass) 55%,transparent);
    border-radius:26px;padding:7px;background:linear-gradient(160deg,#2b2318,#1c150e);
    box-shadow:0 24px 54px -24px rgba(36,28,20,.4)}
  .phonemock-frame img{width:100%;height:auto;display:block;border-radius:19px}
  .phonemock-cap{margin-top:12px;font-size:12.5px;letter-spacing:.03em;color:var(--brass-deep)}
  @media (max-width:860px){.workshead{grid-template-columns:1fr}.phonemock{display:none}}

  /* --- courses: split head + bento photo mosaic --- */
  .courses{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:46px}
  .coursehead{display:grid;grid-template-columns:1fr 1fr;gap:28px 64px;align-items:end;margin:34px 0 52px}
  .coursehead h2{font-size:clamp(40px,6vw,80px);margin-top:14px}
  .coursehead h2 em{font-style:italic;color:var(--brass)}
  .coursehead p{color:var(--ink-dim);margin:0 0 20px}
  .coursehead .chiprow{margin:0 0 26px}
  .coursehead .chip{background:var(--paper)}
  .coursehead .btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .coursegrid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:14px}
  .cphoto{position:relative;margin:0;overflow:hidden;border-radius:5px;border:1px solid var(--line);background:#1c150e}
  .cphoto img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .cphoto:hover img{transform:scale(1.05)}
  .cphoto--hero{grid-column:span 2;grid-row:span 2}
  .cphoto--tall{grid-row:span 2}
  .cphoto--wide{grid-column:span 2;grid-row:span 1}
  .cphoto figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 16px;
    background:linear-gradient(transparent,rgba(15,11,6,.82));
    font-family:"Fraunces",serif;font-style:italic;color:var(--onphoto);font-size:16px}
  .cphoto--hero figcaption{font-size:20px;padding:60px 26px 22px}
  /* stagger the mosaic reveal so it "assembles" */
  .js .coursegrid .reveal:nth-child(2){transition-delay:.08s}
  .js .coursegrid .reveal:nth-child(3){transition-delay:.16s}
  .js .coursegrid .reveal:nth-child(4){transition-delay:.24s}
  .js .coursegrid .reveal:nth-child(5){transition-delay:.12s}
  .js .coursegrid .reveal:nth-child(6){transition-delay:.2s}
  @media (max-width:900px){
    .coursehead{grid-template-columns:1fr;align-items:start}
    .coursegrid{grid-template-columns:1fr 1fr;grid-auto-rows:170px;gap:10px}
    .cphoto--hero{grid-column:span 2;grid-row:span 2}
    .cphoto--tall{grid-row:span 2}
    .cphoto--wide{grid-column:span 2}
  }
  @media (prefers-reduced-motion:reduce){
    .cphoto img{transition:none}.cphoto:hover img{transform:none}
    .js .coursegrid .reveal{transition-delay:0s}
  }

  /* --- gallery room: full-bleed horizontal museum rail --- */
  .gallery-room{position:relative;width:100vw;margin-left:calc(50% - 50vw);
    background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:46px 0 44px}
  .gallery-hint{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-deep);font-weight:600;margin:0 0 22px}
  .gallery-room::before,.gallery-room::after{content:"";position:absolute;top:0;bottom:0;width:min(120px,10vw);
    z-index:2;pointer-events:none;transition:opacity .3s ease}
  .gallery-room::before{left:0;background:linear-gradient(90deg,var(--paper-2),transparent)}
  .gallery-room::after{right:0;background:linear-gradient(270deg,var(--paper-2),transparent)}
  .gallery-room.at-start::before{opacity:0}
  .gallery-room.at-end::after{opacity:0}
  .gallery-rail{display:flex;align-items:center;gap:52px;overflow-x:auto;scroll-snap-type:x proximity;
    padding:6px max(28px,calc((100vw - var(--maxw))/2 + 28px)) 10px;scrollbar-width:thin;scrollbar-color:var(--brass) transparent}
  .gallery-rail::-webkit-scrollbar{height:6px}
  .gallery-rail::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--brass) 55%,transparent);border-radius:100px}
  /* ‹ › rail buttons: step one piece; hidden at the natural start/end like the edge fades */
  .rail-wrap{position:relative}
  .rail-nav{position:absolute;top:50%;z-index:3;width:52px;height:52px;margin-top:-26px;border-radius:50%;
    display:grid;place-items:center;cursor:pointer;color:var(--ink);
    background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(6px);
    border:1px solid color-mix(in srgb,var(--brass) 55%,transparent);
    box-shadow:0 10px 30px -12px rgba(36,28,20,.35);transition:opacity .3s ease,border-color .2s,color .2s,transform .2s}
  .rail-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .rail-nav:hover{border-color:var(--cini);color:var(--cini);transform:scale(1.06)}
  .rail-nav:focus-visible{outline:2px solid var(--cini);outline-offset:3px}
  .rail-nav:disabled{opacity:0;pointer-events:none}
  .rail-prev{left:max(16px,calc((100vw - var(--maxw))/2 - 30px))}
  .rail-next{right:max(16px,calc((100vw - var(--maxw))/2 - 30px))}
  @media (max-width:560px){.rail-nav{width:42px;height:42px;margin-top:-21px}.rail-prev{left:8px}.rail-next{right:8px}}
  .piece{cursor:pointer;flex:0 0 auto;width:min(340px,72vw);scroll-snap-align:center;position:relative}
  .piece::before{content:"";position:absolute;top:-22px;left:-15%;width:130%;height:110px;
    background:radial-gradient(ellipse closest-side,color-mix(in srgb,var(--brass) 26%,transparent),transparent 72%);
    pointer-events:none;z-index:0}
  .piece .imgbox{position:relative;z-index:1;border-radius:3px;overflow:hidden;background:var(--paper);
    border:1px solid var(--line);padding:14px;box-shadow:0 1px 3px rgba(36,28,20,.07)}
  .piece .imgbox img{width:100%;height:auto;display:block;border-radius:1px;transition:transform .5s ease}
  .piece:hover .imgbox img{transform:scale(1.015)}
  .piece figcaption{margin-top:14px;font-family:"Fraunces",serif;font-size:16px;color:var(--ink);text-align:center}
  .piece:focus-visible{outline:2px solid var(--cini);outline-offset:5px;border-radius:4px}

  /* --- how it works steps --- */
  .steps{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .stepgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .step{padding:30px 26px;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
  .stepnum{font-family:"Fraunces",serif;font-size:14px;color:var(--brass-deep);letter-spacing:.08em}
  .stepicon{display:block;width:28px;height:28px;margin:18px 0 18px;color:var(--brass);
    fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
  .step p{font-size:15.5px;color:var(--ink);margin:0}
  @media (max-width:900px){.stepgrid{grid-template-columns:1fr}}

  /* --- about --- */
  .about{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .aboutgrid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
  .about h2{font-size:clamp(30px,4.4vw,50px)}
  .about p{color:var(--ink-dim);margin:18px 0 0}
  .about .credential{display:inline-flex;align-items:center;font-size:12px;letter-spacing:.02em;
    color:var(--brass-deep);background:var(--paper);border:1px solid color-mix(in srgb,var(--brass) 40%,transparent);
    padding:8px 14px;border-radius:100px;margin:16px 0 0}
  .about .credential b{font-weight:600}
  .facts{display:flex;gap:38px;margin-top:32px;flex-wrap:wrap}
  .facts div b{font-family:"Fraunces",serif;font-size:34px;color:var(--brass);display:block;line-height:1}
  .facts div span{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
  .aboutart{border:1px solid color-mix(in srgb,var(--brass) 40%,transparent);padding:10px;border-radius:4px;background:#1c150e}
  .aboutart img{width:100%;height:430px;object-fit:cover;border-radius:2px}

  /* --- order CTA --- */
  .order{text-align:center}
  .order h2{font-size:clamp(34px,5vw,62px);max-width:16ch;margin:0 auto}
  .order p{color:var(--ink-dim);max-width:44ch;margin:20px auto 34px}
  .order .wa{font-size:16px;padding:15px 30px}
  .order .note{margin-top:18px;font-size:13.5px;color:var(--ink-dim)}
  .contact-meta{display:flex;flex-direction:column;align-items:center;gap:38px;
    margin:44px auto 0;padding-top:34px;max-width:420px;border-top:1px solid var(--line)}
  .visit{font-style:normal;display:flex;flex-direction:column;align-items:center;gap:8px}
  .visit svg{width:22px;height:22px;fill:none;stroke:var(--brass);stroke-width:1.5}
  .visit-label{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-deep)}
  .visit-addr{font-size:15.5px;line-height:1.6;color:var(--ink)}
  .visit-addr b{font-family:"Fraunces",serif;font-weight:500;font-size:19px}
  .visit-map{display:inline-flex;align-items:center;gap:9px;margin-top:10px;font-size:15px;font-weight:500;color:var(--ink);
    background:var(--paper-2);border:1px solid color-mix(in srgb,var(--brass) 55%,transparent);
    padding:10px 20px;border-radius:100px;transition:all .2s}
  .visit .visit-map svg{width:18px;height:18px;stroke:var(--brass-deep);stroke-width:1.6;stroke-linejoin:round}
  .visit-map .arrow{color:var(--brass-deep);transition:transform .2s}
  .visit-map:hover{border-color:var(--cini);color:var(--cini)}
  .visit-map:hover svg{stroke:var(--cini)}
  .visit-map:hover .arrow{color:var(--cini);transform:translateX(3px)}
  .visit-map:focus-visible{outline:2px solid var(--cini);outline-offset:3px}
  @media (prefers-reduced-motion:reduce){.visit-map:hover .arrow{transform:none}}
  .social-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
  .social-list a{display:inline-flex;align-items:center;gap:12px;font-size:16px;font-weight:500;color:var(--ink);
    background:var(--paper-2);border:1px solid color-mix(in srgb,var(--brass) 55%,transparent);
    padding:6px 22px 6px 6px;border-radius:100px;transition:all .2s}
  .social-list a:hover{border-color:var(--cini);color:var(--cini)}
  .ig-badge{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
    background:var(--brass);color:var(--paper);transition:background .2s,transform .2s}
  .social-list a:hover .ig-badge{background:var(--cini);transform:scale(1.06)}
  .ig-badge svg{width:22px !important;height:22px !important;stroke-width:1.8 !important}
  .social-list svg,.foot-ig svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
  .social-list .dot,.foot-ig .dot{fill:currentColor;stroke:none}
  @media (prefers-reduced-motion:reduce){.social-list a:hover .ig-badge{transform:none}}
  .social-list a:focus-visible{outline:2px solid var(--cini);outline-offset:3px}
  .social-note{font-size:13.5px;color:var(--ink-dim);margin-top:4px}
  .chipslabel{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin:26px 0 0}
  .chiprow{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:14px 0 30px;padding:0}
  .chiprow--left{justify-content:flex-start}
  .chip{font-size:13.5px;letter-spacing:.02em;color:var(--ink);background:var(--paper-2);
    border:1px solid color-mix(in srgb,var(--brass) 35%,transparent);padding:7px 16px;border-radius:100px}

  /* --- footer --- */
  footer{border-top:1px solid var(--line);padding:48px 0 40px}
  .footrow{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
  .footrow .brand b{font-size:22px}
  .foot-links{display:flex;gap:26px;font-size:14.5px}
  .foot-links a{color:var(--ink-dim);transition:color .2s}
  .foot-links a:hover{color:var(--brass-deep)}
  .foot-ig{display:inline-flex;align-items:center;gap:7px}
  .foot-ig svg{width:16px;height:16px}
  .foot-addr{margin-top:22px;font-size:13.5px;color:var(--ink-dim)}
  .fineprint{margin-top:30px;font-size:12.5px;color:var(--ink-dim)}

  /* --- floating whatsapp button --- */
  .wa-float{position:fixed;right:22px;bottom:22px;z-index:40;width:56px;height:56px;border-radius:50%;
    background:var(--brass);display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 26px -8px rgba(36,28,20,.45);transition:transform .15s,background .2s}
  .wa-float:hover{background:var(--brass-deep);transform:translateY(-2px)}
  .wa-float svg{width:26px;height:26px;fill:#fbf6ec}
  .wa-float:focus-visible{outline:2px solid var(--cini);outline-offset:3px}
  @media (max-width:560px){.wa-float{right:16px;bottom:16px;width:50px;height:50px}}
  /* Netlify'ın sağ alta eklediği "Powered by Netlify" rozeti varken WhatsApp butonu rozetin üstüne çıkar */
  .wa-float{transition:transform .2s,background .2s,bottom .3s ease}
  .has-host-badge .wa-float{bottom:86px}
  @media (max-width:560px){.has-host-badge .wa-float{bottom:78px}}
  @media (prefers-reduced-motion:reduce){.wa-float{transition:none}}

  /* --- artwork detail modal: image left, description right --- */
  .artmodal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
    background:rgba(10,8,5,.94);opacity:0;pointer-events:none;transition:opacity .25s ease;padding:32px}
  .artmodal.open{opacity:1;pointer-events:auto}
  .am-inner{display:flex;width:100%;max-width:1080px;max-height:88vh;background:var(--paper);
    border-radius:6px;overflow:hidden;box-shadow:0 40px 100px -30px rgba(0,0,0,.9)}
  .am-media{flex:1.2;background:var(--paper-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
  .am-media img{width:100%;height:100%;object-fit:contain}
  .am-info{flex:1;padding:48px 44px;overflow-y:auto;display:flex;flex-direction:column;justify-content:center}
  .am-info h3{font-size:26px;font-weight:500}
  .am-info p{margin-top:16px;color:var(--ink-dim);font-size:15.5px;line-height:1.75}
  .am-wa{margin-top:26px;align-self:flex-start}
  .am-close{position:absolute;top:22px;right:26px;width:40px;height:40px;border-radius:50%;
    background:none;color:var(--onphoto);cursor:pointer;font-size:22px;line-height:1;
    border:1px solid color-mix(in srgb,var(--brass) 45%,transparent);transition:all .2s}
  .am-close:hover{border-color:var(--brass);color:var(--gold-ondark)}
  .am-close:focus-visible{outline:2px solid var(--cini);outline-offset:2px}
  @media (max-width:760px){
    .am-inner{flex-direction:column;max-height:92vh;overflow-y:auto}
    .am-media{max-height:44vh}
    .am-info{padding:30px 26px}
  }
  @media (max-width:560px){.am-close{top:14px;right:14px}}

  /* --- course photo lightbox (image only) --- */
  .photobox{padding:64px 84px 40px}
  .pb-stage{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:100%;height:100%;gap:16px}
  .pb-stage img{max-width:100%;max-height:calc(100% - 50px);object-fit:contain;border-radius:3px;
    box-shadow:0 40px 100px -30px rgba(0,0,0,.9)}
  .pb-stage figcaption{display:flex;gap:18px;align-items:baseline;justify-content:center;flex-wrap:wrap;
    font-family:"Fraunces",serif;font-style:italic;color:var(--onphoto);font-size:18px;text-align:center}
  .pb-count{font-family:"Hanken Grotesk",sans-serif;font-style:normal;font-size:12.5px;letter-spacing:.16em;color:var(--gold-ondark)}
  .pb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
    display:grid;place-items:center;background:rgba(10,8,5,.5);color:var(--onphoto);cursor:pointer;
    border:1px solid color-mix(in srgb,var(--brass) 45%,transparent);transition:all .2s}
  .pb-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .pb-nav:hover{border-color:var(--brass);color:var(--gold-ondark)}
  .pb-nav:focus-visible{outline:2px solid var(--cini);outline-offset:2px}
  .pb-prev{left:22px}.pb-next{right:22px}
  @media (max-width:760px){
    .photobox{padding:64px 12px 84px}
    .pb-nav{top:auto;bottom:22px;transform:none}
    .pb-prev{left:calc(50% - 64px)}.pb-next{right:calc(50% - 64px)}
    .pb-stage figcaption{font-size:16px}
  }
  /* course tiles: clickable affordance */
  .cphoto{cursor:zoom-in}
  .cphoto::after{content:"";position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;
    background:rgba(10,8,5,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5efe0' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E") center/16px no-repeat;
    opacity:0;transform:scale(.85);transition:opacity .25s,transform .25s}
  .cphoto:hover::after,.cphoto:focus-visible::after{opacity:1;transform:none}
  .cphoto:focus-visible{outline:2px solid var(--cini);outline-offset:4px}
  @media (hover:none){.cphoto::after{opacity:.9;transform:none;width:30px;height:30px;top:10px;right:10px;background-size:14px}}

  /* reveal (only when JS on) */
  .js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
  .js .reveal.in{opacity:1;transform:none}

  @media (max-width:900px){
    .herogrid{grid-template-columns:1fr;gap:34px}
    .heroframe img{height:420px}
    .aboutgrid{grid-template-columns:1fr;gap:34px}
    .navlinks .link,.navlinks .langbtn{display:none}
  }
  @media (max-width:560px){
    .wrap{padding:0 20px}
    section{padding:70px 0}
    .navlinks .wa span{display:none}
    .gallery-rail{gap:36px;padding-left:20px;padding-right:20px}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .js .reveal{opacity:1;transform:none;transition:none}
    .flourish path{transition:none;stroke-dashoffset:0}
    .piece .imgbox img{transition:none}
    .gallery-room::before,.gallery-room::after{transition:none}
    .rail-nav{transition:none}.rail-nav:hover{transform:none}
    .artmodal{transition:none}
    .cphoto::after{transition:none}
  }