/* ============================================================
   jackxu.com — shared editorial system
   Chestnut on warm paper · Instrument Serif + Space Mono
============================================================ */

:root {
  --paper:       #FFFFFF;
  --paper-2:     #F5F4F1;
  --ink:         #1C1A15;
  --ink-2:       #595349;
  --ink-3:       #908A7E;
  --line:        #E7E2D8;
  --line-2:      #D8D2C6;
  --chestnut:    #8A4B34;
  --chestnut-deep:#6F3B28;

  --gut: clamp(22px, 5.2vw, 76px);
  --maxw: 1320px;
  --head-h: 66px;

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --mono:  'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(138,75,52,0.16); }

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

/* ---------- shared primitives ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }

.mono {
  font-family: var(--mono);
  font-feature-settings: "kern" 1;
}

/* A plain word-label that organizes a section (no counters, no metadata) */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

.accent { color: var(--chestnut); }
em, .ital { font-style: italic; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ============================================================
   Header
============================================================ */
.site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--head-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand .dot { color: var(--chestnut); }
.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
}
.nav a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 4px 0;
  position: relative;
  transition: color .2s ease;
}
.nav a::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 1px; background: var(--chestnut);
  transition: right .28s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { right: 0; }
.nav a.active { color: var(--chestnut); }

/* ============================================================
   Section scaffolding
============================================================ */
main { display: block; }

.section { padding-block: clamp(72px, 11vh, 150px); }
.section + .section { border-top: 1px solid var(--line); }
.section[id], .hero[id] { scroll-margin-top: calc(var(--head-h) + 18px); }

/* Pixel-art divider between sections — full-bleed, replaces the hairline */
.divider-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(10px, 4vh, 44px);
  width: 100%;
  background-color: var(--paper);   /* match the rest of the page */
}
.pixel-divider { position: relative; z-index: 1; width: 100%; line-height: 0; }
.pixel-divider canvas { display: block; width: 100%; height: auto; background: transparent; }

.section-head {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 4fr);
  gap: clamp(16px, 4vw, 56px);
  align-items: start;
}
.section-head .label { padding-top: 10px; }

/* Display statement type */
.display {
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.018em;
  margin: 0;
}
.h-hero    { font-size: clamp(2.7rem, 7.4vw, 5.7rem); line-height: 1.04; }
.h-section { font-size: clamp(2.1rem, 5vw, 3.6rem); }

.lead {
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  max-width: 30ch;
}
.prose {
  font-size: clamp(1.18rem, 1.55vw, 1.42rem);
  line-height: 1.62;
  color: var(--ink);
  margin: 0;
  max-width: 60ch;
  text-wrap: pretty;
}
.prose.muted { color: var(--ink-2); }
.prose + .prose { margin-top: 1.1em; }

.creds {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.creds .sep { color: var(--line-2); margin: 0 .5em; }
.creds .faint { color: var(--ink-3); }

.textlink {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chestnut);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.textlink .arr { transition: transform .25s ease; }
.textlink:hover .arr { transform: translate(3px,-3px); }

/* ============================================================
   Hero
============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--head-h));
  padding-top: calc(var(--head-h) + clamp(36px, 7vh, 88px));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-bottom: clamp(40px, 8vh, 90px);
}
.hero .wrap { position: relative; z-index: 2; }

/* Isometric data-infra asset — aligned to the hero text column, below the CTA */
.hero-iso {
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  top: calc(100% + clamp(18px, 5vh, 60px));
  width: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  -webkit-mask-image: radial-gradient(130% 140% at 50% 50%, #000 74%, transparent 100%);
          mask-image: radial-gradient(130% 140% at 50% 50%, #000 74%, transparent 100%);
}
.di-stage { position: relative; width: 100%; aspect-ratio: 2.93; background: transparent; }
.di-canvas { display: block; width: 100%; height: 100%; }

@media (max-width: 880px) {
  .hero-iso { opacity: 0.4; }
}
.hero .h-hero { max-width: 16ch; }
.hero .deal { font-style: italic; color: var(--chestnut); }
.hero-lead { margin-top: clamp(26px, 4vh, 44px); max-width: 48ch; }
.hero-creds { margin-top: clamp(30px, 5vh, 52px); }

/* ============================================================
   Philosophy ledger (Variant C treatment)
============================================================ */
.philo-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 84px);
  align-items: start;
}
.ledger { display: flex; flex-direction: column; }
.ledger-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.ledger-row:first-child { border-top: 1px solid var(--line); }
.ledger-year {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-3);
}
.ledger-row.now .ledger-year { color: var(--chestnut); }
.ledger-evt { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.28; }
.ledger-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}

