:root{
  /* Default palette: sampled from the home art (sky, clouds, silver hair, her pink accents) */
  --accent:#3f6f96;        /* fills that carry white text; accent text on paper (5:1) */
  --accent-soft:#a9d0ee;   /* accents on dark surfaces (10.8:1 on --black) */
  --accent-deep:#2a4a66;
  --pop:#e48a98;           /* ransom-note highlight letters */
  --blush:#ebc6c2;
  --gold:#f0d29a;
  --black:#121a26;
  --white:#f5f8fb;
  --ink:#162232;
  --ink-soft:#384657;
  --muted:#4f6175;
  --tint:#e2ecf5;
  --tint-2:#dbe8f3;
  --dark-2:#2c3c50;
  --dark-3:#1f2b3b;
  --on-dark-muted:#d3e1ec;
  --placeholder:#7f91a4;
  --shade:18 26 38;        /* shadow colour, used as rgb(var(--shade) / a) */
  --soft-rgb:169 208 238;
  --stripe-a:#5f8db3; --stripe-b:#86b0d2; --stripe-c:#46719a;
}
/* Screens with their own purple artwork keep the purple palette */
body[data-screen="skills"],body[data-screen="about"],body[data-screen="contact"]{
  --accent:#8558b3;
  --accent-soft:#c9a8ea;
  --accent-deep:#4f3468;
  --pop:#c9a8ea;
  --black:#17121d;
  --white:#f7f2f7;
  --ink:#1d1724;
  --ink-soft:#3b3145;
  --muted:#5d5068;
  --tint:#ece4ee;
  --tint-2:#e9e0ec;
  --dark-2:#3d3249;
  --dark-3:#241c2d;
  --on-dark-muted:#ddd3e3;
  --placeholder:#8f839b;
  --shade:23 18 29;
  --soft-rgb:201 168 234;
  --stripe-a:#8d68b8; --stripe-b:#a98bd0; --stripe-c:#6c4c93;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--black);transition:background-color .3s;
  color:var(--white);
  font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  user-select:none;
}
.display{font-family:'Archivo Black','Arial Black',Impact,sans-serif;}

/* ============ BACKGROUND LAYERS ============ */
#bg{position:fixed;inset:-6vmax;z-index:0;pointer-events:none;}
.bg-layer{position:absolute;inset:0;will-change:transform;}
#bg-stripes{
  background:repeating-linear-gradient(115deg,
    var(--stripe-a) 0 46px, var(--stripe-b) 46px 52px,
    var(--stripe-a) 52px 120px, var(--stripe-c) 120px 126px);
  animation:stripeDrift 22s linear infinite;
}
@keyframes stripeDrift{from{background-position:0 0;}to{background-position:520px 0;}}
#bg-halftone{
  background-image:radial-gradient(circle, rgb(var(--shade) / .35) 1.6px, transparent 1.7px);
  background-size:14px 14px;
  mix-blend-mode:multiply;
  animation:halftoneDrift 30s linear infinite;
}
@keyframes halftoneDrift{from{background-position:0 0;}to{background-position:-140px 140px;}}
#bg-vignette{
  background:radial-gradient(ellipse at 32% 40%, transparent 30%, rgb(var(--shade) / .72) 100%);
}
.bg-star{position:absolute;opacity:.16;animation:spin 60s linear infinite;transform-origin:center;}
.bg-star.s2{animation-duration:90s;animation-direction:reverse;opacity:.1;}
@keyframes spin{to{transform:rotate(360deg);}}

/* big black slash behind the menu, like a torn silhouette */
#slash{
  position:fixed;z-index:1;inset:0;pointer-events:none;
  background:var(--black);
  clip-path:polygon(58% 0, 100% 0, 100% 100%, 40% 100%, 52% 62%, 45% 60%, 60% 24%, 51% 22%);
  transition:clip-path .5s cubic-bezier(.16,1,.3,1);
}
body[data-screen]:not([data-screen="home"]) #slash{
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 62%, 0 60%, 0 24%, 0 22%);
}

/* ============ SHELL / HUD ============ */
#shell{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;}
#hud-top{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:18px 26px 0;letter-spacing:.14em;font-weight:600;
}
.hud-tag{
  background:var(--black);color:var(--white);
  padding:5px 14px;transform:rotate(-2deg);
  font-size:14px;text-transform:uppercase;
  box-shadow:4px 4px 0 rgb(var(--shade) / .35);
}
.hud-tag.alt{background:var(--white);color:var(--black);transform:rotate(1.5deg);}
#hud-bottom{
  padding:0 26px 16px;display:flex;gap:22px;align-items:center;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;opacity:.95;
}
#hud-bottom .key{
  display:inline-block;background:var(--white);color:var(--black);
  padding:2px 8px;margin-right:6px;font-weight:700;transform:skewX(-8deg);
  border-radius:2px;
}
#stage{flex:1;position:relative;overflow:hidden;}

/* ============ SCREENS ============ */
.screen{
  position:absolute;inset:0;padding:2vh 4vw;
  display:none;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:var(--accent-soft) transparent;
}
.screen.active{display:block;}
.screen::-webkit-scrollbar{width:8px;}
.screen::-webkit-scrollbar-thumb{background:var(--accent-soft);}

/* ---------- HOME ---------- */
#screen-home{display:none;padding:0 4vw;}
#screen-home.active{display:flex;flex-direction:column;justify-content:center;}
#intro-eyebrow{
  font-size:clamp(14px,1.6vw,20px);letter-spacing:.5em;text-transform:uppercase;
  margin-bottom:1.2vh;font-weight:700;text-shadow:2px 2px 0 var(--black);
}
#big-name{line-height:.92;margin-bottom:2.5vh;}
#big-name .ransom{font-size:clamp(44px,min(8.5vw,12vh),124px);display:block;}
#tagline{
  max-width:520px;font-size:clamp(15px,1.5vw,20px);line-height:1.45;
  background:var(--black);padding:12px 18px;transform:rotate(-1deg);
  box-shadow:6px 6px 0 rgb(var(--shade) / .3);
}
#tagline strong{color:var(--accent-soft);}
#menu{margin-top:3vh;display:flex;flex-direction:column;align-items:flex-start;gap:.6vh;}
.menu-item{
  background:none;border:0;cursor:pointer;color:var(--white);
  display:block;text-decoration:none;
  text-align:left;position:relative;padding:2px 14px 2px 4px;
}
.menu-item .ransom{font-size:clamp(24px,min(4vw,5.4vh),54px);}
.menu-item.sel .ch{color:var(--white);}
.menu-item.sel .ch.box{background:var(--accent);color:var(--white);}
.menu-item.sel .ch.boxw{background:var(--white);color:var(--black);}
.menu-item:focus-visible{outline:3px dashed var(--white);outline-offset:4px;}

/* ---------- RANSOM LETTERS ---------- */
.ransom{display:inline-block;white-space:nowrap;}
.ransom .ch{
  display:inline-block;line-height:1;padding:0 .01em;
  transition:transform .15s;
}
.ransom .ch.box{background:var(--black);color:var(--white);padding:.02em .08em;margin:0 .03em;}
.ransom .ch.boxw{background:var(--white);color:var(--black);padding:.02em .08em;margin:0 .03em;}
.ransom .ch.red{color:var(--pop);text-shadow:2px 2px 0 var(--black);}
@keyframes jitter{
  0%{transform:var(--t) translateY(0);}
  35%{transform:var(--t) translateY(-6px) rotate(3deg);}
  70%{transform:var(--t) translateY(2px) rotate(-2deg);}
  100%{transform:var(--t) translateY(0);}
}

