/* pdnguyen.com — shared stylesheet
   Direction: quiet, engineer, in metal. Kim (Metal) palette — see BRAND.md.
   Cream / graphite ground (Thổ + grey, both bản mệnh Kim), a strong quiet serif
   type system, two metal accents: steel (cool, carries every link) and champagne
   gold (warm, spent sparingly — the "by day" dot, the mark, text selection).
   No Fire (red/orange). Light by default; dark only via the nav toggle.
   The memorable element is typography and spacing — not graphics. */

:root {
  color-scheme: light;   /* light by default; dark only when the visitor chooses it */

  --serif: Charter, "Iowan Old Style", "Palatino Linotype", Palatino,
           Georgia, Cambria, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --bg:     #f7f5ee;  /* warm rice-paper cream — Thổ, feeds Kim */
  --panel:  #efece2;
  --ink:    #1e2024;  /* graphite */
  --muted:  #64686e;
  --faint:  #9b9a92;
  --line:   #e4e0d4;
  --line-2: #d8d3c4;
  --accent: #2f5169;  /* steel — cool metal, carries every link */
  --accent-strong: #24405a;

  /* Champagne gold — warm metal (Thổ + metallic). Spent sparingly, in three
     places only: the "by day" dot, the logo mark, and text selection. */
  --gold: #a8823c;

  --display: "Fraunces", var(--serif);

  --measure: 42rem;
  --gutter: 1.5rem;
}

/* The site is LIGHT by default — it does NOT auto-switch on the OS setting.
   The dark palette lives only under [data-theme="dark"], applied by the nav
   toggle and remembered in localStorage. No data-theme ⇒ the :root defaults.
   Each block re-asserts its full token set so the chosen theme always wins. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:#f7f5ee; --panel:#efece2; --ink:#1e2024; --muted:#64686e; --faint:#9b9a92;
  --line:#e4e0d4; --line-2:#d8d3c4; --accent:#2f5169; --accent-strong:#24405a; --gold:#a8823c;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#1a1c1f; --panel:#232529; --ink:#e9e7e0; --muted:#9a9a94; --faint:#6d6f74;
  --line:#2c2f34; --line-2:#3a3d43; --accent:#8fb0c8; --accent-strong:#a9c5da; --gold:#d9b46b;
}

::selection { background: color-mix(in srgb, var(--gold) 45%, transparent); }

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.75;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---- Layout shell -------------------------------------------------- */

header.site,
main,
footer.site {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main {
  padding-top: 3.5rem;
  padding-bottom: 6rem;
}

/* ---- Masthead ------------------------------------------------------ */

header.site {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: 2rem;
  padding-bottom: 0;
}

header.site > a:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

header.site .mono {
  font-size: 1.28rem;
  letter-spacing: -0.02em;
  line-height: 1;
}

header.site .mark {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  color: var(--ink);
}

header.site .pipe {
  width: 1px;
  height: 1.05rem;
  background: currentColor;
  opacity: 0.22;
  margin: 0 0.12rem;
}

header.site .wm {
  font-size: 1rem;
  opacity: 0.82;
}

@media (prefers-reduced-motion: no-preference) {
  header.site .mark { transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
  header.site > a:first-child:hover .mark { transform: rotate(180deg); }
}

header.site nav {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  font-family: var(--sans);
}

header.site nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 450;
  transition: color 0.15s ease;
}
header.site nav a:hover,
header.site nav a:focus-visible { color: var(--accent); }

/* Theme toggle — a half-disc glyph, echoing the mark. Rotates on hover. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.theme-toggle svg { width: 1.05rem; height: 1.05rem; display: block; }
/* Show moon in light mode (offer dark), sun in dark mode (offer light). */
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
.theme-toggle:hover,
.theme-toggle:focus-visible { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .theme-toggle:hover { transform: rotate(180deg); }
}

/* ---- Hero call-to-action ------------------------------------------ */

.cta {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 1.5rem 0 0;
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 500;
}
.cta .dot,
footer.site .dot { color: var(--faint); }

/* ---- Display heading (page title) --------------------------------- */

main > h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 1.3rem + 3vw, 2.85rem);
  line-height: 1.14;
  letter-spacing: -0.021em;
  text-wrap: balance;
  margin: 0 0 1.1rem;
}

/* ---- Section headings --------------------------------------------- */

main > h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.28;
  letter-spacing: -0.008em;
  text-wrap: balance;
  margin: 3.2rem 0 0.9rem;
}

/* Homepage section headings run a hairline out to the right edge.
   Scoped to .home — blog-post headings wrap to two lines and the
   centered rule would sit awkwardly there. */
