/* ===========================================================================
   Stefano Baldan — site styles
   Palette and type lifted from the Duono plugin (DuonoStyle.h) so the whole
   public image stays visually of-a-piece. Edit the tokens below to retheme.
   =========================================================================== */

@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/Outfit-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand tokens (from Duono) */
  --bg:            #141210; /* page — a touch darker than the panel, for depth */
  --panel:         #1e1c1a; /* DuonoStyle PanelBg */
  --panel-2:       #25221e;
  --border:        #2a2520;
  --track:         #252118; /* DuonoStyle Track */
  --shadow:        #0d0c0b; /* DuonoStyle EdgeShadow */
  --bevel:         #3a3530; /* DuonoStyle Bevel */
  --accent:        #c8b89a; /* DuonoStyle Accent — sand/cream */
  --accent-bright: #e4d6ba; /* hover / headings */
  --text:          #cdbfae; /* body */
  --muted:         #a09080; /* DuonoStyle Label — secondary text */

  --maxw: 980px;
  --radius: 14px;
  --gap: clamp(1.25rem, 4vw, 3rem);

  font-size: 17px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 64px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* warm radial wash, echoing the plugin's lit-from-above panel */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(200, 184, 154, 0.06), transparent 70%),
    radial-gradient(900px 600px at 100% 0%, rgba(58, 53, 48, 0.18), transparent 60%);
}

/* ---- Layout primitives -------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
/* The scroller widens its band so the header, footer and panel content all
   share one cap; deep pages keep the narrower document measure. */
body:not(.page-light) { --maxw: 1440px; }
section { padding: clamp(2.5rem, 7vw, 5rem) 0; }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); border: 0; margin: 0; }

/* ---- Typography --------------------------------------------------------- */
h1, h2, h3 { font-weight: 300; line-height: 1.15; color: var(--accent-bright); margin: 0 0 0.6em; letter-spacing: 0.005em; }
h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h3 { font-size: 1.2rem; color: var(--accent); }
p { margin: 0 0 1.1em; }
.lead { font-size: clamp(1.15rem, 2.4vw, 1.4rem); color: var(--text); }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
a { color: var(--accent); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--accent-bright); }
.eyebrow { text-transform: uppercase; letter-spacing: 0.28em; font-size: 0.72rem; color: var(--muted); margin-bottom: 1rem; }

