/* Richa Shaw: warm editorial brand. Cream paper, turquoise ink (her favourite colour), an elegant serif, calm spacing.
   Fonts are self-hosted (no Google requests = no GDPR issue). Light theme only, on purpose: the cream paper is the brand. */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/CormorantGaramond-400.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/CormorantGaramond-400i.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/CormorantGaramond-500.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Jost-400.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Jost-500.woff2') format('woff2'); }

:root {
  color-scheme: light;
  --bg: #f4efe6;          /* warm cream paper */
  --surface: #fbf9f5;
  --panel: #dcece8;       /* soft aqua mist */
  --ink: #2b2a26;
  --ink-2: #4f4c45;
  --muted: #67635a;       /* >= 4.5:1 on cream and panel */
  --turq: #17807a;       /* turquoise: large headings only (4.2:1) */
  --turq-deep: #0e5a56;  /* deep turquoise: links, nav, buttons (7:1) */
  --coral: #c8664a;       /* warm counterpoint, decorative only */
  --line: #ddd5c7;
  --bar: #17807a;
  --bar-planned: #b5dbd5;
  --good: #3f7d2c;
  --warning: #c98a12;
  --critical: #b8432f;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink-2); font: 400 17px/1.75 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: var(--turq-deep); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color .2s var(--ease); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--turq-deep); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(3rem, 7vw, 5.2rem); color: var(--turq); }
h2 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); }
h3 { font-size: 1.65rem; }
em { font-family: var(--serif); font-style: italic; font-size: 1.12em; color: var(--turq-deep); }
p { margin: 0 0 1.1em; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 12px; background: var(--surface); padding: 8px 14px; z-index: 50; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .wrap { padding: 0 40px; } }
section { padding: 96px 0; }
@media (max-width: 767px) { section { padding: 64px 0; } }
.label { font: 500 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--turq-deep); margin-bottom: 18px; display: block; }
.measure { max-width: 34em; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

/* Nav */
nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); }
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 20px; }
nav .brand { font: 400 1.35rem/1 var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--turq); text-decoration: none; }
nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
nav ul a { font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: 12px 0; }
@media (max-width: 640px) { nav ul { gap: 16px; } nav ul .hide-sm { display: none; } nav .brand { font-size: 1.1rem; } }

/* Buttons: quiet, outlined, small caps */
.btn { display: inline-block; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--turq-deep); border: 1px solid var(--turq-deep); padding: 16px 26px; transition: background .2s var(--ease), color .2s var(--ease); }
.btn:hover { background: var(--turq-deep); color: var(--bg); }
.btn.solid { background: var(--turq-deep); color: var(--bg); }
.btn.solid:hover { background: var(--ink); border-color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* ---- Home: "Horizon", one day from dawn to night ---- */
.tags { font: 500 11px/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
footer { padding: 40px 0; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

/* The sky, sun, stars and horizon are fixed behind the page; JS sets the colours as you scroll. */
body.horizon { --fg: #2b2a26; --fg-soft: #4f4c45; --sky-top: #2a3a5c; --sky-bottom: #f0c4b0;
  --land-far: #8fb8b4; --land-near: #3f8a83; --sea: #5fa79f; --sea-glint: #f6d2a8;
  background: var(--sky-bottom); color: var(--fg-soft); }
.sky { position: fixed; inset: 0; z-index: -3; background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom)); }
.stars { position: fixed; inset: 0 0 30% 0; z-index: -2; opacity: 0; pointer-events: none; }
.stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: twinkle 3s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .25; } to { opacity: 1; } }
.sun { position: fixed; z-index: -2; width: 120px; height: 120px; margin: -60px 0 0 -60px; left: 10%; top: 72%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff4dc 0%, #f6c87a 38%, #e8894f 70%, rgb(232 137 79 / 0) 72%);
  box-shadow: 0 0 80px 30px rgb(246 200 122 / .45); }
.moon { position: fixed; z-index: -2; right: 14%; top: 14%; width: 54px; height: 54px; border-radius: 50%; opacity: 0; pointer-events: none;
  box-shadow: inset -12px -6px 0 0 #f4efe6; transform: rotate(-20deg); }
@media (max-width: 640px) { .moon { top: 58%; right: 12%; } } /* phones: rests in the empty sky under the last line, not on it */
.horizon-land { position: fixed; left: 0; right: 0; bottom: 0; height: max(34vh, 19vw); z-index: -1; pointer-events: none; transform-origin: bottom; }
.horizon-land svg { width: 100%; height: 100%; display: block; }
.horizon-land .wave { animation: drift 9s linear infinite; }
.horizon-land .wave.b { animation-duration: 14s; animation-direction: reverse; }
.horizon-land .glint { animation: glint 2.6s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translateX(-160px); } }
@keyframes glint { from { opacity: .25; } to { opacity: .9; } }

body.horizon nav { position: absolute; left: 0; right: 0; background: none; backdrop-filter: none; } /* scrolls away so it never sits on the poetry */
body.horizon nav .brand, body.horizon nav ul a { color: var(--fg); }
body.horizon h1, body.horizon h2, body.horizon .line { color: var(--fg); }
body.horizon .label { color: var(--fg); opacity: .8; }

