/* ==========================================================================
   AjAi Labs — ajailabs.app
   Design system: an archival record. Bone ground, ink type, ultramarine
   accent, one product colour per product and nowhere else.
   ========================================================================== */

:root {
  /* --- ground & ink ------------------------------------------------------ */
  --bone:        #e9e8e2;   /* page ground — cool, faintly green-grey */
  --bone-deep:   #dedcd3;   /* recessed bands */
  --chalk:       #f7f6f2;   /* raised cards */
  --ink:         #16181c;   /* primary text */
  --graphite:    #5b6068;   /* secondary text */
  --pencil:      #8b8f96;   /* tertiary / captions */
  --rule:        #c8c6bc;   /* hairlines */
  --rule-soft:   #d8d6cd;

  /* --- brand -------------------------------------------------------------
     The studio mark is AjAi: AMBER capitals and tittles, GREEN stems and the
     "Labs" that follows. Two colours, one statable rule. The chrome takes the
     green, so the page and the mark are the same brand. ------------------- */
  --amber:       #a8701a;   /* the capitals and the tittles */
  --green:       #1b6b47;   /* the stems, "Labs", and every link on the page */
  --green-lift:  #24895c;
  --green-wash:  #dfe8e2;

  /* --- each product, in its OWN colour, darkened for this light ground.
     All three apps are gold-and-green: that family is the point, so the
     marks tell them apart, not the hues. ---------------------------------- */
  --p-tourney:   #b87514;   /* TourneyHQ pennant amber */
  --p-tourney-2: #2f7d57;   /* TourneyHQ ball green */
  --p-tourney-3: #cfcdc3;   /* the cup — a neutral, so it reads as a hole */
  --p-signals:   #0e7c63;   /* Ajent Signals signal-line green */
  --p-wikifoodia:#9a6b1e;   /* WikiFoodia grain gold */

  /* Tints, for the colour fields each product sits in. */
  --w-tourney:   #f4e9d6;
  --w-signals:   #daf0e7;
  --w-wikifoodia:#f6ecd4;

  /* Two saturated grounds, used for whole bands. */
  --deep:        #103b2b;   /* forest — the studio green at full strength */
  --deep-ink:    #e7efe9;   /* type on --deep */
  --deep-soft:   #8fb8a4;
  --deep-rule:   #2c5a47;
  --brass:       #6d4a12;   /* the studio amber at full strength */
  --brass-ink:   #f7eeda;
  --brass-soft:  #d3b483;
  --brass-rule:  #8a6524;

  /* --- type -------------------------------------------------------------- */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Spectral', Georgia, 'Times New Roman', serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* --- measure ----------------------------------------------------------- */
  --page:    1240px;
  --gutter:  clamp(20px, 5vw, 64px);
  --band:    clamp(72px, 9vw, 132px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bone:      #14151a;
    --bone-deep: #101116;
    --chalk:     #1c1e24;
    --ink:       #eceae3;
    --graphite:  #a2a6ae;
    --pencil:    #7c818a;
    --rule:      #33363e;
    --rule-soft: #282b32;
    --amber:     #e8a33d;
    --green:     #4fa97c;
    --green-lift:#63be90;
    --green-wash:#16241d;
    --p-tourney:    #e8a33d;
    --p-tourney-2:  #4fa97c;
    --p-tourney-3:  #2a2d35;
    --p-signals:    #2fe0a6;
    --p-wikifoodia: #d9a441;
    --w-tourney:   #241d12;
    --w-signals:   #0d2620;
    --w-wikifoodia:#241f12;
    --deep:        #0d2b20;
    --deep-ink:    #e7efe9;
    --deep-soft:   #7fae99;
    --deep-rule:   #1e4536;
    --brass:       #2a1f0c;
    --brass-ink:   #f4e8cf;
    --brass-soft:  #c9a97a;
    --brass-rule:  #4a3714;
  }
}

:root[data-theme='dark'] {
  --bone:      #14151a;
  --bone-deep: #101116;
  --chalk:     #1c1e24;
  --ink:       #eceae3;
  --graphite:  #a2a6ae;
  --pencil:    #7c818a;
  --rule:      #33363e;
  --rule-soft: #282b32;
  --amber:     #e8a33d;
  --green:     #4fa97c;
  --green-lift:#63be90;
  --green-wash:#16241d;
  --p-tourney:    #e8a33d;
  --p-tourney-2:  #4fa97c;
  --p-tourney-3:  #2a2d35;
  --p-signals:    #2fe0a6;
  --p-wikifoodia: #d9a441;
  --w-tourney:   #241d12;
  --w-signals:   #0d2620;
  --w-wikifoodia:#241f12;
  --deep:        #0d2b20;
  --deep-ink:    #e7efe9;
  --deep-soft:   #7fae99;
  --deep-rule:   #1e4536;
  --brass:       #2a1f0c;
  --brass-ink:   #f4e8cf;
  --brass-soft:  #c9a97a;
  --brass-rule:  #4a3714;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(16px, 1.02vw, 17.5px);
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--green); color: var(--chalk); }

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

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

