/*
Theme Name: HoleTrainer
Description: Custom theme for HoleTrainer.com. Loud 1984 Miami: flat saturated colour, condensed display type, hard offset shadows, square corners, warm black ground. Phone first.
Version: 1.0.0
Author: Jordan Kinley
*/

:root{
  --black:#0A0706; --ink2:#140F0D; --ink3:#1E1713;
  --hot:#FF2E63; --aqua:#00E5CB; --acid:#F5A82C; --orange:#FF6B2C;
  --cream:#FFF3DF; --grape:#7B2D8E;
  --disp:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --data:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --maxw:1180px;
  --maroon:#1C0B11;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{overflow-x:clip} /* clip, not hidden — hidden kills position:sticky */
body{margin:0;background:var(--black);color:var(--cream);font-family:var(--body);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.disp{font-family:var(--disp);font-weight:900;font-stretch:condensed;text-transform:uppercase;
  letter-spacing:-.02em;line-height:.86;margin:0;color:#fff}
.mono{font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase}

/* ---------- intro wipe (once per session; auto-clears, content never gated) ---------- */
#ht-intro{position:fixed;inset:0;z-index:9999;background:var(--black);display:flex;
  align-items:center;justify-content:center;pointer-events:none;
  animation:htIntroOut .5s ease 1.05s forwards}
#ht-intro img{width:min(64vw,520px);clip-path:inset(0 100% 0 0);
  animation:htIntroWipe .6s cubic-bezier(.85,0,.15,1) .15s forwards}
@keyframes htIntroWipe{to{clip-path:inset(0 0 0 0)}}
@keyframes htIntroOut{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){#ht-intro{display:none}}

/* ---------- gallery lightbox ---------- */
.htlb{position:fixed;inset:0;z-index:9998;background:rgba(10,7,6,.97);
  display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.htlb img{max-width:92vw;max-height:86vh;display:block}
.htlb button{background:none;border:0;color:#fff;cursor:pointer;font-family:var(--body)}
.htlb .x{position:absolute;top:10px;right:12px;font-size:26px;padding:10px;line-height:1}
.htlb .prev,.htlb .next{position:absolute;top:50%;transform:translateY(-50%);
  font-size:44px;line-height:1;padding:18px 12px;opacity:.8}
.htlb .prev{left:4px}.htlb .next{right:4px}
.htlb .prev:hover,.htlb .next:hover,.htlb .x:hover{opacity:1;color:var(--acid)}
.htlb .n{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  font-family:var(--data);font-size:11px;letter-spacing:.14em;color:#fff;opacity:.75}

/* ---------- nav: solid black band, one clean line where the photos begin ---------- */
.ht-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 20px 9px;position:sticky;top:0;z-index:50;background:var(--black)}
.ht-nav .brand{display:block;flex-shrink:0}
.ht-nav .brand img{display:block;width:clamp(150px,15vw,206px);height:auto}
.ht-nav .links{display:flex;align-items:center;
  font-family:var(--data);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#fff}
.ht-nav .links a:hover{color:var(--acid)}
.ht-nav .soc{display:inline-flex;gap:12px;align-items:center;line-height:0;margin-left:4px}
.ht-nav .soc a.icn{display:inline-flex}
.ht-nav .soc svg{width:13px;height:13px;fill:#fff}
.ht-nav .menurow{display:flex;gap:20px;align-items:center}
.ht-nav .browse{display:contents}
@media(max-width:680px){
  .ht-nav{flex-wrap:wrap;row-gap:10px;padding-bottom:10px}
  .ht-nav .brand img{width:150px}
  .ht-nav .links{display:contents}
  .ht-nav .menurow{flex-basis:100%;justify-content:space-between;gap:10px}
  .ht-nav .soc{margin-left:0}
}

/* ---------- hero (front page) ---------- */
.hero{position:relative;min-height:82vh;display:flex;align-items:flex-end;overflow:hidden}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:50% 25%}
.hero .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,7,6,.35) 0%,rgba(10,7,6,.08) 40%,rgba(10,7,6,.8) 84%,var(--black) 100%),
             linear-gradient(90deg,rgba(10,7,6,.55) 0%,transparent 45%)}
.hero .rays{position:absolute;inset:-30% -20% auto;height:120%;opacity:.45;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 22% 0%,rgba(245,168,44,.13) 0 5deg,transparent 5deg 12deg)}
.hero .wrap{position:relative;z-index:2;padding-bottom:42px;width:100%}
.stripes{display:flex;height:12px;width:210px;margin-bottom:18px}
.stripes i{flex:1}
.stripes i:nth-child(1){background:var(--acid)}.stripes i:nth-child(2){background:var(--orange)}
.stripes i:nth-child(3){background:var(--aqua)}.stripes i:nth-child(4){background:#fff}
.hero h1{font-size:clamp(56px,14vw,158px);color:#fff}
.hero h1 em{color:var(--acid);font-style:italic;display:block;margin-top:-.05em;
  text-shadow:5px 5px 0 var(--black),10px 10px 0 var(--aqua)}
.hero .tag{max-width:42ch;font-size:18px;margin:20px 0 24px;opacity:.94}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{display:inline-block;background:var(--acid);color:var(--black);font-family:var(--data);
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  padding:15px 26px;border:0;cursor:pointer}
.btn.aq{background:var(--aqua)}
.btn.stack{text-align:center;line-height:1.6;padding:10px 20px}
.btn.stack b{display:block;font-weight:700}
.btn.dark{background:var(--black);color:var(--acid)}
.hero .count{font-family:var(--data);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--aqua)}

/* ---------- hero look 1: faithful port (banner carousel) ---------- */
.hero1{position:relative;height:clamp(420px,46vw,86vh);overflow:hidden;background:var(--ink3);
  display:flex;align-items:flex-end}
.hero1 .stage{position:absolute;inset:0;isolation:isolate} /* keeps the wiping photo under the scrim */
.hero1 .ph{position:absolute;inset:0;z-index:0;background:var(--bg) 50% 22% / cover no-repeat;
  visibility:hidden;transform-origin:50% 0}
/* Desktop: the source photos are 640px-wide portraits. Never stretch them —
   show each one whole at natural size, with a blurred ambient wash of the
   same photo filling the width behind it. Phones keep the cover crop. */
@media(min-width:900px){
  .hero1{height:clamp(520px,54vw,88vh)}
  .hero1 .ph{background:none}
  .hero1 .ph::before{content:"";position:absolute;inset:-8%;z-index:0;
    background:var(--bg) 50% 30% / cover no-repeat;
    filter:blur(38px) brightness(.42) saturate(1.15)}
  .hero1 .ph::after{content:"";position:absolute;inset:0;z-index:1;
    background:var(--bg) 70% 50% / auto 100% no-repeat}
}
.hero1 .ph.on{visibility:visible;animation:htzoom 8s linear forwards}
.hero1 .ph.in{visibility:visible;z-index:2;
  animation:htwipe .76s cubic-bezier(.85,0,.15,1) forwards,htzoom 8s linear forwards}
@keyframes htwipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes htzoom{from{transform:scale(1)}to{transform:scale(1.055)}}
@media(prefers-reduced-motion:reduce){.hero1 .ph{animation:none !important}}
.hero1 .scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,7,6,.22) 0%,transparent 18%,transparent 52%,rgba(10,7,6,.82) 92%,var(--black) 100%)}
.hero1 .inner{position:relative;z-index:2;width:100%;padding-bottom:30px}
.hero1 h1{font-size:clamp(30px,5.2vw,64px);color:#fff;text-shadow:3px 3px 0 rgba(10,7,6,.85)}
.hero1 .cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:18px}
.hero1 .count{font-family:var(--data);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--aqua);text-shadow:0 1px 6px rgba(10,7,6,.9)}
@media(max-width:720px){
  .hero1{height:88vw;min-height:420px}
  .hero1 h1{font-size:24px}
  .hero1 h1 br{display:none}
  .hero1 .scrim{background:linear-gradient(180deg,rgba(10,7,6,.25) 0%,transparent 20%,transparent 52%,rgba(10,7,6,.82) 92%,var(--black) 100%)}
}

