:root{
  --ink:#E9EBEC; --ink2:#F4F5F6; --ink3:#DEE1E3;     /* gallery-wall grey, raised paper, pressed */
  --line:#C9CED2; --line2:#727B84;                    /* hairline, firm rule */
  --text:#15191E; --muted:#4B535C;                    /* tattoo black, graphite */
  --card:#15191E; --card-line:#3A4149;                /* the booking card: an inverted plate */
  --on-card:#F4F5F6; --on-card-muted:#AAB2BA;
  --sel:#CDD3D8; --paper:#FFFFFF;
  --pad:clamp(1rem,4vw,4rem);
  --gl:max(var(--pad),env(safe-area-inset-left)); --gr:max(var(--pad),env(safe-area-inset-right));
  --head:3.5rem; --bar:4.75rem;                      /* fixed header; the phone booking bar */
  --ease:cubic-bezier(.16,1,.3,1);
  --ff-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --ff-body:"Literata",Georgia,"Times New Roman",serif;
  --ff-mono:"Courier Prime","Courier New",Courier,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color-scheme:light;scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scrollbar-color:var(--line2) var(--ink)}
body{background:var(--ink);color:var(--text);font-family:var(--ff-body);font-weight:400;font-size:1rem;line-height:1.6;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
::selection{background:var(--sel);color:var(--text)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.24em}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.inner{width:100%;max-width:1200px;margin:0 auto}

/* ============ HEADER ============ */
.top{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--head);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:0 var(--gr) 0 var(--gl);background:var(--ink);border-bottom:1px solid var(--line)}
.mark{display:flex;align-items:baseline;gap:.8rem;text-decoration:none;color:var(--text);white-space:nowrap}
.mark b{font-family:var(--ff-display);font-weight:400;font-variation-settings:'wdth' 125;font-size:.9rem;letter-spacing:.26em;text-transform:uppercase}
.mark span{font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.04em;color:var(--muted)}
.nav{display:flex;align-items:center;gap:clamp(1.1rem,2.6vw,2.4rem)}
.nav a{font-family:var(--ff-mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--muted);display:inline-flex;align-items:center;min-height:44px;transition:color .4s var(--ease)}
/* language: the page you are on in ink, the other one waiting in graphite */
.langs{display:flex;align-items:center}
.langs a{justify-content:center;min-width:2.4rem}
.langs a[aria-current]{color:var(--text)}
.langs i{font-style:normal;font-family:var(--ff-mono);font-size:.8rem;color:var(--line2)}

