/* =====================================================================
   space.css  |  every colour, font and size for the immersive page
   Edit the values in :root first. Most visual tweaks live there.
   ===================================================================== */
/* Fonts, stored in the fonts folder (Latin letters only). Geist and Geist Mono are "variable" fonts: one file covers every weight from 100 to 900. */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-var.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-mono-var.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-400.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-400-italic.woff2) format('woff2')}
:root{
  /* colours */
  --ground:#12100E;      /* page background */
  --tile:#1B1815;        /* tile surface */
  --tile-aimed:#221E1A;  /* tile surface when the crosshair is on it */
  --text:#EDE6DB;
  --muted:#A89F92;
  --brass:#C9A57B;       /* the one accent colour */
  --paper:#EEE8DE;       /* flat sheets */
  --paper-2:#F6F2EA;
  --ink:#1A1714;
  --ink-2:#2A2622;
  --umber:#7A5632;
  --sheet-muted:#6B6257;
  /* fonts */
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* 3D camera */
  --P:800px;             /* perspective distance: smaller = stronger 3D */
  --aim-y:40%;           /* where the crosshair sits (JS sets this on load and resize) */
  --k:1;                 /* zoom for big screens (JS sets this) */
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--ground);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body{overflow:hidden;overscroll-behavior:none}
button,input{font:inherit;color:inherit}
a{color:inherit}
.serif{font-family:var(--serif);font-weight:400}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.12em}
.umber{color:var(--umber)}
.nojs{position:relative;z-index:99;max-width:560px;margin:0 auto;padding:48px 24px;font-size:16px;line-height:1.55;color:var(--text)}
.nojs h1{font-family:var(--serif);font-weight:400;font-size:44px;line-height:1;margin-bottom:14px}
.nojs p,.nojs ul{margin-bottom:16px}.nojs ul{padding-left:20px}.nojs a{color:var(--brass)}
html.js .nojs{display:none}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--muted)}
.eyebrow--umber{color:var(--umber)}
.eyebrow--muted{color:var(--sheet-muted);display:block;font-weight:400;margin:24px 0 6px}

/* ============================ LOADER ============================ */
#loader{--cycle:2400ms;position:fixed;inset:0;z-index:50;background:var(--ground);display:none;flex-direction:column;align-items:center;justify-content:center;transition:opacity .5s ease}
html.js #loader{display:flex}
#loader.leaving{opacity:0;pointer-events:none}
.ld-mark{position:absolute;top:calc(30px + env(safe-area-inset-top));left:0;right:0;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--muted)}
.ld-group{display:flex;flex-direction:column;align-items:center;gap:26px;will-change:transform}
.ld-stage{position:relative;width:140px;height:140px}
/* four icons stacked in the same spot, each visible for its own quarter of the cycle */
.dev{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0;
  animation:devswap var(--cycle) linear infinite;animation-delay:calc(var(--i) * var(--cycle) / 4)}
.dev__ico{width:96px;height:96px;border-radius:26px;display:grid;place-items:center;border:1px solid var(--brass);color:var(--brass);background:rgba(201,165,123,.10)}
.dev__cap{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
@keyframes devswap{
  0%{opacity:0;transform:scale(.9)}
  4%,21%{opacity:1;transform:scale(1)}
  25%,100%{opacity:0;transform:scale(1.06)}
}
.ld-bar{width:168px;height:1px;background:rgba(237,230,219,.16);position:relative;overflow:hidden}
.ld-bar i{position:absolute;inset:0;background:var(--brass);transform-origin:0 50%;transform:scaleX(0)}
.ld-num{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--muted);margin-top:-10px}
.ld-tag{position:absolute;bottom:calc(40px + env(safe-area-inset-bottom));left:24px;right:24px;margin:0 auto;max-width:520px;text-align:center;font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.35;color:var(--muted);opacity:0;transition:opacity .8s ease}
#loader.long .ld-tag{opacity:1}

/* ============================ THE SPACE ============================ */
#stage{position:fixed;inset:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  background:radial-gradient(120% 70% at 50% 45%,#1a1613 0%,var(--ground) 70%);opacity:0;transition:opacity .9s ease}
html.ready #stage{opacity:1}
#scene{position:absolute;inset:0;overflow:hidden;overflow:clip;perspective:var(--P);perspective-origin:50% var(--aim-y);transform:scale(var(--k));transform-origin:50% var(--aim-y)}
#rig{position:absolute;left:50%;top:var(--aim-y);width:0;height:0;transform-style:preserve-3d;will-change:transform}

/* every tile sits on an invisible sphere around the viewer.
   --az/--el place it, translateZ(-R) pushes it out to the sphere surface */
.tile{--R:800px;position:absolute;left:0;top:0;width:var(--w);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  background:none;border:0;text-align:left;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;
  transform:rotateY(calc(var(--az) * -1)) rotateX(calc(var(--el) * -1)) translateZ(calc(var(--R) * -1));transform-style:preserve-3d}
.face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:16px;border-radius:22px;
  background:var(--tile);border:1px solid rgba(237,230,219,.10);box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(237,230,219,.05);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .38s var(--ease),background-color .3s,border-color .3s}
.tile.is-aimed .face,.tile:focus-visible .face{transform:translateZ(36px) scale(var(--grow,1.04));background:var(--tile-aimed);border-color:var(--brass)}
.tile:focus-visible .face{box-shadow:0 0 0 2px var(--ground),0 0 0 4px var(--brass),0 18px 40px rgba(0,0,0,.45)}
.tile--folder{--grow:1.28}
.tile--folder .face{padding:12px}
.tile--folder .eyebrow{font-size:10px}
.fold-ico{color:var(--brass)}
.t-folder{font-size:23px;line-height:1;letter-spacing:-.01em}
.t-name{display:block;font-size:30px;line-height:1;letter-spacing:-.01em}
.t-sub{display:block;margin-top:6px;font-size:13px;line-height:18px;color:var(--muted)}
.about-row{display:flex;align-items:center;gap:14px}
.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:none;border:1px solid rgba(237,230,219,.18)}
.about-txt .t-sub{margin-top:5px}
.dust{position:absolute;left:-1.5px;top:-1.5px;width:3px;height:3px;border-radius:50%;background:var(--text);pointer-events:none}

/* crosshair = the cursor on phones */
#cross{position:fixed;left:50%;top:var(--aim-y);width:40px;height:40px;margin:-20px 0 0 -20px;pointer-events:none;z-index:5;opacity:0;transition:opacity .6s ease .3s}
html.ready #cross{opacity:1}
html.desk #cross{display:none}
html.desk #motion{display:none}
html.mouse #stage{cursor:grab}
html.dragging,html.dragging *{cursor:grabbing!important}
html.sheet-open #cross{opacity:.35;transition-delay:0s}
#cross svg{display:block;transition:transform .28s var(--ease)}
#cross .ring{fill:none;stroke:var(--text);stroke-opacity:.8;stroke-width:1.5;transition:stroke .25s}
#cross .dot{fill:var(--text);fill-opacity:.8;transition:fill .25s}
#cross.on svg{transform:scale(1.7)}
#cross.on .ring{stroke:var(--brass);stroke-opacity:1}
#cross.on .dot{fill:var(--brass);fill-opacity:1}
#chip{position:absolute;left:50%;bottom:calc(100% + 38px);transform:translate(-50%,6px);white-space:nowrap;padding:7px 12px;border-radius:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--brass);background:rgba(18,16,14,.86);border:1px solid var(--brass);opacity:0;transition:opacity .2s,transform .25s var(--ease)}
#cross.on #chip{opacity:1;transform:translate(-50%,0)}

/* ============================ CONTROLS ============================ */
#hud{position:fixed;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom));z-index:20;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;
  opacity:0;transition:opacity .6s ease .4s}
