/* =====================================================================
   SITE: shared design system used by every page.
   Colours come from tokens.css only. Page-specific styles live in
   home.css (landing page) and page.css (case studies, résumé, 404).
   ===================================================================== */

/* ---------- Base ---------- */
*,*:before,*:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px);background:var(--bg)}
body{margin:0;color:var(--text);font:400 1.0625rem/1.47 var(--font);letter-spacing:-.022em;-webkit-font-smoothing:antialiased;font-optical-sizing:auto;overflow-x:hidden}
body.locked{overflow:hidden}
h1,h2,h3,p,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;letter-spacing:inherit}
::selection{background:rgba(255,255,255,.24)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:500;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:10px}
.skip:focus{top:12px}
.container{padding:0 var(--gx)}
.eyebrow{font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.004em;color:var(--text-3)}

/* ---------- Scene: the environment behind everything ----------
   Drawn in CSS, no photo: a near-black room with one warm light from the
   upper left, one cool light low on the right, the faint curve of an
   architectural wall and a fine grain. It gives the glass something to
   refract without competing with the content. Strength lives in tokens.css
   (--scene-*). It drifts slightly with scroll (core.js sets --py). */
.scene{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--scene-base);pointer-events:none}
.scene>*{position:absolute}
.scene-light{border-radius:50%;filter:blur(20px);will-change:transform}
.scene-warm{width:110vmax;height:80vmax;left:-38vmax;top:-44vmax;background:radial-gradient(closest-side,var(--scene-warm),transparent);transform:translate3d(0,calc(var(--py,0%) * 3),0)}
.scene-cool{width:90vmax;height:70vmax;right:-40vmax;bottom:-42vmax;background:radial-gradient(closest-side,var(--scene-cool),transparent);transform:translate3d(0,calc(var(--py,0%) * -2),0)}
/* Architecture: two concentric arcs of a curved wall, lit on one edge */
.scene-arch{width:150vmax;height:150vmax;right:-96vmax;top:-58vmax;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045),inset 40px 20px 120px -60px rgba(233,183,127,.08);
  -webkit-mask:radial-gradient(closest-side,transparent 60%,#000 80%);mask:radial-gradient(closest-side,transparent 60%,#000 80%);
  transform:translate3d(0,calc(var(--py,0%) * 1.5),0) rotate(-8deg)}
