/* liseay.com — shared site styles  (v20260908a)
   Palette derives from the hero: warm gold light, teal accent, near-black ground. */

:root{
  --ink:#0a0a0a;
  --ink-2:#121417;
  --paper:#ffffff;
  --teal:#4ecdc4;
  --gold:#ffd68c;
  --muted:rgba(255,255,255,.62);
  --rule:rgba(255,255,255,.12);
  --max:1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--ink);color:#fff;
  font-family:"Montserrat",system-ui,sans-serif;font-weight:300;
  line-height:1.7;-webkit-font-smoothing:antialiased;
}
a{color:inherit;}

/* ---------- site nav (pages other than the hero) ---------- */
.site-nav{
  position:sticky;top:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 40px;background:rgba(10,10,10,.85);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);
}
.brand{font-family:"Instrument Serif",serif;font-size:1.45rem;letter-spacing:3px;
  text-transform:uppercase;text-decoration:none;}
.brand span{display:block;font-family:"Montserrat",sans-serif;font-size:.68rem;
  font-weight:400;letter-spacing:1.5px;opacity:.65;}
.site-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;}
.site-nav a{font-size:.8rem;text-transform:uppercase;letter-spacing:1.5px;
  text-decoration:none;opacity:.68;transition:opacity .25s,color .25s;}
.site-nav a:hover{opacity:1;}
.site-nav a[aria-current]{opacity:1;color:var(--teal);}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px;}
.page-head{padding:90px 0 50px;border-bottom:1px solid var(--rule);}
.kicker{display:flex;align-items:center;gap:14px;margin:0 0 18px;
  font-size:.75rem;text-transform:uppercase;letter-spacing:4px;
  font-weight:500;color:var(--teal);}
.kicker::before{content:"";width:34px;height:2px;background:var(--teal);}
h1.page-title{font-family:"Instrument Serif",serif;font-weight:400;
  font-size:clamp(2.8rem,7.5vw,5.4rem);line-height:1;margin:0;
  text-transform:uppercase;letter-spacing:-0.5px;}
/* Must out-specify h1.page-title (0,1,1) — a bare class loses. */
h1.page-title--sm{font-size:clamp(1.69rem,4.55vw,3.25rem);line-height:1.05;}
.kaomoji{font-family:"Montserrat",sans-serif;font-weight:400;letter-spacing:0;
  font-size:.5em;vertical-align:middle;color:var(--teal);margin-left:.15em;}
.kaomoji--inline{font-size:1em;vertical-align:baseline;white-space:nowrap;}
/* The lede is larger type, so it needs a proportionally bigger gap after it
   than a body paragraph — 22px read as cramped against 30px line boxes. */
.name-formal{font-size:.8rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);margin:14px 0 0;}
.lede{font-size:1.12rem;max-width:62ch;margin:26px 0 38px;color:rgba(255,255,255,.86);}

section.block{padding:64px 0;border-bottom:1px solid var(--rule);}
section.block:last-of-type{border-bottom:0;}
h2{font-family:"Instrument Serif",serif;font-weight:400;text-transform:uppercase;
  letter-spacing:1.5px;font-size:1.85rem;margin:0 0 8px;}
h3{font-size:1.05rem;font-weight:500;margin:0 0 4px;letter-spacing:.2px;}
p{margin:0 0 26px;color:rgba(255,255,255,.82);}
.section-note{color:var(--muted);font-size:.9rem;margin:0 0 34px;}

/* ---------- video ---------- */
/* Facade: nothing is requested from YouTube until the visitor clicks play.
   Poster frames are served from this domain, so no i.ytimg.com hit either. */

.split{display:grid;grid-template-columns:2fr 1fr;gap:54px;align-items:start;}

.video-aside{border-left:1px solid var(--rule);padding-left:28px;}
.aside-title{font-family:"Instrument Serif",serif;text-transform:uppercase;
  letter-spacing:1.2px;font-size:1.2rem;margin:0 0 10px;line-height:1.3;}
.aside-note{font-size:.8rem;color:var(--muted);line-height:1.65;margin:0 0 18px;}

.carousel{border:1px solid var(--rule);border-radius:6px;overflow:hidden;
  background:var(--ink-2);}
.video-slot{position:relative;aspect-ratio:16/9;width:100%;background:#0d1418;}
.video-frame{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;
  cursor:pointer;display:block;background-color:#0d1418;
  background-size:cover;background-position:center;}
.video-frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.15),rgba(10,10,10,.55));
  transition:background .25s;}
.video-frame:hover::after{background:linear-gradient(180deg,rgba(10,10,10,.05),rgba(10,10,10,.4));}
.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;border:2px solid #fff;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,10,.35);transition:transform .25s,background .25s,border-color .25s;}
.play::before{content:"";border-left:15px solid #fff;
  border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px;}
.video-frame:hover .play{transform:translate(-50%,-50%) scale(1.1);
  background:var(--teal);border-color:var(--teal);}