html.ready #hud{opacity:1}
html.sheet-open #hud{opacity:0;visibility:hidden;transition-delay:0s}
#hud>*{pointer-events:auto}
.info{display:flex;align-items:center;gap:12px;width:min(358px,calc(100% - 32px));padding:12px 14px;border-radius:18px;background:var(--tile);border:1px solid rgba(237,230,219,.14);
  transition:opacity .4s ease,transform .4s var(--ease)}
.info:not(.is-on){opacity:0;transform:translateY(8px)}
#hud>.info:not(.is-on),#hud>.info:not(.is-on) *{pointer-events:none}   /* a hidden tip must never block clicks (the #hud rule above would win otherwise) */
.info__i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--brass);color:var(--brass);font-family:var(--serif);font-style:italic;font-size:16px}
.info__txt{display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:18px;color:var(--text)}
.info__txt b{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.16em;color:var(--brass)}
.bar{position:relative;display:flex;align-items:center;gap:2px;height:56px;padding:0 6px;border-radius:28px;background:var(--tile);border:1px solid rgba(237,230,219,.14)}
.bar__btn{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 14px;border-radius:22px;border:0;background:none;color:var(--text);font-size:14px;text-decoration:none;cursor:pointer}
.bar__btn+.bar__i{margin-left:4px}
.bar__i{width:44px;height:44px;border-radius:50%;border:1px solid rgba(237,230,219,.25);background:none;cursor:pointer;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--text)}
.bar__i[aria-expanded="true"]{border-color:var(--brass);color:var(--brass)}
.sw{position:relative;width:34px;height:20px;border-radius:10px;background:rgba(237,230,219,.18);transition:background .25s}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--text);transition:transform .25s var(--ease)}
[aria-checked="true"]>.sw{background:var(--brass)}
[aria-checked="true"]>.sw::after{transform:translateX(14px);background:var(--ground)}
.bar button:focus-visible,.bar a:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ============================ SHEETS ============================ */
#scrim{position:fixed;inset:0;z-index:30;background:rgba(10,8,7,.55);opacity:0;pointer-events:none;transition:opacity .35s ease}
html.sheet-open #scrim{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;top:76px;z-index:40;display:flex;flex-direction:column;padding:0 24px calc(20px + env(safe-area-inset-bottom));
  background:var(--paper);color:var(--ink);border-radius:28px 28px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.5);
  transform:translateY(105%);visibility:hidden;transition:transform .42s var(--ease),visibility 0s .42s}
.sheet.open{transform:none;visibility:visible;transition:transform .42s var(--ease),visibility 0s 0s}
@media (min-width:700px){.sheet{left:50%;right:auto;width:560px;margin-left:-280px}}
.sheet__grip{padding:12px 0 6px;cursor:grab;touch-action:none}
.sheet__handle{display:block;width:40px;height:4px;border-radius:2px;background:rgba(26,23,20,.25);margin:0 auto}
.sheet__head{display:flex;justify-content:space-between;align-items:center}
.sheet__head .eyebrow{color:var(--umber)}
.sheet__close{width:44px;height:44px;border-radius:50%;border:1px solid rgba(26,23,20,.2);background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.sheet__close:focus-visible{outline:2px solid var(--umber);outline-offset:2px}
.sheet__body{position:relative;flex:1;min-height:0}
.sheet__scroll:focus-visible{outline:2px solid var(--umber);outline-offset:-4px}
.sheet__scroll{position:absolute;inset:0;overflow-y:auto;padding-bottom:40px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheet__fade{position:absolute;left:0;right:0;bottom:0;height:44px;background:linear-gradient(to bottom,rgba(238,232,222,0),var(--paper));pointer-events:none}
.sheet__actions{display:flex;gap:10px;padding-top:10px}
.btn{flex:1;display:grid;place-items:center;height:52px;border-radius:26px;font-size:15px;font-weight:500;text-decoration:none;cursor:pointer}
.btn--solid{background:var(--ink);color:var(--paper);border:0}
.btn--line{border:1px solid rgba(26,23,20,.3);color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--umber);outline-offset:2px}

.h1{font-family:var(--serif);font-weight:400;font-size:52px;line-height:.98;letter-spacing:-.01em;color:var(--ink);margin:4px 0 18px}
.h1--md{font-size:38px;margin:0 0 6px}
.h1--sm{font-size:36px;line-height:1;margin:0 0 4px}
.about-head{display:flex;align-items:center;gap:16px;margin:2px 0 18px}
.about-photo{flex:none;width:92px;height:92px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:1px solid rgba(26,23,20,.15)}
.prose{display:flex;flex-direction:column;gap:14px;font-size:15px;line-height:23px;color:var(--ink-2)}
.prose strong{font-weight:600}
.prose--lead{margin:10px 0 0}
.rule{border:0;height:1px;background:rgba(26,23,20,.14);margin:26px 0 20px}
.list{list-style:none;border-bottom:1px solid rgba(26,23,20,.12)}
.list li{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-top:1px solid rgba(26,23,20,.12)}
.li-t{font-size:22px;line-height:1.1;color:var(--ink)}
.li-d{font-size:14px;line-height:21px;color:var(--ink-2)}
.edu{display:flex;flex-direction:column;gap:12px;margin-top:10px;font-size:14px;line-height:21px;color:var(--ink-2)}
.edu strong{font-weight:600}
.chips-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips-row span{padding:7px 12px;border-radius:16px;border:1px solid rgba(26,23,20,.25);font-size:13px;color:var(--ink)}
.ab-headline{font-size:24px;line-height:1.18;margin:4px 0 14px;color:var(--ink)}
.ab-pillars{display:flex;flex-direction:column;gap:12px;margin:20px 0}
.pillar{padding:14px 16px;border:1px solid rgba(26,23,20,.18);border-radius:14px}
.pillar__n{font-size:11px;letter-spacing:.14em;color:var(--umber)}
.pillar__t{font-weight:400;font-size:22px;line-height:1.1;margin:4px 0 6px}
.pillar p{font-size:14.5px;line-height:22px;margin:0}
.ab-metrics{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.metric{display:flex;flex-direction:column;gap:4px}
.metric__n{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1;color:var(--ink)}
.metric__d{font-size:13px;line-height:19px;color:var(--ink-2)}
.ab-method ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 18px}
.ab-method li{padding:7px 12px;border-radius:16px;border:1px solid rgba(26,23,20,.25);font-size:13px}
.ab-how ul{margin:10px 0 18px 18px;font-size:14.5px;line-height:22px}
.ab-beyond p{font-size:14.5px;line-height:22px;margin:10px 0 0}
.skill-group{margin-top:14px}
.sk-h{font-size:11px;letter-spacing:.14em;font-weight:400;margin:0}
.edu-certs{display:flex;flex-direction:column;gap:4px;margin-top:14px;font-size:14px;line-height:21px;color:var(--ink-2)}
.ph{display:flex;align-items:flex-end;padding:14px;border-radius:18px;border:1px dashed rgba(26,23,20,.3);background:repeating-linear-gradient(135deg,rgba(26,23,20,.07) 0 1px,transparent 1px 10px);font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--sheet-muted)}
.ph--hero{height:170px;margin-bottom:12px}
.ph--card{height:120px;margin-bottom:12px}
.ph--short{height:56px;align-items:center;margin-top:14px}
.ph--sq{flex:none;width:76px;height:76px;border-radius:14px}
.proj-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:12px}
.proj-t{font-size:34px;line-height:1;color:var(--ink)}
.proj-t2{font-size:26px;line-height:1;color:var(--ink)}
.dots{list-style:none;display:flex;flex-direction:column;gap:7px;font-size:14px;line-height:20px;color:var(--ink-2)}
.dots li{display:flex;gap:10px;align-items:center}
.dots li::before{content:"";flex:none;width:6px;height:6px;border-radius:3px;background:var(--umber)}
.proj-row{display:flex;gap:14px;align-items:center}
.proj-row__txt{display:flex;flex-direction:column;gap:4px}

