/* ══════════════════════════════════════════════════════════════════════════
   Hnoss Capital — hnosscapital.com

   The visual system is inherited wholesale from the Hnoss trading terminal:
   the same porcelain ground, the same single champagne-gold accent, the same
   Inter / JetBrains Mono pairing, and the same animation grammar (a rune that
   draws itself into the stone, a 105° specular sweep, a slow glow pulse).
   Nothing here invents a second Hnoss language.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Type ───────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 100 900;          /* variable */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/jetbrainsmono-latin-var.woff2') format('woff2');
  font-weight: 100 800;          /* variable */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Design tokens (identical to the terminal's :root) ──────────────────── */
:root {
  --bg:            #e9ebe6;
  --card:          #ffffff;
  --border:        rgba(120, 96, 44, 0.20);
  --border-strong: rgba(120, 96, 44, 0.38);
  --accent:        #8a6d2e;
  --gold:          #8a6d2e;
  --gold-bright:   #6f5622;
  --gold-deep:     #6E4708;
  --text:          #171d1f;
  --dim:           #4c5a5f;
  --muted:         #7d8a8e;

  --font-ui:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, 'Courier New', monospace;

}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }

/* ── Ground ─────────────────────────────────────────────────────────────── */
body {
  min-height: 100vh;
  min-height: 100dvh;
  /* Stack everything in a single top-aligned column: the mark sits at the top
     of the page and the contact line hangs directly beneath it. */
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--bg);
  /* the terminal's two atmospheric washes: gold from the upper right,
     a cool one from the upper left */
  background-image:
    radial-gradient(1100px 480px at 82% -8%, rgba(138, 109, 46, 0.05), transparent 60%),
    radial-gradient(820px 460px at 0% 0%,   rgba(44, 107, 135, 0.04), transparent 55%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── Composition ────────────────────────────────────────────────────────── */
.stage {
  position: relative;
  z-index: 1;
  /* The mark holds near the top of the page (not vertically centred). */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: clamp(44px, 11vh, 128px);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── The name ───────────────────────────────────────────────────────────── */
.lockup {
  position: static;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(11px, 1.9vmin, 20px);
}

/* ── Contact ────────────────────────────────────────────────────────────── */
.contact {
  /* Directly beneath the mark, not pinned to the bottom of the screen. */
  position: static;
  z-index: 2;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: clamp(14px, 2.4vh, 30px);
  padding: 0 20px;
  opacity: 0;
  animation: rise 1s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards;
  pointer-events: none;   /* only the link itself is clickable */
}

.contact a {
  pointer-events: auto;
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 1.3vmin, 0.84rem);
  font-weight: 400;
  letter-spacing: 0.07em;
  /* --muted is only 2.97:1 here — quiet enough, but not readable enough.
     --dim keeps the line recessive at a compliant 5.96:1. */
  color: var(--dim);
  text-decoration: none;
  padding: 8px 4px;                 /* comfortable tap target */
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px;
  background-position: 50% calc(100% - 6px);
  background-repeat: no-repeat;
  transition: color 0.35s ease, background-size 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.contact a:hover,
.contact a:focus-visible { color: var(--gold-bright); background-size: 100% 1px; }
.contact a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 3px; }

/* ── Utilities ──────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

::selection { background: rgba(138, 109, 46, 0.18); color: var(--text); }

/* ── Short / landscape viewports: keep the whole lockup on one screen ───── */
@media (max-height: 560px) and (orientation: landscape) {
  .stage  { --mark-size: clamp(118px, 32vmin, 196px); --lockup-gap: clamp(14px, 2.6vmin, 24px); }
  .lockup { gap: clamp(7px, 1.4vmin, 12px); }
}

/* ── Very large screens: the mark holds its scale rather than ballooning ── */
@media (min-width: 2200px) {
  .stage { --mark-size: 400px; }
}

/* ── Reduced motion: everything resolves to its finished state ──────────── */
@media (prefers-reduced-motion: reduce) {
  .lockup,
  .contact  { opacity: 1; animation: none; }
  .contact a{ transition: color 0.2s ease; }
}

/* ── Hero lockup: candle-H emblem + centred foil wordmark ───────────────────
   NOTE: .htaccess sets `style-src 'self'`, so an inline <style> block in
   index.html is BLOCKED on the live site (it works locally, where the dev
   server sends no CSP). All hero CSS therefore lives HERE, and the <link> in
   index.html carries a ?v= cache-buster because .htaccess caches CSS 1 month.

   Layout: the WORDMARK is what gets centred on the page (it sits in an
   inline-block .wordbox whose width is the wordmark alone), and the EMBLEM is
   absolutely positioned at right:100% of that box so it hangs off to the left
   without shifting the centred word. Both sizes are vw-locked to the ratio
   measured off the operator's chosen signature-sheet row D — candle height
   1.17x the wordmark block, gap 0.55x the candle height. */
.hero-lockup {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  text-align: center;
  animation: hero-rise 1.35s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}
.hero-lockup .wordbox { position: relative; display: inline-block; }

.hero-lockup .glow {
  position: absolute; left: -14%; top: -75%; width: 128%; height: 250%; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(212, 178, 110, 0.32), transparent 62%);
  filter: blur(10px);
  opacity: 0;
  animation: hero-glow-in 1.6s ease 0.5s both, hero-breathe 6s ease-in-out 2.1s infinite;
  pointer-events: none;
}

