/* =============================================================================
   isleofaccord.css — THE HAVEN LANDING, IN ACCORD'S OWN COLOURS.
   webcore site theme, 2026-08-30.

   THE RULING. The owner looked at the house look on his new site and said:
   "too similar to other servers. make it 1:1 like jurassic haven instead but
   isle of accord theme." So this sheet is a PORT, not a design: the composition
   below is jurassichaven.com's, read off its own landing stylesheet, its shared
   topbar.css and its space-bg.js, and re-expressed on webcore's shared markup
   in this owner's tokens. Where the two DOMs differ the house element is
   re-laid to the Haven's shape; nothing is invented.

   WHAT THE HAVEN IS, MEASURED:
     topbar   fixed glass bar, blurred, one hairline under it. A 38px rounded
              TILE mark with a soft glow, the name in the condensed display face
              tracked .18em, a mono sub-line under it. The nav is a PILL: a
              glass box, radius 12, links at 11px/.09em uppercase, the current
              page ringed in the accent with a soft glow. One filled accent
              button on the right ("Sign in with Steam"), mono 800 .16em.
     hero     84vh, centred. A status CHIP (pill, live dot with a ping ring), a
              small-caps serif WORDMARK in a bright-to-deep accent ramp inside a
              blurred glow, a tracked condensed TAG line under it, two buttons
              (filled + outlined), and a "SCROLL" cue with a breathing line.
     stats    a full-bleed band, hairline top and bottom, four cells with big
              condensed values over tiny tracked mono labels.
     cards    "Server tools": a 3-column grid of numbered cards (01, 02 ...) -
              icon well, condensed uppercase title, dim prose, an "Open ->"
              line - with a top accent bar and a lift on hover.
     steps    three numbered step cards whose numerals "charge" up.
     footer   one hairline, brand + link row, a centred mono credit line.

   THE TOKEN CONTRACT. Not one colour literal and not one font name: every
   colour is an owner token or a color-mix of one, every face is a `--font-*`
   role token. The Haven's crimson is Accord's violet by construction, and the
   Haven's serif wordmark arrives through `--font-brand`, the optional wordmark
   role theme.py publishes for exactly this port (falling back to the display
   face on any owner who never named one).

   THE PAGE IS FINISHED WITHOUT THE SCRIPT (the everfall.css law, kept). Every
   displaced entrance state is scoped to `[data-ioa-in]`, an attribute only
   js/isleofaccord.js writes once it is already running. A blocked script, a
   404 or an old engine leaves the complete page, standing still.

   Scoped in full to [data-site-theme="isleofaccord"]: shipped to nobody who
   did not type it, linked on nobody's page who did not type it, and inert
   even if it were.
   ============================================================================= */


/* =============================================================================
   1. TOKENS — the Haven's alpha ladder, built from this owner's ink
   ============================================================================= */

:root[data-site-theme="isleofaccord"] {
  /* THE INK LADDER. The Haven writes every secondary text as its bone ink at
     a fixed alpha; the same seven stops, off this owner's own --fg. */
  --ioa-ink-80: color-mix(in srgb, var(--fg) 80%, transparent);
  --ioa-ink-72: color-mix(in srgb, var(--fg) 72%, transparent);
  --ioa-ink-62: color-mix(in srgb, var(--fg) 62%, transparent);
  --ioa-ink-46: color-mix(in srgb, var(--fg) 46%, transparent);
  --ioa-ink-34: color-mix(in srgb, var(--fg) 34%, transparent);
  --ioa-ink-28: color-mix(in srgb, var(--fg) 28%, transparent);
  --ioa-ink-14: color-mix(in srgb, var(--fg) 14%, transparent);
  --ioa-ink-08: color-mix(in srgb, var(--fg) 8%, transparent);
  --ioa-ink-07: color-mix(in srgb, var(--fg) 6%, transparent);

  /* THE ACCENT AT EVERY STRENGTH THE HAVEN USES IT. */
  --ioa-glow:      color-mix(in srgb, var(--accent) 55%, transparent);
  --ioa-line:      color-mix(in srgb, var(--accent) 18%, transparent);
  --ioa-tint-04:   color-mix(in srgb, var(--accent) 4%, transparent);
  --ioa-tint-10:   color-mix(in srgb, var(--accent) 10%, transparent);
  --ioa-tint-12:   color-mix(in srgb, var(--accent) 12%, transparent);
  --ioa-tint-22:   color-mix(in srgb, var(--accent) 22%, transparent);
  --ioa-tint-30:   color-mix(in srgb, var(--accent) 30%, transparent);
  --ioa-tint-40:   color-mix(in srgb, var(--accent) 40%, transparent);
  --ioa-tint-50:   color-mix(in srgb, var(--accent) 50%, transparent);

  /* GLASS. The Haven's surfaces are white at 6% over the ground, bordered in
     ink at 18%; lit borders are the accent at 50%. */
  --ioa-glass:        color-mix(in srgb, var(--fg) 6%, transparent);
  --ioa-glass-2:      color-mix(in srgb, var(--fg) 2%, transparent);
  --ioa-glass-border: color-mix(in srgb, var(--fg) 18%, transparent);
  --ioa-glass-lit:    color-mix(in srgb, var(--accent) 50%, transparent);

  /* THE CARD FACE: a vertical gradient from a lifted warm-dark to a sunk one.
     The Haven's stops are rgba(28,20,18,.6) -> rgba(10,7,8,.5); here the same
     lift and sink off this owner's two blacks. */
  --ioa-face-hi:   color-mix(in srgb, var(--fg) 7%, var(--bg));
  --ioa-face-lo:   color-mix(in srgb, var(--bg-deep) 50%, var(--bg));
  --ioa-scrim-92:  color-mix(in srgb, var(--bg-deep) 92%, transparent);
  --ioa-scrim-82:  color-mix(in srgb, var(--bg-deep) 82%, transparent);
  --ioa-scrim-62:  color-mix(in srgb, var(--bg-deep) 62%, transparent);
  --ioa-scrim-50:  color-mix(in srgb, var(--bg-deep) 50%, transparent);
  --ioa-drop:      0 30px 60px -30px color-mix(in srgb, var(--bg-deep) 90%, transparent);

  /* THE WORDMARK RAMP. The Haven's "blood ramp" is four stops from a pale
     hot accent down to the base accent; the same four, mixed from this
     owner's accent-hi and accent. */
  --ioa-ramp: linear-gradient(180deg,
      color-mix(in srgb, var(--accent-hi) 78%, var(--fg)) 0%,
      var(--accent-hi) 28%,
      color-mix(in srgb, var(--accent-hi) 45%, var(--accent)) 62%,
      var(--accent) 100%);

  /* MOTION. The Haven's one easing curve and its reveal distance. */
  --ioa-ease: cubic-bezier(.22, .61, .36, 1);
  --ioa-maxw: 1240px;
  --ioa-rise: 34px;

  /* GEOMETRY. The Haven is rounded: 8 on controls, 9-10 on wells, 12 on the
     nav pill, 14 on cards, 16 on panels, pills everywhere else. */
  --r: 8px;
  --r-s: 8px;
  --r-xs: 6px;
  --r-lg: 14px;
  --r-pill: 999px;
}


