/* Sting in the Tail — component styles.
 * Every value resolves through the tokens in tokens/tokens.css. No brand
 * colour is written literally below; retheming is a token edit.
 */

/* Every component root carries the brand face itself. Inheriting it from
 * .sitt-page instead would leave anything used standalone — a SummaryTable in
 * a slide, a KeyFigure in a header — rendering in the browser's default serif.
 */
.sitt-page, .sitt-pc, .sitt-advice, .sitt-callout, .sitt-fig, .sitt-quote,
.sitt-prose, .sitt-eyebrow, .sitt-heading, .sitt-tablewrap, .sitt-table,
.sitt-footer, .sitt-chiprow, .sitt-two, .sitt-grid, .sitt-rail {
  font-family: var(--sitt-font-mono);
  color: var(--sitt-ink-muted);
}

/* ------------------------------------------------------------ foundations */

.sitt-page {
  position: relative;
  background: var(--sitt-paper);
  color: var(--sitt-ink-muted);
  font-family: var(--sitt-font-mono);
  font-size: 10pt;
  line-height: 1.62;
  overflow: hidden;
  display: flex;
  box-shadow: 0 1px 3px rgba(73, 67, 63, .14);
  width: 100%;
}
.sitt-page--flat { box-shadow: none; }
.sitt-page--a4 { aspect-ratio: 595 / 842; }
.sitt-page--a4-landscape { aspect-ratio: 842 / 595; }
.sitt-page--slide { aspect-ratio: 16 / 9; }
.sitt-page--auto { aspect-ratio: auto; }

.sitt-page__body {
  flex: 1;
  min-width: 0;
  padding: clamp(18px, 4.2%, 46px);
  position: relative;
  z-index: 1;
}
.sitt-page--railed .sitt-page__body { padding-left: clamp(14px, 3%, 30px); }

.sitt-rail {
  flex: 0 0 auto;
  width: 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sitt-rail__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 7.5pt;
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sitt-curve {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
}

.sitt-two { display: grid; align-items: start; }

/* ------------------------------------------------------------- typography */

.sitt-title {
  font-family: var(--sitt-font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--sitt-ink);
  margin: 0;
  text-wrap: balance;
}

.sitt-heading { margin: 0 0 var(--sitt-space-lg); }
.sitt-heading__text {
  font-family: var(--sitt-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .015em;
  color: var(--sitt-ink);
  margin: 0;
}
.sitt-heading--1 .sitt-heading__text { font-size: 1.18rem; }
.sitt-heading--2 .sitt-heading__text { font-size: .92rem; }
.sitt-heading__rule {
  display: block;
  width: 46px;
  height: 3px;
  margin-top: .62rem;
}

.sitt-eyebrow {
  font-size: .64rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--sitt-ink-faint);
  margin: 0 0 .55rem;
}

.sitt-prose { color: var(--sitt-ink-muted); max-width: 66ch; }
.sitt-prose--body { font-size: .82rem; line-height: 1.62; }
.sitt-prose--lead { font-size: .95rem; line-height: 1.55; }
.sitt-prose p { margin: 0 0 .85em; }
.sitt-prose p:last-child { margin-bottom: 0; }

.sitt-quote {
  margin: 0;
  padding: var(--sitt-space-md) 0 var(--sitt-space-md) var(--sitt-space-lg);
  border-left: 2px solid var(--sitt-honey);
}
.sitt-quote__text {
  font-family: var(--sitt-font-serif);
  font-size: 1.14rem;
  line-height: 1.4;
  color: var(--sitt-ink);
  margin: 0;
  text-wrap: balance;
}
.sitt-quote__attr {
  margin-top: .7rem;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sitt-ink-faint);
}

.sitt-align-center { text-align: center; margin-left: auto; margin-right: auto; }
.sitt-align-right  { text-align: right; margin-left: auto; }

/* ------------------------------------------------------------------ brand */

.sitt-logo { display: block; height: auto; max-width: 100%; }
img.sitt-align-center { margin-left: auto; margin-right: auto; }

