/*
  FOUND OBJECTS — page layout

  Implements the design canvas (claude.ai/design — "Found Objects website design",
  pages: Found Objects · Shop · Staging). Every value here comes from that file;
  where the canvas hardcoded a hex or a pixel gap, it is written as the token that
  already carried the same value.

  The canvas is a desktop artboard. Anything below 990px is this file's own work —
  the design has no mobile board, so the rule is: collapse columns, keep the type
  scale, never reflow a section into something the design does not contain.
*/

/* ---- Page frame ---------------------------------------------------------- */
/* The design sets every page in one 1680px frame with a flat 48px gutter. */

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

/* Links are charcoal and unstyled by default; rust on hover is the one place an
   accent touches the chrome. Prose links that need to be recognisable as links
   underline themselves — see .fo-contact__email. */
a { color: var(--fo-color-text); text-decoration: none; }
a:hover { color: var(--fo-rust); }

/* ---- Hero (homepage) ------------------------------------------------------ */
/*
  Full-bleed 16:9 photograph. The statement sits in a paper panel, never on the
  bare image: at 0.88 alpha the panel composites to rgb(217,216,212) over pure
  black, which holds charcoal body text at ~11:1 no matter what is swapped in.
  Do not lower that alpha without re-measuring against black. No backdrop-filter.
*/

.fo-hero {
  position: relative;
  margin-inline: calc(var(--fo-gutter) * -1);
}

.fo-hero__media {
  position: relative;
  aspect-ratio: var(--fo-ratio-hero);
  min-height: 20rem;
  overflow: hidden;
  background-color: var(--fo-color-photo-backdrop);
}

.fo-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.fo-hero__panel {
  background-color: rgba(247, 245, 241, 0.88);
  color: var(--fo-color-text);
  padding: var(--fo-stack-md);
}

.fo-hero__body {
  margin: 0;
  font-family: var(--fo-font-body);
  font-size: var(--fo-text-lg);
  line-height: var(--fo-leading-normal);
  text-wrap: pretty;
}

.fo-hero__eyebrow { margin: var(--fo-stack-md) 0 0; }

@media screen and (min-width: 750px) {
  /* Panel lifts off the image and pins to the right, vertically centred */
  .fo-hero__panel {
    position: absolute;
    top: 50%;
    right: var(--fo-stack-lg);
    transform: translateY(-50%);
    max-width: 26.25rem;   /* 420px */
    padding: var(--fo-stack-lg);
  }

  .fo-hero__body { font-size: 1.375rem; }   /* 22px */
}

/* ---- Section head --------------------------------------------------------- */
/* A tracked-out label over a hairline — the shop's "Recently found". */

.fo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fo-stack-md);
  padding-bottom: var(--fo-stack-sm);
  border-bottom: var(--fo-hairline) solid var(--fo-color-border);
}

.fo-head__title {
  margin: 0;
  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);
}

.fo-head__count { margin: 0; }

/* ---- Object grid ---------------------------------------------------------- */

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

@media screen and (min-width: 750px) {
  .fo-objects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.fo-object {
  display: flex;
  flex-direction: column;
  gap: var(--fo-stack-sm);
}

.fo-object__link {
  display: block;
  position: relative;
  aspect-ratio: var(--fo-ratio-product);
  background-color: var(--fo-color-photo-backdrop);
}

/* Objects are never force-cropped — an armchair that loses its arms is a lie
   about the object, and the whole page is an argument that we describe things
   accurately. contain, always. */
.fo-object__link img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.fo-object__title {
  margin: 0;
  font-family: var(--fo-font-display);
  font-size: 0.9375rem;   /* 15px */
  font-weight: var(--fo-weight-medium);
  line-height: var(--fo-leading-tight);
}

.fo-object__title a { color: inherit; text-decoration: none; }
.fo-object__title a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.fo-object__meta {
  margin: var(--fo-stack-sm) 0 0;
  font-family: var(--fo-font-body);
  font-size: var(--fo-text-sm);
  line-height: var(--fo-leading-normal);
  color: var(--fo-color-text-muted);
}

.fo-object__price {
  margin: var(--fo-stack-sm) 0 0;
  font-family: var(--fo-font-display);
  font-size: var(--fo-text-sm);
  font-weight: var(--fo-weight-medium);
  letter-spacing: 0.02em;
}

/* ---- Object detail -------------------------------------------------------- */

.fo-detail {
  margin-top: var(--fo-section-gap);
  padding-top: var(--fo-stack-lg);
  border-top: var(--fo-hairline) solid var(--fo-color-border);
}

.fo-detail__sku { margin: 0 0 var(--fo-stack-md); }

.fo-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fo-stack-lg);
  align-items: start;
}