/* ==========================================================================
   Type roles
   ========================================================================== */

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pencil);
  margin: 0;
}

.display {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -0.021em;
  line-height: 0.98;
  margin: 0;
  text-wrap: balance;
}

.mono { font-family: var(--mono); }

/* ==========================================================================
   Masthead
   ========================================================================== */

.masthead {
  position: sticky;
  top: 0;
  z-index: 80;
  background: color-mix(in srgb, var(--bone) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.masthead.is-stuck { border-bottom-color: var(--rule); }

.masthead .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 66px;
}

/* ==========================================================================
   The AjAi Labs mark
   --------------------------------------------------------------------------
   The rule: AMBER capitals and tittles, GREEN stems and "Labs".

   CSS cannot colour a tittle apart from its stem, so the mark sets the
   DOTLESS letters (ı U+0131, ȷ U+0237) and draws the tittles as
   pseudo-elements. A screen reader would read that as "AȷAı", so the drawn
   version is aria-hidden and the real word sits beside it.

   Values measured off Archivo 700 at 400px: the tittle is a sharp-cornered
   0.1375 x 0.12em SQUARE, 0.7225em above the baseline, 0.065em from the glyph
   origin — the same width and offset as the stem, so it needs no lateral
   correction. Ascent 0.8775em, hence top: 0.155em. Re-measure if the face
   changes.
   ========================================================================== */

.wordmark { font-weight: 700; white-space: nowrap; }
.wordmark .cap  { color: var(--amber); }
.wordmark .stem { position: relative; color: var(--green); }

.wordmark .stem::after {
  content: '';
  position: absolute;
  top: 0.155em;
  left: 0.065em;
  width: 0.1375em;
  height: 0.12em;
  background: var(--amber);
}

/* The qualifier, tied to the stems and one weight quieter, so it reads as the
   suffix to the mark rather than a fifth letter competing with it. */
.wordmark .labs { color: var(--green); font-weight: 600; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 17px;
  letter-spacing: -0.012em;
  color: var(--ink);
}


.logo em {
  font-style: normal;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--pencil);
  text-transform: uppercase;
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid var(--rule);
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--graphite);
  padding: 6px 0;
  position: relative;
  transition: color 0.18s ease;
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }

.nav .nav-cta {
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 7px 14px;
  background: var(--chalk);
}

.nav .nav-cta::after { display: none; }
.nav .nav-cta:hover { border-color: var(--ink); }

@media (max-width: 720px) {
  .nav a:not(.nav-cta) { display: none; }
  .logo em { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding-top: clamp(40px, 5.5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 68px);
  border-bottom: 1px solid var(--rule);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.hero h1 {
  font-size: clamp(37px, 5.35vw, 70px);
  margin: 20px 0 0;
}

.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: block; }

.hero h1 .quiet { color: var(--graphite); }

.hero-lede {
  max-width: 46ch;
  margin: 28px 0 0;
  font-size: clamp(17px, 1.35vw, 20px);
  color: var(--graphite);
}

.hero-lede strong { color: var(--ink); font-weight: 600; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.btn {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 20px;
  border: 1px solid var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.btn-solid { background: var(--ink); color: var(--bone); }
.btn-solid:hover { background: var(--green); border-color: var(--green); transform: translateY(-1px); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-1px); }

.btn .arrow { transition: transform 0.18s ease; }
.btn:hover .arrow { transform: translate(2px, -2px); }

/* --- the standing-rules ledger ------------------------------------------ */

.ledger {
  background: var(--chalk);
  border: 1px solid var(--rule);
  padding: 0;
}

.ledger-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pencil);
}

.ledger-head b { color: var(--ink); font-weight: 600; letter-spacing: 0.15em; }

.ledger-row {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 12px;
  padding: 17px 18px;
  border-bottom: 1px solid var(--rule-soft);
}

.ledger-row:last-child { border-bottom: 0; }

.ledger-dot {
  width: 9px; height: 9px;
  margin-top: 8px;
  background: var(--dot, var(--green));
}

.ledger-rule {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 106%;
  font-size: 16.5px;
  letter-spacing: -0.008em;
  line-height: 1.25;
  margin: 0;
}