/* ---------- SUB-SCREEN CHROME ---------- */
.sub{background:transparent;}
.sub .screen-head{position:relative;display:inline-block;font-weight:inherit;}
.sub .screen-head .ransom{font-size:clamp(38px,6vw,84px);}
.sub .screen-head::after{
  content:"";position:absolute;left:-6px;bottom:-10px;height:10px;width:105%;
  background:var(--accent-soft);transform:skewX(-24deg);
}

/* ---------- PROJECTS ---------- */
#repo-status{font-size:15px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:2vh;opacity:.85;}
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:26px 34px;padding-top:14px;
}
#repo-grid{padding-bottom:6vh;}
.card{
  color:var(--ink);position:relative;
  padding:20px 22px 18px;cursor:pointer;text-decoration:none;display:block;
  transform:rotate(var(--tilt));
  filter:drop-shadow(7px 7px 0 rgb(var(--shade) / .5));
}
.card::before{
  content:"";position:absolute;inset:0;background:var(--white);
  clip-path:polygon(0 6%, 3% 0, 100% 0, 100% 88%, 97% 100%, 0 100%);
}
.card>*{position:relative;}
.card:hover{
  filter:drop-shadow(10px 10px 0 var(--black));
  z-index:3;
}
.card .lang{
  position:absolute;top:-12px;right:14px;
  background:var(--black);color:var(--white);
  font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 12px;transform:rotate(2deg);
}
.card .lang::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--lc,var(--accent));margin-right:7px;}
.card h3{
  font-family:'Archivo Black','Arial Black',Impact,sans-serif;
  font-size:21px;line-height:1.05;text-transform:uppercase;
  margin-bottom:10px;word-break:break-word;
}
.card h3 em{font-style:normal;color:var(--accent);}
.card.feat h3 em{color:var(--accent-soft);}
.card p{font-size:15.5px;line-height:1.4;min-height:44px;color:var(--ink-soft);}
.card .meta{
  margin-top:14px;display:flex;justify-content:space-between;align-items:center;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
}
.card .meta .go{
  background:var(--accent);color:var(--white);padding:4px 12px;transform:skewX(-10deg);
  transition:background .15s;
}
.card:hover .meta .go{background:var(--black);}

/* ---------- FEATURED CARDS ---------- */
.card.feat{color:var(--white);filter:drop-shadow(7px 7px 0 var(--accent-deep));}
.card.feat::before{background:var(--black);}
.card.feat:hover{filter:drop-shadow(10px 10px 0 var(--accent-soft));}
.card.feat p{color:var(--on-dark-muted);}
.card.feat h3{color:var(--white);}
.card.feat .lang{background:var(--accent);}
.card.feat .meta .go{background:var(--white);color:var(--black);}
.card.feat:hover .meta .go{background:var(--accent);color:var(--white);}
#feat-grid,.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:26px 34px;padding-top:14px;
}
#repo-grid{padding-top:14px;}
.live-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:#3dff6e;margin-right:7px;animation:liveBlink 1.1s ease-in-out infinite;
}
@keyframes liveBlink{0%,100%{opacity:1;}50%{opacity:.25;}}
.grid-label{
  font-family:'Archivo Black','Arial Black',Impact,sans-serif;
  font-size:clamp(15px,1.7vw,20px);text-transform:uppercase;letter-spacing:.12em;
  margin:3.5vh 0 2vh;text-shadow:2px 2px 0 var(--black);
}
.grid-label .bar{display:inline-block;width:34px;height:12px;background:var(--white);
  transform:skewX(-24deg);margin-right:12px;vertical-align:baseline;}

/* ---------- SKILLS ---------- */
.skill-group{margin-bottom:5vh;max-width:920px;}
.skill-group h3{
  display:inline-block;background:var(--white);color:var(--black);
  font-family:'Archivo Black','Arial Black',Impact,sans-serif;
  font-size:clamp(18px,2.2vw,26px);text-transform:uppercase;
  padding:6px 16px;transform:rotate(-1.5deg);margin-bottom:2.4vh;
  box-shadow:5px 5px 0 var(--black);
}
.skill-row{display:flex;align-items:center;gap:18px;margin-bottom:12px;}
.skill-row .name{
  width:220px;flex-shrink:0;font-size:17px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;text-shadow:1px 1px 0 var(--black);
}
.skill-bar{
  flex:1;height:20px;background:rgb(var(--shade) / .55);position:relative;
  transform:skewX(-18deg);overflow:hidden;max-width:520px;
}
.skill-bar .fill{
  position:absolute;inset:0;background:var(--white);
  background-image:repeating-linear-gradient(90deg,transparent 0 26px, color-mix(in srgb, var(--accent) 22%, transparent) 26px 30px);
  transform:scaleX(0);transform-origin:left;
}
.skill-row .lv{
  font-family:'Archivo Black','Arial Black',Impact,sans-serif;
  font-size:15px;width:70px;text-align:right;text-shadow:2px 2px 0 var(--black);
}

/* ---------- ABOUT / CONTACT ---------- */
.paper{
  max-width:760px;background:var(--white);color:var(--ink);
  padding:30px 34px;font-size:18px;line-height:1.55;
  clip-path:polygon(0 4%, 2% 0, 100% 0, 100% 94%, 98% 100%, 0 100%);
  transform:rotate(-.6deg);box-shadow:10px 10px 0 rgb(var(--shade) / .55);
  margin-bottom:4vh;
}
.paper strong{color:var(--accent);}
.paper .stamp{
  display:inline-block;background:var(--black);color:var(--white);
  padding:2px 8px;transform:rotate(-2deg);font-weight:700;
}

/* ============ IMAGE SLOTS ============ */
/* 1. Hero art — big character/portrait on the right, over the black slash */
#hero-art{
  position:fixed;right:0;bottom:0;z-index:1;
  height:min(92vh,900px);max-width:46vw;object-fit:contain;object-position:bottom right;
  filter:drop-shadow(-14px 10px 0 color-mix(in srgb, var(--accent-soft) 85%, transparent)) drop-shadow(-4px 4px 12px rgb(var(--shade) / .6));
  pointer-events:none;
  transition:transform .8s cubic-bezier(.8,0,.15,1), opacity .5s;
}
body[data-screen]:not([data-screen="home"]) #hero-art{
  transform:translateX(60%) skewX(-6deg);opacity:0;
}
@media (max-width:900px){#hero-art{max-width:70vw;opacity:.5;}}

/* 2. Project card thumbnails */
.card .thumb{
  margin:-20px -22px 14px;height:150px;overflow:hidden;position:relative;
  clip-path:polygon(0 0, 100% 0, 100% 82%, 0 100%);
  background:var(--black);
}
.card .thumb img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.9) contrast(1.15);
  transition:filter .2s, transform .3s;
}
.card:hover .thumb img{filter:grayscale(0) contrast(1.05);transform:scale(1.05);}
.card .thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg, transparent 82%, var(--accent-soft) 82.3%, var(--accent-soft) 86%, transparent 86.3%);
  transform:translateX(var(--slash-x,0));transition:transform .35s var(--ease-out);
}

/* 3. About photo — taped-up polaroid */
.about-photo{
  float:right;width:min(240px,38%);margin:0 0 14px 22px;
  background:var(--white);padding:10px 10px 34px;
  transform:rotate(3deg);
  box-shadow:8px 8px 0 rgb(var(--shade) / .35);
  position:relative;
}
.about-photo img{width:100%;display:block;filter:contrast(1.05);}
.about-photo::before{
  content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-4deg);
  width:90px;height:26px;background:var(--accent);opacity:.9;
  clip-path:polygon(4% 0, 96% 8%, 100% 92%, 0 100%);
}
.about-photo figcaption{
  text-align:center;margin-top:8px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;font-size:12px;color:var(--ink);
}