/* =============================================================================
   2. THE GROUND — the atmosphere is theme.atmosphere `ember`; get out of its way
   ============================================================================= */

[data-site-theme="isleofaccord"] body::after { display: none; }
[data-site-theme="isleofaccord"] main::before { display: none; }
[data-site-theme="isleofaccord"] main {
  position: relative;
  display: flex;
  flex-direction: column;
}
/* THE HAVEN'S ORDER is hero, band, tools, then how-to-join; the house fragment
   writes join before the tools. Painted order only - the markup, the tab order
   and the reading order for assistive tech are untouched. */
[data-site-theme="isleofaccord"] main > .section.wrap:has(.grid) { order: 1; }
[data-site-theme="isleofaccord"] main > #join { order: 2; }
[data-site-theme="isleofaccord"] main > .section.wrap:has(.grid) ~ * { order: 3; }
[data-site-theme="isleofaccord"] main > #join ~ .section.wrap:has(.grid) { order: 1; }

/* The Haven finishes its backdrop with a VIGNETTE - the edges of every page
   darkened toward the corners - and space-bg.js paints that as its top layer.
   The house ground layer (.night) carries the ember field; the vignette is
   drawn over it here on a pseudo-element of the same fixed ground so the
   field, the fog and the vignette are one stacked scene. */
[data-site-theme="isleofaccord"] .night { position: fixed; }
[data-site-theme="isleofaccord"] .night::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(130% 100% at 50% 28%,
    transparent 55%,
    color-mix(in srgb, var(--bg-deep) 50%, transparent) 86%,
    color-mix(in srgb, var(--bg-deep) 90%, transparent));
}


/* =============================================================================
   3. TYPE — condensed caps for every heading, the serif for the name only
   ============================================================================= */

[data-site-theme="isleofaccord"] body {
  font-family: var(--font-ui);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

[data-site-theme="isleofaccord"] h1,
[data-site-theme="isleofaccord"] h2,
[data-site-theme="isleofaccord"] h3,
[data-site-theme="isleofaccord"] .page-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  text-shadow: none;
}

[data-site-theme="isleofaccord"] p,
[data-site-theme="isleofaccord"] li {
  font-family: var(--font-ui);
}

[data-site-theme="isleofaccord"] ::selection {
  background: var(--accent);
  color: var(--on-primary);
}

/* THE KICK. The Haven's small tracked mono line with a 26px accent dash
   before it - the house eyebrow is the same element, re-set to those numbers. */
[data-site-theme="isleofaccord"] .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--accent-hi);
}
[data-site-theme="isleofaccord"] .eyebrow::before {
  content: "";
  display: block;
  flex: none;
  width: 26px;
  height: 1px;
  margin: 0;
  background: linear-gradient(90deg, var(--accent), transparent);
  box-shadow: none;
  border: 0;
  border-radius: 0;
  transform: none;
  rotate: none;
}


/* =============================================================================
   4. WHAT THE HOUSE LOOK LEAVES BEHIND (the marks the Haven does not draw)
   ============================================================================= */

