/* --- Reset-ish ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }

/* --- Variables ----------------------------------------------------------- */

/*  Palette options — swap the four light-mode values below for a set here.
 *
 *  A. Warm off-white                bg #faf9f5  rule #e4e1d8  muted #6b675f  soft #55524b
 *     Closest to darioamodei.com. Background recedes; nearly neutral paper.
 *
 *  B. Pale lavender   (photo wall)  bg #e4e3f7  rule #cfcee4  muted #64646f
 *     Mean of the portrait's left edge. Portrait blends seamlessly into the
 *     page, but reads as a deliberate colour, not as paper.
 *
 *  C. Lavender, half  (compromise)  bg #eeedfa  rule #dcdbee  muted #666672
 *     Same hue as B at half strength. Portrait still blends; page recedes.
 *
 *  D. Cool near-white (ACTIVE)      bg #f4f5fc  rule #e0e1ee  muted #676773  soft #4f4f59
 *     Sampled from the photo's brighter, lit side. Reads as white with a
 *     faint cool cast.
 *
 *  B–D pair with the cool dark mode below. Set A's dark mode back to
 *  bg #14130f  text #e9e6df  soft #b6b1a8  muted #98938a  rule #2c2a25.
 *
 *  Note: B, C and D are tied to the current portrait. A new photo taken
 *  against a different wall would need re-sampling.
 */

:root {
  --bg:      #f4f5fc;   /* cool near-white, sampled from the portrait's wall */
  --text:    #1a1a20;
  --soft:    #4f4f59;   /* between text and muted: work-in-progress entries */
  --muted:   #676773;
  --rule:    #e0e1ee;
  --link:    #1a1a20;
  --measure: 42rem;   /* ~672px content column */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:    #101015;
    --text:  #e6e6ee;
    --soft:  #b0b0ba;
    --muted: #92929e;
    --rule:  #292930;
    --link:  #e6e6ee;
  }
}

/* --- Base ---------------------------------------------------------------- */

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 4.5rem 1.5rem 6rem;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
}
a:hover { text-decoration-color: currentColor; }

/* --- Header -------------------------------------------------------------- */

.intro {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.portrait {
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: var(--rule);
}

.intro-text { min-width: 0; }

h1 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.tagline {
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 0.2rem;
}

.links {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  font-size: 0.9rem;
}

/* --- Bio ----------------------------------------------------------------- */

.bio { margin-top: 2rem; }
.bio p + p { margin-top: 0.9rem; }

/* --- Sections ------------------------------------------------------------ */

section + section { margin-top: 2.35rem; }

h2 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

.entries { margin-top: 1.1rem; }
.entries li + li { margin-top: 0.85rem; }

/* Work in progress: lighter and tighter than the published record below it. */
.wip .entries {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--soft);
}
.wip .entries li + li { margin-top: 0.5rem; }
.wip .meta { font-size: 0.81rem; }

.meta {
  display: block;
  color: var(--muted);
  font-size: 0.88rem;
}

/* --- Small screens ------------------------------------------------------- */

@media (max-width: 480px) {
  main { padding-top: 3rem; }
  .intro { gap: 1rem; }
  .portrait { width: 66px; height: 66px; }
  h1 { font-size: 1.35rem; }
}