/* ============ CUSTOM ANIMATED CURSOR ============ */
@media (pointer:fine){
  body.cursor-on, body.cursor-on *{cursor:none !important;}
}
#cursor{
  position:fixed;left:0;top:0;width:48px;height:48px;z-index:9999;
  pointer-events:none;display:none;
  background-repeat:no-repeat;background-position:0 0;
  background-image:url("../assets/cursors/normal.png");
  margin:-3px 0 0 -4px; /* NORMAL hotspot */
}
#cursor{transform-origin:4px 3px;transition:scale .14s var(--ease-punch);}
#cursor.down{scale:.8;transition-duration:.05s;}
#cursor.link{
  background-image:url("../assets/cursors/link.png");
  margin:-6px 0 0 -6px; /* LINK_SELECT hotspot */
}

/* clickable name */
#big-name{cursor:pointer;width:max-content;}
#big-name:hover .ch{animation:jitter .35s ease both;}
#big-name:hover .ch:nth-child(odd){animation-delay:.03s;}
#big-name:hover .ch:nth-child(3n){animation-delay:.06s;}
#big-name:active{transform:scale(.985);}

/* ============ PER-SCREEN MENU ARTWORK ============ */
/* Each screen can have its own art at assets/menus/<screen>.jpg.
   Missing files remove themselves; the CSS stripes show through. */
.menu-art{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;will-change:transform;pointer-events:none;
  transition:opacity .55s ease;
}
body[data-screen="home"]     #art-home,
body[data-screen="projects"] #art-projects,
body[data-screen="skills"]   #art-skills,
body[data-screen="about"]    #art-about,
body[data-screen="contact"]  #art-contact{opacity:1;}

/* the home artwork carries its own black diagonal — drop the CSS slash */
body.has-art-home #slash{display:none;}
/* soften the halftone overlay whenever a screen's art is showing */
body.has-art-home[data-screen="home"] #bg-halftone,
body.has-art-projects[data-screen="projects"] #bg-halftone,
body.has-art-skills[data-screen="skills"] #bg-halftone,
body.has-art-about[data-screen="about"] #bg-halftone,
body.has-art-contact[data-screen="contact"] #bg-halftone{opacity:.5;}

/* readability scrims — darken the side the content sits on */
/* the home art is a bright sky: a deeper navy scrim keeps the white lettering readable */
body.has-art-home[data-screen="home"] #bg-vignette{
  background:
    linear-gradient(100deg, rgb(var(--shade) / .66) 0%, rgb(var(--shade) / .38) 34%, rgb(var(--shade) / .08) 56%, transparent 66%),
    radial-gradient(ellipse at 30% 40%, transparent 35%, rgb(var(--shade) / .45) 100%);
}
body.has-art-skills[data-screen="skills"] #bg-vignette{
  background:
    linear-gradient(100deg, rgb(var(--shade) / .42) 0%, rgb(var(--shade) / .12) 36%, transparent 58%),
    radial-gradient(ellipse at 32% 40%, transparent 30%, rgb(var(--shade) / .55) 100%);
}
body.has-art-contact[data-screen="contact"] #bg-vignette{
  background:
    linear-gradient(260deg, rgb(var(--shade) / .48) 0%, rgb(var(--shade) / .14) 38%, transparent 60%),
    radial-gradient(ellipse at 68% 40%, transparent 30%, rgb(var(--shade) / .55) 100%);
}
/* the About art's star pattern is busy — heavier scrim so the header reads */
body.has-art-about[data-screen="about"] #bg-vignette{
  background:
    linear-gradient(260deg, rgb(var(--shade) / .72) 0%, rgb(var(--shade) / .3) 42%, transparent 64%),
    radial-gradient(ellipse at 68% 40%, transparent 25%, rgb(var(--shade) / .6) 100%);
}
body.has-art-home #menu .ch:not(.box):not(.boxw),
body.has-art-home #big-name .ch:not(.box):not(.boxw){
  text-shadow:2px 2px 0 rgb(var(--shade) / .6);
}

/* ============ RIGHT-ALIGNED SCREENS (art on the left) ============ */
.screen.align-right.active{
  display:flex;flex-direction:column;align-items:flex-end;
}
.screen.align-right .paper{transform:rotate(.6deg);}
.screen.align-right .about-photo{
  float:left;margin:0 22px 14px 0;transform:rotate(-3deg);
}
@media (max-width:820px){
  /* on small screens the art is mostly behind content anyway — keep it simple */
  .screen.align-right.active{align-items:stretch;}
}

/* ============ CV DOWNLOAD BUTTON ============ */
.cv-btn{
  display:inline-block;margin-bottom:6vh;text-decoration:none;
  background:var(--accent);color:var(--white);
  font-family:'Archivo Black','Arial Black',Impact,sans-serif;
  font-size:clamp(17px,2.2vw,24px);text-transform:uppercase;letter-spacing:.06em;
  padding:16px 30px;transform:skewX(-8deg) rotate(-1deg);
  box-shadow:7px 7px 0 var(--black);
  transition:transform .15s, background .15s, color .15s, box-shadow .15s;
}
.cv-btn span{display:inline-block;transform:skewX(8deg);}
.cv-btn:hover{
  background:var(--white);color:var(--accent);
  transform:skewX(-8deg) rotate(0) scale(1.05);
  box-shadow:10px 10px 0 var(--black);
}
.cv-btn:active{transform:skewX(-8deg) scale(.97);}

/* ============ CONTACT FORM ============ */
#contact-form{width:100%;}
.form-head{
  font-family:'Archivo Black','Arial Black',Impact,sans-serif;
  font-size:clamp(18px,2.2vw,24px);text-transform:uppercase;
  margin-bottom:18px;position:relative;display:inline-block;
}
.form-head::after{
  content:"";position:absolute;left:0;bottom:-6px;height:7px;width:100%;
  background:var(--accent);transform:skewX(-24deg);
}
.field{display:block;margin-bottom:14px;}
.field span{
  display:block;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-size:12px;margin-bottom:5px;
}
.field input,.field textarea{
  width:100%;border:3px solid var(--black);background:#fff;color:var(--ink);
  padding:10px 12px;font-family:inherit;font-size:16px;
  transform:skewX(-2deg);transition:border-color .15s, box-shadow .15s;
}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:4px 4px 0 var(--accent);
}
.field textarea{resize:vertical;min-height:110px;}
.form-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px;}
.form-send{border:0;cursor:pointer;margin-bottom:0;font-size:17px;padding:12px 26px;}
.form-send:disabled{opacity:.55;cursor:wait;}
#form-status{
  font-weight:700;letter-spacing:.08em;font-size:13px;
  text-transform:uppercase;color:var(--ink);
}
.paper a{color:var(--accent);font-weight:700;}
.paper a:hover{background:var(--accent);color:var(--white);text-decoration:none;}
.paper .quote em{
  display:inline;background:var(--black);color:var(--white);
  font-style:italic;padding:1px 6px;box-decoration-break:clone;
  -webkit-box-decoration-break:clone;line-height:1.7;
}

/* ============ RESPONSIVE / MOTION ============ */
@media (max-width:700px){
  .skill-row .name{width:130px;font-size:14px;}
  #hud-bottom{font-size:11px;gap:12px;flex-wrap:wrap;}
  .grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:26px 34px;padding-top:14px;
}
#repo-grid{grid-template-columns:1fr;}
  .cursor-mark{right:-34px;}
}

/* ============ SHARED: SUB-SCREEN INTRO LINE ============ */
.screen-sub{
  display:block;width:fit-content;
  max-width:640px;font-size:clamp(16px,1.5vw,19px);line-height:1.45;font-weight:600;
  background:var(--black);padding:10px 16px;transform:rotate(-.8deg);
  box-shadow:6px 6px 0 rgb(var(--shade) / .3);margin-bottom:3vh;
}
.screen-sub strong{color:var(--accent-soft);}
.screen-sub a{color:var(--white);text-decoration-color:var(--accent-soft);text-decoration-thickness:3px;}
.screen-sub a:hover{background:var(--accent);}

