/* ==========================================================================
   Intuitive IT Solutions — medical.intuitiveits.com root landing page
   landing.css  ·  VERSION 2  ·  25 Aug 2026

   Built to the REVISED draft brand direction, which supersedes the 2026
   style guide PDF. Key changes from v1:

     · Palette replaced. Royal blue #35308E is the primary. The retired
       values are #06038D (navy), #0356B7 (mid blue) and #6EE0E1 — note
       that #00A9E0 was NOT retired and survives here as --grad-mid.
     · Typography replaced. Trebuchet MS / Verdana system stack — no
       webfonts at all, so nothing to self-host and nothing to 404.
     · Diamond motif is now a structural element, not decoration.

   CSP NOTE: the site enforces style-src 'self'. All styling must live in
   this file. Do not add a <style> block or a style="" attribute to any
   page — it will be blocked and fail silently.
   ========================================================================== */

:root {

  /* --- Primary --------------------------------------------------------
     Royal blue carries every dark UI role: headings, nav, footer, and
     the dark fields. 10.69:1 on white.                                */
  --royal:        #35308E;

  /* --- Diamond gradient ramp (accent + graphic use only) ------------- */
  --grad-deep:    #00188E;   /* 13.80:1 on white — safe as text        */
  --grad-mid:     #00A9E0;   /*  2.71:1 — GRAPHIC ONLY                 */
  --grad-light:   #6EE0FF;   /*  1.53:1 on white — never text there,
                                 but 7.01:1 on royal, so it carries the
                                 eyebrow, footer note and tagline accent */

  /* --- Light blue accent ---------------------------------------------
     2.71:1 on white — graphic use only, never body text on a light
     background. Currently used in one place (the event-card hover
     border on the landing page); --grad-light won the footer accent
     when it was matched to the "prepared for" note. Kept because the
     revised brand direction names it, not because the build leans on
     it.                                                               */
  --accent:       #47A6DC;

  /* --- Legacy ---------------------------------------------------------
     #2A357B (dark indigo) is within 1.04:1 of royal blue — the two are
     indistinguishable on screen and cannot hold separate UI roles. It
     lives in the logo artwork and nowhere else. Do not introduce it as
     a token; it will read as a rendering fault next to royal.         */

  /* --- Neutrals ------------------------------------------------------- */
  --ink:          #22243A;
  --ink-soft:     #565a75;
  --rule:         #dfe3ef;
  --paper:        #ffffff;
  --paper-tint:   #f4f6fc;

  /* --- Type ------------------------------------------------------------
     Trebuchet MS headlines, Verdana bold subheads, Verdana body.
     All system faces — no @font-face anywhere in this build.
     Verdana runs wide with a tall x-height, so the base size is a
     little smaller than a Segoe/Roboto build would use and the
     letter-spacing on uppercase labels is lighter than usual.        */
  --font-head: "Trebuchet MS", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-sub:  Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif;
  --font-body: Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif;

  /* --- Layout --------------------------------------------------------- */
  --wrap-max:  1120px;
  --wrap-pad:  1.5rem;
  --radius:    10px;
  --shadow-sm: 0 1px 3px rgba(53, 48, 142, .08);
  --shadow-md: 0 10px 30px rgba(53, 48, 142, .16);

  /* The motif's colour ramp as a gradient, for fills that are drawn in
     CSS rather than loaded as SVG: card keylines, the footer band, and
     the small rotated squares used as section and list markers.       */
  --diamond-grad: linear-gradient(45deg,
                    var(--grad-deep) 0%,
                    var(--grad-mid) 55%,
                    var(--grad-light) 100%);
}

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

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

/* color-scheme declares which system schemes this page is DESIGNED for.
   It is not dark-mode support — the site does not read prefers-color-scheme
   at all. Every page is light by brand decision, not by user preference.

   Declaring "light" matters because Chrome on Android can algorithmically
   invert light pages ("auto dark theme"). This page's contrast pairings
   were all hand-checked; an automatic inversion would undo that work in a
   way you would never see on your own devices. The declaration also gives
   the scrollbars and any UA widgets the right rendering.

   Nothing overrides this now that the blue treatment has been dropped. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;
}

/* Column layout so the footer can be pushed to the bottom of the viewport
   on short pages (the landing page is one screen of content) while still
   sitting in normal flow on long ones. 100dvh rather than 100vh so mobile
   browsers measure it against the visible area, not the area behind the
   address bar. */
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: .95rem;          /* Verdana reads ~1 step larger than most */
  line-height: 1.72;
  color: var(--ink);
  background: var(--paper);
}

