/* Fairytale Mixtape — 30th Anniversary Reissue */
*{box-sizing:border-box}
:root{
  --paper:#f6f2e8; --ink:#1a1712; --red:#a32638; --soft:rgba(26,23,18,.55);
  --rule:rgba(26,23,18,.85);
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Newsreader",Georgia,serif}
.mono{font-family:"IBM Plex Mono",monospace}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(18px,4vw,48px)}
.marg{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--soft);padding:14px 0}
.marg a{text-decoration:none}
.marg a:hover{color:var(--red)}
.rule{border-top:1px solid var(--rule)}
.rule-heavy{border-top:3px solid var(--rule)}
.foot{margin:56px 0 0;padding:0 0 42px}
.fx{color:var(--red)}

/* masthead */
.masthead{padding-top:26px}
.masthead h1{font-family:"Archivo Black",sans-serif;font-size:clamp(44px,8.5vw,104px);
  line-height:.92;margin:.05em 0 .12em;letter-spacing:-.015em;text-transform:uppercase}
.masthead.sm h1{font-size:clamp(34px,5.5vw,64px)}
.seal{width:92px;height:92px;border-radius:50%;background:var(--red);color:#f6f2e8;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:10.5px;line-height:1.25;
  letter-spacing:.08em;text-transform:uppercase;transform:rotate(-8deg);
  box-shadow:0 6px 14px -6px rgba(26,23,18,.4);flex:none;margin-bottom:18px}
.dek{font-size:clamp(17px,2.2vw,21px);font-style:italic;max-width:36em;margin:.4em 0 0}
.dek b{font-style:normal;font-weight:600}
.dek2{font-size:clamp(16px,2vw,19px);max-width:36em;margin:.9em 0 0;line-height:1.6}

/* landing */
.landing{min-height:100vh;display:flex;flex-direction:column;position:relative}
.seal.top{position:absolute;top:92px;right:clamp(18px,4vw,48px);margin-bottom:0;z-index:5;
  width:138px;height:138px;font-size:14px}
/* the hype-sticker line: what pressing this is */
.seal-sub{display:block;font-family:"IBM Plex Mono",monospace;font-weight:400;
  font-size:7.5px;letter-spacing:.1em;margin-top:5px;padding-top:4px;
  border-top:1px solid rgba(246,242,232,.5)}
.seal.top .seal-sub{font-size:9px;letter-spacing:.12em}
/* on a phone the wordmark fills the width, so the sticker sits above it
   instead of covering the last letter */
@media (max-width:620px){
  .seal.top{position:static;align-self:flex-end;width:106px;height:106px;
    font-size:11px;margin:6px 0 2px}
  .seal.top .seal-sub{font-size:7.5px}
}
.land-grid{display:grid;grid-template-columns:minmax(280px,440px) 1fr;
  gap:clamp(28px,5vw,64px);align-items:center;padding:28px 0 10px;flex:1}
.cover-card{background:#fff;padding:10px;border:1px solid rgba(26,23,18,.12);
  box-shadow:0 1px 2px rgba(26,23,18,.14), 0 22px 34px -24px rgba(26,23,18,.6)}
.cover-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.enter{display:inline-block;margin-top:26px;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:#f6f2e8;background:var(--ink);
  padding:14px 26px;border:none;cursor:pointer;transition:background .15s}
.enter:hover{background:var(--red)}
@media (max-width:820px){.land-grid{grid-template-columns:1fr}}

/* collection */
.side-h{display:flex;align-items:baseline;gap:16px;margin:44px 0 18px}
.side-h h2{font-family:"Archivo",sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.22em;text-transform:uppercase;margin:0;white-space:nowrap}
.side-h .ln{flex:1;border-top:1px solid var(--rule)}
.side-h .mono{font-size:11px;color:var(--soft)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:30px 26px}
.sleeve{text-decoration:none;display:block;transition:transform .18s ease}
.sleeve:hover{transform:translateY(-5px) rotate(-.6deg)}
.cover{position:relative;background:#fff;padding:8px;border:1px solid rgba(26,23,18,.12);
  box-shadow:0 1px 2px rgba(26,23,18,.14), 0 16px 26px -20px rgba(26,23,18,.55)}
.cover img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.blank{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  border:1px dashed rgba(26,23,18,.35);color:var(--soft);text-align:center;
  font-size:11px;letter-spacing:.2em;line-height:1.8;
  font-family:"IBM Plex Mono",monospace}
