/* Root identity pass: deliberately more personal than the Work site. */
:root{
  --brand-blue:#4eb7ff;
  --brand-red:#df3152;
  --brand-gold:#f2c35d;
  --brand-mint:#79d7bd;
  --brand-lilac:#b29aee;
  --brand-ink:#111318;
  --brand-paper:#f4efe5;
}

body{
  background:
    radial-gradient(circle at 10% 7%,color-mix(in srgb,var(--brand-blue) 14%,transparent),transparent 24rem),
    radial-gradient(circle at 92% 18%,color-mix(in srgb,var(--brand-red) 10%,transparent),transparent 25rem),
    radial-gradient(circle at 52% 72%,color-mix(in srgb,var(--brand-lilac) 7%,transparent),transparent 31rem),
    repeating-linear-gradient(115deg,transparent 0 38px,color-mix(in srgb,var(--text) 1.5%,transparent) 39px 40px),
    var(--bg);
}

html[data-theme="light"] body{
  background:
    radial-gradient(circle at 10% 7%,rgba(39,150,224,.13),transparent 26rem),
    radial-gradient(circle at 92% 18%,rgba(215,54,88,.09),transparent 25rem),
    radial-gradient(circle at 52% 72%,rgba(119,84,197,.07),transparent 31rem),
    repeating-linear-gradient(115deg,transparent 0 38px,rgba(30,27,22,.025) 39px 40px),
    var(--bg);
}

.topbar{padding-top:1.1rem}
.identity{position:relative}
.identity-mark{
  position:relative;
  overflow:visible;
  border:0;
  background:linear-gradient(145deg,var(--brand-red),#a90b35 72%);
  color:#fff;
  box-shadow:5px 5px 0 var(--brand-blue),0 12px 30px rgba(0,0,0,.16);
  transform:rotate(-2deg);
}
.identity-mark::after{
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  right:-9px;
  top:-7px;
  border-radius:50%;
  background:var(--brand-gold);
  box-shadow:8px 10px 0 -2px var(--brand-mint),-10px 5px 0 -3px var(--brand-lilac);
}
.identity-copy strong{font-size:.98rem}
.identity-copy span{letter-spacing:.02em}

.intro{
  max-width:none;
  padding:clamp(3.2rem,7vw,6.6rem) 0 clamp(2.1rem,4vw,3.4rem);
}
.intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:center;
}
.intro-copy{max-width:880px}
.intro .eyebrow{color:var(--text);opacity:.68}
.intro h1{
  max-width:940px;
  font-size:clamp(3.5rem,8.6vw,7.7rem);
}
.intro h1 .scribble{
  position:relative;
  display:inline-block;
  color:var(--brand-blue);
  font-style:italic;
  transform:rotate(-1.1deg);
  text-shadow:2px 2px 0 color-mix(in srgb,var(--brand-red) 44%,transparent);
}
.intro h1 .scribble::after{
  content:"";
  position:absolute;
  height:5px;
  left:3%;
  right:-2%;
  bottom:-.06em;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand-red),var(--brand-gold),var(--brand-blue));
  transform:rotate(-1.2deg);
  opacity:.85;
}
.lede{max-width:740px}

