/* ============================================================
   play-10.css — sophiemchen-style layout
   Hero (clean, no file-card), metrics strip, case-study grid,
   design process, about + vertical timeline, interests.
   Uses semantic tokens so it adapts to every vibe; play-9 adds
   the frosted-glass surface treatment under the Glass vibe.
   ============================================================ */

/* shared section header */
.sec-head { max-width: 1080px; margin-bottom: var(--s5); }
.sec-head .kicker { margin-bottom: var(--s3); }
.sec-head .sec-title { letter-spacing: -0.03em; font-size: clamp(25px, 2.9vw, 34px); line-height: 1.08; }
.sec-sub { margin-top: var(--s3); max-width: 60ch; }

/* ---------- HERO (clean / centered) ---------- */
.hero-center {
  min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding-top: 104px; padding-bottom: var(--s6); overflow: clip;
}
.hero-center .hero-top { justify-content: center; }
.hero-center .hero-title { font-size: clamp(28px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.03em; }
.hero-center .hero-title .row { display: block; }
.hero-center .hero-static { display: block; font-weight: 500; }
.hero-center .why-line { display: block; font-weight: 800; }
.hero-center .hero-sub { margin-inline: auto; margin-top: clamp(22px, 3vh, 34px); max-width: 880px; text-align: center; }
.hero-center .hero-cta-row { margin-top: clamp(28px, 4vh, 44px); justify-content: center; }
.hero-creds { margin-top: clamp(26px, 4vh, 40px); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.hero-cred { font-family: var(--mono); font-size: 13px; letter-spacing: 0.01em; color: var(--ink-soft); padding: 8px 14px; border: 1.5px solid var(--line-2); border-radius: 100px; background: var(--card); }
.hero-cred b { color: var(--tang-ink); font-weight: 700; }
.hero-scrollcue {
  margin-top: clamp(40px, 7vh, 88px); display: inline-flex; flex-direction: column;
  align-items: center; gap: 10px; font-family: var(--mono); font-size: 12.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
}
.hero-scrollcue .arrow { font-size: 18px; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .hero-scrollcue .arrow { animation: none; } }

/* ---------- METRICS strip (close to the top) ---------- */
.metrics { padding-block: var(--s5); }
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.metric { padding: 30px 28px; border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--card); text-align: center; }
.metric-n { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(34px, 4.4vw, 56px); letter-spacing: -0.03em; color: var(--tang-ink); line-height: 1; }
.metric-l { display: block; margin: 12px auto 0; max-width: 26ch; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
@media (max-width: 860px) { .metrics-grid { grid-template-columns: 1fr; gap: 0; } .metric { border-top: 2px solid var(--line); }
  :root[data-vibe="mono"] .metrics-grid { gap: 0; } }

/* ---------- CASE STUDIES grid ---------- */
.cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.casetile {
  display: flex; flex-direction: column; text-align: left;
  padding: clamp(26px, 3vw, 40px); border: 2px solid var(--line); border-radius: var(--r-lg);
  background: var(--card); cursor: pointer; position: relative; overflow: hidden;
  font: inherit; color: inherit; width: 100%;
  transition: transform 360ms var(--ease), box-shadow 360ms var(--ease), border-color 240ms;
}
.casetile:hover { transform: translateY(-6px); border-color: var(--line-2); }
/* media that goes B&W → colour on hover (the Ben Roach move) */
.casetile-media { width: 100%; height: clamp(190px, 24vw, 250px); margin-bottom: var(--s4); overflow: hidden; border-radius: 12px; background: var(--paper-2); position: relative; }
.casetile-media image-slot { width: 100%; height: 100%; display: block; filter: grayscale(1) contrast(1.03); transition: filter 0.55s var(--ease-soft), transform 0.7s var(--ease-soft); }
.casetile:hover .casetile-media image-slot { filter: grayscale(0); transform: scale(1.03); }
.casetile-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: var(--s3); }
.casetile-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px; border: 2px solid var(--line-2);
  font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--tang-ink);
  background: color-mix(in srgb, var(--tang) 10%, transparent); flex-shrink: 0;
}
.casetile-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-faint); text-align: right; }
.casetile-title { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.02em; line-height: 1.1; }
.casetile-impact { margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.casetile-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s4); }
.casetile-foot {
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1.5px solid var(--line);
  display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink);
}
.casetile-foot .arr { transition: transform 240ms var(--ease); }
.casetile:hover .casetile-foot .arr { transform: translate(4px, -4px); }
.casetile.is-locked { cursor: default; }
.casetile.is-locked:hover { transform: none; }
@media (max-width: 820px) { .cases-grid { grid-template-columns: 1fr; } }

/* ---------- DESIGN PROCESS ---------- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: proc; }
.proc-step { padding: 26px 22px; border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.proc-n { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--tang-ink); letter-spacing: 0.04em; }
.proc-t { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; margin-top: 14px; }
.proc-d { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); margin-top: 10px; }
@media (max-width: 1000px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .process-grid { grid-template-columns: 1fr; } }

/* ---------- ABOUT + TIMELINE ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: stretch; }
.about-card { padding: clamp(28px, 3vw, 40px); border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.about-photo { width: 132px; height: 132px; border-radius: 24px; object-fit: cover; object-position: 50% 22%; border: 2px solid var(--line-2); background: var(--paper-2); }
.about-name { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.02em; margin-top: var(--s4); }
.about-role { font-family: var(--mono); font-size: 13px; color: var(--tang-ink); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 6px; }
.about-p { font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin-top: var(--s3); }
.about-p b { color: var(--ink); }
.about-belief { margin-top: var(--s4); padding-top: var(--s4); border-top: 1.5px dashed var(--line-2); font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.35; letter-spacing: -0.01em; }

.tl-head { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: var(--s4); }
.about-timeline { padding: clamp(28px, 3vw, 40px); border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.timeline { position: relative; display: flex; flex-direction: column; gap: 4px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line-2); }
.tl-item { position: relative; padding: 0 0 26px 36px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2.5px solid var(--tang); z-index: 1; }
.tl-item.is-edu .tl-dot { border-color: var(--ink-faint); }
.tl-item.is-star .tl-dot { background: var(--tang); }
.tl-when { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); display: flex; align-items: center; gap: 8px; }
.tl-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 100px; border: 1.5px solid var(--line-2); color: var(--ink-soft); }
.tl-item.is-star .tl-tag { color: var(--tang-ink); border-color: color-mix(in srgb, var(--tang) 45%, transparent); }
.tl-role { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; margin-top: 6px; }
.tl-org { font-size: 15px; color: var(--ink-soft); margin-top: 2px; }
.tl-note { font-size: 13px; color: var(--ink-faint); margin-top: 6px; font-style: italic; }
.tl-note-hl { font-style: normal; font-weight: 600; color: var(--ink); }
.tl-award { color: var(--tang-ink); }
@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; } }

/* ---------- INTERESTS ---------- */
.interests-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.interest-card { padding: 28px 24px; border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--card); transition: transform 300ms var(--ease), border-color 240ms; }
.interest-card:hover { transform: translateY(-4px); border-color: var(--line-2); }
.interest-h { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.interest-d { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); margin-top: 10px; }
.interest-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
@media (max-width: 920px) { .interests-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .interests-grid { grid-template-columns: 1fr; } }