[data-site-theme="isleofaccord"] .nav .nav-links a::before,
[data-site-theme="isleofaccord"] .nav .nav-links.grouped a::before,
[data-site-theme="isleofaccord"] .nav-links a::before,
[data-site-theme="isleofaccord"] .nav-links.grouped a::before,
[data-site-theme="isleofaccord"] .nav .nav-links a[aria-current="page"]::before,
[data-site-theme="isleofaccord"] .nav .nav-links.grouped a[aria-current="page"]::before,
[data-site-theme="isleofaccord"] .nav .nav-in:has(.nav-lang:not([hidden]):not(:empty)) .nav-links.grouped a[aria-current="page"]::before,
[data-site-theme="isleofaccord"] .nav .nav-links a::after,
[data-site-theme="isleofaccord"] .nav .nav-links.grouped a::after,
[data-site-theme="isleofaccord"] .nav-links a::after,
[data-site-theme="isleofaccord"] .nav-links.grouped a::after,
[data-site-theme="isleofaccord"] .nav-links a[aria-current="page"]::after,
[data-site-theme="isleofaccord"] .nav-links.grouped a[aria-current="page"]::after,
[data-site-theme="isleofaccord"] .sec-head::before,
[data-site-theme="isleofaccord"] .sec-head::after,
[data-site-theme="isleofaccord"] .page-head::before,
[data-site-theme="isleofaccord"] .page-head::after,
[data-site-theme="isleofaccord"] :is(.page-head, .sec-head:has(> .page-h1))::before,
[data-site-theme="isleofaccord"] :is(.page-head, .sec-head:has(> .page-h1))::after,
[data-site-theme="isleofaccord"] .foot::before,
[data-site-theme="isleofaccord"] .foot::after,
[data-site-theme="isleofaccord"] .nav::before,
[data-site-theme="isleofaccord"] .nav::after,
[data-site-theme="isleofaccord"] .hero h1::after,
[data-site-theme="isleofaccord"] .hero-copy > p::after,
[data-site-theme="isleofaccord"] .hero .lede::after,
[data-site-theme="isleofaccord"] .fig span::after,
[data-site-theme="isleofaccord"] .kv span::after,
[data-site-theme="isleofaccord"] .fig::after,
[data-site-theme="isleofaccord"] .kv::after,
[data-site-theme="isleofaccord"] .status::before,
[data-site-theme="isleofaccord"] .steps li:not(:last-child)::after {
  content: none;
  display: none;
  background: none;
  border: 0;
  box-shadow: none;
}

[data-site-theme="isleofaccord"] .brand-cursor { display: none; }
[data-site-theme="isleofaccord"] .hero h1,
[data-site-theme="isleofaccord"] .page-h1 { animation: none; }
[data-site-theme="isleofaccord"] .hero-cta { border-top: 0; padding-top: 0; }


/* =============================================================================
   5. THE TOPBAR — the Haven's topbar.css, on the house nav
   ============================================================================= */

[data-site-theme="isleofaccord"] .nav {
  background-image: linear-gradient(180deg,
    var(--ioa-scrim-92) 0%, var(--ioa-scrim-62) 80%, transparent 100%);
  background-color: transparent;
  border-bottom: 1px solid var(--ioa-line);
  box-shadow: none;
  backdrop-filter: blur(14px) saturate(110%);
  -webkit-backdrop-filter: blur(14px) saturate(110%);
  transition: background-color .4s var(--ioa-ease);
}

/* js/isleofaccord.js adds `.scrolled` past 30px, the Haven's own rule: the
   gradient bar becomes a solid glass bar once the page has moved. */
[data-site-theme="isleofaccord"] .nav.scrolled {
  background-image: none;
  background-color: var(--ioa-scrim-82);
}

[data-site-theme="isleofaccord"] .nav-in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding-block: 9px;
}

/* THE TILE MARK: 38px, radius 8, a hairline in the accent, a soft glow, and
   the Haven's 8-degree tilt on hover. */
[data-site-theme="isleofaccord"] .brand {
  margin-right: 0;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
[data-site-theme="isleofaccord"] .brand img {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--ioa-tint-30);
  box-shadow: 0 0 22px var(--ioa-tint-12), inset 0 0 0 1px var(--ioa-ink-07);
  transition: transform .5s var(--ioa-ease);
}
[data-site-theme="isleofaccord"] .brand:hover img { transform: rotate(8deg); }
[data-site-theme="isleofaccord"] .brand-txt { line-height: 1.1; min-width: 0; }
[data-site-theme="isleofaccord"] .brand-txt b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
}
[data-site-theme="isleofaccord"] .brand-txt > span {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ioa-ink-62);
  white-space: nowrap;
}

/* THE PILL NAV. */
[data-site-theme="isleofaccord"] .nav-links {
  justify-self: center;
  gap: 2px;
  padding: 5px;
  background: var(--ioa-glass);
  border: 1px solid var(--ioa-glass-border);
  border-radius: 12px;
}
[data-site-theme="isleofaccord"] .nav-links a {
  position: relative;
  padding: 7px 11px;
  border-radius: 8px;
  background: none;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ioa-ink-62);
  white-space: nowrap;
  box-shadow: none;
  transition: color .2s var(--ioa-ease), background .2s var(--ioa-ease);
}
[data-site-theme="isleofaccord"] .nav-links a:hover,
[data-site-theme="isleofaccord"] .nav-links a:focus-visible {
  color: var(--fg);
  background: var(--ioa-tint-10);
}
[data-site-theme="isleofaccord"] .nav-links a[aria-current="page"],
[data-site-theme="isleofaccord"] .nav-links.grouped a[aria-current="page"] {
  color: var(--fg);
  background: var(--ioa-tint-10);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 16px -4px var(--ioa-glow);
}

