@import url('colors_and_type.css');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

:root {
  --page-max: 1280px;
  --page-pad: 56px;
  --type-scale: 1;        /* tweaked */
  --accent-ration: 1;     /* tweaked: 0 = no teal, 1 = default, 2 = more */
}

/* ---------- Grain (tweak-toggled) ---------- */
body.grain::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.04  0 0 0 0 0.06  0 0 0 0 0.07  0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

/* ---------- Page shell ---------- */
.page { min-height: 100vh; }
.container { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); }

/* ---------- Top meta bar (always-on) ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px var(--page-pad);
  background: color-mix(in srgb, var(--paper-50) 92%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms cubic-bezier(.2,.8,.2,1), background 200ms;
}
.bar.scrolled {
  background: var(--paper-50);
  border-bottom-color: var(--gray-100);
}
.bar__brand { display: flex; align-items: center; gap: 12px; }
.bar__brand img { height: 32px; display: block; }
.bar__nav { display: flex; gap: 4px; align-items: center; }
.bar__nav a {
  font-size: 13px; font-weight: 500; color: var(--fg-2);
  padding: 8px 12px; border-radius: 999px;
  transition: color 200ms cubic-bezier(.2,.8,.2,1), background 200ms;
  position: relative;
}
.bar__nav a:hover { color: var(--ink-900); }
.bar__nav a.active {
  color: var(--ink-900);
  background: var(--paper-100);
}
.bar__status {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; color: var(--fg-3); letter-spacing: 0.02em;
}
.bar__status .pulse {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--teal-500);
  box-shadow: 0 0 0 0 var(--teal-500);
  animation: pulse 2400ms ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 212, 180, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(0, 212, 180, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 212, 180, 0); }
}

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 900ms cubic-bezier(.2,.8,.2,1), transform 900ms cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Hero ---------- */
.hero {
  padding-top: calc(180px * var(--type-scale));
  padding-bottom: calc(180px * var(--type-scale));
  position: relative;
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 13px; color: var(--fg-2);
  letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: calc(56px * var(--type-scale));
}
.hero__eyebrow::before {
  content: ''; display: inline-block; width: 24px; height: 1px; background: var(--gray-200);
}

.hero__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(var(--text-display-l), 5.2vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--ink-900);
  margin: 0;
  max-width: 15ch;
}
.hero__title .soft { color: var(--fg-2); font-style: italic; font-weight: 400; }
.hero__title .dot-wrap {
  display: inline-block;
  vertical-align: baseline;
  margin-left: 0.14em;
  width: 0.22em; height: 0.22em;
  position: relative;
}
.hero__title .dot {
  display: inline-block;
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--teal-500);
  transition: transform 400ms cubic-bezier(.2,.8,.2,1);
  animation: dot-shimmer 3600ms ease-in-out infinite;
  will-change: box-shadow, filter;
}
.hero__title .dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--teal-500);
  animation: dot-halo 3600ms cubic-bezier(.4, 0, .2, 1) infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes dot-shimmer {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 0 0 rgba(0, 212, 180, 0); }
  50%      { filter: brightness(1.15); box-shadow: 0 0 14px 2px rgba(0, 212, 180, 0.4); }
}
@keyframes dot-halo {
  0%   { transform: scale(1);   opacity: 0.55; }
  80%  { transform: scale(3.4); opacity: 0;    }
  100% { transform: scale(3.4); opacity: 0;    }
}
@media (prefers-reduced-motion: reduce) {
  .hero__title .dot,
  .hero__title .dot::before { animation: none; }
}
.hero__title .dot.hide { opacity: calc(var(--accent-ration) * 0.9); }

.hero__foot {
  margin-top: calc(72px * var(--type-scale));
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
  border-top: 1px solid var(--gray-100);
  padding-top: 28px;
}
.hero__dek {
  font-size: var(--text-h4);
  line-height: 1.55; color: var(--fg-2);
  max-width: 52ch; margin: 0;
  text-wrap: pretty;
}
.hero__dek em { color: var(--ink-900); font-style: normal; font-weight: 500; }
.hero__meta {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--fg-2); letter-spacing: 0.04em;
  text-align: right;
  display: flex; flex-direction: column; gap: 6px;
}
.hero__meta b { color: var(--ink-900); font-weight: 500; }
.hero__meta-link {
  display: inline-flex; align-items: baseline; gap: 10px;
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 180ms ease, color 180ms ease;
  margin-left: auto;
  width: fit-content;
}
.hero__meta-link:hover { border-bottom-color: var(--teal-500); }
.hero__meta-link:hover .hero__meta-arrow { color: var(--teal-500); transform: translate(1px, -1px); }
.hero__meta-coord { color: var(--fg-3); font-size: 11px; }
.hero__meta-arrow {
  color: var(--fg-3); font-size: 11px;
  transition: color 180ms ease, transform 180ms ease;
  display: inline-block;
}

/* ---------- Section scaffold ---------- */
.section {
  padding: calc(140px * var(--type-scale)) 0;
  border-top: 1px solid var(--gray-100);
  position: relative;
}
.section--tint { background: var(--paper-100); }
.section__head {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 48px;
  margin-bottom: calc(72px * var(--type-scale));
  align-items: baseline;
}
.section__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-caption); color: var(--fg-3);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding-top: 8px;
  display: flex; align-items: baseline; gap: 10px;
}
.section__eyebrow .num {
  color: var(--ink-900); font-weight: 400;
}
.section__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-section);
  line-height: 1.35; letter-spacing: -0.01em;
  color: var(--ink-900); margin: 0; max-width: 22ch;
  text-wrap: balance;
}
.section__title .soft { color: var(--fg-2); font-weight: 400; font-style: italic; }

/* ---------- Currently (intrigue-first) ---------- */
.currently {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 48px;
}
.currently__spacer { }
.currently__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.currently__item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--gray-100);
  align-items: baseline;
}
.currently__item:first-child { border-top: none; padding-top: 0; }
.currently__num {
  font-family: var(--font-mono);
  font-size: var(--text-caption); color: var(--fg-3); letter-spacing: 0.04em;
}
.currently__text {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-h3);
  line-height: 1.4; letter-spacing: -0.015em;
  color: var(--ink-900);
  text-wrap: pretty;
}
.currently__text .soft { color: var(--fg-2); font-weight: 400; }
.currently__tag {
  font-family: var(--font-mono); font-size: var(--text-caption);
  color: var(--fg-3); letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ---------- Writing ---------- */
.essays { display: flex; flex-direction: column; }
.essay {
  display: grid;
  grid-template-columns: 180px 1fr 120px;
  gap: 48px;
  padding: 36px 0;
  border-top: 1px solid var(--gray-200);
  align-items: baseline;
  transition: padding 280ms cubic-bezier(.2,.8,.2,1), background 280ms;
  position: relative;
}
.essay:first-child { border-top: 1px solid var(--gray-200); }
.essay:last-child { border-bottom: 1px solid var(--gray-200); }
.essay__date {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-3); letter-spacing: 0.04em;
}
.essay__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: calc(clamp(24px, 2.6vw, 34px) * var(--type-scale));
  line-height: 1.15; letter-spacing: -0.02em;
  color: var(--ink-900); margin: 0;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1);
  text-wrap: balance;
}
.essay__time {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-3); letter-spacing: 0.04em;
  text-align: right; justify-self: end;
}
.essay__arrow {
  position: absolute; right: 0; top: 50%;
  transform: translate(-20px, -50%);
  opacity: 0;
  color: var(--fg-3);
  transition: opacity 260ms, transform 360ms cubic-bezier(.2,.8,.2,1);
  font-family: var(--font-mono); font-size: 13px;
}
.essay:hover { cursor: pointer; }
.essay:hover .essay__title { transform: translateX(12px); color: var(--teal-900); }
.essay:hover .essay__arrow { opacity: 1; transform: translate(-6px, -50%); }

/* ---------- About ---------- */
.about__head .about__title {
  max-width: none;
  font-size: calc(var(--text-section) * 1.05);
}
.about {
  display: grid;
  grid-template-columns: 180px 240px 1fr;
  gap: 56px;
  align-items: start;
}
.about__spacer { }
.about__portrait {
  aspect-ratio: 4 / 5;
  max-width: 240px;
  width: 100%;
  background: var(--paper-100) url('assets/portrait-4x5.jpg?v=4') center/cover no-repeat;
  border: 1px solid var(--gray-100);
  position: relative;
  overflow: hidden;
}
.about__body {
  font-size: var(--text-h4);
  line-height: 1.6; color: var(--fg-2);
  max-width: 46ch;
  text-wrap: pretty;
}
.about__body p { margin: 0 0 20px; }
.about__body p:last-child { margin-bottom: 0; }
.about__body em { color: var(--ink-900); font-weight: 500; font-style: normal; }