/* The growing element. Everything else in the column keeps its own height. */
main { flex: 1 0 auto; }
.site-header, .hero, .site-footer { flex: 0 0 auto; }

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

a { color: var(--royal); text-underline-offset: .18em; }
a:hover, a:focus { color: var(--grad-deep); }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--royal);
  line-height: 1.15;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(1.95rem, 4.2vw, 2.9rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); letter-spacing: -.01em; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1rem; }

/* Two-tone focus ring. --grad-mid alone is 2.71:1 on white, which fails
   WCAG 1.4.11's 3:1 minimum for non-text contrast, so royal blue
   (10.69:1) carries the visibility and the cyan hugs the element.
   Do not reduce this to a single cyan ring. */
:focus-visible {
  outline: 3px solid var(--royal);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--grad-mid);
  border-radius: 3px;
}
.hero :focus-visible, .site-footer :focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 2px var(--grad-light);
}

/* Uppercase label treatment — Verdana bold per the brand direction.
   Verdana is already wide, so tracking is lighter than a narrower face
   would need. */
.label {
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding-left: var(--wrap-pad);
  padding-right: var(--wrap-pad);
}

.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;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--royal); color: #fff;
  padding: .75rem 1.25rem; z-index: 100; text-decoration: none;
  font-family: var(--font-sub); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; font-size: .8rem;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   Header
   Clearspace: padding is at least x, the cap height of the "Intuitive IT"
   lettering — roughly 15px at a 44px lockup, so 22px here clears it.

   PROVENANCE: this rule came from the 2026 style guide PDF, which has
   since been withdrawn as out of date. The revised brand direction
   supplied so far covers colour, type and the diamond motif, and says
   nothing about logo clearspace. The rule is kept because it is sound
   and nothing has replaced it — but it is unconfirmed. Check it against
   the new guide when that lands.
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 50;
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding-top: 1.375rem; padding-bottom: 1.375rem;
}

.brand { display: flex; align-items: center; gap: 1.65rem; }

.brand-logo-link { display: block; text-decoration: none; border-radius: 4px; }
.brand-logo { height: 44px; width: auto; flex: 0 0 auto; }

.brand-tagline {
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .68rem;
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: none;
  padding-left: 1.65rem;
  border-left: 1px solid var(--rule);
}
.brand-tagline:hover, .brand-tagline:focus { color: var(--royal); }

/* No .site-nav on this page. It is one screen of content with a single
   card, so there is nothing to jump to — the header carries the logo and
   the descriptor only. The event page has its own nav rules in
   umgma-2026/css/site.css; do not copy them here without a nav to style.

   .header-inner keeps justify-content: space-between so a nav can be added
   back later without touching this rule. */

@media (max-width: 680px) {
  .header-inner { justify-content: center; }
  .brand { gap: 1rem; }
  .brand-logo { height: 36px; }
  .brand-tagline { padding-left: 1rem; }
}
@media (max-width: 420px) { .brand-tagline { display: none; } }

/* --------------------------------------------------------------------------
   Hero — royal blue field with the diamond cluster as a structural mark
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--royal) 0%, var(--grad-deep) 100%);
  color: #fff;
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding-top: clamp(3rem, 7vw, 4.75rem);
  padding-bottom: clamp(3rem, 7vw, 4.75rem);
}

/* 28ch (~722px) is the outer BOUND, not the line-break rule.

   text-wrap: balance is what actually decides where the break falls. It
   asks the browser to even out the line lengths using whatever font is
   really installed, instead of letting the text fill line one and orphan
   whatever is left onto line two.

   That distinction matters here because the break is font-dependent and
   this build ships no webfonts. Trebuchet MS is narrower than the
   fallbacks, so a machine WITH Trebuchet fits more on line one and strands
   the last word ("...Vendor Safeguard / Kit"); a machine without it breaks
   somewhere else entirely. No max-width value can be right for both.
   balance sidesteps the problem rather than tuning a number for one
   machine.

   Support: Chrome 114+, Safari 17.5+, Firefox 121+. Everywhere else it is
   ignored and you get today's plain wrapping — no fallback needed.

   The lede stays at 54ch (inside the 45-75 character band for readable
   prose) and takes text-wrap: pretty, which is the lighter-touch relative:
   it only avoids leaving a single word on the last line. */
.hero h1 {
  color: #fff;
  max-width: 28ch;
  text-wrap: balance;
}

