/* 100s Labo Business — page styles.
   Loaded AFTER ../assets/css/style.css: the header, footer, buttons, social
   row and section title come from the shared stylesheet; this file re-tunes
   the palette to the Business/data-explainer look (Cream Editorial: paper
   cream, deep warm brown ink, one rust accent, Noto Sans) and adds the
   episode / stat components the music site doesn't have. */

:root{
  --bg:#FAF6EC;          /* card paper */
  --body-bg:#EDE5D1;     /* Warm Cream — brand background */
  --ink:#4A3626;         /* Deep Warm Brown — same hex as the logo mark */
  --dim:#8C7458;         /* secondary text */
  --line:#D9CDB4;
  --rust:#A9633E;        /* the one accent — numbers, emphasis */
  --rust-soft:#D8BBA0;
}
html{font-size:19px;}
body{font-family:'Noto Sans TC','Space Grotesk',sans-serif;}
body::before{opacity:.025;}

/* the music site sets `.site-header a:focus-visible{outline-color:var(--bg)}`;
   our --bg is the card paper, still fine on the dark header */

/* ------------------------------------------------------ header ---- */
.site-header .brand img{border-radius:50%;}
.brand-text{display:flex; flex-direction:column; line-height:1.15; letter-spacing:.5px;}
.brand-text .bt-top{font-size:12px; color:rgba(250,246,236,.7); font-weight:500; letter-spacing:1.5px;}
.brand-text .bt-main{font-size:19px; font-weight:900; color:var(--bg);}
.brand-text .bt-main em{font-style:normal; color:var(--rust-soft);}
.site-nav a.nav-sister{margin-left:6px; border:1px solid rgba(250,246,236,.28);}
@media(max-width:640px){
  .brand-text .bt-top{display:none;}
  .brand-text .bt-main{font-size:15px;}
  .site-nav a.nav-sister{margin-left:0; border:0;}
}

/* -------------------------------------------------------- hero ---- */
/* banner is live text over the lockup (not the PNG channel banner): the
   tagline is copy that changes, and copy lives in HTML, not in an image */
.biz-banner{
  background:
    radial-gradient(circle at 85% 8%, rgba(169,99,62,.10), transparent 45%),
    linear-gradient(180deg, #F3EBD8, var(--body-bg));
  border-bottom:1px solid var(--line);
  padding:56px 24px 48px; text-align:center;
}
.biz-banner .bb-lockup{width:min(380px,70vw); height:auto; margin:0 auto 26px;}
.biz-banner .bb-tag{font-size:clamp(28px,4.6vw,52px); font-weight:900; letter-spacing:3px; line-height:1.2; margin-bottom:10px;}
.biz-banner .bb-tag em{font-style:normal; color:var(--rust);}
.biz-banner .bb-sub{font-size:clamp(14px,1.6vw,18px); font-weight:500; letter-spacing:3px; color:var(--dim);}
@media(max-width:640px){ .biz-banner{padding:36px 20px 32px;} .biz-banner .bb-lockup{margin-bottom:18px;} }

.hero.biz{padding:56px 24px 40px;}
.hero .kicker{font-size:14px; letter-spacing:5px; color:var(--rust); font-weight:700; margin-bottom:14px;}
.hero .biz-title{font-size:clamp(34px,5.4vw,58px); font-weight:900; letter-spacing:2px; line-height:1.2; margin-bottom:10px;}
.hero .biz-title em{font-style:normal; color:var(--rust);}
.hero .biz-tag{font-size:clamp(19px,2.4vw,24px); font-weight:700; letter-spacing:1.5px; color:var(--ink); margin-bottom:22px;}
.hero p.about{font-size:19px; line-height:1.95; letter-spacing:.2px; max-width:700px; margin-bottom:12px; font-weight:400;}
.hero p.about + p.about{margin-bottom:30px;}
.hero .about strong{font-weight:900; color:var(--rust);}
.btn{border-radius:14px; letter-spacing:.5px;}
.btn-solid{box-shadow:0 10px 26px -10px rgba(74,54,38,.5);}

/* launch status pill under the hero — text is static (server-side truth);
   business.js only swaps it once the launch date has passed */
.launch-pill{display:inline-flex; align-items:center; gap:10px; margin-top:26px; padding:10px 18px; border-radius:999px; background:var(--bg); border:1px solid var(--line); font-size:15px; font-weight:700; letter-spacing:.5px; color:var(--ink); box-shadow:0 6px 18px rgba(74,54,38,.08);}
.launch-pill .dot{width:8px; height:8px; border-radius:50%; background:var(--rust); box-shadow:0 0 0 4px rgba(169,99,62,.18);}

/* ------------------------------------------------- section title ---- */
.section-title{color:var(--ink); letter-spacing:4px; font-size:18px;}
.section-title::after{background:var(--rust); opacity:.8; width:44px;}
.section-sub{max-width:720px; margin:-22px auto 34px; text-align:center; font-size:17px; color:var(--dim); line-height:1.85; letter-spacing:.2px;}
.section-sub strong{color:var(--ink); font-weight:700;}
.section.tight{padding-top:20px;}

/* ------------------------------------------------ the question ---- */
.question-band{background:var(--ink); color:var(--bg); padding:56px 24px; text-align:center; position:relative; overflow:hidden;}
.question-band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 85% 10%, rgba(169,99,62,.25), transparent 45%);
}
.question-band .wrap{position:relative; z-index:1;}
.question-band .q-eyebrow{font-size:14px; letter-spacing:4px; color:var(--rust-soft); font-weight:700; margin-bottom:14px;}
.question-band .q-big{font-size:clamp(40px,7vw,76px); font-weight:900; letter-spacing:6px; line-height:1.15; margin-bottom:16px;}
.question-band .q-big em{font-style:normal; color:var(--rust-soft);}
.question-band .q-line{font-size:18px; line-height:1.9; color:rgba(250,246,236,.8); max-width:640px; margin:0 auto; letter-spacing:.2px;}