.plot { width: 100%; height: auto; display: block; }
.plot .grid-line { stroke: var(--line); stroke-width: 1; }
.plot .trend { stroke: var(--chestnut); stroke-width: 1.5; stroke-dasharray: 2 5; fill: none; }
.plot .pt { fill: var(--ink-3); }
.plot .pt.hot { fill: var(--chestnut); }

/* ============================================================
   Experience
============================================================ */
.xp-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.xp-row {
  display: grid;
  grid-template-columns: 2.6fr 5fr auto;
  gap: clamp(14px, 3vw, 40px);
  padding: clamp(20px, 2.6vw, 30px) 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: background .2s ease, padding-inline .2s ease;
}
a.xp-row:hover { background: var(--paper-2); padding-inline: 18px; }
.xp-co { font-size: clamp(1.3rem, 1.7vw, 1.6rem); line-height: 1.1; }
.xp-when { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); margin-top: 8px; display: block; }
.xp-role { font-size: 1.05rem; color: var(--ink-2); }
.xp-desc { font-size: clamp(1.18rem, 1.55vw, 1.42rem); line-height: 1.6; color: var(--ink-2); max-width: 54ch; }
.xp-arr { color: var(--ink-3); opacity: 0; transition: opacity .2s ease, transform .2s ease; }
a.xp-row:hover .xp-arr { opacity: 1; transform: translate(2px,-2px); color: var(--chestnut); }

/* ============================================================
   Outside / Contact
============================================================ */
.two-col {
  display: grid;
  grid-template-columns: minmax(120px,1fr) minmax(0,4fr);
  gap: clamp(16px, 4vw, 56px);
  align-items: start;
}
.stack { display: flex; flex-direction: column; gap: 18px; }

/* origin eras */
.era { padding-top: clamp(26px,4vh,42px); }
.era + .era { border-top: 1px solid var(--line); margin-top: clamp(26px,4vh,42px); }
.contact-link {
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  display: inline-flex; align-items: baseline; gap: 12px;
  width: fit-content;
  transition: color .2s ease;
}
.contact-link .arr { font-size: 0.6em; color: var(--ink-3); transition: transform .25s ease, color .2s ease; }
.contact-link:hover { color: var(--chestnut); }
.contact-link:hover .arr { transform: translate(3px,-3px); color: var(--chestnut); }
.place { color: var(--ink-2); font-size: 1.2rem; }

/* placeholder block for to-be-filled content */
.placeholder {
  border: 1px dashed var(--line-2);
  background: repeating-linear-gradient(135deg, transparent 0 11px, rgba(138,75,52,0.025) 11px 12px);
  padding: clamp(22px, 3vw, 34px);
  color: var(--ink-3);
}
.placeholder .ph-tag {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--chestnut);
}
.placeholder .ph-body { font-size: 1.15rem; line-height: 1.55; color: var(--ink-2); margin-top: 12px; max-width: 52ch; }

/* ============================================================
   Footer — giant wordmark signature (Variant B)
============================================================ */
.site-foot { padding-top: clamp(50px, 8vh, 90px); border-top: 1px solid var(--line); }
.foot-mark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(4.5rem, 21vw, 17rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  margin: 0;
  white-space: nowrap;
}
.foot-meta {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: clamp(24px,4vh,40px) 0 30px;
}
.foot-meta span {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--ink-3); text-transform: uppercase;
}

/* ============================================================
   Reveal — content is visible by default. JS hides ONLY items
   below the fold and animates them in on scroll, so nothing is
   ever stuck hidden if JS / IntersectionObserver / transitions
   are unavailable or paused.
============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal.is-hidden { opacity: 0; transform: translateY(18px); }
  .reveal.is-shown {
    opacity: 1; transform: none;
    transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
  }
}

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 880px) {
  .philo-grid { grid-template-columns: 1fr; }
  .section-head, .two-col { grid-template-columns: 1fr; gap: 14px; }
  .section-head .label { padding-top: 0; }
  .xp-row { grid-template-columns: 1fr auto; }
  .xp-desc { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .nav { gap: 16px; }
  .nav a { font-size: 11px; }
  .xp-row { grid-template-columns: 1fr; }
  .xp-arr { display: none; }
}