.chip{position:absolute;left:16px;bottom:16px;background:rgba(26,23,18,.85);color:#f6f2e8;
  font-size:10px;letter-spacing:.14em;padding:3px 8px}
.dot{position:absolute;top:14px;right:14px;width:11px;height:11px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 3px rgba(246,242,232,.9)}
.cap{padding:10px 2px 0;display:flex;flex-direction:column;gap:2px}
.cap .mono{font-size:10.5px;letter-spacing:.12em;color:var(--soft)}
.cap em{font-size:14.5px;line-height:1.3}
.special .cover{background:var(--ink)}
.special .blank{border:1px solid rgba(246,242,232,.4);color:#e8ddc0;
  font-family:"Archivo",sans-serif;letter-spacing:.24em}
.next-p .blank{border:1px dashed rgba(163,38,56,.55);color:var(--red)}
.next-p{cursor:default}
.next-p:hover{transform:none}   /* not a link yet — don't invite the click */
.chip.soon{background:var(--red);color:#f6f2e8;left:auto;right:16px}

/* record page */
.layout{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:clamp(32px,5vw,72px);
  align-items:start;padding:34px 0 60px}
.rail{position:sticky;top:26px;display:flex;flex-direction:column;gap:20px}
.jacket{position:relative}
.jacket .j-front,.jacket .j-back{background:#fff;padding:10px;border:1px solid rgba(26,23,18,.12);
  box-shadow:0 1px 2px rgba(26,23,18,.14), 0 22px 34px -24px rgba(26,23,18,.6)}
.jacket img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.jacket .blank{aspect-ratio:1/1}
.jacket.flip{cursor:pointer;perspective:1500px}
.jacket.flip .j-inner{position:relative;transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.35,.05,.3,1)}
.jacket.flip.flipped .j-inner{transform:rotateY(180deg)}
.jacket.flip .j-front,.jacket.flip .j-back{backface-visibility:hidden;
  -webkit-backface-visibility:hidden}
.jacket.flip .j-back{position:absolute;inset:0;transform:rotateY(180deg);
  display:flex;flex-direction:column}
.jacket.flip .j-back img{flex:1;min-height:0;object-fit:contain;aspect-ratio:auto}
.hand{font-family:"Caveat",cursive;font-size:1.35em;color:#3d3325;text-align:center;
  padding:.35em 0 .1em}
/* B-side slider: several photographs behind one jacket */
.pshow{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.pslide{display:none;margin:0;flex:1;min-height:0;flex-direction:column}
.pslide.on{display:flex}
.pshow .pslide img{flex:1;min-height:0;object-fit:contain;aspect-ratio:auto;width:100%}
.parrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(26,23,18,.55);color:#f6f2e8;font-size:21px;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0 0 2px;
  opacity:0;transition:opacity .2s,background .15s}
.jacket:hover .parrow,.parrow:focus-visible{opacity:1}
.parrow:hover{background:var(--red)}
.parrow.prev{left:6px}
.parrow.next{right:6px}
.pdots{display:flex;gap:6px;justify-content:center;padding:7px 0 2px}
.pdot{width:7px;height:7px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(26,23,18,.45);background:transparent}
.pdot.on{background:var(--red);border-color:var(--red)}
@media (hover:none){.parrow{opacity:.85}}
.j-back.pending{background:linear-gradient(160deg,#efe9da,#e6dfcc);
  align-items:center;justify-content:center}
.j-back.pending .pending-inner{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.5em;width:100%;height:100%;
  border:1.5px dashed rgba(26,23,18,.28);border-radius:4px}
.j-back.pending .mono{font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(26,23,18,.45)}
.j-back.pending .hand{font-size:1.5em;color:rgba(26,23,18,.55);line-height:1.25;margin:0}
.j-hint{display:block;text-align:center;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red);padding-top:10px}
.player{border:2px solid var(--ink);padding:14px 16px;display:flex;gap:14px;align-items:center}
a.player.qlink{text-decoration:none;color:inherit;transition:border-color .15s}
a.player.qlink:hover{border-color:var(--red)}
a.player.qlink:hover .pbtn{transform:scale(1.06)}
a.tplay.qgo{display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:12px}
.player.legacy{border-width:1px;border-color:rgba(26,23,18,.4)}
.pbtn{width:52px;height:52px;border-radius:50%;background:var(--red);border:none;color:#f6f2e8;
  font-size:18px;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center;
  transition:transform .15s}
