/* The artist's supplied texture, clipped inside the original display lettering. */
.lore-hero h1 > span, .lore-hero h1 .brand-period-word {
  background: #8a61ff url('/brand-texture.png') center / 600px auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Keep the spoken punctuation while drawing the real logo in its place. */
.brand-period-word { white-space: nowrap; }
.mask-period {
  display: inline-block;
  width: .28em;
  height: .3em;
  margin-left: .035em;
  background: url('/favicon.svg') center / contain no-repeat;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  vertical-align: -.015em;
  font-size: inherit;
  letter-spacing: 0;
  line-height: 0;
  text-indent: -9999px;
  overflow: hidden;
}
@media (forced-colors: active) {
  .lore-hero h1 > span, .lore-hero h1 .brand-period-word { background: none; color: CanvasText; }
  .mask-period { background: none; color: CanvasText !important; -webkit-text-fill-color: CanvasText; }
}

/* One artist-supplied purple treatment for every branded text accent. */
.lore-hero h1 span:not(.mask-period), .mask-reveal h3 span:not(.mask-period),
.final-words span:not(.mask-period), .name-reveal h3, .name-reveal h3 .brand-period-word,
.scribble, .milestones strong, .launch-memes strong, .chapter-marker,
header.page-head h1 span:not(.mask-period), .library-brand span:not(.mask-period),
.number-input > span, .empty-state > span, .quote-content::before,
.purple-word, .ink-burst, .strip-star, .brand-dot, .purple-period,
.footer-wordmark span:not(.mask-period) {
  background: #8a61ff url('/brand-texture.png') center / 600px auto;
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* Smaller controls use a denser crop so the flecks remain visible. */
.ink-button, .heads-button.purple, .wall-button.purple,
.account-buttons button[aria-pressed=true], .pfp-button.purple,
.filter.active, .meme-hover, .active-filters .chip, .active-filters .chip:hover,
.tag-cloud .tag-pill.active, .tag-cloud-toggle:hover,
.action-btn, .action-btn:hover, .toolbar button.active, .editor-tab.active,
.reading-progress span, .main-nav a::after {
  background: #8a61ff url('/brand-texture.png') center / 240px auto;
  color: #110b1b;
}
.tag-cloud-toggle { color: var(--text); }
input[type=range]::-webkit-slider-thumb {
  background: #8a61ff url('/brand-texture.png') center / 90px auto;
}
input[type=range]::-moz-range-thumb {
  background: #8a61ff url('/brand-texture.png') center / 90px auto;
}
/* Neutral, high-contrast outlines keep narrow focus rings legible. */
:root { accent-color: #110b1b; }
.pfp-panel input[type=checkbox] { accent-color: var(--text); }
::selection { background: #ded4ff; color: #110b1b; }
@media (forced-colors: active) {
  .mask-period { text-indent: 0; overflow: visible; line-height: 1; }
}

/* Handwritten accents stay solid; block lettering keeps the speckled fill. */
.scribble, .launch-memes strong, .chapter-marker {
  background: none;
  color: var(--accent-text, #8a61ff);
  -webkit-text-fill-color: currentColor;
}
.big-receipt .scribble {
  background: #8a61ff url('/brand-texture.png') center / 600px auto;
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* A fine white keyline keeps black labels distinct from the white flecks. */
.ink-button, .heads-button.purple, .wall-button.purple,
.account-buttons button[aria-pressed=true], .pfp-button.purple,
.filter.active, .meme-hover, .active-filters .chip,
.tag-cloud .tag-pill.active, .tag-cloud-toggle:hover,
.action-btn:not(.secondary), .toolbar button.active, .editor-tab.active,
.drawn-button.primary > span {
  text-shadow: -1px -1px 0 #fff, 0 -1px 0 #fff, 1px -1px 0 #fff,
    -1px 0 0 #fff, 1px 0 0 #fff, -1px 1px 0 #fff, 0 1px 0 #fff, 1px 1px 0 #fff;
}
/* Keep the handwritten aside in normal flow, away from decorative lines. */
.lore-hero { border-bottom: 0; border-radius: 0; padding-bottom: 40px; }
.hero-scribble { position: static; display: block; margin: 32px auto 0; transform: rotate(-3deg); }
/* Give the image-wall feature the same footprint as its neighbours. */
.featured-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.featured-meme-image { max-height: 260px; object-fit: contain; }
@media (max-width: 1000px) {
  .featured-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured-post.feature-meme { grid-column: 1 / -1; grid-row: 1; width: min(100%, 380px); }
}
@media (max-width: 600px) { .featured-posts { grid-template-columns: 1fr; } }

/* Five quotes fill the space beside the taller original meme receipt. */
#featuredPosts{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;gap:20px;align-items:start}
#featuredPosts>.featured-post:nth-child(1){grid-column:1;grid-row:1}
#featuredPosts>.featured-post:nth-child(2){grid-column:2;grid-row:1 / span 2}
#featuredPosts>.featured-post:nth-child(3){grid-column:3;grid-row:1}
#featuredPosts>.featured-post:nth-child(4){grid-column:1;grid-row:2}
#featuredPosts>.featured-post:nth-child(5){grid-column:3;grid-row:2}
.mentions-hero{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,2.5fr) minmax(120px,1fr);align-items:center;gap:20px}
.mentions-hero-art{width:100%;height:auto;max-height:240px;object-fit:contain;border-radius:12px}
.mentions-hero h1{font-size:clamp(32px,4.8vw,64px)}
@media(max-width:700px){
 #featuredPosts{grid-template-columns:1fr;grid-template-rows:none}
 #featuredPosts>.featured-post:nth-child(n){grid-column:1;grid-row:auto;width:100%;max-width:none}
 .mentions-hero{grid-template-columns:1fr 1fr;gap:18px}
 .mentions-hero-copy{grid-column:1/-1;grid-row:1}
 .mentions-hero-art{max-height:150px}
}

/* Black outlines on the Lore display accents, scaled with the lettering. */
.lore-hero h1 span:not(.mask-period),
.mask-reveal h3 span:not(.mask-period),
.big-receipt .scribble,
.milestones strong,
.final-words span:not(.mask-period) {
  -webkit-text-stroke: .02em #000;
}
@media (forced-colors: active) {
  .lore-hero h1 span:not(.mask-period),
.mask-reveal h3 span:not(.mask-period),
.big-receipt .scribble,
.milestones strong,
.final-words span:not(.mask-period) { -webkit-text-stroke: 0; }
}

/* Aim the hero flourish toward the primary invitation. */
.hero .hero-arrow{transform:rotate(-19deg) scaleY(-1)}

/* Secret purple theme: artwork is preserved; interface paper and accents swap. */
.purple-mask-secret{position:absolute;z-index:5;margin:0;padding:0;border:0;background:transparent;box-shadow:none;cursor:pointer;border-radius:40%;-webkit-tap-highlight-color:transparent}
.purple-mask-secret:focus-visible{outline:3px dashed #110b1b;outline-offset:4px}
:root[data-purple="true"]{--paper:#8a61ff;--bg:#8a61ff;--ink:#110b1b;--text:#110b1b;--purple:#fff;--accent:#fff;--accent-text:#fff;--accent-hover:#eee7ff;--muted:#251b40;--text-dim:#251b40;--faint:#a687ff;--panel:#a687ff;--panel-alt:#b79cff;--line:#110b1b;--border:#382354;--tag-bg:#b79cff;--tag-bg-active:#fff;--tag-text-active:#110b1b;color-scheme:light;background:#8a61ff}
html[data-purple="true"] body{background:#8a61ff url('/brand-texture.png') repeat;background-size:1100px auto;color:#110b1b}
html[data-purple="true"] :is(.site-header,.library-nav,.lore-header){background:#8a61ff}
html[data-purple="true"] :is(.purple-word,.lore-hero h1 span:not(.mask-period),.mask-reveal h3 span:not(.mask-period),.final-words span:not(.mask-period),.name-reveal h3,.name-reveal h3 .brand-period-word,.milestones strong,.big-receipt .scribble,header.page-head h1 span:not(.mask-period),.library-brand span:not(.mask-period),.footer-wordmark span:not(.mask-period),.number-input>span,.empty-state>span,.quote-content::before,.ink-burst,.strip-star,.brand-dot,.purple-period){background:none;color:#fff;-webkit-text-fill-color:#fff}
html[data-purple="true"] :is(h1,h2,h3){color:#fff}
html[data-purple="true"] :is(.ink-button,.heads-button.purple,.wall-button.purple,.account-buttons button[aria-pressed=true],.pfp-button.purple,.filter.active,.meme-hover,.active-filters .chip,.tag-cloud .tag-pill.active,.action-btn:not(.secondary),.toolbar button.active,.editor-tab.active,.reading-progress span,.main-nav a::after){background:#fff;color:#110b1b;text-shadow:none}
html[data-purple="true"] .drawn-button.primary{color:#110b1b}
html[data-purple="true"] .drawn-button.primary>span{text-shadow:none}
html[data-purple="true"] :is(.dna-arrows,.dna-side-arrows){color:#fff}
html[data-purple="true"] :is(.gallery-original,.dna-meme img,.hero-character img){mix-blend-mode:normal}
html[data-purple="true"] .mask-period{-webkit-text-fill-color:transparent;color:transparent!important}

html[data-purple="true"] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600'%3E%3Cg fill='white'%3E%3Cpath d='M32 45l5-3-1 7zM220 110l7 2-3 5zM570 42l-3 8 6-3zM748 182l4-5 2 8zM102 310l6-2-1 5zM386 259l4 5-7 1zM660 386l5-3 1 7zM278 483l7 1-4 5zM50 560l3-4 2 6zM487 557l6-2-2 6zM775 521l4 2-3 4zM475 171l3-2-1 4z'/%3E%3C/g%3E%3C/svg%3E");background-size:800px 600px}
html[data-purple="true"] .drawn-button.primary .button-frame path{fill:#fff}
html[data-purple="true"] .drawn-button.primary::after{display:none}

/* Keep display lettering white and original meme inks in purple mode. */
html[data-purple="true"] .block-lettering{fill:#fff;stroke:#110b1b}
html[data-purple="true"] .art{--paper:#fff;--ink:#000;--purple:#8a61ff}

/* Bring the mentions cast inward and invert its paper in dark mode. */
.mentions-hero{max-width:1160px;margin-inline:auto}
html[data-theme="dark"]:not([data-purple="true"]) .mentions-hero-art{filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen}

/* Center the visible Will Smith figure above the first receipt. */
@media(min-width:701px){.mentions-hero .mentions-left{transform:translateX(50%)}}