.identity-orbit{
  --orbit-size:clamp(230px,24vw,330px);
  width:var(--orbit-size);
  aspect-ratio:1;
  justify-self:end;
  position:relative;
  display:grid;
  place-items:center;
  border-radius:50%;
  transform:rotate(3deg);
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.14));
}
.identity-orbit::before,
.identity-orbit::after{
  content:"";
  position:absolute;
  border-radius:50%;
  inset:4%;
  border:1px solid var(--line);
}
.identity-orbit::after{
  inset:19%;
  border-style:dashed;
  opacity:.65;
}
.orbit-disc{
  width:48%;
  aspect-ratio:1;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.9),rgba(255,255,255,.15) 8%,transparent 9%),
    conic-gradient(from 35deg,var(--brand-blue),var(--brand-lilac),var(--brand-red),var(--brand-gold),var(--brand-mint),var(--brand-blue));
  color:#fff;
  box-shadow:0 22px 40px rgba(0,0,0,.2),inset 0 0 0 8px rgba(255,255,255,.12);
  font-weight:950;
  font-size:clamp(1rem,2vw,1.4rem);
  letter-spacing:-.08em;
  text-shadow:0 2px 6px rgba(0,0,0,.28);
}
.orbit-word{
  position:absolute;
  left:50%;
  top:50%;
  padding:.45rem .7rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in srgb,var(--bg-soft) 88%,transparent);
  color:var(--text);
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(0,0,0,.09);
  backdrop-filter:blur(10px);
}
.orbit-word:nth-of-type(3){transform:translate(-50%,-50%) rotate(-8deg) translateY(calc(var(--orbit-size) * -.45))}
.orbit-word:nth-of-type(4){transform:translate(-50%,-50%) rotate(7deg) translateX(calc(var(--orbit-size) * .45))}
.orbit-word:nth-of-type(5){transform:translate(-50%,-50%) rotate(4deg) translateY(calc(var(--orbit-size) * .45))}
.orbit-word:nth-of-type(6){transform:translate(-50%,-50%) rotate(-7deg) translateX(calc(var(--orbit-size) * -.45))}
.orbit-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 8%,var(--brand-blue) 8% 9%,transparent 9% 29%,var(--brand-red) 29% 30%,transparent 30% 58%,var(--brand-gold) 58% 59%,transparent 59% 81%,var(--brand-mint) 81% 82%,transparent 82%);
  -webkit-mask:radial-gradient(transparent 67%,#000 68% 70%,transparent 71%);
  mask:radial-gradient(transparent 67%,#000 68% 70%,transparent 71%);
  animation:orbit-turn 28s linear infinite;
}

.brand-ticker{
  width:100%;
  margin:0 0 clamp(1.4rem,3vw,2rem);
  overflow:hidden;
  border-block:1px solid var(--line);
  color:var(--muted);
}
.brand-ticker-track{
  width:max-content;
  display:flex;
  gap:1.2rem;
  align-items:center;
  padding:.72rem 0;
  animation:ticker-drift 26s linear infinite;
  font-size:.69rem;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.brand-ticker-track span::after{content:"✦";margin-left:1.2rem;color:var(--brand-blue)}
.brand-ticker-track span:nth-child(3n)::after{color:var(--brand-red)}
.brand-ticker-track span:nth-child(3n+2)::after{color:var(--brand-gold)}

.places{perspective:1550px}
.place-card{
  --card-turn:0deg;
  --vx:0px;
  --vy:0px;
  --light-x:50%;
  --light-y:25%;
  border-color:color-mix(in srgb,var(--card-text) 15%,transparent);
  transform:translate3d(var(--mx),calc(var(--my) + var(--hover-y)),var(--mz)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--card-turn));
  box-shadow:var(--shadow),0 0 0 1px color-mix(in srgb,var(--card-glow,var(--brand-blue)) 6%,transparent);
}
.place-card::after{
  background:
    radial-gradient(circle at var(--light-x) var(--light-y),rgba(255,255,255,.17),transparent 24%),
    linear-gradient(118deg,rgba(255,255,255,.10),transparent 24%,transparent 73%,rgba(255,255,255,.035));
}
.place-card:hover{
  --hover-y:-8px;
  --mz:14px;
  box-shadow:var(--shadow-hover),0 0 42px color-mix(in srgb,var(--card-glow,var(--brand-blue)) 18%,transparent);
}
.place-card::marker{display:none}
.card-index{
  position:absolute;
  z-index:4;
  right:1.25rem;
  bottom:1.05rem;
  font-family:Iowan Old Style,Palatino Linotype,Book Antiqua,Georgia,serif;
  font-size:clamp(3rem,7vw,6.2rem);
  font-style:italic;
  line-height:.75;
  color:color-mix(in srgb,var(--card-text) 10%,transparent);
  pointer-events:none;
  transform:translateZ(18px) rotate(-5deg);
}
.card-kicker{display:inline-flex;align-items:center;gap:.5rem}
.card-kicker::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--card-glow,var(--brand-blue));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--card-glow,var(--brand-blue)) 13%,transparent);
}
.card-copy,.card-route,.elsewhere-links{transform:translateZ(18px)}
.card-copy h2{font-family:Iowan Old Style,Palatino Linotype,Book Antiqua,Georgia,serif;font-weight:600}
.motion-layer{
  --visual-turn:0deg;
  transform:translate3d(var(--vx),var(--vy),32px) rotate(var(--visual-turn));
  transition:transform .18s ease-out;
}

.card-work{--card-turn:-.35deg;--card-glow:#4d8777;grid-column:span 7}
.card-writing{--card-turn:.45deg;--card-glow:#9cb2a2;grid-column:span 5}
.card-gaming{--card-turn:-.55deg;--card-glow:#8ad8ff;grid-column:span 5}
.card-cranes{--card-turn:.32deg;--card-glow:#f0a33a;grid-column:span 7}
.card-experiments{--card-turn:-.25deg;--card-glow:#b88af0;grid-column:span 8}
.card-elsewhere{--card-turn:.55deg;--card-glow:#777;grid-column:span 4}
.work-visual{--visual-turn:-4deg}
.writing-visual{--visual-turn:0deg}
.gaming-visual{--visual-turn:4deg}
.crane-visual{--visual-turn:2deg}
.experiment-visual{--visual-turn:-8deg}
.elsewhere-visual{--visual-turn:12deg}

.card-work .card-copy h2::after{content:" ↘";color:#52756b;font-style:italic}
.card-writing .card-copy h2::after{content:" 〰";color:#94a79b}
.card-gaming .card-copy h2::after{content:" ✦";color:#bd1028;text-shadow:2px 2px 0 rgba(255,255,255,.28)}
.card-cranes .card-copy h2::after{content:" ⚙";color:#f0a33a}
.card-experiments .card-copy h2::after{content:" ?";color:#99e3e5;font-style:italic}

.footer{border-top:1px solid var(--line);padding-top:1.25rem}

@keyframes orbit-turn{to{transform:rotate(360deg)}}
@keyframes ticker-drift{to{transform:translateX(-50%)}}

@media(max-width:900px){
  .intro-grid{grid-template-columns:1fr minmax(210px,.4fr);gap:2rem}
  .identity-orbit{--orbit-size:220px}
  .card-work,.card-writing,.card-gaming,.card-cranes,.card-experiments,.card-elsewhere{grid-column:span 6}
}

@media(max-width:640px){
  .intro{padding-top:3rem}
  .intro-grid{grid-template-columns:1fr}
  .intro-copy{position:relative;z-index:2}
  .identity-orbit{
    --orbit-size:210px;
    justify-self:end;
    margin-top:-1.5rem;
    margin-right:1rem;
    opacity:.88;
  }
  .brand-ticker{margin-bottom:1rem}
  .card-work,.card-writing,.card-gaming,.card-cranes,.card-experiments,.card-elsewhere{grid-column:span 12}
  .place-card{min-height:350px}
  .card-index{font-size:4.6rem}
}

@media(prefers-reduced-motion:reduce){
  .orbit-ring,.brand-ticker-track{animation:none!important}
  .motion-layer{transform:rotate(var(--visual-turn))!important}
}