/* ==========================================================================
   DMS Webinar — October 2026

   Flat ink on paper. Deliberately none of the following, because together they
   are the house style of every generated SaaS page: gradients, rounded corners,
   pill buttons, drop shadows, translucent glass panels, offset colour blocks,
   glowing orbs.

   What carries it instead is structure and scale — a hard grid, full-width
   rules, and type set very large and very tight. The palette is the DMS navy
   taken from the logo's own ink, a mid navy for labels, and paper. Nothing
   else. Colour appears as a solid field or not at all.

   Type: Archivo (display — a grotesque with a real width axis, run expanded and
   heavy at poster size) / Public Sans (body) / IBM Plex Mono (data and labels).
   ========================================================================== */

:root {
  --paper: #FFFFFF;
  /* The DMS navy, sampled from the ink of dms_logo.png. It carries the whole
     page: it is the text colour, the rule colour and the one solid field. */
  --ink:   #0E2135;   /* 16.3:1 on paper, and 16.3:1 under white */
  --ink-2: #55637A;   /*  6.1:1 on paper */
  --blue:  #2C4C70;   /*  8.9:1 on paper — a mid navy for labels and figures */
  --rule:  #0E2135;
  --hair:  #DBE1E8;

  --display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --body:    "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-hero: clamp(2.65rem, 0.4rem + 8.4vw, 7.5rem);
  --t-name: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);

  --measure: 78rem;
  --gutter:  clamp(1.25rem, 0.7rem + 2.6vw, 3.25rem);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

/* The UA rule for [hidden] has zero specificity, so any class setting display
   beats it. Page state is toggled entirely through that attribute. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, picture { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 { margin: 0; font-family: var(--display); }
p, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--blue); text-underline-offset: 3px; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.buy :focus-visible { outline-color: #fff; }
::selection { background: var(--blue); color: #fff; }

.wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--gutter); top: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--ink); color: #fff;
  padding: .7rem 1.1rem;
  font-weight: 600; text-decoration: none;
  transition: transform .18s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow__mark { width: 10px; height: 10px; background: var(--ink); flex: none; }
.eyebrow--invert { color: #fff; }
.eyebrow--invert .eyebrow__mark { background: #fff; }

/* --------------------------------------------------------------------------
   Buttons — square, flat, no shadow
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 50px;
  padding: .85rem 1.5rem;
  border: 0;
  background: var(--ink);
  color: #fff;
  font-family: var(--display);
  font-size: .9375rem;
  font-weight: 700;
  font-variation-settings: "wdth" 105;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.btn:hover { background: var(--blue); }
.btn[aria-disabled="true"] { cursor: not-allowed; opacity: .6; }

.btn--invert { background: #fff; color: var(--ink); }
.btn--invert:hover { background: var(--blue); color: #fff; }

.btn__price {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .9em;
  padding-left: .75rem;
  border-left: 1px solid currentColor;
}

.btn--lg    { min-height: 60px; padding: 1.05rem 1.9rem; font-size: 1.0625rem; }
.btn--sm    { min-height: 38px; padding: .45rem 1rem; font-size: .8125rem; }
.btn--block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
}
.masthead__bar {
  display: flex; align-items: center; gap: 1rem;
  min-height: 64px; padding-block: .6rem;
}
.masthead__logo { display: inline-flex; }
.masthead__logo img { width: 98px; }
.masthead__when {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.masthead__cta {
  opacity: 0; visibility: hidden;
  transition: opacity .2s var(--ease), visibility .2s;
}
.masthead[data-stuck="true"] .masthead__cta { opacity: 1; visibility: visible; }

@media (max-width: 620px) {
  .masthead__when { display: none; }
  .masthead__cta { margin-left: auto; }
}

/* --------------------------------------------------------------------------
   The announcement
   -------------------------------------------------------------------------- */

.announce { padding-top: clamp(2.5rem, 1rem + 5vw, 5.5rem); }

.announce h1 {
  margin-top: 1.5rem;
  font-size: var(--t-hero);
  /* 600, not 800. At this size an expanded grotesque at heavy weight stops
     reading as type and starts reading as a slab of ink. */
  font-weight: 600;
  font-variation-settings: "wdth" 108;
  letter-spacing: -0.035em;
  line-height: .92;
  text-wrap: balance;
}

/* The subject line, sitting under the title */
.deck {
  margin-top: 1.35rem;
  font-family: var(--display);
  font-size: clamp(1.25rem, .95rem + 1.35vw, 2.05rem);
  font-weight: 500;
  font-variation-settings: "wdth" 100;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--ink-2);
  max-width: 26ch;
  text-wrap: balance;
}

/* Logistics as a ruled data band running the full width of the page */
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-top: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.specs__cell {
  padding: 1.1rem clamp(1.25rem, .7rem + 2.6vw, 3.25rem) 1.15rem;
  border-left: 1px solid var(--hair);
}
.specs__cell:first-child { border-left: 0; }
.specs dt {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: .4rem;
}
.specs dd {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  font-variation-settings: "wdth" 100;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.announce__foot {
  display: grid;
  gap: 2rem;
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
}
.announce__lede {
  font-size: clamp(1.075rem, 1rem + 0.4vw, 1.25rem);
  color: var(--ink-2);
  max-width: 48ch;
}
.announce__act { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.announce__note {
  font-family: var(--mono); font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}

@media (min-width: 900px) {
  .announce__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 3rem; }
}

/* --------------------------------------------------------------------------
   Speakers — photo bleeds to the page edge, text holds the column
   -------------------------------------------------------------------------- */

.act {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule);
}
/* The frame owns the aspect and the image fills it absolutely. Letting the
   image size the row instead makes the row as tall as the photo is — which for
   a 5:8 full-length shot is about 900px of one speaker. */
