/* ==========================================================================
   ESCORTS CANARY WHARF / "Hard Split"
   Inner pages of the homepage's own geometry: a straight 50/50 cut, a two pixel
   bone seam that flips side to side, Sarpanch over Instrument Sans, one
   inversion at the rates panel and nowhere else.
   ========================================================================== */
:root{
  --cobalt:#1533E0;
  --cobalt-deep:#0F27AE;
  --bone:#F3EEE4;
  --dim:#CBD6FF;
  --seam:#F3EEE4;
  --shade:#0A0A0C;
  --hair:rgba(243,238,228,.38);
  --hair2:rgba(243,238,228,.2);
  --pad:clamp(20px,3.2vw,52px);
  --fd:"Sarpanch","Instrument Sans",sans-serif;
  --fb:"Instrument Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --max:1360px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100%}
@supports (overflow:clip){html,body{overflow-x:clip}}
body{background:var(--cobalt);color:var(--bone);font-family:var(--fb);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0}
svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--bone);outline-offset:2px}
::selection{background:var(--bone);color:var(--cobalt)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:90;background:var(--bone);color:var(--cobalt);padding:10px 16px;font-weight:700}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);min-width:0}
.disp{font-family:var(--fd);font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:-.01em}
.kicker{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--dim)}
h1,h2,h3,h4{font-family:var(--fd);font-weight:900;text-transform:uppercase;line-height:.94;letter-spacing:-.01em;overflow-wrap:break-word}
p{overflow-wrap:break-word}

/* ---------------- header, the rule above the split ---------------- */
.top{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;padding:12px var(--pad);border-bottom:2px solid var(--bone);background:var(--cobalt-deep)}
.top .brand{font-family:var(--fd);font-weight:800;font-size:1.02rem;letter-spacing:.13em;text-transform:uppercase}
.nav{display:none;gap:20px;min-width:0}
.nav a{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--dim);padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover,.nav a:focus-visible,.nav a.on{color:var(--bone);border-bottom-color:var(--bone)}
.topr{display:flex;align-items:center;gap:10px}
.top .btn{height:44px;padding:0 16px;font-size:.92rem}
.menu{height:44px;padding:0 14px;border:2px solid var(--bone);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;cursor:pointer}
.menu:hover{background:var(--bone);color:var(--cobalt)}
@media (min-width:1000px){.nav{display:flex}.menu{display:none}}
@media (max-width:999px){
  .navopen .nav{display:grid;order:3;flex:1 0 100%;width:100%;gap:0;margin-top:10px;border-top:2px solid var(--bone)}
  .navopen .nav a{padding:12px 0;border-bottom:1px solid rgba(243,238,228,.34);border-top:0;font-size:.82rem}
}

/* ---------------- breadcrumbs, a hairline under the rule ---------------- */
.crumbs{border-bottom:1px solid var(--hair2);background:var(--cobalt-deep)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px 10px;padding:9px 0;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--dim);min-width:0}
.crumbs li{min-width:0;overflow-wrap:break-word}
.crumbs li + li::before{content:"/";margin-right:10px;opacity:.55}
.crumbs a{text-decoration:underline;text-underline-offset:3px}
.crumbs a:hover{color:var(--bone)}
.crumbs [aria-current]{color:var(--bone)}

