/* ==========================================================================
   HOME — the sections of the front page.

   Fewer elements, larger. The tag pills, the tool marquee, the tick
   diamonds and the hairline column grid all came out: each was small,
   decorative, and competing with the words next to it.
   ========================================================================== */

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-block: calc(var(--head-h) + 3rem) 2.5rem;
  scroll-margin-top: var(--head-h);
}

/* Centred in the space above the cue by flexbox rather than by absolute
   positioning — absolute offsets are measured from the padding box, which
   at desktop widths is the strip the index rail sits in. */
.hero__inner { margin-block: auto; }

.hero__kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--paper-74);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.hero__kicker::before {
  content: "";
  width: clamp(2rem, 4vw, 4rem);
  height: 1px;
  background: var(--signal);
}

.hero__name { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* The masthead rule and the data row beneath it: who, where and when,
   before you scroll a pixel. */
.hero__meta {
  display: grid;
  gap: 1.75rem 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

@media (min-width: 700px) {
  .hero__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.hero__cell { display: flex; flex-direction: column; gap: 0.6rem; }
.hero__cell .mono { color: var(--paper); font-size: 1rem; }

.hero__cue {
  align-self: flex-start;
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--paper-60);
  transition: color 0.3s var(--ease);
}
.hero__cue:hover { color: var(--paper); }

.hero__cue-line {
  display: block;
  width: 4rem;
  height: 1px;
  background: var(--line);
}

/* Scroll-driven polish where the browser supports it: the hero settles
   back as it leaves rather than simply scrolling away. Pure CSS, off the
   main thread, and completely absent everywhere else. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__inner {
      animation: heroSettle linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 90%;
    }
    @keyframes heroSettle {
      to { opacity: 0.15; transform: translate3d(0, -4vh, 0) scale(0.97); }
    }
  }
}

/* ------------------------------------------------------------- 01 / thesis

   Display type is never sized against a narrow column: at 80px in a 230px
   column the browser wraps after every second word.                        */

.thesis__lead {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 100%;
  font-size: clamp(2rem, 4.2vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--paper);
  max-width: 20ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  text-wrap: balance;
}
.thesis__lead em,
.thesis__lead .w--em { color: var(--signal); font-style: normal; }

.thesis__body { max-width: 58ch; }

/* ---------------------------------------------------------------- 02 / now */

.now { display: flex; flex-direction: column; }

.now__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line-soft);
}
.now__row:last-child { border-bottom: 1px solid var(--line-soft); }

@media (min-width: 700px) {
  .now__row { grid-template-columns: 9rem minmax(0, 1fr); gap: 2.5rem; align-items: baseline; }
}

.now__when { color: var(--signal); font-size: 1rem; }
.now__body p { color: var(--paper-74); margin-top: 0.55rem; max-width: 56ch; }

.now__role {
  display: inline-block;
  margin-left: 0.75rem;
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--paper-60);
  vertical-align: 0.1em;
}

/* --------------------------------------------------------------- 03 / work

   A numbered index. One row per project, everything legible at rest, and a
   hover state built entirely from transitions on transform and colour.     */

.index { display: flex; flex-direction: column; }

.entry {
  position: relative;
  display: block;
  padding: clamp(2rem, 3.5vw, 3.25rem) 0;
  border-top: 1px solid var(--line-soft);
  transition: border-color 0.4s var(--ease);
}
.index .entry:last-of-type { border-bottom: 1px solid var(--line-soft); }
.entry:hover { border-color: var(--line); }

/* The accent spine that grows on hover. Scale only. */
.entry::before {
  content: "";
  position: absolute;
  left: calc(var(--gutter) * -0.4);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--signal);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--ease);
}
.entry:hover::before, .entry:focus-visible::before { transform: scaleY(1); }

.entry::after {
  content: "";
  position: absolute;
  inset: 0 calc(var(--gutter) * -0.4);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 60%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
  z-index: -1;
}
.entry:hover::after, .entry:focus-visible::after { opacity: 1; }

.entry__grid { display: grid; gap: 1.5rem; align-items: start; }

@media (min-width: 1000px) {
  .entry__grid {
    grid-template-columns: 5rem minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(2rem, 3.5vw, 4rem);
  }
}

.entry__num {
  font-family: var(--mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--paper-46);
  padding-top: 0.7rem;
  transition: color 0.4s var(--ease);
}
.entry:hover .entry__num { color: var(--signal); }

.entry__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem 1.4rem;
  margin-bottom: 1rem;
}

.entry__title {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--paper);
  transition: transform 0.5s var(--ease);
  transform-origin: left;
}
.entry:hover .entry__title { transform: translateX(0.4rem); }

.entry__kind {
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-60);
}

.entry__desc {
  color: var(--paper-74);
  font-size: var(--t-sm);
  line-height: 1.5;
  max-width: 50ch;
  margin-bottom: 1.4rem;
}

