/* ==========================================================================
   Nicolò Terranova — Digital Compositor
   Shared stylesheet — design system confirmed from homepage mockup
   ========================================================================== */

/* Fonts are self-hosted from assets/fonts/ (SIL Open Font License 1.1 —
   see assets/fonts/README.md). Serving them from our own domain removes a
   render-blocking round trip to Google's CDN and means no visitor data
   reaches a third party just by loading a page.
   Manrope and JetBrains Mono are variable fonts: one file covers the whole
   weight range each. Syne is only ever used at 700, so only that cut ships. */
@font-face{
  font-family:'Manrope'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Manrope'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Syne'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../assets/fonts/syne-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Syne'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../assets/fonts/syne-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url('../assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url('../assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --bg:#F4F3F0;
  --surface:#FFFFFF;
  --surface-2:#FAF9F6;
  --text:#15171A;
  --text-muted:#5B6067;
  --border:#E2E0DA;
  --accent:#0E8C86;
  --accent-ink:#FFFFFF;
  --ember:#C4632A;
  --danger:#B3432E;
  --shadow:0 1px 2px rgba(21,23,26,.06), 0 10px 28px rgba(21,23,26,.06);
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A0B0D;
    --surface:#131518;
    --surface-2:#191C20;
    --text:#EDEFF1;
    --text-muted:#8B929A;
    --border:#24272B;
    --accent:#2FD1C0;
    --accent-ink:#04211E;
    --ember:#FF8A4C;
    --danger:#FF6B54;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --bg:#0A0B0D;
  --surface:#131518;
  --surface-2:#191C20;
  --text:#EDEFF1;
  --text-muted:#8B929A;
  --border:#24272B;
  --accent:#2FD1C0;
  --accent-ink:#04211E;
  --ember:#FF8A4C;
  --danger:#FF6B54;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

/* Respect reduced-motion: shrink transitions/animations to near-instant
   rather than a jarring hard cut, per system accessibility preference. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration:0.01ms !important;
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Manrope', system-ui, -apple-system, sans-serif;
  font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent); color:var(--accent-ink); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.mono{ font-family:'JetBrains Mono', ui-monospace, monospace; }
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); font-weight:500; display:inline-block;
}
h1,h2,h3{ font-family:'Syne', sans-serif; font-weight:700; text-wrap:balance; margin:0; letter-spacing:-0.01em; }

.wrap{ max-width:1080px; margin:0 auto; padding:0 28px; }
.wrap-narrow{ max-width:720px; margin:0 auto; padding:0 28px; }

/* ---------------- header / nav ---------------- */
header{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:20px 0; }
.brand{ font-family:'Syne',sans-serif; font-weight:700; font-size:16px; }
nav.links{ display:flex; gap:30px; align-items:center; }
nav.links a{ font-size:14px; color:var(--text-muted); position:relative; padding-bottom:3px; transition:color .15s; }
nav.links a:hover{ color:var(--text); }
nav.links a.active{ color:var(--text); }
nav.links a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--accent); }

.nav-right{ display:flex; align-items:center; gap:10px; }
.theme-toggle, .menu-toggle{
  width:32px; height:32px; border:1px solid var(--border); border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--text-muted); cursor:pointer;
  background:none;
}
.menu-toggle{ display:none; }
@media (max-width:720px){
  nav.links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--bg); border-bottom:1px solid var(--border);
    padding:6px 28px 14px;
    /* Enter/exit the same way: fade + slight rise, never an abrupt display cut. */
    opacity:0; transform:translateY(-6px); pointer-events:none;
    transition:opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
  }
  nav.links.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  nav.links a{ padding:10px 0; }
  nav.links a.active::after{ display:none; }
  nav.links a.active{ color:var(--accent); }
  .menu-toggle{ display:flex; }
}

.loc-chip{
  display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace;
  font-size:12.5px; color:var(--text-muted);
}
.loc-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); }

