/* CUFC MATCH CENTRE — SHARED STYLESHEET
   One stylesheet for the landing page and every match pack. */

:root{
  --ink:#05081A;
  --navy:#0C1640;
  --royal:#272983;
  --royal-2:#3A3DAF;
  --gold:#DEB713;
  --chalk:#E6EAF4;
  --slate:#98A2C0;
  --slate-2:#5A6488;
  --hair:rgba(255,255,255,.11);
  --hair-2:rgba(255,255,255,.055);
  --pitch-a:#16225A;
  --pitch-b:#0A1236;
  --anton:"Anton","Haettenschweiler","Arial Narrow",Impact,sans-serif;
  --cond:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--surround,#2C3145);font-family:var(--body);-webkit-font-smoothing:antialiased;padding:28px 0}

.pg{position:relative;width:1122px;height:793px;margin:0 auto 28px;overflow:hidden;color:var(--chalk);
    background:
      radial-gradient(56% 44% at 86% -8%, rgba(39,41,131,.62) 0%, rgba(39,41,131,0) 68%),
      radial-gradient(50% 42% at -8% 106%, rgba(39,41,131,.40) 0%, rgba(39,41,131,0) 66%),
      linear-gradient(168deg,#0C1640 0%,#070B24 62%,#040614 100%);
    box-shadow:0 20px 56px rgba(0,0,0,.45)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.4;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,rgba(255,255,255,0) 1px 3px)}
.wm{position:absolute;pointer-events:none;filter:brightness(0) invert(1);opacity:.028}

/* chassis ------------------------------------------------------------ */
.bar{position:absolute;top:0;left:0;right:0;height:66px;display:flex;align-items:center;padding:0 52px;
     border-bottom:1px solid var(--hair);background:linear-gradient(90deg,rgba(39,41,131,.55),rgba(39,41,131,.10))}
.bar .lock{display:flex;align-items:center;gap:14px}
.bar .lock img{height:36px;display:block}
.bar .lock span{font-family:var(--cond);font-size:13.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
                line-height:1.2;padding-left:14px;border-left:1px solid var(--hair)}
.bar .lock span i{display:block;font-style:normal;font-weight:400;font-size:10px;letter-spacing:.3em;color:var(--slate)}
.bar .mid{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--cond);font-size:12px;
          letter-spacing:.4em;text-transform:uppercase;color:var(--slate);white-space:nowrap}
.bar .num{margin-left:auto;font-family:var(--anton);font-size:19px;letter-spacing:.06em;color:var(--gold)}
.bar .num em{font-style:normal;color:var(--slate-2);font-size:12.5px}

.foot{position:absolute;left:52px;right:52px;bottom:24px;height:30px;display:flex;align-items:center;gap:16px;
      border-top:1px solid var(--hair);padding-top:11px;font-family:var(--cond);font-size:11px;
      letter-spacing:.32em;text-transform:uppercase;color:var(--slate-2);white-space:nowrap}
.foot i{font-style:normal;color:var(--gold);letter-spacing:.14em}
.foot .r{margin-left:auto}

.eyebrow{font-family:var(--cond);font-size:11.5px;font-weight:600;letter-spacing:.44em;text-transform:uppercase;color:var(--gold)}
.head{position:absolute;top:104px;left:52px;right:52px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.head h2{font-family:var(--anton);font-size:44px;line-height:.9;text-transform:uppercase;margin-top:11px}
.head .note{font-family:var(--cond);font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--slate);
            padding-bottom:5px;text-align:right;white-space:nowrap}
.rule{position:absolute;left:52px;right:52px;top:178px;height:1px;background:var(--hair)}
.rule::before{content:"";position:absolute;left:0;top:-1px;width:92px;height:3px;background:var(--gold)}
.body{position:absolute;top:206px;left:52px;right:52px;bottom:74px;overflow:hidden}

/* page 1 -------------------------------------------------------------- */
.hero{position:absolute;right:-16px;bottom:0;width:524px;pointer-events:none}
.p1 .col{position:absolute;top:66px;left:52px;width:566px;bottom:78px;display:flex;flex-direction:column;justify-content:center}
.p1 .eyebrow{margin-bottom:28px}
.lockup{display:grid;grid-template-columns:1fr 76px 1fr;align-items:end;
        border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:24px 0 22px}
.lockup .side{text-align:center}
.lockup .side img{height:106px;display:block;margin:0 auto 15px}
.lockup .side img.nsfc{height:94px;margin-bottom:27px}
.lockup .slot{width:106px;height:106px;margin:0 auto 15px;border-radius:50%;
              border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);
              display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.lockup .slot b{font-family:var(--anton);font-size:23px;letter-spacing:.06em;color:rgba(230,234,244,.55)}
