:root {
  color-scheme: dark; --bg:#171616; --text:#d8cfbf; --muted:rgba(216,207,191,.6); --line:rgba(255,255,255,.25); --line-soft:rgba(255,255,255,.1);
  --mono:"Fragment Mono","JetBrains Mono Variable",monospace; --pad:clamp(22px,2.5vw,64px);
}
* { box-sizing:border-box; }
html { overscroll-behavior-x:none; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--text); font:400 clamp(14px,1.05vw,22px)/1.35 "Inter",Arial,sans-serif; overscroll-behavior-x:none; }
/* Fine, low-contrast grain stays above the page, including gallery details. */
body::after { content:''; position:fixed; inset:0; z-index:9; background:url('/assets/scenes/screen-grain.png') repeat left top/128px 128px; opacity:.12; pointer-events:none; animation:screen-grain .24s steps(1,end) infinite; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,.tile:focus-visible,.gallery:focus-visible { outline:1px solid #e5e3d2; outline-offset:3px; }
button:hover,a:hover,button.touch-hover,a.touch-hover { color:#f1efe1; }
.mono { font-family:var(--mono); }
.site-loader { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:var(--bg); color:var(--text); transition:opacity .35s ease,visibility .35s ease; }
.loader-frame { position:relative; display:grid; place-items:center; width:180px; height:100px; }
.loader-frame .button-frame i { width:12px; height:12px; border-color:rgba(216,207,191,.6); animation:loader-corner .45s cubic-bezier(.2,.9,.3,1) both; }
.loader-frame .button-frame i:nth-child(2) { animation-delay:.07s; }
.loader-frame .button-frame i:nth-child(3) { animation-delay:.14s; }
.loader-frame .button-frame i:nth-child(4) { animation-delay:.21s; }
.loader-label { position:absolute; top:15px; font-size:8px; letter-spacing:.16em; color:var(--muted); }
.loader-percent { font-size:32px; line-height:1; font-weight:400; letter-spacing:-.06em; font-variant-numeric:tabular-nums; animation:loader-number .45s ease-out both; }
.loader-rule { position:absolute; bottom:16px; width:118px; height:1px; background:var(--line-soft); }
.loader-rule-fill { display:block; width:100%; height:100%; background:var(--text); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
@keyframes loader-corner { from { width:0; height:0; opacity:0; } to { width:12px; height:12px; opacity:1; } }
@keyframes loader-number { from { opacity:0; filter:blur(4px); transform:translateY(6px); } to { opacity:1; filter:blur(0); transform:translateY(0); } }
html:not(.booting) .site-loader { opacity:0; visibility:hidden; pointer-events:none; }
/* If JavaScript is unavailable, the overlay must never trap the page. */
.booting .site-loader { animation:loader-fallback 0s 8s forwards; }
@keyframes loader-fallback { to { opacity:0; visibility:hidden; pointer-events:none; } }
@media (prefers-reduced-motion: reduce) { .site-loader,.loader-rule-fill { transition:none; } .loader-frame .button-frame i,.loader-percent { animation:none; } }
.sr-only,.skip:not(:focus) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.skip:focus { position:fixed; top:10px; left:10px; z-index:40; background:#eee; color:#111; padding:12px; }
.page { margin:0 2.4vw; min-height:100svh; border-inline:1px dotted var(--line); display:flex; flex-direction:column; overflow:clip; }
.ticker { flex-shrink:0; height:25px; overflow:hidden; white-space:nowrap; color:var(--muted); font-size:clamp(10px,.8vw,16px); border-bottom:1px dotted var(--line-soft); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.ticker-track { display:flex; width:max-content; animation:ticker 38s linear infinite; }
/* Start the marquee only when the first layout and fonts are ready. */
.booting .ticker-track { animation:none; }
.ticker-track>span { flex:none; line-height:24px; }
.ticker b { padding:0 25px; font-size:15px; font-weight:400; }
main { flex:1; display:flex; flex-direction:column; min-height:0; }
.hero { display:flex; justify-content:space-between; gap:35px; flex:1; padding:20px var(--pad); min-height:0; filter:blur(.5px); }
.intro { min-width:0; flex:1; }
.identity { display:flex; align-items:center; gap:16px; }
.portrait-frame { width:clamp(50px,4vw,100px); height:clamp(50px,4vw,100px); flex:none; overflow:hidden; }
.portrait { width:100%; height:100%; object-position:center; object-fit:cover; filter:grayscale(1) contrast(.9) sepia(.18) blur(.25px); opacity:.85; }
.name { line-height:1.25; white-space:nowrap; }
.name span,.location span { display:block; }
.location { padding-left:2px; line-height:1.3; font-size:.96em; letter-spacing:.025em; color:var(--muted); }
.bio { font-size:1em; line-height:1.4; max-width:620px; margin:16px 0 0; color:#b9b8ac; }
h1 { font-size:clamp(25px,2vw,48px); line-height:1.05; font-weight:400; letter-spacing:0; margin:36px 0 23px; max-width:840px; }
.actions { display:flex; flex-wrap:wrap; gap:10px; }
.button { font-family:var(--mono); padding:10px 17px; font-size:1.04em; display:inline-flex; align-items:center; gap:20px; }
.primary { background:#c0bfb2; color:#252522; box-shadow:inset 0 0 0 1px #dedccd; }
.primary:hover,.primary.touch-hover { background:#e1dfcf; color:#111; }
.brackets { position:relative; }
.brackets:before,.brackets:after { content:''; position:absolute; top:4px; bottom:4px; width:7px; border-block:1px solid #a6a49375; }
.brackets:before { left:0; border-left:1px solid #a6a49375; }
.brackets:after { right:0; border-right:1px solid #a6a49375; }
.tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; width:36%; align-self:flex-start; }
.tile { background:#d9d6be08; aspect-ratio:1; display:flex; align-items:center; justify-content:center; position:relative; padding:10px; color:#c5c3b5; user-select:none; transition:background .25s; }
.tile:hover,.tile:focus-visible,.tile.touch-hover { background:#d9d6be12; }
.tile-icon { width:clamp(36px,3.7vw,76px); height:clamp(36px,3.7vw,76px); opacity:.7; transition:transform .4s,filter .4s,opacity .4s; }
.brand-icon { opacity:.7; filter:grayscale(1) brightness(4) contrast(8) brightness(.765) sepia(.3); }
.symbol { font:clamp(32px,3.8vw,72px)/1 Arial,sans-serif; transition:transform .4s,filter .4s; }
.tile-label { position:absolute; bottom:9px; left:3px; right:3px; text-align:center; font:clamp(8px,.65vw,13px) var(--mono); opacity:0; transform:translateY(6px); filter:blur(5px); transition:opacity .22s,transform .35s,filter .35s; pointer-events:none; }
.tile-label-top { top:9px; bottom:auto; transform:translateY(-6px); }
.tile:hover .tile-label,.tile:focus-visible .tile-label,.tile.touch-hover .tile-label { opacity:1; transform:none; filter:none; }
.tile:hover .tile-icon,.tile:hover .symbol,.tile:focus-visible .tile-icon,.tile:focus-visible .symbol,.tile.touch-hover .tile-icon,.tile.touch-hover .symbol { transform:translateY(-5px) scale(.95); }
.tile--brand:is(:hover,:focus-visible,.touch-hover) { background:#d9d6be08; }
.tile--brand:is(:hover,:focus-visible,.touch-hover) .brand-icon { transform:none; }
.work { flex:none; margin-top:auto; overscroll-behavior:none; }
.work-controls { display:flex; justify-content:flex-end; align-items:center; gap:13px; padding:0 var(--pad) 8px; color:rgba(216,207,191,.3); font-size:clamp(10px,.8vw,16px); }
.down { padding-left:7px; }
.icon-button { font-family:var(--mono); font-size:17px; min-width:28px; min-height:30px; padding:2px; }
.progress { width:100px; height:2px; background:#b9b6a550; overflow:hidden; }
.progress i { display:block; height:100%; background:#c6c4b7; transform:scaleX(0); transform-origin:left; }
/* Reference: caption above the image; information control at 16px inside its top-left. */
.gallery { --card-width:55%; --card-height:clamp(230px,42vh,550px); --head-height:32px; height:calc(var(--card-height) + var(--head-height)); overflow:hidden; position:relative; touch-action:none; overscroll-behavior:none; cursor:grab; user-select:none; -webkit-user-select:none; }
/* The reference keeps a faint dotted "stage" around the centered work item. */
.gallery::before { content:''; position:absolute; z-index:7; pointer-events:none; top:calc(-1 * var(--head-height)); bottom:0; left:calc(50% - (var(--card-width) / 2)); width:var(--card-width); border-inline:1px dotted rgba(255,255,255,.2); mask-image:linear-gradient(to bottom,transparent 0%,#000 43.3274%); -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 43.3274%); }
.gallery.dragging,.gallery.dragging * { cursor:grabbing!important; }
.gallery-track { position:relative; width:100%; height:100%; }
.project-card { --peripheral-ui-opacity:var(--image-opacity,1); position:absolute; top:var(--head-height); left:0; width:var(--card-width); height:var(--card-height); margin:0; padding:0; cursor:inherit; will-change:transform; }
.card-head { position:absolute; top:-32px; left:50%; transform:translateX(-50%) scale(.5); height:24px; width:max-content; max-width:100%; display:flex; align-items:center; padding:5px 6px; background:rgba(216,207,191,.3); opacity:0; filter:grayscale(var(--desaturate,0%)) blur(var(--edge-blur,0px)); pointer-events:none; transition:opacity .2s,transform .4s cubic-bezier(.2,.9,.3,1.15),filter .25s; z-index:6; }
.card-title { font:12px/14px var(--mono); text-transform:uppercase; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-card:is(:hover,:focus-within,.info-open,.revealed,.touch-hover) .card-head { opacity:var(--peripheral-ui-opacity); transform:translateX(-50%) scale(1); }
.info-toggle { position:absolute; top:16px; left:16px; width:24px; height:24px; padding:0; display:grid; place-items:center; background:rgb(23,22,22); color:#d8cfbf; cursor:pointer; z-index:8; box-shadow:0 2px 0 #0004; filter:grayscale(var(--desaturate,0%)) blur(calc(.5px + var(--edge-blur,0px))); opacity:0; transform:scale(.5); pointer-events:none; transition:opacity .2s,transform .4s cubic-bezier(.2,.9,.3,1.15),filter .25s; }
.project-card:is(:hover,:focus-within,.info-open,.revealed,.touch-hover) .info-toggle { opacity:var(--peripheral-ui-opacity); transform:scale(1); pointer-events:auto; }
.info-toggle:hover,.info-toggle:active,.info-toggle[aria-expanded=true] { background:rgb(23,22,22); color:rgba(216,207,191,.6); transform:scale(1); }
.card-visual { position:absolute; inset:0; overflow:hidden; opacity:calc(.75 * var(--image-opacity,1)); mix-blend-mode:screen; filter:grayscale(var(--desaturate,0%)) blur(var(--edge-blur,0px)); }
.card-visual img { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.card-visual img[src$="/parser.webp"] { object-position:center top; }
.card-frame { position:absolute; inset:-2px; z-index:5; pointer-events:none; opacity:0; filter:grayscale(var(--desaturate,0%)) blur(var(--edge-blur,0px)); transition:opacity .25s,filter .25s; background:linear-gradient(#c7c4b4,#c7c4b4) left top/24px 1px no-repeat,linear-gradient(#c7c4b4,#c7c4b4) left top/1px 24px no-repeat,linear-gradient(#c7c4b4,#c7c4b4) right top/24px 1px no-repeat,linear-gradient(#c7c4b4,#c7c4b4) right top/1px 24px no-repeat,linear-gradient(#c7c4b4,#c7c4b4) left bottom/24px 1px no-repeat,linear-gradient(#c7c4b4,#c7c4b4) left bottom/1px 24px no-repeat,linear-gradient(#c7c4b4,#c7c4b4) right bottom/24px 1px no-repeat,linear-gradient(#c7c4b4,#c7c4b4) right bottom/1px 24px no-repeat; }
.project-card:is(:hover,:focus-within,.revealed,.touch-hover) .card-frame { opacity:calc(.6 * var(--peripheral-ui-opacity)); }
.project-info { position:absolute; inset:0; z-index:4; display:flex; align-items:flex-end; padding:16px; visibility:hidden; transition:visibility 0s .4s; pointer-events:none; }
/* Reference data state: a colour wash, then the separate blurred gradient. */
.project-info::before,.project-info::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s; }
.project-info::before { background:rgb(23,22,22); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }
.project-info::after { background:linear-gradient(180deg,rgba(23,22,22,.5),rgb(23,22,22)); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.info-content { position:relative; z-index:1; width:100%; filter:blur(.5px); }
.info-content>* { opacity:0; transform:translateY(24px); transition:opacity .3s,transform .3s; }
/* An opacity transition on their parent changes the backdrop root at opacity 1. */
.info-open .project-info { visibility:visible; transition-delay:0s; pointer-events:auto; }
.info-open .project-info::before { opacity:.49; }
.info-open .project-info::after { opacity:1; }
.info-open .info-content>* { opacity:1; transform:none; }
.info-open .info-content>:nth-child(1) { transition-delay:.1s; }
.info-open .info-content>:nth-child(2) { transition-delay:.2s; }
.info-open .info-content>:nth-child(3) { transition-delay:.3s; }
.info-open .info-content>:nth-child(4) { transition-delay:.7s; transform:none; }
.info-open .info-content>:nth-child(5) { transition-delay:.9s; transform:none; }
.info-row { display:flex; justify-content:space-between; gap:12px; font-size:clamp(10px,1.09vw,14px); line-height:1.3; margin:0 0 2px; text-transform:uppercase; color:#d8cfbf; }
.info-row>span:first-child { color:rgba(216,207,191,.6); }
.info-row>span:last-child { text-align:right; }
.info-content p { font-size:13px; line-height:1.4; margin:8px 0; padding:8px 0; border-block:1px solid rgba(216,207,191,.15); color:rgba(216,207,191,.6); }
.info-note { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:rgba(216,207,191,.3); }
.footer { flex:none; min-height:42px; padding:8px var(--pad); display:flex; justify-content:space-between; align-items:center; border-top:1px dotted var(--line); gap:20px; color:rgba(216,207,191,.33); font-size:clamp(10px,.8vw,16px); }
.footer>span { color:rgba(255,255,255,.33); }
.footer nav { display:flex; gap:16px; }
.footer nav button { padding:0; }
.crosshair { position:fixed; width:0; height:0; z-index:5; pointer-events:none; opacity:0; }
.crosshair.visible { opacity:1; }
.crosshair:before { content:''; position:absolute; left:-100vw; top:0; width:200vw; border-top:1px dotted #c8c6b438; }
.crosshair:after { content:''; position:absolute; top:-100vh; left:0; height:200vh; border-left:1px dotted #c8c6b438; }
#coordinates { position:absolute; left:10px; top:10px; font:9px var(--mono); white-space:nowrap; color:#a9a79a; }
#coordinates:before { content:''; position:absolute; width:7px; height:7px; border:1px solid #c8c6b466; border-radius:50%; left:-14px; top:-14px; }
.contact-links { display:grid; gap:2px; }
.contact-links a { border-bottom:1px dotted #77766a; padding:14px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; font:14px var(--mono); }
@keyframes ticker { to { transform:translateX(-50%); } }
@keyframes screen-grain { 0% { background-position:0 0; } 25% { background-position:37px -17px; } 50% { background-position:-23px 41px; } 75% { background-position:19px 13px; } }
/* Component values read from the reference: cream 60% → 30%, 400 ms spring-like frame. */
.fx-label { position:relative; display:inline-block; white-space:pre; }
.fx-scramble { display:none; position:absolute; inset:0; overflow:hidden; white-space:pre; pointer-events:none; }
.decoding>.fx-original { opacity:0; }
.decoding>.fx-scramble { display:block; }
.button { position:relative; transition:background .4s,color .4s,transform .16s,filter .16s; }
.primary { background:rgba(216,207,191,.6); color:#262523; box-shadow:none; }
.primary:hover,.primary:focus-visible,.primary.touch-hover { background:rgba(216,207,191,.3); color:#d8cfbf; }
.button-frame { position:absolute; inset:0; pointer-events:none; }
.button-frame i { position:absolute; width:9px; height:9px; border:0 solid #d8cfbf; transition:width .4s cubic-bezier(.2,.9,.3,1.15),height .4s cubic-bezier(.2,.9,.3,1.15),inset .4s; }
.button-frame i:nth-child(1) { top:0; left:0; border-top-width:1px; border-left-width:1px; }
.button-frame i:nth-child(2) { top:0; right:0; border-top-width:1px; border-right-width:1px; }
.button-frame i:nth-child(3) { bottom:0; left:0; border-bottom-width:1px; border-left-width:1px; }
.button-frame i:nth-child(4) { bottom:0; right:0; border-bottom-width:1px; border-right-width:1px; }
.primary:is(:hover,:focus-visible,.touch-hover) .button-frame i { width:calc(50% - 1px); height:calc(50% - 1px); }
.button:is(:hover,:focus-visible,.touch-hover) .button-frame i:nth-child(1) { top:1px; left:1px; }
.button:is(:hover,:focus-visible,.touch-hover) .button-frame i:nth-child(2) { top:1px; right:1px; }
.button:is(:hover,:focus-visible,.touch-hover) .button-frame i:nth-child(3) { bottom:1px; left:1px; }
.button:is(:hover,:focus-visible,.touch-hover) .button-frame i:nth-child(4) { bottom:1px; right:1px; }
.button.brackets:before,.button.brackets:after { content:none; }
.button.brackets { color:var(--muted); }
.button.brackets:is(:hover,:focus-visible,.touch-hover) { color:var(--text); }
.button.brackets .button-frame i { border-color:rgba(216,207,191,.3); }
.button.brackets:is(:hover,:focus-visible,.touch-hover) .button-frame { inset:1px; }
button:active,.button:active { transform:translateY(1px) scale(.985); filter:blur(.6px); }
.footer nav a,.footer nav button,.contact-links a { transition:color .2s,background .2s,filter .15s; }
.footer nav :is(a,button):active,.contact-links a:active { filter:blur(.7px); color:#fff3d8; }
@media(min-width:810px) and (min-height:580px) {
  html,body { height:100%; overflow:hidden; overscroll-behavior:none; }
  .page { height:100svh; min-height:0; }
}
@media(min-width:1600px) {
  .hero { padding-top:30px; } .bio { margin-top:26px; } h1 { margin-top:58px; margin-bottom:30px; }
  .button { padding:13px 24px; } .ticker { height:34px; } .ticker-track>span { line-height:33px; }
  .footer { min-height:60px; } .identity { gap:24px; }
}
@media(max-width:1000px) {
  .hero { gap:20px; } .identity { gap:11px; } .location { font-size:11px; } .name { font-size:13px; }
  .tiles { width:32%; } .tile { padding:5px; } .bio { font-size:13px; } h1 { font-size:25px; }
  .button { font-size:12px; padding:10px 12px; gap:10px; } .footer nav { gap:10px; }
}
@media(min-width:810px) and (max-height:700px) {
  .hero { padding-top:12px; padding-bottom:12px; } .bio { margin-top:12px; } h1 { margin-top:24px; margin-bottom:16px; font-size:25px; }
  .gallery { --card-height:34vh; } .button { padding-block:8px; } .tiles { max-width:360px; }
}
@media(max-width:809.98px) {
  .page { margin-inline:11px; padding-top:env(safe-area-inset-top, 0px); }
  /* Composite the whole mobile header in one soft layer so no control or tile escapes the scene effect. */
  .hero { display:block; padding:16px 20px 35px; filter:blur(.5px); opacity:.9; }
  .portrait { filter:grayscale(1) contrast(.9) sepia(.18); opacity:1; }
  .identity { flex-wrap:wrap; gap:12px; } .portrait-frame { width:48px; height:48px; } .name { font-size:14px; }
  .location { margin-left:auto; font-size:10px; } .bio { margin-top:16px; font-size:13px; } .bio br { display:none; }
  h1 { font-size:24px; line-height:1; margin:22px 0 23px; } .desktop-break { display:none; }
  .button { font-size:12px; gap:12px; padding:10px 12px; } .tiles { width:100%; margin-top:44px; }
  .tile { aspect-ratio:1; background:rgba(216,207,191,.05); } .tile-icon { width:34px; height:34px; } .symbol { font-size:37px; } .tile-label { font-size:8px; bottom:5px; filter:none; } .tile-label-top { top:5px; bottom:auto; }
  .tile--brand:is(:hover,:focus-visible,.touch-hover) { background:rgba(216,207,191,.05); }
  .work-controls { padding:0 20px 8px; gap:8px; font-size:9px; } .work-controls>span:first-child { margin-right:auto; } .progress { width:44px; }
  .work { overscroll-behavior:auto; }
  #previous,#next,.progress { display:none; }
  .gallery { height:auto; overflow:visible; touch-action:pan-y pinch-zoom; overscroll-behavior-y:auto; cursor:default; }
  .gallery::before { display:none; }
  .gallery-track { display:grid; gap:3px; height:auto; padding:0 6px 22px; }
  .project-card { position:relative; top:0; width:100%; height:auto; min-height:0; aspect-ratio:16 / 9; transform:none; will-change:auto; }
  .project-card[hidden] { display:none; }
  .card-head { top:16px; left:auto; right:16px; max-width:calc(100% - 76px); height:23px; transform:scale(.5); background:rgba(23,22,22,.84); }
  .project-card:is(:hover,:focus-within,.info-open,.revealed,.touch-hover) .card-head { transform:scale(1); }
  .card-title { font-size:11px; }
  .card-visual { opacity:.9; filter:none; }
  .info-toggle { width:35px; height:35px; filter:none; box-shadow:0 2.6px 0 #0004; }
  .info-toggle .ui-icon { width:24px; height:24px; }
  .info-open .info-toggle { width:31px; height:31px; }
  .info-open .info-toggle .ui-icon { width:21px; height:21px; }
  .project-info { padding:14px; } .info-content p { font-size:12px; } .info-row { font-size:clamp(11px,3.3vw,13px); line-height:1.2; } .info-note { font-size:clamp(10px,2.8vw,11px); }
  .footer { padding:17px 20px; display:grid; grid-template-columns:1fr auto; gap:18px 8px; font-size:9px; }
  .footer nav { grid-column:1/-1; justify-content:space-between; gap:15px; }
  .crosshair { display:none; } .grain { opacity:.06; } .screen-filter { box-shadow:none; }
}
@media(max-width:370px) {
  .location { margin-left:60px; margin-top:-4px; } .location span { display:inline; margin-left:7px; }
  .actions { gap:6px; } .button { padding-inline:9px; font-size:11px; } .button>span:not(.fx-label):not(.button-frame) { display:none; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; } .crosshair { display:none; } }

/* Safari softens glyphs when an ancestor uses CSS filter. Keep Chromium's reference
   treatment intact while Safari retains the same muted opacity with sharp copy. */
@media (min-width:810px) {
  .safari-readable-text .hero,
  .safari-readable-text.reading .page,
  .safari-readable-text .info-content { filter:none; }
  .safari-readable-text .tile:hover .tile-label,
  .safari-readable-text .tile:focus-visible .tile-label,
  .safari-readable-text .tile.touch-hover .tile-label { filter:none; }
}

/* Geometric icons never use platform emoji fonts, including iOS Safari. */
.ui-icon { display:inline-block; width:1em; height:1em; flex:none; vertical-align:-.12em; pointer-events:none; }
.ticker b { display:inline-flex; align-items:center; vertical-align:middle; }
.icon-button .ui-icon { width:17px; height:17px; }
@media(min-width:810px) { .info-toggle .ui-icon { width:16px; height:16px; } }
.play-mark { display:none; }
#motion[aria-pressed=true] .pause-mark { display:none; }
#motion[aria-pressed=true] .play-mark { display:block; }

/* Original reference fonts, palette, scene and grain texture. */
[hidden] { display:none!important; }
::selection { background:rgba(255,162,0,.3); color:#d8cfbf; }
#shader { position:absolute; top:0; left:0; width:100%; height:100svh; z-index:0; pointer-events:none; }
.shader-surface { width:100%; height:100%; }
.page { position:relative; z-index:1; }
body { font-size:13px; }
.name span { color:var(--muted); }
.bio { color:var(--muted); }
.bio em { color:var(--text); font-style:normal; }
h1 { font-size:24px; }
.button { font-size:14px; letter-spacing:-.03em; }
.location { font-size:13px; letter-spacing:0; }
.tile { color:#d8cfbf; }
.tile-label { font:10px/1.2 "Geist Pixel Variable Regular","JetBrains Mono Variable",monospace; letter-spacing:-.1px; color:rgba(216,207,191,.8); }
.ticker { display:block; width:100%; padding:0; text-align:left; font:400 10px/24px "Inter",sans-serif; color:rgba(216,207,191,.45); }
.ticker:hover,.ticker:active { color:rgba(216,207,191,.45); transform:none; filter:none; }
.ticker-track { animation-duration:90s; }
.ticker-group,.ticker-sequence { display:flex; flex:none; }
.ticker-item { display:block; flex:none; padding-right:0; margin-right:12px; }
.ticker-item::after {
  content:'';
  display:inline-block;
  width:12px;
  height:12px;
  margin-left:10px;
  vertical-align:-2px;
  background:currentColor;
  clip-path:polygon(50% 0%,58% 34%,85% 15%,66% 42%,100% 50%,66% 58%,85% 85%,58% 66%,50% 100%,42% 66%,15% 85%,34% 58%,0 50%,34% 42%,15% 15%,42% 34%);
}
.ticker-accent { color:rgba(216,207,191,.6); }
.ticker:hover .ticker-accent { color:rgba(216,207,191,.75); }
.reveal-word { display:inline-block; animation:word-in .4s cubic-bezier(.2,.8,.2,1) both; animation-delay:var(--word-delay); }
@keyframes word-in { from { opacity:0; filter:blur(10px); transform:translateY(10px); } to { opacity:1; filter:blur(0); transform:translateY(0); } }
html.reading,body.reading { height:auto; overflow:auto; overscroll-behavior-y:auto; }
.reading .page { height:auto; min-height:100svh; opacity:.9; filter:blur(.5px); }
.reading .ticker { display:none; }
.reading .footer { margin-top:auto; }
.text-page { width:min(516px,calc(100% - 48px)); align-self:center; padding:32px 0 80px; outline:none; animation:reading-in .4s both; }
.reading-nav { display:flex; justify-content:space-between; gap:16px; font:13px/1.2 var(--mono); margin-bottom:32px; color:rgba(216,207,191,.3); }
.reading-nav a,.reading-nav #reading-path { color:var(--muted); }
#reading-content section { padding-left:18px; margin-bottom:40px; }
#reading-content :is(h1,.section-title) { position:relative; font:400 14px/1.3 "JetBrains Mono Variable",monospace; margin:0 0 24px; letter-spacing:0; }
#reading-content :is(h1,.section-title)::before { content:''; width:5px; height:5px; background:var(--text); position:absolute; left:-18px; top:6px; }
#reading-content h2:not(.section-title) { font:400 14px/1.5 "Inter",sans-serif; margin:24px 0 12px; }
#reading-content p { font:300 13px/1.5 "Inter",sans-serif; color:var(--muted); margin:0 0 12px; }
#reading-content a { color:var(--text); text-decoration:underline; text-underline-offset:3px; }
#reading-content .contact-links a { text-decoration:none; }
#reading-content .fx-label { white-space:normal; }
@keyframes reading-in { from { opacity:0; filter:blur(5px); transform:translateY(10px); } to { opacity:1; filter:blur(0); transform:translateY(0); } }
@media(max-width:809.98px) {
  .location { font-size:10px; }
  .button { font-size:12px; }
  h1 { font-size:24px; }
  .tile-label { font-size:8px; color:var(--muted); }
  .text-page { width:calc(100% - 60px); padding-top:32px; }
  .reading-nav { flex-direction:column; align-items:flex-start; gap:16px; font-size:13px; margin-bottom:40px; }
  #reading-content section { padding-left:0; }
}
@media(max-width:370px) { .button { font-size:10px; } }
@media(max-width:809.98px) { .gallery-track { grid-template-columns:minmax(0,1fr); } .project-card { min-width:0; } }

/* Mobile reference: translucent ticker with a soft side fade over the scene. */
@media(max-width:809.98px) {
  .ticker {
    width:calc(100% - 8px);
    height:24px;
    margin-inline:4px;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    background:rgba(216,207,191,.15);
    opacity:.8;
    mix-blend-mode:plus-lighter;
    border:0;
    -webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 10%,#000 90%,transparent 98%);
    mask-image:linear-gradient(90deg,transparent 2%,#000 10%,#000 90%,transparent 98%);
  }
  .ticker-track>span { line-height:24px; }
}

/* Reference carousel mask: fade through the outer ~20% on both sides. */
@media(min-width:810px) {
  .gallery {
    /* Reserve space below the image and its outer frame before the footer. */
    --bottom-gap:clamp(24px,3vh,40px);
    height:calc(var(--card-height) + var(--head-height) + var(--bottom-gap));
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 19.5876%,#000 80%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 19.5876%,#000 80%,transparent 100%);
  }
}

/* Original reference alpha mask. Fit all four edges to responsive card proportions. */
.card-visual {
  -webkit-mask-image:url('/assets/scenes/image-mask.png');
  mask-image:url('/assets/scenes/image-mask.png');
  mask-mode:alpha;
  -webkit-mask-position:center top;
  mask-position:center top;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:cover;
  mask-size:cover;
}