.hero-eyebrow {
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .7rem;
  color: var(--grad-light);      /* 7.01:1 on royal, 9.05:1 on deep */
  margin: 0 0 .85rem;
}

.hero-lede {
  text-wrap: pretty;
  font-size: 1.02rem;
  color: rgba(255, 255, 255, .95);
  max-width: 54ch;
  margin: 0;
}


@media (max-width: 860px) {
  .hero h1 { max-width: none; }
}

/* --------------------------------------------------------------------------
   Corner motif — matches the printed handouts
   ...........................................................................
   The handouts bleed a dark cluster off the TOP-RIGHT of the page and a
   light one off the BOTTOM-LEFT, cropped by the page edge. Those belong to
   the page's frame, not its content, so on the site they live in the hero
   band and the footer — never in a body section.

   WHY NOT THE STICKY HEADER: the top-right corner of that bar is where the
   nav sits. A cluster behind RESOURCES / SOURCES / CONTACT drops their
   contrast and the bar is only ~70px tall, so all you would see is a
   sliver. The hero is the page's header band and takes it cleanly.

   Both are decorative, so they are background images on pseudo-elements
   with no markup and no alt text. The parents carry overflow:hidden, which
   crops them the way a page edge does and stops any horizontal scrollbar.
   -------------------------------------------------------------------------- */

/* Top-right, dark — hero band */
.hero::after {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  top: -168px; right: -150px;
  /* The lighter ramp, because this cluster sits on the royal hero field in
     every variant. The full-range file bottoms out at #00188E, which is
     DARKER than royal and reads as a hole punched in the field; the booth
     art never does that — its darkest measured value is around #3D9CD4,
     comfortably lighter than the background.

     scaleX(-1) mirrors the ramp so dark lands on the EAST edge. The
     backdrop puts dark toward the outer page edge and light toward the
     content, and this cluster is the top-RIGHT one. The footer cluster is
     bottom-left and uses the same file unmirrored. */
  background: url("../img/diamond-cluster-light.svg") no-repeat center / contain;
  transform: scaleX(-1);
  /* Full strength, matching the booth kit rather than the faint wash this
     used to be. That is only safe because the cluster sits entirely
     outside the text column — white copy over the motif's lightest stop
     would be 3.69:1. The @media rules below keep it clear at every width;
     re-check overlap before moving or enlarging it. */
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

/* Bottom-left, light — footer. The footer field is royal, so the light
   ramp reads against it without needing extra opacity.

   MEASURED DEFECT, fixed 26 Aug 2026 — same fault and same fix as the event
   page's site.css; see the long note there. At 340px/left:-140 the visible
   art reached into the left-aligned footer copy, and the copyright line
   measured **1.74:1** against the motif's light stop. This footer is shorter
   than the event page's, so the cluster rode even higher over the text.

   The cluster now sits in a clear band opened up by .footer-inner's
   padding-bottom. Visible art top sits (height - |bottom|) above the footer's
   bottom edge and that padding must exceed it — change one, re-check the
   other with a glyph-level contrast measurement, not element boxes. */
.site-footer::after {
  content: "";
  position: absolute;
  width: 340px; height: 340px;
  left: -118px; bottom: -230px;   /* art top ≈ 110px above the footer bottom */
  /* Bottom-left corner: dark on the WEST edge, so the file is used as
     drawn, no mirror. */
  background: url("../img/diamond-cluster-light.svg") no-repeat center / contain;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

.site-footer > .wrap { position: relative; z-index: 1; }

/* Narrow viewports: the text column widens to nearly the full page, so
   there is no clear space to the right of the headline any more. Rather
   than fade the cluster back to a wash, it moves ABOVE the copy — the
   hero's top padding opens up and the diamond is cropped into that band,
   which is what the retractable banner does in the same situation.
   Verified clear of every hero glyph down to 360px. */
@media (max-width: 860px) {
  .hero-inner { padding-top: 7.5rem; }
  .hero::after { width: 190px; height: 190px; top: -95px; right: -70px; }
  /* Same band logic as the desktop rule above. */
  .site-footer::after { width: 250px; height: 250px; left: -90px; bottom: -165px; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
  padding-top: clamp(2.75rem, 6vw, 4rem);
  padding-bottom: clamp(2.75rem, 6vw, 4rem);
}

/* The tinted band that used to separate this section is gone by request.
   Section rhythm is carried by the heading markers and spacing instead.
   Kept as an empty hook so the class on the markup still resolves. */
.section-alt { background: transparent; }

/* Section heading gets a small diamond rather than a plain rule */
.section-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .5rem; }

.section-head h2 { margin: 0; }

.diamond-bullet {
  width: 15px; height: 15px;
  flex: 0 0 15px;
  border-radius: 3px;
  transform: rotate(45deg);
  background: var(--diamond-grad);
}

.section-intro {
  max-width: 64ch;
  color: var(--ink-soft);
  margin: 0 0 2.25rem;
}

/* --------------------------------------------------------------------------
   Resource cards
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.35rem;
}

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Gradient keyline across the top — the motif's ramp, not a flat rule */
.card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--diamond-grad);
}

