/* KRITIKAL — page composition */

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  background: var(--pit);
  overflow: hidden;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Sits behind the 3D as a subtle glow. If WebGL is unavailable the photo
   variant is switched on instead, so the hero is never an empty black box. */
.hero__poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 55%, rgb(var(--hivis-rgb) / 0.10), transparent 60%),
    radial-gradient(80% 60% at 50% 100%, rgb(var(--cab-rgb) / 0.10), transparent 70%),
    var(--pit);
}

.hero__poster--photo {
  background:
    linear-gradient(to top, rgb(var(--pit-rgb) / 0.92), rgb(var(--pit-rgb) / 0.45)),
    url("../images/gemfest-2026-main-2.jpg") center / cover no-repeat,
    var(--pit);
}

/* Weighted to the left, where the type sits, so the stack on the right stays
   visible instead of being flattened by a full-width wash. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right,
      rgb(var(--pit-rgb) / 0.92) 0%,
      rgb(var(--pit-rgb) / 0.72) 38%,
      rgb(var(--pit-rgb) / 0.15) 68%,
      rgb(var(--pit-rgb) / 0.35) 100%),
    linear-gradient(to top,
      rgb(var(--pit-rgb) / 0.85) 0%,
      rgb(var(--pit-rgb) / 0.25) 40%,
      rgb(var(--pit-rgb) / 0) 75%);
  pointer-events: none;
}

@media (max-width: 860px) {
  .hero__scrim {
    background: linear-gradient(to top,
      rgb(var(--pit-rgb) / 0.94) 0%,
      rgb(var(--pit-rgb) / 0.7) 45%,
      rgb(var(--pit-rgb) / 0.35) 100%);
  }
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: var(--s-6) var(--s-5);
}

.hero__title {
  margin-bottom: var(--s-3);
  max-width: 11ch;
}

/* Keep the copy off the stack on wide screens */
@media (min-width: 861px) {
  .hero__content .wrap > *:not(.hero__scale) { max-width: 60%; }
  .hero__lede { max-width: min(46ch, 52%); }
}

/* The one place the type breaks its own grid — KRITIKAL set at full bleed
   like a stencil sprayed across the side of a bin. */
.hero__title span {
  display: block;
  color: var(--chalk);
}

.hero__title span:last-child { color: var(--accent-text); }

.hero__lede {
  max-width: 46ch;
  font-size: var(--t-md);
  color: var(--ink-invert-2);
  margin-bottom: var(--s-4);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

/* Scale readout — the claim a booker is scanning for */
.hero__scale {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--edge-dark);
}

.hero__stat {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-invert-2);
}

.hero__stat b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
  color: var(--chalk);
  margin-bottom: 0.2rem;
}

/* Three across on a phone. Stacked, they were three screens-worth of gap
   before the page had said anything else. */
@media (max-width: 860px) {
  .hero__scale {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-2);
    margin-top: var(--s-4);
  }
  .hero__stat { font-size: 0.625rem; letter-spacing: 0.1em; }
  .hero__stat b { font-size: 0.95rem; line-height: 1.1; margin-bottom: 0.35rem; }
}

/* ---------- FEEL IT toggle ---------- */
/* The only rounded object on the site. It is a physical control, so it
   is allowed to look like one. */

.feelit {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: rgb(var(--chalk-rgb) / 0.06);
  border: 1px solid var(--edge-dark);
  border-radius: 999px;
  padding: 0.6rem 1.1rem 0.6rem 0.9rem;
  color: var(--ink-invert-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.feelit:hover { color: var(--chalk); border-color: rgb(var(--chalk-rgb) / 0.35); }

.feelit[aria-pressed="true"] {
  color: var(--tape);
  border-color: var(--tape);
  background: rgb(var(--tape-rgb) / 0.10);
}

/* Three bars that idle flat and dance when audio is live */
.feelit__meter {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: 14px;
  height: 12px;
}

.feelit__meter i {
  flex: 1;
  height: 2px;
  background: currentColor;
  transform-origin: bottom;
}

.feelit[aria-pressed="true"] .feelit__meter i {
  animation: bars 0.62s var(--ease-in-out) infinite alternate;
}
.feelit[aria-pressed="true"] .feelit__meter i:nth-child(2) { animation-delay: 0.14s; }
.feelit[aria-pressed="true"] .feelit__meter i:nth-child(3) { animation-delay: 0.28s; }

@keyframes bars {
  from { height: 2px; }
  to   { height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .feelit[aria-pressed="true"] .feelit__meter i { animation: none; height: 8px; }
}

/* ---------- Credibility strip ---------- */

.creds {
  background: var(--warnex);
  border-block: 1px solid var(--edge-dark);
  padding-block: var(--s-3);
}

.creds__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  align-items: baseline;
}

.creds__item {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-invert-2);
}

.creds__item b { color: var(--chalk); font-weight: 400; }

/* ---------- Thesis ----------
   The one claim the whole business rests on, set at display size because it
   is the argument, not a caption. */

.thesis {
  max-width: 22ch;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: var(--t-xl);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 var(--s-4);
}

.thesis em {
  font-style: normal;
  color: var(--accent-text);
}

.thesis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}