.pbtn:hover{transform:scale(1.06)}
.pthumb{width:52px;height:52px;object-fit:cover;flex:none;border:1px solid rgba(26,23,18,.2)}
.ptext{display:flex;flex-direction:column;gap:2px;min-width:0}
.ptext .mono{font-size:10px;letter-spacing:.18em;color:var(--soft);text-transform:uppercase}
.ptext strong{font-size:16px;font-weight:600;font-style:italic}
.ptext .artist{font-family:"Archivo",sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase}
.player .cassette{width:44px;height:28px;color:var(--ink);flex:none;margin-left:auto}
@keyframes reelspin{to{transform:rotate(1turn)}}
.playing .cassette .reel{animation:reelspin 1.5s linear infinite;transform-box:fill-box;transform-origin:center}
.videobox{border:2px solid var(--ink);padding:12px 12px 10px}
.videobox.lead{border-color:var(--red)}
.videobox.lead .vlabel{color:var(--red)}
.vlabel{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--soft);margin-bottom:9px}
.vframe{position:relative;padding-top:56.25%}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;display:block}
.credits{font-family:"IBM Plex Mono",monospace;font-size:11.5px;line-height:2;letter-spacing:.06em;
  border-top:1px solid var(--rule);padding-top:12px;color:var(--soft)}
.credits b{color:var(--ink);font-weight:500}
.credits a{text-decoration:none}
.credits a:hover{color:var(--red)}
.tracknum{font-family:"Archivo Black",sans-serif;font-size:clamp(72px,10vw,120px);line-height:.85;
  color:transparent;-webkit-text-stroke:2px var(--ink);letter-spacing:-.02em}
article h1{font-family:"Archivo Black",sans-serif;font-size:clamp(40px,6vw,72px);line-height:.95;
  margin:.08em 0 .2em;text-transform:uppercase;letter-spacing:-.01em}
.lead{font-size:clamp(19px,2.4vw,23px);font-style:italic;margin:0 0 1.6em;max-width:30em;
  color:rgba(26,23,18,.8)}
.body{max-width:64ch;font-size:19px;line-height:1.75}
.body p{margin:0 0 1.15em}
.dc{float:left;font-family:"Archivo Black",sans-serif;font-size:3.6em;line-height:.8;
  padding:.04em .1em 0 0;color:var(--red)}
.lyric{font-style:italic;font-weight:500;color:var(--red)}
.lyricsheet{margin:1.7em 0;padding:1.15em 1.5em;border-left:3px solid var(--red);
  background:rgba(163,38,56,.05)}
.ls-body{font-size:1em;line-height:1.75;font-style:italic;color:var(--red)}
.ls-body .lyric{font-weight:500}
.tracknav{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--rule);
  margin-top:20px;padding:18px 0 50px;font-family:"Archivo",sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.tracknav a{text-decoration:none;max-width:48%}
.tracknav a.prev{margin-right:auto;text-align:left}
.tracknav a.next{margin-left:auto;text-align:right}
.tracknav a:hover{color:var(--red)}
.tracknav em{display:block;font-family:"Newsreader",serif;font-weight:400;font-style:italic;
  text-transform:none;letter-spacing:0;font-size:15px;margin-top:3px;color:var(--soft)}
.about .rail{gap:18px}
.about .body a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(163,38,56,.4)}
.about .body a:hover{border-bottom-color:var(--red)}
.sig{font-family:"Caveat",cursive;font-size:1.7em;line-height:1.2;color:var(--red);
  margin:1.4em 0 0}
.land-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin-top:26px}
.land-cta .enter{margin-top:0;display:flex;align-items:center}
.enter.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);
  padding:12px 20px;font-size:13px}
.enter.ghost:hover{background:var(--ink);color:var(--paper)}
@media (max-width:860px){
  .layout{grid-template-columns:1fr}
  .rail{position:static}
  .body{font-size:18px}
}

/* tape flip + unlock */
.tape-scene{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;cursor:pointer;padding:20px}
.tape-scene.unlock{cursor:default}
.tf-eyebrow{font-size:11px;letter-spacing:.22em;color:var(--soft);margin:0 0 2em}
.tape-wrap{position:relative;perspective:1200px}
.big-tape{color:var(--ink);transition:transform 1s cubic-bezier(.55,.05,.4,1)}
.big-tape .cassette{width:min(64vw,380px);height:auto}
.big-tape.spin{transform:rotateX(540deg)}
.tape-card{position:relative;width:min(86vw,620px);transform-style:preserve-3d;
  transition:transform 1.25s cubic-bezier(.5,.02,.35,1)}