@media screen and (min-width: 750px) {
  .fo-detail__grid { grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); }
}

.fo-detail__media {
  position: relative;
  aspect-ratio: var(--fo-ratio-product);
  background-color: var(--fo-color-photo-backdrop);
}

.fo-detail__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.fo-detail__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fo-stack-sm);
  margin-top: var(--fo-stack-sm);
}

.fo-detail__thumb {
  position: relative;
  aspect-ratio: var(--fo-ratio-product);
  padding: 0;
  background-color: var(--fo-color-photo-backdrop);
  border: var(--fo-hairline) solid var(--fo-color-border-strong);
  cursor: pointer;
  transition: border-color var(--fo-duration) var(--fo-ease);
}

.fo-detail__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.fo-detail__thumb:hover,
.fo-detail__thumb[aria-current='true'] { border-color: var(--fo-color-text); }

.fo-detail__body { max-width: var(--fo-measure); }

.fo-detail__title {
  margin: 0;
  font-family: var(--fo-font-display);
  font-size: 1.75rem;   /* 28px */
  font-weight: var(--fo-weight-medium);
  line-height: var(--fo-leading-tight);
  letter-spacing: -0.01em;
}

.fo-detail__price {
  margin: var(--fo-stack-sm) 0 0;
  font-family: var(--fo-font-display);
  font-size: var(--fo-text-base);
  font-weight: var(--fo-weight-medium);
}

.fo-detail__summary {
  margin: var(--fo-stack-md) 0 0;
  font-family: var(--fo-font-body);
  font-size: var(--fo-text-base);
  line-height: var(--fo-leading-normal);
  text-wrap: pretty;
}

.fo-detail__note {
  margin: var(--fo-stack-md) 0 0;
  font-family: var(--fo-font-body);
  font-size: var(--fo-text-base);
  line-height: var(--fo-leading-normal);
  color: var(--fo-color-text-muted);
  text-wrap: pretty;
}

/* Spec table: label column shrinks to content, value column takes the rest.
   Only populated fields are ever emitted — see build.py. */
.fo-detail__specs {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--fo-stack-sm) var(--fo-stack-md);
  margin: var(--fo-stack-lg) 0 0;
  padding-top: var(--fo-stack-md);
  border-top: var(--fo-hairline) solid var(--fo-color-border);
  font-size: var(--fo-text-sm);
}

.fo-detail__specs dt {
  margin: 0;
  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-detail__specs dd {
  margin: 0;
  font-family: var(--fo-font-body);
  line-height: var(--fo-leading-normal);
}

.fo-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fo-stack-sm);
  margin-top: var(--fo-stack-lg);
}

/* ---- Staging -------------------------------------------------------------- */

.fo-staging { max-width: var(--fo-container-content); }

.fo-staging__title {
  max-width: 56.25rem;   /* 900px */
  margin: var(--fo-stack-md) 0 0;
  font-family: var(--fo-font-display);
  font-size: clamp(2.5rem, 5.2vw, 4.75rem);   /* 40–76px */
  font-weight: var(--fo-weight-regular);
  line-height: var(--fo-leading-tight);
  letter-spacing: var(--fo-tracking-display);
  text-wrap: pretty;
}

.fo-staging__blurb { max-width: var(--fo-measure); margin-top: var(--fo-stack-lg); }

