/* =========================================================
   HOME: editorial portfolio layout
   Project evidence carries the visual weight; typography and
   spacing keep the surrounding interface quiet.
   ========================================================= */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:     #101012;
  --ink:    #eceef0;
  --muted:  #9aa0a8;
  --faint:  #7a808a;
  --rule:   rgba(236,238,240,0.1);
  --rule-h: rgba(236,238,240,0.28);
  --ice:    #aac6de;
  --panel:  rgba(24,24,27,0.66);
  --display:'Inter Tight', system-ui, sans-serif;
  --body:   'Inter', system-ui, sans-serif;
  --mono:   'IBM Plex Mono', ui-monospace, monospace;
}

html { scroll-behavior:smooth; scroll-padding-top:72px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; animation:none !important; }
}

body {
  background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a { color:inherit; text-decoration:none; }
a:focus-visible { outline:2px solid var(--ice); outline-offset:3px; }

.skip-link {
  position:fixed; top:16px; left:16px; z-index:3000;
  padding:10px 14px; background:var(--ice); color:var(--bg);
  font-family:var(--mono); font-size:.72rem;
  border-radius:4px; transform:translateY(-240%);
  transition:transform .2s ease;
}
.skip-link:focus-visible { transform:translateY(0); outline:2px solid var(--ink); outline-offset:2px; }

/* ---------- Chrome ---------- */
.top {
  position:sticky; top:0; left:0; right:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center;
  gap:24px;
  min-height:56px;
  padding:6px clamp(20px,5vw,64px);
  border-bottom:1px solid rgba(236,238,240,.12);
  background:rgba(11,11,13,.9);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.top__name {
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.06em;
}
.top nav {
  display:flex; gap:clamp(8px,1.6vw,20px); font-family:var(--mono); font-size:.72rem;
}
.top nav a {
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--muted); transition:color .15s;
}
.top nav a:hover { color:var(--ink); }

.content { position:relative; z-index:10; display:block; }
.wrap { max-width:1160px; margin:0 auto; padding:0 40px; }

/* ---------- Hero ---------- */
.hero {
  min-height:calc(100vh - 56px); min-height:calc(100svh - 56px);
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:clamp(36px,4vw,64px); align-items:center; position:relative;
}
.hero__copy { min-width:0; }
.hero__copy { grid-column:1; grid-row:1; align-self:end; }
.hero-proof { grid-column:2; grid-row:1 / span 2; }
.hero > .hero__cta { grid-column:1; grid-row:2; align-self:start; margin-top:0; }
.hero__kicker {
  font-family:var(--mono); font-size:.72rem; color:var(--ice);
  letter-spacing:.14em; margin-bottom:22px;
}
.hero h1 {
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.75rem, 4.1vw, 4rem);
  letter-spacing:-.035em; line-height:1.0;
  max-width:14ch;
}
.hero__sub {
  margin-top:28px; max-width:46ch; color:var(--muted); font-size:1.08rem;
}
.hero__cta { margin-top:44px; display:flex; gap:14px; flex-wrap:wrap; }
.hero__cta a {
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--mono); font-size:.72rem; padding:13px 24px; border-radius:999px;
  transition:background .15s, border-color .15s, color .15s;
}
.hero__cta a.primary { background:var(--ink); color:var(--bg); }
.hero__cta a.primary:hover { background:#fff; }
.hero__cta a.ghost {
  border:1px solid rgba(236,238,240,0.14); color:var(--muted);
  background:rgba(24,24,27,0.4);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.hero__cta a.ghost:hover { color:var(--ink); border-color:var(--ink); }
.hero-proof {
  display:block; min-width:0; border:1px solid rgba(170,198,222,.18);
  background:#0b0b0d; overflow:hidden;
}
.hero-proof img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; filter:saturate(.78) brightness(.78); transition:filter .2s, transform .45s; }
.hero-proof span { display:block; padding:14px 16px; color:var(--muted); font-size:.82rem; }
.hero-proof strong { color:var(--ink); margin-right:8px; }
.hero-proof:hover img { filter:saturate(.95) brightness(.9); transform:scale(1.015); }

/* ---------- Sections ---------- */
section { padding:130px 0; }
.sec-kicker {
  font-family:var(--mono); font-size:.7rem; color:var(--ice);
  letter-spacing:.14em; margin-bottom:14px;
}
.sec-title {
  font-family:var(--display); font-weight:600; font-size:2.6rem;
  letter-spacing:-.025em; margin-bottom:48px;
}

/* ---------- Work panel: near-black slab, typography does the work ---------- */
section.panel { padding:0; }
.panel {
  width:100%; margin-left:0;
  background:#0b0b0d;
  border-top:1px solid rgba(170,198,222,0.22);
}
.panel__inner { max-width:1160px; margin:0 auto; padding:110px 40px 140px; }

/* ---------- Project list: big type index, cursor image preview ---------- */
.plist { border-top:1px solid var(--rule); }
.plist__group {
  font-family:var(--mono); font-size:11px; color:var(--ice);
  letter-spacing:.14em;
  padding:64px 6px 14px;
  border-bottom:1px solid var(--rule);
}
.plist__group:first-child { padding-top:30px; }
.prow {
  display:grid; grid-template-columns:64px minmax(0,1fr) 200px;
  gap:30px; align-items:baseline;
  padding:34px 6px;
  border-bottom:1px solid var(--rule);
  transition:opacity .25s;
}
/* The active row changes its heading colour below; other rows retain their
   full contrast while the pointer moves through the list. */
.prow__idx { font-family:var(--mono); font-size:11px; color:var(--faint); }
.prow h3 {
  font-family:var(--display); font-weight:600;
  font-size:clamp(2rem, 3.4vw, 3.2rem);
  letter-spacing:-.03em; line-height:1.05;
  transition:color .15s;
}
.prow:hover h3,
.prow:focus-visible h3 { color:var(--ice); }
.prow p { color:var(--muted); font-size:.9rem; margin-top:10px; max-width:56ch; }
.prow__meta {
  font-family:var(--mono); font-size:11px; color:var(--faint);
  letter-spacing:.05em; line-height:1.9; text-align:right;
}
/* Split preview: home-list.js wraps the list in .work-split and builds the
   sticky .pview panel from the hidden in-row thumbs. Hovering a row
   crossfades the panel image; no layout ever shifts. */
.prow__thumb { display:none; }

.prow--featured {
  min-height:150px;
  align-items:center;
}
.prow--featured h3 { font-size:clamp(2.25rem, 3.6vw, 3.5rem); }
.prow--tool {
  min-height:0;
  padding-block:22px;
}
.prow--tool h3 { font-size:clamp(1.45rem, 2.2vw, 2.05rem); }
.prow--tool p { max-width:62ch; }
.earlier-work { border-bottom:1px solid var(--rule); }
.earlier-work summary {
  display:flex; justify-content:space-between; gap:24px; align-items:center;
  padding:28px 6px; cursor:pointer; list-style:none;
  font-family:var(--display); font-size:clamp(1.35rem, 2.2vw, 2rem); font-weight:600;
}
.earlier-work summary::-webkit-details-marker { display:none; }
.earlier-work summary::after { content:'+'; margin-left:auto; color:var(--ice); font-family:var(--mono); }
.earlier-work[open] summary::after { content:'-'; }
.earlier-work summary span { color:var(--faint); font-family:var(--mono); font-size:11px; font-weight:400; }
.earlier-work nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:0 6px 28px 6px; }
.earlier-work nav a {
  display:grid; gap:3px; align-content:center;
  min-height:68px; padding:11px 0;
  border-top:1px solid var(--rule); color:var(--muted);
}
.earlier-work nav a:nth-child(odd) { margin-right:22px; }
.earlier-work nav a:hover { color:var(--ink); }
.archive-project-link__name {
  color:var(--ink); font-family:var(--display); font-size:.94rem; font-weight:500;
  line-height:1.35;
}
.archive-project-link__desc {
  max-width:44ch; color:var(--faint); font-size:.76rem; line-height:1.45;
  transition:color .15s;
}
.archive-project-link:hover .archive-project-link__desc { color:var(--muted); }
.archive-project-link:focus-visible .archive-project-link__desc { color:var(--muted); }

