/* ============================================================
   Ling Chiu — Editorial-Pop
   White base · electric blue + neon lime · big English grotesque
   Swiss grid, sticker badges, pill chips, metric numbers, rounded cards
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

:root {
  --paper: #ffffff;
  --paper-2: #f1f1ec;
  --ink: #0b0b0d;
  --ink-soft: #6a6a72;
  --ink-faint: #a3a3ab;
  --line: rgba(11,11,13,.14);
  --blue: #2a25f0;
  --lime: #c8f23a;
  --maxw: 1280px;
  --ease: cubic-bezier(.22,1,.36,1);

  --font-display: "Archivo", "Noto Sans TC", system-ui, sans-serif;
  --font-sans: "Archivo", "Noto Sans TC", system-ui, sans-serif;
  --font-mono: "Space Mono", "Noto Sans TC", monospace;

  /* per-section inherited palette (default = light surface) */
  --fg: var(--ink); --fg-soft: var(--ink-soft); --fg-faint: var(--ink-faint);
  --hair: var(--line); --accent: var(--blue);
}

body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* faint swiss grid on the page backdrop */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.fx-grid {
  background-image:
    linear-gradient(rgba(11,11,13,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,11,13,.035) 1px, transparent 1px);
  background-size: 72px 72px;
}

/* ============================================================ NAV */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(18px, 4vw, 44px);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease);
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-brand { font-family: var(--font-display); font-weight: 800; font-size: 1rem; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; color: var(--ink); }
.nav-brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.nav-links { display: flex; align-items: center; gap: clamp(12px, 2vw, 30px); }
.nav-link { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .02em; color: var(--ink-soft); padding: 4px 0; position: relative; transition: color .25s; }
.nav-link:hover, .nav-link.active { color: var(--ink); }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--lime); transition: width .3s var(--ease); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.lang-toggle { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; border: 1.5px solid var(--ink); border-radius: 999px; padding: 6px 14px; color: var(--ink); transition: all .25s var(--ease); }
.lang-toggle:hover { background: var(--ink); color: var(--paper); }

/* ============================================================ SCROLLER + SECTIONS */
.scroller { position: relative; z-index: 1; height: 100vh; height: 100dvh; overflow-y: scroll; overflow-x: hidden; scroll-snap-type: y proximity; scroll-behavior: smooth; scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }
.section { position: relative; min-height: 100vh; min-height: 100dvh; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; padding: 104px clamp(18px, 4vw, 44px) 76px; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; }

