/* ===================================================================== Design variants — three "whiter, slower" treatments. Activate by setting [data-design] on : "original" — keep the current warm parchment (no overrides) "snow" — pure white, scroll-snap pauses, generous breath "chapters" — soft cream, giant Roman numerals & epigraphs per section "gallery" — cool eggshell, centered exhibit compositions ===================================================================== */ /* ---------- Reveal-on-scroll: layout-only. Earlier iterations tried an opacity fade-in keyed off IntersectionObserver, but it surfaced edge cases (transitions paused in inactive frames left content invisible). The slow engagement comes from layout — spacing, scroll-snap, chapter markers, centred exhibits. Content is always visible; we just keep the data-reveal hook for any future use. */ /* ===================================================================== 1) SNOW — pure white, scroll-snap pauses, very generous breath. The page refuses to let you skim: it gently snaps to each section and content fades in once you've arrived. ===================================================================== */ body[data-design="snow"] { --paper: #fbfaf6; --paper-2: #fbfaf6; /* same as paper — kill all banding */ --ink: #1a1a18; --ink-soft: #524d44; --ink-mute: #a39a8a; --rule: #e6e0d2; --accent: #9a4f33; /* slightly softened terracotta */ } body[data-design="snow"] body, body[data-design="snow"] html { background: var(--paper); } body[data-design="snow"] body::before { /* a barely-there warm halo, much softer than the parchment original */ background: radial-gradient(1400px 900px at 80% -10%, rgba(154,79,51,0.025), transparent 60%); } /* every section becomes a snap target, with deliberate breath */ body[data-design="snow"] main { scroll-snap-type: y proximity; } body[data-design="snow"] section { scroll-snap-align: start; scroll-snap-stop: normal; padding: clamp(120px, 14vh, 180px) var(--gutter); } body[data-design="snow"] .hero { min-height: 100vh; padding-top: 160px; padding-bottom: 80px; display: grid; align-items: end; } body[data-design="snow"] .hero-grid { grid-template-columns: 1.5fr minmax(0, 300px); gap: 64px; } /* kill the alternating background blocks — keep one continuous paper */ body[data-design="snow"] .regions, body[data-design="snow"] .epilogue { background: var(--paper); border-top: 1px solid var(--rule); } body[data-design="snow"] .ai { background: var(--paper); color: var(--ink); border-top: 1px solid var(--rule); } body[data-design="snow"] .ai .sec-label { color: var(--ink-mute); } body[data-design="snow"] .ai .sec-label .rule { background: var(--rule); } body[data-design="snow"] .ai-grid { background: var(--rule); gap: 1px; } body[data-design="snow"] .ai-card { background: var(--paper); } body[data-design="snow"] .ai-card:hover { background: #f5f0e3; } body[data-design="snow"] .ai-card h4 { color: var(--ink); } body[data-design="snow"] .ai-card p { color: var(--ink-soft); } body[data-design="snow"] .ai-card .tag { color: var(--ink-mute); } body[data-design="snow"] .ai-card .num { color: var(--accent); } /* type: more breath */ body[data-design="snow"] .bio-grid .body p { font-size: 19px; line-height: 1.85; margin-bottom: 1.6em; } body[data-design="snow"] .region p { font-size: 16.5px; line-height: 1.8; } body[data-design="snow"] .poem .stanza { line-height: 1.65; } /* signoff: lighten the shadow */ body[data-design="snow"] .signoff-portrait { box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 12px 36px rgba(28,24,20,0.04); } /* topbar: keep the paper tone fully white */ body[data-design="snow"] .topbar { background: linear-gradient(to bottom, var(--paper) 70%, transparent); } /* turn off the heavy paper grain */ body[data-design="snow"] .hero-contour { opacity: 0.14; } /* ===================================================================== 2) CHAPTERS — soft cream personal letter. Each section opens with a HUGE Roman numeral and an italic epigraph, pushed down so it occupies real viewport space. You have to read the chapter title before the body content begins. ===================================================================== */ body[data-design="chapters"] { --paper: #f7f3ea; /* lighter than parchment, still warm */ --paper-2: #f3ede0; --ink: #1f1a14; --ink-soft: #534a3d; --ink-mute: #9a8e7a; --rule: #d8cfba; --accent: #9a4f33; } body[data-design="chapters"] body::before { background: radial-gradient(1200px 900px at 85% -10%, rgba(154,79,51,0.04), transparent 60%), radial-gradient(900px 700px at -10% 110%, rgba(74,109,140,0.03), transparent 60%); } /* keep alternating sections soft — but lighter than before */ body[data-design="chapters"] .regions { background: var(--paper-2); } body[data-design="chapters"] .epilogue { background: var(--paper-2); } body[data-design="chapters"] .ai { background: #1a1612; color: #f3ede0; } /* CHAPTER MARKERS — Roman numerals + epigraph slugs. Injected via CSS counters on the .sec-label so we don't have to touch the HTML structure. */ body[data-design="chapters"] main { counter-reset: chapter; } body[data-design="chapters"] section { padding-top: clamp(120px, 14vh, 180px); padding-bottom: clamp(120px, 14vh, 180px); position: relative; } body[data-design="chapters"] section:not(.hero) .sec-label { counter-increment: chapter; display: block; border: 0; margin: 0; padding: 0; } /* hide the original sec-label children so only ::before / ::after show */ body[data-design="chapters"] section:not(.hero) .sec-label > * { display: none; } body[data-design="chapters"] section:not(.hero) .sec-label::before { content: counter(chapter, upper-roman) "."; font-family: var(--serif-display); font-style: italic; font-weight: 300; font-size: clamp(72px, 12vw, 160px); line-height: 0.9; letter-spacing: -0.02em; color: var(--accent); display: block; margin-bottom: 0.18em; opacity: 0.92; } body[data-design="chapters"] section:not(.hero) .sec-label::after { content: attr(data-chapter-name); display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 56px; } /* override colour on the dark ai section */ body[data-design="chapters"] .ai .sec-label::before { color: var(--accent); } body[data-design="chapters"] .ai .sec-label::after { color: rgba(243,237,224,0.55); } /* hero gets a softer letter-opening — keep the existing label format */ body[data-design="chapters"] .hero .sec-label { font-family: var(--serif-display); font-style: italic; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink-soft); } /* the body type a touch larger, with longer line height — letter feel */ body[data-design="chapters"] .bio-grid .body p { font-size: 18.5px; line-height: 1.8; margin-bottom: 1.5em; } body[data-design="chapters"] .bio-grid .body p:first-of-type:first-letter { font-size: 4.4em; padding: 0.06em 0.14em 0 0; } /* ===================================================================== 3) GALLERY — warm parchment exhibit. Centred compositions, photographs become protagonists, sections feel like exhibits with anchor captions. ===================================================================== */ body[data-design="gallery"] { --paper: #f3ecd9; /* warm parchment, slightly lighter than original */ --paper-2: #ebe2cb; --ink: #1c1814; --ink-soft: #4a4238; --ink-mute: #8a7f6e; --rule: #c9bda5; --accent: #b15a3a; /* terracotta back, matches the parchment */ } body[data-design="gallery"] body::before { background: radial-gradient(1200px 800px at 80% -10%, rgba(177,90,58,0.06), transparent 60%), radial-gradient(900px 700px at -10% 110%, rgba(74,109,140,0.05), transparent 60%); } body[data-design="gallery"] section { padding-top: clamp(140px, 16vh, 200px); padding-bottom: clamp(140px, 16vh, 200px); } /* sections become single-column, centred */ body[data-design="gallery"] .bio-grid, body[data-design="gallery"] .gallery-head, body[data-design="gallery"] .ai-head, body[data-design="gallery"] .writing-grid, body[data-design="gallery"] .epilogue-head { max-width: 920px; margin-left: auto; margin-right: auto; text-align: center; } /* about: centre the paragraphs themselves, not just the column. */ body[data-design="gallery"] .bio-grid { max-width: 68ch; } body[data-design="gallery"] .bio-grid .body p { max-width: 60ch; margin-left: auto; margin-right: auto; text-align: center; } /* drop the editorial drop-cap — it pulls the eye off-centre */ body[data-design="gallery"] .bio-grid .body p:first-of-type:first-letter, body[data-design="gallery"] .bio-grid .body p:last-of-type:first-letter { float: none; font-size: inherit; color: inherit; padding: 0; font-family: inherit; } body[data-design="gallery"] .gallery-head { flex-direction: column; align-items: center; gap: 24px; } body[data-design="gallery"] .gallery-head h2, body[data-design="gallery"] .ai-head h2, body[data-design="gallery"] .writing h2, body[data-design="gallery"] .epilogue-head h2 { margin-left: auto; margin-right: auto; text-align: center; } body[data-design="gallery"] .gallery-head .aside, body[data-design="gallery"] .ai-head .blurb, body[data-design="gallery"] .epilogue-head .lede { max-width: 52ch; margin-left: auto; margin-right: auto; text-align: center; } body[data-design="gallery"] .ai-head { display: block; } body[data-design="gallery"] .ai-head h2 { margin-bottom: 24px; } body[data-design="gallery"] .writing-grid { display: block; } body[data-design="gallery"] .writing-grid > div:first-child h2 { max-width: 18ch; margin-bottom: 48px; } body[data-design="gallery"] .poem { border-left: 0; padding-left: 0; text-align: center; max-width: 640px; margin: 0 auto; } body[data-design="gallery"] .sec-label { justify-content: center; } body[data-design="gallery"] .sec-label .rule { display: none; } /* The hero's section label is nested inside hero-grid (a 2-column layout), so centering within the column leaves it off-page-centre. Pull it out of flow and centre it across the full section width. */ body[data-design="gallery"] .hero { position: relative; } body[data-design="gallery"] .hero .sec-label { position: absolute; top: clamp(96px, 14vh, 140px); left: var(--gutter); right: var(--gutter); justify-content: center; margin: 0; pointer-events: none; z-index: 2; } /* photographs become protagonists — the two field sites sit side by side so they read as a diptych, the way they were originally framed. */ body[data-design="gallery"] .regions-grid { grid-template-columns: 1fr 1fr; gap: 64px; max-width: 1280px; margin: 32px auto 0; } body[data-design="gallery"] .region { text-align: center; align-items: center; } body[data-design="gallery"] .region .plate { aspect-ratio: 4/5; width: 100%; } body[data-design="gallery"] .region h3 { font-size: 42px; margin-top: 8px; } body[data-design="gallery"] .region .meta { justify-content: center; } body[data-design="gallery"] .region p { max-width: 50ch; } body[data-design="gallery"] .region .read { margin: 24px auto 0; } /* gallery grid: one big plate at a time would be too long, but we give them more breath by making the rows bigger and the gutter wider */ body[data-design="gallery"] .gallery-grid { grid-auto-rows: 72px; gap: 24px; max-width: 1200px; margin: 0 auto; } /* alternating section backgrounds: keep a subtle warm rhythm */ body[data-design="gallery"] .regions { background: var(--paper); } body[data-design="gallery"] .epilogue { background: var(--paper-2); } body[data-design="gallery"] .ai { background: var(--paper-2); color: var(--ink); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } body[data-design="gallery"] .ai .sec-label { color: var(--ink-mute); justify-content: center; } body[data-design="gallery"] .ai .sec-label .num { color: var(--accent); } body[data-design="gallery"] .ai-grid { background: var(--rule); gap: 1px; max-width: 1200px; margin: 0 auto; } body[data-design="gallery"] .ai-card { background: var(--paper-2); } body[data-design="gallery"] .ai-card:hover { background: var(--paper); } body[data-design="gallery"] .ai-card h4 { color: var(--ink); } body[data-design="gallery"] .ai-card p { color: var(--ink-soft); } body[data-design="gallery"] .ai-card .tag { color: var(--ink-mute); } body[data-design="gallery"] .ai-card .num { color: var(--accent); } /* epilogue: centred 3-cols stays, but ledger items become wider */ body[data-design="gallery"] .epilogue-grid { max-width: 1100px; margin-left: auto; margin-right: auto; } body[data-design="gallery"] .signoff-block { justify-content: center; } body[data-design="gallery"] .signoff-text { text-align: center; } /* topbar: white plate */ body[data-design="gallery"] .topbar { background: linear-gradient(to bottom, var(--paper) 70%, transparent); } /* keep the contour map visible — wavy lines faint, Leh/Delhi/Terai labels read dark */ body[data-design="gallery"] .hero-contour { opacity: 1; } body[data-design="gallery"] .hero-contour .wave { opacity: 0.22; } body[data-design="gallery"] .hero-contour .place { opacity: 0.5; } body[data-design="gallery"] .hero-contour .place .coord { opacity: 0.8; } @media (max-width: 980px) { body[data-design="gallery"] .regions-grid { grid-template-columns: 1fr; gap: 56px; } body[data-design="gallery"] .region h3 { font-size: 36px; } }