.ledger-src {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--graphite);
  margin: 7px 0 0;
}

.ledger-src span { color: var(--dot, var(--green)); }

.tally {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 18px 0 0;
  border-top: 1px solid var(--rule);
}

.tally div {
  padding: 14px 0 0;
  border-right: 1px solid var(--rule-soft);
  padding-right: 14px;
}

.tally div:last-child { border-right: 0; }

.tally dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--pencil);
  margin: 0;
}

.tally dd {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 108%;
  font-size: clamp(20px, 1.9vw, 26px);
  letter-spacing: -0.015em;
  margin: 5px 0 0;
  line-height: 1;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { padding-bottom: 44px; }
}

/* ==========================================================================
   Marks
   ========================================================================== */

.logo-mark  { width: 30px; height: 30px; flex: none; }
.foot .logo-mark { width: 24px; height: 24px; }
.entry-mark { width: 26px; height: 26px; flex: none; }
.index-mark { width: 34px; height: 34px; flex: none; }
.ledger-mark{ width: 22px; height: 22px; flex: none; margin-top: 4px; }
.rail-mark  { width: 30px; height: 30px; flex: none; }

/* ==========================================================================
   Product index — the three apps, listed
   ========================================================================== */

.index { border: 1px solid var(--rule); background: var(--chalk); }

.index-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pencil);
}

.index-head b { color: var(--ink); font-weight: 600; letter-spacing: 0.15em; }

.index-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--tint);
  text-decoration: none;
  transition: padding-left 0.24s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.2s ease;
}

.index-row:last-child { border-bottom: 0; }
.index-row:hover { padding-left: 26px; filter: saturate(1.15); }

.index-name {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 108%;
  font-size: 17px;
  letter-spacing: -0.012em;
  color: var(--brand);
  line-height: 1.15;
}

.index-what {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  color: var(--graphite);
  margin-top: 4px;
  letter-spacing: 0.01em;
}

.index-go {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  white-space: nowrap;
}

/* ==========================================================================
   Standing-rules rail — a saturated band
   ========================================================================== */

.deep-band {
  background: var(--deep);
  color: var(--deep-ink);
  border-block: 1px solid var(--deep-rule);
}

/* On the saturated ground the marks take each app's NATIVE colour, which is
   what they were drawn for — the darkened light-ground tints disappear here. */
.deep-band {
  --p-tourney:   #e8a33d;
  --p-tourney-2: #4fa97c;
  --p-tourney-3: #1c4a38;
  --p-signals:   #2fe0a6;
  --p-wikifoodia:#d9a441;
}

.deep-band .eyebrow { color: var(--deep-soft); }
.deep-band .band-head { border-bottom-color: var(--deep-rule); }
.deep-band .band-head p { color: var(--deep-soft); }

.rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-left: 1px solid var(--deep-rule);
}

.rail-card {
  padding: 28px clamp(18px, 2.2vw, 30px) 32px;
  border-right: 1px solid var(--deep-rule);
  border-bottom: 1px solid var(--deep-rule);
}

.rail-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 108%;
  font-size: clamp(19px, 1.8vw, 23px);
  letter-spacing: -0.014em;
  line-height: 1.15;
  margin: 16px 0 0;
  color: var(--deep-ink);
}

.rail-card p {
  margin: 11px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--deep-soft);
}

.rail-card .who {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  display: block;
  margin-top: 12px;
}

@media (max-width: 860px) { .rail { grid-template-columns: 1fr; } }

/* ==========================================================================
   Marquee — the shipping record
   ========================================================================== */

.strip {
  border-bottom: 1px solid var(--rule);
  background: var(--bone-deep);
  overflow: hidden;
  padding: 11px 0;
}

.strip-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: drift 58s linear infinite;
}

.strip-track span {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
  padding: 0 26px;
  white-space: nowrap;
  border-right: 1px solid var(--rule-soft);
}

.strip-track span b { color: var(--ink); font-weight: 600; }

@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.strip:hover .strip-track { animation-play-state: paused; }

/* ==========================================================================
   Section furniture
   ========================================================================== */

.band { padding-block: var(--band); }

/* Two bands on the same ground share one gap … */
.band + .band { padding-top: 0; }

/* … but a band with its own ground is a slab and owns its spacing. */
.band.rules-band,
.band.deep-band { padding-top: var(--band); }

.band:has(+ .rules-band),
.band:has(+ .deep-band) { padding-bottom: clamp(46px, 5vw, 74px); }

.band-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--ink);
}

.band-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(28px, 3.4vw, 46px);
  letter-spacing: -0.018em;
  line-height: 1.02;
  margin: 12px 0 0;
}