/* surface variants set the inherited palette */
.section--gray { background: var(--paper-2); }
.section--blue { background: var(--blue); --fg: #fff; --fg-soft: rgba(255,255,255,.74); --fg-faint: rgba(255,255,255,.5); --hair: rgba(255,255,255,.24); --accent: var(--lime); }
.section--ink { background: var(--ink); --fg: #fff; --fg-soft: rgba(255,255,255,.66); --fg-faint: rgba(255,255,255,.42); --hair: rgba(255,255,255,.16); --accent: var(--lime); }

/* ---------- section header ---------- */
.sec-head { margin-bottom: clamp(26px, 4vw, 46px); }
.sec-kicker { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-soft); display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.sec-kicker .num { color: var(--accent); }
.sec-kicker .sep { color: var(--fg-faint); }
.sec-en { font-family: var(--font-display); font-weight: 900; letter-spacing: -.035em; line-height: .9; font-size: clamp(2.6rem, 8vw, 6.5rem); color: var(--fg); text-transform: uppercase; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; } .reveal.d2 { transition-delay: .14s; }
.reveal.d3 { transition-delay: .21s; } .reveal.d4 { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.mark, mark { background: var(--lime); color: var(--ink); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ============================================================ 1 HERO */
.hero { justify-content: space-between; padding-top: 96px; overflow: hidden; }
.hero-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(14px, 2.6vw, 26px); margin: auto 0; position: relative; z-index: 2; }
.hero-kicker { font-family: var(--font-mono); font-size: clamp(.74rem,1.5vw,.92rem); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.hero-name { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 11vw, 11rem); line-height: .9; letter-spacing: -.045em; color: var(--ink); text-transform: uppercase; white-space: nowrap; will-change: transform; position: relative; }
.hero-name .ch { display: inline-block; transform: translateY(112%); }
.hero-name.lit .ch { transform: translateY(0); transition: transform .85s var(--ease); }
.hero-statement { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 2.6vw, 2rem); line-height: 1.14; letter-spacing: -.01em; max-width: 22ch; color: var(--ink); text-wrap: balance; }
.hero-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.htag { font-family: var(--font-mono); font-weight: 700; font-size: clamp(.78rem,1.4vw,.92rem); letter-spacing: .02em; padding: 8px 16px; border-radius: 999px; line-height: 1; transition: transform .25s var(--ease); }
.htag:hover { transform: rotate(0deg) translateY(-3px) !important; }
.htag-lime { background: var(--lime); color: var(--ink); transform: rotate(-3deg); }
.htag-blue { background: var(--blue); color: #fff; transform: rotate(3deg); }
.htag-line { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); transform: rotate(-2deg); }
.hero-id { font-family: var(--font-mono); font-size: clamp(.78rem,1.4vw,.9rem); color: var(--ink-soft); text-align: center; margin-top: 6px; }
.hero-id .zh { font-family: var(--font-sans); font-weight: 700; color: var(--ink); font-size: 1.2em; display: block; margin-bottom: 4px; }
.hero-scroll { display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.hero-scroll .arrow { color: var(--blue); }

/* cute hand-drawn doodles */
.doodle { position: absolute; z-index: 1; pointer-events: none; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.doodle path { fill: none; }
.doodle-star { width: clamp(28px,4vw,46px); top: 20%; left: 16%; fill: var(--lime); stroke: none; animation: floaty 4s ease-in-out infinite; }
.doodle-star path { fill: var(--lime); }
.doodle-loop { width: clamp(80px,11vw,150px); top: 24%; right: 12%; stroke: var(--blue); stroke-width: 3; animation: floaty 5s ease-in-out infinite; }
.doodle-arrow { width: clamp(64px,8vw,104px); bottom: 24%; left: 13%; stroke: var(--ink); stroke-width: 3; transform: scaleX(-1); animation: floaty 4.6s ease-in-out infinite; }
.doodle-spark { width: clamp(20px,3vw,32px); bottom: 30%; right: 18%; stroke: var(--lime); stroke-width: 3.5; animation: floaty 3.6s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-9px) rotate(3deg); } }
.doodle-arrow { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .doodle { animation: none !important; } }
@media (max-width: 680px) { .doodle-loop, .doodle-arrow { display: none; } }

/* rotating sticker badge */
.badge { position: absolute; top: clamp(74px,9vh,116px); right: clamp(16px,4vw,52px); width: clamp(94px,10vw,128px); height: clamp(94px,10vw,128px); z-index: 5; }
.badge svg { width: 100%; height: 100%; animation: spin 16s linear infinite; }
.badge .bg { fill: var(--blue); }
.badge .txt { fill: #fff; font-family: var(--font-mono); font-size: 9.2px; letter-spacing: .08em; text-transform: uppercase; }
.badge .star { position: absolute; inset: 0; display: grid; place-items: center; }
.badge .star b { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.4rem,2.6vw,2rem); color: var(--lime); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .badge svg { animation: none; } }

/* ============================================================ 2 ABOUT */
.about-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.about-copy { display: flex; flex-direction: column; gap: 16px; }
.about-copy p { font-size: clamp(.98rem,1.4vw,1.1rem); color: var(--fg-soft); max-width: 50ch; }
.about-copy p:first-of-type { color: var(--fg); font-size: clamp(1.1rem,1.9vw,1.4rem); font-weight: 500; line-height: 1.35; }
.skills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.chip { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .01em; color: var(--fg); border: 1.5px solid var(--hair); border-radius: 999px; padding: 7px 15px; transition: all .25s var(--ease); }
.chip:hover { background: var(--accent); color: var(--ink); border-color: transparent; }
.about-photo { position: relative; aspect-ratio: 4/5; border-radius: 22px; overflow: hidden; border: 1.5px solid var(--hair); box-shadow: 16px 16px 0 var(--lime); }
.about-photo image-slot { width: 100%; height: 100%; }

/* ============================================================ 3 EXPERIENCE */
.exp-list { display: flex; flex-direction: column; }
.exp-item { display: grid; grid-template-columns: 168px 1fr minmax(0,38ch); gap: 28px; align-items: baseline; padding: 26px 6px; border-top: 1px solid var(--hair); transition: padding-left .4s var(--ease); }
.exp-item:last-child { border-bottom: 1px solid var(--hair); }
.exp-item:hover { padding-left: 20px; }
.exp-period { font-family: var(--font-mono); font-size: .82rem; color: var(--accent); }
.exp-role { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem,2.2vw,1.6rem); line-height: 1.08; color: var(--fg); }
.exp-org { font-size: .92rem; color: var(--fg-soft); margin-top: 6px; }
.exp-desc { font-size: .95rem; color: var(--fg-soft); }
@media (max-width: 900px) { .exp-item { grid-template-columns: 1fr; gap: 8px; } .exp-desc { max-width: none; } }

/* ============================================================ 4 SELECTED WORK */
.pf-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 18px; margin-bottom: clamp(24px,3.5vw,40px); }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 24px); }
.pf-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--paper); border: 1.5px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.pf-card:hover { transform: translateY(-7px); box-shadow: 0 22px 50px rgba(11,11,13,.16); }
.pf-cover { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--paper-2); }
.pf-cover image-slot { width: 100%; height: 100%; }
.pf-num { position: absolute; top: 12px; left: 13px; z-index: 2; font-family: var(--font-mono); font-size: .72rem; padding: 4px 9px; border-radius: 7px; background: #fff; color: var(--ink); border: 1px solid var(--line); }
.pf-metric { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; padding: 9px 13px; border-radius: 12px; line-height: 1; }
.pf-metric b { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.3rem,2.4vw,1.9rem); letter-spacing: -.03em; }
.pf-metric span { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; margin-top: 4px; opacity: .85; }
.pf-card[data-accent="blue"] .pf-metric { background: var(--blue); color: #fff; }
.pf-card[data-accent="lime"] .pf-metric { background: var(--lime); color: var(--ink); }
.pf-card[data-accent="ink"] .pf-metric { background: var(--ink); color: #fff; }
.pf-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pf-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.25rem,2vw,1.6rem); letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); }
.pf-sub { font-size: .9rem; color: var(--ink); font-weight: 600; }
.pf-role { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .03em; color: var(--ink-soft); text-transform: uppercase; }
.pf-summary { font-size: .9rem; color: var(--ink-soft); margin-top: 2px; }
.pf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px; }
.tag { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .02em; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
@media (max-width: 920px) { .pf-grid { grid-template-columns: 1fr; } .pf-card { flex-direction: row; } .pf-cover { width: 42%; aspect-ratio: auto; } }
@media (max-width: 560px) { .pf-card { flex-direction: column; } .pf-cover { width: 100%; aspect-ratio: 4/3; } }

/* ============================================================ 5 TEACHING (blue panel) */
.teach-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px,5vw,72px); align-items: center; }
.teach-quote { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem,3.6vw,2.7rem); line-height: 1.14; color: var(--fg); text-wrap: balance; }
.teach-points { list-style: none; display: flex; flex-direction: column; gap: 0; counter-reset: t; }
.teach-points li { display: flex; gap: 16px; align-items: flex-start; font-size: 1.02rem; color: var(--fg-soft); padding: 16px 0; border-top: 1px solid var(--hair); }
.teach-points li:last-child { border-bottom: 1px solid var(--hair); }
.teach-points li::before { content: counter(t, decimal-leading-zero); counter-increment: t; font-family: var(--font-mono); font-size: .8rem; color: var(--accent); padding-top: 3px; }
.teach-current { margin-top: 28px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: .82rem; color: var(--fg); border: 1px solid var(--hair); border-radius: 999px; padding: 10px 17px; }
.teach-current .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@media (max-width: 880px) { .teach-grid { grid-template-columns: 1fr; } }