/* ---- Header / nav ------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.wordmark { color: var(--accent-bright); font-size: 1.15rem; letter-spacing: 0.06em; }
.wordmark:hover { color: var(--accent-bright); }
.nav { display: flex; gap: clamp(1rem, 3vw, 2rem); align-items: center; }
.nav a { color: var(--muted); font-size: 0.95rem; letter-spacing: 0.03em; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); }

/* ---- Hero --------------------------------------------------------------- */
.hero { padding: clamp(3.5rem, 11vw, 8rem) 0 clamp(2.5rem, 7vw, 5rem); }
.hero h1 { margin-bottom: 0.3em; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  padding: 0.8em 1.7em;
  border-radius: 999px;
  font-size: 1rem;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-primary {
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  color: #1a1714;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 24px rgba(0,0,0,0.45);
}
.btn-primary:hover { color: #1a1714; box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 12px 30px rgba(0,0,0,0.55); }
.btn-ghost { border-color: var(--border); color: var(--accent); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin-top: 1.8rem; }

/* ---- Plugin hero shot --------------------------------------------------- */
.plugin-shot { margin-top: 2.6rem; }
.plugin-shot img { width: 100%; height: auto; filter: drop-shadow(0 20px 44px rgba(0,0,0,0.55)); }

/* ---- Cards (section grid) ----------------------------------------------- */
.grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.card {
  display: block;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border);
  border-top-color: var(--bevel);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform 0.15s ease, border-color 0.2s ease;
}
a.card:hover { border-color: var(--accent); }
.card h3 { margin-bottom: 0.35em; }
.card p { margin: 0; color: var(--muted); font-size: 0.96rem; }
.card .tag { display: inline-block; margin-top: 1rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.card.is-soon { opacity: 0.62; }
.card.is-soon:hover { transform: none; border-color: var(--border); }

/* ---- Feature rows (claims) ---------------------------------------------- */
.features { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.feature { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; }
.feature h3 { color: var(--accent-bright); }
.feature p { margin: 0; color: var(--muted); }

/* ---- Figure / proof ----------------------------------------------------- */
figure { margin: 2rem 0 0; }
figure img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); background: #fff; box-shadow: 0 14px 40px rgba(0,0,0,0.45); }
figcaption { margin-top: 0.9rem; color: var(--muted); font-size: 0.92rem; }

/* ---- Spec list ---------------------------------------------------------- */
.specs { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.specs li { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 0.8rem 1rem; }
.specs b { color: var(--accent); font-weight: 300; display: block; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.15rem; }

/* ---- Footer ------------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--border); padding: 2.5rem 0; color: var(--muted); font-size: 0.9rem; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--accent); }

/* ---- CV ----------------------------------------------------------------- */
.cv-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin: 1.3rem 0 0; color: var(--muted); font-size: 0.95rem; }
.cv-meta span b { color: var(--accent); font-weight: 300; }
.cv-section { margin-top: clamp(2rem, 5vw, 3.2rem); }
.cv-section > h2 { padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); }
.cv-entry { padding: 1.3rem 0; border-bottom: 1px solid var(--border); }
.cv-entry:last-child { border-bottom: 0; }
.cv-entry .when { color: var(--muted); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; }
.cv-entry h3 { margin: 0.35rem 0 0.15rem; color: var(--accent-bright); }
.cv-entry .where { display: inline-block; margin-bottom: 0.5rem; font-size: 0.92rem; }
.cv-entry ul { margin: 0.5rem 0 0; padding-left: 1.1rem; color: var(--muted); }
.cv-entry ul li { margin: 0.28rem 0; }
.cv-entry .detail { color: var(--muted); font-size: 0.94rem; margin: 0.15rem 0; }
.cv-entry .detail b { color: var(--text); font-weight: 300; }
.cv-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }
.cv-list li { color: var(--muted); }
.cv-list b { color: var(--text); font-weight: 300; }
.cv-prose { color: var(--muted); max-width: 70ch; }

/* =========================================================================
   Single-page parallax scroller (home page only — deep pages use the
   primitives above). Each .panel is a full-height section with its own
   fixed background photo and a dark scrim that guarantees text contrast.
   ========================================================================= */

/* Skip link — visible only when focused (keyboard users) */
.skip-link {
  position: absolute; left: 0.75rem; top: -3rem; z-index: 50;
  background: var(--accent-bright); color: #1a1714;
  padding: 0.6rem 1rem; border-radius: 0 0 10px 10px;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; color: #1a1714; }

.panel {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(5rem, 12vh, 8rem) 0 clamp(3.5rem, 8vh, 6rem);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; /* the parallax: bg stays put as content scrolls */
  background-color: var(--bg);  /* fallback while the photo loads */
}

/* Dark scrim for legibility — heavier on the left where the text sits.
   Keeps body text well above the WCAG 2.2 AA 4.5:1 ratio over any photo. */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(13,12,11,0.94) 0%, rgba(13,12,11,0.82) 42%, rgba(13,12,11,0.52) 100%),
    linear-gradient(to top, rgba(13,12,11,0.85), transparent 38%);
}

.panel-inner { position: relative; z-index: 1; max-width: 62ch; }
.panel-inner .lead { color: var(--text); }
.panel h1, .panel h2 { text-shadow: 0 2px 18px rgba(0,0,0,0.6); }

/* Per-section backgrounds (swap the URL to retheme a section) */
.panel--home     { background-image: url("/assets/img/bg-hero.jpg");     background-position: 72% 0%; }
.panel--music    { background-image: url("/assets/img/bg-music.jpg");    background-position: 35% 0%; }
/* Face shots (home, music) anchor to the top so the face stays in frame; the
   faceless gear/desk shots read better centred vertically. */
.panel--plugins  { background-image: url("/assets/img/bg-plugins.jpg");  background-position: 50% 50%; }
.panel--research { background-image: url("/assets/img/bg-research.jpg"); background-position: 50% 50%; }
.panel--about    { background-image: url("/assets/img/bg-about.jpg");    background-position: 60% 30%; }