/* ask / chat */
.ask{flex:1;min-height:0;display:flex;flex-direction:column}
.muted-s{color:var(--sheet-muted);font-size:10px;line-height:15px;margin-bottom:14px}
.thread{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-bottom:8px;overscroll-behavior:contain}
.msg{max-width:88%;padding:12px 15px;font-size:14px;line-height:21px;overflow-wrap:anywhere}
.msg--me{align-self:flex-end;max-width:78%;border-radius:18px 18px 4px 18px;background:var(--ink);color:var(--paper)}
.msg--bot{align-self:flex-start;border-radius:18px 18px 18px 4px;background:var(--paper-2);border:1px solid rgba(26,23,20,.14);color:var(--ink-2)}
.msg__go{display:inline;border:0;background:none;padding:0;color:var(--umber);text-decoration:underline;cursor:pointer;font-size:inherit}
.msg--typing{letter-spacing:.3em;color:var(--sheet-muted)}
.chips-q{display:flex;gap:8px;overflow-x:auto;padding:6px 0 10px;scrollbar-width:none}
.chips-q::-webkit-scrollbar{display:none}
.chips-q button{flex:none;min-height:44px;padding:0 16px;border-radius:22px;border:1px solid rgba(26,23,20,.25);background:none;color:var(--ink);font-size:14px;white-space:nowrap;cursor:pointer}
.mail{align-self:center;padding:10px 14px;border:0;background:none;font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mail:hover{color:var(--umber)}
.ask-form{display:flex;align-items:center;height:56px;margin-top:6px;padding:0 6px 0 20px;border-radius:28px;border:1px solid rgba(26,23,20,.3);background:var(--paper-2)}
.ask-form input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:16px;color:var(--ink)}
.ask-form input::placeholder{color:var(--sheet-muted)}
.ask-form button{height:44px;padding:0 22px;border-radius:22px;border:0;background:var(--ink);color:var(--paper);font-size:15px;font-weight:500;cursor:pointer}
.ask-form:focus-within{border-color:var(--umber)}

@media (prefers-reduced-motion:reduce){
  .dev{animation:none}
  .dev:first-child{opacity:1}
  *{transition-duration:.01ms!important}
}

/* project lists inside the folder sheets */
.proj__count{margin:-6px 0 14px}
.projs{border-bottom:1px solid rgba(26,23,20,.12)}
.proj{border-top:1px solid rgba(26,23,20,.12)}
.proj summary{list-style:none;display:flex;flex-direction:column;gap:6px;padding:16px 36px 16px 0;position:relative;cursor:pointer;min-height:44px}
.proj summary::-webkit-details-marker{display:none}
.proj summary::after{content:"";position:absolute;right:6px;top:24px;width:8px;height:8px;border-right:1.5px solid var(--umber);border-bottom:1.5px solid var(--umber);transform:rotate(45deg);transition:transform .25s var(--ease)}
.proj[open] summary::after{transform:rotate(-135deg);top:28px}
.proj summary:focus-visible{outline:2px solid var(--umber);outline-offset:2px}
.proj__t{font-size:23px;line-height:1.12;color:var(--ink)}
.proj__body{padding:0 0 20px;font-size:14px;line-height:22px;color:var(--ink-2)}
.proj__meta{margin-bottom:6px}
.proj__h{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.16em;color:var(--sheet-muted);margin:16px 0 6px}
.proj__body p+p{margin-top:8px}
.proj__body ul{padding-left:18px}
.proj__body a{color:var(--umber)}