.btn{display:inline-flex;align-items:center;gap:.75rem;min-height:3rem;padding:0 1.35rem;font-family:var(--ff-mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:1px solid var(--text);background:var(--text);color:var(--ink2);cursor:pointer;transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.btn svg{flex:none;width:.75rem;height:.75rem;transition:transform .3s var(--ease)}
.btn:active svg{transform:translate(2px,-2px)}
.btn.quiet{background:transparent;color:var(--text);border-color:var(--line2)}
.nav .btn{min-height:2.4rem;padding:0 1.05rem;color:var(--ink2)}
.btn:active{opacity:.8}

/* ============ HERO ============ */
.hero{min-height:100svh;display:flex;align-items:center;padding:calc(var(--head) + clamp(1.5rem,4svh,3rem)) var(--gr) clamp(2rem,5svh,3.5rem) var(--gl);border-bottom:1px solid var(--line)}
.hero .inner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(2rem,5vw,5rem)}
h1{font-family:var(--ff-display);font-weight:200;font-variation-settings:'wdth' 125;font-size:clamp(2.6rem,6.4vw,5.75rem);line-height:.95;letter-spacing:.05em;text-transform:uppercase;color:var(--text)}
h1 .l{display:block}
h1 .t{display:flex;align-items:center;gap:1.1rem;margin-top:1.3rem;font-weight:300;font-size:clamp(.82rem,1.15vw,.98rem);line-height:1.3;letter-spacing:.52em;text-transform:uppercase;color:var(--muted)}
h1 .t::after{content:"";flex:1;height:1px;background:var(--line2);transform-origin:left}
.say{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.4;color:var(--text);max-width:30ch;margin-top:2.6rem}
.more{font-size:1.04rem;line-height:1.6;color:var(--muted);max-width:38ch;margin-top:.6rem}
.ctas{display:flex;flex-wrap:wrap;gap:.8rem 1rem;margin-top:2.6rem}

/* the drawing: a 600×760 plate. Moon disc at (300,300) r200; the canvas sits exactly on it */
.art-wrap{position:relative;margin:0;width:min(590px,46vw,calc((100svh - var(--head) - 6rem) * .7895))}
.art{position:relative;width:100%;aspect-ratio:600/760}
.art svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:var(--text)}
.art canvas{position:absolute;left:16.6667%;top:13.1579%;width:66.6667%;height:52.6316%;display:block;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.art canvas.held{cursor:grabbing}
.art .orbit{transform-box:view-box;transform-origin:300px 476px}
.mooncap{position:absolute;left:0;bottom:3%;writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;gap:.8rem;font-family:var(--ff-mono);font-size:.74rem;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.mooncap::before{content:"";flex:none;inline-size:5px;block-size:5px;border-radius:50%;background:var(--text)}
.mooncap::after{content:"";flex:none;inline-size:3.5rem;block-size:1px;background:var(--line2)}

/* ============ SECTIONS ============ */
.sec{padding:clamp(4.5rem,10vw,8.5rem) var(--gr) clamp(4.5rem,10vw,8.5rem) var(--gl);border-bottom:1px solid var(--line);scroll-margin-top:var(--head)}
h2{font-family:var(--ff-display);font-weight:300;font-variation-settings:'wdth' 110;font-size:clamp(1.75rem,3.4vw,2.7rem);line-height:1.1;letter-spacing:-.01em;color:var(--text);text-wrap:balance}
h3{font-family:var(--ff-display);font-weight:400;font-variation-settings:'wdth' 108;font-size:1.25rem;line-height:1.3;color:var(--text)}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.75rem 2rem}
.aside{font-family:var(--ff-mono);font-size:.78rem;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.on-touch{display:none}

/* ============ WORK ============ */
/* two large pieces and eight small ones, set as a checkerboard: big | 2x2, then 2x2 | big */
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.4rem,2.6vw,2.2rem) clamp(.9rem,1.6vw,1.4rem);margin-top:clamp(2rem,4vw,3rem)}
.work{display:flex;flex-direction:column;min-width:0;margin:0}
.work.big{grid-column:span 2;grid-row:span 2}
.work.b2{grid-column:3/span 2;grid-row:3/span 2}
.work button{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;padding:0;border:0;background:var(--ink3);cursor:zoom-in;outline:1px solid transparent;outline-offset:6px;transition:outline-color .45s var(--ease)}
.work button:focus-visible{outline:2px solid var(--text);outline-offset:4px}
.work button:active{opacity:.85}
.work.big button{aspect-ratio:auto;flex:1;min-height:0}
.work img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.work figcaption{margin-top:.6rem;font-family:var(--ff-mono);font-size:.78rem;line-height:1.5;color:var(--muted)}

