/* fonts are served from the theme rather than Google Fonts: a third-party stylesheet blocks the first paint
   behind two extra connections. Files and unicode ranges as Google serves them (SIL Open Font License);
   Schibsted Grotesk is variable, so one file per subset covers every weight. */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(../fonts/schibsted-grotesk-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(../fonts/schibsted-grotesk-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/playfair-display-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/playfair-display-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --c-paper:#FBFBFA;
  --c-ink:#141413;
  --paper:var(--c-paper);
  --ink:var(--c-ink);

  --hair:#D6D6D5;
  --hair-2:#B6B6B5;
  --soft:#7E7E7D;
  --wash:#EFEFEE;

  --gutter:clamp(1.25rem, 3.2vw, 2.5rem);
  --pad:clamp(1.25rem, 5vw, 5rem);
  --max:78rem;
  --f:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* one scale, used everywhere */
  --t-xs:.8125rem;
  --t-sm:.9375rem;
  --t-base:1.0625rem;
  --t-md:clamp(1.15rem,1.05rem + .45vw,1.4rem);
  --t-h3:1.125rem;
  --t-h2:clamp(1.6rem,1.15rem + 1.7vw,2.4rem);
  --t-h1:clamp(2.35rem,1.3rem + 4.2vw,4.25rem);

  --space-sec:clamp(4.5rem,9vw,8.5rem);
}
/* the site is designed for one light palette; it stays the same in dark mode */
:root, :root[data-theme="dark"], :root[data-theme="light"]{ --c-paper:#FBFBFA; --c-ink:#141413; color-scheme:light; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --c-paper:#FBFBFA; --c-ink:#141413; }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f);font-size:var(--t-base);line-height:1.6;
  letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit}
svg{display:block;max-width:100%}
h1,h2,h3{font-weight:600;letter-spacing:-.025em;margin:0}
p{margin:0}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
::selection{background:var(--ink);color:var(--paper)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:60}
.skip:focus{left:0}

/* ---------- the grid everything sits on ---------- */
.shell{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter)}
.sec{padding-block:var(--space-sec);border-top:1px solid var(--hair)}
.sec-head{margin-bottom:clamp(2.2rem,4.5vw,3.5rem)}
.sec-head h2{grid-column:1 / span 4;font-size:var(--t-h2);line-height:1.1}
.sec-head p{grid-column:6 / span 7;color:var(--soft);max-width:46ch}
@media (max-width:820px){
  .sec-head h2{grid-column:1 / -1}
  .sec-head p{grid-column:1 / -1}
}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:40;background:rgba(251,251,250,0.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
.bar{display:flex;align-items:center;gap:1.5rem;max-width:var(--max);margin:0 auto;padding:1rem var(--pad)}
.brand{margin-right:auto;text-decoration:none;font-weight:600;font-size:1.0625rem;letter-spacing:.14em}
nav.links{display:flex;gap:1.75rem;font-size:var(--t-sm);font-weight:500}
nav.links a{text-decoration:none;color:var(--soft);transition:color .18s}
nav.links a:hover{color:var(--ink)}
@media (max-width:900px){ nav.links{display:none} }
.lang{display:flex;align-items:center;gap:.4rem;font-size:var(--t-xs);color:var(--soft)}
.lang button{font:inherit;background:none;border:0;color:var(--soft);cursor:pointer;padding:0}
.lang button[aria-current="true"]{color:var(--ink)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(4rem,9vw,7.5rem) clamp(2.5rem,5vw,4rem);border-top:0}
.hero h1{grid-column:1 / span 12;font-size:clamp(3rem,1.2rem + 7vw,7rem);line-height:.95;letter-spacing:-.045em}
.hero .tagline{grid-column:1 / span 7;margin-top:1.5rem;font-size:clamp(1.3rem,1.05rem + .9vw,1.9rem);
  line-height:1.25;letter-spacing:-.022em;text-wrap:balance}
@media (max-width:980px){
  .hero .tagline{grid-column:1 / -1}
}
@media (max-width:820px){ .hero h1{grid-column:1 / -1} }
.btn{text-decoration:none;font-size:var(--t-sm);background:var(--ink);color:var(--paper);padding:.8rem 1.6rem}
.btn:hover{opacity:.85}
.link{text-decoration:none;font-size:var(--t-sm);border-bottom:1px solid var(--hair-2);padding-bottom:2px}
.link:hover{border-bottom-color:var(--ink)}
.hero-band{margin-top:clamp(2.5rem,5vw,4rem)}
.hero-band .shot{aspect-ratio:21/9}

/* ---------- photo slots ---------- */
.shot{position:relative;background:var(--wash);aspect-ratio:4/3;overflow:hidden;border:1px solid var(--hair)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.4rem;text-align:center;color:#6C6C6B;font-size:var(--t-xs);padding:1rem}
.ph svg{width:22px;height:22px;opacity:.45}
.ph span{opacity:.7;font-variant-numeric:tabular-nums}

/* ---------- about ---------- */
.about-text{grid-column:1 / span 6;display:grid;gap:1.1rem}
.about-text p{color:var(--soft);max-width:50ch}
.about-text p:first-child{color:var(--ink);font-size:var(--t-md);line-height:1.5}
.about-side{grid-column:8 / span 5}
.about-side .shot{aspect-ratio:4/3}
.about-side figcaption{margin-top:.7rem;font-size:var(--t-xs);color:var(--soft)}
@media (max-width:820px){ .about-text,.about-side{grid-column:1 / -1} }
.places{grid-column:1 / -1;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--hair)}
.places h3{font-size:var(--t-xs);color:var(--soft);font-weight:500;margin-bottom:.75rem}
.places ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 2rem;font-size:var(--t-sm);color:var(--soft)}