/* contact sheet */
.cform{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.cform label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sheet-muted)}
.cform input,.cform textarea{font-family:var(--sans);font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink);padding:13px 16px;border-radius:16px;border:1px solid rgba(26,23,20,.3);background:var(--paper-2);outline:none;resize:vertical}
.cform input:focus,.cform textarea:focus{border-color:var(--umber)}
.cform__hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.cform__send{flex:none;border:0;width:100%;font-family:var(--sans)}
.cform__status{min-height:20px;font-size:14px;color:var(--ink-2)}
.cform__status.is-error{color:#8a2f1d}
.social{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.social a{display:grid;place-items:center;min-height:44px;padding:0 18px;border-radius:22px;border:1px solid rgba(26,23,20,.25);font-size:14px;text-decoration:none;color:var(--ink)}
.social a:hover{border-color:var(--umber);color:var(--umber)}

[hidden]{display:none!important}

/* =====================================================================
   THE ABOUT WALL (laptop only)
   A flat wall of tiles that hangs in the space to the left of the main section.
   space.js builds it from the About sheet. Its angle is wallAz in space.js.
   ===================================================================== */
.wall{--ww:992px;--wtop:-216px;--wall-az:-46deg;--wall-s:.84;position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;
  transform:rotateY(calc(var(--wall-az) * -1)) translateZ(-800px) scale(var(--wall-s));visibility:hidden;pointer-events:none}
.wall.is-on{visibility:visible;pointer-events:auto}
.wall__in{position:absolute;left:calc(var(--ww) / -2);top:var(--wtop);display:grid;grid-template-columns:320px 340px 300px;gap:16px;
  transform-style:preserve-3d;-webkit-user-select:none;user-select:none;
  transform:translateY(calc(var(--wshift,0px) * -1));transition:transform .6s var(--ease)}
.tile.is-active .face{border-color:var(--brass)}

.wt{position:relative;min-width:0;padding:22px 24px;border-radius:22px;background:var(--tile);border:1px solid rgba(237,230,219,.10);
  box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(237,230,219,.05);color:var(--text);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.wt .eyebrow{display:block;color:var(--muted)}
.wt p{font-size:16px;line-height:25px;color:var(--text)}
.wt strong{color:var(--brass);font-weight:500}
.wt .mono{color:var(--brass)}

/* the About wall: 12 columns, 1360px wide and low (a wide wall keeps the text big enough to read: nothing on it is smaller than about 12px on screen)
   left to right: portrait | name + short bio over three pillars | a tall strip of numbers. Along the bottom: six tiles that open. */
.wall__in--about{grid-template-columns:repeat(12,1fr);width:1360px}
.wall__in--about .wt{padding:20px 24px}
.wall__in--about .wt .eyebrow{font-size:12px;letter-spacing:.16em}
.wt--photo{grid-column:1 / span 3;grid-row:1 / span 2;padding:0 !important;overflow:hidden}
.wt--photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.wt--intro{grid-column:4 / span 7;grid-row:1;display:flex;flex-direction:column;gap:10px}
.wt-name{font-family:var(--serif);font-weight:400;font-size:48px;line-height:.98;letter-spacing:-.01em;margin:6px 0 0}
.wt .wt-headline{font-size:31px;line-height:1.14;letter-spacing:-.005em;margin:8px 0 0;color:var(--text)}
.wall__in--about .wt--intro .mono{font-size:12.5px;letter-spacing:.12em}
.wt--short{grid-column:4 / span 7;grid-row:2;display:flex;align-items:flex-end;gap:28px}
.ws-text{flex:1;display:flex;flex-direction:column;gap:12px}
.wt .wt-lead{color:var(--muted);font-size:16.5px;line-height:25px}
.wt-actions{display:flex;flex:none;flex-wrap:wrap;gap:10px}
.wt .btn{flex:none;height:44px;padding:0 24px;border-radius:22px;font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;display:grid;place-items:center;font-family:var(--sans);white-space:nowrap}
.wt .btn--solid{background:var(--text);color:var(--ground);border:0}
.wt .btn--line{background:none;color:var(--text);border:1px solid rgba(237,230,219,.3)}
.wt .btn:hover{border-color:var(--brass)}
.wt .btn:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.pillars{grid-column:1 / span 10;grid-row:3;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;transform-style:preserve-3d}
.wt--pillar{display:flex;flex-direction:column;gap:10px}
.wt--pillar .pillar__n{font-size:12px;letter-spacing:.16em}
.wt--pillar .pillar__t{font-weight:400;font-size:30px;line-height:1.05;letter-spacing:-.01em;margin:0}
.wt--pillar p{color:var(--muted);font-size:16px;line-height:24px}
.wt--metrics{grid-column:11 / span 2;grid-row:1 / span 3;display:flex;flex-direction:column;justify-content:space-between;gap:0;padding:8px 0 !important}
.wm{display:flex;flex:1;flex-direction:column;justify-content:center;gap:8px;padding:0 22px;border-top:1px solid rgba(237,230,219,.12)}
.wm:first-child{border-top:0}
.wm .metric__n{font-family:var(--serif);font-weight:400;font-size:36px;line-height:1;letter-spacing:-.01em;color:var(--brass);white-space:nowrap}
.wm .metric__d{font-size:15px;line-height:22px;color:var(--muted)}
.wm-steps{list-style:none;counter-reset:st;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:2px 0 0}
.wm-steps li{counter-increment:st;display:flex;align-items:baseline;gap:10px;padding:11px 14px;border-radius:14px;border:1px solid rgba(237,230,219,.14);font-family:var(--serif);font-size:22px;line-height:1;color:var(--text)}
.wm-steps li::before{content:counter(st,decimal-leading-zero);font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--brass)}
.wt--how ul{list-style:none;columns:2;column-gap:28px;margin:0}
.wt--how li{position:relative;padding-left:16px;margin-bottom:10px;break-inside:avoid;font-size:16px;line-height:23px;color:var(--text)}
.wt--how li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;background:var(--brass)}
.wt--beyond p{font-size:16px;line-height:23px;color:var(--text);margin:0}
.wall__in--about .shelf{grid-column:1 / -1;grid-row:4;grid-template-columns:repeat(6,1fr)}
.wall__in--about .x-head{padding:0 16px 0 20px}
.wall__in--about .x-name{font-size:24px}
.wall__in--about .x-sum{font-size:11.5px;letter-spacing:.08em}
.x-body .eyebrow{display:block;color:var(--muted);font-size:12px}
.x-body strong{color:var(--brass);font-weight:500}
.x-body .story{columns:3;column-gap:34px;padding-top:16px;border-top:1px solid rgba(237,230,219,.12)}
.x-body .story p{margin:0 0 12px;font-size:16.5px;line-height:25px;color:var(--text)}
.x-body .hw{display:grid;grid-template-columns:3fr 6fr 3fr;gap:32px;padding-top:16px;border-top:1px solid rgba(237,230,219,.12)}
.wt--method,.wt--how,.wt--beyond{display:flex;flex-direction:column;gap:14px}
.wall__in--about .x-body .list{grid-template-columns:repeat(3,1fr)}
.wall__in--about .x-body .list .mono{font-size:12px;line-height:17px}
.wall__in--about .x-body .li-d{font-size:16px;line-height:24px}
.wall__in--about .x-body .li-t{font-size:24px}
.wall__in--about .x-body .edu{font-size:16.5px;line-height:25px}
.x-body .edu-certs{display:flex;flex-direction:column;gap:6px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(237,230,219,.12);font-size:16.5px;line-height:24px;color:var(--muted)}
.x-body .edu-certs .mono{font-size:12px;letter-spacing:.14em;color:var(--brass)}
.x-body .skills{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 36px;padding-top:16px;border-top:1px solid rgba(237,230,219,.12)}
.x-body .skills .chips-row{border:0;padding-top:0;gap:7px}
.x-body .skills .chips-row span{padding:7px 13px;font-size:15px}
.x-body .sk-h{font-size:12px;letter-spacing:.14em;font-weight:400;margin:0 0 10px;color:var(--brass)}

/* the four expandable tiles */
.shelf{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;transform-style:preserve-3d}
.xs{position:relative;height:96px;transform-style:preserve-3d}
.xc{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;border-radius:22px;background:var(--tile);border:1px solid rgba(237,230,219,.10);
  box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(237,230,219,.05);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:left .55s var(--ease),top .55s var(--ease),width .55s var(--ease),height .55s var(--ease),transform .45s var(--ease),background-color .3s,border-color .3s,opacity .3s}
.xs:not(.is-open) .xc:hover{transform:translateZ(22px);background:var(--tile-aimed);border-color:var(--brass)}
.xs.is-open .xc{left:var(--xl);width:var(--xw);height:var(--xh);transform:translateZ(46px);background:var(--tile-aimed);border-color:rgba(201,165,123,.55)}
.x-head{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:96px;padding:0 24px;cursor:pointer}
.x-head:focus-visible{outline:2px solid var(--brass);outline-offset:-4px;border-radius:22px}
.x-t{display:flex;flex-direction:column;gap:8px}
.x-name{font-size:27px;line-height:1;letter-spacing:-.01em;color:var(--text)}
.x-sum{font-size:11px;letter-spacing:.14em;color:var(--brass)}
.x-plus{position:relative;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(237,230,219,.28);transition:transform .45s var(--ease),border-color .3s}
.x-plus::before,.x-plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--text)}
.x-plus::after{transform:rotate(90deg)}
.xs:hover .x-plus{border-color:var(--brass)}
.xs.is-open .x-plus{transform:rotate(45deg)}
.x-body{padding:2px 24px 26px;opacity:0;transition:opacity .2s}
.xs.is-open .x-body{opacity:1;transition:opacity .35s .25s}
.x-body .list{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:40px;border:0}
.x-body .list li{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-top:1px solid rgba(237,230,219,.12)}
.x-body .li-t{font-family:var(--serif);font-size:22px;line-height:1.1;color:var(--text)}
.x-body .li-d{font-size:14px;line-height:21px;color:var(--muted)}
.x-body .edu{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;margin-top:0;padding-top:14px;border-top:1px solid rgba(237,230,219,.12);font-size:15px;line-height:23px;color:var(--muted)}
.x-body .edu strong{color:var(--text);font-weight:500}
.x-body .chips-row{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding-top:16px;border-top:1px solid rgba(237,230,219,.12)}
.x-body .chips-row span{padding:8px 14px;border-radius:18px;border:1px solid rgba(237,230,219,.22);font-size:14px;color:var(--text)}
@media (prefers-reduced-motion:reduce){.xc,.x-body,.x-plus{transition:none}}

/* =====================================================================
   THE PRODUCT WALL (laptop only)
   A header and six project tiles. Each tile is 70% image carousel, 30% title. (The Marketing wall below reuses all of this.)
   Click a tile and it unfolds into the full case study with every image.
   ===================================================================== */
