/* ==========================================================================
   Moonland portfolio — Dopamine-Swiss, ported from the moonland-deck DNA.
   FIXED DNA: paper/ink base, 4 stage colors, paint-blob + Smiley Sans
   highlights, Swiss skeleton (mono labels, hairlines, "larger = lighter").
   ========================================================================== */

@font-face {
  font-family: 'Smiley Sans';
  /* self-hosted: the jsdelivr path 404s and China can't reach it anyway */
  src: url('fonts/SmileySans-Oblique.woff2') format('woff2');
  font-display: swap;
}

:root {
  --paper: #fafaf8; --ink: #0a0a0a;
  --grey-1: #e8e8e6; --grey-2: #a3a3a3; --grey-3: #737373; --grey-4: #f1f1ee;
  --c-warm-1: #FFD500; --c-warm-2: #FF4D8B; --c-cool-1: #C5E803; --c-cool-2: #2563FF;
  --accent: var(--c-cool-1);
  --sans: "Inter", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --sans-zh: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  --hand-cn: "Smiley Sans", "PingFang SC", sans-serif;
  --maxw: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--sans), var(--sans-zh);
  -webkit-font-smoothing: antialiased; line-height: 1.5;
}
html[data-lang="zh"] body { font-family: var(--sans-zh), var(--sans); }
::selection { background: var(--c-cool-1); color: var(--ink); }
img, video { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, .h-hero, .h-xl, .h-lg, .h-md { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* ---- language toggle mechanics ---- */
html[data-lang="zh"] .en { display: none !important; }
html[data-lang="en"] .zh { display: none !important; }

/* ---- type ramp (FIXED DNA, rem-adapted for scrolling pages) ---- */
.h-hero { font-weight: 200; font-size: clamp(2.9rem, 7.4vw, 6.2rem); line-height: 1.0; letter-spacing: -0.035em; }
.h-xl   { font-weight: 200; font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.08; letter-spacing: -0.025em; }
.h-lg   { font-weight: 200; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em; }
.h-md   { font-weight: 300; font-size: clamp(1.25rem, 2.1vw, 1.6rem); line-height: 1.25; letter-spacing: -0.015em; }
.lead   { font-weight: 400; font-size: clamp(1.02rem, 1.35vw, 1.2rem); line-height: 1.55; opacity: 0.85; }
.body   { font-weight: 400; font-size: max(15px, 0.98rem); line-height: 1.65; opacity: 0.8; }
.small  { font-size: 0.86rem; line-height: 1.5; opacity: 0.65; }
html[data-lang="zh"] .h-hero { font-weight: 300; letter-spacing: -0.01em; line-height: 1.12; }
html[data-lang="zh"] .h-xl, html[data-lang="zh"] .h-lg { font-weight: 300; letter-spacing: 0; line-height: 1.22; }

/* ---- paint-blob highlight (FLESH DNA) ---- */
.play {
  font-family: var(--hand-cn); font-weight: 400; color: var(--ink);
  position: relative; display: inline-block; padding: 0.02em 0.22em; margin: 0 -0.04em;
  white-space: nowrap; isolation: isolate;
}
.play::before {
  content: ""; position: absolute; inset: -0.06em -0.1em; z-index: -1;
  background-color: var(--accent);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'><path d='M12 42 Q20 16 60 16 Q100 12 132 22 Q168 10 188 32 Q202 52 184 64 Q156 78 128 68 Q94 78 62 72 Q30 82 14 60 Q2 50 12 42 Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'><path d='M12 42 Q20 16 60 16 Q100 12 132 22 Q168 10 188 32 Q202 52 184 64 Q156 78 128 68 Q94 78 62 72 Q30 82 14 60 Q2 50 12 42 Z'/></svg>");
}
.play.b::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'><path d='M18 36 Q8 14 42 10 Q82 4 112 18 Q150 6 182 22 Q204 42 192 58 Q174 78 142 70 Q104 80 72 70 Q40 78 18 62 Q-4 48 18 36 Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'><path d='M18 36 Q8 14 42 10 Q82 4 112 18 Q150 6 182 22 Q204 42 192 58 Q174 78 142 70 Q104 80 72 70 Q40 78 18 62 Q-4 48 18 36 Z'/></svg>");
}
.play.c::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'><path d='M10 40 Q28 8 58 18 Q92 6 120 14 Q158 4 188 22 Q204 40 196 58 Q188 76 156 70 Q128 80 100 72 Q72 82 42 70 Q14 78 6 56 Q-2 44 10 40 Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'><path d='M10 40 Q28 8 58 18 Q92 6 120 14 Q158 4 188 22 Q204 40 196 58 Q188 76 156 70 Q128 80 100 72 Q72 82 42 70 Q14 78 6 56 Q-2 44 10 40 Z'/></svg>");
}
.play.warm::before { background-color: var(--c-warm-1); }
.play.pink::before { background-color: var(--c-warm-2); }
.play.cool::before { background-color: var(--c-cool-1); }
.play.blue::before { background-color: var(--c-cool-2); }
.play.pink, .play.blue { color: #fff; }

/* ---- Swiss furniture ---- */
.kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0.6; margin-bottom: 1.4rem; display: inline-flex; align-items: center; gap: 0.8em; white-space: nowrap;
}
.kicker .sep { width: 24px; height: 1px; background: currentColor; opacity: 0.6; display: inline-block; }
.tag {
  display: inline-flex; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 5px 9px; border: 1px solid currentColor; opacity: 0.8; width: max-content; white-space: nowrap; line-height: 1;
}
.tag.warm { background: var(--c-warm-1); color: var(--ink); border-color: transparent; opacity: 1; }
.tag.pink { background: var(--c-warm-2); color: #fff; border-color: transparent; opacity: 1; }
.tag.cool { background: var(--c-cool-1); color: var(--ink); border-color: transparent; opacity: 1; }
.tag.blue { background: var(--c-cool-2); color: #fff; border-color: transparent; opacity: 1; }
.tag.ghost { opacity: 0.5; }
.rule { height: 1px; background: currentColor; opacity: 0.15; }
.rule.c { height: 2px; opacity: 1; width: 80px; }
.rule.c.warm { background: var(--c-warm-1); } .rule.c.pink { background: var(--c-warm-2); }
.rule.c.cool { background: var(--c-cool-1); } .rule.c.blue { background: var(--c-cool-2); }
.num { font-family: var(--mono); font-weight: 300; font-size: 12px; letter-spacing: 0.1em; opacity: 0.45; white-space: nowrap; }
.mono { font-family: var(--mono); }

/* ---- page structure ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(24px, 7vw, 96px); }
section { padding: clamp(5rem, 14vh, 11rem) 0; }
section + section { border-top: 1px solid var(--grey-1); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.sec-head .lead { max-width: 44ch; }

/* top chrome bar */
nav.top {
  position: sticky; top: 0; z-index: 50; background: rgba(250,250,248,0.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--grey-1);
}
nav.top .wrap {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; height: 54px;
}
nav.top .links { display: flex; gap: 1.6em; align-items: center; }
nav.top a { text-decoration: none; opacity: 0.6; }
nav.top a:hover, nav.top a.active { opacity: 1; }
nav.top .brand { opacity: 1; font-weight: 600; letter-spacing: 0.2em; display: inline-flex; align-items: center; gap: 0.6em; }
nav.top .brand i { width: 10px; height: 10px; background: var(--c-cool-1); display: inline-block; border-radius: 50%; }
.lang-btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  background: none; border: 1px solid var(--grey-2); padding: 5px 10px; cursor: pointer; color: var(--ink);
}
.lang-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---- hero (home) ---- */
#hero { padding: clamp(3.5rem, 9vh, 6.5rem) 0 clamp(3rem, 8vh, 5.5rem); }
.hero-grid { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero-grid .lead { margin-top: 1.8rem; max-width: 58ch; }
.hooks { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2rem; }
.contact { margin-top: 2.4rem; display: flex; gap: 1.6em; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; flex-wrap: wrap; }
.contact a { text-decoration: none; border-bottom: 2px solid var(--c-cool-1); padding-bottom: 2px; }
.contact a:hover { background: var(--c-cool-1); }
.portrait { position: relative; aspect-ratio: 4 / 5; max-width: 340px; justify-self: end; width: 100%; }
.portrait img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250' preserveAspectRatio='none'><path d='M22 60 Q10 18 60 14 Q120 2 168 22 Q204 40 194 96 Q206 160 184 214 Q160 250 96 244 Q30 248 14 200 Q-6 140 22 60 Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250' preserveAspectRatio='none'><path d='M22 60 Q10 18 60 14 Q120 2 168 22 Q204 40 194 96 Q206 160 184 214 Q160 250 96 244 Q30 248 14 200 Q-6 140 22 60 Z'/></svg>");
}
.portrait::before {
  content: ""; position: absolute; inset: 6% -6% -6% 6%; z-index: -1; background: var(--c-warm-1);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250' preserveAspectRatio='none'><path d='M30 40 Q20 8 80 10 Q140 -4 180 30 Q210 70 190 120 Q206 180 170 226 Q130 256 70 240 Q14 232 10 170 Q-8 100 30 40 Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250' preserveAspectRatio='none'><path d='M30 40 Q20 8 80 10 Q140 -4 180 30 Q210 70 190 120 Q206 180 170 226 Q130 256 70 240 Q14 232 10 170 Q-8 100 30 40 Z'/></svg>");
}
.portrait .cap { position: absolute; left: 0; bottom: -2.2rem; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.5; }

/* ---- work cards (home) ---- */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 2.4vw, 2rem); margin-top: 2.6rem; }
.work-card {
  border: 1px solid var(--ink); text-decoration: none; display: flex; flex-direction: column; background: var(--paper);
  transition: transform 0.15s ease, box-shadow 0.15s ease; position: relative; overflow: hidden;
}
.work-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--shadow, var(--c-cool-1)); }
.work-card.warm { --shadow: var(--c-warm-1); } .work-card.pink { --shadow: var(--c-warm-2); }
.work-card.cool { --shadow: var(--c-cool-1); } .work-card.blue { --shadow: var(--c-cool-2); }
.work-card .thumb { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--ink); background: var(--grey-4); }
.work-card .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.4s ease; }
.work-card:hover .thumb img { transform: scale(1.03); }
.work-card .thumb.dark { background: #0a0a0a; }
.work-card .thumb.pad img { object-fit: contain; padding: 1.2rem; }
.work-card .meta { padding: 1.3rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.work-card .meta .row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.work-card h3 { font-weight: 500; font-size: 1.28rem; letter-spacing: -0.015em; line-height: 1.25; }
.work-card .body { flex: 1; }
.work-card .cta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }
.work-card:hover .cta { opacity: 1; }
.work-card.featured { grid-column: span 2; display: grid; grid-template-columns: 1.1fr 0.9fr; }
.work-card.featured .thumb { aspect-ratio: auto; border-bottom: none; border-right: 1px solid var(--ink); min-height: 320px; }
.work-card.featured .meta { padding: 2rem; justify-content: center; }
.work-card.featured h3 { font-size: 1.7rem; font-weight: 400; }

/* ---- harness strip ---- */
.harness { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.4rem; }
.harness .h { border-top: 1px solid var(--ink); padding-top: 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.harness .h h3 { font-weight: 500; font-size: 1.1rem; }

/* ---- playground cards ---- */
.apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 2.2vw, 1.8rem); margin-top: 2.6rem; }
.app-card {
  border: 1px solid var(--ink); text-decoration: none; display: flex; flex-direction: column; position: relative; background: var(--paper);
  transition: transform 0.15s ease, box-shadow 0.15s ease; overflow: hidden;
}
.app-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--shadow, var(--c-cool-1)); }
.app-card.warm { --shadow: var(--c-warm-1); } .app-card.pink { --shadow: var(--c-warm-2); }
.app-card.cool { --shadow: var(--c-cool-1); } .app-card.blue { --shadow: var(--c-cool-2); }
.app-card .shot { aspect-ratio: 16 / 10; background: var(--grey-4); border-bottom: 1px solid var(--ink); overflow: hidden; position: relative; }
.app-card .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.app-card .shot .lock {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.5rem;
  background: rgba(10,10,10,0.55); color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  backdrop-filter: blur(2px);
}
.app-card .shot .lock b { font-size: 22px; }
.app-card .meta { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.app-card .meta .row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.app-card h3 { font-weight: 500; font-size: 1.15rem; letter-spacing: -0.01em; }
.app-card .arrow { font-family: var(--mono); opacity: 0.45; }
.app-card .url { font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; opacity: 0.45; word-break: break-all; }

/* ---- about / timeline ---- */
.about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); margin-top: 2.4rem; }
.tl .row { display: grid; grid-template-columns: 120px 1fr; gap: 1.4rem; padding: 0.95rem 0; border-bottom: 1px solid var(--grey-1); align-items: baseline; }
.tl .row:first-child { border-top: 1px solid var(--ink); }
.tl .when { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; opacity: 0.5; white-space: nowrap; }
.tl .what strong { font-weight: 500; }
.tl .what .body { margin-top: 0.15rem; font-size: 0.93rem; }
.skills { display: flex; flex-direction: column; gap: 1.4rem; }
.skills .sk { border-top: 1px solid var(--ink); padding-top: 0.9rem; }
.skills .sk h4 { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.55; margin-bottom: 0.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { font-size: 0.86rem; padding: 4px 9px; background: var(--grey-4); border-radius: 2px; }

/* ---- finale footer — liquid metal (FLOATING: angle 160deg, 19s/24s) ---- */
#finale {
  position: relative; overflow: hidden; background-color: #d6dbe1; color: var(--ink);
  padding: clamp(4.5rem, 12vh, 8rem) 0; border-top: 1px solid var(--grey-1);
}
#finale::before {
  content: ""; position: absolute; inset: -10%; z-index: 0;
  background: conic-gradient(from 160deg at 42% 55%,
    #eef1f4, #cfd9ea, #e9c8e0, #f3dfc4, #c6ecd8, #b9c6ea, #efe3c6, #d3d9e1, #eef1f4);
  filter: saturate(1.5) contrast(1.04);
  animation: finaleLiquid 19s ease-in-out infinite alternate;
}
#finale::after {
  content: ""; position: absolute; inset: -22%; z-index: 0;
  background:
    radial-gradient(38% 40% at 24% 28%, rgba(96,196,255,0.55), transparent 66%),
    radial-gradient(40% 42% at 80% 36%, rgba(255,128,200,0.5), transparent 66%),
    radial-gradient(42% 44% at 52% 86%, rgba(150,255,200,0.5), transparent 66%),
    radial-gradient(38% 40% at 34% 74%, rgba(255,214,120,0.5), transparent 66%);
  filter: blur(58px) saturate(1.3); mix-blend-mode: overlay;
  animation: finaleLiquid2 24s ease-in-out infinite alternate;
}
#finale .wrap { position: relative; z-index: 1; }
@keyframes finaleLiquid  { 0% { transform: scale(1.05) translate(0,0); } 100% { transform: scale(1.22) translate(-2%,3%); } }
@keyframes finaleLiquid2 { 0% { transform: translate(0,0) rotate(0deg); } 100% { transform: translate(4%,-3%) rotate(6deg); } }
.ribbon { display: flex; height: 16px; width: min(44ch, 100%); margin-top: 1.8rem; }
.ribbon span { flex: 1; }
.ribbon .a { background: var(--c-warm-1); } .ribbon .b { background: var(--c-warm-2); }
.ribbon .c { background: var(--c-cool-1); } .ribbon .d { background: var(--c-cool-2); }
#finale .cta { margin-top: 2.4rem; display: flex; gap: 1.2em; flex-wrap: wrap; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; }
#finale .cta a { text-decoration: none; background: var(--paper); border: 1px solid var(--ink); padding: 12px 20px; }
#finale .cta a:hover { background: var(--ink); color: var(--paper); }
footer { border-top: 1px solid var(--grey-1); }
footer .wrap {
  display: flex; justify-content: space-between; gap: 1em; flex-wrap: wrap; padding-top: 1.1rem; padding-bottom: 1.3rem;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.5;
}

