/* ============================================================
   V. I. HUTCHINSON, author site. Design system v2.
   Paper world. EB Garamond for display, Inter Tight for text.
   Coral #DB7C5E is locked from the Substack theme.
   Every decision is recorded in Website/DIRECTION.md.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
:root {
  --bg:#FDFBF8; --bg-2:#F4EDE6; --bg-3:#EDE3DA;
  --blush:#F8ECE7;   /* the shelf band */
  /* ink-3 is the small caption grey. #857A73 read 4.0:1 on paper and 3.6:1 on
     blush, under the 4.5 minimum for text that small; this is 5.2 and 4.7. */
  --ink:#1A1512; --ink-2:#554C46; --ink-3:#736861;
  --accent:#DB7C5E; --accent-deep:#9A4B2E; --accent-soft:#F7E2D8;
  --on-accent:#1A1512;
  --line:rgba(26,21,18,.12); --line-strong:rgba(26,21,18,.26);
  --display:'EB Garamond', Georgia, serif;
  --ui:'Inter Tight', system-ui, sans-serif;

  /* one rhythm for every page */
  --max: 1440px;
  --gutter: clamp(22px, 4.5vw, 72px);
  --sec: clamp(96px, 10vw, 168px);
  --nav-h: 78px;
  --bk-base: 440px;
}
@media (max-width: 860px) { :root { --nav-h: 66px; } }

/* the one dark passage: the newsletter door */
.passage {
  --bg:#13100E; --bg-2:#1C1815; --ink:#F5F0EA; --ink-2:#B3A69C; --ink-3:#8A7E75;
  --accent:#E08A66; --accent-deep:#F0AF92; --on-accent:#13100E;
  --line:rgba(245,240,234,.15); --line-strong:rgba(245,240,234,.34);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--ui); font-size: 17.5px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent-soft); color: var(--ink); }
.skip { position: absolute; left: -999px; top: 10px; background: var(--accent); color: var(--on-accent); padding: 12px 16px; border-radius: 4px; z-index: 300; font-size: 15px; }
.skip:focus { left: 14px; }

.wrap { max-width: var(--max); margin: 0 auto; width: 100%; padding-inline: var(--gutter); }