.tape-card.spin{transform:rotateY(540deg)}
/* approached from Side B: rests face-down and rewinds the other way to Side A */
.tape-card.side-b{transform:rotateY(180deg)}
.tape-card.side-b.spin{transform:rotateY(-360deg)}
.big-tape.side-b.spin{transform:rotateX(-540deg)}
.tape-face{position:relative;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tape-face img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 26px 32px rgba(26,23,18,.3))}
.tape-face.back{position:absolute;inset:0;transform:rotateY(180deg)}
/* handwritten on the label's ruled lines, clear of the FAIRYTALE plaque
   (which starts at 27.7% of the artwork's width) */
.tape-side{position:absolute;left:11%;top:14.6%;width:16%;text-align:center;
  font-family:"Caveat",cursive;font-weight:600;font-size:clamp(14px,2.9vw,27px);
  line-height:1;color:rgba(26,23,18,.7);transform:rotate(-3deg)}
.tape-face.back .tape-side{color:rgba(246,242,232,.9)}
.tape-label{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:8%;font-family:"Archivo Black",sans-serif;
  color:var(--red);letter-spacing:.3em;font-size:clamp(1em,3.4vw,1.5em);pointer-events:none}
.tf-hint{font-style:italic;color:var(--soft);margin-top:2.4em;font-size:1.1em}
.ul-h1{font-family:"Archivo Black",sans-serif;font-size:clamp(40px,9vw,90px);line-height:.92;
  margin:0;text-transform:uppercase;letter-spacing:-.015em}
.ul-form{display:flex;gap:14px;align-items:center;margin-top:28px;flex-wrap:wrap;justify-content:center}
.ul-code{font-family:"IBM Plex Mono",monospace;font-size:34px;letter-spacing:.5em;text-align:center;
  width:210px;padding:10px 0 10px .5em;background:transparent;border:none;
  border-bottom:3px solid var(--ink);outline:none;color:var(--ink)}
.ul-code:focus{border-color:var(--red)}
.ul-err{color:var(--red);font-size:12px;letter-spacing:.18em;margin-top:22px}

/* the mixtape */
/* collection section rule, with a small cassette chip in front of it */
.side-h.has-chip{align-items:center;gap:13px}
.side-chip{width:clamp(44px,6vw,64px);height:auto;display:block;flex:none;
  filter:drop-shadow(0 4px 7px rgba(26,23,18,.24))}

/* the side headings inside the Mixtape's flip panels */
.th-text h2{font-family:"Archivo Black",sans-serif;font-size:clamp(30px,5vw,54px);
  line-height:.95;text-transform:uppercase;margin:0}
.th-text .mono{display:block;font-size:11px;letter-spacing:.18em;color:var(--soft);
  margin-top:8px}
.th-text p{font-style:italic;color:rgba(26,23,18,.75);margin:.7em 0 0;max-width:26em}

/* the deck: one cassette, press it to flip to the other side */
.deck{display:flex;flex-direction:column;align-items:center;
  margin:38px 0 0;border-top:1px solid var(--rule);padding-top:36px}
.deck-tape{background:none;border:none;padding:0;cursor:pointer;font:inherit;
  width:min(80vw,430px);position:relative;transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.5,.02,.35,1)}
.deck-tape:focus-visible{outline:2px solid var(--red);outline-offset:12px}
.deck-tape .face{position:relative;display:block;
  backface-visibility:hidden;-webkit-backface-visibility:hidden}
.deck-tape .face img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 20px 28px rgba(26,23,18,.3));transition:filter .3s ease}
.deck-tape:hover .face img{filter:drop-shadow(0 24px 32px rgba(26,23,18,.4))}
.deck-tape .face.back{position:absolute;inset:0;transform:rotateY(180deg)}
.deck-tape .tape-side{font-size:clamp(12px,2vw,21px);width:14%}
.deck-cap{font-size:12px;letter-spacing:.18em;color:var(--ink);margin:26px 0 0}
.deck-cap::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--red);margin-right:9px;vertical-align:middle}
.deck-hint{font-size:10px;letter-spacing:.2em;color:var(--soft);margin:9px 0 0}
.side-panel[hidden]{display:none}
.side-panel .th-text{margin:34px 0 4px}
.swap{animation:swapin .34s ease both}
@keyframes swapin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.swap{animation:none}}
@media (max-width:620px){
  .deck{padding-top:28px}
  .deck-tape{width:min(88vw,360px)}
  .deck-cap{font-size:11px;margin-top:20px}
}
/* the index */
.ix-search{margin:34px 0 6px}
.ix-lab{display:block;font-size:10px;letter-spacing:.2em;color:var(--soft);margin-bottom:9px}
.ix-field{width:100%;box-sizing:border-box;font-family:"Newsreader",serif;font-size:clamp(19px,2.6vw,26px);
  font-style:italic;padding:14px 16px;background:#fffdf7;color:var(--ink);
  border:2px solid var(--ink);border-radius:0;-webkit-appearance:none}