/* ==========================================================================
   Case-study pages
   ========================================================================== */
.case-hero { padding: clamp(3rem, 8vh, 5.5rem) 0 clamp(2rem, 5vh, 3.5rem); }
.case-hero .lead { margin-top: 1.6rem; max-width: 62ch; }
.case-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 2.4rem; border-top: 1px solid var(--ink); padding-top: 1.2rem; }
.case-meta .m h4 { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.55; margin-bottom: 0.4rem; }
.case-meta .m p { font-size: 0.95rem; }
.case-cover { margin-top: 2.6rem; border: 1px solid var(--ink); overflow: hidden; background: var(--grey-4); }
.case-cover.dark { background: #0a0a0a; }
.case-cover img { width: 100%; }
.case-cover figcaption, figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; opacity: 0.55; padding: 0.6rem 0.9rem; border-top: 1px solid var(--grey-1); }

.case-sec .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); margin-top: 2rem; align-items: start; }
.case-sec .grid-2 .cell + .cell { border-left: 1px solid var(--grey-1); padding-left: clamp(1.4rem, 3vw, 2.6rem); }
.case-sec h4.lbl { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.55; margin-bottom: 0.7rem; }
.case-sec .body + .body { margin-top: 0.9rem; }

.decisions { margin-top: 2.4rem; display: flex; flex-direction: column; }
.decision { display: grid; grid-template-columns: 56px 1fr; gap: 1.2rem; padding: 2rem 0; border-top: 1px solid var(--grey-1); }
.decision:last-child { border-bottom: 1px solid var(--grey-1); }
.decision .n { font-family: var(--mono); font-weight: 300; font-size: 1.6rem; opacity: 0.35; line-height: 1; }
.decision h3 { font-weight: 400; font-size: 1.35rem; letter-spacing: -0.015em; margin-bottom: 0.6rem; line-height: 1.3; }
.decision .body { max-width: 66ch; }
.decision figure { margin-top: 1.4rem; border: 1px solid var(--grey-1); background: var(--grey-4); overflow: hidden; }
.decision figure.dark { background: #0a0a0a; border-color: var(--ink); }
.decision figure img { width: 100%; }
.decision .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
.decision .two figure { margin-top: 0; }
.decision .shots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.8rem; margin-top: 1.4rem; }
.decision .shots img { border: 1px solid var(--grey-1); }
.decision ul.pts { list-style: none; margin-top: 0.8rem; max-width: 66ch; }
.decision ul.pts li { display: flex; gap: 0.8em; padding: 0.45em 0; border-bottom: 1px dashed var(--grey-1); align-items: baseline; }
.decision ul.pts li:last-child { border-bottom: none; }
.decision ul.pts .num { padding-top: 0.2em; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2.2rem; }
.stat { border-top: 2px solid var(--ink); padding-top: 0.9rem; }
.stat .v { font-weight: 200; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; line-height: 1; }
.stat .v small { font-size: 0.5em; opacity: 0.6; letter-spacing: 0; }
.stat .k { margin-top: 0.5rem; font-size: 0.9rem; opacity: 0.7; }
.stat.warm { border-color: var(--c-warm-1); } .stat.pink { border-color: var(--c-warm-2); }
.stat.cool { border-color: var(--c-cool-1); } .stat.blue { border-color: var(--c-cool-2); }

