/* Draft design system, 13 Oct. Shared by drafts A and B.
   Type: Instrument Serif (display) / Geist (body, UI) / Geist Mono (labels), all OFL.
   Scale: phi (1.618) between levels. Grid: 12 columns, asymmetric 5/7 splits (~38/62). */

:root {
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: Geist, ui-sans-serif, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --t-xs: 12px; --t-s: 14px; --t-body: 18px; --t-h3: 29px; --t-h2: clamp(38px, 4.4vw, 47px);
  --t-h1: clamp(52px, 7.6vw, 123px); --t-mega: clamp(64px, 9.6vw, 160px);
  --cols: 12; --gap: clamp(16px, 2vw, 28px); --pad: clamp(20px, 4.4vw, 72px); --max: 1440px;
  --ease: cubic-bezier(.16, 1, .3, 1); --mode-fade: 1.2s; --r: 22px;

  /* Accents swap across the day: each mode's accent is the other mode's light.
     Dusk wears golden hour's gold (8.7:1 on its bg); golden hour wears dusk's violet (5.6:1 on cream). */
  /* dusk (Addendum 3) */
  --bg: #1E1830; --bg-2: #262040; --text: #EDE6FA; --text-2: #C9BFEA; --text-3: #9C92B8;
  --accent: #E8B04A; --accent-text: #E8B04A; --on-accent: #1E1830; --brand: #E8B04A;
  --line: rgba(237, 230, 250, .14); --glass: rgba(30, 24, 48, .52); --scrim: 30, 24, 48;
  --frost: rgba(16, 11, 28, .46); --frost-line: rgba(237, 230, 250, .10); --frost-hi: rgba(255, 255, 255, .06);
  color-scheme: dark;
}
:root[data-mode="light"] {
  --bg: #F6EFE4; --bg-2: #EFE6D7; --text: #2B2238; --text-2: #4A3F5C; --text-3: #5E5070;
  --accent: #5A45D6; --accent-text: #5A45D6; --on-accent: #F6EFE4; --brand: #5A45D6;
  --line: rgba(43, 34, 56, .16); --glass: rgba(246, 239, 228, .62); --scrim: 246, 239, 228;
  --frost: rgba(250, 243, 233, .52); --frost-line: rgba(43, 34, 56, .10); --frost-hi: rgba(255, 255, 255, .5);
  color-scheme: light;
}
:root[data-mode="night"] {
  --bg: #0B1024; --bg-2: #121935; --text: #DDE4F5; --text-2: #B3C0DF; --text-3: #8794B4;
  --accent: #8FA8E8; --accent-text: #8FA8E8; --on-accent: #0B1024; --brand: #8FA8E8;
  --line: rgba(221, 228, 245, .13); --glass: rgba(11, 16, 36, .52); --scrim: 11, 16, 36;
  --frost: rgba(5, 8, 20, .48); --frost-line: rgba(221, 228, 245, .10); --frost-hi: rgba(255, 255, 255, .05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); overflow-x: hidden;
  font: 400 var(--t-body)/1.6 var(--sans); -webkit-font-smoothing: antialiased;
  transition: background-color var(--mode-fade) ease, color var(--mode-fade) ease;
}
img, video { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; }

.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.012em; line-height: .98; }
.serif em, h1 em, h2 em, h3 em { font-style: normal; }   /* Red, 14 Oct: accent words keep their colour, not italics (Addendum 51) */
.label { font: 500 var(--t-xs)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.lead { font-size: clamp(18px, 1.5vw, 21px); color: var(--text-2); line-height: 1.55; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap); }

/* nav: small, quiet, never the focus (the island is) */
.nav { position: fixed; z-index: 20; top: 14px; left: 50%; transform: translateX(-50%); width: min(calc(100% - 2 * var(--pad)), 920px); }
/* glass (Addendum 33). Two treatments compared; html[data-glass] picks one site-wide.
   clear: low blur, high saturation, a light gradient sheen, a bright top edge and a darker lower lip (Apple-like liquid glass).
   frost: the Addendum 32 smoked/frosted panel. */