[data-site-theme="isleofaccord"] .nav-util {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* THE ONE FILLED CONTROL: "Sign in with Steam", exactly the Haven's
   .signin-btn - filled accent, mono 800, tracked, radius 8, a lifted shadow. */
[data-site-theme="isleofaccord"] .nav-auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--primary);
  border: 1px solid var(--primary);
  color: var(--on-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 18px -8px var(--ioa-glow), inset 0 1px 0 var(--ioa-ink-08);
  transition: transform .18s var(--ioa-ease), background .18s var(--ioa-ease),
              box-shadow .18s var(--ioa-ease);
}
[data-site-theme="isleofaccord"] .nav-auth-btn:hover {
  background: var(--accent-hi);
  border-color: var(--accent-hi);
  color: var(--on-primary);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px var(--ioa-glow), inset 0 1px 0 var(--ioa-ink-08);
}


/* =============================================================================
   6. THE HERO — the Haven's centred first screen
   ============================================================================= */

[data-site-theme="isleofaccord"] .hero.wrap {
  position: relative;
  min-height: calc(84vh - 70px);
  min-height: calc(84svh - 70px);
  display: grid;
  align-items: center;
  padding-block: calc(62px + 28px) 52px;
}
[data-site-theme="isleofaccord"] .hero-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  justify-items: center;
}
[data-site-theme="isleofaccord"] .hero-copy,
[data-site-theme="isleofaccord"] .hero-grid > :not(.hero-art) {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: none;
}

/* THE STATUS CHIP. The house kicker is the chip: a pill in the ground at 50%,
   an ink-14 hairline, mono 11px tracked .16em, and a live dot with the Haven's
   ping ring - drawn as the two pseudo-elements of the same element. */
[data-site-theme="isleofaccord"] .hero .kicker {
  order: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  padding: 7px 13px 7px 30px;
  border-radius: var(--r-pill);
  border: 1px solid var(--ioa-ink-14);
  background: var(--ioa-scrim-50);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ioa-ink-72);
  max-width: 92vw;
  line-height: 1.4;
}
[data-site-theme="isleofaccord"] .hero .kicker::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 12px var(--ok);
}
[data-site-theme="isleofaccord"] .hero .kicker::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  border: 1px solid var(--ok);
  opacity: .6;
  animation: ioa-ping 2s var(--ioa-ease) infinite;
}
@keyframes ioa-ping {
  0%   { transform: scale(.7); opacity: .7; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* THE WORDMARK. The Haven's name: the brand serif at 900, mixed case (its
   lowercase ARE small caps), the four-stop ramp clipped to the glyphs, and a
   blurred glow behind it. The Haven draws the glow as a second blurred copy
   of the word; a drop-shadow filter on the clipped text is the same halo
   from one element and one paint. */
[data-site-theme="isleofaccord"] .hero h1 {
  order: 1;
  margin: 0;
  font-family: var(--font-brand, var(--font-display));
  font-weight: 900;
  font-size: clamp(34px, 6.2vw, 84px);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--accent-hi);
  filter: drop-shadow(0 0 30px var(--ioa-tint-40));
  text-wrap: balance;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  [data-site-theme="isleofaccord"] .hero h1 {
    background: var(--ioa-ramp);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* THE TAG. Condensed, tracked .32em, in the ink at 72%. */
[data-site-theme="isleofaccord"] .hero-copy > p,
[data-site-theme="isleofaccord"] .hero .lede {
  order: 2;
  margin: 16px 0 0;
  max-width: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(13px, 1.5vw, 17px);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ioa-ink-72);
  text-shadow: none;
}

[data-site-theme="isleofaccord"] .hero-cta {
  order: 3;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

/* THE SCROLL CUE: "Scroll" in tiny tracked mono and a 38px line that fills
   from the top and empties from the bottom, forever. Lifted clear of the live
   bar when the page carries one. */
[data-site-theme="isleofaccord"] .hero.wrap::before {
  content: "Scroll";
  position: absolute;
  left: 50%;
  bottom: 78px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ioa-ink-28);
  pointer-events: none;
}
[data-site-theme="isleofaccord"] .hero.wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 1px;
  height: 38px;
  background: linear-gradient(180deg, var(--accent), transparent);
  animation: ioa-scrolll 2s var(--ioa-ease) infinite;
  pointer-events: none;
}
[data-site-theme="isleofaccord"] body.has-livebar .hero.wrap::before {
  bottom: calc(var(--livebar-h, 42px) + 78px);
}
[data-site-theme="isleofaccord"] body.has-livebar .hero.wrap::after {
  bottom: calc(var(--livebar-h, 42px) + 30px);
}
@keyframes ioa-scrolll {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}


