/*
Theme Name: Bestuff
Theme URI: https://bestuff.site/
Description: Twenty Twenty-Five child theme for Bestuff (bestuff.site), the Becoming Known publishing hub. Paper-and-ink editorial surface, one amber accent, Korean-first typography.
Author: Marcus Gong (공명환)
Author URI: https://bestuff.site/about/
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bestuff
*/

/* ==========================================================================
   Bestuff design DNA. Single source of truth: infra/DESIGN.md.
   The substrate below (tokens, body typography, signatures, motion policy)
   is shared by all three direction candidates and is locked. Everything
   direction-dependent is isolated in the "direction: A" section at the
   bottom of this file so it can be swapped without touching the substrate.
   No gray-border cards, no gradients, radius 0 to 2px only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   Mirrors DESIGN.md section 2. Source of the values:
   브랜딩요소/becoming-known-brand-tokens_260712.json
   -------------------------------------------------------------------------- */

:root {
  /* DESIGN.md section 2: light-only. The paper surface never inverts;
     this opts out of UA auto-darkening. Dark moments are local ink-deep
     bands, not a theme. */
  color-scheme: light;

  --ink: #1b1e24;                 /* body ink, headlines */
  --ink-deep: #14171d;            /* dark band background (footer, quote panels only, used sparingly) */
  --paper: #faf9f5;               /* page surface, dominant color */
  --paper-2: #f1eee7;             /* surface separation by lightness, instead of gray-border cards */
  --ivory: #f6f3ec;               /* body text on dark bands */
  --accent: #c98a52;              /* amber: rules, seal, decoration ONLY. Never meaningful text on light paper (contrast ~2.9:1, fails AA) */
  --accent-deep: #8a4f21;         /* meaningful text on light paper: kickers, numbers, links (contrast ~6.3:1, passes AA) */
  --steel: #8fa1b3;               /* secondary signal, direction B candidate; minimal in direction A */
  --line: rgba(27, 30, 36, 0.14); /* hairline */
  --muted: #5a6068;               /* meta text: dates, bylines. Never lighter than this when it carries information */

  --t-fade: 160ms ease-out;       /* the only motion token */

  --font-body: "Pretendard Variable", "Pretendard", "Malgun Gothic", "Segoe UI", sans-serif;
  /* --font-display is direction-dependent. The base value stays on the body
     stack; the active direction section at the bottom of this file overrides
     it. Swapping the direction section swaps the display voice. */
  --font-display: var(--font-body);
}

/* --------------------------------------------------------------------------
   2. Self-hosted body font
   setup-wordpress.sh downloads the woff2 at deploy time.
   See assets/fonts/README.md for the source and manual fallback.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Pretendard Variable";
  src: url("assets/fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   3. Korean line-break baseline (global, invariant layer)
   An eojeol must never split mid-word (cjk-rendering-safety).
   -------------------------------------------------------------------------- */

:root,
body {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   4. Base typography
   DESIGN.md section 3: base 17px, body line-height 1.8 (long-form Korean),
   headings line-height 1.3, editorial scale x1.333 (declared in theme.json).
   -------------------------------------------------------------------------- */

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink);
  background-color: var(--paper);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.3;
  color: var(--ink);
}

a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--t-fade);
}

/* --------------------------------------------------------------------------
   5. Signatures (DESIGN.md section 1)
   Signature 3 (amber seal monogram) is an asset, not a CSS utility:
   favicon, header mark, footer. Final art is pending Marcus's direction
   pick, so nothing is styled for it here.
   -------------------------------------------------------------------------- */

/* Signature 1: double rule. Section openings and above the footer only.
   Never between body paragraphs (overuse turns the page into a table).
   Pattern: 1px ink rule, 3px gap, 1px hairline. Works on <hr> or <div>. */
.bs-rule {
  display: block;
  /* WP core ships border-box inheritance; content-box keeps height 3px
     as the gap between the two borders (1px ink, 3px gap, 1px hairline). */
  box-sizing: content-box;
  height: 3px;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  background: transparent;
}

/* Signature 2: kicker label. Category label above an article title and
   home pillar labels. No leading dash. Never for emphasis inside body
   text. Meaningful text on light paper, therefore accent-deep. */
.bs-kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
}

/* --------------------------------------------------------------------------
   6. Reduced motion: global killswitch (DESIGN.md section 5)
   Removes even the remaining fade.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* direction: A (판권지) - swap this section if Marcus picks B or C */

/* Direction A "Colophon": the colophon page of a publisher that never goes
   out of print. Ink on paper, serif headlines, one amber seal, near-static.
   Everything below is direction-A-only; the substrate above stays as-is
   for directions B and C. */

:root {
  /* Korean serif display stack for headlines. Self-hosting Noto Serif KR
     is pending Marcus ratification (DESIGN.md section 8, open item 3);
     until then this relies on system-installed fonts and falls back to
     any available serif. */
  --font-display: "Noto Serif KR", "Nanum Myeongjo", serif;
}

/* Serif display is for h1 and h2 headlines only (DESIGN.md section 3).
   h3 to h6 and body text stay on Pretendard; body serif is banned. */
h1,
h2 {
  font-family: var(--font-display);
}

/* Direction A motion policy: static first. No scroll animation, no
   parallax, no stagger. Link hover stays underline plus accent-deep;
   the fade token on links above is the only motion. */