/* ============================================================ 6 WRITING */
.blog-list { display: flex; flex-direction: column; }
.blog-item { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; padding: 24px 6px; border-top: 1px solid var(--hair); transition: padding-left .4s var(--ease); }
.blog-item:last-child { border-bottom: 1px solid var(--hair); }
.blog-item:hover { padding-left: 18px; }
.blog-item:hover .blog-arrow { transform: translateX(5px); color: var(--blue); }
.blog-date { font-family: var(--font-mono); font-size: .8rem; color: var(--fg-faint); white-space: nowrap; }
.blog-tt { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem,2.2vw,1.55rem); color: var(--fg); }
.blog-ex { font-size: .92rem; color: var(--fg-soft); margin-top: 6px; max-width: 62ch; }
.blog-arrow { font-size: 1.4rem; color: var(--fg-soft); transition: transform .3s var(--ease), color .3s; }
@media (max-width: 720px) { .blog-item { grid-template-columns: 1fr auto; } .blog-date { grid-column: 1 / -1; } }

/* ============================================================ 7 CONTACT (ink) */
.contact { justify-content: center; }
.contact-inner { display: flex; flex-direction: column; gap: 26px; }
.contact-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.8rem,12vw,9rem); line-height: .86; letter-spacing: -.04em; color: var(--fg); text-transform: uppercase; }
.contact-sub { font-size: clamp(1rem,1.7vw,1.2rem); color: var(--fg-soft); max-width: 46ch; }
.contact-email { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem,4vw,2.6rem); color: var(--lime); width: fit-content; position: relative; }
.contact-email::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.contact-email:hover::after { transform: scaleX(1); }
.contact-social { display: flex; flex-wrap: wrap; gap: 11px; }
.social-link { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: .84rem; color: var(--fg); border: 1.5px solid var(--hair); border-radius: 999px; padding: 11px 19px; transition: all .3s var(--ease); }
.social-link:hover { background: var(--lime); color: var(--ink); border-color: transparent; transform: translateY(-2px); }
.social-link .handle { color: var(--fg-faint); }
.social-link:hover .handle { color: inherit; }
.footer { margin-top: clamp(36px,7vh,80px); padding-top: 22px; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-family: var(--font-mono); font-size: .76rem; color: var(--fg-faint); }

/* on light sections, the "view all" pill (built from .social-link) */
.section .pill-link { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: .8rem; color: var(--fg); border: 1.5px solid var(--hair); border-radius: 999px; padding: 10px 18px; transition: all .3s var(--ease); }
.section .pill-link:hover { background: var(--ink); color: var(--paper); border-color: transparent; transform: translateY(-2px); }
.section--blue .pill-link:hover, .section--ink .pill-link:hover { background: var(--lime); color: var(--ink); }

