/* site-base.css — shared light-ground system for Profile, Works, Journal pages.
 * Palette ties back to Landing v3's Stone & Iron:
 *   - page ground: near-white, warm off-white
 *   - primary type: slate/graphite (inverse of landing's cool off-white)
 *   - accent: same pale cool steel as landing (but darkened slightly for contrast
 *     on a light ground so it still reads as INK, not decoration)
 *   - reveal / highlight: same bright amber as hidden words
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Cormorant+SC:wght@300;400;700&family=DM+Mono:wght@300;400;500&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:       #f7f5f1;            /* warm near-white paper */
  --bg-2:     #efece5;            /* lifted panel */
  --bg-3:     #e7e3db;            /* card on card */
  --ink:      #1a1f24;            /* body ink — near-black, cool */
  --text:     #141a20;            /* headings */
  --dim:      rgba(20,26,32,.72);
  --faint:    rgba(20,26,32,.46);
  --ghost:    rgba(20,26,32,.22);
  --rule:     rgba(20,26,32,.14);
  --rule-s:   rgba(20,26,32,.07);

  /* Pale cool steel from landing — but punched a bit darker so it holds on white.
   * Landing: #a8c7d4 on #0c0e10. Here: #4e7a8a on #f7f5f1. Same hue, higher contrast. */
  --steel:    #4e7a8a;
  --steel-d:  rgba(78,122,138,.55);
  --steel-g:  rgba(78,122,138,.12);

  /* Amber — unchanged from landing reveal */
  --amber:    #e87a3e;
  --amber-d:  rgba(232,122,62,.55);
  --amber-g:  rgba(232,122,62,.14);

  /* Semantic */
  --accent:   var(--steel);
  --accent-d: var(--steel-d);
  --accent-g: var(--steel-g);
  --hi:       var(--amber);

  --f-d: 'Cormorant SC', serif;
  --f-s: 'Cormorant', serif;
  --f-m: 'DM Mono', monospace;

  --ease: cubic-bezier(.2,.7,.2,1);
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--f-s); font-size: 18px; line-height: 1.6;
  overflow-x: hidden; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga", "kern";
}

/* ── Very subtle paper grain ─────────────────────────────── */
body::before {
  content:''; position: fixed; inset: 0; pointer-events: none; z-index: 90;
  opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  background-size: 256px;
  mix-blend-mode: multiply;
}

/* ── Shared top nav ──────────────────────────────────────── */
.s-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 48px 16px;
  background: linear-gradient(to bottom, var(--bg) 70%, rgba(247,245,241,0));
}
.s-nav .n-name {
  font-family: var(--f-d); font-weight: 400;
  font-size: 12px; letter-spacing: .36em;
  color: var(--ink); text-decoration: none;
  transition: color .25s var(--ease);
}
.s-nav .n-name:hover { color: var(--hi); }
.s-nav .n-links { display: flex; gap: 36px; list-style: none; }
.s-nav .n-links a {
  font-family: var(--f-d); font-weight: 400;
  font-size: 11px; letter-spacing: .34em;
  color: var(--faint); text-decoration: none;
  text-transform: uppercase;
  transition: color .25s var(--ease);
  position: relative; padding-bottom: 2px;
}
.s-nav .n-links a::after {
  content:''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1px; background: var(--hi);
  transition: width .35s var(--ease);
}
.s-nav .n-links a:hover { color: var(--ink); }
.s-nav .n-links a:hover::after { width: 100%; }
.s-nav .n-links a.active {
  color: var(--ink);
}
.s-nav .n-links a.active::after { width: 100%; background: var(--accent); }

/* ── Shared footer ─────────────────────────────────────── */
.s-foot {
  margin-top: 120px;
  padding: 48px 48px 40px;
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-m); font-size: 10px; letter-spacing: .2em;
  color: var(--faint); text-transform: uppercase;
}
.s-foot a {
  color: var(--faint); text-decoration: none;
  transition: color .2s var(--ease);
}
.s-foot a:hover { color: var(--hi); }
.s-foot-links { display: flex; gap: 28px; }

/* ── Selection & placeholders ─────────────────────────── */
::selection { background: var(--hi); color: var(--bg); }

/* Placeholder image — used in every image slot.
 * A restrained, on-brand thing: cross-ruled paper with a faint steel tint
 * and an "IMAGE" micro-label. Not slop. */
.placeholder {
  position: relative;
  background:
    linear-gradient(135deg, var(--bg-3), var(--bg-2));
  overflow: hidden;
  color: var(--faint);
}
.placeholder::before {
  content: attr(data-label);
  position: absolute; top: 14px; left: 14px;
  font-family: var(--f-m); font-size: 9px; letter-spacing: .28em;
  color: var(--faint); text-transform: uppercase;
  z-index: 2;
}
.placeholder::after {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg,
      transparent 0, transparent 18px,
      rgba(78,122,138,.06) 18px, rgba(78,122,138,.06) 19px),
    radial-gradient(120% 120% at 30% 20%,
      rgba(78,122,138,.10) 0%, transparent 60%);
}

/* Reusable ornamental rule */
.orn-rule {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  color: var(--accent-d);
}
.orn-rule::before, .orn-rule::after {
  content:''; display: block; width: 60px; height: 1px;
  background: var(--accent-d);
}
.orn-rule .g {
  font-family: var(--f-s); font-style: italic; font-size: 16px;
  color: var(--accent);
}

/* Small-caps tag */
.tag-sc {
  font-family: var(--f-d); font-weight: 400;
  font-size: 10.5px; letter-spacing: .4em;
  color: var(--accent); text-transform: uppercase;
}

/* Shared "back to canvas" pill */
.s-back {
  position: fixed; top: 18px; left: 18px; z-index: 800;
  font-family: var(--f-m); font-size: 10px; letter-spacing: .24em;
  color: var(--faint); text-decoration: none; text-transform: uppercase;
  padding: 8px 12px;
  background: rgba(247,245,241,.92);
  border: 1px solid var(--rule);
  backdrop-filter: blur(6px);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.s-back:hover { color: var(--ink); border-color: var(--accent); }

@media (max-width: 720px) {
  .s-nav { padding: 16px 22px 12px; }
  .s-nav .n-links { gap: 20px; }
  .s-foot { padding: 32px 22px 24px; flex-direction: column; gap: 14px; text-align: center; }
}