/* =========================================================
   COZ CLUB Logo Guidelines, presentation deck

   Basic design taken from "PPT Template (For Everyone's use).pptx":
     stage      18288000 x 10287000 EMU = 20 x 11.25in, 16:9
     grounds    dark #0D0D0D / #111111, light #FFFFFF / #F5F5F5
     neutrals   a pure grey ramp, not the warm one the document uses
     accents    the brand three, used sparingly
     type       Calibri Bold headings, Arimo body, as in the template

   Type sizes are expressed against the slide height. The template's
   slide is 810pt tall, so a 55pt title is 55/810 = 6.79% of height.
   Container query units make that exact at any projector size.
   ========================================================= */

:root {
  /* the template ramp is neutral grey, so the deck overrides the
     document's warm off-whites rather than mixing the two */
  --page:      #ffffff;
  --card:      #ffffff;
  --ink:       #111111;
  --ink-2:     #666666;
  --ink-3:     #888888;
  --rule:      #eeeeee;
  --rule-hard: #dddddd;
  --pill:      #f5f5f5;

  /* Calibri and Arimo are the template's faces. Carlito is Calibri's
     metric-compatible substitute and loads from the web. */
  --font-head: "Calibri", "Carlito", system-ui, sans-serif;
  --font-body: "Arimo", "Arial", "Liberation Sans", system-ui, sans-serif;
}

html, body { height: 100%; }
body { overflow: hidden; background: #000; }

/* ---------- 16:9 stage, letterboxed ---------- */

.deck { position: fixed; inset: 0; display: grid; place-items: center; background: #000; }

.deck-stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  overflow: hidden;
  background: var(--page);
}

/* fallback scale, replaced by container units below */
.slide {
  --t-huge: 13vmin;
  --t-xl:   7vmin;
  --t-lg:   5vmin;
  --t-md:   3.1vmin;
  --t-bd:   2.5vmin;
  --t-sm:   2.1vmin;
  --t-xs:   1.9vmin;
  --t-ft:   1.5vmin;
  --pad-x:  6.2%;
  --pad-y:  9%;
}

@supports (font-size: 1cqh) {
  .deck-stage { container-type: size; }
  .slide {
    --t-huge: 19.75cqh;  /* 160pt */
    --t-xl:    9.38cqh;  /*  76pt */
    --t-lg:    6.79cqh;  /*  55pt */
    --t-md:    3.95cqh;  /*  32pt */
    --t-bd:    3.33cqh;  /*  27pt */
    --t-sm:    2.84cqh;  /*  23pt */
    --t-xs:    2.47cqh;  /*  20pt */
    --t-ft:    1.98cqh;  /*  16pt */
  }
}

.slide {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad-y) var(--pad-x);
  background: var(--page);
  color: var(--ink);
  overflow: hidden;
}
.slide.is-active { display: flex; }
.slide__inner { width: 100%; }

/* ---------- ground options, straight from the template ---------- */

.slide--dark {
  --page: #111111; --card: #1a1a1a; --ink: #ffffff;
  --ink-2: #aaaaaa; --ink-3: #888888;
  --rule: #2a2a2a; --rule-hard: #3a3a3a; --pill: #222222;
}
.slide--black {
  --page: #0d0d0d; --card: #1a1a1a; --ink: #ffffff;
  --ink-2: #aaaaaa; --ink-3: #888888;
  --rule: #262626; --rule-hard: #363636; --pill: #1f1f1f;
}
.slide--grey { --page: #f5f5f5; --card: #ffffff; }
.slide--accent {
  --page: #ff7f32;
  --card: rgba(255,255,255,0.14);
  --ink: #ffffff;
  --ink-2: rgba(255,255,255,0.88);
  --ink-3: rgba(255,255,255,0.74);
  --rule: rgba(255,255,255,0.26);
  --rule-hard: rgba(255,255,255,0.38);
  --pill: rgba(255,255,255,0.16);
}

/* ghosted construction artwork has to flip on a dark ground */
.slide--dark .cs-art img,  .slide--black .cs-art img,
.slide--dark .cs-art .lockup, .slide--black .cs-art .lockup {
  filter: brightness(0) invert(1);
  opacity: 0.3;
}

/* ---------- deck typography ---------- */

.slide .eyebrow {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-brand-orange);
  margin: 0 0 1.6vh;
}

.slide h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--t-lg);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 1.4vh;
}
.slide h3 { font-family: var(--font-head); font-weight: 700; font-size: var(--t-sm); }
.slide h4 { font-family: var(--font-head); font-weight: 700; font-size: var(--t-xs); }