/* ---------- TYPE ---------- */
.disp { font-family: var(--display); font-weight: 400; line-height: 1.03; letter-spacing: -.018em; text-wrap: balance; }
.d-xl { font-size: clamp(52px, 7.2vw, 118px); }
.d-lg { font-size: clamp(42px, 5.4vw, 86px); }
.d-md { font-size: clamp(32px, 3.5vw, 56px); }
.d-sm { font-size: clamp(24px, 2.1vw, 32px); line-height: 1.12; }
.lede { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.6; color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.body { font-size: 17.5px; line-height: 1.78; color: var(--ink-2); max-width: 64ch; text-wrap: pretty; }
.cap { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.ital { font-family: var(--display); font-style: italic; }

/* ---------- CONTROLS ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--ui); font-size: 15.5px; font-weight: 500; letter-spacing: .01em; padding: 17px 32px; border-radius: 4px; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: transform .22s cubic-bezier(.16,1,.3,1), border-color .2s, color .2s, background .2s; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-sm { font-size: 14.5px; padding: 11px 20px; }
.lnk { color: var(--accent-deep); text-decoration: none; border-bottom: 1px solid rgba(219,124,94,.5); padding-bottom: 2px; font-weight: 500; transition: border-color .2s, color .2s; }
.lnk:hover { border-bottom-color: var(--accent); }
.arrow::after { content: "\2192"; display: inline-block; margin-left: .45em; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.arrow:hover::after { transform: translateX(4px); }

/* ---------- STICKY NAV ---------- */
.site-nav { position: sticky; top: 0; z-index: 60; background: rgba(253,251,248,.92); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
.site-nav.scrolled { border-bottom-color: var(--line); }
.nav { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.nav-mark { font-family: var(--display); font-size: 22px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--ink); white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: clamp(26px, 2.6vw, 42px); }
.nav-links a { font-size: 16px; color: var(--ink-2); text-decoration: none; position: relative; padding-block: 6px; transition: color .2s; }
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.nav-links a:not(.btn):hover { color: var(--ink); }
.nav-links a:not(.btn):hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links .btn { color: var(--ink); padding-block: 11px; }
.nav-toggle { display: none; font: inherit; font-size: 15px; font-weight: 500; background: none; border: 1px solid var(--line-strong); border-radius: 4px; padding: 10px 16px; min-height: 44px; cursor: pointer; color: var(--ink); }
@media (max-width: 860px) {
  .nav-mark { font-size: 19px; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: var(--nav-h); flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 20px; box-shadow: 0 18px 40px rgba(26,21,18,.08); }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 19px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav-links a:not(.btn)::after { display: none; }
  .nav-links .btn { margin-top: 16px; border-bottom: 1px solid var(--line-strong); justify-content: center; }
}

/* ---------- SECTION FRAME ---------- */
.sec { padding-block: var(--sec); }
.sec-head { max-width: 820px; margin-bottom: clamp(44px, 4.6vw, 72px); }
.sec-head .lede { margin-top: 22px; }

/* reveals, only once JS has confirmed it is running */
.js .rv { opacity: 0; transform: translateY(26px); }
.js .rv.seen { opacity: 1; transform: none; transition: opacity .85s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0ms); }

/* ============================================================
   HOME: THE HERO SEQUENCE
   Approved in Lab 02: Bare texture, Gather, One by one, Scroll
   follows the last book, Measured pace.
   ============================================================ */
.seq { position: relative; z-index: 2; height: calc(100dvh - var(--nav-h)); min-height: 560px; overflow: visible; display: flex; flex-direction: column; }
.seq-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* The composition sits above centre rather than on it. On a tall screen the
   headline and fan reach their maximum sizes long before the frame stops
   growing, and centring them left a band of empty paper under the nav. The
   heavier bottom padding sends that extra height below the books instead,
   which is where they are about to fall. */
.heroC { position: relative; z-index: 3; flex: 1 1 auto; min-height: 0; max-width: var(--max); margin: 0 auto; width: 100%; padding: clamp(16px, 1.8vh, 32px) var(--gutter) clamp(40px, 16vh, 240px); display: grid; grid-template-columns: 1fr 1.08fr; align-items: center; align-items: safe center; gap: clamp(28px, 3vw, 60px); }
/* "safe" matters: if the content is ever taller than the frame, plain centring
   pushes the overflow out through the top, under the sticky nav. Browsers that
   predate the keyword drop that line and keep the plain value above it. */
.hero-title { font-size: clamp(46px, min(5.3vw, 9.4vh), 86px); }
.heroC .lede { margin-top: clamp(20px, 3vh, 32px); max-width: 36ch; }
.heroC .cta { margin-top: clamp(28px, 4.4vh, 46px); display: flex; gap: 14px; flex-wrap: wrap; }
/* Fan height is bounded by width, not just by taste. The last book sits at 72%
   of the column and reaches about 0.48 of the fan's height past that, rotation
   included, so the fan fits its column plus gutter when it is at most ~35.5vw.
   Below that coefficient the right-hand book runs off the edge of the screen. */
/* The 580 cap only matters above ~1630px wide, where the page margins beside
   the 1440 container give the right-hand book room to spare. */
.fan { position: relative; height: clamp(320px, min(35.5vw, 66vh), 580px); align-self: center; }
.fan .slot { position: absolute; bottom: 0; left: var(--l); height: var(--h); aspect-ratio: var(--ar); visibility: hidden; background-size: cover; border-radius: 2px; }
.fan .slot[data-i="0"] { --h: 74%; --l: 0%;  --ar: 1333/2000; }
.fan .slot[data-i="1"] { --h: 84%; --l: 16%; --ar: 1250/2000; }
.fan .slot[data-i="2"] { --h: 96%; --l: 34%; --ar: 1410/2250; }
.fan .slot[data-i="3"] { --h: 84%; --l: 55%; --ar: 1250/2000; }
.fan .slot[data-i="4"] { --h: 74%; --l: 72%; --ar: 1250/2000; }
@media (max-width: 900px) {
  /* One column. The headline, the fan and the gaps are all sized off the
     viewport's height as well as its width, so a tall narrow window fills
     instead of leaving a lake of paper above and below the composition.
     The spread tightens so the fan can stay large: with the last book at 60%
     it fits the full width at up to ~76vw, so 72vw leaves a margin. */
  .heroC { grid-template-columns: 1fr; grid-auto-rows: min-content; align-content: center; align-content: safe center; gap: clamp(30px, 6vh, 90px); padding-block: clamp(14px, 2vh, 36px) clamp(40px, 11vh, 180px); }
  .hero-title { font-size: clamp(40px, min(10.4vw, 6.6vh), 80px); }
  .fan { height: clamp(200px, min(72vw, 38vh), 480px); }
  .fan .slot[data-i="1"] { --l: 13%; }
  .fan .slot[data-i="2"] { --l: 28%; }
  .fan .slot[data-i="3"] { --l: 45%; }
  .fan .slot[data-i="4"] { --l: 60%; }
}
@media (max-width: 620px) {
  /* buttons slim enough to share one row instead of stacking */
  .heroC .cta .btn { padding: 15px 22px; }
}
@media (max-width: 620px) and (max-height: 940px) {
  /* A phone's hero is already full, so no upward bias and tighter gaps. A tall
     narrow window is not a phone and keeps the bias. */
  .heroC { padding-block: 12px 24px; gap: clamp(20px, 3.5vh, 40px); }
}
.book-layer { position: absolute; top: 0; left: 0; right: 0; height: 100%; z-index: 8; pointer-events: none; overflow-x: clip; overflow-y: visible; }
.bk { position: absolute; left: 0; top: 0; height: var(--bk-base); width: auto; border-radius: 2px; box-shadow: 0 24px 54px rgba(26,21,18,.26); will-change: transform; }
.no-js .book-layer { display: none; }
.no-js .fan .slot { visibility: visible; box-shadow: 0 22px 50px rgba(26,21,18,.26); }

/* ---------- HOME: THE SHELF (Lab 01 rail) ---------- */
.work { position: relative; background: var(--blush); padding-block: clamp(72px, 8vw, 130px) clamp(64px, 6vw, 104px); }
.work-head { max-width: var(--max); margin: 0 auto clamp(44px, 4.6vw, 68px); padding-inline: var(--gutter); }
.work-head .lede { margin-top: 22px; }
.rail { display: flex; gap: clamp(20px, 2.4vw, 38px); max-width: var(--max); margin: 0 auto; padding: 4px var(--gutter) 12px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.rail::-webkit-scrollbar { display: none; }
.rail article { flex: 0 0 clamp(220px, 20.5vw, 300px); }
.rail .cover { width: 100%; aspect-ratio: 5/8; object-fit: cover; border-radius: 2px; box-shadow: 0 18px 40px rgba(26,21,18,.18); opacity: 0; }
.no-js .rail .cover, .no-js .rail .meta { opacity: 1; }
.rail .form { margin-top: 22px; }
.rail h3 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 1.9vw, 29px); line-height: 1.12; margin: 8px 0 8px; }
.rail .blurb { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.rail .meta { opacity: 0; }
.rail .meta .lnk { display: inline-block; margin-top: 14px; font-size: 15px; }
.work-more { max-width: var(--max); margin: clamp(36px, 3.6vw, 52px) auto 0; padding-inline: var(--gutter); }

/* ---------- HOME: PROOF OF WORK, facing pages ---------- */
.facing { display: grid; gap: clamp(32px, 3.6vw, 56px); }
.spread { display: grid; grid-template-columns: 1.1fr .9fr; background: var(--bg-2); border-radius: 3px; overflow: hidden; box-shadow: 0 28px 64px rgba(26,21,18,.09); }
.spread > div { padding: clamp(32px, 4vw, 64px); }
.spread .verso { background: var(--bg); border-right: 1px solid var(--line); display: flex; align-items: center; }
.spread.flip { grid-template-columns: .9fr 1.1fr; }
.spread.flip .verso { border-right: 0; border-left: 1px solid var(--line); order: 2; }
.spread blockquote { font-family: var(--display); font-size: clamp(22px, 2.1vw, 31px); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.spread blockquote.verse { line-height: 1.6; font-style: italic; }
.spread .recto { display: flex; flex-direction: column; justify-content: center; }
.spread h3 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 2.7vw, 42px); line-height: 1.06; margin: 12px 0 16px; text-wrap: balance; }
.spread .ctx { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); margin-bottom: 26px; max-width: 40ch; }
@media (max-width: 860px) { .spread, .spread.flip { grid-template-columns: 1fr; } .spread.flip .verso { order: 0; border-left: 0; } .spread .verso { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ---------- NEWSLETTER: the lit doorway ---------- */
.door { position: relative; overflow: hidden; background: var(--bg); color: var(--ink); }
.door-art { position: absolute; inset: 0; }
.door-art img { width: 100%; height: 100%; object-fit: cover; opacity: .36; }
.door-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 64% 46%, rgba(224,138,102,.30), transparent 70%), linear-gradient(90deg, var(--bg) 6%, rgba(19,16,14,.66) 48%, rgba(19,16,14,.28)); }
.door-in { position: relative; z-index: 2; padding-block: clamp(96px, 10vw, 170px); }
.door-in .inner { max-width: 620px; }
.door-in .lede { margin-top: 22px; }
.sub { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 38px; }
.sub .field { flex: 1 1 280px; min-width: 0; }
.sub label { display: block; margin-bottom: 10px; }
.sub input { width: 100%; font-family: var(--ui); font-size: 16.5px; padding: 16px 18px; border-radius: 4px; background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); }
.sub input::placeholder { color: var(--ink-3); opacity: 1; }
.sub input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.sub .help { flex-basis: 100%; font-size: 14px; color: var(--ink-3); margin-top: 8px; }