/* ---------------- the band and the seam ---------------- */
.band{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
.half{min-width:0}
.field{background:var(--cobalt);padding:var(--pad);display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,2.2vw,28px);min-width:0}
.shot{position:relative;overflow:hidden;background:var(--shade)}
.shot > img,.shot > picture > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(34% 23% at 50% 24%,rgba(214,224,255,.26),rgba(214,224,255,0) 74%),radial-gradient(58% 42% at 50% 92%,rgba(203,214,255,.24),rgba(203,214,255,0) 76%),radial-gradient(118% 88% at 50% 38%,rgba(0,0,0,0) 44%,rgba(0,0,0,.52) 100%),linear-gradient(90deg,rgba(21,51,224,.26),rgba(21,51,224,0) 58%)}
.veil.warm{background:radial-gradient(34% 23% at 50% 26%,rgba(243,238,228,.24),rgba(243,238,228,0) 74%),radial-gradient(58% 42% at 50% 91%,rgba(203,214,255,.2),rgba(203,214,255,0) 76%),radial-gradient(118% 88% at 50% 38%,rgba(0,0,0,0) 46%,rgba(0,0,0,.5) 100%),linear-gradient(196deg,rgba(43,49,80,.3),rgba(10,11,20,.46))}
.veil.cool{background:radial-gradient(33% 22% at 50% 22%,rgba(214,224,255,.3),rgba(214,224,255,0) 72%),radial-gradient(56% 40% at 50% 94%,rgba(21,51,224,.42),rgba(21,51,224,0) 78%),radial-gradient(118% 88% at 50% 38%,rgba(0,0,0,0) 44%,rgba(0,0,0,.54) 100%),linear-gradient(152deg,rgba(27,35,64,.3),rgba(7,8,15,.48))}
.tagplate{position:absolute;left:0;bottom:0;z-index:2;background:var(--bone);color:var(--cobalt);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;padding:7px 12px;max-width:100%;overflow-wrap:break-word}
@media (min-width:768px){
  .band{grid-template-columns:minmax(0,50%) minmax(0,50%)}
  .band.pl .shot{border-right:2px solid var(--seam)}
  .band.pr .shot{border-left:2px solid var(--seam)}
  .band.pr .shot{order:2}
  .band.pr .field{order:1}
}
@media (max-width:767px){
  .band .shot{border-bottom:2px solid var(--seam)}
  .band.pr .shot{border-bottom:0;border-top:2px solid var(--seam)}
}

/* ---------------- page hero ---------------- */
.phero .field{container-type:inline-size}
.phero h1{font-size:min(15cqi,4.6rem)}
.phero .mast{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;border-bottom:2px solid var(--bone);padding-bottom:10px}
.phero .intro p{font-size:clamp(1rem,1.1vw,1.1rem);max-width:46ch}
.phero .intro p + p{margin-top:.7em}
.phero .intro a,.field a.tx{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
@media (min-width:768px){.phero{min-height:62svh}}
@media (max-width:767px){.phero .shot{height:40svh;min-height:250px}}
.phero.flat{border-bottom:2px solid var(--seam)}
.phero.flat .field{padding-block:clamp(26px,4vw,64px)}
.phero.flat h1{font-size:clamp(2rem,9vw,4rem)}
@media (min-width:768px){.phero.flat h1{font-size:clamp(2.4rem,5.4vw,4.6rem)}}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:54px;padding:0 22px;font-weight:700;font-size:1rem;border:2px solid var(--bone);transition:background-color .18s linear,color .18s linear;text-align:center}
.btn svg{width:19px;height:19px;flex:none}
.btn-a{background:var(--bone);color:var(--cobalt)}
.btn-b{background:transparent;color:var(--bone)}
.btn-a:hover{background:var(--dim)}
.btn-b:hover{background:var(--bone);color:var(--cobalt)}
.btn.sm{height:46px;padding:0 16px;font-size:.9rem}
.inv .btn-a{background:var(--cobalt);color:var(--bone);border-color:var(--cobalt)}
.inv .btn-a:hover{background:var(--cobalt-deep)}
.inv .btn-b{color:var(--cobalt);border-color:var(--cobalt)}
.inv .btn-b:hover{background:var(--cobalt);color:var(--bone)}
.acts{display:flex;flex-wrap:wrap;gap:12px}
.fine{font-size:.88rem;color:var(--dim);max-width:52ch}
.fine a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}

