/* danicalouwe.com — one page.
   Ported from the Claude Design source in /_design/danicalouwe.dc.html */

:root {
  --paper: #FAF7F2;
  --ink:   #221D16;
  --accent:#0A5C3A;
  --rule:  rgba(34, 29, 22, 0.14);
  --ink-70:rgba(34, 29, 22, 0.78);
  --ink-55:rgba(34, 29, 22, 0.55);
  --ink-45:rgba(34, 29, 22, 0.45);
  --spot-x: -9999px;
  --spot-y: -9999px;
}

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

html, body { margin: 0; padding: 0; background: var(--paper); }

body {
  color: var(--ink);
  font-family: 'Newsreader', Georgia, serif;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  /* cursor spotlight — the fixed layer sits under the page, scroll layer paints the paper */
  background:
    radial-gradient(620px circle at var(--spot-x) var(--spot-y),
      color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%),
    var(--paper);
  background-attachment: fixed, scroll;
}

a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

p { margin: 0; }

/* Shared ---------------------------------------------------------------- */

.meta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.column {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 clamp(22px, 6vw, 48px) 150px;
}

.section { margin-top: clamp(88px, 14vh, 140px); }

/* Section eyebrow + rule */
.label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 40px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.label span:first-child { white-space: nowrap; }
.label::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--rule); }
.label--tight { margin-bottom: 8px; }

/* Accent-ruled pull quote */
.pull { margin-top: 64px; }
.pull::before { content: ""; display: block; width: 44px; height: 2px; background: var(--accent); margin-bottom: 26px; }
.pull p { font-size: clamp(22px, 3vw, 27px); line-height: 1.45; font-weight: 500; }
.pull em { font-style: italic; color: var(--accent); }

/* Opening --------------------------------------------------------------- */

.hero {
  display: flex;
  flex-wrap: wrap;
  min-height: 100svh;
  align-items: stretch;
}

.hero__text {
  flex: 1 1 460px;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(64px, 10vh, 120px) clamp(24px, 6vw, 88px);
}

.hero__name { margin-bottom: 22px; font-size: 22px; font-weight: 500; }

.hero__lede {
  margin: 0;
  max-width: 14em;
  font-size: clamp(31px, 4.4vw, 58px);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.hero__lede em { font-style: italic; color: var(--accent); white-space: nowrap; }

.hero__place { margin-top: 32px; font-size: 12px; }

.hero__hint {
  position: absolute;
  left: clamp(24px, 6vw, 88px);
  bottom: clamp(24px, 4vh, 40px);
  font-size: 11.5px;
  color: var(--ink-45);
}

.hero__portrait {
  flex: 1 1 380px;
  min-width: 0;
  min-height: 60vh;
  position: relative;
  overflow: hidden;
}

/* On wide screens, hold the photo column closer to the picture's own portrait
   proportions. A 50/50 split makes the column far wider than the photo, which
   forces cover to scale up hard and crop most of the height away. */
@media (min-width: 900px) {
  .hero__portrait { flex: 0 1 42%; }
}
.hero__portrait[hidden] { display: none; }
.hero__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The photo is portrait (868x1344) and the column is usually wider than it
     is tall, so cover crops vertically. Her head sits near the top of the
     frame, and the default centred crop cuts it off — bias the crop upward
     and grow the drift downward from the top edge so it stays safe. */
  object-position: 50% 12%;
  transform-origin: 50% 0;
  will-change: transform;
  animation: drift 18s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.045) translate3d(-0.8%, 0, 0); }
}

/* Timeline -------------------------------------------------------------- */

.entry { display: flex; flex-wrap: wrap; gap: 14px 36px; }
.entry + .entry { margin-top: 52px; }

.entry__year {
  flex: 0 0 106px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: clamp(26px, 3.6vw, 36px);
  font-weight: 500;
  line-height: 1.1;
  color: var(--accent);
}

.entry__body { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.entry__body p { font-size: 19px; line-height: 1.7; }
.entry__lead { font-size: 23px !important; line-height: 1.5 !important; font-weight: 500; }

/* Why memberships ------------------------------------------------------- */

.creed { font-size: 21.5px; line-height: 1.6; font-style: italic; }
.creed + .creed { margin-top: 18px; }

/* Capability rows ------------------------------------------------------- */

.rows { margin: 0; }
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 32px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}
.row--last { border-bottom: 0; }
.row dt { flex: 0 0 216px; font-size: 20px; font-weight: 600; }
.row dd { flex: 1 1 300px; min-width: 0; margin: 0; font-size: 18px; line-height: 1.65; color: var(--ink-70); }

/* Clients --------------------------------------------------------------- */

.client { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.client--last { border-bottom: 0; }
.client__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.client__name { font-size: 21px; font-weight: 600; }
.client__stat { font-size: 12.5px; letter-spacing: 0.08em; color: rgba(34, 29, 22, 0.6); }
.client__note { margin-top: 8px; font-size: 17.5px; line-height: 1.6; color: var(--ink-70); }

.aside { font-size: 19px; line-height: 1.7; }
.client + .aside, .rows + .aside { margin-top: 36px; }

/* CTA ------------------------------------------------------------------- */

.cta {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 22px;
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 500;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}
.cta span { font-size: 0.75em; }

/* Elsewhere (footer) ----------------------------------------------------- */

.elsewhere { margin-top: clamp(80px, 12vh, 120px); }

.elsewhere ul {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.elsewhere a {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-70);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  transition: color .2s, border-color .2s;
}
.elsewhere a:hover,
.elsewhere a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Motion ---------------------------------------------------------------- */

/* Content is visible by default. Only once JS confirms it can run does it
   hide things to reveal them on scroll — so a JS failure degrades to a
   perfectly readable page rather than a blank one. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1);
}
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__portrait img { animation: none; }
}