/* ---------- Contact (dark / light variants) ---------- */
.contact {
  padding: calc(140px * var(--type-scale)) 0;
  background: var(--ink-900);
  color: var(--paper-50);
}
.contact.light {
  background: var(--paper-50);
  color: var(--ink-900);
  border-top: 1px solid var(--gray-100);
}
.contact__head {
  display: grid; grid-template-columns: 180px 1fr; gap: 48px;
  margin-bottom: 64px; align-items: baseline;
}
.contact__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--gray-400);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.contact.light .contact__eyebrow { color: var(--fg-3); }
.contact__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-section);
  line-height: 1.35; letter-spacing: -0.01em;
  margin: 0; text-wrap: balance; max-width: 22ch;
}
.contact__title .soft { color: var(--gray-400); font-style: italic; font-weight: 400; }
.contact.light .contact__title .soft { color: var(--fg-2); }

.form {
  display: grid; grid-template-columns: 180px 1fr; gap: 48px;
}
.form__spacer { }
.form__body {
  display: flex; flex-direction: column; gap: 24px;
  max-width: 560px;
}
.form__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.form__field {
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.form__field label {
  font-size: 13px; font-weight: 500;
  color: var(--gray-200);
  letter-spacing: 0.01em;
}
.contact.light .form__field label { color: var(--fg-2); }
.form__field input,
.form__field textarea {
  font-family: var(--font-body); font-size: 16px;
  color: var(--paper-50); background: transparent;
  border: none; border-bottom: 1px solid var(--gray-600);
  padding: 10px 0; outline: none;
  transition: border-color 180ms, color 180ms;
  resize: none;
  font-weight: 400;
}
.contact.light .form__field input,
.contact.light .form__field textarea {
  color: var(--ink-900);
  border-bottom-color: var(--gray-200);
}
.form__field input::placeholder,
.form__field textarea::placeholder {
  color: var(--gray-600);
}
.contact.light .form__field input::placeholder,
.contact.light .form__field textarea::placeholder { color: var(--gray-400); }
.form__field input:focus,
.form__field textarea:focus {
  border-bottom-color: var(--teal-500);
}
.form__field.invalid input,
.form__field.invalid textarea {
  border-bottom-color: var(--error-500);
}
.form__hint {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--gray-400); letter-spacing: 0.04em;
  min-height: 14px;
  transition: color 200ms;
}
.form__field.invalid .form__hint { color: var(--error-500); }

.form__submit {
  display: flex; align-items: center; gap: 20px;
  margin-top: 8px;
}
.form__submit button {
  appearance: none; border: 1px solid var(--paper-50);
  background: transparent; color: var(--paper-50);
  padding: 14px 28px; border-radius: 999px;
  font-size: 14px; font-weight: 500; cursor: pointer;
  letter-spacing: 0.01em;
  transition: all 200ms cubic-bezier(.2,.8,.2,1);
  display: inline-flex; align-items: center; gap: 10px;
}
.form__submit button:hover {
  background: var(--paper-50); color: var(--ink-900);
}
.form__submit button:active { transform: scale(0.98); }
.contact.light .form__submit button {
  border-color: var(--ink-900); color: var(--ink-900);
}
.contact.light .form__submit button:hover {
  background: var(--ink-900); color: var(--paper-50);
}
.form__submit button.sent {
  background: var(--teal-500); color: var(--teal-900); border-color: var(--teal-500);
}
.form__submit .teal-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--teal-500);
  display: inline-block;
  opacity: calc(var(--accent-ration) * 1);
}
.form__note {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--gray-400); letter-spacing: 0.04em;
}
.form__note--err { color: var(--teal-500); }

/* ---------- Footer ---------- */
.foot {
  padding: 48px var(--page-pad) 36px;
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 48px;
  align-items: baseline;
}
.foot__meta {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-3); letter-spacing: 0.04em;
}
.foot__meta-link {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease, color 180ms ease;
}
.foot__meta-link:hover { color: var(--ink-900); border-bottom-color: var(--teal-500); }
.foot__links {
  display: flex; gap: 24px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em;
}
.foot__links a { color: var(--fg-2); transition: color 180ms; }
.foot__links a:hover { color: var(--ink-900); }