/* ---------------- section headings ---------------- */
.sechead h2{font-family:var(--fd);font-weight:900;text-transform:uppercase;line-height:.92;font-size:clamp(1.7rem,6vw,2.6rem)}
@media (min-width:768px){.sechead h2{font-size:clamp(1.8rem,3.1vw,2.9rem)}}
.sechead p{color:var(--dim);max-width:46ch;margin-top:8px;font-size:.98rem}
.sechead .kicker{display:block;margin-bottom:6px}

/* ---------------- the ledger: sections, with the seam down the middle ---------------- */
.ledger{padding:clamp(26px,3.6vw,58px) 0 clamp(28px,4vw,64px);border-top:2px solid var(--seam)}
.ledger.alt{background:var(--cobalt-deep)}
.seclist{border-top:2px solid var(--seam)}
.sec{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:clamp(18px,2.4vw,34px) 0;border-bottom:1px solid var(--hair);position:relative;min-width:0}
.sec .plate{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:.66rem;letter-spacing:.2em;color:var(--dim)}
.sec h2{font-size:clamp(1.35rem,4.6vw,2rem);margin:2px 0 10px}
.sec p{font-size:.98rem;color:var(--dim);max-width:62ch}
.sec p + p{margin-top:.75em}
.sec p a,.sec li a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
.sec .bul{margin-top:14px;border-top:1px solid var(--hair2)}
.sec .bul li{border-bottom:1px solid var(--hair2);padding:9px 0 9px 22px;position:relative;font-size:.93rem;color:var(--dim);min-width:0}
.sec .bul li::before{content:"";position:absolute;left:0;top:16px;width:10px;height:2px;background:var(--bone)}
@media (min-width:900px){
  .sec{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,4vw,60px)}
  .sec::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--seam);opacity:.42;transform:translateX(-1px)}
  .sec .head{padding-right:clamp(10px,2vw,30px)}
  .sec h2{margin-top:0}
}

/* ---------------- roster grid, the same card as the homepage ---------------- */
.roster{padding:clamp(26px,3.4vw,54px) 0 clamp(30px,4vw,60px);border-top:2px solid var(--seam)}
.roster.plain{border-top:1px solid var(--hair)}
.tools{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:18px}
.tool{display:flex;flex-direction:column;gap:6px;min-width:0}
.tool > span{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--dim)}
select.pick{height:46px;max-width:100%;min-width:0;padding:0 12px;border:2px solid var(--bone);background:var(--cobalt);color:var(--bone);font-weight:600;font-size:.95rem}
@media (min-width:480px){select.pick{min-width:200px}}
.chipbar{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.chip{display:inline-block;border:2px solid var(--bone);padding:9px 14px;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:background-color .18s linear,color .18s linear;max-width:100%;overflow-wrap:break-word}
.chip[aria-pressed="true"]{background:var(--bone);color:var(--cobalt)}
.chip:hover{background:var(--bone);color:var(--cobalt)}
.chipset{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.count{font-size:.82rem;color:var(--dim);margin-top:14px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);margin-top:clamp(20px,2.6vw,38px);position:relative}
@media (min-width:640px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1080px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(22px,2.6vw,40px)}
  .grid.seamed::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--seam);opacity:.55;transform:translateX(-1px)}
}
.grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{min-width:0}
.cardlink{display:block;min-width:0}
.card .frame{position:relative;aspect-ratio:3 / 4;overflow:hidden;background:var(--shade);border:2px solid var(--bone);display:block}
.card .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.card .frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 46%,rgba(8,10,20,.62) 100%)}
.cardlink:hover .frame{border-color:var(--dim)}
.card .who{display:flex;flex-direction:column;gap:2px;padding-top:10px;min-width:0}
.card b{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(.95rem,1.4vw,1.2rem);line-height:1.04;letter-spacing:.01em}
.card .meta{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--dim)}
.card .meta .ar::before{content:"\00b7";margin:0 .5em;opacity:.8}
.card .state{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-top:6px;align-self:flex-start;border:1px solid rgba(243,238,228,.55);padding:4px 8px;max-width:100%;overflow-wrap:break-word}
.card[data-state="on"] .state{background:var(--bone);color:var(--cobalt);border-color:var(--bone)}
.card[hidden]{display:none}
.empty{margin-top:22px;font-size:.95rem;color:var(--dim)}