/* Content sits in a column that hugs the dark side of each photo (where the
   scrim is heaviest). The band is capped and centred, so on very wide screens
   the columns stay in a comfortable middle zone instead of gluing to the
   viewport edges — while the photos keep bleeding full-width. */
.panel .wrap { width: 100%; padding: 0; }
/* The content column hugs the dark side of each photo. Its inset is responsive
   below the --maxw band, then locks to the band edge above it — so on very wide
   screens the column stays in a centred band rather than gluing to the edge,
   while the photo keeps bleeding full-width. */
.panel .panel-inner {
  max-width: 56ch;
  margin-left: max(clamp(1.5rem, 7vw, 7.5rem), calc((100% - var(--maxw)) / 2 + 7.5rem));
  margin-right: 1.5rem;
}

/* Outfit pushed to an editorial display scale — no new face, just size. */
.panel h1 { font-size: clamp(2.7rem, 8.5vw, 6rem); letter-spacing: -0.02em; line-height: 1.0; }
.panel h2 { font-size: clamp(2rem, 5.2vw, 3.6rem); letter-spacing: -0.015em; line-height: 1.05; }

/* Signature — sound made visible. The hero clip draws itself once on load
   (one orchestrated moment); the section seams are quiet static echoes. */
.hero-wave {
  display: block; width: min(560px, 100%); height: auto;
  margin: 0.7rem 0 0.3rem; color: var(--accent);
  filter: drop-shadow(0 1px 8px rgba(200, 184, 154, 0.28));
}
.hero-wave path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: hero-wave-draw 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.35s forwards;
}
@keyframes hero-wave-draw { to { stroke-dashoffset: 0; } }

/* The section seam is cut along the waveform itself: each panel below the hero
   is masked so its top edge is the wave, and pulled up by the band height so the
   troughs reveal the photo of the panel above — the two backgrounds meet along
   the wave instead of a hard horizontal line. The mask is the same wave path as
   the hairline below, filled white from the curve down (white = kept in both
   alpha- and luminance-mode masking). */
.panel:not(.panel--home) {
  margin-top: -48px;
  --seam-mask:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'><path d='M 0 12 L 8 9.2 L 16 6.8 L 24 5.3 L 32 5 L 40 5.9 L 48 7.9 L 56 10.5 L 64 13.5 L 72 16.1 L 80 18.1 L 88 19 L 96 18.7 L 104 17.2 L 112 14.8 L 120 12 L 120 24 L 0 24 Z' fill='white'/></svg>") repeat-x left top / auto 48px,
    linear-gradient(#fff, #fff) no-repeat left bottom / 100% calc(100% - 47px);
  -webkit-mask: var(--seam-mask);
          mask: var(--seam-mask);
}

/* A thin waveform hairline tracing the seam — the motif made crisp. It sits a
   few px below the masked edge so the full stroke stays inside the kept region
   (the photo) instead of being clipped by the mask it parallels. */
.panel:not(.panel--home)::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 48px;
  z-index: 1; pointer-events: none; opacity: 0.5;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'><path d='M 0 12 L 8 9.2 L 16 6.8 L 24 5.3 L 32 5 L 40 5.9 L 48 7.9 L 56 10.5 L 64 13.5 L 72 16.1 L 80 18.1 L 88 19 L 96 18.7 L 104 17.2 L 112 14.8 L 120 12' fill='none' stroke='%23c8b89a' stroke-width='0.7' stroke-linecap='round'/></svg>") repeat-x 0 3px / auto 48px;
}

/* Alternating sides: even panels (Music, Research) anchor right and mirror
   their scrim. Only above a comfortable width — on mobile every panel stays
   left-aligned, since right-aligned body text is harder to read there. */
@media (min-width: 641px) {
  .panel.align-right .wrap { padding-left: 1.5rem; padding-right: clamp(1.5rem, 7vw, 7.5rem); }
  .panel.align-right .panel-inner {
    margin-left: auto;
    margin-right: max(clamp(1.5rem, 7vw, 7.5rem), calc((100% - var(--maxw)) / 2 + 7.5rem));
    text-align: right;
  }
  .panel.align-right .btn-row { justify-content: flex-end; }
  .panel.align-right::before {
    background:
      linear-gradient(260deg, rgba(13,12,11,0.94) 0%, rgba(13,12,11,0.82) 42%, rgba(13,12,11,0.52) 100%),
      linear-gradient(to top, rgba(13,12,11,0.85), transparent 38%);
  }
}