.band-head p {
  margin: 0;
  color: var(--graphite);
  max-width: 58ch;
  font-size: clamp(16px, 1.15vw, 18px);
}

@media (max-width: 820px) {
  .band-head { grid-template-columns: 1fr; align-items: start; gap: 18px; }
}

/* ==========================================================================
   Product entries
   ========================================================================== */

.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 70px);
  padding: clamp(32px, 4vw, 52px) clamp(22px, 3vw, 44px) clamp(38px, 4.5vw, 58px);
  margin-top: 26px;
  align-items: start;
  background: var(--tint);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--dot);
}

.entry-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pencil);
}

.entry-tag .live { color: var(--dot); font-weight: 600; }

.entry h3 {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(30px, 3.8vw, 50px);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 16px 0 0;
  color: var(--dot);
}

.entry .claim {
  font-family: var(--body);
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 22px);
  color: var(--dot);
  margin: 12px 0 0;
  line-height: 1.35;
}

.entry p.copy {
  color: var(--graphite);
  margin: 20px 0 0;
  max-width: 52ch;
}

.entry p.copy strong { color: var(--ink); font-weight: 600; }

/* --- spec table --------------------------------------------------------- */

.spec {
  margin: 22px 0 0;
  border-top: 1px solid var(--rule);
}

.spec div {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
}

.spec dt {
  margin: 0;
  color: var(--pencil);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 10.5px;
  padding-top: 2px;
}

.spec dd { margin: 0; color: var(--graphite); }
.spec dd b { color: var(--ink); font-weight: 500; }

.entry-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.linkbtn {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 11px 16px;
  border: 1px solid var(--rule);
  color: var(--ink);
  background: var(--chalk);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.linkbtn:hover { border-color: var(--dot, var(--ink)); color: var(--dot, var(--ink)); transform: translateY(-1px); }
.linkbtn .arrow { transition: transform 0.18s ease; }
.linkbtn:hover .arrow { transform: translate(2px, -2px); }

@media (max-width: 900px) {
  .entry { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .spec div { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .spec dt { font-size: 9.5px; letter-spacing: 0.08em; }
  .spec dd { font-size: 12px; }
  .mini { font-size: 11.5px; }
  .mini .num { padding-left: 10px; }
}

/* ==========================================================================
   Artifacts — miniatures of the real screens
   ========================================================================== */

.artifact {
  margin: 0;
  background: var(--chalk);
  border: 1px solid var(--rule);
}

.artifact-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pencil);
}

.artifact-bar b { color: var(--ink); font-weight: 600; }

.artifact-body { padding: 16px 15px; }

.artifact-note {
  margin: 0;
  padding: 11px 15px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--pencil);
  background: var(--bone-deep);
}

/* --- generic mini rows --------------------------------------------------- */

.mini {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
}

.mini th {
  text-align: left;
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--pencil);
  padding: 0 0 9px;
  border-bottom: 1px solid var(--rule);
}

.mini td {
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--graphite);
}

.mini tr:last-child td { border-bottom: 0; }
.mini .num { text-align: right; padding-left: 16px; font-variant-numeric: tabular-nums; }
.mini .lead td { color: var(--ink); }
.mini .lead td:first-child { font-weight: 600; }
.mini .pos { color: var(--dot); }

/* --- signals card -------------------------------------------------------- */

.sig {
  border: 1px solid var(--rule);
  padding: 13px 14px;
  font-family: var(--mono);
  font-size: 12px;
  margin-bottom: 10px;
  background: var(--bone);
}

.sig:last-child { margin-bottom: 0; }

.sig-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.sig-sym { font-weight: 600; color: var(--ink); font-size: 14px; letter-spacing: 0.02em; }

.sig-side {
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 3px 8px;
  border: 1px solid currentColor;
  color: var(--dot);
}

.sig-side.flat { color: var(--pencil); }

.sig-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  color: var(--graphite);
  font-size: 11px;
}

.sig-grid b { display: block; color: var(--ink); font-weight: 500; font-size: 12.5px; margin-top: 2px; }

.sig-empty { margin: 0; color: var(--pencil); font-size: 11.5px; line-height: 1.5; }

.sparkline { width: 100%; height: 46px; margin: 4px 0 11px; }

/* --- wikifoodia record --------------------------------------------------- */

.rec-title {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 106%;
  font-size: 22px;
  letter-spacing: -0.012em;
  margin: 0;
  line-height: 1.1;
}

.rec-gloss {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--pencil);
  margin: 6px 0 0;
  letter-spacing: 0.03em;
}