.lockup .slot u{text-decoration:none;font-family:var(--cond);font-size:8px;letter-spacing:.24em;color:var(--slate-2)}
.lockup .side p{font-family:var(--anton);font-size:20px;text-transform:uppercase;letter-spacing:.02em;line-height:1.15}
.lockup .side u{display:block;text-decoration:none;font-family:var(--cond);font-size:10px;letter-spacing:.3em;
                text-transform:uppercase;color:var(--slate);margin-top:6px}
.lockup .away p{color:transparent;-webkit-text-stroke:1.3px var(--slate)}
.lockup .vs{font-family:var(--cond);font-weight:600;font-size:12.5px;letter-spacing:.3em;color:var(--gold);
            text-align:center;padding-bottom:34px}
.p1 .date{font-family:var(--anton);font-size:88px;line-height:.88;text-transform:uppercase;margin-top:32px}
.p1 .date em{font-style:normal;color:transparent;-webkit-text-stroke:1.6px rgba(255,255,255,.34)}
.p1 .ticket{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--gold);margin-top:32px}
.p1 .ticket div{padding:15px 22px 0;border-left:1px solid var(--hair)}
.p1 .ticket div:first-child{border-left:0;padding-left:0}
.p1 .ticket span{display:block;font-family:var(--cond);font-size:10.5px;letter-spacing:.32em;color:var(--slate);text-transform:uppercase}
.p1 .ticket strong{display:block;font-family:var(--anton);font-size:25px;margin-top:7px;text-transform:uppercase}
.p1 .ticket strong small{font-family:var(--cond);font-size:15px;font-weight:500;color:var(--slate);letter-spacing:.04em}

/* shared panels ------------------------------------------------------- */
.frame{border:1px solid var(--hair);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012))}
h3.sec{font-family:var(--cond);font-size:11.5px;font-weight:600;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);
       display:flex;justify-content:space-between;align-items:baseline;gap:10px;
       padding-bottom:8px;border-bottom:1px solid var(--hair)}
h3.sec em{font-style:normal;color:var(--slate-2);font-size:10px;letter-spacing:.24em}

/* page 2 -------------------------------------------------------------- */
.p2 .body{display:grid;grid-template-rows:1fr 96px;gap:22px}
.p2 .top{display:grid;grid-template-columns:1fr 368px;gap:34px;min-height:0}
.pitchbox{border:1px solid var(--hair);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
          padding:13px;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden}
.pitchbox svg{width:100%;height:100%;display:block}
.xi{list-style:none;margin-top:6px}
.xi li{display:grid;grid-template-columns:44px 20px 1fr;align-items:center;gap:10px;height:30px;
       border-bottom:1px solid var(--hair-2)}
.xi li b{font-family:var(--cond);font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
.xi li i{font-style:normal;font-family:var(--cond);font-size:12.5px;color:var(--slate-2);
         font-variant-numeric:tabular-nums;text-align:right}
.xi li span{font-family:var(--cond);font-size:18px;letter-spacing:.02em;line-height:1;
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strip{display:grid;grid-template-columns:1.6fr 1fr;gap:34px}
.strip .row{list-style:none;display:grid;gap:5px 16px;margin-top:9px}
.strip .row li{display:flex;gap:8px;align-items:baseline;font-family:var(--cond);font-size:17px;line-height:1.1;
               overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strip .row li b{font-weight:600;font-size:10.5px;color:var(--slate-2);font-variant-numeric:tabular-nums}
.strip .subs .row{grid-template-columns:repeat(3,1fr)}
.strip .stby .row{grid-template-columns:repeat(2,1fr)}

/* page 3 -------------------------------------------------------------- */
.p3 .body{display:grid;grid-template-columns:352px 1fr;gap:32px}
.p3 .right{display:grid;grid-template-rows:auto 1fr;gap:20px;min-height:0}
.p3 .duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;min-height:0}
.p3 .duo .blk{min-height:0;overflow:hidden}
.p3 .blk{padding:13px 18px 14px}
.p3 .blk ul{margin-top:9px}
.blk{border:1px solid var(--hair);border-top:2px solid var(--gold);
     background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));padding:14px 20px 16px;overflow:hidden}