/* ---------- hero look 2: triple feature (duotone triptych) ---------- */
.hero2{position:relative;height:100vh;min-height:640px;display:flex;flex-direction:column;
  overflow:hidden;background:var(--black)}
.hero2 .trip{position:absolute;inset:0;display:flex}
.hero2 .panel{position:relative;flex:1;overflow:hidden;background:var(--ink3)}
.hero2 .panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.12) brightness(.92);transform:scale(1.02);transition:filter .7s ease}
.hero2 .panel.p1 img{object-position:60% 42%}
.hero2 .panel.p2 img{object-position:50% 24%}
.hero2 .panel.p3 img{object-position:66% 22%}
.hero2 .panel .tint,.hero2 .panel .wash{position:absolute;inset:0;transition:opacity .7s ease}
.hero2 .panel .tint{mix-blend-mode:multiply}
.hero2 .panel .wash{mix-blend-mode:soft-light;opacity:.55}
.hero2 .p1 .tint{background:#e0245a}.hero2 .p1 .wash{background:#ff8fae}
.hero2 .p2 .tint{background:#0aa392}.hero2 .p2 .wash{background:#7dffef}
.hero2 .p3 .tint{background:#d9a600}.hero2 .p3 .wash{background:#ffe98a}
.hero2 .panel:hover img,.hero2 .panel:focus-visible img{filter:grayscale(0) contrast(1.05) saturate(1.1) brightness(1)}
.hero2 .panel:hover .tint,.hero2 .panel:hover .wash,
.hero2 .panel:focus-visible .tint,.hero2 .panel:focus-visible .wash{opacity:0}
@media(prefers-reduced-motion:no-preference){
  .hero2 .panel img{animation:ht-kb 22s ease-in-out infinite alternate}
  .hero2 .panel.p2 img{animation-delay:-7s}
  .hero2 .panel.p3 img{animation-delay:-14s}
}
@keyframes ht-kb{from{transform:scale(1.02) translateY(0)}to{transform:scale(1.1) translateY(-2.2%)}}
.hero2 .trip::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(10,7,6,.18) 34%,rgba(10,7,6,.78) 76%,var(--black) 100%)}
.hero2 .trip::before{content:"";position:absolute;inset:0 0 auto 0;height:110px;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(10,7,6,.55),transparent)}
.hero2 .panel .name{position:absolute;left:18px;bottom:236px;z-index:3;pointer-events:none}
.hero2 .panel .name .disp{display:block;font-size:clamp(17px,2vw,26px);color:#fff;text-shadow:3px 3px 0 var(--black)}
.hero2 .panel .name .mono{display:block;margin-top:5px;color:var(--aqua);text-shadow:0 1px 6px rgba(10,7,6,.9)}
.hero2 .grain{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--grain);opacity:.07}
.hero2 .timecode{position:absolute;top:64px;right:22px;z-index:5;font-family:var(--data);font-size:12px;
  letter-spacing:.18em;color:var(--cream);text-shadow:0 1px 6px rgba(10,7,6,.9)}