/* ---------------- rows, the hairline list used for trust, steps and notes ---------------- */
.rows{min-width:0}
.rows li{border-top:1px solid var(--hair);padding:10px 0 12px;min-width:0}
.rows h3{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:1.06rem;letter-spacing:.02em}
.rows p{font-size:.92rem;color:var(--dim)}
.rows a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
.twin{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media (min-width:640px){.twin{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(16px,2vw,30px)}}

/* ---------------- steps, the split repeated across the width ---------------- */
.stepsec{border-top:2px solid var(--seam);background:var(--cobalt-deep);padding:clamp(26px,3.4vw,54px) 0 clamp(28px,3.8vw,60px)}
.quadgrid{display:grid;grid-template-columns:minmax(0,1fr);margin-top:clamp(20px,2.6vw,36px)}
.quadgrid .col{padding:16px 0;border-top:1px solid var(--hair);min-width:0}
.quadgrid .col h3{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:1.1rem;letter-spacing:.02em;margin-bottom:4px}
.quadgrid .col p{font-size:.92rem;color:var(--dim)}
.quadgrid .col a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
.quadgrid .num{font-family:var(--fd);font-weight:900;font-size:1.5rem;line-height:1;color:var(--dim);display:block;margin-bottom:6px}
@media (min-width:768px){
  .quadgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .quadgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .quadgrid .col{padding:14px clamp(14px,1.8vw,26px) 0;border-top:2px solid var(--seam);border-left:2px solid var(--seam)}
  .quadgrid .col:first-child{border-left:0;padding-left:0}
  .quadgrid .col:last-child{padding-right:0}
}

/* ---------------- rates, the one inversion on the site ---------------- */
.rates{border-top:2px solid var(--seam)}
.rates .field-inv{background:var(--bone);color:var(--cobalt);padding:var(--pad);display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,2.2vw,26px);min-width:0}
.rates .field-inv .kicker{color:var(--cobalt-deep)}
.rates .field-inv h2{font-family:var(--fd);font-weight:900;text-transform:uppercase;line-height:.92;font-size:clamp(1.7rem,5.2vw,2.8rem)}
.ladder{border-top:2px solid var(--cobalt);min-width:0}
.ladder li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:baseline;border-bottom:1px solid rgba(21,51,224,.3);padding:11px 0}
.ladder .what{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;min-width:0;overflow-wrap:break-word}
.ladder .what small{display:block;letter-spacing:0;text-transform:none;font-weight:400;font-size:.82rem;opacity:.8;margin-top:3px}
.ladder .amt{font-family:var(--fd);font-weight:900;font-size:clamp(1.2rem,2.5vw,1.8rem);line-height:1}
.ratenote{font-size:.9rem;max-width:46ch}
.ratenote a{color:var(--cobalt-deep);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.rates .field{justify-content:center}

/* ---------------- the booking line, copy and send ---------------- */
.script{border-top:2px solid var(--seam);padding:clamp(24px,3vw,46px) 0 clamp(26px,3.4vw,52px)}
.scriptcard{border:2px solid var(--bone);padding:clamp(16px,2.2vw,28px);display:grid;gap:14px;min-width:0}
.scriptcard .plate{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:.66rem;letter-spacing:.2em;color:var(--dim)}
.scriptbody{font-size:1rem;line-height:1.6;border-left:2px solid var(--bone);padding-left:14px;overflow-wrap:break-word}

/* ---------------- faq, native details so it opens without a transition ---------------- */
.faqsec{border-top:2px solid var(--seam);padding:clamp(26px,3.4vw,54px) 0 clamp(28px,3.8vw,58px)}
.faqlist{display:grid;gap:0;margin-top:clamp(16px,2.2vw,28px);min-width:0}
.faqlist details{border-top:1px solid var(--hair);min-width:0}
.faqlist details:last-child{border-bottom:1px solid var(--hair)}
.faqlist summary{cursor:pointer;list-style:none;padding:13px 34px 13px 0;position:relative;font-family:var(--fd);font-weight:700;text-transform:uppercase;font-size:1rem;letter-spacing:.01em;line-height:1.16;overflow-wrap:break-word}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary::after{content:"+";position:absolute;right:4px;top:11px;font-size:1.3rem;line-height:1;color:var(--dim)}
.faqlist details[open] summary::after{content:"\2212"}
.faqlist .ans{padding:0 0 15px;font-size:.94rem;color:var(--dim);max-width:62ch}
.faqlist .ans a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
.faqlist .ans p + p{margin-top:.7em}

/* ---------------- districts ---------------- */
.zones{border-top:2px solid var(--seam);padding:clamp(26px,3.4vw,54px) 0 clamp(28px,3.8vw,58px)}
.zonegrid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:clamp(18px,2.4vw,32px)}
@media (min-width:620px){.zonegrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.zonegrid{grid-template-columns:repeat(4,minmax(0,1fr))}.zonegrid.hub{grid-template-columns:repeat(4,minmax(0,1fr))}}
.zone{border-top:2px solid var(--seam);padding:14px 0 18px;min-width:0;display:block}
@media (min-width:620px){.zone{border-left:2px solid var(--seam);padding:14px clamp(12px,1.6vw,22px) 18px}.zonegrid > .zone:nth-child(2n+1){border-left:0;padding-left:0}}
@media (min-width:1000px){.zonegrid > .zone{border-left:2px solid var(--seam)}.zonegrid > .zone:nth-child(2n+1){border-left:2px solid var(--seam);padding-left:clamp(12px,1.6vw,22px)}.zonegrid > .zone:nth-child(4n+1){border-left:0;padding-left:0}}
.zone h3{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:1.02rem;letter-spacing:.02em;display:flex;gap:9px;align-items:baseline}
.zone h3 i{font-style:normal;color:var(--dim);font-size:.78rem;flex:none}
.zone p{font-size:.88rem;color:var(--dim);margin-top:5px}
.zone .pc{display:inline-block;margin-top:9px;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;border:1px solid var(--hair);padding:4px 8px;max-width:100%;overflow-wrap:break-word}
.zone:hover h3{color:var(--bone)}
.zone:hover .pc{background:var(--bone);color:var(--cobalt);border-color:var(--bone)}
.places{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.places li{border:1px solid rgba(243,238,228,.5);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;max-width:100%;overflow-wrap:break-word}
.places li a{display:block;padding:7px 12px}
.places li:hover{background:var(--bone);color:var(--cobalt);border-color:var(--bone)}

/* ---------------- venue panel on area pages ---------------- */
.venues{border-top:2px solid var(--seam);padding:clamp(24px,3vw,46px) 0}
.vgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media (min-width:768px){.vgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(20px,3vw,48px)}}
.vcard{min-width:0}
.vcard h3{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:1rem;letter-spacing:.14em;margin-bottom:8px;color:var(--dim)}
.vcard li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:baseline;border-top:1px solid var(--hair2);padding:9px 0;min-width:0}
.vcard .vn{font-weight:600;font-size:.95rem;min-width:0;overflow-wrap:break-word}
.vcard .vm,.vcard .sw{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--dim);text-align:right;overflow-wrap:break-word}
.vcard .sl{grid-column:1/-1;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);opacity:.85}