.fo-staging__blurb p {
  margin: 0;
  font-family: var(--fo-font-body);
  font-size: var(--fo-text-lg);
  line-height: var(--fo-leading-normal);
  text-wrap: pretty;
}

.fo-staging__blurb p + p { margin-top: var(--fo-stack-md); }

/* Terms the founder has not signed off on stay visibly provisional */
.fo-staging__draft {
  font-size: var(--fo-text-sm) !important;
  color: var(--fo-color-text-muted);
}

.fo-staging__cta { display: inline-block; margin-top: var(--fo-stack-lg); }

/* ---- Projects ------------------------------------------------------------- */

.fo-projects__title {
  margin: 0;
  font-family: var(--fo-font-display);
  font-size: var(--fo-text-display-sm);
  font-weight: var(--fo-weight-medium);
  letter-spacing: var(--fo-tracking-eyebrow);
  text-transform: uppercase;
  line-height: var(--fo-leading-tight);
}

.fo-projects__note {
  max-width: var(--fo-measure);
  margin: var(--fo-stack-md) 0 0;
  padding-top: var(--fo-stack-md);
  border-top: var(--fo-hairline) solid var(--fo-color-border);
  font-family: var(--fo-font-body);
  font-size: 0.9375rem;
  line-height: var(--fo-leading-normal);
  color: var(--fo-color-text-muted);
  text-wrap: pretty;
}

.fo-projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
  gap: var(--fo-stack-lg) var(--fo-stack-md);
  margin-top: var(--fo-stack-lg);
}

.fo-project { margin: 0; }

.fo-project__media {
  position: relative;
  aspect-ratio: var(--fo-ratio-hero);
  background-color: var(--fo-color-photo-backdrop);
}

.fo-project__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fo-project figcaption {
  margin: var(--fo-stack-sm) 0 0;
  font-family: var(--fo-font-body);
  font-size: var(--fo-text-sm);
  line-height: var(--fo-leading-normal);
  color: var(--fo-color-text-muted);
}

.fo-project__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);
}

/* ---- Contact -------------------------------------------------------------- */
/* The homepage's second and last section. Light, not dark — it shares the page
   ground and is separated from the footer bar by a hairline only. */

.fo-contact { padding-top: var(--fo-stack-lg); }

.fo-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fo-stack-lg);
  max-width: var(--fo-container-content);
}

@media screen and (min-width: 750px) {
  .fo-contact__grid { grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); }
}

.fo-contact__title { margin: 0; color: var(--fo-color-text); }

.fo-contact__body {
  margin: var(--fo-stack-md) 0 0;
  font-family: var(--fo-font-body);
  font-size: var(--fo-text-base);
  line-height: var(--fo-leading-normal);
  text-wrap: pretty;
}

.fo-contact__email {
  margin: var(--fo-stack-sm) 0 0;
  font-family: var(--fo-font-body);
  font-size: var(--fo-text-base);
  line-height: var(--fo-leading-normal);
}

/* The one prose link on the site, so it carries the underline that says so */
.fo-contact__email a {
  color: var(--fo-color-text-muted);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.fo-contact__email a:hover { color: var(--fo-rust); }

.fo-contact__form { display: flex; flex-direction: column; gap: var(--fo-stack-sm); }

.fo-contact__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--fo-stack-sm);
}

.fo-contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fo-stack-md);
  margin-top: var(--fo-stack-sm);
}

/*
  The design draws boxed fields on the page ground rather than the base layer's
  hairline underline. #5c564c is 5.84:1 against paper, well clear of the 3:1 that
  WCAG 1.4.11 requires of a control boundary.
*/
.fo-contact__form .fo-input,
.fo-contact__form .fo-textarea {
  background-color: var(--fo-color-bg);
  border: var(--fo-hairline) solid var(--fo-color-text-muted);
  padding: var(--fo-stack-sm);
  font-size: 0.9375rem;
}

.fo-contact__form .fo-textarea { min-height: 6rem; }

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