/* ============================================================
   Yadnyeya Vairat — quantitative trading portfolio
   Concept: a research note set on a trading system.
   Newsreader (prose) against IBM Plex Mono (labels + numerals).
   Two-sided semantic accent: bid = teal, ask = amber.
   ============================================================ */

:root{
  --ink:        #0b1220;
  --ink-1:      #0f1829;
  --ink-2:      #142036;
  --rule:       #22314e;
  --rule-soft:  #1a2740;
  --paper:      #e9e7e2;
  --paper-dim:  #aab6c8;
  --muted:      #6f7f96;
  --bid:        #3fb5a0;
  --ask:        #e2a04a;
  --link:       #7fd3c4;

  --gutter: 24px;
  --maxw: 1120px;
  --rail: 190px;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

/* faint grid, like ruled paper under the type */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--rule-soft) 1px, transparent 1px);
  background-size:100% 88px;
  opacity:.35;
  mask-image:linear-gradient(to bottom, transparent, #000 220px, #000 70%, transparent);
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--link); text-decoration:none; text-underline-offset:3px; }
a:hover{ text-decoration:underline; }

:focus-visible{ outline:2px solid var(--ask); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); position:relative; z-index:1; }

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:8px; top:8px; z-index:99; background:var(--ask); color:var(--ink); padding:8px 14px; font-family:var(--mono); }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; margin:0; letter-spacing:-.015em; }
h2{ font-size:clamp(1.55rem,3vw,2.15rem); line-height:1.12; }
h3{ font-size:1.22rem; line-height:1.25; }
p{ margin:0 0 1.05em; max-width:68ch; }
p:last-child{ margin-bottom:0; }

.lede{ font-size:1.22rem; color:var(--paper); }
.dim{ color:var(--paper-dim); }

.label{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.09em;
  color:var(--muted); font-weight:500;
}
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:500; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule-soft);
}
.nav__in{ display:flex; align-items:center; gap:20px; height:58px; }
.nav__brand{
  font-family:var(--mono); font-size:.86rem; letter-spacing:.02em;
  color:var(--paper); display:flex; align-items:baseline; gap:9px; white-space:nowrap;
}
.nav__brand:hover{ text-decoration:none; }
.nav__tick{ color:var(--bid); font-size:.68rem; letter-spacing:.12em; }
.nav__links{
  display:flex; align-items:center; gap:4px; margin-left:auto; list-style:none; padding:0;
}
.nav__links a{
  font-family:var(--mono); font-size:.78rem; color:var(--paper-dim);
  padding:7px 11px; display:block; border-bottom:1px solid transparent;
}
.nav__links a:hover{ color:var(--paper); text-decoration:none; border-bottom-color:var(--rule); }
.nav__links a[aria-current="page"]{ color:var(--paper); border-bottom-color:var(--ask); }
.nav__cv{ color:var(--ink) !important; background:var(--paper); margin-left:8px; }
.nav__cv:hover{ background:var(--ask); border-bottom-color:transparent !important; }
.nav__burger{
  display:none; margin-left:auto; background:none; border:1px solid var(--rule);
  color:var(--paper); font-family:var(--mono); font-size:.76rem; padding:6px 10px; cursor:pointer;
}

/* ---------- section scaffold: ruled ledger ---------- */
.sec{ padding:clamp(46px,6vw,78px) 0; border-top:1px solid var(--rule-soft); }
.sec--tight{ padding:clamp(38px,5vw,60px) 0; }
.ledger{ display:grid; grid-template-columns:var(--rail) 1fr; gap:36px; align-items:start; }
.ledger__rail{ position:sticky; top:86px; }
.ledger__rail .label{ display:block; padding-bottom:9px; border-bottom:1px solid var(--rule); }

/* ---------- hero ---------- */
.hero{ padding:clamp(34px,5vw,60px) 0 clamp(44px,6vw,76px); }
.ladder{ border-top:1px solid var(--rule); }

