/*
  TRACK/FIELD — base layer
  Typography, containers, grid, rules, buttons, forms, focus.
  Loaded after Dawn's base.css so it defines the brand surface.
*/

/* ---- Page ---------------------------------------------------------------- */

body {
  background-color: var(--tf-color-bg);
  color: var(--tf-color-text);
  font-family: var(--tf-font-body);
  font-size: var(--tf-text-base);
  line-height: var(--tf-leading-normal);
  letter-spacing: var(--tf-tracking-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Typography ---------------------------------------------------------- */

.tf-display-xl,
.tf-display-lg,
.tf-display-md,
.tf-display-sm {
  font-family: var(--tf-font-display);
  font-weight: var(--tf-weight-medium);
  line-height: var(--tf-leading-tight);
  letter-spacing: var(--tf-tracking-display);
  text-wrap: balance;
  margin: 0;
}

.tf-display-xl { font-size: var(--tf-text-display-xl); }
.tf-display-lg { font-size: var(--tf-text-display-lg); }
.tf-display-md { font-size: var(--tf-text-display-md); line-height: var(--tf-leading-snug); }
.tf-display-sm { font-size: var(--tf-text-display-sm); line-height: var(--tf-leading-snug); }

/* Section headings and small caps labels are tracked out, never faux-bolded */
.tf-eyebrow {
  font-family: var(--tf-font-display);
  font-size: var(--tf-text-eyebrow);
  font-weight: var(--tf-weight-medium);
  letter-spacing: var(--tf-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tf-color-text-muted);
  margin: 0;
}

.tf-section-heading {
  font-family: var(--tf-font-display);
  font-size: var(--tf-text-display-sm);
  font-weight: var(--tf-weight-medium);
  letter-spacing: var(--tf-tracking-wide);
  text-transform: uppercase;
  margin: 0;
}

/* Brand statement: all caps, tracked out, set small — the identity-block voice */
.tf-statement {
  font-family: var(--tf-font-display);
  font-size: var(--tf-text-sm);
  font-weight: var(--tf-weight-regular);
  line-height: var(--tf-leading-relaxed);
  letter-spacing: var(--tf-tracking-eyebrow);
  text-transform: uppercase;
  max-width: 52ch;
}

.tf-body-lg { font-size: var(--tf-text-lg); line-height: var(--tf-leading-relaxed); }
.tf-body-sm { font-size: var(--tf-text-sm); }
.tf-body-xs { font-size: var(--tf-text-xs); }

.tf-muted { color: var(--tf-color-text-muted); }
.tf-subtle { color: var(--tf-color-text-subtle); }

/* Editorial reading measure — text never exceeds --tf-measure */
.tf-prose {
  max-width: var(--tf-measure);
  font-size: var(--tf-text-lg);
  line-height: var(--tf-leading-relaxed);
}

/* Paragraph spacing equal to the text size — ties rhythm to the type, not a fixed px */
.tf-prose > * + * { margin-top: 1em; }

/* ---- Layout -------------------------------------------------------------- */

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

.tf-container--wide { max-width: var(--tf-container-wide); }
.tf-container--narrow { max-width: var(--tf-container-narrow); }
.tf-container--flush { padding-inline: 0; max-width: none; }

/* Content column: left-aligned inside the page frame, so text lines up with the
   left edge of full-width imagery rather than floating in the middle. */
.tf-content { max-width: var(--tf-container-content); }
.tf-content > * { max-width: var(--tf-measure); }
.tf-content > .tf-content-wide { max-width: none; }

/* Top padding only. Padding on both sides makes adjacent sections add up — a
   72px bottom against a 48px top reads as a 120px hole. One section, one gap. */
.tf-section { padding-block: var(--tf-section-gap) 0; }
.tf-section--tight { padding-block: var(--tf-section-gap-tight) 0; }

/* The last section still needs air before the footer */
main > :last-child { padding-bottom: var(--tf-section-gap); }

.tf-grid {
  display: grid;
  gap: var(--tf-stack-lg) var(--tf-stack-md);
  grid-template-columns: repeat(var(--tf-grid-cols, 2), minmax(0, 1fr));
}

@media screen and (min-width: 750px) {
  .tf-grid { --tf-grid-cols: 3; }
  .tf-grid--2 { --tf-grid-cols: 2; }
  .tf-grid--4 { --tf-grid-cols: 4; }
}

@media screen and (min-width: 990px) {
  .tf-grid--4 { --tf-grid-cols: 4; }
  .tf-grid--5 { --tf-grid-cols: 5; }
}

/* Section header: title left, action right, hairline beneath */
.tf-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tf-space-4);
  padding-bottom: var(--tf-stack-sm);
  border-bottom: var(--tf-hairline) solid var(--tf-color-border);
  margin-bottom: var(--tf-stack-md);
}

/* ---- Rules --------------------------------------------------------------- */