/* ------------------------------------------------- series strip ---- */
.series-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; max-width:1080px; margin:0 auto 26px; padding-bottom:18px; border-bottom:3px solid var(--rust);}
.series-head .sh-eyebrow{font-size:13px; letter-spacing:4px; color:var(--rust); font-weight:700; margin-bottom:8px;}
.series-head .sh-name{font-size:clamp(30px,4.6vw,44px); font-weight:900; letter-spacing:3px; line-height:1.15;}
.series-head .sh-meta{font-size:15px; color:var(--dim); font-weight:500; letter-spacing:.5px; line-height:1.8; text-align:right;}
.series-head .sh-meta b{color:var(--ink); font-weight:900;}
@media(max-width:640px){ .series-head .sh-meta{text-align:left;} }

.schedule{display:grid; grid-template-columns:repeat(6,1fr); gap:8px; max-width:1080px; margin:0 auto 34px;}
.schedule a{display:block; text-align:center; padding:12px 6px 10px; border-radius:14px; background:var(--bg); border:1px solid var(--line); transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.schedule a:hover{transform:translateY(-3px); box-shadow:0 10px 22px rgba(74,54,38,.14);}
.schedule .sc-ep{font-size:22px; font-weight:900; color:var(--rust); line-height:1;}
.schedule .sc-date{font-size:14px; font-weight:700; margin-top:6px; letter-spacing:.5px;}
.schedule .sc-name{font-size:12px; color:var(--dim); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.schedule a.is-out{border-color:var(--rust); box-shadow:inset 0 0 0 1px var(--rust);}
@media(max-width:760px){ .schedule{grid-template-columns:repeat(3,1fr);} }

/* ----------------------------------------------- episode cards ---- */
.ep-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:1080px; margin:0 auto;}
@media(max-width:760px){ .ep-grid{grid-template-columns:1fr;} }
.ep-card{display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:0 6px 18px rgba(74,54,38,.08); transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.ep-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(74,54,38,.18);}
.ep-thumb{position:relative; aspect-ratio:16/9; background:#0d0906; overflow:hidden;}
.ep-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.ep-card:hover .ep-thumb img{transform:scale(1.04);}
.ep-thumb .ep-status{position:absolute; left:14px; bottom:12px; padding:6px 12px; border-radius:999px; background:rgba(74,54,38,.9); color:var(--bg); font-size:13px; font-weight:700; letter-spacing:1px; backdrop-filter:blur(4px);}
.ep-card.is-out .ep-thumb .ep-status{background:var(--rust);}
.ep-thumb .ep-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s var(--ease);}
.ep-card.is-out:hover .ep-thumb .ep-play{opacity:1;}
.ep-thumb .ep-play svg{width:56px; height:56px; filter:drop-shadow(0 1px 4px rgba(0,0,0,.5));}
.ep-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:12px; flex:1;}
.ep-kicker{font-size:13px; letter-spacing:1.5px; color:var(--dim); font-weight:700;}
.ep-kicker b{color:var(--rust); font-weight:900; margin-right:6px;}
.ep-title{font-size:24px; font-weight:900; letter-spacing:1px; line-height:1.3;}
.ep-title small{display:block; font-size:15px; font-weight:500; color:var(--dim); letter-spacing:.2px; margin-top:4px; line-height:1.6;}

/* the hook: "before → after" number pair, the same beat as frame 1 of the video */
.hook{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:14px 16px; border-radius:16px; background:var(--body-bg); border:1px solid var(--line);}
.hook .h-cell{min-width:0;}
.hook .h-label{font-size:12.5px; color:var(--dim); font-weight:600; letter-spacing:.3px; margin-bottom:2px; line-height:1.4;}
.hook .h-num{font-family:'Space Grotesk','Noto Sans TC',sans-serif; font-size:clamp(24px,2.6vw,30px); font-weight:700; letter-spacing:-.5px; line-height:1.1; color:var(--ink); white-space:nowrap;}
.hook .h-num .unit{font-family:'Noto Sans TC',sans-serif; font-size:.62em; font-weight:900; letter-spacing:0; margin-left:1px;}
.hook .h-cell.after .h-num{color:var(--rust);}
.hook .h-cell.after{text-align:right;}
.hook .h-arrow{color:var(--rust); font-weight:900; font-size:22px; line-height:1;}
.hook .h-arrow svg{width:28px; height:16px; display:block;}
.ep-blurb{font-size:15.5px; line-height:1.85; color:var(--ink); letter-spacing:.2px;}
.ep-foot{margin-top:auto; padding-top:4px; display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13.5px; color:var(--dim); font-weight:600; letter-spacing:.3px;}
.ep-foot .ef-cta{color:var(--rust); font-weight:900;}
.ep-card.is-soon .ep-foot .ef-cta{color:var(--dim); font-weight:700;}

