/* Agents by Polk: site-specific layer on top of shared/base.css */
:root{--accent:var(--teal-ink)}

/* hero: photograph, dark */
.hero.photo{background:var(--ink-deep);color:var(--on-ink);min-height:min(92vh,900px);display:flex;flex-direction:column}
.hero.photo .bg{position:absolute;inset:0;z-index:0}
.hero.photo .bg img{width:100%;height:100%;object-fit:cover;object-position:62% 55%;transform:scale(1.04);animation:ken 18s var(--ease) forwards}
@keyframes ken{to{transform:scale(1)}}
.hero.photo .bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 55%;opacity:0;transition:opacity 1.3s var(--ease)}
.hero.photo.has-film .bg video{opacity:1}
.hero.photo.film-wanted .bg img{animation:none;transform:none}
@media (prefers-reduced-motion:reduce){.hero.photo .bg img{animation:none;transform:none}}
.hero.photo .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,30,36,.88) 0%,rgba(15,30,36,.72) 38%,rgba(15,30,36,.18) 70%,rgba(15,30,36,.3) 100%),linear-gradient(180deg,rgba(15,30,36,.35),rgba(15,30,36,0) 30%,rgba(15,30,36,.55) 100%)}
.hero.photo .wrap{position:relative;z-index:1;width:100%}
.hero.photo h1{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.25);max-width:none;font-size:clamp(40px,5.6vw,78px)}
.hero.photo h1 .nb{display:block}
@media (min-width:640px){.hero.photo h1 .nb{white-space:nowrap}}
.hero.photo .hero-body{max-width:820px}
.hero.photo .lede{color:#E3EAE7;max-width:46ch}
.hero.photo .hero-body{padding-top:clamp(96px,16vh,200px)}
.hero.photo .cap{color:var(--on-ink-sub)}
.hero.photo .cap b{color:#fff}

/* proof: before / after */
.proof{background:var(--ink);color:var(--on-ink);padding:clamp(56px,7vw,96px) 0}
.proof .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px)}
.proof .head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.proof .head h2{max-width:22ch}
.proof .path{margin-top:0}
.proof h2{color:#fff;font-size:clamp(30px,3.6vw,46px);line-height:1.08}
.proof .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--marigold);display:block;margin-bottom:16px}
.proof .path{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-sub)}
.proof .path b{color:#fff;font-weight:500}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3px;background:#000}
.pair figure{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden}
.pair img{width:100%;height:100%;object-fit:cover}
.pair figcaption{position:absolute;left:10px;bottom:10px;background:rgba(15,30,36,.85);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:5px 8px}
.pair figure.flat img{filter:saturate(.75) contrast(.92) brightness(.98)}
.proof .legal{grid-column:1/-1;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-faint);line-height:1.8}
@media (max-width:860px){.proof .wrap{grid-template-columns:minmax(0,1fr)}}

/* kit: film frames */
.frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;background:var(--ink);padding:6px}
.frames figure{margin:0;aspect-ratio:16/9;overflow:hidden;position:relative}
.frames img{width:100%;height:100%;object-fit:cover}
.frames figcaption{position:absolute;left:8px;bottom:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(15,30,36,.8);padding:4px 7px}
.frames figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(15,30,36,.55))}