.blk ul{list-style:none;display:grid;gap:7px;margin-top:10px}
.blk ul li{font-size:14px;line-height:1.38;color:#BFC8E0;padding-left:16px;position:relative}
.blk ul li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;background:var(--gold);opacity:.7}
.tw{margin-top:9px}
.tw .obs{font-family:var(--cond);font-size:16.5px;font-weight:500;line-height:1.2;color:var(--chalk)}
.tw .res{margin-top:4px;padding:6px 11px 7px;font-size:12.4px;line-height:1.34;color:#BFC8E0;
         background:rgba(255,255,255,.075);border-left:2px solid var(--gold);overflow-wrap:break-word}
.tw .res b{display:block;font-family:var(--cond);font-size:9.5px;font-weight:700;letter-spacing:.26em;
           text-transform:uppercase;color:var(--gold);margin:0 0 3px}

/* page 4 -------------------------------------------------------------- */
.p4 .body{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.panel{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--hair);border-top:2px solid var(--gold);
       background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012))}
.panel .ph{padding:14px 18px 13px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--hair)}
.panel .ph b{font-family:var(--anton);font-size:21px;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.panel .ph i{font-style:normal;font-family:var(--cond);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
             color:var(--slate);margin-left:auto;text-align:right;line-height:1.3}
.panel .dg{padding:10px 14px 2px}
.panel .items{padding:6px 16px 16px;display:grid;gap:9px;align-content:start}
.it{border-left:2px solid rgba(222,183,19,.5);padding-left:13px}
.it h4{font-family:var(--cond);font-size:17px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;line-height:1.1}
.it p{font-size:11.7px;line-height:1.32;color:#B0BAD4;margin-top:3px}

/* ---------- set piece pages ---------- */
.sp .body{display:grid;grid-template-rows:1fr 190px;gap:22px}
.sp .top{display:grid;grid-template-columns:1fr 372px;gap:32px;min-height:0}
.roles{list-style:none;margin-top:6px}
.roles li{display:grid;grid-template-columns:32px 96px 1fr;align-items:center;gap:10px;height:24px;
          border-bottom:1px solid var(--hair-2)}
.roles li em{font-style:normal;font-family:var(--cond);font-size:11px;font-weight:700;color:#fff;
             background:var(--royal);border:1px solid rgba(255,255,255,.45);text-align:center;
             line-height:15px;height:17px;letter-spacing:.04em}
.roles li em.gk{background:var(--gold);color:#0A1236;border-color:rgba(255,255,255,.6)}
.roles li b{font-family:var(--cond);font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
.roles li span{font-family:var(--cond);font-size:17.5px;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roles li span.tbc{color:var(--slate-2)}
.instr .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:11px;overflow:hidden}
.instr h4{font-family:var(--cond);font-size:14.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
          padding-bottom:6px;border-bottom:1px solid rgba(222,183,19,.5);margin-bottom:9px}
.instr ul{list-style:none;display:grid;gap:5px}
.instr ul li{font-size:12.1px;line-height:1.32;color:#B0BAD4;padding-left:13px;position:relative}
.instr ul li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:1px;background:var(--gold);opacity:.75}
/* ==========================================================
   BASE / RESET  —  the document is the only scrolling surface
   ========================================================== */
*,*::before,*::after{box-sizing:border-box}
html{width:100%;min-height:100%;-webkit-text-size-adjust:100%}
body{margin:0;padding:0;width:100%;min-height:100dvh;
     overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}
img{max-width:100%}
a{color:inherit}

/* ==========================================================
   COMPONENT: LANDING
   ========================================================== */
body.home{padding:0;
  background:radial-gradient(58% 42% at 84% -6%, rgba(39,41,131,.55) 0%, rgba(39,41,131,0) 68%),
             radial-gradient(50% 40% at -6% 104%, rgba(39,41,131,.38) 0%, rgba(39,41,131,0) 66%),
             linear-gradient(168deg,#0C1640 0%,#070B24 62%,#040614 100%)}
.land{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
      padding:calc(56px + env(safe-area-inset-top)) 28px calc(44px + env(safe-area-inset-bottom));
      color:var(--chalk);font-family:var(--body)}
.land .mast{text-align:center;margin-bottom:52px}
.land .mast img{height:132px;display:block;margin:0 auto 26px;filter:drop-shadow(0 14px 30px rgba(0,0,0,.5))}
.land .mast h1{font-family:var(--anton);font-size:40px;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.land .mast p{font-family:var(--cond);font-size:12px;letter-spacing:.4em;text-transform:uppercase;
              color:var(--slate);margin-top:12px}
.land .list{width:100%;max-width:700px}
.land .list>.eyebrow{padding-bottom:11px;border-bottom:1px solid var(--hair);margin-bottom:2px}
.land .note{font-family:var(--cond);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
            color:var(--slate-2);margin-top:26px;text-align:center}
.land .tag{margin-top:44px;font-family:var(--cond);font-size:11px;letter-spacing:.32em;
           text-transform:uppercase;color:var(--slate-2)}
.land .tag i{font-style:normal;color:var(--gold);letter-spacing:.14em;margin-right:12px}

/* ==========================================================
   COMPONENT: FIXTURE CARD  —  a plain anchor, normal navigation
   ========================================================== */
.fix{display:grid;grid-template-columns:92px 1fr 52px;align-items:center;gap:22px;width:100%;
     padding:22px 4px;border-bottom:1px solid var(--hair);text-decoration:none;color:inherit;
     transition:background .15s,padding .15s;-webkit-tap-highlight-color:transparent}
.fix:hover{background:rgba(255,255,255,.045);padding-left:14px;padding-right:14px}
.fix .d{text-align:center;border-right:1px solid var(--hair);padding-right:22px}
.fix .d b{display:block;font-family:var(--anton);font-size:30px;line-height:.9}
.fix .d span{display:block;font-family:var(--cond);font-size:11px;letter-spacing:.26em;
             text-transform:uppercase;color:var(--gold);margin-top:5px}
.fix .t strong{display:block;font-family:var(--anton);font-size:25px;text-transform:uppercase;letter-spacing:.01em}
.fix .t em{font-style:normal;display:block;font-family:var(--cond);font-size:12px;letter-spacing:.24em;
           text-transform:uppercase;color:var(--slate);margin-top:7px}
.fix .c{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.fix .c img{height:44px;display:block;opacity:.95}
.fix.disabled{opacity:.45;pointer-events:none}

/* ==========================================================
   COMPONENT: MATCH PACK SHELL
   .pg-wrap carries each A4 page's real laid-out size once the page
   inside is scaled, so the document height stays correct.
   ========================================================== */
body.pack-page{background:var(--surround,#2C3145);padding:28px 0 calc(28px + env(safe-area-inset-bottom))}
.backbar{width:1122px;margin:0 auto 18px;display:flex;align-items:center;padding-top:env(safe-area-inset-top)}
.backbar a{display:inline-block;border:1px solid var(--hair);color:var(--slate);text-decoration:none;
           font-family:var(--cond);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
           padding:9px 18px;transition:color .15s,border-color .15s;-webkit-tap-highlight-color:transparent}
.backbar a:hover{color:var(--chalk);border-color:rgba(255,255,255,.3)}
.pg-wrap{width:1122px;height:793px;margin:0 auto 28px;overflow:hidden}
.pg{transform-origin:top left;margin:0}
.lockup .side img.oppcrest{margin-bottom:23px}
.loading{color:var(--slate);font-family:var(--cond);font-size:13px;letter-spacing:.3em;
         text-transform:uppercase;text-align:center;padding:80px 20px}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1180px){
  body.pack-page{padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
  .backbar{width:auto;padding-left:10px;padding-right:10px}
  .backbar a{padding:11px 16px;font-size:10.5px;letter-spacing:.2em}
  .pg-wrap{margin-bottom:14px}
}
@media (max-width:640px){
  .land{padding-left:18px;padding-right:18px}
  .land .mast img{height:104px;margin-bottom:20px}
  .land .mast h1{font-size:30px}
  .land .mast p{font-size:10.5px;letter-spacing:.3em}
  .fix{grid-template-columns:74px 1fr;gap:16px;padding:18px 2px}
  .fix:hover{padding-left:2px;padding-right:2px;background:none}
  .fix .c{display:none}
  .fix .d{padding-right:16px}
  .fix .d b{font-size:24px}
  .fix .t strong{font-size:20px}
  .fix .t em{font-size:11px;letter-spacing:.16em}
}

/* ==========================================================
   PRINT — A4 landscape
   ========================================================== */
@media print{
  body{background:#fff;padding:0}
  .backbar{display:none!important}
  .pg-wrap{width:auto;height:auto;overflow:visible;margin:0}
  .pg{transform:none!important;margin:0;box-shadow:none;page-break-after:always}
  @page{size:A4 landscape;margin:0}
}

/* ==========================================================
   COMPONENT: SPONSORS
   Renders only when CLUB_CONFIG.sponsors has entries.
   ========================================================== */
.sponsors{width:100%;max-width:700px;margin-top:38px}
.sponsors .eyebrow{padding-bottom:11px;border-bottom:1px solid var(--hair);margin-bottom:18px}
.sponsors .logos{display:flex;flex-wrap:wrap;align-items:center;gap:26px}
.sponsors .logos img{height:34px;opacity:.85;display:block}