/* kagt.co.uk · site styles. Tokens are the KAGT / DesignSystem palette (brand/README.md).
   Light only, like the brand. Teal is a fill, never text. Flat: no outlines, shadows or left-edge bars. */

@font-face { font-family: "Fraunces"; font-weight: 100 900; font-display: swap;
    src: url("fonts/fraunces-latin-full-normal.woff2") format("woff2-variations"), url("fonts/fraunces-latin-full-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap;
    src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/manrope-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url("fonts/dm-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 500; font-display: swap; src: url("fonts/dm-mono-latin-500-normal.woff2") format("woff2"); }

:root {
    color-scheme: light;
    --navy: #0E1733; --navy-2: #1B2750; --navy-3: #2A3868; --navy-ink: #C9D0E4;
    --teal: #00BFA5; --teal-soft: #D9F7F2;
    --page: #F5F6F8; --surface: #FFFFFF; --surface-2: #EEF0F4; --surface-3: #E2E5EC;
    --ink: #0E1733; --ink-2: #545D73;
    --display: "Fraunces", Georgia, serif;
    --text: "Manrope", "Segoe UI", system-ui, sans-serif;
    --mono: "DM Mono", ui-monospace, Consolas, monospace;
    --r: 10px;
    --wrap: 1120px;
    --gutter: 20px;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 17px/1.65 var(--text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, dl, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.on-navy :focus-visible { outline-color: #fff; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 12px; top: -60px; background: #fff; color: var(--navy); padding: 10px 14px; border-radius: 8px; font-weight: 700; z-index: 10; }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Header ---- */
.site-head { background: var(--navy); color: #fff; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; min-height: 76px; flex-wrap: wrap; padding-block: 14px; }
.kagt-site-logo { display: block; width: 124px; }
.kagt-site-logo svg { display: block; width: 100%; height: auto; }
.site-nav { display: flex; gap: 6px 22px; flex-wrap: wrap; font: 700 15px var(--text); }
.site-nav a { position: relative; color: var(--navy-ink); text-decoration: none; padding: 6px 0 9px; transition: color .2s; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] { color: #fff; }
/* The bar under a link: grows from the left on hover or keyboard focus; the current page keeps it */
.nav-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--teal); transform: scaleX(0); transform-origin: left; }
.site-nav a:hover .nav-bar, .site-nav a:focus-visible .nav-bar, .site-nav a[aria-current="page"] .nav-bar { transform: scaleX(1); }
.site-nav a[aria-current="page"] .nav-bar { view-transition-name: nav-current; }
@media (prefers-reduced-motion: no-preference) { .nav-bar { transition: transform .3s cubic-bezier(.2, .7, .2, 1); } }

/* ---- Home hero: the puzzle board ---- */
.hero { background: var(--navy); color: #fff; }
.hero .wrap { padding-block: clamp(64px, 11vw, 132px); }
.hero-words { display: grid; gap: 22px; max-width: 620px; }
.hero h1 { font: 600 clamp(44px, 8.4vw, 92px)/0.98 var(--display); letter-spacing: -0.025em; }
.hero p { color: var(--navy-ink); font-size: clamp(18px, 2.2vw, 21px); max-width: 44ch; }
.hero .kicker, .kicker { font: 500 13px/1.4 var(--mono); letter-spacing: .02em; color: var(--navy-ink); }

/* ---- Sections ---- */
.section { padding-block: clamp(56px, 8vw, 96px); }
.section-head { display: grid; gap: 10px; margin-bottom: 32px; max-width: 64ch; }
.section-head h2 { font: 600 clamp(30px, 4.4vw, 44px)/1.1 var(--display); letter-spacing: -0.015em; }
.section-head p { color: var(--ink-2); }
.eyebrow { font: 700 12px/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }

/* Project cards */
.projects { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.project-card { background: var(--surface); border: 1px solid rgba(14, 23, 51, .09); border-radius: var(--r); padding: 24px; display: grid; gap: 14px; align-content: start; text-decoration: none; color: inherit; transition: background-color .15s; }
.project-card:hover { background: #FAFBFC; border-color: rgba(14, 23, 51, .16); }
.project-card .top { display: flex; align-items: center; gap: 14px; }
.badge { display: block; width: 56px; flex: none; }
.badge svg { display: block; width: 100%; height: auto; }
.project-card h3 { font: 600 24px/1.2 var(--display); }
.project-card p { color: var(--ink-2); font-size: 16px; }
.project-card .more { font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--text); padding: 6px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.chip.live::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--teal); }

/* About */
.about { display: grid; gap: 28px 56px; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; }
.about .name { font: 600 clamp(32px, 4.6vw, 48px)/1.08 var(--display); letter-spacing: -0.015em; }
.about .bio { display: grid; gap: 16px; }
.about .bio p { max-width: 62ch; }
.links { display: flex; gap: 10px; flex-wrap: wrap; }
/* Secondary buttons are white with a solid navy edge, so they stand out from the light page (edge about 17:1).
   Still flat: no shadows. Hover fills them navy. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 19px; border-radius: 8px; border: 1.5px solid var(--navy); font: 700 15px/1.2 var(--text); text-decoration: none; background: var(--surface); color: var(--ink); transition: background-color .12s, color .12s, border-color .12s; }
.btn:hover { background: var(--navy); color: #fff; }
.btn.primary { background: var(--navy); color: #fff; }
.btn.primary:hover { background: var(--navy-3); border-color: var(--navy-3); }
.todo { background: #FFF6DB; color: #4F3900; border-radius: 8px; padding: 14px 16px; font-size: 15px; }
@media (max-width: 760px) { .about { grid-template-columns: 1fr; } }

/* ---- Project page ---- */
.project-hero { background: var(--navy); color: #fff; }
.project-hero .wrap { padding-block: clamp(44px, 7vw, 80px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 32px; align-items: center; }
.project-hero .badge { width: clamp(76px, 10vw, 112px); }
.project-hero h1 { font: 600 clamp(38px, 6vw, 64px)/1.02 var(--display); letter-spacing: -0.02em; }
.project-hero p { color: var(--navy-ink); font-size: 19px; max-width: 52ch; margin-top: 10px; }
.crumbs { font-size: 14px; color: var(--navy-ink); margin-bottom: 8px; }
.crumbs a { color: var(--navy-ink); }
@media (max-width: 560px) { .project-hero .wrap { grid-template-columns: 1fr; } }

.two { display: grid; gap: 28px 48px; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.prose { display: grid; gap: 18px; }
.prose h2 { font: 600 28px/1.15 var(--display); margin-top: 12px; }
.prose p { max-width: 64ch; }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 8px; max-width: 64ch; }
.prose code, .facts code { font: 500 .92em var(--mono); background: var(--surface-2); padding: 1px 6px; border-radius: 4px; }
.facts { background: var(--surface); border-radius: var(--r); padding: 22px 24px; display: grid; gap: 14px; }
.facts dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; font-size: 15px; }
.facts dt { color: var(--ink-2); font-weight: 600; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.shot { background: var(--surface); border-radius: var(--r); padding: 10px; }
.shot img { border-radius: 6px; }
.shot figcaption { font-size: 14px; color: var(--ink-2); padding: 10px 6px 4px; }
.next { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* ---- Footer ---- */
.site-foot { background: var(--surface-2); color: var(--ink-2); font-size: 14px; }
.site-foot .wrap { padding-block: 28px 36px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; }
.site-foot .mark { width: 32px; }
.site-foot .mark svg { display: block; width: 100%; height: auto; }
.site-foot .left { display: flex; gap: 12px; align-items: center; }
.site-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-foot a { color: var(--ink); }

/* Teal button: fill only, text stays navy (brand rule). The one call to action on a navy hero. */
.btn.signal { background: var(--teal); color: var(--navy); border-color: var(--teal); }
.btn.signal:hover { background: #00A891; border-color: #00A891; color: var(--navy); }

/* A badge on a navy header takes the on-navy square, as the logo does (brand/README.md). */
.project-hero .badge .kagt-square { fill: var(--navy-2); }
.project-hero .badge .kagt-tile:not(.kagt-tile--t) .kagt-tile__bg { fill: #34457A; }
.project-hero .badge .kagt-mark { --kagt-unlit: #34457A; }

/* About: the photo beside the profile */
.portrait { margin: 0; }
.portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; background: var(--surface-2); }
.photo-todo { aspect-ratio: 4 / 5; display: grid; place-items: center; text-align: center; border-radius: 16px; }
.about-title { font: 600 clamp(30px, 4.4vw, 44px)/1.1 var(--display); letter-spacing: -0.015em; }
.about .bio p { font-size: 18px; }
@media (max-width: 760px) { .portrait { max-width: 260px; } }