/* ==========================================================================
   Routine Chaos — Ghost (Edition) theme skin
   Loaded after assets/built/screen.css. Overrides tokens + component look;
   Edition's grid/layout mechanics (gh-canvas, gh-outer, responsive rules)
   are left alone so the theme keeps working structurally.
   ========================================================================== */

/* ---- Design tokens (Routine Chaos design system) ---- */
@font-face {
  font-family: 'Avenir';
  src: url('../fonts/Avenir-Black.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --ink-100: #0F0F10;
  --ink-90:  #1A1A1C;
  --ink-80:  #2B2A2E;
  --ink-60:  #55535A;
  --ink-40:  #8B8890;
  --ink-20:  #C9C6CC;
  --ink-10:  #E4E2E6;
  --paper-100: #FBF7EE;
  --paper-90:  #F2ECDD;
  --paper-80:  #E9E1CC;
  --white:    #FFFFFF;

  --chaos-red:    #E5402C;
  --chaos-blue:   #2E5FE0;
  --chaos-green:  #1E8C4A;
  --chaos-yellow: #F4C21A;
  --chaos-purple: #8C7CDE;

  --chaos-red-tint:    #FBDAD4;
  --chaos-blue-tint:   #D8E1FB;
  --chaos-green-tint:  #D3EBDC;
  --chaos-yellow-tint: #FBEFC2;
  --chaos-purple-tint: #E6E1FA;

  --bg-page:        var(--ink-100);
  --bg-surface:     var(--white);
  --bg-inverse:     var(--paper-100);
  --bg-subtle:      var(--ink-90);

  --text-primary:   var(--paper-100);
  --text-secondary: var(--ink-20);
  --text-muted:     var(--ink-40);
  --text-on-paper:  var(--ink-100);
  --text-on-paper-secondary: var(--ink-60);
  --text-link:      var(--chaos-blue);
  --text-link-hover: #6E93F2;

  --border-default: var(--ink-100);
  --border-subtle:  var(--ink-20);

  --accent-primary:   var(--chaos-red);
  --accent-secondary: var(--chaos-blue);
  --accent-tertiary:  var(--chaos-yellow);

  /* Tweakable "lead accent" — the one chaos color driving CTAs, tags, highlight,
     and the calendar date. Swappable via the Tweaks panel. */
  --accent-mood: var(--chaos-green);
  --accent-mood-ink: var(--white);

  --font-display: 'Avenir', 'Arial Black', sans-serif;
  --font-body:    'Newsreader', Georgia, serif;
  --font-code:    'Courier New', monospace; /* reserved for actual code blocks in post content */

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px;
  --radius-chaos-a: 3px 16px 5px 14px;
  --radius-chaos-b: 14px 4px 18px 6px;

  --border-thin: 1.5px;
  --border-thick: 3px;

  --shadow-color-pop: 140 124 222;
  --shadow-sticker-sm: 3px 3px 0 rgb(var(--shadow-color-pop) / 1);
  --shadow-sticker-md: 5px 5px 0 rgb(var(--shadow-color-pop) / 1);
  --shadow-sticker-lg: 8px 8px 0 rgb(var(--shadow-color-pop) / 1);
  --shadow-soft: 0 8px 24px rgb(15 15 16 / 0.4);

  --ease-punk: cubic-bezier(.2, .9, .3, 1.4);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;

  --rotate-1: -2.5deg; --rotate-2: 1.75deg; --rotate-3: -1deg; --rotate-4: 3deg;

  /* --- Tweak: Stage --- lets the site swap its default dark stage for a paper-lit matinee mood */
}
:root[data-stage="matinee"] {
  --bg-page: var(--paper-100);
  --bg-subtle: var(--paper-90);
  --text-primary: var(--ink-100);
  --text-secondary: var(--ink-60);
  --text-muted: var(--ink-40);
}
:root[data-stage="matinee"] .gh-head-logo img { filter: none; }

/* --- Tweak: Chaos level --- rescales the tilt + sticker-shadow throw everywhere those
   tokens are used, so one control reshapes how "punk" vs "calm" the whole page reads. */
:root[data-chaos="calm"] {
  --rotate-1: 0deg; --rotate-2: 0deg; --rotate-3: 0deg; --rotate-4: 0deg;
  --shadow-sticker-sm: 2px 2px 0 rgb(var(--shadow-color-pop) / 1);
  --shadow-sticker-md: 3px 3px 0 rgb(var(--shadow-color-pop) / 1);
  --shadow-sticker-lg: 4px 4px 0 rgb(var(--shadow-color-pop) / 1);
}
:root[data-chaos="anarchy"] {
  --rotate-1: -6deg; --rotate-2: 5deg; --rotate-3: -4.5deg; --rotate-4: 7deg;
  --shadow-sticker-sm: 5px 5px 0 rgb(var(--shadow-color-pop) / 1);
  --shadow-sticker-md: 9px 9px 0 rgb(var(--shadow-color-pop) / 1);
  --shadow-sticker-lg: 14px 14px 0 rgb(var(--shadow-color-pop) / 1);
}

/* --- Tweak: Accent mood --- retints CTAs, tags, calendar date and the hero highlight
   off one lead chaos color. */
:root[data-accent="yellow"] { --accent-mood: var(--chaos-yellow); --accent-mood-ink: var(--ink-100); }
:root[data-accent="blue"]   { --accent-mood: var(--chaos-blue);   --accent-mood-ink: var(--white); }
:root[data-accent="red"]    { --accent-mood: var(--chaos-red);    --accent-mood-ink: var(--white); }
:root[data-accent="purple"] { --accent-mood: var(--chaos-purple); --accent-mood-ink: var(--white); }

:root {
  /* Map Edition's own vars onto the DS so anything we didn't touch still lands right */
  --brand-color: var(--chaos-red);
  --primary-text-color: var(--text-primary);
  --secondary-text-color: var(--text-secondary);
  --white-color: var(--paper-100);
  --lighter-gray-color: var(--ink-90);
  --light-gray-color: var(--ink-80);
  --mid-gray-color: var(--ink-60);
  --dark-gray-color: var(--ink-20);
  --darker-gray-color: var(--paper-100);
  --black-color: var(--ink-100);
  --font-sans: var(--font-body);
  --font-serif: var(--font-body);
  --ghost-accent-color: var(--chaos-red);
}

/* ---- Base stage ---- */
body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1.8rem;
}

