:root{--paper:#fcf9fc;--ink:#38233c;--accent:#714679;--stage:#ece1ef;color-scheme:light}
.hero h1 span{display:block}.product-shot{display:grid;justify-items:center;align-content:start;gap:16px;min-width:0}.product-shot .shot-link{width:min(100%,280px)}.product-shot figcaption{text-align:center;max-width:34ch}.hero-visual{min-width:0}.story-content .product-shot{background:var(--stage);padding:28px}.story-content .product-shot .shot-link{max-width:240px}.reading-pair,.schedule-pair,.household-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}.reading-pair .product-shot,.schedule-pair .product-shot,.household-pair .product-shot{padding:20px 12px}.story-heading h2{max-width:23ch}@media(max-width:600px){.product-shot .shot-link{max-width:260px}.reading-pair,.schedule-pair,.household-pair{grid-template-columns:1fr;gap:28px}.story-content .product-shot .shot-link{max-width:250px}}
/* A pause notebook: wish and decision together; the fictional shop has its own section. */
.hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}.hero h1{font-family:var(--serif);font-size:clamp(3rem,5vw,5rem);font-weight:400;max-width:13ch;letter-spacing:-.02em}.hero-visual{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding-block:28px;border-block:1px solid var(--line)}.hero-visual .product-shot:nth-child(2){margin-top:60px}.hero-visual .shot-link{max-width:230px}.hero-visual .shot-link img{box-shadow:0 6px 18px #38233c12;border:1px solid var(--line)}.fact-band{border:0;background:var(--stage);padding:20px}.story-content{grid-template-columns:1.2fr .8fr;gap:64px}.story-content>.product-shot{border-left:3px solid var(--accent);background:transparent}.story h2{font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.6rem);font-weight:400}.story-heading{grid-template-columns:1fr}.product-details{margin-top:40px}@media(max-width:800px){.hero{gap:32px}.story-content{gap:32px}}@media(max-width:600px){.hero{grid-template-columns:1fr}.hero-visual{grid-template-columns:1fr;gap:28px}.hero-visual .product-shot:nth-child(2){margin-top:0}.hero-visual .shot-link{max-width:260px}.story-content{grid-template-columns:1fr}}