/* ===========================================================================
   DECK — the page shell and every themed component.

   Everything inside .ds-canvas is authored in canvas pixels by the renderers
   (left/top/width/height set inline). This file styles APPEARANCE ONLY, and
   only through theme custom properties (--t-*), never literal colours — that
   is what keeps the white-label seam intact.

   The canvas is transform-scaled to fit the screen and again for print, so a
   page looks identical at any size.
   =========================================================================== */

@import url("../brand/fonts.css");

*, *::before, *::after { box-sizing: border-box; }

/* ---- Page + canvas shell ------------------------------------------------- */
.ds-deck { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 26px 16px 60px; }

.ds-page {
  position: relative;
  width: calc(var(--ds-canvas-w) * var(--ds-scale, .5) * 1px);
  height: calc(var(--ds-canvas-h) * var(--ds-scale, .5) * 1px);
  background: var(--t-surface);
  box-shadow: 0 10px 34px rgba(15, 37, 64, .28);
  overflow: hidden;
  flex: 0 0 auto;
}
.ds-canvas {
  position: absolute; top: 0; left: 0;
  width: calc(var(--ds-canvas-w) * 1px);
  height: calc(var(--ds-canvas-h) * 1px);
  transform-origin: top left;
  transform: scale(var(--ds-scale, .5));
  overflow: hidden;
  background: var(--t-surface);
  font-family: var(--t-font-body);
  color: var(--t-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* ---- Layer primitives ---------------------------------------------------- */
.ds-l    { position: absolute; }
.ds-text { position: absolute; display: block; white-space: pre-wrap; line-height: 1.14; }
.ds-para { position: absolute; display: block; font-family: var(--t-font-body); }
.ds-para p { margin: 0 0 .72em 0; }
.ds-para p:last-child { margin-bottom: 0; }
.ds-rect { position: absolute; }

/* ---- Photography --------------------------------------------------------- */
.ds-photo { position: absolute; overflow: hidden; background: var(--t-soft); }
.ds-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* An empty slot must still read as a designed page, never as a broken one:
   a navy wash with the gold gradient mark and a quiet label. */
.ds-photo-empty {
  background: linear-gradient(160deg, var(--t-primary) 0%, var(--t-primary-deep) 100%);
  display: flex; align-items: center; justify-content: center;
}
.ds-photo-empty::before {
  content: ""; position: absolute; right: -12%; top: -18%; width: 52%; aspect-ratio: 1;
  background: var(--t-gradient); opacity: .10; transform: rotate(18deg);
  filter: blur(2px);
}
.ds-photo-empty span {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--t-font-label); font-weight: 700;
  color: var(--t-on-dark-faint); letter-spacing: .18em; text-transform: uppercase;
  font-size: 22px; opacity: .55; white-space: nowrap;
}

/* Cover imagery sits under a navy scrim so type stays legible over any photo. */
.ds-scrim { position: absolute; }
.ds-scrim-bottom { background: linear-gradient(180deg, rgba(15,37,64,0) 0%, rgba(15,37,64,.55) 42%, rgba(15,37,64,.94) 100%); }
.ds-scrim-full   { background: linear-gradient(120deg, rgba(15,37,64,.92) 0%, rgba(15,37,64,.62) 52%, rgba(15,37,64,.25) 100%); }

/* ---- Eyebrow / label ----------------------------------------------------- */
.ds-eyebrow {
  position: absolute; font-family: var(--t-font-label); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--t-accent-deep);
}
.ds-eyebrow.on-dark { color: var(--t-accent); }

/* ---- Rules --------------------------------------------------------------- */
.ds-rule      { position: absolute; background: var(--t-accent); }
.ds-rule-grad { position: absolute; background: var(--t-gradient); }
.ds-hairline  { position: absolute; background: var(--t-border); }

/* ---- Display type -------------------------------------------------------- */
.ds-display { position: absolute; font-family: var(--t-font-display); line-height: 1.06; color: var(--t-primary); }
.ds-display.on-dark { color: var(--t-on-dark); }
.ds-display .lite { font-weight: var(--t-wt-display-light); }
.ds-display .bold { font-weight: var(--t-wt-display-bold); }
.ds-display .gold { color: var(--t-accent); }

/* ---- Page title bar (navy panel, gold underline) ------------------------- */
.ds-pagetitle {
  position: absolute; display: flex; align-items: center;
  font-family: var(--t-font-display); font-weight: var(--t-wt-display-bold);
  color: var(--t-primary);
}
.ds-pagetitle::after {
  content: ""; position: absolute; left: 0; bottom: -18px; width: 96px; height: 7px;
  background: var(--t-accent);
}

/* ---- Section divider ----------------------------------------------------- */
.ds-divider-bg { position: absolute; inset: 0; background: var(--t-primary-deep); }
.ds-divider-mark {
  position: absolute; width: 900px; aspect-ratio: 1;
  background: var(--t-gradient); opacity: .14; transform: rotate(18deg);
}

/* ---- Panel (navy heading bar over a table) ------------------------------- */
.ds-panel-title {
  position: absolute; display: flex; align-items: center;
  background: var(--t-primary); color: var(--t-on-dark);
  font-family: var(--t-font-label); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; padding: 0 26px;
}

