/* One stylesheet, tokens first (7 website\ui ux.md, site standard Section 3 themes). Starter kit from Anak Malaysia:
   change --accent (both themes) and the fonts for a new site; the people, profile and video parts are ready if needed. */
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 400; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin-400.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 600; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin-600.woff2) format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-weight: 400; font-display: swap; src: url(../fonts/source-serif-4-latin-400.woff2) format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-weight: 600; font-display: swap; src: url(../fonts/source-serif-4-latin-600.woff2) format('woff2'); }

:root {
    --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Noto Sans SC', sans-serif;
    --serif: 'Source Serif 4', Georgia, 'Noto Serif SC', serif;
    --fs-hero: clamp(44px, 1.5rem + 5vw, 96px);
    --fs-h1: clamp(32px, 1.4rem + 2.5vw, 56px);
    --fs-h2: clamp(22px, 1.2rem + 1vw, 30px);
    --fs-ui: 14px;
    --nav-h: 56px;
    --edge: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
    --section-y: clamp(48px, 1.27rem + 7.4vw, 96px);
    --radius: 12px;
    --ease: cubic-bezier(0.23, 1, 0.32, 1);
    /* dark (default) */
    --bg: #0a0a0a; --bg-alt: #111; --surface: #161616; --ink: #fcfcfc; --text: #dadbdf; --muted: #b4b4b4;
    --line: #232427; --line-strong: #63666c; --accent: #8ab4f8; --on-ink: #0a0a0a; --on-accent: #0a0a0a; --danger: #ff8a80;
    color-scheme: dark;   /* --line-strong 3:1 for inputs and outline buttons (2026/10/26) */
}
@media (min-width: 640px) { :root { --edge: max(24px, env(safe-area-inset-left), env(safe-area-inset-right)); } }

/* light: the device asks for it and no cookie says otherwise, or the cookie says light */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) { --bg: #f6f7f9; --bg-alt: #eef0f3; --surface: #fff; --ink: #121212; --text: #2b2b2b; --muted: #5c5c5c;
        --line: #e2e5ea; --line-strong: #8a909a; --accent: #1d5fc4; --on-ink: #fafaf7; --on-accent: #fafaf7; --danger: #b3261e; color-scheme: light; }
}
:root[data-theme="light"] { --bg: #f6f7f9; --bg-alt: #eef0f3; --surface: #fff; --ink: #121212; --text: #2b2b2b; --muted: #5c5c5c;
    --line: #e2e5ea; --line-strong: #8a909a; --accent: #1d5fc4; --on-ink: #fafaf7; --on-accent: #fafaf7; --danger: #b3261e; color-scheme: light; }
/* silver: calm cool grey, the same blue family (2026/11/11); after the light rules so it wins over the device's light.
   Contrast: ink 15.0 on bg; muted 5.9 on bg-alt; accent 5.3 on bg-alt, 6.6 on surface; on-accent 6.6 on accent;
   line-strong 3.2 on bg-alt, 3.9 on surface; danger 6.0 on bg */
:root[data-theme="silver"] { --bg: #e9ecef; --bg-alt: #dde1e6; --surface: #f8f9fa; --ink: #16181b; --text: #2a2d32; --muted: #4d535b;
    --line: #cdd2d8; --line-strong: #767d86; --accent: #1a56b0; --on-ink: #f8f9fa; --on-accent: #f8f9fa; --danger: #a8261e; color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font: 16px/1.6 var(--sans); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
ul[role="list"] { list-style: none; }
h1, h2, h3, p, figure, dl, dd, blockquote { margin: 0; }
h1, h2, h3 { color: var(--ink); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: 16px; letter-spacing: 0; }
p { text-wrap: pretty; }
a { color: var(--accent); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration: underline; text-underline-offset: 3px; } }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.small { font-size: var(--fs-ui); color: var(--muted); }

.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--edge); }
.section { padding-block: var(--section-y); }
.alt { background: var(--bg-alt); }
.head { margin-bottom: 40px; max-width: 680px; }
.split { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1024px) { .split { grid-template-columns: 5fr 7fr; gap: 64px; } }
.prose { max-width: 720px; }
.prose > * + * { margin-top: 20px; }

.skip { position: absolute; left: var(--edge); top: 8px; z-index: 30; padding: 12px 16px; border-radius: 99px; color: var(--on-ink); background: var(--ink); translate: 0 -200%; }
.skip:focus { translate: 0; }