.hero2 .timecode .rec{color:var(--hot)}
@media(prefers-reduced-motion:no-preference){.hero2 .timecode .rec{animation:ht-blink 1.2s steps(2) infinite}}
@keyframes ht-blink{50%{opacity:.15}}
.hero2 .track{position:absolute;left:0;right:0;height:46px;z-index:4;pointer-events:none;opacity:.14;
  mix-blend-mode:screen;top:-15%;
  background:linear-gradient(180deg,transparent,rgba(255,243,223,.9) 45%,rgba(255,243,223,.9) 55%,transparent)}
@media(prefers-reduced-motion:no-preference){.hero2 .track{animation:ht-tracking 8s linear infinite}}
@keyframes ht-tracking{from{top:-12%}to{top:108%}}
.hero2 .slab{position:relative;z-index:10;margin-top:auto;width:100%;padding-bottom:40px}
.hero2 .slab h1{font-size:clamp(30px,5.4vw,84px);color:var(--cream);
  text-shadow:4px 4px 0 var(--black),8px 8px 0 rgba(0,229,203,.85)}
.hero2 .slab h1 em{font-style:italic;color:var(--hot);
  text-shadow:4px 4px 0 var(--black),8px 8px 0 rgba(245,168,44,.85)}
.hero2 .slab .row{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:22px}
.hero2 .btn{box-shadow:5px 5px 0 rgba(10,7,6,.9)}
.hero2 .count{font-family:var(--data);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--aqua);
  text-shadow:0 1px 6px rgba(10,7,6,.9)}