/* ============================================================ DOTS */
.dots { position: fixed; right: clamp(12px,2vw,26px); top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 13px; mix-blend-mode: difference; }
.dot-btn { width: 10px; height: 10px; display: grid; place-items: center; position: relative; }
.dot-btn span { width: 7px; height: 7px; border-radius: 50%; background: #888; transition: all .35s var(--ease); }
.dot-btn.active span { background: #fff; width: 9px; height: 9px; }
.dot-btn::before { content: attr(data-label); position: absolute; right: 20px; font-family: var(--font-mono); font-size: .66rem; color: #fff; opacity: 0; transform: translateX(6px); transition: all .3s var(--ease); white-space: nowrap; pointer-events: none; }
.dot-btn:hover::before { opacity: 1; transform: translateX(0); }
@media (max-width: 720px) { .dots { display: none; } }

image-slot { background: var(--paper-2); color: var(--ink-faint); font-family: var(--font-mono); }

/* ============================================================
   INFO / ABOUT PAGE  (long-form scroll, not snap)
   ============================================================ */
body.info { overflow: auto; background: var(--paper); }
.info-main { position: relative; z-index: 1; }
.info-wrap { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }

.info-hero { padding: clamp(120px, 18vh, 200px) 0 clamp(40px, 7vh, 90px); }
.info-kicker { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: clamp(20px, 4vw, 38px); display: inline-flex; align-items: center; gap: 10px; }
.info-kicker::before { content: ""; width: 26px; height: 2px; background: var(--blue); }
.info-title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.045em; line-height: .86; font-size: clamp(3rem, 12vw, 9rem); color: var(--ink); }
.info-title .line { display: block; overflow: hidden; }
.info-title .line > span { display: inline-block; transform: translateY(110%); }
.info-title.lit .line > span { transform: translateY(0); transition: transform .8s var(--ease); }
.info-title .line:nth-child(2) > span { transition-delay: .08s; }
.info-title .line:nth-child(3) > span { transition-delay: .16s; color: var(--blue); }
.info-lede { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 2.6vw, 1.9rem); line-height: 1.25; color: var(--ink); max-width: 30ch; margin-top: clamp(24px, 4vw, 40px); text-wrap: balance; }
.info-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }

/* story rows: alternating image / text */
.info-stories { display: flex; flex-direction: column; gap: clamp(60px, 11vh, 130px); padding: clamp(30px,6vh,70px) 0; }
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.story:nth-child(even) .story-media { order: 2; }
.story-lead { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3.6vw, 2.8rem); line-height: 1.04; letter-spacing: -.02em; color: var(--ink); margin-bottom: 20px; text-wrap: balance; }
.story-body p { font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.6; color: var(--ink-soft); margin-bottom: 14px; max-width: 44ch; }
.story-media { position: relative; aspect-ratio: 4/5; border-radius: 22px; overflow: hidden; border: 1.5px solid var(--line); }
.story:nth-child(3n+1) .story-media { box-shadow: 16px 16px 0 var(--lime); }
.story:nth-child(3n+2) .story-media { box-shadow: -16px 16px 0 var(--blue); }
.story:nth-child(3n) .story-media { box-shadow: 16px 16px 0 var(--ink); }
.story-media image-slot { width: 100%; height: 100%; }
@media (max-width: 800px) {
  .story { grid-template-columns: 1fr; gap: 22px; }
  .story:nth-child(even) .story-media { order: 0; }
  .story-media { aspect-ratio: 3/2; }
}

/* chapters list */
.info-chapters { padding: clamp(40px,8vh,100px) 0; border-top: 2px solid var(--ink); }
.chapters-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px; margin-bottom: clamp(28px,4vw,48px); }
.chapters-en { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.035em; font-size: clamp(2rem, 6vw, 4.4rem); line-height: .9; color: var(--ink); }
.chapters-label { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.chapter { display: grid; grid-template-columns: 56px 230px 1fr; gap: clamp(16px,3vw,40px); align-items: baseline; padding: 26px 4px; border-top: 1px solid var(--line); transition: padding-left .4s var(--ease), background .3s; }
.chapter:last-child { border-bottom: 1px solid var(--line); }
.chapter:hover { padding-left: 16px; }
.chapter-no { font-family: var(--font-mono); font-size: .9rem; color: var(--blue); }
.chapter-era { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.chapter-main .chapter-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.2rem, 2.4vw, 1.85rem); line-height: 1.06; letter-spacing: -.02em; color: var(--ink); margin-bottom: 8px; }
.chapter-main .chapter-body { font-size: clamp(.96rem,1.4vw,1.08rem); color: var(--ink-soft); max-width: 56ch; }
@media (max-width: 760px) { .chapter { grid-template-columns: 40px 1fr; } .chapter-era { grid-column: 2; order: -1; margin-bottom: -6px; } }