.tf-rule {
  border: 0;
  border-top: var(--tf-hairline) solid var(--tf-color-border);
  margin: 0;
}

.tf-rule--strong { border-color: var(--tf-color-border-strong); }

/* ---- Buttons ------------------------------------------------------------- */

.tf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tf-space-2);
  min-height: var(--tf-control-height);
  padding: 0 var(--tf-control-padding-x);
  border: var(--tf-hairline) solid transparent;
  border-radius: var(--tf-radius-none);
  font-family: var(--tf-font-display);
  font-size: var(--tf-text-sm);
  font-weight: var(--tf-weight-medium);
  letter-spacing: var(--tf-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--tf-duration) var(--tf-ease),
    color var(--tf-duration) var(--tf-ease),
    border-color var(--tf-duration) var(--tf-ease);
}

.tf-btn--primary {
  background-color: var(--tf-color-text);
  color: var(--tf-color-inverse-text);
  border-color: var(--tf-color-text);
}

.tf-btn--primary:hover { background-color: #000; border-color: #000; }

.tf-btn--secondary {
  background-color: transparent;
  color: var(--tf-color-text);
  border-color: var(--tf-color-border-strong);
}

.tf-btn--secondary:hover { border-color: var(--tf-color-text); background-color: var(--tf-warm-white); }

.tf-btn--text {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tf-color-text);
  text-decoration: none;
  position: relative;
}

/* Underline grows from the left — the only motion on a text link */
.tf-btn--text::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: var(--tf-hairline);
  background-color: currentColor;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--tf-duration) var(--tf-ease);
}

.tf-btn--text:hover::after { transform: scaleX(1); }

.tf-btn[disabled],
.tf-btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}

.tf-btn--full { width: 100%; }

/* ---- Forms --------------------------------------------------------------- */

.tf-field { display: flex; flex-direction: column; gap: var(--tf-space-2); }

.tf-label {
  font-family: var(--tf-font-display);
  font-size: var(--tf-text-eyebrow);
  font-weight: var(--tf-weight-medium);
  letter-spacing: var(--tf-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tf-color-text-muted);
}

.tf-input,
.tf-select,
.tf-textarea {
  width: 100%;
  min-height: var(--tf-control-height);
  padding: var(--tf-space-3) 0;
  background-color: transparent;
  border: 0;
  border-bottom: var(--tf-hairline) solid var(--tf-color-border-strong);
  border-radius: var(--tf-radius-none);
  color: var(--tf-color-text);
  font-family: var(--tf-font-body);
  font-size: var(--tf-text-base);
  transition: border-color var(--tf-duration) var(--tf-ease);
}

.tf-textarea { min-height: 8rem; padding-block: var(--tf-space-3); resize: vertical; }

.tf-input:hover,
.tf-select:hover,
.tf-textarea:hover { border-bottom-color: var(--tf-color-text); }

.tf-input::placeholder,
.tf-textarea::placeholder { color: var(--tf-color-text-subtle); }

.tf-field-note { font-size: var(--tf-text-xs); color: var(--tf-color-text-subtle); }

.tf-field-error { font-size: var(--tf-text-sm); color: var(--tf-color-error); }

/* ---- Focus --------------------------------------------------------------- */

/* In-page links (the hero chevron, /#contact) glide rather than jump */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

:focus-visible {
  outline: var(--tf-focus-ring-width) solid var(--tf-color-focus);
  outline-offset: var(--tf-focus-ring-offset);
}

/* ---- Media --------------------------------------------------------------- */

.tf-media {
  position: relative;
  overflow: hidden;
  background-color: var(--tf-color-surface);
}

.tf-media > img,
.tf-media > svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Artwork and detail shots are never force-cropped */
.tf-media--contain > img { object-fit: contain; }

.tf-media--product { aspect-ratio: var(--tf-ratio-product); }
.tf-media--editorial { aspect-ratio: var(--tf-ratio-editorial); }
.tf-media--tile { aspect-ratio: var(--tf-ratio-tile); }

.tf-media__zoom {
  transition: transform var(--tf-duration-slow) var(--tf-ease);
}

@media (hover: hover) {
  a:hover .tf-media__zoom { transform: scale(1.02); }
}

/* Product and hero photography sit on a dark backdrop rather than the page */
.tf-media--backdrop { background-color: var(--tf-color-photo-backdrop); }

/* ---- On dark ------------------------------------------------------------- */

.tf-on-dark {
  background-color: var(--tf-color-inverse-bg);
  color: var(--tf-color-text-on-dark);
}

.tf-on-dark .tf-eyebrow,
.tf-on-dark .tf-muted { color: var(--tf-color-text-on-dark-muted); }

.tf-on-dark .tf-rule { border-color: var(--tf-color-border-on-dark); }