/* =============================================================================
   7. BUTTONS — the Haven's .btn: mono, tracked, radius 9, filled or outlined
   ============================================================================= */

[data-site-theme="isleofaccord"] .btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .25s var(--ioa-ease), box-shadow .25s var(--ioa-ease),
              background-color .25s var(--ioa-ease), border-color .25s var(--ioa-ease),
              color .25s var(--ioa-ease);
}
[data-site-theme="isleofaccord"] .btn-primary {
  background-image: none;
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 8px 30px -10px var(--ioa-glow);
}
[data-site-theme="isleofaccord"] .btn-primary:hover {
  background-color: var(--accent-hi);
  border-color: var(--accent-hi);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px var(--ioa-glow);
}
[data-site-theme="isleofaccord"] .btn-ghost,
[data-site-theme="isleofaccord"] .btn:not(.btn-primary) {
  background-image: none;
  background-color: var(--ioa-glass-2);
  border-color: var(--ioa-ink-14);
  color: var(--ioa-ink-72);
}
[data-site-theme="isleofaccord"] .btn-ghost:hover,
[data-site-theme="isleofaccord"] .btn:not(.btn-primary):hover {
  border-color: var(--accent);
  color: var(--fg);
  background-color: var(--ioa-glass-2);
}
[data-site-theme="isleofaccord"] .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}


/* =============================================================================
   8. THE STAT BAND — the Haven's four cells, full-bleed, hairlined
   The house status CARD becomes the band: its own heading is dropped (the
   Haven's band has none), the state row is the first cell, and the figures
   fill the rest. `display: contents` on the figure row lets the cells sit in
   one grid without touching the markup status.js writes into.
   ============================================================================= */

[data-site-theme="isleofaccord"] main > .section.wrap:has(#status-card) {
  padding-block: 0;
}
[data-site-theme="isleofaccord"] main > .section.wrap:has(#status-card) > .sec-head {
  display: none;
}

[data-site-theme="isleofaccord"] .status {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-inline: calc(50% - 50vw);
  padding: 0 clamp(20px, 4vw, 40px);
  border-top: 1px solid var(--ioa-ink-07);
  border-bottom: 1px solid var(--ioa-ink-07);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  background-color: var(--ioa-scrim-50);
  background-image: none;
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
[data-site-theme="isleofaccord"] .status-figs { display: contents; }

[data-site-theme="isleofaccord"] .status-top,
[data-site-theme="isleofaccord"] .fig {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  padding: 22px 16px;
  margin: 0;
  text-align: center;
  border: 0;
  border-left: 1px solid var(--ioa-ink-07);
}
[data-site-theme="isleofaccord"] .status-top { border-left: 0; }

[data-site-theme="isleofaccord"] .status-top .dot {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
[data-site-theme="isleofaccord"] .status-label,
[data-site-theme="isleofaccord"] .fig b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--fg);
  text-shadow: none;
}
[data-site-theme="isleofaccord"] .fig b[data-st="players"] { color: var(--accent-hi); }
[data-site-theme="isleofaccord"] .status-src,
[data-site-theme="isleofaccord"] .fig span {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ioa-ink-46);
}
[data-site-theme="isleofaccord"] .status-note { display: none; }


/* =============================================================================
   9. SECTIONS — the Haven's rhythm and section head
   ============================================================================= */

[data-site-theme="isleofaccord"] .section.wrap {
  position: relative;
  z-index: 10;
  max-width: var(--ioa-maxw);
  padding-block: clamp(48px, 7vw, 88px) 0;
}
[data-site-theme="isleofaccord"] main > .section:last-of-type {
  padding-bottom: clamp(48px, 7vw, 88px);
}
[data-site-theme="isleofaccord"] .sec-head {
  max-width: 660px;
  margin-top: 0;
  margin-bottom: 32px;
  text-align: left;
}
[data-site-theme="isleofaccord"] .sec-head h2 {
  margin: 12px 0 0;
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: .04em;
  line-height: 1.04;
  color: var(--fg);
}
[data-site-theme="isleofaccord"] .sec-head p {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 300;
  color: var(--ioa-ink-46);
}


/* =============================================================================
   10. THE CARDS — "Server tools": numbered, iconed, lifted on hover
   ============================================================================= */

[data-site-theme="isleofaccord"] .grid,
[data-site-theme="isleofaccord"] .grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  counter-reset: ioa-card;
}

[data-site-theme="isleofaccord"] .feat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 20px;
  border-radius: 14px;
  border: 1px solid var(--ioa-ink-14);
  background-color: var(--ioa-face-lo);
  background-image: linear-gradient(180deg, var(--ioa-face-hi), var(--ioa-face-lo));
  box-shadow: none;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .35s var(--ioa-ease), border-color .35s var(--ioa-ease),
              box-shadow .35s var(--ioa-ease);
}
/* THE TOP BAR: an accent line that draws from the left on hover. */
[data-site-theme="isleofaccord"] .feat::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ioa-ease);
}
/* THE WASH: a soft accent light from above the card, on hover only. */
[data-site-theme="isleofaccord"] .feat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 60% at 50% -10%, var(--ioa-tint-12), transparent 60%);
  opacity: 0;
  transition: opacity .4s var(--ioa-ease);
  pointer-events: none;
}
[data-site-theme="isleofaccord"] .feat:hover {
  transform: translateY(-7px);
  border-color: var(--ioa-tint-40);
  box-shadow: var(--ioa-drop);
}
[data-site-theme="isleofaccord"] .feat:hover::before { transform: scaleX(1); }
[data-site-theme="isleofaccord"] .feat:hover::after { opacity: 1; }