/* ============ TROPHIES (flip cards) ============ */
#trophy-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:34px;padding:10px 0 6vh;max-width:1200px;
}
.trophy{
  perspective:1200px;aspect-ratio:3/4;max-height:520px;cursor:pointer;outline:none;
  transform:rotate(var(--tilt));
}
.trophy-inner{
  position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .55s var(--ease-flip);
}
.trophy:hover .trophy-inner,.trophy.flipped .trophy-inner{transform:rotateY(180deg);}
.trophy:focus-visible .trophy-inner{outline:3px dashed var(--white);outline-offset:6px;}
.trophy .face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  clip-path:polygon(0 4%, 4% 0, 100% 0, 100% 92%, 94% 100%, 0 100%);
  overflow:hidden;
}
.trophy .front{background:var(--black);}
.trophy .front img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.25) brightness(.75);
}
.trophy .front::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg, transparent 35%, rgb(var(--shade) / .85) 80%),
             linear-gradient(115deg, transparent 72%, var(--accent-soft) 72.4%, var(--accent-soft) 80%, transparent 80.4%);
}
.trophy .place{
  position:absolute;left:14px;top:10px;z-index:2;
  font-size:clamp(64px,7vw,104px);text-shadow:4px 4px 0 var(--black);
}
.trophy[data-place="1ST"] .place .ch:not(.box):not(.boxw){color:var(--gold);}
.trophy .trophy-name{
  position:absolute;left:18px;right:18px;bottom:22px;z-index:2;
  font-family:'Archivo Black','Arial Black',Impact,sans-serif;
  font-size:clamp(22px,2.2vw,30px);line-height:1.02;text-transform:uppercase;
}
.trophy .trophy-name small{
  display:block;font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  font-size:14px;letter-spacing:.2em;font-weight:700;margin-bottom:6px;
  background:var(--accent);width:max-content;padding:2px 10px;transform:skewX(-10deg);
}
.trophy .back{
  transform:rotateY(180deg);background:var(--white);color:var(--ink);
  padding:28px 26px;display:flex;flex-direction:column;gap:10px;
}
.trophy .back .place-sm{
  font-family:'Archivo Black','Arial Black',Impact,sans-serif;font-size:56px;line-height:.9;
  color:var(--accent);transform:rotate(-4deg);width:max-content;
}
.trophy .back h3{
  font-family:'Archivo Black','Arial Black',Impact,sans-serif;
  font-size:24px;line-height:1.05;text-transform:uppercase;
}
.trophy .back .host{font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--muted);}
.trophy .back .trophy-stat{
  background:var(--black);color:var(--white);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;font-size:14px;padding:5px 12px;width:max-content;max-width:100%;
  transform:skewX(-8deg);
}
.trophy .back p{font-size:16.5px;line-height:1.45;color:var(--ink-soft);}

/* ============ SOCIAL STATS RADAR ============ */
#stats-panel{
  display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;
  margin-bottom:5vh;max-width:1000px;
}
.radar{width:min(320px,80vw);height:auto;overflow:visible;filter:drop-shadow(6px 6px 0 rgb(var(--shade) / .45));}
.radar .ring{fill:rgb(var(--shade) / .55);stroke:rgba(255,255,255,.25);stroke-width:1;}
.radar .ring:last-of-type{fill:var(--black);}
.radar .spoke{stroke:rgba(255,255,255,.2);stroke-width:1;}
.radar .shape{
  fill:color-mix(in srgb, var(--accent-soft) 80%, transparent);stroke:var(--white);stroke-width:3;stroke-linejoin:round;
  transform-origin:130px 122px;
}

@keyframes radarIn{from{transform:scale(0) rotate(-40deg);}to{transform:scale(1) rotate(0);}}
.radar text{
  fill:var(--white);font-family:'Archivo Black','Arial Black',Impact,sans-serif;
  font-size:10.5px;letter-spacing:.06em;paint-order:stroke;stroke:var(--black);stroke-width:3px;
}
.stat-list{list-style:none;display:grid;gap:8px;flex:1;min-width:280px;}
.stat-list li{
  display:grid;grid-template-columns:120px auto 1fr;gap:2px 14px;align-items:baseline;
  background:var(--black);padding:8px 14px;transform:skewX(-6deg);
  box-shadow:4px 4px 0 rgb(var(--shade) / .35);
}
.stat-list li>*{transform:skewX(6deg);}
.stat-name{font-family:'Archivo Black','Arial Black',Impact,sans-serif;text-transform:uppercase;font-size:16px;}
.stat-rank{color:var(--accent-soft);letter-spacing:.08em;}
.stat-rank i{font-style:normal;color:var(--muted);}
.stat-title{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:14px;justify-self:end;}
.stat-note{grid-column:1/-1;font-size:14px;opacity:.75;letter-spacing:.05em;}

/* ============ WRITEUPS ============ */
#writeup-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:2vh;}
.wu-filter{
  font-family:'Archivo Black','Arial Black',Impact,sans-serif;text-transform:uppercase;
  font-size:14px;letter-spacing:.06em;padding:7px 16px;border:0;cursor:pointer;
  background:var(--black);color:var(--white);transform:skewX(-10deg);
  box-shadow:4px 4px 0 rgb(var(--shade) / .35);transition:background .12s, color .12s, transform .12s;
}
.wu-filter:hover{transform:skewX(-10deg) translateY(-2px);}
.wu-filter.on{background:var(--white);color:var(--accent);}
#writeup-status{font-size:15px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1vh;opacity:.85;}
#writeup-grid{padding-bottom:6vh;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.card.writeup p{display:none;}
.card.writeup h3{font-size:24px;margin:8px 0 4px;}
.card[hidden]{display:none;}

/* reader overlay */
#reader{
  position:fixed;inset:0;z-index:60;background:rgb(var(--shade) / .72);
  overflow-y:auto;padding:5vh 4vw;opacity:0;transition:opacity .25s;
}
#reader.open{opacity:1;}
#reader[hidden]{display:none;}
.reader-sheet{
  max-width:860px;margin:0 auto;background:var(--white);color:var(--ink);
  padding:28px clamp(18px,4vw,48px) 40px;position:relative;
  clip-path:polygon(0 1.2%, 2% 0, 100% 0, 100% 98.8%, 98% 100%, 0 100%);
  transform:translateY(40px) rotate(-1.5deg);transition:transform .35s var(--ease-punch);
  user-select:text;
}
#reader.open .reader-sheet{transform:translateY(0) rotate(0);}
.reader-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.reader-cat{
  background:var(--accent);color:var(--white);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;font-size:13px;padding:4px 12px;transform:skewX(-10deg);
}
#reader-gh{color:var(--ink);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:13px;margin-left:auto;}
#reader-gh:hover{color:var(--accent);}
#reader-close{margin-left:0;background:var(--black);color:var(--white);}
#reader-title{font-size:clamp(30px,4.4vw,52px);line-height:1;text-transform:uppercase;margin-bottom:20px;}
.md{font-size:18px;line-height:1.6;}
.md h2,.md h3{
  font-family:'Archivo Black','Arial Black',Impact,sans-serif;text-transform:uppercase;
  margin:1.4em 0 .5em;display:block;width:fit-content;position:relative;
}
.md h2{font-size:24px;} .md h3{font-size:19px;}
.md h2::after{
  content:"";position:absolute;left:0;bottom:-4px;height:6px;width:100%;
  background:var(--accent);transform:skewX(-24deg);
}
.md p,.md ul,.md ol{margin:.6em 0;}
.md ul,.md ol{padding-left:1.4em;}
.md a{color:var(--accent);font-weight:700;}
.md strong{color:var(--accent);}
.md code{background:var(--tint-2);padding:1px 6px;font-size:.88em;font-family:ui-monospace,'JetBrains Mono',Consolas,monospace;}
.md pre{
  background:var(--black);color:var(--tint);padding:16px 18px;overflow-x:auto;margin:1em 0;
  box-shadow:6px 6px 0 var(--accent);font-size:15px;line-height:1.5;
}
.md pre code{background:none;padding:0;color:inherit;}
.md img{max-width:100%;}
/* ordinary quotes: a light aside */
.md blockquote{background:var(--tint);color:var(--ink-soft);padding:10px 16px;margin:1em 0;transform:rotate(-.3deg);}
.md blockquote p{margin:.35em 0;}
/* the opening quote of a writeup is its challenge brief: dark P5 card */
.md > blockquote:first-child{
  background:var(--black);color:var(--white);padding:16px 20px;margin:0 0 1.4em;
  clip-path:polygon(0 3%, 100% 0, 99% 100%, 1% 96%);
  filter:drop-shadow(6px 6px 0 var(--accent-soft));transform:rotate(-.5deg);
}
.md > blockquote:first-child strong{color:var(--accent-soft);}
.md > blockquote:first-child code{background:var(--accent-soft);color:var(--ink);}
.md > blockquote:first-child a{color:var(--accent-soft);}
.md > blockquote:first-child blockquote{transform:none;background:var(--dark-3);color:var(--white);padding:8px 14px;margin:.6em 0 0;}
.md img{display:block;margin:1em 0;box-shadow:6px 6px 0 rgb(var(--shade) / .25);}
.md details{background:var(--tint);padding:8px 14px;margin:1em 0;}
.md summary{cursor:pointer;font-weight:700;}
.md table{border-collapse:collapse;margin:1em 0;}
.md th,.md td{border:2px solid var(--black);padding:4px 10px;}
.reader-loading{letter-spacing:.3em;text-transform:uppercase;font-weight:700;animation:liveBlink 1s infinite;}

