:root {
  --yellow: #f4d900;
  --black: #10100f;
  --paper: #f1eee6;
  --blue: #3849e8;
  --pink: #ef6f9a;
  --line: rgba(16, 16, 15, 0.25);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--black);
  background: var(--paper);
  font-family: "Arial Narrow", "Helvetica Neue", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  letter-spacing: -0.025em;
  line-height: 1.65;
}
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--pink); color: var(--black); }

.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: white; padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: fixed; z-index: 20; top: 0; left: 0; width: 100%; height: 74px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 3vw; border-bottom: 1px solid rgba(255,255,255,.28);
  color: white; mix-blend-mode: difference;
}
.wordmark { font-size: 1.22rem; font-weight: 950; letter-spacing: -.07em; width: max-content; }
.wordmark span { color: var(--yellow); margin-left: .2rem; }
.site-header nav { display: flex; gap: 2rem; font-size: .74rem; font-weight: 800; letter-spacing: .1em; }
.site-header nav a { position: relative; }
.site-header nav a::after { content: ""; position: absolute; height: 1px; left: 0; bottom: -.3rem; width: 0; background: currentColor; transition: width .25s; }
.site-header nav a:hover::after { width: 100%; }
.menu-cta { justify-self: end; border: 0; background: transparent; color: inherit; font-size: .8rem; font-weight: 850; letter-spacing: .03em; cursor: pointer; }
.menu-cta span { display: inline-block; transition: transform .2s; }
.menu-cta:hover span { transform: translate(3px,-3px); }