/* ---------------- buttons ---------------- */
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  font-family:'Manrope',sans-serif; font-weight:600; font-size:14px;
  padding:12px 22px; border-radius:4px; display:inline-flex; align-items:center; gap:8px;
  border:1px solid transparent; cursor:pointer;
  transition:opacity 150ms var(--ease-out), border-color 150ms var(--ease-out), transform 120ms var(--ease-out);
}
.btn.primary{ background:var(--accent); color:var(--accent-ink); }
.btn.primary:hover{ opacity:.88; }
.btn.ghost{ background:transparent; color:var(--text); border-color:var(--border); }
.btn.ghost:hover{ border-color:var(--text-muted); }
.btn:active{ transform:scale(0.97); transition-duration:100ms; }
.btn.block{ width:100%; justify-content:center; }

/* ---------------- generic page header ---------------- */
.page-hero{ padding:64px 0 44px; border-bottom:1px solid var(--border); }
.page-hero h1{ font-size:clamp(38px,6vw,58px); line-height:.98; margin:14px 0 16px; }
.page-hero .dek{ font-size:17.5px; color:var(--text-muted); max-width:56ch; }

/* ---------------- hero (home) ---------------- */
.hero{ padding:88px 0 64px; }
.hero h1{ font-size:clamp(42px,7vw,76px); line-height:0.96; margin:16px 0 22px; }
.hero .position{ font-size:19px; color:var(--text); max-width:56ch; margin-bottom:14px; }
.hero .position b{ font-weight:700; }
.hero p.detail{ font-size:15.5px; color:var(--text-muted); max-width:62ch; margin-bottom:30px; }
.hero p.detail b{ color:var(--text); font-weight:600; }
.hero .cta-row{ margin-bottom:26px; }

