@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(assets/Barlow-400-latin.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url(assets/Barlow-500-latin.woff2) format("woff2"); }
@font-face { font-family: "Encode Sans"; font-weight: 500; font-display: swap; src: url(assets/EncodeSans-500-latin.woff2) format("woff2"); }

:root {
  --paper: #F3F5F4;
  --ink: #0F3D2E;
  --ink-soft: #2E4C41;
  --muted: #6B746F;
  --link: #1F6B4E;
  --signal: #5FD39A;
  --measure: 40rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: "Barlow", "Helvetica Neue", Arial, sans-serif; font-size: 112.5%; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body { margin: 0; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
h1, h2, h3 { font-family: "Encode Sans", "Barlow", sans-serif; font-weight: 500; letter-spacing: 0.005em; }
p { margin: 0 0 1rem 0; max-width: var(--measure); }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem); gap: var(--gutter); align-items: end; padding: clamp(4rem, 10vh, 7rem) var(--gutter) 0; max-width: 72rem; margin: 0 auto; }
.name { font-weight: 500; font-size: 1rem; color: var(--muted); margin-bottom: 1.5rem; }
h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.18; margin: 0 0 1.25rem 0; max-width: 22ch; }
.lede { font-size: 1.05rem; color: var(--ink-soft); max-width: 38rem; }
.contact { margin-top: 1.5rem; }
.contact a + a { margin-left: 1.5rem; }
/* capture frame: the photobox as a hero element */
.capture {
  position: relative; margin: 0; width: 100%; aspect-ratio: 4 / 5; isolation: isolate;
  border-radius: 0.5rem; overflow: visible;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(15,61,46,0) 45%, var(--paper) 78%),
    repeating-linear-gradient(to right, rgba(15,61,46,0.10) 0 1px, transparent 1px 2.25rem),
    repeating-linear-gradient(to bottom, rgba(15,61,46,0.10) 0 1px, transparent 1px 2.25rem);
}
.capture::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(15,61,46,0.22); border-radius: 0.5rem; z-index: 0; pointer-events: none; }
.capture .mark { position: absolute; width: 1.1rem; height: 1.1rem; border: 2px solid var(--ink); z-index: 0; }
.capture .tl { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-radius: 0.5rem 0 0 0; }
.capture .tr { top: -2px; right: -2px; border-left: 0; border-bottom: 0; border-radius: 0 0.5rem 0 0; }
.capture .bl { bottom: -2px; left: -2px; border-right: 0; border-top: 0; border-radius: 0 0 0 0.5rem; }
.capture .br { bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-radius: 0 0 0.5rem 0; }
.capture .disc { position: absolute; left: 50%; top: 18%; width: 78%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--signal); opacity: 0.85; z-index: 0; }
.capture .portrait { position: absolute; left: 50%; bottom: 0; width: 112%; height: auto; transform: translateX(-50%); z-index: 2;
  clip-path: inset(-30% 5.36% 0 5.36%); filter: drop-shadow(0 18px 24px rgba(15,61,46,0.18)); }


/* thread + sections */
main { position: relative; max-width: 72rem; margin: 0 auto; padding: 3rem var(--gutter) 2rem; }
.thread { position: absolute; left: calc(var(--gutter) + 0.45rem); top: 0; bottom: 0; width: 2px; background: var(--signal); transform-origin: top; }
.hero-text { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.thread { transform: scaleY(var(--progress, 1)); transition: transform .15s linear; }
section::before { transition: background .5s ease, box-shadow .5s ease; }
section.lit::before { background: var(--signal); box-shadow: 0 0 0 5px rgba(95,211,154,0.18); }
@supports (animation-timeline: scroll()) {
  .capture .disc { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
  @keyframes drift { to { transform: translate(-50%, 6rem); } }
}
section { position: relative; padding: 1.5rem 0 1.5rem 3rem; }
section::before { content: ""; position: absolute; left: 0; top: 2.15rem; width: 0.95rem; height: 0.95rem; border-radius: 50%; background: var(--paper); border: 2px solid var(--signal); }
h2 { font-size: 1.35rem; margin: 0 0 1rem 0; }
h3 { font-size: 1.05rem; margin: 0 0 0.35rem 0; }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 7.5rem minmax(0, var(--measure)); gap: 1rem; padding: 0.75rem 0; }
.timeline li + li { border-top: 1px solid rgba(15, 61, 46, 0.12); }
.when { color: var(--muted); font-weight: 500; padding-top: 0.15rem; white-space: nowrap; }
.timeline p { margin-bottom: 0; color: var(--ink-soft); }

/* principles */
.principles { margin: 0; max-width: var(--measure); }
.principles dt { font-weight: 500; margin-top: 1rem; }
.principles dd { margin: 0.2rem 0 0 0; color: var(--ink-soft); }

.plain { padding-left: 1.1rem; margin: 0 0 1rem 0; max-width: var(--measure); }
.plain li { margin-bottom: 0.35rem; }

/* footer */
footer { max-width: 72rem; margin: 0 auto; padding: 1rem var(--gutter) 3rem; color: var(--muted); font-size: 0.9rem; }
footer details { max-width: var(--measure); margin-bottom: 0.5rem; }
footer summary { cursor: pointer; font-weight: 500; color: var(--ink-soft); }
footer p { margin-top: 0.5rem; }
.fine { margin-top: 1.5rem; }

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; align-items: start; }
  .capture { max-width: 15rem; order: -1; }
  .timeline li { grid-template-columns: 1fr; gap: 0.25rem; }
  .thread { left: calc(var(--gutter) + 0.3rem); }
  section { padding-left: 2.2rem; }
  section::before { width: 0.75rem; height: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) { .capture .disc, .hero-text { animation: none; } .thread { transform: none !important; transition: none; } section::before { background: var(--signal); transition: none; } }