/* Round of 29/10 (night): centred icons, a light section, piano hover, legibility. */

/* Icons inside round buttons are SVG (see polish.js), so they sit on the geometric centre */
.dialog-close,.round-button,.music-play,.track-play,.hero-replay{display:grid!important;place-items:center;padding:0!important;line-height:0!important;font-size:0!important}
.btn-icon{display:block;width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dialog-close .btn-icon{width:36%;height:36%;stroke-width:2.1}
.music-play .btn-icon,.track-play .btn-icon{width:40%;height:40%;fill:currentColor;stroke:none}
.music-play{color:#17130c}

/* Light section: the books sit on warm paper with texture and a soft gradient */
.books{position:relative;isolation:isolate;color:#17140f;background:radial-gradient(ellipse at 50% 30%,#fffaf0 0%,#f4ecdc 45%,#e6d9bf 100%)!important}
.books:before{content:'';position:absolute;inset:0;z-index:-1;background:url(assets/textures/paper-ink.webp) center/cover;opacity:.16;mix-blend-mode:multiply;pointer-events:none}
.books:after{content:'';position:absolute;left:0;right:0;top:0;height:90px;z-index:-1;background:linear-gradient(#0b0c0f26,transparent);pointer-events:none}
.books .section-label{color:#5d5446;border-color:#3a2e1a26}
.books .section-kicker{color:#94661f}
.books h2{color:#15120d;text-shadow:0 1px 0 #ffffffb3,0 10px 30px #8a6a3a26}
.books h2 em{background:linear-gradient(100deg,#5a390c 0%,#9c6c22 22%,#c99743 36%,#7a5013 50%,#3f2706 62%,#a87428 80%,#6b4510 100%)!important;background-size:240% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;filter:drop-shadow(0 1px 0 #fffc)}
.books .section-heading>p,.books .section-intro{color:#3d362c}
.books .book-summary-surface{background:linear-gradient(145deg,#ffffffd9,#fff8ea99);border-color:#3a2e1a1f;box-shadow:0 24px 60px #5a40182e,inset 0 1px 0 #fff}
.books .book-info h3{color:#15120d}
.books #book-short{color:#4a4236}
.books .book-info .eyebrow,.books #book-category{color:#94661f}
.books .book-info .book-status{border-color:#94661f40;background:#94661f0d}
.books .book-info .book-status.is-complete{color:#7a5214}
.books .book-info .book-status.is-coming{color:#6b6255}
.books .autoplay-control{background:#ffffffb3;border-color:#3a2e1a26;color:#3d362c}
.books .round-button{background:linear-gradient(180deg,#fff,#f1e7d4);border-color:#3a2e1a2e;color:#1d1912;box-shadow:0 8px 20px #5a40182b,inset 0 1px 0 #fff}
.books .book-dot:after{background:#bfae8e;border-color:#a88f63}
.books .book-dot[aria-pressed=true]:after{background:#b8842f;box-shadow:0 0 12px #b8842f66}
.books .asset-note{color:#7a6f5f}
.books .carousel-stage{filter:drop-shadow(0 30px 40px #5a401833)}

/* Headings on dark sections: a soft halo keeps them readable over imagery */
.story-feature h2,.unbound h2,.everseed h2,.family h2{text-shadow:0 2px 24px #000b}

/* Piano hover: the card under the cursor rises, its neighbours settle */
.project-list .project,.unbound .track{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s,filter .45s}
.project-list:hover .project{transform:translateY(6px);filter:brightness(.88)}
.project-list .project:hover{transform:translateY(-12px);filter:none;box-shadow:0 30px 60px #000a,0 0 0 1px #dcb26259;border-color:#dcb26266}
.unbound .track-list:hover .track{transform:translateX(0) scale(.985);filter:brightness(.85)}
.unbound .track-list .track:hover{transform:translateY(-4px) scale(1.012);filter:none;box-shadow:0 18px 40px #000a,0 0 0 1px #dcb26240}

/* Hero: deeper background so he stands out */
.hero-refined{background:radial-gradient(ellipse at 66% 38%,#2a2620 0%,#121212 42%,#07080a 100%)!important}

/* Mobile: the eyebrow over the white hoodie gets a soft shadow plate */
@media(max-width:700px){
  .hero-refined .eyebrow{text-shadow:0 1px 2px #000,0 0 10px #000c,0 0 22px #000a;position:relative}
  .hero-refined .eyebrow:before{content:'';position:absolute;left:-12px;right:-12px;top:-8px;bottom:-8px;z-index:-1;border-radius:999px;background:radial-gradient(ellipse at center,#0b0c0fcc 30%,transparent 72%)}
}

/* Reflections: one slow pass every 10 seconds */
h2 em,.hero-refined h1 em{animation:sheen-pass 10s ease-in-out infinite!important}
@keyframes sheen-pass{0%,72%{background-position:0% 50%}100%{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.project-list .project,.unbound .track{transition:none}h2 em,.hero-refined h1 em{animation:none!important}}

.site-header.is-scrolled{background:#0b0c0fd9!important}
/* text-shadow paints over clipped gradients and washes them out; use filters instead */
h2 em,.hero-refined h1 em{text-shadow:none!important}

/* Desktop: the portrait sits a little further right; the name keeps its place (depth.js compensates) */
@media(min-width:701px){.hero-refined .hero-portrait{right:-6.5%}}


/* Books lift slightly under the cursor, before any click */
.book-cover{transition:transform .8s cubic-bezier(.22,.68,.24,1),opacity .7s,translate .4s cubic-bezier(.2,.8,.2,1),scale .55s cubic-bezier(.2,.8,.2,1),filter .4s!important}
.book-cover:hover{translate:0 -14px;filter:brightness(1.06) drop-shadow(0 26px 30px #5a401859)}

/* Music: starts in the night purple, opens into light before Project Everseed */
.unbound{background:linear-gradient(180deg,#120d17 0%,#1b1224 30%,#2c2236 44%,#6b6070 58%,#cfc6c4 70%,#efe8df 82%,#f7f3ec 100%)!important;color:#f3ead8}
/* Tracks: light buttons (white -> grey); the selected track warms to gold */
.unbound .track{border:1px solid #ffffff59;background:linear-gradient(135deg,#ffffff 0%,#eceae6 55%,#d9d6d1 100%);box-shadow:0 10px 26px #00000024,inset 0 1px 0 #fff}
.unbound .track.is-active{background:linear-gradient(135deg,#fffaf0 0%,#f2e4c4 60%,#dcc08a 100%);border-color:#dcb26299}
.unbound .track-main strong{color:#17140f}
.unbound .track-main small,.unbound .track-num{color:#6b655c}
.unbound .track-duration{color:#4a443b}
/* Play/pause: dark disc with a gold icon reads on gold and on white */
.unbound .track-play{background:radial-gradient(circle at 35% 30%,#3a332b,#12100d 70%);color:#f3dfb2;border:1px solid #00000040;box-shadow:0 4px 12px #0000004d,inset 0 1px 0 #ffffff26}
/* YouTube: a white pill that stays a button on both backgrounds */
.unbound .track-youtube{color:#1d1914;background:linear-gradient(180deg,#ffffff,#efebe4);border:1px solid #0000002e;box-shadow:0 3px 10px #00000029,inset 0 1px 0 #fff,inset 0 -1px 0 #0000000f;font-weight:600}
.unbound .track-youtube:hover{background:#fff;box-shadow:0 6px 16px #00000033,inset 0 1px 0 #fff}
.unbound .track-thumb{border-color:#0000001a}
.unbound .more-music>span{color:#5a5248}
.unbound .more-music button{background:linear-gradient(135deg,#fff,#e6e3de);border-color:#0000001f;color:#1d1914}
.unbound .more-music small{color:#7a6f5f}
.unbound .pipeline{border-color:#2b26201f}
.unbound .pipeline .section-kicker{color:#8a5c1b}
.unbound .pipeline-heading h3{color:#15120d}
.unbound .pipeline-heading h3 em{background:linear-gradient(100deg,#5a390c,#9c6c22 30%,#c99743 45%,#7a5013 60%,#a87428 85%)!important;-webkit-background-clip:text!important;background-clip:text!important}
.unbound .pipeline .project{background:linear-gradient(150deg,#221c27 0%,#141117 60%,#0e0c10 100%);border-color:#ffffff14;box-shadow:0 22px 50px #2a1f3540}
.unbound .pipeline>.button-outline{color:#17140f;border-color:#17140f40;background:linear-gradient(135deg,#ffffffd9,#ece6dc)}

/* Music frame (29/10, late): the real cover fits the square frame — no burned-in captions, no crop */
.unbound .album-art{aspect-ratio:1!important;min-height:0!important;max-height:none!important;height:auto;padding:0!important;background:#0d0c10}
.unbound .album-art img{inset:0;width:100%;height:100%;object-fit:cover;object-position:center!important;filter:none!important;scale:1!important;translate:none!important}
.unbound .album-art>span,.unbound .album-art h3,.unbound .album-art small{display:none}
.unbound .album-art-shade{opacity:0;background:radial-gradient(ellipse at 50% 46%,#0b0a0e8c 0%,#0b0a0ee0 75%)!important;transition:opacity .8s ease}
/* Lyrics: one caption at a time, centred over the static cover, on a soft dark plate for legibility */
.album-lyrics{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:0 7%;pointer-events:none}
.lyric-caption{grid-area:1/1;margin:0;max-width:100%;padding:.55em .95em .6em;border-radius:14px;text-align:center;text-wrap:balance;font-family:var(--heading);font-weight:600;font-size:clamp(17px,1.55vw,23px);line-height:1.3;letter-spacing:.2px;color:#fff8ea;background:#0b0a0eb8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 10px 30px #0000006b,inset 0 1px 0 #ffffff14;text-shadow:0 1px 2px #000c;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.lyric-caption.is-on{opacity:1;transform:none}
.lyric-caption.is-off{opacity:0;transform:translateY(-6px)}
.unbound .album-art.has-lyrics.is-singing .album-art-shade{opacity:.35}
@media(max-width:700px){.lyric-caption{font-size:16px}}
@media(prefers-reduced-motion:reduce){.lyric-caption{transition:none;transform:none}}

/* Books: the single action sits centred beside the summary */
.book-actions{align-self:center;justify-content:center;align-items:center}
@media(max-width:700px){.book-actions{align-self:stretch}}

/* Arrows inside buttons breathe: a slow, soft stretch out and back */
.button>span[aria-hidden],.underlined-link>span[aria-hidden],.track-download>span[aria-hidden],.project-notify .arrow{display:inline-flex;animation:arrow-breathe-diag 2.8s ease-in-out infinite;transform-origin:20% 80%}
[data-arrow=down]{animation-name:arrow-breathe-down!important;transform-origin:50% 0!important}
[data-arrow=right]{animation-name:arrow-breathe-right!important;transform-origin:0 50%!important}
@keyframes arrow-breathe-diag{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(2.5px,-2.5px) scale(1.12)}}
@keyframes arrow-breathe-down{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(2px) scaleY(1.18)}}
@keyframes arrow-breathe-right{0%,100%{transform:translateX(0) scaleX(1)}50%{transform:translateX(3px) scaleX(1.15)}}
@media(prefers-reduced-motion:reduce){.button>span[aria-hidden],.underlined-link>span[aria-hidden],.track-download>span[aria-hidden],.project-notify .arrow{animation:none}}

/* Anything you press reads as a button: a raised surface, a clear edge and a pressed state */
.project-notify,.everseed .button-outline,.unbound .pipeline>.button-outline{position:relative;cursor:pointer;border-radius:999px;font-weight:600;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.project-notify{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:12px 20px;min-height:46px;color:#17130c;background:linear-gradient(180deg,#f3dba4,#d2a24f);border:1px solid #f6e2b3;box-shadow:0 8px 20px #00000059,inset 0 1px 0 #fff8,inset 0 -2px 0 #7a501240}
.project-notify:hover{transform:translateY(-2px);box-shadow:0 12px 26px #0006,inset 0 1px 0 #fffa,inset 0 -2px 0 #7a501240}
.project-notify:active,.everseed .button-outline:active,.unbound .pipeline>.button-outline:active{transform:translateY(1px) scale(.98);box-shadow:0 3px 8px #0004,inset 0 2px 4px #0003}
.everseed .button-outline{border:1px solid #dcb262;background:linear-gradient(180deg,#2a241b,#15120e);color:#f3dfb2;box-shadow:0 10px 24px #0000004d,inset 0 1px 0 #ffffff1f,0 0 0 4px #dcb26214}
.everseed .button-outline:hover{transform:translateY(-2px);background:linear-gradient(180deg,#372e21,#1b1712)}
.unbound .pipeline>.button-outline{box-shadow:0 10px 24px #2a1f352e,inset 0 1px 0 #fff,inset 0 -2px 0 #0000000f;border-color:#17140f59}
.unbound .pipeline>.button-outline:hover{transform:translateY(-2px)}
/* The whole project card opens the updates invitation */
.project-list .project{cursor:pointer}
.project-list .project:focus-visible{outline:2px solid #dcb262;outline-offset:4px}

/* B&W portrait section: same framing as before, with a hidden 60px margin above and below so the
   parallax never reveals an edge or a dark band (depth.js keeps the movement inside that margin). */
@media(min-width:701px){
  .story-feature{overflow:hidden}
  .story-feature-image,.story-feature-cutout{top:-60px!important;bottom:auto!important;left:-24px!important;right:auto!important;width:calc(100% + 48px)!important;height:calc(100% + 120px)!important;object-position:70% 26%!important;-webkit-mask-image:none!important;mask-image:none!important}
}
@media(max-width:700px){.story-feature-image,.story-feature-cutout{translate:none!important}}

/* Books come toward the viewer on hover — a soft zoom, not a lift */
.book-cover:hover{translate:none!important;scale:1.06;filter:brightness(1.05) drop-shadow(0 30px 34px #5a40185c)}
/* Pipeline cards: the action always sits on the same baseline */
.project-list .project{display:flex;flex-direction:column}
.project-list .project .project-notify{margin-top:auto;align-self:stretch;justify-content:flex-start}
.project-list .project p:last-of-type{margin-bottom:22px}

/* Glassmorphism (29/10): coloured light behind, frosted panels in front */
.unbound{position:relative;isolation:isolate}
.unbound:before{content:'';position:absolute;z-index:-1;left:0;right:0;top:420px;height:900px;pointer-events:none;background:radial-gradient(38% 42% at 24% 46%,#b0233f47,transparent 70%),radial-gradient(34% 38% at 78% 38%,#dcb2623d,transparent 70%),radial-gradient(30% 34% at 56% 78%,#6b3fa04d,transparent 72%);filter:blur(10px)}
.unbound .album-player{position:relative;background:linear-gradient(135deg,#ffffff1f 0%,#ffffff0a 45%,#ffffff05 100%);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);border:1px solid #ffffff2e;box-shadow:0 30px 80px #00000059,inset 0 1px 0 #ffffff40,inset 0 -1px 0 #ffffff0d,inset 1px 0 0 #ffffff14}
.unbound .album-player:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,#ffffff1a 0%,transparent 28%,transparent 72%,#ffffff0a 100%)}
.unbound .pipeline{position:relative;isolation:isolate}
.unbound .pipeline:before{content:'';position:absolute;z-index:-1;inset:120px -4% -40px;pointer-events:none;background:radial-gradient(30% 60% at 18% 50%,#7b4bb066,transparent 70%),radial-gradient(28% 60% at 52% 40%,#dcb26259,transparent 70%),radial-gradient(30% 60% at 86% 55%,#b0233f4d,transparent 70%);filter:blur(14px)}
.unbound .pipeline .project{background:linear-gradient(150deg,#2a2233c7 0%,#15111acc 60%,#0e0c10d1 100%);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);border:1px solid #ffffff26;box-shadow:0 24px 60px #2a1f3552,inset 0 1px 0 #ffffff33,inset 0 -1px 0 #ffffff0d}
.unbound .pipeline .project:before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,#ffffff17 0%,transparent 30%)}

/* Gold buttons: no hard dark line under the edge — a soft drop shadow only */
.button-light{box-shadow:0 12px 30px #0000004a,inset 0 1px 0 #fff9,inset 0 -1px 0 #66431b1f!important}
.books .button-light{box-shadow:0 14px 30px #8a6a3a40,inset 0 1px 0 #fffa,inset 0 -1px 0 #66431b1a!important}

/* Track buttons: frosted glass over the section's light */
.unbound .track{background:linear-gradient(135deg,#ffffffeb 0%,#ffffffb8 55%,#f6f1ecc7 100%);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid #ffffffb3;box-shadow:0 12px 30px #1a102633,inset 0 1px 0 #fff,inset 0 -1px 0 #ffffff59}
.unbound .track.is-active{background:linear-gradient(135deg,#fffaf0f2 0%,#f4e5c4db 60%,#e2c48ce0 100%);border-color:#f6e2b3cc}
.unbound .track-list{position:relative;isolation:isolate}
.unbound .track-list:before{content:'';position:absolute;z-index:-1;inset:-40px -6%;pointer-events:none;background:radial-gradient(30% 40% at 16% 30%,#b0233f33,transparent 70%),radial-gradient(34% 40% at 80% 55%,#dcb26240,transparent 70%),radial-gradient(30% 36% at 45% 85%,#7b4bb033,transparent 72%);filter:blur(12px)}

/* Book summary: glass panel on warm light */
.books .library{position:relative;isolation:isolate}
.books .library:after{content:'';position:absolute;z-index:-1;left:8%;right:8%;bottom:-30px;height:340px;pointer-events:none;background:radial-gradient(34% 50% at 24% 60%,#dcb2624d,transparent 70%),radial-gradient(30% 50% at 78% 50%,#b0233f26,transparent 70%),radial-gradient(26% 46% at 52% 80%,#c9974359,transparent 72%);filter:blur(14px)}
.books .book-summary-surface{background:linear-gradient(135deg,#ffffffb3 0%,#ffffff6b 55%,#fff8ea80 100%)!important;-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border:1px solid #ffffffd9!important;box-shadow:0 26px 60px #5a401833,inset 0 1px 0 #fff,inset 0 -1px 0 #ffffff80!important}

/* Track play/pause on hover or when selected: a gold disc with a black symbol, never a pale ghost */
.unbound .track:hover .track-play,.unbound .track.is-active .track-play,.unbound .track-select:hover .track-play{background:linear-gradient(180deg,#f6dfa9,#d6a855)!important;color:#15120d!important;border-color:#b8873a80!important;box-shadow:0 5px 14px #6b45163d,inset 0 1px 0 #fff9!important}

/* Book dialog: the cover stays in view, bottom right, while the reader picks a format */
.dialog-book-thumb{float:right;width:clamp(118px,30%,176px);height:auto;aspect-ratio:2/3;object-fit:cover;margin:4px 0 18px 22px;border-radius:2px 6px 6px 2px;transform:rotate(2deg);box-shadow:0 22px 38px #000000a6,0 6px 14px #00000066;pointer-events:none}
#dialog-body:has(.dialog-book-thumb) .book-formats,#dialog-body:has(.dialog-book-thumb) .book-topics{clear:both}
@media(max-width:700px){.dialog-book-thumb{width:112px;margin:2px 0 12px 16px}}

/* Mobile eyebrow: white letters with a light shadow that follows them, so they read over the white hoodie */
@media(max-width:700px){.hero-refined .eyebrow:before{display:none!important}.hero-refined .eyebrow{color:#fff!important;text-shadow:0 1px 2px #000c,0 0 6px #0009,0 0 14px #0006!important}}
/* Menu button: a softened rectangle rather than a pill */
.menu-toggle{border-radius:14px!important}

/* Hero CTA: still gold, now frosted glass; on phones its label matches the book button */
@media(min-width:701px){.hero-refined .hero-actions .button-light{position:relative;overflow:hidden;background:linear-gradient(180deg,#ffffff4d 0%,#ffffff14 46%,#ffffff00 52%),linear-gradient(135deg,#f8e1a8f2 0%,#e6bd68ee 48%,#cf9c45e8 100%)!important;-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);border:1px solid #fff0cdb3!important;box-shadow:0 14px 34px #0000004d,inset 0 1px 0 #fffc,inset 0 -1px 0 #7a50122e,inset 0 0 0 1px #ffffff1f!important}}
@media(max-width:700px){.hero-refined .hero-actions .button-light{font-size:14px;letter-spacing:.2px}}
/* Replay: a small disc of frosted glass — mostly transparent, a soft light catching its top, a faint rim */
.hero-replay{background:radial-gradient(120% 95% at 30% 12%,#ffffff2b 0%,#ffffff12 42%,#ffffff07 100%)!important;-webkit-backdrop-filter:blur(18px) saturate(1.6) brightness(1.1);backdrop-filter:blur(18px) saturate(1.6) brightness(1.1);border:1px solid #ffffff33!important;box-shadow:0 10px 26px #00000040,inset 0 1px 0 #ffffff5c,inset 0 -1px 0 #ffffff12,inset 0 0 16px #ffffff0d!important;color:#fbf5e9!important}
.hero-replay:hover{background:radial-gradient(120% 95% at 30% 12%,#ffffff40 0%,#ffffff1c 42%,#ffffff0d 100%)!important;border-color:#ffffff52!important;color:#fff!important}

/* Phones: the gold slash before section titles sits inside the margin, never against the screen edge */
@media(max-width:700px){.section-heading h2{text-indent:16px}.section-heading h2:before{left:0}}

/* Outline buttons turn cream on hover: their label (and any secondary text) must turn dark to stay legible */
.button-outline:hover,.button-outline:focus-visible{color:#15120d!important}
.button-outline:hover .download-size,.button-outline:focus-visible .download-size{color:#5a5248!important}
.everseed .button-outline:hover,.everseed .button-outline:focus-visible{color:#f3dfb2!important}

/* Phones: section headings read top to bottom — kicker, title, one short line under it, then the intro.
   The side note no longer floats to the right with empty space around it. */
@media(max-width:700px){
  .section-heading{align-items:flex-start!important;gap:10px!important;padding-top:22px!important}
  .section-heading>div{width:100%}
  .section-heading>p{max-width:none!important;font-size:13px!important;line-height:1.55!important;margin:0!important;padding:0!important;opacity:.9}
  .section-heading>p br{display:none}
  .section-intro{margin-top:14px!important}
  .books .library{margin-top:0!important}
}
/* Phones: the closing section right above already carries the three social buttons, so the footer doesn't repeat them */
@media(max-width:700px){footer .social-links{display:none!important}}