/* ============ ABOUT: RÉSUMÉ TIMELINE ============ */
.timeline-paper{max-width:760px;}
#timeline{list-style:none;position:relative;margin-top:14px;padding-left:26px;}
#timeline::before{
  content:"";position:absolute;left:6px;top:6px;bottom:6px;width:4px;background:var(--black);
}
#timeline li{position:relative;margin-bottom:20px;}
#timeline li::before{
  content:"";position:absolute;left:-27px;top:5px;width:16px;height:16px;
  background:var(--accent);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.tl-when{
  display:inline-block;background:var(--black);color:var(--white);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;font-size:12px;padding:2px 9px;transform:skewX(-10deg);
}
.tl-what{font-family:'Archivo Black','Arial Black',Impact,sans-serif;text-transform:uppercase;font-size:19px;line-height:1.1;margin-top:6px;}
.tl-where{font-weight:700;color:var(--accent);letter-spacing:.06em;font-size:15px;}
#timeline p{font-size:16.5px;line-height:1.45;color:var(--ink-soft);}
.paper.timeline-paper + .cv-btn{align-self:flex-end;}

/* ============ CALLING CARD ============ */
#calling-card{
  position:fixed;inset:0;z-index:70;display:grid;place-items:center;
  background:rgb(var(--shade) / .6);opacity:0;transition:opacity .35s;padding:16px;
}
#calling-card.open{opacity:1;}
#calling-card[hidden]{display:none;}
#calling-card .card-inner{
  max-width:560px;background:var(--accent);color:var(--white);padding:34px 34px 30px;
  font-size:19px;line-height:1.5;font-weight:600;position:relative;
  clip-path:polygon(0 5%, 6% 0, 100% 3%, 97% 94%, 92% 100%, 2% 97%);
  transform:rotate(-4deg) scale(.6);transition:transform .45s var(--ease-punch);
  background-image:radial-gradient(circle, rgb(var(--shade) / .25) 1.6px, transparent 1.7px);
  background-size:12px 12px;
}
#calling-card.open .card-inner{transform:rotate(-4deg) scale(1);}
.cc-head .ransom{font-size:clamp(34px,6vw,58px);}
.cc-head{margin-bottom:14px;}
#calling-card strong{background:var(--black);padding:0 6px;}
#calling-card p{margin-bottom:12px;}
.cc-sign{text-align:right;font-family:'Archivo Black','Arial Black',Impact,sans-serif;text-transform:uppercase;}
#cc-accept{border:0;cursor:pointer;margin:6px 0 0;background:var(--black);}

/* ============ HUD EXTRAS ============ */
#mute-btn{
  background:none;border:2px solid var(--white);color:var(--white);cursor:pointer;
  font:inherit;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:1px 10px;transform:skewX(-8deg);
}
#mute-btn:hover{background:var(--white);color:var(--black);}
#mute-btn[aria-pressed="true"]{opacity:.6;}
@media (pointer:coarse){ .hint-keys{display:none;} }
[hidden]{display:none !important;}

/* =====================================================================
   MOTION SYSTEM
   Snappy arrivals, fast exits. Everything below animates transform,
   opacity or clip-path; layout never moves mid-animation.
   ===================================================================== */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);        /* confident arrival */
  --ease-punch:cubic-bezier(.34,1.56,.64,1);  /* lands with a kick */
  --ease-in:cubic-bezier(.7,0,.84,0);         /* fast exit */
  --ease-snap:cubic-bezier(.85,0,.15,1);      /* wipes: hard in, hard out */
  --ease-flip:cubic-bezier(.7,-.25,.25,1.25);
}

/* ---------- browser surfaces ---------- */
::selection{background:var(--accent);color:var(--white);}
input,textarea{caret-color:var(--accent);}
:focus-visible{outline:3px solid var(--white);outline-offset:3px;box-shadow:0 0 0 6px var(--accent);}
.screen{scroll-behavior:smooth;overscroll-behavior:contain;}

/* ---------- sub-screen header row ---------- */
.screen-top{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(14px,2vw,30px);margin:1vh 0 4vh;padding-bottom:12px;
}
.screen.align-right .screen-top{flex-direction:row-reverse;}
.sub .screen-head::after{transform-origin:left;}
.back-hint{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--white);color:var(--black);border:0;cursor:pointer;
  font:700 14px/1 'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;padding:5px 14px 5px 5px;
  transform:rotate(-2deg) skewX(-10deg);
  box-shadow:4px 4px 0 rgb(var(--shade) / .4);
  transition:transform .18s var(--ease-punch), background .12s, color .12s, box-shadow .18s var(--ease-out);
}
.back-hint span{background:var(--black);color:var(--white);padding:4px 8px;transition:background .12s, color .12s;}
.back-hint:hover{background:var(--accent);color:var(--white);transform:rotate(0) skewX(-10deg) translateX(-5px);box-shadow:7px 7px 0 var(--black);}
.back-hint:hover span{background:var(--white);color:var(--accent);}
.back-hint:active{transform:skewX(-10deg) scale(.94);transition-duration:.06s;}