/* ---------- night stage ---------- */
.stage{grid-column:1 / -1;border:1px solid var(--hair-2)}
.stage-top{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:baseline;padding:1rem 1.25rem;border-bottom:1px solid var(--hair)}
.clock{font-size:1.5rem;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stage-top h3{font-size:var(--t-base);font-weight:500}
.readout{display:flex;flex-wrap:wrap;gap:.2rem 1.5rem;margin-left:auto;font-size:var(--t-sm);color:var(--soft);font-variant-numeric:tabular-nums}
.readout b{font-weight:500;color:var(--ink)}
.stage-body{display:grid;grid-template-columns:minmax(0,1fr) 16rem}
@media (max-width:900px){ .stage-body{grid-template-columns:minmax(0,1fr)} }
.stage-draw{padding:clamp(.75rem,2vw,1.5rem)}
#plan{width:100%;height:auto}
.stand-note{margin-top:.9rem;font-size:var(--t-xs);color:var(--soft)}
.stage-side{border-left:1px solid var(--hair);display:flex;flex-direction:column}
@media (max-width:900px){ .stage-side{border-left:0;border-top:1px solid var(--hair)} }
.picker{display:flex;flex-direction:column}
.picker button{font:inherit;font-size:var(--t-sm);text-align:left;background:none;border:0;color:inherit;cursor:pointer;
  padding:.6rem 1.25rem;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:5.4rem 1fr;gap:.6rem;align-items:baseline}
.picker button em{font-style:normal;color:var(--soft);font-size:var(--t-xs);font-variant-numeric:tabular-nums;white-space:nowrap}
.picker button:hover{background:var(--wash)}
.picker button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.picker button[aria-pressed="true"] em{color:var(--paper);opacity:.7}
.picker button.done{color:var(--soft)}
.detail{padding:1.25rem;font-size:var(--t-sm);color:var(--soft);line-height:1.55}
.scrub{display:flex;align-items:center;gap:1.25rem;margin-top:1.25rem}
.scrub button{font:inherit;font-size:var(--t-sm);background:var(--ink);color:var(--paper);border:0;padding:.5rem 1.2rem;cursor:pointer;min-width:6.5rem}
.scrub input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:1px;background:var(--hair-2);cursor:pointer}
.scrub input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:24px;background:var(--ink);border:0;cursor:pointer}
.scrub input[type=range]::-moz-range-thumb{width:10px;height:24px;background:var(--ink);border:0;border-radius:0;cursor:pointer}
.ticks{display:flex;margin-top:.5rem;font-size:var(--t-xs);color:var(--soft);font-variant-numeric:tabular-nums}
.ticks span{flex:1;text-align:center}
.ticks span:first-child{text-align:left}
.ticks span:last-child{text-align:right}
@media (max-width:640px){ .ticks span:nth-child(even){visibility:hidden} }