.glass { --g-bg: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02) 42%, rgba(255,255,255,.06));
  /* layers: sheen, tint (both inside the border), then a gradient rim on the border itself: bright where light enters
     (top-left), nearly gone along the sides, a second catch bottom-right, like a lens edge */
  border: 1px solid transparent;
  background: var(--g-bg) padding-box, linear-gradient(var(--g-tint), var(--g-tint)) padding-box,
    linear-gradient(140deg, var(--g-rim-a), rgba(255,255,255,.06) 34%, rgba(255,255,255,.02) 62%, var(--g-rim-b)) border-box;
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(1.8) brightness(1.05); backdrop-filter: blur(var(--g-blur)) saturate(1.8) brightness(1.05);
  box-shadow: inset 0 1px 1px var(--g-hi), inset 0 -10px 18px -12px rgba(255,255,255,.14), inset 0 0 0 .5px rgba(255,255,255,.04), 0 18px 50px -24px rgba(0,0,0,.55); }
:root { --g-blur: 8px; --g-tint: rgba(20, 14, 34, .18); --g-edge: rgba(255,255,255,.18); --g-hi: rgba(255,255,255,.32); --g-rim-a: rgba(255,255,255,.55); --g-rim-b: rgba(255,255,255,.22); }
:root[data-mode="night"] { --g-tint: rgba(6, 10, 26, .2); }
:root[data-mode="light"] { --g-tint: rgba(255, 250, 242, .30); --g-edge: rgba(255,255,255,.6); --g-hi: rgba(255,255,255,.9); --g-rim-a: rgba(255,255,255,.95); --g-rim-b: rgba(160,110,80,.25); }
:root[data-glass="frost"] { --g-blur: 20px; --g-tint: var(--frost); --g-edge: var(--frost-line); --g-hi: var(--frost-hi); --g-rim-a: var(--frost-line); --g-rim-b: var(--frost-line); }
:root[data-glass="frost"] .glass { --g-bg: linear-gradient(transparent, transparent); }
.frost { background: var(--frost); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid var(--frost-line); box-shadow: inset 0 1px 0 var(--frost-hi), 0 24px 60px -30px rgba(0, 0, 0, .45); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 10px 0 22px; max-width: none; border-radius: 999px; }
.nav ul { align-items: center; } .nav li a { display: inline-block; padding: 10px 12px; border-radius: 999px; transition: background-color .3s var(--ease), color .3s var(--ease); }
.nav li a:hover { background: rgba(255,255,255,.1); }
.mark { font: 500 15px/1 var(--mono); letter-spacing: .04em; text-decoration: none; }
.nav ul { display: flex; gap: clamp(14px, 2.6vw, 36px); list-style: none; margin: 0; padding: 0; }
.nav a { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--text-2); }
.nav a:hover { color: var(--text); }
@media (max-width: 720px) { .nav ul { display: none; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text);
  font: 500 15px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { border-color: var(--text-3); transform: translateY(-1px); }
.btn-solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-solid:hover { border-color: var(--accent); filter: brightness(1.06); }

/* segmented control: time of day. Lives ON the island stage, not in the page nav. */
.seg {
  display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
.seg button {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-2); font: 500 13px/1 var(--sans); cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.seg svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.seg .tb-pause { padding: 0; width: 36px; justify-content: center; }
.tb-pause .i-play, .tb-pause[aria-pressed="true"] .i-pause { display: none; }
.tb-pause[aria-pressed="true"] .i-play { display: block; fill: currentColor; }
@media (max-width: 720px) { .seg button span { display: none; } .seg button { padding: 0 11px; } }

/* character dock: same pill language as the time switcher; the selected character takes the accent */
.dock {
  display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
.dock .label { padding: 0 6px 0 10px; }
.dock button {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 10px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-2); font: 500 13px/1 var(--sans); cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.dock button svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.dock button svg .s { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.dock button svg .t { stroke-width: 2.1; }
.dock button:hover { color: var(--text); }
.dock button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
@media (max-width: 720px) { .dock button span, .dock .label { display: none; } .dock button { padding: 0 11px; } }
@media (hover: none), (pointer: coarse) { .dock button, .seg button { min-height: 44px; min-width: 44px; justify-content: center; } .seg .tb-pause { width: 44px; } }   /* 44 px touch targets (Addendum 47) */

/* plate layers (shared with js/plate.js) */
.plate, .plate-layer, .plate-layer > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate { overflow: hidden; }
.plate-layer { opacity: 0; transition: opacity var(--mode-fade) ease-in-out; }
.plate-layer.on { opacity: 1; }
.plate-layer > img, .plate-layer > video { object-fit: cover; max-width: none; }
.plate-layer > video { opacity: 0; transition: opacity .4s ease; }
.plate-layer > video.playing { opacity: 1; }

/* draft switcher pill, bottom-left, drafts only */
.draftbar { position: fixed; z-index: 99; left: 12px; bottom: 12px; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #000c; font: 500 11px/1 var(--mono); }
.draftbar a { color: #fff; text-decoration: none; padding: 8px 12px; border-radius: 999px; }
.draftbar a[aria-current] { background: #fff; color: #000; }
.draftbar .dsep { width: 1px; margin: 4px 2px; background: #fff4; }
@media (max-width: 600px) { .draftbar { right: 12px; flex-wrap: wrap; justify-content: center; border-radius: 18px; bottom: 70px; } .draftbar a { padding: 7px 9px; } .draftbar .dsep { display: none; } }

/* scroll reveal */
.rv { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } * { transition-duration: .01s !important; } }

/* ---------- contour texture: the site's motif ----------
   Domain-warped contour lines (assets/img/contours.png, tileable, generated, 199 KB greyscale mask).
   Swirls like the plate's clouds and reads as a topographic map of the island. Always the accent
   colour at low opacity, used as a mask so it re-tints with the time of day for free. */
.contours { position: absolute; inset: 0; pointer-events: none; background: var(--accent);
  -webkit-mask: url(../assets/img/contours.png) 0 0 / 760px 760px repeat luminance; mask: url(../assets/img/contours.png) 0 0 / 760px 760px repeat luminance;
  -webkit-mask-mode: luminance; mask-mode: luminance; opacity: .13; transition: background-color var(--mode-fade) ease; }
@media (prefers-reduced-motion: no-preference) {
  .contours { animation: drift 120s linear infinite; }
  @keyframes drift { to { -webkit-mask-position: 760px 380px; mask-position: 760px 380px; } }
}
:root[data-mode="light"] .contours { opacity: .16; }

/* ---------- Addendum 35 ---------- */
/* no blue tap flash / text selection on the interactive plate and controls */
a, button, .stage, .stage * { -webkit-tap-highlight-color: transparent; }
.stage, .stage canvas, .plate, .plate * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* liquid edges on rectangular things: the corners breathe slowly, so cards stay rectangular but feel fluid like the
   model islands. Desktop with a fine pointer only (re-rasterising rounded video every frame is a phone cost). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .liquid { animation: liquid 16s ease-in-out infinite alternate; }
  .liquid:nth-of-type(2n) { animation-duration: 19s; animation-delay: -6s; }
  @keyframes liquid {
    0%   { border-radius: 22px 30px 24px 34px / 30px 22px 34px 24px; }
    33%  { border-radius: 34px 22px 30px 24px / 24px 34px 22px 30px; }
    66%  { border-radius: 26px 36px 22px 28px / 34px 26px 30px 22px; }
    100% { border-radius: 30px 24px 36px 22px / 22px 30px 24px 36px; }
  }
}

/* logo: a contour-island mark + serif wordmark, surname in the accent italic like the headline */
.mark { display: inline-flex; align-items: center; gap: 10px; font: 400 21px/1 var(--serif); letter-spacing: 0; color: var(--text); }
.mark svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.4; overflow: visible; }
.mark svg .pk { fill: var(--accent); stroke: none; }
.mark svg .r2 { opacity: .7; } .mark svg .r3 { opacity: .45; }
.mark em { color: var(--accent-text); }
.mark:hover svg { animation: mark-breathe 1.6s var(--ease); }
@keyframes mark-breathe { 40% { transform: scale(1.12) rotate(-6deg); } }

/* loader: the logo's contours draw in while the island loads; never more than 6 s */
.loader { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--bg);
  transition: opacity .8s var(--ease), visibility 0s .8s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader svg { width: 74px; height: 74px; fill: none; stroke: var(--accent); stroke-width: .9; overflow: visible; }
.loader svg path { stroke-dasharray: 80; stroke-dashoffset: 80; animation: draw 2.2s var(--ease) infinite; }
.loader svg .r2 { animation-delay: .25s; } .loader svg .r3 { animation-delay: .5s; }
.loader svg .pk { fill: var(--accent); stroke: none; animation: none; stroke-dasharray: none; }
@keyframes draw { 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -80; } }
.loader p { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin: 0; }
.loader .bar { width: 120px; height: 1px; background: var(--line); overflow: hidden; }
.loader .bar i { display: block; height: 100%; width: 40%; background: var(--accent); animation: bar 1.4s var(--ease) infinite; }
@keyframes bar { from { translate: -100% 0; } to { translate: 260% 0; } }
@media (prefers-reduced-motion: reduce) { .loader svg path, .loader .bar i { animation: none; stroke-dashoffset: 0; } }

/* phone menu: three lines that fold into an X; a glass panel drops from the pill */
.menu-btn { display: none; width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; cursor: pointer; position: relative; }
.menu-btn i { position: absolute; left: 13px; right: 13px; height: 1.6px; border-radius: 2px; background: var(--text); transition: transform .45s var(--ease), opacity .3s var(--ease); }
.menu-btn i:nth-child(1) { top: 15px; } .menu-btn i:nth-child(2) { top: 21px; } .menu-btn i:nth-child(3) { top: 27px; }
.menu-btn[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu { position: absolute; left: 0; right: 0; top: calc(100% + 10px); border-radius: 26px; padding: 10px; display: grid; gap: 2px;
  transform-origin: top; animation: menu-in .45s var(--ease); }
.menu[hidden] { display: none; }
.menu a { font: 400 30px/1 var(--serif); text-decoration: none; color: var(--text); padding: 14px 16px; border-radius: 16px; }
.menu a:active, .menu a:hover { background: rgba(255,255,255,.08); color: var(--accent-text); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@media (max-width: 720px) { .menu-btn { display: block; } }
.nav a.mark { font: 400 23px/1 var(--serif); text-transform: none; letter-spacing: 0; color: var(--text); padding: 0; }
.nav a.mark:hover { background: none; }
.nav .menu a { font: 400 32px/1 var(--serif); text-transform: none; letter-spacing: 0; color: var(--text); }
.menu { --g-blur: 26px; --g-tint: rgba(var(--scrim), .62); }

/* ---------- Addendum 36 ---------- */
/* RJ. logo: the letters with two contour rings around them (masked strokes), accent colour */
.rj { width: 48px; height: 30px; overflow: visible; flex: none; }
.rj .rjt { font: italic 400 31px/1 var(--serif); }
.rj .core { fill: var(--accent); stroke: var(--accent); stroke-width: .9; paint-order: stroke; }   /* thicker letters: the hairline italic smeared at 20 px (Addendum 47) */
.rj .r1 { fill: none; stroke: var(--accent); opacity: .4; }
.rj .r2 { fill: none; stroke: var(--accent); opacity: .32; }
.rj.big { width: 120px; height: 75px; }
.mark .rj { margin-right: 2px; }
.mark:hover .rj { animation: mark-breathe 1.6s var(--ease); }
/* loader terrain: faint, centre kept clear for the mark */
.loader-topo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .32; z-index: -1;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 50%, transparent 0 18%, #000 70%); mask-image: radial-gradient(60% 55% at 50% 50%, transparent 0 18%, #000 70%); }
.loader { isolation: isolate; }
.mark svg.rj { width: 54px; height: 34px; stroke: none; }
.nav .mark .rj .r2 { display: none; }   /* nav size: one ring only; two rings + letters read as one blur (Addendum 47) */
.loader svg.rj.big { width: 132px; height: 82px; stroke: none; }
.loader svg.rj path, .loader svg.rj text { animation: none; stroke-dasharray: none; }
.loader .rj .r1 { animation: rj-pulse 2.4s var(--ease) infinite; } .loader .rj .r2 { animation: rj-pulse 2.4s var(--ease) .3s infinite; }
@keyframes rj-pulse { 50% { opacity: .1; } }
@media (max-width: 720px) { .mark svg.rj { width: 46px; height: 29px; } }
/* phones: glass that sits on the playing island video re-blurs every frame; solid tint instead (Addendum 40) */
@media (hover: none), (pointer: coarse) { .stage .glass { -webkit-backdrop-filter: none; backdrop-filter: none; --g-tint: rgba(var(--scrim), .78); } }
/* desktop too (Addendum 46): blur over the playing video + live canvas re-blurs every frame; a denser tint reads the same */
.stage .glass { -webkit-backdrop-filter: none; backdrop-filter: none; --g-tint: rgba(var(--scrim), .55); }

/* nav call to action (Addendum 51): contact + CV one click from every page */
.nav li a.nav-cta { border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent-text); }
.nav li a.nav-cta:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }