/* Make & Bake — design system (brief v4, section 2b)
   Cream / mocha / espresso. Cormorant Garamond for titles, Jost for text.
   Glass = CSS blur for now (liquidGL gets tested later). */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:600;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-600-italic.woff2) format("woff2")}
@font-face{font-family:Jost;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Jost;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jost-latin-500-normal.woff2) format("woff2")}

:root{
  --cream:#F6F1EA; --linen:#EDE4D8; --sand:#DCCDBE;
  --mocha:#A47864; --cocoa:#7A5545; --espresso:#3B2A22; --ink:#2A1F1A;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:Jost,"Helvetica Neue",Arial,sans-serif;
  --edge:#361e11;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 var(--sans)}
img{max-width:100%;height:auto}
a{color:inherit}
em{font-style:italic}
:focus-visible{outline:3px solid #fff;box-shadow:0 0 0 6px var(--espresso);border-radius:10px}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-70px;z-index:100;background:var(--cream);color:var(--ink);padding:10px 16px;border-radius:999px;font-weight:500;text-decoration:none;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.skip-link:focus{top:12px}

/* ---------- glass ---------- */
.glass{background:linear-gradient(135deg,rgba(255,255,255,.46),rgba(255,255,255,.2));-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.25),0 12px 30px rgba(42,31,26,.2);color:var(--ink)}
.glass.dark{background:linear-gradient(135deg,rgba(59,42,34,.88),rgba(59,42,34,.7));border-color:rgba(255,255,255,.28);color:var(--cream)}
.pill{display:flex;align-items:center;gap:2px;border-radius:999px;padding:6px}
.pill a{padding:10px 16px;border-radius:999px;font:500 15px var(--sans);letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.pill a.brand{font:600 24px var(--serif);letter-spacing:0;padding:6px 16px 6px 14px}
.pill a[aria-current="page"]{background:var(--espresso);color:var(--cream)}
.pill a:hover:not([aria-current="page"]){background:rgba(255,255,255,.45)}
.site-pill{position:fixed;z-index:20;top:16px;left:50%;transform:translateX(-50%)}
.gbtn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:12px 22px;min-height:48px;font:500 15px var(--sans);letter-spacing:.02em;cursor:pointer;text-decoration:none}
button.gbtn{appearance:none;font-family:var(--sans)}
a.gbtn:hover{filter:brightness(1.06)}
.gbtn[aria-disabled="true"]{cursor:default;opacity:.92}
.chip{font:500 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;background:var(--espresso);color:var(--cream);border-radius:999px;padding:3px 9px}
.glass.dark .chip{background:var(--cream);color:var(--espresso)}
.hint{display:inline-flex;align-items:center;gap:12px;border-radius:999px;padding:10px 20px;font:500 15px var(--sans);letter-spacing:.02em}
.lab{font:500 12px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--cocoa)}
.key{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 6px;border-radius:7px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);font:500 12px var(--sans);color:var(--ink)}
.keys{display:inline-flex;align-items:center;gap:8px;font:400 13px var(--sans);color:var(--ink)}
.ph{border:1.5px dashed var(--mocha);background:rgba(220,205,190,.35);color:var(--cocoa);border-radius:12px;padding:12px 16px;margin:12px 0}
.ph::before{content:"Placeholder · ";font:500 11px var(--sans);letter-spacing:.16em;text-transform:uppercase}

