/* ========= Shared header metrics (identical on both pages) ========= */
:root{
  --ui-size: clamp(13.5px, 1.0vw, 14.5px);   /* header text size */
  --top-gap: clamp(42px, 5.6vw, 56px);       /* MODIFIED: Synced with styles.css */
  --header-w: min(92vw, 1019px);             /* header width */
}

/* ========= Page/base ========= */
* { box-sizing: border-box; }
html, body { height:100%; margin:0; }

html{
  background:#fff; color:#111;
  -webkit-text-size-adjust:100%; /* prevents font inflation differences */
  text-size-adjust:100%;
  scrollbar-gutter: stable both-edges;
}
body{
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--ui-size);      /* body size locked to header/number size */
  line-height:1.45;
  letter-spacing:.04em;
  overflow-x:hidden; overflow-y:scroll; /* Changed to scroll to allow content flow */
  overscroll-behavior:none;
}
@media (max-height:300px){ body{ overflow-y:auto; } }

/* ========= Fixed header (identical across pages) ========= */
.header-shell{
  position:fixed; left:0; right:0;
  top: calc(var(--top-gap) + env(safe-area-inset-top, 0px)); /* MODIFIED: Synced with styles.css */
  z-index:20;
}
.head{
  width:var(--header-w);
  margin:0 auto;
  display:flex; justify-content:space-between; align-items:flex-start;

  /* Lock row height to font size → no baseline drift */
  height: calc(var(--ui-size) * 1);
  line-height:0;
}
.nav{
  text-decoration:none; color:#111;
  font-size:var(--ui-size);
  line-height:1;
  letter-spacing:.06em;
  display:block;
  transform:translateZ(0);
}
.nav:active{ transform:none; }
#infoLink:hover,
#infoLink:active,
#infoLink.is-pressing,
#infoLink:focus-visible{ color:#777; }
.nav.right:hover,
.nav.right:active,
.nav.right:focus-visible{ color:#777; }

/* ========= Info content ========= */
.wrap{
  width:var(--header-w);
  margin: calc(var(--top-gap) + 50px) auto 80px auto;
}
.grid{
  display:grid;
  grid-template-columns: 180px 1fr;   /* labels left, copy right */
  column-gap: 28px;
  row-gap: 32px;
}
.label{
  color:#777;
  font-size:var(--ui-size);
  letter-spacing:.06em;
  align-self:baseline;
}
.content{ max-width:56ch; }
.lead{ margin:0 0 .9rem 0; }

.email{ color:#111; text-decoration:none; position:relative; }
.email::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:currentColor; opacity:.35; }
.email:hover{ color:#777; }

.collabs{ list-style:none; margin:0; padding:0; }
.collabs li + li{ margin-top:.25rem; }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ===== Mobile Tweaks ===== */
@media (max-width: 720px){
  .wrap{ margin-top: calc(var(--top-gap) + 50px); }
  .grid{
    grid-template-columns:1fr;
    row-gap:6px;                 /* small gap between Label → Content */
  }
  .label{ margin-top:4px; margin-bottom:0; }
  .content{ max-width:65ch; margin-bottom:16px; }
  .grid .content:last-of-type{ margin-bottom:0; }
}

/* ADDED: Mobile override to sync header position with WORK page */
@media (max-width: 600px){
  :root {
    --top-gap: 50px;
  }
}