.verdict { margin-top: 2.2rem; padding: 1.3rem 1.5rem; border-left: 3px solid var(--c-cool-2); background: var(--grey-4); max-width: 72ch; }
.verdict.pinkb { border-left-color: var(--c-warm-2); } .verdict.warmb { border-left-color: var(--c-warm-1); } .verdict.coolb { border-left-color: var(--c-cool-1); }
.quote { margin-top: 2.2rem; max-width: 60ch; }
.quote .h-md { font-weight: 300; }
.quote .who { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.5; margin-top: 0.8rem; }

.links-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: 1.4rem; font-family: var(--mono); font-size: 12.5px; }
.links-row a { text-decoration: none; border-bottom: 1.5px solid var(--c-cool-2); padding-bottom: 1px; }
.links-row a:hover { background: var(--c-cool-2); color: #fff; }

.next-case { border-top: 1px solid var(--ink); }
.next-case .wrap { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding-top: 2.4rem; padding-bottom: 2.4rem; flex-wrap: wrap; }
.next-case a { text-decoration: none; }
.next-case .h-lg { font-weight: 300; }
.next-case a:hover .h-lg { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--c-cool-1); }

.video-frame { border: 1px solid var(--ink); background: #0a0a0a; overflow: hidden; }
.video-frame video { width: 100%; }
.phone-row { display: flex; gap: 1rem; align-items: flex-start; }
.phone-row .video-frame { width: 240px; flex: none; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .portrait { justify-self: start; max-width: 260px; margin-top: 1rem; }
  .work-grid, .apps, .harness { grid-template-columns: 1fr; }
  .work-card.featured { grid-column: span 1; grid-template-columns: 1fr; }
  .work-card.featured .thumb { border-right: none; border-bottom: 1px solid var(--ink); min-height: 0; aspect-ratio: 16 / 9; }
  .about-grid { grid-template-columns: 1fr; }
  .case-meta { grid-template-columns: 1fr 1fr; }
  .case-sec .grid-2 { grid-template-columns: 1fr; }
  .case-sec .grid-2 .cell + .cell { border-left: none; padding-left: 0; border-top: 1px solid var(--grey-1); padding-top: 1.4rem; }
  .decision { grid-template-columns: 1fr; gap: 0.5rem; }
  .decision .two { grid-template-columns: 1fr; }
  .decision .shots { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: 1fr 1fr; }
  nav.top a.navlink { display: none; }
  .tl .row { grid-template-columns: 1fr; gap: 0.2rem; }
}


/* ==========================================================================
   v2 · Workbench skeleton (option C), motion, edit mode
   ========================================================================== */
/* masthead with tabs */
.mast { position: sticky; top: 0; z-index: 50; background: rgba(250,250,248,0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--ink); }
.mast .wrap { display: flex; align-items: center; justify-content: space-between; height: 58px; gap: 1rem; }
.mast .brand { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; font-weight: 600; text-decoration: none; display: inline-flex; gap: 0.6em; align-items: center; }
.mast .brand i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-cool-1); }
.tabs { display: flex; border: 1px solid var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.tabs a { padding: 8px 16px; text-decoration: none; border-right: 1px solid var(--ink); white-space: nowrap; transition: background .15s; }
.tabs a:last-child { border-right: none; }
.tabs a.on { background: var(--ink); color: var(--paper); }
.tabs a:hover:not(.on) { background: var(--grey-4); }
.mast .right { display: flex; gap: 0.7rem; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; }
.mast .right a { text-decoration: none; opacity: 0.7; } .mast .right a:hover { opacity: 1; }
.edit-btn { all: unset; cursor: pointer; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; opacity: 0.35; font-size: 13px; }
.edit-btn:hover { opacity: 1; background: var(--grey-4); }
.edit-btn.on { opacity: 1; background: var(--c-warm-1); }

/* hero (workbench) */
.hero-c { min-height: calc(100vh - 58px); padding: clamp(3rem, 8vh, 5rem) clamp(24px, 7vw, 96px) clamp(5rem, 10vh, 7rem); position: relative; display: grid; grid-template-columns: 1fr auto; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero-c .lead { margin-top: 1.8rem; max-width: 46ch; }
.hero-c .status { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; display: flex; gap: 1.6rem; margin-top: 2rem; flex-wrap: wrap; }
.hero-c .status b { color: var(--c-cool-2); font-weight: 500; }
.hero-c .avatar { width: clamp(220px, 24vw, 320px); aspect-ratio: 1; position: relative; }
.hero-c .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 1px solid var(--ink); background: var(--grey-4); position: relative; z-index: 1; }
.hero-c .avatar::before { content: ""; position: absolute; inset: 8% -8% -8% 8%; border-radius: 50%; background: var(--c-warm-1); z-index: 0; }

/* master-detail bench */
.bench { display: grid; grid-template-columns: 320px minmax(0, 1fr); border: 1px solid var(--ink); margin-top: 3.5rem; min-height: 620px; background: var(--paper); }
.bench .list { border-right: 1px solid var(--ink); display: flex; flex-direction: column; }
.bench .list .hd { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 12px 16px; border-bottom: 1px solid var(--grey-1); opacity: 0.55; }
.bench .item { all: unset; cursor: pointer; display: grid; grid-template-columns: 28px 1fr; gap: 0.8rem; padding: 18px 16px; border-bottom: 1px solid var(--grey-1); align-items: start; transition: background .15s; }
.bench .item .n { font-family: var(--mono); font-size: 12px; opacity: 0.4; padding-top: 3px; }
.bench .item h3 { font-weight: 500; font-size: 1.02rem; line-height: 1.3; }
.bench .item p { font-size: 0.86rem; opacity: 0.65; margin-top: 0.3rem; }
.bench .item .tag { margin-top: 0.6rem; font-size: 10px; }
.bench .item:hover { background: var(--grey-4); }
.bench .item.on { background: var(--ink); color: var(--paper); }
.bench .item.on .n { opacity: 0.7; } .bench .item.on p { opacity: 0.75; }
.bench .stage { display: flex; flex-direction: column; min-width: 0; }
.bench .bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--grey-1); font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.bench .bar .dots { display: inline-flex; gap: 6px; } .bench .bar .dots i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.bench .view { flex: 1; background: var(--grey-4); display: grid; place-items: center; overflow: hidden; position: relative; min-height: 420px; transition: background .3s; }
.bench .view.dark { background: #0a0a0a; }
.bench .view img { position: absolute; max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; transform: translateX(24px); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.bench .view img.on { opacity: 1; transform: none; pointer-events: auto; }
.bench .view img.out { opacity: 0; transform: translateX(-24px); }
.bench .foot { padding: 18px 16px; border-top: 1px solid var(--grey-1); display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.bench .foot p { max-width: 62ch; font-size: 0.95rem; opacity: 0.8; }
.bench .foot a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--ink); padding: 10px 16px; white-space: nowrap; transition: transform .15s, box-shadow .15s; }
.bench .foot a:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--c-cool-1); }