/* the name block, with the portrait held on the right */
.mid{
  padding:clamp(26px,4vw,44px) 0 clamp(26px,4vw,40px);
  border-bottom:1px solid var(--bid);
  display:grid; grid-template-columns:1fr minmax(0,256px);
  gap:clamp(22px,4vw,48px); align-items:start;
}
.mid__shot{ margin:0; border:1px solid var(--rule); }
.mid__shot img{ width:100%; filter:grayscale(.34) contrast(1.03); }
.mid__tag{ display:block; margin-bottom:14px; }
.mid h1{
  font-size:clamp(2.7rem,8.2vw,5.4rem); line-height:.93; letter-spacing:-.03em;
  font-weight:500; margin:0 0 16px;
}
.mid__sub{ font-size:clamp(1.05rem,2vw,1.3rem); color:var(--paper-dim); max-width:56ch; margin:0; }
.mid__meta{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:22px;
  font-family:var(--mono); font-size:.76rem; color:var(--muted);
}
.mid__meta b{ color:var(--paper-dim); font-weight:500; }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--mono); font-size:.78rem; letter-spacing:.04em;
  padding:11px 18px; border:1px solid var(--rule); color:var(--paper); background:transparent;
  cursor:pointer;
}
.btn:hover{ border-color:var(--ask); color:var(--ask); text-decoration:none; }
.btn--solid{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn--solid:hover{ background:var(--ask); border-color:var(--ask); color:var(--ink); }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

/* ---------- the stack (genuine sequence → numbered) ---------- */
.stack{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--rule-soft); border:1px solid var(--rule-soft); }
.stack__step{ background:var(--ink); padding:20px 18px; }
.stack__n{ font-family:var(--mono); font-size:.7rem; color:var(--ask); letter-spacing:.1em; }
.stack__step h3{ font-size:1.02rem; margin:9px 0 7px; }
.stack__step p{ font-size:.88rem; color:var(--paper-dim); line-height:1.5; margin:0; }

/* ---------- experience ledger ---------- */
.role{ border-top:1px solid var(--rule); padding:30px 0 34px; display:grid; grid-template-columns:var(--rail) 1fr; gap:36px; }
.role:first-of-type{ border-top:0; }
.role__when{ font-family:var(--mono); font-size:.78rem; color:var(--ask); display:block; }
.role__where{ font-size:.92rem; color:var(--paper-dim); margin-top:7px; line-height:1.4; }
.role h3{ font-size:1.42rem; }
.role__org{ font-size:1.02rem; color:var(--paper-dim); margin:4px 0 16px; }
.bul{ list-style:none; margin:0; padding:0; }
.bul li{
  position:relative; padding-left:20px; margin-bottom:11px; max-width:74ch;
  color:var(--paper-dim); font-size:1rem;
}
.bul li::before{
  content:""; position:absolute; left:0; top:.68em; width:9px; height:1px; background:var(--ask);
}
.bul li:last-child{ margin-bottom:0; }
.bul strong, .role strong, .proj strong{ color:var(--paper); font-weight:600; }

/* ---------- projects ---------- */
.proj{ border-top:1px solid var(--rule); padding:38px 0 42px; }
.proj__top{ display:grid; grid-template-columns:var(--rail) 1fr; gap:36px; align-items:start; }
.proj__kind{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:var(--bid); display:block; }
.proj h3{ font-size:clamp(1.4rem,2.6vw,1.85rem); margin-bottom:12px; }
.proj__spec{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--rule-soft); border:1px solid var(--rule-soft); margin:22px 0 4px;
}
.spec{ background:var(--ink-1); padding:13px 15px; }
.spec .label{ display:block; margin-bottom:5px; }
.spec span{ font-family:var(--mono); font-size:.82rem; color:var(--paper-dim); line-height:1.4; display:block; }
.spec b{ color:var(--paper); font-weight:500; }

.tags{ display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 0; padding:0; list-style:none; }
.tags li{
  font-family:var(--mono); font-size:.72rem; color:var(--paper-dim);
  border:1px solid var(--rule); padding:4px 9px; border-radius:2px;
}

/* gallery */
.shots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; margin-top:24px; }
.shot{ border:1px solid var(--rule-soft); background:var(--ink-1); cursor:zoom-in; padding:0; overflow:hidden; }
.shot img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top left; transition:transform .3s; }
.shot:hover img{ transform:scale(1.02); }
.shot figcaption{ font-family:var(--mono); font-size:.68rem; color:var(--paper-dim); padding:7px 9px; text-align:left; border-top:1px solid var(--rule-soft); }

/* compact earlier-work rows */
.mini{ border-top:1px solid var(--rule-soft); padding:20px 0; display:grid; grid-template-columns:var(--rail) 1fr; gap:36px; }
.mini h4{ font-size:1.08rem; margin-bottom:6px; }
.mini p{ font-size:.97rem; color:var(--paper-dim); margin:0; max-width:70ch; }

