/* Studio SPACECRAFT — shared tokens and brand elements.
   Loaded by every page. Page-specific styles live in their own file or <style> block.
   Fonts (load in each page <head>):
   https://fonts.googleapis.com/css2?family=Manrope:wght@300..700&family=Overpass+Mono:wght@400;500&family=Poppins:wght@300;400;600&display=swap */

:root{
  color-scheme:light;
  --bg:#ffffff;
  --tint:#f6f4f1;           /* quiet section background */
  --ink:#000000;
  --ink-2:#5f5f5f;
  --line:#e3e1dd;
  --ghost:rgba(0,0,0,.12);  /* not-yet-written part of the lockup during the intro */
  --shadow:rgba(0,0,0,.18);
  --plan-filter:none;       /* line drawings are black on transparent; inverted in dark mode */
  --coral:#e2675d;          /* brand coral, sampled from studio-spacecraft.com */
  --mono:"Overpass Mono",ui-monospace,monospace;   /* labels, nav, meta */
  --sans:"Manrope",system-ui,sans-serif;           /* headings + body */
  --brand:"Poppins",system-ui,sans-serif;          /* brand lockup only */
}

/* ---------- dark mode ----------
   The theme is resolved by assets/js/theme.js, which always sets <html data-theme="light|dark">
   (saved choice, else the system setting). Keep both blocks below in sync. */
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0e0e0d;
  --tint:#161514;
  --ink:#f1eee9;
  --ink-2:#a19c95;
  --line:#2b2927;
  --ghost:rgba(255,255,255,.12);
  --shadow:rgba(0,0,0,.6);
  --plan-filter:invert(1) hue-rotate(180deg);
  --coral:#e86f64;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0e0e0d; --tint:#161514; --ink:#f1eee9; --ink-2:#a19c95; --line:#2b2927;
    --ghost:rgba(255,255,255,.12); --shadow:rgba(0,0,0,.6);
    --plan-filter:invert(1) hue-rotate(180deg); --coral:#e86f64;
  }
}

/* theme toggle button (icons swap via [data-theme]) */
.theme-toggle .ic-sun{opacity:0}
[data-theme="dark"] .theme-toggle .ic-sun{opacity:1}
[data-theme="dark"] .theme-toggle .ic-moon{opacity:0}

/* ---------- brand lockup: mark + STUDIO SPACECRAFT + Architecture ----------
   The mark is a transparent PNG used as a CSS mask, so its colour follows `color`. */
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);line-height:1}
.brand-mark{display:block;width:var(--mark-w,44px);aspect-ratio:800/545;background:currentColor;
  -webkit-mask:url("../img/brand/mark.png") center/contain no-repeat;mask:url("../img/brand/mark.png") center/contain no-repeat}
.brand-text{display:flex;flex-direction:column;gap:4px}
.brand-name{font-family:var(--brand);font-weight:600;font-size:var(--name-size,15px);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.brand-sub{font-family:var(--brand);font-weight:300;font-size:calc(var(--name-size,15px) * .62);letter-spacing:.28em;text-transform:uppercase;white-space:nowrap}
.brand .brand-mark{color:var(--coral)}

.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- content pages (about, contact, projects): header, footer, reveal ----------
   Same language as the home chrome: centred Manrope nav with hairline separators, no bars,
   pills or shadows. Desktop: sticky, 92px tall (project pages offset sticky panels by 92px).
   Phones: two rows (lockup + theme toggle, then the nav) and not sticky — one row can't fit
   the lockup, three links and the toggle in 375px. */
:root{--gutter:4vw}
@media (max-width:767px){ :root{--gutter:6vw} }
.wrap{padding-left:var(--gutter);padding-right:var(--gutter)}

.site-header{position:sticky;top:0;z-index:30;background:var(--bg);transition:background .4s;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:92px;padding:0 var(--gutter)}
.site-header .brand{--mark-w:46px;--name-size:14px;justify-self:start}
.site-nav{display:flex;align-items:center}
.site-nav a{font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.02em;line-height:1.2;padding:4px 16px;text-decoration:none;color:var(--ink)}
.site-nav a + a{border-left:1px solid currentColor}
.site-nav a:hover,.site-nav a:focus-visible,.site-nav a[aria-current]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.site-header .theme-toggle{justify-self:end;border:0;background:none;padding:0;width:40px;height:40px;margin-right:-8px;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.site-header .theme-toggle svg{grid-area:1/1;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;transition:opacity .2s}
.site-header .theme-toggle:hover svg{stroke-width:2.2}
@media (max-width:767px){
  .site-header{position:relative;height:auto;grid-template-columns:1fr auto;row-gap:14px;padding-top:18px;padding-bottom:14px}
  .site-header .brand{--mark-w:36px;--name-size:12px;gap:9px}
  .site-nav{grid-row:2;grid-column:1/-1;justify-self:start;margin-left:-12px}
  .site-nav a{font-size:14px;padding:4px 12px}
}

.site-footer{display:flex;justify-content:space-between;align-items:baseline;gap:18px 32px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:26px;padding-bottom:calc(32px + env(safe-area-inset-bottom));font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.site-footer nav{display:flex;gap:10px 22px;flex-wrap:wrap}
.site-footer a{text-decoration:none}
.site-footer a:hover,.site-footer a:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* Scroll reveal: only when JS runs (theme.js sets html.js), so content never stays hidden. */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .js .rv{opacity:1;transform:none;transition:none} }