.scene-arch:after{content:'';position:absolute;inset:9%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
/* Vertical fins where the warm light falls: very faint */
.scene-fins{inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 148px);
  -webkit-mask:radial-gradient(70% 55% at 12% 0%,#000,transparent 75%);mask:radial-gradient(70% 55% at 12% 0%,#000,transparent 75%)}
.scene-grain{inset:-50%;opacity:.07;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.scene-vignette{inset:0;background:radial-gradient(130% 90% at 50% 30%,transparent 55%,rgba(0,0,0,.55))}

/* ---------- Materials ----------
   .glass       a panel ("window"): milky frosted glass with a lit rim
   .liquid      a control; core.js adds real lensing at the rim (Chromium)
   .liquid.tint the primary action: solid ivory, dark text
   .glass-dark  smoked glass for contrast moments (card back)
   .surface     a quiet card on the scene: faint fill + hairline, no blur.
                Most content uses this or nothing; glass is the accent. */
.glass,.liquid{position:relative;isolation:isolate}
.glass{background:linear-gradient(160deg,var(--glass-hi),var(--glass-lo));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%) brightness(1.08);backdrop-filter:blur(var(--glass-blur)) saturate(150%) brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 80px -30px rgba(var(--shadow),.65),0 2px 8px rgba(var(--shadow),.18)}
.glass:before,.liquid:before{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(var(--la),rgba(255,255,255,.5),rgba(255,255,255,.1) 30%,rgba(255,255,255,.03) 50%,rgba(255,255,255,.08) 70%,rgba(255,255,255,.32));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.liquid{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));-webkit-backdrop-filter:blur(8px) saturate(160%) brightness(1.1);backdrop-filter:blur(8px) saturate(160%) brightness(1.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -8px 16px -12px rgba(255,255,255,.35),0 10px 24px -12px rgba(var(--shadow),.6)}
.liquid:after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--mx,var(--sx)) var(--my,-20%),rgba(255,255,255,.28),rgba(255,255,255,0) 60%);opacity:.6;transition:opacity .3s var(--ease)}
@media (hover:hover){.liquid:hover:after{opacity:1}}
.liquid.tint{color:var(--on-accent);background:linear-gradient(180deg,var(--accent),var(--accent-2));box-shadow:inset 0 1px 0 #fff,inset 0 -6px 14px -8px rgba(var(--shadow),.18),0 12px 30px -12px rgba(var(--shadow),.7),0 0 0 1px rgba(255,255,255,.4)}
.liquid.tint:before{background:linear-gradient(var(--la),#fff,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.8))}
.liquid.tint:after{background:radial-gradient(circle at var(--mx,var(--sx)) var(--my,-20%),rgba(255,255,255,.9),rgba(255,255,255,0) 60%)}
.surface{background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline),inset 0 1px 0 rgba(255,255,255,.04)}
.glass-dark{background:linear-gradient(160deg,rgba(28,28,31,.55),var(--smoked))}
.glass-heavy{background:linear-gradient(160deg,rgba(44,44,48,.78),rgba(19,19,21,.82));-webkit-backdrop-filter:blur(48px) saturate(160%);backdrop-filter:blur(48px) saturate(160%)}

/* ---------- Controls ---------- */
.pill{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 24px;border-radius:980px;border:0;font-size:1.0625rem;font-weight:600;letter-spacing:-.018em;cursor:pointer;white-space:nowrap;color:var(--text);transition:scale .45s var(--spring),box-shadow .3s var(--ease)}
.pill-sm{min-height:36px;padding:0 16px;font-size:.875rem;letter-spacing:-.01em}
.icon-btn{position:relative;width:44px;height:44px;flex:none;border-radius:50%;border:0;display:grid;place-items:center;color:var(--text);cursor:pointer;transition:scale .45s var(--spring),opacity .25s}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:disabled{opacity:.35;cursor:default}
@media (hover:hover){.pill:hover,.icon-btn:not(:disabled):hover{scale:1.04}}
/* Press is instant, on pointer-down */
.pill:active,.icon-btn:not(:disabled):active,.segmented button:active{scale:.95;transition:scale .1s ease-out}
.link-chevron{display:inline-flex;align-items:center;gap:4px;color:var(--text);font-weight:600}
.link-chevron:after{content:'';width:.4em;height:.4em;border-right:1.6px solid currentColor;border-top:1.6px solid currentColor;transform:rotate(45deg) translate(-1px,1px);transition:transform .3s var(--spring)}
@media (hover:hover){a.link-chevron:hover:after{transform:rotate(45deg) translate(1px,-1px)}}

/* Copy button: icon morphs to a check; a tooltip grows out of the button */
.copy-icon svg{grid-area:1/1;width:20px;height:20px;stroke-width:1.9;transition:scale .45s var(--spring),opacity .2s var(--ease)}
.copy-icon .i-check{scale:.4;opacity:0;stroke-width:2.4}
.copy-icon.done .i-copy{scale:.4;opacity:0}
.copy-icon.done .i-check{scale:1;opacity:1}
.copy-tip{position:absolute;bottom:calc(100% + 10px);left:50%;translate:-50% 0;padding:6px 12px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:.8125rem;font-weight:600;white-space:nowrap;pointer-events:none;transform-origin:50% 130%;scale:.6;opacity:0;transition:scale .4s var(--spring),opacity .2s var(--ease)}
.copy-icon.done .copy-tip{scale:1;opacity:1}

/* ---------- Nav: floating liquid-glass capsule ---------- */
.nav{position:sticky;top:0;z-index:100;padding:14px var(--gx) 0;pointer-events:none}
.nav-bar{pointer-events:auto;height:var(--nav-h);display:flex;align-items:center;gap:4px;padding:0 10px 0 22px;border-radius:999px;transition:background-color .35s var(--ease)}
.nav .nav-bar{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 30px -18px rgba(var(--shadow),.6)}
.nav.scrolled .nav-bar{background-color:rgba(16,16,18,.45)}
.logo{font-size:1.375rem;font-weight:700;letter-spacing:-.04em;margin-right:auto;min-height:44px;display:flex;align-items:center}
.logo span{color:var(--text-4)}
.nav-links{position:relative;display:flex;margin-right:8px}
.nav-links a{position:relative;z-index:1;display:flex;align-items:center;min-height:44px;padding:0 13px;font-size:.875rem;font-weight:500;letter-spacing:-.01em;color:var(--text-2);border-radius:999px;transition:color .2s}
.nav-links a.active{color:var(--text)}
@media (hover:hover){.nav-links a:hover{color:var(--text)}}
.nav-glow{position:absolute;z-index:0;top:50%;left:0;height:36px;margin-top:-18px;width:0;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.08);opacity:0;transition:opacity .25s var(--ease);will-change:transform,width}
.menu-btn{display:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.menu-btn i{display:block;width:17px;height:1.6px;border-radius:1px;background:var(--text);transition:transform .35s var(--spring)}
.menu-btn[aria-expanded="true"] i:first-child{transform:translateY(3.8px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:last-child{transform:translateY(-3.8px) rotate(-45deg)}
.menu{pointer-events:auto;margin-top:10px;margin-left:auto;width:min(100%,320px);padding:8px;border-radius:26px;display:flex;flex-direction:column;transform-origin:top right;animation:materialize .45s var(--spring)}
.menu[hidden]{display:none}
.menu a{font-size:1.25rem;font-weight:600;letter-spacing:-.01em;padding:14px 16px;border-radius:18px}
.menu a:active{background:var(--tile-hover)}
@keyframes materialize{from{opacity:0;transform:scale(.9);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}
@media (max-width:833px){.nav-links{display:none}.menu-btn{display:flex}.nav-bar{padding-left:18px}}

/* ---------- Photo slots ----------
   <figure class="photo" data-photo="portrait">: core.js loads the file
   named in config.js. While the file is missing, a placeholder shows on
   localhost only; on the live site an empty slot hides itself. */
.photo{position:relative;margin:0;overflow:hidden;background:var(--tile);isolation:isolate}
.photo img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease),scale 1s var(--spring)}
.photo.loaded img{opacity:1}
.photo-empty{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;text-align:center;border:1.5px dashed rgba(255,255,255,.3);border-radius:inherit;color:var(--text-3);font-size:.8125rem;line-height:1.3}
.photo-empty svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.photo-empty b{color:var(--text);font-size:.875rem}
.photo-empty code{font:500 .75rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-2);word-break:break-all}
.photo.empty .photo-empty{display:flex}
.photo.empty.compact .photo-empty span,.photo.empty.compact .photo-empty code{display:none}
.photo.hidden{display:none}

/* ---------- Section rhythm (home + work) ----------
   A section = small numbered label, big headline, quieter lead, then
   space, then content. Most sections sit directly on the scene. */
.section{padding-top:var(--section)}
.sec-label{display:flex;align-items:center;gap:12px;font-size:var(--fs-meta);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.sec-label b{font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums}
.sec-label:after{content:'';flex:0 0 40px;height:1px;background:var(--line)}
.sec-title{font-size:var(--fs-h2);line-height:1.02;letter-spacing:-.028em;font-weight:700;margin-top:20px;max-width:16ch;text-wrap:balance}
.sec-lead{max-width:600px;margin-top:24px;font-size:var(--fs-lead);line-height:1.45;letter-spacing:-.005em;color:var(--text-3);text-wrap:pretty}
.sec-head{margin-bottom:var(--gap-lg)}

/* ---------- Case card (homepage + work page, rendered by core.js) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.card{position:relative;display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;transform-style:preserve-3d;will-change:transform;transition:background-color .35s var(--ease),box-shadow .45s var(--ease),scale .3s var(--spring)}
.card:after{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;background:radial-gradient(480px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.1),rgba(255,255,255,0) 55%);opacity:0;transition:opacity .35s var(--ease)}
.card:active{scale:.98;transition:scale .1s ease-out}
.card[hidden]{display:none}
/* Entrance uses `translate` so it never fights the tilt, which owns `transform` */
.js .card.reveal{transform:none;translate:0 40px;transition:opacity .9s var(--ease),translate 1.1s var(--spring),filter .9s var(--ease),background-color .35s var(--ease),box-shadow .45s var(--ease),scale .3s var(--spring);transition-delay:calc(var(--i,0) * 90ms)}
.js .card.reveal.in{translate:0 0}
.card-media{aspect-ratio:5/4;margin:8px 8px 0;border-radius:calc(var(--radius) - 8px);background:var(--tile);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;filter:var(--media-filter);transition:scale .9s var(--spring)}
@media (hover:hover){
  .card:hover,.card:focus-visible{background:var(--surface-hover);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 40px 80px -40px rgba(var(--shadow),.9)}
  .card:hover:after{opacity:1}
  .card:hover .card-media img,.card:focus-visible .card-media img{scale:1.045}
}
.card-body{flex:1;display:flex;flex-direction:column;padding:clamp(22px,2.4vw,30px) clamp(20px,2.2vw,28px) clamp(20px,2.2vw,26px)}
.card-meta{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-meta);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.card-meta span+span{font-weight:500;letter-spacing:.02em;text-transform:none}
.card h3{font-size:var(--fs-h3);line-height:1.1;letter-spacing:-.02em;font-weight:700;margin-top:14px;text-wrap:balance}
.card-problem{font-size:1.0625rem;line-height:1.42;color:var(--text-2);margin-top:14px;text-wrap:pretty}
.card-take{font-size:.9375rem;line-height:1.45;color:var(--text-3);margin-top:10px;padding-left:14px;border-left:1px solid var(--line)}
.card-foot{margin-top:auto;padding-top:28px;font-size:.9375rem}

/* ---------- Segmented control (filters) ---------- */
.segmented{position:relative;display:inline-flex;padding:4px;border-radius:999px;max-width:100%;overflow-x:auto;scrollbar-width:none;background:rgba(var(--shadow),.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 2px rgba(var(--shadow),.3)}
.segmented::-webkit-scrollbar{display:none}
.segmented button{position:relative;z-index:1;flex:none;min-height:40px;padding:0 18px;border:0;border-radius:999px;background:transparent;font-size:.9375rem;font-weight:500;letter-spacing:-.012em;cursor:pointer;color:var(--text-2);transition:color .25s var(--ease)}
@media (hover:hover){.segmented button:hover{color:var(--text)}}
.segmented button[aria-pressed="true"]{color:var(--on-accent);font-weight:600}
.seg-thumb{position:absolute;z-index:0;top:4px;left:0;height:40px;border-radius:999px;pointer-events:none;background:linear-gradient(180deg,var(--accent),var(--accent-2));box-shadow:inset 0 1px 0 #fff,0 6px 16px -6px rgba(var(--shadow),.6);will-change:transform,width}

/* ---------- Contact section (rendered on every page from config.js) ---------- */
.contact{padding:var(--section) 0 clamp(64px,8vw,120px);text-align:center}
.contact-panel{display:flex;flex-direction:column;align-items:center;max-width:920px;margin:0 auto;padding:clamp(56px,8vw,112px) clamp(20px,5vw,72px);border-radius:calc(var(--radius) + 8px)}
.contact .sec-label{justify-content:center}
.contact .sec-label:after{display:none}
.contact-avatar{width:76px;height:76px;border-radius:50%;margin-bottom:18px;box-shadow:0 0 0 3px rgba(255,255,255,.22),0 10px 24px -10px rgba(var(--shadow),.6)}
.contact-panel h2{font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.022em;font-weight:700;margin-top:12px}
.email-line{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 14px;margin-top:clamp(32px,4vw,48px)}
.email{font-size:clamp(1.3125rem,1.1rem + 1vw,1.75rem);font-weight:600;letter-spacing:.004em;color:var(--text)}
@media (hover:hover){.email:hover{text-decoration:underline;text-underline-offset:4px}}
.contact-cta{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}
.contact-cta .pill{min-width:150px}
.reply{margin-top:32px;font-size:.9375rem;color:var(--text-3)}

/* ---------- Footer ---------- */
.footer{padding:8px 0 calc(28px + env(safe-area-inset-bottom));font-size:.8125rem;letter-spacing:-.01em;color:var(--text-3)}
.footer p{padding-bottom:12px;border-bottom:1px solid var(--line)}
.footer-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-top:12px}
.footer a{color:var(--text-2)}
@media (hover:hover){.footer a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}}

/* ---------- Contact sheet / popover ---------- */
.scrim{position:fixed;inset:0;z-index:200;background:rgba(var(--shadow),.5);opacity:0}
.scrim[hidden]{display:none}
.sheet{position:fixed;z-index:210;left:0;right:0;bottom:0;padding:8px 16px calc(16px + env(safe-area-inset-bottom));border-radius:30px 30px 0 0;touch-action:none;will-change:transform}
.sheet[hidden]{display:none}
.sheet-grabber{width:38px;height:5px;border-radius:3px;background:rgba(255,255,255,.3);margin:0 auto 12px}
.sheet-title{font-size:1.0625rem;font-weight:700;text-align:center;margin-bottom:14px}
.sheet-group{background:var(--tile);border-radius:18px;overflow:hidden;margin-bottom:12px}
.sheet-group>a,.sheet-row{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:54px;padding:0 18px;border:0;background:transparent;font-size:1.0625rem;font-weight:500;text-align:left;cursor:pointer;transition:background-color .1s}
.sheet-group>*+*{box-shadow:inset 0 1px 0 var(--line)}
@media (hover:hover){.sheet-group>a:hover{background:rgba(255,255,255,.05)}}
.sheet-group>a:active{background:var(--tile-hover)}
.sheet-group small{font-size:.9375rem;font-weight:400;color:var(--text-3)}
/* Email row: the address is a mailto link, with its copy button right beside it */
.sheet-row{cursor:default;padding-right:8px}
.sheet-row a{display:flex;flex-direction:column;min-width:0;padding:8px 0}
.sheet-row a small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover){.sheet-row a:hover span{text-decoration:underline;text-underline-offset:3px}}
.sheet-row .copy-icon{width:40px;height:40px;background:var(--tile-hover);box-shadow:none}
.sheet-row .copy-icon .copy-tip{bottom:auto;top:50%;left:auto;right:calc(100% + 8px);translate:0 -50%;transform-origin:130% 50%}
.sheet-close{width:100%;min-height:54px;border:0;border-radius:18px;background:var(--tile-hover);font-size:1.0625rem;font-weight:600;color:var(--text);cursor:pointer}
.sheet.popover{left:auto;bottom:auto;width:352px;border-radius:26px;padding:14px 12px 12px;touch-action:auto}
.sheet.popover .sheet-grabber,.sheet.popover .sheet-close{display:none}
.sheet.popover .sheet-group:last-of-type{margin-bottom:0}

/* ---------- Reveals: materialize (blur + scale + rise), staggered per batch ---------- */
.js .reveal{opacity:0;transform:translateY(32px) scale(.99);filter:blur(10px);transition:opacity .9s var(--ease),transform 1.1s var(--spring),filter .9s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js .reveal.in{opacity:1;transform:none;filter:none}

@media (max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .cards{grid-template-columns:1fr}
  .contact-cta{flex-direction:column;width:100%}
  .contact-cta .pill{width:min(100%,300px)}
}

/* ---------- Touch screens (phones, tablets) ----------
   Everything here is inside (hover:none), so desktop never sees it. */
@media (hover:none){
  /* Taps fire straight away: no waiting to see if it's a double-tap zoom */
  html{touch-action:manipulation}
  /* Tap highlight is off site-wide, so text links dim briefly when pressed */
  .footer a:active,.email:active,.sheet-group>a:active,.case-meta a:active,.link-chevron:active,.res-contact a:active{opacity:.6}
  /* Same look, much less GPU work while scrolling */
  .scene-light{filter:none}
  .scene-grain{mix-blend-mode:normal;opacity:.035}
  .js .reveal{filter:none}
}

/* ---------- Accessibility preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{transform:none;filter:none;transition:opacity .3s ease}
  .liquid:after{display:none}
  .menu{animation:none}
  .card:after{display:none}
}
@media (prefers-reduced-transparency:reduce){
  .glass,.liquid,.glass-heavy{background:var(--graphite)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .surface{background:var(--charcoal)}
  .liquid.tint{background:var(--accent)!important}
  .seg-thumb{background:var(--accent)!important}
}
@media (prefers-contrast:more){
  .glass,.liquid,.glass-heavy{background:var(--onyx)!important;box-shadow:0 0 0 1.5px var(--text)!important}
  .liquid.tint{background:var(--accent)!important}
  .surface{box-shadow:0 0 0 1px var(--text-3)}
  .card-problem,.card-take,.sec-lead{color:var(--text-2)}
}