.ix-field::placeholder{color:rgba(26,23,18,.36)}
.ix-field:focus{outline:none;border-color:var(--red)}
.ix-tools{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.ix-tools .mono{font-size:10px;letter-spacing:.2em;color:var(--soft)}
.ix-sort{font-family:"Archivo",sans-serif;font-weight:600;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;background:none;border:1px solid rgba(26,23,18,.35);
  color:var(--soft);padding:5px 11px;cursor:pointer;transition:all .15s}
.ix-sort:hover{color:var(--ink);border-color:var(--ink)}
.ix-sort.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ix-count{margin-left:auto}
.ix-list{margin-top:8px}
.ix-row{display:grid;grid-template-columns:2.6em 4em 1fr auto;gap:4px 14px;align-items:baseline;
  text-decoration:none;padding:.7em .2em;border-bottom:1px dotted rgba(26,23,18,.3)}
.ix-row:hover{background:rgba(163,38,56,.05)}
.ix-n{font-size:11px;color:rgba(26,23,18,.4)}
.ix-y{font-size:11px;color:var(--soft);letter-spacing:.1em}
.ix-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.ix-main strong{font-size:16.5px;font-weight:600;font-style:italic;line-height:1.25}
.ix-main .mono{font-family:"Archivo",sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.ix-l{font-size:10.5px;letter-spacing:.14em;color:var(--soft);text-transform:uppercase;
  white-space:nowrap}
.ix-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);
  margin-left:8px;vertical-align:middle}
.ix-snip{grid-column:3/-1;font-size:15px;line-height:1.6;color:rgba(26,23,18,.72);
  margin-top:5px;padding-left:12px;border-left:2px solid rgba(163,38,56,.4)}
.ix-snip mark{background:rgba(163,38,56,.16);color:var(--ink);font-weight:500;padding:0 1px}
.ix-more{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
  color:var(--red);white-space:nowrap}
.ix-empty{font-style:italic;color:var(--soft);padding:2.4em 0;text-align:center}
@media (max-width:600px){
  .ix-row{grid-template-columns:2.4em 1fr;gap:2px 10px}
  .ix-y{grid-column:1;font-size:10px}
  .ix-main,.ix-l{grid-column:2}
  .ix-n{display:none}
  .ix-l{margin-top:3px;white-space:normal}
  .ix-snip{grid-column:2}
}
.tracklist{margin-top:10px}
.track-row{display:flex;align-items:center;gap:14px;
  padding:.55em .2em;border-bottom:1px dotted rgba(26,23,18,.3)}
.track-row.playing strong{color:var(--red)}
.tr-year{font-size:11px;color:var(--soft);flex:none;width:3.4em;letter-spacing:.1em}
.tthumb{width:46px;height:46px;object-fit:cover;flex:none;border:1px solid rgba(26,23,18,.2)}
.blankt{background:rgba(26,23,18,.08);display:inline-block}
.tplay{width:38px;height:38px;border-radius:50%;background:var(--ink);border:none;color:#f6f2e8;
  font-size:12px;cursor:pointer;flex:none;transition:background .15s}
.tplay:hover{background:var(--red)}
.tplay.ghost{background:transparent}
.tr-main{display:flex;flex-direction:column;min-width:0;flex:1}
.tr-main strong{font-size:16.5px;font-weight:600;font-style:italic;line-height:1.25}
.tr-main span{font-family:"Archivo",sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.tr-link{flex:none;text-decoration:none;font-size:17px;color:var(--soft);padding:0 .25em}
.tr-link:hover{color:var(--red)}
.fin-line{text-align:center;font-style:italic;margin:2.2em 0 0;color:var(--soft)}
.fin-line .mono{display:block;font-size:10px;letter-spacing:.2em;margin-top:.8em;font-style:normal}
@media (max-width:600px){.tr-year{display:none}}