/* =========================================================================
   CLUTCH POINT × EWC 2025  — shared design system
   Pixel-exact static slides, render-ready for PNG export.
   ========================================================================= */

/* ---- Fonts (installed locally, copied into assets/fonts) ---------------- */
@font-face{
  font-family:"Bourgeois";
  src:url("assets/fonts/Bourgeois-Bold.otf") format("opentype");
  font-weight:700; font-style:normal; font-display:block;
}
@font-face{
  font-family:"Hitmarker";
  src:url("assets/fonts/HitmarkerCondensed-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:block;
}
@font-face{
  font-family:"Hitmarker";
  src:url("assets/fonts/HitmarkerCondensed-Black.ttf") format("truetype");
  font-weight:900; font-style:normal; font-display:block;
}
/* "Hitmarker Text : Medium" in the source → nearest available weight (600) */
@font-face{
  font-family:"Hitmarker";
  src:url("assets/fonts/HitmarkerCondensed-Black.ttf") format("truetype");
  font-weight:600; font-style:normal; font-display:block;
}

/* ---- Design tokens ----------------------------------------------------- */
:root{
  --ink:#303339;          /* primary charcoal text / dark UI            */
  --ink-strong:#262626;   /* darkest text                              */
  --gold:#907c4b;         /* brand antique gold (accents, rank 1)      */
  --gold-soft:#c8b784;    /* lighter gold                              */
  --blue:#c4d1e2;         /* cool blue-grey (CC points, secondary)     */
  --row:#f2f2f2;          /* row surface                               */
  --row-tint:rgb(231,230,239); /* subtle lilac tint on row gradient    */
  --paper:#eef0f3;        /* light marble paper base                   */
  --line:rgba(48,51,57,.14);
}

/* ---- Reset / page ------------------------------------------------------ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:#1b1d22;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
body{display:flex;flex-direction:column;align-items:center;gap:48px;padding:48px}

/* ---- Frame primitives -------------------------------------------------- */
.frame{
  position:relative;overflow:hidden;background:var(--paper);
  font-family:"Hitmarker",sans-serif;color:var(--ink);
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  flex:0 0 auto;
}
.f-post{width:1080px;height:1440px;padding:70px 66px 54px} /* 4:5 carousel slide */
.f-story{width:1080px;height:1920px}    /* 9:16 instagram story          */
.f-wide{width:1920px;height:1080px}     /* 16:9 landscape banner         */

.abs{position:absolute}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.layer{position:relative;z-index:1;width:100%;height:100%}

/* ---- Brand marks ------------------------------------------------------- */
.cp-logo{display:block}                 /* Clutch Point brush wordmark    */

/* ---- Gold treatments --------------------------------------------------- */
.gold-text{
  background:linear-gradient(180deg,#e9d9a5 0%,#caa955 42%,#8f7433 60%,#e3cf93 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-family:"Bourgeois";font-weight:700;
}

/* ---- Section header (CLUB / STANDINGS pills) --------------------------- */
.section-head{display:flex;align-items:center;justify-content:center;gap:22px}
.section-head .rule{height:2px;flex:1;background:linear-gradient(90deg,transparent,var(--gold))}
.section-head .rule.r{background:linear-gradient(90deg,var(--gold),transparent)}
.section-head h2{
  font-family:"Hitmarker";font-weight:900;letter-spacing:.28em;
  font-size:34px;color:var(--ink);text-transform:uppercase;white-space:nowrap;
  padding-left:.28em;
}

/* ---- Standings table --------------------------------------------------- */
.col-head{display:flex;align-items:flex-end;justify-content:flex-end;gap:0;
  font-family:"Hitmarker";font-weight:600;font-size:17px;letter-spacing:.14em;
  color:var(--ink);text-transform:uppercase;opacity:.8}
.col-head .c-prize{width:190px;text-align:center}
.col-head .c-cc{width:150px;text-align:center}

.srow{
  position:relative;display:flex;align-items:center;height:104px;
  border-radius:10px;overflow:hidden;
  background:linear-gradient(90deg,var(--row) 0%,var(--row-tint) 100%);
}
.srow+.srow{margin-top:14px}
.srow.win{background:linear-gradient(90deg,#f7f2e2 0%,#efe6cd 100%);
  box-shadow:inset 0 0 0 2px rgba(144,124,75,.55)}

.srow .rank{width:104px;height:104px;flex:0 0 104px;display:flex;
  align-items:center;justify-content:center;
  font-family:"Bourgeois";font-weight:700;font-size:46px;color:var(--ink)}
.srow.win .rank{color:var(--gold)}

.srow .crest{width:82px;height:82px;flex:0 0 82px;margin:0 8px 0 4px;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.srow .crest img{max-width:100%;max-height:100%;object-fit:contain}

.srow .who{flex:1;min-width:0;padding-left:8px}
.srow .who .team{font-family:"Hitmarker";font-weight:900;font-size:26px;
  letter-spacing:.04em;color:var(--ink);text-transform:uppercase;line-height:1}
.srow .who .roster{font-family:"Hitmarker";font-weight:400;font-size:16px;
  letter-spacing:.10em;color:var(--gold);text-transform:uppercase;margin-top:6px}

.srow .prize{width:190px;flex:0 0 190px;text-align:center;
  font-family:"Bourgeois";font-weight:700;font-size:24px;color:var(--ink)}
.srow .cc{width:150px;flex:0 0 150px;text-align:center;
  font-family:"Bourgeois";font-weight:700;font-size:24px;color:#8ba0bd}
.srow .cc.none{color:#b9bfc7}

/* ---- Footer credit ----------------------------------------------------- */
.credit{font-family:"Hitmarker";font-weight:400;font-size:11px;line-height:1.35;
  letter-spacing:.02em;color:rgba(48,51,57,.55);max-width:560px}

/* =========================================================================
   STORY SYSTEM (1080×1920) — lobby lineups + hero
   ========================================================================= */
.story{background:#000;color:#fff}

/* rotated edge typography */
.vbig,.vtick{position:absolute;top:50%;white-space:nowrap;font-family:"Bourgeois";
  font-weight:700;line-height:1;pointer-events:none}
.vbig{font-size:128px;color:#b3bbc7;letter-spacing:-.01em}
.vtick{font-size:38px;color:#30343c;letter-spacing:0}
.vbig.left ,.vtick.left {transform:translate(-50%,-50%) rotate(-90deg)}
.vbig.right,.vtick.right{transform:translate(-50%,-50%) rotate(90deg)}
.vbig.left{left:161px}   .vbig.right{left:918px}
.vtick.left{left:22px}   .vtick.right{left:1058px}

/* group pill */
.grp-pill{position:absolute;top:110px;left:276px;width:531px;height:48px;
  background:var(--gold);display:flex;align-items:center;justify-content:center;
  gap:64px;font-family:"Bourgeois";font-weight:700;font-size:30px;color:#fff;
  letter-spacing:.02em}
.grp-pill .vs{color:#0f1116;font-size:22px}

/* lineup rows */
.lrows{position:absolute;left:300px;top:200px}
.lrow{position:relative;height:76px;width:479px;margin-bottom:26px}
.lrow .strip{position:absolute;left:42px;right:0;top:8px;height:61px;overflow:hidden;
  background:#0e1014;box-shadow:0 0 2px rgba(0,0,0,.1),0 1px 8px rgba(0,0,0,.1)}
.lrow .strip::after{content:"";position:absolute;inset:0;background:var(--rowtex) center/cover;
  opacity:.10;transform:rotate(180deg)}
.lrow .box{position:absolute;left:0;top:0;width:75px;height:75px;background:#0e1014;
  border:2px solid #1e2230;display:flex;align-items:center;justify-content:center}
.lrow .box img{max-width:62%;max-height:62%;object-fit:contain}
.lrow .txt{position:absolute;left:86px;top:2px}
.lrow .team{font-family:"Bourgeois";font-weight:700;font-size:35px;color:var(--gold);
  line-height:1.1;letter-spacing:-.005em}
.lrow .roster{font-family:"Bourgeois";font-weight:700;font-size:23px;color:#b4bcc7;
  line-height:1;letter-spacing:0;margin-top:2px}
.lrow .roster i{color:var(--gold);font-style:normal;padding:0 6px}

/* EWC wordmark footer */
.ewc-mark{position:absolute;left:50%;transform:translateX(-50%);bottom:110px;width:191px}

/* ---- GOLD skin (Last Chance) — glass rows over gold texture ---- */
.skin-gold .vbig{color:#ffdea7}
.skin-gold .vbig sup{font-size:.34em;vertical-align:super}
.skin-gold .vtick{color:#a79057}
.skin-gold .grp-pill{background:rgba(0,0,0,.4);backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);color:#ffdea7;font-size:34px;letter-spacing:.04em}
.skin-gold .grp-pill.single{justify-content:center}
.skin-gold .lrow .strip{background:transparent;backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px)}
.skin-gold .lrow .box{background:rgba(0,0,0,.5);border-color:#ffdea7;
  backdrop-filter:blur(6.5px);-webkit-backdrop-filter:blur(6.5px)}
.skin-gold .lrow .team{color:#ffdea7}
.skin-gold .lrow .roster{color:#fff}
.skin-gold .lrow .roster i{color:#ffdea7}