/* ==========================================================
   North Stardust — Website
   Static stylesheet. No framework, no build step.

   Rebuilt against:
     North_Stardust_Website_Development_Prompt.md
     Website.txt
     North_Stardust_Claude_Final_Clarifications.md

   Three families, three jobs:
     Cormorant Garamond — brand / hero statement only.
     Spectral           — the studio's voice: headings, body copy.
     Inter               — the interface: nav, buttons, labels, forms.
   ========================================================== */

/* ---------- Fonts (self-hosted, latin subset) ---------------- */
@font-face{font-family:'Cormorant Garamond';src:url('assets/fonts/cormorant-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Spectral';src:url('assets/fonts/spectral-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ---------- Design tokens ---------- */
:root{
  /* brand palette — exact values from Website.txt / Clarifications */
  --midnight:#0F172A;
  --gold-dark:#BF9440;
  --gold-light:#F2D68A;
  --peach:#F0E5DC;
  --ivory:#F1EDE7;

  /* Field "filled" colour: the spec (Website.txt, Prompt.md §11) calls for a
     "light blue" filled/entered state but never supplies a hex value, and no
     such colour exists in the five-value palette above. No reference image
     with the exact value was available either. This is a provisional value —
     swap it here once the real one is confirmed. See README. */
  --field-filled:#AFD8E8;
  --field-error:#F2837A;

  --ink:var(--ivory);

  /* type — Cormorant brand, Spectral voice, Inter interface.
     Desktop (>=1200px) targets, from Website.txt / the Prompt:
       H1 64  · H2 48 · H3 24 · Body 20 · Links/Buttons 16 · Small 14
     Every rule below references one of these tokens; nothing invents a size. */
  --font-brand:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-serif:'Spectral',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --fs-h1:clamp(2.25rem,1.1rem + 3.6vw,4rem);       /* 64px */
  --fs-h2:clamp(1.75rem,1.2rem + 2.1vw,3rem);        /* 48px */
  --fs-h3:clamp(1.2rem,1.05rem + .6vw,1.5rem);       /* 24px */
  --fs-body:clamp(1.05rem,1rem + .2vw,1.25rem);      /* 20px */
  --fs-link:clamp(.95rem,.9rem + .15vw,1rem);        /* 16px */
  --fs-small:.875rem;                                 /* 14px */

  --ls-wide:.1em;    /* 10% letter-spacing — links, buttons, form labels */
  --ls-wider:.18em;  /* 18% — founder role line */

  /* shape */
  --radius-card:30px;
  --radius-pill:999px;
  --radius-field:24px;

  /* glass — Figma-confirmed: fill only, no stroke, 30px radius, 20px pad */
  --glass-fill:rgba(242,214,138,.05);   /* Gold Light @ 5% */
  --glass-blur:20px;

  /* layout */
  --content-width:1200px;
  --gutter:20px;
  --header-h:100px;
  --footer-h:100px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,figure,dl,dd,ul{margin:0}
ul{padding:0;list-style:none}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0}
input,textarea{font:inherit;color:inherit}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--midnight);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overflow-wrap:break-word;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1 0 auto}

/* ---------- Utilities ---------- */
.shell{
  width:100%;
  max-width:var(--content-width);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:50%;top:0;transform:translate(-50%,-120%);
  z-index:200;background:var(--gold-light);color:var(--midnight);
  font-family:var(--font-sans);font-size:var(--fs-small);font-weight:600;
  padding:.7rem 1.25rem;border-radius:0 0 8px 8px;
  transition:transform .18s ease;
}
.skip:focus{transform:translate(-50%,0)}

:focus-visible{
  outline:2px solid var(--gold-light);
  outline-offset:3px;
  border-radius:2px;
}

/* ==========================================================
   Global background — one reusable layered component,
   duplicated at the top of <body> on every page.
   1. flat midnight base
   2. Stars.png, drifting very slowly, with a soft twinkle overlay
   3. top/bottom 200px gradient bands so content never meets a hard edge
   Respects prefers-reduced-motion: motion stops, the field stays put.
   ========================================================== */
.page-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  background:var(--midnight);
  pointer-events:none;
}
.page-bg__stars{
  position:absolute;
  inset:-8%;
  background-image:url('assets/img/Stars.png');
  background-repeat:repeat;
  background-size:1200px auto;
  opacity:.85;
  animation:starDrift 300s ease-in-out infinite alternate;
  will-change:transform;
}
.page-bg__stars::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:inherit;
  background-repeat:inherit;
  background-size:inherit;
  mix-blend-mode:screen;
  opacity:.3;
  animation:starTwinkle 7s ease-in-out infinite alternate;
}
.page-bg__band{position:absolute;left:0;right:0;height:200px;pointer-events:none}
.page-bg__band--top{
  top:0;
  background:linear-gradient(to bottom,var(--midnight) 0%,rgba(15,23,42,.75) 50%,rgba(15,23,42,0) 100%);
}
.page-bg__band--bottom{
  bottom:0;
  background:linear-gradient(to top,var(--midnight) 0%,rgba(15,23,42,.75) 50%,rgba(15,23,42,0) 100%);
}
@keyframes starDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-3%,-2.5%,0)}}
@keyframes starTwinkle{from{opacity:.14}to{opacity:.4}}
@media (prefers-reduced-motion:reduce){
  .page-bg__stars,.page-bg__stars::after{animation:none}
}

