/* ============================================================
   xanderzane.com
   Editorial / typography-led. No framework, no build step.
   ============================================================ */

:root {
  --bg:        #FBFAF8;
  --bg-raised: #FFFFFF;
  --text:      #1A1918;
  --muted:     #6B6763;
  --faint:     #9A948C;
  --rule:      #E5E1DA;
  --accent:    #14453A;

  /* Hero has its own surface — ghost word sits lighter than the backdrop. */
  --hero-bg:    #DEDAD3;
  --hero-ghost: #EBE8E2;
  --hero-text:  #1A1918;
  --hero-muted: #4A4642;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --measure: 34rem;   /* ~68 characters — the readable column */
  --gutter:  1.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #121110;
    --bg-raised: #1A1918;
    --text:      #EDEAE4;
    --muted:     #9A948C;
    --faint:     #6B6763;
    --rule:      #2B2926;
    --accent:    #8FC4AE;

    --hero-bg:    #1F1D1B;
    --hero-ghost: #2C2926;
    --hero-text:  #EDEAE4;
    --hero-muted: #A9A39B;
  }
}

*, *::before, *::after { box-sizing: border-box; }

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Navigation ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--gutter);
  /* Transparent over the hero; frosted once you scroll past it. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease;
}

.nav.scrolled {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--rule);
}

.nav-name {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 1.25rem;
  font-size: .8125rem;
  letter-spacing: .02em;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease;
}

.nav-links a:hover,
.nav-links a.active { color: var(--text); }

@media (max-width: 40rem) {
  .nav-links { display: none; }
}

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

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: 3.5rem 0;
  border-top: 1px solid var(--rule);
}

/* First section follows the hero sweep — no rule needed. */
main > .section:first-child {
  border-top: none;
  padding-top: 3rem;
}

/* ============================================================
   HERO
   Layered: ghost word (z0) < portrait (z1) < copy (z2), with an
   SVG sweep curving into the page background at the bottom.
   ============================================================ */

.hero {
  position: relative;
  background: var(--hero-bg);
  overflow: hidden;
  isolation: isolate;
}

.hero-stage {
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
  min-height: min(38rem, 82vh);
  padding: 4.5rem var(--gutter) 7rem;
}

/* --- Ghost word --- */

.hero-ghost {
  position: absolute;
  top: 5.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  font-weight: 800;
  font-size: clamp(4.5rem, 17vw, 12rem);
  line-height: .85;
  letter-spacing: -.035em;
  white-space: nowrap;
  color: var(--hero-ghost);
  user-select: none;
  pointer-events: none;
}

/* --- Portrait --- */

.hero-portrait {
  position: absolute;
  bottom: 3.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  height: min(30rem, 58vh);
  width: auto;
  filter: grayscale(1) contrast(1.08);
  /* Fades the crop edge into the sweep so there's no hard cut. */
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

/* No portrait.png yet — collapse gracefully rather than showing a broken icon. */
.hero-portrait.is-missing { display: none; }

/* --- Copy --- */

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 32rem;
  padding-top: 7.5rem;
}

.hero-copy h1 {
  font-family: var(--sans);
  font-size: clamp(2.5rem, 6.4vw, 4.5rem);
  white-space: nowrap;
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.04em;
  margin: 0 0 1.25rem;
  color: var(--hero-text);
}

.hero-body {
  margin: 0 0 1.75rem;
  max-width: 26rem;
  color: var(--hero-muted);
  text-shadow: 0 1px 12px var(--hero-bg);
}

/* --- Buttons --- */

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
}

.btn {
  display: inline-block;
  padding: .6875rem 1.375rem;
  border-radius: 999px;
  border: 1px solid var(--hero-text);
  background: transparent;
  color: var(--hero-text);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}

.btn:hover { background: var(--hero-text); color: var(--hero-bg); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #FBFAF8;
}

.btn-primary:hover {
  background: transparent;
  color: var(--hero-text);
  border-color: var(--hero-text);
}

/* --- Corner annotations --- */

