*{box-sizing:border-box}
:root{
  color-scheme:dark;
  --bg:#171a1f;
  --bg-soft:#20252b;
  --text:#f4f1e9;
  --muted:#aaa9a4;
  --line:rgba(255,255,255,.12);
  --panel:rgba(255,255,255,.055);
  --panel-strong:rgba(255,255,255,.08);
  --shadow:0 24px 55px rgba(0,0,0,.24),0 4px 12px rgba(0,0,0,.18);
  --shadow-hover:0 34px 75px rgba(0,0,0,.32),0 8px 20px rgba(0,0,0,.2);
  --focus:#91d7ff;
  --max:1180px;
  --radius:28px;
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f0ede6;
  --bg-soft:#e7e1d8;
  --text:#191b1d;
  --muted:#676762;
  --line:rgba(20,24,27,.13);
  --panel:rgba(255,255,255,.5);
  --panel-strong:rgba(255,255,255,.72);
  --shadow:0 20px 45px rgba(63,55,43,.13),0 3px 10px rgba(63,55,43,.09);
  --shadow-hover:0 30px 65px rgba(63,55,43,.18),0 8px 18px rgba(63,55,43,.11);
  --focus:#075f86;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#08090b;
  --bg-soft:#101216;
  --text:#f5f5f2;
  --muted:#9b9ca0;
  --line:rgba(255,255,255,.1);
  --panel:rgba(255,255,255,.035);
  --panel-strong:rgba(255,255,255,.055);
  --shadow:0 26px 58px rgba(0,0,0,.46),0 4px 14px rgba(0,0,0,.34);
  --shadow-hover:0 38px 85px rgba(0,0,0,.58),0 10px 22px rgba(0,0,0,.38);
  --focus:#91d7ff;
}
html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 16% -12%,rgba(120,139,146,.16),transparent 34rem),
    radial-gradient(circle at 92% 22%,rgba(106,80,124,.11),transparent 32rem),
    var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s ease,color .25s ease;
}
a{color:inherit}
button{font:inherit}
.skip-link{
  position:fixed;
  z-index:100;
  left:1rem;
  top:1rem;
  padding:.75rem 1rem;
  border-radius:999px;
  background:var(--text);
  color:var(--bg);
  transform:translateY(-180%);
  transition:transform .18s ease;
}
.skip-link:focus{transform:translateY(0)}

.topbar{
  width:min(var(--max),calc(100% - 3rem));
  margin:0 auto;
  padding:1.4rem 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.identity{
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  text-decoration:none;
}
.identity-mark{
  width:52px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--panel-strong);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:-.04em;
}
.identity-copy{display:grid;gap:.05rem}
.identity-copy strong{font-size:.92rem;letter-spacing:-.02em}
.identity-copy span{font-size:.75rem;color:var(--muted)}
.controls{display:flex;align-items:center;gap:.65rem}
.theme-switch{
  display:flex;
  gap:.18rem;
  padding:.22rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
}
.theme-switch button,.motion-toggle{
  appearance:none;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:.72rem;
  font-weight:750;
  padding:.52rem .72rem;
}
.theme-switch button[aria-pressed="true"]{
  background:var(--text);
  color:var(--bg);
}
.motion-toggle{
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
}
.theme-switch button:focus-visible,.motion-toggle:focus-visible,.identity:focus-visible,
.place-card:focus-visible,.elsewhere-links a:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:4px;
}

