/* ============================================================
   Television Studies · Project 1 — official academic edition
   Palette mirrors the final 10-slide PowerPoint (white / navy / brass)
   ============================================================ */
:root{
  --paper:#FFFFFF; --paper2:#F3F6F9; --paper3:#E8EDF2;
  --navy:#17365D;  --navy2:#2E5C8A;
  --ink:#1A2733;   --body:#36424F;  --muted:#62717F;
  --rule:#C6D0DA;  --accent:#A67C2E;
  --serif:Georgia,"Times New Roman",serif;
  --sans:Arial,Helvetica,"Segoe UI",sans-serif;
  --top:54px; --bottom:56px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--paper); color:var(--body);
  font-family:var(--sans); font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer}

/* ---------- fixed chrome ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; height:var(--top); z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.6rem; background:var(--paper);
  border-bottom:2px solid var(--navy);
}
.tb-left,.tb-right{font-size:.82rem; letter-spacing:.11em; font-weight:700; color:var(--navy)}
.tb-right{color:var(--muted); font-weight:600}
.tb-left span,.tb-right span{color:var(--accent); margin:0 .35em}

.dots{
  position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:35;
  display:flex; flex-direction:column; gap:6px;
}
.dots button{
  width:30px; height:26px; padding:0; border:1px solid var(--rule);
  background:var(--paper2); color:var(--muted); font-size:.62rem; font-weight:700;
  letter-spacing:.03em; border-radius:2px; transition:all .18s ease;
}
.dots button:hover{border-color:var(--navy2); color:var(--navy)}
.dots button.on{background:var(--navy); border-color:var(--navy); color:#fff}

.controls{
  position:fixed; bottom:0; left:0; right:0; height:var(--bottom); z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.6rem; background:var(--paper); border-top:1px solid var(--rule);
}
.controls button{
  border:1px solid var(--rule); background:var(--paper2); color:var(--navy);
  font-size:.82rem; font-weight:700; letter-spacing:.08em;
  padding:.5rem 1.1rem; border-radius:2px; transition:all .18s ease;
}
.controls button:hover{background:var(--navy); color:#fff; border-color:var(--navy)}
.controls button:disabled{opacity:.32; cursor:default}
.controls button:disabled:hover{background:var(--paper2); color:var(--navy); border-color:var(--rule)}
.pager{font-size:.9rem; color:var(--muted); display:flex; align-items:baseline; gap:.5rem}
.pager b{font-size:1.15rem; color:var(--navy)}
.pager em{font-style:normal; font-size:.82rem; letter-spacing:.04em; margin-left:.7rem}
.progress{position:absolute; top:-3px; left:0; right:0; height:3px; background:var(--paper3)}
.progress i{display:block; height:100%; width:10%; background:var(--accent); transition:width .3s ease}

/* ---------- slides ---------- */
#deck{position:fixed; top:var(--top); left:0; right:0; bottom:var(--bottom); overflow:hidden}
.slide{
  position:absolute; inset:0; display:none; overflow-y:auto;
  padding:1.9rem 3.4rem 1.6rem;
}
.slide.active{display:block; animation:fade .3s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wrap{max-width:1180px; margin:0 auto; padding-right:38px}

.page-head{margin-bottom:1.5rem}
.eyebrow{
  margin:0 0 .5rem; font-size:.86rem; font-weight:700; letter-spacing:.19em;
  text-transform:uppercase; color:var(--accent);
}
.eyebrow span{color:var(--navy2); margin:0 .3em}
h1,h2{font-family:var(--serif); font-weight:700; color:var(--navy); margin:0; line-height:1.12}
h2{font-size:clamp(1.9rem,2.9vw,2.85rem)}
.rules{display:flex; align-items:center; margin-top:1.05rem; height:4px}
.rules i{display:block; width:100px; height:4px; background:var(--accent)}
.rules b{display:block; flex:1; height:1px; background:var(--rule)}
.gold-rule{width:118px; height:5px; background:var(--accent); margin:1.5rem 0}

.colhead{
  margin:.2rem 0 .8rem; font-size:.9rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--navy);
  border-bottom:1px solid var(--rule); padding-bottom:.45rem;
}
.src{
  margin:1.4rem 0 0; font-size:.86rem; color:var(--muted); line-height:1.45;
}
.src strong{color:var(--accent); font-weight:700; letter-spacing:.1em; margin-right:.5em}