.hero-lockup .wshine { position: relative; display: block; overflow: hidden; z-index: 1; }
.hero-lockup .hero-word { display: block; width: min(56vw, 440px); height: auto; }

.hero-lockup .eshine {
  position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
  margin-right: min(10.9vw, 85px);
  display: block; overflow: hidden; z-index: 1;
}
.hero-lockup .hero-emblem { display: block; height: min(19.75vw, 155px); width: auto; }

/* The specular reveal: a bright gold band masked to each asset's own glyphs,
   sweeping once shortly after the rise, then recurring on a slow cadence. */
.hero-lockup .wshine::after,
.hero-lockup .eshine::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 36%, rgba(255, 251, 238, 0.95) 50%, transparent 64%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  background-position: 185% 0;
  animation: hero-sweep 7.5s ease-in-out 0.95s infinite;
}
.hero-lockup .wshine::after {
  -webkit-mask: url("../assets/img/hnoss-wordmark.png") no-repeat center / contain;
          mask: url("../assets/img/hnoss-wordmark.png") no-repeat center / contain;
}
.hero-lockup .eshine::after {
  -webkit-mask: url("../assets/img/hnoss-emblem.png") no-repeat center / contain;
          mask: url("../assets/img/hnoss-emblem.png") no-repeat center / contain;
}

@keyframes hero-rise { from { opacity: 0; transform: translateY(18px) scale(0.965); } to { opacity: 1; transform: none; } }
/* One clean pass (~1.6s of the 7.5s cycle), then the band rests off-screen. */
@keyframes hero-sweep { 0% { background-position: 185% 0; } 21%, 100% { background-position: -85% 0; } }
@keyframes hero-glow-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-breathe { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hero-lockup,
  .hero-lockup .wshine::after,
  .hero-lockup .eshine::after,
  .hero-lockup .glow { animation: none; }
  .hero-lockup .glow { opacity: 1; }
}

/* ── Legibility ─────────────────────────────────────────────────────────────
   The foil gold is built for the dark surfaces; on this porcelain ground its
   highlights wash out. Deepen and enrich the gold and lift it off the
   background with a hairline shadow (verified side-by-side against the raw
   foil); darken the contact line to match its added presence. */
.hero-lockup .hero-word,
.hero-lockup .hero-emblem {
  filter: brightness(0.70) saturate(1.24) contrast(1.06)
          drop-shadow(0 1px 1px rgba(110, 71, 8, 0.30));
}
.contact a { color: #2f2611; }