@media (max-width: 860px) {
  .thesis-grid { grid-template-columns: 1fr; gap: var(--s-4); }
}

.thesis-points { border-top: 1px solid var(--edge-dark); }

.thesis-points li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--edge-dark);
}

.thesis-points h3 {
  font-size: var(--t-md);
  font-stretch: 110%;
  margin-bottom: 0.5rem;
}

.thesis-points p {
  font-size: var(--t-sm);
  color: var(--ink-invert-2);
  margin: 0;
}

/* Build strip — the part of the job the audience never sees */
.build-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(160px, 1fr);
  gap: 1px;
  margin-top: var(--s-5);
  overflow-x: auto;
  background: var(--edge-dark);
  border: 1px solid var(--edge-dark);
  scrollbar-width: thin;
}

.build-strip img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--pit);
  filter: grayscale(0.25);
  transition: filter var(--dur) var(--ease-out);
}

.build-strip img:hover { filter: none; }

/* ---------- Journey ----------
   A rail you push along, because the story is a sequence and the dates
   carry real information. This is the one place numbered order is honest. */

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 320px);
  gap: var(--s-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-3);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--hivis) transparent;
}

.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-track { background: rgb(var(--chalk-rgb) / 0.08); }
.rail::-webkit-scrollbar-thumb { background: var(--hivis); }

.step {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.step__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--pit);
  border: 1px solid var(--edge-dark);
  margin-bottom: var(--s-2);
}

.step__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.step__media video {
  width: 100%; height: 100%;
  object-fit: contain;
  background: var(--pit);
}

.step__media--empty {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg,
      var(--warnex-2) 0 12px, var(--pit) 12px 24px);
}

.step__media--empty > span {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: var(--t-lg);
  text-transform: uppercase;
  color: var(--ink-invert-2);
  background: var(--pit);
  padding: 0.3rem 0.8rem;
}

/* The date is the spine of this section, so it is set like a marker */
.step__date {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-text);
  padding-top: var(--s-1);
  border-top: 2px solid var(--hivis);
  margin-bottom: var(--s-1);
}

.step__title {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 115%;
  font-size: var(--t-md);
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.step__place {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-invert-2);
  margin-bottom: var(--s-1);
}

.step__note {
  font-size: var(--t-sm);
  color: var(--ink-invert-2);
}

.rail-hint {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-invert-2);
  margin-top: var(--s-2);
}

/* ---------- Section heads ---------- */

.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

/* Not `ch` — that resolves against this element's 1rem body font and would
   squeeze a 5.5rem display heading into a 26rem column. The lede caps its
   own measure separately. */
.sec-head__text { max-width: min(100%, 52rem); }
.sec-head h2 { margin-bottom: var(--s-2); }

/* ---------- Services ---------- */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1px;
  background: var(--edge-light);
  border: 1px solid var(--edge-light);
}

.svc {
  background: var(--cab);
  padding: var(--s-4) var(--s-3);
}

.svc__n {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  color: var(--hivis-ink);
  margin-bottom: var(--s-3);
}

.svc h3 { margin-bottom: var(--s-2); }

.svc p { font-size: var(--t-sm); color: var(--ink-soft); }

/* ---------- Booking page ---------- */

.book-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
  gap: var(--s-6);
  align-items: start;
}

@media (max-width: 900px) {
  .book-layout { grid-template-columns: 1fr; gap: var(--s-5); }
}

.book-aside {
  position: sticky;
  top: 6rem;
  background: var(--warnex);
  border: 1px solid var(--edge-dark);
  padding: var(--s-3);
}

@media (max-width: 900px) {
  .book-aside { position: static; }
}

.book-aside h3 { margin-bottom: var(--s-2); }

.book-aside__contact {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--edge-dark);
}

.book-aside__contact a {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-sm);
  text-decoration: none;
  margin-bottom: 0.5rem;
  color: var(--chalk);
}

.book-aside__contact a:hover { color: var(--accent-text); }

/* ---------- Page header (interior pages) ---------- */

.page-head {
  padding-block: calc(var(--s-8) + 1rem) var(--s-5);
  background: var(--pit);
  border-bottom: 1px solid var(--edge-dark);
}