/* Cursor stardust trail — canvas overlay, painted by main.js.
   Absent entirely on touch devices and under reduced motion (see JS guard). */
.stardust-trail{
  position:fixed;inset:0;z-index:60;pointer-events:none;
}

/* ---------- Buttons & links ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:120px;height:30px;
  padding-inline:1.1rem;
  border-radius:var(--radius-pill);
  background:var(--peach);
  color:var(--midnight);
  font-family:var(--font-sans);font-weight:500;font-size:var(--fs-link);
  letter-spacing:var(--ls-wide);
  text-decoration:none;
  transition:background-color .2s ease;
  cursor:pointer;
}
.btn:hover,.btn:focus-visible{background:var(--gold-light)}

.text-link{
  display:inline-block;
  color:var(--peach);
  font-family:var(--font-sans);font-weight:500;font-size:var(--fs-link);
  letter-spacing:var(--ls-wide);
  text-decoration:none;
  transition:color .2s ease,transform .2s ease;
}
.text-link:hover,.text-link:focus-visible{
  color:var(--gold-light);
  text-decoration:underline;
  transform:scale(1.1);
}
@media (prefers-reduced-motion:reduce){
  .text-link{transition:color .2s ease}
  .text-link:hover,.text-link:focus-visible{transform:none}
}

/* ---------- Glass card — Figma-confirmed ----------
   Fill: Gold Light @ 5% · Radius: 30px · Padding: 20px · No stroke.
   Sections stay transparent so the starfield reads through everywhere
   except inside a card. */
.glass{
  background:var(--glass-fill);
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
  border-radius:var(--radius-card);
  padding:20px;
  border:0;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  /* No blur support: fall back to a slightly stronger fill so cards still
     read against the starfield. */
  .glass{background:rgba(242,214,138,.09)}
}

/* ==========================================================
   Header — 100px, vertically centred, fixed in place.
   ========================================================== */
.site-header{
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  background:rgba(15,23,42,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.site-header__inner{
  max-width:var(--content-width);
  margin-inline:auto;
  height:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  gap:1rem;
}
.site-header__logo{
  display:flex;align-items:center;
  height:100px;
  flex:none;
  filter:drop-shadow(0 0 0 rgba(242,214,138,0));
  transition:filter .25s ease,opacity .25s ease;
}
.site-header__logo img{height:100px;width:auto}
.site-header__logo:hover,.site-header__logo:focus-visible{
  filter:drop-shadow(0 0 10px rgba(242,214,138,.55)) brightness(1.12);
}
.site-header__nav{display:flex;align-items:center;gap:24px}

@media (max-width:640px){
  .site-header{height:72px}
  .site-header__logo,.site-header__logo img{height:52px}
  .site-header__nav{gap:16px}
  .site-header__nav .btn{min-width:96px;padding-inline:.8rem}
}
@media (max-width:420px){
  .site-header__inner{gap:.5rem;padding-left:14px;padding-right:14px}
  .site-header__logo,.site-header__logo img{height:42px}
  .site-header__nav{gap:10px}
  .site-header__nav .btn{min-width:84px;height:28px}
}

/* ==========================================================
   Footer — 100px, vertically centred, stays in place.
   Logo left · LinkedIn centre · copyright right.
   ========================================================== */
.site-footer{height:var(--footer-h)}
.site-footer__inner{
  max-width:var(--content-width);
  margin-inline:auto;
  height:100%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding-inline:var(--gutter);
  gap:1rem;
}
.site-footer__logo{justify-self:start;height:60px;display:flex;align-items:center;transition:opacity .2s ease}
.site-footer__logo img{height:60px;width:auto}
.site-footer__logo:hover,.site-footer__logo:focus-visible{opacity:.82}
.site-footer__linkedin{justify-self:center}
.site-footer__legal{
  justify-self:end;margin:0;
  font-family:var(--font-sans);font-weight:500;font-size:var(--fs-link);
  letter-spacing:var(--ls-wide);color:var(--peach);
}
@media (max-width:640px){
  .site-footer{height:auto}
  .site-footer__inner{
    grid-template-columns:1fr;
    justify-items:center;text-align:center;
    padding-block:1.75rem;gap:1rem;
  }
  .site-footer__logo,.site-footer__linkedin,.site-footer__legal{justify-self:center}
}

/* ==========================================================
   Home
   ========================================================== */
.hero{
  padding-block:clamp(4rem,11vw,7.5rem) clamp(2.5rem,7vw,4.5rem);
  text-align:center;
}
.hero__title{
  font-family:var(--font-brand);
  font-weight:400;
  font-size:var(--fs-h1);
  line-height:1.16;
  letter-spacing:-.01em;
  color:var(--gold-light);
  max-width:20ch;
  margin-inline:auto;
  text-wrap:balance;
}

/* Asymmetrical editorial rhythm: Studio left, Compass offset right,
   Horizon back to the left. Flexbox alignment, not absolute positioning,
   so the rhythm survives at every width without screenshot coordinates. */
.home-cards{
  display:flex;
  flex-direction:column;
  gap:clamp(3.5rem,9vw,7rem);
  padding-block:clamp(2rem,6vw,3rem) clamp(5rem,11vw,8.5rem);
}
.home-card{width:100%;max-width:640px}
.home-card:nth-child(1){align-self:flex-start}
.home-card:nth-child(2){align-self:flex-end}
.home-card:nth-child(3){align-self:flex-start}
.home-card__title{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:var(--fs-h3);
  color:var(--gold-light);
  margin-bottom:1rem;
}
.home-card p{
  font-family:var(--font-serif);
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--ivory);
}
.home-card p+p{margin-top:1.15em}

/* ==========================================================
   Contact — Founder
   ========================================================== */
.founder{
  max-width:1160px;
  margin-inline:auto;
  padding:var(--gutter);
  display:grid;
  grid-template-columns:minmax(220px,322px) minmax(0,818px);
  gap:20px;
  align-items:center;
  min-height:720px;
}
.founder__aside{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:24px;
  text-align:center;
}
.founder__portrait{
  width:322px;height:456px;max-width:100%;
  border-radius:var(--radius-card);
  object-fit:cover;
}
.founder__links{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}

.founder__card{
  width:100%;
  min-height:678px;
  display:flex;flex-direction:column;justify-content:center;
  gap:20px;
}
.founder__card h2{
  font-family:var(--font-serif);font-weight:400;
  font-size:var(--fs-h2);line-height:1.15;
  color:var(--peach);
}
.founder__role{
  font-family:var(--font-sans);font-weight:500;
  font-size:var(--fs-h3);
  letter-spacing:var(--ls-wider);
  text-transform:uppercase;
  color:var(--gold-light);
}
.founder__card p{
  font-family:var(--font-serif);font-weight:400;
  font-size:var(--fs-body);line-height:1.5;
  color:var(--ivory);
}
.founder__card p+p{margin-top:1.15em}

@media (max-width:900px){
  .founder{grid-template-columns:1fr;min-height:0;padding-block:2.5rem}
  .founder__card{min-height:0}
}

/* ==========================================================
   Contact — Contact section (card + form)
   565 + 30 + 565 = 1160, inside 1200 with 20px outer margins.
   ========================================================== */
.contact-columns{
  max-width:1160px;
  margin-inline:auto;
  padding:var(--gutter);
  padding-block:50px;
  display:grid;
  grid-template-columns:minmax(0,565px) minmax(0,565px);
  justify-content:center;
  gap:30px;
}
@media (max-width:1180px){
  .contact-columns{grid-template-columns:minmax(0,565px);justify-items:center}
}

.connect-card{
  width:100%;max-width:565px;min-height:228px;
  display:flex;flex-direction:column;justify-content:center;
  gap:10px;
}
.connect-card h2{
  font-family:var(--font-serif);font-weight:400;
  font-size:var(--fs-h2);line-height:1.15;
  color:var(--gold-light);
}
.connect-card p{
  font-family:var(--font-serif);font-weight:400;
  font-size:var(--fs-body);line-height:1.5;
  color:var(--ivory);
}

.contact-form{width:100%;max-width:565px;display:flex;flex-direction:column;gap:24px}
.form-row{display:flex;gap:24px}
.form-row .field{flex:1;min-width:0}

/* Labels are visually hidden (.vh, in the markup) — the visual design
   specifies placeholder-only fields with no separate label row, but a
   placeholder is not an accessible name, so a real <label> is kept for
   assistive tech without changing what's on screen. */
.field{position:relative}
.field input,.field textarea{
  display:block;width:100%;
  background:var(--glass-fill);
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
  border:2px solid var(--peach);
  border-radius:var(--radius-pill);
  color:var(--peach);
  font-family:var(--font-sans);font-weight:500;font-size:var(--fs-link);
  letter-spacing:var(--ls-wide);
  height:30px;
  padding:0 1rem;
  transition:border-color .2s ease,color .2s ease;
}
.field textarea{
  height:120px;
  border-radius:var(--radius-field);
  padding:.65rem 1rem;
  resize:vertical;
  line-height:1.4;
}
.field input::placeholder,.field textarea::placeholder{color:var(--peach);opacity:.85}
.field input:hover,.field textarea:hover{border-color:var(--gold-light)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold-dark)}
.field.is-filled input,.field.is-filled textarea{border-color:var(--field-filled);color:var(--field-filled)}
.field.is-error input,.field.is-error textarea{border-color:var(--field-error)}
.field__error{
  display:none;margin-top:.4rem;
  font-family:var(--font-sans);font-size:var(--fs-small);color:var(--field-error);
}
.field.is-error .field__error{display:block}