/* carousel, one at a time */
.carousel { display: grid; grid-template-columns: 56px minmax(0,1fr) 56px; gap: 1rem; align-items: center; margin-top: 3rem; }
.carousel .nav { all: unset; cursor: pointer; border: 1px solid var(--ink); height: 56px; display: grid; place-items: center; font-family: var(--mono); transition: background .15s; }
.carousel .nav:hover { background: var(--ink); color: var(--paper); }
.carousel .frame { border: 1px solid var(--ink); aspect-ratio: 16 / 9; overflow: hidden; position: relative; background: var(--grey-4); }
.carousel .frame a.slide { position: absolute; inset: 0; opacity: 0; transform: translateX(6%); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); display: block; pointer-events: none; }
.carousel .frame a.slide.on { opacity: 1; transform: none; pointer-events: auto; }
.carousel .frame a.slide.out { opacity: 0; transform: translateX(-6%); }
.carousel .frame a.slide.back { transform: translateX(-6%); } .carousel .frame a.slide.back.out { transform: translateX(6%); }
.carousel .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255,255,255,0.25); z-index: 3; }
.carousel .bar i { display: block; height: 100%; width: 0; background: var(--c-cool-1); }
.carousel-wrap.paused .bar i { animation-play-state: paused; }
@keyframes carFill { from { width: 0; } to { width: 100%; } }
.carousel .bar i.run { animation: carFill var(--dur, 4.5s) linear forwards; }
.carousel .frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.carousel .frame .lock { position: absolute; inset: 0; background: rgba(10,10,10,0.5); color: #fff; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.carousel .lbl { position: absolute; left: 16px; bottom: 16px; background: var(--paper); border: 1px solid var(--ink); padding: 9px 14px; display: flex; gap: 0.9rem; align-items: baseline; z-index: 2; }
.carousel .lbl h4 { font-weight: 500; }
.carousel .lbl .num { opacity: 0.6; }
.thumbs { display: flex; gap: 8px; margin-top: 1rem; justify-content: center; flex-wrap: wrap; }
.thumbs button { all: unset; cursor: pointer; width: 72px; aspect-ratio: 16/10; border: 1px solid var(--grey-2); overflow: hidden; opacity: 0.5; transition: opacity .2s, box-shadow .15s, transform .15s; }
.thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button.on { opacity: 1; border-color: var(--ink); box-shadow: 3px 3px 0 var(--c-cool-1); transform: translate(-1px,-1px); }

/* reveal on scroll (one primitive, respected reduced-motion) */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } .bench .view img, .carousel .frame a.slide { transition: none; } }