/* unbuilt = an exploded axonometric: every part waits above its own place */
#plan{overflow:visible;display:block;width:100%;height:auto;max-height:calc(100vh - 15.5rem);min-height:240px}
.stage-body{overflow:hidden}
.plan-wrap{display:flex;justify-content:center}
.xhair{width:100%;height:100%}
.stage-error{margin:1rem 0 0;padding:.7rem .9rem;border:1px solid #141413;font-size:.8125rem}
@media (prefers-reduced-motion: reduce){ .part{animation:none} }
.f-top{fill:#F2F2F1}
.f-a{fill:#DDDDDC}
.f-b{fill:#C1C1C0}
.f-solid{fill:var(--ink)}
.stroke{stroke:var(--ink);stroke-width:1;stroke-linejoin:miter;vector-effect:non-scaling-stroke}
.grid-line{stroke:var(--ink);stroke-width:.6;opacity:.2;vector-effect:non-scaling-stroke}
.dim{stroke:var(--ink);stroke-width:.8;opacity:.45;fill:none;vector-effect:non-scaling-stroke}
.dim-t{fill:var(--ink);opacity:.65;font-size:13px;font-family:var(--f)}
.outline{stroke:var(--ink);stroke-width:1;opacity:.45;fill:none;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.beam{stroke:var(--ink);stroke-width:.9;opacity:.28;stroke-dasharray:4 5;vector-effect:non-scaling-stroke}


/* ---------- scroll-driven build ---------- */
.night-track{position:relative}
.night-sticky{position:static}
.night-track{height:auto}

.picker button span:last-child{color:var(--soft);font-size:var(--t-xs)}
.picker button[aria-pressed="true"] span:last-child{color:var(--paper);opacity:.75}
.scenes{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--hair)}
.scenes button{font:inherit;font-size:var(--t-sm);background:none;border:0;border-right:1px solid var(--hair);
  color:var(--soft);cursor:pointer;padding:.7rem 1.1rem;display:flex;gap:.6rem;align-items:baseline}
.scenes button em{font-style:normal;font-size:var(--t-xs);opacity:.75;font-variant-numeric:tabular-nums}
.scenes button:hover{color:var(--ink)}
.scenes button[aria-pressed="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.scene-where{margin-left:auto;align-self:center;padding-right:1.1rem;font-size:var(--t-xs);color:var(--soft)}
.progress{height:2px;background:var(--hair);margin-top:1.25rem;position:relative}
.progress span{position:absolute;inset:0 auto 0 0;width:0;background:var(--ink);transition:width .18s linear}
.night-hint{margin-top:.9rem;font-size:var(--t-xs);color:var(--soft)}


/* ---------- motion: everything arrives the way a stand goes up ---------- */


.hero .tagline{animation:fadein .7s ease .45s both}
.hero-band .shot{clip-path:inset(0 0 100% 0);animation:band 1s cubic-bezier(.16,.84,.3,1) .7s both}
@keyframes band{to{clip-path:inset(0 0 0 0)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* 3. blocks slide into place like a panel pushed along a wall */
.rv{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(5px);
  transition:clip-path .8s cubic-bezier(.16,.84,.3,1),opacity .45s ease,transform .8s cubic-bezier(.16,.84,.3,1)}
.rv.in{opacity:1;clip-path:inset(0 0 0 0);transform:none}

/* 4. photos come up like a shutter lifting */
.rv-shutter{opacity:1;clip-path:inset(100% 0 0 0);transform:none;transition:clip-path .85s cubic-bezier(.16,.84,.3,1)}
.rv-shutter.in{clip-path:inset(0 0 0 0)}
.gallery:hover .gallery-item{opacity:.45}
.gallery .gallery-item:hover{opacity:1}
.gallery-item img{transition:transform .6s cubic-bezier(.16,.84,.3,1)}
.gallery-item:hover img{transform:scale(1.03)}

/* 5. a light passes across the logo wall, once */
.refs{position:relative;overflow:hidden}
.refs.swept::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 42%,rgba(20,20,19,0.09) 50%,transparent 58%);
  animation:sweep 1.2s cubic-bezier(.3,.6,.4,1) .15s both}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* 6. header tightens and draws a scroll hairline */
header .bar{transition:padding .35s cubic-bezier(.16,.84,.3,1)}
header.tight .bar{padding-top:.6rem;padding-bottom:.6rem}
.scrollbar{position:absolute;left:0;bottom:-1px;height:1px;background:var(--ink);width:0}

/* 7. technical crosshair over the drawing */
.plan-wrap{position:relative}
.plan-wrap:hover{cursor:crosshair}
.xhair{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s ease}
.plan-wrap:hover .xhair{opacity:1}
.xline{stroke:var(--ink);stroke-width:.8;opacity:.45;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.xdot{fill:var(--ink)}
.xlabel{fill:var(--ink);font-family:var(--f);font-size:12px;font-variant-numeric:tabular-nums}
.xbg{fill:var(--paper);opacity:.9}

.logo{transition:opacity .35s ease}
.shot img{animation:fadein .5s ease both}
main{transition:opacity .22s ease}
main.swapping{opacity:0}
.scenes button,.picker button{transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.progress span{transition:width .4s cubic-bezier(.16,.84,.3,1)}

@media (prefers-reduced-motion: reduce){
  .hero .tagline,.hero-mark,.hero-wordmark,.hero-band .shot,.shot img{animation:none;clip-path:none}
  .rv,.rv-shutter{opacity:1;clip-path:none;transform:none;transition:none}
  .refs.swept::after{animation:none;display:none}
  .gallery:hover .gallery-item{opacity:1}
  main,.gallery-item img,.progress span,header .bar{transition:none}
}


/* ---------- grid overlay ---------- */
.gridlay{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0;transition:opacity .25s ease}
.gridlay.on{opacity:1}
.gridlay .shell{height:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter)}
.gridlay span{background:rgba(20,20,19,.035);border-left:1px solid rgba(20,20,19,.14);border-right:1px solid rgba(20,20,19,.14)}
.gridtag{position:fixed;right:1rem;bottom:1rem;margin:0;font-size:.75rem;background:var(--ink);color:var(--paper);padding:.35rem .6rem}
.gridbtn{font:inherit;font-size:inherit;background:none;border:0;border-bottom:1px solid currentColor;color:inherit;cursor:pointer;padding:0}
.gridbtn[aria-pressed="true"]{color:var(--ink)}
@media (prefers-reduced-motion: reduce){ .gridlay{transition:none} }

/* ---------- works gallery ---------- */
/* columns, not a grid: photos keep their own proportions and stack without gaps (masonry) */
.gallery{grid-column:1 / -1;columns:3;column-gap:var(--gutter)}
@media (max-width:860px){ .gallery{columns:2} }
@media (max-width:520px){ .gallery{columns:1} }
.gallery-item{display:block;margin-bottom:var(--gutter);break-inside:avoid;overflow:hidden;background:var(--wash);
  transition:opacity .35s ease}
.gallery-item img{display:block;width:100%;height:auto}

/* full-size view, opened by gallery.js */
.lightbox{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(10,10,10,.94);color:#FBFBFA}
.lightbox::backdrop{background:transparent}
.lightbox img{position:absolute;inset:0;margin:auto;max-width:calc(100vw - 7rem);max-height:calc(100vh - 6rem);object-fit:contain}
@media (max-width:700px){ .lightbox img{max-width:100vw;max-height:calc(100vh - 8rem)} }
.lightbox button{position:absolute;background:none;border:0;color:inherit;font:inherit;font-size:2rem;line-height:1;padding:1rem;cursor:pointer;opacity:.75}
.lightbox button:hover,.lightbox button:focus-visible{opacity:1}
.lightbox .lb-close{top:.5rem;right:.5rem}
.lightbox .lb-prev{left:.5rem;top:50%;transform:translateY(-50%)}
.lightbox .lb-next{right:.5rem;top:50%;transform:translateY(-50%)}
@media (max-width:700px){ .lightbox .lb-prev,.lightbox .lb-next{top:auto;bottom:1rem;transform:none} }
.lightbox .lb-count{position:absolute;left:1.25rem;top:1.25rem;margin:0;font-size:var(--t-xs);opacity:.7;font-variant-numeric:tabular-nums}

/* ---------- process ---------- */
.steps{grid-column:1 / -1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gutter)}
@media (max-width:960px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem} }
@media (max-width:520px){ .steps{grid-template-columns:minmax(0,1fr)} }
.steps li{border-top:1px solid var(--hair-2);padding-top:.9rem}
.steps b{display:block;font-size:var(--t-xs);color:var(--soft);font-weight:500;font-variant-numeric:tabular-nums;margin-bottom:1.75rem}
.steps h3{font-size:var(--t-h3);margin-bottom:.4rem}
.steps p{font-size:var(--t-sm);color:var(--soft);line-height:1.55}

/* ---------- references ---------- */
.refs{grid-column:1 / -1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media (max-width:900px){ .refs{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:520px){ .refs{grid-template-columns:repeat(2,minmax(0,1fr))} }
.logo{background:var(--paper);aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:.6;transition:opacity .2s}
.logo:hover{opacity:1}
.logo svg{height:30px;width:auto;max-width:100%;fill:currentColor}
.logo img{height:30px;width:auto;max-width:100%;filter:grayscale(1) contrast(1.1)}

.logo .wordmark{font-size:1rem;font-weight:600;letter-spacing:-.02em;text-align:center}
.ref-note{grid-column:1 / -1;margin-top:1.1rem;font-size:var(--t-xs);color:var(--soft);max-width:62ch}

/* ---------- contact ---------- */
.mailto{display:inline-block;margin-bottom:0;text-decoration:none;font-weight:600;letter-spacing:-.03em;
  font-size:clamp(1.5rem,1rem + 2.2vw,2.5rem);line-height:1.1;word-break:break-word;border-bottom:1px solid currentColor;padding-bottom:.15rem}
.mailto:hover{opacity:.7}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--hair);padding-block:1.5rem 1.75rem;font-size:.75rem;color:var(--soft)}
/* one line: legal details on the left, section links on the right; wraps on narrow screens */
/* three columns: legal details, the ζ mark in the exact middle, section links; the side columns share
   what is left equally, so the mark stays centred whatever the texts' lengths */
.foot{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem 1.5rem}
/* copyright on the first line, the policy links under it, so the left block is no wider than the links on the right */
.foot .legal{grid-column:1;justify-self:start;display:grid;gap:.35rem;margin:0}
.foot .legal-links{display:flex;flex-wrap:wrap;gap:.25rem .75rem}
.foot .legal a{text-decoration:none;border-bottom:1px solid currentColor}
.foot a:hover{color:var(--ink)}
.foot .fnav{grid-column:3;justify-self:end;display:flex;flex-wrap:wrap;gap:.25rem .75rem}
.foot .fnav a{text-decoration:none}

.more{display:inline-block;margin-top:clamp(2rem,4vw,3rem);font-size:var(--t-sm);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px}
.more:hover{opacity:.65}

/* ---------- hero: a space that builds itself ---------- */
.hero3d{position:relative;min-height:clamp(620px,92vh,960px);display:flex;flex-direction:column;justify-content:center;
  padding:0 0 clamp(2rem,4vw,3.2rem);overflow:hidden}
.h3d-stage{position:absolute;inset:0;z-index:0}
.h3d-stage canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .8s ease}
.h3d-stage.ready canvas{opacity:1}
.h3d-text{position:relative;z-index:1;pointer-events:none}
/* the hero is a flex column: without a width the text box shrinks to its content and drifts to the centre */
/* a flex column otherwise shrinks the text box to its content; row-gap 0 as the lockup spaces itself.
   No max-width: the hero runs edge to edge (within the page padding), so the lockup sits further left. */
.h3d-text{width:100%;max-width:none;row-gap:0}
.h3d-text > *{pointer-events:auto}
@media (max-width:900px){
  .hero3d{min-height:auto;padding-top:0}
  .h3d-stage{position:relative;inset:auto;height:62vw;min-height:280px;max-height:480px}
}
@media (prefers-reduced-motion: reduce){ .h3d-stage canvas{transition:none} }
#plan .f-a{fill:url(#hz-l)}
#plan .f-b{fill:url(#hz-d)}
#plan .f-top{fill:#fbfbfa}
#plan .stroke{stroke-width:.8}
.h3d-stage canvas{position:absolute;left:0;top:0}
#night .plan-wrap{position:relative}
.sp3d{position:absolute;z-index:1;cursor:crosshair}
.sp3d canvas{position:absolute;left:0;top:0}
#night .plan-wrap.gl3 #plan{visibility:hidden}
#night .plan-wrap.gl3 .xhair{display:none}

/* ---------- WordPress integration (not in the static design) ---------- */
/* the brand prints the site name; lang="tr" on it keeps the dotted capital İ */
.brand{text-transform:uppercase}
/* keep the sticky header below the admin bar for logged-in users */
.admin-bar header{top:32px}
@media (max-width:782px){ .admin-bar header{top:46px} }
/* plain pages rendered by index.php, e.g. the privacy notice */
.entry h1{font-size:var(--t-h2);line-height:1.1}
.entry-content{max-width:46rem;display:grid;gap:1.1rem}
/* works list and work pages */
.sec.work-archive,.sec.work-single{border-top:0}
.sec-head h1{grid-column:1 / span 6;font-size:var(--t-h2);line-height:1.1}
@media (max-width:820px){ .sec-head h1{grid-column:1 / -1} }
/* the location under a work title */
.sec-head h1 + p{grid-column:1 / -1;margin-top:-.75rem;color:var(--soft)}
.work-card{display:block;text-decoration:none}
.crumbs{font-size:var(--t-sm);margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.crumbs a{text-decoration:none;color:var(--soft)}
.crumbs a:hover{color:var(--ink)}
.work-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter);margin:0 0 clamp(2rem,4vw,3rem);
  padding-top:1.25rem;border-top:1px solid var(--hair)}
@media (max-width:700px){ .work-facts{grid-template-columns:repeat(2,minmax(0,1fr))} }
.work-facts dt{font-size:var(--t-xs);color:var(--soft)}
.work-facts dd{margin:0;font-size:var(--t-md);font-weight:500;font-variant-numeric:tabular-nums}
.work-cover{aspect-ratio:3/2}
.work-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);margin-top:var(--gutter)}
@media (max-width:700px){ .work-gallery{grid-template-columns:minmax(0,1fr)} }
.work-gallery .shot{display:block}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:1rem;margin-top:clamp(2rem,4vw,3rem);font-size:var(--t-sm)}
.pagination a{text-decoration:none;color:var(--soft)}
.pagination .current{color:var(--ink)}
.work-text{display:grid;gap:1rem;max-width:62ch;margin-bottom:clamp(2rem,4vw,3rem);font-size:var(--t-md);line-height:1.5}
.work-text p + p{font-size:var(--t-base);color:var(--soft)}

