/* ============================================================
   Tee — shared design tokens
   "the seam between systems and the sacred"
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Padauk:wght@400;700&display=swap');

:root{
  /* palette */
  --vellum:        #F4F0E8;
  --vellum-warm:   #EDE7DB;
  --vellum-deep:   #E6DECE;
  --ink:           #1A1714;
  --ink-soft:      #3A352F;
  --gold:          #B08D3F;
  --vermilion:     #C1432B;
  --magenta:       #FF3D81;
  --moss:          #2E3A2C;

  /* type */
  --eg: 'EB Garamond', Georgia, serif;
  --in: 'Inter', system-ui, sans-serif;
  --mo: 'JetBrains Mono', ui-monospace, monospace;
  --pd: 'Padauk', 'EB Garamond', sans-serif;

  /* rhythm */
  --hair: rgba(26,23,20,.14);
  --hair-soft: rgba(26,23,20,.08);
  --pad: clamp(22px, 5vw, 64px);
  --maxw: 1180px;

  /* motion */
  --breath-dur: 11s;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--in);
  background:var(--vellum);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.eg{ font-family:var(--eg); }
.in{ font-family:var(--in); }
.mo{ font-family:var(--mo); }
.pd{ font-family:var(--pd); }

.italic{ font-style:italic; }
.kicker{
  font-family:var(--mo);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
}
.coords{
  font-family:var(--mo);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--ink);
  opacity:.5;
}

a{ color:inherit; text-decoration:none; }

/* ---------- shared site chrome ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  mix-blend-mode:multiply;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.topbar .brand{ display:flex; align-items:baseline; gap:10px; }
.topbar .brand .mark{ font-family:var(--eg); font-size:20px; letter-spacing:.01em; }
.topbar .brand .my{ font-family:var(--pd); font-size:15px; color:var(--vermilion); }

/* frosted banner on scroll — shared by every page (toggled by scripts/nav.js) */
.topbar.scrolled{
  mix-blend-mode:normal;
  background:rgba(244,240,232,.72);
  -webkit-backdrop-filter:blur(15px) saturate(1.35);
  backdrop-filter:blur(15px) saturate(1.35);
  box-shadow:0 1px 0 var(--hair), 0 14px 34px -24px rgba(26,23,20,.45);
  padding-top:13px; padding-bottom:13px;
}

/* ---- brand: erase "Thihan သီဟန်" then type "TEE >_<" (Music page only) ---- */
.topbar .brand.animating{ gap:0; align-items:baseline; }
.topbar .brand .tee-caret{
  display:inline-block; width:2px; height:0.95em; margin-left:2px;
  background:var(--magenta); border-radius:1px; align-self:center;
  animation:teeCaretBlink 1.05s steps(1) infinite;
}
.topbar .brand.tee-mode .mark{
  font-family: var(--in); font-weight:700; font-style:normal;
  font-size:18px; letter-spacing:.02em;
}   /* TEE — Inter sans-serif, bold */
.topbar .brand.tee-mode .my{
  white-space:pre;
  font-family: var(--pd); color: var(--vermilion);
}   /* >_< — Padauk + vermilion, matches သီဟန် */
@keyframes teeCaretBlink{ 50%{ opacity:0; } }
.topnav{ display:flex; gap:26px; }
.topnav a{
  font-family:var(--in); font-size:13px; opacity:.78;
  position:relative; transition:opacity .25s;
}
.topnav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-4px; height:1px;
  background:var(--vermilion); transition:right .3s ease;
}
.topnav a:hover{ opacity:1; }
.topnav a:hover::after{ right:0; }
.topnav a.active{ opacity:1; }
.topnav a.active::after{ right:0; }
/* hamburger toggle */
.nav-toggle{
  display:none; position:relative; z-index:60;
  width:42px; height:42px; padding:0; margin-right:-9px;
  background:none; border:none; cursor:pointer; color:var(--ink);
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
  transition:opacity .25s ease;
}
.nav-toggle:hover{ opacity:.6; }
.nav-toggle .bar{
  display:block; width:21px; height:1.5px;
  background:currentColor; border-radius:2px;
  transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}