/* THE NUMBER: "01", "02" ... top right, condensed, ink at 6%. Counted on the
   card's own text block so no extra markup is needed. */
[data-site-theme="isleofaccord"] .feat > div { position: static; }
[data-site-theme="isleofaccord"] .feat > div::before {
  counter-increment: ioa-card;
  content: "0" counter(ioa-card);
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--ioa-ink-07);
  pointer-events: none;
}

/* THE ICON WELL: 40px, radius 10, the accent at 10% under a 22% hairline,
   the glyph in the hot accent; filled solid on hover. */
[data-site-theme="isleofaccord"] .feat-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--ioa-tint-10);
  border: 1px solid var(--ioa-tint-22);
  color: var(--accent-hi);
  box-shadow: none;
  transition: background .35s var(--ioa-ease), color .35s var(--ioa-ease),
              box-shadow .35s var(--ioa-ease);
}
[data-site-theme="isleofaccord"] .feat-ico svg { width: 21px; height: 21px; }
[data-site-theme="isleofaccord"] .feat:hover .feat-ico {
  background: var(--accent);
  color: var(--on-primary);
  box-shadow: 0 0 24px -4px var(--ioa-glow);
}

[data-site-theme="isleofaccord"] .feat > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
[data-site-theme="isleofaccord"] .feat h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg);
}
[data-site-theme="isleofaccord"] .feat p {
  margin: 0;
  flex: 1;
  font-size: 13px;
  font-weight: 300;
  color: var(--ioa-ink-46);
  line-height: 1.6;
}
/* THE "OPEN ->" LINE on a card that is a link. */
[data-site-theme="isleofaccord"] a.feat > div::after {
  content: "Open  \2192";
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ioa-ink-28);
  transition: color .35s var(--ioa-ease), transform .35s var(--ioa-ease);
}
[data-site-theme="isleofaccord"] a.feat:hover > div::after {
  color: var(--accent-hi);
  transform: translateX(5px);
}
[data-site-theme="isleofaccord"] .feat-cmd code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-hi);
  background: var(--ioa-tint-10);
  border: 1px solid var(--ioa-tint-30);
  padding: 2px 7px;
  border-radius: 5px;
}


/* =============================================================================
   11. THE STEPS — "How to join": three numbered cards, numerals charging up
   The house join card holds an ordered list; the card chrome comes off and
   each item becomes a Haven step card.
   ============================================================================= */

[data-site-theme="isleofaccord"] #join .card {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
[data-site-theme="isleofaccord"] #join .card::before { content: none; }
[data-site-theme="isleofaccord"] #join .card > h3 {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--accent-hi);
}
[data-site-theme="isleofaccord"] #join .card > h3::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
[data-site-theme="isleofaccord"] .steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  counter-reset: ioa-step;
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-site-theme="isleofaccord"] .steps li {
  position: relative;
  margin: 0;
  padding: 26px 22px;
  border-radius: 14px;
  border: 1px solid var(--ioa-ink-14);
  background-image: linear-gradient(180deg, var(--ioa-face-hi), var(--ioa-face-lo));
  font-size: 13px;
  font-weight: 300;
  color: var(--ioa-ink-46);
  line-height: 1.6;
}
[data-site-theme="isleofaccord"] .steps li b { color: var(--fg); font-weight: 600; }
[data-site-theme="isleofaccord"] .steps li::before {
  counter-increment: ioa-step;
  content: "0" counter(ioa-step);
  position: static;
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 13px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--ioa-tint-50);
  background: linear-gradient(to top, var(--accent) 50%, var(--ioa-tint-04) 50%);
  background-size: 100% 200%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: ioa-charge 4.5s ease-in-out infinite;
}
[data-site-theme="isleofaccord"] .steps li:nth-child(2)::before { animation-delay: 1.5s; }
[data-site-theme="isleofaccord"] .steps li:nth-child(3)::before { animation-delay: 3s; }
@keyframes ioa-charge {
  0%        { background-position: 0 0; filter: none; }
  18%       { background-position: 0 100%; filter: drop-shadow(0 0 10px var(--ioa-glow)); }
  60%       { background-position: 0 100%; filter: drop-shadow(0 0 10px var(--ioa-glow)); }
  80%, 100% { background-position: 0 0; filter: none; }
}
[data-site-theme="isleofaccord"] .steps li code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-hi);
  background: var(--ioa-tint-10);
  border: 1px solid var(--ioa-tint-30);
  padding: 2px 7px;
  border-radius: 5px;
}
[data-site-theme="isleofaccord"] #join .join-hint {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ioa-ink-34);
}


/* =============================================================================
   12. THE FOOTER — one hairline, the brand row, a centred credit line
   ============================================================================= */