/* logo wall: scale logos within their cell without distortion; wide ones are limited by width,
   square emblems by height, so both read at a similar size */
.logo img{width:auto;height:auto;max-width:78%;max-height:46px;object-fit:contain}
/* cells draw their own lines, so the empty cells of a short last row stay blank instead of grey */
.refs{gap:0;background:none;border-width:1px 0 0 1px}
.refs .logo{border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}

/* logo wall: 9 columns, folded to two rows at every width until "all clients" is pressed
   (main.js adds .is-collapsed, so without JavaScript every logo shows) */
.refs{grid-template-columns:repeat(9,minmax(0,1fr))}
.refs.is-collapsed .logo:nth-child(n+19){display:none}
@media (max-width:1100px){
  .refs{grid-template-columns:repeat(6,minmax(0,1fr))}
  .refs.is-collapsed .logo:nth-child(n+13){display:none}
}
@media (max-width:760px){
  .refs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .refs.is-collapsed .logo:nth-child(n+9){display:none}
}
@media (max-width:480px){
  .refs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .refs.is-collapsed .logo:nth-child(n+7){display:none}
}
button.more{background:none;border:0;border-bottom:1px solid var(--ink);border-radius:0;color:inherit;font:inherit;font-size:var(--t-sm);padding:0 0 2px;cursor:pointer}
.refs-more{grid-column:1 / -1;justify-self:start;margin-top:1.25rem}
.refs-more[hidden]{display:none}