.page-head h1 { margin-bottom: var(--s-3); max-width: 16ch; }

/* ---------- Legal / prose pages ---------- */

.prose { max-width: 68ch; }

.prose h2 {
  font-size: var(--t-lg);
  margin: var(--s-5) 0 var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--edge-dark);
}

.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.prose h3 {
  font-size: var(--t-md);
  font-stretch: 110%;
  margin: var(--s-3) 0 var(--s-1);
}

.prose p, .prose li { color: var(--ink-invert-2); }

.prose ul {
  list-style: none;
  margin: 0 0 var(--s-2);
}

.prose ul li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--hivis);
}

.prose a { color: var(--chalk); }
.prose a:hover { color: var(--accent-text); }

.prose dl {
  margin: 0 0 var(--s-3);
  border-top: 1px solid var(--edge-dark);
}

.prose dt {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk);
  padding-top: var(--s-2);
}

.prose dd {
  margin: 0.3rem 0 var(--s-2);
  color: var(--ink-invert-2);
}

.prose__updated {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-invert-2);
  margin-bottom: var(--s-4);
}

/* Commercial terms KRITIKAL still need to set. Deliberately loud so they
   cannot go live unnoticed. */
.todo {
  display: inline-block;
  background: var(--tape);
  color: var(--on-accent);
  font-family: var(--mono);
  font-size: 0.8em;
  font-weight: 500;
  padding: 0.1em 0.45em;
  letter-spacing: 0.04em;
}

/* ---------- Shop placeholder ---------- */

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

.shop-item {
  border: 1px solid var(--edge-dark);
  background: var(--warnex);
}

.shop-item__slot {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg,
      var(--warnex-2) 0 12px, var(--pit) 12px 24px);
  color: var(--ink-invert-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.shop-item__body {
  padding: var(--s-2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-sm);
}

.shop-item__body span:last-child { color: var(--ink-invert-2); }

.notify {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  max-width: 30rem;
}

.notify .input { flex: 1 1 14rem; }

/* ---------- CTA band ---------- */

/* Black on hi-vis, the way every piece of safety signage on a site is set —
   and the only combination of the two that passes contrast. */
.cta-band {
  background: var(--hivis);
  color: var(--on-accent);
  padding-block: var(--s-6);
}

.cta-band h2 { margin-bottom: var(--s-2); max-width: 18ch; }
.cta-band p { color: rgb(var(--ink-rgb) / 0.82); max-width: 48ch; margin-bottom: var(--s-4); }

/* Inverted against the band. Both values are deliberately mode-independent:
   using --pit for the label made it near-black on a near-black chip in dark
   mode and the button disappeared entirely. */
.cta-band .btn {
  background: var(--always-ink);
  color: var(--always-pale);
}
.cta-band .btn:hover { background: var(--always-ink); filter: brightness(1.45); }

/* ---------- Rig layouts: picking an arrangement ---------- */

.layout-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-top: var(--s-4);
}

.layout-chip {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.75rem 1.1rem;
  border: 1px solid var(--edge-dark);
  background: rgb(var(--pit-rgb) / 0.7);
  color: var(--chalk);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.layout-chip:hover:not(:disabled) { border-color: var(--chalk); }

/* The one that is up. Hi-vis, because picking it is the action on this page. */
.layout-chip[aria-pressed="true"] {
  background: var(--hivis);
  border-color: var(--hivis);
  color: var(--on-accent);
}

.layout-chip:disabled { opacity: 0.55; cursor: not-allowed; }

.layout-chip:focus-visible {
  outline: 2px solid var(--hivis);
  outline-offset: 2px;
}

.layout-picker__counts {
  margin-top: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-invert-2);
}

/* On a phone the rig is at the top of the screen and the page scrolls away
   under it, so the picker goes straight beneath the rig, above the heading:
   the thing you press and the thing it changes stay on screen together. */
@media (max-width: 860px) {
  .page-head--layouts > .wrap { display: flex; flex-direction: column; }
  .page-head--layouts .eyebrow { order: -3; }
  .page-head--layouts .layout-picker { order: -2; margin-top: 0; }
  .page-head--layouts .layout-picker__counts { order: -1; margin-bottom: var(--s-4); }
  .layout-chip { padding: 0.7rem 0.8rem; letter-spacing: 0.1em; }
}

/* Beside the rig on a wide screen, the copy keeps to its own column. This is
   the one inner page where the model is the subject, so the heading does not
   get to run across it. */
@media (min-width: 861px) {
  .page-head--layouts > .wrap > * { max-width: 44%; }
  .page-head--layouts h1 { font-size: var(--t-2xl); }
}