/* Special Projects — shared tokens, measured from live s-p.studio (SP-201) */
@import url("https://use.typekit.net/dvy4rvb.css");

:root{
  --ink: oklch(53.9% .011 222.2);          /* #707E83 */
  --ink-50: oklch(53.9% .011 222.2 / .5);
  --ink-20: oklch(53.9% .011 222.2 / .2);
  --red: oklch(57.9% .172 24.3);
  --black: #000;
  --fs-body: 14px;
  --fs-large: 20px;
  --d: 8px;                                 /* 8px rhythm */
  --ease-respond: cubic-bezier(.16,1,.3,1);
}
@media (max-width:768px){ :root{ --fs-body:12px; --fs-large:18px; } }

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:"neue-haas-unica",system-ui,-apple-system,sans-serif;
  font-size:var(--fs-body);
  font-weight:400;
  line-height:140%;
  letter-spacing:.015em;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; width:100%; height:100%; object-fit:cover; }

/* header — persistent, matches live (wordmark left, nav right) */
.hdr{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--d);
  padding:var(--d) 16px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--ink-20);
}
.hdr-name{ font-weight:600; color:var(--ink); white-space:nowrap; }
.hdr-name span{ font-weight:400; color:var(--ink-50); }
.hdr-nav{ display:flex; gap:16px; align-items:center; flex-shrink:0; }
.hdr-nav a{ color:var(--ink-50); transition:color .3s ease; min-height:44px; display:flex; align-items:center; }
/* mobile: drop the wordmark suffix, tighten nav so links never clip */
@media (max-width:768px){
  .hdr{ gap:12px; }
  .hdr-name span{ display:none; }
  .hdr-name{ overflow:hidden; text-overflow:ellipsis; }
  .hdr-nav{ gap:12px; }
}
.hdr-nav a:hover{ color:var(--ink); }
.hdr-nav a.active{ color:var(--black); font-weight:600; }

/* tile */
.tile{ display:block; position:relative; }
.tile-img{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--ink-20); }
.tile-img img{ transition:transform .6s ease; }
.tile:hover .tile-img img{ transform:scale(1.03); }
.tile-cap{ padding:var(--d) 0; display:flex; gap:6px; align-items:baseline; }
.tile-cap b{ font-weight:600; color:var(--ink); }
.tile-cap .dot{ color:var(--ink-50); }
.tile-cap .cat{ color:var(--ink-50); }

/* reveal */
@keyframes rip{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } }

footer.ft{
  padding:40px 16px var(--d);
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between;
  border-top:1px solid var(--ink-20); color:var(--ink-50);
}
footer.ft a{ color:var(--ink); }
:focus-visible{ outline:1px solid var(--ink); outline-offset:2px; }