/* ================================================================
   DARRENT MATTHEW / PORTFOLIO v2 (dual track)
   Visual system preserved from the Framer build:
   paper #F1EFED, ink #151515, Space Grotesk 500/700 only,
   heavy negative tracking, 10-col hairline grid @ 5% opacity,
   blob cursor (mix-blend-difference), 4px pill @ 8% ink.
   ================================================================ */

:root{
  --paper:#F1EFED;
  --ink:#151515;
  --hair:rgba(21,21,21,.05);      /* grid lines, exactly 5% */
  --rule:rgba(21,21,21,.15);      /* structural dividers */
  --pill:rgba(21,21,21,.08);      /* View Project tag, 8% ink */
  --max:1240px;
  --pad:clamp(20px,4vw,48px);

  /* Tracking. Computed values at desktop sizes:
     display -0.066em * 120px  = -7.9px  (~ -8px spec)
     body    -0.055em * 18px   = -1.0px  (~ -1px spec) */
  --ls-display:-0.066em;
  --ls-h2:-0.05em;
  --ls-body:-0.055em;
  --ls-small:-0.02em;

  --fs-display:clamp(2.9rem,8.5vw,7.5rem);   /* type sizes unchanged */
  --fs-h2:clamp(2rem,4.5vw,3.25rem);
  --fs-h3:clamp(1.5rem,3vw,2.125rem);
  --fs-body:1.0625rem;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-padding-top:96px;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

body{
  font-family:'Space Grotesk',sans-serif;
  font-weight:500;
  font-size:var(--fs-body);
  line-height:1.55;
  letter-spacing:var(--ls-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--ink);color:var(--paper)}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
a:hover{opacity:.72}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
strong,b{font-weight:700}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- 10-column hairline grid, full height of every section ---- */
.gridlines{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:repeat(10,1fr);
}
.gridlines span{border-left:1px solid var(--hair)}
.gridlines span:last-child{border-right:1px solid var(--hair)}

main,footer{position:relative;z-index:1}

/* ---------------------------- NAV ---------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(241,239,237,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(21,21,21,.08);
}
.nav-inner{
  max-width:var(--max);margin-inline:auto;padding:16px var(--pad);
  display:flex;align-items:center;gap:clamp(14px,3vw,32px);
}
.nav-name{font-weight:700;font-size:.9375rem;letter-spacing:var(--ls-small)}
.nav-links{
  margin-left:auto;display:flex;gap:clamp(14px,2.5vw,28px);
  list-style:none;font-size:.875rem;letter-spacing:var(--ls-small);
}
.nav-clock{
  margin-left:auto;
  display:flex;align-items:center;gap:8px;
  font-size:.875rem;letter-spacing:var(--ls-small);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.nav-clock .ast{font-weight:700}
@media (max-width:520px){
  .nav-name{font-size:.8125rem}
  .nav-links{font-size:.75rem;gap:12px}
  .nav-clock{font-size:.75rem;gap:5px}
  .nav-clock .city{display:none} /* keeps the clock, drops the label on tiny screens */
  .nav-name{white-space:nowrap}
}
@media (max-width:420px){.nav-clock{display:none}}

/* ---------------------------- HERO ----------------------------
   FIX: the old build was a 960px-tall container with the text
   vertically centered (~340px of dead space above and below).
   Now the block is content-height with tight padding, so the
   headline sits close to the nav and to Featured Work.
   Type sizes are untouched.
   --------------------------------------------------------------- */
.hero{
  padding-top:calc(58px + clamp(44px,7vh,84px)); /* 58px = nav height */
  padding-bottom:clamp(40px,6vh,72px);
}
.hero-mark{
  display:block;font-size:clamp(2rem,4.5vw,3.25rem);font-weight:700;
  line-height:1;margin-bottom:clamp(10px,2vh,20px);
}
.hero h1{
  font-size:var(--fs-display);font-weight:700;
  letter-spacing:var(--ls-display);line-height:.98;
}
.hero-sub{
  max-width:46ch;
  margin-top:clamp(18px,3vh,28px);
  font-size:clamp(1.0625rem,1.6vw,1.25rem);
}
.hero-line{
  margin-top:clamp(22px,4vh,40px);
  font-size:var(--fs-display);font-weight:700;
  letter-spacing:var(--ls-display);line-height:.98;
}
.hero-line .alt{font-weight:500}

/* -------------------------- SECTIONS -------------------------- */
.section{padding-block:clamp(48px,7vw,88px)}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:clamp(28px,5vw,56px);
}
h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:var(--ls-h2);line-height:1.02}
.scroll-hint{font-size:.875rem;letter-spacing:var(--ls-small);white-space:nowrap}

/* ------------------------ FEATURED WORK ------------------------ */
.projects-grid{
  display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,44px);
}
@media (min-width:600px){.projects-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.projects-grid{grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,40px)}}

.project{
  display:flex;flex-direction:column;gap:16px;
  color:inherit;
  padding-block:0;
  border-top:1px solid var(--rule);
}
.project-meta{display:flex;flex-direction:column}
.project-index{
  font-size:.75rem;font-weight:700;letter-spacing:var(--ls-small);
  opacity:.55;display:block;margin-bottom:8px;
}
.project h3{
  font-size:clamp(1.25rem,2.2vw,1.65rem);font-weight:700;letter-spacing:var(--ls-h2);line-height:1.08;
}
.project-desc{margin-top:8px;font-size:.9375rem;line-height:1.45;opacity:.75}
.project:hover h3{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pill{
  display:inline-block;margin-top:18px;
  padding:9px 15px;background:var(--pill);border-radius:4px;
  font-size:.8125rem;font-weight:500;letter-spacing:var(--ls-small);
  transition:background .25s ease;
}
a:hover .pill,a.pill:hover{background:rgba(21,21,21,.14)}
a:has(.pill):hover{opacity:1}

.thumb{
  display:block;position:relative;aspect-ratio:4/3;overflow:hidden;
  border:1px solid rgba(21,21,21,.12);border-radius:4px;
  background:var(--paper);cursor:none;
}
@media (hover:none){.thumb{cursor:auto}}
.thumb>*{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
@media (hover:hover){.thumb:hover>*{transform:scale(1.04)}}
.ph{ /* placeholder art until real thumbnails are dropped in */
  display:grid;place-items:center;
  background:repeating-linear-gradient(-45deg,transparent 0 16px,var(--hair) 16px 17px);
}
.ph-num{
  font-size:clamp(3.5rem,8vw,6rem);font-weight:700;
  letter-spacing:var(--ls-display);color:rgba(21,21,21,.22);line-height:1;
}
.ph-num sup{font-size:.35em;vertical-align:super}

/* ---------------------------- ABOUT ---------------------------- */
.about-grid{display:grid;gap:clamp(28px,5vw,72px)}
@media (min-width:860px){
  .about-grid{grid-template-columns:7fr 4fr;align-items:start}
}
.about-copy p{max-width:58ch}
.about-copy p+p{margin-top:1.2em}
.about-facts{display:grid;gap:18px;align-content:start}
.about-fact{border-top:1px solid var(--rule);padding-top:14px}
.about-fact dt{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.55;margin-bottom:6px}
.about-fact dd{font-size:.9375rem;line-height:1.45}
.about-photo{
  border:1px solid rgba(21,21,21,.12);border-radius:4px;overflow:hidden;
}
.about-photo img{aspect-ratio:3/4;object-fit:cover;width:100%;
  filter:grayscale(1) contrast(1.02); /* keeps the ink-on-paper palette */
}
.about-photo image-slot::part(image){
  filter:grayscale(1) contrast(1.02); /* keeps the ink-on-paper palette */
}

/* -------------------------- EXPERIENCE ------------------------- */
.exp-intro{max-width:52ch;margin-bottom:clamp(24px,4vw,44px)}
.exp-row{
  display:grid;gap:4px;
  padding-block:clamp(18px,2.6vw,26px);
  border-top:1px solid var(--rule);
}
.exp-row:last-of-type{border-bottom:1px solid var(--rule)}
@media (min-width:680px){
  .exp-row{grid-template-columns:1.2fr 1.2fr .8fr;align-items:baseline;gap:4px 16px}
  .exp-date{text-align:right}
  .exp-note{grid-column:2 / -1}
}
.exp-note{font-size:.875rem;opacity:.7;max-width:60ch;margin-top:6px;line-height:1.5}
.exp-name{font-weight:700;letter-spacing:var(--ls-small)}
.exp-role{opacity:.85;font-size:.9375rem}
.exp-date{opacity:.65;font-size:.875rem;letter-spacing:var(--ls-small);font-variant-numeric:tabular-nums}

/* --------------------------- SERVICES -------------------------- */
.svc-intro{max-width:56ch;margin-bottom:clamp(28px,5vw,56px)}
.svc-grid{display:grid;gap:0}
@media (min-width:768px){.svc-grid{grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,72px)}}
.svc{
  padding-block:clamp(24px,3.5vw,36px);
  border-top:1px solid var(--rule);
}
.svc-icon{width:28px;height:28px;margin-bottom:16px;color:var(--ink)}
.svc h3{font-size:1.25rem;font-weight:700;letter-spacing:var(--ls-small);margin-bottom:10px}
.svc p{font-size:.9375rem;opacity:.85;max-width:44ch}

.kit{margin-top:clamp(40px,6vw,64px);border-top:1px solid var(--rule);padding-top:clamp(24px,3.5vw,36px)}
.kit-head{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.55;margin-bottom:20px}
.kit-grid{display:grid;gap:20px}
@media (min-width:680px){.kit-grid{grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}}
.kit-col dt{font-weight:700;letter-spacing:var(--ls-small);margin-bottom:8px}
.kit-col dd{font-size:.9375rem;opacity:.8;line-height:1.55}

/* ---------------------------- FOOTER ---------------------------- */
footer{border-top:1px solid var(--rule);overflow:hidden}
.marquee{
  padding-block:clamp(28px,4vw,44px);
  border-bottom:1px solid var(--rule);
  overflow:hidden;white-space:nowrap;
}
.marquee-track{
  display:inline-flex;align-items:baseline;
  font-size:clamp(2.4rem,6.5vw,5.5rem);font-weight:700;
  letter-spacing:var(--ls-display);line-height:1;
  animation:slide 26s linear infinite;will-change:transform;
}
.mgroup{display:inline-flex;gap:.6em;align-items:baseline;padding-right:.6em}
.marquee-track .ast{font-size:.55em}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .thumb>*{transition:none}
  .reveal{transition:none!important}
}

