/* Focused feature pages (/features/<room>/): one room of Alhora, explained in depth.
   Shared by World, Bookshop, Guild, Proof of Authorship, Working together and
   Make it yours. Each page sets --fp-accent and its own hero illustration. */

.fp { --fp-accent: var(--terracotta); --fp-accent-night: var(--terracotta-on-night); }

/* ---------- Hero ---------- */
.fp-hero { position: relative; overflow: hidden; padding-block: calc(var(--section) * .9) var(--section); background: var(--night); color: var(--on-night); isolation: isolate; }
.fp-hero::before { content: ''; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--fp-accent-night) 26%, transparent), transparent 70%); }
.fp-hero__grid { display: grid; gap: var(--s10); align-items: center; }
@media (min-width: 1000px) { .fp-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s12); } }
.fp-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 var(--s5); font: 500 var(--t-micro)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-night-muted); }
.fp-crumb a { color: var(--on-night-muted); text-decoration: none; }
.fp-crumb a:hover { color: var(--on-night); }
.fp-crumb b { font-weight: 500; color: var(--fp-accent-night); }
.fp-hero h1 { font-size: clamp(2.8rem, 1.6rem + 5vw, 6rem); font-weight: 300; line-height: .98; letter-spacing: -.035em; }
.fp-hero h1 em { color: var(--fp-accent-night); }
.fp-hero .lede { margin-top: var(--s5); max-width: 36rem; color: var(--on-night-muted); }
.fp-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); }
.fp-hero__facts { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s8) 0 0; padding: 0; list-style: none; }
.fp-hero__facts li { padding: .45rem .8rem; border-radius: var(--pill); box-shadow: inset 0 0 0 1px var(--rule-night); font-size: .8125rem; color: var(--on-night); }
.fp-hero__facts b { color: var(--fp-accent-night); font-weight: 500; }
.fp-art { position: relative; margin: 0; }

/* ---------- Chapter index (sticky) ---------- */
.fp-index { position: sticky; top: 64px; z-index: 40; background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.fp-index .wrap { display: flex; align-items: center; gap: var(--s2); overflow-x: auto; padding-block: .55rem; scrollbar-width: none; }
.fp-index a { flex: none; padding: .45rem .8rem; border-radius: var(--pill); font-size: .875rem; color: var(--fg-muted); text-decoration: none; white-space: nowrap; }
.fp-index a .num { color: var(--fp-accent); margin-right: .3rem; }
.fp-index a.is-current { background: var(--ink); color: var(--paper); }
.fp-index a.is-current .num { color: var(--fp-accent-night); }
.fp-index__cta { margin-left: auto; background: var(--terracotta); color: var(--paper) !important; font-weight: 500; }

/* ---------- Sections ---------- */
.fp-sec { padding-block: var(--section); scroll-margin-top: 110px; }
.fp-sec--warm { background: var(--paper-warm); }
.fp-sec--night { background: var(--night); color: var(--on-night); }
.fp-sec__head { display: grid; gap: var(--s4); max-width: 48rem; margin-bottom: var(--s12); }
.fp-sec__num { margin: 0; font: 500 var(--t-micro)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fp-accent); }
.fp-sec--night .fp-sec__num { color: var(--fp-accent-night); }
.fp-sec__head h2 { font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); font-weight: 300; line-height: 1.02; letter-spacing: -.03em; }
.fp-sec__head h2 em { color: var(--fp-accent); }
.fp-sec--night .fp-sec__head h2 em { color: var(--fp-accent-night); }
.fp-sec__head .lede { color: var(--fg-2); }
.fp-sec--night .fp-sec__head .lede { color: var(--on-night-muted); }

/* Split: copy beside an illustration */
.fp-split { display: grid; gap: var(--s10); align-items: center; }
@media (min-width: 1000px) { .fp-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s16); } .fp-split--flip > :first-child { order: 2; } }
.fp-split + .fp-split { margin-top: var(--s16); }
.fp-copy { display: grid; gap: var(--s4); align-content: start; }
.fp-copy h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; }
.fp-copy > p { margin: 0; font-family: var(--serif); font-size: var(--t-prose); line-height: 1.6; color: var(--fg-2); }
.fp-sec--night .fp-copy > p { color: var(--on-night-muted); }
.fp-copy .label { color: var(--fp-accent); }
.fp-sec--night .fp-copy .label { color: var(--fp-accent-night); }

/* Ticks */
.fp-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); font-size: .9375rem; line-height: 1.55; color: var(--fg-2); }
.fp-sec--night .fp-ticks { color: var(--on-night-muted); }
.fp-ticks li { position: relative; padding-left: 1.4rem; }
.fp-ticks li::before { content: ''; position: absolute; left: 1px; top: .5em; width: 8px; height: 4.5px; border: solid var(--fp-accent); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); }
.fp-sec--night .fp-ticks li::before { border-color: var(--fp-accent-night); }
.fp-ticks b { color: var(--fg); font-weight: 600; }
.fp-sec--night .fp-ticks b { color: var(--on-night); }

/* Cards */
.fp-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.fp-cards > li { display: grid; align-content: start; gap: var(--s3); padding: var(--s6); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.fp-sec--night .fp-cards > li { background: rgba(243,236,221,.035); box-shadow: inset 0 0 0 1px var(--rule-night); }
.fp-cards h3 { font-size: 1.35rem; font-weight: 300; line-height: 1.15; }
.fp-cards p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--fg-2); }
.fp-sec--night .fp-cards p { color: var(--on-night-muted); }
.fp-cards__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--fp-accent) 12%, transparent); color: var(--fp-accent); }
.fp-sec--night .fp-cards__icon { background: color-mix(in srgb, var(--fp-accent-night) 16%, transparent); color: var(--fp-accent-night); }
.fp-cards__icon svg { width: 22px; height: 22px; }

/* The app's own words, set as a pull quote */
.fp-said { margin: var(--s16) auto 0; max-width: 54rem; text-align: center; }
.fp-said blockquote { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.8rem); line-height: 1.2; letter-spacing: -.02em; }
.fp-said blockquote::before { content: '“'; color: var(--fp-accent); }
.fp-said blockquote::after { content: '”'; color: var(--fp-accent); }
.fp-sec--night .fp-said blockquote::before, .fp-sec--night .fp-said blockquote::after { color: var(--fp-accent-night); }
.fp-said figcaption { margin-top: var(--s4); font: 500 var(--t-micro)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.fp-sec--night .fp-said figcaption { color: var(--on-night-muted); }

/* Illustration frame */
.fp-ill { position: relative; margin: 0; padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -50px rgba(33,26,18,.5); overflow: hidden; }
.fp-sec--night .fp-ill, .fp-hero .fp-ill { background: rgba(243,236,221,.035); box-shadow: inset 0 0 0 1px var(--rule-night), 0 40px 80px -40px rgba(0,0,0,.7); }
.fp-ill > .fx-tag { top: 14px; left: 14px; }
.fp-ill svg { display: block; width: 100%; height: auto; }

/* Chips */
.fp-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.fp-chips li { padding: .4rem .75rem; border-radius: var(--pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: .8125rem; }
.fp-sec--night .fp-chips li { background: transparent; box-shadow: inset 0 0 0 1px var(--rule-night); color: var(--on-night); }

/* Steps (numbered flow) */
.fp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); counter-reset: fp; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.fp-steps li { position: relative; padding: var(--s6) var(--s5) var(--s5); border-top: 2px solid var(--fp-accent); counter-increment: fp; }
.fp-steps li::before { content: counter(fp, decimal-leading-zero); display: block; margin-bottom: var(--s3); font: 500 .75rem/1 var(--mono); color: var(--fp-accent); }
.fp-steps h3 { font-size: 1.25rem; font-weight: 400; line-height: 1.2; margin-bottom: .4rem; }
.fp-steps p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--fg-2); }
.fp-sec--night .fp-steps li { border-color: var(--fp-accent-night); } .fp-sec--night .fp-steps li::before { color: var(--fp-accent-night); } .fp-sec--night .fp-steps p { color: var(--on-night-muted); }