/* the space animation takes the wider part of the about row; the four types sit in one row under it */
.about-text{grid-column:1 / span 5;align-content:start}
.about-stage{grid-column:6 / -1}
@media (max-width:820px){ .about-text,.about-stage{grid-column:1 / -1} }
.about-stage .stage{border:0}
.about-stage .stage-body{grid-template-columns:minmax(0,1fr);gap:1.25rem}
.about-stage .stage-draw{padding:0}
.about-stage .stage-side{border:0}
.about-stage .picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 1rem}
.about-stage .picker button{grid-template-columns:minmax(0,1fr);gap:.1rem;padding:.7rem 0 0;border:0;border-top:1px solid var(--hair);color:var(--soft)}
.about-stage .picker button:hover{background:none;color:var(--ink)}
.about-stage .picker button[aria-pressed="true"]{background:none;color:var(--ink);border-top-color:var(--ink)}
.about-stage .picker button[aria-pressed="true"] em,
.about-stage .picker button[aria-pressed="true"] span:last-child{color:var(--ink);opacity:1}
@media (max-width:560px){ .about-stage .picker{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1rem} }

/* a section reached by its #link starts below the sticky header, not under it */
main section[id]{scroll-margin-top:3.5rem}

/* the header logo image (Customize → Site Identity); the site name as text stands in when there is none */
.brand{display:flex;align-items:center}
/* sized by whichever limit it meets first, so a tall mark and a wide wordmark both sit well in the bar */
.brand-logo{display:block;width:auto;height:auto;max-height:1.75rem;max-width:4.2rem}