main.home > h2 {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 1.35rem;
  margin-top: 3.6rem;
}
main.home > h2::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

/* Paper section headings keep the quiet document treatment. */
.overflow h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.28;
  letter-spacing: -0.008em;
  text-wrap: balance;
  margin: 3.2rem 0 0.9rem;
}

/* ---- Sub-headings (paper depth) ----------------------------------- */

.overflow h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.08rem;
  margin: 2.2rem 0 0.5rem;
}

.overflow h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.005em;
  color: var(--muted);
  margin: 1.7rem 0 0.4rem;
}

.overflow h2:empty { display: none; }

/* ---- Home: day / night columns (the taiji, as balance) --------------
   The duality sits side by side on one cream field: "by day" (filled
   gold dot, warm metal) and "by night" (hollow steel dot, cool metal),
   divided by a hairline. No blocks, no drama — balance. */

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 3rem;
  margin-top: 2.8rem;
  position: relative;
}
.duo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 1px;
  background: var(--line);
}

.half .tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}
.half .tag::before {
  content: "";
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 50%;
}
.half.day .tag::before { background: var(--gold); }
.half.night .tag::before { border: 1.5px solid var(--accent); }

.half p { margin: 0; font-size: 1.04rem; line-height: 1.7; }

.project {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.project p { margin: 0; }

@media (max-width: 38rem) {
  .duo { grid-template-columns: 1fr; gap: 1.9rem; }
  .duo::before { display: none; }
}

/* ---- Prose --------------------------------------------------------- */

p { margin: 1.2rem 0; }

main > h1 + p,
p.lede {
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--ink);
}

a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: color-mix(in srgb, var(--accent) 32%, transparent);
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
a:hover { color: var(--accent-strong); text-decoration-color: currentColor; }

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

strong { font-weight: 650; }

.meta {
  font-family: var(--sans);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}
.meta a { text-decoration-color: color-mix(in srgb, var(--accent) 32%, transparent); }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 3rem 0;
}

blockquote {
  margin: 1.6rem 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--line-2);
  color: var(--ink);
}
blockquote p { margin: 0.4rem 0; }

/* ---- Post list (unadorned) ---------------------------------------- */

ul.postlist {
  list-style: none;
  padding: 0;
  margin: 1.8rem 0 0;
}

ul.postlist li {
  margin: 1.5rem 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.4;
}

ul.postlist li > a:first-child { font-weight: 600; }

ul.postlist .meta {
  display: block;
  margin-top: 0.3rem;
  line-height: 1.5;
}

/* ---- Code ---------------------------------------------------------- */

code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--panel);
  padding: 0.12em 0.36em;
  border-radius: 3px;
}

pre {
  background: var(--panel);
  padding: 1rem 1.1rem;
  border-radius: 5px;
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.6;
}
pre code { background: none; padding: 0; font-size: inherit; }

/* ---- Tables -------------------------------------------------------- */

.overflow { overflow-x: auto; }

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.6rem 0;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

th, td {
  text-align: left;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

thead th,
tr:first-child th,
table tbody tr:first-child td {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--line-2);
}

/* ---- Figures (paper) — no cards, just the image + caption ---------- */

main img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2.2rem auto 0.6rem;
}

p:has(> img) { margin-bottom: 0; }
p:has(> img) + p {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  margin: 0 0 2.4rem;
}

/* MathJax overflow safety */
mjx-container { max-width: 100%; overflow-x: auto; overflow-y: hidden; }

/* ---- Footer -------------------------------------------------------- */

footer.site {
  margin-top: 0;
  padding-top: 1.8rem;
  padding-bottom: 3.5rem;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-family: var(--sans);
  font-size: 0.82rem;
}

/* ---- Motion (subtle, opt-out honored) ----------------------------- */

@media (prefers-reduced-motion: no-preference) {
  main > h1 { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  main > h1 + p { animation: rise 0.5s 0.05s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .duo { animation: rise 0.5s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .project { animation: rise 0.5s 0.16s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(0.35rem); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---- Narrow screens ----------------------------------------------- */

@media (max-width: 34rem) {
  body { font-size: 17.5px; }
  main { padding-top: 2.25rem; padding-bottom: 4rem; }
  header.site { padding-top: 1.5rem; }
  header.site nav { gap: 1.15rem; }
  main > h2, .overflow h2 { margin-top: 2.6rem; }
  main > h1 + p, p.lede { font-size: 1.06rem; }
  .duo { margin-top: 2.2rem; }
  .project { margin-top: 2.4rem; }
}