/* ---------- FOOTER ---------- */
.site-foot { border-top: 1px solid var(--line); padding-block: clamp(64px, 6vw, 96px) 36px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(30px, 4vw, 64px); }
.foot-brand .nav-mark { display: inline-block; margin-bottom: 16px; }
.foot-brand p { font-size: 16px; color: var(--ink-2); max-width: 30ch; line-height: 1.6; }
.foot-col h2 { margin-bottom: 18px; }
.foot-col li + li { margin-top: 10px; }
.foot-col a { font-size: 16px; color: var(--ink-2); text-decoration: none; transition: color .2s; }
.foot-col a:hover { color: var(--accent-deep); }
.foot-col .note { font-size: 15px; color: var(--ink-3); margin-top: 10px; }
.foot-base { margin-top: clamp(48px, 5vw, 72px); padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--ink-3); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-open { padding-block: clamp(48px, 6vw, 96px) clamp(40px, 5vw, 80px); }
.about-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(36px, 5vw, 96px); align-items: start; }
.about-portrait { position: sticky; top: calc(var(--nav-h) + 32px); }
.about-portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 22%; border-radius: 3px; box-shadow: 0 30px 70px rgba(26,21,18,.14); }
.about-portrait figcaption { margin-top: 18px; }
.about-copy .kicker { font-family: var(--display); font-style: italic; font-size: clamp(21px, 1.9vw, 28px); line-height: 1.35; color: var(--ink-2); margin: 22px 0 clamp(34px, 3.6vw, 52px); padding-bottom: .1em; max-width: 30ch; }
.about-copy .body { font-size: 18.5px; }
.about-copy .body + .body { margin-top: 1.1em; }
.about-copy .body.lead { font-size: clamp(20px, 1.6vw, 23px); line-height: 1.62; color: var(--ink); }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } .about-portrait { position: static; max-width: 420px; } }