/* ---------------- hard tiles for hubs and link lists ---------------- */
.hubs{border-top:2px solid var(--seam);padding:clamp(26px,3.4vw,54px) 0 clamp(28px,3.8vw,58px)}
.hubs.plain{border-top:1px solid var(--hair)}
.hcards{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.8vw,24px);margin-top:clamp(18px,2.4vw,32px)}
@media (min-width:620px){.hcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.hcards{grid-template-columns:repeat(3,minmax(0,1fr))}.hcards.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hcard{border:2px solid var(--bone);padding:16px;display:flex;flex-direction:column;gap:8px;min-width:0;transition:background-color .18s linear,color .18s linear}
.hcard:hover{background:var(--bone);color:var(--cobalt)}
.hcard:hover .hx,.hcard:hover .plate{color:var(--cobalt-deep)}
.hcard .plate{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:.62rem;letter-spacing:.18em;color:var(--dim)}
.hcard .ht{font-family:var(--fd);font-weight:900;text-transform:uppercase;font-size:1.12rem;line-height:1.02;letter-spacing:.01em;overflow-wrap:break-word}
.hcard .hx{font-size:.88rem;color:var(--dim);overflow-wrap:break-word}
.hcard .hb{margin-top:auto;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;padding-top:8px;border-top:1px solid var(--hair)}
.hcard .himg{position:relative;display:block;aspect-ratio:16 / 10;overflow:hidden;background:var(--shade);border:2px solid var(--bone);margin:-16px -16px 4px}
.hcard .himg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.toclist{display:grid;gap:0;counter-reset:t;min-width:0}
.toclist li{counter-increment:t;border-top:1px solid var(--hair2);min-width:0}
.toclist li:last-child{border-bottom:1px solid var(--hair2)}
.toclist a{display:block;padding:9px 0 9px 30px;position:relative;font-size:.9rem;color:var(--dim);overflow-wrap:break-word}
.toclist a::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:9px;font-family:var(--fd);font-weight:800;font-size:.72rem;opacity:.75}
.toclist a:hover{color:var(--bone)}