/* ---------- HOME ---------- */
body.home{background:var(--edge)}
.hero{position:relative;height:100vh;height:100svh;min-height:460px;overflow:hidden;background:var(--edge);--ar:1.7917;--edge:#361e11}
.stage{position:absolute;left:0;width:100%;aspect-ratio:var(--ar);top:min(0px,calc((100svh - 100vw / var(--ar)) * .4));transform-origin:50% 50%;will-change:transform}
.stage picture,.stage img.hero-img{display:block;width:100%;height:100%}
.stage img.hero-img{object-fit:cover;user-select:none;-webkit-user-drag:none}
.stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7%;background:linear-gradient(to bottom,transparent,var(--edge));pointer-events:none}
.hotspots{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2}
.hotspots--phone,.tags--phone{display:none}
.hotspot{cursor:pointer;outline:none}
.hotspot polygon{fill:rgba(255,236,200,0);stroke:rgba(255,236,200,0);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:fill .25s ease,stroke .25s ease,filter .25s ease}
.hotspot:hover polygon,.hotspot:focus-visible polygon{fill:rgba(255,226,170,.16);stroke:rgba(255,240,215,.95);filter:drop-shadow(0 0 10px rgba(255,214,150,.95)) drop-shadow(0 0 26px rgba(255,214,150,.6))}
.hotspot:focus-visible polygon{stroke:#fff;stroke-width:4}
.tags{position:absolute;inset:0;z-index:3;pointer-events:none}
.tag{position:absolute;transform:translate(-50%,0);padding:7px 16px;border-radius:999px;font:500 14px/1.2 var(--sans);letter-spacing:.03em;white-space:nowrap;opacity:0;translate:0 6px;transition:opacity .2s ease,translate .2s ease}
.tag small{font-weight:400;color:var(--cocoa);margin-left:6px}
.tag.is-on{opacity:1;translate:0 0}
.hero-foot{position:absolute;z-index:5;left:50%;bottom:16px;transform:translateX(-50%);margin:0;max-width:calc(100vw - 24px);border-radius:999px;padding:9px 22px;font:400 14px/1.4 var(--sans);text-align:center}
.hero-foot a{padding:4px 6px}
.hero-foot .sep{opacity:.5;margin:0 4px}
.fade-wall{position:fixed;inset:0;z-index:50;background:var(--cream);opacity:0;pointer-events:none}

@media (max-width:760px),(max-aspect-ratio:1/1){
  .hero{--ar:.5581;--edge:#3d261b}
  .hotspots--desktop,.tags--desktop{display:none}
  .hotspots--phone,.tags--phone{display:block}
  .tag{opacity:1;translate:0 0;font-size:12px;padding:5px 12px}
  .tag small{display:none}
  .site-pill{top:10px}
  .pill{padding:4px}
  .pill a{padding:8px 11px;font-size:13px}
  .pill a.brand{font-size:19px;padding:4px 10px 4px 10px}
  .hide-m{display:none}
  .hero-foot{font-size:12px;padding:8px 14px;bottom:12px}
}
@media (hover:none){.tag{opacity:1;translate:0 0}}

/* text under the hero */
.intro{background:var(--cream);padding:72px 20px 56px}
.intro-inner{max-width:760px;margin:0 auto}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:-.01em;margin:0}
.intro h2{font-size:clamp(40px,6vw,64px)}
.lede{font:500 clamp(22px,3vw,28px)/1.3 var(--serif);color:var(--cocoa);margin:14px 0 18px}
.dest{list-style:none;padding:0;margin:32px 0 0;border-top:1px solid var(--sand)}
.dest li{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:4px 24px;padding:18px 0;border-bottom:1px solid var(--sand);align-items:baseline}
.dest li a{font:500 28px/1.1 var(--serif);text-decoration:none}
.dest li a:hover{color:var(--cocoa)}
.dest li p{margin:0;color:var(--cocoa)}
.badge{display:inline-block;font:500 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;background:var(--espresso);color:var(--cream);border-radius:999px;padding:3px 9px;margin-left:8px;vertical-align:middle}
.site-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:28px 24px;border-top:1px solid var(--sand);background:var(--cream);font-size:14px;color:var(--cocoa)}
.site-footer a{color:var(--cocoa)}

