/* ============================================================
   Component styles — hero, ticker, focus, about, timeline, contact
   ============================================================ */

/* ---------- shared section heads ---------- */
.sec-head{ display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:end; margin-bottom:clamp(40px,6vw,68px); }
.sec-title{ font-size:clamp(34px,6vw,68px); }
.sec-title.sm{ font-size:clamp(28px,4vw,44px); margin-bottom:30px; }
.sec-sub{ color:var(--ink-2); font-size:clamp(15px,1.4vw,18px); max-width:46ch; }
@media (max-width:760px){ .sec-head{ grid-template-columns:1fr; gap:16px; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:96px; padding-bottom:40px; overflow:hidden; }
.starfield{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-grid{ display:grid; grid-template-columns:1.22fr .78fr; gap:clamp(28px,4vw,60px); align-items:center; }
.hero-copy{ max-width:660px; }
.hero-title{ font-size:clamp(38px,5.6vw,72px); margin:22px 0 26px; text-wrap:balance; }
.hero-lead{ font-size:clamp(16px,1.6vw,20px); color:var(--ink-2); max-width:50ch; line-height:1.55; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-portrait{ display:flex; justify-content:center; }

.scroll-cue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); font-size:11px; letter-spacing:.25em; color:var(--ink-3); display:flex; align-items:center; gap:8px; z-index:2; }
.scroll-cue span{ animation:bob 1.6s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(5px);} }
@media (max-width:880px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-portrait{ order:-1; }
  .hero{ padding-top:120px; min-height:auto; }
}

/* ---------- orbit portrait ---------- */
.portrait-stage{ position:relative; width:min(420px,82vw); aspect-ratio:1; display:grid; place-items:center; perspective:900px; }
.orbit{ position:absolute; border:1px solid var(--line-2); border-radius:50%; }
.orbit-1{ width:100%; height:100%; }
.orbit-2{ width:118%; height:118%; border-style:dashed; border-color:var(--line); animation:spin 60s linear infinite; }
.orbit-3{ width:136%; height:78%; border-color:rgba(194,86,44,.4); transform:rotate(-24deg); animation:spin 26s linear infinite; }
.orbit-sat{ position:absolute; top:-5px; left:50%; width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(194,86,44,.18); }
@keyframes spin{ to{ transform:rotate(360deg);} }
.orbit-3{ animation-name:spin3; }
@keyframes spin3{ from{ transform:rotate(-24deg);} to{ transform:rotate(336deg);} }

.portrait-tilt{ transform:rotateX(var(--rx,0)) rotateY(var(--ry,0)); transition:transform .25s var(--ease-out); transform-style:preserve-3d; }
.portrait-frame{ position:relative; width:min(300px,58vw); aspect-ratio:1; border-radius:50%; overflow:hidden; background:var(--ink); box-shadow:0 30px 70px -30px rgba(30,26,21,.6); }
.portrait-frame img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.corner{ display:none; }
.p-label{ position:absolute; font-size:11px; letter-spacing:.12em; color:var(--ink-3); background:color-mix(in srgb,var(--cream) 86%,transparent); padding:5px 10px; border:1px solid var(--line); border-radius:100px; backdrop-filter:blur(6px); }
.p-label-1{ top:8%; right:-4%; }
.p-label-2{ bottom:10%; left:-6%; color:var(--accent); border-color:var(--accent-tint); }
@media (max-width:880px){ .p-label-1{ right:2%; } .p-label-2{ left:2%; } }

/* ============================================================
   TICKER
   ============================================================ */
.ticker{ border-block:1px solid var(--line); padding:18px 0; overflow:hidden; background:var(--cream-2); white-space:nowrap; }
.ticker-track{ display:inline-flex; animation:marq 38s linear infinite; }
.ticker-item{ font-family:var(--font-mono); font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; }
.ticker-sep{ color:var(--accent); margin:0 28px; }
@keyframes marq{ to{ transform:translateX(-33.33%);} }

/* ============================================================
   STATEMENT (dark)
   ============================================================ */
.statement{ background:var(--ink); color:var(--cream); padding-block:clamp(72px,11vw,150px); position:relative; z-index:1; overflow:hidden; }
.statement::after{ content:""; position:absolute; right:-120px; top:50%; transform:translateY(-50%); width:420px; height:420px; border:1px solid rgba(244,238,226,.1); border-radius:50%; }
.statement::before{ content:""; position:absolute; right:-40px; top:50%; transform:translateY(-50%); width:240px; height:240px; border:1px solid rgba(194,86,44,.3); border-radius:50%; }
.statement-text{ font-family:var(--font-display); font-weight:500; line-height:1.18; letter-spacing:-.01em; font-size:clamp(26px,4.4vw,52px); max-width:18ch; margin:20px 0 0; }
.statement-meta{ display:flex; align-items:center; gap:18px; margin-top:38px; font-size:12px; letter-spacing:.14em; color:rgba(244,238,226,.55); }
.statement-meta .dash{ color:var(--accent); }

