/*
 * 00-tokens.css  —  カスタムプロパティと@font-face
 *
 * このファイル群は読み込み順がそのままカスケードになる。
 * functions.php の ichika_style_parts() が順番を持っている。
 * 並べ替える前に tools/vr の回帰テストを走らせること。
 */

:root{--pink:#8d76d0;--red:#6d50c5;--deep-red:#4a3097;--wine:#2d1d5d;--ink:#110b23;--desk:#120e24;--paper:#fffaf9;--white:#fff;--gap:clamp(16px,2vw,30px);--font-body:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;--font-brand:"Grenze Gotisch",Georgia,"Times New Roman",serif;--font-tagline:"Yu Mincho","Hiragino Mincho ProN",YuMincho,serif;--body-leading:1.78;--meta-leading:1.45;--card-leading:1.38}
/* v0.9.2: a single accent colour, and one label fewer.

   Gold is the only hue on this site that is not part of the red ramp, so it
   is kept to two jobs and nothing else:
     --brass  the punch-hole ring, i.e. actual hardware in the paper metaphor
     --gold   supplementary information that should read as a side note
   Both were checked against the surfaces they sit on: --gold reaches 5.05:1
   on the white cards, so it stays legible as small text. */
:root{
  --gold:#8a6a17;
  --brass:#a8842c;
}
/* v0.9.5: a highlighter stroke under the five section headings.

   Another stationery gesture, alongside the tape, the punch hole and the
   brass frame — not a new metaphor. Yellow is used rather than the existing
   gold because a highlighter reads as yellow: it is the colour of the tool,
   not a new colour in the palette.

   Scope is deliberately the five section headings only — ABOUT ME, CONTACT,
   TRPG LOG, WORKS, NOTES. Individual article and log titles are left alone,
   so exactly one stroke is drawn per page and the mark keeps its meaning.
   The 404 heading is excluded too; marking an error is not a compliment.

   The body.page guard matters: single.php, single-jetpack-portfolio.php,
   single-trpg-log.php and page.php all carry .wrap.paper-page, so a bare
   main.paper-page selector (as shipped in v0.9.5) also marked every article
   and log title. Fixed in v0.9.6.

   These five labels are short and never wrap, which the stroke depends on:
   the heading is inline-block so the box hugs the text, but a heading long
   enough to wrap goes full-width and the stroke would overshoot the last
   line. Wrapping titles would need the text in its own span. */
:root{
  --marker-pale:rgba(232,190,74,.38);
  --marker-deep:rgba(214,164,44,.66);
}
/* v1.1.33: true-black exposed background on every viewport.
   Override both the desk variable and all outer surfaces so legacy/translucent
   rules cannot reveal the former aubergine background. */
:root{
  --desk:#000;
}
/* v1.1.34: header and navigation are one continuous aubergine surface.
   Gold is reserved for text / hover fill; no gold framing or dividers. */
:root{
  --nav-aubergine:#21182f;
}
/* Page titles / marker */
:root{
  /* v1.2.2: was a flat 9px. Relative to the heading now, so the stroke keeps
     its proportion whether the title is 3rem on a phone or 4.5rem on a desktop,
     and thick enough to read as a marker rather than a rule. */
  --marker-stroke-height:.30em;
}
/* ============================================================
   v1.1.88 — self-hosted display faces
   Google Fonts is no longer contacted. Only the Latin subset is
   bundled: both faces set short Latin strings (the site name and
   the navigation labels), so latin-ext would ship 16KB of accented
   glyphs this site never renders.
   Noto Serif JP is intentionally absent — see ichika_assets().
   ============================================================ */
@font-face{
  font-family:"Grenze Gotisch";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../../assets/fonts/grenze-gotisch-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Almendra";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../../assets/fonts/almendra-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ============================================================
   v1.1.88 — wide and full-width blocks
   add_theme_support('align-wide') was declared from the start but
   nothing implemented it, so both editor options did nothing.

   The bleed cannot be derived from the viewport: on desktop the
   left rail takes 44vw, so the reading column is a fraction of the
   window and the room available beside it varies by breakpoint.
   The paper is also a different element at each breakpoint: above
   900px the cream sheet is article.entry, below it the background
   moves to main.paper-page and .entry becomes transparent, so the
   room available is measured against whichever one is painted.

   Above 900px the sheet's inner padding is proportional, and the
   tightest side (the right) is 6.2% of the content column at every
   width from 1440 to 1920; 5.5% keeps a few pixels of slack there
   and stays well inside the fixed 65px padding below 1280. Under
   900px the sheet's padding is a fixed 22px, so the bleed is a flat
   20px. Verified at 360 / 390 / 480 / 560 / 700 / 768 / 820 / 900 /
   901 / 1000 / 1100 / 1216 / 1280 / 1440 / 1600 / 1920px on both
   the post and the fixed-page layouts.
   ============================================================ */
:root{
  --ichika-wide-bleed:0px;
  --ichika-full-bleed:0px;
}
@media (min-width:901px){
  :root{
      --ichika-wide-bleed:3.5%;
      --ichika-full-bleed:5.5%;
    }
}