/* =========================================================
   Tung Nguyen — tungducnguyen.com
   All colour lives in :root. Change it here, nowhere else.
   ========================================================= */

:root{
  --paper:      #FFFBF5;   /* page background, warm off-white    */
  --paper-2:    #FFFFFC;   /* raised panels, lighter tint        */
  --ink:        #1B2328;
  --ink-soft:   #2B383F;
  --muted:      #6E7880;
  --rule:       #EBDDCE;

  --blue-pale:  #EAF1F5;
  --blue-mid:   #A9CBDD;
  --blue-deep:  #27607F;

  /* device-stack material swatches */
  --m-glass:    #D3E2E9;
  --m-ito:      #A9CBDD;
  --m-sam:      #8FAEC0;
  --m-pvk:      #2E2018;
  --m-c60:      #45474F;
  --m-bcp:      #9A9086;
  --m-buffer:   #CFC6B6;
  --m-ag:       #B4B8BC;
  --m-izo:      #C4DCE8;

  --measure: 64ch;
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans", system-ui, sans-serif;
  font-size:16px;
  line-height:1.62;
}

a{ color:var(--blue-deep); text-decoration:underline;
   text-underline-offset:3px; text-decoration-thickness:1px }
a:hover{ text-decoration-thickness:2px }
:focus-visible{ outline:2px solid var(--blue-deep); outline-offset:3px }
sub,sup{ line-height:0 }

.wrap{ max-width:1060px; margin:0 auto; padding:0 34px }

/* ---------- masthead ---------- */
.masthead{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:24px; padding:26px 0 0; flex-wrap:wrap;
}
.mark{
  font-family:"Newsreader", Georgia, serif;
  font-size:19px; font-weight:500; letter-spacing:.01em;
  color:var(--ink); text-decoration:none;
}
.nav{ display:flex; gap:26px; font-size:14.5px }
.nav a{ color:var(--muted); text-decoration:none }
.nav a:hover{ color:var(--ink) }
.nav a[aria-current="page"]{
  color:var(--ink); text-decoration:underline;
  text-decoration-color:var(--blue-mid);
  text-decoration-thickness:2px; text-underline-offset:5px;
}

/* ---------- inner page headers ---------- */
.pagehead{ padding:62px 0 50px; max-width:58ch }
.pagehead h1{
  font-family:"Newsreader", Georgia, serif; font-weight:300;
  font-size:clamp(36px,5vw,54px); line-height:1.06;
  letter-spacing:-.018em; margin:0 0 20px;
}
.pagehead p{
  font-family:"Newsreader", Georgia, serif; font-weight:300;
  font-size:clamp(18px,1.9vw,22px); line-height:1.5;
  color:var(--ink-soft); margin:0; max-width:46ch;
}

/* ---------- sections ---------- */
.section{ padding:0 0 78px }
.sechead{
  font-family:"Newsreader", Georgia, serif; font-weight:400;
  font-size:15px; color:var(--muted); margin:0 0 34px;
  padding-bottom:10px; border-bottom:1px solid var(--rule);
}

.entry{
  display:grid; grid-template-columns:206px 1fr; gap:44px;
  padding:0 0 46px; max-width:980px; scroll-margin-top:24px;
}
.entry:last-child{ padding-bottom:0 }
/* hairline between the side label and its content, matching .sechead */
.entry > .where + *{ border-left:1px solid var(--rule); padding-left:44px }
.where{ font-size:14px; line-height:1.5 }
.where b{ font-weight:600; display:block }
.where span{ color:var(--muted); display:block }
.entry h3{
  font-family:"Newsreader", Georgia, serif; font-weight:400;
  font-size:25px; line-height:1.25; margin:-4px 0 14px;
  letter-spacing:-.012em;
}
.entry h4{ font-size:14px; font-weight:600; margin:24px 0 6px; color:var(--muted) }
.entry p{ margin:0 0 11px; max-width:var(--measure); color:var(--ink-soft) }
.entry p:last-child{ margin-bottom:0 }
.entry ul{ margin:0 0 11px; padding-left:20px; max-width:var(--measure);
  color:var(--ink-soft) }
.entry li{ margin-bottom:6px }

.tag{
  display:inline-block; font-size:11.5px; line-height:1.5;
  padding:1px 8px; border-radius:2px; margin-left:8px;
  vertical-align:2px; font-weight:500;
}
.tag.design{ background:var(--paper-2); color:var(--ink-soft);
  border:1px solid var(--rule) }

/* ---------- figures ---------- */
figure{ margin:0 }
figure img{ display:block; width:100%; height:auto; border:1px solid var(--rule) }
figcaption{ font-size:12.5px; color:var(--muted); margin-top:9px;
  line-height:1.5; max-width:52ch }
.imgfail{
  border:1px dashed var(--rule); background:var(--paper-2);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:12.5px; color:var(--muted); padding:20px; line-height:1.5;
  aspect-ratio:4/3;
}
.imgfail.portrait{ aspect-ratio:4/5 }

/* ---------- figure grids ---------- */
.figrow{ display:grid; gap:22px; margin:22px 0 4px; max-width:var(--measure) }
.figrow.two  { grid-template-columns:1fr 1fr }
.figrow.three{ grid-template-columns:repeat(3,1fr) }
.figrow.wide { max-width:100% }
@media (max-width:700px){
  .figrow.two, .figrow.three{ grid-template-columns:1fr }
}

/* ---------- tinted band ---------- */
.band{
  background:var(--blue-pale);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:36px 0; margin-bottom:78px;
}
.band .wrap{ display:grid; grid-template-columns:206px 1fr; gap:44px }
.band .bandtext{ border-left:1px solid var(--blue-mid); padding-left:44px }
.band h2{
  font-family:"Newsreader", Georgia, serif; font-weight:400;
  font-size:25px; line-height:1.15; color:var(--muted); margin:0;
}
.band p{ margin:0 0 10px; max-width:var(--measure); font-size:15px }
.band p:last-child{ margin-bottom:0 }

/* ---------- footer ---------- */
footer{ padding:26px 0 60px; font-size:14px; color:var(--muted) }
footer .wrap{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--rule); padding-top:22px;
}
footer a{ color:var(--muted) }

@media (max-width:860px){
  .wrap{ padding:0 22px }
  .entry, .band .wrap{ grid-template-columns:1fr; gap:14px }
  .entry > .where + *, .band .bandtext{ border-left:0; padding-left:0 }
  .pagehead{ padding:44px 0 38px }
  .section{ padding-bottom:58px }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *{ transition:none !important }
}