.tf-on-dark .tf-btn--primary {
  background-color: var(--tf-color-text-on-dark);
  color: var(--tf-color-text);
  border-color: var(--tf-color-text-on-dark);
}

.tf-on-dark .tf-btn--secondary {
  color: var(--tf-color-text-on-dark);
  border-color: var(--tf-color-border-on-dark);
}

.tf-on-dark .tf-btn--secondary:hover { border-color: var(--tf-color-text-on-dark); }

.tf-on-dark :focus-visible { outline-color: var(--tf-color-text-on-dark); }

/* ---- Overlay tile -------------------------------------------------------- */
/* Category tiles: image, flat scrim (never a gradient), label over the top */

.tf-tile-overlay {
  position: relative;
  display: block;
  overflow: hidden;
  color: var(--tf-color-text-on-dark);
  text-decoration: none;
  background-color: var(--tf-color-photo-backdrop);
}

.tf-tile-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--tf-scrim-strong);
  transition: background-color var(--tf-duration) var(--tf-ease);
}

.tf-tile-overlay:hover::after { background-color: var(--tf-scrim-hover); }

.tf-tile-overlay__label {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  margin: 0;
  padding: var(--tf-space-5);
  font-family: var(--tf-font-display);
  font-size: var(--tf-text-sm);
  font-weight: var(--tf-weight-medium);
  letter-spacing: var(--tf-tracking-eyebrow);
  text-transform: uppercase;
}

/* ---- Breadcrumbs --------------------------------------------------------- */

.tf-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tf-space-2);
  margin: 0 0 var(--tf-space-6);
  padding: 0;
  list-style: none;
  font-size: var(--tf-text-xs);
  letter-spacing: var(--tf-tracking-wide);
  text-transform: uppercase;
  color: var(--tf-color-text-subtle);
}

.tf-breadcrumbs li + li::before {
  content: '/';
  margin-inline-end: var(--tf-space-2);
  color: var(--tf-color-text-subtle);
}

.tf-breadcrumbs a { color: var(--tf-color-text-muted); text-decoration: none; }
.tf-breadcrumbs a:hover { color: var(--tf-color-text); }

/* ---- Specification list -------------------------------------------------- */
/* Only populated fields are ever rendered — no empty labels */

.tf-specs {
  display: grid;
  gap: var(--tf-stack-md);
  margin: 0;
}

.tf-specs__label {
  font-family: var(--tf-font-display);
  font-size: var(--tf-text-eyebrow);
  font-weight: var(--tf-weight-medium);
  letter-spacing: var(--tf-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tf-color-text-muted);
}

.tf-specs__value {
  margin: var(--tf-space-1) 0 0;
  font-size: var(--tf-text-sm);
  line-height: var(--tf-leading-normal);
}

/* ---- Trust strip --------------------------------------------------------- */

.tf-trust {
  display: grid;
  gap: var(--tf-stack-md);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block: var(--tf-stack-md);
  border-block: var(--tf-hairline) solid var(--tf-color-border);
}

.tf-trust__title { margin: 0; }

.tf-trust__body { margin: var(--tf-space-1) 0 0; font-size: var(--tf-text-sm); color: var(--tf-color-text-muted); }

@media screen and (min-width: 750px) {
  .tf-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tf-space-6); }
}

/* ---- States -------------------------------------------------------------- */

.tf-sold {
  font-family: var(--tf-font-display);
  font-size: var(--tf-text-eyebrow);
  font-weight: var(--tf-weight-medium);
  letter-spacing: var(--tf-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tf-color-sold);
}

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

/* Development/demo content marker — must remain visible while sample data is in use */
.tf-demo-flag {
  display: inline-block;
  padding: var(--tf-space-1) var(--tf-space-2);
  background-color: var(--tf-color-accent-yellow);
  color: var(--tf-color-text);
  font-size: var(--tf-text-xs);
  letter-spacing: var(--tf-tracking-wide);
  text-transform: uppercase;
}

/* ---- Form controls on dark ------------------------------------------------ */
/* The default input is a hairline underline on paper; on a charcoal panel that
   line disappears, so fields become subtly filled with a visible boundary. */

.tf-on-dark .tf-label { color: var(--tf-color-text-on-dark-muted); }

.tf-on-dark .tf-input,
.tf-on-dark .tf-select,
.tf-on-dark .tf-textarea {
  background-color: rgba(247, 245, 241, 0.08);
  border: var(--tf-hairline) solid var(--tf-color-border-on-dark);
  padding-inline: var(--tf-space-4);
  color: var(--tf-color-text-on-dark);
}

.tf-on-dark .tf-input::placeholder,
.tf-on-dark .tf-textarea::placeholder { color: var(--tf-color-text-on-dark-muted); }

.tf-on-dark .tf-input:hover,
.tf-on-dark .tf-select:hover,
.tf-on-dark .tf-textarea:hover { border-color: var(--tf-color-text-on-dark); }