@media(max-width:720px){
  .hero2 .trip{flex-direction:column}
  .hero2 .timecode{display:none}
  .hero2 .panel .name{left:auto;right:14px;bottom:auto;top:12px;text-align:right}
  .hero2 .panel.p1 .name{top:62px}
  .hero2 .panel .name .mono{display:none}
  .hero2 .slab h1{text-shadow:3px 3px 0 var(--black),6px 6px 0 rgba(0,229,203,.85)}
}

/* ---------- look 2 depth: front-page sections lose the flat black ---------- */
.look2.home .sec{position:relative;
  background:linear-gradient(180deg,var(--black) 0%,var(--maroon) 46%,#120A0E 78%,var(--black) 100%)}
.look2.home .sec::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.05;pointer-events:none}
.look2.home .sec::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:repeating-conic-gradient(from 8deg at 110% -10%,rgba(255,107,44,.05) 0 4deg,transparent 4deg 11deg)}
.look2.home .sec .wrap{position:relative;z-index:2}
.look2.home .vgrid .tile{box-shadow:8px 8px 0 rgba(10,7,6,.95),8px 8px 0 1px rgba(245,168,44,.28);
  transition:box-shadow .3s ease,transform .3s ease}
.look2.home .vgrid .tile:nth-child(odd){transform:rotate(-1.1deg)}
.look2.home .vgrid .tile:nth-child(even){transform:rotate(.9deg)}
.look2.home .vgrid .tile:hover{transform:rotate(0);
  box-shadow:10px 10px 0 rgba(10,7,6,.95),10px 10px 0 1px rgba(0,229,203,.45)}
.look2.home .vgrid{gap:30px 24px}
.look2.home .pricing{position:relative;background:linear-gradient(180deg,#120A0E 0%,var(--ink2) 40%)}
.look2.home .pricing::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.04;pointer-events:none}
.look2.home .pricing .wrap{position:relative;z-index:2}

/* ---------- marquee ---------- */
.marq{background:var(--acid);color:var(--black);overflow:hidden;white-space:nowrap;padding:9px 0;
  font-family:var(--disp);font-weight:900;font-stretch:condensed;text-transform:uppercase;font-size:16px}
.marq .track{display:inline-flex;white-space:nowrap;animation:htscroll 55s linear infinite}
.marq .track span{display:inline-block}
.marq b{margin:0 13px}
@keyframes htscroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marq .track{animation:none}}

/* ---------- sections ---------- */
.sec{padding:50px 0}
.sec .head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-bottom:24px;flex-wrap:wrap}
.sec h2{font-size:clamp(30px,6vw,54px)}
.sec .all{font-family:var(--data);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--aqua);border-bottom:2px solid var(--aqua);padding-bottom:3px}

/* ---------- video tiles ---------- */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:14px}
@media(min-width:700px){.vgrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}}
.tile{background:var(--ink2);display:block}
.tile .shot{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink3)}
.tile .shot img{width:100%;height:100%;object-fit:cover;display:block}
.tile.locked .shot img{filter:blur(14px) brightness(.5) saturate(1.15);transform:scale(1.1)}
.tile .free{position:absolute;left:0;top:11px;background:var(--acid);color:var(--black);
  font-family:var(--data);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  padding:4px 8px;font-weight:700;z-index:2}
.tile .lockmid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center;padding:12px}
.tile .lockmid p{margin:0;font-family:var(--disp);font-weight:900;font-stretch:condensed;
  text-transform:uppercase;font-size:18px;color:var(--acid);line-height:.9}
.tile .lockmid .b{background:var(--acid);color:var(--black);font-family:var(--data);font-size:9.5px;
  letter-spacing:.11em;text-transform:uppercase;padding:6px 11px;font-weight:700}