::selection { background: var(--chaos-yellow); color: var(--ink-100); }

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }

hr { background-color: var(--ink-80); }

blockquote:not([class]) {
  border-left: var(--border-thick) solid var(--chaos-purple);
  font-style: italic;
}

pre {
  background-color: var(--ink-90);
  border: var(--border-thin) solid var(--ink-80);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}
code { font-family: var(--font-code); }
:not(pre) > code {
  background-color: var(--chaos-yellow-tint);
  color: var(--ink-100);
  border-radius: var(--radius-sm);
}

/* ---- Header ---- */
.gh-head { background-color: var(--bg-page); border-bottom: var(--border-thick) solid var(--ink-80); height: auto; padding: 10px 0; }
.gh-head-logo { font-family: var(--font-display); font-size: 2rem; letter-spacing: -0.01em; }
.gh-head-logo img { max-height: 45px; filter: invert(1) brightness(1.4); margin-left: 10px; }
.gh-head-actions { padding-right: 10px; }
.gh-head .nav, .gh-head-menu, .gh-head-actions { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; letter-spacing: 0; line-height: 1; align-items: center; }
.gh-head .nav > li > a { color: var(--text-primary); transition: color var(--duration-fast) var(--ease-out); }
.gh-head-menu .nav > li { opacity: 1 !important; } /* Edition fades nav in via a JS-added class; force visible so it never depends on that firing */
.gh-head .nav > li > a:hover { color: var(--chaos-yellow); }
.gh-search, .gh-burger:before, .gh-burger:after { color: var(--text-primary); }
.gh-burger:before, .gh-burger:after { background-color: var(--text-primary); }
.gh-head-link { color: var(--text-primary); }
.gh-head-btn.gh-btn, .gh-head-btn.gh-primary-btn,
.gh-primary-btn {
  background-color: var(--accent-mood) !important;
  color: var(--accent-mood-ink) !important;
  border: var(--border-thick) solid var(--ink-100);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: var(--shadow-sticker-sm);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.gh-primary-btn:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 rgb(var(--shadow-color-pop) / 1); opacity: 1; }
.gh-primary-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 rgb(var(--shadow-color-pop) / 1); }