.work-split {
  display:grid; grid-template-columns:minmax(0,1fr) 380px;
  gap:0 60px; align-items:start;
  border-top:1px solid var(--rule);
}
.work-split .plist { border-top:none; min-width:0; }
.work-split .prow { grid-template-columns:48px minmax(0,1fr) 150px; gap:24px; }
.work-split .prow h3 { font-size:clamp(1.9rem, 2.6vw, 2.7rem); }

.pview { position:sticky; top:104px; padding-top:34px; }
.pview__frame {
  position:relative; aspect-ratio:16/11;
  border-radius:14px; overflow:hidden;
  background:#0b0b0d;
  border:1px solid rgba(170,198,222,0.22);
  box-shadow:0 24px 70px rgba(0,0,0,0.45);
}
.pview__frame img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transform:scale(1.07);
  transition:opacity .35s ease, transform .35s ease;
}
/* Active image: quick fade in, then a slow drift so the panel feels alive */
.pview__frame img.on {
  opacity:1;
  animation:pview-drift 9s ease-out forwards;
}
@keyframes pview-drift {
  from { transform:scale(1); }
  to   { transform:scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .pview__frame img.on { transform:scale(1); }
}
.pview__caption {
  display:flex; justify-content:space-between; gap:16px;
  margin-top:14px;
  font-family:var(--mono); font-size:11px; color:var(--faint);
  letter-spacing:.05em;
}
.more {
  display:inline-flex; min-height:44px; align-items:center; margin-top:36px;
  font-family:var(--mono); font-size:.72rem; color:var(--muted);
  border-bottom:1px solid var(--rule-h); padding-bottom:3px;
  transition:color .15s, border-color .15s;
}
.more:hover { color:var(--ink); border-color:var(--ink); }

/* ---------- About ---------- */
.about-panel {
  max-width:68ch;
  background:transparent; border:0; border-radius:0;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  padding:24px 0 0;
  display:block;
}
.facts { padding-left:38px; border-left:1px solid var(--rule); }
.about-panel p { color:var(--muted); margin-bottom:16px; max-width:60ch; }
.about-panel p strong { color:var(--ink); font-weight:500; }
.facts div {
  display:flex; justify-content:space-between; gap:16px;
  padding:10px 0; border-bottom:1px solid var(--rule); font-size:.88rem;
}
.facts div:last-child { border-bottom:none; }
.facts dt { font-family:var(--mono); font-size:11px; color:var(--faint); padding-top:4px; }
.facts dd { text-align:right; color:var(--muted); }
.facts dd.ok { color:var(--ice); }

/* ---------- Contact ---------- */
.contact { text-align:center; padding-bottom:160px; }
.contact__card {
  max-width:820px; margin:0 auto;
  padding:56px 0 0;
  border-top:1px solid var(--rule);
}
.contact__mail {
  display:inline-block; max-width:100%;
  margin-top:32px;
  font-family:var(--display); font-weight:700;
  /* capped at 3rem: any larger and the address grows wider than the card,
     overflowing right instead of centring */
  font-size:clamp(1.5rem, 4.2vw, 3rem); letter-spacing:-.03em;
  overflow-wrap:anywhere;
  border-bottom:2px solid var(--rule-h);
  transition:border-color .15s;
}
.contact__mail:hover { border-color:var(--ice); }
.contact__row {
  margin-top:44px; display:flex; justify-content:center; gap:30px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.72rem;
}
.contact__row a { display:inline-flex; min-height:44px; align-items:center; color:var(--muted); transition:color .15s; }
.contact__row a:hover { color:var(--ink); }

/* ---------- Colophon ---------- */
.colophon {
  position:relative; z-index:10;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  max-width:1160px; margin:0 auto; padding:30px 40px 40px;
  border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.05em;
}
.colophon a { display:inline-flex; min-height:44px; align-items:center; }

/* Glass fallback for browsers without backdrop-filter support. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top,
  .hero__cta a.ghost { background:rgba(16,16,18,0.94); }
}

/* ---------- Responsive ---------- */
/* No hover / narrow screens: drop the sticky panel, give every row its own
   inline thumbnail instead so images are always visible. */
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
  .work-split { display:block; border-top:none; }
  .work-split .plist { border-top:1px solid var(--rule); }
  .pview { display:none; }
  .prow,
  .work-split .prow { grid-template-columns:40px minmax(0,1fr) 104px; gap:20px; align-items:center; }
  .prow__meta { display:none; }
  .prow__thumb { display:block; }
  .prow__thumb img {
    width:104px; height:104px; object-fit:cover; display:block;
    border-radius:12px; border:1px solid rgba(170,198,222,0.18);
  }
}

