:root {
  --font: "Source Sans 3";
  --bg: #f3f0e8; --surface: #e7e2d7; --text: #142426; --muted: #5a6669; --line: #c9c5ba; --accent: #176b70; --on-accent: #f3f0e8;
  --gutter: clamp(16px, 5vw, 80px);
  --wide: 1240px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #181b1c; --surface: #222627; --text: #e8e6e0; --muted: #a5aaa8; --line: #383d3e; --accent: #e8e6e0; --on-accent: #181b1c;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font-family: var(--font), system-ui, sans-serif; font-size: 17px; line-height: 1.55; }
a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--line); }
a:hover { text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }

nav.top { display: flex; align-items: center; gap: 10px; height: 76px; }
.mark { width: 22px; height: 22px; flex: none; background: var(--accent); -webkit-mask: url(/brand/narahadi/open-rise.svg) center / contain no-repeat; mask: url(/brand/narahadi/open-rise.svg) center / contain no-repeat; }
nav.top b { font-weight: 600; }
nav.top .links { margin-left: auto; display: flex; gap: 24px; color: var(--muted); font-size: 15px; }
nav.top .links a { text-decoration: none; }
nav.top .links a:hover { color: var(--text); }

.h-xl { font-size: clamp(40px, 5.6vw, 80px); line-height: 1.04; font-weight: 600; letter-spacing: -0.028em; }
.h-l { font-size: clamp(32px, 4vw, 56px); line-height: 1.08; font-weight: 600; letter-spacing: -0.022em; }
.h-m { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
.h-s { font-size: 21px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.lead { font-size: 19px; color: var(--muted); max-width: 34em; }
.muted { color: var(--muted); }
.small { font-size: 15px; }

.btn { display: inline-block; background: var(--accent); color: var(--on-accent); padding: 11px 18px; border-radius: 4px; text-decoration: none; font-weight: 500; font-size: 15px; }
.btn:hover { opacity: 0.9; }
.cta { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; font-size: 15px; }

.rule { border-top: 1px solid var(--line); }
.section { padding: clamp(56px, 8vw, 112px) 0; }

/* placeholder Nara must fill before publishing */
.fill { background: none; color: var(--muted); border-bottom: 1px dashed var(--muted); white-space: nowrap; }

.photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }

.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 48px; }
.logos img { height: 30px; width: auto; filter: grayscale(1) contrast(1.1); opacity: 0.8; }
.logos img.tall { height: 44px; }
.logos img.wide { height: 38px; }
:root[data-theme="dark"] .logos img { filter: grayscale(1) invert(1) brightness(1.2); opacity: 0.75; }

footer.foot { border-top: 1px solid var(--line); padding: 28px 0 40px; display: flex; flex-wrap: wrap; gap: 12px 24px; color: var(--muted); font-size: 15px; }
footer.foot .end { margin-left: auto; display: flex; gap: 20px; }

@media (max-width: 860px) {
  nav.top .links a:not(:last-child) { display: none; }
  footer.foot .end { margin-left: 0; }
}

/* model logos: single colour, follow the theme. <i class="logo" style="--src:url(/models/claude.svg)" role="img" aria-label="Claude"></i> */
.logo { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.15em; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }

/* light/dark switch, wired by site.js. The icon is the current sky: sun in light, moon in dark;
   on a switch one sets below the button's edge while the other rises.
   <button class="theme-toggle" type="button" aria-label="Switch theme"><svg viewBox="0 0 24 24" aria-hidden="true"><g class="sun">…</g><path class="moon" d="…"/></svg></button> */
.theme-toggle { display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -6px -6px -6px 0; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 50%; view-transition-name: theme-toggle; }
.theme-toggle svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: hidden; }
.theme-toggle .sun, .theme-toggle .moon { transform-box: view-box; transform-origin: 50% 50%; }
.theme-toggle .moon, :root[data-theme="dark"] .theme-toggle .sun { opacity: 0; transform: translateY(15px); }
:root[data-theme="dark"] .theme-toggle .moon { opacity: 1; transform: none; }
.theme-toggle:hover { color: var(--text); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The new theme is revealed through a soft horizon: the mask is 2.5 viewports tall (opaque 1, feather 0.5,
   clear 1), so the feathered edge is on screen for the whole run, entering at one edge and leaving at the other. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(theme-toggle) { display: none; }
::view-transition-new(theme-toggle) { animation: none; }
:root.to-dark::view-transition-new(root) { -webkit-mask: linear-gradient(to bottom, #000 40%, transparent 60%) 0 0 / 100% 250% no-repeat; mask: linear-gradient(to bottom, #000 40%, transparent 60%) 0 0 / 100% 250% no-repeat; animation: dusk 1.05s cubic-bezier(0.65, 0, 0.35, 1) both; }
:root.to-light::view-transition-new(root) { -webkit-mask: linear-gradient(to top, #000 40%, transparent 60%) 0 0 / 100% 250% no-repeat; mask: linear-gradient(to top, #000 40%, transparent 60%) 0 0 / 100% 250% no-repeat; animation: dawn 1.05s cubic-bezier(0.65, 0, 0.35, 1) both; }
@keyframes dusk { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes dawn { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 0 100%; mask-position: 0 100%; } }

/* Motion: subtle, and only when the visitor hasn't asked for less. */
@media (prefers-reduced-motion: no-preference) {
  a, .btn, .theme-toggle { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, text-decoration-color 0.2s ease, opacity 0.2s ease, transform 0.15s ease; }
  .theme-toggle .sun, .theme-toggle .moon { transition: opacity 0.9s ease, transform 1s cubic-bezier(0.65, 0, 0.35, 1); }
  .theme-toggle svg { transition: transform 0.25s ease; }
  .theme-toggle:hover svg { transform: rotate(12deg); }
  .theme-toggle:active svg { transform: scale(0.85); }
  .btn:active { transform: scale(0.97); }
  /* under the sweep the new page is live: hold its colours still so only the horizon moves */
  :root.theme-vt *:not(.theme-toggle, .theme-toggle *) { transition: none !important; }
  :root.theme-fade, :root.theme-fade *:not(.theme-toggle *), :root.theme-fade *::before, :root.theme-fade *::after { transition: background-color 0.8s ease, color 0.8s ease, border-color 0.8s ease, fill 0.8s ease, stroke 0.8s ease, filter 0.8s ease !important; }
}
@media (prefers-reduced-motion: reduce) {
  :root.theme-fade, :root.theme-fade *, :root.theme-fade *::before, :root.theme-fade *::after { transition: background-color 0.2s linear, color 0.2s linear, border-color 0.2s linear, fill 0.2s linear, stroke 0.2s linear !important; }
}

body { font-size: 17px; }
main { max-width: 760px; margin: 0 auto; padding: 48px 16px; }
.back { color: var(--muted); font-size: 15px; }
.org { margin-top: 40px; color: var(--muted); font-size: 15px; }
h1 { margin-top: 6px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
h2 { font-size: 15px; font-weight: 500; color: var(--muted); margin: 40px 0 8px; }
p { max-width: 36em; }

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/source-sans-3-v20-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;
}
/* Arial-based stand-in sized to Source Sans 3 (400), so the swap to the web font barely moves text (CLS) */
@font-face {
  font-family: "Source Sans 3 Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 93.63%;
  ascent-override: 109.37%;
  descent-override: 42.72%;
  line-gap-override: 0%;
}
body { font-family: var(--font), "Source Sans 3 Fallback", system-ui, sans-serif; }