/* Northlight's holding pages: lane 1's approved values (HANDOFF-LANE-2-TOKENS.md, October 22), kept to a few tokens so
   the pages restyle in one place once the style document is locked. */
@font-face {
  font-family: 'Outfit';
  src: url('/fonts/Outfit-subset.woff2') format('woff2');   /* OFL (Outfit-OFL.txt) */
  font-weight: 400 600; font-style: normal; font-display: swap;
}

:root {
  --night: #0e0d0c;
  --charcoal: #1b1a17;
  --pearl: #f3ede2;
  --quiet: #a8a094;
  --paper: #f9f5ed;
  --wall: #eee8dc;
  --ink: #1b1a17;
  --quiet-ink: #5c554a;
  --line: rgba(243, 237, 226, 0.16);
  --type: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --display: clamp(42px, 27.9px + 3.62vw, 80px);
  --h1: clamp(35px, 25.7px + 2.38vw, 60px);
  --h2: clamp(24px, 20px + 1vw, 34px);
  --lede: clamp(20px, 18.7px + 0.34vw, 25px);
  --body: clamp(17px, 16.3px + 0.19vw, 19px);
  --caption: 15px;
  --gutter: clamp(24px, 5vw, 72px);
  --measure: 38rem;
  --ease: cubic-bezier(0.2, 0.7, 0.15, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 400 var(--body)/1.6 var(--type); }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

/* The halo reaches above the logo's box; clipping it there leaves a straight edge on dark grounds, so let it spill. */
.northlight-logo { overflow: visible; }

/* The home page: a dark studio with daylight falling from the upper left. */
.night {
  min-height: 100dvh;
  color: var(--pearl);
  background:
    radial-gradient(120% 90% at 8% -10%, rgba(247, 242, 228, 0.11), rgba(247, 242, 228, 0) 55%),
    radial-gradient(80% 60% at 100% 110%, rgba(247, 242, 228, 0.035), rgba(247, 242, 228, 0) 60%),
    linear-gradient(180deg, var(--charcoal), var(--night) 70%);
  display: grid;
  grid-template-rows: 1fr auto;
}
.night::before {   /* fine grain, so the dark reads as a surface rather than a void */
  content: ''; position: fixed; inset: 0; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hold {
  align-self: center;
  width: min(100%, 64rem);
  margin: 0 auto;
  padding: clamp(72px, 14vh, 160px) var(--gutter) clamp(48px, 8vh, 96px);
}
.hold .northlight-logo { width: clamp(220px, 34vw, 400px); margin-left: -2.2%; }
.hold h1 {
  margin: clamp(40px, 7vh, 72px) 0 0;
  max-width: 16ch;
  font-weight: 500; font-size: var(--h1); line-height: 1.08; letter-spacing: -0.03em;
}
.hold .lede { margin: 24px 0 0; max-width: var(--measure); font-size: var(--lede); line-height: 1.5; color: var(--quiet); }
.actions { display: flex; flex-wrap: wrap; gap: 16px 40px; margin: clamp(40px, 6vh, 64px) 0 0; padding: 0; list-style: none; }
.actions a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--lede); }
.actions .lead { font-weight: 500; }
.foot {
  width: min(100%, 64rem); margin: 0 auto; padding: 24px var(--gutter) 32px;
  display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line);
  font-size: var(--caption); color: var(--quiet);
}
.foot a { display: inline-flex; align-items: center; min-height: 44px; }

/* The privacy page: paper, for reading. */
.paper { background: var(--paper); color: var(--ink); }
.band {
  color: var(--pearl);
  background: radial-gradient(90% 160% at 6% -40%, rgba(247, 242, 228, 0.1), rgba(247, 242, 228, 0) 60%), var(--charcoal);
}
.band .top {
  width: min(100%, 64rem); margin: 0 auto; padding: 16px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.band .northlight-logo { width: clamp(132px, 16vw, 176px); margin-left: -2.2%; }
.band a { display: inline-flex; align-items: center; min-height: 44px; }
.band a:not(.home) { font-size: var(--caption); color: var(--quiet); }
.doc { width: min(100%, 64rem); margin: 0 auto; padding: clamp(32px, 7vh, 88px) var(--gutter) clamp(64px, 10vh, 120px); }
.doc > * { max-width: var(--measure); }
.doc h1 { margin: 0; font-weight: 500; font-size: var(--h1); line-height: 1.08; letter-spacing: -0.03em; }
.doc .lede { margin: 20px 0 0; font-size: var(--lede); line-height: 1.5; color: var(--quiet-ink); }
.doc .updated { margin: 16px 0 0; font-size: var(--caption); color: var(--quiet-ink); }
.doc h2 { margin: clamp(48px, 7vh, 72px) 0 0; font-weight: 500; font-size: var(--h2); line-height: 1.2; letter-spacing: -0.02em; }
.doc p, .doc ul { margin: 16px 0 0; }
.doc ul { padding-left: 1.2em; }
.doc li + li { margin-top: 10px; }
.doc strong { font-weight: 500; }
.paper .foot { border-top-color: rgba(27, 26, 23, 0.14); color: var(--quiet-ink); }

/* One arrival: the logo first, then each line in turn. The glint is the brand kit's own frames, played once. */
.d0 { --i: 0; } .d1 { --i: 1; } .d2 { --i: 2; } .d3 { --i: 3; } .d4 { --i: 4; }
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(14px); animation: rise 900ms var(--ease) forwards; animation-delay: calc(var(--i, 0) * 140ms + 200ms); }
  @keyframes rise { to { opacity: 1; transform: none; } }
  .lit .nl-halo { animation: nl-halo 4800ms ease-in-out 600ms 1 both; }
  .lit .nl-glint { animation: nl-glint 4800ms ease-in-out 600ms 1 both; }
  @keyframes nl-halo { 0%, 100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); } 45% { transform: translate(-50%, -50%) scale(1.32); filter: brightness(1.18); } }
  @keyframes nl-glint { 0%, 10% { opacity: 0; } 32% { opacity: 0.8; } 65%, 100% { opacity: 0; } }
}