/* ---------- home menu: one selector that glides between items ---------- */
#menu{position:relative;}
.menu-item{position:relative;z-index:1;}
.menu-item .ransom{transition:translate .26s var(--ease-punch);}
.menu-item.sel .ransom{translate:18px 0;}
#menu-sel{
  position:absolute;left:0;top:0;z-index:0;pointer-events:none;
  width:var(--w,0px);height:var(--h,0px);
  transform:translate3d(var(--x,0px),var(--y,0px),0);
  transition:transform .34s var(--ease-punch), width .3s var(--ease-out), height .3s var(--ease-out);
}
#menu-sel i{position:absolute;inset:0;transform:skewX(-18deg);}
#menu-sel .slab{background:var(--black);clip-path:polygon(0 8%, 100% 0, 97% 100%, 2% 92%);}
#menu-sel .echo{
  background:var(--accent-soft);clip-path:polygon(2% 0, 100% 12%, 96% 92%, 0 100%);
  translate:9px 7px;transition:translate .42s var(--ease-punch) .04s;
}
#menu-sel.kick .echo{animation:echoKick .34s var(--ease-out);}
@keyframes echoKick{0%{translate:-14px 0;}100%{translate:9px 7px;}}
#menu-sel.confirm .slab{animation:confirmFlash .2s linear;}
@keyframes confirmFlash{0%,40%{background:var(--white);}100%{background:var(--black);}}
.menu-item.confirm .ransom{animation:confirmPunch .22s var(--ease-out);}
@keyframes confirmPunch{0%{scale:1;}35%{scale:1.16;}100%{scale:1.06;}}
.menu-item.sel .ch{animation:selWave .34s var(--ease-out) both;animation-delay:calc(var(--i) * 16ms);}
@keyframes selWave{
  0%{transform:var(--t);}
  40%{transform:var(--t) translateY(-22%) rotate(6deg) scale(1.08);}
  100%{transform:var(--t);}
}
.cursor-mark{
  position:absolute;right:-42px;top:50%;width:24px;height:28px;margin-top:-14px;
  background:var(--white);clip-path:polygon(100% 0, 0 50%, 100% 100%, 72% 50%);
  filter:drop-shadow(3px 3px 0 var(--black));
  opacity:0;scale:0;transition:opacity .1s, scale .22s var(--ease-punch);
}
.menu-item.sel .cursor-mark{opacity:1;scale:1;animation:nudge .7s var(--ease-out) infinite .3s;}
@keyframes nudge{0%,100%{translate:0;}45%{translate:-9px 0;}}

/* ---------- screen entrances (.enter is added on arrival, removed after) ---------- */
#screen-home.enter{--b:.06s;--s:22ms;}
.first #screen-home.enter{--b:.32s;--s:38ms;}
.screen.sub.enter{--b:.08s;}

.enter #intro-eyebrow{animation:eyebrowIn .55s var(--ease-out) both var(--b);}
@keyframes eyebrowIn{from{opacity:0;letter-spacing:1.4em;filter:blur(4px);}}
.enter #big-name .ch{animation:slam .42s var(--ease-punch) both;animation-delay:calc(var(--b) + var(--i) * var(--s));}
@keyframes slam{
  0%{opacity:0;transform:var(--t) translateY(-55%) rotate(-14deg) scale(2.6);filter:blur(5px);}
  55%{opacity:1;filter:none;}
  100%{opacity:1;transform:var(--t);}
}
.enter #tagline{animation:tagIn .5s var(--ease-out) both calc(var(--b) + .38s);}
@keyframes tagIn{
  from{clip-path:polygon(0 0,0 0,0 100%,0 100%);translate:-40px 0;}
  to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);translate:0 0;}
}
.enter .menu-item{animation:menuIn .4s var(--ease-punch) both;animation-delay:calc(var(--b) + .45s + var(--mi) * 55ms);}
@keyframes menuIn{from{opacity:0;transform:translateX(-90px) skewX(-24deg);}}
.enter #menu-sel{animation:selIn .4s var(--ease-out) both calc(var(--b) + .8s);}
@keyframes selIn{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}

.first .hud-tag{animation:hudDrop .5s var(--ease-punch) both .15s;}
.first .hud-tag.alt{animation-delay:.24s;}
@keyframes hudDrop{from{opacity:0;translate:0 -70px;rotate:-12deg;}}
.first #hud-bottom{animation:hudUp .5s var(--ease-out) both .9s;}
@keyframes hudUp{from{opacity:0;translate:0 40px;}}

.screen.sub.enter .screen-head .ch{animation:drop .4s var(--ease-punch) both;animation-delay:calc(var(--b) + var(--i) * 32ms);}
@keyframes drop{
  0%{opacity:0;transform:var(--t) translateY(-130%) rotate(-28deg) scale(1.4);}
  100%{opacity:1;transform:var(--t);}
}
.screen.sub.enter .screen-head::after{animation:underline .42s var(--ease-out) both calc(var(--b) + .2s);}
@keyframes underline{from{transform:skewX(-24deg) scaleX(0);}to{transform:skewX(-24deg) scaleX(1);}}
.screen.sub.enter .back-hint{animation:hintIn .36s var(--ease-punch) both calc(var(--b) + .3s);}
@keyframes hintIn{from{opacity:0;translate:40px 0;rotate:10deg;}}

/* ---------- scroll reveals: items enter as they scroll into view ---------- */
.js .rv:not(.in){opacity:0;translate:-60px 24px;rotate:-4deg;}
.rv.in{animation:rvIn .52s var(--ease-punch) both;animation-delay:var(--rv-d,0ms);}
@keyframes rvIn{
  from{opacity:0;translate:-60px 24px;rotate:-4deg;}
  to{opacity:1;translate:0 0;rotate:0deg;}
}
/* right-aligned screens come in from the right */
.js .align-right .rv:not(.in){translate:60px 24px;rotate:4deg;}
.align-right .rv.in{animation-name:rvInR;}
@keyframes rvInR{
  from{opacity:0;translate:60px 24px;rotate:4deg;}
  to{opacity:1;translate:0 0;rotate:0deg;}
}

/* ---------- shard wipe between screens ---------- */
#wipe{position:fixed;inset:0;z-index:50;pointer-events:none;overflow:hidden;}
#wipe.rev{transform:scaleX(-1);}
#wipe .pane{
  position:absolute;inset:-10% -45%;
  transform:translateX(-135%) skewX(-18deg);
  clip-path:polygon(0 0, 93% 0, 100% 16%, 95% 38%, 100% 58%, 94% 80%, 100% 100%, 0 100%);
}
#wipe .p1{background:var(--accent-soft);}
#wipe .p2{background:var(--black);}
#wipe .p3{background:var(--white);}
#wipe.go .pane{animation:shard .58s var(--ease-snap) both;}
#wipe.go .p2{animation-delay:.04s;}
#wipe.go .p1{animation-delay:.08s;}
@keyframes shard{
  0%{transform:translateX(-135%) skewX(-18deg);}
  44%,56%{transform:translateX(0) skewX(-18deg);}
  100%{transform:translateX(135%) skewX(-18deg);}
}
.wipe-star{
  position:absolute;left:50%;top:50%;width:min(46vmin,420px);height:min(46vmin,420px);
  margin:calc(min(46vmin,420px) / -2) 0 0 calc(min(46vmin,420px) / -2);
  fill:var(--black);stroke:var(--white);stroke-width:3;opacity:0;
}
#wipe.go .wipe-star{animation:starBurst .58s var(--ease-out) both .1s;}
@keyframes starBurst{
  0%{opacity:0;transform:scale(0) rotate(-120deg);}
  35%{opacity:1;transform:scale(1) rotate(0);}
  60%{opacity:1;transform:scale(1.1) rotate(14deg);}
  100%{opacity:0;transform:scale(2.6) rotate(40deg);}
}
/* first load: the curtain is already closed and slashes away */
.first #wipe .pane{animation:shardOut .55s var(--ease-snap) both;}
.first #wipe .p2{animation-delay:.05s;}
.first #wipe .p1{animation-delay:.1s;}
@keyframes shardOut{
  0%{transform:translateX(0) skewX(-18deg);}
  100%{transform:translateX(135%) skewX(-18deg);}
}

/* ---------- cards: tilt toward the pointer, snap on press ---------- */
.card{
  transition:transform .22s var(--ease-out), filter .22s var(--ease-out);
}
.card:hover{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.035);
  transition-duration:.12s;
}
.card:active{transform:scale(.975);transition-duration:.06s;}
.card .meta .go{transition:background .15s, transform .2s var(--ease-punch);}
.card:hover .meta .go{transform:skewX(-10deg) translateX(6px);}
.card:hover .thumb{--slash-x:-60%;}
.card .lang{transition:transform .25s var(--ease-punch);}
.card:hover .lang{transform:rotate(-3deg) translateY(-3px);}

