@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/newsreader-latin.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0-00FF,U+2013,U+2014,U+2018,U+2019,U+201C,U+201D,U+2026,U+00B7,U+2192}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/newsreader-italic-latin.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0-00FF,U+2013,U+2014,U+2018,U+2019,U+201C,U+201D,U+2026,U+00B7,U+2192}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/source-sans-3-latin.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0-00FF,U+2013,U+2014,U+2018,U+2019,U+201C,U+201D,U+2026,U+00B7,U+2192}
/* niksprojects.com — tokens from design-brief/export/tokens.md. Values match the Claude Design export exactly. */
:root{
  --paper:#F8F5EE;--ink:#1A1917;--muted:#5F5B54;--rule:rgba(26,25,23,.14);
  --accent:#1F3A5F;--accent-soft:rgba(31,58,95,.45);--accent-wash:rgba(31,58,95,.08);--thumb:#EDE9E0;
  --serif:Newsreader,Georgia,serif;--sans:"Source Sans 3",system-ui,sans-serif;--mono:ui-monospace,Menlo,monospace;
  --container:1160px;--gutter:24px;
}
html{background:var(--paper);color-scheme:light}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--accent-soft)}
a:hover{text-decoration-color:var(--accent);text-decoration-thickness:1.5px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
ul,ol{margin:0;padding:0;list-style:none}
p,figure,blockquote{margin:0}
h1,h2,h3{margin:0;font-weight:400}
strong{font-weight:600}
img{max-width:100%}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* skip link */
.skip-link{position:absolute;left:24px;top:-60px;background:var(--paper);padding:8px 12px;color:var(--accent);z-index:10}
.skip-link:focus{top:12px}

/* header */
.site-header{max-width:var(--container);margin:0 auto;padding:28px var(--gutter) 0}
.nav{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.wordmark{font-family:var(--serif);font-size:24px;text-decoration:none;color:var(--ink)}
.nav__links{display:flex;gap:28px;flex-wrap:wrap;font-size:16px}
.nav__links a{color:var(--ink);text-decoration:none}
.nav__links a:hover{color:var(--accent)}

/* layout */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{padding:48px 0 96px;border-top:1px solid var(--rule);scroll-margin-top:24px}
.section--last{padding-bottom:112px}
.section__label{display:flex;align-items:baseline;gap:16px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:56px}
.section__label span{font-variant-numeric:tabular-nums}
.section__label h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-family:inherit}

/* hero */
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px 64px;align-items:end;padding:56px 0 96px}
.hero__figure{max-width:520px}
.hero__portrait{display:block;width:100%;height:auto;aspect-ratio:9/10;object-fit:cover;object-position:50% 20%;border:1px solid var(--rule)}
.hero__text{display:flex;flex-direction:column;gap:28px;max-width:600px}
.hero__statement{font-family:var(--serif);font-size:clamp(34px,4.2vw,58px);line-height:1.12;letter-spacing:-0.01em}
.hero__statement em{font-style:italic}
.hero__facts{font-size:18px;color:var(--muted)}
.hero__links{display:flex;gap:28px;flex-wrap:wrap;font-size:18px}
.hero__story{font-size:17px;color:var(--muted);max-width:52ch}

/* about */
.about__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:64px 48px}
.block{display:flex;flex-direction:column;gap:20px}
.block__title{font-family:var(--serif);font-size:28px;line-height:1.2}
.block__titlerow{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.block__date{font-size:14px;color:var(--muted);letter-spacing:.04em}
.cares{display:flex;flex-direction:column;gap:16px;font-size:17px;line-height:1.55}
.now{display:flex;flex-direction:column;gap:12px;font-size:17px;line-height:1.55}
.now__k{color:var(--muted)}
.placeholder{font-family:var(--mono);font-size:14px;color:var(--muted)}
.pullquote{margin:36px 0 0;padding-top:24px;border-top:2px solid var(--accent);max-width:28ch}
.pullquote p{font-family:var(--serif);font-style:italic;font-size:30px;line-height:1.25}
.shelf{display:flex;flex-direction:column;gap:14px;font-size:16px;line-height:1.5}
.shelf__title{font-weight:600}
.shelf__author{color:var(--muted)}

/* lanes */
.lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:56px 48px}
.lane{display:flex;flex-direction:column;gap:20px;scroll-margin-top:24px}
.lane__lead{font-size:17px;color:var(--muted)}
.lane__lead--learn{max-width:40ch}
.lane__lead--connect{max-width:36ch}
.linklist{display:flex;flex-direction:column;gap:12px;font-size:17px}
.channels{display:flex;flex-direction:column;gap:20px;font-size:17px}
.channels li{display:flex;flex-direction:column;gap:8px}
.btn-outline{align-self:flex-start;text-decoration:none;border:1px solid var(--accent);padding:6px 14px;font-size:15px}
.btn-outline:hover{background:var(--accent-wash)}
.lane__figure{margin:12px 0 0;max-width:300px}
.lane__figure img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 35%;border:1px solid var(--rule)}
.caption{font-size:13px;color:var(--muted);margin-top:8px}
.letter{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.letter__label{font-size:14px;color:var(--muted);letter-spacing:.04em}
.letter__address{font-style:normal;font-family:var(--serif);font-size:20px;line-height:1.4;padding-left:16px;border-left:1px solid var(--rule)}

/* videos */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:48px 32px;animation:fadein .6s ease-out both}
.video{display:flex;flex-direction:column;gap:12px}
.video__thumb{display:block;text-decoration:none}
.video__thumb:hover{opacity:.9}
.video__thumb img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--rule);background:var(--thumb)}
.video__meta{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px}
.video__title{font-family:var(--serif);font-size:21px;line-height:1.3;color:var(--ink);text-decoration:none}
.video__title:hover{color:var(--accent)}

/* work */
.work{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 64px}
.work li{display:flex;flex-direction:column;gap:6px;padding:22px 0;border-bottom:1px solid var(--rule)}
.work__name{font-family:var(--serif);font-size:24px;text-decoration:none;color:var(--ink)}
.work__name:hover{color:var(--accent)}
.work__desc{font-size:17px;color:var(--muted)}
.work__url{font-size:15px}

/* gear */
.gear{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:56px 64px;align-items:start}
.gear__text{display:flex;flex-direction:column;gap:40px}
.gear__lead{font-family:var(--serif);font-size:28px;line-height:1.3;max-width:26ch}
.gear__groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px 40px;font-size:17px}
.gear__group{display:flex;flex-direction:column;gap:8px}
.gear__group h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.gear__group ul{display:flex;flex-direction:column;gap:4px}
.gear__figure img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--rule)}

/* footer */
.site-footer{border-top:1px solid var(--rule)}
.footer__inner{max-width:var(--container);margin:0 auto;padding:40px var(--gutter) 56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px 64px;font-size:15px;color:var(--muted);line-height:1.7}
.footer__brand{display:flex;flex-direction:column;gap:12px}
.footer__wordmark{font-family:var(--serif);font-size:22px;color:var(--ink)}
.footer__links{display:flex;flex-wrap:wrap;gap:6px 18px;align-content:start}
.site-footer a{color:var(--muted);text-decoration-color:rgba(95,91,84,.4)}
.site-footer a:hover{color:var(--accent)}
.footer__contact{display:flex;flex-direction:column;gap:4px}

@media (prefers-reduced-motion:reduce){.video-grid{animation:none}}