) ── */ 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; } .nav-lang { display: flex; gap: 6px; font-size: 12px; letter-spacing: 0.08em; } .nav-lang button { appearance: none; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 4px 8px; border-radius: 999px; opacity: 0.5; transition: opacity 0.2s, background 0.2s; } .nav-lang button.is-active { opacity: 1; } .nav-lang button:hover { opacity: 0.9; } /* 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 fade out when the viewer scrolls to the footer area, so they stop covering "© oharra.world" / footer text. Toggled by JS in _base.j2 via body.at-bottom. */ .chapter-counter, .dual-atmos, .atmosphere-chip, .book-progress { transition: opacity 0.25s ease; } body.at-bottom .chapter-counter, body.at-bottom .dual-atmos, body.at-bottom .atmosphere-chip, body.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; } .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 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 chapter pages dual-atmos shows "Сейчас" already, so hide the standalone chip. Book hub no longer has dual-atmos, so the chip is welcome there. */ body[data-page="chapter"] .atmosphere-chip { 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; } /* 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; } }