@media (max-width:680px){
  .nav-toggle{ display:flex; }
  .topnav{
    counter-reset:navitem;
    position:absolute; top:100%; right:0;
    flex-direction:column; gap:0; width:min(78vw, 250px);
    max-width:calc(100vw - var(--pad) * 2);
    visibility:hidden; opacity:0; pointer-events:none;
    transform:translateY(-8px); transform-origin:top right;
    transition:opacity .26s ease, transform .26s cubic-bezier(.4,0,.2,1), visibility 0s .26s;
    background:linear-gradient(158deg, rgba(248,245,239,.92), rgba(237,231,219,.86));
    -webkit-backdrop-filter:blur(26px) saturate(1.7);
    backdrop-filter:blur(26px) saturate(1.7);
    border:1px solid var(--hair);
    border-radius:0; padding:6px 0;
    box-shadow:0 24px 50px -24px rgba(26,23,20,.4), inset 0 1px 0 rgba(255,255,255,.5);
  }
  .topbar.nav-open{ mix-blend-mode:normal; }
  .topbar.nav-open .topnav{
    visibility:visible; opacity:1; pointer-events:auto;
    transform:translateY(0);
    transition:opacity .26s ease, transform .26s cubic-bezier(.4,0,.2,1);
  }
  .topnav a{
    display:flex; align-items:baseline; gap:14px;
    padding:13px 20px; border-radius:0;
    font-family:var(--eg); font-size:19px; line-height:1; color:var(--ink);
    opacity:0; transform:translateX(10px);
    transition:background .2s ease, color .2s ease,
               opacity .3s ease, transform .3s cubic-bezier(.4,0,.2,1);
  }
  .topnav a::before{
    counter-increment:navitem;
    content:counter(navitem, decimal-leading-zero);
    font-family:var(--mo); font-size:10px; letter-spacing:.1em;
    color:var(--gold); opacity:.7;
  }
  .topnav a::after{ display:none; }      /* kill desktop underline */
  .topnav a:hover, .topnav a:focus-visible{ background:rgba(26,23,20,.055); }
  .topnav a.active{ color:var(--vermilion); }
  .topnav a.active::before{ color:var(--vermilion); opacity:1; }
  /* staggered reveal */
  .topbar.nav-open .topnav a{ opacity:1; transform:translateX(0); }
  .topbar.nav-open .topnav a:nth-child(1){ transition-delay:.05s; }
  .topbar.nav-open .topnav a:nth-child(2){ transition-delay:.10s; }
  .topbar.nav-open .topnav a:nth-child(3){ transition-delay:.15s; }
  .topbar.nav-open .topnav a:nth-child(4){ transition-delay:.20s; }
  /* hamburger → X */
  .topbar.nav-open .nav-toggle .bar:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .topbar.nav-open .nav-toggle .bar:nth-child(2){ opacity:0; transform:scaleX(.3); }
  .topbar.nav-open .nav-toggle .bar:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
}

@media (prefers-reduced-motion: reduce){
  .topnav, .topnav a, .nav-toggle .bar{ transition-duration:.01ms; }
  .topbar.nav-open .topnav a{ transform:none; }
}

/* ---------- selected work ---------- */
.work{ padding:clamp(40px,8vh,90px) 0 clamp(60px,10vh,110px); }
.section-label{
  font-family:var(--mo); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:14px; margin-bottom:8px;
}
.section-label::after{ content:''; flex:1; height:1px; background:var(--hair); }

.work-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:22px 0; border-bottom:1px solid var(--hair);
  transition:padding-left .35s ease;
}
.work-row:hover{ padding-left:14px; }
.work-row .cat{
  font-family:var(--mo); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--vermilion);
}
.work-row .title{
  font-family:var(--eg); font-size:clamp(20px,2.4vw,27px);
  margin-top:5px; line-height:1.2; transition:color .25s;
}
.work-row:hover .title{ color:var(--vermilion); }
.work-row .yr{ font-family:var(--mo); font-size:12px; opacity:.5; flex-shrink:0; }

/* ---------- footer ---------- */
.foot{
  background:var(--ink); color:var(--vellum);
  padding:clamp(54px,9vh,96px) 0 40px;
}
.foot .wrap{ display:flex; flex-direction:column; gap:34px; }
.foot .big{
  font-family:var(--eg); font-size:clamp(30px,5vw,58px);
  line-height:1.1; font-style:italic;
}
.foot .row{ display:flex; flex-wrap:wrap; gap:30px 46px; align-items:baseline; justify-content:space-between; }
.foot .links{ display:flex; flex-wrap:wrap; gap:8px 30px; }
.foot .links a{
  font-family:var(--in); font-size:14px; opacity:.7; transition:opacity .2s, color .2s;
}
.foot .links a:hover{ opacity:1; color:var(--magenta); }
.foot .fineprint{ font-family:var(--mo); font-size:11px; opacity:.45; letter-spacing:.04em; }
.foot .my{ font-family:var(--pd); color:var(--gold); opacity:.8; }

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