/* Homepage, in Atshaya's direction: her photo big on graph paper, the details a size smaller, her art
   a click away; ink outlines, offset shadows and her handwriting carry the theme; work filed in folders. */

.home { overflow: hidden; }
@supports (overflow: clip) { .home { overflow: clip; } }
.section { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(88px, 11vw, 150px) var(--gutter) 0; scroll-margin-top: calc(var(--header-h) - 70px); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-title { font: 700 clamp(64px, 9vw, 132px)/.84 var(--font); font-stretch: 75%; letter-spacing: -.004em; color: var(--ink); }
.section-lead { max-width: 36ch; padding-bottom: 8px; font-size: 18px; line-height: 1.5; color: var(--text); }

/* -------------------------------------------------------------------- Hero */
/* Graph paper, her photo on a plain disc, the details at a smaller size so her face leads. */

.hero {
  position: relative; border-bottom: 2px solid var(--ink); background-color: #f7f5f0;
  background-image: linear-gradient(#19171c1c 1px, transparent 1px), linear-gradient(90deg, #19171c1c 1px, transparent 1px);
  background-size: 36px 36px; background-position: -1px -1px;
}
.hero-stage {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 24px;
  max-width: calc(var(--max) + 2 * var(--gutter)); min-height: clamp(620px, calc(100svh - var(--header-h)), 860px); margin: 0 auto; padding: 0 var(--gutter);
}
.hero-copy { position: relative; z-index: 4; padding: 48px 0; }
.hero-hi { font-size: clamp(30px, 2.6vw, 38px); line-height: 1; color: var(--violet-strong); rotate: -3deg; }
.hero-title { margin-top: 10px; font: 700 clamp(46px, 5.2vw, 78px)/.92 var(--font); font-stretch: 78%; letter-spacing: -.012em; color: var(--ink); }
.hero-line { max-width: 24ch; margin-top: 20px; font: 500 clamp(20px, 1.75vw, 25px)/1.3 var(--font); letter-spacing: -.01em; color: var(--ink); }
.hero-why { max-width: 40ch; margin-top: 14px; padding: 12px 16px; border: 2px dashed #19171c33; border-radius: 14px; background: #fffdf8cc; font-size: 16.5px; line-height: 1.55; color: var(--text); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.hero-portrait { position: relative; align-self: stretch; display: grid; place-items: end center; }
.hero-disc {
  position: absolute; left: 50%; bottom: 20%; width: min(80%, 540px); aspect-ratio: 1; translate: -50% 0; border: 2px solid var(--ink); border-radius: 50%;
  background: #fff; box-shadow: 8px 8px 0 var(--ink);
}
.hero-photo {
  position: relative; z-index: 2; display: block; width: min(96%, 620px); aspect-ratio: 791 / 924; margin: 0; padding: 0; border: 0; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent; --bw: clamp(118px, 10vw, 156px);
}
.hero-photo:focus-visible { outline: 3px solid var(--violet); outline-offset: 6px; border-radius: 24px; }
.photo-real, .photo-drawn { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; transition: opacity .45s ease, transform .6s var(--ease-out); }
.photo-real { object-fit: contain; object-position: 50% 100%; }
.photo-drawn { object-fit: contain; object-position: 50% 100%; opacity: 0; transform: rotate(5deg) scale(.94); transform-origin: 50% 100%; filter: drop-shadow(8px 0 0 #16131d14); }
.is-art .photo-real { opacity: 0; transform: rotate(-5deg) scale(.94); }
.is-art .photo-drawn { opacity: 1; transform: none; }

/* Her art fans out from behind the photo. */
.hero-fan { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fan-card {
  position: absolute; left: 50%; top: 42%; width: min(30%, 190px); padding: 8px 8px 22px; border: 2px solid var(--ink); border-radius: 6px;
  background: #fff; box-shadow: 5px 5px 0 var(--ink); opacity: 0; translate: -50% -50%; scale: .5; transition: translate .6s var(--ease-out), rotate .6s var(--ease-out), scale .5s var(--ease-out), opacity .3s ease;
}
.fan-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
.is-art .fan-card { opacity: 1; scale: 1; }
.is-art .fan-0 { translate: -150% -92%; rotate: -11deg; transition-delay: .05s; }
.is-art .fan-1 { translate: 52% -100%; rotate: 9deg; transition-delay: .12s; }
.is-art .fan-2 { translate: -142% 12%; rotate: -5deg; transition-delay: .19s; }
.is-art .fan-3 { translate: 46% 8%; rotate: 7deg; transition-delay: .26s; }

/* Her speech bubble: the click-me. */
.bubble { position: absolute; right: -4%; top: 3%; z-index: 3; width: var(--bw); aspect-ratio: 155 / 157; container-type: inline-size; pointer-events: none; transition: scale .3s var(--ease-out); }
.bubble img { width: 100%; height: auto; filter: drop-shadow(0 6px 10px #16131d26); }
.bubble span {
  position: absolute; left: 49%; top: 40%; transform: translate(-50%, -50%) rotate(-9deg); text-align: center; white-space: nowrap;
  font: 17cqi/.98 var(--font-hand); color: var(--ink); transition: opacity .3s ease-out;
}
.bubble small { display: block; margin-top: 3cqi; font-size: 11.5cqi; color: var(--violet-strong); }
.bubble-art { opacity: 0; }
.hero-photo:hover .bubble, .hero-photo:focus-visible .bubble { scale: 1.07; }
.is-art .bubble-default { opacity: 0; }
.is-art .bubble-art { opacity: 1; }

/* Sticker facts: real information, and something to play with. */
.stickers { position: absolute; inset: 0; z-index: 5; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.sticker { pointer-events: auto; }
.sticker {
  position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 11px;
  border: 2px solid var(--ink); border-radius: 999px; background: #fff; box-shadow: 4px 4px 0 var(--ink);
  font: 600 clamp(13.5px, 1.05vw, 16px)/1 var(--font); color: var(--ink); white-space: nowrap; rotate: var(--tilt, 0deg);
  cursor: grab; touch-action: none; user-select: none; transition: box-shadow .2s, scale .2s var(--ease-out);
}
.sticker .icon { width: 16px; height: 16px; }
.sticker:hover { scale: 1.04; }
.sticker.is-dragging { z-index: 9; cursor: grabbing; scale: 1.08; box-shadow: 8px 8px 0 var(--ink); }
.sticker-role { left: -4%; top: 16%; background: var(--yellow); --tilt: -5deg; }
.sticker-place { right: 2%; top: 46%; background: #c8eedb; --tilt: 6deg; }
.sticker-data { left: -2%; top: 58%; --tilt: -4deg; }
.sticker-art { right: 0; top: 74%; background: #ffd1e3; --tilt: 7deg; }

/* One orchestrated entrance: she rises onto the paper, then the stickers land. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-photo, .js .hero-disc { animation: step-up .9s cubic-bezier(.2, .8, .2, 1) .1s both; }
  .js .sticker { animation: land .55s cubic-bezier(.3, 1.6, .5, 1) both; }
  .js .sticker-role { animation-delay: .7s; }
  .js .sticker-place { animation-delay: .8s; }
  .js .sticker-data { animation-delay: .9s; }
  .js .sticker-art { animation-delay: 1s; }
  .js .bubble { animation: bob 1.6s ease-out 1.6s infinite; }
  .js .hero-copy > * { animation: fade .6s ease both; }
  .js .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .js .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .js .hero-copy > :nth-child(4) { animation-delay: .24s; }
  .js .hero-copy > :nth-child(5) { animation-delay: .32s; }
}
@keyframes step-up { from { transform: translateY(8%); opacity: 0; } }
@keyframes land { from { transform: scale(.3) rotate(-12deg); opacity: 0; } }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } }
@keyframes bob { 0%, 12.5%, 100% { transform: rotate(-3.5deg); } 31.25%, 81.25% { transform: rotate(9deg); } }

/* ---------------------------------------------------------------- Toolbelt */
/* The tools she uses, then how she works: two belts running in opposite directions. */

.toolbelt { border-bottom: 2px solid var(--ink); }
.belt { position: relative; display: flex; align-items: center; overflow: hidden; }
.belt-tools { background: #fff; border-bottom: 2px solid var(--ink); }
.belt-skills { background: var(--yellow); }
.belt-label {
  position: relative; z-index: 2; flex: none; align-self: stretch; display: grid; place-items: center; padding: 0 22px 0 var(--gutter);
  border-right: 2px solid var(--ink); background: inherit; font-size: 26px; color: var(--violet-strong); white-space: nowrap;
}
.belt-window { display: flex; overflow: hidden; }
.belt-track { display: flex; flex: none; align-items: center; gap: 12px; margin: 0; padding: 12px 6px; list-style: none; animation: belt 34s linear infinite; }
.belt-skills .belt-track { animation-duration: 46s; animation-direction: reverse; }
.belt.is-paused .belt-track { animation-play-state: paused; }
.belt-tools li {
  padding: 9px 16px 10px; border: 2px solid var(--ink); border-radius: 999px; background: #f7f5f0; box-shadow: 3px 3px 0 var(--ink);
  font: 600 16px/1 var(--font); color: var(--ink); white-space: nowrap;
}
.belt-skills li { display: flex; align-items: center; gap: 12px; font: 30px/1 var(--font-hand); color: var(--ink); white-space: nowrap; }
.belt-skills li::after { content: '✦'; font: 18px/1 var(--font); color: var(--violet-strong); }
@keyframes belt { to { transform: translateX(-100%); } }

/* ------------------------------------------------------------------- About */

.bento {
  display: grid; grid-template-columns: minmax(0, .95fr) repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); gap: 14px;
  grid-template-areas: 'photo head head head' 'photo story path now';
}
.cell {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(20px, 2vw, 28px); border: 2px solid var(--ink); border-radius: 24px; background: #fff;
}
.cell::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), #6d4aff1f, transparent 62%);
}
@media (hover: hover) and (pointer: fine) { .cell:hover::before { opacity: 1; } }
.cell-photo { grid-area: photo; margin: 0; padding: 0; background: var(--lav); }
.cell-photo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.cell-headline { grid-area: head; justify-content: center; background: var(--lav-soft); }
.cell-headline h2 { max-width: 14ch; font: 700 clamp(48px, 6vw, 92px)/.86 var(--font); font-stretch: 75%; letter-spacing: -.004em; color: var(--ink); }
.cell-story { grid-area: story; }
.cell-story p { font-size: 17px; line-height: 1.6; color: var(--text); }
.cell-path { grid-area: path; background: #dff3e9; }
.cell-now { grid-area: now; background: #fff6d2; }
.cell-title { font: 600 clamp(20px, 1.7vw, 24px)/1.15 var(--font); letter-spacing: -.012em; color: var(--ink); }
.cell-text { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--text); }
.now-status { display: inline-flex; align-items: center; gap: 9px; margin-bottom: auto; font: 600 14px/1 var(--font); color: var(--ink); }
.status-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #18a06a; }
.status-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid #18a06a; opacity: 0; animation: ping 2.4s ease-out infinite; }
.data-bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-bottom: auto; }
.data-bars i { display: block; width: 11px; height: calc(var(--h) * 2.2px); border-radius: 3px 3px 0 0; background: var(--teal); transform-origin: bottom; transition: transform .7s var(--ease-out) calc(.15s + var(--i) * 70ms); }
.data-bars i:nth-child(n+6) { background: var(--gold); }
.js .cell-path:not(.is-visible) .data-bars i { transform: scaleY(.08); }
@keyframes ping { 0% { opacity: .9; transform: scale(.6); } 80%, 100% { opacity: 0; transform: scale(1.6); } }

/* -------------------------------------------------------------------- Work */
/* Her work, filed in folders. They stack as you scroll, and each tab stays in view, side by side. */

.folders { position: relative; display: grid; gap: clamp(48px, 7vw, 96px); }
.folder { position: sticky; top: calc(var(--header-h) + 18px); }
.folder-she { --folder: #f4e6de; }
.folder-one { --folder: #e4efe2; }
.folder-leave { --folder: #e6e8f3; }
.folder-link { display: block; color: inherit; }
.folder-tab {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 46px; margin: 0 0 -2px calc(2% + var(--i) * 31%);
  padding: 0 24px; border: 2px solid var(--ink); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--folder);
  font: 600 14.5px/1 var(--font); letter-spacing: .01em; color: var(--ink);
}
.folder-num { font-variant-numeric: tabular-nums; color: var(--violet-strong); }
.folder-body {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); height: clamp(440px, 40vw, 560px);
  overflow: hidden; border: 2px solid var(--ink); border-radius: 26px; background: var(--folder); box-shadow: 8px 8px 0 var(--ink);
  transition: translate .3s var(--ease-out), box-shadow .3s var(--ease-out);
  scale: calc(1 - var(--cover, 0) * .04); transform-origin: 50% 0;
}
.folder-body::after { content: ''; position: absolute; inset: 0; z-index: 3; background: var(--ink); opacity: calc(var(--cover, 0) * .14); pointer-events: none; }
.folder-link:hover .folder-body { translate: 0 -4px; box-shadow: 12px 12px 0 var(--ink); }
.folder-link:focus-visible { outline: none; }
.folder-link:focus-visible .folder-body { outline: 3px solid var(--violet); outline-offset: 4px; }
.folder-media { position: relative; display: block; overflow: hidden; margin: 16px 0 16px 16px; border: 2px solid var(--ink); border-radius: 18px; background: #efebe6; isolation: isolate; }
.folder-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 30px clamp(24px, 3.6vw, 52px); }
.folder-kind { padding: 6px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; font: 600 13.5px/1.1 var(--font); color: var(--ink); }
.folder-title { margin-top: 16px; font: 700 clamp(48px, 5.4vw, 84px)/.88 var(--font); font-stretch: 75%; letter-spacing: -.004em; color: var(--ink); }
.folder-text { max-width: 40ch; margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--text); }
.folder-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.folder-tag { padding: 5px 11px; border-radius: 999px; background: #ffffffb3; font-size: 13px; color: var(--text); }
.folder-go {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 12px 18px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--ink); color: #fff; font: 600 15px/1 var(--font); box-shadow: 3px 3px 0 var(--yellow);
}
.folder-go .icon { width: 17px; height: 17px; transition: transform .25s var(--ease-out); }
.folder-link:hover .folder-go .icon { transform: translateX(4px); }
.tile-photo { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.folder-one .tile-photo { filter: brightness(.82); object-position: 50% 40%; }
.folder-leave .tile-photo { object-position: 40% 50%; }
.folder-link:hover .tile-photo { transform: scale(1.04); }

.preview-screen {
  position: absolute; z-index: 1; display: block; overflow: hidden; border: 5px solid #fff; border-radius: 12px;
  box-shadow: 0 14px 34px -10px #10231c4d; transition: transform .45s var(--ease-out);
}
.preview-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.preview-match { left: 8%; top: 13%; width: 35%; aspect-ratio: 312 / 351; transform: rotate(-4deg); }
.preview-booking { right: 7%; bottom: 9%; width: 37%; aspect-ratio: 332 / 321; transform: rotate(4deg); }
.preview-dashboard { right: 7%; top: 8%; width: 25%; aspect-ratio: 414 / 895; border: 0; border-radius: 0; background: none; box-shadow: none; transform: rotate(4deg); filter: drop-shadow(0 16px 22px #0006); }
.preview-dashboard img { object-fit: contain; }
.folder-link:hover .preview-match { transform: rotate(-2deg) translateY(-6px); }
.folder-link:hover .preview-booking, .folder-link:hover .preview-dashboard { transform: rotate(2deg) translateY(-6px); }

/* She Ride's cover art, rebuilt with the real screens. */
.she-art { position: absolute; inset: 0; overflow: hidden; background: #ecd9cf; container-type: inline-size; }
.she-sun { position: absolute; right: -14%; top: -36%; width: 72%; aspect-ratio: 1; border-radius: 50%; background: #ddb7a5; }
.she-hill { position: absolute; left: -12%; right: -12%; bottom: -30%; height: 58%; border-radius: 50% 50% 0 0; background: #91b5b2; }
.she-phones { position: absolute; inset: 0; }
.she-phone { position: absolute; width: 22%; transition: translate .5s var(--ease-out); }
.she-phone-0 { left: 16%; bottom: -12%; rotate: -9deg; }
.she-phone-1 { left: 38.5%; bottom: -2%; width: 23%; z-index: 1; }
.she-phone-2 { right: 16%; bottom: -12%; rotate: 9deg; }
.folder-link:hover .she-phone-1 { translate: 0 -3%; }
.folder-link:hover .she-phone-0 { translate: -2% -1%; }
.folder-link:hover .she-phone-2 { translate: 2% -1%; }
/* Thozhi, the She Ride mascot, waves from the front of the folder. */
.she-tz { position: absolute; z-index: 2; left: 5%; bottom: 3%; width: 19%; }
.she-tz .thozhi { display: block; width: 100%; height: auto; overflow: visible; }
.she-tz .tz-arm { transform-origin: var(--o); transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  .folder-she .folder-link:hover .she-tz .tz-wave { animation: she-wave .45s ease-in-out 4 alternate; }
}
@keyframes she-wave { to { rotate: 26deg; } }

/* -------------------------------------------------------------- Experience */

.jobs { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.job {
  display: grid; grid-template-columns: 190px minmax(0, 1fr) minmax(0, .9fr); align-items: baseline; gap: 6px 28px;
  padding: 24px 6px; border-bottom: 2px solid var(--ink);
}
.job-dates { font: 500 16px/1.3 var(--font); font-variant-numeric: tabular-nums; color: var(--muted); }
.job-role { font: 700 clamp(34px, 3.6vw, 54px)/.9 var(--font); font-stretch: 75%; color: var(--ink); }
.job-org { font-size: 17px; color: var(--text); }
.job.is-now { background: var(--lav-soft); }
.job.is-now .job-dates { color: var(--violet-strong); font-weight: 600; }
.job-pivot { padding: 14px 6px; border-bottom: 2px solid var(--ink); }
.job-pivot .hand { font-size: 28px; }
.job-detail { margin-top: 22px; border: 2px solid var(--ink); border-radius: 22px; background: #fff; }
.job-detail summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none;
  font: 600 17px/1.3 var(--font); color: var(--ink);
}
.job-detail summary::-webkit-details-marker { display: none; }
.job-detail summary::after { content: '+'; display: grid; place-items: center; width: 32px; height: 32px; border: 1.5px solid var(--ink); border-radius: 50%; font: 400 20px/1 var(--font); transition: transform .3s ease-out; }
.job-detail[open] summary::after { transform: rotate(45deg); }
.job-detail > p { max-width: 70ch; padding: 0 22px; font-size: 16.5px; line-height: 1.7; color: var(--text); }
.projects-list { margin: 14px 0 0; padding: 0 22px 20px; list-style: none; }
.projects-list li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.55; color: var(--text); }
.projects-list strong { color: var(--ink); }
.projects-list a { color: var(--violet-strong); text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------------- Art */

.art { margin-top: clamp(88px, 11vw, 150px); padding: clamp(72px, 9vw, 120px) 0; background: var(--night); color: #fff; scroll-margin-top: calc(var(--header-h) - 2px); }
.art-inner { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.art .section-title { color: var(--yellow); }
.art .section-lead { color: #e3dbf6; }
.moodboard { position: relative; height: clamp(560px, 50vw, 700px); }
.art-card {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); padding: 7px 7px 9px; border: 0; background: #fff;
  box-shadow: 0 18px 30px -14px #000c; rotate: var(--r); translate: var(--dx, 0px) var(--dy, 0px);
  cursor: grab; touch-action: pan-y; transition: rotate .35s var(--ease-out), scale .35s var(--ease-out), translate .6s var(--ease-out);
}
.art-card img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
@media (hover: hover) { .art-card:hover { z-index: 10; scale: 1.05; rotate: calc(var(--r) * .4); } }
.art-card.is-dragging { z-index: 20; scale: 1.08; cursor: grabbing; transition: rotate .35s, scale .35s; }
.moodboard-hint { position: absolute; left: 41%; top: 44%; font-size: 34px; color: var(--yellow); rotate: -6deg; }
.art-actions { display: flex; gap: 10px; margin-top: 22px; }

/* ----------------------------------------------------------------- Contact */

.contact { background: var(--lav); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.contact-inner { position: relative; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--gutter); }
.contact-title { font: 700 clamp(104px, 17vw, 260px)/.8 var(--font); font-stretch: 75%; letter-spacing: -.008em; color: var(--ink); }
.contact-text { max-width: 44ch; margin-top: 26px; font-size: 20px; line-height: 1.5; color: var(--ink); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.contact-email { margin-top: 24px; font: 600 clamp(18px, 1.8vw, 22px)/1.3 var(--font); }
.contact-email a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; overflow-wrap: anywhere; }
.contact-hand { position: absolute; right: clamp(20px, 9vw, 160px); top: clamp(60px, 9vw, 130px); font-size: clamp(34px, 3.4vw, 50px); color: #3f2a75; rotate: -8deg; }
.home ~ .site-footer { padding-top: 48px; }

/* -------------------------------------------------------------- Responsive */

@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: 'photo head head' 'photo story story' 'path now now'; }
}

@media (max-width: 900px) {
  /* Stacked hero: the words, then her photo with the stickers around it. */
  .hero-stage { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 0; padding: 30px var(--gutter) 0; }
  .hero-copy { padding: 0 0 8px; }
  .hero-actions { margin-top: 20px; }
  .hero-portrait { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; margin-top: 26px; }
  .hero-photo { width: min(88%, 480px); --bw: clamp(96px, 24vw, 132px); }
  .hero-disc { width: min(82%, 440px); bottom: 7%; box-shadow: 6px 6px 0 var(--ink); }
  .bubble { right: -3%; top: 1%; }
  .stickers { position: relative; inset: auto; order: -1; display: flex; flex-wrap: wrap; align-self: stretch; gap: 10px 8px; margin: 0 0 22px; pointer-events: auto; }
  .sticker { position: relative; left: auto; right: auto; top: auto; bottom: auto; padding: 8px 12px 9px; font-size: 13.5px; box-shadow: 3px 3px 0 var(--ink); touch-action: pan-y; }
  .fan-card { width: min(34%, 160px); }
  .is-art .fan-0 { translate: -150% -110%; }
  .is-art .fan-1 { translate: 52% -118%; }
  .is-art .fan-2 { translate: -158% -6%; }
  .is-art .fan-3 { translate: 62% -12%; }
  .folder { position: relative; top: auto; }
  .folder-tab { margin-left: 18px; }
  .folder-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; }
  .folder-media { aspect-ratio: 4 / 3; margin: 14px 14px 0; }
  .folder-copy { padding: 22px 24px 28px; }
  .job { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 760px) {
  .section { padding-top: 84px; }
  .section-title { font-size: clamp(56px, 17vw, 84px); }
  .section-lead { font-size: 16.5px; }
  .belt-label { display: none; }
  .belt-skills li { font-size: 26px; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; grid-template-areas: 'head' 'photo' 'story' 'path' 'now'; }
  .cell { border-radius: 20px; }
  .cell-photo { aspect-ratio: 1; }
  .cell-headline h2 { font-size: clamp(46px, 13vw, 64px); }
  .folder-body { border-radius: 22px; box-shadow: 6px 6px 0 var(--ink); }
  .folder-tab { height: 42px; padding: 0 18px; font-size: 13.5px; }
  .folder-title { font-size: clamp(46px, 13vw, 62px); }
  .folder-text { font-size: 16px; }
  .folder-go { width: 100%; justify-content: space-between; }
  .job { padding: 18px 4px; }
  .job-role { font-size: 36px; }
  .moodboard { display: flex; gap: 14px; height: auto; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .moodboard::-webkit-scrollbar { display: none; }
  .art-card { position: static; flex: 0 0 64%; align-self: center; translate: none; rotate: 0deg; scroll-snap-align: center; }
  .moodboard-hint, .art-actions { display: none; }
  .contact-title { font-size: clamp(84px, 27vw, 130px); }
  .contact-text { font-size: 17px; }
  .contact-actions .button { flex: 1 1 auto; }
  .contact-hand { top: 30px; right: 18px; font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .cell-path:not(.is-visible) .data-bars i { transform: none; }
  .belt-window { flex-wrap: wrap; }
  .belt-track { flex-wrap: wrap; animation: none; }
  .belt-track[aria-hidden='true'] { display: none; }
  .fan-card, .photo-real, .photo-drawn { transition: opacity .2s; }
}