/*
  FOUND OBJECTS — 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(--fo-color-bg);
  color: var(--fo-color-text);
  font-family: var(--fo-font-body);
  font-size: var(--fo-text-base);
  line-height: var(--fo-leading-normal);
  letter-spacing: var(--fo-tracking-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

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

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

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

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

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

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

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

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

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

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

.fo-container--wide { max-width: var(--fo-container-wide); }
.fo-container--narrow { max-width: var(--fo-container-narrow); }
.fo-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. */
.fo-content { max-width: var(--fo-container-content); }
.fo-content > * { max-width: var(--fo-measure); }
.fo-content > .fo-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. */
.fo-section { padding-block: var(--fo-section-gap) 0; }
.fo-section--tight { padding-block: var(--fo-section-gap-tight) 0; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fo-trust__title { margin: 0; }

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

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

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

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

.fo-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 */
.fo-demo-flag {
  display: inline-block;
  padding: var(--fo-space-1) var(--fo-space-2);
  background-color: var(--fo-color-accent-yellow);
  color: var(--fo-color-text);
  font-size: var(--fo-text-xs);
  letter-spacing: var(--fo-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. */

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

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

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

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