/* ========================================================= Author brochure site — permutation engine. Independent design axes, set as data-* attributes on (see _data/presets.yml for the named bundles): data-palette nebula | manuscript | mission | pulp | grimoire data-cards spread | shelf | grid | dossier | panel data-hero split | centered | name | scrim | blur | fan | duet data-font 13 genre pairings per verkilo.com/typography data-avatar frame | round | square | organic data-avatar-side left | right data-newsletter photo | quiet ========================================================= */ /* ---------- Reset (Tailwind preflight is disabled) ---------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } img { max-width: 100%; height: auto; display: block; } ul, ol { padding: 0; } /* ---------- Font pairings ---------- */ :root { /* epic (default): Cinzel — inscriptional Roman caps, reads epic — over EB Garamond, the classical roomy SF&F body face. */ --font-display: 'Cinzel', 'Times New Roman', serif; --font-body: 'EB Garamond', Georgia, serif; --display-tracking: 0.02em; --display-transform: none; --display-weight: 600; } html[data-font="classical"] { /* Marcellus + Vollkorn: quieter classical option, warmer color on the page. */ --font-display: 'Marcellus', 'Times New Roman', serif; --font-body: 'Vollkorn', Georgia, serif; --display-tracking: 0.04em; --display-weight: 400; } html[data-font="inscribed"] { /* Spectral SC + Cardo: small-caps display over the roomiest classical body. */ --font-display: 'Spectral SC', Georgia, serif; --font-body: 'Cardo', Georgia, serif; --display-tracking: 0.05em; --display-weight: 600; } /* — Crime / Mystery / Thriller: tight and invisible; condensed sans display against a serif body is the category standard. — */ html[data-font="thriller"] { --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif; --font-body: 'Source Serif 4', Georgia, serif; --display-tracking: 0.05em; --display-transform: uppercase; --display-weight: 600; } html[data-font="noir"] { --font-display: 'Oswald', 'Arial Narrow', sans-serif; --font-body: 'Spectral', Georgia, serif; --display-tracking: 0.06em; --display-transform: uppercase; --display-weight: 600; } html[data-font="procedural"] { --font-display: 'Archivo', Arial, sans-serif; --font-body: 'Faustina', Georgia, serif; --display-tracking: 0.01em; --display-weight: 700; } /* — Romance: warm and high contrast; the page should read soft. — */ html[data-font="romance"] { --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Crimson Pro', Georgia, serif; --display-tracking: 0.02em; --display-weight: 600; } html[data-font="commercial"] { --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Alegreya', Georgia, serif; --display-tracking: 0.01em; --display-weight: 600; } /* — Young Adult: larger x-height, open counters, generous leading. — */ html[data-font="ya-soft"] { --font-display: 'Fraunces', Georgia, serif; --font-body: 'Literata', Georgia, serif; --display-tracking: 0; --display-weight: 600; } html[data-font="ya-modern"] { --font-display: 'Outfit', Arial, sans-serif; --font-body: 'Newsreader', Georgia, serif; --display-tracking: 0.01em; --display-weight: 600; } html[data-font="ya-grotesque"] { --font-display: 'Bricolage Grotesque', Arial, sans-serif; --font-body: 'Andada Pro', Georgia, serif; --display-tracking: 0; --display-weight: 600; } /* — Horror: darker color on the page, sharper serifs, slightly cramped. — */ html[data-font="gothic"] { --font-display: 'IM Fell English SC', Georgia, serif; --font-body: 'Frank Ruhl Libre', Georgia, serif; --display-tracking: 0.03em; --display-weight: 400; } html[data-font="clinical"] { --font-display: 'Bodoni Moda', 'Didot', serif; --font-body: 'Manuale', Georgia, serif; --display-tracking: 0.04em; --display-transform: uppercase; --display-weight: 600; } /* ---------- Palettes (theme tokens + mood chrome) ---------- */ :root { /* nebula (default): dark, immersive, gold on deep space */ --bg: #0b0f1d; --bg-alt: #111731; --surface: #161d38; --ink: #ece9df; --ink-muted: #b3b0a4; --accent: #d9a94a; --accent-ink: #14100a; --line: #2a3357; --radius: 0.75rem; --hero-bg: radial-gradient(1200px 600px at 80% -10%, #24306b 0%, transparent 60%), radial-gradient(800px 500px at 10% 110%, #1c2a5e 0%, transparent 55%), #0b0f1d; } html[data-palette="manuscript"] { /* warm cream and oxblood; formerly the "bookshelf" theme */ --bg: #f7f1e6; --bg-alt: #efe6d5; --surface: #fffdf8; --ink: #2b241c; --ink-muted: #4f4237; /* ≥7:1 on all three cream backgrounds (WCAG AAA) */ --accent: #7c2f2a; --accent-ink: #fdf9f2; --line: #d9cdb8; --radius: 0.25rem; --hero-bg: #f7f1e6; } html[data-palette="mission"] { --bg: #f3f5f8; --bg-alt: #e8ecf2; --surface: #ffffff; --ink: #121a26; --ink-muted: #3d4a5d; /* ≥7:1 on all three light backgrounds (WCAG AAA) */ --accent: #16459c; --accent-ink: #ffffff; --line: #ccd5e1; --radius: 1rem; --hero-bg: linear-gradient(180deg, #ffffff 0%, #f3f5f8 100%); } html[data-palette="pulp"] { /* crime/thriller: stark near-black, pulp red-orange, hard edges */ --bg: #111113; --bg-alt: #19191c; --surface: #1f1f23; --ink: #f4f2ec; --ink-muted: #b8b5ac; /* ≥7:1 on all three dark backgrounds (WCAG AAA) */ --accent: #ff8b6e; --accent-ink: #23100a; --line: #3a3a41; --radius: 0; --hero-bg: linear-gradient(180deg, #19191c 0%, #111113 100%); } html[data-palette="grimoire"] { /* dark fantasy/horror: deep forest green, antique brass, framed panels */ --bg: #101711; --bg-alt: #16211a; --surface: #1b2a20; --ink: #eef0e4; --ink-muted: #b7c2ab; /* ≥7:1 on all three green backgrounds (WCAG AAA) */ --accent: #d9c27a; --accent-ink: #171207; --line: #33463a; --radius: 0.25rem; --hero-bg: radial-gradient(900px 500px at 50% -20%, #1e3325 0%, transparent 60%), #101711; } /* ---------- Base ---------- */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } body { font-family: var(--font-body); font-size: 1.125rem; line-height: 1.65; color: var(--ink); background: var(--bg); } h1, h2, h3, .fk-brand { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); text-transform: var(--display-transform, none); line-height: 1.15; margin: 0 0 0.5em; } a { color: inherit; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .fk-shell { max-width: 72rem; margin-inline: auto; padding-inline: 1.25rem; } .fk-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .fk-skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 0.6rem 1rem; border-radius: 0 0 0.5rem 0.5rem; font-family: var(--font-display); text-decoration: none; transition: top 150ms ease; } .fk-skip:focus { top: 0; } /* ---------- Buttons ---------- */ .fk-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; /* WCAG 2.5.5 target size */ padding: 0.65rem 1.35rem; border-radius: var(--radius); font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); text-transform: var(--display-transform, none); text-decoration: none; font-size: 1rem; border: 2px solid transparent; } .fk-btn-primary { background: var(--accent); color: var(--accent-ink); } .fk-btn-primary:hover { filter: brightness(1.1); } .fk-btn-ghost { border-color: var(--accent); color: var(--ink); } .fk-btn-ghost:hover { background: var(--accent); color: var(--accent-ink); } .fk-kicker { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 0.75rem; } /* ---------- Header / nav ---------- */ .fk-header { background: var(--bg); border-bottom: 1px solid var(--line); } .fk-header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; padding-block: 1rem; } .fk-brand { font-size: 1.4rem; text-decoration: none; display: flex; align-items: baseline; gap: 0.5rem; } .fk-brand-sub { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-muted); } .fk-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; list-style: none; margin: 0; font-family: var(--font-display); font-size: 1rem; } .fk-nav a { text-decoration: none; display: inline-block; padding-block: 0.6rem; } .fk-nav a:hover, .fk-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--accent); text-decoration-thickness: 2px; } .fk-nav-cta { color: var(--accent); font-weight: 700; } /* ---------- Hero ---------- */ .fk-hero { position: relative; overflow: hidden; background: var(--hero-bg); border-bottom: 1px solid var(--line); } .fk-hero-inner { position: relative; display: grid; gap: 2.5rem; align-items: center; padding-block: 4rem; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .fk-hero h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); } .fk-hero-lede { font-size: 1.25rem; color: var(--ink-muted); max-width: 34em; } .fk-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block: 1.5rem; } .fk-hero-quote { margin: 1.5rem 0 0; border-left: 3px solid var(--accent); padding-left: 1rem; font-style: italic; } .fk-hero-quote footer { font-style: normal; font-size: 0.9rem; color: var(--ink-muted); margin-top: 0.35rem; } .fk-hero-art img { border-radius: var(--radius); box-shadow: 0 20px 60px rgb(0 0 0 / 0.35); } /* Superset hero markup: each data-hero variant reveals its own pieces. Everything variant-specific is hidden by default (split variant). */ .fk-hero-bg, .fk-hero-bg-photo, .fk-hero-bg-self, .fk-hero-art-cover, .fk-hero-art-fan, .fk-hero-h-name, .fk-hero-kicker-role { display: none; } .fk-hero-bg { position: absolute; inset: 0; } .fk-hero-bg img { width: 100%; height: 100%; object-fit: cover; } .fk-hero-bg::after { content: ""; position: absolute; inset: 0; } .fk-hero-art-cover img { max-width: 20rem; margin-inline: auto; } .fk-hero-art-fan { list-style: none; margin: 0; } /* Variants over a photographic or self-artwork backdrop */ html[data-hero="name"] .fk-hero-bg, html[data-hero="scrim"] .fk-hero-bg, html[data-hero="blur"] .fk-hero-bg, html[data-hero="fan"] .fk-hero-bg { display: block; } html[data-hero="name"] .fk-hero-bg-photo, html[data-hero="scrim"] .fk-hero-bg-photo, html[data-hero="fan"] .fk-hero-bg-photo { display: block; } html[data-hero="blur"] .fk-hero-bg-self { display: block; filter: blur(28px) saturate(1.15); transform: scale(1.4); } /* Legibility scrims: tint the backdrop heavily toward the palette ground */ html[data-hero="name"] .fk-hero-bg::after, html[data-hero="blur"] .fk-hero-bg::after, html[data-hero="fan"] .fk-hero-bg::after { background: color-mix(in srgb, var(--bg) 80%, transparent); } html[data-hero="scrim"] .fk-hero-bg::after { background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 92%, transparent) 45%, color-mix(in srgb, var(--bg) 55%, transparent) 100%); } html[data-hero="name"] .fk-hero-lede, html[data-hero="scrim"] .fk-hero-lede, html[data-hero="blur"] .fk-hero-lede, html[data-hero="fan"] .fk-hero-lede { color: var(--ink); } /* name: giant centered author name, role kicker, no art */ html[data-hero="name"] .fk-hero-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-block: 6rem; } html[data-hero="name"] .fk-hero-h-title, html[data-hero="name"] .fk-hero-kicker-genre, html[data-hero="name"] .fk-hero-art, html[data-hero="name"] .fk-hero-quote { display: none; } html[data-hero="name"] .fk-hero-h-name { display: inline; } html[data-hero="name"] .fk-hero-kicker-role { display: inline; letter-spacing: 0.32em; } html[data-hero="name"] .fk-hero h1, html[data-hero="name"] .fk-hero-copy h1 { font-size: clamp(2.75rem, 9vw, 6rem); } html[data-hero="name"] .fk-hero-actions { justify-content: center; } html[data-hero="name"] .fk-hero-lede { margin-inline: auto; } /* scrim + blur + duet: single featured cover as the art */ html[data-hero="scrim"] .fk-hero-art-collage, html[data-hero="blur"] .fk-hero-art-collage, html[data-hero="duet"] .fk-hero-art-collage { display: none; } html[data-hero="scrim"] .fk-hero-art-cover, html[data-hero="blur"] .fk-hero-art-cover, html[data-hero="duet"] .fk-hero-art-cover { display: block; } html[data-hero="scrim"] .fk-hero-art-cover img, html[data-hero="blur"] .fk-hero-art-cover img, html[data-hero="duet"] .fk-hero-art-cover img { border-radius: var(--radius); box-shadow: 0 20px 60px rgb(0 0 0 / 0.45); } html[data-hero="scrim"] .fk-hero-inner, html[data-hero="blur"] .fk-hero-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } /* duet: giant author name beside the featured cover */ html[data-hero="duet"] .fk-hero-h-title, html[data-hero="duet"] .fk-hero-quote { display: none; } html[data-hero="duet"] .fk-hero-h-name { display: inline; } html[data-hero="duet"] .fk-hero-copy h1 { font-size: clamp(2.5rem, 6.5vw, 4.5rem); } /* fan: three overlapping covers over the backdrop */ html[data-hero="fan"] .fk-hero-art-collage { display: none; } html[data-hero="fan"] .fk-hero-art-fan { display: flex; align-items: center; justify-content: center; padding: 0; } html[data-hero="fan"] .fk-hero-art-fan li { max-width: 11rem; position: relative; } html[data-hero="fan"] .fk-hero-art-fan li:nth-child(1) { transform: rotate(-8deg) translateX(14%); } html[data-hero="fan"] .fk-hero-art-fan li:nth-child(2) { z-index: 1; transform: scale(1.08); } html[data-hero="fan"] .fk-hero-art-fan li:nth-child(3) { transform: rotate(8deg) translateX(-14%); } html[data-hero="fan"] .fk-hero-art-fan img { border-radius: 0.25rem; box-shadow: 0 14px 40px rgb(0 0 0 / 0.45); } /* ---------- Featured band ---------- */ .fk-featured-band { background: var(--bg-alt); border-bottom: 1px solid var(--line); } .fk-featured-inner { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: 2rem; align-items: center; padding-block: 2.5rem; } .fk-featured-art { border-radius: var(--radius); box-shadow: 0 10px 30px rgb(0 0 0 / 0.25); } .fk-featured-band h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); } /* ---------- Sections ---------- */ .fk-section-title { font-size: clamp(1.5rem, 3vw, 2.2rem); } .fk-section-lede { color: var(--ink-muted); max-width: 44em; margin-top: 0; } .fk-books, .fk-quotes, .fk-worlds-teaser, .fk-page, .fk-book-page { padding-block: 3.5rem; } .fk-quotes { background: var(--bg-alt); } /* ---------- Series list (data-cards axis; default "spread") ---------- */ .fk-series-list { display: grid; gap: 3rem; margin-top: 2.5rem; } .fk-series { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: 2rem; align-items: start; } .fk-series:nth-child(even) { grid-template-columns: 1fr minmax(0, 320px); } .fk-series:nth-child(even) .fk-series-cover { order: 2; } .fk-series-cover img { border-radius: var(--radius); box-shadow: 0 12px 36px rgb(0 0 0 / 0.3); } .fk-series-title { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 0.25em; } .fk-series-title a { text-decoration: none; } .fk-series-title a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; } .fk-series-tagline { font-size: 1.15rem; font-style: italic; color: var(--ink-muted); margin-top: 0; } .fk-series-quote { margin: 1rem 0; border-left: 3px solid var(--accent); padding-left: 1rem; font-style: italic; } .fk-series-quote footer { font-style: normal; font-size: 0.9rem; color: var(--ink-muted); margin-top: 0.35rem; } .fk-series-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* shelf: single quiet column, small cover, ruled dividers */ html[data-cards="shelf"] .fk-series-list { max-width: 50rem; gap: 0; } html[data-cards="shelf"] .fk-series, html[data-cards="shelf"] .fk-series:nth-child(even) { grid-template-columns: minmax(0, 170px) 1fr; border-top: 1px solid var(--line); padding-block: 2.5rem; } html[data-cards="shelf"] .fk-series:nth-child(even) .fk-series-cover { order: 0; } html[data-cards="shelf"] .fk-series-cover img { box-shadow: 0 6px 18px rgb(0 0 0 / 0.18); } /* grid: card grid */ html[data-cards="grid"] .fk-series-list { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.5rem; } html[data-cards="grid"] .fk-series, html[data-cards="grid"] .fk-series:nth-child(even) { grid-template-columns: 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; gap: 1.25rem; } html[data-cards="grid"] .fk-series:nth-child(even) .fk-series-cover { order: 0; } html[data-cards="grid"] .fk-series-cover img { box-shadow: none; border: 1px solid var(--line); } html[data-cards="grid"] .fk-series-excerpt { display: none; } /* dossier: case-file rows — hard rules, dossier numbers, no alternation */ html[data-cards="dossier"] .fk-series-list { gap: 0; counter-reset: dossier; } html[data-cards="dossier"] .fk-series, html[data-cards="dossier"] .fk-series:nth-child(even) { grid-template-columns: minmax(0, 220px) 1fr; counter-increment: dossier; border-top: 2px solid var(--line); padding-block: 2.5rem; } html[data-cards="dossier"] .fk-series:nth-child(even) .fk-series-cover { order: 0; } html[data-cards="dossier"] .fk-series-body::before { content: counter(dossier, decimal-leading-zero); display: block; font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--accent); margin-bottom: 0.5rem; } html[data-cards="dossier"] .fk-series-cover img { box-shadow: none; border: 2px solid var(--line); } /* panel: framed ceremony panels */ html[data-cards="panel"] .fk-series, html[data-cards="panel"] .fk-series:nth-child(even) { background: var(--surface); border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: 4px; border-radius: var(--radius); padding: 2rem; } html[data-cards="panel"] .fk-series-cover img { box-shadow: 0 10px 30px rgb(0 0 0 / 0.5); } /* ---------- Hero variants (data-hero axis; default "split") ---------- */ html[data-hero="centered"] .fk-hero-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; } html[data-hero="centered"] .fk-hero-lede { margin-inline: auto; } html[data-hero="centered"] .fk-hero-actions { justify-content: center; } html[data-hero="centered"] .fk-hero-quote { border-left: 0; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); padding: 0.75rem 0; max-width: 34em; } html[data-hero="centered"] .fk-hero-art { max-width: 34rem; } /* ---------- Palette mood chrome ---------- */ /* pulp: hard edges, heavy accent rules */ html[data-palette="pulp"] .fk-hero { border-bottom: 4px solid var(--accent); } html[data-palette="pulp"] .fk-hero-art img { box-shadow: none; border: 2px solid var(--line); } html[data-palette="pulp"] .fk-quote-grid blockquote { border-left: 4px solid var(--accent); } /* grimoire: ruled section titles */ html[data-palette="grimoire"] .fk-section-title::after { content: ""; display: block; width: 4rem; margin-top: 0.5rem; border-bottom: 2px solid var(--accent); } /* ---------- Quotes ---------- */ .fk-quote-grid { list-style: none; margin: 2rem 0 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } .fk-quote-grid blockquote { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; height: 100%; } .fk-quote-grid footer { color: var(--ink-muted); font-size: 0.9rem; margin-top: 0.75rem; } html[data-cards="shelf"] .fk-quote-grid { grid-template-columns: 1fr; max-width: 44rem; } html[data-cards="shelf"] .fk-quote-grid blockquote { background: transparent; border: 0; border-left: 3px solid var(--accent); border-radius: 0; font-style: italic; font-size: 1.2rem; } /* ---------- Author portrait ---------- */ .fk-portrait { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 12px 36px rgb(0 0 0 / 0.3); } /* Two-column page: prose keeps a comfortable measure, portrait sits beside it */ .fk-page-cols { display: grid; grid-template-columns: minmax(0, 44rem) minmax(13rem, 16rem); gap: 3rem; align-items: start; } .fk-portrait-aside { width: 100%; } .fk-author-band { padding-block: 3.5rem; background: var(--bg-alt); } .fk-author-inner { display: grid; grid-template-columns: minmax(0, 16rem) 1fr; gap: 2.5rem; align-items: center; } html[data-palette="grimoire"] .fk-portrait { outline: 1px solid var(--line); outline-offset: 4px; } /* ---------- Avatar axes (data-avatar shape × data-avatar-side) ---------- */ /* default "frame": theme radius + border + shadow, as declared above */ html[data-avatar="round"] .fk-portrait, html[data-avatar="square"] .fk-portrait, html[data-avatar="organic"] .fk-portrait { aspect-ratio: 1; object-fit: cover; } html[data-avatar="round"] .fk-portrait { border-radius: 50%; } html[data-avatar="square"] .fk-portrait { border-radius: 0; } html[data-avatar="organic"] .fk-portrait { border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%; } html[data-avatar-side="right"] .fk-author-inner { grid-template-columns: 1fr minmax(0, 16rem); } html[data-avatar-side="right"] .fk-portrait-band { order: 2; } @media (max-width: 48rem) { .fk-author-inner, html[data-avatar-side="right"] .fk-author-inner { grid-template-columns: 1fr; } html[data-avatar-side="right"] .fk-portrait-band { order: 0; } .fk-page-cols { grid-template-columns: 1fr; gap: 1.5rem; } .fk-portrait-aside { order: -1; width: min(14rem, 100%); } } /* ---------- Worlds ---------- */ .fk-world-chips { list-style: none; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem; } .fk-world-chips a { display: inline-block; padding: 0.35rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: 0.95rem; background: var(--surface); } .fk-world-chips a:hover { border-color: var(--accent); color: var(--accent); } .fk-chip-more { font-weight: 600; } .fk-world-grid { list-style: none; margin: 2rem 0 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); } .fk-world-grid li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1.1rem; } .fk-world-grid a { font-family: var(--font-display); text-decoration: none; } .fk-world-grid a:hover { color: var(--accent); } .fk-world-note { display: block; font-size: 0.85rem; color: var(--ink-muted); margin-top: 0.2rem; } /* ---------- Book (series) page ---------- */ .fk-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.9rem; color: var(--ink-muted); margin: 0 0 2rem; } .fk-breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; } .fk-book-header { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 2.5rem; align-items: start; margin-bottom: 2.5rem; } .fk-book-header h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); } .fk-book-cover { border-radius: var(--radius); box-shadow: 0 16px 40px rgb(0 0 0 / 0.3); } .fk-prose { max-width: 44rem; } .fk-titles { margin-top: 3rem; } .fk-title-list { list-style: none; margin: 1.5rem 0 0; display: grid; gap: 1rem; } .fk-title-item { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; } .fk-title-item img { width: 72px; border-radius: 0.25rem; } .fk-title-item > div:only-child { grid-column: 1 / -1; } .fk-title-name { font-family: var(--font-display); font-size: 1.15rem; display: block; } .fk-title-meta { color: var(--ink-muted); font-size: 0.9rem; display: block; } .fk-preview-link { font-size: 0.95rem; color: var(--accent); } .fk-series-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; font-family: var(--font-display); } .fk-series-pager a { text-decoration: none; } .fk-series-pager a:hover { text-decoration: underline; text-decoration-color: var(--accent); } /* ---------- Newsletter band (data-newsletter axis) ---------- */ .fk-newsletter-band { position: relative; overflow: hidden; padding-block: 4rem; background: var(--bg-alt); border-top: 1px solid var(--line); } .fk-newsletter-bg { position: absolute; inset: 0; } .fk-newsletter-bg img { width: 100%; height: 100%; object-fit: cover; } .fk-newsletter-bg::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 68%, transparent); } .fk-newsletter-card { position: relative; max-width: 36rem; margin-inline: auto; text-align: center; padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(8px); } .fk-newsletter-card h2 { font-size: clamp(1.5rem, 3vw, 2rem); } html[data-newsletter="quiet"] .fk-newsletter-bg { display: none; } html[data-newsletter="quiet"] .fk-newsletter-card { background: var(--surface); backdrop-filter: none; } /* ---------- Footer ---------- */ .fk-footer { border-top: 1px solid var(--line); background: var(--bg-alt); padding-block: 2rem; } .fk-footer-meta { text-align: center; color: var(--ink-muted); font-size: 0.9rem; } .fk-footer-meta a { color: inherit; } /* ---------- Design switcher ---------- */ .fk-switcher { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; } .fk-switch-btn { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.06em; background: var(--surface); color: var(--ink); border: 1px solid var(--line); min-height: 44px; /* WCAG 2.5.5 target size */ border-radius: 999px; padding: 0.5rem 1rem; cursor: pointer; box-shadow: 0 4px 16px rgb(0 0 0 / 0.25); } .fk-switch-btn:hover { border-color: var(--accent); color: var(--accent); } .fk-switch-btn [data-value] { font-weight: 700; } .fk-switcher-panel { display: flex; flex-direction: column; gap: 0.5rem; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 1rem; padding: 0.75rem; box-shadow: 0 8px 32px rgb(0 0 0 / 0.35); max-height: min(70vh, 32rem); overflow-y: auto; } .fk-switcher-panel[hidden] { display: none; } .fk-switcher-panel .fk-switch-btn { box-shadow: none; text-align: left; } .fk-switcher-hr { border: 0; border-top: 1px solid var(--line); margin: 0.25rem 0; width: 100%; } .fk-switcher-fab { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--accent); color: var(--accent-ink); border: 1px solid transparent; box-shadow: 0 6px 20px rgb(0 0 0 / 0.35); transition: transform 200ms ease; } .fk-switcher-fab:hover { transform: rotate(30deg); } .fk-switcher-fab[aria-expanded="true"] { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .fk-switcher-fab, .fk-switcher-fab:hover { transform: none; } } /* ---------- Small screens ---------- */ @media (max-width: 48rem) { .fk-hero-inner, .fk-featured-inner, .fk-book-header, .fk-series, .fk-series:nth-child(even) { grid-template-columns: 1fr; } .fk-series:nth-child(even) .fk-series-cover { order: 0; } .fk-series-cover { max-width: 16rem; } .fk-hero-inner { padding-block: 2.5rem; } /* Variant grids set columns with higher specificity; re-stack them here. */ html[data-hero="scrim"] .fk-hero-inner, html[data-hero="blur"] .fk-hero-inner { grid-template-columns: 1fr; } html[data-hero="name"] .fk-hero-inner { padding-block: 4rem; } html[data-hero="fan"] .fk-hero-art-fan li { max-width: 7.5rem; } .fk-hero-art-cover img { max-width: 14rem; } }