/* ---------- close-up scenes (work / kitchen / 3d / about) ---------- */
body.scene{min-height:100vh;min-height:100svh;background:radial-gradient(120% 90% at 50% 0%,#E6D9CA,#D6C5B3);position:relative;overflow-x:hidden}
body.scene::after{content:"";position:fixed;left:0;right:0;bottom:0;height:0;pointer-events:none}
.scene-main{max-width:1240px;margin:0 auto;padding:104px 24px 190px}
.wood{position:absolute;left:0;right:0;bottom:0;height:150px;z-index:0;background:linear-gradient(to bottom,#7a5846,#5a3f31);filter:saturate(.6);box-shadow:inset 0 10px 24px rgba(0,0,0,.25)}
.scene-main{position:relative;z-index:1}
.dock{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 20px;margin-top:34px}

/* laptop (work) */
.laptop{max-width:1100px;margin:0 auto}
.bezel{background:var(--espresso);border-radius:22px 22px 10px 10px;padding:16px 16px 18px;box-shadow:0 30px 60px rgba(42,31,26,.35)}
.screen{background:var(--cream);border-radius:10px;padding:clamp(18px,3vw,36px)}
.screen-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px}
.screen-head h1{font-size:clamp(38px,5vw,60px)}
.screen-head em{color:var(--cocoa)}
.base{height:16px;margin:0 -3%;border-radius:0 0 18px 18px;background:linear-gradient(to bottom,#cdbeae,#a99886);box-shadow:0 14px 24px rgba(42,31,26,.3)}
.grid4{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tile{display:block;height:100%;background:var(--linen);border-radius:14px;padding:14px 14px 18px;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.tile:hover{transform:translateY(-3px);box-shadow:0 14px 26px rgba(42,31,26,.16)}
.shot-ph{aspect-ratio:21/9;border-radius:9px;background:var(--sand);display:grid;place-items:center;text-align:center;font:500 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cocoa);border:1.5px dashed var(--mocha)}
.tile .row{display:flex;gap:14px;align-items:baseline;margin-top:12px}
.tile .num{font:500 34px/1 var(--serif);color:var(--mocha)}
.tile h2{font-size:26px;line-height:1.1}
.tile p{margin:6px 0 0;font-size:15px;color:var(--cocoa);line-height:1.45}
.tile .open{display:inline-block;margin-top:10px;font:500 13px var(--sans);letter-spacing:.14em;text-transform:uppercase}

/* object pages (kitchen / 3d / about) */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center;min-height:calc(100svh - 300px)}
.copy h1{font-size:clamp(46px,6.4vw,84px);margin:14px 0 18px}
.copy h1 em{color:var(--cocoa)}
.copy p{max-width:30em;margin:0 0 22px;font-size:18px}
.btns{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.object{justify-self:center;width:100%;max-width:600px}
.object .crop{width:100%;border-radius:20px;background-repeat:no-repeat;background-color:var(--sand);box-shadow:0 30px 60px rgba(42,31,26,.35);border:1px solid rgba(255,255,255,.4)}
.object .cap{margin:12px 4px 0;font-size:13px;color:var(--cocoa)}
.crop--cake{aspect-ratio:590/530;background-image:url(/assets/img/hero-desktop.webp);background-size:466.4% auto;background-position:37% 49.7%}
.crop--printer{aspect-ratio:710/670;background-image:url(/assets/img/hero-desktop.webp);background-size:387.6% auto;background-position:67.1% 48.5%}

/* notebook (about) */
.nb{position:relative;justify-self:center;width:100%;max-width:560px;transform:rotate(3deg);background:#FBF8F3;border-radius:6px 16px 16px 6px;padding:40px 36px 40px 62px;box-shadow:0 30px 60px rgba(42,31,26,.35);
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 33px,rgba(164,120,100,.28) 33px,rgba(164,120,100,.28) 34px)}
.nb::before{content:"";position:absolute;left:22px;top:0;bottom:0;width:18px;background:radial-gradient(circle,var(--espresso) 5px,transparent 6px) 0 14px/18px 44px repeat-y}
.nb::after{content:"";position:absolute;left:50px;top:0;bottom:0;width:1px;background:rgba(164,120,100,.5)}
.nb h2{font-size:clamp(34px,4vw,48px);margin-bottom:14px}
.nb p{margin:0 0 12px}

/* ---------- plain cream pages (projects, list, 404) ---------- */
body.plain{background:var(--cream)}
.case{max-width:1100px;margin:0 auto;padding:110px 24px 40px}
.crumbs a{font:500 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--cocoa);text-decoration:none}
.case h1{font-size:clamp(46px,8vw,104px);margin:18px 0 18px}
.case .lede{max-width:24em}
.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:36px 0;padding:18px 0;border-top:1px solid var(--sand);border-bottom:1px solid var(--sand)}
.meta dt{font:500 12px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--cocoa)}
.meta dd{margin:4px 0 0;font:500 20px var(--serif)}
.shots{display:grid;gap:18px;margin:10px 0 40px}
.shots .shot-ph{aspect-ratio:16/9;font-size:12px}
.sec{display:grid;grid-template-columns:minmax(140px,260px) 1fr;gap:8px 40px;padding:26px 0;border-top:1px solid var(--sand)}
.sec h2{font-size:32px}
.sec .ph{margin:0}
.next{display:block;margin-top:56px;padding:40px 0 20px;border-top:1px solid var(--espresso);text-decoration:none}
.next .lab{display:block;margin-bottom:8px}
.next span.t{display:block;font:500 clamp(40px,7.5vw,104px)/1 var(--serif);letter-spacing:-.015em;transition:transform .3s ease}
.next span.t em{color:var(--cocoa)}
.next:hover span.t{transform:translateX(10px)}
.page{max-width:820px;margin:0 auto;padding:120px 24px 60px}
.page h1{font-size:clamp(44px,7vw,80px);margin-bottom:14px}
.plain-list{padding-left:20px}
.plain-list ul{margin:6px 0 12px}
.plain-list li{margin:8px 0}

/* ---------- arriving after the zoom ---------- */
html.arrive body{animation:arrive .6s ease both}
@keyframes arrive{from{opacity:0}to{opacity:1}}
html.arrive .scene-main{animation:settle .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes settle{from{transform:scale(1.05)}to{transform:none}}

/* ---------- small screens ---------- */
@media (max-width:760px){
  body{font-size:16px}
  .scene-main{padding:84px 16px 170px}
  .grid4{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:28px;min-height:0}
  .object{order:-1;max-width:420px}
  .nb{order:-1;transform:rotate(1.5deg);padding:30px 22px 30px 54px}
  .copy p{font-size:17px}
  .btns{width:100%}.btns .gbtn{width:100%;justify-content:space-between}
  .meta{grid-template-columns:1fr}
  .sec{grid-template-columns:1fr}
  .dest li{grid-template-columns:1fr}
  .case{padding:92px 18px 30px}
  .hint{font-size:14px;padding:9px 16px}
  .keys{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- case study media (chatbot page) ---------- */
.sec > :not(h2){grid-column:2}
.sec > .wide{grid-column:1/-1}
.sec h3{font-size:26px;margin-top:10px}
.sec p{margin:0 0 14px}
.fig{margin:0}
.fig img,.fig video{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--sand);background:var(--linen)}
.fig figcaption{margin-top:10px;font-size:14px;line-height:1.45;color:var(--cocoa)}
.fig .cap2{display:block;font-size:13px;opacity:.85}
.main-visual{margin:6px 0 34px}
.main-visual img{border-radius:18px}
.fig.wide{margin:14px 0 18px}
.fig.small{max-width:420px;margin:6px 0 4px}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:18px 0 6px;align-items:start}
.gallery .shot img,.gallery .shot video{aspect-ratio:800/1100;object-fit:cover;object-position:50% 46%}
.gallery .german,.gallery .pair-cap{grid-column:2}
.pair-cap{margin:-12px 0 0!important;font-size:14px;line-height:1.45;color:var(--cocoa);text-align:center}
.fig video.clip{aspect-ratio:auto;object-fit:cover}
.fig.wide video.clip{aspect-ratio:1920/1146}
.gallery .shot video.clip{aspect-ratio:800/1100}
.sec.quiet{background:var(--linen);border:0;border-radius:14px;padding:22px 24px;margin-top:40px}
.sec.quiet h2{font-size:26px;color:var(--cocoa)}
.quiet-list{margin:0;padding-left:18px;color:var(--cocoa)}
.quiet-list li{margin:0 0 6px}
@media (max-width:760px){
  .sec > :not(h2){grid-column:1}
  .gallery{grid-template-columns:1fr;gap:26px}
  .gallery .shot{max-width:420px}
  .gallery .german,.gallery .pair-cap{grid-column:1}
  .pair-cap{text-align:left;margin-top:-14px!important}
  .sec.quiet{padding:18px 16px}
}

.tile .shot-img{display:block;width:100%;height:auto;aspect-ratio:1200/614;border-radius:9px;border:1px solid var(--sand)}