/*
* fl718-nook-mobile.css
* Nook Nook Mats Biography — Mobile styles
* Version: 1.2.0
* Last updated: 2026-08-18
*
* 1.2.0 (2026-08-18) — BUG-006: neutralised the min-width: 700px floor that
* fl718-nook.css imposes on .network-svg inside its own max-width:768px
* block, and added a max-width: 100% ceiling. See the dated comment on
* .nook-story-page .network-svg-v for the full two-sheet mechanism.
* The file previously carried no Version line; this is its first.
*
* Integration changes applied from prototype:
* - Bare * reset replaced with :where(.nook-story-page) scoped version
* - body { ... } changed to .nook-story-page { ... }
* - .hinge-text, .hinge-period, .ch5-transition, img scoped to .nook-story-page
* - @keyframes gameOverBlink → nook-game-over-blink
* - @keyframes cell-shake → nook-cell-shake
* - font-style:italic removed from .nook-brand-logo__mats (Dancing Script iOS bug)
*
* Enqueued via functions.php: fl718-nook-mobile
* Gate: @media (max-width: 768px) wraps mobile-only sections in the prototype,
* but this file is enqueued only on is_page('nook-nook') alongside fl718-nook.css.
*/
@media (max-width: 768px) {
/* ============================================
RESET & BASE STYLES
============================================ */
:where(.nook-story-page) *,
:where(.nook-story-page) *::before,
:where(.nook-story-page) *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.nook-story-page {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
overflow-x: hidden;
background: #FFFEF9;
}
/* ============================================
CSS CUSTOM PROPERTIES
============================================ */
:root {
/* Font Families */
--nook-font-serif: Georgia, serif;
--nook-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Desktop Font Sizes */
--nook-text-hero: 48px;
--nook-text-body: 18px;
/* Line Heights */
--nook-lh-relaxed: 1.6;
--nook-lh-loose: 1.8;
/* Colors */
--nook-white: #FFFFFF;
--nook-cream-warm: #FFFEF9;
--nook-text-charcoal: #2B2B2B;
--nook-text-light: #6B6B6B;
/* Chapter 2 / Descent colors */
--nook-terracotta: #d4664a;
--nook-tan: #c8a882;
--nook-ghost: #DDD4C8;
--nook-caption: #9B8B7E;
--nook-warm-dark: #3D3935;
--nook-cream-paper: #FBF8F3;
--nook-gold: #C9A86A;
--nook-cool-gray: #B8B4AE;
/* Descent section aliases — map to existing nook variables */
--cream: var(--nook-cream-warm);
--terra: var(--nook-terracotta);
--tan: var(--nook-tan);
--ghost: var(--nook-ghost);
--charcoal: var(--nook-text-charcoal);
--light: var(--nook-text-light);
--gold: var(--nook-gold);
--white: var(--nook-white);
/* Chapter 5 terminal colors */
--terminal-green: rgba(76, 175, 80, 0.9);
--amber-warm: rgba(201, 168, 106, 1);
}
/* Mobile Typography Adjustments */
@media (max-width: 768px) {
:root {
--nook-text-hero: 32px;
--nook-text-body: 16px;
}
}
/* ============================================
CHAPTER TRANSITION HEADER
============================================ */
.nook-chapter-transition {
position: relative;
width: 100%;
height: 300px;
background: linear-gradient(to bottom,
#ebebeb 0%,
#f0ebe5 100%);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 80px;
overflow: hidden;
}
/* LEFT: Wavy Textile Lines - Sequential weaving animation */
.nook-textile-pattern {
width: 180px;
height: 100%;
display: flex;
align-items: center;
}
.nook-textile-pattern svg {
width: 100%;
height: 200px;
}
.nook-textile-pattern path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
transition: stroke-dashoffset 0.4s ease-out;
}
.nook-textile-pattern.animate path:nth-child(1) {
animation: nook-draw-line 0.4s ease-out 0.0s forwards;
}
.nook-textile-pattern.animate path:nth-child(2) {
animation: nook-draw-line 0.4s ease-out 0.1s forwards;
}
.nook-textile-pattern.animate path:nth-child(3) {
animation: nook-draw-line 0.4s ease-out 0.2s forwards;
}
.nook-textile-pattern.animate path:nth-child(4) {
animation: nook-draw-line 0.4s ease-out 0.3s forwards;
}
.nook-textile-pattern.animate path:nth-child(5) {
animation: nook-draw-line 0.4s ease-out 0.4s forwards;
}
.nook-textile-pattern.animate path:nth-child(6) {
animation: nook-draw-line 0.4s ease-out 0.5s forwards;
}
.nook-textile-pattern.animate path:nth-child(7) {
animation: nook-draw-line 0.4s ease-out 0.6s forwards;
}
.nook-textile-pattern.animate path:nth-child(8) {
animation: nook-draw-line 0.4s ease-out 0.7s forwards;
}
@keyframes nook-draw-line {
to {
stroke-dashoffset: 0;
}
}
/* CENTER: Brand Typography - Character by character fade */
.nook-brand-logo {
position: relative;
display: flex;
align-items: center;
gap: 0;
flex-direction: column;
}
.nook-brand-logo__main {
display: flex;
align-items: center;
gap: 0;
line-height: 1;
}
.nook-brand-logo__nook {
font-family: Georgia, 'Times New Roman', serif;
font-size: 84px;
font-weight: 900;
color: #000000;
letter-spacing: -0.02em;
line-height: 0.9;
}
.nook-brand-logo__nook span {
display: inline-block;
opacity: 0;
transform: translateY(10px);
}
.nook-brand-logo__dot {
width: 16px;
height: 16px;
background: #d4664a;
border-radius: 50%;
margin: 0 8px;
align-self: center;
position: relative;
top: -8px;
opacity: 0;
transform: scale(0.5);
}
.nook-brand-logo__mats {
font-family: Georgia, 'Times New Roman', serif;
font-size: 100px;
font-weight: 900;
color: #000000;
letter-spacing: -0.02em;
margin-top: 8px;
opacity: 0;
transform: translateY(10px);
}
/* RIGHT: Organic Blob Shape - Spinning/expanding */
.nook-organic-shape {
width: 280px;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
opacity: 0;
transform: scale(0.3) rotate(-90deg);
transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nook-organic-shape.animate {
opacity: 1;
transform: scale(1.0) rotate(0deg);
}
.nook-organic-shape svg {
width: 220px;
height: 220px;
}
/* ============================================
DOT SEPARATOR ROW
============================================ */
.nook-dot-separator {
width: 100%;
background: #FFFEF9;
display: flex;
align-items: center;
justify-content: center;
padding: 32px 80px 0;
}
.nook-dot-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.nook-journey-dot {
width: 7px;
height: 7px;
background: #c8a882;
border-radius: 50%;
flex-shrink: 0;
/* Initial state — invisible and collapsed */
opacity: 0;
transform: scale(0);
/* Same spring bounce easing as the blob */
transition:
transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.2s ease;
will-change: transform, opacity;
}
/* Visible state — triggered by JS */
.nook-journey-dot.visible {
opacity: 1;
transform: scale(1);
}
/* ============================================
SECTION 1: THE OPENING DUALITY
============================================ */
/* Section 1 Container */
.nook-section-1 {
position: relative;
width: 100%;
}
/* Opening Text Stage — full viewport, pinned during fill animation */
.nook-product-reveal {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
background-color: var(--nook-cream-warm);
padding: 0 80px 10vh;
position: relative;
z-index: 3;
}
/* Opening paragraph text */
.nook-opening-text {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(20px, 5vw, 36px);
font-weight: 500;
line-height: 1.65;
letter-spacing: 0.005em;
width: 100%;
}
/* Individual word spans — start as ghost, fill on scroll */
.nook-opening-word {
display: inline;
color: #DDD4C8;
will-change: transform;
}
/* ============================================
THRESHOLD IMAGE — end of Section 1
============================================ */
.nook-threshold-section {
width: 100%;
background: var(--nook-cream-warm);
overflow: hidden;
}
.nook-threshold-container {
width: 100%;
height: 82vh;
overflow: hidden;
position: relative;
}
.nook-threshold-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 45%;
opacity: 0;
will-change: transform;
display: block;
}
.nook-threshold-vignette {
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 90% 90% at 50% 50%,
transparent 55%,
rgba(20, 16, 10, 0.28) 100%
);
pointer-events: none;
z-index: 3;
opacity: 0;
}
/* Door panels — two halves that part to reveal the photo */
.nook-door-panel {
position: absolute;
top: 0;
width: 50%;
height: 100%;
background: var(--nook-cream-warm);
z-index: 2;
will-change: transform;
}
.nook-door-panel--left {
left: 0;
background: linear-gradient(
90deg,
var(--nook-cream-warm) 0%,
var(--nook-cream-warm) 22%,
#F5EFE7 23%,
var(--nook-cream-warm) 24%,
var(--nook-cream-warm) 55%,
#F4EEE7 56%,
var(--nook-cream-warm) 57%,
var(--nook-cream-warm) 100%
);
}
.nook-door-panel--right {
right: 0;
background: linear-gradient(
90deg,
var(--nook-cream-warm) 0%,
#F5EFE7 1%,
var(--nook-cream-warm) 2%,
var(--nook-cream-warm) 38%,
#F4EEE7 39%,
var(--nook-cream-warm) 40%,
var(--nook-cream-warm) 72%,
#F5EFE7 73%,
var(--nook-cream-warm) 74%
);
}
/* Door panel texture — inset shadow for depth + subtle grain */
.nook-door-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 20px rgba(180, 160, 130, 0.12);
pointer-events: none;
}
/* "nook" label on each door half */
.nook-door-label {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-family: Georgia, 'Times New Roman', serif;
font-size: 28px;
font-weight: 900;
color: rgba(180, 160, 130, 0.25);
letter-spacing: -0.02em;
line-height: 1;
pointer-events: none;
}
.nook-door-label--left {
right: 0;
text-align: right;
}
.nook-door-label--right {
left: 0;
text-align: left;
}
.nook-door-seam {
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background: rgba(180, 160, 130, 0.35);
z-index: 4;
transform: translateX(-50%);
will-change: opacity;
}
/* ============================================
CHAPTER BREAK — breathing room after photo
============================================ */
.nook-chapter-break {
width: 100%;
height: 220px;
background: var(--nook-cream-warm);
}
/* ============================================
CHAPTER 2 — SPLIT STAGE
============================================ */
.nook-story-page .ch2-stage {
display: flex;
width: 100%;
height: 100vh;
background: var(--nook-cream-warm);
position: relative;
}
/* LEFT: paragraph + cycling highlight */
.nook-story-page .ch2-left {
width: 44%;
height: 100%;
position: relative;
border-right: 1px solid #e4ddd4;
flex-shrink: 0;
}
.nook-story-page .ch2-left-state {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 64px 56px 80px 80px;
opacity: 0;
pointer-events: none;
}
.nook-story-page .ch2-left-state.is-first {
opacity: 1;
}
.ch2-chapter-label {
font-family: var(--nook-font-sans);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--nook-tan);
margin-bottom: 28px;
}
.ch2-opening-para {
font-family: var(--nook-font-serif);
font-size: 17px;
line-height: 1.9;
color: var(--nook-text-light);
width: 100%;
}
.ch2-body-copy {
font-family: 'Lora', Georgia, serif;
}
.ch2-opening-para mark {
background: none;
color: var(--nook-text-charcoal);
border-bottom: 1.5px solid var(--nook-terracotta);
padding-bottom: 1px;
}
/* State counter dots */
.ch2-state-counter {
position: absolute;
bottom: 32px;
left: 80px;
display: flex;
align-items: center;
gap: 14px;
}
.ch2-sc-dots {
display: flex;
gap: 7px;
}
.ch2-sc-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--nook-ghost);
transition: background 0.4s ease;
flex-shrink: 0;
}
.ch2-sc-dot.on {
background: var(--nook-terracotta);
}
.ch2-sc-label {
font-family: var(--nook-font-sans);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--nook-caption);
}
.ch2-scroll-hint {
position: absolute;
bottom: 34px;
right: 32px;
font-family: var(--nook-font-sans);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--nook-ghost);
}
/* RIGHT: film strip */
.nook-story-page .ch2-right {
flex: 1;
height: 100%;
overflow: hidden;
position: relative;
}
/* Cream fade overlays top and bottom of right panel */
.ch2-strip-fade-top,
.ch2-strip-fade-bottom {
position: absolute;
left: 0; right: 0;
height: 100px;
pointer-events: none;
z-index: 3;
}
.ch2-strip-fade-top { top: 0; background: linear-gradient(to bottom, var(--nook-cream-warm), transparent); }
.ch2-strip-fade-bottom { bottom: 0; background: linear-gradient(to top, var(--nook-cream-warm), transparent); }
/* Scroll position track */
.ch2-strip-track {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
height: 70px;
width: 1px;
background: var(--nook-ghost);
z-index: 4;
}
.ch2-strip-thumb {
width: 100%;
background: var(--nook-terracotta);
position: absolute;
top: 0;
}
.ch2-frame-caption.light-bg {
color: var(--nook-caption);
}
/* Placeholder image treatments */
.ch2-ph {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
}
.ch2-ph-lbl {
font-family: var(--nook-font-sans);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(255,255,255,0.4);
position: relative;
z-index: 2;
text-align: center;
}
.ch2-ph-sub {
font-family: var(--nook-font-sans);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(255,255,255,0.2);
position: relative;
z-index: 2;
}
.ch2-ph-founding { background: linear-gradient(145deg, #3d2a14 0%, #6b4420 50%, #8b5e2a 100%); }
.ch2-ph-product { background: #ede6d9; }
.ch2-ph-product .ch2-ph-lbl { color: var(--nook-caption); }
.ch2-ph-product .ch2-ph-sub { color: #c0b0a0; }
.ch2-ph-product img {
width: 52%;
height: auto;
object-fit: contain;
position: relative;
z-index: 2;
}
.ch2-ph-artisan { background: linear-gradient(160deg, #2e1e0e 0%, #5c3c20 55%, #7a5434 100%); }
.ch2-ph-texture {
background-color: #7a6040;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 5px, rgba(0,0,0,0.2) 5px, rgba(0,0,0,0.2) 6px),
repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(0,0,0,0.14) 4px, rgba(0,0,0,0.14) 5px);
}
.ch2-ph-ethics { background: linear-gradient(170deg, #2a1e14 0%, #4a3222 50%, #6a4a34 100%); }
.ch2-weave-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.18;
}
/* Full-height single scroll image */
.ch2-full-scroll-img {
width: 100%;
height: auto;
display: block;
will-change: transform;
}
/* ============================================
CH2 → CH3 TRANSITION BREATH
============================================ */
.nook-chapter-breath {
width: 100%;
background: var(--nook-cream-warm);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 14vh 0 12vh;
gap: 0;
}
.nook-breath-rule {
width: 1px;
height: 60px;
background: #d8cfc4;
margin-bottom: 32px;
}
.nook-breath-label {
font-family: var(--nook-font-sans);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.22em;
color: #c8a882;
}
/* ============================================
CH3 → CH4 COLD TYPE MARKER
============================================ */
.nook-descent-zone {
height: 115vh;
background: linear-gradient(
to bottom,
#FFFFFF 0%,
#FFFFFF 8%,
#FDFCF8 16%,
#FAF9F4 24%,
#F5F4EF 34%,
#EEEDE8 44%,
#E8E8E4 52%,
#EEEDE8 60%,
#F5F4EF 70%,
#FAF8F3 80%,
#FDFBF6 88%,
var(--nook-cream-warm) 95%,
var(--nook-cream-warm) 100%
);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.nook-descent-marker {
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
user-select: none;
margin-top: -32px;
gap: 0;
width: 400px;
max-width: 90vw;
}
/* "CHAPTER FOUR" supertitle — word-by-word fade */
.nook-ch4-marker__super {
font-family: var(--nook-font-sans);
font-size: 10px;
font-weight: 300;
letter-spacing: 0.38em;
text-transform: uppercase;
color: var(--nook-tan);
margin-bottom: 14px;
display: flex;
gap: 0.5em;
align-items: center;
justify-content: center;
}
.nook-ch4-super-word {
opacity: 0;
display: inline-block;
}
/* "THE DESCENT" — character-by-character type-on */
.nook-ch4-marker__title {
font-family: 'Courier New', Courier, monospace;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--nook-charcoal);
margin-bottom: 18px;
display: flex;
align-items: baseline;
white-space: nowrap;
justify-content: center;
}
.nook-ch4-title-char {
opacity: 0;
display: inline-block;
}
.nook-ch4-title-char--space {
width: 0.4em;
}
/* Thin unbroken rule */
.nook-ch4-rule-wrap {
width: 120px;
height: 1px;
overflow: hidden;
}
.nook-ch4-rule-line {
height: 1px;
width: 0;
background: var(--nook-charcoal);
opacity: 0.3;
}
/* ============================================
SECTION 3 — THE SUMMIT & THE SHADOW
============================================ */
.nook-section-3 {
width: 100%;
background: var(--nook-cream-warm);
}
/* Part A: Victory Display */
.nook-summit-victory {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 10vh 80px;
}
.nook-summit-grid {
display: grid;
grid-template-columns: minmax(320px, 1fr) 20px 1.4fr 20px minmax(320px, 1fr);
column-gap: 2.5rem;
max-width: 1200px;
width: 100%;
align-items: center;
}
.nook-col-divider {
height: 624px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.nook-summit-metric {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transform: scale(1.25);
transform-origin: top center;
}
.nook-metric-number {
font-family: Georgia, serif;
font-weight: 700;
font-size: clamp(52px, 7vw, 96px);
line-height: 1.05;
color: var(--nook-text-charcoal);
letter-spacing: -0.03em;
margin-bottom: 16px;
opacity: 0;
}
.nook-metric-caption {
font-family: var(--nook-font-sans);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--nook-text-light);
line-height: 1.6;
opacity: 0;
}
.nook-metric-rating {
display: flex;
align-items: baseline;
justify-content: center;
gap: 10px;
margin-bottom: 16px;
}
.nook-rating-number {
font-family: Georgia, serif;
font-weight: 700;
font-size: clamp(40px, 5.5vw, 72px);
line-height: 1.05;
color: var(--nook-text-charcoal);
letter-spacing: -0.03em;
opacity: 0;
}
.nook-rating-stars {
display: flex;
gap: 3px;
}
.nook-rating-stars .star {
font-size: 22px;
color: #ddd4c8;
transition: color 0.3s ease;
}
/* Center column photos */
.nook-summit-photos {
display: flex;
flex-direction: column;
gap: 12px;
}
.nook-summit-photo-wrap {
width: 100%;
overflow: hidden;
border-radius: 2px;
}
.nook-summit-photo {
width: 100%;
height: 240px;
object-fit: cover;
display: block;
filter: saturate(1.05);
opacity: 0;
}
/* Photo placeholders */
.nook-summit-photo-ph {
width: 100%;
height: 240px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
opacity: 0;
}
.nook-summit-photo-ph:nth-child(1) { background: #d4c4b0; }
.nook-summit-photo-ph:nth-child(2) { background: #c8b89a; }
.nook-summit-photo-ph:nth-child(3) { background: #bca882; }
.nook-ph-label {
font-family: var(--nook-font-sans);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: rgba(255,255,255,0.5);
}
@media (max-width: 768px) {
.nook-summit-grid {
grid-template-columns: 1fr;
gap: 5rem;
}
.nook-chapter-breath {
padding: 10vh 0 8vh;
}
}
/* ============================================
CH3 INTRO — TRIPTYCH + PAPER AIRPLANE
============================================ */
.nook-ch3-intro {
min-height: 100vh;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 24vh 80px 0;
overflow: visible;
background: var(--nook-cream-warm);
}
.nook-triptych-line {
font-family: Georgia, serif;
font-size: clamp(26px, 3.2vw, 42px);
font-weight: 400;
line-height: 1.4;
color: var(--nook-text-charcoal);
text-align: center;
margin: 0 0 14px 0;
opacity: 0;
transform: translateY(8px);
position: relative;
z-index: 2;
}
.nook-triptych-line:last-of-type {
font-style: italic;
font-size: clamp(28px, 3.5vw, 46px);
margin-bottom: 0;
}
/* "launched" starts terracotta, transitions to charcoal via JS */
.nook-tri-launched {
color: var(--nook-terracotta);
}
/* Plane wrapper — absolutely positioned, flies across section */
.nook-plane-wrap {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
opacity: 0;
z-index: 3;
will-change: transform;
}
.nook-paper-plane {
width: 130px;
height: auto;
display: block;
/* removes white image background on cream bg */
mix-blend-mode: multiply;
}
/* Trail canvas — sits behind text and plane */
#nook-plane-canvas {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: 1;
}
@media (max-width: 768px) {
.nook-ch3-intro {
padding: 18vh 40px 0;
}
.nook-paper-plane {
width: 90px;
}
}
/* ============================================
CH3 VICTORY — TICKER (LEFT COLUMN)
============================================ */
.nook-ticker-context {
font-family: var(--nook-font-sans);
font-size: 8px;
text-transform: uppercase;
letter-spacing: 0.22em;
color: #a89a8c;
margin-bottom: 10px;
opacity: 0;
width: 100%;
text-align: center;
}
.nook-ticker-display {
font-family: var(--nook-font-serif);
font-weight: 700;
font-size: clamp(64px, 8vw, 100px);
line-height: 1.0;
color: var(--nook-text-charcoal);
letter-spacing: -0.04em;
min-width: 5ch;
text-align: center;
transition: color 0.5s ease;
opacity: 0;
font-variant-numeric: tabular-nums;
}
.nook-ticker-display.landed { color: var(--nook-terracotta); }
.nook-ticker-badge {
font-family: var(--nook-font-sans);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--nook-terracotta);
margin-top: 6px;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.nook-ticker-badge.show { opacity: 1; transform: translateY(0); }
/* Concept A: "Top 10" hero text that replaces the number */
.nook-hero-top10 {
font-family: var(--nook-font-serif);
font-weight: 700;
font-size: clamp(56px, 12vw, 88px);
line-height: 1.0;
color: var(--nook-terracotta);
letter-spacing: -0.02em;
text-align: center;
opacity: 0;
transform: scale(0.9);
display: none;
}
.nook-summit-mini-ladder {
display: flex;
gap: 5px;
align-items: flex-end;
height: 28px;
margin-top: 18px;
opacity: 0;
}
.nook-summit-mini-bar {
width: 9px;
border-radius: 1px;
background: var(--nook-tan);
height: 0;
flex-shrink: 0;
}
.nook-summit-mini-bar.is-you { background: var(--nook-terracotta); }
.nook-metric-whisper {
font-family: var(--nook-font-sans);
font-size: 10px;
color: #a89a8c;
letter-spacing: 0.03em;
font-style: italic;
text-transform: none;
}
/* ============================================
CH3 VICTORY — POLAROID DROP (CENTER COLUMN)
============================================ */
.nook-photo-outer {
width: 100%;
will-change: transform;
}
.nook-photo-inner {
width: 100%;
transform-origin: center center;
will-change: transform, opacity;
opacity: 0;
}
/* Override nth-child colors (now nested inside .nook-photo-outer) */
#nook-pc1 { background: #d4c4b0; }
#nook-pc2 { background: #c8b89a; }
#nook-pc3 { background: #bca882; }
/* ============================================
CH3 VICTORY — RIGHT COLUMN (REVIEW FRAGMENT)
============================================ */
.nook-summit-right {
height: 624px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.nook-rc-revenue-block {
margin-bottom: 32px;
}
.nook-rc-rating-block {
display: flex;
flex-direction: column;
align-items: center;
}
/* Shared large number style (revenue + rating) */
.nook-victory-large {
font-family: Georgia, serif;
font-weight: 700;
font-size: clamp(40px, 5.5vw, 68px);
line-height: 1.05;
letter-spacing: -0.03em;
margin-bottom: 10px;
}
/* 4.7 rating number — hidden until Phase 2 animates it in */
#nook-rc-rat { opacity: 0; }
/* Split-flap number container */
.nook-sf-num {
display: flex;
align-items: center;
justify-content: center;
}
/* Individual split-flap characters */
.nook-sf-char {
display: inline-block;
min-width: 0.58em;
text-align: center;
opacity: 0;
}
/* Review quote — clip-path start state */
.nook-victory-quote {
font-family: Georgia, serif;
font-size: 15px;
font-style: italic;
line-height: 1.6;
color: var(--nook-text-charcoal);
max-width: 200px;
margin: 0 auto 16px;
clip-path: inset(0 0 100% 0);
transition: color 1.2s ease;
}
.nook-victory-quote.faded {
color: #9a8e84;
}
/* Thin rule under quote */
.nook-victory-q-rule {
width: 60%;
height: 1px;
background: rgba(200, 168, 130, 0.4);
transform-origin: left center;
transform: scaleX(0);
margin: 0 auto 20px;
opacity: 0;
}
/* Stars row */
.nook-victory-stars {
display: flex;
gap: 3px;
justify-content: center;
margin-bottom: 12px;
opacity: 0;
}
.nook-story-page .v-star {
font-size: 20px;
color: var(--nook-ghost);
transition: color 0.3s ease;
}
.nook-story-page .v-star.lit {
color: var(--nook-gold);
}
/* ============================================
SECTION 3 — PEAK ZONE
Transitional space + summit quote
Follows immediately after the Victory Display
============================================ */
.nook-peak-zone {
position: relative;
}
/* The Space: cream opens up to white as you scroll.
Padding compresses 80px → 40px to match quote zone. */
.nook-peak-space {
min-height: 115vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--nook-cream-warm);
position: relative;
}
/* Gradient bridge: cream → white, sits between peak-space and peak-quote */
.nook-cream-white-bridge {
width: 100%;
height: 80px;
background: linear-gradient(
to bottom,
#FFFEF9 0%,
#FFFEFC 10%,
#FFFCF8 24%,
#FDFAF4 38%,
#FBFAF2 52%,
#FAFAF2 66%,
#FEFEFE 80%,
#FFFFFF 100%
);
}
/* Split-fade whisper: two words drift in from opposite sides */
.nook-split-whisper {
display: flex;
align-items: baseline;
gap: 28px;
pointer-events: none;
user-select: none;
}
.nook-split-word {
font-family: var(--nook-font-sans);
font-size: 13px;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.32em;
color: #bfb9b0;
opacity: 0;
}
.nook-split-dot {
font-family: var(--nook-font-sans);
font-size: 13px;
font-weight: 300;
color: var(--nook-tan);
opacity: 0;
line-height: 1;
position: relative;
top: -1px;
}
@media (prefers-reduced-motion: reduce) {
.nook-split-word { opacity: 0.72; }
.nook-split-dot { opacity: 0.62; }
}
/* The Quote: lives on white, dissolves in scroll-driven */
.nook-peak-quote {
min-height: 100vh;
background: #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10vh 40px 52vh;
}
.nook-peak-quote-text {
font-family: var(--nook-font-serif);
font-size: clamp(24px, 2.9vw, 42px);
font-weight: 400;
line-height: 1.65;
color: var(--nook-text-charcoal);
text-align: center;
max-width: 1140px;
width: 100%;
}
/* Word-by-word clip reveal */
.nook-word-clip {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
margin-right: 0.22em;
}
.nook-word-clip:last-child {
margin-right: 0;
}
.nook-word-inner {
display: inline-block;
transform: translateY(110%);
}
.nook-peak-quote-rule {
width: 1px;
height: 64px;
background: #c8a882;
margin-top: 52px;
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.nook-word-inner { transform: none !important; }
.nook-peak-quote-rule { opacity: 0.7 !important; }
}
/* The Crease — cool gray rule marking the divide */
.nook-peak-crease-rule {
width: 1px;
height: 64px;
background: #B8B4AE;
margin-top: 32px;
opacity: 0.7;
}
.nook-peak-crease-label {
font-family: var(--nook-font-sans);
font-size: 8px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: #d4664a;
margin-top: 28px;
opacity: 0.5;
}
/* ════════════════════════════════════════════
CHAPTER 4 — THE DESCENT
════════════════════════════════════════════ */
/* LEDGER SECTION */
.nook-story-page .ledger-section {
position: relative;
padding: 10vh 80px 32vh;
background: var(--cream);
}
.ledger-grid-overlay {
position: absolute; inset: 0;
pointer-events: none;
opacity: 0;
will-change: opacity;
}
.ledger-grid-overlay svg {
width: 100%; height: 100%;
}
.ledger-grid-overlay line {
stroke: rgba(0,0,0,0.16);
stroke-width: 1;
vector-effect: non-scaling-stroke;
filter: drop-shadow(0 0 1px rgba(0,0,0,0.08));
}
.ledger-grid-overlay line.drawing {
stroke: rgba(76,175,80,0.4);
filter: drop-shadow(0 0 3px rgba(76,175,80,0.3));
}
.nook-story-page .ledger-header {
display: flex; border-bottom: 1.5px solid rgba(0,0,0,0.18);
padding-bottom: 9px; position: relative; z-index: 2;
margin-left: -80px; margin-right: -80px;
padding-left: 80px; padding-right: 80px;
}
.ledger-col-head {
font-size: 8px; text-transform: uppercase; letter-spacing: 0.18em;
color: rgba(90,90,90,0.32); font-family: 'Courier New', monospace;
}
.ledger-col-head.num { width: 72px; flex-shrink: 0; }
.nook-story-page .ledger-row {
display: flex; align-items: flex-end;
border-bottom: 1px solid rgba(0,0,0,0.14);
height: 72px; padding-bottom: 9px;
position: relative; z-index: 2;
margin-left: -80px; margin-right: -80px;
padding-left: 80px; padding-right: 80px;
}
.nook-story-page .ledger-row-num {
width: 72px; flex-shrink: 0;
font-size: 9px; color: rgba(90,90,90,0.26);
font-family: 'Courier New', monospace;
}
.nook-story-page .ledger-row-text {
font-family: 'Courier Prime', 'Courier New', monospace; font-size: 18px;
line-height: 1.85; color: var(--light); flex: 1;
letter-spacing: 0.01em;
}
.nook-story-page .ledger-row-text .char {
opacity: 0;
display: inline;
}
.nook-story-page .ledger-row-text .char.space {
white-space: pre-wrap;
}
.nook-story-page .ledger-row-text .char.typing {
color: rgba(76,175,80,0.85);
text-shadow: 0 0 8px rgba(76,175,80,0.4);
}
.nook-story-page .ledger-row.less-life .ledger-row-text { color: var(--charcoal); font-style: italic; font-weight: 700; letter-spacing: 0.005em; }
.nook-story-page .ledger-row.less-life .ledger-row-num { color: rgba(90,90,90,0.1); }
.nook-story-page .ledger-row.less-life .ledger-row-text .char.typing {
color: rgba(212,102,74,0.9);
text-shadow: 0 0 12px rgba(212,102,74,0.5);
}
/* NETWORK SECTION */
.nook-story-page .network-section {
position: relative;
padding: 8vh 0 10vh;
overflow: hidden;
background: var(--cream);
}
.nook-story-page .network-eyebrow {
font-size: 12px; text-transform: uppercase; letter-spacing: 0.22em;
color: rgba(159,170,187,0.85); text-align: center; margin-bottom: 40px;
opacity: 0;
}
.nook-story-page .network-svg {
width: 100%; display: block;
}
.nook-story-page .network-svg-h { display: block; }
.nook-story-page .network-svg-v { display: none; }
.net-node-circle {
fill: var(--white);
stroke: var(--tan);
stroke-width: 1.5;
opacity: 0;
}
.net-node-circle.stressed { stroke: #9FAABB; }
.net-node-circle.you { stroke: var(--terra); }
.net-node-label {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.14em;
fill: var(--light);
opacity: 0;
text-anchor: middle;
}
.net-node-label.you { fill: var(--terra); }
.net-cost-label {
font-family: 'Courier New', monospace;
font-size: 11px;
font-weight: 600;
fill: #7A8FA0;
opacity: 0;
text-anchor: middle;
}
.net-line {
stroke: var(--ghost);
stroke-width: 1;
fill: none;
stroke-dasharray: 600;
stroke-dashoffset: 600;
}
.net-line.chaos {
stroke: rgba(159,170,187,0.4);
stroke-width: 0.7;
stroke-dasharray: 3 4;
}
@keyframes nook-game-over-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.15; }
}
.game-over-blink {
animation: nook-game-over-blink 0.4s ease-in-out 4;
}
/* CRISIS TRANSITION */
.nook-story-page .crisis-transition {
min-height: 50vh;
background: linear-gradient(to bottom,
var(--cream) 0%,
#FDFCF7 25%,
#FAFAF8 50%,
#F8F8F9 75%,
var(--white) 100%
);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 8vh 80px;
position: relative;
}
.nook-story-page .crisis-divider {
width: 1px;
height: 80px;
background: linear-gradient(to bottom,
rgba(200,168,130,0.3) 0%,
rgba(159,170,187,0.2) 50%,
rgba(159,170,187,0.1) 100%
);
margin-bottom: 24px;
}
.nook-story-page .crisis-whisper {
font-size: 8px;
text-transform: uppercase;
letter-spacing: 0.28em;
color: rgba(159,170,187,0.35);
text-align: center;
}
/* THE HINGE */
.nook-story-page .hinge-section {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--white);
padding: 0 80px;
}
.nook-story-page .hinge-text {
font-family: 'Libre Baskerville', Georgia, serif;
font-weight: 700;
font-size: clamp(34px, 4.2vw, 62px);
letter-spacing: -0.03em;
line-height: 1.1;
color: rgba(43,43,43,0.6);
text-align: center;
opacity: 0;
}
.nook-story-page .hinge-period {
color: var(--terra);
}
/* EXCEL BLOW */
.nook-story-page .blow-excel {
min-height: 80vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 80px;
background: var(--white);
}
.nook-story-page .blow-excel-text {
font-family: 'Libre Baskerville', Georgia, serif;
font-size: clamp(26px, 3vw, 42px);
font-style: italic;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--charcoal);
text-align: center;
white-space: nowrap;
line-height: 1.3;
opacity: 0;
transform: translateY(8px);
}
/* THE CELL */
.nook-story-page .cell-section {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--white);
}
.nook-story-page .spreadsheet-cell-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
opacity: 0;
}
.nook-story-page .cell-formula-bar {
display: flex;
align-items: center;
gap: 10px;
width: 320px;
background: #ececea;
border: 1px solid #d0cecc;
border-bottom: none;
padding: 7px 14px;
}
.nook-story-page .cell-fx {
font-family: 'Courier New', monospace;
font-size: 11px;
color: #999;
font-style: italic;
}
.nook-story-page .cell-expr {
font-family: 'Courier New', monospace;
font-size: 11px;
color: #555;
}
.nook-story-page .spreadsheet-cell {
width: 320px;
height: 96px;
border: 2px solid #4CAF50;
background: var(--white);
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.12s ease, background 0.3s ease, box-shadow 0.15s ease;
}
.nook-story-page .spreadsheet-cell.error {
border-color: #D32F2F;
background: rgba(211,47,47,0.04);
box-shadow: 0 0 0 5px rgba(211,47,47,0.07);
animation: nook-cell-shake 0.38s ease;
}
@keyframes nook-cell-shake {
0%,100% { transform: translateX(0); }
20% { transform: translateX(-5px); }
40% { transform: translateX(5px); }
60% { transform: translateX(-3px); }
80% { transform: translateX(2px); }
}
.nook-story-page .cell-value {
font-family: Georgia, serif;
font-size: 38px;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--charcoal);
transition: color 0.3s ease;
}
.nook-story-page .spreadsheet-cell.error .cell-value {
color: #D32F2F;
}
.nook-story-page .cell-caption {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(60,60,60,0.82);
font-family: 'Courier New', monospace;
margin-top: 20px;
opacity: 0;
}
/* CONCLUSION — compression + disappearance */
.nook-story-page .conclusion-section {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 12vh 80px;
background: var(--white);
position: relative;
}
.nook-story-page .conclusion-text-container {
max-width: 720px;
width: 100%;
transition: none;
}
.nook-story-page .conclusion-para {
font-family: 'Libre Baskerville', Georgia, serif;
font-weight: 400;
font-size: clamp(18px, 2vw, 24px);
line-height: 1.9;
color: #555555;
margin-bottom: 28px;
opacity: 0;
}
.nook-story-page .conclusion-para:last-child {
margin-bottom: 0;
font-style: italic;
color: rgba(55,55,55,0.85);
}
/* ════════════════════════════════════════════
CHAPTER 5 — THE EQUATION REWRITE
════════════════════════════════════════════ */
/* CH4 → CH5 TRANSITION — THE BREATH */
.nook-story-page .ch5-transition {
position: relative;
width: 100%;
min-height: 80vh;
background: linear-gradient(to bottom,
var(--white) 0%,
#f0f0f0 15%,
#c0c0c0 35%,
#808080 55%,
#404040 75%,
#1a1a1a 90%,
#0a0a0a 100%
);
display: flex;
align-items: center;
justify-content: center;
overflow: clip;
}
/* SVG bloom — sits behind everything */
.nook-breath-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
/* Label wrap — sits above SVG */
.nook-breath-label-wrap {
position: relative;
z-index: 2;
text-align: center;
}
/* Eyebrow: "CHAPTER FIVE ·" */
.nook-breath-eyebrow {
display: block;
font-family: var(--nook-font-sans);
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.30em;
color: rgba(200, 168, 130, 1);
margin-bottom: 14px;
opacity: 0;
}
/* "Acceptance" */
.nook-breath-word {
display: block;
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(18px, 2.2vw, 28px);
font-weight: 400;
letter-spacing: 0.06em;
color: rgba(201, 168, 106, 0.88);
line-height: 1;
opacity: 0;
}
/* Thin horizontal rules */
.nook-breath-lines {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 22px;
opacity: 0;
}
.nook-breath-rule-left,
.nook-breath-rule-right {
height: 1px;
width: 0;
background: linear-gradient(
to left,
transparent 0%,
rgba(201, 168, 106, 0.30) 100%
);
}
.nook-breath-rule-right {
background: linear-gradient(
to right,
transparent 0%,
rgba(201, 168, 106, 0.30) 100%
);
}
/* TERMINAL SECTION */
.nook-story-page .terminal-section {
min-height: 300vh;
background: linear-gradient(to bottom,
var(--white) 0%,
#1a1a1a 10%,
#0a0a0a 20%,
#0a0a0a 100%
);
padding: 0;
position: relative;
}
.terminal-stage {
position: sticky;
top: 8vh;
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 0 80px;
}
.nook-story-page .terminal-window {
background: #0a0a0a;
border: 1px solid rgba(76, 175, 80, 0.3);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 0 60px rgba(76, 175, 80, 0.15);
}
.terminal-header {
background: #1a1a1a;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid rgba(76, 175, 80, 0.2);
}
.terminal-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(76, 175, 80, 0.3);
}
.terminal-title {
font-family: 'Courier New', monospace;
font-size: 11px;
color: rgba(76, 175, 80, 0.7);
margin-left: 12px;
}
.nook-story-page .terminal-body {
padding: 40px 32px;
min-height: 500px;
}
.terminal-line {
font-family: 'Courier New', monospace;
font-size: 20px;
line-height: 2.2;
margin-bottom: 16px;
position: relative;
}
.terminal-prompt {
color: rgba(76, 175, 80, 0.6);
margin-right: 8px;
}
.terminal-text {
color: var(--terminal-green);
text-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
}
/* Equation states */
.eq-old {
opacity: 1;
will-change: opacity;
}
.eq-arrow {
display: inline-block;
color: rgba(201, 168, 106, 0.6);
margin: 0 12px;
opacity: 0;
}
.eq-new {
opacity: 0;
will-change: opacity;
}
/* Cursor — opacity controlled entirely by ScrollTrigger JS (inline style) */
.nook-story-page .cursor {
display: inline-block;
width: 10px;
height: 24px;
background: var(--terminal-green);
margin-left: 4px;
vertical-align: middle;
opacity: 0;
}
/* Font morphing classes */
.nook-story-page .morph-serif {
font-family: Georgia, serif;
color: var(--amber-warm);
text-shadow: 0 0 12px rgba(201, 168, 106, 0.3);
}
/* Final equation - special styling */
.final-equation {
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid rgba(201, 168, 106, 0.2);
font-size: 24px;
text-align: center;
}
/* Comment lines */
.terminal-comment {
color: rgba(76, 175, 80, 0.4);
font-size: 14px;
font-style: italic;
margin-bottom: 24px;
opacity: 0;
}
/* CLOSING GRADIENT TRANSITION — dark to light, no text here */
.nook-story-page .closing-section {
min-height: 130vh;
background: linear-gradient(to bottom,
#0a0a0a 0%,
#1a1410 18%,
#2e2018 32%,
#5a3d28 48%,
#9e7a55 62%,
#d4b896 76%,
#ebe8dc 88%,
#FFFEF9 100%
);
}
/* CLOSING LIGHT SECTION — fully in the light, text lives here */
.nook-story-page .closing-light-section {
background: var(--cream);
display: flex;
align-items: center;
justify-content: center;
padding: 14vh 80px 16vh;
}
.nook-story-page .closing-text {
max-width: 820px;
font-family: 'Libre Baskerville', Georgia, serif;
font-size: 20px;
line-height: 1.95;
color: var(--charcoal);
}
.nook-story-page .closing-text p {
margin-bottom: 32px;
opacity: 0;
}
.nook-story-page .closing-text p:last-child {
margin-bottom: 0;
}
.nook-story-page .closing-highlight {
font-weight: 500;
font-style: italic;
}
/* Decorative rule before P3 */
.nook-story-page .closing-engraving-rule-wrap {
margin-top: 48px;
margin-bottom: 48px;
overflow: visible;
opacity: 0;
}
.nook-story-page .closing-engraving-rule-svg {
display: block;
width: 100%;
max-width: 320px;
height: 18px;
overflow: visible;
}
/* P3 climax phrase — warms to terracotta during emergence */
.nook-story-page .closing-climax-phrase {
font-style: italic;
color: var(--charcoal);
}
/* ============================================
ENDING — Dark bridge + door wipe onto mat photo
============================================ */
.nook-dark-bridge {
width: 100%;
height: 120px;
background: linear-gradient(to bottom, #FFFEF9 0%, #18160f 100%);
}
.nook-ending-door {
position: relative;
width: 100%;
background: #18160f;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
}
.nook-door-stage {
position: relative;
width: 100%;
height: 700px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.nook-door-light {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: inset(0 100% 0 0%);
overflow: hidden;
}
/* picture must be block + full-height so the img fills the light container.
The img is absolutely positioned within picture so object-fit:cover
stretches it to the full 320px stage height regardless of intrinsic size. */
.nook-door-light picture {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Higher specificity than desktop's bare .nook-door-photo rule so height:100%
wins over the intrinsic-ratio fallback that width:100% triggers on ![]()
. */
.nook-story-page .nook-door-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 50%;
display: block;
filter: brightness(0.88);
}
.nook-door-thread-overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.nook-door-thread-path {
fill: none;
stroke: rgba(255, 255, 255, 0.28);
stroke-width: 1;
stroke-linecap: round;
}
.nook-door-vignette {
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at 50% 40%,
transparent 40%,
rgba(18, 16, 14, 0.55) 100%
);
pointer-events: none;
}
.nook-door-frame-lines {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
opacity: 0;
}
.nook-door-dot-row-wrap {
width: 100%;
background: #18160f;
padding: 48px 80px 0;
opacity: 0;
}
.nook-door-dot-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.nook-door-journey-dot {
width: 6px;
height: 6px;
background: #c8a882;
border-radius: 50%;
opacity: 0;
flex-shrink: 0;
}
.nook-door-closing-wrap {
width: 100%;
background: #18160f;
padding: 36px 40px 100px;
text-align: center;
opacity: 0;
}
.nook-door-closing-text {
font-family: Georgia, serif;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(200, 168, 130, 0.55);
line-height: 2;
}
.nook-door-closing-period {
color: #d4664a;
opacity: 0.7;
}
.nook-mascot-figure {
position: absolute;
bottom: -30px;
left: 44px;
height: 260px;
width: auto;
opacity: 0.82;
pointer-events: none;
z-index: 5;
}
/* ============================================
PRODUCT FEATURES SECTION
============================================ */
.nook-product-features {
width: 100%;
background: var(--nook-cream-paper);
padding: 56px 24px 64px;
border-top: 1px solid var(--nook-ghost);
border-bottom: 1px solid var(--nook-ghost);
}
.nook-features-eyebrow {
font-family: var(--nook-font-sans);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.24em;
color: var(--nook-tan);
text-align: center;
margin-bottom: 8px;
}
.nook-features-heading {
font-family: var(--nook-font-serif);
font-size: 22px;
font-weight: normal;
color: var(--nook-text-charcoal);
text-align: center;
margin: 0 0 40px;
line-height: 1.4;
}
.nook-features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px 20px;
max-width: 380px;
margin: 0 auto;
}
.nook-feature-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.nook-feature-icon {
width: 48px;
height: 48px;
flex-shrink: 0;
}
.nook-feature-label {
font-family: var(--nook-font-sans);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--nook-text-charcoal);
text-align: center;
line-height: 1.5;
}
/* ============================================
CHAPTER TWO — THE MAT: UNROLLING BROADSIDE
============================================ */
.nook-story-page .nook-ch2b-section {
width: 100%;
background: var(--nook-cream-warm);
padding: 56px 0;
}
.nook-ch2b-label {
font-family: var(--nook-font-sans);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.28em;
color: var(--nook-tan);
text-align: center;
margin-bottom: 24px;
padding: 0 24px;
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.nook-ch2b-label { opacity: 1; }
}
.nook-ch2b-scroll-outer {
position: relative;
width: 100%;
overflow: hidden;
}
.nook-ch2b-fold-shadow {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 36px;
pointer-events: none;
z-index: 4;
background:
linear-gradient(to bottom,
rgba(245, 238, 225, 0.0) 0%,
rgba(245, 238, 225, 0.6) 30%,
rgba(200, 180, 150, 0.55) 55%,
rgba(90, 60, 30, 0.22) 78%,
rgba(50, 30, 10, 0.0) 100%
);
}
.nook-ch2b-fold-shadow.is-fully-open {
opacity: 0;
transition: opacity 0.5s ease;
}
.nook-ch2b-img {
display: block;
width: 100%;
height: auto;
}
@media (prefers-reduced-motion: reduce) {
.nook-ch2b-scroll-outer {
height: auto !important;
overflow: visible;
}
.nook-ch2b-fold-shadow { display: none; }
.nook-ch2b-img { transform: none !important; }
}
.nook-ch2b-affordance {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 20px;
padding: 0 24px;
opacity: 0;
transition: opacity 0.4s ease;
}
.nook-ch2b-affordance.is-visible {
opacity: 1;
}
.nook-ch2b-affordance-line {
flex: 1;
height: 1px;
background: rgba(200, 168, 130, 0.35);
max-width: 60px;
}
.nook-ch2b-affordance-text {
font-family: var(--nook-font-mono);
font-size: 8px;
text-transform: uppercase;
letter-spacing: 0.22em;
color: rgba(200, 168, 130, 0.7);
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
.nook-ch2b-affordance { display: none; }
}
/* ============================================
MOBILE BREAKPOINTS
============================================ */
/* Brand logo + header — mobile layout fix */
@media (max-width: 600px) {
.nook-brand-logo__nook {
font-size: 44px;
}
.nook-brand-logo__mats {
font-size: 28px;
}
/* Hide decorative elements that break the header layout on small screens */
.nook-textile-pattern,
.nook-organic-shape {
display: none;
}
/* Center the logo in the now-single-column header */
.nook-chapter-transition {
justify-content: center;
}
}
/* Ch2 split-screen — stack vertically on mobile */
@media (max-width: 768px) {
.nook-story-page .ch2-stage {
flex-direction: column;
height: auto;
}
.nook-story-page .ch2-left {
width: 100%;
height: auto;
min-height: 0;
border-right: none;
border-bottom: 1px solid #e4ddd4;
}
/* Show only the first state statically on mobile */
.nook-story-page .ch2-left-state.is-first {
position: relative;
inset: auto;
opacity: 1 !important;
pointer-events: auto !important;
padding: 48px 24px 56px;
}
.nook-story-page .ch2-left-state:not(.is-first) {
display: none;
}
/* Hide scroll nav elements that only make sense in the pinned layout */
.ch2-state-counter,
.ch2-scroll-hint,
.ch2-strip-track {
display: none;
}
.nook-story-page .ch2-right {
display: none;
}
}
/* Terminal — reduce padding on mobile so content fits */
@media (max-width: 768px) {
.terminal-stage {
padding: 0 16px;
}
.terminal-line {
font-size: 13px;
line-height: 1.9;
}
}
/* Mobile: assorted layout fixes */
@media (max-width: 768px) {
/* Col dividers (woven thread SVGs) create a 624px phantom gap in
single-column layout — hide them entirely on mobile */
.nook-col-divider {
display: none;
}
/* Excel blow-up sentence uses nowrap which clips on small screens */
.nook-story-page .blow-excel-text {
white-space: normal;
text-align: center;
}
/* Pin the diagram while the animation plays out.
Section is taller than viewport — sticky child stays fixed
while user scrolls through the extra height. */
.nook-story-page .network-section {
overflow: visible;
padding: 0;
margin-top: 120px;
height: calc(100vh + 1100px);
}
.nook-story-page .network-sticky {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 20px;
background: var(--cream);
}
.nook-story-page .network-eyebrow {
font-size: 10px;
letter-spacing: 0.18em;
margin-bottom: 24px;
}
.nook-story-page .network-svg-h {
display: none;
}
.nook-story-page .network-svg-v {
display: block;
/* Scale to fit inside the sticky viewport — bumped ~20% for mobile readability */
width: min(100%, calc((100vh - 60px) * 420 / 820));
height: auto;
/* BUG-006 (2026-08-18): mobile horizontal overflow, +154px at 393px.
The width formula above was NOT the problem — a live cascade probe
at 393x852 confirmed it already wins the width cascade and resolves
well under 393px. Computed width still read 700px, because
fl718-nook.css (the DESKTOP sheet) opens its OWN
@media (max-width: 768px) block and sets
.nook-story-page .network-svg { width: 700px; min-width: 700px; }
That rule reaches this element because the mobile template markup
carries BOTH classes (class="network-svg network-svg-v"), and
min-width is a different property from width — it floors the used
width regardless of specificity or source order, so no width
declaration here can override it.
min-width: 0 removes that floor. max-width: 100% is a ceiling so no
future declaration from either sheet can push this element past its
container without someone editing this rule deliberately.
Deliberately NOT done: restoring overflow: hidden on
.network-section above. That override exists so the sticky pin on
.network-sticky works, and re-clipping the parent would trade this
bug for a broken pin. fl718-nook.css is also not edited — its 1440px
rendering already measures clean. */
min-width: 0;
max-width: 100%;
}
}
/* ============================================================
NOOK NOOK MOBILE — All new overrides below
Added: 2026-03-15
Rule: All changes are @media (max-width: 768px) only.
Desktop behavior is completely unchanged.
============================================================ */
@media (max-width: 768px) {
/* === HEADER LOGO: single-row fix + blob restore === */
/* Stack logo + blob vertically, centered */
.nook-chapter-transition {
padding: 28px 20px 20px;
flex-direction: column;
justify-content: center;
align-items: center;
height: auto;
}
/* Each letter is its own via JS — prevent inter-letter wrapping */
.nook-brand-logo__main {
white-space: nowrap;
}
.nook-brand-logo__nook {
white-space: nowrap;
}
/* Blob deliberately NOT restored here — BUG-010, Seamus 2026-08-19.
An earlier rule at this spot overrode the display:none in the 600px block
above and re-sized the blob to 100px under the wordmark. Confirmed on device
and removed at his instruction. The 600px hide now stands, matching desktop,
which carries the same hide with no restore. Do not re-add without asking. */
/* === THRESHOLD (DOORMAT) PHOTO === */
/* 82vh on mobile = ~692px tall for a wide landscape image — crops badly.
50vw keeps the container proportional to the image's landscape aspect ratio. */
.nook-threshold-container {
height: 56vw;
min-height: 200px;
max-height: 320px;
}
/* === STEP 1: GLOBAL IMAGE SCALING === */
.nook-story-page img {
max-width: 100%;
height: auto;
}
/* === STEP 2: PADDING & SPACING PASS === */
.nook-product-reveal {
min-height: auto;
justify-content: flex-start;
padding: 84px 20px calc(8vh + 120px);
}
/* Word stagger: start invisible on mobile (desktop uses ghost color instead) */
.nook-opening-word {
color: var(--nook-text-charcoal);
opacity: 0;
}
/* Reduced-motion: words visible immediately */
@media (prefers-reduced-motion: reduce) {
.nook-opening-word {
opacity: 1 !important;
transform: none !important;
}
}
/* Ch3 intro already partially overridden (18vh 40px) — tighten further */
.nook-ch3-intro {
padding: 14vh 20px 0;
}
.nook-summit-victory {
padding: 8vh 20px 400px;
overflow: hidden;
}
/* Reduce 40vh dead space at bottom */
.nook-peak-quote {
padding: 400px 20px 16vh;
}
.nook-story-page .ledger-section {
padding: 8vh 20px 16vh;
}
/* Ledger full-bleed: match new 20px section padding */
.nook-story-page .ledger-header {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
.nook-story-page .ledger-row {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
height: auto;
min-height: 60px;
padding-top: 12px;
padding-bottom: 12px;
}
.nook-story-page .crisis-transition {
padding: 6vh 20px;
}
.nook-story-page .hinge-section {
padding: 0 20px;
}
.nook-story-page .blow-excel {
padding: 0 20px;
}
.nook-story-page .conclusion-section {
padding: 8vh 20px;
}
.nook-story-page .closing-light-section {
padding: 10vh 20px 12vh;
}
.nook-dot-separator {
padding: 8px 20px 0;
}
.nook-door-dot-row-wrap {
padding: 32px 20px 0;
}
.nook-door-closing-wrap {
padding: 28px 20px 60px;
}
.nook-door-closing-text {
padding-left: 20px;
}
/* === STEP 3: VICTORY SECTION === */
/* Scale up the whole metric block on mobile */
.nook-summit-metric {
transform: scale(1.2);
transform-origin: top center;
}
/* Photos: taller on mobile so landscape images aren't sliced thin */
.nook-summit-photo {
height: 300px;
}
/* First photo: door scene — anchor to bottom so doormat stays visible */
#nook-pc1 {
object-position: center 85%;
}
/* Second photo: info graphic — show full image, auto height so it fills container */
#nook-pc2 {
object-fit: contain;
background: #f0eeea;
height: auto;
}
/* Right column: remove fixed height, scale to match left metric */
.nook-summit-right {
height: auto;
padding-top: 40px;
padding-bottom: 60px;
transform: scale(1.2);
transform-origin: top center;
overflow: visible;
}
/* Ticker display — clamp to readable but not overwhelming */
.nook-ticker-display {
font-size: clamp(52px, 14vw, 80px);
}
/* Victory large numbers */
.nook-victory-large {
font-size: clamp(36px, 10vw, 56px);
}
/* === STEP 4: LEDGER TYPOGRAPHY === */
.nook-story-page .ledger-row-text {
font-size: 14px;
line-height: 1.7;
min-width: 0;
}
/* Row number column — narrow it */
.nook-story-page .ledger-row-num {
width: 36px;
font-size: 8px;
}
.ledger-col-head.num {
width: 36px;
}
/* === STEP 5: TERMINAL SECTION === */
/* Reduce total scroll distance — 300vh is too long on mobile */
.nook-story-page .terminal-section {
min-height: 200vh;
}
/* Add breathing room above terminal window */
.terminal-stage {
padding: 8vh 16px 0;
}
/* Equation lines */
.terminal-line {
font-size: 13px;
line-height: 1.8;
margin-bottom: 10px;
}
/* Hide arrow on mobile — old and new are separate lines */
.terminal-line .eq-arrow {
display: none;
}
/* Old equation: its own line */
.terminal-line .eq-old {
display: block;
}
/* New equation: its own line below, with its own prompt */
.terminal-line .eq-new {
display: block;
}
/* Add a $ prompt before each new equation on mobile */
.terminal-line .eq-new::before {
content: '$ ';
color: rgba(76, 175, 80, 0.6);
}
/* Final equation */
.final-equation {
font-size: 14px;
margin-top: 28px;
padding-top: 20px;
}
/* Terminal comment lines */
.terminal-comment {
font-size: 11px;
margin-bottom: 16px;
}
/* Terminal body */
.nook-story-page .terminal-body {
padding: 24px 18px;
min-height: auto;
}
/* Cursor: match smaller font */
.nook-story-page .cursor {
width: 7px;
height: 18px;
}
/* === STEP 6: PEAK ZONE === */
/* Gradient bridge: slightly shorter on mobile */
.nook-cream-white-bridge { height: 60px; }
/* Quote text: ensure readable and no overflow */
.nook-peak-quote-text {
font-size: clamp(18px, 5vw, 26px);
text-align: center;
}
/* Peak space: kill the massive 115vh min-height, use fixed padding */
.nook-peak-space {
min-height: auto;
padding: 0 20px;
}
/* Split whisper — readable but tight */
.nook-split-word {
font-size: 11px;
letter-spacing: 0.26em;
}
/* === STEP 7: HINGE + CELL + CONCLUSION === */
/* Cell width: fits on 390px with 20px side padding */
.nook-story-page .spreadsheet-cell-wrap {
width: 100%;
max-width: 320px;
align-items: stretch;
}
.nook-story-page .spreadsheet-cell,
.nook-story-page .cell-formula-bar {
width: 100%;
}
/* Cell value font */
.nook-story-page .cell-value {
font-size: clamp(28px, 8vw, 38px);
}
/* Conclusion text */
.nook-story-page .conclusion-para {
font-size: clamp(16px, 4.5vw, 22px);
line-height: 1.85;
}
/* Closing text — extra left padding prevents italic glyph clipping */
.nook-story-page .closing-text {
font-size: 17px;
line-height: 1.9;
padding-left: 4px;
}
/* === STEP 8: DOOR ENDING === */
/* Reduce stage height — still dramatic, not taller than the viewport */
.nook-door-stage {
height: 85vw;
min-height: 320px;
max-height: 520px;
}
/* Mascot: scale down slightly for narrower frame.
!important required to override height: 260px !important in fl718-nook.css (desktop). */
.nook-mascot-figure {
height: 180px !important;
bottom: -20px;
left: 20px;
}
}
/* ── Ch2 Mobile: "Ink Soaking In" animated underlines ──────────
On mobile, key phrases get underlines that draw left-to-right
via background-image + background-size animation. Each line
fragment draws independently thanks to box-decoration-break.
Desktop retains the existing cycling-state behavior. */
@media (max-width: 768px) {
.ch2-opening-para mark {
color: var(--nook-text-charcoal);
border-bottom: none;
text-decoration: none;
background-image: linear-gradient(var(--nook-terracotta), var(--nook-terracotta));
background-position: left bottom;
background-repeat: no-repeat;
background-size: 0% 1.5px;
padding-bottom: 3px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
}
/* Reduced motion: show underlines immediately */
@media (prefers-reduced-motion: reduce) {
.ch2-opening-para mark {
background-size: 100% 1.5px !important;
}
}
}