@font-face{font-family:Roboto;src:url(fonts/roboto.woff2) format("woff2");font-weight:100 900;font-display:swap}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:#111;font:17px/1.55 Roboto,Arial,Helvetica,sans-serif}
.wrap{max-width:900px;margin:0 auto;padding:28px 18px 40px}
.curiosity{margin:0 0 10px;text-align:center;font:700 clamp(13px,2.8vw,16px)/1.3 Roboto,Arial,sans-serif;color:#c00;letter-spacing:.06em;text-transform:uppercase}
h1{margin:0 0 14px;text-align:center;font:400 clamp(22px,4.2vw,32px)/1.3 Roboto,Arial,sans-serif;color:#111;letter-spacing:-.2px}
h1 strong{font-weight:700}
img{max-width:100%;height:auto;display:block}

/* Author byline */
.byline{display:flex;align-items:center;gap:12px;max-width:760px;margin:0 auto 20px;padding:4px 0 2px}
.byline-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid #e8e8e8}
.byline-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.byline-name{font:600 14.5px/1.3 Roboto,Arial,sans-serif;color:#222}
.byline-read{font:400 13px/1.3 Roboto,Arial,sans-serif;color:#777}

.thumb{display:block;max-width:820px;margin:0 auto 26px;border:2px solid #000;background:#000;text-decoration:none;overflow:hidden}
.thumb-media{position:relative;display:block;line-height:0}
.thumb-media img{width:100%;height:auto}
.play{position:absolute;left:50%;top:50%;width:86px;height:60px;margin:-30px 0 0 -43px;border-radius:14px;background:#f00;box-shadow:0 2px 10px rgba(0,0,0,.45);z-index:2;pointer-events:none;transition:transform .15s}
.play::before{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border-style:solid;border-width:14px 0 14px 24px;border-color:transparent transparent transparent #fff;transform:translate(-35%,-50%)}
.thumb:hover .play{transform:scale(1.06)}
.bar{display:block;background:#fff;color:#000;font:700 clamp(18px,3.6vw,26px)/1.2 Roboto,Arial,sans-serif;text-align:center;padding:14px 12px;border-top:2px solid #000;line-height:1.25}

.copy{max-width:760px;margin:0 auto 22px;font-size:clamp(15px,2.4vw,17px);line-height:1.7;color:#111}
.copy p{margin:0 0 16px}
.copy.intro{margin-bottom:18px}
.copy.story h2{margin:28px 0 14px;font:700 clamp(20px,3.6vw,26px)/1.3 Roboto,Arial,sans-serif;color:#111;text-align:center}
.copy.story h2.subhead{margin:26px 0 12px;font:700 clamp(18px,3.2vw,22px)/1.35 Roboto,Arial,sans-serif;color:#1a1a1a;text-align:left;letter-spacing:-.1px}

/* Yellow highlighter */
mark.hl,.hl{background:linear-gradient(transparent 45%,#ffe566 45%);padding:0 .1em;color:inherit;font-style:inherit;font-weight:inherit}

/* In-story figures */
.story-fig{margin:22px 0 24px;padding:0}
.story-fig img{width:100%;height:auto;border-radius:4px;border:1px solid #e6e6e6}
.story-fig figcaption{margin-top:8px;font:italic 14px/1.4 Roboto,Arial,sans-serif;color:#666;text-align:center}

/* Pull quotes */
.pullquote{margin:22px 0;padding:4px 0 4px 16px;border-left:4px solid #f5c400;font:italic 700 clamp(17px,3.2vw,21px)/1.45 Roboto,Arial,sans-serif;color:#222;quotes:none}
.pullquote::before,.pullquote::after{content:none}

/* What changed box */
.changed-box{margin:24px 0 26px;padding:16px 18px 14px;background:#f5f5f5;border:1px solid #e4e4e4;border-radius:8px}
.changed-title{margin:0 0 10px;font:700 15px/1.3 Roboto,Arial,sans-serif;color:#222;letter-spacing:.01em}
.changed-box ul{margin:0;padding:0;list-style:none}
.changed-box li{position:relative;padding:6px 0 6px 28px;font:400 15px/1.45 Roboto,Arial,sans-serif;color:#222;border-top:1px solid #e8e8e8}
.changed-box li:first-of-type{border-top:0}
.changed-box li::before{content:"";position:absolute;left:2px;top:10px;width:16px;height:16px;border-radius:50%;background:#2e7d32;box-shadow:inset 0 0 0 2px #2e7d32}
.changed-box li::after{content:"";position:absolute;left:7px;top:13px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

.inlink{color:#c00;font-weight:700;text-decoration:underline}
.inlink:hover{color:#900}
.close-hook{margin:28px 0 8px;text-align:center;font:700 clamp(16px,3vw,20px)/1.4 Roboto,Arial,sans-serif;color:#111}
.btn{display:block;width:fit-content;max-width:100%;margin:8px auto 28px;padding:14px 36px;background:linear-gradient(#ffe566,#f5c400);color:#000;text-decoration:none;font:700 clamp(18px,3.8vw,24px)/1.2 Roboto,Arial,sans-serif;border:2px solid #000;border-radius:40px;box-shadow:3px 4px 0 rgba(0,0,0,.55);text-align:center}
.btn:hover{background:linear-gradient(#ffec80,#ffd11a)}
footer{max-width:760px;margin:10px auto 0;font-size:12.5px;color:#666;text-align:center;line-height:1.5;padding-top:8px}
footer a{color:#666;margin:0 6px;text-decoration:none}
footer a:hover{text-decoration:underline}
.legal{max-width:800px;margin:20px auto;background:#fff;padding:20px 24px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.08);font:16px/1.6 Roboto,Arial,sans-serif;color:#222}
.legal h1{font-size:28px;text-align:left;margin:0 0 14px}
@media(max-width:520px){
  .wrap{padding:18px 12px 28px}
  .byline{margin-bottom:16px;gap:10px}
  .byline-avatar{width:48px;height:48px}
  .play{width:68px;height:48px;margin:-24px 0 0 -34px;border-radius:12px}
  .play::before{border-width:11px 0 11px 18px}
  .bar{padding:12px 10px}
  .btn{padding:13px 22px;width:100%;box-shadow:2px 3px 0 rgba(0,0,0,.5)}
  .story-fig{margin:18px 0 20px}
  .pullquote{padding-left:14px;margin:18px 0}
  .changed-box{padding:14px 14px 12px}
}

.story-fig.fig-right{float:right;width:40%;margin:4px 0 12px 20px}
.story-fig.fig-right figcaption{font-size:13px}
@media (max-width:600px){.story-fig.fig-right{width:46%;margin:4px 0 10px 14px}.story-fig.fig-right figcaption{font-size:12px}}
.story h2,.changed-box,.pullquote,.btn{clear:both}