/* ---------------- profile ---------------- */
.pfile .field{container-type:inline-size}
.pfile h1{font-size:min(15cqi,4.2rem)}
@media (min-width:768px){.pfile{min-height:92svh}}
@media (max-width:767px){.pfile .shot{height:66svh;min-height:400px}}
.ptop{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;border-bottom:2px solid var(--bone);padding-bottom:10px}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;border:1px solid var(--hair);padding:5px 9px;max-width:100%;overflow-wrap:break-word}
.pill i{width:8px;height:8px;background:currentColor;flex:none}
.pill.here{background:var(--bone);color:var(--cobalt);border-color:var(--bone)}
.pill.away{color:var(--dim)}
.ptag{font-size:1rem;color:var(--dim);max-width:46ch}
.pfacts{display:grid;grid-template-columns:minmax(0,1fr);border-top:2px solid var(--bone);min-width:0}
@media (min-width:520px){.pfacts{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(14px,2vw,26px)}}
.pfacts > div{border-bottom:1px solid var(--hair2);padding:9px 0;min-width:0}
.pfacts dt{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--dim)}
.pfacts dd{font-size:.96rem;font-weight:600;margin-top:2px;overflow-wrap:break-word}
.pfacts dd a{text-decoration:underline;text-underline-offset:3px}

/* the frames: her photo set, with a lightbox that owns its own class names */
.pset{border-top:2px solid var(--seam);padding:clamp(26px,3.4vw,54px) 0 clamp(28px,3.8vw,58px)}
.psetgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(18px,2.4vw,32px)}
@media (min-width:760px){.psetgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.psetgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.psetgrid a{position:relative;display:block;aspect-ratio:3 / 4;overflow:hidden;border:2px solid var(--bone);background:var(--shade);min-width:0}
.psetgrid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.psetgrid .pnum{position:absolute;left:0;bottom:0;z-index:2;background:var(--bone);color:var(--cobalt);font-family:var(--fd);font-weight:800;font-size:.6rem;letter-spacing:.16em;padding:4px 8px}
.psetgrid a:hover{border-color:var(--dim)}
.lbx{position:fixed;inset:0;z-index:120;background:rgba(6,8,18,.94);display:none;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px)}
.lbx.lbx-on{display:flex}
.lbx-fig{position:relative;max-width:min(94vw,860px);max-height:88svh;border:2px solid var(--bone);background:var(--shade)}
.lbx-fig img{display:block;max-width:100%;max-height:82svh;width:auto;height:auto;object-fit:contain}
.lbx-cap{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--dim);padding:8px 10px;border-top:2px solid var(--bone);overflow-wrap:break-word}
.lbx-x,.lbx-p,.lbx-n{position:absolute;z-index:2;width:46px;height:46px;display:grid;place-items:center;background:var(--bone);color:var(--cobalt);font-family:var(--fd);font-weight:900;font-size:1.2rem;cursor:pointer;border:0}
.lbx-x{top:-2px;right:-2px}
.lbx-p{left:-2px;top:50%;transform:translateY(-50%)}
.lbx-n{right:-2px;top:50%;transform:translateY(-50%)}
.lbx-x:hover,.lbx-p:hover,.lbx-n:hover{background:var(--dim)}