.wall__in--product{grid-template-columns:repeat(3,1fr);width:992px;row-gap:16px}
.wt--head{grid-column:1 / -1;display:flex;align-items:flex-end;justify-content:space-between;padding:20px 28px}
.wt-title{font-size:40px;line-height:1;letter-spacing:-.01em;font-weight:400}
.wt--head .mono{color:var(--muted);font-size:12.5px;letter-spacing:.14em}
.xs.ps{height:360px}
.pt-img{position:absolute;left:0;top:0;right:0;height:70%;overflow:hidden;background:#14110F;transition:opacity .2s}
.pt-track{display:flex;height:100%;transition:transform .6s var(--ease)}
.pt-slide{flex:0 0 100%;height:100%}
.pt-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.pt-cover img{object-position:50% 50%}
.pt-ph{height:100%;display:grid;place-items:center;padding:24px;text-align:center;background:radial-gradient(120% 90% at 50% 0%,#201C18,#14110F)}
.pt-ph .mono{color:var(--muted);letter-spacing:.16em;font-size:13px;opacity:.8}
.pt-count{position:absolute;right:12px;bottom:10px;padding:4px 9px;border-radius:12px;background:rgba(18,16,14,.72);color:var(--text);font-size:11px;letter-spacing:.1em}
.pt-arrow{position:absolute;top:50%;width:36px;height:36px;margin-top:-18px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid rgba(237,230,219,.28);
  background:rgba(18,16,14,.74);color:var(--text);cursor:pointer;opacity:0;transition:opacity .25s,border-color .25s,background-color .25s}
.pt-prev{left:12px}.pt-next{right:12px}
.xs:hover .pt-arrow,.pt-arrow:focus-visible{opacity:1}
.pt-arrow:hover{border-color:var(--brass);background:rgba(18,16,14,.92)}
.pt-arrow:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.pt-open{all:unset;box-sizing:border-box;position:absolute;left:0;right:0;bottom:0;height:30%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 20px 0 22px;cursor:pointer;transition:opacity .2s}
.pt-open:focus-visible{outline:2px solid var(--brass);outline-offset:-4px;border-radius:0 0 22px 22px}
.pt-t{display:flex;flex-direction:column;gap:6px;min-width:0}
.pt-year{font-size:12px;letter-spacing:.14em;color:var(--brass)}
.pt-title{font-size:21px;line-height:1.12;letter-spacing:-.005em;color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.xs.is-open [data-closed-only]{opacity:0;pointer-events:none}

/* the opened case study */
.pt-full{position:relative;width:var(--xw,992px);padding:26px 30px 30px;opacity:0;transition:opacity .2s}
.xs.is-open .pt-full{opacity:1;transition:opacity .35s .25s}
.pf-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.pf-meta{color:var(--brass);font-size:12.5px;letter-spacing:.12em;line-height:18px}
.pf-title{font-size:38px;line-height:1.05;letter-spacing:-.01em;font-weight:400;margin-top:10px;max-width:880px}
.pf-close{all:unset;box-sizing:border-box;flex:none;position:relative;width:40px;height:40px;border-radius:50%;border:1px solid rgba(237,230,219,.28);cursor:pointer;display:grid;place-items:center;transition:border-color .3s}
.pf-close:hover{border-color:var(--brass)}
.pf-close:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.pf-close .x-plus{width:100%;height:100%;border:0;transform:rotate(45deg)}
.pf-cols{display:grid;grid-template-columns:1.1fr 1fr;column-gap:34px;height:520px;margin-top:22px}
.pf-gallery{display:flex;flex-direction:column;gap:12px;min-height:0}
.pf-main{position:relative;flex:1;min-height:0;border-radius:16px;overflow:hidden;background:#14110F}
.pf-big{display:block;width:100%;height:100%;object-fit:contain;transition:opacity .25s}
.pf-main .pt-arrow{opacity:.85}
.pf-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:7px;max-height:112px;overflow-y:auto;padding:2px}
.pf-th{all:unset;box-sizing:border-box;display:block;position:relative;height:0;padding-bottom:100%;border-radius:10px;overflow:hidden;cursor:pointer;border:1.5px solid transparent;opacity:.55;transition:opacity .2s,border-color .2s}
.pf-th img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.pf-th:hover{opacity:.9}
.pf-th.is-on{border-color:var(--brass);opacity:1}
.pf-th:focus-visible{outline:2px solid var(--brass);outline-offset:1px}
.pf-copy{min-height:0;overflow-y:auto;padding-right:16px;scrollbar-width:thin;scrollbar-color:rgba(237,230,219,.25) transparent}
.pf-copy .proj__h{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;font-weight:400;color:var(--brass);margin:20px 0 8px}
.pf-copy .proj__h:first-child{margin-top:0}
.pf-copy p{font-size:17px;line-height:27px;color:#D9D2C6}
.pf-copy a{color:var(--brass);text-decoration:underline;text-underline-offset:3px}
.pf-copy a:hover{color:var(--text)}
.pf-copy a:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.pf-copy p + p{margin-top:10px}
.pf-soon{color:var(--muted);font-size:17px}
.no-img .pf-cols{grid-template-columns:1fr;height:auto}
.no-img .pf-copy{columns:2;column-gap:44px;overflow:visible;padding-right:0}
.no-img .pf-copy .proj__h{break-after:avoid}
@media (prefers-reduced-motion:reduce){.pt-track,.pt-arrow,.pt-full{transition:none}}

/* =====================================================================
   THE MARKETING WALL (laptop only)
   Same tiles as the Product wall, but 11 projects: the title tile plus the 11 projects fill two rows of six.
   The wall is wider, so it is drawn smaller (marketingWallScale in space.js) and the opened case study uses bigger type to stay readable.
   ===================================================================== */
.wall__in--marketing{grid-template-columns:repeat(6,236px);column-gap:16px;width:1496px;row-gap:16px}
.wall__in--marketing .wt--head{grid-column:auto;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:14px;padding:26px 24px}
.wall__in--marketing .wt-title{font-size:38px}
.wall__in--marketing .wt--head .mono{line-height:17px}
.wall__in--marketing .xs.ps{height:340px}
.wall__in--marketing .pt-title{font-size:17.5px;-webkit-line-clamp:4}
.wall__in--marketing .pt-year{font-size:12.5px}
.wall__in--marketing .pt-open{padding:0 16px 0 18px}
.wall__in--marketing .pt-arrow{width:32px;height:32px;margin-top:-16px}
.wall__in--marketing .pt-full{padding:30px 38px 36px}
.wall__in--marketing .pf-meta{font-size:14px;line-height:20px}
.wall__in--marketing .pf-title{font-size:44px;max-width:1080px}
.wall__in--marketing .pf-cols{height:580px;margin-top:26px;column-gap:44px}
.wall__in--marketing .pf-copy p{font-size:19px;line-height:30px}
.wall__in--marketing .pf-copy p + p{margin-top:12px}
.wall__in--marketing .pf-copy .proj__h{font-size:13px;margin:24px 0 10px}
.wall__in--marketing .pf-copy .proj__h:first-child{margin-top:0}
.wall__in--marketing .pf-thumbs{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));max-height:136px}
.wall__in--marketing .no-img .pf-cols{height:auto}
.wall__in--marketing .no-img .pf-copy{columns:2}
.wall__in--marketing .pf-soon{font-size:19px}

/* while a case study is open the other tiles fade away, so the open one has the stage to itself (and nothing can flicker behind it) */
.wall__in.has-open .xs:not(.is-open) .xc,.wall__in.has-open .wt--head{opacity:0;pointer-events:none}
.wall__in .wt--head{transition:opacity .3s}
@media (prefers-reduced-motion:reduce){.wall__in .wt--head{transition:none}}

/* =====================================================================
   THE DESIGN WALL (laptop only)
   Five art series. The title tile plus the five series fill three columns and two rows. Same tiles and case study as Product.
   ===================================================================== */
.wall__in--design{grid-template-columns:repeat(3,1fr);width:992px;row-gap:16px}
.wall__in--design .wt--head{grid-column:auto;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:14px;padding:26px 28px}
.wall__in--design .wt-title{font-size:48px}
.wall__in--design .pt-title{font-size:24px}
.wall__in--design .pt-img{background:#14110F}

/* =====================================================================
   THE CONTACT WALL (laptop only, hangs on the RIGHT of the main section)
   Title tile and the message form on the left two columns; LinkedIn, Behance and GitHub as three separate tiles on the right.
   ===================================================================== */
.wall__in--contact{grid-template-columns:repeat(3,300px);column-gap:16px;row-gap:16px;width:932px}
.ct-head{grid-column:1 / 3;grid-row:1;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:28px 30px;min-height:190px}
.ct-head .wt-title{font-size:46px}
.ct-lead{max-width:520px;color:var(--muted)!important}
.ct-form{grid-column:1 / 3;grid-row:2 / 4;padding:24px 30px 26px}
.ct-link{grid-column:3;padding:0;display:flex}
.ct-link:nth-of-type(3){grid-row:1}.ct-link:nth-of-type(4){grid-row:2}.ct-link:nth-of-type(5){grid-row:3}
.ct-a{all:unset;box-sizing:border-box;flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:22px 24px;border-radius:22px;cursor:pointer;transition:background-color .3s,border-color .3s}
.ct-a:hover{background:var(--tile-aimed)}
.ct-a:focus-visible{outline:2px solid var(--brass);outline-offset:-4px}
.ct-sub{font-size:10.5px;letter-spacing:.14em;color:var(--brass)}
.ct-name{font-size:32px;line-height:1;letter-spacing:-.01em}
.ct-go{position:absolute;right:20px;top:20px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(237,230,219,.28);display:grid;place-items:center;transition:border-color .3s,transform .3s var(--ease)}
.ct-a:hover .ct-go{border-color:var(--brass);transform:translate(2px,-2px)}
.ct-link:hover{border-color:var(--brass)}
/* the form, dressed for the dark wall */
.ct-form .cform{margin-top:14px;gap:12px}
.ct-form .cform label{color:var(--muted)}
.ct-form .cform input,.ct-form .cform textarea{color:var(--text);background:rgba(237,230,219,.06);border:1px solid rgba(237,230,219,.2);padding:11px 14px;border-radius:14px;font-size:15px;user-select:text;-webkit-user-select:text;cursor:text}
.ct-form .cform input:focus,.ct-form .cform textarea:focus{border-color:var(--brass);outline:0}
.ct-form .cform textarea{resize:none;height:96px}
.ct-form .cform__send{width:auto;align-self:flex-start;padding:0 34px;min-height:46px;cursor:pointer}
.ct-form .cform__status{color:var(--text);min-height:18px;font-size:14px}
.ct-form .cform__status.is-error{color:#E39A85}

/* laptop: the little help tile and the (i) button sit in the bottom-left corner, so they never cover the Contact tile at the bottom of the stack */
html.desk #hud{align-items:flex-start;padding-left:max(24px,calc(env(safe-area-inset-left,0px) + 12px))}

/* Hit-testing fix. Inside a wall, a tile, its box and the wall behind it all sat on exactly the same flat plane, so the browser could not always tell which one was in front
   and a click sometimes landed on the empty wall. Giving each layer a tiny, different depth settles it (1px and 2px are invisible). */
.wall__in > *{transform:translateZ(1px)}
.xc{transform:translateZ(2px)}

/* =====================================================================
   THE ASK PHONE (laptop only)
   An iPhone (390 x 844 screen, drawn at its real size and scaled to fit) slides up from the bottom while the space behind it blurs.
   Inside, the chat is dressed as dark-mode iMessage: blue sent bubbles, grey received bubbles, tails, typing dots, "Delivered", a pill composer.
   The suggestions float to the right of the phone.
   ===================================================================== */
html.phone-open #hud{opacity:0;visibility:hidden;transition-delay:0s}
.phone-layer{position:fixed;inset:0;z-index:50;visibility:hidden;pointer-events:none;transition:visibility 0s .7s;
  --ios-bg:#000;--ios-blue:#0A84FF;--ios-grey:#26262A;--ios-line:#2C2C2E;--ios-dim:#8E8E93;
  --ios-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif}
.phone-layer.is-on{visibility:visible;pointer-events:auto;transition-delay:0s}
.phone-bg{position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 55%,rgba(14,11,9,.10),rgba(8,6,5,.50));
  -webkit-backdrop-filter:blur(12px) brightness(1.25);backdrop-filter:blur(12px) brightness(1.25);opacity:0;transition:opacity .55s var(--ease)}
.phone-layer.is-on .phone-bg{opacity:1}
.phone-stage{position:absolute;left:50%;top:50%;width:410px;height:864px;margin:-432px 0 0 -205px;transform:translateX(var(--psx,0px)) scale(var(--ps,1));transform-origin:50% 50%;pointer-events:none}
.phone-stage > *{pointer-events:auto}

.phone{position:relative;width:410px;height:864px;padding:10px;border-radius:62px;background:#0B0B0C;
  box-shadow:0 0 0 2px #3B3B40,0 0 0 3px #111113,inset 0 0 0 1.5px #232326,0 70px 140px rgba(0,0,0,.65),0 20px 50px rgba(0,0,0,.5);
  transform:translateY(1300px) rotate(7deg);transform-origin:50% 100%;transition:transform .55s cubic-bezier(.55,0,.85,.35)}
.phone-layer.is-on .phone{transform:none;transition:transform .95s cubic-bezier(.17,1.12,.3,1)}
.pb{position:absolute;width:4px;border-radius:2px;background:#303034}
.pb-s{left:-5px;top:120px;height:30px}.pb-u{left:-5px;top:178px;height:58px}.pb-d{left:-5px;top:252px;height:58px}.pb-p{right:-5px;top:210px;height:94px}

.screen{position:relative;width:390px;height:844px;border-radius:52px;overflow:hidden;background:var(--ios-bg);color:#fff;display:flex;flex-direction:column;font-family:var(--ios-font);-webkit-font-smoothing:antialiased}
.ios-status{position:relative;flex:none;height:54px;display:flex;align-items:center;justify-content:space-between;padding:8px 30px 0 50px;font:600 17px/1 var(--ios-font);letter-spacing:-.01em}
.ios-island{position:absolute;left:50%;top:11px;width:122px;height:35px;margin-left:-61px;border-radius:20px;background:#000}
.ios-icons{display:flex;align-items:center;transform:translateY(1px)}
.ios-head{position:relative;flex:none;height:96px;display:flex;align-items:flex-start;justify-content:center;padding-top:7px;background:rgba(24,24,26,.96);border-bottom:.5px solid #38383A;z-index:2}
.ios-back{all:unset;position:absolute;left:12px;top:24px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--ios-blue);cursor:pointer;border-radius:20px}
.ios-back:focus-visible{outline:2px solid var(--ios-blue)}
.ios-video{position:absolute;right:14px;top:31px;color:var(--ios-blue)}
.ios-who{display:flex;flex-direction:column;align-items:center;gap:3px}
.ios-who img{width:54px;height:54px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 .5px rgba(255,255,255,.12)}
.ios-who span{font:400 11.5px/1 var(--ios-font);color:#E5E5EA;display:flex;align-items:center;gap:3px}
.ios-who span i{width:5px;height:5px;border-right:1.4px solid #8E8E93;border-top:1.4px solid #8E8E93;transform:rotate(45deg);margin-left:1px}
.ios-slot{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--ios-bg)}

/* messages */
.phone .thread{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:3px;padding:12px 14px 10px;scrollbar-width:none;overscroll-behavior:contain;scroll-behavior:smooth}
.phone .thread::-webkit-scrollbar{display:none}
.ios-stamp{align-self:center;text-align:center;font:400 11.5px/1.35 var(--ios-font);color:var(--ios-dim);margin:2px 0 10px}
.ios-stamp b{font-weight:600;margin-right:4px}
.phone .msg{position:relative;max-width:76%;padding:7px 13px 8px;border:0;font:400 17px/22px var(--ios-font);letter-spacing:-.012em;color:#fff;border-radius:19px;overflow-wrap:anywhere;animation:ios-pop .28s var(--ease)}
.phone .msg--me{align-self:flex-end;background:var(--ios-blue)}
.phone .msg--bot{align-self:flex-start;background:var(--ios-grey)}
.phone .msg--me + .msg--bot,.phone .msg--bot + .msg--me,.phone .msg-status + .msg--bot{margin-top:9px}
.phone .msg.has-tail::before,.phone .msg.has-tail::after{content:"";position:absolute;bottom:0;height:20px}
.phone .msg--me.has-tail::before{right:-7px;width:20px;background:var(--ios-blue);border-bottom-left-radius:16px 14px}
.phone .msg--me.has-tail::after{right:-26px;width:26px;background:var(--ios-bg);border-bottom-left-radius:10px}
.phone .msg--bot.has-tail::before{left:-7px;width:20px;background:var(--ios-grey);border-bottom-right-radius:16px 14px}
.phone .msg--bot.has-tail::after{left:-26px;width:26px;background:var(--ios-bg);border-bottom-right-radius:10px}
.phone .msg__go{color:#7DBEFF;text-decoration:underline;text-underline-offset:2px;font:inherit;cursor:pointer}
.msg-status{display:none}
.phone .msg-status{display:block;align-self:flex-end;margin:1px 4px 0 0;font:500 11.5px/1.2 var(--ios-font);color:var(--ios-dim)}
@keyframes ios-pop{from{opacity:0;transform:scale(.88) translateY(8px)}to{opacity:1;transform:none}}
/* typing dots (also used by the phone sheet) */
.msg--typing{display:inline-flex;align-items:center;gap:5px;letter-spacing:0}
.msg--typing i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.4;animation:ios-dot 1.1s infinite ease-in-out}
.msg--typing i:nth-child(2){animation-delay:.18s}.msg--typing i:nth-child(3){animation-delay:.36s}
.phone .msg--typing{height:36px;padding:0 15px;color:#9A9AA0}
@keyframes ios-dot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}

/* composer */
.phone .ask-form{flex:none;display:flex;align-items:center;gap:10px;height:auto;margin:0;padding:8px 14px 36px;border:0;border-radius:0;background:var(--ios-bg)}
.ios-plus{flex:none;width:34px;height:34px;border-radius:50%;background:linear-gradient(#A1A1A6,#A1A1A6) center/14px 2px no-repeat,linear-gradient(#A1A1A6,#A1A1A6) center/2px 14px no-repeat,#2C2C2E}
.ios-field{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:36px;padding:0 4px 0 15px;border-radius:19px;border:1px solid #3A3A3C;background:#000}
.ios-field:focus-within{border-color:#555559}
.phone .ios-field input{flex:1;min-width:0;border:0;background:none;outline:0;font:400 17px/22px var(--ios-font);color:#fff;letter-spacing:-.01em;user-select:text;-webkit-user-select:text;cursor:text}
.phone .ios-field input::placeholder{color:#6F6F74}
.ios-mic{flex:none;display:grid;place-items:center;width:28px;height:28px;color:#8E8E93}
.phone .ios-send{flex:none;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:var(--ios-blue);color:#fff;cursor:pointer}
.ios-field input:placeholder-shown ~ .ios-send{display:none}
.ios-field input:not(:placeholder-shown) ~ .ios-mic{display:none}
.ios-home{all:unset;position:absolute;left:50%;bottom:6px;width:160px;height:24px;margin-left:-80px;cursor:pointer;z-index:3}
.ios-home::after{content:"";position:absolute;left:13px;right:13px;top:9px;height:5px;border-radius:3px;background:#fff;opacity:.92}

/* suggestions, outside the phone */
.phone-side{position:absolute;left:100%;top:50%;width:270px;margin:-150px 0 0 38px;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateX(-24px);transition:opacity .3s,transform .3s}
.phone-layer.is-on .phone-side{opacity:1;transform:none;transition:opacity .6s .75s,transform .8s .75s var(--ease)}
.phone-side__t{font-size:11px;letter-spacing:.16em;color:var(--muted)}
.phone-side__chips{display:flex}
.phone-side .chips-q{display:flex;flex-direction:column;align-items:flex-start;gap:10px;overflow:visible;padding:0}
.phone-side .chips-q button{min-height:0;padding:11px 16px;border-radius:18px;border:1px solid rgba(237,230,219,.22);background:var(--tile);color:var(--text);font-size:14px;line-height:20px;text-align:left;white-space:normal;box-shadow:0 14px 30px rgba(0,0,0,.4);transition:border-color .25s,background-color .25s}
.phone-side .chips-q button:hover{border-color:var(--brass);background:var(--tile-aimed)}
.phone-side .chips-q button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.phone-mail{all:unset;align-self:flex-start;margin-top:4px;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.phone-mail:hover{color:var(--text)}
.phone-mail:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.phone,.phone-layer.is-on .phone,.phone-bg,.phone-side,.phone-layer.is-on .phone-side{transition-duration:.01s;transition-delay:0s}.phone .msg{animation:none}.msg--typing i{animation:none;opacity:.7}}

/* readable labels inside opened tiles (the sheet's dark umber is too dim on the dark tiles) */
.x-body .umber,.x-body .mono{color:var(--brass)}

.ct-head .contact-where{font-size:12.5px;letter-spacing:.12em;color:var(--brass)}
.sheet .contact-where{margin:6px 0 14px;font-size:12px;letter-spacing:.12em}

/* Reset chat buttons (phone side on laptop, under the heading in the phone sheet) */
.phone-reset,.ask-reset{all:unset;align-self:flex-start;font-size:12px;letter-spacing:.12em;color:var(--muted);cursor:pointer;text-transform:uppercase;font-family:var(--mono,ui-monospace,monospace)}
.phone-reset{margin-top:2px;padding:12px 0}
.ask-reset{display:inline-block;margin:6px 0 2px}
.phone-reset:hover,.ask-reset:hover{color:var(--text)}
.phone-reset:focus-visible,.ask-reset:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* ============================ WORLDS (the backgrounds) ============================ */
#backdrop{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bd-world{position:absolute;inset:0;transition:transform .7s cubic-bezier(.16,.8,.2,1),opacity .7s ease}
.bd-world.is-out{transform:scale(1.35);opacity:0;transition:transform .48s cubic-bezier(.55,0,.9,.4),opacity .45s ease-in}
.bd-world.is-pre{transform:scale(.8);opacity:0;transition:none}
.bd-sky{position:absolute;inset:0;background:linear-gradient(to bottom,var(--bd-top,#07080f),var(--bd-bot,#0d0c12))}
.bd-glow{position:absolute;inset:0;background:radial-gradient(90% 45% at 50% 108%,rgba(214,140,92,var(--bd-glow,0)),transparent 70%)}
.bd-layer{position:absolute;will-change:transform}
.bd-layer canvas{display:block}
.bd-stars{opacity:var(--bd-stars,1)}
.bd-shade{position:absolute;inset:0;background:var(--bd-bot,#111829);opacity:var(--bd-shade,0)}
.bd-vox .bd-layer canvas{image-rendering:pixelated}
.bd-clouds{opacity:var(--bd-cloud,.4)}
.bd-orb{position:absolute;display:block}
.bd-sun{width:54px;height:54px;background:#f1d9a8;opacity:var(--bd-sun,0);box-shadow:0 0 0 12px rgba(241,217,168,.10),0 0 90px 30px rgba(244,208,150,.28)}
.bd-moon{width:42px;height:42px;background:#dde1e9;opacity:var(--bd-moon,1);box-shadow:inset -12px -12px 0 rgba(150,158,176,.45),inset 12px 12px 0 -6px rgba(255,255,255,.2),0 0 0 9px rgba(221,225,233,.07),0 0 70px 18px rgba(200,210,235,.16)}
.bd-vig{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 46%,transparent 52%,rgba(8,7,6,.6) 100%)}
.bd-grain{position:absolute;inset:0;background-size:128px 128px;opacity:.5}
@media (prefers-reduced-motion:reduce){.bd-world,.bd-world.is-out{transition:none}}

/* the teleport button and its little menu (in the bottom bar) */
.wd-ico{flex:none;color:var(--brass)}
.bar__btn[aria-expanded="true"]{color:var(--brass)}
.wmenu{position:absolute;left:0;bottom:calc(100% + 12px);min-width:250px;padding:8px;border-radius:20px;background:var(--tile);border:1px solid rgba(237,230,219,.14);box-shadow:0 18px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:2px}
.wmenu[hidden]{display:none}
.wmenu__i{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-radius:14px;cursor:pointer}
.wmenu__i:hover{background:rgba(237,230,219,.06)}
.wmenu__i:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
.wmenu__n{font-size:15px;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:12px}
.wmenu__i[aria-checked="true"] .wmenu__n::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--brass)}
.wmenu__t{font-size:12px;line-height:17px;color:var(--muted)}
.wmenu__more{padding:8px 14px 6px;font-size:10.5px;color:var(--muted);border-top:1px solid rgba(237,230,219,.10);margin-top:4px}

/* ============================ ASK ON PHONES: a full-screen iMessage chat ============================ */
.phone-layer.is-full{inset:var(--vvt,0px) 0 auto 0;height:var(--vvh,100dvh);transition:visibility 0s .5s}
.phone-layer.is-full.is-on{transition-delay:0s}
.phone-layer.is-full .phone-bg{display:none}
.phone-layer.is-full .phone-stage{inset:0;width:auto;height:auto;margin:0;transform:none}
.phone-layer.is-full .phone{width:100%;height:100%;padding:0;border-radius:0;background:#000;box-shadow:none;transform:translateY(100%);transition:transform .4s cubic-bezier(.55,0,.85,.35)}
.phone-layer.is-full.is-on .phone{transform:none;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.phone-layer.is-full .pb,.phone-layer.is-full .ios-status,.phone-layer.is-full .ios-home{display:none}
.phone-layer.is-full .screen{width:100%;height:100%;border-radius:0}
.phone-layer.is-full .ios-head{height:calc(92px + env(safe-area-inset-top,0px));padding-top:calc(env(safe-area-inset-top,0px) + 10px)}
.phone-layer.is-full .ios-back{top:calc(env(safe-area-inset-top,0px) + 26px);width:48px;height:48px}
.ios-note{all:unset;position:absolute;right:8px;top:calc(env(safe-area-inset-top,0px) + 28px);width:48px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ios-blue);cursor:pointer;border-radius:22px}
.ios-note:focus-visible{outline:2px solid var(--ios-blue)}
.phone-layer.is-full .thread{padding:12px 14px 10px}
.phone-layer.is-full .chips-q{flex:none;display:flex;gap:8px;overflow-x:auto;padding:8px 14px 4px;background:#000;scrollbar-width:none}
.phone-layer.is-full .chips-q button{flex:none;min-height:44px;padding:0 15px;border-radius:19px;border:1px solid #3A3A3C;background:#1C1C1E;color:var(--ios-blue);font:400 15px/1 var(--ios-font);white-space:nowrap}
.phone-layer.is-full .chips-q button:active{background:#2C2C2E}
.phone-layer.is-full .ask-form{padding:8px 14px calc(10px + env(safe-area-inset-bottom,0px))}
.phone-layer.is-full .ios-field{height:40px}

/* ============================ PROJECT IMAGES IN THE PHONE SHEETS ============================ */
.proj__gal{margin:6px 0 14px}
.proj__strip{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.proj__strip::-webkit-scrollbar{display:none}
.gal__b{all:unset;flex:none;scroll-snap-align:start;height:190px;min-width:120px;border-radius:14px;overflow:hidden;background:rgba(26,23,20,.08);border:1px solid rgba(26,23,20,.14);cursor:zoom-in}
.gal__b:focus-visible{outline:2px solid var(--umber);outline-offset:2px}
.gal__b img{display:block;height:100%;width:auto;max-width:none}
.gal__n{display:block;margin-top:4px;color:var(--sheet-muted);font-size:10px}

/* full-screen image viewer (swipe sideways, tap the cross or press Esc to close) */
#lightbox{position:fixed;inset:0;z-index:70;background:rgba(8,7,6,.96);display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s}
#lightbox.is-on{opacity:1;visibility:visible;transition-delay:0s}
.lb__row{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x pinch-zoom;overscroll-behavior:contain}
.lb__row::-webkit-scrollbar{display:none}
.lb__s{flex:none;width:100%;height:100%;scroll-snap-align:center;display:grid;place-items:center;padding:calc(env(safe-area-inset-top,0px) + 56px) 12px 12px}
.lb__s img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.lb__x{all:unset;position:absolute;right:12px;top:calc(env(safe-area-inset-top,0px) + 10px);width:44px;height:44px;border-radius:50%;border:1px solid rgba(237,230,219,.3);display:grid;place-items:center;color:var(--text);cursor:pointer;background:rgba(18,16,14,.7)}
.lb__x:focus-visible{outline:2px solid var(--brass)}
.lb__c{position:absolute;left:16px;top:calc(env(safe-area-inset-top,0px) + 22px);font-size:11px;letter-spacing:.14em;color:var(--muted)}

/* social links at the top of the Contact sheet, as logos */
.social--icons{display:flex;gap:12px;margin:14px 0 6px}
.social--icons a{width:52px;height:52px;min-height:0;padding:0;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(26,23,20,.25);color:var(--ink);transition:border-color .2s,color .2s}
.social--icons a:hover,.social--icons a:focus-visible{border-color:var(--umber);color:var(--umber)}
.social--icons svg{width:22px;height:22px;fill:currentColor}
.social--icons .be{font:700 19px/1 var(--sans);letter-spacing:-.03em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.ios-stamp .phone-reset{display:block;margin:5px auto 0;color:var(--ios-dim);font:500 12px/1.2 var(--ios-font);letter-spacing:0;text-transform:none;padding:12px 10px}
.ios-stamp .phone-reset:active{color:#fff}

/* ============================ PHONE HELD SIDEWAYS ============================ */
/* Sideways, the page uses the laptop layout (walls) and a zoom bar in the bottom bar. Only the Ask chat stays a full-screen phone chat, so it gets a slim header. */
.zoom{display:none;align-items:center;gap:10px;padding:0 10px;height:44px}
html.desk:not(.mouse):not(.tablet) .zoom{display:flex}
.zoom__a{font-family:var(--serif);color:var(--muted);line-height:1;user-select:none}
.zoom__a--s{font-size:13px}.zoom__a--l{font-size:23px}
#zoom-r{-webkit-appearance:none;appearance:none;width:clamp(120px,24vw,220px);height:44px;margin:0;background:transparent;cursor:pointer;touch-action:none;--zv:0%}
#zoom-r::-webkit-slider-runnable-track{height:2px;border-radius:1px;background:linear-gradient(90deg,var(--brass) var(--zv),rgba(237,230,219,.22) var(--zv))}
#zoom-r::-moz-range-track{height:2px;border-radius:1px;background:rgba(237,230,219,.22)}
#zoom-r::-moz-range-progress{height:2px;background:var(--brass)}
#zoom-r::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-11px;border-radius:50%;background:var(--text);border:0;box-shadow:0 0 0 6px rgba(237,230,219,.1)}
#zoom-r::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--text);border:0;box-shadow:0 0 0 6px rgba(237,230,219,.1)}
#zoom-r:focus-visible{outline:2px solid var(--brass);outline-offset:-4px;border-radius:22px}
@media (orientation:landscape) and (max-height:520px){
  .phone-layer.is-full .ios-head{height:calc(54px + env(safe-area-inset-top,0px));padding-top:calc(env(safe-area-inset-top,0px) + 6px);flex-direction:row;justify-content:center}
  .phone-layer.is-full .ios-who{flex-direction:row;gap:10px}
  .phone-layer.is-full .ios-who img{width:36px;height:36px}
  .phone-layer.is-full .ios-back{top:calc(env(safe-area-inset-top,0px) + 6px)}
  .phone-layer.is-full .ios-note{top:calc(env(safe-area-inset-top,0px) + 6px)}
  .phone-layer.is-full .ios-head,.phone-layer.is-full .thread,.phone-layer.is-full .chips-q,.phone-layer.is-full .ask-form{padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}
  .phone-layer.is-full .ask-form{padding-top:6px}
  .phone-layer.is-full .ios-stamp .phone-reset{display:inline;margin:0 0 0 8px}
}
html.short #scene{overflow:visible}