/* phone mock */
.phone{width:min(100%,300px);margin:0 auto;background:#0d1417;border-radius:34px;padding:12px;box-shadow:0 40px 70px -40px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.08)}
.phone .screen{background:#fff;color:var(--ink);border-radius:24px;overflow:hidden;font-size:12px}
.phone .sb{display:flex;justify-content:space-between;padding:8px 14px 4px;font-size:11px;font-weight:600}
.phone .hd{display:flex;align-items:center;gap:8px;padding:6px 12px 8px}
.phone .av{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:13px}
.phone .hd b{font-size:12px;display:block;line-height:1.1}
.phone .hd small{color:var(--quiet);font-size:10px}
.phone .ph{aspect-ratio:4/5;overflow:hidden;position:relative}
.phone .ph img{width:100%;height:100%;object-fit:cover}
.phone .ph .price{position:absolute;left:10px;bottom:10px;color:#fff;font-family:var(--serif);font-size:18px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.phone .ph .price small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.phone .acts{display:flex;gap:12px;padding:10px 12px 4px;font-size:14px}
.phone .cap{padding:4px 12px 14px;line-height:1.45;font-size:11.5px}
.phone .cap b{font-weight:600}
.phone .cap .more{color:var(--quiet);display:block;margin-top:4px}

/* chapter visuals */
.chapter .vis{margin-top:8px}
.playbooks{display:grid;gap:10px}
.pb{border:1px solid var(--line);background:#fff;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start}
.pb .k{color:var(--quiet);margin-bottom:6px;font-size:10px}
.pb p{font-size:14px;line-height:1.5;color:var(--ink-2);margin:0}
.pb .pill{align-self:center}
.pb.edit{background:var(--wash)}
.pb.edit p{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:none;color:var(--ink)}
.pb.edit p::before{content:"> ";color:var(--accent)}

.pipeline{display:grid;gap:0;border:1px solid var(--line);background:#fff}
.pipeline li{list-style:none;display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line);font-size:14px;color:var(--quiet);transition:color .3s,background .3s}
.pipeline li:last-child{border-bottom:0}
.pipeline li i{width:10px;height:10px;border:1px solid var(--line-strong);display:block;border-radius:50%;transition:background .3s,border-color .3s}
.pipeline li b{font-weight:500;color:inherit}
.pipeline li .who{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.pipeline li.on{color:var(--ink)}
.pipeline li.on i{background:var(--teal);border-color:var(--teal)}
.pipeline li.on .who{color:var(--accent)}
.pipeline li.gate.on{background:var(--butter)}
.pipeline li.gate.on i{background:var(--marigold);border-color:var(--marigold)}

.queue{display:grid;gap:10px}
.qi{border:1px solid var(--line);background:#fff;padding:14px 16px}
.qi .top{display:flex;justify-content:space-between;gap:10px;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);margin-bottom:8px}
.qi .top .checks{display:flex;gap:6px}
.qi .top .checks span{color:var(--teal-ink)}
.qi .top .checks span::before{content:"✓ "}
.qi .q{font-family:var(--serif);font-size:16px;line-height:1.45;color:var(--ink)}
.qi .acts{display:flex;gap:8px;margin-top:12px}
.qi .acts button{border:1px solid var(--ink);background:var(--ink);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:8px 12px;cursor:default}
.qi .acts button.ghost{background:none;color:var(--ink)}
.qi .acts button.ghost.danger{border-color:var(--line-strong);color:var(--quiet)}

.monday{border:1px solid var(--line);background:#fff;padding:22px 24px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.monday .from{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);margin-bottom:12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.monday h4{font-family:var(--serif);font-size:22px;margin-bottom:10px;color:var(--ink)}
.monday ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.monday li::before{content:"";display:inline-block;width:6px;height:2px;background:var(--marigold);margin-right:10px;vertical-align:middle}
.monday .nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 4px}
.monday .nums div{border-top:1px solid var(--line);padding-top:8px}
.monday .nums b{font-family:var(--serif);font-size:26px;display:block;color:var(--ink);font-weight:400}
.monday .nums span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}

/* dark demo: what you send / what happens / what comes back */
.flow{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:clamp(40px,5vw,64px)}
.flow > div{border-top:1px solid var(--dark-line);padding-top:16px}
.flow .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-ink-faint);display:block;margin-bottom:16px}
.send{display:grid;gap:10px}
.send .drop{border:1px dashed rgba(255,255,255,.3);padding:18px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-sub);line-height:1.8}
.send .drop b{color:#fff;font-weight:500;display:block;font-size:12px;letter-spacing:.08em;text-transform:none}
.send .thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.send .thumbs img{aspect-ratio:1;object-fit:cover;width:100%;filter:saturate(.8)}
.send .fine{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-faint);line-height:1.8}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.steps li{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid var(--dark-line);font-size:14px;color:var(--on-ink-faint);transition:color .3s}
.steps li b{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--on-ink-faint);transition:color .3s}
.steps li.on{color:var(--on-ink)}
.steps li.on b{color:var(--marigold)}
.steps li.you.on b{color:var(--teal)}
.back{background:#fff;color:var(--ink);border:1px solid rgba(255,255,255,.1)}
.back .bh{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.back .bh b{color:var(--ink);font-weight:500}
.back .bh span{color:var(--quiet)}
.back ul{list-style:none;margin:0;padding:6px 0}
.back li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:center;padding:9px 14px;font-size:13.5px;color:var(--faint);transition:color .3s}
.back li i{width:8px;height:8px;border:1px solid var(--line-strong);display:block;transition:background .3s}
.back li.on{color:var(--ink)}
.back li.on i{background:var(--teal);border-color:var(--teal)}
.back .quote{margin:6px 14px 12px;padding:12px;background:var(--wash);font-family:var(--serif);font-size:14.5px;line-height:1.45}
.back .ok{padding:10px 14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);line-height:1.9}
.back .ok span{display:block;opacity:0;transition:opacity .4s}
.back .ok span.on{opacity:1}
.flow-foot{margin-top:28px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-sub)}
.flow-foot b{color:#fff;font-weight:500}
@media (max-width:900px){.flow{grid-template-columns:minmax(0,1fr)}}

/* problem section visual pair */
.two.photo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

/* audit-style finding (strategist) */
.finding{border:1px solid var(--line);background:#fff;padding:22px 24px}
.finding .k{color:var(--quiet);margin-bottom:10px}
.finding h4{font-family:var(--serif);font-size:22px;margin-bottom:12px}
.finding ul{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:8px;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.finding li::before{content:"";display:inline-block;width:6px;height:6px;background:var(--marigold);margin-right:10px;vertical-align:middle}
.finding .row2{display:grid;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;line-height:1.7;border-top:1px solid var(--line);padding-top:12px}
.finding .row2 b{color:var(--accent);font-weight:500}

/* route preview (try section) */
.route .win{box-shadow:0 30px 60px -40px rgba(15,30,36,.45)}
.route-img{position:relative;aspect-ratio:16/9;overflow:hidden}
.route-img img{width:100%;height:100%;object-fit:cover}
.route-img span{position:absolute;left:12px;bottom:12px;background:rgba(15,30,36,.85);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:5px 8px}
.legs{list-style:none;margin:0;padding:6px 0}
.legs li{display:grid;grid-template-columns:18px 130px 1fr;gap:10px;align-items:center;padding:10px 16px;font-size:13.5px;color:var(--faint);border-bottom:1px solid var(--line);transition:color .3s}
.legs li:last-child{border-bottom:0}
.legs li i{width:9px;height:9px;border-radius:50%;border:1px solid var(--line-strong);display:block;transition:background .3s,border-color .3s}
.legs li b{font-weight:600}
.legs li span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.legs li.on{color:var(--ink)}
.legs li.on i{background:var(--teal);border-color:var(--teal)}
.route-foot{padding:12px 16px;border-top:1px solid var(--line);background:var(--wash);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);line-height:1.7}

/* interview transcript */
.talk .wavebar{display:flex;align-items:center;gap:3px;height:30px;margin:4px 0 14px}
.talk .wavebar i{display:block;width:3px;border-radius:2px;background:var(--teal);height:8px;animation:wv 1.4s ease-in-out infinite}
.talk .wavebar i:nth-child(3n){animation-delay:.2s}.talk .wavebar i:nth-child(3n+1){animation-delay:.45s}.talk .wavebar i:nth-child(4n){animation-delay:.7s}.talk .wavebar i:nth-child(5n){animation-delay:.9s}
@keyframes wv{0%,100%{height:6px}50%{height:26px}}
@media (prefers-reduced-motion:reduce){.talk .wavebar i{animation:none;height:14px}}
.talk .lines{display:grid;gap:12px}
.talk .lines p{display:grid;grid-template-columns:56px 1fr;gap:10px;font-size:15px;line-height:1.5;color:var(--ink);opacity:.18;transition:opacity .5s}
.talk .lines p.on{opacity:1}
.talk .lines p b{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--teal-ink);padding-top:4px}
.talk .lines p.you b{color:#8a5a0f}

/* typed line caret */
[data-type]{min-height:1.4em}
[data-type].typing::after{content:"";display:inline-block;width:7px;height:1em;background:var(--accent);margin-left:2px;vertical-align:-2px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* film chapter */
.film-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center;max-width:820px}
.frames.two-up{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:760px){.film-grid{grid-template-columns:minmax(0,1fr)}}

/* consent steps */
.consent{list-style:none;margin:0;padding:0;border:1px solid var(--line);background:#fff}
.consent li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);font-size:15px;align-items:baseline}
.consent li:last-child{border-bottom:0}
.consent li b{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--accent);font-weight:500}