/* ---------- cards & grids ---------- */
.grid-3,.grid-2,.grid-4,.split-37,.case-grid,.video-grid{display:grid; gap:1rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2.tight{gap:.8rem}
.card{
  background:var(--paper2); border:1px solid var(--rule);
  border-left:4px solid var(--navy2);
  padding:.95rem 1.15rem; min-height:0;
}
.card.gold{border-left-color:var(--accent)}
.card h4{
  margin:0 0 .45rem; font-size:1.05rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--navy); line-height:1.3;
}
.card p{margin:0; font-size:1.08rem; line-height:1.45; color:var(--body)}
.card.tall,.grid-3.tall .card,.grid-2.tall .card{min-height:0}
.grid-3.tall{margin-bottom:1rem}
.grid-3.tall .card{min-height:130px}
.grid-2.tall .card{min-height:135px}

.band{
  background:var(--navy); color:#fff; font-weight:700;
  font-size:1.22rem; line-height:1.4; letter-spacing:.005em;
  padding:.8rem 1.3rem; margin:1.15rem 0;
  border-left:5px solid var(--accent);
}
.bullets{list-style:none; margin:.9rem 0 0; padding:0}
.bullets li{
  position:relative; padding-left:1.3rem; margin-bottom:.85rem;
  font-size:1.08rem; line-height:1.45; color:var(--body);
}
.bullets li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.42rem; height:.42rem; background:var(--accent);
}
.pull{
  margin:.4rem 0 .1rem; padding-top:.85rem; border-top:1px solid var(--rule);
  font-family:var(--serif); font-style:italic; font-weight:700;
  font-size:1.14rem; color:var(--navy);
}
.quote{
  background:var(--paper3); padding:1rem 1.3rem; margin:1.1rem 0;
  font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--navy);
}

/* ---------- cover ---------- */
.cover-grid{display:grid; grid-template-columns:1fr 340px; gap:3.2rem; align-items:start; padding-top:2.2rem}
h1{font-size:clamp(2.7rem,4.8vw,4.3rem); margin:0 0 .2rem}
.sub{font-size:1.35rem; line-height:1.6; color:var(--body); margin:0}
.sub em{font-style:normal; font-weight:700; color:var(--navy)}
.meta{font-size:1rem; color:var(--muted); margin:2.4rem 0 0; line-height:1.7}
.meta span{color:var(--accent); margin:0 .4em}
.cover-card{background:var(--paper2); border:1px solid var(--rule); padding:1.2rem 1.3rem}
.cover-card h3{
  margin:0 0 .7rem; font-size:.95rem; letter-spacing:.15em; color:var(--navy);
  border-bottom:1px solid var(--rule); padding-bottom:.6rem;
}
.bar-chart{display:flex; align-items:flex-end; justify-content:space-around; height:2.55in; padding-top:.4rem}
.bar-item{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:.5rem}
.bar-item i{display:block; width:38px; border-radius:1px 1px 0 0}
.bar-item span{font-size:.78rem; font-weight:700; letter-spacing:.06em; color:var(--navy)}
.italic{
  font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--body);
  border-top:1px solid var(--rule); padding-top:.7rem; margin:1rem 0 0;
}

/* ---------- case / stats ---------- */
.case-grid{grid-template-columns:1fr 1fr; gap:2.2rem}
.fact{padding:1.1rem 1.3rem}
.fact .colhead{margin-top:0}
.fact dl{display:grid; grid-template-columns:8.2rem 1fr; gap:.85rem 1rem; margin:.4rem 0 0}
.fact dt{font-size:.88rem; font-weight:700; letter-spacing:.07em; color:var(--navy); text-transform:uppercase}
.fact dd{margin:0; font-size:1.08rem; color:var(--body); line-height:1.4}
.stats-2x2{display:grid; grid-template-columns:1fr 1fr; gap:1.7rem 1.2rem; align-content:start}
.stat b{
  display:block; font-family:var(--serif); font-size:2.9rem; font-weight:700;
  color:var(--navy); line-height:1;
}
.stat b small{font-family:var(--sans); font-size:1.2rem; color:var(--accent); margin-left:.15em}
.stat span{
  display:block; margin-top:.5rem; font-size:.8rem; font-weight:700;
  letter-spacing:.08em; color:var(--muted); text-transform:uppercase; line-height:1.35;
}
.stats-row{margin-bottom:1.1rem}
.note-strip{
  background:var(--paper3); border-left:4px solid var(--navy2);
  padding:1rem 1.3rem; margin-top:1.5rem;
}
.note-strip strong{display:block; font-size:1.15rem; color:var(--navy)}
.note-strip span{display:block; margin-top:.3rem; font-size:.85rem; color:var(--muted)}