.rec-list {
  list-style: none;
  padding: 0;
  margin: 15px 0 0;
  border-top: 1px solid var(--rule);
}

.rec-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 12px;
}

.rec-list b { color: var(--ink); font-weight: 500; }
.rec-list span { color: var(--pencil); font-size: 11px; text-align: right; }

.rec-flag {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-left: 2px solid var(--dot);
  background: var(--bone);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--graphite);
}

.rec-flag b { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Rules band
   ========================================================================== */

.rules-band { background: var(--w-tourney); border-block: 1px solid var(--rule); }

.rules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 0;
  border-left: 1px solid var(--rule);
}

.rule-card {
  padding: 30px clamp(20px, 2.4vw, 32px) 34px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--green-wash);
  transition: background-color 0.25s ease;
}

.rule-card:hover { background: var(--chalk); }

@media (max-width: 1040px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rules { grid-template-columns: 1fr; } }

.rule-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 108%;
  font-size: 21px;
  letter-spacing: -0.012em;
  line-height: 1.15;
  margin: 14px 0 0;
}

.rule-card p {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--graphite);
}

.rule-mark {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 108%;
  font-size: 26px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--amber);
  margin: 0;
}

/* ==========================================================================
   Next / workshop
   ========================================================================== */

.queue { margin-top: 8px; border-top: 1px solid var(--ink); }

.queue-item {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 150px;
  gap: clamp(16px, 3vw, 40px);
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}

.queue-item.reserved { color: var(--pencil); }

.queue-state {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 8px;
}

.queue-state::before {
  content: '';
  width: 6px; height: 6px;
  background: currentColor;
  flex: none;
}

.queue-item.reserved .queue-state { color: var(--pencil); }
.queue-item.reserved .queue-state::before { background: none; border: 1px solid currentColor; }

.queue-what {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 106%;
  font-size: clamp(18px, 1.7vw, 23px);
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.queue-what small {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-size: 15.5px;
  letter-spacing: 0;
  color: var(--graphite);
  margin-top: 7px;
  line-height: 1.55;
}

.queue-who {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pencil);
  text-align: right;
}

@media (max-width: 760px) {
  .queue-item { grid-template-columns: 1fr; gap: 10px; }
  .queue-who { text-align: left; }
}

/* The four verbs — the organiser's real path through TourneyHQ. */
.verbs {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dot);
}

.disclaimer {
  margin: 30px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  background: var(--chalk);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--pencil);
}

.foot-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; text-transform: none; letter-spacing: -0.01em; }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.contact h2 {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(30px, 4.6vw, 60px);
  letter-spacing: -0.022em;
  line-height: 1;
  margin: 14px 0 0;
}

.contact p {
  color: var(--graphite);
  margin: 20px 0 0;
  max-width: 46ch;
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}

.contact-list li { border-bottom: 1px solid var(--rule); }

.contact-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: padding-left 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), color 0.22s ease;
}

.contact-list a small {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pencil);
}

.contact-list a:hover { padding-left: 10px; color: var(--green); }

@media (max-width: 820px) { .contact { grid-template-columns: 1fr; } }

/* ==========================================================================
   Footer
   ========================================================================== */

.foot {
  border-top: 1px solid var(--rule);
  padding-block: 28px 34px;
}

.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pencil);
}

.foot .spacer { margin-left: auto; }

.foot a { color: var(--graphite); text-decoration: none; }
.foot a:hover { color: var(--ink); }

.theme-toggle {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--graphite);
  background: none;
  border: 1px solid var(--rule);
  padding: 6px 11px;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.theme-toggle:hover { border-color: var(--ink); color: var(--ink); }

/* ==========================================================================
   Motion
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(18px); }

.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.62s cubic-bezier(0.2, 0.7, 0.3, 1),
              transform 0.62s cubic-bezier(0.2, 0.7, 0.3, 1);
  transition-delay: var(--delay, 0ms);
}

.hero h1 .line > span { transform: translateY(102%); }

.is-loaded .hero h1 .line > span {
  transform: translateY(0);
  transition: transform 0.78s cubic-bezier(0.16, 0.84, 0.3, 1);
  transition-delay: calc(var(--i) * 90ms + 120ms);
}

.hero .fade { opacity: 0; }

.is-loaded .hero .fade {
  opacity: 1;
  transition: opacity 0.7s ease;
  transition-delay: var(--delay, 400ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .strip-track { animation: none; }
  .reveal, .hero h1 .line > span, .hero .fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* The contact band is the last one on the page; the footer supplies the rest
   of the breathing room, so it does not need a full band beneath it too. */
#contact { padding-bottom: clamp(40px, 4.5vw, 66px); }