/* the ζ mark; its square icon shares the paper colour, so only the mark shows */
.foot-mark{grid-column:2;display:block}
@media (max-width:760px){
  .foot{grid-template-columns:minmax(0,1fr);justify-items:center}
  .foot-mark{grid-column:1;grid-row:1}
  .foot .legal,.foot .fnav{grid-column:1;justify-self:center;justify-content:center}
  .foot .legal{justify-items:center}
  .foot .legal-links{justify-content:center}
}
.foot-mark img{display:block;width:2rem;height:2rem}

/* logo wall hover: the others step back, the cell lights up, the logo comes forward and measuring
   brackets close in on it, like the corner marks on the drawings */
.refs .logo{position:relative;transition:opacity .15s ease,background-color .15s ease}
.refs:hover .logo{opacity:.35}
.refs .logo:hover{opacity:1;background:var(--wash)}
.refs .logo img,.refs .logo .wordmark{transition:transform .25s cubic-bezier(.16,.84,.3,1)}
.refs .logo:hover img,.refs .logo:hover .wordmark{transform:scale(1.06)}
.refs .logo::before{content:"";position:absolute;inset:14px;pointer-events:none;opacity:0;
  background:
    linear-gradient(var(--ink),var(--ink)) left top / 10px 1px,
    linear-gradient(var(--ink),var(--ink)) left top / 1px 10px,
    linear-gradient(var(--ink),var(--ink)) right top / 10px 1px,
    linear-gradient(var(--ink),var(--ink)) right top / 1px 10px,
    linear-gradient(var(--ink),var(--ink)) left bottom / 10px 1px,
    linear-gradient(var(--ink),var(--ink)) left bottom / 1px 10px,
    linear-gradient(var(--ink),var(--ink)) right bottom / 10px 1px,
    linear-gradient(var(--ink),var(--ink)) right bottom / 1px 10px;
  background-repeat:no-repeat;
  transition:opacity .15s ease,inset .25s cubic-bezier(.16,.84,.3,1)}