/* edit mode */
html.editing [data-k] { outline: 1px dashed rgba(37,99,255,0.55); outline-offset: 2px; cursor: text; min-width: 1ch; }
html.editing [data-k]:hover { background: rgba(255,213,0,0.25); }
html.editing [data-k]:focus { outline: 2px solid var(--c-cool-2); background: rgba(197,232,3,0.25); }
html.editing [data-k].dirty { box-shadow: inset 0 -2px 0 var(--c-warm-2); }
.edit-bar { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: none; gap: 8px; align-items: center; background: var(--ink); color: var(--paper); padding: 8px 8px 8px 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
html.editing .edit-bar { display: flex; }
.edit-bar button { all: unset; cursor: pointer; padding: 8px 12px; border: 1px solid rgba(255,255,255,0.4); }
.edit-bar button.save { background: var(--c-cool-1); color: var(--ink); border-color: transparent; }
.edit-bar button:hover { opacity: 0.85; }
.edit-bar .cnt { opacity: 0.7; }

@media (max-width: 900px) {
  .hero-c { grid-template-columns: 1fr; } .hero-c .avatar { width: 200px; }
  .bench { grid-template-columns: 1fr; } .bench .list { border-right: none; border-bottom: 1px solid var(--ink); flex-direction: row; overflow-x: auto; }
  .bench .list .hd { display: none; } .bench .item { min-width: 230px; border-right: 1px solid var(--grey-1); }
  .bench .view { min-height: 300px; }
  .carousel { grid-template-columns: 1fr; } .carousel .nav { display: none; }
  .tabs a { padding: 8px 10px; letter-spacing: 0.08em; }
  .mast .right a.res { display: none; }
}


/* ---- v2.1: scroll guidance ---- */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60; background: transparent; pointer-events: none; }
.progress i { display: block; height: 100%; width: 100%; background: var(--c-cool-1); transform-origin: 0 50%; transform: scaleX(0); }
.scroll-cue { position: absolute; left: clamp(24px, 7vw, 96px); bottom: 2.2rem; display: inline-flex; align-items: center; gap: 0.8rem; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.55; text-decoration: none; }
.scroll-cue i { width: 1px; height: 44px; background: var(--ink); position: relative; overflow: hidden; display: block; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--c-cool-2); animation: cueDrop 1.8s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes cueDrop { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } }
.hero-c .h-hero { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
.hero-c .h-hero .line { display: block; }
.outline { display: flex; gap: 1.2rem 1.8rem; margin-top: 2.6rem; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; flex-wrap: wrap; }
.outline a { text-decoration: none; opacity: 0.55; display: inline-flex; gap: 0.6em; align-items: baseline; }
.outline a:hover { opacity: 1; }
.outline a b { font-weight: 400; color: var(--c-cool-2); }
@media (prefers-reduced-motion: reduce) { .scroll-cue i::after { animation: none; } }
@media (max-width: 900px) { .hero-c { min-height: 0; } .scroll-cue { display: none; } .outline { gap: 1rem 1.6rem; } }


/* ---- v2.2: mobile pass ---- */
@media (max-width: 900px) {
  .mast .wrap { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; row-gap: 10px; }
  .mast .brand { order: 1; }
  .mast .right { order: 2; }
  .tabs { order: 3; width: 100%; }
  .tabs a { flex: 1; text-align: center; padding: 9px 4px; font-size: 10px; letter-spacing: 0.08em; }
  .hero-c { padding-top: 2.5rem; padding-bottom: 3rem; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
  .hero-c > div { min-width: 0; }
  .kicker { white-space: normal; line-height: 1.6; }
  .kicker .sep { flex: none; }
  .hero-c .avatar { width: 160px; order: -1; }
  .hero-c .h-hero { font-size: clamp(2.3rem, 11vw, 3rem); }
  .hero-c .status { gap: 0.8rem 1.2rem; }
  .outline { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1rem; }
  section { padding: 4rem 0; }
  .h-xl { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  .bench { min-height: 0; }
  .bench .item { min-width: 200px; padding: 14px; }
  .bench .view { min-height: 240px; }
  .bench .foot { flex-direction: column; align-items: flex-start; }
  .carousel .frame { aspect-ratio: 4 / 3; }
  .carousel .lbl { left: 10px; bottom: 10px; padding: 7px 10px; gap: 0.6rem; flex-wrap: wrap; }
  .thumbs button { width: 52px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .case-meta { grid-template-columns: 1fr; gap: 1rem; }
  .decision .shots { grid-template-columns: repeat(3, 1fr); }
  #finale .cta a { display: block; width: 100%; text-align: center; }
  html { overflow-x: clip; } body { overflow-x: clip; }
}


/* ---- v2.3: skills module + mobile avatar at the bottom ---- */
.skills-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 3rem; }
.skill-card { border: 1px solid var(--ink); padding: 1.4rem 1.4rem 1.5rem; text-decoration: none; display: flex; flex-direction: column; gap: 0.8rem; background: var(--paper); transition: transform .15s, box-shadow .15s; }
.skill-card.cool:hover { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 var(--c-cool-1); }
.skill-card.pink:hover { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 var(--c-warm-2); }
.skill-card.ghost { border-style: dashed; border-color: var(--grey-2); }
.skill-card .row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.skill-card .star { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; opacity: 0.6; }
.skill-card h3 { font-family: var(--mono); font-weight: 500; font-size: 1.05rem; letter-spacing: -0.01em; }
.skill-card .body { flex: 1; }
.skill-card .url { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; opacity: 0.5; word-break: break-all; }
@media (max-width: 900px) {
  .skills-grid { grid-template-columns: 1fr; }
  .hero-c .avatar { order: 2; width: 150px; margin: 1.5rem 0 0 auto; }
  .hero-c { padding-top: 3.5rem; }
}

.skill-card .star { white-space: nowrap; }
.skill-card .row .tag { white-space: normal; line-height: 1.3; }