.glance { border-top: 1px solid var(--line); }
.glance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-left: 1px solid var(--line); }
.glance-grid > div { padding: clamp(26px, 2.6vw, 40px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.glance-grid dt { margin-bottom: 14px; }
.glance-grid dd { font-family: var(--display); font-size: clamp(21px, 1.8vw, 27px); line-height: 1.3; color: var(--ink); }
.glance-grid dd small { display: block; font-family: var(--ui); font-size: 15px; line-height: 1.55; color: var(--ink-2); margin-top: 8px; }
@media (max-width: 900px) { .glance-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .glance-grid { grid-template-columns: 1fr; } }

.shelf-made { background: var(--bg-2); }
.influences { display: flex; flex-wrap: wrap; gap: clamp(8px, 1vw, 14px) clamp(22px, 2.6vw, 44px); margin-top: clamp(30px, 3vw, 44px); }
.influences li { font-family: var(--display); font-size: clamp(28px, 3.2vw, 52px); line-height: 1.15; color: var(--ink); }
.influences li:nth-child(even) { font-style: italic; color: var(--ink-2); }

.quiet-sub { border-block: 1px solid var(--line); }
.quiet-sub-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 72px); align-items: center; padding-block: clamp(56px, 6vw, 96px); }
.quiet-sub .sub { margin-top: 0; }
@media (max-width: 900px) { .quiet-sub-in { grid-template-columns: 1fr; } }