/* Contact list in the About panel */
.contact-list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 0.7rem; }
.contact-list li { color: var(--text); }
.contact-label {
  display: inline-block; min-width: 6.5rem;
  color: var(--muted); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
}

/* Visible keyboard focus everywhere */
a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* iOS (and small screens) mishandle background-attachment: fixed — pin to scroll
   there to avoid the zoomed/jumpy bug, losing only the parallax depth. */
@media (max-width: 820px) {
  .panel { background-attachment: scroll; }
}

/* Respect users who ask for less motion: no parallax, no smooth scroll, no bob. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panel { background-attachment: scroll; }
  .hero-wave path { animation: none; stroke-dashoffset: 0; }
}

/* =========================================================================
   Light document body — deep pages only (add class="page-light" to <body>).
   The page canvas turns white with dark, warm text; the dark "islands"
   (sticky header, cards, feature panels, spec chips, the buttons) keep their
   dark treatment by restoring the original tokens on themselves. The home
   scroller never gets this class, so it stays fully dark.
   ========================================================================= */
.page-light {
  /* Canvas palette: warm near-black text on white (all ≥ 4.5:1 on #fff). */
  --text:          #1f1b16;
  --muted:         #695c4d;
  --accent:        #795a2c;
  --accent-bright: #241c14;
  background: #ffffff;
  color: var(--text);
}
.page-light::before { display: none; } /* drop the dark radial wash */

/* Dark islands: re-declare the original dark-theme tokens on the components
   themselves, so their inner text stays cream while their dark backgrounds
   (the untouched --panel / --border tokens) remain dark on the white page. */
.page-light .site-head,
.page-light .site-head,
.page-light .btn-primary,
.page-light .btn-ghost {
  --text:          #cdbfae;
  --muted:         #a09080;
  --accent:        #c8b89a;
  --accent-bright: #e4d6ba;
}

/* Content panels (cards, feature boxes, spec chips) are the inverse of the
   dark theme: filled with the brand sand (the old foreground colour), with
   near-black text (the old background colour). */
.page-light .card,
.page-light .feature,
.page-light .specs li {
  background: #c8b89a;            /* sand — was the accent/foreground */
  border: 1px solid #b29c74;
  box-shadow: 0 8px 22px rgba(20, 18, 16, 0.14);
  color: #161310;                /* near-black — was the background */
  --text:          #161310;
  --muted:         #36302a;
  --accent:        #161310;
  --accent-bright: #161310;
}
.page-light a.card:hover { border-color: #161310; }

/* The ghost button relies on the (now light) page behind it, so give it a
   dark fill on light pages to keep it a dark pill like everything else. */
.page-light .btn-ghost {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border-color: var(--bevel);
}
.page-light .btn-ghost:hover { border-color: var(--accent); }

/* The cream accent pill needs no border or beveled rim on white — they were
   only there to lift it off the dark page. Flatten to a clean soft shadow. */
.page-light .btn-primary {
  border: 0;
  box-shadow: 0 6px 16px rgba(20, 18, 16, 0.18);
}
.page-light .btn-primary:hover {
  box-shadow: 0 9px 22px rgba(20, 18, 16, 0.24);
}

/* ---- Responsive nav ----------------------------------------------------- */
@media (max-width: 600px) {
  /* Stack the header: wordmark on top, nav links centered below — keeps the
     home link (the wordmark) available on every page, including deep pages. */
  html { scroll-padding-top: 92px; }
  .site-head .wrap { flex-direction: column; height: auto; gap: 0.3rem; padding-top: 0.55rem; padding-bottom: 0.55rem; }
  .wordmark { font-size: 1.05rem; }
  .nav { gap: 0.4rem 0.85rem; flex-wrap: wrap; justify-content: center; }
  .nav a { font-size: 0.82rem; letter-spacing: 0.02em; }
}