/* Shared by Portfolio and Released Work: section heads and the opener, a colour world of its own with a live waveform background (assets/js/opener.js).
   The colours are variables, so each page only changes a few values. */
.portfolio .pf-wrap { width: min(1240px, 100% - 2 * var(--gutter)); }
.portfolio .pf-wrap h1 { font-size: clamp(3.4rem, 13.5vw, 12rem); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; margin: 0 0 clamp(1.5rem, 3.5vw, 3rem); }
.page-main.portfolio { padding-top: 0; }
.pf-open {
  --o-bg: radial-gradient(ellipse 85% 75% at 50% 28%, #17405b 0%, #0e2638 52%, #0a1824 100%);
  --o-edge: rgb(145 183 216 / 0.18);
  --o-text: radial-gradient(circle at var(--px, 50%) var(--py, 40%), #fff 0%, #EAF3FB 28%, #9CC3E6 78%);
  --o-glow1: rgb(145 183 216 / 0.8); --o-glow2: rgb(120 175 230 / 0.6);
  position: relative; margin-inline: calc(50% - 50vw); padding: clamp(8.5rem, 14vw, 11rem) calc(50vw - 50%) clamp(2rem, 4vw, 3.5rem); background: var(--o-bg); overflow: hidden; isolation: isolate; box-shadow: inset 0 -1px 0 var(--o-edge);
}
.pf-wave { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.pf-open h1 { text-align: center; text-transform: none; background: var(--o-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 0 transparent); transition: filter 450ms ease; cursor: default; }
.pf-open h1:hover { filter: drop-shadow(0 0 12px var(--o-glow1)) drop-shadow(0 0 48px var(--o-glow2)); }
@media (prefers-reduced-motion: reduce) { .pf-open h1 { transition: none; } }

/* Released Work: warm aubergine and rose, amber hot line */
.pf-open--rw {
  --o-bg: radial-gradient(ellipse 85% 75% at 50% 28%, #4a2350 0%, #2c1432 52%, #1a0c1e 100%);
  --o-edge: rgb(214 170 232 / 0.2);
  --o-text: radial-gradient(circle at var(--px, 50%) var(--py, 40%), #fff 0%, #FBEAF2 28%, #E3A9CF 78%);
  --o-glow1: rgb(235 170 215 / 0.8); --o-glow2: rgb(214 130 200 / 0.6);
  min-height: min(82svh, 46rem); display: grid; align-content: center; justify-items: center; gap: clamp(1.2rem, 2.5vw, 2rem);
}
.pf-open--rw h1 { margin-bottom: 0; }
.rw-sub { margin: 0; text-shadow: 0 0 14px #1a0c1e, 0 0 4px #1a0c1e; max-width: 34ch; text-align: center; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.5; color: rgb(251 234 242 / 0.85); }
.rw-soon { margin: 0; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1.1rem; border: 1px solid rgb(214 170 232 / 0.5); border-radius: 999px; font: 400 0.85rem/1 var(--tech); letter-spacing: 0.22em; text-transform: uppercase; color: #F3D3E6; }
.rw-soon::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #FFC46E; }
.rw-actions { justify-content: center; margin-block: clamp(2.5rem, 6vw, 4.5rem); }

/* section heads: centred, big, each area in its own colour (--sc) */
.page-main .pf-more { margin: clamp(3rem, 6vw, 5rem) 0 0; font-size: 1.25rem; }
.tb-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: center; align-items: start; gap: 0.7rem; text-align: center; margin-bottom: clamp(1rem, 3vw, 2rem); }
.page-main .tb-head h2 { margin: 0; font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.04em; color: var(--sc, #F1ECE3); text-wrap: balance; text-shadow: 0 0 40px color-mix(in srgb, var(--sc, #fff) 35%, transparent); }
.tb-kicker { margin: 0; font: 400 0.9rem/1 var(--tech); letter-spacing: 0.26em; color: var(--sc, #F1ECE3); opacity: 0.9; }
.tb-kicker::before, .tb-kicker::after { content: ""; display: inline-block; width: 2.2rem; height: 1px; margin: 0 0.9rem; vertical-align: middle; background: currentColor; opacity: 0.6; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 404: the signal is lost, so the lines are almost flat */
.pf-open--404 {
  --o-bg: radial-gradient(ellipse 85% 75% at 50% 30%, #2a2f3d 0%, #171a24 55%, #0d0f16 100%);
  --o-edge: rgb(255 155 122 / 0.22);
  --o-text: radial-gradient(circle at var(--px, 50%) var(--py, 40%), #fff 0%, #FFE9E0 30%, #FF9B7A 85%);
  --o-glow1: rgb(255 155 122 / 0.85); --o-glow2: rgb(255 120 90 / 0.6);
  min-height: 100svh; display: grid; align-content: center; justify-items: center; gap: clamp(1rem, 2vw, 1.6rem); padding-block: clamp(7rem, 12vw, 9rem) clamp(3rem, 6vw, 5rem);
}
.pf-open--404 h1 { font-size: clamp(6rem, 24vw, 20rem); line-height: 0.9; margin: 0; }
.nf-sub { margin: 0; max-width: 40ch; text-align: center; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; color: rgb(241 236 227 / 0.85); text-shadow: 0 0 14px #0d0f16, 0 0 4px #0d0f16; }
.nf-tag { margin: 0; font: 400 0.85rem/1 var(--tech); letter-spacing: 0.26em; text-transform: uppercase; color: #FF9B7A; }
.nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 0.6rem; }
.page-main .nf-links a:not(.button) { min-height: 48px; padding: 0 1.4rem; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid rgb(255 155 122 / 0.55); color: #FFE9E0; font-weight: 500; text-decoration: none; transition: background 180ms ease, color 180ms ease; }
.page-main .nf-links a:not(.button):hover, .page-main .nf-links a:focus-visible { background: #FFE9E0; color: #171a24; border-color: #FFE9E0; }
.nf-links a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Thanks page: the signal arrived */
.pf-open--thanks {
  --o-bg: radial-gradient(ellipse 85% 75% at 50% 30%, #14413d 0%, #0c2224 55%, #081315 100%);
  --o-edge: rgb(143 217 192 / 0.22);
  --o-text: radial-gradient(circle at var(--px, 50%) var(--py, 40%), #fff 0%, #E4FBF2 30%, #8FD9C0 85%);
  --o-glow1: rgb(143 217 192 / 0.8); --o-glow2: rgb(100 200 170 / 0.55);
  min-height: 100svh; display: grid; align-content: center; justify-items: center; gap: clamp(1rem, 2vw, 1.6rem); padding-block: clamp(7rem, 12vw, 9rem) clamp(3rem, 6vw, 5rem);
}
.pf-open--thanks h1 { font-size: clamp(3rem, 11vw, 9rem); line-height: 0.98; margin: 0; }
.pf-open--thanks .nf-tag { color: #8FD9C0; }
.pf-open--thanks .nf-links a:not(.button) { border-color: rgb(143 217 192 / 0.55); color: #E4FBF2; }
.page-main .pf-open--thanks .nf-links a:not(.button):hover { background: #E4FBF2; color: #0c2224; border-color: #E4FBF2; }

/* Privacy page: a short opener, then plain text */
.pf-open--legal { display: grid; justify-items: center; gap: 1rem; padding-block: clamp(8rem, 13vw, 10rem) clamp(3rem, 6vw, 4.5rem); }
.pf-open--legal h1 { font-size: clamp(3rem, 10vw, 8rem); line-height: 1; margin: 0; }
.pf-open--legal .nf-tag { color: #FFB39E; }
.legal { width: min(720px, 100% - 2 * var(--gutter, 1.5rem)); margin: clamp(2.5rem, 6vw, 4.5rem) auto clamp(4rem, 8vw, 7rem); }
.legal h2 { margin: 2.6rem 0 0.7rem; font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -0.03em; color: #FFB39E; text-transform: none; }
.legal h2:first-of-type { margin-top: 0; }
.legal p { margin: 0 0 1rem; font-size: 1.125rem; line-height: 1.7; color: rgb(241 236 227 / 0.88); max-width: 65ch; }
.legal .lead { font-size: 1.25rem; color: #F1ECE3; }