/* ============================================================
   FOCUS CARDS
   ============================================================ */
.focus-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .focus-grid{ grid-template-columns:1fr; } }
.focus-card{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:30px 28px 26px; overflow:hidden; transition:transform .5s var(--ease-out), border-color .4s, box-shadow .5s; }
.focus-card:hover{ transform:translateY(-6px); border-color:var(--accent-tint); box-shadow:0 30px 50px -34px rgba(30,26,21,.4); }
.focus-no{ font-size:13px; color:var(--accent); letter-spacing:.1em; }
.focus-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.4vw,28px); letter-spacing:-.01em; margin:14px 0 12px; }
.focus-body{ color:var(--ink-2); font-size:15.5px; line-height:1.6; }
.focus-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.focus-arrow{ position:absolute; top:26px; right:26px; font-size:18px; color:var(--ink-3); transition:transform .5s var(--ease-out), color .4s; }
.focus-card:hover .focus-arrow{ transform:translate(4px,-4px); color:var(--accent); }

/* ============================================================
   PREVIEW STRIP
   ============================================================ */
.preview{ background:var(--cream-2); }
.preview-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:center; }
@media (max-width:900px){ .preview-grid{ grid-template-columns:1fr; gap:40px; } }
.preview-title{ font-size:clamp(28px,4vw,46px); margin:18px 0 18px; }
.preview-body{ color:var(--ink-2); max-width:44ch; margin-bottom:30px; }
.preview-list{ border-top:1px solid var(--line-2); }
.preview-row{ display:grid; grid-template-columns:1.3fr 1.4fr auto; gap:16px; align-items:baseline; padding:20px 6px; border-bottom:1px solid var(--line-2); cursor:pointer; transition:padding .4s var(--ease), background .4s; }
.preview-row:hover{ padding-inline:18px; background:color-mix(in srgb,var(--paper) 70%,transparent); }
.pr-role{ font-family:var(--font-display); font-weight:600; font-size:17px; }
.pr-org{ font-size:12.5px; color:var(--ink-2); letter-spacing:.04em; }
.pr-period{ font-size:12px; color:var(--ink-3); justify-self:end; }
@media (max-width:560px){ .preview-row{ grid-template-columns:1fr; gap:4px; } .pr-period{ justify-self:start; } }

/* ============================================================
   ABOUT
   ============================================================ */
.about-hero{ padding-top:clamp(130px,16vw,190px); }
.about-hero-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(34px,6vw,80px); }
@media (max-width:880px){ .about-hero-grid{ grid-template-columns:1fr; gap:30px; } }
.about-name{ font-size:clamp(46px,9vw,96px); margin:18px 0 22px; }
.about-roleline{ font-size:12px; letter-spacing:.16em; color:var(--ink-3); }
.about-bio{ display:flex; flex-direction:column; gap:20px; }
.about-p{ font-size:clamp(16px,1.5vw,19px); color:var(--ink-2); line-height:1.65; margin:0; }
.about-p:first-child{ color:var(--ink); font-size:clamp(18px,1.9vw,23px); line-height:1.5; }

/* ---------- timeline ---------- */
.timeline{ display:flex; flex-direction:column; }
.tl-item{ display:grid; grid-template-columns:240px 1fr; gap:clamp(20px,4vw,56px); padding:34px 0; border-top:1px solid var(--line); }
.tl-item:last-child{ border-bottom:1px solid var(--line); }
@media (max-width:780px){ .tl-item{ grid-template-columns:1fr; gap:14px; } }
.tl-left{ position:relative; padding-left:26px; }
.tl-dot{ position:absolute; left:0; top:5px; width:11px; height:11px; border-radius:50%; background:var(--cream); border:2px solid var(--ink); }
.tl-dot[data-current="1"]{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 5px rgba(194,86,44,.15); }
.tl-period{ font-size:12.5px; letter-spacing:.06em; color:var(--ink); }
.tl-place{ font-size:11.5px; color:var(--ink-3); margin-top:6px; }
.tl-role{ font-family:var(--font-display); font-weight:700; font-size:clamp(21px,2.4vw,29px); letter-spacing:-.01em; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.live{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent-tint); border-radius:100px; padding:3px 9px; }
.live i{ width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:.25;} }
.tl-org{ color:var(--accent); font-size:14px; margin:8px 0 16px; font-family:var(--font-mono); letter-spacing:.02em; }
.tl-points{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; max-width:62ch; }
.tl-points li{ position:relative; padding-left:22px; color:var(--ink-2); font-size:15.5px; line-height:1.55; }
.tl-points li::before{ content:""; position:absolute; left:2px; top:10px; width:7px; height:1px; background:var(--accent); }