/* season-2 / held cards: quieter until they have a date */
.ep-card.is-held{opacity:.86;}
.ep-card.is-held:hover{opacity:1;}

/* ---------------------------------------------------- format row ---- */
.format-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:1080px; margin:0 auto;}
@media(max-width:900px){ .format-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:480px){ .format-grid{grid-template-columns:1fr;} }
.fmt{background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:24px 22px; box-shadow:0 6px 18px rgba(74,54,38,.06);}
.fmt .f-num{font-family:'Space Grotesk','Noto Sans TC',sans-serif; font-size:44px; font-weight:700; color:var(--rust); line-height:1; margin-bottom:10px; letter-spacing:-1px;}
.fmt .f-num .unit{font-family:'Noto Sans TC',sans-serif; font-size:.5em; font-weight:900; letter-spacing:0;}
.fmt .f-name{font-size:19px; font-weight:900; letter-spacing:1px; margin-bottom:8px;}
.fmt .f-line{font-size:15px; color:var(--dim); line-height:1.8; letter-spacing:.2px;}

/* the six beats of every episode, drawn from the chapter markers */
.beats{max-width:1080px; margin:30px auto 0; display:grid; grid-template-columns:repeat(6,1fr); gap:0; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:var(--bg);}
@media(max-width:900px){ .beats{grid-template-columns:repeat(3,1fr);} }
@media(max-width:480px){ .beats{grid-template-columns:repeat(2,1fr);} }
.beat{padding:18px 16px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
.beat .b-t{font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700; color:var(--rust); letter-spacing:.5px; margin-bottom:6px;}
.beat .b-n{font-size:16px; font-weight:900; letter-spacing:.5px; margin-bottom:4px;}
.beat .b-d{font-size:13.5px; color:var(--dim); line-height:1.7;}

/* -------------------------------------------------- about / sister ---- */
.about-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:22px; max-width:1080px; margin:0 auto; align-items:stretch;}
@media(max-width:820px){ .about-grid{grid-template-columns:1fr;} }
.about-card{background:var(--bg); border:1px solid var(--line); border-radius:22px; padding:30px 30px; box-shadow:0 6px 18px rgba(74,54,38,.06);}
.about-card h3{font-size:22px; font-weight:900; letter-spacing:1.5px; margin-bottom:14px;}
.about-card p{font-size:16.5px; line-height:1.9; letter-spacing:.2px; margin-bottom:12px;}
.about-card p:last-child{margin-bottom:0;}
.about-card .credit{font-size:14px; color:var(--dim); font-weight:600; letter-spacing:1px; margin-top:16px; padding-top:14px; border-top:1px dashed var(--line);}
.sister-card{display:flex; flex-direction:column; justify-content:space-between; gap:18px; background:var(--ink); color:var(--bg); border-color:var(--ink);}
.sister-card h3{color:var(--bg);}
.sister-card p{color:rgba(250,246,236,.8);}
.sister-card .sister-logo{width:56px; height:56px; border-radius:50%; margin-bottom:14px;}
.sister-card .btn{border-color:var(--bg); color:var(--bg); align-self:flex-start;}
.sister-card .btn:hover{background:var(--bg); color:var(--ink);}

/* ------------------------------------------------------ socials ---- */
.social-handle{text-align:center; margin-top:20px; font-size:15px; color:var(--dim); font-weight:600; letter-spacing:1px;}
.social-handle b{color:var(--ink); font-weight:900;}

/* ------------------------------------------------------- footer ---- */
.site-footer .f-tag{font-size:14px;}
.site-footer .f-links{display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; font-size:13px;}
.site-footer .f-links a{color:rgba(250,246,236,.7); text-decoration:underline; text-underline-offset:3px;}
.site-footer .f-links a:hover{color:var(--bg);}

/* ------------------------------------------------------- mobile ---- */
@media(max-width:640px){
  .hero.biz{padding:32px 20px 24px;}
  .hero p.about{font-size:16.5px;}
  .question-band{padding:40px 20px;}
  .question-band .q-big{letter-spacing:3px;}
  .ep-body{padding:16px 16px 18px;}
  .ep-title{font-size:21px;}
  .hook{padding:12px 12px;}
  .hook .h-num{font-size:22px;}
  .fmt{padding:20px 18px;}
  .about-card{padding:22px 20px;}
}

/* reveal.js (shared) only animates .section-title here; the episode cards
   stay visible from first paint so the launch schedule never flashes blank */
@media(prefers-reduced-motion:reduce){
  .ep-card, .ep-card:hover, .ep-thumb img, .schedule a, .schedule a:hover{transition:none !important;}
}