/* info outro + footer */
.info-outro { padding: clamp(50px,10vh,120px) 0; text-align: center; }
.info-outro .sig { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; font-size: clamp(2rem, 9vw, 6rem); line-height: .9; color: var(--ink); }
.info-outro .sig mark { background: var(--lime); }
.info-foot { border-top: 1px solid var(--line); padding: 26px 0 60px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--font-mono); font-size: .78rem; color: var(--ink-faint); }

/* ============================================================
   FIVE CHAPTERS — glass-card deck (big type behind, cards in front)
   ============================================================ */
.chapters-stage { position: relative; min-height: 92vh; display: grid; place-items: center; overflow: hidden; padding: 96px 16px 80px; contain: paint; }
.stage-blobs { position: absolute; inset: -12%; z-index: 0; filter: blur(72px); pointer-events: none; transform: translateZ(0); will-change: transform; backface-visibility: hidden; }
.stage-blobs::before { content: ""; position: absolute; width: 48%; height: 62%; left: 6%; top: 10%; border-radius: 50%; background: radial-gradient(circle, var(--blue), transparent 70%); opacity: .42; }
.stage-blobs::after { content: ""; position: absolute; width: 48%; height: 62%; right: 5%; bottom: 6%; border-radius: 50%; background: radial-gradient(circle, var(--lime), transparent 68%); opacity: .6; }
.stage-kicker { position: absolute; top: clamp(96px,12vh,140px); left: 50%; transform: translateX(-50%); z-index: 3; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.stage-type { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.045em; line-height: .76; font-size: clamp(3.2rem, 15vw, 13rem); color: var(--ink); opacity: .09; pointer-events: none; }
.stage-type span { display: block; }
.stage-hint { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); transition: opacity .3s; }
.stage-hint .d { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: pulse 1.8s infinite; }
.chapters-stage.open .stage-hint { opacity: 0; }
.chapters-stage.open .stage-kicker { opacity: 0; transition: opacity .3s; }

/* (legacy in-card photo styles removed — chapters now open in a crisp modal) */

/* ============================================================
   TEACHING — How to be a Product Designer
   ============================================================ */
.teaching { justify-content: flex-start; }
.teaching .wrap { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 38px); }
.teach-q { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5.2vw, 4rem); line-height: .98; letter-spacing: -.02em; color: var(--fg); }
.teach-q span { display: block; }
.teach-manifesto-wrap { max-width: 62ch; display: flex; flex-direction: column; gap: 12px; }
.teach-manifesto { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 3vw, 2.2rem); line-height: 1.18; color: var(--fg); text-wrap: balance; }
.teach-sub { font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.6; color: var(--fg-soft); }
.teach-tracks { display: flex; flex-direction: column; gap: clamp(30px, 5vh, 56px); }
.track { border-top: 1.5px solid var(--hair); padding-top: 20px; }
.track-label { font-family: var(--font-mono); font-size: clamp(.92rem, 1.6vw, 1.12rem); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: clamp(16px, 2vw, 24px); }
.flow { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.flow .chip-flow { font-family: var(--font-sans); font-weight: 600; font-size: clamp(.98rem, 1.5vw, 1.22rem); color: var(--fg); border: 1.5px solid var(--hair); border-radius: 999px; padding: 12px 22px; background: rgba(255,255,255,.07); }
.flow .arr { color: var(--accent); font-family: var(--font-mono); font-size: 1.1rem; padding: 0 3px; }
.teach-args { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 20px); margin-top: 4px; }
.arg-card { background: var(--paper); color: var(--ink); border-radius: 18px; padding: clamp(20px, 2vw, 26px); }
.arg-tag { display: block; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .03em; text-transform: uppercase; font-weight: 700; color: var(--blue); margin-bottom: 12px; }
.arg-card p { font-size: clamp(.88rem, 1.2vw, .96rem); line-height: 1.62; color: var(--ink-soft); }
.teaching .teach-current { align-self: flex-start; }
@media (max-width: 880px) { .teach-args { grid-template-columns: 1fr; } }

/* ---------- 05.1 intro + 05.2/05.3 skill grids ---------- */
.teach-intro { justify-content: center; }
.teach-intro .wrap { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 40px); }
.teach-intro .teach-q { font-size: clamp(2.4rem, 7vw, 5.6rem); line-height: .96; }
.teach-intro .teach-manifesto-wrap { max-width: 64ch; }