.hero-note,
.hero-based {
  position: absolute;
  z-index: 2;
  margin: 0;
  color: var(--hero-muted);
}

.hero-note {
  top: 4.5rem;
  right: var(--gutter);
  max-width: 15rem;
  text-align: right;
  font-size: .8125rem;
  line-height: 1.55;
}

.hero-note a {
  color: var(--hero-text);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.hero-based {
  right: var(--gutter);
  bottom: 6rem;
  text-align: right;
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* --- Sweep --- */

.hero-sweep {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 3;
  width: 100%;
  height: clamp(3rem, 7vw, 6rem);
  display: block;
}

.hero-sweep path { fill: var(--bg); }

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

@media (max-width: 56rem) {
  .hero-note { display: none; }
  .hero-based { bottom: 5rem; }
}

@media (max-width: 40rem) {
  .hero-stage {
    min-height: 0;
    padding: 3rem var(--gutter) 5.5rem;
    text-align: center;
  }
  .hero-ghost { top: 3.5rem; }
  .hero-copy { padding-top: 0; max-width: none; }
  .hero-body { margin-inline: auto; }
  .hero-cta { justify-content: center; }
  .hero-based { display: none; }

  /* Portrait moves below the copy instead of behind it. */
  .hero-portrait {
    position: static;
    transform: none;
    display: block;
    margin: 1.5rem auto -3.5rem;
    height: min(20rem, 44vh);
  }
}

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

h2 {
  display: flex;
  align-items: baseline;
  gap: .875rem;
  font-family: var(--serif);
  font-size: 1.625rem;
  font-weight: 500;
  letter-spacing: -.015em;
  margin: 0 0 1.5rem;
}

.sec-num {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--faint);
  /* keeps the number out of the text column so headings stay flush-left */
  flex: 0 0 auto;
}

.section-lede {
  margin: -.75rem 0 1.75rem;
  font-size: .9375rem;
  color: var(--muted);
}

p { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }

/* ---------- Work entries ---------- */

.entry {
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
}

.entry:first-of-type { border-top: none; padding-top: 0; }

.entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .25rem;
}

.entry h3 {
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 500;
  margin: 0;
}

.entry-date {
  flex: 0 0 auto;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

.entry-org {
  margin: 0 0 .75rem;
  font-size: .875rem;
  color: var(--accent);
}

@media (max-width: 30rem) {
  .entry-head { flex-direction: column; gap: .125rem; }
}

/* ---------- Lists ---------- */

/* ---------- Aside ---------- */

.aside {
  margin: 2rem 0 0;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.aside h4 {
  margin: 0 0 .375rem;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}

.aside p {
  margin: 0;
  font-size: .9375rem;
  color: var(--muted);
}

/* ---------- Lists ---------- */

.now-list,
.links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.now-list li {
  padding: .75rem 0;
  border-top: 1px solid var(--rule);
}

.now-list li:first-child { border-top: none; padding-top: 0; }

.now-list strong {
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}

.links li { padding: .5rem 0; }

.links a,
main p a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: background-color .2s ease;
}

.links a:hover,
main p a:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

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

.footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 4rem;
  border-top: 1px solid var(--rule);
  font-size: .8125rem;
  color: var(--faint);
}

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   REVIEW MODE
   `.review` marks passages I drafted in your voice — opinions,
   motivations, things only you can confirm. Read each one, edit
   until it's true, then delete the class. When none are left the
   banner disappears and nothing below renders.
   To kill review mode wholesale: delete this block and the
   draft-mode section in main.js.
   ============================================================ */

.review {
  background: color-mix(in srgb, #E8A33D 18%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, #E8A33D 60%, transparent);
  border-radius: 2px;
  padding: 0 .15em;
}

.draft-banner {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem 1rem;
  border-radius: 999px;
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  box-shadow: 0 6px 24px rgb(0 0 0 / .12);
  font-size: .8125rem;
  color: var(--muted);
  white-space: nowrap;
}

.draft-banner button {
  font: inherit;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.draft-banner button:hover { text-decoration: underline; }