/*
Theme Name: Wangsun
Theme URI: https://wangsun.com
Description: Classical institutional theme for the Wangsun family private record.
Author: Wangsun Family
Template: twentytwentyfour
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
License: GNU General Public License v2 or later
Text Domain: wangsun
*/

/* Neutralise parent chrome on the custom front page */
#wangsun-page * { box-sizing: border-box; }

  #wangsun-page {
    --ink:      #101418;
    --stone:    #E4E1DA;
    --paper:    #EEEBE4;
    --slate:    #4E545C;
    --rule:     #C4BFB4;
    --claret:   #6E2230;
    --gilt:     #A98442;

    --fg: var(--ink);
    --bg: var(--stone);
    --surface: var(--paper);
    --muted: var(--slate);
    --line: var(--rule);
    --accent: var(--claret);
    --mark: var(--gilt);

    --serif: ui-serif, "Iowan Old Style", "Hoefler Text", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    --measure: 60ch;
    --gutter: 32px;
  }

  @media (prefers-color-scheme: dark) {
    #wangsun-page {
      --fg:      #E9E4D9;
      --bg:      #121417;
      --surface: #191C21;
      --muted:   #9AA0A8;
      --line:    #333840;
      --accent:  #C4707F;
      --mark:    #C9A45E;
    }
  }
  #wangsun-page[data-theme="dark"] {
    --fg:      #E9E4D9;
    --bg:      #121417;
    --surface: #191C21;
    --muted:   #9AA0A8;
    --line:    #333840;
    --accent:  #C4707F;
    --mark:    #C9A45E;
  }
  #wangsun-page[data-theme="light"] {
    --fg: var(--ink);
    --bg: var(--stone);
    --surface: var(--paper);
    --muted: var(--slate);
    --line: var(--rule);
    --accent: var(--claret);
    --mark: var(--gilt);
  }

  * { box-sizing: border-box; }

  #wangsun-page {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--serif);
    font-size: 17.5px;
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .sheet {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 var(--gutter);
  }

  /* small-caps utility label - the classical alternative to a mono eyebrow */
  .smallcaps {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* -- masthead ------------------------------------------- */
  .masthead {
    text-align: center;
    padding: 72px 0 0;
  }
  .masthead .smallcaps { display: block; margin-bottom: 26px; }

  .wordmark {
    font-size: clamp(44px, 9vw, 92px);
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.14em;
    margin: 0;
    text-indent: 0.14em; /* optical centring against the tracking */
  }

  .rules { padding: 22px 0 0; }
  .rule-pair {
    border-top: 1px solid var(--fg);
    border-bottom: 1px solid var(--fg);
    height: 4px;
  }
  canvas.guilloche {
    display: block;
    width: 100%;
    height: 34px;
    margin: 14px 0 10px;
  }

  .masthead .standfirst {
    max-width: 44ch;
    margin: 20px auto 0;
    color: var(--muted);
    font-size: 18px;
    text-wrap: balance;
  }

  /* -- nav ------------------------------------------------ */
  nav.primary {
    margin-top: 44px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  nav.primary ul {
    display: flex;
    justify-content: center;
    gap: clamp(20px, 5vw, 58px);
    list-style: none;
    margin: 0;
    padding: 15px 0;
    flex-wrap: wrap;
  }
  nav.primary a {
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
  }
  nav.primary a:hover,
  nav.primary a:focus-visible { border-bottom-color: var(--accent); color: var(--accent); }

  /* -- sections ------------------------------------------- */
  section { padding: 78px 0; border-bottom: 1px solid var(--line); }
  section:last-of-type { border-bottom: 0; }

  .sec-head { text-align: center; margin-bottom: 46px; }
  .sec-head .smallcaps { display: block; margin-bottom: 14px; }
  .sec-head h2 {
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 500;
    letter-spacing: 0.005em;
    margin: 0 auto;
    max-width: 22ch;
    text-wrap: balance;
    line-height: 1.24;
  }

  .lede {
    max-width: var(--measure);
    margin: 0 auto;
    text-align: center;
    font-size: 21px;
    line-height: 1.6;
  }
  .lede + .lede { margin-top: 20px; }

  /* drop cap on the opening statement - engraved-document convention */
  .lede.opening::first-letter {
    float: left;
    font-size: 4.05em;
    line-height: 0.82;
    padding: 0.06em 0.09em 0 0;
    color: var(--accent);
    font-weight: 500;
  }
  .lede.opening { text-align: left; }

  /* -- lineage: three generations ------------------------- */
  .lineage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 8px;
  }
  @media (max-width: 740px) { .lineage { grid-template-columns: 1fr; } }

  .gen {
    text-align: center;
    padding: 30px 24px;
    border-left: 1px solid var(--line);
  }
  .gen:first-child { border-left: 0; }
  @media (max-width: 740px) {
    .gen { border-left: 0; border-top: 1px solid var(--line); }
    .gen:first-child { border-top: 0; }
  }

  .gen .numeral {
    display: block;
    font-size: 15px;
    letter-spacing: 0.3em;
    color: var(--mark);
    margin-bottom: 14px;
    text-indent: 0.3em;
  }
  .gen h3 {
    font-size: 21px;
    font-weight: 500;
    margin: 0 0 10px;
    letter-spacing: 0.01em;
  }
  .gen p {
    margin: 0;
    font-size: 15.5px;
    color: var(--muted);
    line-height: 1.6;
  }

  /* -- principles ----------------------------------------- */
  .principles { max-width: 66ch; margin: 0 auto; list-style: none; padding: 0; }
  .principles li {
    text-align: center;
    padding: 30px 0;
    border-top: 1px solid var(--line);
    font-size: 19px;
    line-height: 1.62;
  }
  .principles li:first-child { border-top: 0; padding-top: 0; }
  .principles li:last-child { padding-bottom: 0; }

  /* -- resources ------------------------------------------ */
  .resources {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 56px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 760px;
  }
  @media (max-width: 640px) { .resources { grid-template-columns: 1fr; gap: 0; } }
  .resources li {
    padding: 16px 0;
    border-top: 1px solid var(--line);
    font-size: 17px;
  }
  .resources .note {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
    padding-top: 22px;
    margin-top: 6px;
    text-align: center;
    color: var(--muted);
    font-size: 15.5px;
  }

  /* -- statement ------------------------------------------ */
  .statement { text-align: center; }
  .statement blockquote {
    margin: 0 auto;
    max-width: 52ch;
    font-size: clamp(21px, 2.7vw, 27px);
    line-height: 1.46;
    font-style: italic;
    text-wrap: balance;
  }
  .statement .attrib {
    margin-top: 30px;
    display: inline-block;
    padding-top: 16px;
    border-top: 1px solid var(--mark);
  }

  /* -- colophon ------------------------------------------- */
  .colophon {
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: 62px 0 72px;
    text-align: center;
  }
  .colophon .smallcaps { display: block; margin-bottom: 18px; }
  .colophon .addr {
    font-size: 20px;
    margin: 0 0 8px;
  }
  .colophon a { color: var(--accent); text-underline-offset: 4px; }
  .disclaimer {
    max-width: 56ch;
    margin: 40px auto 0;
    text-align: left;
    padding-top: 26px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    line-height: 1.62;
    color: var(--muted);
  }

  a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------------------------------------------------------------
   Parent theme overrides.

   Twenty Twenty-Four's theme.json emits a bare element rule
   `h1,h2,h3,h4,h5,h6 { color: var(--wp--preset--color--contrast) }`
   which resolves to #111111. Headings here only inherited their
   colour, so in dark mode they rendered near-black on near-black.
   The id scope outranks the bare element selector.
   --------------------------------------------------------------- */
#wangsun-page h1,
#wangsun-page h2,
#wangsun-page h3,
#wangsun-page h4,
#wangsun-page h5,
#wangsun-page h6 { color: var(--fg); }

/* The wrapper paints the page, but body kept the parent's near-white
   base, which shows on overscroll. `:root body` outranks the
   parent's `:root :where(body)`. */
:root body:has(#wangsun-page) { background-color: #E4E1DA; }
@media (prefers-color-scheme: dark) {
  :root body:has(#wangsun-page) { background-color: #121417; }
}