.skills-sec { justify-content: center; }
.skills-sec .wrap { display: flex; flex-direction: column; gap: clamp(26px, 4vw, 48px); }
.skill-grid { display: grid; gap: clamp(12px, 1.6vw, 20px); }
.skill-grid--hard { grid-template-columns: repeat(4, 1fr); }
.skill-grid--soft { grid-template-columns: repeat(3, 1fr); }
.skill-card {
  display: flex; flex-direction: column; gap: clamp(14px, 1.5vw, 20px);
  padding: clamp(20px, 2.2vw, 32px); border: 1.5px solid var(--hair); border-radius: 20px;
  background: color-mix(in oklab, var(--fg) 4%, transparent);
  min-height: clamp(150px, 17vw, 210px); transition: transform .4s var(--ease), border-color .4s, background .4s;
}
.skills-sec:not(.section--blue) .skill-card { background: var(--paper); box-shadow: 0 1px 0 rgba(11,11,13,.05); }
.skill-card:hover { transform: translateY(-5px); border-color: var(--accent); }
.skill-no { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; color: var(--fg-faint); }
.skill-ic { color: var(--accent); width: clamp(40px, 4vw, 56px); height: clamp(40px, 4vw, 56px); margin-top: auto; }
.skill-ic svg { width: 100%; height: 100%; display: block; }
.skill-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.7vw, 1.45rem); line-height: 1.12; letter-spacing: -.01em; color: var(--fg); text-wrap: balance; }
.skills-sec .teach-current { align-self: flex-start; }
@media (max-width: 920px) { .skill-grid--hard { grid-template-columns: repeat(2, 1fr); } .skill-grid--soft { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .skill-grid--hard, .skill-grid--soft { grid-template-columns: 1fr 1fr; } .skill-card { min-height: 0; padding: 18px; } }

/* skill controls: tier tabs + AI switch */
.skill-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.tier-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1.5px solid var(--hair); border-radius: 999px; background: color-mix(in oklab, var(--fg) 4%, transparent); }
.tier-tab { font-family: var(--font-mono); font-size: clamp(.74rem, 1.2vw, .86rem); letter-spacing: .02em; color: var(--fg-soft); padding: 9px 18px; border-radius: 999px; transition: all .25s var(--ease); }
.tier-tab:hover { color: var(--fg); }
.tier-tab.active { background: var(--accent); color: #fff; }
.ai-switch { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .02em; color: var(--fg-soft); padding: 8px 14px; border: 1.5px solid var(--hair); border-radius: 999px; transition: all .25s var(--ease); }
.ai-switch:hover { color: var(--fg); border-color: var(--accent); }
.ai-switch .ai-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-faint); transition: background .25s; }
.ai-switch.on .ai-dot { background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.ai-switch.on { color: var(--fg); border-color: var(--lime); }
.ai-track { position: relative; width: 38px; height: 20px; border-radius: 999px; background: color-mix(in oklab, var(--fg) 16%, transparent); transition: background .3s var(--ease); }
.ai-switch.on .ai-track { background: var(--lime); }
.ai-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); transition: transform .3s var(--ease); }
.ai-switch.on .ai-knob { transform: translateX(18px); background: var(--ink); }

/* skill card details */
.skill-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.skill-ai-badge { display: none; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.ai-on .skill-ai-badge { display: inline-block; }
.skill-ai-badge.ai-yes { background: #0b0b0d; color: var(--lime); }
.skill-ai-badge.ai-partial { background: linear-gradient(90deg, #f7e14d, #c8f23a); color: #0b0b0d; }

/* importance — stars */
.skill-level { display: flex; align-items: center; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--hair); }
.star-meter { display: inline-flex; gap: 6px; }
.star-meter .star { width: 18px; height: 18px; color: var(--fg-faint); opacity: .42; }
.star-meter .star svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.star-meter .star.on { color: var(--accent); opacity: 1; }
.star-meter .star.on svg { fill: currentColor; stroke: currentColor; }
.skill-strong { display: inline-block; margin-top: 12px; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); background: var(--lime); padding: 5px 10px; border-radius: 999px; align-self: flex-start; }

/* AI mode → section goes black, cards colour-coded by AI help */
.skills-sec.ai-on { background: #0b0b0d; --fg: #fff; --fg-soft: rgba(255,255,255,.7); --fg-faint: rgba(255,255,255,.4); --hair: rgba(255,255,255,.16); --accent: var(--lime); }
.skills-sec.ai-on .sec-en { color: #fff; }
.skills-sec.ai-on .tier-tab.active { color: var(--ink); }
.skills-sec.ai-on .skill-card { background: rgba(255,255,255,.04); box-shadow: none; }                /* AI can't help → plain black */
.skills-sec.ai-on .skill-card[data-ai="partial"] { background: linear-gradient(150deg, rgba(231,224,77,.34), rgba(200,242,58,.05)); border-color: rgba(231,224,77,.55); }   /* half AI → yellow gradient */
.skills-sec.ai-on .skill-card[data-ai="yes"] { background: linear-gradient(150deg, #eaf36a, #c8f23a); border-color: transparent; --fg: #0b0b0d; --fg-soft: rgba(0,0,0,.7); --fg-faint: rgba(0,0,0,.4); --accent: #0b0b0d; --hair: rgba(0,0,0,.16); }  /* AI can help → solid yellow */

.deck { position: relative; z-index: 2; width: min(94vw, 1000px); height: min(74vh, 600px); }
.glass-card {
  position: absolute; top: 50%; left: 50%; width: 240px; height: 336px; margin: -168px 0 0 -120px;
  border-radius: 26px; padding: 24px; display: flex; flex-direction: column;
  background: linear-gradient(160deg, var(--tint, transparent), transparent 72%),
              linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,255,255,.22));
  backdrop-filter: blur(15px) saturate(1.6); -webkit-backdrop-filter: blur(15px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 22px 55px rgba(28,28,60,.18), inset 0 1px 0 rgba(255,255,255,.85);
  cursor: pointer; overflow: hidden; color: var(--ink); text-align: left;
  transition: transform .6s var(--ease), opacity .5s var(--ease), box-shadow .5s var(--ease);
}
.glass-card:nth-child(5n+1) { --tint: color-mix(in oklab, var(--blue) 55%, transparent); }
.glass-card:nth-child(5n+2) { --tint: color-mix(in oklab, var(--lime) 72%, transparent); }
.glass-card:nth-child(5n+3) { --tint: color-mix(in oklab, var(--blue) 42%, transparent); }
.glass-card:nth-child(5n+4) { --tint: color-mix(in oklab, var(--lime) 60%, transparent); }
.glass-card:nth-child(5n+5) { --tint: color-mix(in oklab, var(--ink) 45%, transparent); }
.gc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gc-no { font-family: var(--font-display); font-weight: 900; font-size: 1.7rem; letter-spacing: -.03em; }
.gc-era { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); text-align: right; }
.gc-title { font-family: var(--font-display); font-weight: 800; font-size: 1.18rem; line-height: 1.06; letter-spacing: -.02em; margin-top: auto; }
.gc-content { display: flex; flex-direction: column; height: 100%; }
.gc-hint { margin-top: 12px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; color: var(--ink-soft); }
@media (max-width: 520px) {
  .glass-card { width: 202px; height: 300px; margin: -150px 0 0 -101px; padding: 20px; }
}

/* ---------- crisp chapter modal (no blur) ---------- */
.cmodal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 0;
  background: rgba(6,6,10,.72); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); }
.cmodal.show { opacity: 1; pointer-events: auto; }
.cmodal-card { position: relative; width: 100vw; height: 100vh; height: 100dvh;
  border-radius: 0; overflow: hidden; background: #0b0b0d; color: #fff;
  transform: scale(.985); transition: transform .4s var(--ease); }
.cmodal.show .cmodal-card { transform: scale(1); }
.cmodal-track { position: absolute; inset: 0; }
.cmodal-frame { position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); }
.cmodal-frame.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.cmodal-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  font-size: 1.9rem; line-height: 1; color: #fff; background: rgba(8,8,12,.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,.26); transition: background .2s, transform .2s; }
.cmodal-arrow:hover { background: rgba(8,8,12,.85); }
.cmodal-prev { left: clamp(14px, 3vw, 38px); }
.cmodal-next { right: clamp(14px, 3vw, 38px); }
.cmodal-prev:hover { transform: translateY(-50%) translateX(-3px); }
.cmodal-next:hover { transform: translateY(-50%) translateX(3px); }
.cmodal-dots { position: absolute; bottom: clamp(20px, 4vh, 38px); left: 50%; transform: translateX(-50%);
  z-index: 4; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px;
  background: rgba(8,8,12,.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cmodal-dot { width: 9px; height: 9px; border-radius: 50%; padding: 0; background: rgba(255,255,255,.42);
  border: none; transition: all .25s var(--ease); }
.cmodal-dot.on { width: 24px; border-radius: 5px; background: #fff; }
.cmodal-dot.add { position: relative; width: 16px; height: 16px; background: transparent;
  border: 1.5px solid rgba(255,255,255,.6); }
.cmodal-dot.add::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 12px; line-height: 1; color: rgba(255,255,255,.85); }
.cmodal-dot.add.on { width: 16px; border-radius: 50%; background: var(--lime); border-color: var(--lime); }
.cmodal-dot.add.on::after { color: var(--ink); }
.cmodal-close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 42px; height: 42px;
  display: grid; place-items: center; border-radius: 50%; font-size: 1.15rem; line-height: 1; color: #fff;
  background: rgba(8,8,12,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,.28); transition: background .2s, transform .2s; }
.cmodal-close:hover { background: rgba(8,8,12,.85); transform: rotate(90deg); }

/* ============================================================ 3 NOW */
.now-sec { min-height: 100vh; }
.now-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.now-quote { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 1.06; letter-spacing: -.025em; color: var(--ink); margin: 14px 0 0; text-wrap: balance; }
.now-quote span { display: block; }
.now-quote span:last-child { color: var(--blue); }
.now-body { font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.6; color: var(--ink-soft);
  max-width: 30ch; margin-top: clamp(20px, 3vw, 34px); }
.now-body strong { color: var(--ink); font-weight: 700; }
.now-tag { display: inline-block; margin-top: 22px; font-family: var(--font-mono); font-size: .74rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--lime);
  padding: 8px 15px; border-radius: 999px; }
.now-shots { display: flex; justify-content: center; gap: clamp(14px, 2.4vw, 30px); }
.now-shot { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.now-shot img { display: block; width: 100%; max-width: 250px; height: auto; border-radius: 30px;
  box-shadow: 0 30px 60px -22px rgba(11,11,13,.5), 0 0 0 1px rgba(11,11,13,.06); }
.now-shot.s1 { transform: rotate(-3deg); }
.now-shot.s2 { transform: rotate(3deg) translateY(18px); }
.now-shot figcaption { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); }
@media (max-width: 880px) {
  .now-grid { grid-template-columns: 1fr; gap: 40px; }
  .now-shots { margin-top: 8px; }
  .now-shot img { max-width: 190px; }
}

/* ============================================================ SOFTWARE (advantages) */
.softdev-intro { min-height: 100vh; }
.softdev-intro-inner { display: flex; flex-direction: column; align-items: flex-start; }
.softdev-intro .sec-kicker { color: var(--fg-soft); }
.softdev-heading { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: 1.02; letter-spacing: -.03em; color: #fff; margin: clamp(18px, 3vw, 34px) 0 0; max-width: 16ch; text-wrap: balance; }
.softdev-lead { display: inline-block; margin-top: clamp(22px, 3.5vw, 40px); font-family: var(--font-mono);
  font-size: clamp(.72rem, 1.3vw, .86rem); letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.softdev-cards { min-height: 100vh; }
.softdev-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 26px); margin-top: clamp(28px, 4vw, 48px); }
.softdev-card { position: relative; background: var(--paper); border: 1.5px solid var(--line); border-radius: 22px;
  padding: clamp(24px, 2.6vw, 38px); display: flex; flex-direction: column; gap: 12px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.softdev-card:hover { transform: translateY(-4px); box-shadow: 12px 12px 0 var(--blue); }
.softdev-no { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  letter-spacing: -.02em; color: var(--blue); line-height: 1; }
.softdev-card-title { font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.25; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.softdev-card-body { font-size: clamp(.98rem, 1.3vw, 1.12rem); line-height: 1.6; color: var(--ink-soft); margin: 0; text-wrap: pretty; }
.softdev-card--featured { grid-column: 1 / -1; }
.softdev-card--featured:hover { transform: none; box-shadow: none; }
.softdev-shots { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(16px, 2vw, 24px); }
.softdev-shots img { min-width: 0; width: 100%; height: auto; border-radius: 14px;
  border: 1.5px solid var(--line); background: var(--paper-2); object-fit: contain; }
.softdev-shots img:nth-child(1) { flex: 2.4 1 240px; }
.softdev-shots img:nth-child(2) { flex: 1.6 1 200px; }
.softdev-shots img:only-child { flex: 0 1 auto; max-width: min(640px, 100%); }
@media (max-width: 760px) { .softdev-grid { grid-template-columns: 1fr; } .softdev-shots img { flex-basis: 100%; } }

/* ============================================================ MENTORS (guest sessions) */
.mentors-sec { min-height: 100vh; display: flex; align-items: center; }
.mentors-sec .sec-en { color: #fff; }
.mentors-list { margin-top: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; }
.mentor-row { display: grid; grid-template-columns: auto 1.4fr 1fr auto; align-items: center;
  gap: clamp(16px, 3vw, 44px); padding: clamp(22px, 3vw, 38px) 0; border-top: 1.5px solid rgba(255,255,255,.16); }
.mentor-row:last-child { border-bottom: 1.5px solid rgba(255,255,255,.16); }
.mentor-no { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; color: rgba(255,255,255,.45); }
.mentor-id { display: flex; flex-direction: column; gap: 6px; }
.mentor-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.8rem);
  line-height: 1; letter-spacing: -.02em; color: #fff; }
.mentor-role { font-family: var(--font-mono); font-size: clamp(.72rem, 1.2vw, .84rem); letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.6); }
.mentor-topic { font-size: clamp(1.02rem, 1.6vw, 1.3rem); color: rgba(255,255,255,.9); }
.mentor-sessions { justify-self: end; font-family: var(--font-mono); font-size: clamp(.76rem, 1.3vw, .9rem);
  letter-spacing: .06em; color: var(--ink); background: var(--lime); padding: 9px 16px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 720px) {
  .mentor-row { grid-template-columns: auto 1fr auto; row-gap: 10px; }
  .mentor-topic { grid-column: 2 / 4; color: rgba(255,255,255,.7); }
}

/* ============================================================ CREED (closing quote) */
.creed { background: var(--paper); }
.creed-inner { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.creed-mark { font-family: var(--font-display); font-weight: 900; font-size: clamp(6rem, 18vw, 16rem);
  line-height: .6; color: var(--lime); margin-bottom: clamp(6px, 1.5vw, 16px); user-select: none; }
.creed-kicker { font-family: var(--font-mono); font-size: clamp(.74rem, 1.4vw, .9rem); letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: clamp(16px, 2.5vw, 28px); }
.creed-quote { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 6vw, 5rem);
  line-height: 1.05; letter-spacing: -.03em; color: var(--ink); max-width: 18ch; text-wrap: balance; }
.creed-quote span { display: block; }
.creed-quote span:last-child { color: var(--blue); }