.opening { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 0 20px 30vh; }
.opening h1 { font-size: clamp(3.6rem, 11vw, 8.5rem); letter-spacing: -0.02em; margin: 0; }
.opening .sub { font: italic 400 clamp(1.4rem, 3vw, 2.1rem)/1.4 var(--serif); color: var(--fg); margin: 18px 0 0; }
.opening .cue { display: inline-block; margin-top: 42px; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--fg); text-decoration: none; }
.opening .cue span { display: inline-block; animation: nudge 2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(6px); } }

.chapter { min-height: 110svh; display: grid; align-content: center; padding: 15vh 0 24vh; }
.chapter .inner { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .chapter .inner { grid-template-columns: 1fr 1fr; gap: 80px; } .chapter.flip .motif { order: -1; } }
.chapter .label { margin-bottom: 22px; }
.line { font: 400 clamp(2.1rem, 4.6vw, 3.6rem)/1.22 var(--serif); margin: 0; letter-spacing: -0.01em; }
.line .w { display: inline-block; }
.line em { font-size: 1em; color: inherit; }
.motif { aspect-ratio: 1; max-width: 480px; width: 100%; justify-self: center; color: var(--fg); }
.motif svg { width: 100%; height: 100%; overflow: visible; }
.places { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 26px; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--fg); opacity: .75; }

.dusk .paintings { display: grid; gap: 16px; margin-top: 48px; }
@media (min-width: 900px) { .dusk .paintings { grid-template-columns: repeat(3, 1fr); } }
.dusk .stage { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: rgb(255 255 255 / .12); }
.dusk .stage svg { width: 100%; height: 100%; display: block; }
.dusk figure { margin: 0; }
.dusk figcaption { font: italic 400 1.35rem/1.3 var(--serif); color: var(--fg); margin-top: 12px; }

.closing { padding: 18vh 0 34vh; text-align: center; }
.closing .line { max-width: 18em; margin: 0 auto; }
.closing .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 56px; }
.closing .btn { color: var(--fg); border-color: var(--fg); }
.closing .btn:hover { background: var(--fg); color: var(--sky-top); }
.closing .ask { margin-top: 26px; font-size: .9rem; color: var(--fg); opacity: .85; }
.closing .ask a { color: var(--fg); }
body.horizon footer { border-color: rgb(255 255 255 / .15); color: var(--fg); opacity: .7; position: relative; }
body.horizon footer a { color: inherit; }

/* ---- Dashboard (PMO Copilot page) ---- */
.card { background: var(--surface); border: 1px solid var(--line); padding: 28px; }
@media (max-width: 640px) { .card { padding: 18px; } }
.grid.two { display: grid; gap: 28px; }
@media (min-width: 900px) { .grid.two { grid-template-columns: 1fr 1fr; } }
.status { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid var(--line); background: var(--bg); }
.status .dot { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; }
.status[data-rag="RED"] .dot { background: var(--critical); }
.status[data-rag="AMBER"] .dot { background: var(--warning); }
.status[data-rag="GREEN"] .dot { background: var(--good); }
.status strong { font: 500 1.4rem/1.2 var(--serif); color: var(--ink); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; }
.tile { background: var(--bg); border: 1px solid var(--line); padding: 16px; }
.tile .label { margin: 0; font-size: 10.5px; }
.tile .value { font: 400 2.4rem/1.1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.tile .sub { font-size: .8rem; color: var(--muted); line-height: 1.4; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font: 500 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.progress { width: 100px; height: 6px; background: var(--line); overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 8px; }
.progress span { display: block; height: 100%; background: var(--bar); }
.flag { font-weight: 500; white-space: nowrap; }
.flag.risk { color: var(--critical); }
.flag.ok { color: var(--good); }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { fill: var(--ink-2); font: 12px var(--sans); }
.chart .axis { stroke: var(--line); }
.chart .val { fill: var(--ink); font-weight: 500; }
.chart .bar { fill: var(--bar); }
.chart .bar.planned { fill: var(--bar-planned); }
.chart .avg { stroke: var(--ink-2); stroke-dasharray: 4 4; stroke-width: 1.5; }
.chart .line { fill: none; stroke: var(--bar); stroke-width: 2; }
.chart .pt { fill: var(--bar); stroke: var(--surface); stroke-width: 2; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: .82rem; color: var(--ink-2); margin-top: 8px; }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.alerts { list-style: none; padding: 0; margin: 0; }
.alerts li { padding: 10px 0 10px 28px; border-bottom: 1px solid var(--line); position: relative; font-size: .93rem; }
.alerts li::before { content: "!"; position: absolute; left: 0; top: 12px; width: 18px; height: 18px; border-radius: 50%; background: var(--warning); color: #fff; font: 600 12px/18px var(--sans); text-align: center; }
iframe.report { width: 100%; border: 1px solid var(--line); min-height: 200px; background: #fff; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .88rem; }
.flow span { padding: 8px 14px; background: var(--surface); border: 1px solid var(--line); }
.flow b { color: var(--muted); font-weight: 400; }
.empty { padding: 32px; text-align: center; color: var(--muted); border: 1px dashed var(--line); }

/* ---- Motion: reveals only when JS is on (.js); prefers-reduced-motion skips movement (rule at top). ---- */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 120ms); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js .line .w { opacity: 0; filter: blur(6px); transform: translateY(10px); transition: opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--w, 0) * 70ms); }
.js .line.in .w { opacity: 1; filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .line .w { opacity: 1; filter: none; transform: none; } }
.btn { transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.btn:active { transform: scale(.97); }