/* ════════════════════════════════════════════════════════════════
   Yang Yang — portfolio
   Dark-committed. Indigo ground, turmeric accent, paper surfaces.
   No build step: plain CSS, system-available typefaces only.
   ════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────  tokens  ───────────────────────────── */
:root {
  /* ground */
  --ground:#0E1030;
  --ground-2:#151843;
  --band:#080A22;
  --rule:#2A2D60;
  --rule-soft:#1E2148;

  /* type colour */
  --ink:#E8E7F3;
  --ink-soft:#AFAECD;
  --ink-faint:#8483A6;

  /* accent */
  --turmeric:#E0A027;
  --turmeric-deep:#C98A12;

  /* paper surfaces — documents and app screens, dimmed for night reading */
  --paper:#E9E5DA;
  --paper-rule:#C4BEAC;
  --paper-ink:#20223A;
  --paper-soft:#6E6A5C;
  --indigo-800:#1D2054;
  --indigo-700:#2B3080;
  --indigo-900:#14163C;

  /* status */
  --ok:#7FC49B;   --ok-bg:#1B3A2A;
  --wait:#A9ADEE; --wait-bg:#1E2158;
  --idle:#9A9CB6; --idle-bg:#24263F;
  --late:#E5907E; --late-bg:#3E2019;

  /* type */
  --display:"Optima","Candara","Gill Sans Nova","Gill Sans","Trebuchet MS",sans-serif;
  --body:"Iowan Old Style","Charter","Bitstream Charter","Cambria",Georgia,serif;
  --ui:ui-sans-serif,-apple-system,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --measure:62ch;
  --pad:clamp(1.25rem,5vw,3rem);

  color-scheme:dark;
}

/* ─────────────────────────────  reset + base  ───────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:clamp(1rem,.96rem + .2vw,1.08rem);
  line-height:1.62; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--display); font-weight:600;
  text-wrap:balance; line-height:1.14; margin:0;
}
p{margin:0; max-width:var(--measure);}
ul,ol,dl,dd{margin:0;}
img{max-width:100%; display:block;}
table{border-collapse:collapse;}
a{color:inherit; text-decoration-thickness:1px; text-underline-offset:.18em;}
button{font:inherit;}
:focus-visible{outline:2px solid var(--turmeric); outline-offset:3px; border-radius:2px;}

.wrap{max-width:72rem; margin-inline:auto; padding-inline:var(--pad);}
.skip{
  position:absolute; left:-9999px; top:0; background:var(--turmeric);
  color:#231A05; padding:.6rem 1rem; font-family:var(--ui); font-weight:600; z-index:9;
}
.skip:focus{left:0;}

/* placeholders you need to fill in before publishing */
.slot{
  border-bottom:1px dashed var(--turmeric);
  color:var(--turmeric); font-family:var(--mono); font-size:.92em;
}

/* ─────────────────────────────  site chrome  ───────────────────────────── */
.masthead{background:var(--band); border-bottom:1px solid var(--rule);}
.masthead-inner{
  display:flex; flex-wrap:wrap; gap:.6rem 2rem;
  align-items:baseline; justify-content:space-between; padding-block:1.05rem;
}
.wordmark{
  font-family:var(--display); font-size:1.08rem; font-weight:600;
  letter-spacing:.02em; text-decoration:none;
}
.wordmark span{
  color:var(--ink-faint); font-family:var(--body);
  font-size:.88rem; font-weight:400; margin-left:.65rem;
}
.sitenav{display:flex; gap:1.35rem; font-family:var(--ui); font-size:.88rem;}
.sitenav a{color:var(--ink-soft); text-decoration:none;}
.sitenav a:hover,.sitenav a[aria-current]{color:var(--turmeric);}

.sitefoot{
  background:var(--band); border-top:1px solid var(--rule);
  padding-block:2rem; margin-top:auto;
  font-family:var(--ui); font-size:.84rem; color:var(--ink-faint);
}
.sitefoot-inner{display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between;}
.sitefoot a{color:var(--ink-soft);}

/* ─────────────────────────────  section rhythm  ───────────────────────────── */
.chapter{padding-block:clamp(3rem,6.5vw,5rem);}
.chapter--band{background:var(--band);}
.chapter--rule{border-top:1px solid var(--rule-soft);}

