/* ============================================================
   ploke — pseudonymous practice / self-advertising site
   Public face = Ploke; real name + credentials revealed on request.
   Dark, sober, over a satin braid. Self-hosted fonts, no external requests.
   ============================================================ */

@font-face {
  font-family: 'Crimson Pro';
  src: url('fonts/CrimsonPro-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Crimson Pro';
  src: url('fonts/CrimsonPro-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --void:      #0a0b0f;
  --mist:      #cdd1dc;
  --mist-soft: #9297a8;
  --faint:     #5a6072;
  --gold:      #e6b878;
  --line:      rgba(205,213,230,0.09);
  --serif: 'Crimson Pro', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --pad: clamp(1.25rem, 5vw, 3.5rem);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--mist);
  background: var(--void);
  font-size: clamp(15px, 0.9vw + 13px, 17px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* fixed braid behind everything */
#braid {
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block;
  background-color: #12141b;
  background-image:
    radial-gradient(120% 90% at 50% -8%, rgba(48,54,70,0.45) 0%, rgba(26,30,40,0.20) 46%, transparent 74%),
    linear-gradient(180deg, #191d26 0%, #14171f 60%, #0f1117 100%);
}

.page { position: relative; z-index: 1; }
.wrap { width: min(100% - 2 * var(--pad), 58rem); margin-inline: auto; }
.col  { max-width: 60ch; }

a { color: var(--gold); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
a:hover { border-color: var(--gold); }

/* ---- Hero ---- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 10vh; }
/* soft dark halo behind the hero text — keeps it readable over the braid
   without dimming the braid globally; fades to nothing so ribbons still bleed through */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(78% 68% at 34% 44%,
    rgba(6,7,10,0.82) 0%, rgba(6,7,10,0.55) 34%, rgba(6,7,10,0) 74%);
}
.hero > .wrap { position: relative; z-index: 1; }
.mark {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(1.9rem, 5.5vw, 3.4rem);
  letter-spacing: -0.01em; color: var(--mist); line-height: 1;
}
.mark .dot { color: var(--gold); }
.hero .gloss { font-family: var(--mono); font-size: .82rem; letter-spacing: .04em; color: var(--mist-soft); margin-top: 1.4rem; }
.hero .gloss .gr { font-family: var(--serif); font-style: italic; font-size: 1.3em; color: var(--gold); }
.threads { font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 1.8rem); color: var(--mist); margin-top: 1.6rem; max-width: 40ch; line-height: 1.45; }
.threads .k { color: var(--mist-soft); }
.lede {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.2vw, 2.05rem);
  line-height: 1.35; color: var(--mist); font-weight: 400;
  margin-top: 1.8rem; max-width: 26ch; text-wrap: balance;
}
.lede .soft { color: var(--mist-soft); }
.hero .sub {
  font-family: var(--sans); font-size: 1rem; color: var(--mist-soft);
  margin-top: 1.5rem; max-width: 46ch;
}
.scroll-hint { font-family: var(--mono); font-size: .68rem; letter-spacing: .25em; text-transform: uppercase; color: var(--faint); margin-top: 3.5rem; }

/* ---- Content region: scrim so text reads over the fixed braid ---- */
.content { background: linear-gradient(180deg, transparent 0, rgba(6,7,10,0.88) 10%, rgba(6,7,10,0.94) 100%); }
.block { padding-block: clamp(2.75rem, 7vw, 5rem); border-top: 1px solid var(--line); }
.block:first-child { border-top: 0; }
.label { font-family: var(--mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); margin-bottom: 2rem; }

/* What I do */
.offer { padding-block: 1.5rem; border-top: 1px solid var(--line); }
.offer:first-of-type { border-top: 0; }
.offer h3 { font-family: var(--serif); font-weight: 560; font-size: 1.5rem; line-height: 1.15; color: var(--mist); }
.offer p { color: var(--mist-soft); margin-top: .35rem; max-width: 60ch; }

/* Writing */
.entry { display: block; padding-block: 1.4rem; border-top: 1px solid var(--line); }
.entry:first-of-type { border-top: 0; }
.entry h3 { font-family: var(--serif); font-weight: 560; font-size: 1.35rem; color: var(--mist); transition: color .2s; }
a.entry:hover h3 { color: var(--gold); }
.entry .status { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-top: .4rem; }
.entry .desc { color: var(--mist-soft); margin-top: .35rem; max-width: 60ch; }
.entry .links { margin-top: .55rem; font-family: var(--mono); font-size: .78rem; display: flex; flex-wrap: wrap; gap: 1.1rem; }
.entry .links a { color: var(--mist-soft); border-bottom: 0; }
.entry .links a:hover { color: var(--gold); }
.entry .links a::before { content: '↗ '; color: var(--faint); }

/* Advisory */
.advisory p { color: var(--mist-soft); max-width: 62ch; }
.advisory p + p { margin-top: 1rem; }
.advisory .cta { margin-top: 1.8rem; font-family: var(--mono); font-size: .95rem; }
.advisory .cta a { color: var(--mist); }

/* ---- Colophon ---- */
.colophon { padding-block: 2.5rem 3.5rem; border-top: 1px solid var(--line); background: rgba(5,6,9,0.96); }
.colophon .wrap { display: flex; flex-wrap: wrap; gap: 1rem 3rem; justify-content: space-between; align-items: baseline; }
.colophon .gloss { font-family: var(--serif); font-style: italic; color: var(--mist-soft); font-size: .95rem; }
.colophon .gloss .gr { color: var(--gold); }
.colophon .handle { font-family: var(--mono); font-size: .82rem; color: var(--mist-soft); }
.colophon .handle a { color: var(--mist); }
.colophon .links { font-family: var(--mono); font-size: .8rem; display: flex; flex-wrap: wrap; gap: 1.3rem; }
.colophon .links a { color: var(--mist-soft); }
.colophon .links a:hover { color: var(--gold); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }