/* Scott Oldford, Cluster A: Cream/Gold Editorial. Serif display, sans body, gold accent, sharp corners. */
:root {
  --bg: #faf7f0; --paper: #fffdf8; --tint: #f3eee2; --ink: #1a1a1a; --body: #4a4a4a; --muted: #615c50; --gold-text: #7d6835;
  --gold: #9a8145; --gold-2: #b8963e; --gold-3: #d5a153; --gold-wash: #efe6d2; --line: rgba(26,26,26,.14); --hair: rgba(26,26,26,.08);
  --night: #0d0d0d; --night-2: #161412;
  --serif: "Cormorant Garamond", Georgia, serif; --sans: "DM Sans", Inter, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--body); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--ink); margin: 0; letter-spacing: -.005em; }
h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); line-height: 1.04; }
h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.12; }
h3 { font-size: 1.35rem; line-height: 1.2; }
p { margin: 0; }
em.g { font-style: italic; color: var(--gold); font-weight: 500; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.kicker { font-family: var(--sans); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text); font-weight: 500; }
.kicker.ink { color: var(--muted); }
.rule { height: 1px; background: var(--line); }
.rule.gold { background: var(--gold); width: 48px; height: 2px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .95rem 1.6rem; border-radius: 0; border: 1px solid var(--gold); background: var(--gold); color: #fffdf8; font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background .15s ease, color .15s ease; }
.btn:hover { background: var(--ink); border-color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--bg); }
.btn.sm { padding: .65rem 1.1rem; font-size: .7rem; }
.btn:focus-visible, input:focus-visible, .link-btn:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--gold); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold-3); }
.link-btn:hover { color: var(--ink); }
.util { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.util:hover { color: var(--ink); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }
.app { min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; }

/* top bar */
.bar { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 10; }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 1rem; min-width: 0; }
.brand { display: flex; align-items: baseline; gap: .75rem; text-decoration: none; }
.brand .mark { white-space: nowrap; font-family: var(--serif); font-size: 1.45rem; color: var(--ink); font-weight: 500; }
.brand .by { display: none; }
.bar nav { display: flex; align-items: center; gap: 1.25rem; white-space: nowrap; flex-shrink: 0; }
.brand { min-width: 0; }
.util .long { display: inline; } .util .short { display: none; }
.avatar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); display: inline-grid; place-items: center; font-family: var(--serif); font-size: 1.05rem; text-decoration: none; }
.avatar:hover { background: var(--gold); color: var(--bg); }

/* sign in */
.signin { min-height: calc(100dvh - 64px); display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 4rem; padding-top: 4rem; padding-bottom: 4rem; }
.signin .statement { display: grid; gap: 1.5rem; }
.signin .statement p.lede { font-size: 1.15rem; max-width: 46ch; }
.signin-card { background: var(--paper); border: 1px solid var(--line); padding: 2.5rem; position: relative; }
.signin-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--hair); pointer-events: none; }
.signin-card h2 { font-size: 1.9rem; margin: .5rem 0 .75rem; }
.field { display: grid; gap: .75rem; margin-top: 1.5rem; }
.field input { width: 100%; padding: .95rem 1rem; border: 1px solid var(--line); border-radius: 0; background: var(--bg); color: var(--ink); font: inherit; }
.field input::placeholder { color: var(--muted); }
.field .btn { width: 100%; }
.fine { margin-top: 1rem; font-size: .8rem; color: var(--muted); }
.notice { margin-top: 1.25rem; padding: 1rem 1.1rem; background: var(--gold-wash); border-left: 2px solid var(--gold); font-size: .9rem; }
.notice.err { background: #f6ebe6; border-left-color: #984b41; color: #6b3a32; }
.shelf-preview { display: flex; gap: .6rem; margin-top: .5rem; }
.shelf-preview .spine { width: 14px; height: 120px; background: var(--ink); }
.shelf-preview .spine:nth-child(2) { background: var(--gold); height: 132px; }
.shelf-preview .spine:nth-child(3) { background: var(--night-2); height: 110px; }
.shelf-preview .spine:nth-child(4) { background: var(--gold-3); height: 126px; }
.shelf-preview .spine:nth-child(5) { background: var(--ink); height: 116px; }

/* demo strip */
.demo { border-top: 1px solid var(--line); background: var(--tint); }
.demo .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .7rem 1.5rem; }
.demo .chip { padding: .35rem .8rem; border: 1px solid var(--line); background: var(--paper); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.demo .chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* library */
.hero { padding: 3.5rem 0 2rem; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; }
.hero h1 { margin: .75rem 0 1rem; max-width: 14ch; }
.hero .lede { font-size: 1.05rem; max-width: 52ch; }
.hero-side { display: grid; gap: .6rem; justify-items: end; text-align: right; }
.hero-side .num { font-family: var(--serif); font-size: 3.2rem; line-height: 1; color: var(--ink); }

.upsell { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; background: var(--paper); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); padding: 2rem 0; margin: 1.5rem 0 3rem; }
.upsell h2 { font-size: 1.9rem; margin: .4rem 0 .6rem; }
.upsell p { max-width: 60ch; }
.upsell.inline { background: transparent; border-top-color: var(--line); margin: 3rem 0 0; }

.families { display: grid; gap: 3.5rem; padding-bottom: 3rem; }
.family-head { display: grid; grid-template-columns: 64px 1fr auto; gap: 1.25rem; align-items: baseline; margin-bottom: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ink); }
.family-head.has-plate { grid-template-columns: 64px 1fr auto 168px; align-items: center; }
.family-head .no { font-family: var(--serif); font-size: 1.6rem; color: var(--fam, var(--gold)); }
.family-head .plate { display: block; aspect-ratio: 16/9; border: 1px solid var(--line); background: var(--tint); overflow: hidden; box-shadow: 0 1px 0 var(--hair), 0 12px 24px -20px rgba(26,26,26,.5); transition: transform .2s ease; }
.family-head .plate:hover { transform: translateY(-2px); }
.family-head .plate img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.item .kicker, .course .kicker { color: var(--fam, var(--gold-text)); }
.family-head p { max-width: 58ch; margin-top: .35rem; }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem 1.25rem; }
.jacket { display: grid; grid-template-rows: auto auto; gap: .8rem; text-decoration: none; }
.jacket .face { aspect-ratio: 3/4; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 1.1rem 1.1rem 1rem; border: 1px solid var(--line); background: var(--paper); transition: transform .2s ease, box-shadow .2s ease; box-shadow: 0 1px 0 var(--hair), 0 14px 28px -22px rgba(26,26,26,.5); }
.jacket:hover .face { transform: translateY(-3px); box-shadow: 0 1px 0 var(--hair), 0 22px 36px -24px rgba(26,26,26,.55); }
.jacket .face .tag { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fam, var(--gold-text)); }
.jacket .face .title { font-family: var(--serif); font-size: 1.3rem; line-height: 1.12; color: var(--ink); }
.jacket .face .by { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.jacket .face .by::before { content: ""; display: block; width: 28px; height: 1px; background: var(--fam, var(--gold)); margin-bottom: .6rem; }
/* dark jacket: agents, replays */
.jacket .face.night { background: radial-gradient(ellipse at 50% 110%, rgba(184,150,62,.42), transparent 62%), var(--night); border-color: var(--night); }
.jacket .face.night .title { color: #f2ede2; }
.jacket .face.night .by { color: #b9b1a0; }
.jacket .face.night .tag { color: var(--gold-3); }
.jacket .face.night .play { position: absolute; right: 1rem; top: 1rem; width: 30px; height: 30px; border: 1px solid rgba(242,237,226,.6); display: grid; place-items: center; color: #f2ede2; }
.jacket .face.night .play svg { width: 12px; height: 12px; }
.jacket .face.sub { background: var(--tint); }
.jacket .meta { display: flex; justify-content: space-between; gap: .5rem; font-size: .78rem; color: var(--muted); }
.jacket .meta b { font-weight: 500; color: var(--gold-text); letter-spacing: .08em; text-transform: uppercase; font-size: .66rem; }

/* item */
.item { padding-top: 2.5rem; padding-bottom: 5rem; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 3.5rem; align-items: start; }
.crumb { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.item .big { aspect-ratio: 3/4; border: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; justify-content: space-between; padding: 1.6rem; box-shadow: 0 1px 0 var(--hair), 0 30px 50px -34px rgba(26,26,26,.6); }
.item .big .title { font-family: var(--serif); font-size: 2rem; line-height: 1.08; color: var(--ink); }
.item .big.night { background: radial-gradient(ellipse at 50% 115%, rgba(184,150,62,.5), transparent 60%), var(--night); border-color: var(--night); }
.item .big.night .title { color: #f2ede2; }
.item .big.night .by { color: #b9b1a0; }
.item .big .tag { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fam, var(--gold-text)); }
.item .big.night .tag { color: var(--gold-3); }
.item .big .by { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.item .big .by::before { content: ""; display: block; width: 32px; height: 1px; background: var(--fam, var(--gold)); margin-bottom: .7rem; }
.item h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); margin: .6rem 0 1rem; }
.item .desc { font-size: 1.1rem; max-width: 58ch; }
a.player { text-decoration: none; cursor: pointer; }
a.player:hover .play { transform: scale(1.06); }
.player .play { transition: transform .15s ease; }
.player { aspect-ratio: 16/9; background: radial-gradient(ellipse at 30% 110%, rgba(184,150,62,.45), transparent 60%), var(--night); display: grid; place-items: center; color: #f2ede2; margin: 2rem 0 1.5rem; position: relative; }
.player .play { width: 72px; height: 72px; border-radius: 50%; background: #f2ede2; color: var(--night); display: grid; place-items: center; border: 0; }
.player .play svg { width: 26px; height: 26px; }
.player .label { position: absolute; left: 1.2rem; bottom: 1rem; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.facts { margin-top: 2.5rem; border-top: 1px solid var(--ink); }
.facts .row { display: grid; grid-template-columns: 160px 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.facts .row .k { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding-top: .25rem; }
.steps { margin: .75rem 0 0; padding-left: 1.2rem; display: grid; gap: .5rem; }

/* account & claim */
.narrow { max-width: 680px; padding-top: 3rem; padding-bottom: 5rem; display: grid; gap: 1.75rem; }
.narrow h1 { font-size: clamp(2.2rem, 4vw, 3rem); margin-top: .6rem; }
.list { border-top: 1px solid var(--ink); }
.list .row { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.list .row .amt { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); }

.footer { border-top: 1px solid var(--ink); padding: 2rem 0 2.5rem; }
.footer .wrap { display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: center; }
.footer .legal { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.footer .links { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: flex-end; }
.footer .proto { grid-column: 1 / -1; font-size: .78rem; color: var(--muted); border-top: 1px solid var(--hair); padding-top: 1rem; }

@media (max-width: 860px) {
  .brand .by { display: none; }
  .bar nav { gap: .75rem; }
  .brand .mark { font-size: 1.2rem; }
  .util { font-size: .66rem; letter-spacing: .12em; }
  .util .long { display: none; } .util .short { display: inline; }
  .signin { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 2.5rem; padding-bottom: 3rem; min-height: 0; }
  .signin-card { padding: 1.75rem; }
  .hero { grid-template-columns: 1fr; }
  .hero-side { justify-items: start; text-align: left; }
  .upsell { grid-template-columns: 1fr; }
  .upsell .btn { width: 100%; }
  .family-head, .family-head.has-plate { grid-template-columns: 1fr auto; }
  .family-head .no { grid-column: 1 / -1; }
  .family-head .plate { grid-column: 1 / -1; max-width: 320px; }
  .shelf { grid-template-columns: repeat(2, 1fr); gap: 1.25rem .9rem; }
  .item { grid-template-columns: 1fr; gap: 2rem; }
  .item .big { max-width: 300px; }
  .facts .row { grid-template-columns: 1fr; gap: .2rem; }
  .footer .wrap { grid-template-columns: 1fr; }
  .footer .links { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* production additions */
.loading { padding: 5rem 0; text-align: center; color: var(--muted); font-family: var(--serif); font-size: 1.3rem; }
.jacket .face.inactive, .item .big.inactive { opacity: .55; }
.badge { display: inline-block; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; padding: .25rem .5rem; border: 1px solid var(--line); color: var(--muted); }
.badge.warn { border-color: #984b41; color: #984b41; }
.empty { border: 1px solid var(--line); background: var(--paper); padding: 2.5rem; margin: 1rem 0 3rem; display: grid; gap: .75rem; }
.pending { background: var(--gold-wash); border-left: 2px solid var(--gold); padding: 1rem 1.1rem; font-size: .92rem; margin-top: 1.5rem; }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.demo { display: none; }

/* cross-sell rows */
.offers { margin-top: 1.5rem; border-top: 1px solid var(--hair); padding-top: 1rem; }
.offer-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; margin-top: .75rem; }
.offer { display: flex; flex-direction: column; justify-content: space-between; gap: .9rem; padding: 1rem 1.1rem; border: 1px solid var(--line); background: var(--paper); }
.offer-kind { display: block; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: .3rem; }
.offer-title { font-family: var(--serif); font-size: 1.15rem; line-height: 1.2; color: var(--ink); }
.offer .btn { align-self: flex-start; }
.offer-inline { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.offer-inline a { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold-3); }
.offer-inline a:hover { color: var(--ink); }


/* ---------- free shelf ---------- */
.free-head{margin:4rem 0 1.5rem;padding-top:2.5rem;border-top:1px solid var(--line)}
.free-head h2{font-family:var(--serif, "Cormorant Garamond", serif);font-weight:500;font-size:2rem;margin:.35rem 0 .4rem;color:var(--ink)}

/* ---------- admin ---------- */
.admin-link{margin-right:1rem}
.admin .admin-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem}
.admin .admin-head h1{font-size:2.6rem;margin:.2rem 0 0}
.tabs{display:flex;gap:1.5rem}
.tabs a,.filters a{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--body);text-decoration:none;padding-bottom:.4rem;border-bottom:1px solid transparent}
.tabs a.on,.filters a.on{color:var(--ink);border-bottom-color:var(--gold-2)}
.filters{display:flex;gap:1.25rem;margin-bottom:1.5rem;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:1.5rem}
.stat{background:var(--paper);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.3rem}
.stat .num{font-family:var(--serif, "Cormorant Garamond", serif);font-size:2.2rem;line-height:1;color:var(--ink)}
.stat.warn .num{color:#9a5a1e}
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}
.panel{background:var(--paper);border:1px solid var(--line);padding:1.25rem 1.4rem;margin-bottom:1.5rem}
.panel>.kicker{margin-bottom:.8rem}
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl td,.tbl th{padding:.55rem .4rem;border-top:1px solid var(--hair);vertical-align:top;text-align:left}
.tbl tr:first-child td{border-top:0}
.tbl th{font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--body);font-weight:500;border-top:0}
.tbl .r{text-align:right;white-space:nowrap}
.tbl tr.dim{opacity:.5}
.tbl a{color:var(--ink)}
.lnk{background:none;border:0;padding:0;font:inherit;font-size:.78rem;color:var(--gold);text-decoration:underline;cursor:pointer}
.inline-form{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--hair)}
.inline-form input,.inline-form select,.urlcell input,.tbl select,.add-form input,.add-form select{font:inherit;font-size:.85rem;padding:.5rem .65rem;border:1px solid var(--line);background:#fff;color:var(--ink);min-width:0;border-radius:0}
.inline-form input{flex:1 1 200px}
.urlcell{width:42%}.urlcell input{width:100%}
.add-form{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.add-form button{grid-column:1/-1;justify-self:start}
.user-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin:.5rem 0 1.5rem}
.user-head h2{font-family:var(--serif, "Cormorant Garamond", serif);font-weight:500;font-size:2rem;margin:0}
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.7rem 1.1rem;font-size:.85rem;z-index:50;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.toast.bad{background:#7a2e1e}
@media (max-width:820px){.admin-grid{grid-template-columns:1fr}.add-form{grid-template-columns:1fr}.urlcell{width:auto}.tbl.items td{display:block;border-top:0;padding:.25rem .2rem}.tbl.items tr{display:block;border-top:1px solid var(--hair);padding:.6rem 0}.tbl.items .r{text-align:left}}

.inline-search{display:flex;gap:.6rem}
.inline-search input{flex:1}
.inline-search .btn{width:auto;padding:.9rem 1.4rem}
.tbl input.title{font:inherit;font-size:.92rem;font-weight:600;padding:.3rem .45rem;border:1px solid transparent;background:transparent;color:var(--ink);width:100%;border-radius:0;margin-left:-.45rem}
.tbl input.title:hover,.tbl input.title:focus{border-color:var(--line);background:#fff}


/* ---------- round 2 polish ---------- */
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 100; font-size: .85rem; }
.skip:focus { left: 1rem; top: 1rem; }
.jacket:focus-visible .face, a.player:focus-visible, .util:focus-visible, .fam-index a:focus-visible, .lnk:focus-visible, .tabs a:focus-visible, .filters a:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.jacket:focus-visible { outline: none; }
.face.has-cover, .big.has-cover { padding: 0; overflow: hidden; background: var(--tint); }
.face .cover, .big .cover { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.face.has-cover.inactive .cover, .big.has-cover.inactive .cover { filter: grayscale(1); opacity: .55; }
.fam-index { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; padding: .9rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 2.25rem; }
.fam-index a { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--body); display: inline-flex; gap: .5rem; align-items: baseline; padding: .2rem 0; }
.fam-index a .no { font-family: var(--serif); font-size: .95rem; color: var(--gold-text); letter-spacing: 0; }
.fam-index a:hover { color: var(--ink); }
.family { scroll-margin-top: 5.5rem; }
.offers.compact { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: baseline; padding-top: 1rem; border-top: 1px solid var(--hair); margin-top: 1.5rem; }
.offers.compact .offer-inline a { font-size: .88rem; }
.pdf { margin: 2rem 0 1.5rem; border: 1px solid var(--line); background: var(--paper); }
.pdf iframe { width: 100%; height: 70vh; border: 0; display: block; }
.skel .sk { background: linear-gradient(90deg, var(--tint) 25%, #f8f4ea 50%, var(--tint) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.skel .sk-k { width: 80px; height: 10px; margin-bottom: 1rem; }
.skel .sk-h { width: 360px; max-width: 80%; height: 48px; margin-bottom: 1rem; }
.skel .sk-p { width: 520px; max-width: 100%; height: 14px; }
.skel .sk-card { aspect-ratio: 3/4; }
.skel .shelf { margin-top: 2rem; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel .sk { animation: none; } .jacket .face, .player .play { transition: none; } }
.viewas { background: var(--ink); color: #f2ede2; padding: .7rem 0; font-size: .82rem; }
.viewas .wrap { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; }
.viewas a { color: var(--gold-3); }

.list-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.8rem}
.btn-row{display:flex;gap:.6rem;flex-wrap:wrap}
#bulk{display:grid;gap:.6rem}
#bulk textarea{font:inherit;font-size:.85rem;padding:.6rem .7rem;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:0;width:100%;resize:vertical}
#bulk button{justify-self:start}
.panel code{font-size:.8rem;background:var(--tint);padding:.1rem .35rem}
.inline-search select{font:inherit;font-size:.85rem;padding:.5rem .65rem;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:0}

/* ---------- mobile touch targets + overflow ---------- */
@media (max-width: 640px) {
  .bar nav > a.util:first-child { display: none; }
  .util, .hero-side .util, .lnk { padding: .45rem 0; min-height: 36px; display: inline-flex; align-items: center; }
  .fam-index { flex-wrap: nowrap; overflow-x: auto; gap: 0 1.4rem; padding: .4rem 1.5rem .4rem 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  .fam-index::-webkit-scrollbar { display: none; }
  .fam-index a { white-space: nowrap; padding: .6rem 0; min-height: 40px; }
  .panel { overflow-x: auto; }
  .tbl td, .tbl th { padding: .55rem .35rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .admin .admin-head h1 { font-size: 2rem; }
  .tabs { gap: 1rem; flex-wrap: wrap; }
  .tabs a, .filters a { padding: .5rem 0; min-height: 36px; display: inline-flex; align-items: center; }
}

.filecell { margin-top: .35rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.lnk.upload { cursor: pointer; }
.lnk.small { font-size: .72rem; }

/* cards: title under covered jackets, app plates */
.jacket .meta { display: grid; grid-template-columns: 1fr auto; column-gap: .6rem; align-items: start; }
.jacket .meta .meta-title { grid-column: 1 / -1; grid-row: 1; font-family: var(--serif); font-size: 1.05rem; color: var(--ink); line-height: 1.25; margin-bottom: .1rem; }
.jacket .meta b { grid-column: 2; grid-row: 1; }
.jacket .meta .meta-title + span { grid-row: 2; }
.jacket .meta .meta-title ~ b { grid-row: 2; }
.jacket { align-content: start; }
.jacket .face { align-self: start; width: 100%; }
.jacket.is-app .face { aspect-ratio: 4/3; }
.admin .admin-head { padding-top: 1.25rem; }

/* ---------- course view ---------- */
.course { padding-top: 2.2rem; padding-bottom: 4rem; }
.course-head h1 { margin-bottom: .6rem; }
.course-head .desc { max-width: 62ch; }
.course-meta { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; font-size: .82rem; color: var(--muted); margin-top: 1rem; }
.course-meta .prog { display: inline-flex; align-items: center; gap: .6rem; color: var(--gold-text); letter-spacing: .04em; }
.pbar { display: inline-block; width: 120px; height: 3px; background: var(--hair); position: relative; }
.pbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); display: block; }
.start-here { margin-top: 1.4rem; padding: 1.1rem 1.3rem; background: var(--paper); border: 1px solid var(--line); border-left: 2px solid var(--gold); display: grid; grid-template-columns: 90px 1fr; gap: 1rem; max-width: 820px; }
.start-here .k { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); padding-top: .25rem; }
.start-here p { margin: 0; color: var(--body); line-height: 1.55; }
.course-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 3rem; margin-top: 2.4rem; align-items: start; }
.lesson-list { position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow: auto; border-top: 1px solid var(--ink); padding-top: .6rem; }
.lesson-list .mod { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); margin: 1rem 0 .3rem; }
.lesson-list ol { list-style: none; margin: 0; padding: 0; }
.lesson-list li a { display: grid; grid-template-columns: 18px 1fr auto; gap: .6rem; align-items: start; padding: .55rem .4rem; text-decoration: none; color: var(--body); border-bottom: 1px solid var(--hair); font-size: .9rem; line-height: 1.35; }
.lesson-list li a:hover { background: var(--paper); }
.lesson-list li a.on { color: var(--ink); background: var(--paper); box-shadow: inset 2px 0 0 var(--gold); }
.lesson-list li a .chk { width: 16px; height: 16px; border: 1px solid var(--line); display: inline-grid; place-items: center; font-size: .62rem; color: var(--gold-text); margin-top: .15rem; }
.lesson-list li a.done .chk { border-color: var(--gold); background: var(--gold); color: #fff; }
.lesson-list li a .d { font-size: .68rem; color: var(--muted); letter-spacing: .04em; white-space: nowrap; margin-top: .2rem; }
.lesson { scroll-margin-top: 90px; }
.lesson .kicker { margin-bottom: .4rem; }
.lesson h2 { font-family: var(--serif); font-weight: 500; font-size: 1.9rem; line-height: 1.15; margin: 0 0 1rem; }
.player.live { display: block; padding: 0; aspect-ratio: 16/9; background: #111; }
.player.live iframe { width: 100%; height: 100%; border: 0; display: block; }
.lesson .body { margin-top: 1.4rem; color: var(--body); line-height: 1.65; max-width: 66ch; }
.lesson .body p { margin: 0 0 .9rem; } .lesson .body ul { padding-left: 1.2rem; } .lesson .body li { margin-bottom: .4rem; }
.lesson .actions { margin-top: 1.4rem; }
.lesson .resume { margin: .7rem 0 0; color: var(--muted); }
.files { margin-top: 1.6rem; border-top: 1px solid var(--hair); padding-top: 1rem; }
.files .k, .transcript .k { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 .5rem; }
.files ul { list-style: none; margin: 0; padding: 0; } .files li { display: flex; gap: .8rem; align-items: baseline; padding: .35rem 0; border-bottom: 1px solid var(--hair); }
.files li .lnk { font-size: .95rem; color: var(--ink); }
.transcript { margin-top: 1.2rem; }
.transcript .tx { margin-top: .8rem; max-height: 420px; overflow: auto; background: var(--paper); border: 1px solid var(--line); padding: 1rem 1.2rem; }
.tx-body p { font-size: .86rem; line-height: 1.6; color: var(--body); margin: 0 0 .7rem; }
.tx-body .at { font-size: .68rem; color: var(--muted); letter-spacing: .04em; margin-right: .6rem; font-variant-numeric: tabular-nums; }
.tx-body b { font-weight: 600; color: var(--ink); }
.transcript pre { white-space: pre-wrap; font: .82rem/1.6 var(--sans); color: var(--body); margin: 0; }
.lesson-nav { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--ink); }
.lesson-nav .spacer { flex: 1; }
.lesson-nav .util.next { text-align: right; max-width: 60%; white-space: normal; }
.course-foot { margin-top: 3rem; border-top: 1px solid var(--hair); }
.course-foot .row { display: grid; grid-template-columns: 170px 1fr; gap: 1.2rem; padding: .9rem 0; border-bottom: 1px solid var(--hair); font-size: .92rem; color: var(--body); }
.course-foot .k { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding-top: .25rem; }
.audio audio { width: 100%; margin-top: 1rem; }
/* continue strip on the library */
.continue { margin: 2rem 0 .5rem; }
.continue-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: .6rem; }
.continue-row a { display: grid; gap: .3rem; text-decoration: none; padding: 1rem 1.1rem; background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.continue-row a .t { font-family: var(--serif); font-size: 1.1rem; } .continue-row a .s { font-size: .75rem; color: var(--muted); }
.continue-row a .pbar { width: 100%; margin-top: .3rem; }
@media (max-width: 640px) { .lesson .pdf { display: none; } }
@media (max-width: 900px) {
  .course-body { grid-template-columns: 1fr; gap: 1.6rem; }
  .lesson-list { position: static; max-height: none; }
  .start-here { grid-template-columns: 1fr; gap: .4rem; }
  .course-foot .row { grid-template-columns: 1fr; gap: .3rem; }
  .lesson-nav .util.next { max-width: 100%; text-align: left; }
}

/* admin lessons editor */
.lessons-edit .lrow { border: 1px solid var(--line); background: #fff; padding: .9rem 1rem; margin-bottom: .9rem; }
.lessons-edit .lhead { display: flex; gap: .7rem; align-items: baseline; margin-bottom: .6rem; }
.lessons-edit .lhead .spacer, .btn-row .spacer { flex: 1; }
.lessons-edit .lgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem .8rem; }
.lessons-edit .lgrid label { display: grid; gap: .2rem; font-size: .72rem; color: var(--muted); }
.lessons-edit .lgrid label.wide { grid-column: span 2; } .lessons-edit .lgrid .full { grid-column: 1 / -1; }
.lessons-edit .lgrid input, .lessons-edit .lgrid select, .lessons-edit .lgrid textarea { font: .86rem var(--sans); padding: .4rem .5rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); width: 100%; }
.lessons-edit .filecell { font-size: .8rem; padding-top: .4rem; }
.panel .field { display: grid; gap: .25rem; font-size: .72rem; color: var(--muted); margin-top: .8rem; }
.panel .field textarea { font: .9rem/1.5 var(--sans); padding: .5rem .6rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); width: 100%; }
@media (max-width: 900px) { .lessons-edit .lgrid { grid-template-columns: 1fr 1fr; } .lessons-edit .lgrid label.wide { grid-column: span 2; } }

/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
#main > section, #main > .loading, #main > .skel { animation: fade .28s ease both; }
#main > section > *:nth-child(1) { animation: rise .45s cubic-bezier(.2,.7,.2,1) both; }
#main > section > *:nth-child(2) { animation: rise .45s cubic-bezier(.2,.7,.2,1) .06s both; }
#main > section > *:nth-child(3) { animation: rise .45s cubic-bezier(.2,.7,.2,1) .12s both; }
#main > section > *:nth-child(n+4) { animation: rise .45s cubic-bezier(.2,.7,.2,1) .18s both; }
.families .family { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
.families .family:nth-child(2) { animation-delay: .08s; } .families .family:nth-child(3) { animation-delay: .16s; } .families .family:nth-child(n+4) { animation-delay: .24s; }
.lesson > * { animation: rise .4s cubic-bezier(.2,.7,.2,1) both; }
.lesson > *:nth-child(2) { animation-delay: .05s; } .lesson > *:nth-child(3) { animation-delay: .1s; } .lesson > *:nth-child(n+4) { animation-delay: .15s; }
.pbar i { transition: width .7s cubic-bezier(.2,.7,.2,1); }
.lesson-list li a { transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.lesson-list li a .chk { transition: background .25s ease, border-color .25s ease; }
.lesson-list li a.done .chk { animation: pop .35s cubic-bezier(.2,.7,.2,1); }
.continue-row a { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.continue-row a:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 14px 28px -22px rgba(26,26,26,.5); }
.continue-row a .pbar i { transition: width .9s cubic-bezier(.2,.7,.2,1) .3s; }
.lesson .notice { animation: rise .4s ease both; }
.transcript .tx { animation: fade .25s ease both; }
.start-here { animation: rise .5s cubic-bezier(.2,.7,.2,1) .2s both; }
.btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.player-note { margin: .6rem 0 0; animation: fade .4s ease both; }


/* ---------- mobile app layer: install card, moment search, chapter index, listen mode ---------- */
[hidden] { display: none !important; }
.install { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem 1.4rem; align-items: center; border: 1px solid var(--line); background: var(--paper); padding: 1rem 1.2rem; margin: 0 0 1.6rem; position: relative; }
.install p { margin: .2rem 0 0; max-width: 60ch; }
.install .x { background: none; border: 0; font-size: 1.2rem; color: var(--muted); cursor: pointer; padding: .2rem .4rem; }
.install .ios-how b { color: var(--ink); font-weight: 600; }
.moment { margin: 0 0 1.8rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); background: var(--tint); }
.moment-row { display: flex; gap: .6rem; margin: .5rem 0 .4rem; }
.moment-row input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: .65rem .8rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.moment-row input:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 1px; }
.moment-results { margin-top: .6rem; }
.moment-group { margin-top: .9rem; }
.moment-group .k { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 .3rem; }
.moment-group ul { list-style: none; margin: 0; padding: 0; }
.moment-group li a { display: grid; grid-template-columns: 64px 1fr; gap: .2rem .8rem; padding: .5rem 0; border-top: 1px solid var(--hair); text-decoration: none; color: var(--ink); align-items: baseline; }
.moment-group li a .ts { font-variant-numeric: tabular-nums; color: var(--gold-text); font-size: .85rem; }
.moment-group li a .mt { font-family: var(--serif); font-size: 1.05rem; }
.moment-group li a .small { grid-column: 2; }
.mode { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin: -.8rem 0 1.2rem; }
.mode[hidden] { display: none; }
.listen-btn { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.listen-btn .ico { display: inline-flex; width: 1.1rem; height: 1.1rem; flex: none; }
.listen-btn .ico svg { width: 100%; height: 100%; }
.index { margin: 1.6rem 0 1.4rem; }
.index .notes { font-size: 1.02rem; max-width: 66ch; color: var(--body); }
.index-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; margin-top: 1rem; }
.index .k, .points .k { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 .5rem; }
.chapters ol { list-style: none; margin: 0; padding: 0; }
.chapters li { border-top: 1px solid var(--hair); }
.chap { display: grid; grid-template-columns: 58px 1fr; gap: .1rem .8rem; width: 100%; text-align: left; background: none; border: 0; padding: .6rem .3rem; cursor: pointer; color: var(--ink); font: inherit; }
.chap:hover, .chap.on { background: var(--tint); }
.chap.on .ts { color: var(--ink); font-weight: 600; }
.chap .ts { font-variant-numeric: tabular-nums; color: var(--gold-text); font-size: .85rem; padding-top: .15rem; }
.chap .ct { font-family: var(--serif); font-size: 1.1rem; line-height: 1.2; }
.chap .cs { grid-column: 2; font-size: .86rem; color: var(--muted); line-height: 1.4; }
.points ul { margin: 0 0 1.2rem; padding-left: 1.1rem; }
.points li { margin: .35rem 0; line-height: 1.45; }
.points .quotes { list-style: none; padding: 0; }
.points .quotes li { font-style: italic; color: var(--body); }
.points .quotes .lnk { font-style: normal; font-variant-numeric: tabular-nums; }
.listen { border: 1px solid var(--line); background: var(--paper); padding: 1rem 1.1rem 1rem; margin: 0 0 1.4rem; }
.listen-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; }
.listen-row { display: grid; grid-template-columns: auto auto auto 1fr auto; gap: .6rem; align-items: center; }
.pbtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--tint); color: var(--ink); display: grid; place-items: center; cursor: pointer; font: inherit; font-size: .8rem; font-variant-numeric: tabular-nums; }
.pbtn.main { width: 56px; height: 56px; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pbtn.main svg { width: 22px; height: 22px; }
.pbtn.speed { width: auto; padding: 0 .7rem; border-radius: 999px; }
.scrub input[type=range] { width: 100%; accent-color: var(--gold-2); }
.scrub .times { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.listen-foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: .6rem; flex-wrap: wrap; }
.mini { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(560px, calc(100% - 24px)); display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: center; background: var(--ink); color: var(--paper); padding: .6rem .6rem .6rem 1rem; box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); z-index: 50; }
.mini .mini-t { display: grid; text-decoration: none; color: var(--paper); min-width: 0; }
.mini .mini-t span:last-child { font-family: var(--serif); font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .kicker { color: var(--gold-3); }
.mini .pbtn { background: transparent; color: var(--paper); border-color: rgba(255,255,255,.25); width: 40px; height: 40px; }
@media (max-width: 760px) {
  .install { grid-template-columns: 1fr auto; }
  .index-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .listen-row { grid-template-columns: auto auto auto auto; }
  .listen-row .scrub { grid-column: 1 / -1; }
  .listen-row .speed { justify-self: end; }
}
@media (display-mode: standalone) { .footer { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); } }

/* ======================= v3 redesign: library rows, reader layout, header search ======================= */
.bar .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.5rem; }
.bar nav { justify-self: end; }
.hsearch { position: relative; max-width: 520px; width: 100%; justify-self: center; }
.hsearch form { display: flex; align-items: center; gap: .6rem; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; height: 40px; padding: 0 .6rem 0 .95rem; }
.hsearch form:focus-within { border-color: var(--gold); }
.hsearch svg { flex: none; color: var(--muted); }
.hsearch input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: .92rem; color: var(--ink); outline: none; }
.hsearch input::placeholder { color: var(--muted); }
.hsearch button.go { border: 0; background: var(--gold); color: #fff; border-radius: 999px; height: 30px; padding: 0 .9rem; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.hsearch .sico { display: none; }
#moment-panel { position: fixed; left: 0; right: 0; top: 64px; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 30px 50px -30px rgba(0,0,0,.35); max-height: calc(100dvh - 64px); overflow: auto; }
#moment-panel .wrap { padding-top: 1.2rem; padding-bottom: 1.4rem; }
#moment-panel .moment-results { margin: 0; }
#moment-panel .mp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .8rem; }
#moment-panel .mp-head .x { background: none; border: 0; font-size: 1.1rem; color: var(--muted); }
.moment-results .moment-group { margin-bottom: 1rem; }
.moment-results .k { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); margin: .4rem 0 .3rem; font-weight: 600; }
.moment-results ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 1.5rem; }
.moment-results li a { display: grid; grid-template-columns: 56px 1fr; gap: .6rem; padding: .5rem .3rem; border-top: 1px solid var(--hair); text-decoration: none; color: var(--ink); font-size: .92rem; }
.moment-results li a .ts { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; font-size: .82rem; padding-top: .1rem; }
.moment-results li a .mt { display: block; }
.moment-results li a .small { display: block; }
/* rail */
.rail { position: sticky; top: 64px; z-index: 9; background: var(--bg); border-bottom: 1px solid var(--line); margin: 0 -1.5rem; }
.rail .in { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; padding: .6rem 1.5rem; }
.rail .in::-webkit-scrollbar { display: none; }
.rail a { flex: none; font-size: .78rem; padding: .35rem .75rem; border-radius: 999px; border: 1px solid transparent; color: var(--body); text-decoration: none; white-space: nowrap; }
.rail a b { font-family: var(--serif); font-weight: 500; color: var(--gold); margin-right: .35rem; }
.rail a:hover, .rail a.on { border-color: var(--line); background: var(--paper); color: var(--ink); }
/* library hero */
.lib-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.75rem; margin: 2.4rem 0 1.2rem; }
.cont { display: grid; grid-template-columns: 150px 1fr; gap: 1.75rem; background: var(--paper); border: 1px solid var(--line); padding: 1.6rem; text-decoration: none; color: inherit; }
.cont .plate { aspect-ratio: 3/4; background: var(--tint) center/cover; box-shadow: 0 18px 30px -22px rgba(0,0,0,.4); }
.cont h2 { font-size: 2rem; line-height: 1.05; margin: .35rem 0 .2rem; }
.cont .less { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); font-style: italic; }
.cont .prog { height: 3px; background: var(--line); margin: 1rem 0 .5rem; position: relative; }
.cont .prog i { position: absolute; inset: 0 auto 0 0; background: var(--gold); }
.cont .btns { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.cont .btn { padding: .8rem 1.1rem; font-size: .72rem; }
.upnext { border: 1px solid var(--line); padding: 1.3rem 1.6rem; }
.upnext .k { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: .6rem; }
.upnext ul { margin: 0; padding: 0; list-style: none; }
.upnext li a { display: grid; grid-template-columns: 44px 1fr auto; gap: .9rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.upnext .th { width: 44px; aspect-ratio: 3/4; background: var(--tint) center/cover; }
.upnext .t { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); line-height: 1.15; display: block; }
.upnext .act { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.welcome { margin: 2.2rem 0 0; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.welcome h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.welcome .lede { color: var(--muted); font-size: .95rem; }
.welcome .util { margin-left: auto; }
.hqban { margin: 1.4rem 0 0; border: 1px solid var(--line); background: linear-gradient(90deg, var(--paper), var(--tint)); padding: 1.1rem 1.6rem; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.hqban .t { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); }
.hqban .btn { margin-left: auto; }
/* rows */
.rows { display: block; }
.row { margin: 2.1rem 0 0; }
.rowhead { display: flex; align-items: baseline; gap: .9rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); margin-bottom: 1.1rem; }
.rowhead .n { font-family: var(--serif); color: var(--fam, var(--gold)); font-size: 1.1rem; }
.rowhead h2 { font-size: 1.55rem; }
.rowhead .blurb { color: var(--muted); font-size: .9rem; margin-left: .2rem; }
.rowhead .all { margin-left: auto; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-weight: 600; white-space: nowrap; text-decoration: none; }
.scroller { display: grid; grid-auto-flow: column; grid-auto-columns: 186px; gap: 1.4rem; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x proximity; scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }
.card { scroll-snap-align: start; text-decoration: none; color: inherit; display: block; }
.card .plate { aspect-ratio: 3/4; background: var(--tint) center/cover; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 14px 26px -22px rgba(0,0,0,.5); position: relative; transition: transform .25s ease, box-shadow .25s ease; overflow: hidden; }
.card:hover .plate { transform: translateY(-3px); box-shadow: 0 22px 34px -24px rgba(0,0,0,.55); }
.card .plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .plate .typo { position: absolute; inset: 0; padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; background: var(--tint); }
.card .plate .typo .tag { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fam, var(--gold-text)); }
.card .plate .typo .tt { font-family: var(--serif); font-size: 1.2rem; line-height: 1.12; color: var(--ink); }
.card .plate .pp { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,0,0,.08); }
.card .plate .pp i { display: block; height: 100%; background: var(--gold); }
.card .plate .badge { position: absolute; top: 10px; left: 10px; background: rgba(255,253,248,.94); color: var(--ink); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; padding: 4px 8px; font-weight: 600; }
.card .plate .badge.warn { color: #8f1d1d; }
.card .plate.off img { filter: grayscale(1) opacity(.6); }
.card .meta { margin-top: .6rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: .4rem; }
.card .meta b { color: var(--fam, var(--gold-text)); font-weight: 600; }
.card .t { font-family: var(--serif); color: var(--ink); font-size: 1.1rem; line-height: 1.15; margin-top: .25rem; }
.row .offers.compact { margin-top: .4rem; }
.free-head { margin-top: 3rem; }
/* course / item reader layout */
.chead { display: grid; grid-template-columns: 120px 1fr auto; gap: 1.75rem; align-items: end; margin: 1.4rem 0 1.8rem; }
.chead .plate { aspect-ratio: 3/4; background: var(--tint) center/cover; box-shadow: 0 18px 30px -22px rgba(0,0,0,.4); overflow: hidden; }
.chead .plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chead h1 { font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1.02; margin: .25rem 0 .6rem; }
.chead .desc { margin: 0; max-width: 62ch; font-size: 1rem; }
.chead .cmeta { display: flex; gap: 1.1rem; font-size: .78rem; color: var(--muted); margin-top: .75rem; align-items: center; flex-wrap: wrap; }
.chead .cmeta .pbar { width: 160px; margin: 0; }
.chead .start { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink); margin-top: .6rem; }
.chead .cta { align-self: end; }
.cols { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.side { position: sticky; top: 80px; }
.side summary { list-style: none; cursor: default; display: none; }
.side summary::-webkit-details-marker { display: none; }
.side .grp { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 1.1rem 0 .3rem; }
.side ol { list-style: none; margin: 0; padding: 0; }
.side a { display: grid; grid-template-columns: 18px 1fr auto; gap: .6rem; align-items: center; padding: .55rem .6rem; border-radius: 3px; font-size: .92rem; color: var(--ink); text-decoration: none; border: 1px solid transparent; }
.side a:hover { background: var(--paper); }
.side a.on { background: var(--paper); border-color: var(--line); }
.side a.done { color: var(--muted); }
.side .ck { width: 16px; height: 16px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: .6rem; }
.side a.done .ck { background: var(--gold); border-color: var(--gold); color: #fff; }
.side .d { font-size: .72rem; color: var(--muted); }
.reader .kick { display: flex; gap: .7rem; align-items: baseline; }
.reader h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin: .25rem 0 .9rem; }
.reader .player { margin: 0; }
.modebar { display: flex; align-items: center; gap: 1.1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); font-size: .84rem; flex-wrap: wrap; }
.modebar .listen-btn { font-size: .84rem; }
.modebar .right { margin-left: auto; display: flex; gap: 1rem; align-items: center; }
.reader .notes { font-size: 1.02rem; line-height: 1.65; margin: 1.3rem 0 1.2rem; max-width: 72ch; }
.reader .index-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.5rem; }
.reader .index .k { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 .6rem; font-weight: 600; }
.reader .chapters ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.reader .chap { display: grid; grid-template-columns: 56px 1fr; gap: .7rem; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: .6rem .4rem; color: var(--ink); font-size: .95rem; }
.reader .chap:hover, .reader .chap.on { background: var(--paper); }
.reader .chap .ts { color: var(--gold); font-weight: 600; font-size: .82rem; font-variant-numeric: tabular-nums; padding-top: .15rem; }
.reader .chap .cs { display: block; color: var(--muted); font-size: .82rem; line-height: 1.4; margin-top: .15rem; }
.reader .points ul { margin: 0; padding-left: 1.1rem; }
.reader .points li { margin-bottom: .6rem; font-size: .95rem; }
.reader .quotes { list-style: none; padding: 0; }
.reader .quotes li { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--ink); margin: .4rem 0; }
.reader .quotes .lnk { font-family: var(--sans); font-style: normal; font-size: .76rem; margin-right: .4rem; text-decoration: none; font-weight: 600; }
.reader .lesson-nav { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.1rem; }
.pdfbox { border: 1px solid var(--line); background: var(--paper); padding: 1.3rem; display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; align-items: center; margin-bottom: 1rem; }
.pdfbox .k { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); font-weight: 600; }
.reader .pdf { margin-top: 0; }
.cfoot { border-top: 1px solid var(--line); margin-top: 3rem; }
.cfoot .row { display: grid; grid-template-columns: 170px 1fr; gap: 1.2rem; padding: .9rem 0; border-bottom: 1px solid var(--hair); font-size: .92rem; color: var(--body); margin: 0; }
.cfoot .k { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding-top: .25rem; }
.cfoot .offer-inline a { margin-right: 1rem; }
@media (max-width: 900px) { .cfoot .row { grid-template-columns: 1fr; gap: .3rem; } }
@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; gap: 1.2rem; }
  .side { position: static; border: 1px solid var(--line); background: var(--paper); padding: .2rem .8rem .8rem; }
  .side summary { display: flex; justify-content: space-between; padding: .7rem .2rem; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); font-weight: 600; cursor: pointer; }
  .lib-hero { grid-template-columns: 1fr; gap: 1rem; }
  .reader .index-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .chead { grid-template-columns: 90px 1fr; gap: 1.1rem; }
  .chead .cta { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .bar .wrap { grid-template-columns: 1fr auto auto; gap: .8rem; height: 56px; }
  .hsearch form { display: none; }
  .hsearch .sico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
  .hsearch.open form { display: flex; position: fixed; left: .8rem; right: .8rem; top: 64px; z-index: 31; }
  .hsearch.open .sico { display: none; }
  #moment-panel { top: 56px; max-height: calc(100dvh - 56px); }
  .bar nav .util { display: none; }
  .rail { top: 56px; margin: 0 -1.1rem; }
  .rail .in { padding: .5rem 1.1rem; }
  .welcome { margin-top: 1.4rem; }
  .welcome .util { margin-left: 0; }
  .cont { grid-template-columns: 96px 1fr; gap: 1rem; padding: 1rem; }
  .cont h2 { font-size: 1.4rem; } .cont .less { font-size: 1rem; }
  .upnext { padding: .9rem 1rem; }
  .row { margin-top: 1.6rem; } .rowhead h2 { font-size: 1.3rem; } .rowhead .blurb { display: none; }
  .scroller { grid-auto-columns: 140px; gap: .9rem; margin: 0 -1.1rem; padding-left: 1.1rem; padding-right: 1.1rem; scroll-padding-left: 1.1rem; }
  .card .t { font-size: 1rem; }
  .hqban { padding: 1rem 1.1rem; } .hqban .btn { margin-left: 0; width: 100%; }
  .chead h1 { font-size: 1.85rem; }
  .chead .cmeta .pbar { width: 100%; order: 9; }
  .modebar { gap: .6rem .9rem; } .modebar .right { margin-left: 0; width: 100%; justify-content: space-between; }
  .pdfbox { grid-template-columns: 1fr; }
}
.item .reader .player, .item .reader .pdf { margin-top: 0; }
.item .reader .facts { margin-top: 2rem; }
.moment-results li a .small { grid-column: 2; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.chead .plate.off img { filter: grayscale(1) opacity(.6); }
.wrap.lib { max-width: 1240px; }
.plate .typo { position: absolute; inset: 0; padding: .9rem; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; background: linear-gradient(160deg, var(--paper), var(--tint)); border: 1px solid var(--hair); }
.plate .typo .tag { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fam, var(--gold-text)); font-weight: 600; }
.plate .typo .mono { font-family: var(--serif); font-size: 3.4rem; line-height: 1; color: var(--fam, var(--gold)); align-self: center; opacity: .55; }
.plate .typo .by { font-size: .52rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.plate .typo .by::before { content: ""; display: block; width: 22px; height: 1px; background: var(--fam, var(--gold)); margin-bottom: .4rem; }
.cont .plate, .chead .plate { position: relative; overflow: hidden; }
.card .meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 640px) { .chead { align-items: start; } .chead .plate { margin-top: .4rem; } }
.cont .plate img, .plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* shelf page */
.shelfpage { padding-bottom: 4rem; }
.shelf-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin: 1.2rem 0 1.8rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.shelf-head h1 { font-size: clamp(2rem, 3.4vw, 2.7rem); margin: .25rem 0 .5rem; }
.shelf-head .desc { max-width: 60ch; }
.shelf-head .cmeta { display: flex; gap: 1.1rem; font-size: .78rem; color: var(--muted); margin-top: .75rem; align-items: center; flex-wrap: wrap; }
.shelf-head .cmeta .pbar { width: 160px; margin: 0; }
.shelfpage .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.6rem 1.4rem; }
@media (max-width: 640px) { .shelfpage .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem .9rem; } .shelf-head { flex-direction: column; align-items: flex-start; gap: .6rem; } }
/* chapter rows polish */
.reader .chap { position: relative; transition: background .15s ease; border-radius: 2px; }
.reader .chap::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: transparent; transition: background .15s ease; }
.reader .chap:hover::before, .reader .chap.on::before { background: var(--gold); }
.reader .chap .ct { font-family: var(--sans); font-weight: 500; color: var(--ink); font-size: .95rem; }
.reader .chap.on .ts { color: var(--ink); }
.reader .chap .cs { display: none; }
.reader .chap:hover .cs, .reader .chap.on .cs { display: block; }
@media (hover: none) { .reader .chap .cs { display: block; } }
/* tighter mobile course header */
@media (max-width: 640px) {
  .chead .desc, .chead .start { display: none; }
  .chead .cmeta { margin-top: .4rem; }
  .chead h1 { font-size: 1.7rem; }
  .chead .cta { margin-top: .2rem; }
  .cdesc-m { display: block; margin: 0 0 1rem; font-size: .95rem; color: var(--body); }
}
.cdesc-m { display: none; }
.moment-results .things li a { grid-template-columns: 34px 1fr; align-items: center; }
.moment-results .things .th { width: 34px; aspect-ratio: 3/4; background: var(--tint) center/cover; display: block; grid-row: span 2; }
.moment-results .things .small { grid-column: 2; }
.moment-results .k.mh { color: var(--muted); margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.card { min-width: 0; } .card .meta { min-width: 0; } .card .meta b { flex: none; }
.shelf-peek { display: flex; gap: .7rem; margin-top: .6rem; max-width: 560px; }
.shelf-peek img { flex: 1 1 0; min-width: 0; aspect-ratio: 3/4; object-fit: cover; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 14px 24px -20px rgba(0,0,0,.5); transform: translateY(calc(var(--n) * 2px)); }
.shelf-peek img:nth-child(n+7) { display: none; }
@media (max-width: 900px) { .shelf-peek { max-width: none; } .shelf-peek img:nth-child(n+6) { display: none; } }
.signin .statement { min-width: 0; }
.shelf-peek { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.shelf-peek img { width: 100%; height: auto; }
@media (max-width: 900px) { .shelf-peek { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.signin { min-width: 0; }

/* ===== v4 home: hero + one row ===== */
.hero3{position:relative;overflow:hidden;background:var(--tint)}
.hero3::before{content:"";position:absolute;inset:0;background:var(--art) center 40%/cover no-repeat;filter:blur(60px) saturate(.8);opacity:.3;transform:scale(1.3)}
.hero3::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(243,238,226,.97) 0%,rgba(243,238,226,.88) 55%,rgba(243,238,226,.4) 100%)}
.hero3.bare::before,.hero3.bare::after{display:none}
.hero3>.wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:56px;align-items:center;min-height:460px;padding-top:48px;padding-bottom:48px}
.hero3 .kicker{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.hero3 .kicker span{color:var(--muted);letter-spacing:.04em;text-transform:none;font-weight:400;font-size:.82rem}
.hero3 h1{font-size:clamp(2.4rem,4.4vw,4rem);line-height:.98;margin:12px 0 12px;max-width:14ch}
.hero3 .sub{font-size:1.08rem;color:var(--body);max-width:48ch;margin:0 0 24px}.hero3 .sub b{color:var(--ink);font-weight:500}
.hero3 .btns{display:flex;gap:10px;flex-wrap:wrap}
.hero3 .btn.quiet{background:transparent;color:var(--ink);border:1px solid var(--line)}
.hero3 .meta{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:.76rem;color:var(--muted)}
.hero3 .meta .prog{display:block;width:160px;height:3px;background:var(--line);position:relative}.hero3 .meta .prog i{position:absolute;inset:0 auto 0 0;background:var(--fam,var(--gold))}
.hero3 .cov{display:block;width:280px;aspect-ratio:3/4;background:var(--tint);box-shadow:0 40px 70px -40px rgba(0,0,0,.55),0 10px 24px -16px rgba(0,0,0,.3);transition:transform .25s}
.hero3 .cov:hover{transform:translateY(-4px)}
.hero3 .cov img{width:100%;height:100%;object-fit:cover;display:block}
.home{padding-bottom:3rem}
.home .rowhd{display:flex;justify-content:space-between;align-items:baseline;margin:44px 0 18px}
.home .rowhd h2{font-size:1.5rem}
.tiles{display:grid;grid-auto-flow:column;grid-auto-columns:188px;gap:26px;overflow-x:auto;scrollbar-width:none;padding:6px 0 14px}
.tiles::-webkit-scrollbar{display:none}
.tile{display:block;color:inherit;text-decoration:none}
.tile .cov{display:block;aspect-ratio:3/4;background:var(--tint);border:1px solid rgba(0,0,0,.06);box-shadow:0 16px 26px -22px rgba(0,0,0,.45);margin-bottom:12px;transition:transform .2s;overflow:hidden}
.tile:hover .cov{transform:translateY(-4px)}
.tile .cov img{width:100%;height:100%;object-fit:cover;display:block}
.tile .cov .typo{display:grid;place-items:center;height:100%;font-family:var(--serif);font-size:3rem;color:var(--fam,var(--gold))}
.tile .t{display:block;font-size:1rem;color:var(--ink);line-height:1.25}
.tile .s{display:flex;align-items:center;gap:8px;font-size:.74rem;color:var(--muted);margin-top:4px}
.tile .s .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.tile.done .s .dot{background:var(--ink)}.tile.new .s .dot{background:transparent;border:1px solid var(--gold)}.tile.free .s .dot{background:transparent;border:1px solid var(--muted)}.tile.off .cov{filter:grayscale(1);opacity:.7}
.home .install,.home .upsell.inline{margin-top:34px}
.homefoot{margin:40px 0 0;padding-top:16px;border-top:1px solid var(--line)}
@media (max-width:900px){
.hero3>.wrap{grid-template-columns:minmax(0,1fr);gap:20px;min-height:0;padding-top:26px;padding-bottom:28px;text-align:center;justify-items:center}
.hero3::after{background:linear-gradient(180deg,rgba(243,238,226,.6),rgba(243,238,226,.97) 60%)}
.hero3 .cov{width:160px;order:-1}.hero3 h1{font-size:2.2rem;margin:10px 0}.hero3 .sub{font-size:.95rem;margin-bottom:18px}
.hero3 .kicker{justify-content:center}.hero3 .meta{justify-content:center}.hero3 .btns{justify-content:center}
.home .rowhd{margin:28px 0 14px}.tiles{grid-auto-columns:140px;gap:16px;margin:0 -18px;padding:6px 18px 12px}
}

/* ===== v4 product chrome ===== */
.prodbar{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:15}
.prodbar>.wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;min-height:64px;padding-top:8px;padding-bottom:8px}
.prodbar .pcov{display:block;width:34px;aspect-ratio:3/4;background:var(--tint);overflow:hidden;border:1px solid var(--hair)}
.prodbar .pcov img{width:100%;height:100%;object-fit:cover;display:block}
.prodbar .ttl{display:flex;align-items:baseline;gap:14px;min-width:0}
.prodbar .ttl .crumb{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;text-decoration:none}
.prodbar .ttl h1{font-size:1.25rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.prodbar .ttl .kind{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fam,var(--gold-text));font-weight:600;white-space:nowrap}
.prodbar .st{display:flex;align-items:center;gap:14px;font-size:.76rem;color:var(--muted);white-space:nowrap}
.prodbar .st .prog{display:block;width:120px;height:3px;background:var(--line);position:relative}.prodbar .st .prog i{position:absolute;inset:0 auto 0 0;background:var(--fam,var(--gold))}
.prodbar .btn.sm{padding:.55rem .9rem;font-size:.7rem}
.about{margin:1.2rem 0 0;border-bottom:1px solid var(--hair)}
.about summary{cursor:pointer;list-style:none;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:.8rem 0}
.about summary::-webkit-details-marker{display:none}
.about .about-in{padding:0 0 1.2rem;max-width:68ch}.about .about-in p{margin:0 0 .6rem}
.about .start{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--ink)}
.course .cols{margin-top:1.6rem}
/* numbered path */
.path details.ls summary{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.path details.ls summary .kicker{margin:0}
.path ol{list-style:none;margin:0;padding:0}
.path .grp{margin:14px 0 4px 10px;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.path li a{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border-radius:4px;font-size:.88rem;color:var(--body);text-decoration:none;border:1px solid transparent}
.path li a:hover{background:var(--paper)}
.path li a.on{background:var(--paper);border-color:var(--line);color:var(--ink);font-weight:500}
.path .n{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:.72rem;color:var(--muted);font-family:var(--serif)}
.path li a.done .n{background:var(--fam,var(--gold));border-color:var(--fam,var(--gold));color:#fff}
.path li a.on .n{border-color:var(--fam,var(--gold));color:var(--fam,var(--gold-text))}
.path .d{font-size:.68rem;color:var(--muted)}
/* tabs in lesson */
.lesson .kick .kicker b{color:var(--fam,var(--gold-text));font-weight:600}
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin:1.4rem 0 1.2rem;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs [data-tab]{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:0 0 10px;font:600 .74rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer;white-space:nowrap}
.tabs [data-tab].on{color:var(--ink);border-bottom-color:var(--fam,var(--gold))}
.tabpane .summary{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:2rem}
.tabpane .notes{margin:0;font-size:1rem;color:var(--body)}
.tabpane .pts{list-style:none;margin:0;padding:0}.tabpane .pts li{position:relative;padding:0 0 10px 18px;font-size:.92rem}.tabpane .pts li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--fam,var(--gold))}
.tabpane .chapters ol{columns:2;column-gap:2.2rem;list-style:none;margin:0;padding:0}
.tabpane .chapters li{break-inside:avoid}
.index .k{display:none}
/* agent install */
.agentpage{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:3rem;margin:2rem auto 4rem}
.asteps{list-style:none;margin:0;padding:0}
.asteps>li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:20px;padding:26px 0;border-top:1px solid var(--line)}
.asteps>li:first-child{border-top:0;padding-top:4px}
.asteps .num{font-family:var(--serif);font-size:1.7rem;color:var(--fam,var(--gold-text));line-height:1}
.asteps h3{font-size:1.45rem;margin:0 0 6px}
.asteps p{margin:0 0 12px;font-size:.95rem}
.plats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:8px}
.plat{display:block;border:1px solid var(--line);background:var(--paper);padding:14px;border-radius:4px;font-size:.9rem;color:var(--ink);text-align:center;text-decoration:none}
.plat.on{border-color:var(--fam,var(--gold));box-shadow:inset 0 0 0 1px var(--fam,var(--gold))}
.plat small{display:block;font-size:.68rem;color:var(--muted);margin-top:3px}.plat small.ok{color:var(--fam,var(--gold-text));font-weight:600}
.dl{display:flex;align-items:center;gap:16px;background:var(--paper);border:1px solid var(--line);padding:14px 16px;border-radius:4px;margin-top:6px;flex-wrap:wrap}
.dl .ico{font-size:1.4rem;color:var(--fam,var(--gold-text))}.dl .f{flex:1 1 160px}.dl .f b{display:block;color:var(--ink);font-weight:500}.dl .f span{font-size:.72rem;color:var(--muted)}
.howto{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.howto ol{margin:0;padding-left:18px;font-size:.92rem}.howto ol li{margin-bottom:8px}
.howto .body{font-size:.95rem}
.howto .vid .player{aspect-ratio:16/9}
.say{background:var(--tint);border-left:3px solid var(--fam,var(--gold));padding:14px 18px;font-family:var(--serif);font-size:1.15rem;color:var(--ink);font-style:italic}
.done-row{display:flex;align-items:center;gap:16px;margin-top:10px;padding:18px 0 0;border-top:1px solid var(--line);flex-wrap:wrap}
.aside .plate{width:160px;aspect-ratio:3/4;background:var(--tint) center/cover;box-shadow:0 18px 30px -22px rgba(0,0,0,.4);overflow:hidden;margin-bottom:18px}
.aside .plate img{width:100%;height:100%;object-fit:cover;display:block}
.aside h4{font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px;font-weight:600}
.aside p{margin:0;font-size:.9rem}
.aside ul{list-style:none;margin:0;padding:0}
.aside li{padding:9px 0;border-top:1px solid var(--hair);font-size:.88rem;display:flex;justify-content:space-between;gap:10px;color:var(--ink)}
.aside li span{color:var(--muted);font-size:.7rem;white-space:nowrap}
.aside li a,.aside li .lnk{color:var(--ink);text-decoration:none;font:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
/* reader (book / workbook) */
.bookpage{display:grid;grid-template-columns:240px minmax(0,1fr);gap:3rem;margin:2rem auto 4rem;align-items:start}
.bookpage .bside .plate{width:200px;aspect-ratio:3/4;background:var(--tint) center/cover;box-shadow:0 18px 30px -22px rgba(0,0,0,.4);overflow:hidden;margin-bottom:18px}
.bookpage .bside .plate img{width:100%;height:100%;object-fit:cover;display:block}
.bookpage .acts{display:grid;gap:8px;margin-bottom:10px}
.bookpage .acts .btn{text-align:center;justify-content:center}
.bookpage .reader{margin:0}
.bookpage .reader .pdf{min-height:84vh}
.bookpage .reader .pdf iframe{min-height:84vh}
.bookpage .cfoot,.openpage .cfoot{grid-column:1/-1}
/* open (apps, subscriptions, services, links) */
.openpage{margin:2rem auto 4rem}
.openhero{display:grid;grid-template-columns:200px minmax(0,1fr);gap:2.5rem;align-items:start}
.openhero .plate{width:200px;aspect-ratio:3/4;background:var(--tint) center/cover;box-shadow:0 18px 30px -22px rgba(0,0,0,.4);overflow:hidden}
.openhero .plate img{width:100%;height:100%;object-fit:cover;display:block}
.openhero .desc{font-size:1.1rem;margin:0 0 .6rem;max-width:60ch}
.openhero .actions{margin:1.2rem 0}
.openpage .pending,.bookpage .pending{grid-column:1/-1}
@media (max-width:900px){
.prodbar>.wrap{grid-template-columns:auto minmax(0,1fr);row-gap:6px}
.prodbar .ttl{flex-direction:column;gap:2px;align-items:flex-start}.prodbar .ttl h1{white-space:normal;font-size:1.05rem}
.prodbar .st{grid-column:1/-1;flex-wrap:wrap;gap:10px}.prodbar .st .cta{display:none}
.tabpane .summary{grid-template-columns:minmax(0,1fr)}.tabpane .chapters ol{columns:1}
.agentpage{grid-template-columns:minmax(0,1fr);gap:2rem;margin:1.2rem auto 3rem}.howto{grid-template-columns:minmax(0,1fr)}.aside .plate{display:none}
.bookpage{grid-template-columns:minmax(0,1fr);gap:1.2rem;margin:1.2rem auto 3rem}.bookpage .bside{display:grid;grid-template-columns:110px minmax(0,1fr);gap:1rem;align-items:start}.bookpage .bside .plate{width:110px;margin:0}
.bookpage .reader .pdf,.bookpage .reader .pdf iframe{min-height:70vh}
.openhero{grid-template-columns:minmax(0,1fr)}.openhero .plate{width:150px}
}
.privh{font-size:1.3rem;margin:1.4rem 0 .4rem}
.privlist{list-style:none;margin:0;padding:0;max-width:60ch}
.privlist li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-top:1px solid var(--hair);font-size:.95rem;color:var(--ink)}
.privlist li .small{white-space:nowrap}

/* ===== pass 14: audit fixes ===== */
.welcome1{display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;background:var(--paper);border:1px solid var(--line);padding:.9rem 1.1rem;margin:1.6rem 0 0;font-size:.92rem}
.welcome1 p{margin:0}.welcome1 .lnk{white-space:nowrap}
.newin{margin:1.6rem 0 0;padding:1rem 1.1rem;border:1px solid var(--line);background:var(--paper)}
.newin .kicker{margin:0 0 .4rem}.newin ul{list-style:none;margin:0;padding:0}
.newin li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:.45rem 0;border-top:1px solid var(--hair);font-size:.9rem}
.newin li:first-child{border-top:0}.newin .dt{font-family:var(--serif);color:var(--gold-text)}
.newin a{color:var(--ink);border-bottom:1px solid var(--line);text-decoration:none}
.tile.shell .cov{opacity:.55}.tile.shell .s .dot{background:transparent;border:1px dashed var(--muted)}
.tiles.grid{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));overflow:visible}
.allpage{padding:1.6rem 1.5rem 4rem}.allpage h1{margin:.3rem 0 1.4rem}
.shelf-blurb{margin:1.4rem 0 1rem;max-width:72ch;font-size:1rem}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 1.2rem}
.chip{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.4rem .85rem;font:500 .78rem/1 var(--sans);color:var(--ink);cursor:pointer}
.chip span{color:var(--muted);margin-left:4px}.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}.chip.on span{color:rgba(255,255,255,.7)}
.acct-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:.5rem}
.acct-actions{display:flex;gap:8px;flex-wrap:wrap}
.notmine .nm{display:grid;grid-template-columns:160px minmax(0,1fr);gap:2rem;align-items:start;margin-top:1rem}
.notmine .plate{aspect-ratio:3/4;background:var(--tint);box-shadow:0 18px 30px -22px rgba(0,0,0,.4);overflow:hidden}.notmine .plate img{width:100%;height:100%;object-fit:cover;display:block}
.notmine .actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:1rem}
.moment-empty{padding:.6rem 0 1rem}.moment-empty p{margin:0 0 .4rem}
.moment-group .k .th{display:inline-block;width:18px;height:24px;background:var(--tint) center/cover;vertical-align:middle;margin-right:8px;border:1px solid var(--hair)}
.nextbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;padding:10px 12px 10px 18px;border-radius:999px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);max-width:calc(100vw - 24px)}
.nextbar .small{color:rgba(255,255,255,.7);white-space:nowrap}
.nextbar .btn{background:var(--gold-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50vw}
.nextbar .x{background:none;border:0;color:#fff;font-size:1.2rem;cursor:pointer;padding:0 4px}
body:has(#mini) .footer,body:has(#mini) main{padding-bottom:84px}
.mini .mini-t{display:flex;align-items:center;gap:10px}.mini .mini-cov{width:28px;aspect-ratio:3/4;object-fit:cover;display:block}.mini .mini-tx{display:flex;flex-direction:column}.mini .mini-tx .kicker{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.openhero .body{font-size:.95rem;margin:.6rem 0}
@media (max-width:900px){
.welcome1{flex-direction:column;gap:.5rem}
.modebar{flex-direction:column;align-items:stretch;gap:.6rem}
.modebar .right{order:-1}.modebar .right .lnk[data-done]{display:block;width:100%;text-align:center;background:var(--gold-text);color:#fff;padding:.8rem 1rem;border-radius:3px;font:600 .74rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.tiles.grid{grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0}
.notmine .nm{grid-template-columns:minmax(0,1fr)}.notmine .plate{width:140px}
.nextbar{bottom:12px;gap:10px;padding:8px 10px 8px 14px}
}

/* ===== pass 15: global bar, menus, trail, tab bar ===== */
.bar .wrap{display:flex;gap:1.5rem}
.bar nav{display:contents}
.brand .by{display:inline;font:600 .62rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-left:.55rem}
.bar nav .nl,.bar nav .work{order:1}.bar nav .nl{margin-left:.4rem}
.hsearch{order:2;max-width:400px;flex:1 1 260px;margin-left:auto}
.bar nav .me{order:3}
.nl{font:500 .88rem/1 var(--sans);color:var(--muted);text-decoration:none;padding:1.45rem 0;position:relative;cursor:pointer;list-style:none;white-space:nowrap}
.nl:hover{color:var(--ink)}.nl.on{color:var(--ink)}
.nl.on:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold)}
.nl span{font-size:.7rem;margin-left:2px}
details.dd{position:relative}details.dd summary{list-style:none}details.dd summary::-webkit-details-marker{display:none}
details.dd .pop{position:absolute;top:calc(100% + 2px);right:0;background:var(--paper);border:1px solid var(--line);box-shadow:0 24px 44px -26px rgba(0,0,0,.45);z-index:40;min-width:250px;padding:.4rem 0}
details.dd.work .pop{left:0;right:auto;min-width:380px;padding:.5rem}
details.dd summary.avatar{cursor:pointer}
.pop a{display:block;padding:.6rem 1rem;color:var(--ink);text-decoration:none;font-size:.88rem}.pop a:hover{background:var(--tint)}
.pop .who{padding:.7rem 1rem .6rem;border-bottom:1px solid var(--hair);margin-bottom:.3rem;font-size:.8rem;color:var(--muted)}.pop .who b{display:block;color:var(--ink);font-weight:500;font-size:.92rem}
.pop .sep{border-top:1px solid var(--hair);margin:.3rem 0}
.wm{list-style:none;margin:0;padding:0}
.wm li a{display:block;padding:.7rem .8rem;border-radius:3px}
.wm li a b{display:block;font-family:var(--serif);font-weight:500;font-size:1.12rem;color:var(--ink);line-height:1.15}
.wm li a span{display:block;font-size:.8rem;color:var(--muted);margin-top:2px;line-height:1.35}
.wm li.all a{font:600 .7rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);margin-top:.3rem;border-top:1px solid var(--hair);border-radius:0;padding-top:.9rem}
.trail{border-bottom:1px solid var(--hair);background:var(--bg)}
.trail .wrap{height:40px;display:flex;align-items:center}
.trail ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.6rem;font-size:.8rem;color:var(--muted);min-width:0}
.trail li{display:flex;align-items:center;gap:.6rem;white-space:nowrap}
.trail li+li:before{content:"›";color:var(--line);font-size:.95rem}
.trail a{color:var(--muted);text-decoration:none}.trail a:hover{color:var(--ink)}
.trail li[aria-current]{color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.trail .back{display:none}
.prodbar .ttl h1{margin-top:0}
.tabbar{display:none}
@media (max-width:640px){
  .bar .wrap{display:flex;height:56px;gap:.7rem}
  .brand .by{display:none}
  .bar nav .nl,.bar nav .work{display:none}
  .hsearch{order:2;flex:0 0 auto;margin-left:auto;width:auto;max-width:none}
  .pop .who span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  details.dd .pop{position:fixed;left:.8rem;right:.8rem;top:62px;min-width:0}
  .trail .wrap{height:42px}
  .trail ol{display:none}
  .trail .back{display:flex;align-items:center;gap:.4rem;color:var(--muted);text-decoration:none;font-size:.84rem;min-width:0}
  .trail .back svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:2;flex:none}
  .trail .back span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--paper);border-top:1px solid var(--line);padding:.45rem 0 calc(.55rem + env(safe-area-inset-bottom));justify-content:space-around}
  .tabbar a,.tabbar button{display:grid;justify-items:center;gap:3px;font:600 .58rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;background:none;border:0;padding:0 .6rem;cursor:pointer}
  .tabbar svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
  .tabbar .on{color:var(--ink)}
  body:has(#tabbar) main{padding-bottom:72px}body:has(#tabbar) .footer{padding-bottom:84px}
  body:has(#tabbar) .mini{bottom:64px}body:has(#tabbar) .nextbar{bottom:76px}
}

/* ===== pass 16: locked catalog ===== */
.tile.locked .cov img{filter:saturate(.35) brightness(1.04);opacity:.78}
.tile.locked:hover .cov img{filter:none;opacity:1}
.tile .lock{position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:50%;background:rgba(26,26,26,.82);color:#fff;display:grid;place-items:center}
.tile .cov{position:relative}
.tile.locked .t{color:var(--body)}.tile.locked .s{color:var(--muted)}
.libhead{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin:0 0 1.4rem}
.libhead h1{margin:.2rem 0 .3rem}.libhead .muted{margin:0}.libhead .chips{margin:0}
.libgroup{margin:0 0 2.2rem}.libgroup .rowhd h2 a{color:var(--ink);text-decoration:none}.libgroup .rowhd h2 a:hover{color:var(--gold-text)}
.lockhd{margin-top:2.4rem}
.addrow{margin-top:2.2rem}
.notmine{padding:2rem 1.5rem 4rem}
.notmine .nm{display:grid;grid-template-columns:240px minmax(0,1fr);gap:3rem;align-items:start;margin-top:.5rem}
.notmine .plate{position:relative;aspect-ratio:3/4;background:var(--tint);box-shadow:0 30px 50px -30px rgba(0,0,0,.45);overflow:hidden}
.notmine .plate img{width:100%;height:100%;object-fit:cover;display:block}
.notmine .lock.big{position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;background:rgba(26,26,26,.82);color:#fff;display:grid;place-items:center}
.notmine .lock.big svg{width:18px;height:18px}
.notmine h1{font-size:2.4rem;margin:.3rem 0 .8rem;line-height:1.05}
.notmine .lead{font-size:1.05rem;max-width:62ch}
.notmine .actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:1.4rem}
.notmine .claimnote{margin-top:1.2rem}
.notmine .rowhd{margin-top:3rem}
@media (max-width:900px){
.notmine .nm{grid-template-columns:minmax(0,1fr);gap:1.4rem}.notmine .plate{width:160px}
.notmine h1{font-size:1.9rem}
.libhead{flex-direction:column;align-items:flex-start;gap:1rem}
}

/* ===== pass 17: Also in row ===== */
.also{max-width:1200px;margin:0 auto;padding:1rem 1.5rem 3.5rem}
.also .rowhd{margin:0 0 1rem}
.cfoot{display:none}
@media (max-width:640px){.also{padding:.5rem 1.1rem 2.5rem}}

/* ===== pass 18: the Guide ===== */
.guide-fab{position:fixed;right:22px;bottom:22px;z-index:45;display:flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:12px 18px 12px 14px;font:600 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 18px 36px -18px rgba(0,0,0,.55)}
.guide-fab svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.guide-fab:hover{background:var(--gold)}
body.guide-open .guide-fab{display:none}
.guide{position:fixed;right:22px;bottom:22px;z-index:46;width:400px;max-width:calc(100vw - 44px);height:min(640px,calc(100vh - 44px));display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(0,0,0,.5);border-radius:6px;overflow:hidden}
.guide[hidden]{display:none}
.guide header{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.1rem .6rem;border-bottom:1px solid var(--hair)}
.guide header h2{margin:0;font-size:1.5rem;line-height:1}
.guide header .kicker{margin:0 0 .2rem}
.guide .x{background:none;border:0;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--muted);padding:.2rem .4rem}
.guide .scope{margin:.6rem 1.1rem .2rem;line-height:1.4}
.guide .msgs{flex:1;overflow:auto;padding:.6rem 1.1rem;display:flex;flex-direction:column;gap:.7rem}
.guide .m{max-width:88%;font-size:.92rem;line-height:1.5}
.guide .m p{margin:0 0 .5rem}.guide .m p:last-child{margin:0}
.guide .m.user{align-self:flex-end;background:var(--ink);color:#fff;padding:.6rem .85rem;border-radius:14px 14px 3px 14px}
.guide .m.assistant{align-self:flex-start;background:var(--tint);padding:.6rem .85rem;border-radius:14px 14px 14px 3px}
.guide .m.assistant a{color:var(--ink);border-bottom:1px solid var(--gold);text-decoration:none}
.guide .m.thinking p{color:var(--muted)}.guide .m.thinking p:after{content:"…"}
.guide .sugg{display:flex;flex-direction:column;gap:6px;padding:0 1.1rem .6rem}
.guide .sugg .chip{text-align:left;border-radius:10px;padding:.6rem .8rem;font-weight:500;font-size:.84rem;line-height:1.3;white-space:normal}
.guide .ask{display:flex;gap:8px;padding:.6rem 1.1rem;border-top:1px solid var(--hair);align-items:flex-end}
.guide .ask textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:4px;padding:.6rem .7rem;font:inherit;font-size:.92rem;background:var(--bg);max-height:120px}
.guide .foot{margin:0;padding:0 1.1rem .6rem;min-height:1em}
@media (max-width:640px){
  .guide-fab{right:14px;bottom:76px;padding:11px 14px 11px 12px}
  .guide{right:0;left:0;bottom:0;width:auto;max-width:none;height:min(80vh,620px);border-radius:14px 14px 0 0}
  body.guide-open .tabbar{display:none}
}
/* pass 19: keep floating controls clear of the mini player */
body:has(#mini) .guide-fab{bottom:84px}
body:has(#mini) .nextbar{bottom:84px}
@media (max-width:640px){
  body:has(#tabbar):has(#mini) .guide-fab{bottom:140px}
  body:has(#tabbar):has(#mini) .nextbar{bottom:140px}
}
body.guide-open .mini{display:none}
/* pass 20: About you */
.about-you{border:1px solid var(--line);background:var(--paper);padding:1.3rem 1.4rem 1.4rem;margin:1.6rem 0}
.ay-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-end;margin-bottom:1rem}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.4rem}
.pf{display:grid;gap:.4rem}.pf.wide{grid-column:1/-1}.pf.acts{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.pf label{font:600 .68rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.pf select,.pf textarea{width:100%;font:1rem/1.4 var(--sans);padding:.6rem .7rem;border:1px solid var(--line-2,var(--line));background:#fff;color:var(--ink);border-radius:4px}
.pf textarea{resize:vertical;min-height:4.5rem}
.pf .chips{display:flex;flex-wrap:wrap;gap:.45rem}
.pf .chip{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem;font:.85rem/1 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);cursor:pointer;background:#fff}
.pf .chip input{position:absolute;opacity:0;pointer-events:none}
.pf .chip:has(input:checked){background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width:640px){.pf-grid{grid-template-columns:1fr}}
/* pass 21: tap targets on phone, admin tables scroll */
@media (max-width:640px){
  #trail a,#trail span{padding:.45rem 0;display:inline-block}
  .chips .chip,.filters .chip,.kindchips button,.chip{min-height:34px}
  .tabs [data-tab]{min-height:36px;padding-top:.5rem;padding-bottom:.5rem}
  .homefoot a,.claimnote a,.newin a{display:inline-block;padding:.35rem 0}
  .admin .tbl,.admin table{display:block;overflow-x:auto;max-width:100%}
}
/* pass 21b: phone book sidebar + row headers */
@media (max-width:640px){
  .bookpage .bside > :nth-child(n+3){grid-column:1/-1}
  .home .rowhd,.also .rowhd,.libgroup .rowhd{flex-wrap:wrap;align-items:baseline;gap:2px 12px}
  .home .rowhd > .small,.also .rowhd > .small,.libgroup .rowhd > .small{flex-basis:100%;text-align:left}
}
/* pass 22: Next for you */
.nfy{margin:1.6rem 0 .4rem;padding:1.1rem 1.2rem 1.2rem;border:1px solid var(--line, #e6e0d2);background:var(--card, #fff);border-radius:14px}
.nfy .rowhd{margin:0 0 .9rem}
.nfy-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:1.2rem;align-items:start}
.nfy-grid .tile{margin:0}
.nfy-grid .tile > .t,.nfy-grid .tile > .s{display:none}
.nfy-why h3{font-family:var(--serif, Georgia, serif);font-weight:400;font-size:1.45rem;line-height:1.15;margin:.2rem 0 .5rem}
.nfy-why h3 a{color:inherit;text-decoration:none}
.nfy-why p{margin:0 0 .7rem;max-width:56ch}
.nfy.ask{display:flex;flex-direction:column;gap:.5rem}
.nfy.ask p{margin:0;max-width:56ch}
.nfy.ask .acts{display:flex;gap:.9rem;align-items:center;margin-top:.3rem}
@media (max-width:640px){.nfy-grid{grid-template-columns:130px minmax(0,1fr);gap:.9rem}.nfy-why h3{font-size:1.2rem}.nfy{padding:1rem}}

/* pass 24: red-team fixes */
.pdf-phone{display:none}
@media (max-width:640px){.pdf-desk{display:none}.pdf-phone{display:inline}.bookpage .reader .pdf{display:none}.bookpage .bside .acts .btn:first-child{width:100%}}
.player iframe{width:100%;height:100%;border:0;display:block}
.tile .lock{top:.6rem;right:.6rem;bottom:auto}

/* ===== pass 26: stacked brand, "The Keep" over "by Scott Oldford" ===== */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:.12rem;line-height:1}
.brand .mark{line-height:1}
.brand .by,.bar .brand .by{display:block;margin-left:.04rem;font:600 .56rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media (max-width:860px){.brand .by,.bar .brand .by{display:block}}
@media (max-width:640px){.brand .by,.bar .brand .by{display:block;font-size:.5rem;letter-spacing:.14em}.brand .mark{font-size:1.15rem}}

/* ===== pass 27: About you stepper, Recommendations, Work with Me, Search page, Purchases, stats, Guide cards ===== */
.ay-page .acct-head h1,.reco-page .acct-head h1,.work-page .acct-head h1,.search-page .acct-head h1{max-width:30ch}
.about-you.stepper{padding:0;border:1px solid var(--line);background:var(--paper);border-radius:14px;overflow:hidden;margin:1.4rem 0}
.stepper .ay-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem;padding:1.2rem 1.4rem;border-bottom:1px solid var(--line)}
.stepper .steps{display:flex;gap:.4rem;list-style:none;margin:0;padding:0}
.stepper .steps button{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line);background:#fff;border-radius:999px;padding:.4rem .9rem .4rem .4rem;font:500 .8rem/1 var(--sans);color:var(--ink-3);cursor:pointer}
.stepper .steps button i{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--line);font-style:normal;font-size:.72rem;color:var(--ink)}
.stepper .steps li.on button{border-color:var(--ink);color:var(--ink)}.stepper .steps li.on button i{background:var(--ink);color:#fff}
.stepper .steps li.done button i{background:var(--gold,#9a8145);color:#fff}
.stepper form{padding:1.2rem 1.4rem 1.4rem}
.stepper fieldset{border:0;padding:0;margin:0;display:grid;gap:1.3rem}
.stepper legend{padding:0;margin-bottom:.4rem}.stepper legend h3{font:500 1.5rem/1.15 var(--serif);margin:.25rem 0 .2rem}.stepper legend p{margin:0}
.stepper .pf label .hint{display:block;font:400 .8rem/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted);margin-top:.25rem}
.stepper .opts{display:flex;flex-wrap:wrap;gap:.45rem}
.stepper .opt{position:relative;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:.5rem .95rem;font:.9rem/1.1 var(--sans);color:var(--ink);background:#fff;cursor:pointer;min-height:44px}
.stepper .opt input{position:absolute;opacity:0;pointer-events:none}
.stepper .opt:has(input:checked){background:var(--ink);color:#fff;border-color:var(--ink)}
.stepper .opt:has(input:focus-visible){outline:2px solid var(--gold,#9a8145);outline-offset:2px}
.stepper .pf.acts{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line);display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.ay-after{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.4rem 0 2rem}
.about-sum{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:1px solid var(--line);background:var(--paper);border-radius:14px;padding:1rem 1.2rem;margin:1.4rem 0}
.about-sum p{margin:.2rem 0 0}
.stats-card{border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem 1.2rem;margin:1.4rem 0;background:#fff}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:.6rem 0 .9rem}
.stat-grid div{display:grid;gap:.15rem}.stat-grid b{font:500 1.7rem/1 var(--serif);color:var(--ink)}.stat-grid span{font:.78rem/1.3 var(--sans);color:var(--muted)}
.pbar{display:block;height:4px;background:var(--line);border-radius:2px;overflow:hidden}.pbar i{display:block;height:100%;background:var(--gold,#9a8145)}.pbar.big{height:6px;margin:.4rem 0 .6rem}
.purchases{margin:1.6rem 0}
.pur-list{display:grid;gap:.5rem}
.pur-row{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:.9rem;padding:.7rem .9rem;border:1px solid var(--line);border-radius:12px;background:#fff;text-decoration:none;color:inherit}
.pur-row .plate{width:52px;height:68px;margin:0;border-radius:6px;overflow:hidden}.pur-row .plate img{width:100%;height:100%;object-fit:cover}
.pur-row div{display:grid;gap:.15rem;min-width:0}.pur-row b{font-weight:500}.pur-row .right{display:flex;align-items:center;gap:.6rem}
a.pur-row:hover{border-color:var(--ink)}
.pur-other{margin-top:1rem}.pur-other summary{cursor:pointer;font:.85rem/1 var(--sans);color:var(--muted);padding:.5rem 0}
.go{font:600 .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold,#9a8145);white-space:nowrap}
.reco-page,.work-page,.search-page{padding-bottom:3rem}
.reco-next{border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.3rem 1.3rem;background:var(--card,#fff);margin:1.2rem 0 2rem}
.reco-next h2{font:500 1.7rem/1.15 var(--serif);margin:.2rem 0 .5rem}.reco-next h2 a{text-decoration:none;color:inherit}
.reco-sec{margin:1.8rem 0}
.reco-rows{display:grid;gap:.6rem}
.reco-row{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:1rem;padding:.8rem 1rem;border:1px solid var(--line);border-radius:12px;background:#fff;text-decoration:none;color:inherit}
.reco-row .plate{width:64px;height:84px;margin:0;border-radius:6px;overflow:hidden}.reco-row .plate img{width:100%;height:100%;object-fit:cover}
.reco-row div{display:grid;gap:.2rem;min-width:0}.reco-row b{font:500 1.05rem/1.25 var(--serif)}.reco-row .pbar{margin-top:.3rem;max-width:260px}
.reco-row:hover{border-color:var(--ink)}
.reco-row.locked .plate{filter:saturate(.85)}
.grid.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}
.work-top{margin:1.2rem 0 1.4rem}
.work-card{border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.3rem 1.3rem;background:#fff;display:grid;gap:.5rem;align-content:start}
.work-card.lead{background:var(--paper);padding:1.6rem 1.8rem 1.8rem}
.work-card.lead h2{font:500 2rem/1.1 var(--serif);margin:.1rem 0 .2rem}.work-card.lead .lede{font-size:1.05rem}.work-card .fit{border-left:3px solid var(--gold,#9a8145);padding-left:.8rem;color:var(--ink-3)}
.work-card .btn{justify-self:start;margin-top:.4rem}
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.work-foot{margin-top:1.6rem}
.search-big{display:flex;gap:.6rem;margin:1rem 0 1.4rem;max-width:720px}
.search-big input{flex:1;font:1.05rem/1.3 var(--sans);padding:.8rem 1rem;border:1px solid var(--line-2,var(--line));border-radius:999px;background:#fff;color:var(--ink)}
.chips.filt{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.2rem}
.chips.filt .chip{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:.4rem .85rem;font:.82rem/1 var(--sans);color:var(--ink);background:#fff;text-decoration:none}
.chips.filt .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sr-groups{display:grid;gap:1rem}
.sr-group{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.sr-item{display:grid;grid-template-columns:64px 1fr auto;gap:1rem;align-items:center;padding:.9rem 1.1rem;text-decoration:none;color:inherit;background:var(--paper)}
.sr-item .plate{width:64px;height:84px;margin:0;border-radius:6px;overflow:hidden}.sr-item .plate img{width:100%;height:100%;object-fit:cover}
.sr-item h2{font:500 1.25rem/1.2 var(--serif);margin:.15rem 0}
.sr-moments{list-style:none;margin:0;padding:0}
.sr-moments li+li{border-top:1px solid var(--line)}
.sr-moments a{display:grid;grid-template-columns:4.6rem 1fr auto;gap:.9rem;align-items:start;padding:.75rem 1.1rem;text-decoration:none;color:inherit}
.sr-moments a:hover{background:var(--paper)}
.sr-moments .ts{font:600 .78rem/1.6 var(--mono,ui-monospace,monospace);color:var(--gold,#9a8145);letter-spacing:.02em}
.sr-moments .mt{display:grid;gap:.15rem;min-width:0}.sr-moments .mt b{font-weight:500}
.sr-moments .play{color:var(--muted);font-size:.8rem;padding-top:.2rem}
.m .gmoment,.m .gcard{display:grid;grid-template-columns:auto auto 1fr auto;gap:.6rem;align-items:center;border:1px solid var(--line);border-radius:10px;padding:.55rem .75rem;margin:.5rem 0 0;text-decoration:none;color:inherit;background:#fff}
.m .gcard{grid-template-columns:40px 1fr auto}.m .gcard img{width:40px;height:52px;object-fit:cover;border-radius:4px}.m .gcard span{display:grid;gap:.1rem}
.m .gmoment .n{display:inline-grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--ink);color:#fff;font:600 .68rem/1 var(--sans)}
.m .gmoment .ts{font:600 .76rem/1 var(--mono,ui-monospace,monospace);color:var(--gold,#9a8145)}.m .gmoment .mt{display:grid;gap:.1rem;min-width:0}.m .gmoment b{font-weight:500;font-size:.9rem}
.m .momref{font:600 .62rem/1 var(--sans);color:#fff;background:var(--ink);border-radius:50%;padding:.15rem .35rem;margin-left:.2rem;vertical-align:super}
.m.hello p{color:var(--ink-3)}
.guide header{position:relative}.guide header .clear{position:absolute;right:3rem;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.75rem}
.bar nav .nl.you{display:inline-flex;align-items:center;gap:.4rem;margin-left:auto}.bar nav .nl.you svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.bar nav .nl.work{order:1}.bar nav .nl.you{order:3}.bar nav .dd.me{order:4}.hsearch{order:2;max-width:300px;flex:1 1 200px;margin-left:auto}
@media (max-width:1100px){.bar nav .nl.you span{display:none}.hsearch{max-width:220px}}
@media (max-width:900px){.work-grid{grid-template-columns:1fr}.stat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.bar nav .nl.you{display:none}.stepper .ay-head{padding:1rem}.stepper form{padding:1rem}.stepper .steps button span{display:none}.stepper .steps button{padding:.3rem}.reco-row{grid-template-columns:48px 1fr auto;gap:.7rem;padding:.7rem .8rem}.reco-row .plate{width:48px;height:64px}.sr-item{grid-template-columns:48px 1fr auto}.sr-item .plate{width:48px;height:64px}.sr-moments a{grid-template-columns:3.8rem 1fr auto;padding:.7rem .8rem}.pur-row{grid-template-columns:44px 1fr auto}.pur-row .plate{width:44px;height:58px}.about-sum{flex-direction:column;align-items:flex-start}.work-card.lead{padding:1.2rem}.work-card.lead h2{font-size:1.6rem}.tabbar a,.tabbar button{font-size:.6rem}}
.stepper .pf .opt,.stepper .pf .chip,.pf .chip{text-transform:none;letter-spacing:0}
.thumb{display:block;width:64px;height:84px;border-radius:6px;overflow:hidden;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}.thumb .mono{font:500 1.3rem/1 var(--serif);color:var(--muted)}
.pur-row .thumb{width:52px;height:68px}.reco-row.noimg{grid-template-columns:1fr auto}
@media (max-width:640px){.reco-row .thumb,.sr-item .thumb{width:48px;height:64px}.pur-row .thumb{width:44px;height:58px}}
.m .mlink{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold,#9a8145);padding-bottom:1px}.m .mlink b{font-weight:500}.m .mlink span{color:var(--gold,#9a8145);font-size:.8em}.m .mnote{margin-top:.5rem}
.ay-ready{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;border:1px solid var(--gold,#9a8145);background:#fff;border-radius:12px;padding:.9rem 1.1rem;margin:1rem 0 0}.ay-ready p{margin:0}

/* ===== pass 28: red team fixes (design lens) ===== */
/* 3. primary buttons: deeper gold fill so cream text passes AA (4.94:1); hover stays ink */
.btn:not(.ghost):not(.sm.ghost){background:#846c38;border-color:#846c38}
.hsearch button.go{background:var(--gold-text)}.hsearch button.go:hover{background:var(--ink)}
.go{color:var(--gold-text)}
/* 1. picked chips readable */
.pf .chip:has(input:checked) span,.stepper .opt:has(input:checked) span{color:#fff}
/* 8. house style: sharp corners on the new surfaces */
.about-you.stepper,.about-sum,.stats-card,.pur-row,.reco-next,.reco-row,.work-card,.sr-group,.ay-ready,.thumb,.m .gcard,.m .gmoment{border-radius:0}
.pur-row .thumb,.reco-row .thumb,.sr-item .thumb{border-radius:0}.thumb img{border-radius:0}
/* 9. breathing room under the breadcrumb */
.reco-page .acct-head,.work-page .acct-head,.search-page .acct-head,.ay-page .acct-head{padding-top:1.6rem}
/* 11. fixed Guide button must not cover the last row or the footer */
main{padding-bottom:4.5rem}
footer .wrap{padding-right:7rem}
/* 14. tap targets on phone */
.tabbar a,.tabbar button{min-height:48px;padding-top:.45rem;padding-bottom:.45rem}
.avatar{width:40px;height:40px}
#guide-fab{min-height:44px}
.pf .chip,.stepper .opt{min-height:44px}
.util{display:inline-block;padding:.5rem 0;margin:-.5rem 0}
/* 15. visible focus ring that passes 3:1 */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.hsearch input:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
/* 16. brand sub-line legible on phone */
@media (max-width:640px){.brand .by,.bar .brand .by{font-size:.58rem;letter-spacing:.1em;white-space:nowrap}}
/* 17. About you page: one kicker, quiet exit */
.ay-page .stepper .ay-k{display:none}
.ay-after{align-items:center}
/* 19. search: one search box per screen, chips compact on phone */
@media (min-width:861px){.search-page .search-big{display:none}}
@media (max-width:640px){.chips.filt{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:.2rem;-webkit-overflow-scrolling:touch}.chips.filt .chip{white-space:nowrap}}
.sr-group .more{display:block;width:100%;text-align:left;padding:.7rem 1.1rem;border-top:1px solid var(--line);color:var(--gold-text)}
/* 20. Also in: align with the page column */
.also{max-width:1120px;padding:1rem 1.5rem 3.5rem}
/* 21. Mark complete is secondary on phone */
@media (max-width:640px){.modebar .btn:not(.ghost){background:transparent;color:var(--ink);border-color:var(--ink)}}
/* 24. back chevron */
@media (max-width:640px){.trail .back{align-items:center;gap:.35rem}.trail .back svg,.trail .back .chev{vertical-align:middle}}

/* ===== pass 30: UI/UX review across desktop, tablet, phone + motion layer ===== */
/* -- tablet header (641 to 1000): brand never wraps, search collapses to an icon, links keep room -- */
.brand .by{white-space:nowrap}
.brand{flex:none}
@media (max-width:1000px) and (min-width:641px){
  .bar .wrap{gap:1rem}
  .bar nav .nl{font-size:.82rem}.bar nav .nl.you span{display:none}
  .hsearch{flex:0 0 auto;width:auto;max-width:none;margin-left:auto}
  .hsearch form{display:none}
  .hsearch .sico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink)}
  .hsearch.open form{display:flex;position:fixed;left:1rem;right:1rem;top:70px;z-index:31;max-width:640px;margin:0 auto;box-shadow:0 24px 44px -26px rgba(0,0,0,.45)}
  .hsearch.open .sico{display:none}
}
@media (max-width:760px) and (min-width:641px){.bar nav .nl.work{display:none}}
/* -- tablet book page: side column stacks, reader gets the width -- */
@media (max-width:900px){
  .bookpage .bside{grid-template-columns:110px minmax(0,1fr);row-gap:1rem}
  .bookpage .bside > :nth-child(n+3){grid-column:1/-1}
  .bookpage .bside .about{margin-top:0}
}
.bookpage .reader .pdf,.bookpage .reader .pdf iframe{min-height:min(84vh,1100px)}
.pdf{border-color:var(--line);box-shadow:0 30px 60px -40px rgba(0,0,0,.35)}
/* -- tablet home: hero stays side by side down to 760 -- */
@media (max-width:900px) and (min-width:761px){
  .hero3>.wrap{grid-template-columns:minmax(0,1fr) 220px;gap:40px;text-align:left;justify-items:stretch;min-height:0;padding-top:40px;padding-bottom:40px}
  .hero3::after{background:linear-gradient(90deg,rgba(243,238,226,.97) 0%,rgba(243,238,226,.9) 55%,rgba(243,238,226,.5) 100%)}
  .hero3 .cov{width:220px;order:0}.hero3 h1{font-size:2.6rem}
  .hero3 .kicker,.hero3 .meta,.hero3 .btns{justify-content:flex-start}
  .tiles{grid-auto-columns:160px}
}
/* -- scroll rows: edge fade + arrows on pointer devices -- */
.rowwrap{position:relative}
.rowwrap .tiles{scroll-snap-type:x proximity;scroll-behavior:smooth}
.rowwrap .tile{scroll-snap-align:start}
.rowwrap::after{content:"";position:absolute;top:0;right:0;bottom:14px;width:64px;background:linear-gradient(90deg,rgba(250,247,240,0),var(--bg));pointer-events:none;opacity:1;transition:opacity .25s}
.rowwrap.at-end::after{opacity:0}
.rowwrap .rarr{position:absolute;top:calc(50% - 40px);width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);display:none;place-items:center;cursor:pointer;z-index:2;box-shadow:0 12px 24px -16px rgba(0,0,0,.4);transition:transform .2s,opacity .2s,background .2s}
.rowwrap .rarr svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.rowwrap .rarr.prev{left:-20px}.rowwrap .rarr.next{right:-20px}
.rowwrap .rarr:hover{background:var(--ink);color:#fff}
.rowwrap .rarr[disabled]{opacity:0;pointer-events:none}
@media (hover:hover) and (min-width:901px){.rowwrap .rarr{display:grid;opacity:0}.rowwrap:hover .rarr:not([disabled]),.rowwrap:focus-within .rarr:not([disabled]){opacity:1}}
/* -- covers: fade in as they load, shimmer while waiting -- */
.tile .cov,.card .plate,.cont .plate,.chead .plate,.thumb,.pur-row .plate,.reco-row .plate,.sr-item .plate,.bookpage .bside .plate,.openhero .plate,.notmine .plate{background-color:var(--tint);background-image:linear-gradient(100deg,var(--tint) 30%,#f8f4ea 50%,var(--tint) 70%);background-size:220% 100%;animation:shimmer 1.6s linear infinite}
.tile .cov:has(img.ld),.card .plate:has(img.ld),.cont .plate:has(img.ld),.chead .plate:has(img.ld),.thumb:has(img.ld),.pur-row .plate:has(img.ld),.reco-row .plate:has(img.ld),.sr-item .plate:has(img.ld),.bookpage .bside .plate:has(img.ld),.openhero .plate:has(img.ld),.notmine .plate:has(img.ld),.tile .cov:has(.typo),.card .plate:has(.typo),.thumb:has(.mono){animation:none;background-image:none}
main img.cover,main .cov img,main .plate img,main .thumb img,main .pcov img{opacity:0;transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.2,1);transform:scale(1.02)}
main img.ld{opacity:1;transform:none}
/* -- tiles rise in with a stagger -- */
.home .tiles .tile,.tiles.grid .tile,.shelfpage .grid .tile,.grid.tiles .tile{animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
.tiles .tile:nth-child(1){animation-delay:.02s}.tiles .tile:nth-child(2){animation-delay:.07s}.tiles .tile:nth-child(3){animation-delay:.12s}.tiles .tile:nth-child(4){animation-delay:.17s}.tiles .tile:nth-child(5){animation-delay:.22s}.tiles .tile:nth-child(6){animation-delay:.27s}.tiles .tile:nth-child(n+7){animation-delay:.3s}
.tile .cov{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s cubic-bezier(.2,.7,.2,1)}
.tile:hover .cov,.tile:focus-visible .cov{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 28px 40px -26px rgba(0,0,0,.55)}
.tile .t{transition:color .2s}.tile:hover .t{color:var(--gold-text)}
/* -- hero: cover settles in, progress draws -- */
.hero3 .cov{animation:heroin .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes heroin{from{opacity:0;transform:translateY(18px) rotate(1.5deg)}to{opacity:1;transform:none}}
.hero3 .cov:hover{transform:translateY(-6px) rotate(-.6deg)}
.hero3 .kicker,.hero3 h1,.hero3 .sub,.hero3 .btns,.hero3 .meta{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.hero3 h1{animation-delay:.06s}.hero3 .sub{animation-delay:.12s}.hero3 .btns{animation-delay:.18s}.hero3 .meta{animation-delay:.26s}
@keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero3 .meta .prog i,.prodbar .st .prog i,.cont .prog i,.pbar i,.card .plate .pp i,.shelf-head .pbar i{transform-origin:left center;animation:growx 1s cubic-bezier(.2,.7,.2,1) .25s both}
/* -- scroll reveal for rows below the fold -- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.tiles .tile{animation:none}
/* -- buttons, chips, links -- */
.btn{transition:background .2s ease,color .2s ease,border-color .2s ease,transform .15s ease,box-shadow .2s ease}
.btn:not(.ghost):hover{box-shadow:0 14px 26px -18px rgba(26,26,26,.6);transform:translateY(-1px)}
.btn:active{transform:translateY(1px);box-shadow:none}
.chip,.stepper .opt,.pf .chip{transition:background .18s ease,color .18s ease,border-color .18s ease,transform .12s ease}
.chip:active,.stepper .opt:active,.pf .chip:active{transform:scale(.97)}
.stepper .opt:hover,.pf .chip:hover{border-color:var(--ink)}
.nl{transition:color .2s}
.nl.on:after{animation:growx .35s cubic-bezier(.2,.7,.2,1) both;transform-origin:left center}
.avatar{transition:background .2s,color .2s,transform .2s}.avatar:hover{transform:scale(1.05)}
.pur-row,.reco-row,.sr-item,.work-card,.upnext li a{transition:border-color .2s ease,transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,background .2s}
a.pur-row:hover,.reco-row:hover{transform:translateY(-2px);box-shadow:0 18px 30px -24px rgba(26,26,26,.5)}
.sr-item:hover{background:var(--tint)}
.work-card{position:relative}
.work-card:not(.lead):hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 18px 30px -24px rgba(26,26,26,.5)}
.work-card .util{transition:color .2s,letter-spacing .2s}.work-card:hover .util{color:var(--ink)}
.go{transition:color .2s,transform .2s}.pur-row:hover .go,.reco-row:hover .go,.sr-item:hover .go{color:var(--ink);transform:translateX(2px)}
/* -- menus, Guide drawer, search panel -- */
details.dd[open] .pop{animation:popin .22s cubic-bezier(.2,.7,.2,1) both}
@keyframes popin{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.guide:not([hidden]){animation:drawer .32s cubic-bezier(.2,.7,.2,1) both}
@keyframes drawer{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.guide .m{animation:rise .3s cubic-bezier(.2,.7,.2,1) both}
.guide-fab{transition:background .2s,transform .2s,box-shadow .2s}.guide-fab:hover{transform:translateY(-2px);box-shadow:0 22px 40px -18px rgba(0,0,0,.6)}
#moment-panel{animation:popin .22s cubic-bezier(.2,.7,.2,1) both}
.hsearch.open form{animation:popin .2s cubic-bezier(.2,.7,.2,1) both}
.hsearch form{transition:border-color .2s,box-shadow .2s}.hsearch form:focus-within{box-shadow:0 0 0 3px rgba(154,129,69,.15)}
/* -- lesson tabs and stepper panes crossfade -- */
.tabpane{animation:fade .3s ease both}
.stepper fieldset{animation:rise .4s cubic-bezier(.2,.7,.2,1) both}
.stepper .steps button{transition:border-color .2s,color .2s,background .2s}.stepper .steps button i{transition:background .25s,color .25s}
.path li a{transition:background .18s,border-color .18s,color .18s}.path li a .n{transition:background .25s,border-color .25s,color .25s}.path li a.done .n{animation:pop .35s cubic-bezier(.2,.7,.2,1)}
.side a .ck{transition:background .25s,border-color .25s}
/* -- trail and prodbar -- */
.trail a{transition:color .2s}
.prodbar .btn.sm{transition:background .2s,color .2s,transform .15s}
/* -- phone polish -- */
@media (max-width:640px){
  .rowwrap::after{display:none}
  .guide-fab{padding:0;width:50px;height:50px;justify-content:center;border-radius:50%}
  .guide-fab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .guide-fab svg{width:22px;height:22px}
  .hero3 .cov{width:150px}
  .stat-grid b{font-size:1.5rem}
  .pur-more{padding:.9rem 0;width:100%;text-align:center;border-top:1px solid var(--line);margin-top:.4rem}
}
.pur-more{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--gold-text);text-decoration:none;padding:.6rem 0 0}
/* -- reduced motion wins over everything above -- */
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  main img.cover,main .cov img,main .plate img,main .thumb img,main .pcov img{opacity:1;transform:none;transition:none}
  .tile .cov,.card .plate,.cont .plate,.chead .plate,.thumb{animation:none;background-image:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.hsearch form input:focus-visible{outline:none}
.hsearch.open form{border-color:var(--gold)}

/* ===== pass 32: library jump-list + folds, one-program home, phone Guide sheet ===== */
.jump{position:sticky;top:64px;z-index:20;margin:0 calc(-1 * var(--gutter,1.5rem)) 1.5rem;padding:.55rem var(--gutter,1.5rem);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.jump-in{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.jump-in::-webkit-scrollbar{display:none}
.jump a{flex:none;font:500 .76rem/1 var(--sans);letter-spacing:.02em;color:var(--muted);padding:.5rem .8rem;border-radius:999px;border:1px solid transparent;text-decoration:none;transition:color .2s,background .2s,border-color .2s}
.jump a:hover{color:var(--ink);border-color:var(--line)}
.jump a.on{color:var(--ink);background:var(--paper);border-color:var(--line)}
@media (max-width:640px){.jump{top:56px}}
.tiles.grid.folded [data-fold]{display:none}
.fold-more{display:inline-block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--gold-text);text-decoration:none;margin:-.6rem 0 .4rem}
.fold-more::after{content:" ›"}
/* one owned program */
.program{display:grid;grid-template-columns:200px minmax(0,1fr);gap:2rem;align-items:start;background:var(--paper);border:1px solid var(--line);padding:1.75rem;margin:0 0 2.25rem;border-radius:4px;animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.program .pcov{display:block;aspect-ratio:3/4;background:var(--tint);overflow:hidden;box-shadow:0 24px 40px -26px rgba(0,0,0,.5)}
.program .pcov img{width:100%;height:100%;object-fit:cover;display:block}
.program .pcov .typo{display:grid;place-items:center;height:100%;font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--fam)}
.program h3{font-family:var(--serif);font-weight:500;font-size:1.9rem;line-height:1.1;margin:.2rem 0 .3rem}
.program h3 a{color:inherit;text-decoration:none}.program h3 a:hover{color:var(--gold-text)}
.program .pbar{height:3px;background:var(--line);margin:.9rem 0 1.1rem;max-width:360px}.program .pbar i{display:block;height:100%;background:var(--gold)}
.program .plist{list-style:none;margin:0 0 1.4rem;padding:0;max-width:560px}
.program .plist li{border-top:1px solid var(--line)}
.program .plist li:last-child{border-bottom:1px solid var(--line)}
.program .plist li a{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;color:var(--ink);text-decoration:none;font-size:.95rem;transition:color .2s}
.program .plist li a:hover{color:var(--gold-text)}
.program .plist li.small{padding:.6rem 0}
.freehd{margin-top:.5rem}
@media (max-width:760px){.program{grid-template-columns:120px minmax(0,1fr);gap:1.25rem;padding:1.25rem}.program h3{font-size:1.5rem}.program .plist li a{font-size:.9rem}}
@media (max-width:480px){.program{grid-template-columns:1fr}.program .pcov{width:140px}}
/* phone Guide: half sheet with a grab handle, page stays readable behind it */
@media (max-width:640px){
  .guide{height:min(58vh,520px);border-radius:16px 16px 0 0;box-shadow:0 -24px 60px -30px rgba(0,0,0,.45)}
  .guide::before{content:"";position:absolute;left:50%;top:8px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line);z-index:2}
  .guide header{padding-top:18px}
  .guide.tall{height:min(88vh,760px)}
  .guide header h2,.guide header .ttl{cursor:pointer}
}

/* a11y pass: small text never sits on mid-gold; 4.5:1 or better on cream */
.lnk,.listen-btn,.sr-moments .ts,.m .gmoment .ts,.moment .go,form.moment button.go{color:var(--gold-text)}
.prodbar .ttl .kind{color:var(--gold-text)}
.tile .s{color:#5c574b}