.hero {
  min-height: 100svh; position: relative; overflow: hidden; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 8rem 3vw 6.5rem; color: var(--yellow); background: var(--black);
}
.hero-noise { position: absolute; inset: 0; opacity: .17; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.46'/%3E%3C/svg%3E"); }
.eyebrow { position: relative; font-size: .72rem; font-weight: 850; letter-spacing: .14em; margin: 0 0 1rem; }
.hero-title { position: relative; margin: 0; font-size: clamp(4.2rem, 13.2vw, 13rem); font-weight: 950; line-height: .73; letter-spacing: -.095em; text-transform: uppercase; }
.hero-title span { display: block; }
.hero-title .outline { color: transparent; -webkit-text-stroke: clamp(1px,.09em,7px) var(--yellow); padding-left: 10.8vw; }
.hero-bottom { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; margin-top: 2.4rem; }
.hero-bottom p { margin: 0; color: white; font-weight: 650; font-size: clamp(.95rem, 1.5vw, 1.24rem); line-height: 1.55; }
.circle-button { width: 7.4rem; height: 7.4rem; border-radius: 50%; border: 1px solid var(--yellow); color: var(--yellow); background: transparent; display: grid; place-content: center; gap: .5rem; cursor: pointer; transition: color .25s, background .25s, transform .25s; }
.circle-button span { font-size: .75rem; font-weight: 800; }
.circle-button b { font-size: 1.45rem; }
.circle-button:hover { background: var(--yellow); color: var(--black); transform: rotate(-8deg); }
.ticker { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; border-top: 1px solid var(--yellow); border-bottom: 1px solid var(--yellow); padding: .65rem 0 .55rem; font-size: .8rem; font-weight: 850; letter-spacing: .14em; white-space: nowrap; }
.ticker div { width: max-content; animation: ticker 24s linear infinite; }
@keyframes ticker { to { transform: translateX(-50%); } }

.books-section { padding: 8rem 3vw 9rem; background: var(--paper); }
.section-heading { display: grid; grid-template-columns: 1fr 2fr 1.25fr; align-items: end; gap: 2rem; padding-bottom: 2.2rem; border-bottom: 1px solid var(--black); }
.section-heading > p:first-child { align-self: start; margin: .5rem 0 0; font-size: .7rem; font-weight: 850; letter-spacing: .12em; }
.section-heading h2 { margin: 0; font-size: clamp(3.4rem, 7.5vw, 8rem); line-height: 1.08; letter-spacing: -.085em; font-weight: 950; }
.section-copy { margin: 0; font-size: .95rem; line-height: 1.7; max-width: 28rem; }
.collection-tabs { display: flex; gap: 2rem; margin-top: 2rem; border-bottom: 1px solid var(--black); }
.collection-tab { position: relative; padding: 0 0 .8rem; border: 0; background: transparent; color: #77736a; font-size: .78rem; font-weight: 850; cursor: pointer; }
.collection-tab span { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; margin-left: .3rem; border: 1px solid currentColor; border-radius: 50%; font-size: .58rem; }
.collection-tab::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 3px; background: var(--black); transition: width .25s; }
.collection-tab.active { color: var(--black); }
.collection-tab.active::after { width: 100%; }
.collection-panel[hidden] { display: none; }
.book-filter { display: flex; gap: .5rem; padding: 1.5rem 0 2rem; }
.book-filter button { border: 1px solid var(--black); background: transparent; border-radius: 999px; padding: .55rem 1.1rem; font-size: .72rem; font-weight: 780; cursor: pointer; transition: .2s; }
.book-filter button.active, .book-filter button:hover { background: var(--black); color: white; }
.book-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.book-card { min-height: 37rem; position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 1.4rem; border: 1px solid var(--black); cursor: pointer; transition: transform .3s, opacity .3s; }
.book-card:hover, .book-card:focus-visible { transform: translateY(-.65rem) rotate(-.4deg); outline: 3px solid var(--black); outline-offset: 3px; }
.book-card.is-hidden { display: none; }
.book-card.yellow { background: var(--yellow); }
.book-card.blue { background: var(--blue); color: white; }
.book-card.pink { background: var(--pink); }
.book-index { display: flex; justify-content: space-between; font-size: .65rem; font-weight: 850; letter-spacing: .14em; }
.book-index::after { content: "●"; }
.book-cover { flex: 1; min-height: 18rem; margin: 1.7rem 0; display: grid; place-items: center; perspective: 900px; }
.book-cover::after { content: ""; position: absolute; width: 48%; height: 1.2rem; margin-top: 15.5rem; border-radius: 50%; background: rgba(0,0,0,.28); filter: blur(10px); transform: rotate(-2deg); }
.book-cover img { position: relative; z-index: 1; display: block; width: auto; height: min(18.5rem, 43vh); max-width: 76%; object-fit: contain; box-shadow: -13px 18px 0 rgba(16,16,15,.16), 0 2rem 3rem rgba(16,16,15,.28); transform: rotate(-2.5deg) rotateY(3deg); transition: transform .35s ease, box-shadow .35s ease; }
.book-card:nth-child(2) .book-cover img { transform: rotate(2deg) rotateY(-3deg); }
.book-card:nth-child(3) .book-cover img { transform: rotate(-1deg) rotateY(3deg); }
.book-card:hover .book-cover img { transform: rotate(0) rotateY(0) translateY(-.45rem) scale(1.025); box-shadow: -8px 14px 0 rgba(16,16,15,.12), 0 2.5rem 3.5rem rgba(16,16,15,.35); }
.square-cover img { width: min(16.5rem, 74%); height: auto; }
.book-meta p { margin: 0 0 .7rem; font-size: .72rem; font-weight: 850; }
.book-meta h3 { margin: 0; font-size: clamp(2.3rem, 3.4vw, 4.6rem); line-height: .9; letter-spacing: -.07em; font-weight: 950; }
.book-meta span { display: block; margin-top: 1.1rem; padding-top: .8rem; border-top: 1px solid currentColor; font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.book-open { position: absolute; top: 3rem; right: 1.4rem; background: none; border: 0; font-size: .7rem; font-weight: 850; opacity: 0; transform: translateY(5px); transition: .2s; }
.book-card:hover .book-open { opacity: 1; transform: none; }
.swipe-hint { display: none; }

.archive-panel { padding-top: 1.5rem; }
.archive-intro { display: flex; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.archive-intro p { margin: 0; max-width: 39rem; font-size: .72rem; line-height: 1.75; }
.archive-intro p:last-child { color: #77736a; text-align: right; }
.archive-intro span { display: inline-block; margin-right: .45rem; padding: .25rem .45rem; background: var(--black); color: var(--yellow); font-size: .58rem; font-weight: 900; letter-spacing: .1em; }
.archive-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(18rem, .7fr); gap: 1.2rem; align-items: stretch; }
.archive-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem .75rem; padding: 1.2rem 1.2rem 1.7rem; border: 1px solid var(--black); background: linear-gradient(#292621 0 48%, #151412 48% 52%, #292621 52% 96%, #0c0c0b 96%); box-shadow: inset 0 -1rem 0 #0c0c0b; }
.archive-card { min-height: 22rem; padding: .75rem; display: flex; flex-direction: column; align-items: stretch; text-align: left; border: 1px solid rgba(255,255,255,.26); background: #ece8dc; color: var(--black); cursor: pointer; transition: transform .25s, box-shadow .25s; }
.archive-card:hover, .archive-card:focus-visible, .archive-card.active { transform: translateY(-.38rem); box-shadow: .42rem .42rem 0 var(--yellow); outline: 2px solid var(--yellow); outline-offset: 2px; }
.archive-sequence { padding-bottom: .55rem; border-bottom: 1px solid currentColor; font-size: .56rem; font-weight: 900; letter-spacing: .12em; }
.archive-cover { flex: 1; display: grid; place-items: center; min-height: 12.5rem; padding: .8rem .35rem; }
.archive-cover img { display: block; width: auto; height: 12.7rem; max-width: 100%; object-fit: contain; box-shadow: -.35rem .45rem 0 rgba(16,16,15,.18), 0 1rem 1.7rem rgba(16,16,15,.24); transition: transform .25s; }
.archive-card:hover .archive-cover img, .archive-card.active .archive-cover img { transform: translateY(-.2rem) rotate(-1deg); }
.archive-caption { display: flex; flex-direction: column; min-height: 5rem; padding-top: .65rem; border-top: 1px solid currentColor; }
.archive-card b { font-size: clamp(.95rem, 1.35vw, 1.25rem); line-height: 1.08; letter-spacing: -.045em; }
.archive-card small { margin-top: .35rem; font-size: .65rem; font-weight: 750; }
.archive-card i { margin-top: auto; padding-top: .55rem; font-size: .55rem; font-style: normal; font-weight: 800; letter-spacing: .08em; }
.archive-highlight { min-height: 100%; padding: 1.5rem; display: grid; grid-template-rows: auto 1fr; gap: 1.3rem; background: var(--black); color: white; }
.archive-highlight figure { min-height: 20rem; margin: 0; display: grid; place-items: center; padding: 1.2rem; border: 1px solid rgba(255,255,255,.18); background: #242421; }
.archive-selected-cover { display: block; width: auto; height: min(25rem, 38vw); max-width: 100%; object-fit: contain; box-shadow: -.65rem .8rem 0 var(--yellow), 0 1.8rem 3rem rgba(0,0,0,.5); }
.archive-detail { display: flex; flex-direction: column; }
.archive-detail > span { color: var(--yellow); font-size: .58rem; font-weight: 900; letter-spacing: .12em; }
.archive-selected-author { margin: 1.6rem 0 .45rem; color: #aaa; font-size: .72rem; }
.archive-highlight h3 { margin: 0; font-size: clamp(2rem, 3.6vw, 4.2rem); line-height: .9; letter-spacing: -.07em; }
.archive-highlight blockquote { margin: 1.8rem 0; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.3); color: var(--yellow); font-size: 1rem; font-weight: 730; line-height: 1.55; }
.archive-memory { margin-bottom: 1.4rem; padding: 1rem; background: #f1eee6; color: var(--black); }
.archive-memory > span { display: block; font-size: .55rem; font-weight: 900; letter-spacing: .1em; }
.archive-selected-summary { margin: 1rem 0; font-size: .78rem; line-height: 1.8; word-break: keep-all; }
.archive-selected-quote { display: block; padding-top: .85rem; border-top: 1px solid rgba(16,16,15,.25); font-size: .85rem; line-height: 1.72; }
.archive-buy { min-height: 3.2rem; margin-bottom: 1rem; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--yellow); color: var(--yellow); font-size: .72rem; font-weight: 850; transition: background .2s, color .2s; }
.archive-buy:hover, .archive-buy:focus-visible { background: var(--yellow); color: var(--black); outline: 0; }
.archive-highlight small { margin-top: auto; color: #777; font-size: .6rem; }
.archive-inline-reviews { margin-bottom: 1.4rem; padding: 1rem; border: 1px solid rgba(23,53,46,.11); border-radius: .8rem; background: linear-gradient(145deg, rgba(224,245,238,.9), rgba(255,255,255,.74)); }
.inline-review-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.inline-review-heading > span:first-child { font-size: .55rem; font-weight: 900; letter-spacing: .11em; }
.review-count { color: #2d8c73; font-size: .55rem; font-weight: 900; letter-spacing: .1em; }
.archive-inline-reviews .review-text { min-height: 7.5rem; margin: 1.15rem 0 .9rem; padding: 0; display: flex; align-items: center; border: 0; color: var(--black); font-size: clamp(1.05rem, 1.6vw, 1.4rem); font-weight: 760; line-height: 1.58; letter-spacing: -.035em; word-break: keep-all; opacity: 1; transform: none; transition: opacity .32s ease, transform .32s ease; }
.review-text.is-changing { opacity: 0; }
.review-text.is-changing.to-left { transform: translateX(-1rem); }
.review-text.is-changing.to-right { transform: translateX(1rem); }
.review-by { margin: 0; color: #70847e; font-size: .68rem; }
.review-controls { margin-top: 1rem; display: grid; grid-template-columns: 2.4rem 1fr 2.4rem; align-items: center; gap: .7rem; }
.review-dots { display: flex; justify-content: center; gap: .45rem; }
.review-dots button { width: .65rem; height: .65rem; padding: 0; border: 1px solid #4f9c87; border-radius: 50%; background: transparent; cursor: pointer; transition: width .22s, background .22s; }
.review-dots button.active { width: 2rem; border-radius: 999px; background: #4f9c87; }
.review-dots button:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.review-arrow { width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid rgba(23,53,46,.28); border-radius: 50%; background: rgba(255,255,255,.62); color: var(--black); font-size: 1rem; cursor: pointer; transition: transform .2s, background .2s; }
.review-arrow:hover, .review-arrow:focus-visible { background: #4f9c87; color: white; transform: scale(1.06); outline: 0; }

.club-section { display: grid; grid-template-columns: 1fr 1fr; align-items: start; background: var(--black); color: white; }
.club-poster { position: sticky; top: 0; overflow: hidden; min-height: 100svh; padding: 2rem; background: var(--yellow); color: var(--black); border-right: 1px solid rgba(255,255,255,.2); }
.poster-top { display: flex; justify-content: space-between; font-size: .68rem; font-weight: 900; letter-spacing: .1em; border-bottom: 1px solid var(--black); padding-bottom: 1rem; }
.club-poster h2 { position: relative; z-index: 2; margin: 2.2rem 0 0; font-size: clamp(3rem, 5.7vw, 6.6rem); line-height: 1.12; letter-spacing: -.08em; font-weight: 950; }
.club-poster h2 em { color: transparent; -webkit-text-stroke: 2px var(--black); font-style: normal; }
.poster-orbit { position: absolute; right: -9rem; bottom: -9rem; width: 37rem; height: 37rem; border: 2px solid var(--black); border-radius: 50%; display: grid; place-items: center; }
.poster-orbit span { font-size: 16rem; font-weight: 950; }
.poster-orbit i { position: absolute; left: 50%; top: 50%; width: 1.1rem; height: 1.1rem; background: var(--black); border-radius: 50%; transform-origin: 0 0; }
.poster-orbit i:nth-of-type(1) { transform: rotate(20deg) translateX(18.5rem); }
.poster-orbit i:nth-of-type(2) { transform: rotate(150deg) translateX(18.5rem); }
.poster-orbit i:nth-of-type(3) { transform: rotate(260deg) translateX(18.5rem); }
.club-info { padding: 7rem 5vw; display: flex; flex-direction: column; background: radial-gradient(circle at 90% 8%, rgba(244,217,0,.13), transparent 24rem), var(--black); }
.eyebrow.dark { color: var(--yellow); }
.club-info h3 { margin: .6rem 0 2.2rem; font-size: clamp(2.5rem, 4.5vw, 5rem); line-height: 1.16; letter-spacing: -.07em; }
.round-intro-card { margin-bottom: 1rem; padding: 1.7rem; background: var(--paper); color: var(--black); border-left: .65rem solid var(--yellow); }
.round-intro-card > span { display: block; margin-bottom: 1.25rem; font-size: .62rem; font-weight: 900; letter-spacing: .12em; }
.club-lead { margin: 0 0 1.2rem; max-width: 41rem; color: #403f3a; font-size: 1rem; line-height: 1.95; word-break: keep-all; }
.club-lead.strong { margin-bottom: 0; color: var(--black); font-weight: 780; }
.audience-box { margin: 0 0 4.5rem; padding: 1.7rem; border: 0; background: #b9caf8; color: var(--black); }
.audience-box > span, .takeaway-heading > span { color: inherit; font-size: .65rem; font-weight: 900; letter-spacing: .12em; }
.audience-box ul { margin: 1.2rem 0 0; padding: 0; list-style: none; }
.audience-box li { position: relative; padding: .85rem 0 .85rem 1.45rem; border-top: 1px solid rgba(16,16,15,.25); font-size: .88rem; font-weight: 680; line-height: 1.5; }
.audience-box li::before { content: "●"; position: absolute; left: 0; top: .96rem; color: var(--blue); font-size: .5rem; }
.takeaway-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }
.takeaway-heading h4 { margin: 0; font-size: clamp(1.8rem, 3vw, 3rem); letter-spacing: -.06em; }
.takeaway-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.takeaway-grid div { min-height: 13rem; padding: 1.1rem; display: flex; flex-direction: column; background: var(--yellow); color: var(--black); }
.takeaway-grid div:nth-child(2) { background: var(--blue); color: white; }
.takeaway-grid div:nth-child(3) { background: var(--pink); color: var(--black); }
.takeaway-grid b { color: inherit; font-size: .62rem; }
.takeaway-grid strong { margin-top: auto; font-size: 1rem; }
.takeaway-grid p { margin: .6rem 0 0; color: inherit; font-size: .72rem; line-height: 1.55; }
.club-info blockquote { margin: 4.5rem 0; padding: 1.8rem; background: var(--yellow); color: var(--black); font-size: clamp(2rem, 3.8vw, 4rem); font-weight: 900; line-height: 1.03; letter-spacing: -.06em; }
.meeting-label { margin-top: 0; }
.meeting-status { padding: 1.5rem; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.045); }
.meeting-status > span { color: var(--yellow); font-size: .65rem; font-weight: 900; letter-spacing: .12em; }
.meeting-status strong { display: block; margin: 1.5rem 0 .7rem; font-size: clamp(1.65rem, 2.8vw, 2.8rem); line-height: 1.08; letter-spacing: -.05em; }
.meeting-status p { margin: 0; color: #aaa; font-size: .72rem; line-height: 1.55; }
.join-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; list-style: none; padding: 0; margin: 2.5rem 0; background: rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.25); }
.join-steps li { padding: 1rem; background: var(--black); }
.join-steps b { color: var(--yellow); font-size: .68rem; }
.join-steps span { display: block; margin-top: 1.5rem; font-size: .78rem; line-height: 1.45; }
.primary-button, .secondary-button { border: 1px solid var(--yellow); min-height: 3.6rem; padding: 0 1.2rem; font-size: .78rem; font-weight: 850; cursor: pointer; }
.primary-button { display: flex; align-items: center; justify-content: space-between; background: var(--yellow); color: var(--black); }
.primary-button span { transition: transform .2s; }
.primary-button:hover span { transform: translate(3px,-3px); }
.secondary-button { background: transparent; color: inherit; }

footer { min-height: 9rem; padding: 2rem 3vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; background: var(--black); color: white; border-top: 1px solid rgba(255,255,255,.2); }
.footer-mark { font-size: 1.5rem; }
footer p { margin: 0; font-size: .65rem; font-weight: 800; letter-spacing: .12em; }
footer p:last-child { text-align: right; color: #888; }

dialog { width: min(92vw, 42rem); max-height: 90svh; padding: 3.5rem; border: 0; color: var(--black); background: var(--yellow); box-shadow: 0 2rem 8rem rgba(0,0,0,.5); }
dialog::backdrop { background: rgba(0,0,0,.8); backdrop-filter: blur(7px); }
dialog[open] { animation: dialog-in .28s ease-out; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(2rem) rotate(1deg); } }
.dialog-close { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border: 1px solid var(--black); border-radius: 50%; background: transparent; font-size: 1.4rem; cursor: pointer; }
.dialog-number { font-size: .68rem; font-weight: 850; letter-spacing: .12em; }
.dialog-author { margin: 3rem 0 .5rem; font-size: .76rem; font-weight: 800; }
dialog h2 { margin: 0; font-size: clamp(3rem, 7vw, 5.4rem); line-height: .87; letter-spacing: -.08em; }
.dialog-intro { font-size: .96rem; line-height: 1.7; margin: 2rem 0; }
.question-box { border-top: 1px solid var(--black); border-bottom: 1px solid var(--black); padding: 1.4rem 0; }
.question-box span { font-size: .62rem; font-weight: 900; letter-spacing: .12em; }
.question-box p { margin: .7rem 0 0; font-size: 1.2rem; line-height: 1.45; font-weight: 750; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 2rem; }
.dialog-buy, .dialog-next { min-height: 3.6rem; display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; border: 1px solid var(--black); font-size: .74rem; font-weight: 850; cursor: pointer; }
.dialog-buy { background: transparent; color: var(--black); }
.dialog-next { background: var(--black); color: var(--yellow); }

.join-dialog { background: var(--paper); }
.join-dialog h2 { margin-top: 2.5rem; }
.join-progress { height: 3px; background: #d5d1c7; margin-right: 4rem; }
.join-progress span { display: block; width: 50%; height: 100%; background: var(--black); transition: width .3s; }
.join-dialog[data-current="2"] .join-progress span { width: 100%; }
.join-panel > p { margin: 2rem 0; font-size: 1rem; line-height: 1.65; }
.join-panel ul { margin: 0 0 2rem; padding: 1.3rem 1.3rem 1.3rem 2.4rem; border: 1px solid var(--black); font-size: .82rem; line-height: 1.8; }
.join-dialog .primary-button { width: 100%; border-color: var(--black); }
.ready-card { margin: 2rem 0; padding: 1.5rem; background: var(--yellow); border: 1px solid var(--black); }
.ready-card span, .ready-card small { display: block; font-size: .68rem; font-weight: 750; }
.ready-card strong { display: block; margin: 1.5rem 0 .4rem; font-size: 1.8rem; letter-spacing: -.05em; }
.join-panel .secondary-button { width: 100%; margin-bottom: .5rem; color: var(--black); border-color: var(--black); }

.reveal { opacity: 0; transform: translateY(1.6rem); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Soft mint concept inspired by the supplied reference image. */
:root {
  --yellow: #65cdb0;
  --black: #17352e;
  --paper: #fbfcfa;
  --blue: #dcefeb;
  --pink: #f3e7e6;
  --line: rgba(23,53,46,.17);
}
body { background: var(--paper); color: var(--black); }
.site-header { color: var(--black); border-bottom-color: rgba(23,53,46,.1); background: rgba(251,252,250,.72); backdrop-filter: blur(18px); mix-blend-mode: normal; }
.wordmark span { color: #55bfa2; }
.menu-cta { padding: .65rem 1rem; border: 1px solid rgba(23,53,46,.2); border-radius: 999px; background: rgba(255,255,255,.5); }
.hero { color: var(--black); background: radial-gradient(circle at 52% 42%, rgba(80,203,171,.72) 0, rgba(115,215,188,.45) 13%, rgba(186,233,220,.28) 25%, rgba(251,252,250,0) 46%), #fbfcfa; }
.hero::before { content: ""; position: absolute; width: 42vw; height: 42vw; left: 29%; top: 19%; border-radius: 50%; background: rgba(83,202,171,.3); filter: blur(70px); pointer-events: none; }
.hero-noise { opacity: .035; }
.hero-title { font-weight: 720; }
.hero-title .outline { -webkit-text-stroke-color: #58bfa3; }
.hero-bottom p { color: #31564d; font-weight: 560; }
.circle-button { border-color: #3f9f85; color: var(--black); background: rgba(255,255,255,.38); backdrop-filter: blur(12px); }
.circle-button:hover { background: #4fbf9f; color: white; }
.ticker { color: #35685b; border-color: rgba(23,53,46,.2); }

.books-section { background: linear-gradient(180deg, #fbfcfa 0%, #f2f9f6 55%, #fbfcfa 100%); }
.section-heading { border-color: rgba(23,53,46,.3); }
.section-heading h2 { font-weight: 720; }
.collection-tabs { border-color: rgba(23,53,46,.2); }
.collection-tab.active { color: var(--black); }
.collection-tab::after { background: #4fbf9f; }
.book-filter button { border-color: rgba(23,53,46,.25); background: rgba(255,255,255,.52); }
.book-filter button.active, .book-filter button:hover { background: var(--black); color: white; }
.book-grid { gap: 1.5rem; }
.book-card { min-height: 38rem; border: 1px solid rgba(23,53,46,.14); border-radius: 1.5rem; box-shadow: 0 1.8rem 5rem rgba(38,105,87,.09); }
.book-card.yellow { background: #f8efbd; }
.book-card.blue { background: #e7e3fb; color: var(--black); }
.book-card.pink { background: #f8dcd7; }
.book-card:hover, .book-card:focus-visible { outline-color: #70cdb3; box-shadow: 0 2rem 5rem rgba(38,105,87,.16); }
.book-cover img { box-shadow: 0 1.6rem 3rem rgba(23,53,46,.19); }

.archive-intro span { background: #d8f1e9; color: var(--black); border-radius: 999px; }
.archive-grid { padding: 1rem; border-color: rgba(23,53,46,.12); border-radius: 1.4rem; background: rgba(255,255,255,.66); box-shadow: 0 1.5rem 5rem rgba(54,118,100,.07); }
.archive-card { border-color: rgba(23,53,46,.12); border-radius: 1rem; background: #f7faf8; }
.archive-card:hover, .archive-card:focus-visible, .archive-card.active { outline-color: #6acaae; box-shadow: .4rem .4rem 0 #bdeadd; }
.archive-cover img { box-shadow: 0 1rem 2rem rgba(23,53,46,.17); }
.archive-highlight { border: 1px solid rgba(23,53,46,.12); border-radius: 1.4rem; background: linear-gradient(150deg, rgba(206,241,231,.92), rgba(252,253,251,.96) 62%); color: var(--black); box-shadow: 0 1.5rem 5rem rgba(54,118,100,.08); }
.archive-highlight figure { border-color: rgba(23,53,46,.1); border-radius: 1rem; background: rgba(255,255,255,.56); }
.archive-selected-cover { box-shadow: -.55rem .7rem 0 #b9e9dc, 0 1.5rem 3rem rgba(23,53,46,.18); }
.archive-detail > span, .archive-highlight blockquote { color: #277b66; }
.archive-selected-author { color: #688078; }
.archive-highlight blockquote { border-color: rgba(23,53,46,.16); }
.archive-memory { border: 1px solid rgba(23,53,46,.1); border-radius: .8rem; background: rgba(255,255,255,.72); }
.archive-buy { border-color: var(--black); border-radius: 999px; color: var(--black); }
.archive-buy:hover, .archive-buy:focus-visible { background: var(--black); color: white; }

.club-section { background: #f7fbf9; color: var(--black); }
.club-poster { background: radial-gradient(circle at 55% 65%, rgba(72,197,163,.8), rgba(184,232,219,.62) 27%, rgba(251,252,250,.7) 55%), #f8fbf9; color: var(--black); border-color: rgba(23,53,46,.1); }
.poster-top { border-color: rgba(23,53,46,.22); }
.club-poster h2 { font-weight: 720; }
.club-poster h2 em { -webkit-text-stroke: 1px #479b84; }
.poster-orbit { border: 0; background: rgba(76,196,163,.24); filter: blur(20px); }
.poster-orbit span { color: rgba(23,53,46,.48); }
.poster-orbit i { display: none; }
.club-info { background: radial-gradient(circle at 93% 6%, rgba(100,205,176,.22), transparent 20rem), #fbfcfa; }
.eyebrow.dark { color: #2d8c73; }
.club-info h3 { font-weight: 720; }
.round-intro-card { border-left: 0; border-radius: 1.2rem; background: rgba(229,244,239,.9); box-shadow: inset 0 0 0 1px rgba(23,53,46,.08); }
.audience-box { border-radius: 1.2rem; background: #edf6f3; }
.audience-box li { border-color: rgba(23,53,46,.13); }
.audience-box li::before { color: #4fbea0; }
.takeaway-grid { gap: .75rem; }
.takeaway-grid div, .takeaway-grid div:nth-child(2), .takeaway-grid div:nth-child(3) { border: 1px solid rgba(23,53,46,.09); border-radius: 1rem; color: var(--black); }
.takeaway-grid div { background: #dff4ee; }
.takeaway-grid div:nth-child(2) { background: #eef4f2; }
.takeaway-grid div:nth-child(3) { background: #f5efeb; }
.club-info blockquote { border-radius: 1.2rem; background: linear-gradient(135deg, #c9eee3, #eef8f5); color: var(--black); }
.meeting-block { margin-top: 0; padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid #d1caef; border-radius: 1.4rem; background: linear-gradient(145deg, #e7e2f9, #f4f1fc); box-shadow: 0 1.5rem 4rem rgba(91,77,155,.11); }
.meeting-block .meeting-label { margin: 0 0 1rem; color: #6254ae; }
.meeting-status { border-color: rgba(23,53,46,.14); border-radius: 1rem; background: white; }
.meeting-status > span, .join-steps b { color: #2d8c73; }
.meeting-status p { color: #688078; }
.meeting-block .join-steps { gap: .7rem; margin: 1rem 0; border: 0; background: transparent; }
.join-steps li { border: 1px solid rgba(23,53,46,.1); border-radius: .9rem; background: white; }
.primary-button { border-color: var(--black); border-radius: 999px; background: var(--black); color: white; }
.meeting-join-button { width: 100%; min-height: 4.35rem; justify-content: center; padding: 0 1.5rem; font-size: 1rem; letter-spacing: -.01em; }

footer { background: #eaf5f1; color: var(--black); border-color: rgba(23,53,46,.1); }
footer p:last-child { color: #6d827c; }
dialog, .join-dialog { border-radius: 1.5rem; background: #f4faf7; box-shadow: 0 2rem 8rem rgba(23,53,46,.25); }
dialog::backdrop { background: rgba(20,48,41,.42); }
.dialog-next { background: var(--black); color: white; }
.ready-card { border-color: rgba(23,53,46,.15); border-radius: 1rem; background: #d9f2eb; }

@media (max-width: 820px) {
  .site-header { height: 62px; padding: 0 1rem; grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .menu-cta { grid-column: 2; }
  .hero { min-height: 90svh; padding: 8rem 1rem 5.4rem; }
  .hero-title { font-size: clamp(3.8rem, 21vw, 7rem); line-height: .78; }
  .hero-title .outline { padding-left: 0; }
  .hero-bottom { margin-top: 2.5rem; }
  .circle-button { width: 5.6rem; height: 5.6rem; }
  .books-section { padding: 5.5rem 1rem 6rem; overflow: hidden; }
  .section-heading { grid-template-columns: 1fr; gap: 1rem; }
  .section-heading h2 { font-size: 4.4rem; }
  .section-copy { max-width: 24rem; }
  .book-filter { overflow-x: auto; }
  .book-grid { display: flex; gap: .85rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem 0 1rem; margin-right: -1rem; scrollbar-width: none; }
  .book-grid::-webkit-scrollbar { display: none; }
  .book-card { flex: 0 0 min(82vw, 23rem); min-height: 31rem; scroll-snap-align: start; }
  .book-cover { min-height: 16rem; }
  .book-cover img { height: 16.5rem; max-width: 72%; }
  .square-cover img { width: 15rem; height: auto; }
  .swipe-hint { display: block; margin: .4rem 0 0; font-size: .65rem; font-weight: 750; letter-spacing: .08em; }
  .archive-intro { display: block; }
  .archive-intro p:last-child { margin-top: .8rem; text-align: left; }
  .archive-layout { grid-template-columns: 1fr; }
  .archive-grid { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: -1rem; padding: 1rem 1rem 1.5rem; scrollbar-width: none; }
  .archive-grid::-webkit-scrollbar { display: none; }
  .archive-card { flex: 0 0 min(66vw, 16rem); min-height: 22rem; scroll-snap-align: start; }
  .archive-cover img { height: 13.2rem; }
  .archive-highlight { min-height: 22rem; grid-template-columns: minmax(7.5rem, .65fr) 1fr; grid-template-rows: 1fr; padding: 1rem; }
  .archive-highlight figure { min-height: 18rem; padding: .8rem; }
  .archive-selected-cover { height: auto; width: 100%; max-height: 18rem; }
  .archive-selected-author { margin-top: 1rem; }
  .archive-highlight h3 { font-size: 2rem; }
  .archive-highlight blockquote { margin: 1rem 0; font-size: .82rem; }
  .club-section { grid-template-columns: 1fr; }
  .club-poster { position: relative; min-height: 36rem; padding: 1.2rem; border-right: 0; }
  .poster-orbit { width: 28rem; height: 28rem; right: -9rem; bottom: -9rem; }
  .poster-orbit span { font-size: 12rem; }
  .poster-orbit i:nth-of-type(1) { transform: rotate(20deg) translateX(14rem); }
  .poster-orbit i:nth-of-type(2) { transform: rotate(150deg) translateX(14rem); }
  .poster-orbit i:nth-of-type(3) { transform: rotate(260deg) translateX(14rem); }
  .club-info { padding: 5rem 1rem; }
  .takeaway-grid { grid-template-columns: 1fr; }
  .takeaway-grid div { min-height: 8.5rem; }
  .audience-box { margin-bottom: 3.5rem; }
  .club-info blockquote { margin: 3.5rem 0; }
  .meeting-block { padding: 1rem; }
  .meeting-join-button { min-height: 4.1rem; font-size: .95rem; }
  .join-steps li { padding: .8rem; }
  footer { grid-template-columns: 1fr; gap: 1rem; padding: 2.5rem 1rem; }
  footer p:last-child { text-align: left; }
  dialog { padding: 3.5rem 1.3rem 1.5rem; }
  .dialog-actions { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .archive-highlight { grid-template-columns: 1fr; }
  .archive-highlight figure { min-height: 17rem; }
  .archive-selected-cover { width: auto; height: 16rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}