/* mocs26.xftf.org — the Midwest OT Cybersecurity Summit microsite.
   A separate stylesheet from site.css on purpose: the summit is its own brand
   (navy/steel, carried over from midwest-otcs.org) and shares nothing with
   xftf.org but the server. No JavaScript anywhere — the app ships
   `script-src 'none'`, so the gallery and the calendar menu are CSS-only. */

:root {
  --m-ink:      #10233f;
  --m-navy:     #173c6b;
  --m-steel:    #3b6ba5;
  --m-mute:     #5f738c;
  --m-line:     #d8e0ea;
  --m-sunken:   #f4f7fb;
  --m-paper:    #ffffff;
  --m-accent:   #3b6ba5;
  --m-accent-d: #29527f;
  --m-amber:    #c2691b;

  --m-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --m-wrap: 72rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --m-ink:      #eef3f9;
    --m-navy:     #cfe0f2;
    --m-steel:    #8ab4dd;
    --m-mute:     #9fb0c4;
    --m-line:     #2a3a50;
    --m-sunken:   #16202e;
    --m-paper:    #0e1621;
    --m-accent:   #8ab4dd;
    --m-accent-d: #a9caea;
    --m-amber:    #e0954a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--m-sans);
  font-size: 17px;
  line-height: 1.62;
  color: var(--m-ink);
  background: var(--m-paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--m-accent); }
a:hover { color: var(--m-accent-d); }
:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 3px; }

h1, h2, h3, h4 { color: var(--m-navy); line-height: 1.22; margin: 0 0 .6rem; }
h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -.015em; }
h3 { font-size: 1.2rem; }
h4 { font-size: .95rem; }