[data-site-theme="isleofaccord"] .foot {
  position: relative;
  z-index: 10;
  margin-top: 24px;
  padding: 40px 0 30px;
  background: none;
  border-top: 1px solid var(--ioa-ink-07);
  box-shadow: none;
}
[data-site-theme="isleofaccord"] .foot-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
[data-site-theme="isleofaccord"] .foot-brand img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--ioa-tint-30);
  box-shadow: 0 0 16px -2px var(--ioa-glow);
}
[data-site-theme="isleofaccord"] .foot-brand b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg);
}
[data-site-theme="isleofaccord"] .foot-brand span span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-hi);
}
[data-site-theme="isleofaccord"] .foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
[data-site-theme="isleofaccord"] .foot-links a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ioa-ink-46);
  transition: color .25s;
}
[data-site-theme="isleofaccord"] .foot-links a:hover { color: var(--accent-hi); }
[data-site-theme="isleofaccord"] .foot-legal {
  width: 100%;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--ioa-ink-07);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ioa-ink-28);
}


/* =============================================================================
   13. THE LIVE PAGE — the Haven's "LI|VE" head and its glass panels
   ============================================================================= */

[data-site-theme="isleofaccord"] .page-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 24px;
  text-align: left;
}
[data-site-theme="isleofaccord"] .page-head .page-h1,
[data-site-theme="isleofaccord"] .page-head h1 {
  order: 1;
  margin: 4px 0 2px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg);
}
/* The Haven paints the second half of its page title in the accent: the same
   word here, split at its middle by a hard-stop ramp clipped to the glyphs. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  [data-site-theme="isleofaccord"] .page-head .page-h1,
  [data-site-theme="isleofaccord"] .page-head h1 {
    background: linear-gradient(90deg, var(--fg) 50%, var(--accent-hi) 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
[data-site-theme="isleofaccord"] .page-head .eyebrow {
  order: 2;
  display: block;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ioa-ink-62);
}
[data-site-theme="isleofaccord"] .page-head .eyebrow::before { content: none; display: none; }
[data-site-theme="isleofaccord"] .page-head > p:not(.eyebrow) {
  order: 3;
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 300;
  color: var(--ioa-ink-46);
}

/* GLASS PANELS. Every surface the live and vault pages put on the ground gets
   the Haven's panel: fg at 6%, an 18% hairline, radius 16, blur. */
[data-site-theme="isleofaccord"] .card,
[data-site-theme="isleofaccord"] .panel,
[data-site-theme="isleofaccord"] .gate,
[data-site-theme="isleofaccord"] .slot,
[data-site-theme="isleofaccord"] .item,
[data-site-theme="isleofaccord"] .lvc-card,
[data-site-theme="isleofaccord"] .lvc-well,
[data-site-theme="isleofaccord"] .vp {
  background-color: var(--ioa-glass);
  background-image: none;
  border: 1px solid var(--ioa-glass-border);
  border-radius: 16px;
  box-shadow: none;
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
}
[data-site-theme="isleofaccord"] .card::before,
[data-site-theme="isleofaccord"] .panel::before,
[data-site-theme="isleofaccord"] .lvc-card::before { content: none; }
[data-site-theme="isleofaccord"] .card:hover,
[data-site-theme="isleofaccord"] .item:hover {
  border-color: var(--ioa-glass-lit);
  transform: translateY(-2px);
}

/* THE GATE: "Sign in to view Live" - the Haven's lock card. */
[data-site-theme="isleofaccord"] .gate {
  padding: clamp(48px, 8vw, 96px) 24px;
  text-align: center;
}
[data-site-theme="isleofaccord"] .gate-ico {
  color: var(--warn);
  opacity: 1;
  filter: drop-shadow(0 0 14px var(--warn-glow));
}
[data-site-theme="isleofaccord"] .gate h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg);
}
[data-site-theme="isleofaccord"] .gate p {
  font-size: 13px;
  font-weight: 300;
  color: var(--ioa-ink-62);
}
[data-site-theme="isleofaccord"] .gate .btn,
[data-site-theme="isleofaccord"] .gate .btn-primary {
  background-color: transparent;
  background-image: none;
  border: 1px solid var(--accent);
  color: var(--fg);
  box-shadow: none;
}
[data-site-theme="isleofaccord"] .gate .btn:hover,
[data-site-theme="isleofaccord"] .gate .btn-primary:hover {
  background-color: var(--ioa-tint-10);
  transform: translateY(-1px);
}

/* THE LIVE CARD'S OWN VOCABULARY: section labels in tracked mono, values in
   the condensed face, the pills in the Haven's shape. */
[data-site-theme="isleofaccord"] .lvc-eyebrow,
[data-site-theme="isleofaccord"] .lvc-sec > h4,
[data-site-theme="isleofaccord"] .lvc-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ioa-ink-62);
}
[data-site-theme="isleofaccord"] .lvc-species,
[data-site-theme="isleofaccord"] .lvc-prime-score,
[data-site-theme="isleofaccord"] .lvc-ring-num {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
}
[data-site-theme="isleofaccord"] .lvc-pill {
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* THE LIVE BAR at the foot of every page: the Haven's live pill register -
   glass, a mono readout, the values in the condensed face. */
[data-site-theme="isleofaccord"] #wc-livebar {
  background-image: none;
  background-color: var(--ioa-scrim-92);
  border-top: 1px solid var(--ioa-line);
  box-shadow: none;
  backdrop-filter: blur(14px) saturate(110%);
  -webkit-backdrop-filter: blur(14px) saturate(110%);
}
[data-site-theme="isleofaccord"] #wc-livebar .lb-k {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ioa-ink-46);
}
[data-site-theme="isleofaccord"] #wc-livebar .lb-v {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--fg);
}