main{width:min(var(--max),calc(100% - 3rem));margin:0 auto}
.intro{
  padding:clamp(4rem,8vw,7.5rem) 0 clamp(2.8rem,5vw,4.5rem);
  max-width:900px;
}
.eyebrow,.card-kicker{
  margin:0 0 1rem;
  color:var(--muted);
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.intro h1{
  margin:0;
  max-width:900px;
  font-family:Iowan Old Style,Palatino Linotype,Book Antiqua,Georgia,serif;
  font-size:clamp(3.25rem,8vw,7rem);
  font-weight:500;
  letter-spacing:-.055em;
  line-height:.92;
}
.lede{
  margin:1.7rem 0 0;
  max-width:680px;
  color:var(--muted);
  font-size:clamp(1rem,1.8vw,1.3rem);
  line-height:1.55;
}

.places{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.5rem);
  padding-bottom:clamp(4rem,8vw,7rem);
  perspective:1400px;
  perspective-origin:50% 42%;
}
.place-card{
  --mx:0px;
  --my:0px;
  --rx:0deg;
  --ry:0deg;
  --mz:0px;
  --hover-y:0px;
  position:relative;
  min-height:370px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  isolation:isolate;
  padding:clamp(1.45rem,3vw,2.25rem);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  text-decoration:none;
  transform-style:preserve-3d;
  transform:translate3d(var(--mx),calc(var(--my) + var(--hover-y)),var(--mz)) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease,border-color .24s ease;
}
body.motion-active .place-card{will-change:transform}
.place-card::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  background:var(--card-bg);
}
.place-card::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.11),transparent 24%,transparent 73%,rgba(255,255,255,.035));
  opacity:.8;
}
.place-card:hover{
  --hover-y:-7px;
  --mz:12px;
  border-color:rgba(255,255,255,.24);
  box-shadow:var(--shadow-hover);
}
.card-wide{grid-column:span 7}
.card-narrow{grid-column:span 5}
.card-kicker{position:relative;z-index:2;color:var(--card-muted)}
.card-copy{position:relative;z-index:2;max-width:560px;margin:auto 0 1.8rem}
.card-copy h2{
  margin:0;
  max-width:560px;
  color:var(--card-text);
  font-size:clamp(1.7rem,3vw,2.85rem);
  letter-spacing:-.045em;
  line-height:1.02;
}
.card-copy p{
  margin:1rem 0 0;
  max-width:520px;
  color:var(--card-muted);
  font-size:.98rem;
  line-height:1.55;
}
.card-route{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  color:var(--card-text);
  font-size:.8rem;
  font-weight:800;
}
.card-route b{font-size:1.2rem;transition:transform .2s ease}
.place-card:hover .card-route b{transform:translate(.18rem,-.18rem)}