.skip { position: absolute; left: -9999px; background: var(--m-navy); color: #fff;
        padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.m-wrap { max-width: var(--m-wrap); margin: 0 auto; padding: 0 1.25rem; }

/* ------------------------------------------------------------------ header */
.m-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--m-paper); border-bottom: 1px solid var(--m-line);
}
.m-bar {
  max-width: var(--m-wrap); margin: 0 auto; padding: .65rem 1.25rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.m-brand { display: flex; align-items: center; gap: .6rem;
           text-decoration: none; }

/* The link back to xftf.org. It carries margin-right:auto — the brand used to —
   so the pair sit together at the left and everything else stays right. */
.m-parent {
  margin-right: auto; margin-left: .15rem;
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px;                       /* a real tap target, not a hairline */
  padding: 0 .5rem;
  border-left: 1px solid var(--m-line);
  color: var(--m-mute); font-size: .82rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.m-parent:hover { color: var(--m-accent); }
.m-parent:hover .m-parent-arrow { border-color: var(--m-accent); }
.m-parent:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; border-radius: 4px; }

/* Drawn rather than a glyph, so it inherits colour and never renders as tofu. */
.m-parent-arrow {
  width: .42rem; height: .42rem;
  border-left: 1.5px solid var(--m-mute); border-bottom: 1.5px solid var(--m-mute);
  transform: rotate(45deg);
}

.m-parent-short { display: none; }
.m-brand img { width: 36px; height: 36px; border-radius: 6px; }
.m-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.m-brand-text strong { color: var(--m-navy); font-size: 1rem; letter-spacing: -.01em; }
.m-brand-text span { color: var(--m-mute); font-size: .76rem; }

.m-nav { display: flex; align-items: center; gap: .3rem 1.05rem; flex-wrap: wrap; }
.m-nav a {
  color: var(--m-ink); text-decoration: none; font-size: .9rem; font-weight: 500;
  padding: .35rem 0; border-bottom: 2px solid transparent;
}
.m-nav a:hover { color: var(--m-accent); border-bottom-color: var(--m-accent); }
.m-nav a.m-cta {
  background: var(--m-accent); color: #fff; border-radius: 4px;
  padding: .42rem .9rem; border-bottom: 0;
}
.m-nav a.m-cta:hover { background: var(--m-accent-d); color: #fff; }

/* Visually hidden but still focusable — a `hidden` checkbox cannot take focus,
   which would leave the menu keyboard-unreachable on a narrow screen. */
.m-navtoggle {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.m-burger { display: none; }

@media (max-width: 54rem) {
  /* The full name costs too much width beside the MOCS wordmark on a phone,
     and the initials are what the logo says anyway. */
  .m-parent-long { display: none; }
  .m-parent-short { display: inline; }
  .m-burger { display: flex; flex-direction: column; gap: 4px; cursor: pointer; padding: .5rem; }
  .m-burger span { width: 22px; height: 2px; background: var(--m-navy); }
  .m-navtoggle:focus-visible ~ .m-burger { outline: 2px solid var(--m-accent); outline-offset: 3px; }
  .m-nav {
    display: none; flex-basis: 100%; flex-direction: column;
    align-items: flex-start; gap: .15rem; padding-bottom: .5rem;
  }
  .m-navtoggle:checked ~ .m-nav { display: flex; }
}

/* -------------------------------------------------------------------- hero */
.m-hero {
  background: linear-gradient(180deg, var(--m-sunken), var(--m-paper));
  border-bottom: 1px solid var(--m-line);
  padding: 3.2rem 0 2.6rem;
}
.m-eyebrow {
  margin: 0 0 .5rem; color: var(--m-steel);
  font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.m-lead { font-size: 1.1rem; color: var(--m-mute); max-width: 48rem; margin: 0 0 1.6rem; }

.m-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem; margin: 0 0 1.7rem; padding: 0;
}
.m-facts > div {
  border-left: 3px solid var(--m-accent); padding-left: .9rem;
}
.m-facts dt {
  color: var(--m-steel); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: .15rem;
}
.m-facts dd { margin: 0; font-weight: 600; color: var(--m-navy); }
.m-facts dd span { display: block; font-weight: 400; color: var(--m-mute); font-size: .88rem; }
@media (max-width: 44rem) { .m-facts { grid-template-columns: 1fr; } }

.m-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 0; }
.m-btn {
  display: inline-block; background: var(--m-accent); color: #fff;
  text-decoration: none; font-size: .92rem; font-weight: 600;
  padding: .6rem 1.15rem; border-radius: 4px; border: 1px solid var(--m-accent);
}
.m-btn:hover { background: var(--m-accent-d); border-color: var(--m-accent-d); color: #fff; }
.m-btn.ghost { background: transparent; color: var(--m-accent); }
.m-btn.ghost:hover { background: var(--m-sunken); color: var(--m-accent-d); }

.m-cal { margin-top: 1.1rem; max-width: 20rem; }
.m-cal summary {
  cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--m-accent);
  padding: .45rem 0; list-style-position: inside;
}
.m-cal ul {
  list-style: none; margin: .3rem 0 0; padding: .5rem;
  border: 1px solid var(--m-line); border-radius: 5px; background: var(--m-paper);
}
.m-cal li a {
  display: block; padding: .4rem .55rem; text-decoration: none;
  font-size: .9rem; border-radius: 3px;
}
.m-cal li a:hover { background: var(--m-sunken); }

/* ----------------------------------------------------------- section index */
.m-index { background: var(--m-navy); }
.m-index ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0 2rem;
  margin: 0; padding: .7rem 0;
}
.m-index a {
  color: #dce8f6; text-decoration: none; font-size: .85rem; font-weight: 600;
  display: flex; align-items: baseline; gap: .5rem; padding: .3rem 0;
}
.m-index a:hover { color: #fff; }
.m-index-n { color: #7ea6d4; font-size: .74rem; font-weight: 800; letter-spacing: .06em; }
@media (prefers-color-scheme: dark) {
  .m-index { background: var(--m-sunken); border-block: 1px solid var(--m-line); }
  .m-index a { color: var(--m-navy); }
  .m-index a:hover { color: var(--m-accent-d); }
  .m-index-n { color: var(--m-steel); }
}

/* ------------------------------------------------------------------- bands */
.m-band { padding: 3rem 0; }
.m-band.alt { background: var(--m-sunken); border-block: 1px solid var(--m-line); }
.m-sec-n {
  margin: 0 0 .3rem; color: var(--m-steel);
  font-size: .8rem; font-weight: 800; letter-spacing: .1em;
}
.m-sub { color: var(--m-mute); max-width: 48rem; margin: 0 0 1.8rem; }
.m-prose { max-width: 46rem; }
.m-fine { color: var(--m-mute); font-size: .85rem; }

.m-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.5rem; align-items: start; }
@media (max-width: 54rem) { .m-split { grid-template-columns: 1fr; } }

.m-card {
  background: var(--m-paper); border: 1px solid var(--m-line);
  border-radius: 8px; padding: 1.4rem;
}
.m-deflist { margin: 1.1rem 0 0; }
.m-deflist dt {
  color: var(--m-steel); font-size: .74rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; margin-top: .9rem;
}
.m-deflist dd { margin: .15rem 0 0; color: var(--m-ink); font-size: .93rem; }

.m-timeline { list-style: none; margin: 0; padding: 0; }
.m-timeline li {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: .8rem;
  padding: .65rem 0; border-bottom: 1px solid var(--m-line);
}
.m-timeline li:last-child { border-bottom: 0; }
.m-when { color: var(--m-steel); font-size: .82rem; font-weight: 700; }
.m-what { font-size: .93rem; }
@media (max-width: 34rem) { .m-timeline li { grid-template-columns: 1fr; gap: .1rem; } }

/* ------------------------------------------------------------------- stats */
.m-stats {
  list-style: none; margin: 1.6rem 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem;
}
.m-stats li {
  background: var(--m-paper); border: 1px solid var(--m-line); border-radius: 8px;
  padding: 1.1rem .8rem; text-align: center;
}
.m-stats strong {
  display: block; font-size: 1.9rem; line-height: 1.1;
  color: var(--m-navy); letter-spacing: -.02em;
}
.m-stats span { color: var(--m-mute); font-size: .82rem; }
@media (max-width: 44rem) { .m-stats { grid-template-columns: repeat(2, 1fr); } }

/* ----------------------------------------------------------------- gallery */
.m-gallery {
  list-style: none; margin: 1.6rem 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem;
}
.m-gallery li.wide { grid-column: span 2; }
.m-gallery a {
  display: block; position: relative; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--m-line); text-decoration: none;
}
.m-gallery img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.m-cap {
  position: absolute; inset-inline: 0; bottom: 0; padding: 1.4rem .8rem .6rem;
  background: linear-gradient(180deg, rgba(6, 16, 30, 0), rgba(6, 16, 30, .82));
  color: #fff;
}
.m-cap-eyebrow {
  display: block; font-size: .68rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: #b9d2ee;
}
.m-cap-title { display: block; font-size: .86rem; font-weight: 600; line-height: 1.3; }
@media (max-width: 54rem) {
  .m-gallery { grid-template-columns: repeat(2, 1fr); }
  .m-gallery li.wide { grid-column: span 2; }
}

/* CSS-only lightbox. Hidden until its id is the :target, so the thumbnails are
   plain in-page links and this needs no script at all. */
.m-lightbox {
  display: none; position: fixed; inset: 0; z-index: 50;
  background: rgba(6, 16, 30, .92); padding: 2rem 1rem;
  overflow: auto; align-items: center; justify-content: center;
}
.m-lightbox:target { display: flex; }
.m-lightbox figure { margin: 0; max-width: 68rem; }
.m-lightbox img { width: 100%; border-radius: 6px; }
.m-lightbox figcaption { color: #dce8f6; font-size: .88rem; padding-top: .7rem; }
.m-lightbox-close {
  position: fixed; top: 1rem; right: 1rem; color: #fff; background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 4px;
  padding: .4rem .8rem; text-decoration: none; font-size: .85rem; font-weight: 600;
}
.m-lightbox-close:hover { background: rgba(0, 0, 0, .8); color: #fff; }

/* ------------------------------------------------------------------- table */
.m-lineup-head { margin-top: 2.4rem; }
/* The table has three prose columns and cannot usefully reflow, so it scrolls
   inside its own box rather than forcing the page to scroll sideways. */
.m-tablewrap {
  overflow-x: auto; border: 1px solid var(--m-line); border-radius: 8px;
  background: var(--m-paper);
}
.m-table { border-collapse: collapse; width: 100%; min-width: 44rem; font-size: .9rem; }
.m-table th, .m-table td { padding: .7rem .95rem; text-align: left; vertical-align: top; }
.m-table thead th {
  background: var(--m-sunken); color: var(--m-steel);
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--m-line);
}
.m-table tbody tr { border-bottom: 1px solid var(--m-line); }
.m-table tbody tr:last-child { border-bottom: 0; }
.m-table tbody th { color: var(--m-navy); font-weight: 700; }
.m-table tbody td { color: var(--m-ink); font-weight: 400; }

/* ---------------------------------------------------------------- sponsors */
.m-tier { border-left: 4px solid var(--m-amber); }
.m-price { color: var(--m-amber); }
.m-past-head { margin-top: 2.4rem; }
.m-tier-group { margin-top: 1.4rem; }
.m-tier-group h4 {
  color: var(--m-steel); font-size: .76rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  display: flex; align-items: center; gap: .5rem;
}
.m-count { color: var(--m-mute); font-weight: 700; }
/* A logo wall of other people's artwork: sixteen marks whose aspect ratios run
   from 1:1 (a round badge) to 8.45:1 (a wordmark that is almost a line). Two
   things have to be true and neither is automatic.
 *
 * 1. NOTHING ESCAPES ITS TILE. `max-height: 100%` on a flex item does not
 *    reliably constrain a replaced element — the percentage needs a definite
 *    height to resolve against, and a centred flex item's cross size is
 *    content-derived, so the square marks were sizing to max-width instead and
 *    rendering half again taller than the box, overlapping the row beneath.
 *    Grid areas from an explicit aspect-ratio ARE definite, and overflow:hidden
 *    backs it up for whatever gets added next.
 *
 * 2. THEY LOOK LIKE ONE SET. `contain` alone makes a square logo fill the full
 *    height while a wide one shrinks to a sliver, so the wall reads as a dozen
 *    different sizes. Capping height well below the tile is what evens that
 *    out: the square marks stop towering, and the wide ones get the width they
 *    need to stay legible.
 */
.m-logos {
  list-style: none; margin: .6rem 0 0; padding: 0;
  /* Grid, not flex-wrap: equal columns keep the rows aligned instead of
     leaving a ragged last row of different-width tiles. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.75rem, 1fr));
  gap: .7rem;
}
.m-logos li {
  background: var(--m-paper); border: 1px solid var(--m-line); border-radius: 6px;
  /* A fixed height rather than an aspect-ratio: it stays the same at every
     breakpoint, so the cap below is a known fraction of it instead of drifting
     with the column width. */
  height: 5.25rem;
  display: grid; place-items: center;
  padding: .8rem .9rem;
  overflow: hidden;
}
.m-logos a { display: grid; place-items: center; width: 100%; height: 100%; }
.m-logos img {
  display: block;
  width: auto; height: auto;
  max-width: 100%;
  /* Absolute, not a percentage — see (1). Sized to just fill the tile's content
     box, NOT to shrink the square marks: a 1:1 logo at height h covers h² while
     a 5:1 one covers 5h², so squares need the full height to carry comparable
     weight. Capping them shorter is what made them look like afterthoughts. */
  max-height: 3.4rem;
  object-fit: contain;
}
/* Most sponsor marks are dark-on-transparent and vanish on a dark background. */
@media (prefers-color-scheme: dark) {
  .m-logos li { background: #f4f7fb; }
}

/* ----------------------------------------------------- other conferences */
.m-cons { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.m-cons li {
  display: grid; grid-template-columns: 4.4rem 1fr; gap: 1rem;
  background: var(--m-paper); border: 1px solid var(--m-line);
  border-radius: 8px; padding: 1.1rem;
}
.m-date { margin: 0; text-align: center; }
.m-date strong {
  display: block; font-size: 1.5rem; line-height: 1; color: var(--m-navy);
}
.m-date span {
  display: block; font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  color: var(--m-steel);
}
.m-cons h3 { margin-bottom: .1rem; font-size: 1.05rem; }
.m-place { margin: 0 0 .4rem; color: var(--m-mute); font-size: .84rem; }
.m-cons p { margin: 0 0 .4rem; font-size: .92rem; }
.m-more { font-size: .86rem; font-weight: 600; text-decoration: none; }
.m-more:hover { text-decoration: underline; }
.m-more::after { content: " \2192"; }

/* ----------------------------------------------------------------- contact */
.m-contact { text-align: center; }
.m-contact .m-sub { margin-inline: auto; }
.m-contact .m-actions { justify-content: center; }

/* ------------------------------------------------------------------ footer */
.m-footer {
  background: var(--m-navy); color: #cfdff1; padding: 2.4rem 0 1.4rem; margin-top: 0;
}
.m-foot-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem;
}
.m-footer h2 {
  color: #fff; font-size: .78rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; margin-bottom: .6rem;
}
.m-footer p { margin: 0; font-size: .89rem; }
.m-footer ul { list-style: none; margin: 0; padding: 0; }
.m-footer li { margin-bottom: .35rem; font-size: .89rem; }
.m-footer a { color: #9ec4ea; text-decoration: none; }
.m-footer a:hover { color: #fff; text-decoration: underline; }
.m-foot-legal {
  margin-top: 1.8rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .82rem; color: #9fb6d0;
}
@media (max-width: 44rem) { .m-foot-grid { grid-template-columns: 1fr; } }
@media (prefers-color-scheme: dark) {
  .m-footer { background: var(--m-sunken); border-top: 1px solid var(--m-line); color: var(--m-mute); }
  .m-footer h2 { color: var(--m-navy); }
  .m-footer a { color: var(--m-accent); }
  .m-footer a:hover { color: var(--m-accent-d); }
  .m-foot-legal { border-top-color: var(--m-line); color: var(--m-mute); }
}