/* ---- Hero / cover ---- */
.cover {
  background-color: var(--bg-page);
  padding-top: 8vmin;
  padding-bottom: 8vmin;
}
.cover-content { max-width: 760px; }
.cover-description {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 6vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--text-primary);
}
.cover-description mark {
  background: var(--accent-mood);
  color: var(--accent-mood-ink);
  padding: 0 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.with-full-cover .cover-description { color: var(--text-primary); }
.cover-form { max-width: 440px; }
.cover-form input {
  background-color: var(--bg-surface);
  border: var(--border-thick) solid var(--ink-100);
  border-radius: var(--radius-md);
  color: var(--ink-100);
  font-family: var(--font-body);
}
.cover-form .form-button {
  background-color: var(--accent-mood);
  color: var(--accent-mood-ink);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 800;
}
.cover-arrow .icon { color: var(--text-primary); }

/* ---- Featured posts (poster tickets) ---- */
.featured-title {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--text-secondary);
  border-bottom-color: var(--ink-80);
  letter-spacing: 0;
}
.featured-wrapper .post {
  transition: transform var(--duration-base) var(--ease-punk);
}
.featured-wrapper .post:hover { transform: translateY(-4px) rotate(var(--rotate-3)); }
.featured-wrapper .u-placeholder {
  background-color: var(--bg-surface);
  border: var(--border-thick) solid var(--ink-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sticker-md);
}
.featured-wrapper .post-title {
  font-family: var(--font-display);
  color: var(--text-primary);
  margin-top: var(--space-3);
}