/* ---------- skills ---------- */
.skillrow{ border-top:1px solid var(--rule); padding:26px 0; display:grid; grid-template-columns:var(--rail) 1fr; gap:36px; align-items:start; }
.chips{ display:flex; flex-wrap:wrap; gap:7px; list-style:none; margin:0; padding:0; }
.chips li{
  font-family:var(--mono); font-size:.79rem; color:var(--paper-dim);
  border:1px solid var(--rule); padding:5px 10px; border-radius:2px; background:var(--ink-1);
}
.chips li.hot{ border-color:color-mix(in srgb, var(--ask) 55%, var(--rule)); color:var(--paper); }

.cards2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--rule-soft); border:1px solid var(--rule-soft); }
.cards2 > div{ background:var(--ink-1); padding:20px; }
.cards2 h4{ font-size:1.05rem; margin-bottom:6px; }
.cards2 .label{ display:block; margin-bottom:10px; }
.cards2 p{ font-size:.92rem; color:var(--paper-dim); margin:0; }

/* ---------- education ---------- */
.edu{ border-top:1px solid var(--rule); padding:24px 0; display:grid; grid-template-columns:var(--rail) 1fr; gap:36px; }
.edu h3{ font-size:1.2rem; }
.edu__deg{ color:var(--paper-dim); margin:3px 0 10px; font-size:1rem; }
.edu__note{ font-size:.95rem; color:var(--paper-dim); margin:0; }
.edu__note b{ color:var(--ask); font-weight:500; }

/* ---------- contact ---------- */
.contact{ display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:1px; background:var(--rule-soft); border:1px solid var(--rule-soft); }
.contact a, .contact div{ background:var(--ink-1); padding:20px; display:block; }
.contact a:hover{ background:var(--ink-2); text-decoration:none; }
.contact .label{ display:block; margin-bottom:7px; }
.contact strong{ font-family:var(--mono); font-size:.82rem; font-weight:500; color:var(--paper); overflow-wrap:anywhere; line-height:1.4; }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--rule); padding:26px 0 40px; margin-top:20px; }
.foot__in{ display:flex; flex-wrap:wrap; gap:14px 26px; align-items:baseline; font-family:var(--mono); font-size:.74rem; color:var(--muted); }
.foot__in a{ color:var(--paper-dim); }
.foot__in .sp{ margin-left:auto; }

/* ---------- lightbox ---------- */
.lb{ position:fixed; inset:0; z-index:90; background:rgba(4,8,15,.94); display:none; }
.lb[open]{ display:grid; grid-template-rows:auto 1fr auto; }
.lb__bar{ display:flex; align-items:center; gap:14px; padding:14px var(--gutter); font-family:var(--mono); font-size:.76rem; color:var(--paper-dim); border-bottom:1px solid var(--rule-soft); }
.lb__bar button{ background:none; border:1px solid var(--rule); color:var(--paper); font-family:var(--mono); font-size:.76rem; padding:6px 11px; cursor:pointer; }
.lb__bar button:hover{ border-color:var(--ask); color:var(--ask); }
.lb__x{ margin-left:auto; }
.lb__stage{ display:grid; place-items:center; padding:18px var(--gutter); overflow:auto; }
.lb__stage img{ max-height:78vh; width:auto; border:1px solid var(--rule); }
.lb__cap{ padding:12px var(--gutter) 22px; font-family:var(--mono); font-size:.74rem; color:var(--muted); text-align:center; }

/* ---------- motion ---------- */
.reveal{ opacity:0; transform:translateY(10px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  *{ transition-duration:.01ms !important; }
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .stack{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  :root{ --gutter:16px; }
  .ledger,.role,.proj__top,.mini,.skillrow,.edu{ grid-template-columns:1fr; gap:14px; }
  .ledger__rail{ position:static; }
  .ledger__rail .label{ border-bottom:0; padding-bottom:0; }
  .nav__burger{ display:block; }
  .nav__links{
    display:none; position:absolute; left:0; right:0; top:58px;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink-1); border-bottom:1px solid var(--rule); padding:6px 0;
  }
  .nav__links.open{ display:flex; }
  .nav__links a{ padding:12px var(--gutter); }
  .nav__cv{ margin:8px var(--gutter); text-align:center; }
  .mid{ grid-template-columns:1fr; gap:26px; }
  .mid__shot{ max-width:190px; }
}
@media (max-width:560px){
  .stack{ grid-template-columns:1fr; }
  body{ font-size:1rem; }
}