.tile .meta{padding:11px 12px 14px}
.tile .meta .ttl{font-family:var(--disp);font-weight:900;font-stretch:condensed;text-transform:uppercase;
  font-size:19px;line-height:.94;margin:0 0 4px;color:#fff}
.tile .meta .d{font-size:12.5px;opacity:.65;line-height:1.35;margin:0 0 7px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile .meta .foot{font-family:var(--data);font-size:10px;letter-spacing:.05em;
  color:var(--aqua);text-transform:uppercase}

/* ---------- single video ---------- */
.single-video .vhead{padding:26px 0 4px}
.single-video h1{font-size:clamp(38px,9vw,84px)}
.single-video h1 .kind{color:var(--acid)}
.single-video .vmeta{font-family:var(--data);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--aqua);margin:12px 0 20px}
.single-video .player-zone{max-width:960px}
.single-video .desc{max-width:64ch;font-size:16.5px;opacity:.9;margin-top:22px}
.ht-locked{position:relative;aspect-ratio:16/9;background:var(--grape);overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background-image:radial-gradient(circle,rgba(10,7,6,.5) 2.2px,transparent 2.3px);background-size:9px 9px}
.ht-locked img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(18px) brightness(.4) saturate(1.2);mix-blend-mode:luminosity}
.ht-locked>div{position:relative;padding:1.5rem;z-index:2}
.ht-locked p{font-family:var(--disp) !important;font-weight:900;font-stretch:condensed;
  text-transform:uppercase;font-size:clamp(26px,6vw,44px) !important;line-height:.88;
  color:var(--acid) !important;margin:0 0 18px !important}
.ht-locked .lockcta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ht-locked a{font-family:var(--data);font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700}
video{width:100%;background:#000;display:block}

/* ---------- photo galleries ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
@media(min-width:700px){.gal{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}
.gal a,.gal span{display:block;background:var(--ink3)}
.gal img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.gal.locked img{filter:blur(16px) brightness(.45) saturate(1.2)}
.gallock{background:var(--grape);padding:22px 20px;margin-top:10px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:14px;
  background-image:radial-gradient(circle,rgba(10,7,6,.5) 2.2px,transparent 2.3px);background-size:9px 9px}
.gallock p{margin:0;font-size:clamp(20px,4vw,30px);color:var(--acid)}

/* swipe rails: homepage streams as carousels. Touch gets native platform
   momentum + card snap; desktop gets drag-to-glide (JS adds .dragging). */
.rail.rail{display:flex;grid-template-columns:none;gap:18px;overflow-x:auto;
  scroll-snap-type:x proximity;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;padding-bottom:4px}
.rail::-webkit-scrollbar{display:none}
.rail.rail>*{flex:0 0 clamp(280px,26vw,382px);scroll-snap-align:start;min-width:0;width:auto}
@media(max-width:680px){.rail.rail>*{flex-basis:76vw}}
.rail.dragging{cursor:grabbing;scroll-snap-type:none}
.rail.dragging *{pointer-events:none}

/* hover trailer preview inside any thumbnail */
.pcardp .shot,.mcard .shot{position:relative}
.hoverprev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:2;background:transparent}
.hoverprev.on{opacity:1}

/* trailer-then-join band on premium scenes */
.ctaband{background:var(--ink2);padding:22px 20px;margin-top:2px}
.ctaband p{margin:0 0 14px;font-size:clamp(20px,4.5vw,32px);color:var(--acid)}
.ctaband .row{display:flex;flex-wrap:wrap;gap:10px}