.card-type {
  align-self: flex-start;
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .62rem;
  color: #fff;
  background: var(--royal);          /* white on royal = 10.69:1 */
  border-radius: 4px;
  padding: .28rem .6rem;
  margin-bottom: .7rem;
}

.card h3.card-title { margin: 0 0 .45rem; line-height: 1.28; }

.card-desc { color: var(--ink-soft); margin: 0; }

.card-actions {
  margin-top: auto;
  padding-top: 1.25rem;
  display: flex; flex-wrap: wrap; gap: .65rem;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.button {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .72rem;
  text-decoration: none;
  padding: .72rem 1.25rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.button-primary { background: var(--royal); color: #fff; }
.button-primary:hover, .button-primary:focus {
  background: var(--grad-deep); color: #fff;
}

.button-secondary {
  background: transparent; color: var(--royal); border-color: var(--royal);
}
.button-secondary:hover, .button-secondary:focus {
  background: var(--royal); color: #fff;
}

/* --------------------------------------------------------------------------
   Notes
   -------------------------------------------------------------------------- */

.note {
  position: relative;
  margin: 2.25rem 0 0;
  padding: 1.15rem 1.35rem 1.15rem 2.9rem;
  background: var(--paper-tint);
  border-radius: var(--radius);
  max-width: 80ch;
}

/* Diamond in place of a left border */
.note::before {
  content: "";
  position: absolute;
  left: 1.15rem; top: 1.45rem;
  width: 13px; height: 13px;
  border-radius: 3px;
  transform: rotate(45deg);
  background: var(--diamond-grad);
}

.note strong { color: var(--royal); }
.note-inline { background: #fff; border: 1px solid var(--rule); margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   Source library disclosure — native <details>, no JavaScript
   (CSP is script-src 'none'; a JS accordion would never open)
   -------------------------------------------------------------------------- */

.disclosure {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.disclosure > summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 1.4rem;
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .74rem;
  color: var(--royal);
  display: flex; align-items: center; gap: .85rem;
  border-radius: var(--radius);
}
.disclosure > summary::-webkit-details-marker { display: none; }

/* Diamond marker that rotates on open */
.disclosure > summary::before {
  content: "";
  width: 13px; height: 13px; flex: 0 0 13px;
  border-radius: 3px;
  background: var(--diamond-grad);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.disclosure[open] > summary::before { transform: rotate(135deg) scale(.85); }
.disclosure > summary:hover { background: var(--paper-tint); }

.disclosure-body { padding: .25rem 1.4rem 1.5rem; border-top: 1px solid var(--rule); }

.disclosure-body h3 {
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .74rem;
  color: var(--royal);
  margin: 1.6rem 0 .65rem;
}

.source-list { margin: 0; padding-left: 1.15rem; }
.source-list li { margin-bottom: .45rem; }

/* --------------------------------------------------------------------------
   Contact — information, not lead capture. Phone and web only.
   -------------------------------------------------------------------------- */

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }

.contact-list li { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }

.contact-label {
  min-width: 5.5rem;
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .66rem;
  color: var(--royal);
}

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

.site-footer {
  position: relative;
  background: var(--royal);
  color: rgba(255, 255, 255, .88);
  font-size: .82rem;
  overflow: hidden;
}

/* Gradient band instead of a flat top border */
.site-footer::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--diamond-grad);
}

/* No logo down here. The header lockup is sticky, so it is on screen for
   the entire visit — repeating it in the footer added nothing and pushed
   the tagline off to one side. */
/* padding-bottom is the clear band the corner diamond sits in — see the
   .site-footer::after note. Not decorative spacing; shrinking it puts the
   motif back under the copyright line at 1.74:1. */
.footer-inner {
  padding-top: 2.4rem; padding-bottom: 8rem;
}
@media (max-width: 860px) { .footer-inner { padding-bottom: 6.25rem; } }
.footer-inner p { margin: 0; }

.footer-meta { text-align: left; }

.footer-tagline {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.2rem;          /* styling only — see .tagline-accent */
  color: #fff;
  margin-bottom: .3rem !important;
}

/* "Connected Care." matches the "PREPARED FOR..." note below it, so the
   footer carries one accent rather than two similar blues.

   This is --grad-light (#6EE0FF), not the handout's #47A6DC. The document
   sets that line on white; here it sits on the royal field, where #47A6DC
   is only 3.95:1 and would need large-text sizing to pass AA. #6EE0FF is
   7.01:1 and passes at any size, so the tagline size above is now a free
   design choice rather than an accessibility constraint. */
.tagline-accent { color: var(--grad-light); }

.footer-note {
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .62rem;
  color: var(--grad-light);
  margin-top: .3rem !important;
}

.footer-disclaimer { padding-bottom: 1.9rem; }
.footer-disclaimer p {
  margin: 0;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, .2);
  font-size: .74rem;
  color: rgba(255, 255, 255, .72);
  max-width: 92ch;
}

@media (max-width: 680px) {
  .footer-meta { text-align: center; }
}

/* --------------------------------------------------------------------------
   Print / motion
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .site-nav, .skip-link, .hero::after { display: none; }
  .hero { background: none; color: #000; }
  .hero h1, .hero-lede, .hero-eyebrow { color: #000; }
  .site-footer { background: none; color: #000; }
  .site-footer::before { display: none; }
  body { font-size: 10.5pt; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .disclosure > summary::before { transition: none; }
}


/* ==========================================================================
   Landing-page-only additions
   ========================================================================== */

/* Event cards link somewhere, so they are anchors and need hover/lift */
.event-grid {
  display: grid;
  /* auto-FILL with a max track so a single event card does not stretch
     the full 1120px. Reads as a card, not a banner.

     min(320px, 100%) rather than a bare 320px. A bare minimum in minmax()
     is a HARD floor: the track refuses to shrink below it and simply
     overflows its container. At a 320px viewport the wrap's content box is
     272px, so the card ran to 344px and the whole page scrolled sideways —
     measured 26 Aug 2026. min(…, 100%) lets the track collapse to the
     container on anything narrower than the ideal. */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 460px));
  justify-content: start;
  gap: 1.35rem;
}