/* ---------- skill bars fill when their group arrives ---------- */
.js .skill-bar .fill{transform:scaleX(0);}
.skill-bar .fill{transform:scaleX(var(--v,0));transition:transform .9s var(--ease-out);transition-delay:calc(.12s + var(--j,0) * 55ms);}
.skill-group:not(.in) .fill{transition:none;}
.skill-group.in .fill{transform:scaleX(var(--v,0));}
.skill-row .lv{font-variant-numeric:tabular-nums;}
.skill-row{transition:translate .2s var(--ease-out);}
.skill-row:hover{translate:8px 0;}
.skill-row:hover .name{color:var(--white);text-shadow:2px 2px 0 var(--accent);}

#stats-panel .radar .shape{transform:scale(0) rotate(-60deg);}
#stats-panel .radar.in .shape{animation:radarIn .75s var(--ease-punch) both .15s;}
@keyframes radarIn{from{transform:scale(0) rotate(-60deg);}to{transform:scale(1) rotate(0);}}
.radar .ring{transition:fill .2s;}
.stat-list li{transition:translate .2s var(--ease-out), background .15s;}
.stat-list li:hover{translate:8px 0;background:#000;}

/* ---------- trophies ---------- */
.trophy .front img{transition:transform .6s var(--ease-out), filter .3s;}
.trophy:hover .front img{transform:scale(1.08);}
.trophy .place{transition:translate .3s var(--ease-punch);}

/* ---------- writeup filters ---------- */
.wu-filter{transition:background .12s, color .12s, transform .2s var(--ease-punch), box-shadow .2s var(--ease-out);}
.wu-filter.on{transform:skewX(-10deg) translateY(-3px) scale(1.06);box-shadow:5px 5px 0 var(--accent);}
.wu-filter:active{transform:skewX(-10deg) scale(.94);transition-duration:.06s;}

/* ---------- reader: slams in, slips out ---------- */
#reader{transition:opacity .18s var(--ease-in);}
#reader.open{transition:opacity .22s var(--ease-out);}
.reader-sheet{
  transform:translateY(50px) rotate(-2.5deg) scale(.96);opacity:0;
  transition:transform .18s var(--ease-in), opacity .18s var(--ease-in);
}
#reader.open .reader-sheet{
  transform:none;opacity:1;
  transition:transform .45s var(--ease-punch), opacity .2s var(--ease-out);
}
#reader-close{margin-left:0;}

/* ---------- buttons & chips: physical press ---------- */
.cv-btn{transition:transform .2s var(--ease-punch), background .12s, color .12s, box-shadow .2s var(--ease-out);}
.cv-btn:active{transform:skewX(-8deg) scale(.93);transition-duration:.06s;}
#mute-btn{transition:background .12s, color .12s, transform .2s var(--ease-punch);}
#mute-btn:active{transform:skewX(-8deg) scale(.9);}

/* ---------- contact form result stamps ---------- */
#form-status.ok{
  color:var(--white);background:var(--accent);padding:6px 14px;
  font-family:'Archivo Black','Arial Black',Impact,sans-serif;font-size:16px;
  animation:stamp .4s var(--ease-punch) both;
}
@keyframes stamp{from{opacity:0;transform:scale(2.4) rotate(-14deg);}to{opacity:1;transform:rotate(-4deg);}}
#form-status.err{color:var(--accent);animation:shake .36s var(--ease-out);}
@keyframes shake{20%,60%{translate:-6px 0;}40%,80%{translate:6px 0;}}

/* ---------- click sparks ---------- */
.spark{
  position:fixed;left:0;top:0;z-index:9998;pointer-events:none;
  width:58px;height:58px;margin:-29px 0 0 -29px;
}
.spark::before,.spark::after{
  content:"";position:absolute;inset:0;
  clip-path:polygon(50% 0,58% 36%,100% 22%,66% 52%,96% 88%,52% 68%,22% 100%,36% 58%,0 34%,42% 36%);
}
.spark::before{background:var(--accent-soft);animation:spark .36s var(--ease-out) forwards;}
.spark::after{background:var(--white);inset:16px;animation:spark .3s var(--ease-out) forwards;}
@keyframes spark{
  0%{transform:scale(.2) rotate(0);opacity:1;}
  100%{transform:scale(1.3) rotate(50deg);opacity:0;}
}

/* ---------- reduced motion: keep state changes, drop the travel ---------- */
@media (prefers-reduced-motion:reduce){
  #bg-stripes,#bg-halftone,.bg-star,.cursor-mark,.live-dot{animation:none !important;}
  .js .rv:not(.in),.js .align-right .rv:not(.in){translate:none;rotate:none;}
  .rv.in,.align-right .rv.in{animation:fadeIn .25s linear both;}
  .enter *,.first .hud-tag,.first #hud-bottom{animation-name:fadeIn !important;animation-duration:.2s !important;animation-delay:0s !important;}
  .first #wipe .pane{animation:none;transform:translateX(135%);}
  .menu-item.sel .ch,.menu-item.confirm .ransom{animation:none;}
  #menu-sel,#menu-sel .echo,.trophy-inner,.reader-sheet,.skill-bar .fill{transition-duration:.01s !important;}
  .card:hover{transform:none;}
  .spark{display:none;}
}
@keyframes fadeIn{from{opacity:0;}}

/* ---------- trophies without a photo: halftone poster ---------- */
.trophy .front.noimg{
  background:var(--accent);
  background-image:radial-gradient(circle, rgb(var(--shade) / .32) 2px, transparent 2.1px),
                   repeating-linear-gradient(115deg, transparent 0 40px, rgb(var(--shade) / .18) 40px 46px);
  background-size:12px 12px, auto;
}
.trophy .front.noimg::after{background:linear-gradient(200deg, transparent 45%, rgb(var(--shade) / .7) 85%);}
.trophy .front.noimg .place{font-size:clamp(90px,10vw,150px);top:22%;}

/* ---------- private project cards ---------- */
.card.private{cursor:default;}
.card.private .meta .go{background:var(--dark-2);color:var(--white);}
.card.feat.private:hover .meta .go{background:var(--dark-2);}

/* ---------- phones: HUD tags stay on one line ---------- */
@media (max-width:600px){
  #hud-top{padding:12px 14px 0;gap:10px;}
  .hud-tag{font-size:11px;padding:4px 9px;letter-spacing:.1em;white-space:nowrap;}
  .screen-top{margin-bottom:2.5vh;}
}

/* =====================================================================
   CONTACT — channel cards + a P5-style phone chat
   ===================================================================== */
.contact-wrap{
  display:grid;grid-template-columns:minmax(250px,330px) minmax(320px,540px);
  gap:clamp(22px,3vw,44px);align-items:start;padding-bottom:6vh;
}

