/* dionis schmidt — projects / cv. tokens continue style.css */
@font-face { font-family: "Inter"; font-weight: 400; src: url(/fonts/inter-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 500; src: url(/fonts/inter-500.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 800; src: url(/fonts/inter-800.woff2) format("woff2"); font-display: swap; }
:root {
  --bg: #fff; --text: #a6a6a6; --ink: #000; --accent: #f00; --veil: rgba(255,255,255,.6);
  --fs: 12px; --fs-statement: clamp(28px, 3.6vw, 56px); --fs-drawer: clamp(18px, 2vw, 28px);
  --tracking-big: -0.02em; --leading-big: 1.05;
  --pad: clamp(.9rem, 2.2vw, 1.5rem); --col-right: 52vw; --row-gap: 22vh;
  --cloud-max: 12; --cloud-stagger: 35ms;
  --blur-s: 3px; --blur-m: 12px; --blur-l: 20px;
  --ease: cubic-bezier(.2,.7,.2,1); --t-fast: 200ms; --t: 450ms; --t-slow: 600ms; --drawer-close-delay: 300ms;
}
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; }
* { box-sizing: border-box; scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
html { scrollbar-width: none; -ms-overflow-style: none; background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { margin: 0; font: 400 var(--fs)/1.45 "Inter", Helvetica, Arial, sans-serif; text-transform: lowercase; overflow-x: hidden; position: relative; }
p, h1, h2, ul { margin: 0; padding: 0; font: inherit; }
a { color: var(--ink); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-transform: inherit; }
:focus-visible { outline: 1px solid #000; outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* text over media: soft backdrop blur (on the index it is only needed while a preview is open) */
body.idx:not(.cloud-on) .soft::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
.soft { position: relative; }
.soft::before { content: ""; position: absolute; inset: -6rem; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(var(--blur-s)); backdrop-filter: blur(var(--blur-s));
  --soft-x: linear-gradient(to right, rgba(0,0,0,0.000) 0.00rem, rgba(0,0,0,0.001) 0.50rem, rgba(0,0,0,0.005) 1.00rem, rgba(0,0,0,0.016) 1.50rem, rgba(0,0,0,0.035) 2.00rem, rgba(0,0,0,0.065) 2.50rem, rgba(0,0,0,0.104) 3.00rem, rgba(0,0,0,0.152) 3.50rem, rgba(0,0,0,0.210) 4.00rem, rgba(0,0,0,0.275) 4.50rem, rgba(0,0,0,0.347) 5.00rem, rgba(0,0,0,0.422) 5.50rem, rgba(0,0,0,0.500) 6.00rem, rgba(0,0,0,0.578) 6.50rem, rgba(0,0,0,0.653) 7.00rem, rgba(0,0,0,0.725) 7.50rem, rgba(0,0,0,0.790) 8.00rem, rgba(0,0,0,0.848) 8.50rem, rgba(0,0,0,0.896) 9.00rem, rgba(0,0,0,0.935) 9.50rem, rgba(0,0,0,0.965) 10.00rem, rgba(0,0,0,0.984) 10.50rem, rgba(0,0,0,0.995) 11.00rem, rgba(0,0,0,0.999) 11.50rem, rgba(0,0,0,1.000) 12.00rem, rgba(0,0,0,1.000) calc(100% - 12.00rem), rgba(0,0,0,0.999) calc(100% - 11.50rem), rgba(0,0,0,0.995) calc(100% - 11.00rem), rgba(0,0,0,0.984) calc(100% - 10.50rem), rgba(0,0,0,0.965) calc(100% - 10.00rem), rgba(0,0,0,0.935) calc(100% - 9.50rem), rgba(0,0,0,0.896) calc(100% - 9.00rem), rgba(0,0,0,0.848) calc(100% - 8.50rem), rgba(0,0,0,0.790) calc(100% - 8.00rem), rgba(0,0,0,0.725) calc(100% - 7.50rem), rgba(0,0,0,0.653) calc(100% - 7.00rem), rgba(0,0,0,0.578) calc(100% - 6.50rem), rgba(0,0,0,0.500) calc(100% - 6.00rem), rgba(0,0,0,0.422) calc(100% - 5.50rem), rgba(0,0,0,0.347) calc(100% - 5.00rem), rgba(0,0,0,0.275) calc(100% - 4.50rem), rgba(0,0,0,0.210) calc(100% - 4.00rem), rgba(0,0,0,0.152) calc(100% - 3.50rem), rgba(0,0,0,0.104) calc(100% - 3.00rem), rgba(0,0,0,0.065) calc(100% - 2.50rem), rgba(0,0,0,0.035) calc(100% - 2.00rem), rgba(0,0,0,0.016) calc(100% - 1.50rem), rgba(0,0,0,0.005) calc(100% - 1.00rem), rgba(0,0,0,0.001) calc(100% - 0.50rem), rgba(0,0,0,0.000) calc(100% - 0.00rem));
  --soft-y: linear-gradient(to bottom, rgba(0,0,0,0.000) 0.00rem, rgba(0,0,0,0.001) 0.50rem, rgba(0,0,0,0.005) 1.00rem, rgba(0,0,0,0.016) 1.50rem, rgba(0,0,0,0.035) 2.00rem, rgba(0,0,0,0.065) 2.50rem, rgba(0,0,0,0.104) 3.00rem, rgba(0,0,0,0.152) 3.50rem, rgba(0,0,0,0.210) 4.00rem, rgba(0,0,0,0.275) 4.50rem, rgba(0,0,0,0.347) 5.00rem, rgba(0,0,0,0.422) 5.50rem, rgba(0,0,0,0.500) 6.00rem, rgba(0,0,0,0.578) 6.50rem, rgba(0,0,0,0.653) 7.00rem, rgba(0,0,0,0.725) 7.50rem, rgba(0,0,0,0.790) 8.00rem, rgba(0,0,0,0.848) 8.50rem, rgba(0,0,0,0.896) 9.00rem, rgba(0,0,0,0.935) 9.50rem, rgba(0,0,0,0.965) 10.00rem, rgba(0,0,0,0.984) 10.50rem, rgba(0,0,0,0.995) 11.00rem, rgba(0,0,0,0.999) 11.50rem, rgba(0,0,0,1.000) 12.00rem, rgba(0,0,0,1.000) calc(100% - 12.00rem), rgba(0,0,0,0.999) calc(100% - 11.50rem), rgba(0,0,0,0.995) calc(100% - 11.00rem), rgba(0,0,0,0.984) calc(100% - 10.50rem), rgba(0,0,0,0.965) calc(100% - 10.00rem), rgba(0,0,0,0.935) calc(100% - 9.50rem), rgba(0,0,0,0.896) calc(100% - 9.00rem), rgba(0,0,0,0.848) calc(100% - 8.50rem), rgba(0,0,0,0.790) calc(100% - 8.00rem), rgba(0,0,0,0.725) calc(100% - 7.50rem), rgba(0,0,0,0.653) calc(100% - 7.00rem), rgba(0,0,0,0.578) calc(100% - 6.50rem), rgba(0,0,0,0.500) calc(100% - 6.00rem), rgba(0,0,0,0.422) calc(100% - 5.50rem), rgba(0,0,0,0.347) calc(100% - 5.00rem), rgba(0,0,0,0.275) calc(100% - 4.50rem), rgba(0,0,0,0.210) calc(100% - 4.00rem), rgba(0,0,0,0.152) calc(100% - 3.50rem), rgba(0,0,0,0.104) calc(100% - 3.00rem), rgba(0,0,0,0.065) calc(100% - 2.50rem), rgba(0,0,0,0.035) calc(100% - 2.00rem), rgba(0,0,0,0.016) calc(100% - 1.50rem), rgba(0,0,0,0.005) calc(100% - 1.00rem), rgba(0,0,0,0.001) calc(100% - 0.50rem), rgba(0,0,0,0.000) calc(100% - 0.00rem));
  -webkit-mask-image: var(--soft-x), var(--soft-y); -webkit-mask-composite: source-in; mask-image: var(--soft-x), var(--soft-y); mask-composite: intersect; }

@keyframes rise { from { opacity: 0; filter: blur(8px); transform: translateY(4px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---------- header ---------- */
.ph { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: var(--pad); pointer-events: none; view-transition-name: ph; transition: opacity var(--t) var(--ease); }
.ph a, .ph button, .ph #sleep, .ph .np { pointer-events: auto; }
body.idx.cloud-on .ph { opacity: 0; pointer-events: none; }
body.idx.cloud-on .ph * { pointer-events: none; }
.ph-nm { position: relative; display: inline-block; }
.ph-name { display: inline-block; }
/* "personal site": touches the name (no dead gap to cross), stays a moment after the pointer leaves */
/* soft white shade under the fixed header so scrolling text never collides with it */
.ph::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 2.6rem); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, #fff 0, #fff 38%, rgba(255,255,255,.85) 58%, rgba(255,255,255,0) 100%); }
.ph-alt { position: absolute; left: 100%; top: 0; padding-left: 1.4em; white-space: nowrap; color: var(--text); opacity: 0; visibility: hidden; transition: opacity var(--t-fast) var(--ease) .3s, visibility 0s linear .55s, color var(--t-fast); }
.ph-nm:hover .ph-alt, .ph-nm:focus-within .ph-alt { opacity: 1; visibility: visible; transition-delay: 0s; }
.ph-alt:hover, .ph-alt:focus-visible { color: var(--ink); }
.ph-sleep { margin-top: .15em; color: var(--text); transition: opacity var(--t-slow); }
.ph-sleep.fade { opacity: 0; }
.ph-m { justify-self: center; min-width: 0; }
.np { display: flex; gap: .1em .9em; align-items: baseline; white-space: nowrap; color: var(--text); }
.np-b, .np-n { color: var(--text); transition: color var(--t-fast); }
.np-b .np-s { color: var(--ink); }
.np-b:hover, .np-n:hover, .np-b:focus-visible, .np-n:focus-visible { color: var(--ink); }
.np-t { color: var(--ink); overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.np-t[hidden], .np-n[hidden] { display: none; }
.doors { justify-self: end; color: var(--text); will-change: transform; }
.door { color: var(--text); transition: color var(--t-fast); }
.door:hover, .door:focus-visible, .door[aria-expanded="true"] { color: var(--ink); }

/* ---------- hire / rent / talk drawers ---------- */
.veil { position: fixed; inset: 0; z-index: 25; background: var(--veil); opacity: 0; pointer-events: none; transition: opacity var(--t) var(--ease); }
body.dopen .veil { opacity: 1; }
.blurable, .cloud, .pbar, .ph { transition: filter var(--t) var(--ease), opacity var(--t) var(--ease); }
body.dopen .blurable, body.dopen .cloud, body.dopen .pbar { filter: blur(var(--blur-l)); }
.drawers { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.drawer { display: none; position: fixed; top: calc(var(--pad) + 2.2em); right: var(--dr, var(--pad)); color: var(--text); font-size: clamp(14px, 1.3vw, 18px); line-height: 1.3; text-align: right; pointer-events: auto; }
.drawer.open { display: block; }
.drawer .lv, .drawer .sub { list-style: none; }
.drawer .note { color: var(--text); font-size: var(--fs); margin: 0 0 1em; animation: rise var(--t) var(--ease) both; max-width: 22rem; margin-left: auto; }
.drawer .row { position: relative; display: block; animation: rise var(--t) var(--ease) both; animation-delay: calc(var(--k, 0) * 40ms); }
.drawer .row > a, .drawer .row > button { display: block; width: 100%; text-align: right; padding: .08em 0; color: var(--text); transition: color var(--t-fast); }
.drawer .row:hover > a, .drawer .row:hover > button, .drawer .row.open > button, .drawer .row > a:focus-visible, .drawer .row > button:focus-visible { color: var(--ink); }
.drawer .sub { display: none; position: absolute; top: 0; right: 100%; padding-right: 1.6em; white-space: nowrap; }
.drawer .row.open > .sub { display: block; }
.drawer .sub > .row { animation-delay: calc(var(--k, 0) * 40ms); }
.drawer .row.big > a { font-size: var(--fs-drawer); }
.drawer .tip { margin: 1.6em 0 0 auto; max-width: 15.5rem; font-size: 12px; line-height: 1.4; text-align: right; text-wrap: balance; animation: rise var(--t) var(--ease) both; animation-delay: 160ms; }
.drawer .tip a { color: var(--text); transition: color var(--t-fast); }
.drawer .tip a:hover, .drawer .tip a:focus-visible { color: var(--ink); }
.drawer .div { list-style: none; height: 1px; background: #dcdcdc; margin: .8em 0; animation: fadein var(--t) var(--ease) both; }

/* ---------- index ---------- */
.index { position: relative; z-index: 1; padding: calc(var(--pad) * 5) var(--pad) 14vh; }
.about { margin: 0 0 7vh; color: var(--ink); scroll-margin-top: calc(var(--pad) * 4); transition: opacity var(--t) var(--ease); }
.ab-b { display: block; width: 100%; max-width: 80rem; text-align: left; color: inherit; cursor: pointer; }
.ab-v { font: 500 clamp(22px, 2.6vw, 38px)/1.12 "Inter", sans-serif; letter-spacing: var(--tracking-big); }
.ab-h { margin-left: .9em; font-size: var(--fs); letter-spacing: 0; color: var(--text); opacity: 0; vertical-align: .55em; white-space: nowrap; transition: opacity var(--t-fast) var(--ease); }
.ab-b:hover .ab-h, .ab-b:focus-visible .ab-h { opacity: 1; }
.about.open .ab-h { display: none; }
.ab-more { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--t-slow) var(--ease), visibility 0s var(--t-slow); }
.about.open .ab-more { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--t-slow) var(--ease); }
.ab-in { overflow: hidden; min-height: 0; }
.ab-box { max-width: 44rem; margin-top: 3.2vh; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.5; cursor: pointer; }
.ab-box p { margin: 0 0 1.1em; }
.ab-photo { display: block; width: min(100%, 33rem); margin: 0 0 1.8em; }
.ab-photo img { display: block; width: 100%; height: auto; background: #f3f3f3; }
@media (hover: hover) and (pointer: fine) { .ab-photo { cursor: none; } }
.ab-box ul { list-style: none; margin: 0 0 1.3em; padding: 0; }
.ab-box li { margin: 0 0 .3em; }
.ab-c { color: var(--text); transition: color var(--t-fast); }
.ab-c:hover, .ab-c:focus-visible { color: var(--ink); }
.cat { margin: 0 0 11vh; }
.cat-h { margin: 0 0 3.2vh; }
.cat-h > * { display: inline; }
.cat-h h2 { color: var(--text); font-weight: 400; margin: 0; }
.cat-h h2 span { text-decoration: underline; text-underline-offset: .25em; }
.cat-h h2::after { content: ":"; margin-right: .4em; }
.cat-h p { color: var(--text); }
.copy { padding: 4vh var(--pad) calc(var(--pad) * 1.5); color: var(--text); }
.cvcopy { margin: 1.4em 0 0; color: #000; opacity: .5; }
.hint { max-width: 28rem; margin-bottom: 7vh; transition: opacity var(--t) var(--ease); }
.grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 3vw; row-gap: 5vh; align-items: start; }
@media (max-width: 70rem) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cat-h { transition: opacity var(--t) var(--ease); }
.entry { animation: rise var(--t-slow) var(--ease) backwards; animation-delay: calc(var(--i, 0) * 25ms); transition: opacity var(--t) var(--ease), filter var(--t-fast) var(--ease); }
.entry a { display: block; width: max-content; max-width: 100%; }
.e-t { display: flex; align-items: center; gap: .6em; color: var(--ink); }
.mini { height: 1.25em; width: auto; max-width: 3.2em; object-fit: contain; flex: none; }
.e-ty, .e-y { display: block; color: var(--text); }
.entry.hot { position: relative; z-index: 4; }
.entry.gone { opacity: 0 !important; filter: blur(8px); pointer-events: none; }
.entry.out { display: none; }
body.idx .cloud { z-index: 20; }
body.idx.cloud-on .blurable { filter: blur(28px); }   /* the page stays, just very out of focus, behind the preview */
.empty { margin-top: 8vh; color: var(--ink); }
/* ---------- preview (one visual, centred) ---------- */
.cloud { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ci { position: absolute; left: 50%; top: 50%; width: min(58vw, calc(72vh * var(--ar, 1))); translate: -50% -50%; opacity: 0; filter: blur(24px); transition: opacity var(--t) var(--ease), filter var(--t) var(--ease); }
.cloud.in .ci { opacity: 1; filter: none; }
.cloud.out .ci { opacity: 0; filter: blur(24px); transition-duration: 250ms; }
.cloud.touch { pointer-events: auto; z-index: 35; touch-action: none; }
.cloud.touch .ci a { display: block; }
body.pp .cloud { z-index: 20; }
.cloud.pvmode .pvwrap { position: absolute; inset: 0; display: grid; place-items: center; padding: calc(var(--pad) * 3 + 3vh) var(--pad) calc(var(--pad) * 3 + 6vh); }
.cloud.pvmode .pvbox { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6vh; max-width: min(62rem, 92vw); color: var(--ink); }
.cloud.pvmode .ci { position: static; translate: none; width: min(18vw, calc(22vh * var(--ar, 1))); }
.cloud.pvmode.big .ci { width: min(36vw, calc(44vh * var(--ar, 1))); }   /* photos and layouts, not logos: twice as large */
.pvt { margin: 0; font: 400 clamp(22px, 2.7vw, 42px)/1.14 "Inter", sans-serif; letter-spacing: var(--tracking-big); text-align: center; text-wrap: balance; opacity: 0; transform: translateY(8px); transition: opacity var(--t) var(--ease), transform var(--t-slow) var(--ease); }
.cloud.in .pvt { opacity: 1; transform: none; }
.cloud.out .pvt { opacity: 0; transition-duration: 250ms; }
.cloud.touch .pvbox { pointer-events: auto; }
.ci .p { transform: translate(calc(var(--px, 0) * 1.2vw), calc(var(--py, 0) * 1.2vw)); transition: transform 900ms var(--ease); }
.ci img, .ci video, .m img, .m video { display: block; width: 100%; height: auto; background-size: cover; background-position: center; }

/* ---------- project ---------- */
.proj { position: relative; display: grid; grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr); column-gap: 6vw; align-items: start; padding: calc(var(--pad) * 6) var(--pad) 14vh; min-height: 100vh; }
.info { color: var(--ink); max-width: 24rem; animation: rise var(--t-slow) var(--ease) both; }
.d-st { margin-bottom: 1.8em; }
.d-r { display: grid; grid-template-columns: 6.5em 1fr; gap: .6em; margin-bottom: 1em; }
.d-k { color: var(--text); }
.d-v a, .primary a { text-decoration: underline; text-underline-offset: .2em; }
.d-cr { color: var(--text); margin-top: 2em; }
.primary { margin-top: 2em; }
.blocks { margin-top: 2.4em; display: grid; gap: 1.4em; }
.blk h2 { color: var(--text); font-weight: 400; margin-bottom: .3em; }
.blk p { text-transform: none; }
.blk p + p { margin-top: .8em; }
.stage { position: relative; display: grid; justify-items: center; align-content: start; min-height: 74vh; }
.figs { position: relative; width: 100%; display: grid; place-items: center; min-height: 70vh; }
.m { display: none; margin: 0; cursor: pointer; text-align: center; }
.m.on { display: block; animation: rise var(--t) var(--ease) both; }
.m picture { display: block; }
.m img, .m video { display: block; width: auto; height: auto; max-width: 100%; max-height: 72vh; margin: 0 auto; background-size: cover; background-position: center; }
.m { position: relative; }
@media (hover: hover) { .m.can { cursor: none; } .m.can .snd { cursor: pointer; } }
.curlbl { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; white-space: nowrap; color: var(--text); opacity: 0; transform: translate(var(--x, 0px), var(--y, 0px)) translate(-50%, -50%); transition: opacity var(--t-fast) var(--ease); }
.curlbl.on { opacity: 1; }
.curlbl.up { font-size: 11px; transform: translate(var(--x, 0px), var(--y, 0px)) translate(-50%, calc(-100% - 18px)); }
.curlbl.arrow { width: 11px; height: 22px; background: center / contain no-repeat; }   /* a thin chevron, not a glyph */
.curlbl.arrow[data-dir="l"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 42'%3E%3Cpath d='M19.5 1.5 2.5 21l17 19.5' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E"); }
.curlbl.arrow[data-dir="r"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 42'%3E%3Cpath d='M2.5 1.5 19.5 21l-17 19.5' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E"); }
.curlbl.ink { color: #fff; }
.m .snd { display: block; margin: .8em auto 0; color: var(--text); }
.m .snd:hover, .m .snd:focus-visible { color: var(--ink); }
.gnav { margin-top: 1.2em; justify-self: end; display: flex; gap: .8em; align-items: center; color: var(--text); }
.gnav button { color: var(--text); padding: 0 .3em; font-size: 16px; line-height: 1; transition: color var(--t-fast); }
.gnav button:hover, .gnav button:focus-visible { color: var(--ink); }
.gnav .gi { color: var(--ink); }
.ystage { place-items: start; justify-items: start; }
.ylogo { width: 120px; margin-bottom: 4vh; }
.ylogo img { width: 100%; height: auto; display: block; }
.clients { list-style: none; display: grid; gap: .2em; width: 100%; max-width: 44rem; }
.clients li { transition: opacity var(--t) var(--ease); }
.clients a { display: grid; grid-template-columns: 9em 1fr; gap: .15em 1.5em; padding: .55em 0; color: var(--ink); }
.clients .c-n { grid-row: 1; } .clients .c-t { grid-row: 1; grid-column: 2; color: var(--text); } .clients .c-l { grid-column: 2; color: var(--ink); }
.c-more { color: var(--text); margin-top: .9em; }
.clients:has(a:hover) li:not(:hover) { opacity: 0; }
.clients a:hover .c-n { text-decoration: underline; text-underline-offset: .2em; }
.next { position: fixed; right: var(--pad); bottom: var(--pad); z-index: 30; color: var(--text); transition: color var(--t-fast) var(--ease); }
.next:hover, .next:focus-visible { color: var(--ink); }
body.nxt .blurable, body.nxt .pbar { filter: blur(40px); }
/* a light fog under the next-project preview so dark pictures behind it never swallow the text */
body.pp .cloud::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .55); opacity: 0; transition: opacity var(--t) var(--ease); }
body.pp .cloud.in::before { opacity: 1; }
body.pp .cloud.out::before { opacity: 0; }
.pbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: var(--pad); pointer-events: none; color: var(--text); }
body.pp::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 4.2em; z-index: 29; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 70%); }

/* ---------- story ---------- */
.st-btn { color: var(--text); white-space: nowrap; transition: color var(--t-fast); }
.st-btn:hover, .st-btn:focus-visible { color: var(--ink); }
.pbar span { pointer-events: none; }
.story { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(var(--blur-l)); backdrop-filter: blur(var(--blur-l)); opacity: 0; transition: opacity var(--t) var(--ease); }
.story[hidden] { display: none; }
.story.open { opacity: 1; }
.st-col { width: min(62ch, calc(100% - var(--pad) * 2)); margin: 0 auto; padding: calc(var(--pad) * 5) 0 16vh; color: var(--ink); font-size: 14px; line-height: 1.55; }
.story.open .st-col { animation: rise var(--t-slow) var(--ease) both; }
.st-top { display: flex; justify-content: space-between; gap: 1em; color: var(--text); margin: 0 0 3em; }
.st-x { color: var(--text); transition: color var(--t-fast); }
.st-x:hover, .st-x:focus-visible { color: var(--ink); }
.st-end { margin: 3em 0 0; }
.st-body p { margin: 0 0 1.15em; }
.st-body h3 { font-weight: 400; color: var(--text); margin: 2.2em 0 .6em; }
.st-body ul { list-style: none; margin: 0 0 1.3em; padding: 0; }
.st-body li { margin: 0 0 .5em; }
.st-body a { text-decoration: underline; text-underline-offset: .2em; }
.st-body a.ref { color: var(--text); font-size: .82em; text-decoration: none; }
.st-body a.ref:hover, .st-body a.ref:focus-visible { color: var(--ink); text-decoration: underline; }
.st-body .lb { color: var(--text); }
body.story-open { overflow: hidden; }

/* ---------- cv ---------- */
body.cv { background: var(--cvbg, #a6a6a6); color: #000; }
html:has(body.cv) { background: var(--cvbg, #a6a6a6); }
.cvbar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; gap: 1em; flex-wrap: wrap; padding: var(--pad); background: transparent; }
.cvbar::before { inset: 0; }
.cvbar a { color: #000; }
.cvbar a:hover { text-decoration: underline; text-underline-offset: .2em; }
.cvpages { display: grid; justify-items: center; gap: 0; padding-bottom: 6vh; }
.cvpages picture, .cvpages img { display: block; width: min(900px, 100%); height: auto; }
.cvfoot { padding: 2vh var(--pad) 8vh; text-align: center; }
.cvfoot a { color: #000; }
body.nf main { min-height: 100vh; display: grid; place-items: center; }
body.nf a { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- small screens ---------- */
@media (max-width: 52rem) {
  .ph-sleep { font-size: 11px; margin-top: .9em; }
  .ph-m { display: none; }
  .ph .doors { grid-column: 3; }
  .grid { grid-template-columns: 1fr 1fr; column-gap: 6vw; row-gap: 5vh; }
  .index { padding-top: calc(var(--pad) * 10); }
  .cat { margin-bottom: 9vh; }
  .index { padding-top: calc(var(--pad) * 8); }
  .ci { width: min(90vw, calc(66vh * var(--ar, 1))); }
  .m { left: calc(var(--mx) * 1vw); top: calc(var(--my) * 1vh); width: calc(var(--mw) * 1vw); }
  .proj { grid-template-columns: 1fr; row-gap: 6vh; padding-top: calc(var(--pad) * 9); }
  .info { max-width: none; }
  .st-top { position: sticky; top: 0; padding: var(--pad) 0 1em; margin: calc(var(--pad) * -5) 0 2em; background: linear-gradient(#fff 70%, rgba(255,255,255,0)); }
  .story { background: #fff; }
  .st-col { padding-top: calc(var(--pad) * 5); }
  .m img, .m video { max-height: 66vh; }
  .figs { min-height: 0; } .stage { min-height: 0; }
  .ab-v { font-size: clamp(20px, 5.6vw, 26px); } .ab-h { opacity: 1; }
  .cloud.pvmode .ci { width: min(34vw, calc(18vh * var(--ar, 1))); } .cloud.pvmode.big .ci { width: min(68vw, calc(32vh * var(--ar, 1))); } .pvt { font-size: clamp(19px, 5.4vw, 24px); }
  .drawer { left: 0; right: 0; top: calc(var(--pad) * 2 + 5.2em); padding: 0 var(--pad) var(--pad); text-align: left; max-height: calc(100svh - 8em); overflow-y: auto; }
  .drawer .row > a, .drawer .row > button { text-align: left; }
  .drawer .note { margin-left: 0; }
  .drawer .sub { position: static; display: none; padding: 0 0 0 1em; }
  .drawer .row.open > .sub { display: block; }
  .clients a { grid-template-columns: 1fr; } .clients .c-n, .clients .c-t, .clients .c-l { grid-column: 1; } .clients .c-n { grid-row: 1; } .clients .c-t { grid-row: 2; } .clients .c-l { grid-row: 3; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .ci { filter: none !important; }
}

/* project pages on a desktop are one fixed screen: nothing to scroll */
@media (min-width: 52.01rem) {
  html:has(body.pp), body.pp { height: 100svh; overflow: hidden; }
  body.pp .info { max-height: calc(100svh - 12rem); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
  body.pp .info::-webkit-scrollbar { display: none; }
}