.contact-form__foot{display:flex;align-items:center;justify-content:flex-end;gap:1rem}
.contact-form__status{
  margin:0;flex:1;
  font-family:var(--font-sans);font-size:var(--fs-small);
  color:var(--ivory);
}
.contact-form__status[data-state="error"]{color:var(--field-error)}
.contact-form__status[data-state="success"]{color:var(--gold-light)}
.contact-form__submit{align-self:flex-end}
.contact-form__submit:disabled{opacity:.6;cursor:progress}

/* ==========================================================
   Publishing
   ========================================================== */
.publishing{
  min-height:calc(100svh - var(--header-h) - var(--footer-h));
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding-block:4rem;
}
.publishing h1{
  font-family:var(--font-brand);font-weight:400;
  font-size:var(--fs-h1);
  color:var(--gold-light);
}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .js .reveal.is-in{transition:none}
}

/* ==========================================================
   Page transitions — short slide in/out between pages.
   main.js toggles these classes; a plain link click always works even
   with JS disabled, this is progressive enhancement only.
   ========================================================== */
.js body{transition:opacity .32s cubic-bezier(.22,.61,.36,1),transform .32s cubic-bezier(.22,.61,.36,1)}
.js body.page-enter{opacity:0;transform:translateY(12px)}
.js body.page-exit{opacity:0;transform:translateY(-12px)}
@media (prefers-reduced-motion:reduce){
  .js body{transition:none}
  .js body.page-enter,.js body.page-exit{opacity:1;transform:none}
}

/* ---------- Print ---------- */
@media print{
  .site-header,.page-bg,.stardust-trail{display:none}
  body{background:#fff;color:#000}
  .glass{background:#fff;color:#000;border:1px solid #ccc}
  .hero__title,.founder__card h2,.connect-card h2,.publishing h1{color:#000}
  a{text-decoration:underline}
}