/* Indian Tribe — shared foundation
   Core palette is red / black / white, with the wordmark's own colours allowed
   in as accents on the tribal field. */

:root{
  /* ground */
  --paper:    #F7F4EF;
  --paper-2:  #ebe4d7;
  --paper-3:  #ded5c4;

  /* ink */
  --ink:      #14110f;
  --ink-2:    #443c36;
  --ink-3:    #8a7f74;

  /* the core accent */
  --red:      #c8102e;
  --red-dk:   #8d0a20;

  /* allowance — sampled from the wordmark */
  --teal:     #137c8a;
  --orange:   #f15629;
  --purple:   #87288b;
  --magenta:  #a02067;
  --navy:     #0d283e;
  --ochre:    #d9a441;

  --shell:    clamp(18px, 3.4vw, 62px);
  --rule:     rgba(20,17,15,.14);

  --ease-out:  cubic-bezier(.16,.84,.24,1);
  --ease-soft: cubic-bezier(.4,.01,.2,1);
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  min-height:100%;
  background:var(--paper);
  color:var(--ink);
  /* the mark's pieces fly in from well beyond the frame; clip the x axis so that
     never shows a horizontal scrollbar or lets the page drift sideways.
     clip, not hidden: hidden makes this a scroll container, which silently
     breaks position:sticky for everything inside it - the saga's stage among
     them. hidden stays first as the fallback where clip is not understood. */
  overflow-x:hidden;
  overflow-x:clip;
}

body{
  /* Barlow for body and every interface label; the display type - the dial's
     words, a card's caption, a brand's name - is Georgia, which is what the
     site had before the brand book and what it has gone back to. A serif does
     not hold at 9.5px, so the small labels keep Barlow. */
  font-family:Barlow,'Barlow',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}

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

/* ── the tribal field, behind everything on every page ───────────────────── */

/* two layers: #fieldBase is the line work, painted once and never touched
   again; #field is the wet colour, repainted only where it is actually wet */
#field, #fieldBase{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
  opacity:var(--field-weight, 1);
}

/* ── shared type ─────────────────────────────────────────────────────────── */

.eyebrow{
  font-size:clamp(9px, .72vw, 11px);
  font-weight:600;
  letter-spacing:.34em;
  text-indent:.34em;
  text-transform:uppercase;
  color:var(--ink-3);
}

.display{
  font-family:"Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:.86;
  text-transform:uppercase;
}

/* a hairline that reads as woven, not ruled */
.thread{
  height:1px;
  background:repeating-linear-gradient(90deg,
    var(--rule) 0 6px, transparent 6px 11px);
}

/* ── shared chrome ───────────────────────────────────────────────────────── */

.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:clamp(14px,2.2vh,26px) var(--shell);
  pointer-events:none;
}
.topbar a, .topbar button{ pointer-events:auto; }

.tag{
  font-size:clamp(9px,.7vw,11px);
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-2);
  text-decoration:none;
}
.tag:hover{ color:var(--red); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
     transition-duration:.12s !important; }
}

/* ── the A/B switches ────────────────────────────────────────────────────── */

.abs{
  position:fixed;
  right:clamp(12px,1.6vw,24px);
  bottom:clamp(12px,1.6vw,24px);
  z-index:200;
  display:flex;
  flex-direction:column;
  gap:5px;
  font:600 9px/1 "Inter", ui-sans-serif, system-ui, sans-serif;
  letter-spacing:.12em;
  user-select:none;
}
.ab{
  display:flex;
  align-items:center;
  gap:2px;
  padding:3px;
  padding-left:9px;
  border-radius:999px;
  border:1px solid rgba(20,17,15,.16);
  background:rgba(253,250,247,.94);
}
.ab-l{
  margin-right:5px;
  color:rgba(20,17,15,.42);
  text-transform:uppercase;
  letter-spacing:.16em;
}
.ab button{
  display:block;
  padding:5px 9px;
  border:0;
  border-radius:999px;
  background:none;
  font:inherit;
  color:rgba(20,17,15,.45);
  cursor:pointer;
  transition:background .28s var(--ease-soft), color .28s var(--ease-soft);
}
.ab button.on{ background:var(--red); color:#fff; }

@media (max-width:760px){
  .abs{ font-size:8px; gap:4px; }
  .ab button{ padding:4px 7px; }
}