.chapter-head{display:flex; flex-direction:column; gap:.8rem; margin-bottom:2.25rem;}
.chapter-head h2{font-size:clamp(1.45rem,1.2rem + 1.2vw,2rem);}
.chapter-head p{color:var(--ink-soft);}

/* ═══════════════════════════  HOME  ═══════════════════════════ */
.intro{background:var(--band); padding-block:clamp(3.5rem,9vw,7rem) clamp(3rem,7vw,5.5rem);}
.intro h1{font-size:clamp(2.4rem,1.6rem + 3.6vw,4.2rem); letter-spacing:-.012em; margin-bottom:1.4rem;}
.intro .lede{
  font-size:clamp(1.1rem,1rem + .5vw,1.35rem); color:var(--ink-soft);
  max-width:46ch; margin-bottom:1.6rem;
}
.intro .status{
  font-family:var(--ui); font-size:.9rem; color:var(--ink-faint);
  display:flex; align-items:center; gap:.6rem;
}
.intro .status::before{
  content:""; width:.5rem; height:.5rem; border-radius:50%;
  background:var(--turmeric); flex:none;
}

/* work index — one entry per row, text beside a live screen preview */
.work{display:grid; gap:clamp(2.5rem,5vw,3.5rem);}
.entry{
  display:grid; gap:clamp(1.5rem,3vw,2.5rem);
  padding-top:clamp(2rem,4vw,2.75rem); border-top:1px solid var(--rule);
}
.work > .entry:first-child{padding-top:0; border-top:0;}
@media (min-width:60rem){ .entry{grid-template-columns:1fr 1.15fr; align-items:start;} }

.entry-meta{
  display:flex; gap:.5rem .9rem; align-items:baseline; flex-wrap:wrap;
  font-family:var(--ui); font-size:.8rem; color:var(--ink-faint); margin-bottom:.9rem;
}
.entry-meta b{color:var(--turmeric); font-weight:600; font-variant-numeric:tabular-nums;}
.entry h3{font-size:clamp(1.35rem,1.15rem + .9vw,1.8rem); margin-bottom:.7rem;}
.entry p{color:var(--ink-soft); font-size:.98rem; margin-bottom:1.1rem;}
.entry .tags{
  display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.4rem;
  font-family:var(--ui); font-size:.74rem;
}
.entry .tags li{list-style:none; border:1px solid var(--rule); border-radius:99px; padding:.2rem .65rem; color:var(--ink-faint);}

.readmore{
  display:inline-block; font-family:var(--display); font-weight:600; font-size:1rem;
  color:var(--turmeric); text-decoration:none;
  border-bottom:2px solid var(--turmeric); padding-bottom:.15rem;
}
.readmore:hover{color:var(--ink); border-color:var(--ink);}

.entry--empty{color:var(--ink-faint);}
.entry--empty h3{color:var(--ink-faint);}

/* about */
.about-grid{display:grid; gap:clamp(1.8rem,4vw,3rem);}
@media (min-width:58rem){ .about-grid{grid-template-columns:1.15fr 1fr; gap:4rem;} }
.about-grid p + p{margin-top:1rem;}

.facts-list{display:grid;}
.facts-list div{
  display:grid; grid-template-columns:8rem 1fr; gap:1rem;
  padding:.65rem 0; border-bottom:1px solid var(--rule-soft);
}
.facts-list dt{color:var(--ink-faint); font-family:var(--ui); font-size:.8rem;}
.facts-list dd{font-size:.95rem;}

/* ═══════════════════════════  CASE STUDY  ═══════════════════════════ */
.casehead{background:var(--band); padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3.5rem,8vw,6rem);}
.case-grid{display:grid; gap:clamp(2.5rem,5vw,4rem); align-items:start;}
@media (min-width:62rem){ .case-grid{grid-template-columns:1fr 1.05fr; gap:4.5rem;} }

.casehead h1{font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem); letter-spacing:-.006em; margin-bottom:1.3rem;}
.casehead .lede{color:var(--ink-soft); font-size:clamp(1.02rem,1rem + .25vw,1.15rem); margin-bottom:1.9rem;}

.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule);
  font-variant-numeric:tabular-nums;
}
.facts div{background:var(--band); padding:.8rem .9rem;}
.facts dt{color:var(--ink-faint); font-size:.76rem; font-family:var(--ui); margin-bottom:.2rem;}
.facts dd{font-family:var(--display); font-size:1.35rem; color:var(--turmeric);}