.event-card {
  position: relative;
  display: block;
  padding: 1.75rem 1.75rem 1.6rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.event-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--diamond-grad);
}

.event-card:hover, .event-card:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.event-card h3 {
  font-family: var(--font-head);
  font-size: 1.4rem;
  margin: .25rem 0 .1rem;
}

.event-meta {
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .64rem;
  color: var(--ink-soft);
  margin: 0 0 .7rem;
}

.event-card p { color: var(--ink-soft); margin: 0; }

.event-cta {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: 1.1rem;
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .68rem;
  color: var(--royal);
}

.event-cta .diamond-bullet { width: 10px; height: 10px; flex: 0 0 10px; }

@media (prefers-reduced-motion: reduce) {
  .event-card { transition: none; }
  .event-card:hover { transform: none; }
}

/* Contact links carry no underline, by request. Safe here because each one
   sits immediately beside its PHONE / WEB label, so the link is not
   identified by colour alone — which is what WCAG 1.4.1 actually cares
   about. The underline returns on hover and focus, and if those labels are
   ever dropped it has to come back permanently. */
.contact-list a { text-decoration: none; }
.contact-list a:hover, .contact-list a:focus { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Anchor landing offset
   ...........................................................................
   The header is position:sticky, so a plain #fragment jump puts the target
   heading UNDERNEATH it — measured at 44px from the top of the viewport
   against a 136px header, i.e. completely hidden. The jump links would
   have been broken in exactly the case they were added for.

   scroll-margin-top holds the target clear. The value tracks the header,
   which changes height as the logo, descriptor and nav re-wrap:

       >= 701px   89px      one row
       681-700px  144px     nav wrapped, mobile rules not yet applied
       <= 680px   136px     mobile header
       <= 360px   155px     descriptor wraps too

   Erring high is safe (the heading sits a little lower than necessary);
   erring low re-hides it. Re-measure if the header's padding or the
   lockup height changes.
   -------------------------------------------------------------------------- */

:root { --header-h: 89px; }
@media (max-width: 700px) { :root { --header-h: 144px; } }
@media (max-width: 360px) { :root { --header-h: 155px; } }

.section, .hero, main { scroll-margin-top: calc(var(--header-h) + 1rem); }