/* About: page-specific styles. Tokens and shared rooms come from base.css. */

/* Hero: the tessera sits in the light; leave floor for the token to overlap. */
.page-hero { --light-x: 50%; --light-y: 78%; padding-bottom: calc(var(--band) + 2.5rem); }
@media (min-width: 62rem) {
  .page-hero { --light-x: 78%; --light-y: 45%; padding-bottom: calc(var(--band) + 5rem); }
}

.about-grid { display: grid; gap: 1.5rem; }
.name-grid { display: grid; gap: 2rem; }

@media (min-width: 62rem) {
  .about-grid { grid-template-columns: 5fr 7fr; gap: 4rem; }
  .name-grid { grid-template-columns: 5fr 6fr; gap: 4.5rem; align-items: start; }
}

/* The token: a physical object lying across the edge of the hero. */
.name-object { position: relative; z-index: 3; }
.tessera-object {
  display: block;
  width: min(100%, 22rem);
  height: auto;
  transform: rotate(-5deg);
  filter: drop-shadow(0 2px 2px rgba(18, 23, 48, 0.35)) drop-shadow(0 14px 18px rgba(18, 23, 48, 0.4));
}
@media (min-width: 62rem) {
  .tessera-object { width: min(100%, 27rem); }
}
@media (max-width: 61.99rem) {
  /* single column: keep the token inside its own room, still lifted onto the hero edge */
  .name-object { margin-top: calc(-1 * clamp(3rem, 8vw, 5rem)); }
  .name-object.overlap-up { margin-top: calc(-1 * clamp(3rem, 8vw, 5rem)); }
}

.name-story { position: relative; }
.name-text h2 { margin-bottom: 1.5rem; }
.name-text h3 { margin-top: 1.75rem; margin-bottom: 0.5rem; }
.name-text h2 + h3 { margin-top: 0; }

/* Lint: the flagged price list sits right under its own text. */
.lint-art { margin: 1.75rem 0 0; position: relative; z-index: 1; }
.lint-art svg { display: block; width: 100%; max-width: 30rem; height: auto; }
.lint-art figcaption { margin-top: 0.5rem; max-width: 30rem; }

/* Where we are: the unlit house, a rehearsal in progress. */
.where { position: relative; overflow: hidden; }
.where .signage {
  top: auto;
  right: auto;
  left: var(--gutter);
  bottom: 0.3em;
}
.where { padding-bottom: calc(var(--band) + clamp(5rem, 15vw, 13rem)); }
.where .wrap { position: relative; z-index: 1; }

/* Contact: the form on a sheet, hanging up into the house. */
.contact-sheet {
  position: relative;
  z-index: 3;
  max-width: 38rem;
}
.contact-form { display: grid; gap: 1.25rem; }
.contact-form textarea { resize: vertical; min-height: 8rem; }
@media (max-width: 61.99rem) {
  .contact .sheet.overlap-up { margin-top: 0; }
}