/* =========================================================================
   tenure.css — the TENURE wordmark (src/wordmark.tsx). Loaded after app.css.
   "TENU" renders in foreground ink; "RE" in a worn-brass finish with a fine
   grain texture. A classic long-shadow extrusion (a dense stack of
   incrementally-offset text-shadow layers, generated in wordmark.tsx and
   handed down via the --wm-shadow-stack custom property) is cast behind the
   whole word — it starts AT the glyphs with no gap and reads as one
   continuous tall form, not a detached mirrored copy.
   Pure CSS/SVG — no raster assets. Theme-aware via the app's existing
   .light / .dark / prefers-color-scheme convention (see stratosfyre.css).
   ========================================================================= */

:root {
  /* Worn-brass gradient stops — dark theme (default). A visible specular
     band (46% -> 52%) reads as a glint of light on aged metal. */
  --wm-brass-1: #5a4318;
  --wm-brass-2: #8c6a2c;
  --wm-brass-3: #d7b56a;
  --wm-brass-4: #f1dea6;
  --wm-brass-5: #c49a45;
  --wm-brass-6: #7b5b24;

  /* Long-shadow ink — dark theme: a smoky near-black with a slight lift so
     it reads as a cast shadow on the dark card rather than pure black. The
     --c-foreground "backer" extrusion in the shadow rule below is what
     actually keeps the tall form visible against a dark background. */
  --wm-shadow-ink: 220 15% 3%;
}

/* Light theme: darken the brass highlight + edges so the metal keeps
   contrast against a white card instead of washing out; darken the shadow
   ink since it now needs to read against a light card. */
.light {
  --wm-brass-1: #4a3612;
  --wm-brass-2: #8c6a2c;
  --wm-brass-3: #d7b56a;
  --wm-brass-4: #e3c98a;
  --wm-brass-5: #c49a45;
  --wm-brass-6: #4a3612;

  --wm-shadow-ink: 220 20% 10%;
}
@media (prefers-color-scheme: light) {
  html:not(.dark):not(.light) {
    --wm-brass-1: #4a3612;
    --wm-brass-2: #8c6a2c;
    --wm-brass-3: #d7b56a;
    --wm-brass-4: #e3c98a;
    --wm-brass-5: #c49a45;
    --wm-brass-6: #4a3612;

    --wm-shadow-ink: 220 20% 10%;
  }
}

.wordmark {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  isolation: isolate;
  font-family: var(--font-display, "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif);
  font-weight: 800;
  line-height: 1;
  user-select: none;
}

.wm-row {
  position: relative;
  display: inline-flex;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  /* the tracking after the final glyph reads as extra right padding — pull
     it back so the wordmark doesn't look off-center in its box. */
  margin-right: -0.18em;
}

.wm-tenu,
.wm-re {
  position: relative;
  display: inline-block;
  font-weight: 800;
}

.wm-tenu {
  color: hsl(var(--c-foreground));
}

.wm-re {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E"),
    linear-gradient(
      100deg,
      var(--wm-brass-1) 0%,
      var(--wm-brass-2) 28%,
      var(--wm-brass-3) 46%,
      var(--wm-brass-4) 52%,
      var(--wm-brass-5) 60%,
      var(--wm-brass-6) 100%
    );
  background-blend-mode: overlay;
  background-size:
    48px 48px,
    220% 100%;
  background-repeat: repeat, no-repeat;
  background-position:
    0 0,
    0 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* faint 1px inner bevel — text-shadow is computed from the glyph outline
     regardless of the transparent fill, so this stays crisp. */
  text-shadow:
    0 1px 0 hsl(0 0% 100% / 0.16),
    0 -1px 0 hsl(0 0% 0% / 0.4);
}

/* ---- Long-shadow extrusion ----
   A duplicate of each span's letters (content: attr(data-text)), painted
   with a dense stack of incrementally-offset text-shadow layers instead of
   a transform — the offsets start at (0,0)-ish so the extrusion is welded
   to the glyph with no gap, and grow down-and-right, which is what reads as
   "falling behind, skewed by a low light" rather than a mirrored copy. The
   layer stack itself lives in --wm-shadow-stack (set inline per instance by
   wordmark.tsx, since its length varies by size). */
.wm-tenu::before,
.wm-re::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  text-shadow: var(--wm-shadow-stack, none);
  pointer-events: none;
  z-index: -1;
  white-space: nowrap;
}

/* Per-size shadow scale (multiplies every offset in --wm-shadow-stack) and
   type scale. */
.wordmark-sm {
  --wm-shadow-scale: 0.62;
  font-size: 22px;
}
.wordmark-md {
  --wm-shadow-scale: 0.85;
  font-size: 26px;
  margin-bottom: 6px;
}
.wordmark-lg {
  --wm-shadow-scale: 1;
  font-size: 48px;
  align-items: center;
  margin-bottom: 8px;
}
.wordmark-lg .wm-row {
  letter-spacing: 0.16em;
  margin-right: -0.16em;
}

.wm-tagline {
  display: block;
  /* Clears the long-shadow's fade zone so the tagline reads crisply instead
     of sitting inside the shadow. */
  margin-top: 58px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.3em;
  text-transform: none;
  letter-spacing: 0.01em;
  color: hsl(var(--c-foreground-muted));
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

/* ---- Sidebar brand: stack the wordmark above the site-name line (instead
   of beside it) and give the row enough height for the uncropped, shorter
   sm shadow. .sidebar-brand / .brand-mark are app.css classes — these rules
   layer on top (tenure.css loads after app.css) without editing that file. */
.sidebar-brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.sidebar-brand .brand-mark {
  height: auto;
  min-height: 52px;
  align-items: flex-start;
  padding-top: 6px;
}
.sidebar-brand .brand-meta {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .wordmark * {
    transition: none !important;
    animation: none !important;
  }
}

/* Print: plain text, no brass, no shadows. */
@media print {
  .wm-tenu::before,
  .wm-re::before {
    display: none;
  }
  .wm-re {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
    color: black;
    text-shadow: none;
  }
  .wm-tenu {
    color: black;
  }
}