/* ---- Post feed cards: ticket-stub treatment ---- */
.post-feed { margin-top: var(--space-8); }
.feed {
  background-color: var(--bg-surface);
  border: var(--border-thick) solid var(--ink-100) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sticker-sm);
  padding: var(--space-5) var(--space-6) !important;
  margin-bottom: var(--space-6);
  transition: transform var(--duration-base) var(--ease-punk), box-shadow var(--duration-base) var(--ease-out);
}
.feed + .feed { border-top: var(--border-thick) solid var(--ink-100) !important; }
.post-feed > .feed:nth-child(5n+1) { border-color: var(--chaos-red) !important; box-shadow: 5px 5px 0 var(--chaos-red) !important; }
.post-feed > .feed:nth-child(5n+2) { border-color: var(--chaos-blue) !important; box-shadow: 5px 5px 0 var(--chaos-blue) !important; }
.post-feed > .feed:nth-child(5n+3) { border-color: var(--chaos-green) !important; box-shadow: 5px 5px 0 var(--chaos-green) !important; }
.post-feed > .feed:nth-child(5n+4) { border-color: var(--chaos-yellow) !important; box-shadow: 5px 5px 0 var(--chaos-yellow) !important; }
.post-feed > .feed:nth-child(5n+5) { border-color: var(--chaos-purple) !important; box-shadow: 5px 5px 0 var(--chaos-purple) !important; }
.post-feed > .feed:nth-child(5n+1):hover { box-shadow: 9px 9px 0 var(--chaos-red) !important; }
.post-feed > .feed:nth-child(5n+2):hover { box-shadow: 9px 9px 0 var(--chaos-blue) !important; }
.post-feed > .feed:nth-child(5n+3):hover { box-shadow: 9px 9px 0 var(--chaos-green) !important; }
.post-feed > .feed:nth-child(5n+4):hover { box-shadow: 9px 9px 0 var(--chaos-yellow) !important; }
.post-feed > .feed:nth-child(5n+5):hover { box-shadow: 9px 9px 0 var(--chaos-purple) !important; }
.post-feed > .feed:nth-child(3n+1):hover { transform: rotate(var(--rotate-1)) translateY(-3px); }
.post-feed > .feed:nth-child(3n+2):hover { transform: rotate(var(--rotate-2)) translateY(-3px); }
.post-feed > .feed:nth-child(3n+3):hover { transform: rotate(var(--rotate-4)) translateY(-3px); }
.feed:hover { box-shadow: var(--shadow-sticker-lg); }
.feed-calendar { color: var(--accent-mood); font-family: var(--font-display); font-weight: 800; }
.post-feed > .feed:nth-child(5n+1) .feed-calendar { color: var(--chaos-red); }
.post-feed > .feed:nth-child(5n+2) .feed-calendar { color: var(--chaos-blue); }
.post-feed > .feed:nth-child(5n+3) .feed-calendar { color: var(--chaos-green); }
.post-feed > .feed:nth-child(5n+4) .feed-calendar { color: var(--chaos-yellow); }
.post-feed > .feed:nth-child(5n+5) .feed-calendar { color: var(--chaos-purple); }
.feed-title { font-family: var(--font-display); color: var(--text-on-paper); font-weight: 700; }
.feed-excerpt { font-family: var(--font-body); color: var(--text-on-paper-secondary); }
.feed-right { color: var(--text-on-paper-secondary); font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.feed-image { border: var(--border-thick) solid var(--ink-100); border-radius: var(--radius-sm); overflow: hidden; }
.feed-month {
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0;
}
.feed-header-title { font-family: var(--font-display); font-weight: 800; color: var(--text-secondary); letter-spacing: 0; }
.feed-header-wrapper { border-bottom-color: var(--ink-80); }

/* ---- Single post ---- */
.single-meta { font-family: var(--font-display); font-weight: 700; color: var(--text-secondary); letter-spacing: 0; }
.post-tag {
  background-color: var(--accent-mood);
  color: var(--accent-mood-ink);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  border: var(--border-thin) solid var(--ink-100);
}
.single-title { font-family: var(--font-display); color: var(--text-primary); letter-spacing: -0.015em; }
.single-excerpt { color: var(--text-secondary); font-family: var(--font-body); font-style: italic; }
.single-media { border: var(--border-thick) solid var(--ink-100); border-radius: var(--radius-md); overflow: hidden; }
.gh-content { color: var(--text-primary); font-family: var(--font-body); }
.gh-content a { color: var(--text-link); }
.gh-content a:hover { color: var(--text-link-hover); }
.gh-content h2, .gh-content h3 { font-family: var(--font-display); }
.gh-content figcaption { color: var(--text-muted); font-family: var(--font-body); font-style: italic; font-size: 1.4rem; }
.single-footer { border-top: var(--border-thin) solid var(--ink-80); padding-top: var(--space-6); }
.single-footer-title { font-family: var(--font-display); font-weight: 800; letter-spacing: 0; color: var(--text-secondary); font-size: 1.4rem; }
.navigation-link { color: var(--text-primary); }
.author-image-placeholder { border-color: var(--ink-100) !important; }

.single-cta {
  background-color: var(--bg-surface);
  border: var(--border-thick) solid var(--ink-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sticker-md);
  color: var(--text-on-paper);
}
.single-cta-title { font-family: var(--font-display); color: var(--text-on-paper); }
.single-cta .button, .button {
  background-color: var(--accent-mood);
  color: var(--accent-mood-ink);
  border: var(--border-thick) solid var(--ink-100);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: var(--shadow-sticker-sm);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.single-cta .button:hover, .button:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 rgb(var(--shadow-color-pop) / 1); opacity: 1; }
.single-cta .button:active, .button:active { transform: translate(3px,3px); box-shadow: 0 0 0 rgb(var(--shadow-color-pop) / 1); }
.single-cta-footer, .button-text { color: var(--text-on-paper-secondary); }

/* ---- Related / comments ---- */
.related-wrapper { background-color: var(--bg-subtle); }
.related-title, .gh-comments-title { font-family: var(--font-display); color: var(--text-primary); }
.gh-comments-count { color: var(--text-secondary); font-family: var(--font-display); font-weight: 700; }

/* ---- Taxonomy (author/tag) ---- */
.taxonomy-media { border: var(--border-thick) solid var(--ink-100); box-shadow: var(--shadow-sticker-sm); }
.author-meta { font-family: var(--font-display); font-weight: 800; color: var(--chaos-blue); letter-spacing: 0; }
.share-link { font-family: var(--font-display); font-weight: 700; border: var(--border-thin) solid var(--ink-100); }

/* ---- Forms ---- */
input, textarea {
  background-color: var(--bg-surface);
  border: var(--border-thick) solid var(--ink-100) !important;
  border-radius: var(--radius-md) !important;
  color: var(--ink-100);
  font-family: var(--font-body);
}
label { color: var(--text-primary); font-family: var(--font-display); font-weight: 800; letter-spacing: 0; font-size: 1.3rem; }

/* ---- Pagination ---- */
.load-more .button, .gh-loadmore {
  background-color: var(--bg-surface) !important;
  color: var(--ink-100) !important;
}
.pagination .page-number, .older-posts a, .newer-posts a { color: var(--text-primary); font-family: var(--font-display); font-weight: 700; }

/* ---- Footer ---- */
.gh-foot { color: var(--text-secondary); border-top: var(--border-thick) solid var(--ink-80); font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: 0; }
.gh-foot a { color: var(--text-secondary); }
.gh-foot a:hover { color: var(--chaos-yellow); opacity: 1; }
.gh-copyright { letter-spacing: 0; }

/* ---- Misc / icons ---- */
.icon { color: inherit; }

/* Edition's base screen.css sets text-transform:uppercase on quite a few of these
   elements directly; overriding font-family alone doesn't clear it, so kill it
   globally here per the "no all-caps" direction. */
body, body * { text-transform: none !important; }