/* The metallic edges are native CSS strokes, never part of a raster texture. */
:root { --home-ink:#061925; --home-ivory:#faf6ee; --home-gold:#e8c47d; --leather-image:url('./assets/home/leather.webp'); }
body { background:#071721; }
.app-frame { isolation:isolate; }
.app-frame.home-active { background:var(--home-ink); color:var(--home-ivory); }
.home-scenery { position:absolute; inset:0 0 auto; height:390px; overflow:hidden; z-index:-1; pointer-events:none; }
.home-scenery img { width:100%; height:100%; object-fit:cover; object-position:right center; }
.home-curtain-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; opacity:0; }
.home-curtain-video.ready { opacity:1; }
.home-motion-control { position:absolute; top:282px; right:17px; z-index:2; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; color:#f0d491; background:#06192599; border:1px solid #e6bd7255; }
.home-motion-control:focus-visible { outline:2px solid #fff2c9; outline-offset:3px; }
.home-scenery::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#0006,transparent 75%),linear-gradient(0deg,var(--home-ink),transparent 16%); }
.pilot-ribbon { background:#071925; color:#d5c7ad; font-size:8px; min-height:26px; padding-block:6px; }
.pilot-dot { background:#dab973; }
.topbar { padding:20px 22px 10px; min-height:92px; background:linear-gradient(#0a202c,#071c28); color:#fffaf1; }
.home-active .topbar { background:none; }
.brand { gap:12px; }
.brand img { width:34px; height:55px; filter:grayscale(1) brightness(2.6); }
.brand>span { font-size:35px; letter-spacing:3px; text-shadow:0 1px 2px #0009; }
.brand small { font-family:var(--serif); font-size:8px; letter-spacing:2px; }
.header-actions { gap:10px; }
.notifications { background:linear-gradient(135deg,#254556,#051722 65%); color:#f3d698; border:1px solid #d5b775; box-shadow:inset 0 0 0 3px #071822,0 3px 6px #0005; }
.badge { background:#b52e37; border-color:#e3bd79; right:-3px; top:-3px; font-size:10px; min-width:18px; height:18px; }
.topbar .avatar { position:relative; display:block; padding:0; flex:0 0 44px; overflow:hidden; width:44px; height:44px; background:#102a39; color:#ead9b1; border:1px solid #d5b775; box-shadow:0 3px 6px #0005; }
.topbar .avatar img { display:block; position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center 36%; border-radius:50%; }
.topbar .avatar>span { display:grid; place-items:center; width:100%; height:100%; }
.home-active main { padding-bottom:calc(106px + env(safe-area-inset-bottom)); }
.home-welcome { padding:28px 22px 0; min-height:218px; }
.home-welcome h1 { font-size:clamp(39px,10.9vw,57px); font-weight:600; letter-spacing:-1px; line-height:1.02; text-shadow:0 2px 8px #0009; overflow-wrap:anywhere; }
.home-welcome p { font-family:var(--serif); font-size:clamp(18px,5.4vw,27px); line-height:1.2; color:#fff9ee; text-shadow:0 2px 5px #000; margin-top:8px; max-width:95%; }
.home-card-stack { display:flex; flex-direction:column; gap:13px; padding:0 13px; }
.leather-card { position:relative; isolation:isolate; border:1px solid #4b6b7b; border-radius:17px; color:var(--home-ivory); background:linear-gradient(135deg,#0d2833a6,#021420c9),var(--leather-image) center/340px; box-shadow:inset 0 2px 2px #91b5c177,inset 0 -3px 3px #000c,0 4px 6px #0009,0 0 0 2px #020e16; }
.leather-card::after { content:''; position:absolute; inset:4px; border:1px solid #e6bd72; border-radius:12px; box-shadow:0 0 0 1px #080f13,inset 0 1px 1px #fff0c13b; pointer-events:none; z-index:3; }
.next-lesson { display:grid; grid-template-columns:46% minmax(0,1fr); padding:18px 15px 7px 8px; column-gap:8px; row-gap:9px; min-height:220px; overflow:hidden; }
.lesson-calendar { position:absolute; inset:5px auto 5px 5px; width:54%; overflow:hidden; border-radius:12px 0 0 12px; z-index:-1; mask-image:linear-gradient(90deg,#000 65%,transparent 100%); }
.calendar-scene { position:absolute; width:255px; height:255px; top:50%; left:42%; transform:translate(-50%,-50%); }
.lesson-calendar img { width:100%; height:100%; display:block; }
.calendar-print { position:absolute; inset:32% 25% 40% 29%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#182631; font-family:var(--serif); transform:rotate(-3deg) skewX(7deg); }
.calendar-print strong { font-size:51px; font-weight:500; line-height:.9; font-variant-numeric:lining-nums; }
.calendar-print span { text-transform:uppercase; font-size:21px; line-height:1.1; }
.home-kicker { font-family:var(--serif); font-size:18px; line-height:1.15; color:#f0d491; margin:0 0 6px; }
.next-lesson-copy { grid-column:2; min-width:0; padding-top:0; text-align:center; }
.next-lesson h2 { font-family:var(--serif); font-size:clamp(25px,7vw,35px); font-weight:600; line-height:1.02; overflow-wrap:anywhere; }
.lesson-time { color:#d5d7d8; font-family:var(--serif); font-size:19px; line-height:1.2; margin-top:4px; }
.lesson-state { display:inline-flex; align-items:center; gap:7px; border:1px solid #b69b60; color:#edda9c; border-radius:30px; font-family:var(--serif); font-size:16px; padding:4px 9px; margin-top:8px; line-height:1.05; }
.lesson-state i { width:7px; height:7px; border-radius:50%; background:#9dd77c; flex-shrink:0; }
.lesson-state.pending i { background:#e3bc69; }
.home-gold-button { position:relative; grid-column:2; min-height:46px; display:flex; align-items:center; justify-content:center; gap:5px; color:#17222a; padding:9px 6px; background:linear-gradient(120deg,#c89e5b,#f4db9b 45%,#dfb976 77%,#bb8e4c); box-shadow:inset 0 1px 1px #ffeed0,inset 0 -2px 3px #7043155c,0 3px 5px #0007; border:1px solid #f0d69c; border-radius:10px; font:600 18px/1.1 var(--serif); }
.home-gold-button::after { content:''; position:absolute; inset:2px; border:1px solid #fff0cc85; border-radius:7px; pointer-events:none; }
.home-gold-button svg { flex-shrink:0; }
.next-lesson>.home-gold-button { justify-self:center; width:92%; max-width:220px; min-width:0; text-align:center; }
.home-agenda-link { grid-column:2; min-height:44px; display:flex; justify-content:center; align-items:center; gap:7px; color:#f0d491; font:500 17px/1.2 var(--serif); text-decoration:underline; text-underline-offset:3px; }
.home-empty-lesson { grid-column:1 / -1; padding:10px 15px; text-align:center; }
.home-empty-lesson>svg { color:var(--home-gold); margin-bottom:9px; }
.home-empty-lesson>p:not(.home-kicker) { font-size:12px; color:#d5d7d8; margin:10px 0 15px; }
.home-empty-lesson .home-gold-button { width:100%; }
.home-service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.home-service { padding:5px; min-width:0; display:flex; flex-direction:column; overflow:hidden; text-align:left; }
.service-photo { width:100%; height:80px; object-fit:cover; border-radius:11px 11px 0 0; }
.service-label { display:flex; align-items:center; width:100%; gap:6px; padding:13px 7px; min-height:57px; }
.service-label>svg { color:#e8c982; flex-shrink:0; }
.service-label>svg:last-child { margin-left:auto; width:13px; }
.service-label>span { font:600 18px/1.05 var(--serif); }
.home-wide-card { min-height:104px; display:flex; align-items:center; padding:18px 15px; gap:12px; overflow:hidden; text-align:left; }
.wide-card-icon { flex-shrink:0; color:#e9ca84; position:relative; }
.wide-card-copy { display:flex; flex-direction:column; gap:4px; z-index:1; max-width:53%; text-shadow:0 1px 5px #000; }
.wide-card-copy strong { font:600 23px/1.03 var(--serif); }
.wide-card-copy small { font:400 15px/1.05 var(--serif); color:#d4d6d8; }
.wide-card-chevron { color:#e8c47d; z-index:1; flex-shrink:0; position:absolute; left:61%; width:17px; filter:drop-shadow(0 1px 3px #000); }
.wide-card-art { position:absolute; inset:5px; z-index:-1; border-radius:12px; overflow:hidden; }
.wide-card-art::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#06192588 0%,#06192566 51%,transparent 71%); }
.progress-art { background:url('./assets/home/progress-photo-v2.webp') center/cover no-repeat; }
.gallery-art svg { display:block; width:100%; height:100%; }
.book-foil { fill:#d4af59; font-family:var(--serif); }
/* A single upholstered strip, with pressed grooves, not five separate cards. */
.bottom-nav { background:linear-gradient(#294a5d77,#01131cd9 83%),var(--leather-image) center/360px; border-top:1px solid #dcb674; padding:7px 4px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -4px 10px #0009,inset 0 2px 2px #c4d9e26b; backdrop-filter:none; }
.bottom-nav button { border-radius:0; min-width:0; min-height:63px; gap:7px; background:radial-gradient(ellipse at 50% 0,#97bbd026,transparent 67%); color:#e6e3df; font:500 15px/1 var(--serif); text-shadow:0 1px 2px #000; }
.bottom-nav button+button::before { content:''; position:absolute; left:-3px; top:2px; bottom:3px; width:6px; border-radius:50%; background:linear-gradient(90deg,#738a9820,#010d16d6 48%,#6582974d 90%,transparent); }
.bottom-nav button svg { width:27px; height:27px; color:#e4d5bd; filter:drop-shadow(0 1px 1px #000); }
.bottom-nav button.active { background:radial-gradient(ellipse at 50% 0,#c5b17e27,transparent 70%); color:#f7db95; }
.bottom-nav button.active svg { color:#f7d58a; filter:drop-shadow(0 0 4px #d8a95355); }
.bottom-nav button.active::after { content:''; width:4px; height:4px; background:#efca7f; border-radius:50%; position:absolute; bottom:-6px; }
.bottom-nav button i { top:4px; right:22%; }
.premium-home button { -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:filter 140ms,box-shadow 140ms; }
.premium-home button:active { filter:brightness(1.13); }
.premium-home button:focus-visible,.bottom-nav button:focus-visible,.topbar button:focus-visible { outline:2px solid #fff2c9; outline-offset:3px; }
@media(hover:hover) { .premium-home button:hover { filter:brightness(1.1); } }
@media(max-width:360px) {
 .topbar { padding-inline:17px; gap:10px; }
 .brand { gap:8px; }.brand img { width:28px; height:45px; }.brand>span { font-size:30px; }.brand small { font-size:7px; }
 .header-actions { gap:8px; }
 .home-welcome { padding-inline:18px; min-height:190px; }
 .home-scenery { height:355px; }
 .home-motion-control { top:254px; right:14px; }
 .home-card-stack { padding-inline:10px; gap:12px; }
 .next-lesson { grid-template-columns:42% minmax(0,1fr); gap:8px; padding-right:13px; }
 .calendar-scene { width:238px; height:238px; left:40%; }
 .calendar-print strong { font-size:45px; }
 .home-kicker { font-size:16px; }.lesson-time { font-size:17px; }.lesson-state { font-size:14px; }
 .home-gold-button { font-size:17px; }.home-agenda-link { font-size:15px; }
 .service-label { padding:12px 6px; gap:6px; }.service-label>span { font-size:17px; }.service-label>svg:first-child { width:22px; }.service-label>svg:last-child { width:10px; }
 .wide-card-copy strong { font-size:21px; }.wide-card-copy small { font-size:14px; }
 .home-wide-card { gap:10px; padding-inline:13px; }.wide-card-icon { width:27px; }
 .bottom-nav button { font-size:14px; }
}
@media(min-width:460px) { .home-scenery { height:440px; }.home-welcome { min-height:265px; }.next-lesson { min-height:250px; }.calendar-scene { width:305px; height:305px; }.calendar-print strong { font-size:62px; }.calendar-print span { font-size:25px; }.service-photo { height:106px; }.service-label>span { font-size:23px; }.home-wide-card { min-height:112px; } }
@media(prefers-reduced-motion:reduce) { .premium-home button { transition:none; } }
@media(min-width:460px) { .home-motion-control { top:329px; } }