.card-out { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(36px, 4vw, 80px); align-items: end; }
.card-out .body { margin-top: 24px; }
.card-out .cta { margin-top: 34px; }
.contact-list { display: grid; gap: 26px; }
.contact-list div { display: grid; gap: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.contact-list dd { font-size: 19px; }
.contact-list a { text-decoration: none; color: var(--accent-deep); }
.contact-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) { .card-out { grid-template-columns: 1fr; } }

/* ============================================================
   BOOKS PAGE: the room switcher, one colour world per book
   ============================================================ */
.books-open { padding-block: clamp(48px, 6vw, 96px) clamp(36px, 4vw, 60px); }
.books-open-in { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.books-open .lede { margin-top: 22px; }

.switch { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.sw-frame { display: grid; grid-template-columns: minmax(250px, 300px) 1fr; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); box-shadow: 0 34px 80px rgba(26,21,18,.08); }
.sw-index { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--bg); }
.sw-tab { font: inherit; font-family: var(--ui); text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; padding: clamp(20px, 2vw, 28px) clamp(22px, 2vw, 30px); color: var(--ink-2); display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 5px; align-items: baseline; position: relative; transition: background .25s, color .25s; }
.sw-tab:last-child { border-bottom: 0; }
.sw-tab::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.sw-tab .n { font-size: 12px; letter-spacing: .12em; color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; grid-row: 1 / 3; padding-top: 5px; }
.sw-tab .t { font-family: var(--display); font-size: clamp(21px, 1.6vw, 25px); line-height: 1.15; color: var(--ink); }
.sw-tab .m { font-size: 14px; color: var(--ink-3); }
.sw-tab:hover { background: var(--bg-2); }
.sw-tab[aria-selected="true"] { background: var(--bg-2); }
.sw-tab[aria-selected="true"]::before { transform: scaleY(1); }
.sw-tab[aria-selected="true"] .n { color: var(--accent-deep); }
.sw-panels { position: relative; min-height: min(86vh, 820px); }

.room { background: var(--r-bg); color: var(--r-ink); position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .55s cubic-bezier(.16,1,.3,1); overflow: hidden; }
.room.on { opacity: 1; pointer-events: auto; }
.room::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }
.room-in { position: relative; height: 100%; display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(32px, 4vw, 76px); align-items: center; padding: clamp(40px, 4.6vw, 80px) clamp(32px, 4.4vw, 76px); }
.room-art { display: flex; justify-content: center; align-items: center; }
.room-art img { height: clamp(300px, 56vh, 560px); width: auto; max-width: 100%; object-fit: contain; border-radius: 2px; box-shadow: 0 34px 70px rgba(0,0,0,.34), 0 6px 16px rgba(0,0,0,.14); }
.room-copy { max-width: 560px; }
.room-meta { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--r-ink3); font-weight: 500; }
.room-meta .soon { display: inline-block; margin-left: 10px; padding: 4px 10px; border-radius: 3px; background: var(--r-accent); color: var(--r-on-accent); letter-spacing: .12em; }
.room-copy h2 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 4.4vw, 70px); line-height: 1.02; letter-spacing: -.015em; margin: 16px 0 18px; text-wrap: balance; }
.room-copy .tag { font-family: var(--display); font-style: italic; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; color: var(--r-ink2); margin-bottom: 26px; padding-bottom: .1em; }
.room-copy .desc { font-size: 17px; line-height: 1.72; color: var(--r-ink2); }
.room-copy .desc + .desc { margin-top: .9em; }
.room-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 30px 0 34px; padding-top: 22px; border-top: 1px solid var(--r-line); }
.room-facts dt { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--r-ink3); font-weight: 500; margin-bottom: 7px; }
.room-facts dd { font-size: 15.5px; line-height: 1.45; color: var(--r-ink); }
.room-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.room-actions .btn-primary { background: var(--r-accent); color: var(--r-on-accent); }
.room-actions .btn-ghost { color: var(--r-ink); border-color: var(--r-line-strong); }
.room-actions .btn-ghost:hover { border-color: var(--r-accent); color: var(--r-ink); }

