/* ==========================================================================
   Archer Vale — design layer (header, promo bar, homepage, cards, product page,
   footer). Generated from the approved preview board (round 15), with its options
   folded in; every class is prefixed av-. Loaded after main.css / commerce.css.
   ========================================================================== */
:root{--wm-h:72px; --hh:clamp(700px,52vw,800px);}
*, *::before, *::after{box-sizing:border-box}
html{background:var(--navy)}
body{margin:0;background:var(--navy);color:var(--body);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
h1, h2, h3{margin:0;color:var(--ink)}
.av-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.av-scroller, .av-fans, .av-card, .av-fan{position:relative}
.av-dot{display:inline-block;width:max(4px,.27em);height:max(4px,.27em);border-radius:50%;background:currentColor;vertical-align:middle;margin:0 .55em;opacity:.8;position:relative;top:-.08em}
.av-wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.av-nw{white-space:nowrap}
.av-promo{position:relative;z-index:5;background:var(--gold);color:var(--on-gold);font-size:14px;line-height:1.35;text-align:center;padding:10px 52px}
.av-promo p{display:inline}
.av-promo b{font-weight:700;letter-spacing:.02em}
.av-code{display:inline-block;font-weight:700;letter-spacing:.12em;padding:1px 9px;border:1.5px dashed rgba(32,24,36,.55);border-radius:6px;margin-left:2px}
.av-promo__x{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--on-gold);display:flex;align-items:center;justify-content:center;cursor:pointer}
.av-promo__x:hover{background:rgba(32,24,36,.1)}
.av-hwrap{position:relative}
.av-hd{position:absolute;top:0;left:0;right:0;z-index:3}
.av-hd.av-rel{position:relative}
.av-hd__in{max-width:1320px;margin:0 auto;padding:20px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.av-hd__logo img{height:60px;width:auto}
.av-hd__nav{display:flex;align-items:center;gap:32px}
.av-nav{color:#fff;text-decoration:none;font-weight:600;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;padding:6px 0;position:relative;display:flex;gap:7px;align-items:center}
.av-nav:hover{color:var(--gold)}
.av-nav[aria-current]{color:var(--gold)}
.av-nav[aria-current]::after{content:"";position:absolute;left:0;right:.16em;bottom:0;height:1.5px;background:var(--gold)}
.av-ico{width:16px;height:16px}
.av-cart{display:flex;align-items:center;gap:9px;color:var(--gold);text-decoration:none;font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;padding:10px 18px;border:1px solid rgba(var(--gold-rgb),.6);border-radius:999px;background:rgba(var(--navy-rgb),.4)}
.av-hd__m{display:none}
.av-rbtn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(var(--gold-rgb),.55);display:flex;align-items:center;justify-content:center;color:var(--gold);background:rgba(var(--navy-rgb),.4)}
.av-hero{height:clamp(700px,52vw,800px);display:flex;align-items:center;
  background:linear-gradient(90deg,var(--navy) 0%,rgba(var(--navy-rgb),.92) 24%,rgba(var(--navy-rgb),.25) 52%,rgba(var(--navy-rgb),0) 70%),
             linear-gradient(180deg,rgba(var(--navy-rgb),.55) 0%,rgba(var(--navy-rgb),0) 20%,rgba(var(--navy-rgb),0) 70%,var(--navy) 100%),
             url(../img/hero.jpg) right 18% center/cover no-repeat,var(--navy)}
.av-hero__in{width:100%;max-width:1240px;margin:0 auto;padding:40px var(--pad) 60px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.av-label{display:flex;align-items:center;gap:14px;color:var(--gold);font-size:12.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;line-height:1.2}
.av-label::before{content:"";width:34px;height:1.5px;background:var(--gold)}
.av-wordmark{font-family:var(--display);font-weight:800;font-size:clamp(64px,7.4vw,108px);line-height:.92;letter-spacing:.04em;text-transform:uppercase;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.45);margin-left:-.04em}
.av-genre{font-size:22px;font-weight:500;color:var(--body);margin-bottom:14px}
.av-pill{width:100%;max-width:520px;display:flex;align-items:center;gap:6px;padding:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.av-pill:focus-within{border-color:rgba(var(--gold-rgb),.8)}
.av-pill input{flex:1;min-width:0;height:48px;padding:0 20px;border:0;background:transparent;font:inherit;font-size:16px;color:#fff;outline:none}
.av-pill input::placeholder{color:rgba(255,255,255,.62)}
.av-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 26px;border:0;border-radius:999px;background:var(--gold);color:var(--on-gold);font:inherit;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .2s}
.av-btn:hover{background:var(--gold-light)}
.av-btn--sm{height:36px;font-size:13px;padding:0 15px;background:transparent;color:var(--gold);box-shadow:inset 0 0 0 1.5px rgba(var(--gold-rgb),.7)}
.av-btn--sm:hover{background:var(--gold);color:var(--on-gold)}
.av-btn--lg{height:56px;font-size:16px;padding:0 30px}
.av-btn[disabled]{background:rgba(var(--gold-rgb),.16);color:rgba(var(--gold-rgb),.75);cursor:default}
.av-submsg{color:#fff;font-size:15px;padding:14px 0}
.av-submsg strong{color:var(--gold);margin-right:6px}
.av-sheet{position:relative;z-index:2;max-width:1320px;margin:-80px auto 0;background:var(--parchment);border-radius:var(--sheet-r);box-shadow:0 0 0 1px rgba(255,255,255,.05),0 -12px 40px rgba(0,0,0,.35);padding-bottom:24px}
.av-sheet--top{margin-top:0}
.av-sec{padding:56px 0}
.av-sec--first{padding-top:72px}
.av-rowhead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:28px}
.av-h2{font-family:var(--display);font-weight:800;font-size:30px;line-height:1.1;letter-spacing:.03em;text-transform:uppercase}
.av-h2s{font-family:var(--display);font-weight:800;font-size:24px;line-height:1.15;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.av-tlink{color:var(--gold);text-decoration:none;font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1.5px solid rgba(var(--gold-rgb),.5);padding-bottom:3px;white-space:nowrap}
.av-tlink:hover{border-color:var(--gold)}
.av-cover{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--cover-r);box-shadow:0 18px 36px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06);background:var(--tan)}
.av-grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:36px 24px}
.av-card{display:flex;flex-direction:column;gap:14px;min-width:0}
.av-card__c{position:relative;display:block;transition:transform .35s var(--ease)}
.av-card:hover .av-card__c{transform:translateY(-8px)}
.av-card:hover .av-card__t{color:var(--gold)}
.av-card__b{display:flex;flex-direction:column;gap:12px;flex:1}
.av-card__meta{display:flex;flex-direction:column;gap:5px;flex:1}
.av-card__s{color:var(--muted);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.av-card__t{font-family:var(--serif);font-weight:700;font-size:16px;line-height:1.3;color:var(--ink);text-decoration:none;transition:color .2s}
.av-card__row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.av-from{font-size:13.5px;color:var(--muted);white-space:nowrap}
.av-from b{color:var(--ink);font-weight:700;font-size:15px}
.av-vip{position:absolute;z-index:1;top:8px;left:8px;font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:.16em;padding:4px 7px 4px 9px;border-radius:5px;background:rgba(14,10,16,.86);color:var(--gold);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.6)}
.av-vipband{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px;align-items:center;padding:52px;border-radius:24px;
  background:radial-gradient(120% 140% at 0% 0%,rgba(var(--gold-rgb),.14),rgba(var(--gold-rgb),0) 55%),#140f17;box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.22)}
.av-vipband__t{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.av-vipband__p{color:var(--body);max-width:34ch}
.av-vipband .av-btn{margin-top:6px}
.av-fans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.av-fan{display:flex;flex-direction:column;gap:6px;text-decoration:none;min-width:0}
.av-fan__c{position:relative;display:block;aspect-ratio:1/1.22;margin-bottom:8px}
.av-fan__c .av-cover{position:absolute;width:78%;left:11%;top:9%;transition:transform .35s var(--ease)}
.av-fan__c .av-cover:nth-child(1){transform:translate(-14%,6%) rotate(-8deg);filter:brightness(.7)}
.av-fan__c .av-cover:nth-child(2){transform:translate(14%,6%) rotate(8deg);filter:brightness(.7)}
.av-fan__c .av-cover:nth-child(3){transform:translateY(10%)}
.av-fan:hover .av-cover:nth-child(1){transform:translate(-20%,4%) rotate(-11deg)}
.av-fan:hover .av-cover:nth-child(2){transform:translate(20%,4%) rotate(11deg)}
.av-fan:hover .av-cover:nth-child(3){transform:translateY(4%)}
.av-fan__c .av-vip{left:15%;top:23%}
.av-fan__t{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-align:center}
.av-fan:hover .av-fan__t{color:var(--gold)}
.av-fan__s{font-size:13px;color:var(--muted);text-align:center}
.av-cats{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border-radius:24px;overflow:hidden;background:var(--tan)}
.av-cats__img{min-height:420px;background:linear-gradient(90deg,rgba(42,32,48,0) 60%,var(--tan) 100%),url(../img/cats.jpg) 30% center/cover no-repeat}
.av-cats__t{padding:48px 52px 48px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.av-chips{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 8px}
.av-chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap}
.av-chip span{font-size:12px;font-weight:600;color:var(--muted)}
.av-chip:hover{box-shadow:inset 0 0 0 1.5px var(--gold);color:var(--gold)}
.av-vals{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:8px 0}
.av-val{display:flex;gap:18px;align-items:flex-start}
.av-val__i{flex:none;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.45);background:rgba(var(--gold-rgb),.06)}
.av-val h3{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.04em;text-transform:uppercase;margin:4px 0 6px}
.av-val p{color:var(--muted);font-size:15px}
.av-sec--plate{padding-top:24px}
.av-plate{border-radius:24px;overflow:hidden;background:#000 url(../img/plate.jpg) right -40px center/auto 128% no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.av-plate__in{max-width:560px;padding:64px 56px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,0))}
.av-plate__sub{color:var(--body);margin-bottom:10px}
.av-ft{padding:64px 0 36px;color:var(--footer-muted);font-size:15px}
.av-ft__top{display:flex;justify-content:space-between;gap:48px;padding-bottom:40px;border-bottom:1px solid var(--line-light)}
.av-ft__brand img{height:64px;width:auto}
.av-ft__tag{margin-top:14px}
.av-ft__nav{display:flex;gap:56px}
.av-ft__col{display:flex;flex-direction:column;gap:10px}
.av-ft__col a{color:#fff;text-decoration:none}
.av-ft__col a:hover{color:var(--gold)}
.av-ft__k{color:var(--gold);font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:4px}
.av-soc{display:flex;gap:16px;align-items:center}
.av-ft__bot{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:26px;font-size:13.5px}
.av-ft__age{color:var(--faint);margin-top:2px}
.av-ft__pay{display:flex;align-items:center;gap:10px}
.av-ft__pay img{height:22px;width:auto}
.av-ptop{position:absolute;top:0;left:0;right:0;height:420px;background:linear-gradient(180deg,rgba(var(--navy-rgb),.3),var(--navy)),url(../img/top-blur.png) center 30%/cover;z-index:0}
.av-product .av-hd{z-index:3}
.av-product .av-sheet{z-index:2}
.av-sec--buy{padding-top:64px}
.av-buy{display:grid;grid-template-columns:380px minmax(0,1fr);gap:72px;align-items:start}
.av-buy__l{display:flex;flex-direction:column;gap:24px}
.av-cover-wrap{position:relative}
.av-cover--main{box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
.av-vip--lg{top:14px;left:14px;font-size:12px;padding:6px 10px 6px 12px}
.av-samples{display:flex;flex-direction:column;gap:12px}
.av-player{display:flex;align-items:center;gap:14px;padding:9px 18px 9px 9px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1.5px rgba(var(--gold-rgb),.45);text-decoration:none;color:var(--ink)}
.av-player__b{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--gold);color:var(--on-gold);display:flex;align-items:center;justify-content:center;cursor:pointer}
.av-player__m{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.av-player__t{display:flex;justify-content:space-between;gap:10px;font-size:14.5px;font-weight:700}
.av-player__t span:last-child{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.av-player__bar{height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.av-player__bar i{display:block;height:100%;width:0;background:var(--gold)}
.av-specs{margin:0;font-size:14px}
.av-specs div{display:flex;justify-content:space-between;gap:20px;padding:11px 2px;border-top:1px solid var(--line-light)}
.av-specs div:last-child{border-bottom:1px solid var(--line-light)}
.av-specs dt{color:var(--muted)}
.av-specs dd{margin:0;color:var(--ink);text-align:right}
.av-specs__cats a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(var(--gold-rgb),.45)}
.av-specs__cats a:hover{color:var(--gold)}
.av-specs__cats{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.av-specs__cats a{border:0!important;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;white-space:nowrap}
.av-specs .av-specs__row--cats{align-items:flex-start}
.av-specs .av-specs__row--cats dt{padding-top:3px}
.av-card--here .av-cover{box-shadow:0 0 0 2px var(--gold),0 18px 36px rgba(0,0,0,.45)}
.av-here{display:inline-flex;align-items:center;height:36px;font-size:13px;font-weight:700;color:var(--gold)}
.av-pbk{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 16px;border-radius:12px;border:1px dashed var(--line);font-size:14px;color:var(--muted);text-decoration:none}
.av-pbk b{color:var(--ink)}
.av-pbk__a{display:flex;gap:4px;align-items:center;color:var(--gold);font-weight:700}
.av-serrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.av-ser{color:var(--muted);font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.av-vipchip{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.16em;padding:5px 12px;border-radius:999px;background:var(--gold);color:var(--on-gold)}
.av-vipchip__s{font-family:var(--sans);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:10.5px;opacity:.8}
.av-h1{font-family:var(--display);font-weight:800;font-size:46px;line-height:1.08;letter-spacing:.005em;text-wrap:balance}
.av-by{color:var(--muted);margin:10px 0 22px}
.av-vipnote{padding:12px 16px;border-left:3px solid var(--gold);background:rgba(var(--gold-rgb),.07);color:var(--ink);border-radius:0 10px 10px 0;margin-bottom:20px;font-size:15px}
.av-lede{color:var(--body);font-size:16.5px;line-height:1.7;margin-bottom:16px;max-width:62ch}
.av-fmtrow{display:flex;align-items:center;margin:30px 0 12px;color:var(--muted)}
.av-fmt{color:var(--ink);font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.av-instant{font-size:13.5px}
.av-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.av-opt{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"r n" "p p" "d d";column-gap:9px;padding:15px 16px 13px;border-radius:14px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:box-shadow .15s}
.av-opt:hover{box-shadow:inset 0 0 0 1.5px rgba(var(--gold-rgb),.6)}
.av-opt:has(input:checked){box-shadow:inset 0 0 0 2px var(--gold);background:rgba(var(--gold-rgb),.08)}
.av-opt input{grid-area:r;margin:3px 0 0;accent-color:var(--gold);width:15px;height:15px}
.av-opt__n{grid-area:n;font-weight:700;color:var(--ink);font-size:15px}
.av-opt__p{grid-area:p;font-family:var(--display);font-weight:800;font-size:24px;color:var(--ink);margin-top:2px}
.av-opt__d{grid-area:d;color:var(--muted);font-size:13px}
.av-opt__flag{position:absolute;top:-10px;right:12px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--gold);color:var(--on-gold);padding:3px 9px;border-radius:999px}
.av-btn--add{width:100%}
.av-pay{display:flex;gap:8px;align-items:flex-start;color:var(--muted);font-size:13px;margin-top:12px}
.av-pay svg{flex:none;margin-top:3px;color:var(--gold)}
.av-only-narrow{display:none}
.av-sec--rel{padding:24px 0 48px}
.av-relhead{display:flex;align-items:center;gap:24px;margin-bottom:26px}
.av-relhead__r{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.av-arrows{display:flex;gap:10px}
.av-abtn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.av-abtn:first-child{opacity:.4}
@media (max-width:1180px){
  .av-grid5{gap:30px 18px}
  .av-card__row{flex-direction:column;align-items:flex-start;gap:8px}
  .av-fans{gap:14px}
}
@media (max-width:760px){
  :root{--pad:20px;--sheet-r:24px}
  .av-promo{font-size:13px;padding:9px 44px 9px 16px;text-align:left}
  .av-promo__use{display:none}
  .av-promo__x{right:6px}
  .av-hd__in{padding:14px 16px}
  .av-hd__nav{display:none}
  .av-hd__m{display:flex;gap:10px}
  .av-hd__logo{position:absolute;left:50%;transform:translateX(-50%)}
  .av-hd__logo img{height:44px}
  .av-hero{height:auto;min-height:640px;align-items:flex-end;
    background:linear-gradient(180deg,rgba(var(--navy-rgb),.55) 0%,rgba(var(--navy-rgb),0) 18%,rgba(var(--navy-rgb),0) 38%,rgba(var(--navy-rgb),.85) 64%,var(--navy) 84%),
               url(../img/hero.jpg) 62% 0/auto 560px no-repeat,var(--navy)}
  .av-hero__in{padding:300px var(--pad) 120px;gap:12px}
  .av-label{font-size:11.5px;gap:10px}
  .av-label::before{width:24px}
  .av-wordmark{font-size:52px}
  .av-genre{font-size:17px;margin-bottom:10px}
  .av-pill input{height:44px;padding:0 14px;font-size:16px}
  .av-pill .av-btn{height:44px;padding:0 18px;font-size:14px}
  .av-sheet{margin-top:-64px}
  .av-sheet--top{margin-top:0}
  .av-sec{padding:40px 0}
  .av-sec--first{padding-top:48px}
  .av-rowhead{margin-bottom:20px}
  .av-rowhead .av-h2{white-space:nowrap}
  .av-h2{font-size:23px}
  .av-h2s{font-size:19px;white-space:normal}
  .av-grid5--list{grid-template-columns:1fr;gap:22px}
  .av-grid5--list .av-card{flex-direction:row;gap:16px;align-items:stretch}
  .av-grid5--list .av-card__c{flex:none;width:112px}
  .av-grid5--list .av-card__b{gap:10px;padding:2px 0}
  .av-grid5--list .av-card__row{flex-direction:row;align-items:center}
  .av-card:hover .av-card__c{transform:none}
  .av-scroller{margin:0 calc(-1 * var(--pad));padding:0 var(--pad);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .av-scroller::-webkit-scrollbar{display:none}
  .av-scroller .av-grid5{display:flex;gap:16px;width:max-content;padding-bottom:6px}
  .av-scroller .av-card{width:150px;scroll-snap-align:start}
  .av-scroller .av-card__row{flex-direction:column;align-items:flex-start;gap:8px}
  .av-card__t{font-size:15px}
  .av-vipband{grid-template-columns:1fr;padding:32px 22px 26px;gap:28px;border-radius:20px}
  .av-fans{display:flex;overflow-x:auto;gap:18px;margin:-14px -22px 0;padding:18px 34px 4px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .av-fan{flex:none;width:136px;scroll-snap-align:start}
  .av-fan__t{font-size:15px}
  .av-cats{grid-template-columns:1fr;border-radius:20px}
  .av-cats__img{min-height:220px;background:linear-gradient(180deg,rgba(42,32,48,0) 50%,var(--tan) 100%),url(../img/cats.jpg) 30% 30%/cover no-repeat}
  .av-cats__t{padding:6px 22px 30px}
  .av-chip{height:36px;padding:0 13px;font-size:13.5px}
  .av-vals{grid-template-columns:1fr;gap:26px}
  .av-plate{background:#000 url(../img/plate.jpg) 58% 0/auto 300px no-repeat;border-radius:20px}
  .av-plate__in{padding:240px 22px 30px;max-width:none;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,#000 62%)}
  .av-ft{padding:44px 0 28px}
  .av-ft__top{flex-direction:column;gap:32px}
  .av-ft__nav{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px}
  .av-ft__bot{flex-direction:column;align-items:flex-start}
  .av-ptop{height:300px}
  .av-sec--buy{padding-top:28px}
  .av-buy{grid-template-columns:1fr;gap:28px}
  .av-cover-wrap{max-width:330px;width:100%;margin:0 auto}
  .av-only-wide{display:none}
  .av-only-narrow{display:flex;flex-direction:column;gap:22px;margin-top:30px}
  .av-h1{font-size:32px}
  .av-by{margin:8px 0 18px}
  .av-lede{font-size:16px}
  .av-opts{grid-template-columns:1fr;gap:10px}
  .av-opt{grid-template-columns:auto 1fr auto;grid-template-areas:"r n p" ". d p";padding:14px 16px;align-items:center}
  .av-opt__p{font-size:21px;margin:0;text-align:right}
  .av-relhead{margin-bottom:18px;gap:14px}
  .av-arrows{display:none}
}
.av-wordmark{display:block;font-size:0;line-height:0;margin:0 0 6px -.02em;text-shadow:none}
.av-wm{display:flex;flex-wrap:wrap;gap:0 calc(var(--wm-h) * .42);color:#fff;filter:drop-shadow(0 6px 26px rgba(0,0,0,.45))}
.av-wm svg{height:var(--wm-h);width:auto;display:block}
.av-wm--plain{display:none}
.av-genre{font-family:var(--display);font-weight:700;font-size:30px;line-height:1.15;letter-spacing:.005em;color:#fff;margin:14px 0 0}
.av-fmts{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;color:var(--gold-light)}
.av-fmts li{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.av-fmts li svg{color:var(--gold)}
.av-fmts li+li::before{content:"";width:5px;height:5px;border-radius:50%;background:rgba(var(--gold-rgb),.55);margin:0 18px}
.av-hero{background:linear-gradient(90deg,var(--navy) 0%,rgba(var(--navy-rgb),.92) 24%,rgba(var(--navy-rgb),.25) 52%,rgba(var(--navy-rgb),0) 70%),
             linear-gradient(180deg,rgba(var(--navy-rgb),.55) 0%,rgba(var(--navy-rgb),0) 20%,rgba(var(--navy-rgb),0) 70%,var(--navy) 100%),
             url(../img/hero.jpg) right 18% center/cover no-repeat,var(--navy)}
.av-card__t{display:flex;flex-direction:column;gap:4px;text-decoration:none;flex:1}
.av-card__pre{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.3}
.av-card__sub{font-family:var(--serif);font-weight:700;font-size:16px;line-height:1.3;color:var(--ink);transition:color .2s}
.av-card:hover .av-card__sub{color:var(--gold)}
.av-card:hover .av-card__t{color:inherit}
.av-card--here .av-cover{box-shadow:0 0 0 2px var(--gold),0 18px 36px rgba(0,0,0,.45)}
.av-fan__c{margin-bottom:2px}
.av-catlist{list-style:none;margin:4px 0 6px;padding:0;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px}
.av-catlist a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:11px 2px;border-bottom:1px solid var(--line-light);color:var(--ink);text-decoration:none;font-size:15px;font-weight:600}
.av-catlist a:hover{color:var(--gold)}
.av-cat__n{color:var(--muted);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.av-cats__t{padding-right:44px}
.av-h1{font-size:52px;line-height:1.02}
.av-h1__pre{display:block;font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);line-height:1.2;margin-bottom:10px}
.av-h1__sub{display:block}
.av-assures{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.av-assure{display:flex;gap:9px;align-items:flex-start;color:var(--muted);font-size:13.5px;line-height:1.45}
.av-assure svg{flex:none;margin-top:2px;color:var(--gold)}
.av-assure--vip{color:var(--body)}
.av-assure--vip b{color:var(--gold);font-weight:700}
@media (max-width:1180px){
  :root{--wm-h:60px}
}
@media (max-width:760px){
  :root{--wm-h:50px}
  .av-wm{row-gap:12px}
  .av-hero{background:linear-gradient(180deg,rgba(var(--navy-rgb),.5) 0%,rgba(var(--navy-rgb),0) 16%,rgba(var(--navy-rgb),0) 36%,rgba(var(--navy-rgb),.88) 60%,var(--navy) 78%),
               url(../img/hero-phone.jpg) center 0/100% auto no-repeat,var(--navy)}
  .av-hero__in{padding-top:300px}
  .av-genre{font-size:23px;margin-top:10px}
  .av-fmts{margin-bottom:12px}
  .av-fmts li{font-size:11px;letter-spacing:.16em;gap:6px}
  .av-fmts li+li::before{margin:0 11px}
  .av-grid5--list .av-card__sub{font-size:15px}
  .av-scroller .av-card{width:164px}
  .av-scroller .av-card__sub{font-size:14px}
  .av-scroller .av-card__pre{font-size:10.5px;letter-spacing:.14em}
  .av-catlist{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
  .av-catlist a{font-size:14px;padding:10px 1px}
  .av-cats__t{padding-right:22px}
  .av-h1{font-size:38px}
  .av-h1__pre{font-size:12.5px;margin-bottom:8px}
}
.av-label--hero{margin-bottom:6px}
.av-wordmark{margin-bottom:22px}
.av-genre{display:none}
.av-catpills{list-style:none;margin:6px 0 8px;padding:0;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.av-catpills a{display:flex;align-items:center;justify-content:center;height:42px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:600;white-space:nowrap}
.av-catpills a:hover{box-shadow:inset 0 0 0 1.5px var(--gold);color:var(--gold)}
.av-titlerow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start}
.av-h1{font-size:46px;line-height:1.08}
.av-released{color:var(--muted);font-size:14px;font-weight:500;letter-spacing:.04em;white-space:nowrap;padding-top:14px}
.av-promo{padding:10px 16px}
.av-promo{background:#ef8f8f;color:#201824}
.av-code{border-color:rgba(32,24,36,.6)}
@media (max-width:760px){
  .av-label--hero{margin-bottom:4px}
  .av-wordmark{margin-bottom:16px}
  .av-catpills{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .av-catpills a{height:40px;font-size:13.5px}
  .av-h1{font-size:32px}
  .av-titlerow{gap:12px}
  .av-released{font-size:12.5px;padding-top:9px}
  .av-promo{padding:9px 16px;text-align:center}
}
.av-h1{font-size:42px}
@media (max-width:1180px){
  .av-h1{font-size:38px}
}
@media (max-width:760px){
  .av-titlerow{grid-template-columns:1fr;gap:6px}
  .av-released{order:-1;justify-self:end;padding-top:0}
  .av-h1{font-size:30px}
}
.av-above{display:none;align-items:center;flex-wrap:wrap;gap:0;margin:0 0 14px;color:var(--muted);font-size:13px;font-weight:600;line-height:1.3}
.av-above--crumbs{display:flex}
.av-above a{color:var(--muted);text-decoration:none}
.av-above a:hover{color:var(--gold)}
.av-chev{margin:0 10px;color:var(--faint)}
.av-above--facts{letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.av-above--facts svg{width:15px;height:15px;color:var(--gold);margin-right:7px}
.av-released{padding-top:1.7px}
@media (max-width:760px){
  .av-released{padding-top:0}
}
.av-above__date{display:none}
@media (max-width:760px){
  .av-above__date{display:block;margin-left:auto;padding-left:12px;color:var(--muted);font-weight:500;letter-spacing:.04em;text-transform:none;font-size:12.5px}
  .av-released{display:none}
  .av-above{flex-wrap:nowrap}
}
@media (max-width:760px){
  :root{--wm-h:min(50px, calc((100vw - 40px) / 6.70))}
}
@media (max-width:380px){
  .av-grid5--list .av-card__row{flex-direction:column;align-items:flex-start;gap:8px}
  .av-rowhead{flex-wrap:wrap;row-gap:6px}
}
.av-card:hover .av-btn--sm, .av-card:focus-within .av-btn--sm{background:var(--gold);color:var(--on-gold);box-shadow:none}
.av-above--crumbs{display:flex}
.av-specs__len{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 16px}
.av-specs__len span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.av-specs__len svg{width:15px;height:15px;color:var(--gold);flex:none}
.av-assure--vip b{margin-right:.25em}
@media (max-width:760px){
  .av-above__date{display:block;margin-left:auto;padding-left:12px;color:var(--muted);font-weight:500;letter-spacing:.04em;text-transform:none;font-size:12.5px}
  .av-released{display:none}
}
.av-new{position:absolute;z-index:1;top:8px;right:8px;font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:.16em;padding:4px 7px 4px 9px;border-radius:5px;background:var(--gold);color:var(--on-gold);text-transform:uppercase;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.av-pbk{font-size:14px}
.av-pbk b{color:var(--ink)}
@media (max-width:760px){
  .av-grid5--list .av-vip, .av-grid5--list .av-new, .av-scroller .av-vip, .av-scroller .av-new{font-size:9px;letter-spacing:.12em;padding:3px 5px 3px 6px;top:6px}
  .av-grid5--list .av-vip, .av-scroller .av-vip{left:6px}
  .av-grid5--list .av-new, .av-scroller .av-new{right:6px}
}
.av-vip, .av-new{box-sizing:border-box;width:3.9em;height:2em;display:flex;align-items:center;justify-content:center;padding:0 0 0 .16em;line-height:1;border-radius:5px;font-size:10.5px;letter-spacing:.16em}
.av-new{box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.6)}
.av-vip--lg{font-size:12px}
@media (max-width:760px){
  .av-grid5--list .av-vip, .av-grid5--list .av-new, .av-scroller .av-vip, .av-scroller .av-new{font-size:9px;letter-spacing:.12em;padding:0 0 0 .12em;width:3.9em;height:2em;top:6px}
}
.av-hero{position:relative}
.av-hero__in{position:relative;z-index:1}
.av-vip, .av-new{padding:.08em 0 0 .16em}
.av-new{padding:.2em 0 0 .04em}
@media (max-width:760px){
  .av-grid5--list .av-new, .av-scroller .av-new{padding:0 0 .08em .04em}
  .av-grid5--list .av-vip, .av-scroller .av-vip{padding:0 0 .08em .12em}
}
.av-fmts li{letter-spacing:.17em;gap:7px}
.av-fmts li+li::before{margin:0 13px}
.av-vals{gap:28px}
.av-val{gap:16px}
.av-val__i{width:52px;height:52px}
.av-val p span{display:block}
@media (min-width:761px){
  .av-val p span{white-space:nowrap}
}
@media (max-width:1180px){
  .av-val{flex-direction:column;gap:12px}
}
@media (max-width:760px){
  .av-fmts li{letter-spacing:.14em;gap:6px}
  .av-fmts li+li::before{margin:0 9px}
  .av-val__i{width:46px;height:46px}
  .av-val{flex-direction:row;gap:14px}
}
@media (min-width:761px) and (max-width:1000px){
  .av-vals{grid-template-columns:1fr;gap:22px}
  .av-val{flex-direction:row;gap:16px}
}
.av-val{align-items:center}
.av-val h3{margin-top:0}
@media (min-width:1001px) and (max-width:1180px){
  .av-val{align-items:flex-start}
}
.av-val__i{width:62px;height:62px}
.av-val__i svg{transform:scale(1.3)}
@media (max-width:760px){
  .av-val__i{width:50px;height:50px}
  .av-val{gap:12px}
  .av-val__i svg{transform:scale(1.2)}
}
.av-vip:not(.av-vip--lg){padding:.2em 0 0 .16em}
@media (max-width:760px){
  .av-grid5--list .av-vip, .av-scroller .av-vip{padding:0 0 .02em .12em}
  .av-grid5--list .av-new, .av-scroller .av-new{padding:0 0 .02em .04em}
}
@media (min-width:1001px){
  .av-vals{grid-template-columns:repeat(3,auto);justify-content:space-between}
}
@supports (text-box:trim-both cap alphabetic){
  .av-vip, .av-new, .av-vip:not(.av-vip--lg), .av-grid5--list .av-vip, .av-grid5--list .av-new, .av-scroller .av-vip, .av-scroller .av-new{display:block;height:auto;line-height:1;text-align:center;text-box:trim-both cap alphabetic;
    padding-top:.65em;padding-bottom:.65em}
}
@supports (text-box:trim-both cap alphabetic){
  .av-vip, .av-vip:not(.av-vip--lg), .av-grid5--list .av-vip, .av-scroller .av-vip{padding-top:.67em;padding-bottom:.63em}
  .av-new, .av-grid5--list .av-new, .av-scroller .av-new{padding-top:.685em;padding-bottom:.615em}
}
.av-new{padding-left:.093em}
.av-vip, .av-vip:not(.av-vip--lg), .av-vip--lg{padding-left:.16em}
@media (max-width:760px){
  .av-grid5--list .av-new, .av-scroller .av-new{padding-left:.093em}
  .av-grid5--list .av-vip, .av-scroller .av-vip{padding-left:.12em}
}

/* ==========================================================================
   Theme additions (not on the preview board): WordPress/WooCommerce parts,
   pages the board didn't cover, and behaviour fixes. Hand-written.
   ========================================================================== */

/* Value cards: phrases (tr_phrases → .tr-nowrap) may wrap on narrow phones, as on the board; whole phrases on one line from 761px. */
.av-val p .tr-nowrap{white-space:normal}
@media (min-width:761px){ .av-val p .tr-nowrap{white-space:nowrap} }

/* Subscribe pill: honeypot off-screen; status line under the pill (errors) or in its place ("You're in!"). */
.av-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.av-pill{position:relative}
.av-pill .tr-sub__msg:empty{display:none}
.av-pill.is-error .tr-sub__msg{position:absolute;left:20px;right:20px;top:100%;margin-top:8px;padding:0;font-size:14px;color:var(--danger-ink);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.av-pill.is-done{background:none;border:0;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.av-pill.is-done input,.av-pill.is-done .av-btn{display:none}
.av-pill.is-done .tr-sub__msg{position:static;margin:0}
.av-pill .av-btn:disabled{opacity:.7;cursor:default}

/* Header: Kai's search box and phone menu, in Archer's colours (Kai used --parchment as light text). */
.av-hd .tr-nav__link::after{content:none}
.av-hd .av-nav[aria-current]::after{content:""}
.av-hd .tr-search__toggle{width:auto;height:auto;margin:0;padding:6px 0;border-radius:0;color:#fff;background:none}
.av-hd .tr-search__toggle:hover,.av-hd .tr-search__toggle:focus-visible,.av-hd .tr-search__toggle[aria-current]{color:var(--gold);background:none}
.av-hd .tr-search__toggle .tr-icon{width:16px;height:16px}
.tr-search__form{border-color:rgba(var(--gold-rgb),.6);background:rgba(var(--navy-rgb),.9);box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 1px .5px rgba(var(--gold-rgb),.35)}
.tr-search__form:focus-within{border-color:rgba(var(--gold-rgb),.85)}
.tr-search__go{color:var(--gold)}
.tr-search__close,.tr-search__input{color:#fff}
.tr-search__input::placeholder{color:rgba(255,255,255,.6)}
.av-rbtn{position:relative;text-decoration:none;cursor:pointer;padding:0}
.av-rbtn:hover{background:rgba(var(--gold-rgb),.12)}
.av-rbtn__badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--gold);color:var(--on-gold);font-size:11px;font-weight:700;line-height:18px;text-align:center}
.av-cart__n{font-weight:700}
@media (max-width:760px){
  .av-hd__m .tr-search--phone .tr-search__toggle{width:44px;height:44px;border-radius:50%;border:1px solid rgba(var(--gold-rgb),.55);color:var(--gold);background:rgba(var(--navy-rgb),.4);box-shadow:none}
  .av-hd__m .tr-search--phone.is-open .tr-search__toggle{background:rgba(var(--gold-rgb),.16)}
  .av-hd__m .tr-search--phone .tr-search__form{left:12px;right:12px;background:var(--parchment);border-color:var(--gold)}
  .av-hd__m .tr-search--phone .tr-search__go{color:var(--gold)}
  .av-hd__m .tr-search--phone .tr-search__close{color:#fff}
}
.tr-menu{background:var(--navy);color:#fff}
.tr-menu__nav a{color:#fff;border-bottom-color:rgba(var(--gold-rgb),.16)}
.tr-menu__nav a[aria-current]{color:var(--gold)}
.tr-menu__top .tr-logo img{height:44px;width:auto}
.tr-menu__cart,.tr-menu__cart:hover{background:var(--gold);color:var(--on-gold)}

/* Footer social icons: board spacing. */
.av-soc.tr-social{margin-left:0}
.av-soc.tr-social a{width:auto;height:auto;padding:0;border-radius:0;background:none;color:#fff;display:flex}
.av-soc.tr-social a:hover{color:var(--gold);background:none}

/* Kai's buttons on the dark sheet: peach primary (as the board's .av-btn). */
.tr-btn--primary{background:var(--gold);color:var(--on-gold)}
.tr-btn--primary:hover{background:var(--gold-light);color:var(--on-gold)}

/* Product page: the format picker is a fieldset (keyboard/radio semantics), styled like the board's div. */
.av-picker{border:0;margin:0;padding:0;min-width:0}
.av-picker legend.av-fmtrow{padding:0;width:100%;float:none}
.av-btn--add.is-waiting,.av-btn--add:disabled{opacity:.55;cursor:default}
.av-btn--add.is-in-cart{background:var(--tan);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.av-btn.is-disabled{background:var(--tan);color:var(--muted);cursor:default}
.av-btn--sm.is-in-cart{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.av-btn .tr-icon--check{flex:none}
.av-desc{margin-top:2px}
.av-desc blockquote{margin:0 0 16px;padding-left:16px;border-left:2px solid rgba(var(--gold-rgb),.5);color:var(--body)}
.av-desc em{font-style:italic}
.av-player{cursor:pointer}

/* Catalogue pages (shop, VIP, category, search, Story categories): board pieces. */
.av-pagehead{padding:56px 0 8px}
.av-pagehead .av-label{margin-bottom:16px}
.av-pagehead__t{margin:0}
.av-pagehead__sub{color:var(--body);font-size:16.5px;line-height:1.7;max-width:62ch;margin-top:14px}
.av-catrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.av-catrow a{display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:600;white-space:nowrap}
.av-catrow a:hover{box-shadow:inset 0 0 0 1.5px var(--gold);color:var(--gold)}
.av-catrow a[aria-current]{background:var(--gold);color:var(--on-gold);box-shadow:none}
.av-shophead{padding-top:48px;scroll-margin-top:24px}
.av-setrow{padding:28px 0 20px;scroll-margin-top:16px}
.av-relhead__note{color:var(--muted);font-size:13.5px;white-space:nowrap}
.av-cattiles{grid-template-columns:repeat(5,minmax(0,1fr));gap:34px 22px}
.av-searchbar{display:flex;align-items:center;gap:6px;max-width:620px;margin-top:22px;padding:6px 6px 6px 18px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
.av-searchbar:focus-within{box-shadow:inset 0 0 0 1.5px var(--gold)}
.av-searchbar input{flex:1;min-width:0;height:46px;border:0;background:transparent;color:#fff;font:inherit;font-size:16px;outline:none}
.av-searchbar input::placeholder{color:rgba(255,255,255,.55)}
.av-searchbar .av-btn{height:46px}
.av-empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:8px 0 24px}
.av-empty__t{font-family:var(--display);font-weight:800;font-size:22px;color:var(--ink);text-transform:uppercase;letter-spacing:.02em}
.av-empty__s{color:var(--muted)}
@media (max-width:1000px){ .av-cattiles{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){
  .av-pagehead{padding:40px 0 4px}
  .av-catrow{flex-wrap:nowrap;overflow-x:auto;margin:22px calc(-1 * var(--pad)) 0;padding:0 var(--pad) 4px;scrollbar-width:none}
  .av-catrow::-webkit-scrollbar{display:none}
  .av-shophead{padding-top:32px}
  .av-setrow{padding:22px 0 14px}
  .av-cattiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin:0;padding:0;gap:24px 16px}
  .av-cattiles .av-fan{width:auto}
  .av-searchbar{padding-left:14px}
  .av-searchbar .av-btn{height:42px;padding:0 18px}
  .av-relhead__note{display:none}
}

/* Phone scrollers: scroll snapping lined the first card up with the screen edge (also on the board);
   scroll-padding keeps the page gutter so the first card starts where the headings do. */
@media (max-width:760px){
  .av-scroller{scroll-padding-inline:var(--pad)}
  .av-fans{scroll-padding-inline:34px}
}

/* Kai's inner pages (cart, checkout, My Library, FAQ, Contact, legal, 404, sample): same sheet as the board's pages. */
.tr-sheet{width:auto;max-width:1320px;margin:0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.05),0 -12px 40px rgba(0,0,0,.35)}
.tr-sheetin{animation:none}
.tr-pagetitle{font-family:var(--display);font-weight:800;letter-spacing:.005em;line-height:1.08;font-size:46px}
.tr-pagetitle--xl{font-size:52px}
.tr-pagetitle--legal,.tr-pagetitle--md{font-size:42px}
.tr-pagetitle--band{font-size:56px;text-transform:uppercase;letter-spacing:.03em}
.tr-h2,.tr-rulehead__title,.tr-plate__title,.tr-read__title,.tr-endcard__title,.tr-404__title{font-family:var(--display);font-weight:800}
@media (max-width:760px){
  .tr-sheet{width:100%}
  .tr-pagetitle{font-size:32px}
  .tr-pagetitle--xl,.tr-pagetitle--band{font-size:34px}
}
/* Title bands: the photo sits right; plain wall under the title on the left. Phones show the figure. */
.tr-band{border-bottom-color:rgba(var(--gold-rgb),.7)}
@media (max-width:760px){
  .tr-band--faq{background-position:78% center}
  .tr-band--contact{background-position:74% center}
}

/* Montserrat is wider than Kai's serif: let two Kai headings wrap on phones instead of clipping. */
.tr-contact__intro p{font-weight:700;text-wrap:balance}
.tr-rulehead__title{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.03em}
@media (max-width:760px){
  .tr-contact__intro p{font-size:min(26px,6.6vw)}
  .tr-contact__intro .tr-nowrap{white-space:normal}
  .tr-rulehead__title{white-space:normal;text-wrap:balance}
}
/* Checkout steps at 320–380px: Montserrat-era widths overran the sheet by 14px. */
@media (max-width:380px){
  .tr-steps ol{gap:4px}
  .tr-steps__step{gap:5px;letter-spacing:.03em}
  .tr-steps__line{width:6px}
}
/* Current-step number on the dark sheet: peach, like the board's buttons. */
.tr-steps__step.is-done .tr-steps__num,.tr-steps__step.is-current .tr-steps__num{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}

/* Tablet portrait (761–1000px; the board covered desktop and phone): one-line header, and a two-column
   product page with a narrower cover column so the title, formats and button stay on the first screen. */
@media (min-width:761px) and (max-width:1000px){
  .av-hd__in{gap:16px}
  .av-hd__nav{gap:18px}
  .av-nav,.av-cart{font-size:11.5px;letter-spacing:.12em}
  .av-cart{padding:8px 13px}
  .av-hd__logo img{height:50px}
  .av-buy{grid-template-columns:280px minmax(0,1fr);gap:36px}
  .av-h1{font-size:34px}
  .av-titlerow{grid-template-columns:1fr}
  .av-released{display:none}
  .av-above{flex-wrap:nowrap}
  .av-above__date{display:block;margin-left:auto;padding-left:12px;color:var(--muted);font-weight:500;letter-spacing:.04em;text-transform:none;font-size:12.5px}
  .av-opts{grid-template-columns:1fr;gap:10px}
  .av-opt{grid-template-columns:auto 1fr auto;grid-template-areas:"r n p" ". d p";padding:14px 16px;align-items:center}
  .av-opt__p{font-size:21px;margin:0;text-align:right}
  .av-specs__len{flex-wrap:wrap;justify-content:flex-end}
}
@media (min-width:761px) and (max-width:799px){ .av-h1{font-size:30px} } /* longest title (Tamed by the Billionaire Alpha Male) in 2 lines */
@media (min-width:761px) and (max-width:1000px){ .av-player__t{font-size:13.5px;gap:8px} .av-player__t span{white-space:nowrap} }

/* Contrast fixes found by the contrast sweep (WCAG AA). */
.tr-btc a.bnomics-qr-link.tr-btn.tr-btn--primary,.tr-btc a.bnomics-qr-link.tr-btn.tr-btn--primary:hover{color:var(--on-gold)} /* "Open in wallet" was peach on peach */
/* Bitcoin QR code: dark modules need a light quiet zone to scan (it was drawn on the dark card). */
.tr-btcgrid__qr canvas,.tr-btcgrid__qr svg,.tr-btcgrid__qr img{background:#fff;padding:10px;border-radius:12px;box-sizing:content-box}

/* My Library tabs on phones: all four fit on one row from 360px (they wrap below that instead of scrolling
   out of view); "Order again" clears the order table. */
@media (max-width:760px){
  .tr-libnav ul{flex-wrap:wrap;overflow:visible;gap:6px}
  .tr-libnav a{padding:9px 12px}
}
@media (max-width:400px){
  .tr-libnav ul{gap:4px}
  .tr-libnav a{padding:9px 9px}
}
.woocommerce-order-details .order-again{margin-top:18px}
.tr-orderdl{margin-bottom:8px}

/* My Library on tablets: the side menu becomes the phone's tab row, so tables get the full width. */
@media (min-width:761px) and (max-width:1000px){
  .tr-lib{display:flex;flex-direction:column;gap:14px}
  .tr-libnav{background:none;box-shadow:none;padding:0;margin-bottom:8px}
  .tr-libnav ul{flex-direction:row;flex-wrap:wrap;gap:8px}
  .tr-libnav a{padding:9px 14px;border-radius:999px;font-size:14px;box-shadow:0 0 0 1px var(--line)}
  .tr-libnav a[aria-current]{background:var(--navy);color:var(--gold-light);box-shadow:none}
}

/* Cart, checkout and thank-you on tablets: one column (the side summary was too narrow for its button).
   Cart: items, summary, then suggestions. Checkout: the order summary first, then the form. */
@media (min-width:761px) and (max-width:1000px){
  .tr-twocol{display:flex;flex-direction:column;align-items:stretch;gap:28px}
  .tr-summary,.tr-cartside{position:static}
  .tr-cart-section .tr-twocol__main{display:contents}
  .tr-cartform{order:1}
  .tr-cart-section .tr-cartside{order:2}
  .tr-suggest{order:3}
  .tr-co .tr-twocol__side{order:-1}
  /* Homepage VIP band: text above, the four set fans across the full width (at 768 the set names ran together). */
  main .av-vipband{grid-template-columns:minmax(0,1fr);gap:28px}
  /* Footer: brand above the four link columns, so "Support my work" stays on one line. */
  .av-ft__top{flex-direction:column;gap:32px}
}

/* Empty shop / no search results: keep the page's side margin (the board's padding shorthand zeroed it). */
.av-wrap.av-empty{padding:8px var(--pad) 24px}

/* ---- 1.0.2 ---- */
/* Shop, VIP, category and search cards: price on the title line, no button. */
.av-card--shop .av-card__line{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.av-card--shop .av-card__sub{min-width:0}
.av-card--shop .av-card__price{flex:none;font-family:var(--sans);font-size:14.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.av-card--shop:hover .av-card__price{color:var(--ink)}
/* "from" sits right-aligned on the "Trashed by the" line, straight above the price, so it costs the title
   no width (1.0.3). Narrow cards (tablets, 320px phones): "from $5.99" goes under the title instead. */
.av-card--shop .av-card__preline{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.av-card--shop .av-card__pre{min-width:0}
.av-card--shop .av-card__from{flex:none;font-size:12px;line-height:1.3;color:var(--muted);letter-spacing:.02em}
.av-card--shop .av-card__pfrom{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.av-card--shop .av-card__b{container-type:inline-size}
@container (max-width:185px){
  .av-card--shop .av-card__line{flex-direction:column;align-items:flex-start;gap:3px}
  .av-card--shop .av-card__pre{font-size:10.5px;letter-spacing:.1em}
  .av-card--shop .av-card__from{display:none}
  .av-card--shop .av-card__pfrom{position:static;width:auto;height:auto;clip:auto;font-weight:400;font-size:13px;color:var(--muted)}
}

/* Checkout: "We'll email you a link…" sits just under its checkbox (10px → 3px); the fine print under the
   button is two lines, the download line first. */
.tr-check__note{margin-top:-13px;line-height:1.45}
.tr-placeorder__note span{display:block}

/* Cart: no rule after "You may be interested in…". */
.tr-suggest .tr-rulehead__rule{display:none}

/* Thank-you: the eReader icon was navy on the dark sheet. Peach disc, dark icon, like the step numbers. */
.tr-kindle__icon{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}

/* Support my work: the four amounts on one row on every screen. Phones hide the radio dot (still the
   focusable control) and centre the amount; the chosen one gets the peach ring as before. */
.av-picker--amounts .av-opts{grid-template-columns:repeat(4,minmax(0,1fr))}
.av-picker--amounts .av-opt{align-items:center}
@media (max-width:760px){
  .av-picker--amounts .av-opts{gap:8px}
  .av-picker--amounts .av-opt{grid-template-columns:1fr;grid-template-areas:"n";padding:14px 6px;text-align:center}
  .av-picker--amounts .av-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
  .av-picker--amounts .av-opt:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
}
.av-picker--amounts .av-opt input{margin:0}

/* Story categories: each tile is a fan of theme-coloured cards instead of book covers. Front card: plum,
   peach hairline frame, the category's glowing line icon and its story count. Back cards: a fine peach
   lattice, dimmed by the fan as the covers were. */
.av-catcard{display:flex;align-items:center;justify-content:center;overflow:hidden;container-type:inline-size;
  background:radial-gradient(85% 75% at 50% 40%,#3d2c42 0%,#261c2b 55%,#19121c 100%);
  box-shadow:0 18px 36px rgba(0,0,0,.45),inset 0 0 0 1px rgba(var(--gold-rgb),.38)}
.av-catcard::before{content:"";position:absolute;inset:6.5%;border:1px solid rgba(var(--gold-rgb),.2);border-radius:calc(var(--cover-r)*.6);pointer-events:none}
.av-catcard__i{width:44%;height:auto;margin-top:-7%;color:var(--gold);filter:drop-shadow(0 0 5px rgba(var(--gold-rgb),.55)) drop-shadow(0 0 16px rgba(var(--gold-rgb),.25));transition:filter .3s}
.av-catcard__l{margin-top:-7%;font:800 34cqw/1 var(--display);color:var(--gold);text-shadow:0 0 8px rgba(var(--gold-rgb),.5),0 0 22px rgba(var(--gold-rgb),.25)}
.av-catcard__n{position:absolute;left:0;right:0;bottom:12%;text-align:center;font:700 6.3cqw/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--gold-rgb),.72)}
.av-catcard--back{background:
  repeating-linear-gradient(45deg,rgba(var(--gold-rgb),.075) 0 1px,transparent 1px 10px),
  repeating-linear-gradient(-45deg,rgba(var(--gold-rgb),.075) 0 1px,transparent 1px 10px),
  radial-gradient(80% 80% at 50% 45%,#30233a,#1a131d)}
.av-catfan:hover .av-catcard__i{filter:drop-shadow(0 0 7px rgba(var(--gold-rgb),.75)) drop-shadow(0 0 22px rgba(var(--gold-rgb),.4))}

/* The Alpha Files: their one format (Audio) sits where a story's picker goes, shown as chosen. */
.av-picker--one .av-opt,.av-picker--one .av-opt:hover{grid-template-columns:1fr;grid-template-areas:"n" "p" "d";cursor:default;box-shadow:inset 0 0 0 2px var(--gold);background:rgba(var(--gold-rgb),.08)}
@media (max-width:760px){
  .av-picker--one .av-opt,.av-picker--one .av-opt:hover{grid-template-columns:1fr auto;grid-template-areas:"n p" "d p"}
}

/* Product page: space between the preview / sample buttons and the details list (the last button sat on
   the first rule; most visible on The Alpha Files, which have one button). */
.av-samples{margin-bottom:18px}

/* Contact: "Send me a message!" in the body face, upright (was Montserrat italic). Board option C. */
.tr-contact__intro em{font-style:normal;font-family:var(--sans);font-weight:500;letter-spacing:-.005em}

/* Tablets (761–1000): the homepage rows (and the product page's Collect the set / You may also like)
   become sideways rows of 200px cards, as on phones, instead of five 123px cards squeezed across. */
@media (min-width:761px) and (max-width:1000px){
  .av-scroller{margin:0 calc(-1 * var(--pad));padding:0 var(--pad);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none}
  .av-scroller::-webkit-scrollbar{display:none}
  .av-scroller .av-grid5{display:flex;gap:20px;width:max-content;padding-bottom:6px}
  .av-scroller .av-card{width:200px;scroll-snap-align:start}
}

/* ---- 1.0.6 ---- */
/* Homepage "Pick a path…": the 1.0.3 box and photo (5fr / 7fr); the Story categories cards (plain dark
   back cards, counts) replace the pills, six at a time (3 x 2) in a carousel: arrows beside the heading,
   dots under it, swipe or scroll sideways. Up to 1000px: photo on top and one sideways row of cards, like
   the other homepage rows (the pages flatten). */
.av-pathcar__head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:-4px}
.av-pathcar__arrows{display:flex;gap:8px}
.av-pathcar__arrow{width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:box-shadow .2s,color .2s,opacity .2s}
.av-pathcar__arrow:hover:not(:disabled){box-shadow:inset 0 0 0 1.5px var(--gold);color:var(--gold)}
.av-pathcar__arrow:disabled{opacity:.35;cursor:default}
.av-pathcar__arrow:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.av-pathcar__track{width:100%;display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0;padding:0;overscroll-behavior-x:contain}
.av-pathcar__track::-webkit-scrollbar{display:none}
.av-pathcar__page{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px;justify-items:center;align-content:start;padding:8px 0 2px}
.av-pathcar .av-fan{width:min(100%,128px)}
.av-pathcar .av-fan__c{margin-bottom:0;aspect-ratio:1/1.04}
.av-pathcar .av-catcard__i{margin-top:0;width:46%}
.av-pathcar .av-fan__t{font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.05em;line-height:1.3;text-wrap:balance}
.av-pathcar .av-fan__s{font-size:12.5px;margin-top:-2px}
.av-pathcar__foot{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:2px}
.av-pathcar__dots{display:flex;gap:4px}
.av-pathcar__dot{width:24px;height:24px;border:0;padding:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.av-pathcar__dot::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .2s,width .2s}
.av-pathcar__dot[aria-current="true"]::before{width:22px;border-radius:4px;background:var(--gold)}
.av-pathcar__dot:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-radius:6px}
/* 1.0.7 version A: tighter rows; the cards take a fixed 456px on the right and the photo's fade is shorter,
   so the photo is wider and shows his hand and the book. */
@media (min-width:1001px){
  .av-cats--car:not(.av-cats--top){grid-template-columns:minmax(0,1fr) 456px}
  .av-cats--car:not(.av-cats--top) .av-cats__img{background:linear-gradient(90deg,rgba(42,32,48,0) 84%,var(--tan) 100%),url(../img/cats.jpg) 52% center/cover no-repeat}
  .av-cats--car:not(.av-cats--top) .av-cats__t{padding:40px 40px 34px 8px;gap:14px}
  .av-cats--car .av-pathcar__page{gap:2px 12px;padding-top:4px}
}
/* 1.0.7 version B (brand.php cats_layout = 'top'): the tablet layout on computers. The photo runs across
   the top, where its wide shape shows his face and the book; the cards are one sideways row paged by the
   arrows. */
@media (min-width:1001px){
  .av-cats--top{grid-template-columns:minmax(0,1fr)}
  .av-cats--top .av-cats__img{min-height:360px;background:linear-gradient(180deg,rgba(42,32,48,0) 55%,var(--tan) 100%),url(../img/cats.jpg) center 12%/cover no-repeat} /* 1.0.9: back to the 1.0.7 crop (face, arm and the book); 1.0.8's center 55% was not used */
  .av-cats--top .av-cats__t{padding:4px 44px 34px;gap:14px}
  .av-cats--top .av-pathcar__dots{display:none}
  .av-cats--top .av-cats__t{container-type:inline-size}
  .av-cats--top .av-pathcar__track{width:auto;align-self:stretch;margin:0 -18px;padding:6px 18px 4px;gap:18px;scroll-padding-inline:18px;
    display:grid;grid-template:none/none;grid-auto-flow:column;grid-auto-columns:calc((100cqw - 6 * 18px) / 7)}
  .av-cats--top .av-pathcar__page{display:contents}
  .av-cats--top .av-pathcar .av-fan{width:auto;scroll-snap-align:start}
}
/* 1.0.10: whole cards only. The row shows exactly 7 (6 or 5 on narrower laptops, keeping every card at least
   128px for "Transformation"), and the arrows move by that many, so no card is ever cut at the edge. */
@container (max-width:1003px){ .av-cats--top .av-pathcar__track{grid-auto-columns:calc((100cqw - 5 * 18px) / 6)} }
@container (max-width:857px){ .av-cats--top .av-pathcar__track{grid-auto-columns:calc((100cqw - 4 * 18px) / 5)} }
@media (max-width:1000px){
  .av-cats--car{grid-template-columns:minmax(0,1fr)}
  .av-cats--car .av-cats__img{min-height:280px;background:linear-gradient(180deg,rgba(42,32,48,0) 50%,var(--tan) 100%),url(../img/cats.jpg) 30% 6%/cover no-repeat}
  .av-cats--car .av-cats__t{padding:6px 34px 32px}
  .av-pathcar__arrows,.av-pathcar__dots{display:none}
  .av-pathcar__track{width:auto;align-self:stretch;margin:0 -34px;padding:6px 34px 4px;gap:18px;scroll-padding-inline:34px}
  .av-pathcar__page{display:contents}
  .av-pathcar .av-fan{flex:none;width:150px;scroll-snap-align:start}
}
@media (max-width:760px){
  .av-cats--car .av-cats__img{min-height:220px}
  .av-cats--car .av-cats__t{padding:6px 22px 30px}
  .av-pathcar__track{margin:0 -22px;padding:6px 22px 4px;scroll-padding-inline:22px}
  .av-pathcar .av-fan{width:136px}
}

/* Contact: "Send me a message!" in the body face, italic (1.0.4). */
.tr-contact__intro em{font-style:italic}

/* ---- 1.0.6 ---- */
/* My Library bookshelf (inc/shelf.php): owned stories as covers, five across (three on phones), in the
   shop's sections, A–Z. A cover opens a panel under its row with the downloads; versions not owned are
   locked and link to the story page. */
.av-shelf{display:flex;flex-direction:column;gap:0}
.av-shelf__top{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;margin-bottom:6px}
.tr-lib__content .av-shelf__h{margin:0;display:flex;align-items:center;gap:12px;font:800 30px/1.1 var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.av-shelf__count{display:inline-flex;align-items:center;height:26px;padding:1px 11px 0;border-radius:999px;background:rgba(var(--gold-rgb),.14);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.4);color:var(--gold);font:700 13.5px/1 var(--sans);letter-spacing:.04em}
.av-shelf__find{position:relative;flex:0 1 270px;display:block}
.av-shelf__find svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.av-shelf__find .tr-field{height:44px;padding-left:42px;font-size:15px;border-radius:999px}
.av-shelf__sec{margin-top:30px}
.av-shelf__sec .av-relhead{margin-bottom:20px}
.tr-lib__content .av-shelf__sh{margin:0;font-family:var(--display);font-weight:800;font-size:19px;line-height:1.15;letter-spacing:.03em;color:var(--ink)}
.av-shelf__of{font:600 13px/1 var(--sans);color:var(--muted);white-space:nowrap;letter-spacing:.02em}
.av-shelf__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px 18px}
.av-shelf__card{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:11px;text-align:left;color:inherit;font:inherit;cursor:pointer;border-radius:10px}
.av-shelf__card:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.av-shelf__c{position:relative;display:block;transition:transform .35s var(--ease)}
.av-shelf__c .av-cover{display:block;width:100%;transition:box-shadow .3s}
.av-shelf__c .av-vip{position:absolute;left:8px;top:8px;z-index:1}
.av-shelf__card:hover .av-shelf__c,.av-shelf__item.is-open .av-shelf__c{transform:translateY(-4px)}
.av-shelf__item.is-open .av-cover{box-shadow:0 0 0 2px var(--gold),0 16px 30px rgba(0,0,0,.45)}
.av-shelf__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.av-shelf__pre{font:700 10.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.av-shelf__sub{font:600 16px/1.25 var(--serif);color:var(--ink);transition:color .2s}
.av-shelf__card:hover .av-shelf__sub,.av-shelf__item.is-open .av-shelf__sub{color:var(--gold)}
.av-shelf__fmt{margin-top:2px;font-size:12.5px;color:var(--muted)}
.av-shelf__item[hidden],.av-shelf__sec[hidden]{display:none}
.av-shelf__panel{grid-column:1/-1;position:relative;margin-top:-6px;padding:18px 20px 20px;border-radius:16px;background:var(--tan);box-shadow:0 0 0 1px var(--line),0 18px 40px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:16px}
.av-shelf__panel[hidden]{display:none}
.av-shelf__panel::before{content:"";position:absolute;top:-8px;left:calc(var(--nx,50%) - 8px);width:16px;height:16px;background:var(--tan);box-shadow:-1px -1px 0 0 var(--line);transform:rotate(45deg);border-top-left-radius:3px}
.av-shelf__ph{display:flex;align-items:center;gap:16px}
.av-shelf__pt{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.av-shelf__ptitle{font:600 21px/1.2 var(--serif);color:var(--ink)}
.av-shelf__page{white-space:nowrap;font-size:14px}
.av-shelf__x{flex:none;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.06);color:var(--body);display:flex;align-items:center;justify-content:center;cursor:pointer}
.av-shelf__x:hover{background:rgba(255,255,255,.12);color:var(--ink)}
/* 1.0.7: one tile per format. Owned: solid, peach check, download buttons. Not owned: dashed and dimmed,
   lock, "Not in your library", one outline button to the story page. */
.av-shelf__fmts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px}
.av-shelf__f{display:flex;flex-direction:column;gap:14px;padding:14px 16px 16px;border-radius:14px;background:var(--parchment);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.28)}
.av-shelf__f.is-locked{background:transparent;box-shadow:none;border:1.5px dashed var(--line);padding:12.5px 14.5px 14.5px}
.av-shelf__fh{display:flex;align-items:center;gap:12px}
.av-shelf__fi{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(var(--gold-rgb),.14);color:var(--gold)}
.av-shelf__fi svg{width:18px;height:18px}
.av-shelf__f.is-locked .av-shelf__fi{background:rgba(255,255,255,.06);color:var(--muted)}
.av-shelf__fn{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.av-shelf__fn b{font:700 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.av-shelf__fn small{font-size:13px;line-height:1.35;color:var(--muted)}
.av-shelf__f:not(.is-locked) .av-shelf__fn small{color:var(--gold)}
.av-shelf__ok{flex:none;color:var(--gold)}
.av-shelf__ok svg{width:18px;height:18px}
.av-shelf__btns{display:flex;flex-wrap:wrap;gap:8px}
.av-shelf__btns .tr-btn{flex:1 1 0;gap:7px;font-weight:600;white-space:nowrap}
.av-shelf__btns .tr-btn svg{width:15px;height:15px}
.av-shelf__unlock{color:var(--body)}
/* 1.0.8: a story sold in one format (The Alpha Files) gets one compact tile: name on the left, the
   buttons at their own width on the right, the tile only as wide as it needs. */
.av-shelf__fmts--one{display:flex}
.av-shelf__fmts--one .av-shelf__f{flex-direction:row;align-items:center;gap:24px;padding:12px 14px 12px 16px}
.av-shelf__fmts--one .av-shelf__fh{flex:none}
.av-shelf__fmts--one .av-shelf__ok{display:none}
.av-shelf__fmts--one .av-shelf__btns .tr-btn{flex:none;min-width:112px}
@media (max-width:760px){
  .av-shelf__fmts--one .av-shelf__f{flex:1;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:12px}
  .av-shelf__fmts--one .av-shelf__fi{display:none}
  .av-shelf__fmts--one .av-shelf__btns{flex:1 1 auto;justify-content:flex-end}
  .av-shelf__fmts--one .av-shelf__btns .tr-btn{flex:0 1 auto;min-width:100px}
}
.av-shelf__unlock span{transition:transform .2s}
.av-shelf__unlock:hover span{transform:translateX(3px)}
.av-shelf__none{margin:26px 0 0;color:var(--muted)}
@media (max-width:1180px){ .av-shelf__grid{gap:22px 14px} .av-shelf__sub{font-size:15px} }
@media (max-width:760px){
  .tr-lib__content .av-shelf__h{font-size:24px}
  .av-shelf__find{flex:1 1 100%}
  .av-shelf__sec{margin-top:24px}
  .av-shelf__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px}
  .av-shelf__card{gap:8px}
  .av-shelf__c .av-vip{left:5px;top:5px}
  .av-shelf__pre{font-size:9.5px;letter-spacing:.1em}
  .av-shelf__sub{font-size:14px}
  .av-shelf__fmt{font-size:11.5px}
  .av-shelf__panel{padding:16px}
  .av-shelf__ptitle{font-size:18px}
  .av-shelf__ph{flex-wrap:wrap;gap:6px 12px}
  .av-shelf__pt{flex:1 1 calc(100% - 60px)}
  .av-shelf__page{order:3}
}

/* ---- 1.0.10 ---- */
/* Wide screens: the hero keeps its 1440px composition. Past 1440 the photo used to "cover" the full width,
   so it grew (and cropped tighter) with every extra pixel and slid as the window resized. Now it is sized
   to the hero's height (800px → 1422px wide) and centred under the centred content, with the text-side
   gradient measured from that same centred 1440px frame and a soft fade at the photo's right edge. */
@media (min-width:1441px){
  .av-hero{background:
    linear-gradient(90deg,var(--navy) 0,var(--navy) calc(50% - 720px),rgba(var(--navy-rgb),.92) calc(50% - 374px),rgba(var(--navy-rgb),.25) calc(50% + 29px),rgba(var(--navy-rgb),0) calc(50% + 288px),rgba(var(--navy-rgb),0) calc(50% + 560px),var(--navy) calc(50% + 712px)),
    linear-gradient(180deg,rgba(var(--navy-rgb),.55) 0%,rgba(var(--navy-rgb),0) 20%,rgba(var(--navy-rgb),0) 70%,var(--navy) 100%),
    url(../img/hero.jpg) center center/auto 100% no-repeat,var(--navy)}
}
/* Wide screens: everything a step larger, so the 1160px layout doesn't sit small in the middle of a big
   monitor. Browser zoom on the page, in steps; the layout underneath always stays the 1440px+ desktop. */
@media (min-width:1800px){html{zoom:1.05}}
@media (min-width:2050px){html{zoom:1.12}}
@media (min-width:2300px){html{zoom:1.2}}
@media (min-width:2700px){html{zoom:1.32}}
@media (min-width:3200px){html{zoom:1.5}}
/* Homepage fade-in: the hero photo fades up from the dark, then the eyebrow, wordmark, formats and the
   subscribe pill rise in one after another, then the content sheet. Opacity and transform only; skipped
   for "reduce motion". */
@keyframes av-fadein{from{opacity:0}to{opacity:1}}
@keyframes av-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .home .av-hero{animation:av-fadein 1s ease-out both}
  .home .av-hero__in>*{animation:av-rise .8s cubic-bezier(.2,.7,.2,1) both}
  .home .av-hero__in>:nth-child(1){animation-delay:.15s}
  .home .av-hero__in>:nth-child(2){animation-delay:.27s}
  .home .av-hero__in>:nth-child(3){animation-delay:.39s}
  .home .av-hero__in>:nth-child(4){animation-delay:.51s}
  .home .av-hd{animation:av-fadein .8s ease-out .1s both}
  .home .av-sheet{animation:av-rise .9s cubic-bezier(.2,.7,.2,1) .55s both}
}
/* The Alpha Files product page: "THE ALPHA FILES · EPISODE #003" under the title, then "by Archer Vale". */
.av-episode{margin:10px 0 0;display:flex;align-items:center;font:700 12.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.av-episode+.av-by{margin-top:6px}
.av-episode .tr-sepdot{margin:0 .75em 0 .6em}
@media (max-width:760px){ .av-episode{font-size:11.5px;margin-top:8px} }
/* Sample reader: one step smaller all round (owner, 1.0.10); the A buttons step from there. */
.tr-read{font-size:calc(20.5px * var(--tr-scale))}
.tr-sdlg .tr-read{font-size:calc(19.5px * var(--tr-scale))}
@media (max-width:760px){ .tr-read,.tr-sdlg .tr-read{font-size:calc(18px * var(--tr-scale))} }
/* Shop and category pages: the category pills in even rows. Phones keep their sideways row. */
.av-catrow__br{display:none;flex-basis:100%;height:0}
/* 1.0.11: every pill the same width. Eight to a row when they fit at 136px (the longest, "Domestic Service",
   needs 136px), otherwise five; a short last row is centred. */
@media (min-width:761px){
  .av-pagehead .av-wrap{container-type:inline-size}
  .av-catrow{justify-content:center}
  .av-catrow a{flex:0 0 calc((100% - 4 * 8px) / 5);justify-content:center;padding:0 12px}
  .av-catrow__br{display:none!important}
}
@container (min-width:1144px){ .av-catrow a{flex-basis:calc((100% - 7 * 8px) / 8)} }
/* Checkout (1.0.11): the payment methods are outlined panels on the page surface, like the rest of the
   checkout, so the Stripe card fields inside look like every other field. The chosen one has the peach border,
   peach radio and (in Stripe) a peach-outlined Card/Bank tab. */
.tr-paymethod,.tr-paymethod:has(> input:checked){background:transparent}
.tr-paymethod{border-color:var(--line)}
.tr-paymethod:has(> input:checked){border-color:var(--gold-mid);box-shadow:inset 0 0 0 .5px var(--gold-mid)}
/* Cart and checkout summary: the version as a pill (Ebook / Audio / Ebook + Audio), "Instant download" after it. */
.tr-cartitem__fmt,.tr-sumitem__fmt{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.tr-fmtpill{display:inline-flex;align-items:center;height:24px;padding:1px 11px 0;border-radius:999px;background:rgba(var(--gold-rgb),.13);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.45);color:var(--gold);font:700 12px/1 var(--sans);letter-spacing:.04em;white-space:nowrap}
.tr-fmtpill__then{color:var(--muted)}
.tr-cartitem__fmt{margin-top:4px}
/* Cart suggestions: bigger covers (56 → 88px). */
.tr-mini .tr-mini__cover{width:88px;border-radius:5px}
.tr-mini{gap:16px}
@media (max-width:760px){ .tr-mini .tr-mini__cover{width:72px} }
/* Payment method radios: drawn by the theme, so "chosen" reads at a glance (peach ring and dot). */
.tr-paymethod>input[type=radio]{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);background:transparent;cursor:pointer;flex:none}
.tr-paymethod>input[type=radio]:checked{border-color:var(--gold-mid);background:radial-gradient(circle,var(--gold-mid) 0 4.5px,transparent 5px)}
.tr-paymethod>input[type=radio]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---- 1.0.11 ---- */
/* Homepage: less empty space around the VIP band and the Pick a path box. */
.av-sec--vip,.av-sec--cats{padding-top:28px;padding-bottom:28px}
@media (max-width:760px){ .av-sec--vip,.av-sec--cats{padding-top:20px;padding-bottom:20px} }
/* Pick a path arrows: filled peach so they read as buttons; faint when there's nothing further that way. */
.av-pathcar__arrow{background:var(--gold);color:var(--on-gold);box-shadow:none}
.av-pathcar__arrow:hover:not(:disabled){background:var(--gold-mid);color:var(--on-gold);box-shadow:none}
.av-pathcar__arrow:disabled{opacity:1;background:rgba(255,255,255,.06);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.av-pathcar__arrow svg{width:18px;height:18px}
/* Product pages: a line's space between the blurb and FORMAT. */
.av-desc{margin-bottom:28px}
@media (max-width:760px){ .av-desc{margin-bottom:22px} }

/* ---- 1.0.12 ---- */
/* Wider on big screens: the sheet grows from 1320 to 1440px once the layout has room (1560px+), and the
   header, hero, page content and footer widen with it so every left and right edge stays lined up. Up to
   1440px nothing changes. Widths come from the window width divided by the page zoom (--z, set with the
   zoom steps above), because the boxes are nested at different depths. */
:root{--z:1}
@media (min-width:1800px){:root{--z:1.05}}
@media (min-width:2050px){:root{--z:1.12}}
@media (min-width:2300px){:root{--z:1.2}}
@media (min-width:2700px){:root{--z:1.32}}
@media (min-width:3200px){:root{--z:1.5}}
@media (min-width:1001px){
  :root{--sheet-w:clamp(1320px,100vw / var(--z) - 120px,1440px);--wrap-in:calc(var(--sheet-w) - 160px)}
  .av-sheet,.tr-sheet{max-width:var(--sheet-w)}
  .tr-sheet{width:100%}
  .av-sheet .av-wrap,.tr-sheet .av-wrap,.av-ft .av-wrap,.av-hero__in{max-width:calc(var(--wrap-in) + 80px)}
  .av-sheet .tr-wrap,.tr-sheet .tr-wrap,.tr-sheet>.woocommerce-notices-wrapper>*,.tr-notices>*{max-width:var(--wrap-in)}
  .av-hd__in{max-width:var(--sheet-w)}
}
/* One page-title size on computers (the shop and product pages' 42px): cart, checkout, My Library, FAQ and
   Contact were 46–56px. The FAQ and Contact bands line their title up with the content edge (72 → 80px). */
@media (min-width:1001px){
  .tr-pagetitle,.tr-pagetitle--md,.tr-pagetitle--legal,.tr-pagetitle--xl,.tr-pagetitle--band{font-size:42px}
  .tr-band{padding-left:80px;padding-right:80px}
}
/* Homepage: the content sheet's top padding was taller than its bottom (72 vs 56px). */
@media (min-width:761px){ .av-sec--first{padding-top:56px} }
/* Product page rows ("Collect the set", "You may also like") use the shop cards; the story you're on shows
   "This story" in peach where its price would be. */
.av-card--shop .av-card__price.av-card__here,.av-card--shop:hover .av-card__price.av-card__here{color:var(--gold);font-weight:700}

/* ---- 1.0.13 ---- */
/* The sheet's big dark shadow showed as stepped "boxes" around it on dark screens (only 3–4 colour steps
   between the shadow and the background, so they band). A hairline edge is enough on this background. */
.av-sheet,.tr-sheet{box-shadow:0 0 0 1px rgba(255,255,255,.05)}
/* Product page, computers: a step smaller on the right, closer to Kai's proportions. The column stops at
   760px (it kept growing with the wider sheet), the blurb is 15.5px, the format cards are tighter. */
@media (min-width:1001px){
    .av-lede{font-size:15.5px;line-height:1.7}
  .av-opt{padding:12px 14px 11px}
  .av-opt__n{font-size:14px}
  .av-opt__p{font-size:21px}
  .av-opt__d{font-size:12px}
  .av-btn--lg{height:52px;font-size:15px}
}
/* Cart, computers: a step smaller, like Kai's cart; a little more room under "You may be interested in…". */
@media (min-width:1001px){
  .tr-cartitem__cover{width:84px}
  .tr-cartitem__title{font-size:23px}
  .tr-cartitem__price{font-size:16px}
  .tr-summary__title{font-size:26px}
  .tr-sumrow--total{font-size:18px}
  .tr-cartside .checkout-button{height:52px;font-size:15px}
  .tr-suggest .tr-rulehead__title{font-size:30px}
  .tr-mini__title{font-size:18px}
  .tr-mini .tr-mini__cover{width:80px}
}
.tr-suggest{gap:26px}

/* ---- 1.0.14 ---- */
/* Page changes fade in without a view transition: the browser's view transition held a still picture of the
   old page over the new one, so a scroll started right after a click stalled until it finished. Now the
   sheet stays put and what's inside it fades in (the head script sets .av-anim; the homepage keeps its own
   opening). Shop ↔ category pages keep the pills still (.av-anim--keep). */
@media (prefers-reduced-motion:no-preference){
  html.av-anim .av-sheet>*,html.av-anim .tr-sheet>*{animation:av-fadein .22s ease-out both}
  html.av-anim--keep .av-sheet>.av-pagehead{animation:none}
  html.av-anim--keep .av-sheet>.av-pagehead .av-wrap>:not(.av-catrow){animation:av-fadein .22s ease-out both}
}
/* A little room between the logo row and the content box on every page but the homepage. */
.av-sheet--top,.tr-sheet{margin-top:20px}
@media (max-width:760px){ .av-sheet--top,.tr-sheet{margin-top:12px} }
/* Product page, computers: the blurb column reaches the right edge of the content (it stopped at 760px and
   left a strip of empty space on wide screens), with a wider gap from the cover (72 → about 92–115px). The
   cover narrows a little on small laptops so the right side keeps its room. */
@media (min-width:1001px){
  .av-buy{grid-template-columns:clamp(320px,34%,380px) minmax(0,1fr);column-gap:clamp(80px,9%,120px)}
  .av-buy__r{max-width:none}
}
/* Paperback box: clear of the line under the details list. */
.av-specs+.av-pbk{margin-top:18px}
/* Cart suggestions: covers as tall as the text beside them, bottoms level with the Add button. */
.tr-mini{align-items:flex-end}
.tr-mini>a{display:block;line-height:0;flex:none}
.tr-mini .tr-mini__cover{width:90px}
@media (min-width:1001px){ .tr-mini .tr-mini__cover{width:88px} }

/* ---- 1.0.15 ---- */
/* Cart and checkout, computers: another step down so they sit with the shop and product pages (section
   headings at the shop's 24px, fields and buttons at the product page's heights). */
@media (min-width:1001px){
  .tr-twocol{grid-template-columns:minmax(0,7fr) minmax(0,3.6fr);gap:52px}
  .tr-cartitem__cover{width:76px}
  .tr-cartitem__title{font-size:20px}
  .tr-cartitem__price{font-size:15px}
  .tr-summary__title{font-size:22px}
  .tr-sumitem__title{font-size:18px}
  .tr-sumitem__cover{width:50px}
  .tr-sumrow--total{font-size:17px}
  .tr-cartside .checkout-button{height:48px;font-size:14.5px}
  .tr-suggest .tr-rulehead__title{font-size:24px}
  .tr-suggest{gap:22px}
  .tr-mini__title{font-size:16px}
  .tr-mini .tr-mini__cover{width:85px}
  .tr-cohead{font-size:23px;gap:10px}
  .tr-cohead__n{width:24px;height:24px;font-size:12px}
  .tr-paymethod{padding:13px 16px}
  .tr-paymethod>label{font-size:15px}
  .tr-placeorder .tr-btn--xl{--h:52px;font-size:15.5px}
  .tr-commerce .woocommerce-form__label-for-checkbox{font-size:14px}
}
/* Fields 46px (were 50) everywhere, the same as Stripe's card fields; text stays 16px so phones don't zoom in. */
.tr-commerce .tr-field,.tr-commerce .form-row input.input-text,.tr-commerce .form-row select,.tr-commerce .woocommerce-Input,
.tr-commerce input[type="password"],.tr-commerce input[type="email"],.tr-commerce input[type="text"]{height:46px;padding-top:10px;padding-bottom:10px}
.tr-paymethod .wc-stripe-upe-element,.tr-paymethod .wc-upe-form{min-height:46px}
/* Story categories page, computers: six across (the last row centred) with smaller names, and less empty
   space between each fan of covers and its name. */
@media (min-width:1001px){
  .av-cattiles{display:flex;flex-wrap:wrap;justify-content:center;gap:30px 22px}
  .av-cattiles .av-fan{flex:0 0 calc((100% - 5 * 22px) / 6)}
  .av-cattiles .av-fan__c{aspect-ratio:1/1.06}
  .av-cattiles .av-fan__t{font-size:14.5px}
}
@media (min-width:1001px) and (max-width:1280px){ .av-cattiles .av-fan{flex-basis:calc((100% - 4 * 22px) / 5)} }
/* Bitcoin page: the QR code isn't a link (site.js moves it out of the plugin's link). Black on white. */
.tr-btcgrid__qr canvas,.tr-btcgrid__qr svg,.tr-btcgrid__qr img{cursor:default}
/* Bitcoin page, phones: Copy address sat 10px lower than Open in wallet (the plugin's own 10px top margin on buttons, and the phone-only
   rule turned it into a block); the two now line up with their text centred. */
@media (max-width:760px){ #blockonomics_checkout .tr-btcgrid__actions>.tr-btn{margin:0;display:inline-flex;align-items:center;justify-content:center} }
#blockonomics_checkout .tr-btcgrid__copy{margin:0}

/* ---- 1.0.19 ---- */
/* Category fans (homepage Pick a path, Story categories): the name and count sit above the cards' shadow.
   The cards are positioned, so their shadow was painted over the (unpositioned) text and dimmed it. */
.av-fan__t,.av-fan__s{position:relative;z-index:1}
/* Category cards: the icon's glow fades out gently. It was two shadows traced around the icon's lines, which
   dropped off steeply and read as a dark ring around the symbol; now a wide soft glow sits behind it (eased
   stops, centred on the icon) and the traced shadow is kept small for the neon edge. */
.av-catcard:not(.av-catcard--back){--glow-y:43%;background:
  radial-gradient(circle at 50% var(--glow-y),rgba(var(--gold-rgb),.15) 0,rgba(var(--gold-rgb),.115) 9%,rgba(var(--gold-rgb),.075) 18%,rgba(var(--gold-rgb),.045) 27%,rgba(var(--gold-rgb),.022) 36%,rgba(var(--gold-rgb),.008) 45%,rgba(var(--gold-rgb),0) 55%),
  radial-gradient(85% 75% at 50% 40%,#3d2c42 0%,#261c2b 55%,#19121c 100%)}
.av-pathcar .av-catcard:not(.av-catcard--back){--glow-y:50%}
.av-catcard__i{filter:drop-shadow(0 0 4px rgba(var(--gold-rgb),.5)) drop-shadow(0 0 9px rgba(var(--gold-rgb),.16))}
.av-catfan:hover .av-catcard__i{filter:drop-shadow(0 0 5px rgba(var(--gold-rgb),.7)) drop-shadow(0 0 12px rgba(var(--gold-rgb),.28))}
/* Product page: the add button arrives looking exactly as it does once the script disables it (it went
   peach-at-55% → outline-at-55% when the script ran, which read as "selected, then dimmed"). */
.av-btn--add.is-waiting{background:rgba(var(--gold-rgb),.16);color:rgba(var(--gold-rgb),.75)}
/* Homepage hero, computers: the photo 35% larger from the top, so the content box's top edge lands high on
   his hips (it was at the tops of his thighs). He keeps his place: the extra width is taken from the left.
   h = the hero's height (min(52vw, 800px) on screens wider than 1440px). */
@media (min-width:1441px){
  .av-hero{background:
    linear-gradient(90deg,var(--navy) 0,var(--navy) calc(50% - 720px),rgba(var(--navy-rgb),.92) calc(50% - 374px),rgba(var(--navy-rgb),.25) calc(50% + 29px),rgba(var(--navy-rgb),0) calc(50% + 288px),rgba(var(--navy-rgb),0) calc(50% + 560px),var(--navy) calc(50% + 712px)),
    linear-gradient(180deg,rgba(var(--navy-rgb),.55) 0%,rgba(var(--navy-rgb),0) 20%,rgba(var(--navy-rgb),0) 70%,var(--navy) 100%),
    url(../img/hero.jpg) calc(50% - min(7.44vw, 114.5px)) top/auto 135% no-repeat,var(--navy)}
}
@media (min-width:1001px) and (max-width:1440px){
  .av-hero{background:linear-gradient(90deg,var(--navy) 0%,rgba(var(--navy-rgb),.92) 24%,rgba(var(--navy-rgb),.25) 52%,rgba(var(--navy-rgb),0) 70%),
             linear-gradient(180deg,rgba(var(--navy-rgb),.55) 0%,rgba(var(--navy-rgb),0) 20%,rgba(var(--navy-rgb),0) 70%,var(--navy) 100%),
             url(../img/hero.jpg) right 10% top/auto 135% no-repeat,var(--navy)}
}

/* ---- 1.0.28 ---- */
/* Sample reader: every size a step smaller (base 20 / 19 / 17.8px, was 20.5 / 19.5 / 18), and it opens one
   step down (site.js), so the default is about 17px in the pop-up and 16px on phones. */
.tr-read{font-size:calc(20px * var(--tr-scale))}
.tr-sdlg .tr-read{font-size:calc(19px * var(--tr-scale))}
@media (max-width:760px){ .tr-read,.tr-sdlg .tr-read{font-size:calc(17.8px * var(--tr-scale))} }
/* My Library: the line after "Your stories" sits on the middle of the heading (it was level with its bottom). */
.tr-books .tr-rulehead{align-items:center}
.tr-books .tr-rulehead__rule{align-self:center;margin:12px 4px 0}
/* My Library: room before "Trouble opening an EPUB?" (8px → 28px after the shelf; with no stories, the same
   20px below the button as above it). */
.tr-books.av-shelf > .tr-books__help{margin-top:28px}
.tr-books .tr-emptycart + .tr-books__help{margin-top:20px}
/* My Library: a format they don't own looks unavailable: faint stripes, the heading greyed, a quieter button
   that lights up on hover. */
.av-shelf__f.is-locked{background:repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 7px,transparent 7px 14px);border-color:rgba(255,255,255,.12)}
.av-shelf__f.is-locked .av-shelf__fh{opacity:.6}
.av-shelf__f.is-locked .av-shelf__fn b{color:var(--muted)}
.av-shelf__f.is-locked .av-shelf__unlock{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:var(--muted)}
.av-shelf__f.is-locked .av-shelf__unlock:hover{box-shadow:inset 0 0 0 1.5px var(--gold);color:var(--gold)}
/* Thank-you page (and order pages): a bundle's four download buttons in a 2×2, ebooks on top. */
.tr-dlrow__buttons:has(> :nth-child(3)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.tr-dlrow__buttons:has(> :nth-child(3)) .tr-btn{width:100%;padding:0 16px}
/* Newsletter plate on order pages: the email field had the checkout's field box drawn inside the pill. */
.tr-commerce .av-pill input[type="email"],.tr-commerce .av-pill input[type="text"]{height:48px;padding:0 20px;border:0;border-radius:0;background:transparent;box-shadow:none;color:#fff}
@media (max-width:760px){ .tr-commerce .av-pill input[type="email"]{height:44px;padding:0 14px} }
/* ---- 1.0.29 ---- */
/* Thank-you bundles: ebook files down the first column, audio down the second (owner). */
.tr-dlrow__buttons:has(> :nth-child(3)){grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-template-columns:none;grid-auto-columns:minmax(0,1fr)}
/* Thank-you Kindle box: a faint gold panel, so it stands apart from the page and the download cards. */
.tr-kindle{background:rgba(248,212,152,.07);border:1px solid rgba(248,212,152,.28)}
/* Sample reader opens at its smallest step (×0.8): 16px on the page, 15.2px in the pop-up; phones 15px. */
@media (max-width:760px){ .tr-read,.tr-sdlg .tr-read{font-size:calc(18.75px * var(--tr-scale))} }

/* ---- 1.0.31 ---- */
/* FAQ and Contact artwork: the category cards (plum, glowing gold symbol) as decoration. Computers only. */
.tr-deco{pointer-events:none}
@media (max-width:1000px){ .tr-deco{display:none} }
@media (min-width:1001px){
  .tr-deco__c{position:absolute !important;width:140px;aspect-ratio:1/1.22 !important;height:auto !important}
  .tr-deco__c .av-catcard__i{margin-top:0 !important}
  /* FAQ: scattered down each section's empty left column (the column now runs the row's full height), the
     first card 40px under the heading line, the last ending ~60px above the next section. */
  .tr-faq{overflow-x:clip;isolation:isolate}
  .tr-faq__row{position:relative}
  .tr-faq__cat{align-self:stretch}
  .tr-deco--faq{position:relative;z-index:-1;flex:1;margin:26px 0 60px;--d:2}
  .tr-deco--n2{--d:1}
  /* Cards are sized to the column (41% of it, at most 150px) so they stay out of the answers on narrow
     computers, and each one is kept inside its own section. */
  .tr-deco--faq .tr-deco__c{--w:min(41cqw, 150px);width:var(--w);left:var(--x);
    top:max(0px, calc((100% - var(--w) * 1.22) * var(--k) / var(--d)));
    transform:rotate(var(--r));opacity:var(--o)}
  .tr-deco--faq{container-type:inline-size}
  /* One card peeking in from the sheet's right edge (the content stops 80px short of it). */
  .tr-deco--peek{position:absolute;inset:0;z-index:-1}
  .tr-deco--peek .tr-deco__c{top:var(--y);right:-120px;transform:rotate(var(--r));opacity:var(--o)}
  /* Contact: three cards fanning out from behind each side of the form, the outermost on top. */
  .tr-contact{overflow-x:clip}
  .tr-contact__stage{position:relative}
  .tr-contactform{position:relative;z-index:2}
  .tr-deco--fan{position:absolute;top:60px;width:0;height:0;z-index:1}
  .tr-deco--left{left:0;--s:-1}
  .tr-deco--right{right:0;--s:1}
  /* (1.0.32) Each card's symbol sits clear of the form and of the card on top of it: cards step out by 72%
     of their width, the first one starting just behind the form's edge. Card size follows the room beside
     the form (--side), up to 165px; the whole fan fits inside the sheet. */
  .tr-contact{container-type:inline-size}
  .tr-deco--fan,.tr-deco--behind{--side:calc(var(--pad) + (100cqw - min(760px, 100cqw)) / 2);--w:clamp(96px, calc(var(--side) / 2.8), 165px)}
  .tr-deco--fan .tr-deco__c{
    width:var(--w);left:calc(var(--w) / -2);top:0;transform-origin:50% 100%;z-index:var(--i);
    transform:translate(calc(var(--s) * (var(--w) * .3 + var(--i) * var(--w) * .72)), calc(var(--i) * 10px)) rotate(calc(var(--s) * (5deg + var(--i) * 9deg)));
    filter:brightness(calc(.86 + var(--i) * .07))}
}

/* Cart, checkout and thank-you, computers: one more step down (owner: still felt zoomed). */
@media (min-width:1001px){
  .tr-twocol{gap:48px}
  .tr-cartitem__cover{width:70px}
  .tr-cartitem__title{font-size:18.5px}
  .tr-cartitem__price{font-size:14.5px}
  .tr-summary__title{font-size:20px}
  .tr-sumitem__title{font-size:16.5px}
  .tr-sumitem__cover{width:46px}
  .tr-sumrow--total{font-size:16px}
  .tr-cartside .checkout-button{height:46px;font-size:14px}
  .tr-suggest .tr-rulehead__title{font-size:22px}
  .tr-mini__title{font-size:15px}
  .tr-mini .tr-mini__cover{width:78px}
  .tr-cohead{font-size:21px}
  .tr-cohead__n{width:22px;height:22px;font-size:11.5px}
  .tr-paymethod{padding:12px 15px}
  .tr-paymethod>label{font-size:14.5px}
  .tr-placeorder .tr-btn--xl{--h:48px;font-size:15px}
  /* Thank-you: headings in line with the cart and checkout (were 36 / 28 / 28 / 22px). */
  .tr-ty .tr-h3{font-size:26px}
  .tr-dlrow__title{font-size:22px}
  .tr-dlrow__cover{width:66px}
  .tr-dlrow__buttons .tr-btn{--h:42px;font-size:14px;padding:0 16px}
  .tr-ty__note{font-size:14.5px}
  .tr-kindle__title{font-size:18px}
  .tr-summary--order{padding:24px 28px}
  .tr-summary--order .tr-summary__title{font-size:22px}
  .tr-summary--order .tr-sumrow{font-size:14.5px}
  .tr-summary--order .tr-sumrow--total{font-size:17px}
}
/* Fields 44px (were 46), with Stripe's card fields to match (inc/checkout.php). */
.tr-commerce .tr-field,.tr-commerce .form-row input.input-text,.tr-commerce .form-row select,.tr-commerce .woocommerce-Input,
.tr-commerce input[type="password"],.tr-commerce input[type="email"],.tr-commerce input[type="text"]{height:44px;padding-top:9px;padding-bottom:9px}
.tr-paymethod .wc-stripe-upe-element,.tr-paymethod .wc-upe-form{min-height:44px}
/* The edge cards need the sheet's full 80px margin; narrower computers have less, so they go. */
@media (max-width:1179px){ .tr-deco--peek{display:none} }
@media (max-width:1279px){ .tr-deco--fan,.tr-deco--behind{display:none} }

/* ---- 1.0.32 ---- */
/* Contact: the form's soft drop shadow fell on the cards and read as a dark box around it; with the cards
   behind it, the form keeps just its outline. */
/* Contact form: outline only, no drop shadow, at every width (owner). */
.tr-contactform{box-shadow:0 0 0 1px var(--line)}
/* Product page, FAQ and Contact, computers: the same step down as cart and checkout (1.0.31). */
@media (min-width:1001px){
  .av-h1{font-size:38px}
  .av-by{font-size:15px}
  .av-lede,.av-lede em{font-size:15px}
  .av-opt__n{font-size:13.5px}
  .av-opt__p{font-size:19px}
  .av-btn--lg{height:48px;font-size:14.5px}
  .av-h2s{font-size:22px}
  .tr-faq__cat h2{font-size:28px}
  .tr-faq__item h3{font-size:21px}
  .tr-faq__a,.tr-faq__a p{font-size:15px}
  .tr-wonder__title{font-size:24px}
  .tr-wonder__sub{font-size:14.5px}
  .tr-wonder .tr-btn{--h:46px;font-size:14.5px}
  .tr-contact__intro p{font-size:34px}
  .tr-contactform{padding:36px}
  .tr-contactform .tr-field:not(.tr-field--area){height:44px}
  .tr-contactform__send{--h:48px;font-size:15px}
}
/* Product page "Collect the set" and other sideways rows on phones and tablets: room above the covers, so the
   gold ring around "This story" isn't cut off at the top (the scrolling row clips anything outside it). */
@media (max-width:1000px){ .av-scroller{padding-top:4px;margin-top:-4px} }
/* Thank-you on phones: one button per row again, ebooks first (EPUB, PDF, MP3, MP4). */
@media (max-width:760px){ .tr-dlrow__buttons:has(> :nth-child(3)){grid-auto-flow:row;grid-template-rows:none;grid-template-columns:minmax(0,1fr)} }

/* ---- 1.0.33 ---- */
/* My Library: every row of covers lines up like a table (cover, set name, title; 1.0.34 dropped the format line), so a two-line title
   moves its whole row's format line down, the bottoms of the text stay level, and the space between rows is
   always the same (like the shop). The rows' spacing is the card's bottom margin; the grid has no row gap. */
@supports (grid-template-rows:subgrid){
  .av-shelf__grid{row-gap:0}
  .av-shelf__item{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;margin-bottom:32px}
  .av-shelf__card{display:grid;grid-row:1 / -1;grid-template-rows:subgrid;row-gap:0}
  .av-shelf__t{display:contents}
  .av-shelf__c{margin-bottom:11px}
  .av-shelf__pre{margin-bottom:2px}
  .av-shelf__sub,.av-shelf__fmt{align-self:start}
  .av-shelf__fmt{margin-top:4px}
  .av-shelf__grid>.av-shelf__panel{margin:0 0 32px}
  @media (max-width:1180px){ .av-shelf__item{margin-bottom:28px} .av-shelf__grid>.av-shelf__panel{margin-bottom:28px} }
  @media (max-width:760px){ .av-shelf__item{margin-bottom:22px} .av-shelf__c{margin-bottom:8px} .av-shelf__grid>.av-shelf__panel{margin-bottom:22px} }
}
/* Category-card art (FAQ, Contact): solid cards; a soft shadow built from several faint layers that fade out
   gradually (one dark 36px shadow read as a box on dark screens); each card drawn as one smooth layer, so its
   thin frame lines don't break up into pixels when tilted. */
@media (min-width:1001px){
  /* No drop shadow (owner: on his screen any soft shadow on this dark background ends in a visible box); the
     faint 1px edge stays so the cards' outlines read. */
  .tr-deco__c{will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
  .tr-deco--faq .tr-deco__c,.tr-deco--peek .tr-deco__c{opacity:1}
  /* FAQ: the cards sit on top of the lines between sections (still under the questions and answers, which they
     never reach). */
  .tr-deco--faq,.tr-deco--peek{z-index:1}
  .tr-faq__qa{position:relative;z-index:2}
}
/* Contact: two rows. The bottom row (two cards a side) sits under the top row, lower down, tilting the other way. */
@media (min-width:1280px){
  .tr-deco--fan .tr-deco__c[style*="--row:1"]{z-index:calc(var(--i) - 5);transform-origin:50% 0;
    top:calc(var(--w) * 1.22 + 18px);
    transform:translate(calc(var(--s) * (var(--w) * .3 + var(--i) * var(--w) * .72)), calc(var(--i) * -10px)) rotate(calc(var(--s) * (-4deg - var(--i) * 8deg)));
    filter:brightness(calc(.8 + var(--i) * .07))}

}

/* ---- 1.0.34 ---- */
/* Contact: the rows carried on behind the form, flat, edge to edge and clipped exactly at the form's edges
   (so while the form fades in, its border is where they disappear). Under the side fans. */
@media (min-width:1280px){
  .tr-deco--behind{position:absolute;left:0;right:0;top:60px;height:0;z-index:0;clip-path:inset(-2000px 0 -2000px 0)}
  .tr-deco--behind .tr-deco__c{width:var(--w);left:calc(50% - var(--w) / 2);top:0;filter:brightness(.8);
    transform:translateX(calc(var(--j) * var(--w) * .72))}
  .tr-deco--behind .tr-deco__c[style*="--row:1"]{top:calc(var(--w) * 1.22 + 18px);filter:brightness(.74);
    transform:translateX(calc((var(--j) + .5) * var(--w) * .72))}
}

/* ---- 1.0.35 ---- */
/* My Library: titles on one line, like the shop. Computers keep every title whole by showing fewer covers a row
   on narrower screens (measured: none cut at 1001–2374px); "…" is only a safety net for a future longer title.
   Phones: a list like the shop's (cover left, set name and title beside it). */
.av-shelf__sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:1001px){ .av-shelf__sub{font-size:15px} }
@media (min-width:1800px){ .av-shelf__sub{font-size:16px} }
@media (min-width:761px) and (max-width:1599px){ .av-shelf__grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:761px) and (max-width:1199px){ .av-shelf__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){
  .av-shelf__grid{grid-template-columns:minmax(0,1fr)}
  .av-shelf__item{display:block;grid-row:auto;margin-bottom:14px}
  .av-shelf__card{display:flex;flex-direction:row;align-items:center;gap:14px;grid-row:auto}
  .av-shelf__t{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
  .av-shelf__c{width:84px;flex:none;margin:0}
  .av-shelf__pre{font-size:10.5px;letter-spacing:.12em;margin:0}
  .av-shelf__sub{font-size:16px}
  .av-shelf__grid>.av-shelf__panel{margin-bottom:14px}
}
/* Titles that wrap get room between their lines (they were set at 1.0–1.08). */
.av-h1{line-height:1.14}
.tr-read__title{line-height:1.12}
@media (max-width:760px){ .tr-readbar__title{font-size:18px;line-height:1.22} }
/* Checkout on phones: the order list shows the set name small and the title below, like the summary on computers. */
.tr-co-mini__title{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:16px;line-height:1.25}
.tr-co-mini__title .tr-book__series{font-size:10.5px}
.tr-co-mini__price{font-size:15px}

/* ---- 1.0.36 ---- */
/* Contact: scattered clusters instead of rows (inc/category-art.php tr_contact_deco). Cards are placed from
   the form's edge (--x card widths outward, --y card widths down, tilt --r); nothing is clipped. The earlier
   fan and row rules are switched off here. */
@media (min-width:1280px){
  .tr-deco--fan{top:24px}
  .tr-deco--fan .tr-deco__c,.tr-deco--fan .tr-deco__c[style*="--row:1"]{width:var(--w);left:calc(var(--w) / -2);top:calc(var(--y) * var(--w));
    z-index:auto;transform-origin:50% 50%;filter:none;
    transform:translateX(calc(var(--s) * var(--x) * var(--w))) rotate(var(--r))}
}

/* ---- 1.0.37 ---- */
/* Book covers keep their original long shadow (owner: it adds depth); the preview buttons stay under it (owner). */
/* FAQ and Contact, for the owner to compare: a short, close shadow under each decoration card and the contact
   box (nothing long or faint enough to leave a box-shaped edge). */
@media (min-width:1001px){ .av-cover.tr-deco__c{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 2px 3px rgba(0,0,0,.3),0 5px 10px rgba(0,0,0,.22)} }
.tr-contactform{box-shadow:0 0 0 1px var(--line),0 2px 4px rgba(0,0,0,.22),0 6px 14px rgba(0,0,0,.18)}

/* ---- 1.0.38 ---- */
/* Order summary (cart, checkout, pay page): the format pill had 2px under the title; tablets also had a 21px
   title (16.5px on computers), so the pill crowded it. */
.tr-sumitem__fmt{margin-top:5px}
@media (min-width:761px) and (max-width:1000px){ .tr-sumitem__title{font-size:18px;line-height:1.2} }