/* ---------- education + skills ---------- */
.es-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,90px); }
@media (max-width:820px){ .es-grid{ grid-template-columns:1fr; gap:50px; } }
.edu-list{ display:flex; flex-direction:column; gap:30px; }
.edu-school{ font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.2vw,26px); }
.edu-detail{ color:var(--accent); font-size:13px; letter-spacing:.04em; margin:6px 0 12px; }
.edu-points{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.edu-points li{ position:relative; padding-left:20px; color:var(--ink-2); font-size:15px; line-height:1.55; }
.edu-points li::before{ content:""; position:absolute; left:0; top:10px; width:6px; height:6px; border-radius:50%; border:1px solid var(--accent); }
.skills-cloud{ display:flex; flex-wrap:wrap; gap:10px; }
.interests{ margin-top:38px; padding-top:30px; border-top:1px solid var(--line); }
.interest-list{ margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.interest-list li{ font-family:var(--font-display); font-weight:500; font-size:clamp(17px,1.8vw,21px); display:flex; gap:12px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ padding-top:clamp(130px,16vw,190px); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,84px); }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:48px; } }
.contact-title{ font-size:clamp(40px,7vw,76px); margin:20px 0 22px; }
.contact-sub{ color:var(--ink-2); font-size:clamp(16px,1.5vw,19px); max-width:42ch; }
.methods{ margin-top:40px; display:flex; flex-direction:column; }
.method{ display:grid; grid-template-columns:90px 1fr auto; align-items:center; gap:16px; padding:20px 4px; border-top:1px solid var(--line-2); transition:padding .4s var(--ease), background .4s; }
.method:last-child{ border-bottom:1px solid var(--line-2); }
.method:not(.static):hover{ padding-inline:16px; background:var(--paper); }
.m-k{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.m-v{ font-family:var(--font-display); font-weight:500; font-size:clamp(15px,1.6vw,19px); }
.m-arr{ color:var(--accent); transition:transform .4s var(--ease-out); }
.method:hover .m-arr{ transform:translate(4px,-4px); }
.m-clock{ font-size:11.5px; color:var(--ink-3); }

/* ---------- form ---------- */
.form{ background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:clamp(24px,3vw,38px); display:flex; flex-direction:column; gap:20px; }
.form-head{ font-size:12px; letter-spacing:.2em; color:var(--ink-3); display:flex; align-items:center; gap:10px; }
.form-head::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(194,86,44,.15); }
.field{ display:flex; flex-direction:column; gap:8px; position:relative; }
.field label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.field input,.field textarea{
  font-family:var(--font-body); font-size:16px; color:var(--ink);
  background:var(--cream); border:1px solid var(--line-2); border-radius:12px;
  padding:14px 16px; outline:none; resize:vertical;
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-3); }
.field input:focus,.field textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(194,86,44,.12); background:var(--paper); }
.field.bad input,.field.bad textarea{ border-color:#b4452f; }
.err{ font-family:var(--font-mono); font-size:11.5px; color:#b4452f; letter-spacing:.02em; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; padding:9px 14px; border-radius:100px; border:1px solid var(--line-2); background:transparent; color:var(--ink-2); cursor:pointer; transition:all .3s; }
.chip:hover{ border-color:var(--accent); color:var(--accent); }
.chip.on{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.submit{ margin-top:6px; justify-content:center; transition:transform .4s var(--ease-out), opacity .3s; }
.submit.dim{ opacity:.55; }

/* ---------- sent state ---------- */
.sent{ background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:clamp(34px,5vw,56px); text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; animation:pageIn .6s var(--ease-out) both; min-height:340px; justify-content:center; }
.sent-icon{ width:64px; height:64px; border-radius:50%; border:1px solid var(--accent-tint); display:grid; place-items:center; }
.sent-icon span{ width:24px; height:24px; border-radius:50%; background:var(--accent); animation:ping 1.8s var(--ease) infinite; }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(194,86,44,.4);} 100%{ box-shadow:0 0 0 18px rgba(194,86,44,0);} }
.sent-title{ font-size:clamp(26px,4vw,38px); }
.sent-sub{ color:var(--ink-2); max-width:38ch; }