/* Coffee Break Filmschool
   Fraunces (display) + Inter (UI), self-hosted. Warm espresso palette,
   light and dark, with an explicit toggle layered over the system default. */
@import url("fonts/fonts.css");

/* ---- light (default) ---- */
:root{
  --bg:#faf7f3; --bg2:#fffdfb; --raise:#ffffff;
  --line:#e8ded1; --line2:#d9cbb9;
  --ink:#1b1310; --ink2:#3d302a; --mut:#7a6a5e;
  --acc:#a9541f; --acc2:#c2691f; --ring:#a9541f33;
  --hero:url("img/hero-light-1920.webp");
  --hero-scrim:linear-gradient(96deg,#faf7f3 0%,#faf7f3 38%,#faf7f3e8 50%,#faf7f36e 64%,#faf7f300 82%);
  --hero-scrim-m:linear-gradient(180deg,#faf7f300 0%,#faf7f300 26%,#faf7f3b8 48%,#faf7f3 68%);
  --logo-glow:none;
  --shadow:0 1px 2px #1b131008, 0 8px 24px -12px #1b131029;
  --shadow-lg:0 2px 4px #1b13100a, 0 24px 48px -20px #1b131038;
  --rad:14px; --w:1200px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  color-scheme:light;
}
/* ---- dark: system default, unless explicitly set to light ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f0b09; --bg2:#171110; --raise:#1d1614;
    --line:#2b211d; --line2:#3a2d27;
    --ink:#f4ece3; --ink2:#e0d3c7; --mut:#9d8b7e;
    --acc:#e0a05e; --acc2:#f0b876; --ring:#e0a05e33;
    --hero:url("img/hero-dark-1920.webp");
    --hero-scrim:linear-gradient(96deg,#0f0b09 0%,#0f0b09 38%,#0f0b09e8 50%,#0f0b096e 64%,#0f0b0900 82%);
    --hero-scrim-m:linear-gradient(180deg,#0f0b0900 0%,#0f0b0900 26%,#0f0b09b8 48%,#0f0b09 68%);
    --logo-glow:drop-shadow(0 2px 10px #e0a05e40);
    --shadow:0 1px 2px #0000004d, 0 8px 24px -12px #00000080;
    --shadow-lg:0 2px 4px #00000059, 0 24px 48px -20px #000000a6;
    color-scheme:dark;
  }
}
/* ---- dark: explicit ---- */
:root[data-theme="dark"]{
  --bg:#0f0b09; --bg2:#171110; --raise:#1d1614;
  --line:#2b211d; --line2:#3a2d27;
  --ink:#f4ece3; --ink2:#e0d3c7; --mut:#9d8b7e;
  --acc:#e0a05e; --acc2:#f0b876; --ring:#e0a05e33;
  --hero:url("img/hero-dark-1920.webp");
  --hero-scrim:linear-gradient(96deg,#0f0b09 0%,#0f0b09 38%,#0f0b09e8 50%,#0f0b096e 64%,#0f0b0900 82%);
  --hero-scrim-m:linear-gradient(180deg,#0f0b0900 0%,#0f0b0900 26%,#0f0b09b8 48%,#0f0b09 68%);
  --logo-glow:drop-shadow(0 2px 10px #e0a05e40);
  --shadow:0 1px 2px #0000004d, 0 8px 24px -12px #00000080;
  --shadow-lg:0 2px 4px #00000059, 0 24px 48px -20px #000000a6;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
  font-synthesis-weight:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 1.5rem}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px)}
.top-in{max-width:var(--w);margin:0 auto;padding:.7rem 1.5rem;display:flex;
  align-items:center;gap:1rem}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--serif);
  font-size:1.12rem;font-weight:600;letter-spacing:-.015em;
  font-variation-settings:"SOFT" 40,"WONK" 1}
.brand img{width:30px;height:auto;filter:var(--logo-glow)}
.brand em{font-style:italic;color:var(--acc);font-weight:500}
.spacer{flex:1}
.ttoggle{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);background:var(--bg2);cursor:pointer;
  transition:border-color .2s,transform .2s,background .2s}
.ttoggle:hover{border-color:var(--acc);transform:rotate(-12deg);background:var(--raise)}
.ttoggle svg{width:17px;height:17px;stroke:var(--ink2);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.i-sun{display:none}.i-moon{display:block}
:root[data-theme="dark"] .i-sun{display:block}
:root[data-theme="dark"] .i-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .i-sun{display:block}
  :root:not([data-theme="light"]) .i-moon{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;
  border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:var(--hero) 82% center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--hero-scrim)}
.hero-in{max-width:var(--w);margin:0 auto;padding:6.5rem 1.5rem 5.5rem}
.hero h1{font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 45,"WONK" 1;
  font-size:clamp(2.6rem,6.4vw,4.6rem);line-height:1.02;letter-spacing:-.032em;
  margin:0 0 1.1rem;max-width:12ch;text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--acc);font-weight:500}
.lede{color:var(--ink2);font-size:clamp(1.02rem,1.5vw,1.19rem);max-width:36ch;margin:0}
.stats{display:flex;flex-wrap:wrap;gap:2.2rem;margin-top:2.6rem}
.stat b{display:block;font-family:var(--serif);font-size:1.85rem;font-weight:600;
  letter-spacing:-.02em;line-height:1.1}
.stat span{color:var(--mut);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.1em}

/* page head (course pages) */
.phead{padding:3.2rem 0 .5rem}
.ptitle{font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 45;
  font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.028em;margin:.3rem 0 .5rem;
  line-height:1.08}