/* ── the A4 document ────────────────────────────────────────────── */
.doc-frame{container-type:inline-size;}
.doc{
  background:var(--paper); color:var(--paper-ink);
  font-family:var(--ui); font-size:clamp(7px,2.02cqw,11.5px); line-height:1.5;
  padding:3.4em 3em; box-shadow:0 1.4rem 3rem rgba(0,0,0,.45); border-radius:1px;
}
@media (prefers-reduced-motion:no-preference){
  .doc{animation:lift .9s cubic-bezier(.2,.7,.3,1) both .15s;}
  @keyframes lift{from{opacity:0; transform:translateY(1.4rem);}to{opacity:1; transform:none;}}
}
.doc-top{display:flex; justify-content:space-between; align-items:flex-start; gap:2em;}
.doc-logo{font-family:var(--display); font-size:1.75em; font-weight:600; color:var(--indigo-800); line-height:1;}
.doc-logo small{
  display:block; font-family:var(--ui); font-size:.36em; font-weight:400;
  letter-spacing:.16em; color:var(--paper-soft); margin-top:.7em;
}
.doc-title{text-align:right;}
.doc-title b{display:block; font-family:var(--display); font-size:1.55em; letter-spacing:.06em; color:var(--indigo-800);}
.doc-title span{color:var(--paper-soft); font-size:.92em;}
.doc-hr{height:2px; background:var(--indigo-800); margin:1.5em 0 1.7em;}

.doc-meta{display:grid; grid-template-columns:1.35fr 1fr; gap:2em; margin-bottom:1.8em;}
.doc-meta h5{
  margin-bottom:.55em; font-family:var(--ui); font-size:.82em;
  font-weight:600; letter-spacing:.1em; color:#8A8371;
}
.doc-meta p{max-width:none; line-height:1.65;}
.doc-meta b{font-weight:600;}

.kv{display:flex; justify-content:space-between; gap:1.5em; border-bottom:1px dotted var(--paper-rule); padding:.24em 0;}
.kv span{color:var(--paper-soft);}
.kv b{font-weight:600; font-variant-numeric:tabular-nums;}

.doc-table{width:100%; font-size:.94em;}
.doc-table th{
  background:var(--indigo-800); color:#F6F3EA; text-align:left;
  padding:.62em .8em; font-weight:600; font-size:.88em; letter-spacing:.04em;
}
.doc-table th:last-child,.doc-table td:last-child{text-align:right;}
.doc-table td{padding:.62em .8em; border-bottom:1px solid var(--paper-rule); vertical-align:top;}
.doc-table tbody tr:nth-child(odd) td{background:rgba(43,48,128,.045);}
.doc-table .day{font-weight:600; white-space:nowrap;}
.doc-table .city{font-weight:600; color:var(--indigo-700);}
.doc-table .note{color:var(--paper-soft); display:block; margin-top:.2em; font-size:.94em;}
.num{font-variant-numeric:tabular-nums; white-space:nowrap;}

.doc-totals{margin-left:auto; width:min(60%,22em); margin-top:1.5em;}
.doc-totals .kv{border-bottom:none; padding:.3em 0;}
.doc-totals .grand{border-top:2px solid var(--indigo-800); margin-top:.5em; padding-top:.6em;}
.doc-totals .grand span,.doc-totals .grand b{font-size:1.18em; color:var(--indigo-800); font-weight:600;}

.doc-foot{display:flex; justify-content:space-between; align-items:flex-end; gap:2em; margin-top:2.6em;}
.doc-terms{max-width:22em;}
.doc-terms h5{margin-bottom:.5em; font-family:var(--ui); font-size:.82em; letter-spacing:.1em; color:#8A8371;}
.doc-terms ol{padding-left:1.2em; color:#5C5849; line-height:1.7;}
.doc-sign{text-align:center; min-width:11em;}
.doc-sign .scribble{
  height:3.2em; margin:.4em 0 .3em;
  background:
    radial-gradient(ellipse 3.4em 1.1em at 45% 62%,transparent 46%,rgba(30,32,56,.5) 47%,transparent 51%),
    radial-gradient(ellipse 1.9em .8em at 62% 45%,transparent 52%,rgba(30,32,56,.42) 53%,transparent 58%);
}
.doc-sign .line{border-top:1px solid var(--paper-ink); padding-top:.45em; font-weight:600;}
.doc-sign small{color:var(--paper-soft);}

.doc-caption{margin-top:1rem; color:var(--ink-faint); font-size:.85rem; font-family:var(--ui); max-width:32rem;}

/* ── what it does ───────────────────────────────────────────────── */
.does{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule);}
@media (min-width:52rem){ .does{grid-template-columns:repeat(3,1fr);} }
.does > div{background:var(--ground); padding:1.5rem 1.45rem 1.65rem;}
.does h3{margin-bottom:.5rem; font-size:1.08rem;}
.does p{color:var(--ink-soft); font-size:.94rem;}

/* ── recreated app screens ──────────────────────────────────────── */
.screen{
  container-type:inline-size; background:var(--paper); color:var(--paper-ink);
  border-radius:3px; overflow:hidden; box-shadow:0 1rem 2.6rem rgba(0,0,0,.4);
  font-family:var(--ui);
}
.screen-bar{display:flex; align-items:center; gap:.5rem; padding:.6rem .85rem; background:var(--indigo-900);}
.screen-bar i{width:.55rem; height:.55rem; border-radius:50%; background:#3A3E78; display:block;}
.screen-bar em{
  margin-left:.6rem; font-style:normal; color:#9C9BC1; font-size:.72rem;
  font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.screen-body{display:grid; grid-template-columns:11rem 1fr; min-height:20rem;}

.side{background:var(--indigo-900); color:#B9B8D8; padding:1rem .75rem; font-size:.79rem;}
.side h6{margin-bottom:.85rem; padding:0 .55rem; font-family:var(--display); font-size:1rem; color:#F0EEF9; font-weight:600;}
.side .item{display:block; padding:.4rem .55rem; border-radius:3px; text-decoration:none; color:inherit;}
.side .item[aria-current]{background:var(--turmeric); color:#231A05; font-weight:600;}
.side hr{border:0; border-top:1px solid #2A2D60; margin:.8rem .55rem;}
.side .who{padding:0 .55rem; font-size:.71rem; color:#7F7EA6; line-height:1.5;}
.side .who b{display:block; color:#D6D5EA; font-size:.79rem; font-weight:600;}

.pane{padding:1.2rem 1.3rem 1.5rem; min-width:0;}
.pane-head{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; justify-content:space-between; margin-bottom:1rem;}
.pane-head h4{font-size:1.08rem;}
.pane-actions{display:flex; gap:.5rem; align-items:center;}

.btn{
  font-family:var(--ui); font-size:.77rem; font-weight:600; border-radius:3px;
  padding:.4rem .78rem; background:var(--indigo-800); color:#F2F0FA; border:none;
}
.btn.ghost{background:transparent; color:var(--indigo-700); border:1px solid var(--paper-rule);}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); gap:.65rem; margin-bottom:1.15rem;}
.tile{border:1px solid var(--paper-rule); border-radius:3px; padding:.7rem .8rem; background:rgba(43,48,128,.035);}
.tile dt{font-size:.71rem; color:var(--paper-soft); margin-bottom:.28rem;}
.tile dd{font-family:var(--display); font-size:1.3rem; font-weight:600; font-variant-numeric:tabular-nums; color:var(--indigo-800);}
.tile dd small{font-size:.62em; font-weight:400; color:var(--paper-soft); font-family:var(--ui);}

.grid{width:100%; font-size:.81rem;}
.grid th{text-align:left; padding:.48rem .6rem; font-size:.69rem; font-weight:600; color:var(--paper-soft); border-bottom:1px solid var(--paper-rule);}
.grid td{padding:.55rem .6rem; border-bottom:1px solid rgba(0,0,0,.06); vertical-align:middle;}
.grid tr td:first-child{border-left:3px solid transparent;}
.grid .r-a td:first-child{border-left-color:#C98A12;}
.grid .r-b td:first-child{border-left-color:#2E6B4A;}
.grid .r-c td:first-child{border-left-color:#2B3080;}
.grid .r-d td:first-child{border-left-color:#A33A2A;}
.grid .ref{font-family:var(--mono); font-size:.94em; color:var(--indigo-700);}
.grid .right{text-align:right;}
.grid .when{color:var(--paper-soft);}

.pill{display:inline-block; padding:.15rem .55rem; border-radius:99px; font-size:.67rem; font-weight:700;}
.pill.paid{background:var(--ok-bg); color:var(--ok);}
.pill.sent{background:var(--wait-bg); color:var(--wait);}
.pill.draft{background:var(--idle-bg); color:var(--idle);}
.pill.late{background:var(--late-bg); color:var(--late);}

.ed-block{border:1px dashed var(--paper-rule); border-radius:3px; padding:.72rem .82rem; margin-bottom:.65rem;}
.ed-block > h6{margin-bottom:.48rem; font-size:.65rem; font-weight:700; letter-spacing:.09em; color:#8A8371; font-family:var(--ui);}
.ed-block.live{border-style:solid; border-color:var(--turmeric-deep); background:rgba(201,138,18,.08);}
.ed-line{height:.5rem; border-radius:2px; background:rgba(30,32,56,.13); margin-bottom:.4rem;}
.ed-text{font-size:.79rem; color:#4A4636; line-height:1.6; max-width:none;}
.ed-mini{width:100%; font-size:.71rem;}
.ed-mini th{background:var(--indigo-800); color:#F2F0FA; text-align:left; padding:.32rem .5rem; font-weight:600; font-size:.65rem;}
.ed-mini td{padding:.32rem .5rem; border-bottom:1px solid var(--paper-rule);}
.ed-mini td:last-child,.ed-mini th:last-child{text-align:right;}

/* Narrow screens (the home-page preview column, and phones).
   These MUST stay after every rule above that they override — container
   queries add no specificity, so at equal specificity source order decides. */
@container (max-width:46rem){
  .screen-body{grid-template-columns:8.25rem 1fr;}
  .side{font-size:.72rem; padding:.85rem .5rem;}
  .pane{padding:1rem .9rem 1.2rem;}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(5rem,1fr)); gap:.45rem;}
  .tile{padding:.55rem .6rem;}
  .tile dd{font-size:1.05rem;}
  .grid{font-size:.72rem;}
  .grid th,.grid td{padding:.42rem .4rem;}
}
@container (max-width:28rem){
  .screen-body{grid-template-columns:1fr;}
  .side{display:none;}
}

.exhibit-note{margin-top:.9rem; color:var(--ink-faint); font-family:var(--ui); font-size:.86rem; max-width:44rem;}

/* ── build + stack ──────────────────────────────────────────────── */
.two{display:grid; gap:clamp(1.8rem,4vw,3rem);}
@media (min-width:58rem){ .two{grid-template-columns:1.05fr 1fr; gap:4rem;} }
.rules{padding:0; list-style:none; display:grid; gap:.9rem;}
.rules li{padding-left:1.4rem; position:relative; color:var(--ink-soft); font-size:.96rem;}
.rules li::before{content:""; position:absolute; left:0; top:.6em; width:.5rem; height:.5rem; background:var(--turmeric);}
.rules b{color:var(--ink); font-weight:600; font-family:var(--display); font-size:1rem;}

.stack{display:grid;}
.stack div{display:grid; grid-template-columns:7.5rem 1fr; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--rule-soft);}
.stack dt{color:var(--ink-faint); font-family:var(--ui); font-size:.8rem;}
.stack dd{font-size:.93rem;}

/* ── closing note ───────────────────────────────────────────────── */
.close h2{font-size:clamp(1.5rem,1.2rem + 1.6vw,2.2rem); margin-bottom:1rem;}
.close p{color:var(--ink-soft); font-size:1.02rem;}
.cta-row{display:flex; flex-wrap:wrap; gap:.9rem;}
.cta{
  display:inline-block; margin-top:1.4rem; font-family:var(--display); font-weight:600;
  font-size:1rem; background:var(--turmeric); color:#231A05;
  padding:.65rem 1.4rem; border-radius:2px; text-decoration:none;
}
.cta:hover{background:#F0B443;}
.cta--ghost{
  background:transparent; color:var(--turmeric); border:1px solid var(--turmeric);
  padding:.6rem 1.35rem;
}
.cta--ghost:hover{background:var(--turmeric); color:#231A05;}

.disclaimer{
  border-top:1px solid var(--rule); margin-top:clamp(2.5rem,6vw,4rem); padding-top:1.3rem;
  color:var(--ink-faint); font-family:var(--ui); font-size:.81rem; max-width:44rem; line-height:1.7;
}