/* Header: brand, three links, language and theme. Fits 320px without a menu button. */
.nav { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 8px; height: calc(var(--nav-h) - 1px); }
.brand { margin-right: auto; font-weight: 600; white-space: nowrap; color: var(--ink); }
.nav ul { display: flex; }
.nav a, .theme { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: var(--fs-ui); color: var(--muted); }
.nav ul a { padding-inline: clamp(5px, 2vw, 12px); white-space: nowrap; }
/* Phones: the two content links stay on top; About and Contact are in the footer (Desmond 2026/10/27, 4 links did not fit 320px) */
@media (max-width: 639px) { .nav .wide-only { display: none; } }
.nav a[aria-current] { color: var(--ink); }
.tools { display: flex; align-items: center; margin-right: -10px; }
.lang { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 44px; font-size: var(--fs-ui); font-weight: 600; }
span.lang { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--accent); }
/* Theme choice: a half-filled circle and the name of the theme in use (the name hides on small phones; the button still says it) */
.theme { gap: 6px; min-width: 44px; padding: 0 8px; background: none; border: 0; cursor: pointer; white-space: nowrap; }
.theme svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.theme svg path { fill: currentColor; stroke: none; }
@media (max-width: 479px) { .theme .theme-name { display: none; } }
@media (max-width: 400px) { .brand { font-size: 13px; } .nav ul a { font-size: 13px; } }
@media (hover: hover) and (pointer: fine) { .nav a:hover, .theme:hover { color: var(--ink); text-decoration: none; } }

/* Buttons: one system on Up Album, BetterArchive and Anak Malaysia (2026/10/26).
   .btn = primary (accent fill, one per view); --secondary outline; --ghost text only; --danger red fill; --sm smaller;
   --block full width on phones. 44px high everywhere, mouse and touch (Desmond 2026/10/26). States: hover (mouse only), focus ring,
   press, disabled, aria-pressed, .is-busy (spinner, with aria-busy="true" on the button). */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px;
    font: 600 var(--fs-ui)/1.2 var(--sans); text-align: center; color: var(--on-accent); background: var(--accent);
    border: 1px solid transparent; border-radius: 99px; cursor: pointer; white-space: nowrap; text-decoration: none;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background-color 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease), scale 180ms var(--ease);
}
.btn svg { flex: none; width: 18px; height: 18px; }
.btn--secondary { color: var(--ink); background: transparent; border-color: var(--line-strong); }
.btn--ghost { padding-inline: 12px; color: var(--ink); background: transparent; }
.btn--danger { color: var(--on-accent); background: var(--danger); }
.btn--sm { padding-inline: 16px; }
.btn--ghost.btn--sm { padding-inline: 8px; }
@media (max-width: 639px) { .btn--block { width: 100%; } }
@media (hover: hover) and (pointer: fine) {
    .btn:hover { background: color-mix(in srgb, var(--accent) 85%, var(--ink)); }
    .btn--secondary:hover, .btn--ghost:hover { background: var(--bg-alt); }
    .btn--secondary:hover { border-color: var(--ink); }
    .btn--danger:hover { background: color-mix(in srgb, var(--danger) 85%, var(--ink)); }
}
.btn:focus-visible, .btn:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:active { scale: 0.98; }
.btn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.btn:disabled, .btn[aria-disabled="true"] { color: var(--muted); background: var(--bg-alt); border-color: var(--line); cursor: not-allowed; scale: none; }
.btn--ghost:disabled { background: transparent; }
.btn.is-busy { cursor: progress; }
.btn.is-busy svg { display: none; }
.btn.is-busy::before { content: ""; flex: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin 700ms linear infinite; }
@keyframes btn-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn.is-busy::before { animation-duration: 2s; } }
.form > .btn { justify-self: start; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 32px; }
.actions > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-ui); }

/* Hero: portrait first on phones, side by side from 1024px with the photo to the screen edge */
.hero { display: grid; gap: 24px; padding-bottom: var(--section-y); }
.hero figure { grid-row: 1; }
.hero img { width: 100%; aspect-ratio: 4 / 5; max-height: 38svh; object-fit: cover; object-position: 50% 25%; background: var(--surface); }
.hero figcaption, .hero-copy { padding-inline: var(--edge); }
.hero figcaption { padding-top: 12px; font-size: var(--fs-ui); color: var(--muted); }
.hero figcaption b { display: block; font-weight: 600; color: var(--ink); }
.hero h1 { font-size: var(--fs-hero); line-height: 0.98; letter-spacing: -0.035em; }
.hero h1 + p { margin-top: 16px; max-width: 560px; }
@media (min-width: 640px) {
    .hero { padding-top: 48px; }
    .hero figure, .hero-copy { margin-inline: var(--edge); }
    .hero figcaption, .hero-copy { padding-inline: 0; }
    .hero img { max-height: 46svh; border-radius: var(--radius); }
}
@media (min-width: 1024px) {
    /* About 70% of the screen, so the guests below always peek in (Desmond 2026/10/22: hero too big) */
    /* The text sets the height (at least 480px, about 70% of the screen); the photo only fills it and can never spill over */
    .hero { grid-template-columns: minmax(var(--edge), 1fr) minmax(0, 600px) minmax(0, 600px) minmax(var(--edge), 1fr); gap: 0; min-height: clamp(480px, 70svh, 720px); padding: 0; }
    .hero-copy { grid-column: 2; grid-row: 1; align-self: center; margin: 0; padding: 64px 48px 64px 0; }
    .hero figure { grid-column: 3 / -1; grid-row: 1; position: relative; margin: 0; overflow: hidden; }
    .hero img { position: absolute; inset: 0 0 64px; width: 100%; height: calc(100% - 64px); max-height: none; aspect-ratio: auto; border-radius: 0; }
    .hero figcaption { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; padding: 12px var(--edge) 0 16px; }
}