.footer-grid{
  display:grid;gap:clamp(32px,5vw,56px);
  padding-block:clamp(48px,7vw,88px);
}
@media (min-width:860px){
  .footer-grid{grid-template-columns:7fr 4fr;align-items:start}
  .status-card{justify-self:end;width:100%;max-width:360px} /* top right of the footer */
}
.footer-email{
  display:inline-block;font-size:clamp(1.375rem,3.2vw,2.25rem);
  font-weight:700;letter-spacing:var(--ls-h2);margin-bottom:28px;
  white-space:nowrap;
}
@media (max-width:520px){.footer-email{white-space:normal;overflow-wrap:anywhere}}
.footer-links{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:.9375rem}
.footer-links .up{font-weight:700}

.status-card{
  border:1px solid var(--rule);border-radius:4px;
  background:rgba(21,21,21,.04);
  padding:clamp(20px,3vw,28px);
}
.status-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.status-dot{
  width:9px;height:9px;border-radius:50%;background:var(--ink);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.status-dot{animation:none}}
.status-label{white-space:nowrap;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.status-card p{font-size:.9375rem}
.status-meta{margin-top:14px;font-size:.8125rem;opacity:.6;letter-spacing:var(--ls-small)}

.footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;
  padding-block:22px;border-top:1px solid var(--rule);
  font-size:.8125rem;letter-spacing:var(--ls-small);
}

/* ------------------------- CURSOR BLOB -------------------------
   White circle on mix-blend-difference, follows the cursor over
   project images only. Disabled on touch / coarse pointers.
   --------------------------------------------------------------- */
.blob{
  position:fixed;top:0;left:0;z-index:60;pointer-events:none;
  width:96px;height:96px;border-radius:50%;
  background:#fff;mix-blend-mode:difference;
  opacity:0;scale:0;
  transition:scale .35s cubic-bezier(.2,.8,.2,1),opacity .35s ease;
}
.blob.on{opacity:1;scale:1}
@media (hover:none),(pointer:coarse){.blob{display:none}}

/* ------------------------ PROJECT PAGES -------------------------- */
.back-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.875rem;font-weight:700;letter-spacing:var(--ls-small);
  margin-bottom:clamp(20px,4vh,40px);
}
.back-link .arrow{display:inline-block;transform:translateX(0);transition:transform .2s ease}
.back-link:hover .arrow{transform:translateX(-3px)}

