@font-face{font-family:'Onamura';src:url("/assets/generated/font-d9b9f6efad3ca0d9.woff2") format('woff2');font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:'Bethany';src:url("/assets/generated/font-86e2ab90737451fa.woff2") format('woff2');font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:'LT Superior';src:url("/assets/generated/font-21fbc340eb926500.woff2") format('woff2');font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:'SK Reykjavik Rounded';src:url("/assets/generated/font-02835e53376422c9.woff2") format('woff2');font-weight:400;font-style:normal;font-display:swap}

  :root{
    /* Surfaces — whites (from design.md) */
    --washi:#FFFFFF; --gofun:#F5F5F4; --kasumi:#EAE9E6;
    /* Ink */
    --sumi:#17150F; --sumi-soft:#45413A; --nezumi:#8A847A; --gin:#BBB5AA;
    /* Accent */
    --ai:#27343D;
    /* Mediterranean / Anatolian whisper (rationed, <5% coverage) */
    --cini:#3F7E83;    /* İznik turquoise, muted */
    --bole:#9E4A36;    /* İznik sealing-wax red */
    --ochre:#B98A47;   /* Anatolian / Morandi ochre */
    --aegean:#5E7C92;  /* dusty Aegean blue */

    --maxw:1440px;
    --margin:clamp(20px,8vw,160px);
    --gutter:clamp(16px,2vw,32px);
    --ease:cubic-bezier(0.16,1,0.30,1);
    --ease-apple:cubic-bezier(.22,1,.36,1);

    --t-display:clamp(3rem,9vw,8.5rem);
    --t-h1:clamp(2.25rem,5vw,4rem);
    --t-h2:clamp(1.6rem,3.2vw,2.4rem);
    --t-body-l:clamp(1.15rem,1.5vw,1.4rem);
    --t-body:1.0625rem;
    --t-cap:0.75rem;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  body{
    background:var(--washi); color:var(--sumi);
    font-family:"LT Superior",system-ui,sans-serif;
    font-size:var(--t-body); line-height:1.6; font-weight:400;
    overflow-x:hidden;
  }
  ::selection{background:var(--ai); color:var(--washi)}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}

  /* ---- type helpers ---- */
  .serif{font-family:"SK Reykjavik Rounded","LT Superior",sans-serif;font-weight:400}
  .cap{
    font-family:"LT Superior",system-ui,sans-serif; font-size:var(--t-cap);
    text-transform:uppercase; letter-spacing:0.16em; color:var(--nezumi);
    font-weight:400;
  }
  .ink-img{mix-blend-mode:multiply} /* drops white ground, leaves only ink */

  /* ---- progress + grain ---- */
  .progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--ai);z-index:200}
  .grain{display:none;position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

  /* ---- nav ---- */
  /* nav embedded in the hero — transparent, no background, scrolls away with the page */
  nav{position:absolute;top:0;left:0;width:100%;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:clamp(18px,2.6vw,34px) var(--margin);
    background:none;border:none;}
  .brand{display:flex;align-items:center;gap:12px;font-family:"Onamura",serif;font-weight:400;font-size:1.12rem;letter-spacing:.01em}
  .brand img{width:64px;height:auto;object-fit:contain;transition:transform .65s var(--ease);transform-origin:center}
  .brand:hover img{transform:scale(1.09)}
  .nav-right{display:flex;align-items:center;gap:clamp(14px,2vw,34px)}
  .nav-links{display:flex;gap:clamp(20px,2.4vw,42px);align-items:center}
  .nav-links a{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sumi-soft);position:relative;padding-bottom:4px}
  .nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--ai);transition:width .35s var(--ease)}
  .nav-links a:hover{color:var(--sumi)}
  .nav-links a:hover::after{width:100%}
  /* Keep the existing button typography when language controls become links. */
  .lang [data-lang],.navmenu .mlang [data-lang]{font:400 13.3333333333px Arial;line-height:normal;text-align:center;letter-spacing:normal}
  .lang{display:flex;gap:8px;font-family:"LT Superior",system-ui,sans-serif;font-size:.72rem;letter-spacing:.12em}
  .lang [data-lang]{background:none;border:none;cursor:pointer;color:var(--gin);padding:2px 1px;text-transform:uppercase;transition:color .3s}
  .lang [data-lang].active{color:var(--sumi)}
  .lang [data-lang]:hover{color:var(--ai)}
  .lang .sep{color:var(--kasumi)}
  /* compact language dropdown (nav) */
  .langmenu{position:relative;font-family:"LT Superior",system-ui,sans-serif}
  .langtoggle{display:flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;color:var(--sumi);font:inherit;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;padding:5px 2px}
  .langtoggle .caret{width:6px;height:6px;border-right:1.4px solid var(--nezumi);border-bottom:1.4px solid var(--nezumi);transform:rotate(45deg) translateY(-1px);transition:transform .3s var(--ease)}
  .langmenu.open .langtoggle .caret{transform:rotate(-135deg) translateY(-1px)}
  .langlist{position:absolute;top:calc(100% + 12px);right:0;min-width:140px;list-style:none;margin:0;padding:7px;background:#fff;border:1px solid var(--kasumi);box-shadow:0 14px 36px rgba(20,18,15,.08);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.96);transform-origin:100% 0;transition:opacity .3s var(--ease-apple),transform .45s var(--ease-apple),visibility .3s;z-index:130}
  .langmenu.open .langlist{opacity:1;visibility:visible;transform:none}
  .langlist li{margin:0}
  .langlist [data-lang]{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;cursor:pointer;color:var(--sumi-soft);font:inherit;font-size:.8rem;letter-spacing:.01em;padding:9px 11px;transition:background .2s,color .2s}
  .langlist [data-lang]:hover{color:var(--sumi);background:var(--gofun)}
  .langlist [data-lang] .code{font-size:.62rem;letter-spacing:.14em;color:var(--gin);min-width:20px}
  .langlist [data-lang].active{color:var(--sumi)}
  .langlist [data-lang].active .code{color:var(--ai)}
  /* mobile menu */
  .navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;background:none;border:none;cursor:pointer;padding:6px;z-index:120}
  .navtoggle span{display:block;width:24px;height:2px;background:var(--sumi);transition:transform .35s var(--ease),opacity .25s var(--ease)}
  .navtoggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navtoggle.open span:nth-child(2){opacity:0}
  .navtoggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* opens as a circle growing out of the burger (--mx/--my set in JS), items rise in after it */
  .navmenu{position:fixed;inset:0;z-index:115;background:var(--washi);display:flex;flex-direction:column;justify-content:center;padding:var(--margin);visibility:hidden;
    clip-path:circle(0px at var(--mx,calc(100% - 48px)) var(--my,20px));
    transition:clip-path .8s var(--ease-apple),visibility 0s linear .8s}
  .navmenu.open{visibility:visible;clip-path:circle(150vmax at var(--mx,calc(100% - 48px)) var(--my,20px));transition:clip-path .8s var(--ease-apple),visibility 0s}
  /* while the menu is open (and until its circle has closed) the bar sits above it, so the burger's X stays visible */
  nav{transition:z-index 0s linear .8s}
  body.menu-open nav{z-index:130;transition:none}
  .navmenu > *{opacity:0;transform:translateY(22px);transition:opacity .3s var(--ease-apple),transform .3s var(--ease-apple)}
  .navmenu.open > *{opacity:1;transform:none;transition:opacity .6s var(--ease-apple) calc(.14s + var(--i,0) * .05s),transform .9s var(--ease-apple) calc(.14s + var(--i,0) * .05s)}
  @media (prefers-reduced-motion: reduce){
    .navmenu,.navmenu.open{clip-path:none;transition:visibility 0s}
    .navmenu:not(.open){visibility:hidden}
    .navmenu > *,.navmenu.open > *{opacity:1;transform:none;transition:none}
  }
  .navmenu a.ml{font-family:"SK Reykjavik Rounded",sans-serif;text-transform:uppercase;font-size:clamp(2rem,9vw,2.9rem);letter-spacing:.01em;color:var(--sumi);padding:14px 0;border-bottom:1px solid var(--kasumi)}
  .navmenu .mlang{display:flex;gap:20px;margin-top:34px;font-family:"LT Superior",system-ui,sans-serif;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase}
  .navmenu .mlang [data-lang]{background:none;border:none;color:var(--gin);cursor:pointer;letter-spacing:.14em;padding:0}
  .navmenu .mlang [data-lang].active{color:var(--sumi)}
  body.menu-open{overflow:hidden}
  @media(max-width:720px){
    .nav-links{display:none}
    .langmenu{display:none}
    .navtoggle{display:flex}
  }

  /* ---- layout ---- */
  section{position:relative;padding-left:var(--margin);padding-right:var(--margin)}
  .wrap{max-width:var(--maxw);margin:0 auto;width:100%}

  /* ---- HERO (full-bleed ink, name quiet in the corner) ---- */
  .hero{min-height:100svh;position:relative;overflow:hidden}
  .hero-media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:0}
  /* the ink is taller than the hero and drifts down on scroll; fade it out over the hero's last third so it
     dissolves into the page instead of stopping on the hero's hard bottom edge */
  .hero-media{-webkit-mask-image:linear-gradient(180deg,#000 64%,transparent 100%);mask-image:linear-gradient(180deg,#000 64%,transparent 100%)}
  .hero-media img,.hero-media video{height:min(106vh,1140px);width:auto;max-width:142%;object-fit:contain;transform:translateX(15%)}
  /* seamless white-bg loop dropped onto the white page via multiply; edges feathered so no box */
  #heroVid{mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(120% 120% at 60% 44%,#000 72%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(120% 120% at 60% 44%,#000 72%,rgba(0,0,0,0) 100%)}
  /* transparent PNG fallback — shown only when motion is reduced */
  #heroImg{mix-blend-mode:normal}
  .hero-fallback{display:none}
  @media (prefers-reduced-motion: reduce){
    #heroVid{display:none}
    .hero-fallback{display:block}
  }
  .hero-corner{position:absolute;left:var(--margin);bottom:clamp(120px,22vh,250px);z-index:2;max-width:46rem}
  .hero-name{font-weight:400;line-height:1;letter-spacing:0;text-shadow:0 0 6px #fff,0 0 14px #fff,0 0 30px rgba(255,255,255,.95),0 0 64px rgba(255,255,255,.7)}
  .hero-name .ln{display:block}
  .hero-name .ln > span{display:block}
  .hero-name .fn{font-family:"Onamura",serif;font-size:clamp(2rem,4vw,3.6rem);line-height:1.02;color:var(--sumi-soft);letter-spacing:.02em}
  .hero-name .sn{font-family:"Bethany",serif;font-size:clamp(3.3rem,7.8vw,6.8rem);line-height:1;color:var(--sumi);margin-top:.08em}
  @media(max-width:760px){
    .hero-media{align-items:center;justify-content:center;padding-top:0;padding-bottom:6vh;overflow:hidden}
    .hero-media img,.hero-media video{height:auto;width:150%;max-width:none;transform:none}
    .hero-corner{bottom:64px}
    .hero-name{font-size:clamp(2.3rem,11vw,3.4rem)}
  }

  /* ---- MANIFESTO ---- */
  .manifesto{padding-top:clamp(120px,22vh,260px);padding-bottom:clamp(120px,22vh,260px);position:relative;overflow:hidden}
  .manifesto .wrap{max-width:1240px;position:relative;z-index:2}
  .manifesto p{font-family:"LT Superior",system-ui,sans-serif;font-weight:400;font-size:var(--t-h1);line-height:1.32;letter-spacing:-.01em;color:var(--sumi);max-width:62%}
  .manifesto-figure{position:absolute;z-index:1;top:50%;right:calc(var(--margin) + 2%);transform:translateY(-50%);width:min(30%,380px);pointer-events:none}
  .manifesto-figure .fig{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;position:relative;z-index:2;animation:figFloat 6.5s ease-in-out infinite}
  @keyframes figFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
  @media(max-width:820px){
    .manifesto{padding-top:clamp(80px,13vh,150px);padding-bottom:clamp(80px,13vh,150px)}
    .manifesto p{max-width:100%}
    .manifesto-figure{position:relative;top:auto;right:auto;transform:none;width:min(52vw,230px);margin:0 0 clamp(28px,5vh,44px)}
  }
  @media (prefers-reduced-motion: reduce){
    .manifesto-figure .fig{animation:none}
  }
  /* opacity / blur / lift written per scroll frame in JS — no CSS transition, it would lag the scrub */
  .manifesto .reveal-word{display:inline-block;will-change:opacity,filter,transform}
  .manifesto .em{font-style:italic;color:var(--ai)}
  .manifesto-kick{margin-bottom:clamp(28px,6vh,60px)}

  /* ---- WORK / PROJECTS (Bauhaus module) ---- */
  .work{padding:clamp(96px,15vh,180px) var(--margin)}
  .work .wrap{max-width:var(--maxw);margin:0 auto}
  .work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(34px,6vh,68px)}
  .work-head h2{font-family:"SK Reykjavik Rounded",sans-serif;font-weight:400;text-transform:uppercase;font-size:var(--t-h1);letter-spacing:.01em;margin-top:10px;line-height:.92}
  .bau-glyph{display:flex;align-items:center;gap:12px;flex-shrink:0;padding-bottom:8px}
  .bau-glyph i{display:block}
  .bau-glyph .c{width:30px;height:30px;border-radius:50%;background:#FF3232}
  .bau-glyph .s{width:26px;height:26px;background:#006EFF}
  .bau-glyph .t{width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:28px solid #000}
  .work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.4vw,20px)}
  .bt{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(300px,33vw,460px);padding:clamp(22px,2.5vw,40px);text-decoration:none;transition:translate .35s var(--ease)}
  /* hover lifts with the independent `translate` so it stacks on the scroll-linked transform GSAP writes */
  .bt:hover{translate:0 -5px}
  [data-soon]{display:none!important}
  /* a project that is not published yet: its tile and menu entries stay, but lead nowhere */
  .bt.bt-soon{cursor:default}
  .bt.bt-soon:hover,.bt.bt-soon:active{translate:none;scale:none}
  .bt.bt-soon:hover .shape{transform:none}
  .pm-i.pm-soon{cursor:default;color:var(--nezumi)}
  .span7{grid-column:span 7}
  .bt.span5{grid-column:span 5}
  .span12{grid-column:span 12}
  .bt.blue{background:#006EFF;color:#fff}
  .bt.red{background:#FF3232;color:#fff}
  .bt.pink{background:#FFCCFF;color:#17150F}
  .bt.black{background:#000;color:#fff}
  /* unpublished project: washi grey, the ink pulled back a step */
  .bt.grey{background:var(--kasumi);color:var(--sumi-soft)}
  .bt.grey .bt-top,.bt.grey .bt-desc{color:var(--nezumi)}
  .bt.grey .bt-foot{color:var(--nezumi);gap:12px}
  .bt.grey .bt-foot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gin)}
  .bt-top{display:flex;justify-content:flex-start;align-items:center;gap:16px;font-family:"LT Superior",system-ui,sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;position:relative;z-index:3}
  .bt-name{font-family:"SK Reykjavik Rounded",sans-serif;text-transform:uppercase;font-size:clamp(1.8rem,3.3vw,3.1rem);line-height:.92;letter-spacing:.01em;position:relative;z-index:3}
  .bt-desc em{font-family:"Bethany",serif;font-style:normal}
  .bt-desc{font-family:"LT Superior",system-ui,sans-serif;font-size:.92rem;line-height:1.4;margin-top:12px;opacity:.9;position:relative;z-index:3;max-width:34ch}
  .bt-foot{display:flex;align-items:center;gap:10px;margin-top:18px;position:relative;z-index:3;font-family:"LT Superior",system-ui,sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
  .bt-foot .ar{transition:transform .25s var(--ease)}
  .bt:hover .bt-foot .ar{transform:translateX(7px)}
  .shape{position:absolute;z-index:1;transition:transform .4s var(--ease)}
  .bt:hover .shape{transform:rotate(16deg) scale(1.06)}
  @media(max-width:820px){
    .work-head{flex-direction:column;align-items:flex-start;gap:16px}
    .bt.span7,.bt.span5{grid-column:span 12}
    .bt{min-height:clamp(260px,72vw,360px)}
    /* the inline shape positions are tuned for the wide desktop tile and land
       on the title and description here — swap them for one corner circle */
    .bt .shape{display:none}
    .bt::after{content:"";position:absolute;z-index:1;pointer-events:none;border-radius:50%;
      width:clamp(100px,30vw,150px);height:clamp(100px,30vw,150px);top:-7%;right:-7%}
    .bt.blue::after{background:#FFCCFF}
    .bt.red::after{background:#fff}
    .bt.pink::after{background:#006EFF}
    .bt.black::after{background:#006EFF}
    .bt.grey::after{background:#D6D3CD}
  }


  /* ---- PATTERNS teaser (sneak peek) ---- */
  .patterns-teaser{padding-top:clamp(90px,14vh,170px);padding-bottom:clamp(90px,14vh,170px);background:var(--gofun);overflow:hidden}
  .patterns-teaser .wrap{max-width:var(--maxw);margin:0 auto}
  .ptz-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(30px,5vh,58px)}
  .ptz-head h2{font-family:"SK Reykjavik Rounded",sans-serif;font-weight:400;text-transform:uppercase;font-size:var(--t-h1);letter-spacing:.01em;margin-top:10px;line-height:.92}
  .ptz-all{font-family:"LT Superior",system-ui,sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sumi-soft);border-bottom:1px solid transparent;padding-bottom:3px;transition:color .3s,border-color .3s;white-space:nowrap;flex-shrink:0}
  .ptz-all:hover{color:var(--ai);border-color:var(--ai)}
  .ptz-all .ar{display:inline-block;transition:transform .25s var(--ease)}
  .ptz-all:hover .ar{transform:translateX(5px)}
  .ptz-count{font-variant-numeric:tabular-nums;color:var(--nezumi);margin-right:12px}
  .ptz-rail{position:relative;margin:0 calc(var(--margin) * -1);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .ptz-track{display:flex;gap:clamp(14px,1.6vw,24px);width:max-content;padding:6px 0 4px;animation:ptzDrift 70s linear infinite}
  .ptz-rail:hover .ptz-track,.ptz-rail:focus-within .ptz-track{animation-play-state:paused}
  @keyframes ptzDrift{to{transform:translateX(-50%)}}
  .rt{flex:none;width:clamp(210px,24vw,360px);text-decoration:none;color:var(--sumi)}
  .rt-media{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#fff;box-shadow:0 1px 0 var(--kasumi),0 18px 40px rgba(20,18,15,.06);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
  .rt-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
  .rt-made{opacity:0;transform:scale(1.06)}
  .rt:hover .rt-media{transform:translateY(-6px);box-shadow:0 1px 0 var(--kasumi),0 30px 60px rgba(20,18,15,.14)}
  .rt:hover .rt-pat{transform:scale(1.04)}
  .rt:hover .rt-made{opacity:1;transform:scale(1)}
  .rt-cap{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:14px;font-family:"LT Superior",system-ui,sans-serif}
  .rt-cap b{font-weight:400;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase}
  .rt-cap small{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--nezumi)}
  /* touch or reduced motion: no drift — a rail you swipe, snapping tile by tile */
  @media (hover:none),(prefers-reduced-motion:reduce){
    .ptz-track{animation:none;padding-left:var(--margin);padding-right:var(--margin)}
    .ptz-rail{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
    .ptz-rail::-webkit-scrollbar{display:none}
    .rt{scroll-snap-align:start;scroll-margin-left:var(--margin)}
    .rt[aria-hidden="true"]{display:none}
  }
  @media(max-width:720px){
    .patterns-teaser{padding-top:clamp(64px,10vh,120px);padding-bottom:clamp(64px,10vh,120px)}
    .ptz-head{flex-direction:column;align-items:flex-start;gap:14px}
  }
  @media(max-width:640px){.rt{width:62vw}}

  /* ---- ABOUT ---- */
  .about{padding-top:0;padding-bottom:clamp(100px,16vh,200px)}
  .about .wrap{max-width:var(--maxw);margin:0 auto}
  .about-kick{margin-bottom:18px}
  .about h2{font-family:"SK Reykjavik Rounded",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(2.8rem,6.4vw,6.4rem);letter-spacing:.01em;line-height:.96;max-width:10ch}
  .about-body{font-family:"LT Superior",system-ui,sans-serif;font-size:var(--t-body-l);line-height:1.62;color:var(--sumi-soft);max-width:54ch}
  /* ---- the two seas: Karadeniz (kara, black) above, Akdeniz (ak, white) below. The script draws the black
     water as one SVG path; the waterline crosses the middle of the title. Every text block blends with
     `difference`, so a single colour reads dark on the white sea and light on the black one — the source
     colour is white minus the colour wanted on white (on black the source itself shows).
     Keep transforms, opacity and z-index off the containers of those blocks: they would cut the blend
     off from the water behind it. ---- */
  .seas{position:relative;isolation:isolate;overflow:hidden;background:var(--washi);margin:0 calc(-1 * var(--margin))}
  .seas-water{position:absolute;left:0;top:0;z-index:-1;width:100%;height:100%;display:block;pointer-events:none}
  .seas-ink{fill:#000}
  .seas-buoy{position:absolute;left:0;top:0;z-index:-1;width:clamp(14px,1.3vw,20px);aspect-ratio:1;border-radius:50%;background:#FF3232;
    transform:translate(-60px,-60px);will-change:transform;pointer-events:none} /* parked outside until the script floats it */
  .seas-in{max-width:calc(var(--maxw) + 2 * var(--margin));margin:0 auto;padding:clamp(26px,4vh,40px) var(--margin);min-height:max(100svh,660px);
    display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto auto;column-gap:var(--gutter)}
  .seas-lab--kara{grid-column:1/-1;grid-row:1}
  .seas-head{grid-column:1/10;grid-row:2;align-self:center;padding:clamp(56px,10vh,110px) 0}
  .seas-text{grid-column:6/13;grid-row:3}
  .seas-foot{grid-column:1/-1;grid-row:4;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px 48px;margin-top:clamp(48px,8vh,96px)}
  .seas-note{font-family:"LT Superior",system-ui,sans-serif;font-size:.8rem;line-height:1.55;max-width:46ch}
  .seas .about-kick,.seas h2,.seas .about-body,.seas .about-links,.seas-lab,.seas-note{mix-blend-mode:difference}
  .seas h2{color:#E8EAF0}                                   /* → --sumi on the white sea */
  .seas .about-body,.seas .about-links a{color:#BABEC5}     /* → --sumi-soft */
  .seas .cap,.seas-note{color:#757B85}                      /* → --nezumi */
  .seas .about-links a{border-bottom-color:#151619}         /* → --kasumi */
  .seas .about-links a:hover{color:#D8CBC2;border-bottom-color:#D8CBC2} /* → --ai */
  @media(max-width:820px){
    .seas-in{min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:none}
    .seas-lab--kara,.seas-head,.seas-text,.seas-foot{grid-column:1;grid-row:auto}
    .seas-head{padding:clamp(72px,13vh,120px) 0 clamp(56px,9vh,90px)}
    .seas-foot{flex-direction:column;align-items:flex-start;gap:12px}
  }
  /* ---- CV: a year-scaled timeline. Every row carries its own bar on one shared 2019–2026 ruler.
     Experience = blue square-ended bars, education = red round-ended bars; the bar shape repeats the
     group's glyph (■ / ●), so the two never rest on colour alone. Years are also written out in text. ---- */
  .about-cv{--cv-cols:minmax(0,1fr) 8.4rem minmax(0,1.5fr);--cv-gap:clamp(18px,2.4vw,40px);--cv-name:clamp(1.02rem,1.3vw,1.24rem);
    grid-column:1/-1;margin-top:clamp(56px,9vh,110px);padding-top:clamp(22px,3.4vh,34px);border-top:1px solid var(--sumi);
    font-family:"LT Superior",system-ui,sans-serif}
  .cv-ruler{display:grid;grid-template-columns:var(--cv-cols);column-gap:var(--cv-gap);align-items:end;margin-bottom:clamp(30px,5vh,52px)}
  .cv-kick{grid-column:1/3;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--nezumi)}
  .cv-years{grid-column:3;display:grid;grid-template-columns:repeat(8,1fr)}
  .cv-years span{font-size:.66rem;letter-spacing:.06em;line-height:1;color:var(--gin);font-variant-numeric:tabular-nums;text-align:center;
    padding:0 0 12px;border-left:1px solid var(--kasumi);transition:color .35s var(--ease)}
  .cv-years span:last-child{border-right:1px solid var(--kasumi)}
  .cv-years span.is-on{color:var(--sumi)}
  .cv-group + .cv-group{margin-top:clamp(44px,7vh,76px)}
  .cv-gh{display:flex;align-items:center;gap:12px;margin:0;padding-bottom:14px;border-bottom:1px solid var(--sumi);
    font-weight:400;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sumi)}
  .cv-key{display:block;width:11px;height:11px;flex-shrink:0;background:#006EFF}
  .cv-group--edu .cv-key{background:#FF3232;border-radius:50%}
  .cv-n{margin-left:auto;color:var(--gin);letter-spacing:.16em}
  .cv-list{list-style:none;margin:0;padding:0}
  .cv-row{display:grid;grid-template-columns:var(--cv-cols);column-gap:var(--cv-gap);align-items:start;border-bottom:1px solid var(--kasumi);transition:opacity .45s var(--ease)}
  .cv-txt{padding:20px 0 22px}
  .cv-txt b{display:block;font-family:"SK Reykjavik Rounded","LT Superior",sans-serif;font-weight:400;text-transform:uppercase;font-size:var(--cv-name);line-height:1.08;letter-spacing:.01em;color:var(--sumi)}
  .cv-r{display:block;margin-top:8px;font-size:.88rem;line-height:1.45;color:var(--sumi-soft);max-width:38ch}
  /* years sit on the name's first line */
  .cv-y{padding-top:calc(20px + var(--cv-name) * .54 - .62em);font-size:.74rem;line-height:1.24;letter-spacing:.06em;color:var(--nezumi);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
  /* the track: one cell per year, gridlines continue the ruler's ticks */
  .cv-track{position:relative;align-self:stretch;min-height:44px;border-right:1px solid var(--kasumi);
    background:repeating-linear-gradient(90deg,var(--kasumi) 0 1px,transparent 1px 12.5%)}
  .cv-bar{position:absolute;top:calc(20px + var(--cv-name) * .54 - 5px);height:10px;
    left:calc(var(--s) * 12.5% + 3px);width:calc((var(--e) - var(--s)) * 12.5% - 5px);
    background:#006EFF;transform-origin:0 50%;transition:scale .4s var(--ease)}
  .cv-group--edu .cv-bar{background:#FF3232;border-radius:999px}
  @media (hover:hover){
    .about-cv:has(.cv-row:hover) .cv-row:not(:hover){opacity:.32}
    .cv-row:hover .cv-bar{scale:1 1.5}
  }
  .cv-foot{margin-top:clamp(36px,6vh,60px)}
  .cv-dl{display:inline-flex;align-items:center;gap:16px;height:54px;padding-left:22px;border:1px solid var(--sumi);
    font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sumi);
    transition:background-color .45s var(--ease),color .45s var(--ease)}
  .cv-dl small{font-size:.6rem;letter-spacing:.14em;color:var(--nezumi);transition:color .45s var(--ease)}
  .cv-dl .ar{display:grid;place-items:center;align-self:stretch;width:54px;margin-left:6px;overflow:hidden;border-left:1px solid var(--sumi);
    font-size:1rem;letter-spacing:0;transition:background-color .45s var(--ease),border-color .45s var(--ease)}
  .cv-dl .ar i{display:block;font-style:normal}
  .cv-dl:hover{background:var(--sumi);color:var(--washi)}
  .cv-dl:hover small{color:var(--gin)}
  .cv-dl:hover .ar{background:#006EFF;border-color:#006EFF}
  .cv-dl:hover .ar i{animation:cvDrop .7s var(--ease-apple)}
  @keyframes cvDrop{0%{transform:none}40%{transform:translateY(130%)}41%{transform:translateY(-130%)}100%{transform:none}}
  @media(max-width:820px){
    .cv-ruler{grid-template-columns:1fr;row-gap:16px;margin-bottom:22px}
    .cv-kick,.cv-years{grid-column:1}
    .cv-years span{font-size:.58rem;letter-spacing:.02em}
    .cv-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"txt y" "trk trk";column-gap:16px}
    .cv-txt{grid-area:txt;padding:18px 0 12px}
    .cv-y{grid-area:y;padding-top:calc(18px + var(--cv-name) * .54 - .62em)}
    .cv-track{grid-area:trk;min-height:0;height:26px;margin-bottom:18px}
    .cv-bar{top:8px}
  }
  @media (prefers-reduced-motion: reduce){ .cv-dl:hover .ar i{animation:none} }
  .about-links{display:flex;gap:26px;margin-top:clamp(26px,4vh,40px);flex-wrap:wrap}
  .about-links a{font-family:"LT Superior",system-ui,sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sumi-soft);border-bottom:1px solid var(--kasumi);padding-bottom:3px;transition:color .3s,border-color .3s}
  .about-links a:hover{color:var(--ai);border-color:var(--ai)}
  @media(max-width:820px){
    .about{padding-bottom:clamp(64px,10vh,120px)}
    .about .wrap{grid-template-columns:1fr;gap:22px}
    .about-body{max-width:100%}
  }

  /* ---- CONTACT / footer ---- */
  /* ---- CONTACT / FOOTER — the page ends on a dark band: a call to write, an index in four
     columns, and the name set once more as a wordmark (hero ↔ footer bookend) ---- */
  .contact{--ct-fg:#F5F5F4;--ct-mute:rgba(245,245,244,.5);--ct-line:rgba(245,245,244,.14);
    background:var(--sumi);color:var(--ct-fg);overflow:hidden;
    padding-top:clamp(84px,14vh,160px);padding-bottom:clamp(22px,3vh,32px)}
  .contact .wrap{max-width:var(--maxw);margin:0 auto}
  .contact .cap{color:var(--ct-mute)}
  .ct-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--ct-line)}
  .contact .bau-glyph{padding:0}
  .contact .bau-glyph .t{border-bottom-color:var(--ct-fg)}
  .ct-title{font-family:"SK Reykjavik Rounded",sans-serif;font-weight:400;text-transform:uppercase;
    font-size:clamp(3.4rem,11vw,10rem);line-height:.9;letter-spacing:.005em;margin-top:clamp(34px,6vh,64px)}
  .ct-mailrow{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin-top:clamp(22px,4vh,38px)}
  .ct-mail{display:inline-flex;align-items:center;gap:.5em;font-size:clamp(1.15rem,3vw,2.5rem);line-height:1.2;color:var(--ct-fg);overflow-wrap:anywhere}
  .ct-mail span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:.08em;transition:background-size .7s var(--ease-apple)}
  .ct-mail:hover span,.ct-mail:focus-visible span{background-size:100% 1px}
  .ct-arrow{display:grid;place-items:center;flex-shrink:0;width:1.5em;height:1.5em;border-radius:50%;background:#FF3232;color:#fff;font-style:normal;font-size:.7em;
    transition:transform .6s var(--ease-apple),background-color .4s}
  .ct-mail:hover .ct-arrow{transform:rotate(45deg);background:#006EFF}
  .ct-copy{background:none;border:1px solid var(--ct-line);border-radius:100px;color:var(--ct-mute);cursor:pointer;font:inherit;
    font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;padding:9px 16px;transition:color .3s,border-color .3s,background-color .3s}
  .ct-copy:hover{color:var(--ct-fg);border-color:var(--ct-fg)}
  .ct-copy.is-done{color:var(--sumi);background:var(--ct-fg);border-color:var(--ct-fg)}
  .ct-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px clamp(20px,3vw,48px);
    margin-top:clamp(64px,11vh,130px);padding-top:clamp(22px,3vh,30px);border-top:1px solid var(--ct-line)}
  .ct-h{font-weight:400;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ct-mute);margin-bottom:14px}
  .ct-col{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:.95rem}
  .ct-col a{color:var(--ct-fg);padding:5px 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 4px)/0 1px no-repeat;transition:background-size .5s var(--ease-apple),color .3s}
  .ct-col a:hover{background-size:100% 1px}
  .ct-col a[target="_blank"]::after{content:" ↗";color:var(--ct-mute)}
  .ct-col a[download]::after{content:" ↓";color:var(--ct-mute)}
  .ct-col p{color:var(--ct-fg);padding:5px 0;line-height:1.45}
  .contact .lang{padding:5px 0;gap:10px;font-size:.78rem}
  .contact .lang [data-lang]{color:var(--ct-mute)}
  .contact .lang [data-lang].active,.contact .lang [data-lang]:hover{color:var(--ct-fg)}
  .contact .lang .sep{color:var(--ct-line)}
  /* wordmark: "Türkgeldi" set to the full content width (Bethany is ~4.11em wide) */
  .ct-word{position:relative;margin-top:clamp(56px,10vh,120px);line-height:1;user-select:none}
  .ct-fn{display:block;font-family:"Onamura",serif;font-size:clamp(1.1rem,2.6vw,2.6rem);color:var(--ct-mute);letter-spacing:.02em;margin-bottom:.45em}
  /* mask only the bottom edge (the word rises out of it); Bethany's T overhangs to the left and must not be cut */
  .ct-sn{display:block;padding-bottom:.06em;clip-path:inset(-30% -8% 0 -8%)}
  .ct-sn > span{display:block;font-family:"Bethany",serif;white-space:nowrap;color:var(--ct-fg);
    font-size:calc(min(100vw - 2 * var(--margin), var(--maxw)) * .238);line-height:1.08}
  .ct-bar{display:flex;align-items:center;gap:14px 28px;flex-wrap:wrap;margin-top:clamp(18px,3vh,30px);padding-top:18px;border-top:1px solid var(--ct-line)}
  .ct-bar .mark{width:44px;height:auto;filter:invert(1);opacity:.9}
  .ct-bar .ct-toplink{margin-left:auto;color:var(--ct-fg);transition:opacity .3s}
  .ct-bar .ct-toplink:hover{opacity:.6}
  @media(max-width:820px){
    .ct-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .ct-bar .ct-toplink{margin-left:0}
  }

  /* ---- plate lightbox ----
     the project plates are A3 presentation boards; their inner text is
     unreadable at phone width, so a tap opens them full screen and a second
     tap zooms to (up to) native resolution with the stage scrolling under it */
  .lightbox{position:fixed;inset:0;z-index:300;background:#17150F;opacity:0;visibility:hidden;
    transition:opacity .45s var(--ease-apple),visibility 0s linear .45s}
  .lightbox.open{opacity:1;visibility:visible;transition:opacity .45s var(--ease-apple),visibility 0s}
  .lb-stage img{transform:scale(.94);transition:transform .7s var(--ease-apple)}
  .lightbox.open .lb-stage img{transform:none}
  @media (prefers-reduced-motion: reduce){ .lightbox,.lightbox.open,.lb-stage img{transition:none;transform:none} }
  .lb-stage{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;
    display:flex;align-items:center;justify-content:center;padding:0}
  .lb-stage img{display:block;max-width:100%;max-height:100vh;width:auto;cursor:zoom-in}
  .lightbox.zoomed .lb-stage{align-items:flex-start;justify-content:flex-start}
  .lightbox.zoomed .lb-stage img{max-width:none;max-height:none;width:var(--lb-zoom,260%);cursor:zoom-out}
  .lb-close{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;z-index:2;
    width:44px;height:44px;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:50%;
    color:#fff;font-size:1.35rem;line-height:1;cursor:pointer;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .lb-close:hover{background:rgba(255,255,255,.22)}
  .lb-hint{position:absolute;left:50%;transform:translateX(-50%);
    bottom:max(18px,env(safe-area-inset-bottom));z-index:2;pointer-events:none;
    font-family:"LT Superior",system-ui,sans-serif;font-size:.64rem;letter-spacing:.18em;
    text-transform:uppercase;color:rgba(255,255,255,.62);
    background:rgba(23,21,15,.5);padding:7px 14px;border-radius:100px;
    transition:opacity .3s}
  .lightbox.zoomed .lb-hint{opacity:0}
  body.lb-open{overflow:hidden}
  .pv-plate-frame img,.pt-worn-item img{cursor:zoom-in}

  /* ---- content protection ----
     a deterrent, not a lock (the script half sits at the top of the script): no text selection,
     no dragging images out, no iOS long-press "Save to Photos". Mail and outside links keep
     their long-press menu so an address can still be copied. */
  body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  img,video{-webkit-user-drag:none;-webkit-touch-callout:none}
  a[href^="mailto:"],a[href^="http"]{-webkit-touch-callout:default}
  /* printing — and so "Save as PDF" — gives a credit line instead of the pages */
  @media print{
    body > *{display:none !important}
    body::before{content:"© Bahadır Türkgeldi — bahadirturkgeldi.com";display:block;padding:48px;
      font:1rem/1.6 "LT Superior",system-ui,sans-serif;color:#17150F}
  }

  /* ---- touch targets ----
     these controls render 14-23px tall on a phone; give each an invisible
     44px hit area centred on the label rather than changing the layout */
  @media (hover:none){
    .about-links a,.ptz-all,.lang [data-lang],.navmenu .mlang [data-lang],.ct-toplink{position:relative}
    .about-links a::before,.ptz-all::before,
    .lang [data-lang]::before,.navmenu .mlang [data-lang]::before,.ct-toplink::before{
      content:"";position:absolute;left:-10px;right:-10px;top:50%;
      transform:translateY(-50%);height:44px}
    .lang{gap:14px}
    .navmenu .mlang{gap:28px}
    .navmenu .msub a small,.navmenu .msub .m-soon small{display:block;margin-left:0;margin-top:2px}
  }

  /* reveal defaults kept visible (progressive enhancement) */
  .reveal{will-change:transform,opacity}

  @media (prefers-reduced-motion: reduce){
    *{scroll-behavior:auto!important}
    .look img{transform:none}
  }

  /* ===== PROJECTS dropdown (desktop) ===== */
  .projmenu{position:relative;font-family:"LT Superior",system-ui,sans-serif}
  .projtoggle{display:flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;color:var(--sumi-soft);font:inherit;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;padding:4px 0}
  .projtoggle .caret{width:6px;height:6px;border-right:1.4px solid var(--nezumi);border-bottom:1.4px solid var(--nezumi);transform:rotate(45deg) translateY(-1px);transition:transform .3s var(--ease)}
  .projmenu.open .projtoggle{color:var(--sumi)}
  .projmenu.open .projtoggle .caret{transform:rotate(-135deg) translateY(-1px)}
  .projpanel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px) scale(.96);transform-origin:50% 0;min-width:266px;background:#fff;border:1px solid var(--kasumi);box-shadow:0 18px 50px rgba(20,18,15,.10);padding:12px;opacity:0;visibility:hidden;transition:opacity .3s var(--ease-apple),transform .45s var(--ease-apple),visibility .3s;z-index:130}
  .projmenu.open .projpanel{opacity:1;visibility:visible;transform:translateX(-50%)}
  /* projects panel: three groups + a cover preview that follows the pointer */
  .projpanel.pm{position:fixed;top:66px;left:50%;width:min(1120px,calc(100vw - 2 * var(--margin)));min-width:0;display:grid;grid-template-columns:1fr minmax(220px,280px);gap:clamp(24px,3vw,44px);padding:clamp(26px,2.6vw,38px);transform:translateX(-50%) translateY(-8px) scale(.98)}
  .projmenu.open .projpanel.pm{transform:translateX(-50%)}
  /* the panel lives inside .nav-links — undo the top-bar link styling (caps, tracking, underline) */
  .projpanel.pm a{text-transform:none;letter-spacing:normal;font-size:inherit;padding-bottom:0}
  .projpanel.pm a::after{display:none}
  .projpanel.pm .pm-i{padding:13px 0}
  .pm-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,32px)}
  .pm-col{display:flex;flex-direction:column}
  .pm-h{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--nezumi);padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--sumi)}
  .pm-i{display:flex;flex-direction:column;gap:4px;padding:13px 0;border-bottom:1px solid var(--kasumi);text-decoration:none;color:var(--sumi-soft);transition:color .25s}
  .pm-n{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.2;transition:transform .35s var(--ease)}
  .pm-m{font-family:"Bethany",serif;font-size:.95rem;letter-spacing:.01em;color:var(--gin);line-height:1.1}
  a.pm-i:hover,a.pm-i:focus-visible{color:var(--sumi)}
  a.pm-i:hover .pm-n,a.pm-i:focus-visible .pm-n{transform:translateX(4px)}
  .pm-seasons{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
  .projpanel.pm .pm-seasons a{white-space:nowrap;font-size:.64rem;letter-spacing:.12em;color:var(--sumi-soft);border:1px solid var(--kasumi);border-radius:999px;padding:5px 10px 4px;transition:border-color .25s,color .25s,background .25s}
  .projpanel.pm .pm-seasons a:hover,.projpanel.pm .pm-seasons a:focus-visible{color:#fff;background:var(--sumi);border-color:var(--sumi)}
  .pm-pv{margin:0;align-self:start}
  .pm-pv-frame{display:block;aspect-ratio:4/3;background:var(--gofun);overflow:hidden}
  .pm-pv img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(1.03);transition:opacity .45s var(--ease),transform .9s var(--ease)}
  .pm-pv img.in{opacity:1;transform:none}
  .pm-pv figcaption{margin-top:12px;font-family:"Bethany",serif;font-size:1rem;color:var(--sumi-soft);min-height:1.3em}
  @media(max-width:1100px){.projpanel.pm{grid-template-columns:1fr}.pm-pv{display:none}}

  /* ===== featured projects — centered logo row (hover: logo → name in Bethany) ===== */
  .featured{padding:clamp(90px,16vh,190px) var(--margin);display:flex;justify-content:center}
  .featured-row{display:flex;justify-content:center;align-items:center;gap:clamp(30px,6vw,110px);flex-wrap:wrap;width:100%;max-width:var(--maxw)}
  .fp{position:relative;display:grid;place-items:center;width:clamp(170px,20vw,300px);min-height:clamp(96px,11vw,132px);text-decoration:none}
  .fp > *{grid-area:1/1;transition:opacity .45s var(--ease),transform .5s var(--ease)}
  .fp-media{display:grid;place-items:center}
  .fp-media img{height:clamp(52px,6vw,88px);width:auto;object-fit:contain;display:block}
  .fp-name{font-family:"Bethany",serif;font-size:clamp(1.6rem,2.6vw,2.5rem);line-height:1.04;text-align:center;color:var(--sumi);opacity:0;transform:translateY(8px)}
  .fp:hover .fp-media,.fp:focus-visible .fp-media{opacity:0;transform:translateY(-8px)}
  .fp:hover .fp-name,.fp:focus-visible .fp-name{opacity:1;transform:translateY(0)}
  @media(max-width:760px){
    .featured{padding:clamp(64px,11vh,120px) var(--margin)}
    .featured-row{gap:24px}
    .fp{width:clamp(140px,42vw,220px);min-height:86px}
    .fp-media img{height:46px}
    .fp-name{font-size:1.5rem}
  }
  @media (hover:none){
    .featured{padding:clamp(56px,9vh,96px) var(--margin)}
    .featured-row{gap:clamp(26px,7vw,44px)}
    .fp{width:min(100%,260px);min-height:0;row-gap:10px}
    .fp > *{grid-area:auto;transition:none}
    .fp-media img{height:52px}
    .fp-name{opacity:1;transform:none;font-size:1.35rem}
  }
  @media (prefers-reduced-motion: reduce){ .fp > *{transition:opacity .2s} .fp:hover .fp-media,.fp:focus-visible .fp-media{transform:none} .fp:hover .fp-name,.fp:focus-visible .fp-name{transform:none} }

  /* ===== PROJECT VIEW (in-site pages) ===== */
  #projectView{display:none;position:relative;z-index:80;min-height:100svh;padding-top:clamp(112px,16vh,190px);padding-bottom:clamp(90px,14vh,170px)}
  body.project-open main{display:none}
  body.project-open #projectView{display:block}
  .pv-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--margin)}
  .pv-back{position:sticky;top:clamp(14px,3vh,24px);z-index:85;display:inline-flex;align-items:center;gap:11px;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border:1px solid var(--kasumi);border-radius:100px;padding:9px 20px 9px 15px;font-family:"LT Superior",system-ui,sans-serif;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sumi-soft);cursor:pointer;transition:color .3s,border-color .3s}
  .pv-back:hover{color:var(--sumi);border-color:var(--gin)}
  .pv-back .ar{transition:transform .3s var(--ease)}
  .pv-back:hover .ar{transform:translateX(-5px)}
  .pv-head{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2.6vh,28px);margin:clamp(34px,7vh,74px) 0 clamp(28px,5vh,50px);max-width:62rem}
  .pv-logo{height:clamp(58px,9vw,102px)}
  .pv-logo img{height:100%;width:auto;object-fit:contain}
  .pv-kick{font-family:"LT Superior",system-ui,sans-serif;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--nezumi);margin-bottom:12px}
  .pv-title{font-family:"SK Reykjavik Rounded",sans-serif;font-weight:400;text-transform:uppercase;font-size:var(--t-display);line-height:.9;letter-spacing:.006em;color:var(--sumi)}
  .pv-sub{font-family:"Bethany",serif;font-size:clamp(1.6rem,3.4vw,2.7rem);color:var(--sumi-soft);line-height:1;margin-top:.08em}
  .pv-meta{display:flex;gap:26px;flex-wrap:wrap;font-family:"LT Superior",system-ui,sans-serif;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gin);margin-top:4px}
  .pv-rule{height:1px;background:var(--kasumi);margin:0 0 clamp(34px,6vh,64px)}
  /* these are <section> elements inside .pv-wrap, which already applies --margin;
     without this the global section{padding:0 var(--margin)} indents them twice */
  .pv-section,.pt-cat{padding-left:0;padding-right:0}
  .pv-section{margin-bottom:clamp(44px,8vh,96px)}
  .pv-h{font-family:"SK Reykjavik Rounded",sans-serif;font-weight:400;text-transform:uppercase;font-size:var(--t-h2);letter-spacing:.02em;color:var(--sumi);margin-bottom:22px}
  .pv-story{font-family:"LT Superior",system-ui,sans-serif;font-size:var(--t-body-l);line-height:1.55;color:var(--sumi-soft);max-width:60ch}
  .pv-plates{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,22px)}
  .plate{grid-column:span 6;aspect-ratio:4/3;background:var(--gofun);border:1px dashed var(--gin);display:flex;align-items:flex-end;justify-content:flex-start;padding:16px;color:var(--gin);font-family:"LT Superior",system-ui,sans-serif;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase}
  .plate:nth-child(3n+1){grid-column:span 12;aspect-ratio:16/6}
  @media(max-width:820px){.plate,.plate:nth-child(3n+1){grid-column:span 12;aspect-ratio:4/3}}
  /* real image-plate sequence (stacked, full-width) */
  .pv-plates-seq{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:24px;row-gap:clamp(44px,7vh,104px)}
  .pv-plate{flex:1 1 100%;margin:0}
  .pv-plate.half{flex:1 1 calc(50% - 12px)}
  .pv-plate.third{flex:0 1 calc((100% - 48px) / 3)}
  .pv-plate.quarter{flex:0 1 calc((100% - 72px) / 4)}
  @media(max-width:760px){.pv-plate.half{flex:1 1 100%}.pv-plate.third,.pv-plate.quarter{flex:0 1 calc(50% - 12px)}}
  .pv-plate-frame{position:relative;overflow:hidden;background:var(--gofun);border:1px solid var(--kasumi);box-shadow:0 26px 70px rgba(20,18,15,.10)}
  .pv-plate-frame img,.pv-plate-frame video{width:100%;height:auto;display:block}
  .pv-plate-cap{display:flex;align-items:baseline;gap:clamp(12px,1.6vw,22px);margin-top:16px;flex-wrap:wrap}
  .pv-plate-lab{font-family:"LT Superior",system-ui,sans-serif;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--nezumi);flex-shrink:0}
  .pv-plate-note{font-family:"LT Superior",system-ui,sans-serif;font-size:clamp(.92rem,1.15vw,1.08rem);line-height:1.45;color:var(--sumi-soft);max-width:62ch}
  @media(max-width:640px){.pv-plate-cap{gap:5px;flex-direction:column}}
  /* portrait plates: centered, constrained so they don't tower full-width */
  .pv-plate.portrait .pv-plate-frame{max-width:min(100%,680px);margin-left:auto;margin-right:auto}
  .pv-plate.portrait .pv-plate-cap{max-width:680px;margin-left:auto;margin-right:auto}
  /* ---- patterns archive + detail ---- */
  .pt-cat{margin-bottom:clamp(44px,8vh,96px)}
  .pt-cat-h{font-family:"SK Reykjavik Rounded",sans-serif;font-weight:400;text-transform:uppercase;font-size:var(--t-h2);letter-spacing:.02em;color:var(--sumi);margin-bottom:clamp(18px,3vh,30px)}
  .pt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,20vw,240px),1fr));gap:clamp(12px,1.4vw,20px)}
  .pt-tile{display:flex;flex-direction:column;gap:11px;text-decoration:none}
  .pt-thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--gofun);border:1px solid var(--kasumi);display:flex;align-items:center;justify-content:center;transition:border-color .3s var(--ease)}
  .pt-tile.empty .pt-thumb{border:1px dashed var(--gin)}
  .pt-tile:hover .pt-thumb{border-color:var(--nezumi)}
  .pt-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s var(--ease)}
  .pt-tile:hover .pt-thumb img{transform:scale(1.05)}
  .pt-ph{font-family:"LT Superior",system-ui,sans-serif;font-size:.8rem;letter-spacing:.2em;color:var(--gin)}
  .pt-name{font-family:"LT Superior",system-ui,sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sumi-soft)}
  .pt-detail{margin-bottom:clamp(22px,4vh,42px)}
  .pt-detail-ph{aspect-ratio:4/3;background:var(--gofun);border:1px dashed var(--gin);display:flex;align-items:center;justify-content:center;color:var(--gin);font-family:"LT Superior",system-ui,sans-serif;letter-spacing:.2em;font-size:.8rem}
  .pt-worn{margin-top:clamp(30px,5vh,60px)}
  .pt-worn-h{font-family:"LT Superior",system-ui,sans-serif;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--nezumi);margin-bottom:16px}
  .pt-worn-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px)}
  .pt-worn-item{margin:0;overflow:hidden;background:var(--gofun);border:1px solid var(--kasumi)}
  .pt-worn-item img{width:100%;height:auto;display:block}
  @media(max-width:640px){.pt-worn-grid{grid-template-columns:1fr}}

  /* ===== mobile projects accordion ===== */
  /* centred while it fits; once the open accordion is taller than the screen, the auto margins
     collapse and the list scrolls from its first item (justify-content:center would push it up
     under the logo, out of reach). Top padding clears the nav bar. */
  .navmenu{overflow-y:auto;justify-content:flex-start;padding-top:max(var(--margin),88px)}
  .navmenu > :first-child{margin-top:auto}
  .navmenu > :last-child{margin-bottom:auto}
  .navmenu .mgroup{border-bottom:1px solid var(--kasumi)}
  .navmenu .mtoggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;font-family:"SK Reykjavik Rounded",sans-serif;text-transform:uppercase;font-size:clamp(2rem,9vw,2.9rem);letter-spacing:.01em;color:var(--sumi);padding:14px 0;text-align:left}
  .navmenu .mtoggle .chev{width:12px;height:12px;border-right:2px solid var(--nezumi);border-bottom:2px solid var(--nezumi);transform:rotate(45deg);transition:transform .3s var(--ease)}
  .navmenu .mgroup.open .mtoggle .chev{transform:rotate(-135deg)}
  .navmenu .msub{overflow:hidden;max-height:0;transition:max-height .42s var(--ease)}
  .navmenu .mgroup.open .msub{max-height:640px}
  .navmenu .mlabel{display:block;font-family:"LT Superior",system-ui,sans-serif;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gin);padding:16px 0 4px 16px}
  .navmenu .msub a,.navmenu .msub .m-soon{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;text-align:left;cursor:pointer;font-family:"LT Superior",system-ui,sans-serif;text-transform:uppercase;font-size:clamp(1.05rem,4.6vw,1.45rem);letter-spacing:.08em;color:var(--sumi-soft);padding:12px 0 12px 16px}
  .navmenu .msub a small,.navmenu .msub .m-soon small{font-family:"Bethany",serif;text-transform:none;font-size:1.05rem;letter-spacing:.01em;color:var(--gin);margin-left:12px}
  .navmenu .msub .m-soon{cursor:default;color:var(--nezumi)}
  .navmenu a.ml.msolo{font-size:clamp(1.05rem,4.6vw,1.45rem)}

  /* ===== MOTION — Apple-style transitions (same language as the Saff Medya build) =====
     headings rise word by word out of a mask; the manifesto sharpens from blur as it scrolls;
     tiles, plates and the patterns band scale into place with the scroll. Start states are
     written by GSAP only, so without JS (or with reduced motion) everything stays visible. */
  .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .06em .1em;margin:-.14em -.06em -.1em}
  .w > span{display:inline-block;will-change:transform}
  .pv-plate-frame{transform-origin:50% 0}
  /* narrow project tiles (the five-column ones, 821–1440px): the title runs into the mid-height shape and the
     description onto the big corner disc. Drop the middle shape, shrink the disc into its corner, keep the text short. */
  @media (min-width:821px) and (max-width:1280px){
    .bt.span5 .shape[style*="top:46%"],.bt.span5 .shape[style*="top:50%"]{display:none}
  }
  @media (min-width:821px) and (max-width:1440px){
    .bt.span5 .bt-desc{max-width:21ch}
    .bt.span5 .shape[style*="bottom:-2"]{scale:.72;transform-origin:100% 100%}
  }

  /* ===== CURSOR — the brand's three glyphs as a pointer =====
     ▲ at rest, turning to face the way it travels · ● red over links · a disc in the tile's partner
     colour with a word over project tiles · ■ blue over images that open.
     Fine pointers only; video, form fields and the plate viewer keep the system cursor. */
  html.has-cur body:not(.lb-open),
  html.has-cur body:not(.lb-open) *:not(video):not(input):not(textarea):not(select):not(iframe){cursor:none!important}
  .cur{position:fixed;left:0;top:0;z-index:400;pointer-events:none;will-change:transform;opacity:0;transition:opacity .25s}
  .cur.is-on{opacity:1}
  .cur.is-hidden,body.lb-open .cur{opacity:0}
  .cur-shape{position:absolute;left:0;top:0;width:14px;height:13px;background:var(--cc,#17150F);
    clip-path:polygon(50% 0%,50% 0%,100% 100%,0% 100%);border-radius:0;
    transform:translate(-50%,-50%) rotate(var(--ca,0deg)) scale(var(--cs,1));
    transition:width .5s var(--ease-apple),height .5s var(--ease-apple),clip-path .45s var(--ease-apple),border-radius .45s var(--ease-apple),background-color .35s}
  .cur.is-link .cur-shape{width:18px;height:18px;border-radius:50%;clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
  .cur.is-tile .cur-shape{width:104px;height:104px;border-radius:50%;clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
  /* over photographs: a small frosted-glass disc instead of a flat block, so the picture still reads through it */
  .cur.is-media .cur-shape{width:72px;height:72px;border-radius:50%;clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%);
    -webkit-backdrop-filter:blur(12px) saturate(170%);backdrop-filter:blur(12px) saturate(170%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)}
  .cur.is-link:not(.is-dark){mix-blend-mode:multiply}
  .cur.is-sea:not(.is-link){mix-blend-mode:difference}

  /* ===== PHONES & TOUCH — the same design, kinder to a thumb =====
     no grey tap flash, a small press instead; hover lifts that would stay stuck after a tap are off;
     every control gets a 44px target; an open menu or plate viewer keeps the page behind it still;
     the smallest caps are nudged up to a size a phone can read. */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  /* performance: <picture> (WebP first) takes no box of its own, so every image lays out exactly as a bare <img>;
     the endless CSS loops rest while they are off screen */
  picture{display:contents}
  .ptz-rail.is-off .ptz-track,.manifesto-figure.is-off .fig{animation-play-state:paused}
  a,button,[role=button]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .navmenu,.lb-stage{overscroll-behavior:contain}
  .ptz-rail{overscroll-behavior-x:contain}
  html:has(body.menu-open),html:has(body.lb-open){overflow:hidden}
  @media (hover:none){
    /* a tap is not a hover: nothing stays lifted or turned once the finger is gone */
    .bt:hover{translate:none}
    .bt:hover .shape,.bt:hover .bt-foot .ar,.pv-back:hover .ar,.ptz-all:hover .ar,.ct-mail:hover .ct-arrow{transform:none}
    .ct-mail:hover .ct-arrow{background:#FF3232}
    .rt:hover .rt-media{transform:none;box-shadow:0 1px 0 var(--kasumi),0 18px 40px rgba(20,18,15,.06)}
    .rt:hover .rt-pat,.pt-tile:hover .pt-thumb img{transform:none}
    .rt:hover .rt-made{opacity:0;transform:scale(1.06)}
    /* …a press instead */
    .bt{transition:translate .35s var(--ease),scale .3s var(--ease)}
    .bt:active{scale:.985}
    .rt-media{transition:transform .6s var(--ease),box-shadow .6s var(--ease),scale .3s var(--ease)}
    .pt-thumb{transition:border-color .3s var(--ease),scale .3s var(--ease)}
    .rt:active .rt-media,.pt-tile:active .pt-thumb{scale:.97}
    .pv-back:active,.ct-copy:active,.cv-dl:active,.about-links a:active,.ct-col a:active,.ptz-all:active,.navmenu a:active{opacity:.55}
    /* 44px targets: the burger grows around its lines, the rest get an invisible hit area */
    .navtoggle{width:44px;height:44px;padding:10px;margin-right:-4px}
    .brand,.ct-mail,.ct-copy{position:relative}
    .brand::before,.pv-back::before,.ct-mail::before,.ct-copy::before{content:"";position:absolute;left:-6px;right:-6px;top:50%;transform:translateY(-50%);height:48px}
    .ct-col a,.ct-col p,.contact .lang{padding:10px 0}
    .ct-col a{background-position:0 calc(100% - 9px)}
    /* phones animate the manifesto words without blur, so no layer per word */
    .manifesto .reveal-word{will-change:auto}
  }
  @media (max-width:720px){
    .cv-years span{font-size:.66rem;letter-spacing:0}
    .cv-dl small{font-size:.68rem}
    .ct-h{font-size:.7rem}
    .rt-cap small{font-size:.7rem}
  }
  .cur-label{position:absolute;left:0;top:0;transform:translate(-50%,-50%);white-space:nowrap;font-family:"LT Superior",system-ui,sans-serif;
    font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cl,#fff);opacity:0;transition:opacity .15s}
  .cur.is-tile .cur-label,.cur.is-media .cur-label{opacity:1;transition:opacity .3s .12s}
  .cur-label.is-plus{font-size:1.5rem;letter-spacing:0;font-weight:300}
  .cur.is-media .cur-label{font-size:.58rem;letter-spacing:.2em}

  /* ===== TILE ⇄ PAGE — the tile becomes the page =====
     A project page opens on a band in its tile's colour: the same number, year, shapes and title,
     set large. A click morphs the tile into that band (the colour grows as a clip, the title and
     shapes fly to their new places); Back folds the band into its tile again. */
  body.pvh-on #projectView{padding-top:0}
  .pvh{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
    height:clamp(440px,80svh,880px);padding:clamp(104px,15vh,168px) 0 clamp(34px,6vh,64px);margin-bottom:clamp(36px,6vh,72px);--k:1.3}
  .pvh.blue,.pvm.blue{background:#006EFF;color:#fff}
  .pvh.red,.pvm.red{background:#FF3232;color:#fff}
  .pvh.pink,.pvm.pink{background:#FFCCFF;color:#17150F}
  .pvh.black,.pvm.black{background:#000;color:#fff}
  .pvh-in{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--margin)}
  .pvh-top{display:flex;align-items:center;gap:16px;font-family:"LT Superior",system-ui,sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
  .pvh-cat{opacity:.75}
  .pvh-name{font-family:"SK Reykjavik Rounded",sans-serif;font-weight:400;text-transform:uppercase;font-size:var(--t-display);line-height:.92;letter-spacing:.01em;white-space:nowrap}
  .pvh-sub{font-family:"Bethany",serif;font-size:clamp(1.5rem,3vw,2.6rem);line-height:1;margin-top:.35em;opacity:.92}
  /* the shapes keep clear of the nav: their field starts below it */
  .pvh-shapes{position:absolute;left:0;right:0;bottom:0;top:clamp(150px,20vh,220px);z-index:1;pointer-events:none}
  .pvh .shape{transform:scale(var(--k));transition:none}
  @media(min-width:1100px){.pvh{--k:1.5}}
  @media(min-width:1500px){.pvh{--k:1.75}}
  @media(max-width:820px){
    .pvh{height:clamp(420px,74svh,640px)}
    .pvh .shape{display:none}
    .pvh::after{content:"";position:absolute;z-index:1;pointer-events:none;border-radius:50%;
      width:clamp(170px,52vw,260px);height:clamp(170px,52vw,260px);top:32%;right:-16%} /* mid-right: the burger owns the top corner */
    .pvh.blue::after{background:#FFCCFF}
    .pvh.red::after{background:#fff}
    .pvh.pink::after,.pvh.black::after{background:#006EFF}
  }
  /* the nav sits on the band: light type on the dark colours */
  body.pvh-light:not(.menu-open) nav .nav-links > a,
  body.pvh-light:not(.menu-open) nav .projtoggle,
  body.pvh-light:not(.menu-open) nav .langtoggle{color:#fff}
  body.pvh-light:not(.menu-open) nav .nav-links > a::after{background:#fff}
  body.pvh-light:not(.menu-open) nav .caret{border-right-color:#fff;border-bottom-color:#fff}
  body.pvh-light:not(.menu-open) nav .brand img{filter:invert(1)}
  body.pvh-light:not(.menu-open) nav .navtoggle span{background:#fff}
  /* the morph layer: a copy of the band, clipped to the tile at first */
  .pvm{position:fixed;inset:0;z-index:90;overflow:hidden;pointer-events:none;will-change:clip-path}
  .pvm .pvh{margin:0}
  .pvm .pvh.no-after::after{display:none}
  .pvm-dot{position:absolute;z-index:1;border-radius:50%}
  .pvm-ghost{position:absolute!important;z-index:4;margin:0!important;max-width:none!important}
  /* the next project, as its own tile */
  .bt.pv-nt{margin-top:clamp(56px,10vh,120px);min-height:clamp(300px,36vw,520px)}
  .pv-nt-k{opacity:.8}
  .pv-nt-k::before{content:"·";margin-right:16px}