.act__media { position: relative; background: var(--hair); aspect-ratio: 5 / 8; }
.act__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.act__body { padding: clamp(2rem, 1.25rem + 3vw, 3.5rem) var(--gutter); align-self: center; }
.act__index {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 1.25rem;
}
.act__index span {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  font-variation-settings: "wdth" 106;
  letter-spacing: -0.02em;
  color: var(--blue);
}
.act__name {
  font-size: var(--t-name);
  font-weight: 650;
  font-variation-settings: "wdth" 104;
  letter-spacing: -0.035em;
  line-height: .95;
}
.act__role {
  margin-top: .7rem;
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
}
.act__blurb { margin-top: 1.4rem; font-size: 1.09375rem; color: var(--ink-2); max-width: 58ch; }
.act__blurb em { font-style: italic; color: var(--ink); font-weight: 600; }

@media (min-width: 900px) {
  .act { grid-template-columns: minmax(0, 28%) minmax(0, 72%); }
  .act__media { aspect-ratio: 5 / 7; }
  .act__media img { object-position: 50% 22%; }

  /* The photo runs flush to the viewport edge on its own side while the text
     column keeps the container's inner padding. A card would box both. */
  .act__body { padding-right: max(var(--gutter), calc(50vw - var(--measure) / 2 + var(--gutter))); }
  .act:not(.act--rev) .act__body { padding-left: clamp(2rem, 1rem + 3vw, 4rem); }

  /* Placing both children explicitly, rather than reordering. `order` moves the
     element but leaves the column widths where they were, which put the text in
     the narrow column and the photo in the wide one. */
  .act--rev { grid-template-columns: minmax(0, 72%) minmax(0, 28%); }
  .act--rev .act__media { grid-column: 2; grid-row: 1; }
  .act--rev .act__body {
    grid-column: 1; grid-row: 1;
    padding-right: clamp(2rem, 1rem + 3vw, 4rem);
    padding-left: max(var(--gutter), calc(50vw - var(--measure) / 2 + var(--gutter)));
  }
}

/* --------------------------------------------------------------------------
   Tickets — the only solid field of colour on the page
   -------------------------------------------------------------------------- */

.buy { background: var(--ink); color: #fff; border-top: 1px solid var(--rule); }
.buy__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  padding-block: clamp(2.75rem, 1.5rem + 5vw, 5rem);
}

.buy__what {
  margin: 1.25rem 0 1.75rem;
  font-family: var(--display);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  font-weight: 650;
  font-variation-settings: "wdth" 104;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 16ch;
}
.buy__list { display: grid; gap: .7rem; max-width: 46ch; }
.buy__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: #fff;
}
.buy__list li::before {
  content: "";
  position: absolute; left: 0; top: .48rem;
  width: .5rem; height: .5rem;
  background: #fff;
}

.buy__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .9rem; margin-bottom: 1.5rem; }
.buy__amount {
  font-family: var(--display);
  font-size: clamp(3.25rem, 2.2rem + 4vw, 5rem);
  font-weight: 650;
  font-variation-settings: "wdth" 108;
  letter-spacing: -0.04em;
  line-height: .88;
}
/* Before a real price exists this slot holds a sentence, not a number */
.buy__amount[data-pending="true"] {
  font-family: var(--body);
  font-variation-settings: normal;
  font-size: 1.2rem; font-weight: 600; line-height: 1.35; letter-spacing: 0;
}
.buy__unit {
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}

.fineprint { margin-top: 1.1rem; font-size: .8125rem; line-height: 1.6; color: #fff; }
.fineprint a { color: #fff; }

.checkout-error {
  display: none;
  margin-top: 1rem;
  padding: .85rem 1rem;
  background: #fff;
  color: #A11B1B;
  font-size: .9375rem;
  line-height: 1.5;
}
.checkout-error[data-shown="true"] { display: block; }

@media (min-width: 880px) {
  .buy__grid { grid-template-columns: 1.15fr .85fr; align-items: start; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--rule);
  padding-block: 1.75rem;
  font-size: .8125rem;
  color: var(--ink-2);
}
.foot__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; }
.foot__logo { width: 88px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-left: auto; }
.site-foot a { color: var(--ink); }

/* --------------------------------------------------------------------------
   Confirmation panel (success.html)
   -------------------------------------------------------------------------- */

.receipt { margin-top: 2rem; max-width: 36rem; border-top: 1px solid var(--rule); }
.receipt__row {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: .3rem 1.5rem;
  padding-block: .8rem;
  border-bottom: 1px solid var(--hair);
  font-size: .9375rem;
}
.receipt__key {
  font-family: var(--mono); font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.receipt__val { font-weight: 600; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .rise {
    opacity: 0;
    transform: translateY(10px);
    animation: rise .6s var(--ease) forwards;
    animation-delay: var(--d, 0ms);
  }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

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