/* The Bookshelf — v2: the quiet-magazine system (warm paper, deep plum ink, rust labels, Bodoni capitals). */
@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..700&family=Inter:wght@400;500;600&display=swap");
@import url("bookshelf.css");

:root {
  --paper: #ECE3D1; --sheet: #E6DCC8; --ink: #43282A; --muted: rgba(67, 40, 42, .72);
  --ox: #43282A; --ox-2: #5a3639; --gold: #A86438; --rust: #A86438;
  --hair: rgba(67, 40, 42, .16); --hair-2: rgba(67, 40, 42, .38);
  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --r-btn: 999px; --r-card: 2px;
  --ease-v2: cubic-bezier(.16, 1, .3, 1);
}
html, body { background: var(--paper); }
body { color: var(--ink); }
.grain { display: block; opacity: .38; z-index: 60; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .26 0 0 0 0 .16 0 0 0 0 .16 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Type: Didone capitals, rust labels */
.caption__title, .detail__title, .about h2 { font-family: var(--serif); font-variation-settings: "opsz" 11; font-optical-sizing: none; font-weight: 500; text-transform: uppercase; letter-spacing: .01em; }
.caption__title { font-size: clamp(30px, 4.2vw, 62px); line-height: .95; }
.detail__title { font-size: clamp(40px, 6vw, 92px); line-height: .88; }
.wm__w { font-family: var(--serif); font-variation-settings: "opsz" 11; font-optical-sizing: none; text-transform: uppercase; font-size: 21px; letter-spacing: .06em; font-weight: 500; }
.wm__p, .eyebrow, .caption__sub, .top__l, .top__r span, .foot, legend, .editions legend, .tab, .foot__about { font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow, .caption__sub, .top__l, .foot__about, .editions legend { color: var(--rust); }
.top__r em, .detail__desc { font-family: var(--serif); font-style: italic; font-variation-settings: "opsz" 11; color: var(--muted); }
.mono text { font-family: "Bodoni Moda", Georgia, serif; }
.detail__syn, .about p { font-family: var(--sans); font-size: 15px; line-height: 1.7; color: var(--muted); }
.detail__hook { font-family: var(--serif); font-variation-settings: "opsz" 11; font-style: italic; color: var(--ink); }
.detail__note { border-left-color: var(--rust); }

/* Chrome: hairlines, tabs, arrows */
.top, .foot, .detail__top { border-color: var(--hair); }
.tab { border-radius: 999px; border-color: var(--hair-2); height: 28px; padding: 0 13px; color: var(--ink); transition: background-color .35s var(--ease-v2), color .35s var(--ease-v2), border-color .35s; }
.tab:hover { border-color: var(--rust); color: var(--rust); }
.tab[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.arrow { border-color: var(--hair-2); transition: background-color .35s var(--ease-v2), color .35s, border-color .35s, transform .5s var(--ease-v2); }
.arrow:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: scale(1.06); }
.caption__title:hover { color: var(--rust); text-decoration: none; }
.foot__n b, .foot__about:hover { color: var(--ink); }
.bagl { font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; }
.bagl b { background: var(--rust); color: var(--paper); }

/* The shelf itself: a quiet wooden ledge on warm paper */
.ledge::before { background: linear-gradient(180deg, #D9CDB4, #CDBFA3); border-top-color: rgba(67, 40, 42, .3); }
.ledge::after { background: rgba(168, 100, 56, .55); }
.ledge i { background: rgba(67, 40, 42, .3); }
.open-ico, .flip-ico { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.open-ico:hover, .flip-ico:hover, .flip-ico[aria-pressed="true"] { background: var(--rust); border-color: var(--rust); color: var(--paper); }
.board { background: var(--ink); color: var(--paper); }
.board small, .board em { color: var(--rust-lt, #D79B6B); }

/* Buttons and editions */
.cta, .ghost { border-radius: 999px; min-height: 46px; padding: 0 26px; font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; transition: background-color .4s var(--ease-v2), color .4s, transform .5s var(--ease-v2); }
.cta { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cta:hover { background: var(--rust); border-color: var(--rust); color: var(--paper); transform: translateY(-2px); }
.ghost { border-color: var(--ink); color: var(--ink); }
.ghost:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.ed { border-radius: 2px; transition: border-color .3s, background-color .3s, transform .5s var(--ease-v2); }
.ed:hover { border-color: var(--rust); transform: translateY(-2px); }
.ed:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ed:has(input:checked) small { color: #d8c9ac; }
.ed span { font-family: var(--serif); font-variation-settings: "opsz" 11; font-weight: 500; }
.linkish, .back { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.linkish:hover, .back:hover { color: var(--rust); }
.demo-tag { color: var(--rust); border-color: var(--rust); border-radius: 999px; }
.seg { border-color: var(--hair-2); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Detail page + about dialog */
.detail { background: var(--paper); }
.detail__top { background: color-mix(in srgb, var(--paper) 92%, transparent); }
.detail__body { border-top-color: var(--hair); }
.detail__nav { border-top-color: var(--hair); }
.detail__cover img, .detail__cover .board, .flipcard img { border-radius: 2px; box-shadow: 0 30px 50px -30px rgba(67, 40, 42, .7); }
.about { border-radius: 2px; background: var(--paper); border-color: var(--hair-2); }
.about::backdrop { background: rgba(67, 40, 42, .5); }
.key b, .about__rule { color: var(--rust); }
:focus-visible { outline-color: var(--rust); }

/* Motion: the shelf arrives; the ledge draws itself; the caption rises */
@keyframes v2-up { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes v2-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes v2-fade { from { opacity: 0; } to { opacity: 1; } }
.js .top { animation: v2-fade 1s var(--ease-v2) both; }
.js .tabs { animation: v2-up 1.1s var(--ease-v2) .15s both; }
.js .stage { animation: v2-up 1.5s var(--ease-v2) .3s both; }
.js .ledge { transform-origin: 0 50%; animation: v2-draw 1.4s var(--ease-v2) .55s both; }
.js .caption { animation: v2-up 1.2s var(--ease-v2) .8s both; }
.js .foot { animation: v2-fade 1.2s var(--ease-v2) 1.1s both; }
.caption__title { transition: opacity .3s, color .3s, letter-spacing .9s var(--ease-v2); }
.is-swap .caption__title { letter-spacing: .08em; }
.tabs { position: relative; }
/* a slow-turning tick badge beside the counter */
.foot__n::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 10px; vertical-align: -5px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--rust) 0 2deg, transparent 2deg 7.5deg); -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%); mask: radial-gradient(circle, transparent 52%, #000 54%); animation: v2-spin 16s linear infinite; }
@keyframes v2-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .js .top, .js .tabs, .js .stage, .js .ledge, .js .caption, .js .foot, .foot__n::before { animation: none; } }
html.rm .top, html.rm .tabs, html.rm .stage, html.rm .ledge, html.rm .caption, html.rm .foot { animation: none; }

/* Embedded on the home page: the site's own header sits above, so drop the standalone top bar */
html.embed .top { display: none; }
html.embed body.bs { min-height: 0; }

/* Wordmark: same logo lock-up as the main site header */
.wm__t { display: block; font-family: var(--serif); font-variation-settings: "opsz" 11; font-optical-sizing: none; font-size: 15px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; line-height: 1; }
.wm__t i { font-style: italic; text-transform: lowercase; letter-spacing: .02em; font-weight: 400; }
.wm { display: inline-flex; align-items: center; gap: 12px; }