.remarks{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:clamp(16px,2.2vw,28px)}
@media (min-width:820px){.remarks{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,3vw,44px)}}
.remark{border-top:1px solid var(--hair);padding:12px 0 14px;min-width:0}
.remark blockquote{font-size:.98rem;overflow-wrap:break-word}
.remark .rmeta{display:block;margin-top:7px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--dim)}
.remarkempty{margin-top:14px;font-size:.94rem;color:var(--dim);max-width:62ch}
.pn{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:clamp(22px,3vw,40px);border-top:2px solid var(--seam)}
@media (min-width:620px){.pn{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pn a{padding:12px 0;border-bottom:1px solid var(--hair);min-width:0;font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:1rem}
@media (min-width:620px){.pn a{border-left:2px solid var(--seam);padding:12px clamp(12px,1.6vw,22px);border-bottom:0}.pn a:first-child{border-left:0;padding-left:0}.pn a:last-child{padding-right:0;text-align:right}}
.pn a span{display:block;font-family:var(--fb);font-weight:600;font-size:.62rem;letter-spacing:.18em;color:var(--dim);margin-bottom:3px}
.pn a:hover{color:var(--dim)}

/* ---------------- guide article ---------------- */
.arthero{border-bottom:2px solid var(--seam);padding:clamp(26px,3.6vw,58px) 0 clamp(22px,3vw,44px)}
.arthero h1{font-size:clamp(2rem,7.4vw,3.6rem);margin:10px 0 12px;max-width:26ch}
@media (min-width:768px){.arthero h1{font-size:clamp(2.2rem,4.6vw,4rem)}}
.metarow{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;justify-content:space-between;border-bottom:2px solid var(--bone);padding-bottom:9px}
.metarow .plate{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--dim)}
.byline{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--dim)}
.byline b{color:var(--bone)}
.arthero .lede{font-size:clamp(1.02rem,1.2vw,1.16rem);max-width:60ch;margin-top:12px}
.artgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,44px);padding-block:clamp(24px,3.2vw,50px)}
@media (min-width:1000px){.artgrid{grid-template-columns:minmax(0,260px) minmax(0,1fr)}}
.arttoc{min-width:0;align-self:start}
@media (min-width:1000px){.arttoc{position:sticky;top:16px;border-right:2px solid var(--seam);padding-right:clamp(14px,2vw,28px)}}
.arttoc .plate{display:block;font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:.64rem;letter-spacing:.2em;color:var(--dim);margin-bottom:10px}
.arttoc .btn{margin-top:14px;width:100%}
.art{min-width:0;max-width:74ch}
.artsec + .artsec{margin-top:clamp(22px,3vw,40px)}
.artsec h2{font-size:clamp(1.4rem,4.8vw,2.1rem);margin-bottom:10px;padding-top:14px;border-top:2px solid var(--seam)}
.artsec p{font-size:1rem;color:var(--dim)}
.artsec p + p{margin-top:.8em}
.artsec a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
.artsec .bul{margin-top:14px;border-top:1px solid var(--hair2)}
.artsec .bul li{border-bottom:1px solid var(--hair2);padding:9px 0 9px 22px;position:relative;font-size:.95rem;color:var(--dim);min-width:0}
.artsec .bul li::before{content:"";position:absolute;left:0;top:16px;width:10px;height:2px;background:var(--bone)}
.artfiled{margin-top:clamp(20px,2.6vw,34px);border-left:2px solid var(--bone);padding:10px 0 10px 14px;font-size:.92rem;color:var(--dim)}
.artfiled a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
.artcta{margin-top:clamp(24px,3.2vw,46px);border-top:2px solid var(--seam);padding-top:clamp(16px,2.2vw,28px)}
.artcta h2{font-size:clamp(1.5rem,5vw,2.2rem);margin-bottom:8px}
.artcta p{color:var(--dim);margin-bottom:14px}
.artcta a.tx{color:var(--bone);text-decoration:underline;text-underline-offset:3px}