/* a room's cover rises and its copy settles as it becomes active */
.js .room .room-art img { opacity: 0; transform: translateY(40px) scale(.985); }
.js .room.live .room-art img { opacity: 1; transform: none; transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1); }
.js .room .room-copy > * { opacity: 0; transform: translateY(16px); }
.js .room.live .room-copy > * { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1); }
.js .room.live .room-copy > *:nth-child(2) { transition-delay: .06s }
.js .room.live .room-copy > *:nth-child(3) { transition-delay: .12s }
.js .room.live .room-copy > *:nth-child(4) { transition-delay: .18s }
.js .room.live .room-copy > *:nth-child(5) { transition-delay: .24s }
.js .room.live .room-copy > *:nth-child(6) { transition-delay: .30s }
.js .room.live .room-copy > *:nth-child(7) { transition-delay: .36s }

@media (max-width: 980px) {
  .sw-frame { grid-template-columns: 1fr; }
  .sw-index { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .sw-index::-webkit-scrollbar { display: none; }
  .sw-tab { border-bottom: 0; border-right: 1px solid var(--line); flex: 0 0 auto; grid-template-columns: auto; padding: 16px 22px; }
  .sw-tab .n { grid-row: auto; padding-top: 0; }
  .sw-tab .m { display: none; }
  .sw-tab .t { font-size: 19px; white-space: nowrap; }
  .sw-tab::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 3px; transform: scaleX(0); transform-origin: left; }
  .sw-tab[aria-selected="true"]::before { transform: scaleX(1); }
  .room-in { grid-template-columns: 1fr; gap: 30px; padding: 36px clamp(22px, 5vw, 44px) 44px; align-content: start; }
  .room-art img { height: clamp(240px, 40vh, 400px); }
}
@media (max-width: 520px) { .room-facts { grid-template-columns: 1fr 1fr; } }
.no-js .room { position: relative; opacity: 1; pointer-events: auto; }
.no-js .sw-panels { min-height: 0; }
/* books.js drops the rooms into normal flow for one synchronous measure */
.sw-panels.measure .room { position: relative; inset: auto; }
.sw-panels.measure .room-in { height: auto; }

/* in progress: the novel */
.wip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 96px); align-items: center; }
.wip-grid .lede { margin-top: 24px; }
.wip-links { margin-top: 34px; display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 520px; }
.wip-links a { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: color .2s, padding .3s cubic-bezier(.16,1,.3,1); }
.wip-links a span { font-family: var(--display); font-size: clamp(21px, 1.8vw, 26px); }
.wip-links a em { font-style: normal; font-size: 14px; color: var(--ink-3); white-space: nowrap; }
.wip-links a:hover { color: var(--accent-deep); padding-left: 8px; }
.wip-page { background: var(--bg-2); border-radius: 3px; padding: clamp(40px, 4.6vw, 76px); box-shadow: 0 28px 64px rgba(26,21,18,.09); position: relative; }
.wip-page blockquote { font-family: var(--display); font-size: clamp(24px, 2.3vw, 34px); line-height: 1.48; color: var(--ink); text-wrap: pretty; }
.wip-page figcaption { margin-top: 28px; }
@media (max-width: 900px) { .wip-grid { grid-template-columns: 1fr; } }

.find { background: var(--bg-2); }
.find-in { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(30px, 4vw, 72px); align-items: center; padding-block: clamp(64px, 6.5vw, 108px); }
.find-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 900px) { .find-in { grid-template-columns: 1fr; } .find-actions { justify-content: flex-start; } }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv, .js .rv.seen { opacity: 1 !important; transform: none !important; transition: none !important; }
  .rail .cover, .rail .meta { opacity: 1 !important; }
  .room { transition: none !important; }
  .js .room .room-art img, .js .room .room-copy > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn, .arrow::after, .nav-links a::after { transition: none; }
}