@media (max-width: 820px) {
  /* Keep the identity, proof image and actions in a clear mobile sequence. */
  .hero { display:flex; flex-direction:column; justify-content:flex-start; gap:32px; padding:120px 0 72px; }
  .hero__copy { order:1; }
  .hero > .hero__cta { order:2; align-self:stretch; width:100%; }
  .hero-proof { order:3; width:100%; }
  .top { padding:6px 20px; gap:12px; }
  .top nav { gap:8px; }
  .wrap { padding:0 20px; }
  .prow,
  .work-split .prow { grid-template-columns:30px minmax(0,1fr) 84px; gap:14px; padding:26px 2px; }
  .prow h3,
  .work-split .prow h3 { font-size:1.55rem; overflow-wrap:break-word; }
  .prow__thumb img { width:84px; height:84px; border-radius:10px; }
  .about-panel { grid-template-columns:1fr; padding:30px 0; gap:32px; }
  .facts { padding-left:0; border-left:0; }
  .contact__card { padding:44px 22px 40px; }
  section { padding:90px 0; }
  .panel__inner { padding:70px 20px 100px; }
  section.panel { width:100%; margin-left:0; padding:0; }
  .colophon { padding:24px 20px 32px; }
  .earlier-work nav { grid-template-columns:1fr; }
  .earlier-work nav a:nth-child(odd) { margin-right:0; }
}