/* ---------------- closing band ---------------- */
.close{border-top:2px solid var(--seam);padding:clamp(30px,4.4vw,70px) var(--pad);display:grid;gap:clamp(16px,2.2vw,28px);container-type:inline-size}
.close h2{font-family:var(--fd);font-weight:900;text-transform:uppercase;line-height:.9;font-size:min(9cqi,4.4rem)}
.close p{max-width:52ch;color:var(--dim)}

/* ---------------- 404 ---------------- */
.nf{padding:clamp(40px,7vw,110px) 0;display:grid;gap:16px}
.nf .big{font-family:var(--fd);font-weight:900;font-size:min(30vw,11rem);line-height:.82;color:var(--cobalt-deep);-webkit-text-stroke:2px var(--bone)}
.nf h1{font-size:clamp(1.9rem,6vw,3.2rem)}
.nf p{color:var(--dim);max-width:52ch}

/* ---------------- footer, hard inversion (identical string in index.original.html) ---------------- */
.foot{background:var(--bone);color:var(--cobalt);border-top:2px solid var(--bone)}
.footin{padding:clamp(22px,3vw,40px) var(--pad);display:grid;gap:18px}
@media (min-width:768px){.footin{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:26px}}
.foot .fbrand{font-family:var(--fd);font-weight:900;text-transform:uppercase;font-size:1.08rem;letter-spacing:.1em}
.foot h3{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:.72rem;letter-spacing:.2em;margin-bottom:8px}
.foot p,.foot a,.foot li{font-size:.86rem}
.foot ul{display:grid;gap:5px}
.foot li{min-width:0;overflow-wrap:break-word}
.foot a{text-decoration:underline;text-underline-offset:3px;font-weight:600}
.foot a:hover{background:var(--cobalt);color:var(--bone);text-decoration:none}
.foot .flinks{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot .fsmall{color:rgba(15,39,174,.75);font-size:.8rem}
.foot .ftrust{border-top:2px solid var(--cobalt);margin-top:6px;padding:14px var(--pad) 18px;font-size:.82rem;line-height:1.6}
.foot .ftrust b{display:block;font-family:var(--fd);text-transform:uppercase;letter-spacing:.18em;font-size:.66rem;margin-bottom:4px}
.foot .fbase{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;border-top:1px solid rgba(21,51,224,.3);padding:12px var(--pad) 16px;font-size:.8rem}
.age{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:8px;border:2px solid var(--cobalt);font-weight:800;font-size:.66rem;vertical-align:middle}
@media (max-width:767px){.foot .fbase{padding-bottom:96px}}

/* ---------------- fixed contact bar, small screens only (identical string in index.original.html) ---------------- */
.cc-mbar{display:none}
@media (max-width:767px){
  .cc-mbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:99999;background:var(--cobalt-deep);border-top:2px solid var(--bone);padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .cc-mbar .btn{height:50px;padding:0 10px;font-size:.95rem}
  body{padding-bottom:84px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}