.entry__tags { margin-bottom: 1.6rem; }

.entry__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--paper);
}
.entry__cta span:last-child { transition: transform 0.4s var(--ease); }
.entry:hover .entry__cta span:last-child { transform: translateX(6px); }
.entry__cta::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--signal);
  transform: scaleX(0.5);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.entry:hover .entry__cta::before { transform: scaleX(1); }

/* Figures, right column on desktop. */
.entry__figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  padding-top: 0.4rem;
}

.fig dt {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-60);
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

.fig dd {
  font-family: var(--display);
  font-weight: 650;
  font-stretch: 100%;
  font-size: clamp(1.85rem, 2.6vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------- 04 / practice

   Two columns rather than four. Four made every card a narrow strip of
   small text; two gives each one a paragraph you can actually read.        */

.caps {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

@media (min-width: 800px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cap {
  background: rgba(8, 8, 11, 0.5);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: background-color 0.42s var(--ease);
}
.cap:hover { background: rgba(255, 255, 255, 0.035); }

.cap__n { color: var(--signal); letter-spacing: 0.18em; }
.cap p { color: var(--paper-74); flex: 1; max-width: 46ch; }
.cap .tags { margin-top: 0.4rem; }

.aside {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  max-width: 60ch;
  color: var(--paper-74);
}

/* ---------------------------------------------------------------- 05 / log */

.log__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line-soft);
}

@media (min-width: 700px) {
  .log__row { grid-template-columns: 9rem minmax(0, 1fr); gap: 2.5rem; align-items: baseline; }
}

.log__row time {
  font-family: var(--mono);
  color: var(--paper-60);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  transition: color 0.35s var(--ease);
}
.log__row:hover time { color: var(--signal); }

.log__row p { color: var(--paper-74); max-width: 58ch; }
.log__row:first-child p { color: var(--paper-88); }

/* -------------------------------------------------------------- 06 / about */

.about { display: grid; gap: clamp(2.5rem, 5vw, 5rem); }

@media (min-width: 1000px) {
  .about { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
}

.about__pull { margin-block: clamp(2.5rem, 4vw, 3.5rem); }

.about__facts { align-self: start; }

@media (min-width: 1000px) {
  .about__facts { position: sticky; top: calc(var(--head-h) + 2rem); }
}

.facts { border-top: 1px solid var(--line-soft); }

.facts__row {
  display: grid;
  gap: 0.45rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line-soft);
}
.facts__row dd { color: var(--paper-88); line-height: 1.5; }

/* ------------------------------------------------------------ 07 / contact

   The contact band gets its own light — a wider, warmer field behind the
   headline, enough to make the end of the page feel like an arrival.       */

.contact { position: relative; overflow: hidden; }

.contact__glow {
  position: absolute;
  left: 50%;
  bottom: -55%;
  width: min(170vw, 1900px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 90, 44, 0.26) 0%, rgba(255, 110, 60, 0.09) 34%, transparent 64%);
  pointer-events: none;
  z-index: -1;
  animation: contactBreathe 14s ease-in-out infinite alternate;
}

@keyframes contactBreathe {
  from { transform: translateX(-50%) scale(0.94); opacity: 0.75; }
  to   { transform: translateX(-50%) scale(1.06); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .contact__glow { animation: none; } }

.contact__head { font-size: var(--t-xl); margin-bottom: clamp(1.5rem, 2.5vw, 2rem); }
.contact__lead { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }

/* Nothing here opens a mail client. It copies. */
.mailplate {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
  flex-wrap: wrap;
  padding: clamp(1.25rem, 2.2vw, 1.85rem) clamp(1.5rem, 2.6vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}
.mailplate:hover { border-color: var(--signal); background: var(--signal-dim); }

.mailplate__addr {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 100%;
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  letter-spacing: -0.025em;
  color: var(--paper);
}

.mailplate__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-60);
  transition: color 0.3s var(--ease);
}
.mailplate:hover .mailplate__hint { color: var(--paper-88); }
.mailplate.is-copied { border-color: #6fd3a8; background: rgba(111, 211, 168, 0.1); }
.mailplate.is-copied .mailplate__hint { color: #6fd3a8; }
.mailplate.is-failed { border-color: var(--signal); }

.contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.outlink {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.4rem;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--paper-88);
  transition: border-color 0.32s var(--ease), color 0.32s var(--ease),
              background-color 0.32s var(--ease);
}
.outlink:hover {
  border-color: var(--line);
  color: var(--paper);
  background: rgba(255, 255, 255, 0.05);
}
.outlink svg { opacity: 0.8; transition: opacity 0.3s var(--ease); }
.outlink:hover svg { opacity: 1; }
.outlink__arrow { color: var(--paper-46); transition: transform 0.35s var(--ease), color 0.35s var(--ease); }
.outlink:hover .outlink__arrow { transform: translate(2px, -2px); color: var(--signal); }