/* ---------------- duality section ---------------- */
.duality{ padding:56px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.duality .eyebrow{ margin-bottom:10px; }
.duality h2{ font-size:clamp(24px,3.4vw,32px); max-width:26ch; margin-bottom:36px; }
.duality-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
@media (max-width:720px){ .duality-grid{ grid-template-columns:1fr; } }
.duality-grid .cell{ background:var(--surface); padding:30px 28px; }
.duality-grid .cell .tag{ font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; display:inline-block; }
.duality-grid .cell:nth-child(1) .tag{ color:var(--ember); }
.duality-grid .cell:nth-child(2) .tag{ color:var(--accent); }
.duality-grid .cell h3{ font-size:20px; margin-bottom:10px; }
.duality-grid .cell p{ color:var(--text-muted); font-size:14.5px; margin:0; }

/* ---------------- credits grid ---------------- */
.credits{ padding:64px 0 90px; }
.credits-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:26px; flex-wrap:wrap; gap:10px; }
.credits-head .eyebrow{ margin:0; }
.credits-head .link{ font-size:13px; color:var(--text-muted); border-bottom:1px solid var(--border); }
.credit-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.credit{
  position:relative; border-radius:8px; overflow:hidden; aspect-ratio:2/3;
  background:var(--surface-2); border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.credit img{ width:100%; height:100%; object-fit:cover; }
.credit .overlay{
  position:absolute; left:0; right:0; bottom:0; padding:10px 12px 11px;
  background:linear-gradient(to top, rgba(0,0,0,.86) 10%, rgba(0,0,0,.55) 55%, transparent 100%);
  /* Visible by default — this is the touch/coarse-pointer baseline, so a tap
     doesn't get stuck showing an overlay meant for mouse hover. */
  opacity:1;
}
@media (hover: hover) and (pointer: fine){
  .credit .overlay{ opacity:0; transition:opacity 180ms var(--ease-out); }
  .credit:hover .overlay, .credit:focus-within .overlay{ opacity:1; }
}
.credit .role{ font-family:'JetBrains Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:#C7CCD1; margin-bottom:3px; display:flex; align-items:center; gap:5px; }
.credit .role .lead-dot{ width:5px; height:5px; border-radius:50%; background:var(--ember); flex:none; }
.credit .title{ font-family:'Syne',sans-serif; font-weight:700; font-size:13.5px; color:#fff; line-height:1.15; }
.credit .year{ font-size:11px; color:#9AA1A8; margin-top:2px; }
.credit-attrib{ margin-top:16px; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-muted); }
.credit.skeleton{ background:linear-gradient(100deg, var(--surface-2) 30%, var(--border) 45%, var(--surface-2) 60%); background-size:250% 100%; animation:shimmer 1.6s infinite; }
@media (prefers-reduced-motion: reduce){ .credit.skeleton{ animation:none; } }
@keyframes shimmer{ from{ background-position:150% 0; } to{ background-position:-50% 0; } }

/* ---------------- long-form article (About) ---------------- */
article.story{ padding:52px 0 90px; }
article.story section{ max-width:640px; margin:0 0 52px; }
article.story section:last-child{ margin-bottom:0; }
article.story h2{ font-size:22px; margin-bottom:16px; }
article.story p{ color:var(--text); font-size:16px; margin:0 0 16px; max-width:62ch; }
article.story p.muted{ color:var(--text-muted); }
article.story .rule{ border:none; border-top:1px solid var(--border); margin:52px 0; max-width:640px; }
.tool-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.tool-tag{ font-family:'JetBrains Mono',monospace; font-size:12px; border:1px solid var(--border); border-radius:20px; padding:5px 12px; color:var(--text-muted); }

/* ---------------- CV ---------------- */
.cv-block{ padding:52px 0 90px; }
.cv-section{ max-width:760px; margin:0 auto 48px; }
.cv-section h2{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; font-family:'JetBrains Mono',monospace; color:var(--text-muted); font-weight:500; margin-bottom:18px; }
.cv-entry{ padding:18px 0; border-top:1px solid var(--border); display:grid; grid-template-columns:1fr auto; gap:6px 20px; }
.cv-section .cv-entry:last-child{ }
.cv-entry .role-line{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.cv-entry .studio{ font-family:'Syne',sans-serif; font-weight:700; font-size:16.5px; }
.cv-entry .role{ font-size:13.5px; color:var(--accent); font-family:'JetBrains Mono',monospace; }
.cv-entry .place{ font-size:13px; color:var(--text-muted); }
.cv-entry .dates{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--text-muted); white-space:nowrap; }
.cv-entry .desc{ grid-column:1/-1; color:var(--text-muted); font-size:14.5px; margin-top:4px; max-width:64ch; }
.cv-entry .credits-line{ grid-column:1/-1; font-size:13px; color:var(--text); margin-top:4px; font-style:italic; }
.cv-skills-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:24px; }
.cv-skills-grid .col h3{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; font-family:'JetBrains Mono',monospace; color:var(--text-muted); margin-bottom:10px; font-weight:500; }
.cv-skills-grid ul{ list-style:none; margin:0; padding:0; }
.cv-skills-grid li{ font-size:14.5px; padding:5px 0; border-top:1px solid var(--border); }
.cv-skills-grid li:first-child{ border-top:none; }
.edu-entry{ padding:14px 0; border-top:1px solid var(--border); }
.edu-entry:first-child{ border-top:none; }
.edu-entry .years{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--text-muted); }
.edu-entry .school{ font-family:'Syne',sans-serif; font-weight:700; font-size:15.5px; margin:2px 0; }
.edu-entry .degree{ font-size:14px; color:var(--text-muted); }

/* ---------------- Reel gate ---------------- */
.reel-gate{ padding:52px 0 90px; }
.gate-card{
  max-width:640px; border:1px solid var(--border); border-radius:10px; background:var(--surface);
  padding:34px 32px; box-shadow:var(--shadow);
}
.gate-card h2{ font-size:24px; margin-bottom:12px; }
.gate-card p{ color:var(--text-muted); font-size:15px; margin:0 0 22px; max-width:56ch; }
.gate-card .rule{ border:none; border-top:1px solid var(--border); margin:22px 0; }
.field-label{ font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); display:block; margin-bottom:8px; }
.field-row{ display:flex; gap:10px; flex-wrap:wrap; }
input[type="text"], input[type="email"], select, textarea{
  font-family:'Manrope',sans-serif; font-size:14.5px; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border); border-radius:4px;
  padding:11px 13px; width:100%;
}
input[type="text"]:focus, input[type="email"]:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--accent);
}
.gate-input{ flex:1; min-width:180px; }
.gate-msg{ font-family:'JetBrains Mono',monospace; font-size:13px; margin-top:14px; display:none; }
.gate-msg.show{ display:block; }
.gate-msg.err{ color:var(--danger); }
.gate-msg.ok{ color:var(--accent); }
.request-link{ font-size:13.5px; color:var(--text-muted); border-bottom:1px solid var(--border); }
.request-link:hover{ color:var(--text); }