.refs .logo:hover::before{opacity:1;inset:8px}
@media (prefers-reduced-motion: reduce){
  .refs .logo,.refs .logo::before,.refs .logo img,.refs .logo .wordmark{transition:none}
  .refs .logo:hover img,.refs .logo:hover .wordmark{transform:none}
}

/* contact: the ζ mark with the address under it, centred; two items, so a shorter section than the rest */
#contact{padding-block:clamp(3rem,6vw,5rem)}
#contact .sec-head{margin-bottom:clamp(1rem,2vw,1.5rem)}
.contact-center{grid-column:1 / -1;display:grid;justify-items:center;text-align:center}
.contact-mark{display:block;width:clamp(4.5rem,6vw,5.5rem);height:auto;margin-bottom:1rem}
.contact-center .mailto{font-size:clamp(1.25rem,1rem + 1vw,1.75rem)}

/* the dark sections: redefining the tokens here turns everything inside over (text, hairlines, the space
   picker, the photo placeholders); main.js reads --ink and --paper from here for the drawing's labels */
#about,#works,#contact{--paper:#141413;--ink:#FBFBFA;--soft:#A3A3A1;--hair:#353533;--hair-2:#555553;--wash:#222221;
  background:var(--paper);color:var(--ink);border-top:0}
#works .ph{color:var(--soft)}
/* the ζ is the paper-coloured site icon: inverted and blended with lighten, its square melts into the dark
   ground and only the mark stays */
