/* ferri.design — shared styles */
:root{
  --ink:#111111;
  --muted:#6b6b6b;
  --bg:#ffffff;
  --line:#e6e6e6;
  --radius-card:28px;
  --gutter:clamp(16px,5vw,72px);
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit}
img,video{display:block;max-width:100%}

/* header */
.site-header{display:flex;align-items:center;justify-content:space-between;padding:40px var(--gutter) 0}
.logo{font-size:clamp(22px,2.6vw,30px);font-weight:400;letter-spacing:-.01em;text-decoration:none}
.nav{display:flex;gap:clamp(20px,4vw,48px)}
.nav a{font-size:14px;text-decoration:none}
.nav a:hover,.logo:hover{text-decoration:underline;text-underline-offset:4px}

/* home: project cards */
.projects{display:flex;flex-direction:column;gap:clamp(32px,6vw,76px);max-width:820px;margin:clamp(48px,8vw,96px) auto 120px;padding:0 var(--gutter)}
.card{position:relative;display:grid;place-items:center;aspect-ratio:754/370;border-radius:var(--radius-card);overflow:hidden;text-decoration:none;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.14)}
.card:focus-visible{outline:3px solid #2b6cff;outline-offset:4px}
.card .mark{position:relative;z-index:1;transition:opacity .4s}
/* optional looping recording: fades in on hover, wordmark fades out */
.card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.card:hover video,.card:focus-visible video{opacity:1}
.card:has(video):hover .mark{opacity:0}

.card--classy{background:#404043}
.card--classy .mark{width:clamp(130px,32%,250px);height:auto}
.card--bloom{background:#3b161d}
.card--bloom .mark{font-family:"Bodoni Moda",serif;font-style:italic;font-weight:400;font-size:clamp(64px,16vw,150px);color:#9fe1f3;letter-spacing:-.04em;line-height:1}
.card--third{background:#8caf74}
.card--third .mark{font-family:"Jost",sans-serif;font-weight:400;font-size:clamp(28px,7vw,62px);color:#fff;letter-spacing:.01em}

.site-footer{padding:0 var(--gutter) 48px;color:var(--muted);font-size:13px;text-align:center}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}