.sitt-chip {
  display: inline-block;
  padding: 3px 7px;
  border-radius: var(--sitt-radius-chip);
  font-family: var(--sitt-font-mono);
  font-size: .68rem;
  line-height: 1.32;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sitt-chip--block { display: block; }

.sitt-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.sitt-chiprow.sitt-align-center { justify-content: center; }

/* ---------------------------------------------------------------- content */

.sitt-grid { display: grid; gap: var(--sitt-space-lg); align-items: start; }

.sitt-pc { min-width: 0; }
.sitt-pc__img {
  background: var(--sitt-surface);
  border-radius: var(--sitt-radius-image);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: 10px;
  overflow: hidden;
}
.sitt-pc__img img { max-width: 100%; max-height: 100%; display: block; }
.sitt-pc__ph {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sitt-ink-faint);
}
.sitt-pc__chip { margin-top: 7px; }
.sitt-pc__meta {
  margin: 5px 0 0;
  font-size: .64rem;
  color: var(--sitt-ink-faint);
}
.sitt-pc__desc {
  margin: 4px 0 0;
  font-size: .74rem;
  line-height: 1.52;
  color: var(--sitt-ink-muted);
}

.sitt-advice {
  margin-top: 8px;
  background: var(--sitt-paper-tint);
  border-left: 2px solid var(--sitt-tan);
  padding: .6rem .75rem;
  font-size: .74rem;
  line-height: 1.52;
  color: var(--sitt-ink);
}
.sitt-advice__label {
  display: block;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sitt-ink-faint);
  margin-bottom: .25rem;
}

.sitt-callout {
  padding: var(--sitt-space-md) var(--sitt-space-lg);
  border: 1px dashed var(--sitt-tan);
  border-radius: var(--sitt-radius-card);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--sitt-ink);
  text-align: center;
}
.sitt-callout--honey { background: var(--sitt-paper-tint); border-color: var(--sitt-honey); }
.sitt-callout--plain { background: var(--sitt-paper-alt); }

.sitt-fig { }
.sitt-fig__value {
  font-family: var(--sitt-font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  line-height: 1;
  color: var(--sitt-honey);
  font-variant-numeric: tabular-nums;
}
.sitt-fig__label {
  margin-top: .5rem;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sitt-ink);
}
.sitt-fig__caption {
  margin-top: .3rem;
  font-size: .72rem;
  color: var(--sitt-ink-muted);
}

.sitt-tablewrap { overflow-x: auto; }
.sitt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .72rem;
}
.sitt-table th {
  background: var(--sitt-ink);
  color: var(--sitt-paper);
  text-align: left;
  font-weight: 400;
  font-size: .62rem;
  letter-spacing: .14em;
  padding: .5rem .6rem;
}
.sitt-table td {
  padding: .48rem .6rem;
  border-bottom: 1px solid var(--sitt-rule);
  color: var(--sitt-ink);
}
.sitt-table tbody tr:nth-child(even) { background: var(--sitt-paper-alt); }
.sitt-num { text-align: right; font-variant-numeric: tabular-nums; }
.sitt-table__total {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 1rem;
  padding-top: .7rem;
  font-size: .64rem;
  letter-spacing: .1em;
  color: var(--sitt-ink-muted);
}
.sitt-table__total b {
  font-size: .95rem;
  letter-spacing: 0;
  color: var(--sitt-ink);
  border-top: 1.5px solid var(--sitt-honey);
  padding-top: .3rem;
  font-variant-numeric: tabular-nums;
}

.sitt-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sitt-space-lg);
  border-top: 1px solid var(--sitt-tan);
  padding-top: .9rem;
  font-size: .68rem;
  color: var(--sitt-ink-muted);
}
.sitt-footer b {
  color: var(--sitt-ink);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .7rem;
}
.sitt-footer p { margin: .2rem 0 0; }

/* ------------------------------------------------------------------ cover */

.sitt-cover__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  text-align: center;
  padding-top: 4%;
}
.sitt-cover__rule {
  display: block;
  width: 118px;
  height: 1px;
  background: var(--sitt-tan);
  margin: .4rem 0;
}
.sitt-cover__strap { max-width: 46ch; }
.sitt-cover__foot { margin-top: auto; padding-bottom: 6%; font-size: .72rem; }
.sitt-cover__foot p { margin: .12rem 0; }
.sitt-cover__contact { color: var(--sitt-ink-muted); font-size: .68rem; }
.sitt-cover__date { color: var(--sitt-ink-faint); font-size: .66rem; }