.slide .lede {
  font-family: var(--font-body);
  font-size: var(--t-bd);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 68ch;
  margin: 0;
}
.slide p { max-width: 68ch; }
.slide .small, .slide .name-list li, .slide .rule-box p { font-size: var(--t-xs); line-height: 1.45; }
.slide .mono { font-size: var(--t-ft); }
.slide .muted { color: var(--ink-2); }

/* ---------- section divider, the template's signature layout ---------- */

.slide-num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--t-huge);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--color-brand-orange);
  margin: 0 0 1vh;
}
.slide--section h2 { font-size: var(--t-xl); }
.slide--section .lede { max-width: 52ch; }

/* ---------- statement slide ---------- */

.statement {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 24ch;
}
.statement em { font-style: normal; color: var(--color-brand-orange); }
.slide--accent .statement em { color: #111111; }

.big-eq {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--t-huge);
  line-height: 0.94;
  letter-spacing: -0.03em;
  margin: 0 0 2vh;
}
.big-eq em { font-style: normal; color: var(--color-brand-orange); }
.slide--accent .big-eq, .slide--accent .big-eq em { color: #ffffff; }

.motto {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-brand-orange);
}

/* ---------- chrome ---------- */

.deck-progress {
  position: absolute; top: 0; left: 0;
  height: 0.4vh; min-height: 2px; width: 0;
  background: var(--color-brand-orange);
  z-index: 30; transition: width 0.28s ease;
}

.deck-bar, .deck-foot {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: center; gap: 1.2vw;
  padding: 0 6.2%;
  height: 7.5%;
  z-index: 20; pointer-events: none;
}
.deck-bar { top: 0; }
.deck-foot { bottom: 0; justify-content: flex-end; }

.deck-bar img { height: 2.3vh; width: auto; }
.deck-home { pointer-events: auto; display: block; }