/* Guests: swipe row on phones, grid from 1024px */
.people { display: flex; gap: 16px; margin-inline: calc(var(--edge) * -1); padding-inline: var(--edge); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: none; overscroll-behavior-x: contain; }
.people li { flex: 0 0 min(64vw, 300px); scroll-snap-align: start; }
.tile { display: block; color: var(--text); }
.tile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius); background: var(--surface); }
.tile h3 { margin-top: 14px; }
.tile p { font-size: var(--fs-ui); color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .tile:hover { text-decoration: none; } .tile:hover h3 { text-decoration: underline; text-underline-offset: 3px; } }
@media (min-width: 640px) { .people { margin-inline: 0; padding-inline: 0; gap: 24px; } }
@media (min-width: 1024px) { .people { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; } }

.statement { font-size: clamp(30px, 1rem + 4.4vw, 72px); line-height: 1.08; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }

/* Profile (Wikipedia style): article in the serif, facts box on the right from 1024px */
.profile { display: grid; gap: 32px; padding-block: 40px var(--section-y); }
.crumb { font-size: var(--fs-ui); margin-bottom: 12px; }
.profile h1 span { font-weight: 400; color: var(--muted); }
.lead { margin-top: 16px; max-width: 680px; font: 20px/1.55 var(--serif); color: var(--ink); }
.infobox { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.infobox img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.infobox dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; padding: 16px; font-size: var(--fs-ui); }
.infobox dt { color: var(--muted); }
.infobox dd { color: var(--ink); }
.article { max-width: 680px; font: 18px/1.7 var(--serif); }
.article section + section { margin-top: 40px; }
.article h2 { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-family: var(--sans); }
.article sup { font: 600 12px var(--sans); }
.article .small { margin-top: 12px; font-family: var(--sans); }
blockquote { padding-left: 20px; border-left: 2px solid var(--accent); font-style: italic; color: var(--ink); }
blockquote + blockquote { margin-top: 20px; }
.refs ol { padding-left: 24px; font: var(--fs-ui)/1.6 var(--sans); }
.refs li + li { margin-top: 6px; }
@media (min-width: 1024px) {
    .profile { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 64px; }
    .profile-head, .article { grid-column: 1; }
    .infobox { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(var(--nav-h) + 24px); }
}

/* Video: our poster; Instagram's player loads only after the tap */
.video { position: relative; display: block; width: min(100%, 360px); padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface); cursor: pointer; }
.video img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.video span { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px; border-radius: 99px; font: 600 var(--fs-ui) var(--sans); color: #fcfcfc; background: rgb(10 10 10 / 0.7); }
.video span::before { content: ''; border-left: 11px solid currentColor; border-block: 7px solid transparent; }
/* Crop box (9:16, the reel itself): Instagram draws a 4:5 frame with its header (about 54px) above and likes and comments
   below. The frame is made 142% wide (4:5 to 9:16) and shifted so only the video shows; tall enough to never scroll. */
.embed-box { position: relative; width: min(100%, 320px); aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--radius); background: #000; }
.embed { position: absolute; left: -26%; top: -56px; width: 150%; height: calc(100% + 480px); border: 0; }

/* Forms */
.form { display: grid; gap: 16px; }
.form label { display: grid; gap: 6px; font-size: var(--fs-ui); color: var(--muted); }
.form input, .form select, .form textarea { min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); }
.form .hp { position: absolute; left: -9999px; }
.notice { padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); }

.footer { padding-block: 40px; border-top: 1px solid var(--line); font-size: var(--fs-ui); color: var(--muted); }
.footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.footer ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
.footer a { display: inline-flex; min-height: 44px; align-items: center; color: var(--muted); white-space: nowrap; }

/* Motion, dial 3 (7 website\motion.md Section 13): one calm entrance, then reveal once */
@keyframes rise { from { opacity: 0; translate: 0 16px; } }
@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { @keyframes rise { from { opacity: 0; } } }
.hero img { animation: fade 700ms var(--ease) backwards; }
.hero h1 { animation: rise 600ms var(--ease) 150ms backwards; }
.hero-copy > :not(h1), .hero figcaption { animation: rise 500ms var(--ease) 320ms backwards; }
.hero-copy > .actions { animation-delay: 440ms; }
.is-waiting { opacity: 0; translate: 0 16px; }
.is-in { transition: opacity 600ms var(--ease), translate 600ms var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
@media (prefers-reduced-motion: reduce) { .is-waiting { translate: none; } }
@media print { .is-waiting { opacity: 1; translate: none; } .nav, .footer { display: none; } }
@media (hover: hover) and (pointer: fine) { .tile img { transition: scale 300ms var(--ease); } .tile:hover img { scale: 1.02; } }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Contact by email only (no form for now) */
.contact-email { align-self: center; font-size: clamp(22px, 3vw, 32px); font-weight: 600; overflow-wrap: anywhere; }
.more { margin-top: 24px; font-size: var(--fs-ui); }