/* Sting in the Tail — web layer styles.
 * Interactive states live here: hover, focus-visible, disabled, reduced motion.
 * As in the document layer, no brand colour is written literally.
 */

.sitt-container, .sitt-section, .sitt-header, .sitt-sitefooter, .sitt-hero,
.sitt-btn, .sitt-field, .sitt-badge, .sitt-notice, .sitt-tile, .sitt-collcard,
.sitt-crumb, .sitt-pager, .sitt-tabs, .sitt-tilegrid {
  font-family: var(--sitt-font-mono);
  color: var(--sitt-ink-muted);
  box-sizing: border-box;
}
.sitt-container *, .sitt-section *, .sitt-tile *, .sitt-collcard * { box-sizing: border-box; }

/* --------------------------------------------------------------- structure */

.sitt-container {
  width: 100%;
  max-width: var(--sitt-container-max);
  margin-inline: auto;
  padding-inline: var(--sitt-container-gutter);
}
.sitt-container--narrow { max-width: 760px; }

.sitt-section { padding-block: clamp(36px, 6vw, 76px); }
.sitt-section--tight { padding-block: clamp(20px, 3vw, 36px); }
.sitt-section--paper { background: var(--sitt-paper); }
.sitt-section--alt { background: var(--sitt-paper-alt); }
.sitt-section--tint { background: var(--sitt-paper-tint); }
.sitt-section--surface { background: var(--sitt-surface); }
.sitt-section--ink { background: var(--sitt-ink); color: var(--sitt-paper); }
.sitt-section--ink h1, .sitt-section--ink h2, .sitt-section--ink h3 { color: var(--sitt-paper); }

/* ------------------------------------------------------------------ header */

.sitt-header { background: var(--sitt-paper); border-bottom: 1px solid var(--sitt-rule); }
.sitt-header--sticky { position: sticky; top: 0; z-index: 40; }
.sitt-header__bar {
  display: flex; align-items: center; gap: var(--sitt-space-lg);
  min-height: 74px; padding-block: 10px;
}
.sitt-header__logo { flex: 0 0 auto; }
.sitt-header__nav { display: flex; gap: clamp(10px, 2vw, 26px); margin-inline-start: auto; }
.sitt-header__actions { display: flex; gap: 8px; flex: 0 0 auto; }

.sitt-navlink {
  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sitt-ink); text-decoration: none;
  padding: 6px 2px; border-bottom: 2px solid transparent;
  transition: border-color var(--sitt-transition), color var(--sitt-transition);
  white-space: nowrap;
}
.sitt-navlink:hover { border-bottom-color: var(--sitt-honey); }
.sitt-navlink--current { border-bottom-color: var(--sitt-ink); }

@media (max-width: 860px) {
  .sitt-header__bar { flex-wrap: wrap; }
  .sitt-header__nav { order: 3; width: 100%; margin-inline-start: 0; overflow-x: auto; }
  .sitt-header__actions { margin-inline-start: auto; }
}

/* -------------------------------------------------------------------- hero */

.sitt-hero {
  position: relative; background: var(--sitt-paper-alt);
  background-size: cover; background-position: center;
  padding-block: clamp(56px, 11vw, 132px);
}
.sitt-hero__scrim { position: absolute; inset: 0; }
.sitt-hero--image .sitt-hero__scrim {
  background: linear-gradient(90deg, rgba(243,235,218,.96) 0%,
                                     rgba(243,235,218,.86) 46%,
                                     rgba(243,235,218,.30) 100%);
}
.sitt-hero__inner { position: relative; max-width: 46ch; }
.sitt-hero__eyebrow {
  margin: 0 0 .7rem; font-size: .68rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--sitt-ink-faint);
}
.sitt-hero__title {
  margin: 0; font-family: var(--sitt-font-serif); font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1.08;
  text-transform: uppercase; color: var(--sitt-ink); text-wrap: balance;
}
.sitt-hero__sub {
  margin: 1rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--sitt-ink-muted);
}
.sitt-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.7rem; }

/* ----------------------------------------------------------------- buttons */

.sitt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--sitt-control-radius);
  font-family: var(--sitt-font-mono); font-size: .74rem;
  letter-spacing: .13em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background var(--sitt-transition), color var(--sitt-transition),
              border-color var(--sitt-transition);
}
.sitt-btn--sm { min-height: var(--sitt-control-height-sm); padding-inline: var(--sitt-control-pad-x-sm); font-size: .68rem; }
.sitt-btn--md { min-height: var(--sitt-control-height-md); padding-inline: var(--sitt-control-pad-x-md); }
.sitt-btn--lg { min-height: var(--sitt-control-height-lg); padding-inline: var(--sitt-control-pad-x-lg); font-size: .8rem; }
.sitt-btn--block { display: flex; width: 100%; }

.sitt-btn--primary { background: var(--sitt-ink); color: var(--sitt-paper); }
.sitt-btn--primary:hover { background: #2f2b28; }
.sitt-btn--secondary {
  background: transparent; color: var(--sitt-ink); border-color: var(--sitt-ink);
}
.sitt-btn--secondary:hover { background: var(--sitt-ink); color: var(--sitt-paper); }
.sitt-btn--honey { background: var(--sitt-honey); color: var(--sitt-ink); }
.sitt-btn--honey:hover { background: var(--sitt-amber); }
.sitt-btn--ghost { background: transparent; color: var(--sitt-ink); border-color: var(--sitt-rule); }
.sitt-btn--ghost:hover { border-color: var(--sitt-ink); }
.sitt-btn--danger { background: var(--sitt-danger-fill); color: var(--sitt-paper); }
.sitt-btn--danger:hover { filter: brightness(.9); }

.sitt-btn:disabled, .sitt-btn[aria-disabled="true"] {
  opacity: var(--sitt-disabled-opacity); cursor: not-allowed;
}
.sitt-btn__icon { display: inline-flex; line-height: 0; }

/* One focus treatment for everything focusable. */
.sitt-btn:focus-visible, .sitt-navlink:focus-visible, .sitt-input:focus-visible,
.sitt-tile:focus-visible, .sitt-collcard:focus-visible, .sitt-tabs__tab:focus-visible,
.sitt-pager__num:focus-visible, .sitt-pager__step:focus-visible,
.sitt-crumb a:focus-visible, .sitt-sitefooter a:focus-visible {
  outline: var(--sitt-focus-ring);
  outline-offset: var(--sitt-focus-offset);
}

/* ------------------------------------------------------------------ fields */

.sitt-field { display: grid; gap: 5px; }
.sitt-field__label {
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sitt-ink);
}
.sitt-field__req { color: var(--sitt-danger-text); margin-inline-start: 3px; }
.sitt-input {
  width: 100%; min-height: var(--sitt-control-height-md);
  padding: 8px 12px;
  font-family: var(--sitt-font-mono); font-size: .84rem;
  color: var(--sitt-ink); background: var(--sitt-surface);
  border: 1px solid var(--sitt-rule); border-radius: var(--sitt-control-radius);
  transition: border-color var(--sitt-transition);
}
.sitt-input::placeholder { color: var(--sitt-ink-faint); }
.sitt-input:hover { border-color: var(--sitt-tan); }
.sitt-input:focus { border-color: var(--sitt-ink); outline: none; }
.sitt-input:disabled { opacity: var(--sitt-disabled-opacity); cursor: not-allowed; }
.sitt-input--invalid { border-color: var(--sitt-danger-fill); }
textarea.sitt-input { min-height: auto; resize: vertical; line-height: 1.55; }
.sitt-field__msg { margin: 0; font-size: .7rem; color: var(--sitt-ink-faint); }
.sitt-field__msg--error { color: var(--sitt-danger-text); }

/* ------------------------------------------------------- badges + notices */

.sitt-badge {
  display: inline-block; padding: 3px 8px;
  border-radius: var(--sitt-radius-chip);
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--sitt-paper-alt); color: var(--sitt-ink);
}
.sitt-badge--success { background: var(--sitt-success-fill); color: var(--sitt-paper); }
.sitt-badge--warning { background: var(--sitt-warning-fill); color: var(--sitt-ink); }
.sitt-badge--danger  { background: var(--sitt-danger-fill);  color: var(--sitt-paper); }
.sitt-badge--info    { background: var(--sitt-info-fill);    color: var(--sitt-paper); }

.sitt-notice {
  display: flex; align-items: flex-start; gap: var(--sitt-space-md);
  padding: var(--sitt-space-md) var(--sitt-space-lg);
  border-left: 3px solid var(--sitt-info-fill);
  background: var(--sitt-info-tint);
  font-size: .8rem; line-height: 1.55;
}
.sitt-notice > div:first-child { flex: 1; }
.sitt-notice__title { display: block; color: var(--sitt-ink); margin-bottom: 2px; }
.sitt-notice--success { border-left-color: var(--sitt-success-fill); background: var(--sitt-success-tint); }
.sitt-notice--warning { border-left-color: var(--sitt-warning-fill); background: var(--sitt-warning-tint); }
.sitt-notice--danger  { border-left-color: var(--sitt-danger-fill);  background: var(--sitt-danger-tint); }

/* ---------------------------------------------------------------- commerce */

.sitt-tilegrid {
  display: grid; gap: var(--sitt-space-lg);
  grid-template-columns: repeat(auto-fill, minmax(var(--sitt-tile-min, 220px), 1fr));
}

.sitt-tile {
  display: block; text-decoration: none; color: inherit;
  background: var(--sitt-paper-tint);
  border: 1px solid var(--sitt-rule);
  border-radius: var(--sitt-radius-card);
  padding: 10px 10px 14px;
  transition: box-shadow var(--sitt-transition), transform var(--sitt-transition),
              border-color var(--sitt-transition);
}
a.sitt-tile:hover {
  box-shadow: var(--sitt-elevation-md);
  border-color: var(--sitt-tan);
  transform: translateY(-2px);
}
.sitt-tile__img {
  position: relative; background: var(--sitt-surface);
  border-radius: var(--sitt-radius-image);
  aspect-ratio: 1 / 1; display: grid; place-items: center;
  padding: 12px; overflow: hidden;
}
.sitt-tile__img img { max-width: 100%; max-height: 100%; display: block; }
.sitt-tile__ph {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sitt-ink-faint);
}
.sitt-tile__badge { position: absolute; top: 8px; left: 8px; }
.sitt-tile__coll {
  display: inline-block; margin-top: 10px; padding: 2px 7px;
  border-radius: var(--sitt-radius-chip);
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
}
.sitt-tile__name {
  margin: 8px 0 0; font-size: .84rem; line-height: 1.35;
  font-weight: 400; color: var(--sitt-ink);
}
.sitt-tile__meta { margin: 4px 0 0; font-size: .66rem; color: var(--sitt-ink-faint); }
.sitt-tile__price {
  margin: 8px 0 0; display: flex; gap: 10px; align-items: baseline;
  font-size: .72rem; color: var(--sitt-ink-muted);
}
.sitt-tile__price b { color: var(--sitt-ink); font-weight: 400; }

.sitt-collcard {
  display: block; text-decoration: none; color: inherit;
  background: var(--sitt-surface); border-radius: var(--sitt-radius-card);
  overflow: hidden; box-shadow: var(--sitt-elevation-sm);
  transition: box-shadow var(--sitt-transition), transform var(--sitt-transition);
}
a.sitt-collcard:hover { box-shadow: var(--sitt-elevation-md); transform: translateY(-2px); }
.sitt-collcard__img { position: relative; aspect-ratio: 3 / 2; background: var(--sitt-paper-alt); }
.sitt-collcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sitt-collcard__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; }
.sitt-collcard__body { padding: 14px 16px 18px; }
.sitt-collcard__body h3 {
  margin: 0; font-size: .88rem; font-weight: 400; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sitt-ink);
}
.sitt-collcard__count { font-size: .68rem; color: var(--sitt-ink-faint); }
.sitt-collcard__body p { margin: .5rem 0 0; font-size: .76rem; line-height: 1.5; }

/* -------------------------------------------------------------- navigation */

.sitt-crumb { font-size: .7rem; display: flex; flex-wrap: wrap; gap: 2px; }
.sitt-crumb a { color: var(--sitt-ink-muted); text-decoration: none; }
.sitt-crumb a:hover { color: var(--sitt-ink); text-decoration: underline; }
.sitt-crumb__sep { margin-inline: 8px; color: var(--sitt-ink-faint); }
.sitt-crumb [aria-current="page"] { color: var(--sitt-ink); }