/* ---- Tables -------------------------------------------------------------- */
.ds-table { position: absolute; width: 100%; border-collapse: collapse; font-family: var(--t-font-body); }
.ds-table th {
  font-family: var(--t-font-label); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--t-muted); text-align: left;
  padding: 0 14px 12px; border-bottom: 2px solid var(--t-primary);
}
.ds-table td { padding: 13px 14px; border-bottom: 1px solid var(--t-border); color: var(--t-body); vertical-align: top; }
.ds-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ds-table tr.total td { font-weight: 700; color: var(--t-primary); border-bottom: 2px solid var(--t-primary); }
.ds-table tr.subject td { background: var(--t-soft); font-weight: 600; color: var(--t-primary); }
.ds-table tr:last-child td { border-bottom: none; }

/* Two-column fact list: label left, value right, hairline between. */
.ds-facts { position: absolute; }
.ds-facts .row { display: flex; align-items: baseline; gap: 20px; border-bottom: 1px solid var(--t-border); }
.ds-facts .row:last-child { border-bottom: none; }
.ds-facts .k { flex: 0 0 42%; font-family: var(--t-font-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted); }
.ds-facts .v { flex: 1; color: var(--t-primary); font-weight: 500; }
.ds-facts.on-dark .k { color: var(--t-on-dark-faint); }
.ds-facts.on-dark .v { color: var(--t-on-dark); }

/* ---- Stat tiles ---------------------------------------------------------- */
.ds-stat { position: absolute; display: flex; flex-direction: column; justify-content: center; }
.ds-stat .n { font-family: var(--t-font-display); font-weight: var(--t-wt-display-bold); color: var(--t-primary); line-height: 1; }
.ds-stat .l { font-family: var(--t-font-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); margin-top: 10px; }
.ds-stat.on-dark .n { color: var(--t-on-dark); }
.ds-stat.on-dark .l { color: var(--t-accent); }
.ds-stat.accent .n { color: var(--t-accent); }

/* ---- Highlight card ------------------------------------------------------ */
.ds-hcard { position: absolute; display: flex; flex-direction: column; gap: 8px; padding-left: 26px; border-left: 5px solid var(--t-accent); }
.ds-hcard .t { font-family: var(--t-font-display); font-weight: var(--t-wt-display-bold); color: var(--t-primary); line-height: 1.12; }
.ds-hcard .s { font-family: var(--t-font-body); color: var(--t-body); line-height: 1.38; }
.ds-hcard.on-dark .t { color: var(--t-on-dark); }
.ds-hcard.on-dark .s { color: var(--t-on-dark-soft); }

/* ---- Bulleted item (gold square, matching the artboards) ----------------- */
.ds-bullet { position: absolute; display: flex; gap: 18px; }
.ds-bullet .mark { flex: 0 0 auto; width: 14px; height: 14px; background: var(--t-accent); margin-top: .34em; }
.ds-bullet .body { flex: 1; color: var(--t-body); line-height: 1.42; }
.ds-bullet .body b { color: var(--t-primary); font-weight: 700; }
.ds-bullet.on-dark .body { color: var(--t-on-dark-soft); }
.ds-bullet.on-dark .body b { color: var(--t-on-dark); }

/* ---- Brand lockup -------------------------------------------------------- */
.ds-brand { position: absolute; display: flex; align-items: center; }
.ds-brand img { display: block; height: 100%; width: auto; }

/* ---- Contact card -------------------------------------------------------- */
.ds-contact { position: absolute; display: flex; gap: 26px; align-items: flex-start; }
.ds-contact .shot { flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: var(--t-soft); }
.ds-contact .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-contact .n { font-family: var(--t-font-display); font-weight: var(--t-wt-display-bold); color: var(--t-primary); letter-spacing: .02em; }
.ds-contact .r { font-family: var(--t-font-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--t-accent-deep); margin-top: 6px; }
.ds-contact .line { color: var(--t-body); margin-top: 4px; }
.ds-contact.on-dark .n { color: var(--t-on-dark); }
.ds-contact.on-dark .r { color: var(--t-accent); }
.ds-contact.on-dark .line { color: var(--t-on-dark-soft); }

/* ---- Footer -------------------------------------------------------------- */
.ds-footrule { position: absolute; background: var(--t-accent); }
.ds-footnum  { position: absolute; font-family: var(--t-font-display); font-weight: var(--t-wt-display-bold); color: var(--t-primary); text-align: left; }
.ds-foottext { position: absolute; font-family: var(--t-font-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--t-faint); text-align: right; }
.ds-footnum.on-dark  { color: var(--t-accent); }
.ds-foottext.on-dark { color: var(--t-on-dark-faint); }

/* ---- Fine print ---------------------------------------------------------- */
.ds-fine { position: absolute; color: var(--t-faint); line-height: 1.45; font-family: var(--t-font-body); }
.ds-fine.on-dark { color: var(--t-on-dark-faint); }

/* ---- Print --------------------------------------------------------------- */
/* The page box must match the document's own geometry or a landscape deck
   prints onto portrait letter and loses its right-hand third. `--ds-print-*`
   is set by the renderer from the active format. */
@page {
  size: var(--ds-print-w, 11in) var(--ds-print-h, 8.5in);
  margin: 0;
}

@media print {
  html, body { width: auto; height: auto; overflow: visible; background: #fff; }
  /* The studio chrome is not part of the document. */
  .top, .rail, .strip { display: none !important; }
  .studio { display: block; height: auto; }
  .stage { overflow: visible; background: #fff; }
  /* Print at true size, not at the on-screen fit scale. */
  .ds-page { width: var(--ds-print-w, 11in); height: var(--ds-print-h, 8.5in); }
  .ds-canvas { transform: scale(var(--ds-print-scale, 1)); }
  .ds-deck { gap: 0; padding: 0; }
  .ds-page { box-shadow: none; page-break-after: always; break-after: page; }
  .ds-page:last-child { page-break-after: auto; break-after: auto; }
}