/* ---------- channels ---------- */
.channels{list-style:none;display:grid;gap:14px;padding-top:6px;}
.channel{position:relative;display:flex;align-items:stretch;}
.channel[hidden]{display:none;}
.channel-main{
  flex:1;display:block;text-decoration:none;color:var(--white);
  background:var(--black);padding:14px 22px 14px 20px;
  clip-path:polygon(0 0, 100% 6%, 97% 100%, 2% 94%);
  transition:transform .22s var(--ease-punch), background .14s, color .14s;
}
.channel:nth-child(even) .channel-main{clip-path:polygon(2% 4%, 98% 0, 100% 96%, 0 100%);}
.channel-kind{
  display:block;font-weight:700;font-size:13px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent-soft);margin-bottom:3px;transition:color .14s;
}
.channel-value{
  display:block;font-family:'Archivo Black','Arial Black',sans-serif;
  font-size:clamp(17px,1.6vw,21px);line-height:1.15;overflow-wrap:anywhere;
}
.channel-main:hover,.channel-main:focus-visible{background:var(--white);color:var(--ink);transform:translateX(-10px) rotate(-1deg);}
.channel-main:hover .channel-kind,.channel-main:focus-visible .channel-kind{color:var(--accent);}
.channel-main:active{transform:translateX(-10px) scale(.96);transition-duration:.06s;}
.channel-copy{
  align-self:center;margin-left:-8px;z-index:1;border:0;cursor:pointer;
  background:var(--accent-soft);color:var(--ink);
  font:700 13px/1 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:.18em;text-transform:uppercase;
  padding:10px 14px;transform:skewX(-10deg) rotate(3deg);
  box-shadow:4px 4px 0 rgb(var(--shade) / .45);
  transition:transform .2s var(--ease-punch), background .14s;
}
.channel-copy:hover{transform:skewX(-10deg) rotate(0) scale(1.06);background:var(--white);}
.channel-copy:active{transform:skewX(-10deg) scale(.92);}
.channel-copy.done{background:var(--white);animation:copied .36s var(--ease-punch);}
@keyframes copied{0%{scale:1.5;rotate:-10deg;}100%{scale:1;rotate:0deg;}}

/* ---------- phone ---------- */
.phone{
  position:relative;background:var(--black);color:var(--white);
  padding:16px 16px 18px;
  clip-path:polygon(0 1.5%, 3% 0, 100% 0, 100% 97%, 96% 100%, 0 100%);
  filter:drop-shadow(10px 10px 0 var(--accent-deep));
}
.phone::before{   /* halftone sheen behind the thread */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(circle, rgb(var(--soft-rgb) / .12) 1.4px, transparent 1.5px) 0 0/12px 12px;
}
.phone>*{position:relative;}
.phone-top{
  display:flex;align-items:center;gap:12px;padding:4px 6px 14px;
  border-bottom:2px solid rgb(var(--soft-rgb) / .25);margin-bottom:14px;
}
.phone-avatar{
  width:46px;height:46px;object-fit:cover;background:var(--accent-soft);
  clip-path:polygon(8% 0, 100% 6%, 92% 100%, 0 90%);
}
.phone-name{font-family:'Archivo Black','Arial Black',sans-serif;font-size:20px;text-transform:uppercase;line-height:1;}
.phone-presence{font-size:14px;letter-spacing:.06em;color:var(--on-dark-muted);margin-top:3px;}
.phone-presence::before{
  content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;
  background:#9fe0b4;vertical-align:1px;
}

.thread{list-style:none;display:flex;flex-direction:column;gap:10px;padding:2px 6px 16px;}
.msg{
  position:relative;max-width:86%;width:fit-content;padding:10px 16px;
  font-size:17px;line-height:1.4;font-weight:600;
}
.msg.in{
  align-self:flex-start;background:var(--white);color:var(--ink);margin-left:12px;
  transform:rotate(-.8deg);transform-origin:left center;
}
.msg.in:nth-child(even){transform:rotate(.6deg);}
.msg.in::before{   /* jagged tail */
  content:"";position:absolute;left:-11px;top:12px;width:14px;height:14px;background:var(--white);
  clip-path:polygon(100% 0, 0 60%, 100% 100%);
}
.msg.in strong{color:var(--accent);}
.msg.out{
  align-self:flex-end;background:var(--accent-soft);color:var(--ink);margin-right:12px;
  transform:rotate(.8deg);transform-origin:right center;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.msg.out::after{
  content:"";position:absolute;right:-11px;top:12px;width:14px;height:14px;background:var(--accent-soft);
  clip-path:polygon(0 0, 100% 60%, 0 100%);
}
.msg.in{border-radius:2px 14px 14px 10px;}
.msg.out{border-radius:14px 2px 10px 14px;}
.msg.typing{display:flex;gap:5px;padding:14px 16px;}
.msg.typing i{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:typing 1s infinite;}
.msg.typing i:nth-child(2){animation-delay:.15s;}
.msg.typing i:nth-child(3){animation-delay:.3s;}
@keyframes typing{0%,60%,100%{translate:0 0;opacity:.45;}30%{translate:0 -5px;opacity:1;}}
.msg.pop{animation:msgPop .4s var(--ease-punch) both;}
.msg.rv.in{animation-name:msgPop;}
.js .msg.rv:not(.in){translate:none;rotate:none;scale:.6;}
@keyframes msgPop{from{opacity:0;scale:.6;}to{opacity:1;scale:1;}}

/* ---------- composer ---------- */
.composer{
  position:relative;background:var(--dark-3);padding:14px 14px 12px;
  clip-path:polygon(0 4%, 100% 0, 100% 100%, 1% 97%);
}
.composer-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.composer .field{margin-bottom:10px;}
.composer .field span{color:var(--accent-soft);font-size:12px;letter-spacing:.2em;margin-bottom:4px;}
.composer .field input,.composer .field textarea{
  background:var(--black);color:var(--white);border:2px solid transparent;
  font-size:16px;padding:9px 11px;transform:none;
  transition:border-color .14s, box-shadow .2s var(--ease-out);
}
.composer .field input::placeholder,.composer .field textarea::placeholder{color:var(--placeholder);}
.composer .field input:focus,.composer .field textarea:focus{
  border-color:var(--accent-soft);box-shadow:4px 4px 0 var(--accent);
}
.composer .field textarea{min-height:84px;}
.composer .form-foot{justify-content:space-between;margin-top:2px;}
.composer #form-status{color:var(--on-dark-muted);}
.composer #form-status.err{color:var(--blush);}
.form-send{
  margin-left:auto;border:0;cursor:pointer;background:var(--accent);color:var(--white);
  font-family:'Archivo Black','Arial Black',sans-serif;font-size:17px;text-transform:uppercase;
  padding:11px 22px 11px 24px;transform:skewX(-10deg);
  box-shadow:5px 5px 0 var(--accent-soft);
  transition:transform .2s var(--ease-punch), background .14s, box-shadow .2s var(--ease-out);
}
.form-send span{display:inline-flex;align-items:center;gap:10px;transform:skewX(10deg);}
.form-send span::after{   /* drawn send arrow */
  content:"";width:14px;height:14px;background:currentColor;
  clip-path:polygon(0 0, 100% 50%, 0 100%, 22% 50%);
  transition:translate .2s var(--ease-punch);
}
.form-send:hover{background:var(--white);color:var(--accent);transform:skewX(-10deg) translateX(4px);box-shadow:7px 7px 0 var(--accent);}
.form-send:hover span::after{translate:4px 0;}
.form-send:active{transform:skewX(-10deg) scale(.93);transition-duration:.06s;}
.form-send:disabled{opacity:.55;cursor:wait;}

@media (max-width:980px){
  .contact-wrap{grid-template-columns:1fr;max-width:560px;width:100%;}
}
@media (max-width:520px){
  .composer-row{grid-template-columns:1fr;}
  .msg{font-size:16px;max-width:92%;}
}
@media (prefers-reduced-motion:reduce){
  .msg.typing i{animation:none;opacity:.8;}
  .msg.pop{animation:fadeIn .2s both;}
}

/* ---------- writeup cards: briefs read as lighter-weight entries ---------- */
.wu-badge{
  font-style:normal;display:inline-block;margin-left:6px;padding:1px 7px;
  background:var(--black);color:var(--accent-soft);transform:skewX(-10deg);font-size:12px;
}
.card.writeup.brief::before{background:var(--tint-2);}
.card.writeup.brief .meta .go{background:var(--ink-soft);}

/* cursor sprites are lavender; shift them to sky on the sky-palette screens */
body:not([data-screen="skills"]):not([data-screen="about"]):not([data-screen="contact"]) #cursor{
  filter:hue-rotate(-62deg) saturate(1.15);
}