/* Honest limits */
.fp-limits { margin-top: var(--s12); padding: var(--s6) var(--s8); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.fp-sec--night .fp-limits { background: rgba(243,236,221,.04); }
.fp-limits h3 { font: 600 .8125rem/1.2 var(--sans); letter-spacing: .02em; margin-bottom: var(--s3); }
.fp-limits ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; font-size: .9375rem; line-height: 1.55; color: var(--fg-2); }
.fp-sec--night .fp-limits ul { color: var(--on-night-muted); }

/* ---------- Other rooms + close ---------- */
.fp-next { padding-block: var(--section); background: var(--paper-warm); }
.fp-next h2 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); font-weight: 300; margin-bottom: var(--s8); }
.fp-next__grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.fp-next__grid a { display: grid; gap: var(--s2); min-height: 150px; align-content: end; padding: var(--s6); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--fg); text-decoration: none; transition: transform var(--d-ink) var(--e-settle), box-shadow var(--d-ink); }
.fp-next__grid a:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line), 0 24px 50px -30px rgba(33,26,18,.45); }
.fp-next__grid .label { color: var(--terracotta); }
.fp-next__grid b { font-family: var(--serif); font-weight: 300; font-size: 1.45rem; line-height: 1.15; }
.fp-next__grid .is-all { background: var(--ink); color: var(--paper); box-shadow: none; }
.fp-next__grid .is-all .label { color: var(--terracotta-on-night); }
.fp-close { padding-block: var(--section); background: var(--night); color: var(--on-night); text-align: center; }
.fp-close__inner { display: grid; gap: var(--s5); justify-items: center; }
.fp-close h2 { font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); font-weight: 300; line-height: 1.05; }
.fp-close h2 em { color: var(--fp-accent-night); }
.fp-close p { max-width: 36rem; color: var(--on-night-muted); }
.fp-close__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }
.fp-note { margin-top: var(--s8); font-size: var(--t-small); color: var(--fg-muted); }
.fp-sec--night .fp-note, .fp-hero .fp-note { color: var(--on-night-muted); }

/* Hide the current room from "More rooms" */
.fp--world [data-fp="world"], .fp--together [data-fp="together"], .fp--bookshop [data-fp="bookshop"], .fp--guild [data-fp="guild"], .fp--proof [data-fp="proof"], .fp--yours [data-fp="yours"] { display: none !important; }