.crumbs{color:var(--mut);font-size:.84rem;padding-top:1.6rem}
.crumbs a:hover{color:var(--acc)}
.crumbs i{font-style:normal;opacity:.45;margin:0 .45rem}

/* ---------- cards ---------- */
.grid{display:grid;gap:1.5rem;padding:2.2rem 0 5rem;
  grid-template-columns:repeat(auto-fill,minmax(285px,1fr))}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--rad);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,border-color .22s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line2)}
.card-img{aspect-ratio:16/9;background:var(--raise) center/cover no-repeat;
  position:relative;border-bottom:1px solid var(--line)}
.card-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,#0000 55%,#00000047);opacity:0;transition:opacity .22s}
.card:hover .card-img::after{opacity:1}
.card-body{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.4rem}
.card h3{font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 45;
  font-size:1.24rem;letter-spacing:-.018em;margin:0;line-height:1.22}
.card:hover h3{color:var(--acc)}
.meta{color:var(--mut);font-size:.82rem;margin:0;font-variant-numeric:tabular-nums}
.desc{color:var(--ink2);font-size:.9rem;margin:.15rem 0 0;line-height:1.5;opacity:.9}

/* ---------- player ---------- */
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:2.2rem;
  align-items:start;padding:1.2rem 0 5rem}
.video{aspect-ratio:16/9;background:#000;border-radius:var(--rad);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.video iframe{width:100%;height:100%;border:0;display:block}
.ltitle{font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 45;
  font-size:clamp(1.4rem,2.6vw,1.85rem);letter-spacing:-.022em;margin:1.35rem 0 .25rem;
  line-height:1.15}
.ltext{margin-top:1.3rem;color:var(--ink2);font-size:.95rem;max-width:66ch}
.ltext p{margin:.55rem 0}

.chapters{margin-top:1.5rem;border-top:1px solid var(--line);padding-top:1.1rem}
.chapters h4{margin:0 0 .5rem;font-size:.73rem;text-transform:uppercase;
  letter-spacing:.13em;color:var(--mut);font-weight:600}
.chapters button{display:flex;gap:1rem;align-items:baseline;width:100%;
  background:none;border:0;text-align:left;padding:.46rem .6rem;border-radius:8px;
  cursor:pointer;font-size:.93rem;transition:background .16s,color .16s}
.chapters button:hover{background:var(--raise);color:var(--acc)}
.chapters .tc{color:var(--acc);font-variant-numeric:tabular-nums;font-size:.83rem;
  min-width:3.4rem;font-weight:500}

.side{background:var(--bg2);border:1px solid var(--line);border-radius:var(--rad);
  overflow:hidden;position:sticky;top:4.6rem;box-shadow:var(--shadow)}
.side-head{padding:1.15rem 1.25rem;border-bottom:1px solid var(--line)}
.side-head h2{font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 45;
  font-size:1.16rem;letter-spacing:-.016em;margin:0 0 .28rem;line-height:1.25}
.side-head .desc{margin-top:.55rem;font-size:.85rem}
.bar{height:3px;background:var(--line);border-radius:2px;margin-top:.85rem;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--acc);border-radius:2px;
  transition:width .35s ease}
.lessons{list-style:none;margin:0;padding:.45rem;max-height:min(62vh,660px);
  overflow-y:auto;scrollbar-width:thin}
.lesson{display:flex;align-items:center;gap:.75rem;width:100%;background:none;
  border:0;text-align:left;padding:.58rem .65rem;border-radius:9px;cursor:pointer;
  font-size:.91rem;line-height:1.35;transition:background .16s,color .16s}
.lesson:hover{background:var(--raise)}
.lesson.on{background:color-mix(in srgb,var(--acc) 13%,transparent);color:var(--acc)}
.lesson .n{color:var(--mut);font-variant-numeric:tabular-nums;min-width:1.5rem;
  font-size:.8rem;flex:none}
.lesson.on .n{color:var(--acc)}
.lesson .lt{flex:1;min-width:0}
.lesson .ld{color:var(--mut);font-size:.79rem;font-variant-numeric:tabular-nums;flex:none}
.lesson .tick{flex:none;width:15px;height:15px;opacity:0;transition:opacity .2s}
.lesson .tick svg{width:15px;height:15px;stroke:var(--acc);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.lesson.done .tick{opacity:1}
.lesson.done .lt{color:var(--mut)}

.foot{border-top:1px solid var(--line);color:var(--mut);font-size:.84rem;
  background:var(--bg2)}
.foot .wrap{padding-top:1.9rem;padding-bottom:1.9rem;display:flex;gap:1rem;
  flex-wrap:wrap;align-items:center}

@media (max-width:940px){
  .pgrid{grid-template-columns:1fr}
  .side{position:static}
  .lessons{max-height:none}
  /* portrait: stop cropping the subject out of frame. Show the photo as a
     banner, drop the text below it, and swap to the vertical scrim. */
  .hero::before{background-position:center 30%}
  .hero::after{background:var(--hero-scrim-m)}
  .hero-in{padding:clamp(12rem,40vh,19rem) 1.5rem 3.2rem}
  .hero h1{max-width:none;font-size:clamp(2.2rem,8.6vw,3rem)}
  .lede{max-width:none}
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 1rem;margin-top:2.1rem}
  .stat b{font-size:1.65rem}
}
/* serve the small hero art to small screens (94KB -> 31KB light, 44KB -> 13KB dark) */
@media (max-width:900px){
  :root{--hero:url("img/hero-light-800.webp")}
  :root[data-theme="dark"]{--hero:url("img/hero-dark-800.webp")}
}
@media (max-width:900px) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--hero:url("img/hero-dark-800.webp")}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
}