.sitt-pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sitt-pager__num, .sitt-pager__step {
  min-width: 36px; min-height: 36px; padding-inline: 10px;
  background: transparent; border: 1px solid var(--sitt-rule);
  border-radius: var(--sitt-control-radius);
  font-family: var(--sitt-font-mono); font-size: .72rem; color: var(--sitt-ink);
  cursor: pointer; transition: border-color var(--sitt-transition),
                               background var(--sitt-transition);
}
.sitt-pager__num:hover:not(:disabled), .sitt-pager__step:hover:not(:disabled) {
  border-color: var(--sitt-ink);
}
.sitt-pager__num--current { background: var(--sitt-ink); color: var(--sitt-paper); border-color: var(--sitt-ink); }
.sitt-pager__step { letter-spacing: .1em; text-transform: uppercase; font-size: .66rem; }
.sitt-pager__step:disabled { opacity: var(--sitt-disabled-opacity); cursor: not-allowed; }
.sitt-pager__gap { padding-inline: 4px; color: var(--sitt-ink-faint); }

.sitt-tabs__list { display: flex; gap: 2px; border-bottom: 1px solid var(--sitt-rule); }
.sitt-tabs__tab {
  background: transparent; border: none; cursor: pointer;
  padding: 10px 16px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-family: var(--sitt-font-mono); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sitt-ink-muted);
  transition: color var(--sitt-transition), border-color var(--sitt-transition);
}
.sitt-tabs__tab:hover { color: var(--sitt-ink); }
.sitt-tabs__tab--active { color: var(--sitt-ink); border-bottom-color: var(--sitt-honey); }
.sitt-tabs__panel { padding-top: var(--sitt-space-lg); font-size: .82rem; line-height: 1.6; }

/* ------------------------------------------------------------ site footer */

.sitt-sitefooter { background: var(--sitt-ink); color: var(--sitt-paper); padding-block: clamp(30px, 5vw, 56px); }
.sitt-sitefooter__grid {
  display: grid; gap: var(--sitt-space-xl);
  grid-template-columns: minmax(200px, 1.4fr) repeat(auto-fit, minmax(130px, 1fr));
}
.sitt-sitefooter__brand p { margin: .9rem 0 0; font-size: .74rem; line-height: 1.6; opacity: .78; max-width: 34ch; }
.sitt-sitefooter__col { display: flex; flex-direction: column; gap: 7px; }
.sitt-sitefooter__col h4 {
  margin: 0 0 4px; font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sitt-honey); font-weight: 400;
}
.sitt-sitefooter a { color: var(--sitt-paper); text-decoration: none; font-size: .76rem; opacity: .82; }
.sitt-sitefooter a:hover { opacity: 1; text-decoration: underline; }
.sitt-sitefooter__base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-top: var(--sitt-space-xl); padding-top: var(--sitt-space-md);
  border-top: 1px solid rgba(243,235,218,.18);
  font-size: .68rem; opacity: .7;
}

@media (max-width: 560px) {
  .sitt-sitefooter__grid { grid-template-columns: 1fr; }
  .sitt-hero__actions .sitt-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sitt-btn, .sitt-tile, .sitt-collcard, .sitt-navlink, .sitt-input,
  .sitt-tabs__tab, .sitt-pager__num, .sitt-pager__step { transition: none; }
  a.sitt-tile:hover, a.sitt-collcard:hover { transform: none; }
}

/* Touch. The sm control height suits a dense desktop toolbar but is under the
 * minimum touch target, so on a coarse pointer every control grows to it. */
@media (pointer: coarse) {
  .sitt-btn--sm, .sitt-pager__num, .sitt-pager__step {
    min-height: var(--sitt-control-min-target);
  }
  .sitt-btn--md { min-height: max(var(--sitt-control-height-md), var(--sitt-control-min-target)); }
  .sitt-input { min-height: var(--sitt-control-min-target); }
  .sitt-navlink { padding-block: 11px; }
  .sitt-tabs__tab { min-height: var(--sitt-control-min-target); }
}