.proj-hero{padding-top:calc(58px + clamp(28px,5vh,56px));padding-bottom:clamp(28px,4vh,48px)}
.proj-index{font-size:.9375rem;font-weight:700;opacity:.55;letter-spacing:var(--ls-small);display:block;margin-bottom:10px}
.proj-hero h1{font-size:var(--fs-h2);font-weight:700;letter-spacing:var(--ls-h2);line-height:1.02}
.proj-desc{max-width:56ch;margin-top:14px;font-size:clamp(1.0625rem,1.6vw,1.25rem);opacity:.85}

.proj-cover{
  aspect-ratio:16/9;border:1px solid rgba(21,21,21,.12);border-radius:4px;overflow:hidden;
  margin-bottom:clamp(48px,7vw,88px);
}

.proj-section{padding-block:clamp(40px,6vw,72px);border-top:1px solid var(--rule)}
.proj-section h2{font-size:var(--fs-h3);margin-bottom:16px}
.proj-section p{max-width:60ch;opacity:.85}

.gallery{display:grid;grid-template-columns:1fr;gap:clamp(12px,2vw,20px);margin-top:24px}
@media (min-width:700px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery image-slot{aspect-ratio:4/3;width:100%;height:auto}

.video-slot{
  aspect-ratio:16/9;border:1px dashed rgba(21,21,21,.3);border-radius:4px;
  display:grid;place-items:center;margin-top:24px;background:rgba(21,21,21,.03);
  font-size:.875rem;opacity:.6;text-align:center;padding:20px;
}

/* --- Embeddable video field --- */
.video-embed{margin-top:24px}
.video-frame{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border:1px solid rgba(21,21,21,.12);border-radius:4px;background:#151515;
}
.video-frame iframe,.video-frame video{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
.video-actions{display:flex;gap:18px;margin-top:12px}
.video-actions button{
  background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:.8125rem;font-weight:700;letter-spacing:var(--ls-small);
  color:var(--ink);opacity:.6;transition:opacity .2s ease;
}
.video-actions button:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}

.video-add{
  border:1px dashed rgba(21,21,21,.3);border-radius:4px;
  background:rgba(21,21,21,.03);padding:clamp(20px,3vw,32px);
}
.video-add label{
  display:block;font-size:.8125rem;font-weight:700;letter-spacing:var(--ls-small);
  margin-bottom:14px;
}
.video-add-row{display:flex;gap:10px;flex-wrap:wrap}
.video-add input{
  flex:1 1 260px;min-width:0;
  font-family:inherit;font-size:.9375rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:4px;
  padding:11px 13px;
}
.video-add input::placeholder{opacity:.5}
.video-add button{
  font-family:inherit;font-size:.875rem;font-weight:700;letter-spacing:var(--ls-small);
  color:var(--ink);background:var(--pill);border:none;border-radius:4px;
  padding:11px 20px;cursor:pointer;transition:background .25s ease;
}
.video-add button:hover{background:rgba(21,21,21,.14)}
.video-hint{margin-top:12px;font-size:.8125rem;opacity:.55}

.proj-facts{display:grid;gap:18px;margin-top:clamp(24px,3vw,36px)}
@media (min-width:680px){.proj-facts{grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}}
.proj-fact{border-top:1px solid var(--rule);padding-top:14px}
.proj-fact dt{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.55;margin-bottom:6px}
.proj-fact dd{font-size:.9375rem;line-height:1.45}

.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.chip{
  padding:8px 14px;border:1px solid var(--rule);border-radius:4px;
  font-size:.8125rem;font-weight:500;letter-spacing:var(--ls-small);opacity:.85;
}

/* -------------------------- REVEALS ---------------------------- */
.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease;
  transition-delay:var(--d,0s);
}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
}

/* -------------------------- WORK FILTER -------------------------- */
.work-filter{display:flex;flex-wrap:wrap;gap:6px}
#work .section-head{flex-wrap:wrap;align-items:flex-end}
.work-filter button{
  font-family:inherit;font-size:.875rem;font-weight:500;letter-spacing:var(--ls-small);
  color:var(--ink);background:none;border:1px solid var(--rule);border-radius:999px;
  padding:7px 14px;cursor:pointer;white-space:nowrap;transition:background .2s ease,color .2s ease;
}
.work-filter button:hover{border-color:var(--ink)}
.work-filter button[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.projects-grid .project[hidden]{display:none}

.project-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.project-top .project-index{margin:0}
.project-tag{
  font-size:.75rem;font-weight:500;letter-spacing:var(--ls-small);line-height:1;
  color:var(--ink);border:1px solid var(--rule);border-radius:999px;padding:4px 9px;white-space:nowrap;
}