.video-frame:hover .play::before{border-left-color:var(--ink);}
.video-slot iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}

/* Covers the player's title bar — the one piece of chrome that links out to
   the YouTube watch page. Sits above the iframe and swallows the click. */
.yt-shield{position:absolute;top:0;left:0;right:46px;height:56px;z-index:3;
  cursor:default;background:transparent;}

.video-stop{position:absolute;top:8px;right:8px;z-index:5;
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  background:rgba(10,10,10,.8);border:1px solid rgba(255,255,255,.35);
  color:#fff;font-size:.8rem;line-height:1;display:flex;
  align-items:center;justify-content:center;transition:background .2s,border-color .2s;}
.video-stop:hover{background:var(--teal);border-color:var(--teal);color:var(--ink);}

.carousel-bar{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 12px;border-top:1px solid var(--rule);}
.carousel-label{font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);}
.nav-btn{width:30px;height:30px;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid var(--rule);color:#fff;
  font-size:1rem;line-height:1;display:flex;align-items:center;
  justify-content:center;transition:border-color .2s,color .2s,background .2s;}
.nav-btn:hover{border-color:var(--teal);color:var(--teal);}

/* ---------- portrait ---------- */
.about-head{display:grid;grid-template-columns:1fr 330px;gap:46px;align-items:end;}
/* The portrait is a transparent cutout, so no frame — she stands on the page
   rather than sitting in a box. A soft radial behind her keeps the figure from
   floating in dead black. */
.portrait{margin:0;position:relative;aspect-ratio:3/4;
  display:flex;align-items:flex-end;justify-content:center;}
.portrait::before{content:"";position:absolute;left:50%;top:52%;
  transform:translate(-50%,-50%);width:120%;height:78%;z-index:0;
  background:radial-gradient(ellipse at center,
    rgba(78,205,196,.13) 0%, rgba(255,214,140,.06) 42%, transparent 72%);}
.portrait img{position:relative;z-index:1;width:100%;height:100%;
  object-fit:contain;object-position:bottom;display:block;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));}
.portrait-hint{display:none;}
.portrait.empty img{display:none;}
.portrait.empty{display:flex;align-items:center;justify-content:center;
  border-style:dashed;border-color:rgba(78,205,196,.45);}
.portrait.empty .portrait-hint{display:block;text-align:center;padding:20px;
  font-size:.78rem;color:var(--muted);line-height:1.9;}
.portrait-hint code{color:var(--teal);font-size:.74rem;}

/* ---------- contact form ---------- */
.contact-form{margin-top:26px;max-width:560px;}
.hp{position:absolute;left:-9999px;}          /* honeypot: hidden from humans */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{display:block;margin-bottom:16px;}
.field span{display:block;font-size:.72rem;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px;}
.field input,.field textarea{
  width:100%;background:var(--ink-2);color:#fff;
  border:1px solid var(--rule);border-radius:4px;padding:12px 14px;
  font-family:inherit;font-size:.95rem;font-weight:300;
  transition:border-color .2s;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--teal);}
.field textarea{resize:vertical;line-height:1.6;}
.btn-submit{margin-top:6px;background:transparent;cursor:pointer;
  font-family:inherit;}
.btn-submit:disabled{opacity:.5;cursor:default;}
.form-status{font-size:.85rem;margin:16px 0 0;min-height:1.2em;color:var(--muted);}
.form-status.is-ok{color:var(--teal);}
.form-status.is-err{color:#ff9a8b;}
.contact-aside{border-left:1px solid var(--rule);padding-left:28px;}
.contact-aside .btn-row{margin-top:12px;}

/* ---------- corner bird ---------- */
/* Small enough to miss on the first pass. Sits quietly at low opacity and
   lifts a little when noticed — the reward for looking. */
.bird-mark{position:fixed;right:16px;bottom:14px;z-index:60;
  width:30px;height:auto;opacity:.38;pointer-events:auto;
  transition:opacity .45s ease, transform .45s cubic-bezier(.34,1.4,.5,1);
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));}
.bird-mark:hover{opacity:1;transform:translate(-4px,-7px) rotate(-7deg);}
@media (prefers-reduced-motion:reduce){
  .bird-mark{transition:opacity .3s ease;}
  .bird-mark:hover{transform:none;}
}
@media (max-width:720px){ .bird-mark{width:24px;right:12px;bottom:10px;} }

/* ---------- link cards ---------- */
.link-cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.link-card{display:flex;flex-direction:column;text-decoration:none;
  border:1px solid var(--rule);border-radius:6px;padding:24px;
  background:var(--ink-2);transition:border-color .25s,transform .25s;}
.link-card:hover{border-color:var(--teal);transform:translateY(-3px);}
.link-card h3{color:var(--teal);margin-bottom:10px;font-size:1rem;letter-spacing:.3px;}
.link-card p{font-size:.88rem;color:var(--muted);margin:0 0 16px;flex-grow:1;}
.link-card .go{font-size:.74rem;letter-spacing:2px;text-transform:uppercase;color:var(--gold);}

/* ---------- résumé ---------- */
/* Timeline rail. A continuous spine with a node per role — turns a list of
   jobs into one connected object, which is the whole difference between
   "résumé document" and "designed artifact". */
.timeline{position:relative;padding-left:0;}
.timeline::before{content:"";position:absolute;left:139px;top:14px;bottom:14px;
  width:1px;background:linear-gradient(180deg,transparent,var(--rule) 8%,
    var(--rule) 92%,transparent);}

.role{display:grid;grid-template-columns:120px 1fr;gap:52px;
  padding:34px 0;border-top:0;position:relative;}
.role::before{content:"";position:absolute;left:135px;top:42px;
  width:9px;height:9px;border-radius:50%;background:var(--ink);
  border:2px solid var(--teal);z-index:2;}
.role:hover::before{background:var(--teal);}
.role-when{font-size:.8rem;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--teal);padding-top:4px;text-align:right;}
.role-when span{display:block;color:var(--muted);letter-spacing:1px;margin-top:4px;
  font-size:.72rem;}

/* Range — threads, not eras. These disciplines overlap and most are still
   running, so sequential blocks would misrepresent the career. Bars show
   when each started and that it never stopped. */
.range-note{color:var(--muted);font-size:.9rem;margin:0 0 30px;max-width:62ch;}
/* Held to a readable measure. Full-bleed bars turn a comparison into a
   stretch of empty track — the eye needs the spans close enough to compare. */
.threads{margin-top:6px;max-width:760px;}
.thread{display:grid;grid-template-columns:245px 1fr;gap:20px;align-items:center;
  padding:8px 0;}
.thread-label{font-size:.88rem;color:rgba(255,255,255,.86);line-height:1.4;}
.thread-label span{display:block;font-size:.7rem;letter-spacing:1.5px;
  color:var(--teal);margin-top:2px;}
.thread-track{position:relative;height:10px;background:rgba(255,255,255,.05);
  border-radius:100px;}
.thread-bar{position:absolute;top:0;bottom:0;border-radius:100px;
  background:linear-gradient(90deg,var(--gold),var(--teal));opacity:.85;}
.thread:hover .thread-bar{opacity:1;}
.thread-axis{display:grid;grid-template-columns:245px 1fr;gap:20px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);}
.thread-axis div:last-child{display:flex;justify-content:space-between;
  font-size:.68rem;letter-spacing:1.5px;color:var(--muted);}
@media (max-width:720px){
  .thread,.thread-axis{grid-template-columns:1fr;gap:6px;}
  .thread-axis div:first-child{display:none;}
}
.role h3{margin-bottom:2px;font-size:1.15rem;font-weight:500;}
.role .org{color:var(--gold);font-size:.9rem;margin:0 0 12px;letter-spacing:.4px;}
.role ul{margin:0;padding-left:18px;}
.role li{margin-bottom:8px;color:rgba(255,255,255,.8);font-size:.94rem;}

.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px;list-style:none;padding:0;}
.chips li{border:1px solid var(--rule);border-radius:100px;padding:7px 15px;
  font-size:.8rem;color:rgba(255,255,255,.8);margin:0;}

.highlights{list-style:none;padding:0;margin:0;}
.highlights li{padding:13px 0 13px 26px;border-bottom:1px solid var(--rule);
  position:relative;font-size:.95rem;color:rgba(255,255,255,.82);}
.highlights li::before{content:"";position:absolute;left:0;top:22px;
  width:7px;height:7px;border-radius:50%;background:var(--teal);}
.new-tag{display:inline-block;margin-left:8px;font-size:.62rem;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--gold);border:1px solid rgba(255,214,140,.4);
  border-radius:100px;padding:2px 8px;vertical-align:middle;}

/* ---------- misc ---------- */
.btn{display:inline-block;text-decoration:none;border:1px solid var(--teal);
  color:var(--teal);padding:13px 26px;font-size:.8rem;letter-spacing:2px;
  text-transform:uppercase;transition:background .25s,color .25s;}
.btn:hover{background:var(--teal);color:var(--ink);}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}

.site-foot{padding:50px 40px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.76rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);}

@media (max-width:980px){
  .split{grid-template-columns:1fr;gap:40px;}
  .video-aside{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:32px;}
  .carousel{max-width:520px;}
}
@media (max-width:860px){
  .about-head{grid-template-columns:1fr;gap:32px;}
  .portrait{max-width:300px;}
}
@media (max-width:720px){
  .site-nav{padding:16px 22px;flex-wrap:wrap;gap:12px;}
  .site-nav ul{gap:16px;}
  .wrap{padding:0 22px;}
  .role{grid-template-columns:1fr;gap:10px;}
  .site-foot{padding:36px 22px;}
}