/* =============================================================================
   14. THE ENTRANCE — armed by the script, never by the sheet
   ============================================================================= */

[data-site-theme="isleofaccord"][data-ioa-in] .ioa-reveal {
  opacity: 0;
  transform: translate3d(0, var(--ioa-rise), 0);
}
[data-site-theme="isleofaccord"][data-ioa-in] .ioa-reveal.ioa-shown {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--ioa-ease), transform .8s var(--ioa-ease);
}

/* The hero rises on load in the Haven's stagger: chip, name, tag, buttons. */
[data-site-theme="isleofaccord"][data-ioa-in="on"] .hero-copy > * {
  animation: ioa-rise .9s var(--ioa-ease) both;
}
[data-site-theme="isleofaccord"][data-ioa-in="on"] .hero h1 { animation: ioa-rise 1s var(--ioa-ease) .06s both; }
[data-site-theme="isleofaccord"][data-ioa-in="on"] .hero-copy > p { animation-delay: .14s; }
[data-site-theme="isleofaccord"][data-ioa-in="on"] .hero-cta { animation-delay: .26s; }
@keyframes ioa-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}


/* =============================================================================
   15. RESPONSIVE — the Haven's own breakpoints
   ============================================================================= */

@media (max-width: 1080px) {
  [data-site-theme="isleofaccord"] .nav-in {
    grid-template-columns: 1fr auto auto;
    position: relative;
  }
  [data-site-theme="isleofaccord"] .nav-util { justify-self: end; order: 2; }
  [data-site-theme="isleofaccord"] .burger { order: 3; }
  [data-site-theme="isleofaccord"] .nav-links {
    justify-self: stretch;
    gap: 0;
    padding: 10px 0 16px;
    border: 0;
    border-radius: 0;
    background: var(--ioa-scrim-92);
  }
  [data-site-theme="isleofaccord"] .nav-links a {
    width: 100%;
    padding: 15px 30px;
    font-size: 13px;
    border-radius: 0;
  }
}

@media (max-width: 900px) {
  [data-site-theme="isleofaccord"] .grid,
  [data-site-theme="isleofaccord"] .grid-3 { grid-template-columns: 1fr 1fr; }
  [data-site-theme="isleofaccord"] .steps { grid-template-columns: 1fr; }
  [data-site-theme="isleofaccord"] .status { grid-template-columns: 1fr 1fr; }
  [data-site-theme="isleofaccord"] .status > :nth-child(3),
  [data-site-theme="isleofaccord"] .status-figs > .fig:nth-child(2) { border-left: 0; }
}

@media (max-width: 560px) {
  [data-site-theme="isleofaccord"] .grid,
  [data-site-theme="isleofaccord"] .grid-3 { grid-template-columns: 1fr; }
  [data-site-theme="isleofaccord"] .hero.wrap { padding-block: calc(62px + 20px) 40px; }
  [data-site-theme="isleofaccord"] .brand-txt b { font-size: 16px; letter-spacing: .10em; }
  [data-site-theme="isleofaccord"] .brand-txt > span { display: none; }
  [data-site-theme="isleofaccord"] .hero h1 { font-size: clamp(28px, 8.6vw, 72px); }
  [data-site-theme="isleofaccord"] .hero-copy > p,
  [data-site-theme="isleofaccord"] .hero .lede { letter-spacing: .24em; }
  [data-site-theme="isleofaccord"] .hero .kicker { letter-spacing: .1em; font-size: 10px; }
  [data-site-theme="isleofaccord"] .nav-auth-btn { padding: 8px 12px; font-size: 10px; gap: 6px; }
}

@media (max-width: 420px) {
  [data-site-theme="isleofaccord"] .brand-txt { display: none; }
  [data-site-theme="isleofaccord"] .nav-auth-txt { display: none; }
  [data-site-theme="isleofaccord"] .nav-auth-btn { padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-site-theme="isleofaccord"] .hero .kicker::after,
  [data-site-theme="isleofaccord"] .hero.wrap::after,
  [data-site-theme="isleofaccord"] .steps li::before,
  [data-site-theme="isleofaccord"][data-ioa-in="on"] .hero-copy > *,
  [data-site-theme="isleofaccord"][data-ioa-in="on"] .hero h1 {
    animation: none;
  }
  [data-site-theme="isleofaccord"] .feat,
  [data-site-theme="isleofaccord"] .btn,
  [data-site-theme="isleofaccord"] .brand img,
  [data-site-theme="isleofaccord"] .nav-links a {
    transition: none;
  }
  [data-site-theme="isleofaccord"][data-ioa-in] .ioa-reveal { opacity: 1; transform: none; }
}