#contact .contact-mark{filter:invert(1);mix-blend-mode:lighten}
/* the reveal animation isolates the block, so the blend needs the ground painted on the block itself */
#contact .contact-center{background:var(--paper)}

/* the hero: the primary lockup on the left (the ζ, the ZETA logo artwork and the brand line in Playfair Display,
   the face of the brand line artwork), stacked and centred on one another; the sketch runs on the right. The
   brand line's left padding equals its letter spacing, which otherwise trails after the last letter. */
.hero-lockup,.hero3d .brandline{grid-column:1 / span 6;justify-self:center;text-align:center}
.hero-lockup{display:flex;flex-direction:column;align-items:center}
.hero-mark{display:block;width:auto;height:clamp(6rem,2.5rem + 8vw,12rem);animation:fadein .7s ease both}
@media (max-width:900px){ .hero-lockup,.hero3d .brandline{grid-column:1 / -1} .hero-mark{height:clamp(5rem,22vw,7rem)} }
.hero3d h1{line-height:0;margin:clamp(.9rem,2vw,1.75rem) 0 0}
.hero-wordmark{display:block;width:auto;height:clamp(2rem,1.1rem + 2.5vw,3.6rem);animation:fadein .8s ease .15s both}
.hero3d .brandline{font-family:"Playfair Display",Georgia,serif;font-weight:400;text-transform:uppercase;white-space:nowrap;
  font-size:clamp(.66rem,.55rem + .4vw,.95rem);line-height:1.6;letter-spacing:.3em;padding-left:.3em;margin-top:clamp(1rem,2.2vw,1.9rem)}
@media (max-width:599px){ .hero3d .brandline{font-size:clamp(.5rem,2.6vw,.66rem);letter-spacing:.2em;padding-left:.2em} }


/* the language links on pages without main.js look like the front page's buttons */
.lang a{color:var(--soft);text-decoration:none}
.lang a:hover,.lang a[aria-current="true"]{color:var(--ink)}

/* the header spans the whole window with a slim edge gap, so the logo and the menu sit near the corners
   while the content below keeps its centred column */
header .bar{max-width:none;padding-inline:clamp(1rem,2.2vw,2.5rem)}