.card-work{
  --card-bg:linear-gradient(145deg,#ece6d9,#d8d5c9 62%,#c5d4cf);
  --card-text:#17201f;
  --card-muted:#4c5b58;
}
.work-visual{position:absolute;right:-1rem;top:1.4rem;width:46%;height:48%;opacity:.6;transform:rotate(-4deg)}
.work-visual i{position:absolute;border:1px solid rgba(26,55,49,.35);background:rgba(255,255,255,.22);border-radius:14px}
.work-visual i:nth-child(1){inset:0 15% 30% 0}
.work-visual i:nth-child(2){inset:16% 0 13% 24%}
.work-visual i:nth-child(3){inset:46% 37% 0 5%}
.work-visual i:nth-child(4){width:12px;height:12px;right:7%;bottom:8%;border-radius:50%;background:#52756b}

.card-writing{
  --card-bg:radial-gradient(circle at 70% 22%,rgba(221,229,216,.18),transparent 25%),linear-gradient(155deg,#27312d,#151d1a 78%);
  --card-text:#f3f0e7;
  --card-muted:#aebcaf;
}
.writing-visual{position:absolute;inset:0;opacity:.72;pointer-events:none}
.writing-visual i{position:absolute;border-radius:50%;filter:blur(2px)}
.writing-visual i:nth-child(1){width:250px;height:250px;right:-90px;top:-65px;background:radial-gradient(circle,#73877b 0,rgba(115,135,123,.1) 58%,transparent 70%)}
.writing-visual i:nth-child(2){width:1px;height:72%;right:24%;bottom:-5%;border-radius:0;background:linear-gradient(transparent,#94a79b 28%,#94a79b 80%,transparent);transform:rotate(8deg)}
.writing-visual i:nth-child(3){width:1px;height:48%;right:16%;bottom:0;border-radius:0;background:linear-gradient(transparent,#687c70 20%,#687c70 88%,transparent);transform:rotate(-11deg)}

.card-gaming{
  --card-bg:radial-gradient(circle at 83% 10%,#7bd0ff 0,#26a7ef 28%,#168fdb 55%,#0b6eae 100%);
  --card-text:#06131a;
  --card-muted:#10364b;
}
.gaming-visual{position:absolute;right:1.2rem;top:1.3rem;display:grid;gap:.24rem;transform:rotate(4deg);opacity:.92}
.gaming-visual i{display:block;padding:.26rem .55rem;border-radius:.45rem;background:#bd1028;color:#fff;font-style:normal;font-size:.72rem;font-weight:950;line-height:1;text-align:center;box-shadow:3px 3px 0 rgba(6,19,26,.22)}

.card-cranes{
  --card-bg:radial-gradient(circle at 78% 35%,rgba(255,151,44,.42),transparent 21%),linear-gradient(135deg,#171819 5%,#29211a 55%,#60320f 100%);
  --card-text:#fff4e6;
  --card-muted:#d9b997;
}
.crane-visual{position:absolute;right:2rem;top:2rem;width:42%;height:56%;opacity:.82;transform:rotate(2deg)}
.crane-visual i:nth-child(1){position:absolute;left:42%;top:6%;width:7px;height:84%;background:#f0a33a;box-shadow:18px 0 0 rgba(240,163,58,.24)}
.crane-visual i:nth-child(2){position:absolute;left:12%;top:12%;width:76%;height:6px;background:#f0a33a;transform:skewX(-25deg);transform-origin:left center}
.crane-visual i:nth-child(3){position:absolute;right:8%;top:13%;width:2px;height:48%;background:rgba(255,244,230,.58);box-shadow:0 82px 0 3px #f0a33a}

.card-experiments{
  --card-bg:radial-gradient(circle at 78% 20%,rgba(109,225,224,.28),transparent 23%),radial-gradient(circle at 65% 62%,rgba(178,122,237,.24),transparent 30%),linear-gradient(145deg,#222239,#171928 70%);
  --card-text:#f5f1ff;
  --card-muted:#b9b5ce;
}
.experiment-visual{position:absolute;right:4%;top:7%;width:40%;aspect-ratio:1;opacity:.72;transform:rotate(-8deg)}
.experiment-visual i{position:absolute;inset:50% auto auto 50%;border:1px solid rgba(163,224,229,.55);border-radius:50%;transform:translate(-50%,-50%)}
.experiment-visual i:nth-child(1){width:28%;height:28%;background:rgba(163,224,229,.08)}
.experiment-visual i:nth-child(2){width:52%;height:52%}
.experiment-visual i:nth-child(3){width:76%;height:76%;border-color:rgba(192,148,239,.48)}
.experiment-visual i:nth-child(4){width:8px;height:8px;left:82%;top:48%;border:0;background:#99e3e5;box-shadow:-85px 62px 0 #c38df0, -118px -55px 0 #f3d36a}

.card-elsewhere{
  --card-bg:linear-gradient(145deg,#d9d3ca,#bbb6ae);
  --card-text:#202124;
  --card-muted:#5c5b5b;
}
.card-elsewhere .card-copy{margin:auto 0 1.5rem;max-width:370px}
.elsewhere-links{position:relative;z-index:3;display:flex;gap:.7rem;flex-wrap:wrap}
.elsewhere-links a{padding:.62rem .85rem;border:1px solid rgba(32,33,36,.2);border-radius:999px;color:var(--card-text);font-size:.8rem;font-weight:850;text-decoration:none;background:rgba(255,255,255,.22)}
.elsewhere-links a:hover{background:rgba(255,255,255,.48)}
.elsewhere-visual{position:absolute;right:5%;top:-15%;font-size:14rem;font-weight:900;line-height:1;color:rgba(32,33,36,.07);transform:rotate(12deg)}

.footer{
  width:min(var(--max),calc(100% - 3rem));
  margin:0 auto;
  padding:0 0 2.5rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  color:var(--muted);
  font-size:.76rem;
}
.footer p{margin:0}
.footer strong{color:var(--text)}

@media(max-width:900px){
  .topbar{align-items:flex-start}
  .controls{align-items:flex-end;flex-direction:column}
  .card-wide,.card-narrow{grid-column:span 6}
  .place-card{min-height:350px}
  .card-copy h2{font-size:clamp(1.65rem,4vw,2.45rem)}
}
@media(max-width:640px){
  :root{--radius:22px}
  .topbar,main,.footer{width:min(100% - 2rem,var(--max))}
  .topbar{padding-top:1rem;gap:.8rem}
  .identity-copy span{display:none}
  .identity-mark{width:47px;height:40px}
  .controls{gap:.45rem}
  .theme-switch button{padding:.45rem .56rem;font-size:.68rem}
  .motion-toggle{padding:.45rem .65rem;font-size:.68rem}
  .intro{padding:3.8rem 0 2.3rem}
  .intro h1{font-size:clamp(3.2rem,15vw,5.4rem)}
  .places{gap:1rem}
  .card-wide,.card-narrow{grid-column:span 12}
  .place-card{min-height:330px;padding:1.35rem}
  .work-visual,.crane-visual,.experiment-visual{opacity:.48}
  .footer{padding-bottom:1.5rem;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .place-card{transform:none!important}
  .place-card:hover{--hover-y:0px;--mz:0px}
}