/* lightbox: one piece at a time, nothing else on screen */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:max(clamp(1rem,3vw,2.5rem),env(safe-area-inset-top)) var(--gr) max(clamp(1rem,3vw,2.5rem),env(safe-area-inset-bottom)) var(--gl);background:var(--ink);color:var(--text);touch-action:pan-y pinch-zoom;overscroll-behavior:contain}
.lb::backdrop{background:var(--ink)}
.lb[open]{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:1.2rem;animation:lb-in .3s var(--ease)}
.lb figure{margin:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:.8rem}
.lb-shot{position:relative;min-height:0}
.lb img{width:100%;height:100%;object-fit:contain;transition:opacity .28s var(--ease),transform .4s var(--ease)}
/* the size of the piece, as a dimension line drawn beside it on the photograph (placed by script) */
.lb-dim{position:absolute;pointer-events:none}
.lb-dim[hidden]{display:none}
.lb-dim svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none}
.lb-dim .halo{stroke:var(--ink2);stroke-opacity:.85;stroke-width:3}
.lb-dim .ln{stroke:var(--text);stroke-width:1}
.lb-dim b{position:absolute;left:calc(100% + .3rem);top:50%;transform:translateY(-50%);padding:.3rem .45rem;font-family:var(--ff-mono);font-weight:400;font-size:.74rem;line-height:1;letter-spacing:.06em;white-space:nowrap;color:var(--text);background:var(--ink2);opacity:0;transition:opacity .4s var(--ease)}
.lb-dim.flip b{left:auto;right:calc(100% + .3rem)}
.lb-dim.h b{left:50%;top:calc(100% + .3rem);transform:translateX(-50%)}
.lb-dim.on b{opacity:1;transition-delay:.5s}
.lb figcaption{text-align:center;font-family:var(--ff-mono);font-size:.8rem;line-height:1.5;color:var(--muted)}
.lb figcaption b{font-weight:400;color:var(--text)}
.lb-ctl{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem}
.lb-ctl button{min-height:2.75rem;padding:0 1.1rem;font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;background:transparent;border:1px solid var(--line2);cursor:pointer;transition:border-color .4s var(--ease)}

/* ============ STYLES ============ */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,7vw,7rem);align-items:center}
.duo-fig{margin:0}
.duo-fig .shot{aspect-ratio:4/5;overflow:hidden;background:var(--ink3)}
.duo-fig picture{display:block;height:100%}
.duo-fig img{width:100%;height:100%;object-fit:cover}
.duo-fig figcaption{margin-top:.75rem;font-family:var(--ff-mono);font-size:.78rem;line-height:1.5;color:var(--muted)}
.duo-fig figcaption b{font-weight:400;color:var(--text)}
.duo-text h2{max-width:14ch;margin-bottom:clamp(2rem,4vw,3rem)}
.craft{display:grid;grid-template-columns:44px minmax(0,1fr);gap:1.4rem;align-items:start;padding:1.6rem 0;border-top:1px solid var(--line)}
.craft:last-child{border-bottom:1px solid var(--line)}
.craft svg,.craft canvas{display:block;width:44px;height:44px;color:var(--text)}
.craft p{margin-top:.35rem;color:var(--muted);max-width:42ch}

/* ============ BOOK ============ */
.bookcard{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:center;padding:clamp(2rem,6vw,5.5rem);background:var(--card);color:var(--on-card)}
.bookcard h2{color:var(--on-card);font-size:clamp(2rem,4.4vw,3.4rem);max-width:12ch}
.bookcard .lede{margin-top:1.1rem;font-size:1.06rem;line-height:1.6;color:var(--on-card-muted);max-width:36ch}
.bookcard .btn{margin-top:2.4rem;min-height:3.6rem;padding:0 1.9rem;font-size:.86rem;background:var(--on-card);border-color:var(--on-card);color:var(--card)}
.bookcard :focus-visible{outline-color:var(--on-card)}
.bc-note{margin-top:1rem;font-family:var(--ff-mono);font-size:.76rem;line-height:1.5;letter-spacing:.02em;color:var(--on-card-muted)}
.bc-steps{list-style:none;border-top:1px solid var(--card-line)}
.bc-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:1.2rem;align-items:center;padding:1.25rem 0;border-bottom:1px solid var(--card-line)}
.bc-steps canvas{display:block;width:40px;height:40px}
.bc-steps b{display:block;font-family:var(--ff-display);font-weight:400;font-variation-settings:'wdth' 108;font-size:1.15rem;line-height:1.3}
.bc-steps span{display:block;margin-top:.1rem;font-size:.95rem;line-height:1.5;color:var(--on-card-muted)}