/* ---------------- Contact form ---------------- */
.contact-block{ padding:52px 0 90px; }
.contact-grid{ display:grid; grid-template-columns:1fr; gap:20px; max-width:560px; }
.form-group{ display:flex; flex-direction:column; gap:8px; }
textarea{ resize:vertical; min-height:150px; font-family:'Manrope',sans-serif; }
.contact-note{ margin-top:26px; font-size:14px; color:var(--text-muted); max-width:56ch; }
.contact-note a{ color:var(--text); border-bottom:1px solid var(--border); }

/* ---------------- notice box (unlisted/dev note etc.) ---------------- */
.notice{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-muted);
  border:1px dashed var(--border); border-radius:8px; padding:12px 16px; max-width:640px;
}

/* ---------------- footer ---------------- */
footer{ border-top:1px solid var(--border); padding:26px 0; }
.foot-row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; color:var(--text-muted); }
.foot-row a{ border-bottom:1px solid transparent; }
.foot-row a:hover{ border-color:var(--text-muted); }
.foot-links{ display:flex; gap:18px; }

/* ---------------- print ----------------
   Someone who opens cv.html and hits Cmd/Ctrl+P should get the CV, not a
   screenshot of a website: no nav, no buttons, no dark background eating a
   toner cartridge. Contact links stay and print their URL after the label,
   because a printed page can't be clicked. */
@media print{
  /* Print always uses the light palette, whatever the screen was set to. */
  :root, :root[data-theme="dark"]{
    --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#FFFFFF;
    --text:#000000; --text-muted:#3A3F45; --border:#BBBBBB;
    --accent:#1A1C1F; --accent-ink:#FFFFFF; --shadow:none;
  }
  @page{ margin:14mm; }
  body{ background:#fff; color:#000; font-size:10.5pt; line-height:1.45; }
  header, footer nav, .cta-row, .theme-toggle, .menu-toggle, nav.links{ display:none !important; }
  .wrap, .wrap-narrow{ max-width:none; padding:0; }
  .page-hero{ padding:0 0 10pt; }
  .eyebrow{ color:#3A3F45; }

  /* A role split across a page break is the one thing a printed CV must not do. */
  .cv-entry, .edu-entry, .cv-skills-grid .col{ break-inside:avoid; page-break-inside:avoid; }
  .cv-section h2{ break-after:avoid; page-break-after:avoid; }
  .cv-entry .role{ color:#3A3F45; }
  .cv-block{ padding:0; }
  .tool-tag{ border-color:#BBBBBB; }

  a{ color:#000; text-decoration:none; }
  footer{ border-top:1px solid #BBBBBB; padding-top:8pt; }
  .foot-links a[href^="http"]::after,
  .foot-links a[href^="mailto"]::after{ content:" " attr(href); font-size:9pt; color:#3A3F45; }
}

/* ---------------- hero stat strip ----------------
   Three numbers a recruiter can check against the CV in ten seconds. The
   figure carries the weight in Syne; the label sits underneath in mono, at
   the size the rest of the site uses for labels. Hairline separators rather
   than boxes, so it reads as a line of the hero and not as a widget bolted
   onto it. It wraps to two rows on a phone instead of shrinking the digits. */
.stat-strip{
  display:flex; flex-wrap:wrap; gap:0 34px;
  margin:0 0 26px; padding:0; list-style:none;
}
.stat-strip li{
  padding:0 34px 0 0; border-right:1px solid var(--border);
}
.stat-strip li:last-child{ border-right:none; padding-right:0; }
.stat-strip .figure{
  display:block; font-family:'Syne',sans-serif; font-weight:700;
  font-size:27px; line-height:1.1; letter-spacing:-0.01em;
}
.stat-strip .label{
  display:block; font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted);
  margin-top:5px;
}
@media (max-width:520px){
  .stat-strip{ gap:18px 24px; }
  .stat-strip li{ padding-right:24px; }
}