@media (max-width: 480px) {
  .prow h3,
  .work-split .prow h3 { font-size:1.42rem; }
  .top { padding:6px 20px; align-items:center; gap:12px; }
  .top__name { max-width:9ch; line-height:1.25; }
  .top nav { gap:8px; }
  .top nav a { font-size:.7rem; }
  .hero__cta a { padding:12px 18px; }
  .colophon { flex-direction:column; gap:6px; }
}
/* Audit V4 — flat metadata and readable prose */
.hero__meta {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 380px) {
  .top nav a[href*="#contact"] { display:none; }
  .prow__idx { display:none; }
  .prow,
  .work-split .prow {
    grid-template-columns:minmax(0,1fr) 82px;
    grid-template-rows:auto auto;
    gap:10px 14px;
    align-items:center;
  }
  .prow > div:not(.prow__thumb) { display:contents; }
  .prow h3 { grid-column:1; grid-row:1; }
  .prow p { grid-column:1 / -1; grid-row:2; margin-top:0; }
  .prow__thumb { grid-column:2; grid-row:1; }
  .prow__thumb img { width:82px; height:82px; }
}

/* Standalone 404 page, shared with the home shell to avoid another CSS payload. */
.error-page {
  min-height: calc(100svh - 150px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(130px, 18vh, 210px) 40px 90px;
}

.error-page__code {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--muted);
}

.error-page h1 {
  margin: 0;
  font-size: clamp(3rem, 8vw, 6rem);
  letter-spacing: -.055em;
  line-height: .92;
}

.error-page > p:not(.error-page__code) {
  max-width: 54ch;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  line-height: 1.65;
}

.error-page__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 34px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-h);
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.error-page__back:hover { border-color: var(--ice); }

@media (max-width: 620px) {
  .error-page { padding-right: 20px; padding-left: 20px; }
}