/* photos listing */
.photogrid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:560px){.photogrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.photogrid{grid-template-columns:repeat(3,1fr);gap:20px}}
.pcardp{background:var(--ink2);display:block}
.pcardp .shot{aspect-ratio:4/5;overflow:hidden;background:var(--ink3)}
.pcardp .shot img{width:100%;height:100%;object-fit:cover;display:block}
.pcardp .meta{padding:12px 14px 16px}
.pcardp .ttl{font-family:var(--disp);font-weight:900;font-stretch:condensed;text-transform:uppercase;
  font-size:21px;line-height:.94;margin:0 0 5px;color:#fff}
.pcardp .d{font-size:12.5px;opacity:.65;line-height:1.35;margin:0 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcardp .foot{font-family:var(--data);font-size:10px;letter-spacing:.05em;color:var(--aqua);text-transform:uppercase}

/* models wall */
.modelwall{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:700px){.modelwall{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.modelwall{grid-template-columns:repeat(4,1fr);gap:18px}}
.mcard{display:block}
.mcard .shot{aspect-ratio:3/4;overflow:hidden;background:var(--ink3)}
.mcard .shot img{width:100%;height:100%;object-fit:cover;display:block}
.mcard .ttl{font-family:var(--disp);font-weight:900;font-stretch:condensed;text-transform:uppercase;
  font-size:20px;line-height:.94;margin:9px 0 0;color:#fff}
.mcard:hover .ttl{color:var(--acid)}

/* ---------- pricing ---------- */
.pricing{background:var(--ink2);padding:50px 0}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0}
.pcard{padding:28px 24px;border-right:1px solid rgba(255,243,223,.08);display:flex;flex-direction:column}
.pcard:last-child{border-right:0}
.pcard .per{font-family:var(--data);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--aqua);margin-bottom:10px}
.pcard .amt{font-family:var(--disp);font-weight:900;font-stretch:condensed;font-size:62px;
  line-height:.82;letter-spacing:-.03em}
.pcard .amt sup{font-size:.34em;vertical-align:baseline;position:relative;top:-1.15em;margin-right:2px;opacity:.6;letter-spacing:0}
.pcard .desc{font-size:14px;opacity:.75;margin:12px 0 20px;flex:1}
.pcard.feature{background:var(--aqua);color:var(--black)}
.pcard.feature .per{color:var(--ink2)}
.pcard.feature .btn{background:var(--black);color:var(--acid)}
@media(max-width:640px){.pcard{border-right:0;border-bottom:1px solid rgba(255,243,223,.08)}}

/* generic page content */
.pagebody{padding:30px 0 60px}
.pagebody h1{font-size:clamp(38px,9vw,84px);margin-bottom:18px}
.pagebody .entry{max-width:70ch;font-size:16.5px}
.pagebody .entry a{color:var(--aqua);text-decoration:underline}
.pagebody .entry a.btn,.entry a.btn{color:var(--black);text-decoration:none}
.pagebody .entry a.btn.dark{color:var(--acid)}

/* account */
.acct .stat{display:inline-block;background:var(--aqua);color:var(--black);font-family:var(--data);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;padding:6px 12px;margin:0 0 18px}
.acct .stat.off{background:var(--ink3);color:var(--cream)}
.acct ul{padding-left:18px}

/* login form */
.ht-loginbox{max-width:420px;background:var(--ink2);padding:28px}
.ht-loginbox label{display:block;font-family:var(--data);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;margin:14px 0 6px;color:var(--aqua)}
.ht-loginbox input[type=text],.ht-loginbox input[type=password]{width:100%;background:var(--black);
  border:1px solid var(--ink3);color:var(--cream);padding:12px;font-size:15px}
.ht-loginbox .btn{margin-top:18px;width:100%}
.ht-loginbox #wp-submit,.ht-loginbox input[type=submit]{margin-top:18px;width:100%;
  background:var(--acid);color:var(--black);font-family:var(--data);font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;font-weight:700;padding:15px 26px;border:0;cursor:pointer}
.ht-loginbox input[type=checkbox]{accent-color:var(--acid)}

/* ---------- footer ---------- */
.ht-footer{padding:46px 0 26px;overflow:hidden}
.ht-footer .biglogo img{display:block;width:min(100%,900px)}
.ht-footer .soc{display:flex;gap:20px;margin-top:20px}
.ht-footer .soc a.icn{opacity:.55}
.ht-footer .soc a.icn:hover{opacity:1}
.ht-footer .soc svg{width:17px;height:17px;fill:var(--cream)}
.ht-footer .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:22px;
  font-family:var(--data);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.55}