/* =====================================================================
   Noble Father Creations — shared theme tokens
   Lifted verbatim from The Portals (nfcportals.netlify.app) so the
   statue gallery and the portal render from one identical palette.

   Change a value here and it propagates to every page that links this
   file. No component stylesheet may hardcode a colour or a font stack.
   ===================================================================== */

:root {
  /* --- surfaces --- */
  --obsidian: #0a0a0c;
  --panel: #101015;
  --card: #15141a;
  --line: rgba(201, 162, 75, .22);
  --bg: #0a0a0c;

  /* --- ink --- */
  --cream: #e9e1cf;
  --cream-dim: #a49d8c;

  /* --- gold leaf ---
     --gold-dim is only ever used at 9-11px (piece ids, counters), far
     below the large-text exemption, so it has to clear 4.5:1 on its own.
     #8a7340 measured 4.34:1 on --bg and failed; this clears ~5.9:1. */
  --gold: #c9a24b;
  --gold-bright: #dcbb6e;
  --gold-dim: #a68b4f;

  /* Hairlines that are the ONLY boundary of an interactive control must
     clear 3:1 for WCAG 1.4.11; the decorative rule can stay quiet. */
  --line-strong: rgba(201, 162, 75, .46);

  /* --- the phosphorescent core --- */
  --sglow: #7fe39a;

  /* --- type --- */
  --display: 'Fraunces', Georgia, serif;
  --body: 'Newsreader', Georgia, serif;
  --label: 'Jost', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* --- motion ---
     --ease is the existing on-screen-movement curve, kept as-is since it's
     already used throughout. --ease-out/--ease-in-out add the two other
     cases design-engineering practice calls for: entering/exiting elements
     (out) and constant morphs (in-out) each want their own curve, not one
     curve reused everywhere. */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

body.night {
  --bg: #040505;
  background: #040505;
}

/* ---------------------------------------------------------------
   Reset + base — matches the portal's base layer exactly
   --------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0 }

/* The `hidden` attribute only sets `display:none` at user-agent priority,
   so any component rule using display:flex/grid silently overrides it and
   the element stays visible. Everything here toggles visibility through
   `hidden`, so make it win. */
[hidden] { display: none !important }

html { scroll-behavior: smooth }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--body);
  font-optical-sizing: auto;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 1s;
}

::selection { background: rgba(201, 162, 75, .3); color: #fff }

img { display: block; max-width: 100% }

h1, h2, h3 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.14;
  color: var(--gold-bright);
}

.wrap { max-width: 1020px; margin: 0 auto; padding: 0 28px }
.wrap.narrow { max-width: 740px }
.ctr { text-align: center }

.eyebrow {
  font-family: var(--label);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------------------------------------------------------------
   Top bar + drawer — the portal's site chrome, shared
   --------------------------------------------------------------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: .8rem;
  height: 56px; padding: 0 16px;
  background: linear-gradient(to bottom, rgba(6, 6, 8, .94), transparent);
  transition: .4s;
}

.menu-btn {
  font-size: 1.05rem; background: var(--card); color: var(--gold);
  border: 1px solid var(--line-strong); border-radius: .5rem;
  width: 40px; height: 40px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, transform 120ms var(--ease-out);
}
.menu-btn:hover { border-color: var(--gold) }
.menu-btn:active { transform: scale(.92) }

.tb-mark {
  font-family: var(--label); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cream); flex: 1;
}
.tb-mark b { color: var(--gold); font-weight: 600 }

/* The brandmark doubles as the way back to the wider catalogue -- the
   convention a reader already expects of a logo, and on a piece page it is
   the only route out. As an <a> it needs the link styling put back to how
   the plain mark reads, plus a quiet hover so it reads as pressable. */
a.tb-mark { text-decoration: none; transition: color .25s }
a.tb-mark:hover { color: var(--gold) }
a.tb-mark:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px }

.tb-switch {
  font-family: var(--label); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cream-dim);
  background: rgba(20, 20, 26, .7); border: 1px solid var(--line-strong);
  border-radius: 30px; padding: 8px 14px; cursor: pointer;
  transition: border-color .3s, color .3s, transform 120ms var(--ease-out);
}
.tb-switch:hover { border-color: var(--gold); color: var(--gold) }
.tb-switch:active { transform: scale(.95) }

.scrim {
  position: fixed; inset: 0; background: rgba(4, 4, 6, .72);
  backdrop-filter: blur(3px); z-index: 70; opacity: 0;
  pointer-events: none; transition: opacity .3s;
}
.scrim.show { opacity: 1; pointer-events: auto }

.drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(86vw, 360px); z-index: 71;
  background: linear-gradient(180deg, #14131a, #0a0a0c);
  border-right: 1px solid var(--line);
  transform: translateX(-105%);
  transition: transform .34s cubic-bezier(.3, .8, .3, 1);
  overflow-y: auto; padding: 1.3rem 1.1rem 3rem;
  box-shadow: 14px 0 50px rgba(0, 0, 0, .6);
}
.drawer.show { transform: translateX(0) }

.dr-brand { font-family: var(--display); font-weight: 600; font-size: 1.12rem; color: var(--cream) }
.dr-brand b { color: var(--gold-bright) }

.dr-tag {
  font-family: var(--label); font-size: .56rem; letter-spacing: .24em;
  color: var(--cream-dim); text-transform: uppercase; margin: .3rem 0 1.2rem;
}

.dr-part-head {
  font-family: var(--label); font-weight: 600; font-size: .6rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
  padding: .3rem 0; border-bottom: 1px dashed rgba(201, 162, 75, .3);
  margin: 1.1rem 0 .45rem;
}

.dr-row {
  display: flex; gap: .6rem; align-items: baseline; text-decoration: none;
  color: var(--cream); padding: .55rem .3rem; border-radius: .4rem;
  font-size: .92rem; transition: background .2s, transform 120ms var(--ease-out);
  cursor: pointer; width: 100%; text-align: left; background: none; border: none;
  font-family: var(--body);
}
.dr-row:hover { background: rgba(201, 162, 75, .1) }
.dr-row:active { transform: scale(.98) }
.dr-row .n {
  font-family: var(--mono); font-size: .64rem; color: var(--gold-dim);
  flex: none; min-width: 1.4rem;
}

/* ---------------------------------------------------------------
   Hero — gold-leaf wordmark, same gradient as the portal
   --------------------------------------------------------------- */
/* The catalogue variant: one line of identity, then straight to the work.
   A full-height hero costs a phone user their entire first screen. */
.site-hero.compact {
  min-height: 0;
  padding: 84px 24px 20px;
}
.site-hero.compact h1 { font-size: clamp(1.9rem, 6vw, 3.2rem); margin-bottom: .5rem }
.site-hero.compact .meta { line-height: 1.6 }

.site-hero {
  min-height: 62vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 120px 28px 46px;
}
.site-hero .brand {
  font-family: var(--label); font-size: .72rem; letter-spacing: .4em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem;
}
.site-hero h1 {
  font-size: clamp(2.6rem, 9vw, 5.4rem); letter-spacing: .04em;
  line-height: .98; margin-bottom: 1.4rem; font-weight: 600;
  background: linear-gradient(100deg, #8E6B2F, #F4E2B4 26%, #C9A35B 46%, #F7EBC6 62%, #8E6B2F 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 12px rgba(201, 163, 91, .22));
}
.site-hero .tag {
  font-style: italic; font-size: clamp(1.1rem, 3vw, 1.5rem);
  color: var(--cream); max-width: 30ch; margin-bottom: 1.8rem;
}
.site-hero .meta {
  font-family: var(--label); font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cream-dim);
  max-width: 42ch; line-height: 2.1;
}

/* ---------------------------------------------------------------
   Buttons — portal pill buttons
   --------------------------------------------------------------- */
.btn {
  font-family: var(--label); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; padding: 14px 26px; border-radius: 40px;
  text-decoration: none; font-weight: 600; transition: .3s;
  border: 1px solid transparent; cursor: pointer;
}
.btn.g { color: var(--obsidian); background: var(--gold) }
.btn.g:hover { background: var(--gold-bright) }
.btn.o { color: var(--cream); border-color: var(--line) }
.btn.o:hover { border-color: var(--gold); color: var(--gold) }

.links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center }

.rule { height: 1px; background: rgba(201, 162, 75, .25); max-width: 120px; margin: 24px auto }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
footer {
  text-align: center; padding: 70px 0;
  border-top: 1px solid rgba(201, 162, 75, .12); margin-top: 80px;
}
footer .mk {
  font-family: var(--label); font-size: .72rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold);
}
footer .hd {
  font-family: var(--label); font-size: .66rem; letter-spacing: .14em;
  color: var(--cream-dim); margin-top: .6rem;
}

/* ---------------------------------------------------------------
   Scroll-in reveal — portal's .ro pattern
   --------------------------------------------------------------- */
.ro { opacity: 0; transform: translateY(22px); transition: opacity .9s, transform .9s }
.ro.in { opacity: 1; transform: none }

@media (prefers-reduced-motion: reduce) {
  .ro { opacity: 1; transform: none }
  html { scroll-behavior: auto }
}