.deck-bar .kicker, .deck-back {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5vh;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #888888;
  white-space: nowrap;
}
.deck-back { margin-left: auto; pointer-events: auto; text-decoration: none; }
.deck-back:hover { color: #ff7f32; }

.deck-help { font-family: var(--font-head); font-size: 1.4vh; color: #888888; margin-right: auto; }
.deck-help kbd {
  font-family: inherit; border: 1px solid #dddddd; border-bottom-width: 2px;
  border-radius: 3px; padding: 0 0.4vw; margin: 0 1px;
}

.deck-foot .count {
  font-family: var(--font-head); font-weight: 700; font-size: 1.6vh;
  color: #888888; font-variant-numeric: tabular-nums;
}
.deck-foot .count b { color: #111111; }

.deck-nav { display: flex; gap: 0.5vw; pointer-events: auto; }
.deck-nav button {
  width: 3.3vh; height: 3.3vh;
  display: grid; place-items: center;
  border: 1px solid #dddddd; background: #ffffff; border-radius: 4px;
  color: #666666; font: inherit; font-size: 1.5vh; line-height: 1; cursor: pointer;
}
.deck-nav button:hover:not(:disabled) { color: #fff; background: #ff7f32; border-color: #ff7f32; }
.deck-nav button:disabled { opacity: 0.3; cursor: default; }

/* chrome has to read against whichever ground is showing */
body.on-dark .deck-foot .count b { color: #ffffff; }
body.on-dark .deck-nav button { background: #1f1f1f; border-color: #3a3a3a; color: #aaaaaa; }
body.on-dark .deck-help kbd { border-color: #3a3a3a; }

/* ---------- layout helpers ---------- */

.slide-split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2.6vw; align-items: center; }
.slide .grid-2, .slide .grid-3, .slide .grid-4, .slide .name-cols { gap: 1.3vw; }

.fig-plain {
  background: var(--card); border: 1px solid var(--rule); border-radius: 6px;
  padding: 2.2vw; margin: 0; display: grid; place-items: center; overflow: hidden;
}
.meta-row { display: flex; flex-wrap: wrap; gap: 0.55vw; margin-top: 2.2vh; }
.slide .pill { font-size: var(--t-ft); padding: 0.4vh 0.7vw; border-radius: 4px; }

/* ---------- component sizing inside a slide ---------- */

.slide .cs { padding: 1.6vw; border: 0; background: transparent; overflow: visible; }
.slide .cs-caption { font-size: var(--t-ft); margin-top: 1.8vh; color: var(--ink-3); }
.slide .cs-label { font-size: var(--t-ft); }
.slide .cs-u { font-size: calc(var(--t-ft) * 0.86); }

.slide .stage { min-height: 0; padding: 2.2vh 1.3vw; overflow: hidden; }
.slide .stage img { max-height: 7.2vh; }
.slide .stage img.em { height: 7.6vh; width: 7.6vh; max-height: none; }
.slide .stage .lockup__mark, .slide .stage .cb-mark { max-height: none; }
.slide .stage img.sib { max-height: none; }
.slide .stage--dark { background: #0d0d0d; }
.slide .stage--white { background: #ffffff; box-shadow: inset 0 0 0 1px var(--rule); }

.slide .card { background: var(--card); border-color: var(--rule); border-radius: 6px; }
.slide .card__body { padding: 1.3vh 0.9vw; border-top-color: var(--rule); }
.slide .card__body h4 { font-size: var(--t-xs); }
.slide .card__body .mono, .slide .card__body .tag { font-size: calc(var(--t-ft) * 0.9); }

.slide .rule-box { background: var(--card); border-color: var(--rule); border-radius: 6px; padding: 1.8vh 1.2vw; }
.slide .rule-box__eq { font-size: var(--t-md); }
.slide .name-list li { padding: 0.65vh 0; border-top-color: var(--rule); }
.slide .sub-label { font-size: var(--t-ft); margin-bottom: 1.3vh; border-bottom-color: var(--rule); color: var(--ink-3); }

.slide .spec { background: var(--card); border-color: var(--rule); border-radius: 6px; padding: 1.7vh 1.2vw; }
.slide .spec__top { padding-bottom: 1.1vh; margin-bottom: 1.3vh; border-bottom-color: var(--rule); }
.slide .spec__aa { font-size: var(--t-lg); margin-bottom: 0.9vh; }
.slide .spec__sample { font-size: var(--t-xs); }
.slide .spec__role { font-size: calc(var(--t-ft) * 0.9); margin-bottom: 0.7vh; }

.slide .sw { background: var(--card); border-color: var(--rule); padding: 1.7vh 1.1vw; border-radius: 6px; }
.slide .sw__chip { width: 6.6vh; height: 6.6vh; margin-bottom: 1.5vh; border-radius: 8px; }
.slide .sw__desc { font-size: var(--t-ft); margin-bottom: 1.1vh; }

.slide .meaning { padding: 1.7vh 1.2vw; }
.slide .meaning__dot { width: 4.8vh; height: 4.8vh; margin-bottom: 1.5vh; }
.slide .meaning h4 { font-size: var(--t-sm); }
.slide .rule-no { font-size: var(--t-ft); margin-bottom: 1.1vh; }

.slide .sizes { background: var(--card); border-color: var(--rule); border-radius: 6px; padding: 2.4vh 1.8vw; gap: 2.8vw; }
.slide .size figcaption { font-size: calc(var(--t-ft) * 0.92); }

.slide .cobrand { --h: 7.6vh; }
.slide .cobrand--measured .cb-gap { font-size: calc(var(--t-ft) * 0.84); }

.slide .dim-fig { --H: 12.5vh; }
.slide .dim-rule i { font-size: calc(var(--t-ft) * 0.8); background: transparent; }
.slide .dim-bar b { font-size: calc(var(--t-ft) * 0.9); }

.slide .type-scale { border-color: var(--rule); border-radius: 6px; }
.slide .type-row { padding: 0.9vh 1.1vw; border-top-color: var(--rule); }

.slide .tag { font-size: calc(var(--t-ft) * 0.9); }
.slide--dark .tag--no, .slide--black .tag--no { background: rgba(255,255,255,0.12); color: #ffffff; }
.slide--dark .tag--yes, .slide--black .tag--yes { background: rgba(108,194,74,0.18); }

/* ---------- cover and close ---------- */

.slide--cover .slide__inner, .slide--end .slide__inner { max-width: 92%; }
.cover-lockup { margin-bottom: 4.2vh; }
.cover-lockup .lockup { --lh: 8.6vh; }
.slide--end .emblem-xl { width: 13vh; height: 13vh; margin-bottom: 3.2vh; }

/* ---------- print: one 16:9 slide per page ---------- */

@media print {
  @page { size: 20in 11.25in; margin: 0; }

  html, body { height: auto; overflow: visible; background: #fff; }
  .deck { position: static; display: block; }
  .deck-stage {
    width: 100%; height: auto;
    container-type: normal; overflow: visible; background: transparent;
  }
  .deck-progress, .deck-bar, .deck-foot { display: none !important; }

  .slide {
    position: relative; inset: auto;
    display: flex !important;
    width: 20in; height: 11.25in;
    break-after: page; page-break-after: always;
    overflow: hidden;
    --t-huge: 160pt; --t-xl: 76pt; --t-lg: 55pt; --t-md: 32pt;
    --t-bd: 27pt; --t-sm: 23pt; --t-xs: 20pt; --t-ft: 16pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .slide:last-child { break-after: auto; page-break-after: auto; }
}