.plan-note{margin-top:22px;font-size:14.5px;color:var(--ink-2);max-width:72ch;border-left:2px solid var(--marigold);padding-left:14px}

/* phones */
@media (max-width:760px){
  .hero.photo{min-height:0}
  /* the film gets its own band above the headline, so the house stays readable */
  .hero.photo .bg{bottom:auto;height:78vw}
  .hero.photo .bg img,.hero.photo .bg video{object-position:58% 50%}
  .hero.photo .bg::after{background:linear-gradient(180deg,rgba(15,30,36,.86) 0%,rgba(15,30,36,.7) 16%,rgba(15,30,36,.08) 34%,rgba(15,30,36,.08) 58%,rgba(15,30,36,.7) 84%,var(--ink-deep) 100%)}
  .hero.photo .hero-body{padding-top:calc(78vw - 96px)}
}
@media (max-width:560px){
  .proof .frames{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .proof .frames figure:first-child{grid-column:1/-1}
  .legs li{grid-template-columns:18px 110px minmax(0,1fr)}
  .pb{grid-template-columns:minmax(0,1fr)}
  .pb .pill{justify-self:start}
  .qi .top{flex-direction:column;align-items:flex-start}
  .steps li{grid-template-columns:92px minmax(0,1fr)}
}

/* ---- round 3: design review ---- */
.proof .frames{background:none;padding:0;gap:16px}
.proof .frames figure{aspect-ratio:3/2}
.proof .legal{margin-top:0;font-size:11px;letter-spacing:.12em;color:var(--on-ink-faint)}
.proof .legal b{color:#fff;font-weight:500}
.film-grid{align-items:start}
.frames.two-up{background:none;padding:0;gap:8px}
.frames.two-up figure{outline:1px solid rgba(23,44,51,.15)}
.film-grid .list-mono{font-size:12px;color:var(--ink-2);letter-spacing:.08em}
.send .thumbs img{aspect-ratio:4/5}
.legs li span,.route-foot,.route-img span,.pair figcaption,.frames figcaption,.pb .k,.qi .top,.monday .from,.monday .nums span,.pipeline li .who,.finding .row2,.steps li b,.back .bh,.back .ok,.send .drop,.send .fine,.flow .k,.flow-foot,.proof .k,.proof .path,.consent li b,.talk .lines p b{font-size:11px}
.qi .acts button{font-size:11px}

/* ---- the full film player ---- */
.player{position:relative;aspect-ratio:16/9;background:#0b1518;overflow:hidden;outline:1px solid rgba(255,255,255,.1)}
.player video{width:100%;height:100%;display:block;object-fit:cover;background:#0b1518}
.player .play{position:absolute;inset:0;display:flex;align-items:flex-end;gap:16px;padding:clamp(16px,2.6vw,32px);background:linear-gradient(180deg,rgba(15,30,36,0) 45%,rgba(15,30,36,.78));border:0;color:#fff;cursor:pointer;font:inherit;text-align:left}
.player .play[hidden]{display:none}
.player .play i{flex:none;width:clamp(52px,5vw,68px);aspect-ratio:1;border-radius:50%;background:var(--marigold);display:grid;place-items:center;transition:transform .25s}
.player .play i::before{content:"";border-left:16px solid var(--ink);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px}
.player .play:hover i{transform:scale(1.06)}
.player .play:focus-visible{outline:2px solid var(--marigold);outline-offset:-6px}
.player .play b{display:block;font-family:var(--serif,inherit);font-weight:400;font-size:clamp(20px,2.2vw,28px);line-height:1.15}
.player .play small{display:block;margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-sub)}
.reel{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.reel button{display:flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-sub);background:none;border:1px solid rgba(255,255,255,.2);padding:10px 13px;cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.reel button small{font-size:10px;color:var(--marigold);transition:color .2s}
.reel button:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.reel button:focus-visible{outline:2px solid var(--marigold);outline-offset:2px}
.reel button.on{color:var(--ink);background:var(--marigold);border-color:var(--marigold)}
.reel button.on small{color:var(--ink)}
@media (max-width:560px){.reel{gap:6px}.reel button{padding:9px 10px;letter-spacing:.1em}}
@media (prefers-reduced-motion:reduce){.player .play i{transition:none}}

/* ---- the film sits in the sample window in Sec 03: a wider window, quieter text beside it ---- */
@media (min-width:901px){
  #preview .try-grid{grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);gap:clamp(28px,4vw,60px)}
}
#preview .h-lg{font-size:clamp(30px,3.3vw,44px)}
#preview .lede{font-size:16px;margin:16px 0 22px !important}
.route.film .player{outline:0}
.route.film .player .play{padding:clamp(14px,1.8vw,22px);gap:14px}
.route.film .player .play i{width:48px}
.route.film .player .play i::before{border-left-width:13px;border-top-width:8px;border-bottom-width:8px;margin-left:4px}
.route.film .player .play b{font-size:clamp(18px,1.6vw,21px)}
.route.film .reel{padding:14px 16px;gap:6px}
.route.film .reel button{color:var(--ink-2);border-color:var(--line-strong);padding:8px 10px;letter-spacing:.1em}
.route.film .reel button small{color:var(--teal-ink)}
.route.film .reel button:hover{color:var(--ink);border-color:var(--ink)}
.route.film .reel button:focus-visible{outline-color:var(--teal)}
.route.film .reel button.on{color:#fff;background:var(--ink);border-color:var(--ink)}
.route.film .reel button.on small{color:var(--marigold)}
.route.film .win-top b,.route.film .win-top .right{white-space:nowrap}

/* pause button on the looping sample film */
.player .toggle{position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(15,30,36,.7);color:#fff;cursor:pointer;display:grid;place-items:center;opacity:.75;transition:opacity .2s,background .2s}
.player .toggle[hidden]{display:none}
.player:hover .toggle,.player .toggle:focus-visible{opacity:1}
.player .toggle:hover{background:rgba(15,30,36,.9)}
.player .toggle:focus-visible{outline:2px solid var(--marigold);outline-offset:2px}
.player .toggle i{width:10px;height:12px;border-left:3px solid #fff;border-right:3px solid #fff;box-sizing:border-box}
.player .toggle.is-paused i{width:0;height:0;border-right:0;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}

/* hero photo credit, bottom right over the film */
.hero.photo{position:relative}
.hero.photo .credit{position:absolute;z-index:2;right:max(var(--gut),calc((100% - var(--max)) / 2 + var(--gut)));bottom:18px;max-width:340px;margin:0;text-align:right;font-family:var(--mono);font-size:10px;letter-spacing:.08em;line-height:1.6;color:rgba(255,255,255,.62);text-shadow:0 1px 6px rgba(0,0,0,.45)}
.hero.photo .credit a{color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(255,255,255,.35)}
.hero.photo .credit a:hover{color:#fff;text-decoration-color:#fff}
@media (max-width:760px){
  /* phones: the headline rises into the film band, so the credit sits under the buttons instead */
  .hero.photo .credit{position:static;max-width:none;text-align:left;margin:0 var(--gut) 22px;font-size:9.5px;text-shadow:none;color:var(--on-ink-faint)}
}