/* ============ FOOTER ============ */
.foot{padding:clamp(3.5rem,7vw,5rem) var(--gr) max(1.75rem,env(safe-area-inset-bottom)) var(--gl)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:2.25rem 3rem;align-items:start}
.foot .mark b{font-size:1.05rem}
.foot-sub{margin-top:.6rem;color:var(--muted)}
.studio{font-size:1.04rem;line-height:1.5}
.studio span{display:block;margin-bottom:.3rem;font-family:var(--ff-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.foot-links{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.foot-links a{font-family:var(--ff-mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;text-decoration-color:var(--line2);padding:.3rem 0}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;margin-top:clamp(2.75rem,6vw,4rem);padding-top:1rem;border-top:1px solid var(--line2);font-family:var(--ff-mono);font-size:.76rem;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ============ PHONE BOOKING BAR ============ */
/* upright phones only: booking sits under the thumb, and steps aside while the booking card is on screen */
.bookbar{display:none;position:fixed;inset:auto 0 0 0;z-index:55;padding:.75rem var(--gr) calc(.75rem + env(safe-area-inset-bottom)) var(--gl);background:var(--ink);border-top:1px solid var(--line);transition:transform .45s var(--ease),visibility 0s linear 0s}
.bookbar .btn{width:100%;justify-content:center;min-height:3.25rem}
.bookbar.off{transform:translateY(100%);visibility:hidden;transition:transform .45s var(--ease),visibility 0s linear .45s}

/* ============ HOVER (pointers that can hover; touch gets :active instead) ============ */
@media (hover:hover){
  .nav a:hover{color:var(--text)}
  .btn:hover{background:transparent;color:var(--text)}
  .btn:hover svg{transform:translate(2px,-2px)}
  .btn.quiet:hover{border-color:var(--text)}
  .nav .btn:hover{color:var(--text)}
  .bookcard .btn:hover{background:transparent;color:var(--on-card)}
  .work button:hover{outline-color:var(--line2)}
  .lb-ctl button:hover{border-color:var(--text)}
  .foot-links a:hover{text-decoration-color:var(--text)}
}
@media (hover:none){
  .on-fine{display:none}
  .on-touch{display:inline}
}

/* ============ MOTION ============ */
.js [data-r]{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.js .in [data-r]{opacity:1;transform:none}
.js .in [data-r="2"]{transition-delay:.12s}
.js .in [data-r="3"]{transition-delay:.24s}
/* the focal moment is the moon itself (script): it stipples in, then turns slowly under a fixed sun,
   and a drag spins it. Around it, the fine lines unroll once, the rule under her name is drawn,
   and one dot orbits the lower circle, passing behind the moon. Everything else only acknowledges. */
@media (prefers-reduced-motion:no-preference){
  .js .art svg{animation:unroll 2s var(--ease) .1s both}
  .js .in h1 .t::after{animation:rule 1.6s var(--ease) .45s both}
  .art .orbit{animation:orbit 36s linear infinite}
  .art.rest .orbit{animation-play-state:paused}
  .js .work img,.js .duo-fig img{opacity:0;transition:opacity .7s var(--ease)}
  .js .work img.ok,.js .duo-fig img.ok{opacity:1}
  .lb-dim svg{clip-path:inset(50% -1rem);transition:clip-path .8s var(--ease) .25s}   /* the line draws out from its middle */
  .lb-dim.h svg{clip-path:inset(-1rem 50%)}
  .lb-dim.on svg{clip-path:inset(-1rem)}
}
@keyframes unroll{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rule{from{transform:scaleX(0)}}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes lb-in{from{opacity:0}}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .mooncap{position:static;writing-mode:horizontal-tb;transform:none;justify-content:center;margin-top:1rem;white-space:normal;text-align:center}
  .mooncap::after{display:none}
}
@media (max-width:900px){
  .duo,.bookcard{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work.big,.work.b2{grid-column:1/-1;grid-row:auto}
  .work.big button{aspect-ratio:4/5;flex:none}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-links{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:.35rem 1.75rem}
}
/* held upright: the drawing leads the first screen, the booking bar replaces the hero buttons,
   and the header steps aside on the way down (script) */
@media (max-width:900px) and (orientation:portrait){
  html{scroll-padding-bottom:var(--bar)}
  .top{transition:transform .45s var(--ease)}
  .top.away{transform:translateY(-100%)}
  .top:focus-within{transform:none}
  .nav .btn{min-height:44px;padding:0;border:0;background:transparent;color:var(--text);text-decoration:underline;text-decoration-color:var(--line2)}
  .hero{min-height:100svh;padding-top:calc(var(--head) + 1.25rem);padding-bottom:calc(var(--bar) + 1.5rem)}
  .hero .inner{grid-template-columns:1fr;gap:1.6rem}
  /* the plate is cropped to 600×680 here: the lines run on past the frame */
  .art-wrap{order:-1;justify-self:center;width:min(100%,26rem,max(12rem,calc((100svh - 23.5rem) * .882)))}
  .art{aspect-ratio:600/680;overflow:hidden}
  .art svg{height:111.7647%}
  .art canvas{top:14.7059%;height:58.8235%}
  .mooncap{width:max-content;max-width:calc(100vw - 2 * var(--pad));margin-left:50%;transform:translateX(-50%);letter-spacing:.1em}
  .ctas{display:none}
  .bookbar{display:block}
}
/* phones on their side: keep the two columns, size the drawing to the short height */
@media (max-width:900px) and (orientation:landscape){
  .art-wrap{width:calc((100svh - var(--head) - 3rem) * .7895)}
  .mooncap{display:none}
}
@media (max-width:560px){
  .nav .n-hide{display:none}
  .sec{padding-top:4rem;padding-bottom:4rem}
  h1{font-size:clamp(2.6rem,13.4vw,3.6rem)}
  .say{margin-top:1.4rem}
  .more{display:none}
  .gal{gap:1.1rem .75rem}
  .foot-grid{grid-template-columns:1fr}
  .bookcard{margin:0 calc(var(--pad) * -1);padding:2.75rem var(--pad)}
  .bookcard .btn{width:100%;justify-content:center;padding:0 1rem;letter-spacing:.1em;text-transform:uppercase}
  :lang(de) p{-webkit-hyphens:auto;hyphens:auto}                        /* long German compounds on a narrow measure */
}
/* upright phones: the booking bar is always under the thumb, so the header keeps its room for work and language */
@media (max-width:560px) and (orientation:portrait){
  .nav .btn{display:none}
}
@media (max-width:420px){
  .top .mark span{display:none}
}
@media (max-width:359px){
  .top{gap:.75rem}
  .nav{gap:.7rem}
  .langs a{min-width:2rem}
}
@media (pointer:coarse){
  .foot-links a{display:inline-flex;align-items:center;min-height:44px;padding:0}
  .lb-ctl button{min-height:3rem;padding:0 1.35rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-r]{opacity:1;transform:none;transition:none}
  .btn,.btn svg,.nav a,.work button,.lb-ctl button,.top,.bookbar,.bookbar.off{transition:none}
  .lb img{transition:opacity .28s var(--ease)}
}
@media print{
  .top,.lb,.ctas,.bookbar{display:none}
  .hero,.sec{min-height:auto;padding:2rem 0;border:0}
  .js [data-r]{opacity:1;transform:none}
  .bookcard{background:var(--paper);color:var(--text);border:1px solid var(--text)}
  .bookcard h2,.bookcard .lede,.bc-note,.bc-steps span{color:var(--text)}
  .bookcard .btn{background:transparent;color:var(--text);border-color:var(--text)}
  body{background:var(--paper);color:var(--text)}
}