/* ================= World ================= */
.fp--world { --fp-accent: #a3542f; --fp-accent-night: #d98a5f; }
.fp-atlas { padding: 0; aspect-ratio: 4 / 3; }
.fp-atlas svg { position: absolute; inset: 0; height: 100%; }
.wm-land { fill: rgba(217,138,95,.10); stroke: rgba(243,236,221,.55); stroke-width: 1.4; }
.wm-river { fill: none; stroke: #7fa8b8; stroke-width: 2; stroke-linecap: round; opacity: .8; }
.wm-peaks path { fill: none; stroke: rgba(243,236,221,.6); stroke-width: 1.3; stroke-linejoin: round; }
.wm-trees circle { fill: rgba(130,170,120,.35); stroke: rgba(170,200,150,.6); }
.wm-road { fill: none; stroke: rgba(217,138,95,.8); stroke-width: 1.4; stroke-dasharray: 2 5; stroke-linecap: round; }
html.motion .wm-road { animation: fx-dash 24s linear infinite; }
.wm-towns rect, .wm-towns circle { fill: #f3ecdd; stroke: #d98a5f; stroke-width: 1.5; }
.wm-towns text { fill: var(--on-night); font: italic 400 14px var(--serif); text-anchor: middle; }
.wm-compass circle { fill: none; stroke: rgba(243,236,221,.3); }
.wm-compass path { fill: rgba(217,138,95,.7); }
.wm-compass text { fill: var(--on-night-muted); font: 500 10px var(--mono); text-anchor: middle; }
.wm-card { position: absolute; right: 5%; bottom: 7%; width: min(56%, 250px); padding: .9rem 1rem; border-radius: 14px; background: rgba(20,15,11,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(217,138,95,.4), 0 20px 40px -20px rgba(0,0,0,.8); }
.wm-card p { margin: 0; }
.wm-card__k { font: 500 .62rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #d98a5f; }
.wm-card__t { margin-top: .35rem !important; font-family: var(--serif); font-size: 1.35rem; color: var(--on-night); }
.wm-card__m { margin-top: .2rem !important; font-size: .72rem; color: var(--on-night-muted); }
.wm-card__s { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem !important; }
.wm-card__s span { padding: .2rem .45rem; border-radius: 6px; background: rgba(243,236,221,.08); font-size: .68rem; color: var(--on-night); }
.wm-system { font-size: .95rem; }
.wm-system__k { margin: 0; font: 500 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fp-accent); }
.wm-system__t { margin: .4rem 0 1.2rem; font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; }
.wm-system dl { margin: 0; display: grid; gap: .6rem; }
.wm-system dl div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding-bottom: .6rem; border-bottom: 1px dashed var(--line); }
.wm-system dt { color: var(--fg-muted); font-size: .85rem; }
.wm-system dd { margin: 0; }
.wm-system__m { display: block; margin-top: .2rem; font: 500 .7rem/1 var(--mono); color: var(--fg-muted); }
.wm-lens__fact { margin: 0 0 1rem; padding: .9rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--fp-accent) 9%, transparent); font-family: var(--serif); font-size: 1.1rem; line-height: 1.4; }
.wm-lens__fact span { display: block; margin-bottom: .3rem; font: 500 .62rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fp-accent); }
.wm-lens ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.wm-lens li { display: grid; grid-template-columns: 7.5rem auto 1fr; align-items: center; gap: .7rem; padding: .55rem .2rem; border-bottom: 1px solid var(--line); font-size: .9rem; }
.wm-lens li span { padding: .25rem .55rem; border-radius: var(--pill); font-size: .74rem; font-weight: 500; }
.wm-lens .is-no { background: rgba(166,58,43,.12); color: #8a3a2c; }
.wm-lens .is-yes { background: rgba(59,107,90,.14); color: #24493c; }
.wm-lens .is-believe { background: rgba(192,138,62,.16); color: #7a5420; }
.wm-lens em { justify-self: end; font-style: normal; font-size: .76rem; color: var(--fg-muted); }
@media (max-width: 480px) { .wm-lens li { grid-template-columns: 1fr auto; } .wm-lens em { grid-column: 1 / -1; justify-self: start; } }
.fp-boards__h { font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); font-weight: 300; line-height: 1.02; letter-spacing: -.03em; }
.fp-boards__h em { color: var(--fp-accent); }
.wm-board { min-height: 340px; background: radial-gradient(circle, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px, var(--surface); }
.wm-board__lines { position: absolute; inset: 0; height: 100% !important; }
.wm-board__lines path { fill: none; stroke: color-mix(in srgb, var(--fp-accent) 60%, transparent); stroke-width: 1.4; stroke-dasharray: 4 4; }
.wm-board__card { position: absolute; z-index: 1; display: grid; gap: .25rem; padding: .7rem .85rem; border-radius: 10px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 14px 30px -18px rgba(33,26,18,.5); font-size: .8rem; }
.wm-board__card b { font-family: var(--serif); font-weight: 400; font-size: 1rem; }
.wm-board__card span { color: var(--fg-muted); }
.wm-board__card--a { left: 8%; top: 16%; transform: rotate(-2deg); }
.wm-board__card--b { right: 8%; top: 12%; width: 44%; transform: rotate(2deg); }
.wm-board__card--b i { display: block; height: 80px; border-radius: 6px; background: linear-gradient(180deg, #2b3b50, #c98a4b 70%, #7a2e24); }
.wm-board__card--c { left: 22%; bottom: 12%; transform: rotate(1.5deg); }
.wm-board__card--d { right: 14%; bottom: 16%; background: var(--ink); color: var(--paper); transform: rotate(-1.5deg); }
.wm-board__card--d span { color: #d98a5f; }
.wm-sw { display: flex; gap: 4px; } .wm-sw i { width: 22px; height: 22px; border-radius: 5px; background: var(--c); }

/* Shared h2 inside split copy */
.fp-h2 { font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); font-weight: 300; line-height: 1.02; letter-spacing: -.03em; }
.fp-h2 em { color: var(--fp-accent); }
.fp-sec--night .fp-h2 em { color: var(--fp-accent-night); }

/* ================= Bookshop ================= */
.fp--bookshop { --fp-accent: #3f6b57; --fp-accent-night: #8cc2a6; }
.bs-front { padding: 46px 18px 18px; }
.bs-window { border-radius: 12px; overflow: hidden; background: #f6f1e6; color: #2a221a; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.bs-window__bar { display: flex; align-items: center; gap: 5px; padding: .5rem .7rem; background: #e9e1d0; }
.bs-window__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(42,34,26,.2); }
.bs-window__bar span { margin-left: .6rem; font: 500 .68rem/1 var(--mono); color: #6e6152; }
.bs-book { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 1.1rem; padding: 1.1rem; align-items: center; }
.bs-book img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); }
.bs-book__info { display: grid; gap: .55rem; align-content: center; }
.bs-book__info p { margin: 0; }
.bs-book__k { font: 500 .62rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #3f6b57; }
.bs-book__t { font-family: var(--serif); font-size: clamp(1.05rem, .9rem + .6vw, 1.45rem); line-height: 1.12; }
.bs-eds { display: grid; gap: .3rem; }
.bs-eds span { display: flex; justify-content: space-between; gap: .5rem; padding: .4rem .55rem; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(42,34,26,.14); font-size: .74rem; }
.bs-eds .is-on { box-shadow: inset 0 0 0 1.5px #3f6b57; }
.bs-eds b { font-weight: 500; }
.bs-btn { display: block; padding: .55rem .7rem; border-radius: 999px; background: #3f6b57; color: #fff; font-size: .76rem; font-weight: 500; text-align: center; }
.bs-cert { display: flex; align-items: center; gap: .4rem; font-size: .68rem; color: #6e6152; }
.bs-cert__seal { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--terracotta); }
.bs-mail__k { margin: 0; font: 500 .64rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fp-accent); }
.bs-mail__s { margin: .6rem 0 1rem; font-weight: 500; font-size: .95rem; }
.bs-mail__body { padding: 1.1rem 1.2rem; border-radius: 10px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--serif); font-size: 1rem; line-height: 1.6; }
.bs-mail__body p { margin: 0 0 .7em; } .bs-mail__body p:last-child { margin: 0; }
.bs-mail__note { color: var(--fp-accent); font-style: italic; }
.bs-mail__foot { display: flex; justify-content: space-between; gap: 1rem; margin: .9rem 0 0; font-size: .75rem; color: var(--fg-muted); }
.bs-site { padding-top: 52px; }
.bs-site__hero { display: flex; align-items: center; gap: 1rem; padding: 1.1rem; border-radius: 12px; background: linear-gradient(120deg, #2a3b33, #3f6b57); color: #f3ecdd; }
.bs-site__hero b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.4rem; }
.bs-site__hero span { font-size: .8rem; opacity: .8; }
.bs-site__face { flex: none; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #e9dcc2, #c98a4b 60%, #7a2e24); box-shadow: 0 0 0 3px rgba(243,236,221,.3); }
.bs-site__row { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0; }
.bs-site__row span { padding: .35rem .7rem; border-radius: var(--pill); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: .78rem; }
.bs-site__row .is-off { opacity: .5; border-style: dashed; }
.bs-site__books { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.bs-site__books img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; box-shadow: 0 10px 22px -12px rgba(33,26,18,.6); }

/* ================= Guild ================= */
.fp--guild { --fp-accent: #7a5a1e; --fp-accent-night: #d6b26a; }
.gd-brief { padding-top: 52px; }
.gd-brief__k { margin: 0; font: 500 .64rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #d6b26a; }
.gd-brief__t { margin: .5rem 0 1.1rem; font-family: var(--serif); font-size: 1.6rem; line-height: 1.15; color: var(--on-night); }
.gd-brief dl { margin: 0; display: grid; gap: .5rem; }
.gd-brief dl div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px dashed var(--rule-night); font-size: .9rem; }
.gd-brief dt { color: var(--on-night-muted); }
.gd-brief dd { margin: 0; color: var(--on-night); text-align: right; }
.gd-brief dd span { margin-left: .4rem; padding: .15rem .4rem; border-radius: 5px; background: rgba(214,178,106,.16); color: #d6b26a; font: 500 .62rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.gd-brief__foot { margin: 1rem 0 0; font-size: .78rem; color: var(--on-night-muted); }
.gd-record__h { margin: 1rem 0 .8rem; font-family: var(--serif); font-size: 1.5rem; }
.gd-record ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.gd-record li { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.gd-record li b { font-weight: 500; }
.gd-record li em { grid-column: 2; font-style: normal; font-size: .8rem; color: var(--fg-muted); }
.gd-record li .num { grid-row: 1 / 3; grid-column: 3; align-self: center; }
.gd-tick { grid-row: 1 / 3; align-self: center; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 35%, transparent); }
.gd-tick.is-on { background: var(--fp-accent); box-shadow: none; }
.gd-record__foot { margin: .9rem 0 0; font-size: .76rem; color: var(--fg-muted); }
.gd-pro { padding-top: 52px; display: grid; gap: .7rem; }
.gd-pro__head { display: flex; align-items: center; gap: .9rem; margin-bottom: .3rem; }
.gd-pro__head b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; }
.gd-pro__head span { font-size: .82rem; color: var(--fg-muted); }
.gd-pro__face { flex: none; width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f1dda8, #b8955a 60%, #7a5a1e); }
.gd-pro__svc { display: grid; grid-template-columns: 1fr auto; gap: .25rem .8rem; padding: .85rem 1rem; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.gd-pro__svc b { font-weight: 500; font-size: .95rem; }
.gd-pro__svc .num { font-size: .85rem; }
.gd-pro__svc em { grid-column: 1 / -1; justify-self: start; padding: .2rem .5rem; border-radius: var(--pill); background: rgba(59,107,90,.12); color: #24493c; font-style: normal; font-size: .72rem; font-weight: 500; }
.wm-card { right: auto; left: 4%; }
.fp-ill:has(> .fx-tag) { padding-top: 58px; }
.fp-atlas { padding: 0 !important; }
@media (min-width: 900px) { .fp-next__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ================= Proof ================= */
.fp--proof { --fp-accent: var(--terracotta); --fp-accent-night: var(--terracotta-on-night); }
.pf-cert { position: relative; padding-top: 40px; }
.pf-ledger__sum { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 10px; background: color-mix(in srgb, var(--fp-accent) 8%, transparent); font-size: .78rem; }
.pf-ledger ol { list-style: none; margin: 0; padding: 0; display: grid; }
.pf-ledger li { position: relative; display: grid; grid-template-columns: 4.6rem 1fr; gap: .1rem .8rem; padding: .7rem 0 .7rem 1rem; border-left: 2px solid color-mix(in srgb, var(--fp-accent) 40%, transparent); }
.pf-ledger li::before { content: ''; position: absolute; left: -6px; top: 1.05rem; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--fp-accent); }
.pf-ledger .num { grid-row: 1 / 3; font-size: .72rem; color: var(--fg-muted); padding-top: .15rem; }
.pf-ledger b { font-weight: 500; font-size: .95rem; }
.pf-ledger em { font-style: normal; font-size: .8rem; color: var(--fg-muted); }

/* ================= Together ================= */
.fp--together { --fp-accent: #3b6b5a; --fp-accent-night: #8cc2a6; }
.tg-session { margin: 0; }
.tg-notes { display: grid; gap: 1rem; }
.tg-note { padding: 1rem 1.1rem; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: .9rem; line-height: 1.5; }
.tg-note p { margin: .35rem 0 0; }
.tg-note__q { margin: 0 !important; padding-left: .7rem; border-left: 3px solid #c08a3e; font-family: var(--serif); font-style: italic; color: var(--fg-2); }
.tg-note b { margin-right: .4rem; font-size: .78rem; color: var(--fp-accent); }
.tg-note__r { padding-left: 1rem; }
.tg-note--b { margin-left: 2rem; }
.tg-rr__k { margin: 0; font: 500 .64rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fp-accent-night); }
.tg-rr__q { margin: .7rem 0 1.2rem; font-family: var(--serif); font-size: 1.2rem; line-height: 1.35; color: var(--on-night); }
.tg-rr__bars { color: var(--on-night); }
.tg-rr__bars i { background: rgba(243,236,221,.12) !important; }
.tg-rr__bars i::before { background: var(--fp-accent-night) !important; }
.tg-rr__foot { margin: 1rem 0 0; font-size: .76rem; color: var(--on-night-muted); }

/* ================= Make it yours ================= */
.fp--yours { --fp-accent: #8a5a9c; --fp-accent-night: #c9a3e0; }
.my-stack { position: relative; margin: 0; min-height: 380px; }
.my-stack > .fx-tag { top: 0; left: 0; }
.my-card { position: absolute; width: min(72%, 360px); padding: 1.3rem 1.4rem; border-radius: 16px; background: var(--bg); color: var(--fg); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.07); }
.my-card b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
.my-card span { display: block; margin: .3rem 0 1rem; font-size: .8rem; opacity: .8; }
.my-card i { display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: currentColor; opacity: .22; }
.my-card i.s { width: 60%; }
.my-card:nth-of-type(1) { left: 0; top: 40px; transform: rotate(-4deg); }
.my-card:nth-of-type(2) { left: 18%; top: 110px; transform: rotate(1deg); }
.my-card:nth-of-type(3) { left: 34%; top: 190px; transform: rotate(4deg); }
html.motion .my-card { transition: transform .6s var(--e-settle); }
html.motion .my-stack:hover .my-card:nth-of-type(1) { transform: rotate(-7deg) translate(-12px, -8px); }
html.motion .my-stack:hover .my-card:nth-of-type(3) { transform: rotate(7deg) translate(12px, 8px); }
.my-themes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.my-themes li { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto 1fr; gap: .15rem .9rem; padding: .9rem; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.my-sw { grid-row: 1 / 3; width: 52px; height: 52px; border-radius: 12px; background: linear-gradient(135deg, var(--bg) 55%, var(--fg) 56%); box-shadow: inset 0 0 0 1px rgba(33,26,18,.12); }
.my-themes b { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; line-height: 1.2; }
.my-themes span:not(.my-sw) { font-size: .8rem; line-height: 1.4; color: var(--fg-muted); }
.my-sound ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.my-sound li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: .8rem; padding: .75rem .9rem; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--rule-night); color: var(--on-night); font-size: .92rem; }
.my-sound li.is-on { background: rgba(201,163,224,.1); box-shadow: inset 0 0 0 1px rgba(201,163,224,.45); }
.my-sound b { font-weight: 400; }
.my-sound em { font-style: normal; font-size: .74rem; color: var(--on-night-muted); }
.my-eq { display: flex; align-items: end; gap: 2px; height: 18px; }
.my-eq i { flex: 1; height: 30%; border-radius: 1px; background: var(--on-night-muted); }
.my-sound .is-on .my-eq i { background: var(--fp-accent-night); height: 70%; }
html.motion .my-sound .is-on .my-eq i { animation: my-eq 1.1s ease-in-out infinite alternate; }
.my-sound .is-on .my-eq i:nth-child(2) { animation-delay: -.3s; } .my-sound .is-on .my-eq i:nth-child(3) { animation-delay: -.6s; } .my-sound .is-on .my-eq i:nth-child(4) { animation-delay: -.9s; }
@keyframes my-eq { from { height: 20%; } to { height: 100%; } }
.my-sound__note { margin: .8rem 0 0; font-size: .74rem; color: var(--on-night-muted); }
.my-focus { min-height: 320px; display: grid; place-items: center; background: linear-gradient(180deg, rgba(20,30,44,.55), rgba(20,30,44,.75)), linear-gradient(160deg, #2b3b50, #c98a4b 55%, #7a2e24); }
.my-focus__page { width: min(100%, 380px); padding: 1.6rem 1.8rem; border-radius: 8px; background: rgba(251,247,238,.94); font-family: var(--serif); font-size: 1.12rem; line-height: 1.7; color: #2a221a; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.my-focus__page p { margin: 0 0 .7em; } .my-focus__page p:last-child { margin: 0; }
.my-focus__caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.15em; background: var(--fp-accent); }
html.motion .my-focus__caret { animation: fx-blink 1.1s steps(1) infinite; }
.pf-cert .fx-cert__paper { color: #2a221a; }
.pf-cert .fx-cert__title, .pf-cert dd { color: #2a221a; }
.pf-cert .fx-cert__by, .pf-cert dt, .pf-cert .fx-cert__foot { color: #5a4f43; }
.fp-hero .fx-session { color: #2a221a; }
.fp-hero .fx-session .fx-tag { background: rgba(33,26,18,.78); color: var(--paper); }
.my-stack { min-height: 470px; }
.my-card:nth-of-type(1) { left: 0; top: 36px; }
.my-card:nth-of-type(2) { left: 15%; top: 168px; }
.my-card:nth-of-type(3) { left: 30%; top: 300px; }
@media (max-width: 600px) { .my-stack { min-height: 430px; } .my-card { width: 82%; } .my-card:nth-of-type(2) { left: 9%; top: 150px; } .my-card:nth-of-type(3) { left: 18%; top: 264px; } }
.fp--yours { --fp-accent: #6f4381; }
.bs-site__row .is-off { opacity: 1; color: var(--fg-muted); box-shadow: inset 0 0 0 1px var(--line); background: transparent; }
.wm-lens__fact span { color: #8a4424; }

/* ================= Author Page ================= */
.fp--author { --fp-accent: #2f5a86; --fp-accent-night: #93b8de; }
.fp--author [data-fp="author"] { display: none !important; }
.ap-site { padding: 52px 18px 18px; }
.ap-window { border-radius: 12px; overflow: hidden; background: #f6f1e6; color: #2a221a; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.ap-page { display: grid; gap: .9rem; padding: 1.1rem; }
.ap-intro { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 10px; background: linear-gradient(120deg, #1f3550, #2f5a86); color: #f3ecdd; }
.ap-portrait { flex: none; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 42% 36%, #f1dfc8, #c98a4b 58%, #6b3a24); box-shadow: 0 0 0 3px rgba(243,236,221,.35); }
.ap-intro p { margin: 0; }
.ap-name { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; }
.ap-tag { margin-top: .2rem !important; font-size: .8rem; opacity: .85; }
.ap-btn { display: inline-block; margin-top: .6rem; padding: .35rem .7rem; border-radius: 999px; background: #f3ecdd; color: #1f3550; font-size: .72rem; font-weight: 600; }
.ap-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.ap-quote { padding: .9rem; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(42,34,26,.1); font-family: var(--serif); font-size: 1.1rem; line-height: 1.3; }
.ap-quote span { display: block; margin-top: .4rem; font-family: var(--sans); font-size: .7rem; color: #6e6152; }
.ap-photo { display: grid; gap: .35rem; font-size: .7rem; color: #6e6152; }
.ap-photo i { display: block; min-height: 72px; border-radius: 8px; background: linear-gradient(180deg, #9cb7cf, #e8c99c 60%, #4d6b7e); }
.ap-links { display: flex; flex-wrap: wrap; gap: .35rem; }
.ap-links span { padding: .3rem .6rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(42,34,26,.18); font-size: .72rem; }
.ap-moods { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.ap-mood { padding: 1.1rem 1.3rem; border-radius: 14px; box-shadow: 0 0 0 1px var(--line), 0 20px 40px -30px rgba(33,26,18,.5); }
.ap-mood b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; }
.ap-mood span { display: block; margin: .15rem 0 .8rem; font-size: .85rem; opacity: .8; }
.ap-mood i { display: block; height: 6px; margin-top: 7px; border-radius: 3px; background: currentColor; opacity: .2; } .ap-mood i.s { width: 55%; }
.ap-mood--paper { background: #f6eedd; color: #3a2c1e; }
.ap-mood--green { background: #e3ebdf; color: #2f4a3a; transform: translateX(4%); }
.ap-mood--air { background: #fbfaf7; color: #22303f; transform: translateX(8%); }
.ap-serp { font-family: Arial, Helvetica, sans-serif; }
.ap-serp__url { margin: 0; font-size: .8rem; color: #4d5156; }
.ap-serp__t { margin: .25rem 0; font-size: 1.25rem; color: #1a0dab; }
.ap-serp__d { margin: 0; font-size: .9rem; line-height: 1.5; color: #4d5156; }
@media (max-width: 480px) { .ap-row { grid-template-columns: 1fr; } }
.fp-next__grid .is-all { grid-column: 1 / -1; min-height: 110px; }