/* ──────────────────────────────────────────────────────────────── oharra.world — Earth & Sky design system Two-layer atmosphere: frame (reader's now) × chapter (then) ──────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@300;400;500;600&family=Noto+Color+Emoji&display=swap'); :root { /* Earth & Sky base palette */ --bg-primary: #f5f0e6; --bg-secondary: #e8dfd0; --bg-tertiary: #dccfb8; --surface-dark: #2a2520; --surface-darker: #1d1915; --accent-base: #3d5266; --text: #2a2520; --text-on-dark: #f5f0e6; --muted: #8a7d6c; --muted-on-dark: #a59581; --hairline: rgba(42, 37, 32, 0.12); --hairline-on-dark: rgba(245, 240, 230, 0.14); /* Brand emblem accent — used for sun/rays/bird in the new O'Harra mark. Falls back to seasonal --accent-frame in nested contexts. */ --brand-accent: #c47a3c; /* Dynamic atmosphere — frame (defaults; JS overrides) */ --accent-frame: var(--accent-base); --accent-chapter: var(--accent-base); --hero-overlay-frame: linear-gradient(180deg, rgba(245, 240, 230, 0.04), transparent); --hero-overlay-chapter: linear-gradient(180deg, rgba(245, 240, 230, 0.04), transparent); /* Type */ --font-serif: "Crimson Pro", "EB Garamond", Georgia, serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla"; --font-sans: "Inter", -apple-system, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla"; /* Scale */ --measure: 64ch; --rail: clamp(24px, 4vw, 56px); } /* ── Season → frame accent (live, set on ) ── */ html[data-season-current="winter"] { --accent-frame: #6b7d8a; } html[data-season-current="spring"] { --accent-frame: #6b8a4a; } html[data-season-current="summer"] { --accent-frame: #3d6047; } html[data-season-current="autumn"] { --accent-frame: #b06a3a; } /* ── Time-of-day → frame hero overlay ── */ html[data-time-current="morning"] { --hero-overlay-frame: linear-gradient(180deg, rgba(255, 220, 170, 0.22) 0%, rgba(255, 220, 170, 0.04) 50%, transparent 100%); } html[data-time-current="day"] { --hero-overlay-frame: linear-gradient(180deg, rgba(245, 240, 230, 0.06), rgba(245, 240, 230, 0.02)); } html[data-time-current="evening"] { --hero-overlay-frame: linear-gradient(180deg, rgba(255, 150, 90, 0.14) 0%, rgba(180, 80, 50, 0.18) 70%, rgba(80, 30, 20, 0.30) 100%); } html[data-time-current="night"] { --hero-overlay-frame: linear-gradient(180deg, rgba(20, 30, 60, 0.42), rgba(10, 15, 35, 0.62)); } /* ── Season → chapter accent (on
) ── */ article[data-season="winter"] { --accent-chapter: #6b7d8a; } article[data-season="spring"] { --accent-chapter: #6b8a4a; } article[data-season="summer"] { --accent-chapter: #3d6047; } article[data-season="autumn"] { --accent-chapter: #b06a3a; } /* ── Time-of-day → chapter hero overlay ── */ article[data-time="morning"] { --hero-overlay-chapter: linear-gradient(180deg, rgba(255, 220, 170, 0.22) 0%, rgba(255, 220, 170, 0.04) 50%, transparent 100%); } article[data-time="day"] { --hero-overlay-chapter: linear-gradient(180deg, rgba(245, 240, 230, 0.06), rgba(245, 240, 230, 0.02)); } article[data-time="evening"] { --hero-overlay-chapter: linear-gradient(180deg, rgba(255, 150, 90, 0.14) 0%, rgba(180, 80, 50, 0.18) 70%, rgba(80, 30, 20, 0.30) 100%); } article[data-time="night"] { --hero-overlay-chapter: linear-gradient(180deg, rgba(20, 30, 60, 0.42), rgba(10, 15, 35, 0.62)); } /* ── Base ── */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg-primary); color: var(--text); font-family: var(--font-serif); font-size: 19px; line-height: 1.6; font-weight: 400; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; min-height: 100vh; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } /* ── Top nav ── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--rail); font-family: var(--font-sans); font-size: 13px; font-weight: 400; letter-spacing: 0.04em; color: var(--text-on-dark); background: linear-gradient(180deg, rgba(20, 18, 14, 0.55) 0%, rgba(20, 18, 14, 0.20) 60%, transparent 100%); transition: background 0.3s ease; } .nav.is-solid { background: var(--surface-dark); border-bottom: 1px solid var(--hairline-on-dark); } .nav--inverse { color: var(--text); background: var(--bg-primary); border-bottom: 1px solid var(--hairline); } .nav-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-size: 20px; font-weight: 500; letter-spacing: 0.02em; } .nav-brand svg { width: 26px; height: 26px; flex: none; } .nav-links { display: flex; align-items: center; gap: 36px; } .nav-links a { position: relative; padding: 4px 0; opacity: 0.82; transition: opacity 0.2s; } .nav-links a:hover { opacity: 1; } .nav-links a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; opacity: 0.5; } /* Language switcher — all items share padding + border-radius so the active one (light pill bg) sits on the same baseline as the inactive links. No more raised/lowered active item; just a visible chip. */ .nav-lang { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; letter-spacing: 0.08em; } .nav-lang a, .nav-lang button, .nav-lang__current { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 4px 9px; border-radius: 6px; border: 0; font: inherit; letter-spacing: inherit; text-decoration: none; color: inherit; background: transparent; opacity: 0.55; cursor: pointer; transition: opacity 0.18s, background 0.18s, color 0.18s; line-height: 1.1; } .nav-lang a:hover, .nav-lang button:hover { opacity: 0.95; } .nav-lang__current, .nav-lang .is-active { /* light cream chip — ink-coloured letter pops against it on both light-nav and dark-footer backgrounds */ background: var(--bg-primary); color: var(--surface-dark); opacity: 1; cursor: default; font-weight: 500; } /* Placeholder links (Дневник until launched) */ .nav-links a.is-placeholder { opacity: 0.5; } /* Mobile burger button — hidden on desktop */ .nav-toggle { display: none; border: 1px solid rgba(245, 240, 230, 0.32); background: transparent; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 0; color: inherit; flex: none; } .nav-toggle span { display: block; width: 15px; height: 1.5px; background: currentColor; transition: transform 0.3s, opacity 0.3s; } body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } /* Backdrop behind the drawer */ .nav-backdrop { position: fixed; inset: 0; background: rgba(20, 18, 14, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 90; } body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; } /* The drawer (.nav-links in mobile mode) is a child of .nav (z-50). Its own z-index can't escape the parent's stacking context, so the body- level .nav-backdrop (z-90) would render OVER it — same lesson as ferdinandoferro. Raise the whole .nav above the backdrop while the drawer is open. */ body.nav-open .nav { z-index: 110; } /* Fixed widgets are hidden until the viewer scrolls past the hero, then re-hidden when they reach the footer area — so they never cover hero meta or footer text. Toggled by JS in _base.j2 via body.past-hero + body.at-bottom. */ .chapter-counter, .dual-atmos, .atmosphere-chip, .book-progress { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } body.past-hero .chapter-counter, body.past-hero .dual-atmos, body.past-hero .atmosphere-chip, body.past-hero .book-progress { opacity: 1; pointer-events: auto; } body.past-hero.at-bottom .chapter-counter, body.past-hero.at-bottom .dual-atmos, body.past-hero.at-bottom .atmosphere-chip, body.past-hero.at-bottom .book-progress { opacity: 0; pointer-events: none; } /* ── Hero (used on landing + chapter + book covers) ── */ .hero { position: relative; width: 100%; height: 100vh; min-height: 640px; overflow: hidden; background: var(--surface-darker); color: var(--text-on-dark); } .hero--tall { height: 100vh; } .hero--medium { height: 80vh; min-height: 520px; } /* Compact hero — content (title + meta) fills no more than ~half the viewport, so the body / post list sits ABOVE the fold. */ .hero--compact { height: clamp(280px, 46vh, 440px); min-height: 280px; } .hero--compact .hero__cue { display: none; } /* Text-only diary entry header (replaces the photo-background hero). Compact, sits at the top of every post; the hero photo lives in the Media section below so it never darkens the page chrome. */ .entry-header { /* top padding clears the fixed .nav (≈58px) + breathing room */ padding: clamp(96px, 14vh, 148px) clamp(24px, 6vw, 120px) clamp(36px, 5vh, 56px); max-width: 880px; margin: 0 auto; border-bottom: 1px solid var(--hairline); } /* For notes — the body itself becomes the visual centerpiece. Take a bit more vertical room and centre-align so the post breathes properly. */ .entry-header--note { padding-bottom: clamp(48px, 7vh, 80px); text-align: left; } .entry-header__lede { font-family: var(--font-serif); font-size: clamp(26px, 3.6vw, 44px); font-style: italic; font-weight: 400; line-height: 1.22; letter-spacing: -0.005em; color: var(--text); margin: 0 0 28px; } /* body_html arrives wrapped in

; neutralise default margins so the lede sits flush in its slot, but keep inter-paragraph rhythm for multi-paragraph (medium-length) notes. */ .entry-header__lede p { margin: 0 0 0.55em; } .entry-header__lede p:last-child { margin-bottom: 0; } .entry-header__lede :is(em, b, strong) { font-style: normal; } /* Medium-length notes (281–800 chars): scaled-down italic lede so 3–4 paragraphs read comfortably without dominating the viewport. */ .entry-header__lede--sm { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.32; letter-spacing: 0; } .entry-header__lede--sm p { margin: 0 0 0.7em; } .entry-header__back { display: inline-block; font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); text-decoration: none; margin-bottom: clamp(20px, 3vh, 32px); } .entry-header__back:hover { color: var(--text); } .entry-header__title { font-family: var(--font-serif); font-size: clamp(30px, 5vw, 56px); font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 18px; color: var(--text); } .entry-header__meta { font-family: var(--font-sans); font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .entry-header__dot { width: 3px; height: 3px; background: currentColor; border-radius: 50%; opacity: 0.6; } /* Diary pages don't sit on a dark photo hero, so the default semi-opaque dark gradient on .nav looks like a phantom shadow. Flatten it to the page background — the topbar matches the cream surface, no fade. */ body[data-page="diary"] .nav, body[data-page="diary-entry"] .nav { background: var(--bg-primary); color: var(--text); border-bottom: 1px solid var(--hairline); } body[data-page="diary"] .nav .nav-links a, body[data-page="diary-entry"] .nav .nav-links a, body[data-page="diary"] .nav-brand, body[data-page="diary-entry"] .nav-brand { color: var(--text); } /* Text-only diary index header: no background photo, just typography. Sits above the cards list so the first screen shows the latest entries immediately. */ .diary-header { padding: clamp(96px, 14vh, 148px) clamp(24px, 6vw, 120px) clamp(28px, 4vh, 44px); text-align: center; border-bottom: 1px solid var(--hairline); } .diary-header__eyebrow { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .diary-header__title { font-family: var(--font-serif); font-size: clamp(40px, 7vw, 80px); font-weight: 500; line-height: 1.05; margin: 0 0 12px; letter-spacing: -0.01em; } .diary-header__tagline { font-family: var(--font-sans); font-size: 14px; color: var(--muted); } .hero__photo { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; } /* Gallery mode: stack multiple .hero__photo elements, crossfade between them via .is-active. JS rotation in _base.j2. First photo is rendered with .is-active server-side so the hero isn't black before JS runs. */ .hero--gallery .hero__photo { opacity: 0; transition: opacity 1.6s ease-in-out; } .hero--gallery .hero__photo.is-active { opacity: 1; } .hero__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hero__overlay--frame { background: var(--hero-overlay-frame); } .hero__overlay--chapter { background: var(--hero-overlay-chapter); } .hero__overlay--vignette { background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.50) 100%), linear-gradient(180deg, rgba(0,0,0,0.30) 0%, transparent 25%, transparent 60%, rgba(0,0,0,0.60) 100%); } .hero__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--rail) clamp(48px, 8vh, 96px); } .hero__content--center { justify-content: center; align-items: center; padding-bottom: 0; text-align: center; } /* Soft halo behind centered hero text. Sits as the first pseudo-element so it stacks below the wordmark/tagline (which are static-positioned in the flex flow). Wider than tall, deliberately blurred so photo stays vivid around the title area. */ .hero__content--center::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(92%, 1100px); height: clamp(280px, 50%, 520px); transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0.12) 65%, transparent 85%); filter: blur(18px); pointer-events: none; z-index: -1; } /* Landing hero typography */ .hero__wordmark { font-family: var(--font-serif); font-size: clamp(64px, 12vw, 180px); font-weight: 300; letter-spacing: -0.02em; line-height: 0.95; margin-bottom: 24px; text-shadow: 0 1px 0 rgba(0,0,0,0.35), 0 0 28px rgba(0,0,0,0.45), 0 8px 36px rgba(0,0,0,0.55); } .hero__wordmark em { font-style: italic; font-weight: 400; color: var(--accent-frame); filter: brightness(1.4); } .hero__tagline { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.34em; text-transform: uppercase; opacity: 0.95; margin-bottom: 0; text-shadow: 0 1px 12px rgba(0,0,0,0.65), 0 0 24px rgba(0,0,0,0.45); } .hero__tagline--top { margin-bottom: 40px; } /* Chapter hero typography */ .hero__eyebrow { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.92; margin-bottom: 18px; text-shadow: 0 1px 12px rgba(0,0,0,0.6); } .hero__title { font-family: var(--font-serif); font-size: clamp(40px, 6.5vw, 88px); font-style: italic; font-weight: 400; letter-spacing: -0.01em; line-height: 1.02; max-width: 16ch; margin-bottom: 18px; color: var(--text-on-dark); } .hero__title-accent { color: var(--accent-chapter); filter: brightness(1.5); } .hero__meta { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.04em; display: flex; gap: 18px; align-items: center; opacity: 0.78; } .hero__meta-dot { width: 3px; height: 3px; background: currentColor; border-radius: 50%; } /* Scroll cue */ .hero__cue { position: absolute; z-index: 2; bottom: 24px; left: 50%; transform: translateX(-50%); font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.7; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--text-on-dark); } .hero__cue::after { content: ''; width: 1px; height: 36px; background: currentColor; opacity: 0.5; animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 0.15; transform: scaleY(0.4); transform-origin: top; } 50% { opacity: 0.7; transform: scaleY(1); transform-origin: top; } } /* ── Sections ── */ .section { padding: clamp(80px, 12vh, 140px) var(--rail); } .section--narrow { max-width: 1280px; margin: 0 auto; } .section--dark { background: var(--surface-dark); color: var(--text-on-dark); } .section--cream2 { background: var(--bg-secondary); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; margin-bottom: 56px; padding-bottom: 24px; border-bottom: 1px solid var(--hairline); } .section--dark .section-head { border-bottom-color: var(--hairline-on-dark); } .section-eyebrow { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .section--dark .section-eyebrow { color: var(--muted-on-dark); } .section-title { font-family: var(--font-serif); font-size: clamp(36px, 4.5vw, 56px); font-weight: 400; letter-spacing: -0.01em; line-height: 1.05; } .section-title em { font-style: italic; font-weight: 400; color: var(--accent-frame); } .section-meta { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); flex: none; } /* ── Book cards (Хроники) ── */ .books { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; } .book { position: relative; overflow: hidden; background: var(--surface-darker); color: var(--text-on-dark); aspect-ratio: 3/4; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; text-decoration: none; cursor: pointer; transition: transform 0.4s ease; } .book:hover { transform: translateY(-4px); } .book__photo { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; transition: transform 0.8s ease; } .book:hover .book__photo { transform: scale(1.04); } .book__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.18) 28%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.88) 100%); } .book__body { position: relative; z-index: 2; } .book__num { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.32em; opacity: 0.7; margin-bottom: 14px; } .book__title { font-family: var(--font-serif); font-size: 32px; font-style: italic; font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 12px; } .book__meta { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.08em; opacity: 0.75; display: flex; gap: 12px; align-items: center; margin-bottom: 14px; } .book__desc { font-size: 15.5px; line-height: 1.5; opacity: 0.86; margin-bottom: 18px; max-width: 32ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .book__cta { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(245, 240, 230, 0.22); color: var(--text-on-dark); } .book__cta::after { content: '→'; transition: transform 0.3s; } .book:hover .book__cta::after { transform: translateX(4px); } /* Book sizing in the 12-col grid (landing: 2+3 layout) */ .book--feature { grid-column: span 7; aspect-ratio: 4/3; min-height: 520px; } .book--feature .book__title { font-size: 48px; max-width: 14ch; } .book--standard { grid-column: span 5; } .book--third { grid-column: span 4; } .book--current { grid-column: span 8; aspect-ratio: 16/7; min-height: 360px; } .book--current .book__title { font-size: 40px; } /* Status pill */ .pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; padding: 5px 10px; border: 1px solid currentColor; border-radius: 999px; opacity: 0.85; } .pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill--live::before { animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* ── About teaser ── */ .author-teaser { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 6vw, 88px); align-items: center; } .author-teaser__photo { aspect-ratio: 4/5; background-size: cover; background-position: center; background-color: var(--bg-tertiary); } .author-teaser__body { padding: 24px 0; } .author-teaser h2 { font-family: var(--font-serif); font-size: clamp(36px, 4vw, 56px); font-weight: 400; line-height: 1.05; margin-bottom: 32px; letter-spacing: -0.01em; } .author-teaser h2 em { font-style: italic; color: var(--accent-frame); } .author-teaser p { font-size: 22px; line-height: 1.55; margin-bottom: 24px; max-width: 32ch; color: rgba(42, 37, 32, 0.85); } .text-link { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--text); } .text-link::after { content: '→'; transition: transform 0.3s; } .text-link:hover::after { transform: translateX(4px); } /* ── Footer ── */ .footer { background: var(--surface-dark); color: var(--text-on-dark); padding: 80px var(--rail) 40px; font-family: var(--font-sans); font-size: 13px; } .footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid var(--hairline-on-dark); } .footer__brand { font-family: var(--font-serif); font-size: 32px; font-weight: 400; letter-spacing: 0.02em; display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .footer__brand svg { width: 32px; height: 32px; } .footer__tag { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.6; margin-top: 12px; } .footer__col h4 { font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.55; margin-bottom: 16px; } .footer__col ul { list-style: none; } .footer__col li { margin-bottom: 10px; } .footer__col a { opacity: 0.85; transition: opacity 0.2s; } .footer__col a:hover { opacity: 1; } .footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; font-size: 12px; opacity: 0.55; letter-spacing: 0.06em; } /* ── Reading view ── */ .reading { background: var(--bg-primary); padding: clamp(64px, 10vh, 120px) var(--rail) clamp(80px, 12vh, 140px); } .reading__container { max-width: 760px; margin: 0 auto; } .reading__intro-meta { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 48px; display: flex; gap: 14px; align-items: center; } .reading__intro-meta-dot { width: 3px; height: 3px; background: currentColor; border-radius: 50%; opacity: 0.6; } .prose { font-family: var(--font-serif); font-size: 21px; line-height: 1.65; color: var(--text); } .prose p { margin-bottom: 1.4em; text-wrap: pretty; } .prose p:first-child::first-letter { font-size: 5.6em; float: left; line-height: 0.85; padding: 0.08em 0.16em 0 0; font-style: italic; font-weight: 400; color: var(--accent-chapter); } .prose .lead { font-size: 26px; line-height: 1.5; font-style: italic; color: rgba(42, 37, 32, 0.86); margin-bottom: 1.6em; } .prose h2 { font-family: var(--font-serif); font-size: 32px; font-style: italic; font-weight: 400; letter-spacing: -0.01em; margin: 1.8em 0 0.6em; } .prose blockquote { font-style: italic; font-size: 28px; line-height: 1.4; margin: 1.4em -40px; padding: 0 40px; border-left: 2px solid var(--accent-chapter); color: rgba(42, 37, 32, 0.84); text-wrap: balance; } .prose figure { margin: 2em -80px; } .prose figure img, .prose figure .figure-photo { width: 100%; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: var(--bg-tertiary); } .prose figure.figure--parchment .figure-photo { aspect-ratio: 1 / 1; max-width: 480px; margin: 0 auto; /* organic "parchment" mask */ -webkit-mask-image: radial-gradient(ellipse 110% 95% at 50% 50%, #000 60%, transparent 95%); mask-image: radial-gradient(ellipse 110% 95% at 50% 50%, #000 60%, transparent 95%); filter: sepia(0.05) saturate(0.85); } .prose figcaption { font-family: var(--font-sans); font-size: 13px; text-align: center; color: var(--muted); margin-top: 14px; letter-spacing: 0.02em; } /* Progress bar */ .read-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 51; pointer-events: none; } .read-progress__fill { height: 100%; width: 0%; background: var(--accent-chapter); transition: width 0.08s linear; } /* ── Chapter gallery (masonry of originals, opens lightbox) ── */ .gallery { /* full-bleed break-out of the 760px reading container */ width: 100vw; margin-left: 50%; transform: translateX(-50%); margin-top: clamp(56px, 9vh, 96px); padding: 0 var(--rail); } .gallery__eyebrow { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 28px; position: relative; } .gallery__eyebrow::before, .gallery__eyebrow::after { content: ""; position: absolute; top: 50%; width: clamp(40px, 12vw, 120px); height: 1px; background: var(--hairline); } .gallery__eyebrow::before { right: calc(50% + 9ch); } .gallery__eyebrow::after { left: calc(50% + 9ch); } .gallery__grid { column-count: 3; column-gap: 12px; max-width: 1200px; margin: 0 auto; } @media (max-width: 900px) { .gallery__grid { column-count: 2; column-gap: 10px; } } @media (max-width: 520px) { .gallery__grid { column-count: 2; column-gap: 8px; } } /* Small-count layouts: avoid lopsided empty columns in masonry */ .gallery__grid[data-count="1"] { column-count: unset; display: flex; justify-content: center; } .gallery__grid[data-count="1"] .gallery__item { max-width: 760px; width: 100%; margin-bottom: 0; } .gallery__grid[data-count="2"] { column-count: 2; max-width: 880px; } @media (max-width: 520px) { .gallery__grid[data-count="1"] .gallery__item { max-width: 100%; } } .gallery__item { display: block; width: 100%; padding: 0; margin: 0 0 12px; border: 0; background: var(--bg-tertiary); cursor: zoom-in; break-inside: avoid; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease; } .gallery__item:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(42, 37, 32, 0.12); } .gallery__item:focus-visible { outline: 2px solid var(--accent-chapter); outline-offset: 2px; } .gallery__item img { display: block; width: 100%; height: auto; } /* ── Lightbox overlay ── */ body.lightbox-open { overflow: hidden; } .lightbox { position: fixed; inset: 0; background: rgba(20, 16, 12, 0.94); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vh, 48px); animation: lightbox-in 0.18s ease; } .lightbox[hidden] { display: none; } @keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } } .lightbox__stage { margin: 0; max-width: 96vw; max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 16px; } .lightbox__image { max-width: 100%; max-height: 86vh; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; } .lightbox__counter { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245, 240, 230, 0.7); } .lightbox__close, .lightbox__nav { position: absolute; border: 0; background: rgba(245, 240, 230, 0.08); color: var(--text-on-dark); width: 48px; height: 48px; border-radius: 50%; font-family: var(--font-sans); font-size: 26px; line-height: 1; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .lightbox__close:hover, .lightbox__nav:hover { background: rgba(245, 240, 230, 0.18); } .lightbox__close { top: clamp(12px, 3vh, 24px); right: clamp(12px, 3vw, 24px); font-size: 30px; } .lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 32px; } .lightbox__nav:hover { transform: translateY(-50%) scale(1.06); } .lightbox__nav--prev { left: clamp(12px, 3vw, 32px); } .lightbox__nav--next { right: clamp(12px, 3vw, 32px); } @media (max-width: 600px) { .lightbox__nav { width: 40px; height: 40px; font-size: 26px; } .lightbox__close { width: 40px; height: 40px; font-size: 24px; } } /* ── Chapter gallery: slider variant (>12 photos) ── */ .gallery--slider .gallery__slider { position: relative; max-width: 1200px; margin: 0 auto; } .gallery__track { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* fixed reading height; photo fits inside via object-fit */ height: clamp(360px, 70vh, 720px); background: #1a1612; } .gallery__track::-webkit-scrollbar { display: none; } .gallery__slide { flex: 0 0 100%; scroll-snap-align: center; padding: 0; margin: 0; border: 0; background: transparent; cursor: zoom-in; display: flex; align-items: center; justify-content: center; overflow: hidden; } .gallery__slide img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .gallery__sbtn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(245, 240, 230, 0.86); color: var(--text); font-size: 32px; line-height: 1; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; z-index: 2; } .gallery__sbtn:hover { background: rgba(245, 240, 230, 0.98); transform: translateY(-50%) scale(1.06); } .gallery__sbtn--prev { left: clamp(8px, 1.5vw, 18px); } .gallery__sbtn--next { right: clamp(8px, 1.5vw, 18px); } .gallery__counter { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(0, 0, 0, 0.55); color: var(--text-on-dark); padding: 6px 14px; border-radius: 999px; font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; z-index: 2; } @media (max-width: 600px) { .gallery__sbtn { width: 40px; height: 40px; font-size: 26px; } .gallery__track { height: clamp(280px, 58vh, 460px); } } /* ── Poetry index: category grid ── */ .poetry-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(16px, 2vw, 24px); max-width: 1100px; margin: 0 auto; } .poetry-cat { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--surface-paper); border: 1px solid var(--hairline); transition: transform 0.25s ease, box-shadow 0.25s ease; } .poetry-cat:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(42, 37, 32, 0.14); } .poetry-cat__cover { aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: var(--bg-tertiary); } .poetry-cat__body { padding: 20px 22px 22px; } .poetry-cat__title { font-family: var(--font-serif); font-size: 26px; font-style: italic; font-weight: 500; margin: 0 0 6px; } .poetry-cat__meta { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } /* ── Poetry category page: list of poems ── */ .poetry-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(14px, 1.8vw, 22px); max-width: 1100px; margin: 0 auto; } .poetry-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--surface-paper); border: 1px solid var(--hairline); transition: transform 0.2s ease, box-shadow 0.2s ease; } .poetry-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(42, 37, 32, 0.10); } .poetry-card__cover { aspect-ratio: 1 / 1; background-size: cover; background-position: center; background-color: var(--bg-tertiary); } .poetry-card__body { padding: 14px 16px 18px; } .poetry-card__title { font-family: var(--font-serif); font-size: 19px; font-weight: 500; margin: 0 0 4px; line-height: 1.25; } .poetry-card__meta { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .poetry-back { margin-top: 40px; text-align: center; font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; } .poetry-back a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--hairline); padding-bottom: 2px; } .poetry-back a:hover { color: var(--text); border-color: currentColor; } /* ── Individual poem ── */ .poem-body { font-family: var(--font-serif); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.55; color: var(--text); text-align: center; max-width: 36ch; margin: 0 auto; } .poem-stanza { margin-bottom: 1.8em; } .poem-stanza:last-child { margin-bottom: 0; } .poem-line { /* preserve typographic spacing; no italic by default */ } .poem-signature { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); text-align: center; margin: 60px 0 24px; position: relative; } .poem-signature::before, .poem-signature::after { content: ""; position: absolute; top: 50%; width: clamp(40px, 12vw, 120px); height: 1px; background: var(--hairline); } .poem-signature::before { right: calc(50% + 12ch); } .poem-signature::after { left: calc(50% + 12ch); } /* Chapter nav (prev/next) */ .chapter-nav { border-top: 1px solid var(--hairline); margin-top: 80px; padding-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .chapter-nav__item { padding: 24px 0; text-decoration: none; } .chapter-nav__item--prev { text-align: left; } .chapter-nav__item--next { text-align: right; } .chapter-nav__label { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .chapter-nav__title { font-family: var(--font-serif); font-size: 22px; font-style: italic; color: var(--text); } /* Chapter index counter */ .chapter-counter { position: fixed; left: var(--rail); bottom: 28px; z-index: 30; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 12px; pointer-events: none; } .chapter-counter__bar { width: 80px; height: 1px; background: var(--hairline); position: relative; overflow: hidden; } .chapter-counter__fill { position: absolute; inset: 0; background: var(--accent-chapter); transform-origin: left; } /* Dual-layer atmosphere indicator (chapter pages) */ .dual-atmos { position: fixed; right: var(--rail); bottom: 24px; z-index: 30; display: flex; gap: 0; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; background: rgba(245, 240, 230, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--hairline); border-radius: 999px; overflow: hidden; pointer-events: none; } .dual-atmos__cell { display: flex; align-items: center; gap: 8px; padding: 9px 14px; } .dual-atmos__cell + .dual-atmos__cell { border-left: 1px solid var(--hairline); } .dual-atmos__dot { width: 8px; height: 8px; border-radius: 50%; } .dual-atmos__dot--frame { background: var(--accent-frame); box-shadow: 0 0 10px var(--accent-frame); } .dual-atmos__dot--chapter { background: var(--accent-chapter); box-shadow: 0 0 10px var(--accent-chapter); } .dual-atmos__label { color: var(--muted); font-size: 9px; letter-spacing: 0.2em; } .dual-atmos__value { color: var(--text); font-weight: 500; font-size: 11px; } /* ── Atmosphere chip (shown on landing, optional) ── */ .atmosphere-chip { position: fixed; right: 24px; bottom: 28px; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: rgba(20, 18, 14, 0.55); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(245, 240, 230, 0.12); border-radius: 999px; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-on-dark); opacity: 0.85; } .atmosphere-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-frame); filter: brightness(1.4); box-shadow: 0 0 12px var(--accent-frame); } .atmosphere-chip__sep { opacity: 0.4; } /* ── Chapter grid (book hub) ── */ .chapters-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 56px; } .chapter-card { display: grid; grid-template-columns: 180px 1fr; gap: 24px; text-decoration: none; color: inherit; align-items: start; } /* Allow text cells to shrink below intrinsic content width — without this, long single words (city names, etc.) push the grid column wider than its 1fr share and the title overflows the card. */ .chapter-card > * { min-width: 0; } .chapter-card__title { overflow-wrap: break-word; hyphens: auto; } .chapter-card__excerpt { overflow-wrap: break-word; } .chapter-card__thumb { aspect-ratio: 1 / 1; background-size: cover; background-position: center; background-color: var(--bg-tertiary); } .chapter-card__num { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .chapter-card__title { font-family: var(--font-serif); font-size: 24px; font-style: italic; font-weight: 400; letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 10px; } .chapter-card__excerpt { font-size: 16px; line-height: 1.55; color: rgba(42, 37, 32, 0.78); margin-bottom: 10px; } .chapter-card__meta { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); } /* Sticky progress (book hub) */ .book-progress { position: fixed; right: var(--rail); top: 50%; transform: translateY(-50%); z-index: 30; background: rgba(245, 240, 230, 0.85); backdrop-filter: blur(20px); border: 1px solid var(--hairline); padding: 18px 20px; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .book-progress__count { display: block; font-family: var(--font-serif); font-size: 28px; font-style: italic; letter-spacing: -0.01em; text-transform: none; color: var(--text); margin-bottom: 4px; } .book-progress__bar { width: 120px; height: 2px; background: var(--hairline); margin-top: 14px; position: relative; } .book-progress__fill { position: absolute; inset: 0; background: var(--accent-frame); transform-origin: left; } /* ── About page ── */ .about-hero { padding: clamp(120px, 18vh, 200px) var(--rail) clamp(80px, 12vh, 140px); max-width: 1280px; margin: 0 auto; } .about-epigraph { font-family: var(--font-serif); font-size: clamp(36px, 4.5vw, 56px); font-style: italic; font-weight: 400; letter-spacing: -0.01em; line-height: 1.15; max-width: 22ch; margin-bottom: 64px; color: var(--text); text-wrap: balance; } .about-epigraph__mark { display: block; font-size: 60px; line-height: 0; color: var(--accent-frame); margin-bottom: 24px; font-style: normal; } .about-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(48px, 7vw, 96px); align-items: start; } .about-portrait { position: sticky; top: 120px; aspect-ratio: 4/5; background-size: cover; background-position: center; background-color: var(--bg-tertiary); } .about-body p { font-size: 21px; line-height: 1.65; margin-bottom: 1.3em; text-wrap: pretty; } .about-body p:first-child { font-size: 24px; font-style: italic; color: rgba(42, 37, 32, 0.88); } /* Social row */ .socials { display: flex; gap: 14px; align-items: center; } .socials a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid currentColor; opacity: 0.75; transition: opacity 0.2s, transform 0.2s; } .socials a:hover { opacity: 1; transform: translateY(-1px); } .socials svg { width: 14px; height: 14px; } /* Text-based social row (about page). Plain links with underline, no circle. */ .socials-text { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-top: 16px; } .socials-text a { font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.04em; color: var(--text); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid rgba(42, 37, 32, 0.25); transition: border-color 0.2s, color 0.2s; } .socials-text a:hover { color: var(--accent-base); border-bottom-color: var(--accent-base); } /* ── Chronicles hub ── */ .chronicles-hub { padding: clamp(120px, 18vh, 200px) var(--rail) clamp(80px, 12vh, 140px); max-width: 1440px; margin: 0 auto; } .chronicles-hub__head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 96px; } .chronicles-hub__title { font-family: var(--font-serif); font-size: clamp(56px, 8vw, 112px); font-weight: 300; letter-spacing: -0.02em; line-height: 0.95; } .chronicles-hub__title em { font-style: italic; font-weight: 400; color: var(--accent-frame); } .chronicles-hub__intro { font-size: 19px; line-height: 1.6; color: rgba(42, 37, 32, 0.84); max-width: 44ch; padding-bottom: 14px; } .chronicles-list { display: flex; flex-direction: column; gap: 0; } .chronicles-list__item { display: grid; grid-template-columns: 80px 1.2fr 1fr; gap: clamp(32px, 5vw, 80px); padding: 48px 0; border-bottom: 1px solid var(--hairline); align-items: center; text-decoration: none; color: inherit; transition: opacity 0.3s; } .chronicles-list__item:first-child { border-top: 1px solid var(--hairline); } .chronicles-list__item:hover { opacity: 0.85; } .chronicles-list__num { font-family: var(--font-serif); font-size: 56px; font-style: italic; color: var(--accent-frame); font-weight: 400; line-height: 1; } .chronicles-list__body {} .chronicles-list__title { font-family: var(--font-serif); font-size: 44px; font-style: italic; font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 12px; } .chronicles-list__meta { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); display: flex; gap: 14px; align-items: center; margin-bottom: 14px; } .chronicles-list__desc { font-size: 17px; line-height: 1.55; color: rgba(42, 37, 32, 0.78); max-width: 40ch; } .chronicles-list__photo { aspect-ratio: 4/3; background-size: cover; background-position: center; background-color: var(--bg-tertiary); } /* ── Book hub specific ── */ .book-hub__intro { max-width: 720px; margin: 0 auto; padding: clamp(80px, 12vh, 140px) var(--rail); text-align: center; } .book-hub__intro-eyebrow { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); margin-bottom: 32px; font-style: normal; } .book-hub__intro h2 { font-family: var(--font-serif); font-size: clamp(32px, 4vw, 48px); font-style: italic; font-weight: 400; margin-bottom: 48px; letter-spacing: -0.01em; line-height: 1.1; } .book-hub__intro p { text-align: left; font-size: 19px; line-height: 1.65; margin-bottom: 1.4em; color: rgba(42, 37, 32, 0.85); } .book-hub__chapters { padding: 0 var(--rail) clamp(80px, 12vh, 140px); max-width: 1280px; margin: 0 auto; } /* Tweaks panel customization */ .twk-panel { width: 320px !important; } /* Utility */ .u-mt-lg { margin-top: 48px; } .u-mt-xl { margin-top: 80px; } .u-text-muted { color: var(--muted); } /* Small responsive (just so the canvas isn't broken at <1280) */ @media (max-width: 1100px) { .books { grid-template-columns: repeat(6, 1fr); } .book--feature, .book--standard, .book--third, .book--current { grid-column: span 6; } .footer__top { grid-template-columns: 1fr 1fr; } .author-teaser, .about-grid { grid-template-columns: 1fr; } .about-portrait { position: relative; top: 0; max-width: 480px; } .chapters-grid { grid-template-columns: 1fr; } .chronicles-list__item { grid-template-columns: 60px 1fr; } .chronicles-list__photo { display: none; } .chronicles-hub__head { grid-template-columns: 1fr; } } /* Mobile (≤640px). Tighten cards, scale type, hide overflows. */ @media (max-width: 640px) { :root { --rail: 18px; } /* Top nav: brand + burger only; full menu in drawer */ .nav { padding: 14px 16px; } .nav-brand { font-size: 16px; gap: 8px; } .nav-brand svg { width: 22px; height: 22px; } .nav-toggle { display: inline-flex; } /* nav-links becomes a slide-in drawer from the right. z-100 puts it above .nav-backdrop (z-90). Since drawer is a sibling of nav and at body root (via being inside the fixed-nav's render tree but with own fixed pos), its stacking is not bounded by nav's z-50 — fixed elements rebase to viewport. */ .nav-links { position: fixed; top: 0; right: 0; bottom: 0; width: min(82vw, 320px); background: var(--surface-dark); color: var(--text-on-dark); display: flex; flex-direction: column; gap: 0; padding: 92px 28px 32px; transform: translateX(100%); transition: transform 0.35s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0.35s, opacity 0.2s linear; z-index: 100; overflow-y: auto; visibility: hidden; opacity: 0; border-left: 1px solid var(--hairline-on-dark); } body.nav-open .nav-links { transform: translateX(0); visibility: visible; opacity: 1; transition: transform 0.35s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0s, opacity 0.2s linear; } .nav-links a { display: block; padding: 20px 4px; border-bottom: 1px solid rgba(245, 240, 230, 0.12); font-size: 17px; font-weight: 500; letter-spacing: 0.02em; opacity: 0.92; white-space: nowrap; -webkit-tap-highlight-color: rgba(245, 240, 230, 0.15); touch-action: manipulation; } .nav-links a.is-placeholder { opacity: 0.5; } .nav-links a:active { background: rgba(245, 240, 230, 0.08); } /* Lang switcher inside drawer: row at the bottom, larger tap targets */ .nav-links .nav-lang { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(245, 240, 230, 0.18); gap: 8px; font-size: 13px; } .nav-links .nav-lang button { padding: 8px 14px; } body.nav-open { overflow: hidden; } .book { padding: 22px 20px; min-height: 340px; aspect-ratio: 4/5; } .book--feature { min-height: 380px; aspect-ratio: 4/5; } .book--feature .book__title { font-size: 32px; max-width: none; } .book__title { font-size: 24px; } .book__num { font-size: 10px; letter-spacing: 0.24em; margin-bottom: 10px; } .book__meta { font-size: 11px; margin-bottom: 10px; gap: 8px; flex-wrap: wrap; } .book__desc { font-size: 14px; -webkit-line-clamp: 2; margin-bottom: 14px; max-width: none; } .book__cta { font-size: 11px; padding-top: 10px; } .books { gap: 16px; } .footer__top { grid-template-columns: 1fr; gap: 32px; } .footer__col h4 { margin-bottom: 12px; } .section-head { flex-direction: column; gap: 16px; align-items: flex-start; } .section-meta { font-size: 11px; } .hero__wordmark { font-size: clamp(56px, 18vw, 96px); } .hero__tagline { font-size: 11px; letter-spacing: 0.26em; } .hero__tagline--top { margin-bottom: 24px; } .chapter-counter, .book-progress { font-size: 11px; padding: 10px 14px; } .dual-atmos { font-size: 10px; flex-direction: column; align-items: flex-start; padding: 12px; } .reading__container { padding: 0 18px; } .prose { font-size: 17px; } /* Chapter cards: stack thumb above body, allow text to break */ .chapter-card { grid-template-columns: 1fr; gap: 14px; } .chapter-card > * { min-width: 0; } .chapter-card__thumb { aspect-ratio: 16 / 10; max-height: 220px; } .chapter-card__title { font-size: 22px; overflow-wrap: break-word; word-break: normal; hyphens: auto; } .chapter-card__excerpt { font-size: 14.5px; overflow-wrap: break-word; } .chapters-grid { gap: 32px; } /* Sticky widgets — on mobile there's no horizontal margin to escape into, so any bottom-fixed widget eventually overlaps body text. Hide both chips on every page; the live atmosphere is still conveyed by the page frame's accent colours and hero-overlay tints. */ .atmosphere-chip { display: none; } body[data-page="chapter"] .dual-atmos { display: none; } /* Hide the decorative scroll cue ("ВВЕДЕНИЕ" / "ЧИТАТЬ") on mobile — it overlaps the hero meta line when the viewport is narrow. */ .hero__cue { display: none; } /* Hero meta wraps cleanly with smaller gap */ .hero__meta { flex-wrap: wrap; gap: 6px 12px; font-size: 12px; } .hero__meta-dot { display: none; } /* Chapter counter: keep at bottom-left but compact */ .chapter-counter { bottom: 18px; font-size: 10px; gap: 8px; } .chapter-counter__bar { width: 60px; } /* Chronicles hub: intro + list scale down to viewport */ .chronicles-hub { padding-top: clamp(96px, 14vh, 140px); } .chronicles-hub__title { font-size: clamp(34px, 9vw, 56px); overflow-wrap: break-word; hyphens: auto; } .chronicles-hub__intro { font-size: 16px; max-width: none; line-height: 1.55; } .chronicles-hub__head { gap: 24px; margin-bottom: 48px; } .chronicles-list__item { grid-template-columns: 44px 1fr; gap: 18px; padding: 28px 0; align-items: start; } .chronicles-list__item > * { min-width: 0; } .chronicles-list__num { font-size: 32px; } .chronicles-list__title { font-size: 26px; margin-bottom: 10px; overflow-wrap: break-word; hyphens: auto; } .chronicles-list__meta { font-size: 10px; letter-spacing: 0.12em; gap: 6px 10px; flex-wrap: wrap; margin-bottom: 12px; } .chronicles-list__desc { font-size: 14.5px; max-width: none; overflow-wrap: break-word; } /* About page: scale the epigraph down — at default sizing a 4-sentence teaser fills the whole viewport on a phone. */ .about-hero { padding-top: clamp(80px, 12vh, 120px); } .about-epigraph { font-size: clamp(20px, 5.5vw, 28px); line-height: 1.35; max-width: none; margin-bottom: 36px; } .about-epigraph__mark { font-size: 36px; margin-bottom: 8px; } .about-body p { font-size: 16.5px; line-height: 1.6; } .about-portrait { aspect-ratio: 4/5; max-height: 360px; } /* book-progress: move from middle-right to bottom-left so it doesn't collide with the dual-atmos chip in bottom-right */ .book-progress { top: auto; bottom: 18px; transform: none; right: auto; left: 14px; padding: 10px 14px; font-size: 10px; } .book-progress__count { font-size: 18px; margin-bottom: 2px; } .book-progress__bar { width: 72px; margin-top: 8px; } .atmosphere-chip { right: 16px; bottom: 18px; padding: 6px 12px; font-size: 10px; } } /* ── Diary index: cards grid ── */ .diary-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(20px, 2.5vw, 32px); max-width: 1100px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); } .diary-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--surface-paper); border: 1px solid var(--hairline); transition: transform 0.25s ease, box-shadow 0.25s ease; overflow: hidden; } .diary-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(42, 37, 32, 0.14); } .diary-card__cover { aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: var(--bg-tertiary); } .diary-card--note .diary-card__cover { aspect-ratio: 1 / 1; } .diary-card__body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 8px; } .diary-card__date { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .diary-card__title { font-family: var(--font-serif); font-size: 24px; font-style: italic; font-weight: 500; margin: 0; line-height: 1.3; } .diary-card--note .diary-card__title { font-size: 18px; font-style: normal; } .diary-card__excerpt { font-family: var(--font-serif); font-size: 15px; line-height: 1.55; color: var(--text); margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* ── Homepage diary strip ── */ .diary-strip { padding-top: clamp(80px, 10vh, 120px); padding-bottom: 0; } .diary-strip__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; margin-bottom: clamp(32px, 5vh, 56px); } .diary-strip__title { grid-column: 1; grid-row: 2; margin: 8px 0 0; } .diary-strip__head .section-eyebrow { grid-column: 1; grid-row: 1; margin: 0; } .diary-strip__more { grid-column: 2; grid-row: 2; align-self: end; font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; } .diary-strip__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px); } .diary-strip__card { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 14px; transition: transform 0.25s ease; } .diary-strip__card:hover { transform: translateY(-3px); } .diary-strip__cover { aspect-ratio: 4 / 3; background-color: var(--bg-tertiary); background-size: cover; background-position: center; border-radius: 4px; } .diary-strip__cover--blank { background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary)); } .diary-strip__date { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .diary-strip__cardtitle { font-family: var(--font-serif); font-size: clamp(17px, 1.4vw, 20px); font-style: italic; line-height: 1.35; color: var(--text); } @media (max-width: 820px) { .diary-strip__head { grid-template-columns: 1fr; } .diary-strip__more { grid-column: 1; grid-row: 3; align-self: start; margin-top: 4px; } .diary-strip__cards { grid-template-columns: 1fr; gap: 28px; } .diary-strip__cover { aspect-ratio: 16 / 10; } } /* ── Diary/chapter "Читайте также" related block ── */ .related { margin-top: clamp(48px, 8vh, 80px); padding-top: clamp(32px, 5vh, 56px); border-top: 1px solid var(--hairline); } .related__eyebrow { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: clamp(24px, 4vh, 36px); } .related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); } .related__card { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 12px; transition: transform 0.25s ease; } .related__card:hover { transform: translateY(-2px); } .related__cover { aspect-ratio: 4 / 3; background-color: var(--bg-tertiary); background-size: cover; background-position: center; border-radius: 3px; } .related__cover--blank { background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary)); } .related__date { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .related__title { font-family: var(--font-serif); font-size: 15px; font-style: italic; line-height: 1.4; color: var(--text); } @media (max-width: 700px) { .related__grid { grid-template-columns: 1fr; gap: 18px; } .related__cover { aspect-ratio: 16 / 10; } } /* ── Diary index: "Show more" pagination ── */ .diary-more { display: flex; justify-content: center; margin: clamp(28px, 5vh, 56px) 0; } .diary-more__btn { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; padding: 14px 32px; border: 1px solid var(--hairline); background: transparent; color: var(--text); cursor: pointer; border-radius: 2px; transition: background 0.2s, border-color 0.2s, color 0.2s; } .diary-more__btn:hover { background: var(--text); color: var(--bg); border-color: var(--text); } .diary-more__btn [data-diary-remaining] { font-variant-numeric: tabular-nums; opacity: 0.7; margin-left: 4px; } /* ── Diary entry page: body ── */ .diary-body { font-family: var(--font-serif); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.75; color: var(--text); } .diary-body p { margin: 0 0 1.15em; } .diary-body p:last-child { margin-bottom: 0; } /* ── Diary entry page: video inside the unified Media section ── */ .diary-video { margin: 0 auto; max-width: 1200px; border-radius: 4px; overflow: hidden; background: #000; } .diary-video + .gallery__grid, .diary-video + .gallery__slider { /* breathing room when a video sits above a photo grid */ margin-top: clamp(20px, 3vh, 36px); } .diary-video video { display: block; width: 100%; max-height: 70vh; object-fit: contain; background: #000; } /* ──────────────────────────────────────────────────────────────── O'Harra emblem (sun · mountains · river · eagle) Injected by brand.js into [data-brand] placeholders. Themed via currentColor (ink) + --brand-accent (sun/rays/bird). ──────────────────────────────────────────────────────────────── */ .oh-emblem { display: block; width: 100%; height: 100%; overflow: visible; } .oh-emblem--sm { width: 30px; height: 30px; } .oh-emblem--md { width: 40px; height: 40px; } .oh-emblem--xl { width: clamp(96px, 13vw, 150px); height: clamp(96px, 13vw, 150px); } .oh-ring { fill: none; stroke: currentColor; stroke-width: 1.3; opacity: 0.85; } .oh-emblem--xl .oh-ring { stroke-width: 0.7; opacity: 0.8; } .oh-mtn { fill: currentColor; } .oh-rays { stroke: var(--brand-accent, var(--accent-frame)); stroke-width: 0.9; stroke-linecap: round; opacity: 0.55; } .oh-sun { fill: var(--brand-accent, var(--accent-frame)); } .oh-bird { fill: var(--brand-accent, var(--accent-frame)); } .oh-river { fill: none; stroke: var(--brand-river, var(--bg-primary)); stroke-width: 2.1; stroke-linecap: round; opacity: 0.92; } /* Lockups: emblem + wordmark side-by-side (header/footer) or stacked (hero). */ .oh-lockup { display: flex; align-items: center; } .oh-lockup--header { gap: 11px; } .oh-lockup--header .oh-emblem { color: inherit; } .oh-wordmark { display: flex; flex-direction: column; line-height: 1; } .oh-wordmark__name { font-family: var(--font-serif); font-size: 21px; font-weight: 500; letter-spacing: 0.01em; } .oh-wordmark__sub { font-family: var(--font-sans); font-size: 9px; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; opacity: 0.6; margin-top: 4px; padding-left: 2px; } /* Footer lockup is slightly larger */ .oh-lockup--footer { gap: 13px; } .oh-lockup--footer .oh-wordmark__name { font-size: 28px; } /* Context theming: where the emblem sits on a dark background, the river needs to be dark (matches the disc fill); on a light bg the river is the cream colour. */ .nav .oh-emblem, .footer .oh-emblem { --brand-river: var(--surface-dark); } .nav--inverse .oh-emblem { --brand-river: var(--bg-primary); } /* Sun/bird slightly brightened in footer so the seasonal accent reads. */ .footer .oh-sun, .footer .oh-bird, .nav.is-solid .oh-sun, .nav.is-solid .oh-bird { filter: brightness(1.3); } /* When the lockup is the brand link in nav: drop the default text styling */ .nav-brand.oh-lockup--header { text-decoration: none; color: inherit; } .nav-brand.oh-lockup--header:hover { opacity: 0.85; }