/* ---------- Tweaks panel ---------- */
.tw {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  width: 280px;
  background: var(--paper-50);
  border: 1px solid var(--gray-100);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
  display: none;
  overflow: hidden;
}
.tw.on { display: block; }
.tw__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
}
.tw__title {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-3); letter-spacing: 0.08em; text-transform: uppercase;
}
.tw__close {
  background: none; border: none; cursor: pointer;
  color: var(--fg-3); font-size: 16px; line-height: 1; padding: 4px;
}
.tw__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 16px; }
.tw__group { display: flex; flex-direction: column; gap: 8px; }
.tw__label {
  font-size: 12px; color: var(--fg-2); font-weight: 500;
  display: flex; justify-content: space-between; align-items: center;
}
.tw__label span.val { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.tw__seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--paper-100); border-radius: 8px;
  padding: 3px; gap: 2px;
}
.tw__seg button {
  appearance: none; background: transparent; border: none; cursor: pointer;
  padding: 7px 8px; font-size: 12px; color: var(--fg-2);
  border-radius: 6px; font-weight: 500;
  transition: all 180ms;
}
.tw__seg button.on {
  background: var(--paper-50); color: var(--ink-900);
  box-shadow: var(--shadow-sm);
}
.tw__switch {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--fg-2); font-weight: 500;
}
.tw__toggle {
  width: 34px; height: 20px; background: var(--gray-200);
  border-radius: 999px; position: relative; cursor: pointer;
  transition: background 180ms;
  border: none; padding: 0;
}
.tw__toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; background: var(--paper-50);
  border-radius: 999px;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1);
  box-shadow: var(--shadow-sm);
}
.tw__toggle.on { background: var(--teal-500); }
.tw__toggle.on::after { transform: translateX(14px); }

/* ---------- Hero presentation variants ---------- */
.hero.editorial .hero__title { max-width: 11ch; }
.hero.editorial .hero__foot {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  margin-top: 96px;
}
.hero.measured .hero__title {
  font-size: calc(clamp(56px, 8vw, 112px) * var(--type-scale));
  max-width: 18ch;
}
.hero.measured .hero__title .soft { font-style: normal; }

/* accent ration */
body[data-accent="0"] .hero__title .dot,
body[data-accent="0"] .form__submit .teal-dot,
body[data-accent="0"] .bar__status .pulse { display: none; }
body[data-accent="0"] .bar__status .pulse-fallback { display: inline-block; }

body[data-accent="2"] .hero__title .dot-wrap {
  width: 0.18em; height: 0.18em;
}
body[data-accent="2"] .hero__eyebrow::before { background: var(--teal-500); }
body[data-accent="2"] .section__eyebrow .num { color: var(--teal-600); }

/* ---------- Responsive ---------- */

/* Tablet */
@media (max-width: 900px) {
  :root { --page-pad: 32px; }
  .hero { padding-top: 120px; padding-bottom: 100px; }
  .section { padding: 80px 0; }
  .contact { padding: 80px 0; }
  .section__head, .currently, .about, .contact__head, .form, .foot {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .section__head { margin-bottom: 40px; }
  .about__portrait { max-width: 320px; }
  .hero__foot { grid-template-columns: 1fr; gap: 24px; }
  .hero__meta { text-align: left; }
  .contact__head { margin-bottom: 40px; }
  .form__body { max-width: 100%; }
}

/* Mobile */
@media (max-width: 640px) {
  :root { --page-pad: 20px; }

  /* Top bar: drop the full nav, keep brand + status. Status becomes a hamburger-free menu. */
  .bar { padding: 14px 20px; }
  .bar__brand img {
    height: 26px;
    content: url('assets/logos/wordmark-transparent-mobile.svg?v=1');
  }
  .bar__nav { display: none; }
  .bar__status { font-size: 10px; gap: 6px; }

  /* Hero */
  .hero { padding-top: 100px; padding-bottom: 72px; }
  .hero__eyebrow { margin-bottom: 32px; font-size: 11px; }
  .hero__dek { font-size: 16px; }
  .hero__meta { display: none; }

  /* About: tighter rhythm, smaller portrait centered */
  #about .section__head { margin-bottom: 24px; }
  .about { gap: 16px; }
  .about__portrait { max-width: 220px; margin: 0 auto; }
  .about__body { margin: 0 auto; }
  .hero__foot { margin-top: 40px; padding-top: 20px; gap: 16px; }

  /* Sections */
  .section { padding: 64px 0; }
  .contact { padding: 64px 0; }
  .section__eyebrow { padding-top: 0; font-size: 11px; }

  /* Currently: drop the tag column, stack num + text */
  .currently__item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 0;
  }
  .currently__item > .currently__tag {
    font-size: 10px; color: var(--fg-3);
    order: -1;
  }
  .currently__num { display: none; }

  /* Form: stack name/email */
  .form__row { grid-template-columns: 1fr; gap: 16px; }
  .form__body { gap: 20px; }
  .form__submit { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Footer */
  .foot {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 36px var(--page-pad) 28px;
  }
  .foot img {
    height: 28px !important;
    content: url('assets/logos/wordmark-transparent-mobile.svg?v=1');
  }
    padding: 36px 0 28px;
  }
  .foot__links { flex-wrap: wrap; gap: 16px; }

  /* Tweaks panel: full-width bottom sheet */
  .tw {
    right: 12px; left: 12px; bottom: 12px;
    width: auto;
  }
}