/* Page-level layout: scroll progress, hero, nav shell, container, sections, back-top. */

.scroll-progress{
  position:fixed;top:0;left:0;
  height:3px;width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  z-index:200;
  transition:width 90ms linear;
  box-shadow:0 0 12px rgba(201,161,75,0.4);
}

/* Hero — slim. Title, tagline, single chip. */
.hero{
  position:relative;
  background:
    radial-gradient(800px 360px at 50% -10%,rgba(43,168,188,0.18),transparent 60%),
    radial-gradient(640px 320px at 90% 110%,rgba(201,161,75,0.12),transparent 60%),
    linear-gradient(160deg,var(--navy-deep),var(--navy) 50%,var(--navy-mid));
  color:var(--white);
  padding:clamp(28px,5vw,52px) 22px clamp(28px,5vw,52px);
  overflow:hidden;
  border-bottom:1px solid rgba(201,161,75,0.22);
}
.hero::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    radial-gradient(1px 1px at 18% 30%,rgba(255,255,255,0.55),transparent),
    radial-gradient(1px 1px at 38% 70%,rgba(255,255,255,0.4),transparent),
    radial-gradient(1.2px 1.2px at 62% 22%,rgba(255,255,255,0.5),transparent),
    radial-gradient(1px 1px at 82% 60%,rgba(255,255,255,0.4),transparent);
  opacity:0.5;pointer-events:none;
}
.hero::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;
  height:32px;
  background:linear-gradient(to bottom,transparent,var(--cream));
  pointer-events:none;
}
.hero-inner{position:relative;max-width:720px;margin:0 auto;text-align:center}

.hero h1{
  font-family:'Fraunces',serif;
  font-size:clamp(2rem,5.6vw,3.4rem);
  font-weight:500;line-height:1.04;letter-spacing:-0.025em;
  color:var(--white);margin:0 0 6px;
  font-variation-settings:'opsz' 144;
}
.hero h1 em{font-style:italic;color:var(--gold-bright);font-weight:400}
.hero .tagline{
  font-family:'Fraunces',serif;
  font-size:clamp(0.94rem,1.8vw,1.06rem);
  color:rgba(255,255,255,0.78);
  font-weight:300;font-style:italic;
  margin:0 auto 16px;max-width:520px;line-height:1.45;
}
.hero-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:999px;
  padding:6px 14px;
  font-size:0.82rem;
  color:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.hero-chip svg{width:13px;height:13px;opacity:0.85}

/* Day-chips — sticky horizontal day picker.
   Visible only when current section is a day-section (primer / d1-d8). */
.day-chips{
  position:sticky;top:0;z-index:100;
  background:rgba(250,246,238,0.86);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
  padding:6px 8px;
  display:flex;flex-wrap:nowrap;overflow-x:auto;gap:2px;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.day-chips::-webkit-scrollbar{display:none}
body:not(.show-day-chips) .day-chips{display:none}

.tab{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:8px 14px;min-width:78px;min-height:48px;
  background:transparent;border:none;border-radius:10px;
  cursor:pointer;
  transition:background var(--t-fast);
  position:relative;
  font-family:'Inter',sans-serif;
  scroll-snap-align:center;
}
.tab .tab-top{font-family:'JetBrains Mono',monospace;font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);font-weight:500;line-height:1;transition:color var(--t-fast)}
.tab .tab-bot{font-family:'Inter',sans-serif;font-size:0.86rem;font-weight:600;color:var(--text-soft);line-height:1.15;margin-top:3px;white-space:nowrap;transition:color var(--t-fast)}
.tab.active{background:rgba(201,161,75,0.12)}
.tab.active .tab-top{color:var(--gold-deep)}
.tab.active .tab-bot{color:var(--navy)}
.tab.active::after{
  content:'';position:absolute;left:18px;right:18px;bottom:2px;
  height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  border-radius:2px;
  box-shadow:0 0 10px rgba(201,161,75,0.5);
}
.tab:active{background:rgba(20,35,59,0.08)}
@media (hover:hover) and (pointer:fine){
  .tab:hover{background:rgba(20,35,59,0.04)}
  .tab:hover .tab-bot{color:var(--ocean)}
}

/* Today-glow — applied by JS to the chip matching the live calendar day. */
.tab.is-today .tab-top{color:var(--teal)}
.tab.is-today::before{
  content:'';
  position:absolute;top:6px;right:8px;
  width:6px;height:6px;border-radius:50%;
  background:var(--teal-light);
  box-shadow:0 0 0 3px rgba(43,168,188,0.18);
  animation:pulse 2.4s infinite;
}

/* Bottom nav — fixed, glassy, 5 cells, thumb-friendly. */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;
  z-index:120;
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:0;
  background:rgba(250,246,238,0.92);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-top:1px solid var(--line);
  padding:0 8px calc(var(--safe-bottom) + 4px);
  box-shadow:0 -4px 18px rgba(10,22,40,0.06);
}
.bn-btn{
  appearance:none;background:transparent;border:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:10px 4px 6px;
  min-height:56px;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  color:var(--muted);
  transition:color var(--t-fast),transform var(--t-fast);
  position:relative;
}
.bn-icon{display:inline-flex;align-items:center;justify-content:center}
.bn-icon svg{width:24px;height:24px;stroke:currentColor}
.bn-label{
  font-family:'Inter',sans-serif;
  font-size:0.7rem;font-weight:600;letter-spacing:0.02em;
  line-height:1;
}
.bn-btn:active{transform:scale(0.94)}
.bn-btn.active{color:var(--gold-deep)}
.bn-btn.active .bn-icon::after{
  content:'';
  position:absolute;top:6px;
  width:32px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  box-shadow:0 0 12px rgba(201,161,75,0.5);
}
@media (hover:hover) and (pointer:fine){
  .bn-btn:hover{color:var(--ocean)}
  .bn-btn.active:hover{color:var(--gold-deep)}
}

/* Container + sections.
   Bottom padding accounts for fixed bottom nav + iOS safe area. */
.container{
  max-width:880px;margin:0 auto;
  padding:36px 16px calc(var(--bottom-nav-h) + var(--safe-bottom) + 32px);
}
.section{display:none}
.section.active{display:block}

/* Back-to-top FAB — sits above bottom nav. */
.back-top{
  position:fixed;
  right:18px;
  bottom:calc(var(--bottom-nav-h) + var(--safe-bottom) + 18px);
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--navy),var(--ocean));
  color:var(--gold-bright);
  border:1px solid rgba(201,161,75,0.3);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;
  transition:opacity var(--t-med),transform var(--t-med);
  transform:translateY(20px);
  z-index:90;
}
.back-top.visible{opacity:1;pointer-events:auto;transform:none}
.back-top svg{width:18px;height:18px}

/* Mobile tweaks */
@media(max-width:600px){
  .container{padding:28px 14px calc(var(--bottom-nav-h) + var(--safe-bottom) + 24px)}
  .countdown .unit{padding:12px 14px;min-width:64px}
  .day-chips{padding:5px 6px}
  .tab{padding:7px 12px;min-width:72px;min-height:46px}
  .tab .tab-top{font-size:0.6rem}
  .tab .tab-bot{font-size:0.82rem}
  .bn-icon svg{width:22px;height:22px}
  .bn-label{font-size:0.66rem}
}