/* ---------- split (slide 5) ---------- */
.split-37{grid-template-columns:.92fr 1.85fr; gap:1.1rem}
.stack-3{display:grid; grid-template-rows:repeat(3,1fr); gap:.85rem}
.applied{padding:1.1rem 1.4rem}
.applied .colhead{margin-top:0}
.applied .bullets li{margin-bottom:1.05rem}
.applied .pull{margin-top:.6rem}

/* ---------- comparison table ---------- */
.tbl{width:100%; border-collapse:collapse; margin-bottom:1.2rem; font-size:1.06rem}
.tbl thead th{
  background:var(--navy); color:#fff; text-align:left; padding:.75rem 1rem;
  font-size:.9rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
}
.tbl tbody tr:nth-child(even){background:var(--paper3)}
.tbl tbody tr:nth-child(odd){background:var(--paper2)}
.tbl td{padding:.72rem 1rem; border-bottom:1px solid var(--rule); color:var(--body); vertical-align:middle}
.tbl td:first-child{font-weight:700; color:var(--navy); width:22%}

/* ---------- video ---------- */
.video-grid{grid-template-columns:1.35fr 1fr; gap:1.3rem; align-items:start}
.video-box{position:relative; background:var(--paper3); border:1px solid var(--rule); padding:.5rem}
.video-box video{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#0D0D0D}
.clip-tag{
  position:absolute; top:1rem; right:1rem; background:var(--navy); color:#fff;
  font-size:.82rem; font-weight:700; letter-spacing:.08em; padding:.45rem .8rem;
}
.clip-tag span{color:var(--accent); margin:0 .25em}
.file-note{margin:1rem 0 0; font-size:.82rem; color:var(--muted); letter-spacing:.03em}

/* ---------- conclusion ---------- */
.takeaways{list-style:none; margin:0 0 1.6rem; padding:0}
.takeaways li{display:grid; grid-template-columns:3rem 1fr; align-items:baseline; margin-bottom:.75rem}
.takeaways li b{font-family:var(--serif); font-size:1.5rem; color:var(--accent)}
.takeaways li span{font-size:1.14rem; color:var(--navy)}
.roles{margin-bottom:1.5rem}
.roles .card{padding:.8rem .95rem}
.roles h4{font-size:.92rem}
.roles p{font-size:.9rem}
.qa-line{margin:.2rem 0 0; font-size:1.02rem; color:var(--body)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .wrap{padding-right:0}
  .dots{display:none}
  .slide{padding:1.6rem 2.2rem 1.4rem}
  .cover-grid{grid-template-columns:1fr 290px; gap:2rem}
}
@media (max-width:860px){
  body{font-size:16px}
  .slide{padding:1.4rem 1.3rem 1.3rem}
  .cover-grid,.case-grid,.split-37,.video-grid,.grid-3,.grid-2,.grid-4,.stats-2x2{grid-template-columns:1fr}
  .stack-3{grid-template-rows:none}
  .cover-grid{gap:1.6rem; padding-top:.8rem}
  .cover-card{max-width:420px}
  .bar-chart{height:2.1in; transform:scale(.9); transform-origin:bottom center}
  h1{font-size:2.6rem}
  h2{font-size:1.9rem}
  .sub{font-size:1.1rem}
  .tbl{font-size:.95rem}
  .tbl td,.tbl thead th{padding:.6rem .6rem}
  .stat b{font-size:2.4rem}
  .band{font-size:1.05rem}
  .pager em{display:none}
  .controls button{padding:.45rem .8rem; font-size:.75rem}
  .topbar{padding:0 1rem}
  .tb-right{display:none}
}
@media (prefers-reduced-motion:reduce){
  .slide.active{animation:none}
  .progress i{transition:none}
}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px}