/* ==========================================================================
   pages.css — the inner pages (docs/pages-spec.md): Work, Case, Contact.
   Loaded on every page (Barba keeps one <head>), after home.css. Inside a .home
   section an em is the prototype's em (see home.css); column math uses
   --about-col and --about-pad. Pages generated by tools/build-pages.mjs.
   ========================================================================== */

/* --- Work ---------------------------------------------------------------------------------------- */
/* The title is the page's hero, at the Home hero's weight and tracking, sized so its one line runs edge to
   edge across the 12 columns ("Some things I've made." is 9.0 of its own em wide: new copy, new size).
   The rows below sit at a quarter of it. */
.work-hero {
  padding: calc(var(--home-header) + 8vh) 0 9vh;
}

.work-hero .home-grid {
  align-items: end;
}

.work-hero__label {
  grid-column: 1 / 4;
  grid-row: 1;
}

.work-hero__count {
  grid-column: 11 / 13;
  grid-row: 1;
  justify-self: end;
}

.work-hero__title {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0.12em 0 0 -0.03em;
  font-size: 12.7em;
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.055em;
  white-space: nowrap;
}

.work-hero__lead {
  grid-column: 7 / 12;
  grid-row: 3;
  margin-top: 5vh;
}

.work-index {
  --work-rule: color-mix(in srgb, var(--dark-brown) 18%, var(--sand));

  position: relative;
  padding-bottom: 18vh;
}

.work-index__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.work-index__item {
  position: relative;
}

/* The rule above each row draws in from the left (js/reveals.js, [data-reveal-rule] drives --rule) */
.work-index__item::before,
.work-index__item:last-child::after {
  content: "";
  position: absolute;
  left: var(--about-pad);
  right: var(--about-pad);
  height: 1px;
  background-color: var(--work-rule);
}

.work-index__item::before {
  top: 0;
  transform: scaleX(var(--rule, 1));
  transform-origin: 0 50%;
}

.work-index__item:last-child::after {
  bottom: 0;
}

.work-row {
  display: grid;
  grid-template-columns: repeat(var(--about-cols), minmax(0, 1fr));
  align-items: baseline;
  margin-inline: var(--about-pad); /* margin, not padding: the focus ring lands on the outer column lines */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.work-row:focus-visible {
  outline: 2px solid var(--main);
  outline-offset: -2px;
}

.work-row__name {
  grid-column: 1 / 9;
  margin: 0;
  padding-block: 0.32em 0.3em;
  font-size: 4.2em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.work-row__sector {
  grid-column: 9 / 12;
  margin: 0;
  font-size: max(13px, 1.15em);
  line-height: 1.3;
}

.work-row__year {
  grid-column: 12 / 13;
  color: color-mix(in srgb, var(--dark-brown) 62%, var(--sand)); /* ≥ 4.5:1; light-stone is not */
  text-align: right;
}

/* The pieces travel with the row: the preview takes them from here; on phones three show as thumbnails */
.work-row__pieces {
  display: none;
}

/* Hovering a row: the others go ghost (js/work/index.js) */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .work-row > * {
    transition: color var(--d-smooth) var(--e-smooth);
  }

  .work-index.is-peeking .work-row:not(.is-on) > * {
    color: color-mix(in srgb, var(--dark-brown) 22%, var(--sand));
  }
}

/* The preview: 3 columns, 4:5, snapped to the column lines beside the pointer */
.work-peek {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: calc(3 * var(--about-col));
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
}

.work-peek__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--dark-brown);
}

.work-peek__frame > *,
.work-row__pieces > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover: none), (pointer: coarse), (max-width: 767px) {
  .work-peek {
    display: none;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .work-hero__title {
    font-size: 8.75em;
  }

  .work-hero__lead {
    grid-column: 5 / 13;
  }

  .work-row__name {
    font-size: 3.4em;
  }
}

@media screen and (max-width: 767px) {
  .work-hero {
    padding: calc(var(--home-header) + 9vh) 0 6vh;
  }

  .work-hero__label {
    grid-column: 1 / 4;
  }

  .work-hero__count {
    grid-column: 4 / 7;
  }

  .work-hero__title {
    font-size: 3.35em;
    white-space: normal;
  }

  .work-hero__lead {
    grid-column: 1 / -1;
  }

  .work-row {
    row-gap: 0.5em;
    padding-bottom: 1.6em;
  }

  .work-row__name {
    grid-column: 1 / -1;
    padding-block: 0.5em 0.1em;
    font-size: 2.4em;
    white-space: normal;
  }

  .work-row__sector {
    grid-column: 1 / 5;
    font-size: max(14px, 0.95em);
  }

  .work-row__year {
    grid-column: 5 / 7;
  }

  /* Three pieces under the name, two columns each */
  .work-row__pieces {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 0.6em;
  }

  .work-row__pieces > * {
    position: relative;
    aspect-ratio: 4 / 5;
    height: auto;
  }

  .work-row__pieces > *:nth-child(n + 4) {
    display: none;
  }

  .work-row__pieces > * + * {
    box-shadow: -1px 0 0 var(--sand);
  }
}

/* --- Case ---------------------------------------------------------------------------------------
   Painted in the brand's tone (home.css, .case-page). Hero, lead image, then Problem → Decision → Result
   with the work between them. Images: wide (c1–c12, 16:9) or a pair (c1–c6 + c7–c12, 4:5). */
.case-page {
  --case-muted: color-mix(in srgb, var(--sand) 66%, transparent);
  --case-rule: color-mix(in srgb, var(--sand) 28%, transparent);
}

.case-hero {
  padding: calc(var(--home-header) + 6vh) 0 6vh;
}

.case-hero__grid {
  row-gap: 3vh;
}

.case-hero__back {
  grid-column: 1 / -1;
  justify-self: start;
}

.case-hero__label {
  grid-column: 1 / 4;
  margin-top: 3vh;
  color: var(--case-muted);
}

.case-hero__name {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 11em;
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.06em;
  white-space: nowrap;
}

.case-hero__line {
  grid-column: 1 / 8;
  max-width: 26ch;
  color: var(--case-muted);
}

/* Sector c1–c4 / Scope c5–c8 / Year c9–c12: the grid's own lines are the dividers */
.case-hero__meta {
  margin: 6vh 0 0;
}

.case-hero__fact {
  position: relative;
  grid-column: span 4;
  display: grid;
  align-content: start;
  gap: 0.45em;
  padding: 0.95em 0.9em 0 0;
}

.case-hero__fact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--case-rule);
  transform: scaleX(var(--rule, 1));
  transform-origin: 0 50%;
}

.case-hero__fact dt {
  color: var(--case-muted);
}

.case-hero__fact dd {
  margin: 0;
}

/* Images */
.case-imgs {
  row-gap: 6vh;
  padding-top: 14vh;
}

.case-imgs--lead {
  padding-top: 2vh;
}

.case-fig {
  position: relative;
  grid-column: 1 / -1;
}

.case-imgs--pair .case-fig:nth-child(odd) {
  grid-column: 1 / 7;
  padding-right: 0.5em;
}

.case-imgs--pair .case-fig:nth-child(even) {
  grid-column: 7 / 13;
  padding-left: 0.5em;
}

.case-fig__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: rgb(0 0 0 / 20%);
}

.case-imgs--pair .case-fig__img {
  aspect-ratio: 4 / 5;
}

.case-fig__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The placeholder art would vanish into a page of the same tone: a shade deeper */
.case-fig .home-ph {
  background-color: color-mix(in srgb, var(--tone) 72%, #000);
}

/* The lead opens along the columns, from the middle out (js/work/case.js) */
.case-fig__cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  pointer-events: none;
}

.case-fig__cover i {
  background-color: var(--case-tone);
  transform: scaleY(0);
  transform-origin: 50% 0;
}

.w-mod-js .case-fig__cover i {
  transform: none;
}

/* Problem, Decision, Result */
.case-step {
  padding-top: 18vh;
}

.case-step__label {
  grid-column: 1 / 4;
  align-self: start;
  position: sticky;
  top: calc(var(--home-header) + 1.2em);
}

.case-step__body {
  grid-column: 4 / 13;
}

.case-step__text {
  text-indent: var(--about-col);
}

.case-step__link {
  margin: 5vh 0 0;
}

.case-step__text.is-placeholder {
  color: var(--case-muted);
}

.case-points {
  margin: 6vh 0 0;
  padding: 0;
  list-style: none;
}

.case-points__item {
  position: relative;
  display: grid;
  grid-template-columns: 2.6em 1fr;
  padding: 1em 0;
  font-size: 1.3em;
  letter-spacing: -0.01em;
}

.case-points__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--case-rule);
  transform: scaleX(var(--rule, 1));
  transform-origin: 0 50%;
}

.case-points__num {
  padding-top: 0.3em;
  color: var(--case-muted);
  font-size: max(10px, 0.72em);
}

/* Next case: on hover the band fills with the next project's tone */
.case-next {
  position: relative;
  display: block;
  margin-top: 22vh;
  padding: 2.2em 0 2.6em;
  border-top: 1px solid var(--case-rule);
  color: inherit;
  text-decoration: none;
  isolation: isolate;
  overflow: hidden;
}

.case-next::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--next-tone);
  transform: scaleY(0); /* grows from the bottom, leaves upwards: see .line-btn in shell.css */
  transform-origin: 50% 0;
  transition: transform var(--d-smooth) var(--e-smooth);
}

.case-next__grid {
  align-items: end;
  row-gap: 1.2em;
}

.case-next__label {
  grid-column: 1 / -1;
  color: var(--case-muted);
}

.case-next__name,
.case-next__arrow {
  font-size: 7.2em;
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.case-next__name {
  grid-column: 1 / 11;
}

.case-next__arrow {
  grid-column: 11 / 13;
  justify-self: end;
  transition: transform var(--d-smooth) var(--e-smooth);
}

.case-next:hover::before,
.case-next:focus-visible::before {
  transform: none;
  transform-origin: 50% 100%;
}

.case-next:hover .case-next__arrow,
.case-next:focus-visible .case-next__arrow {
  transform: translateX(0.1em);
}

.case-next:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: -4px;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .case-hero__name {
    font-size: 8.6em;
  }

  .case-hero__line {
    grid-column: 1 / 10;
  }

  .case-next__name,
  .case-next__arrow {
    font-size: 6em;
  }
}

@media screen and (max-width: 767px) {
  .case-hero {
    padding: calc(var(--home-header) + 4vh) 0 4vh;
  }

  .case-hero__label,
  .case-hero__line {
    grid-column: 1 / -1;
  }

  .case-hero__name {
    font-size: 3.6em;
    white-space: normal;
  }

  .case-hero__meta {
    row-gap: 1.2em;
  }

  .case-hero__fact {
    grid-column: 1 / -1;
  }

  .case-imgs {
    row-gap: 4vh;
    padding-top: 9vh;
  }

  .case-imgs--lead {
    padding-top: 2vh;
  }

  .case-imgs--pair .case-fig:nth-child(n) {
    grid-column: 1 / -1;
    padding: 0;
  }

  .case-fig__cover {
    grid-template-columns: repeat(6, 1fr);
  }

  .case-fig__cover i:nth-child(n + 7) {
    display: none;
  }

  .case-step {
    padding-top: 12vh;
  }

  .case-step__label {
    position: static;
    grid-column: 1 / -1;
    margin-bottom: 2em;
  }

  .case-step__body {
    grid-column: 1 / -1;
  }

  .case-step__text {
    text-indent: 0;
  }

  .case-points__item {
    font-size: 1.05em;
  }

  .case-next__name {
    grid-column: 1 / 6;
    font-size: 2.65em;
  }

  .case-next__arrow {
    grid-column: 6 / 7;
    font-size: 2.65em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .w-mod-js .case-fig__cover i {
    transform: scaleY(0);
  }
}

/* --- Contact -------------------------------------------------------------------------------------
   The brief as one sentence (js/contact/form.js): fields sit inside the line at Statement size and grow
   with what you type; choices are words you tap. */
.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.contact {
  --contact-muted: color-mix(in srgb, var(--dark-brown) 62%, var(--sand)); /* ≥ 4.5:1 on paper; light-stone is not */
  --contact-ghost: color-mix(in srgb, var(--dark-brown) 50%, var(--sand)); /* ≥ 3:1, for type at Statement size */

  min-height: 100vh;
  min-height: 100svh; /* the footer starts below the fold */
  padding: calc(var(--home-header) + 12vh) 0 16vh;
}

.contact__grid {
  align-items: start;
  row-gap: 6vh;
}

.contact__aside {
  grid-column: 1 / 4;
  position: sticky;
  top: calc(var(--home-header) + 1.2em);
  display: grid;
  gap: 2.2em;
}

.contact__aside h1 {
  margin: 0;
}

.contact__row {
  display: grid;
  gap: 0.35em;
}

.contact__row p {
  margin: 0;
}

.contact__muted {
  color: var(--contact-muted);
}

/* What sits under each label (email, time, socials): Saans, a step above body */
.contact__value {
  margin: 0;
  font-size: 1.5em;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.contact__email {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  cursor: pointer;
}

.contact__socials {
  display: grid;
  gap: 0.2em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact__socials a {
  color: inherit;
}

.contact__copied {
  color: var(--dark-brown);
}

.contact__main {
  grid-column: 4 / 13;
}

/* clip: the hidden mirrors measuring a field near the line end must not widen the page */
.contact__fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: clip;
  overflow-clip-margin: 0.4em;
}

.contact__sentence {
  line-height: 1.32;
}

/* A field inside the sentence: as wide as its text (the mirror measures it), underlined */
.contact-fld {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 0;
  font-weight: inherit;
  vertical-align: baseline;
}

.contact-fld__input {
  width: var(--w, 6ch);
  max-width: 100%;
  min-width: 2ch;
  margin: 0;
  padding: 0 0.04em;
  border: 0;
  outline: none;
  background: none;
  color: var(--dark-brown);
  font: inherit;
  letter-spacing: inherit;
}

/* A browser's autofill (a suggestion picked from its list) must not restyle the field. Chrome turns an autofilled
   input into a native control (small system type, a blue ground); the field keeps the sentence's own type and no
   ground. The long transition is the usual way to keep the browser's background colour from ever showing. Two
   rules, because a selector list with a pseudo-class a browser does not know is dropped whole. */
.contact-fld__input:-webkit-autofill,
.contact-fld__input:-webkit-autofill:hover,
.contact-fld__input:-webkit-autofill:focus {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  letter-spacing: inherit;
  -webkit-text-fill-color: var(--dark-brown);
  caret-color: var(--dark-brown);
  transition: background-color 600000s 0s;
}

.contact-fld__input:autofill,
.contact-fld__input:autofill:hover,
.contact-fld__input:autofill:focus {
  appearance: none;
  font: inherit;
  letter-spacing: inherit;
  transition: background-color 600000s 0s;
}

.contact-fld__input::placeholder {
  color: var(--contact-ghost);
  opacity: 1;
}

.contact-fld__mirror {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  white-space: pre;
  pointer-events: none;
}

.contact-fld__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 1px;
  background-color: color-mix(in srgb, var(--dark-brown) 35%, transparent);
  transform-origin: 0 50%;
}

.contact-fld:focus-within .contact-fld__line,
.contact-fld.is-bad .contact-fld__line {
  height: 2px;
  background-color: var(--main);
}

/* Choices are words */
.contact-chip {
  margin: 0 -0.04em;
  padding: 0 0.12em 0.02em;
  border: 0;
  background: none;
  color: var(--contact-muted);
  font: inherit;
  letter-spacing: inherit;
  line-height: 1.1;
  vertical-align: baseline;
  text-decoration: underline dotted 1px;
  text-decoration-color: color-mix(in srgb, var(--dark-brown) 40%, var(--sand));
  text-underline-offset: 0.14em;
  cursor: pointer;
  transition:
    background-color var(--d-smooth) var(--e-smooth),
    color var(--d-smooth) var(--e-smooth);
}

.contact-chip:hover {
  color: var(--dark-brown);
}

.contact-chip:focus-visible {
  outline: 2px solid var(--main);
  outline-offset: 2px;
}

.contact-chip[aria-checked="true"],
.contact-chip[aria-pressed="true"] {
  background-color: var(--dark-brown);
  color: var(--sand);
  text-decoration-color: transparent;
}

.contact-chips__sep {
  color: var(--contact-ghost);
}

.contact__trap {
  position: absolute;
  left: -9999px;
}

.contact__more {
  display: block;
  margin: 6vh 0 0;
  font-weight: 400; /* webflow.css makes every label bold */
}

.contact__more .home-label {
  display: block;
  margin-bottom: 0.6em;
}

.contact__textarea {
  display: block;
  width: 100%;
  min-height: 3.2em;
  padding: 0.3em 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--dark-brown) 25%, var(--sand));
  outline: none;
  background: none;
  color: var(--dark-brown);
  font: inherit;
  font-size: var(--home-body-l);
  line-height: 1.25;
  letter-spacing: -0.02em;
  resize: vertical;
}

.contact__textarea::placeholder {
  color: var(--contact-muted);
  opacity: 1;
}

.contact__textarea:focus {
  border-bottom-color: var(--main);
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2em 2em;
  margin-top: 6vh;
}

.contact__send {
  padding: 0.8em 1.6em;
  font-size: var(--home-body-l);
  letter-spacing: -0.025em;
}

.contact__send[aria-busy="true"] {
  cursor: progress;
  opacity: 0.6;
}

/* Orange alone is 3.3:1 on paper: the line is ink, the orange is its mark (and the field's underline) */
.contact__hint {
  min-height: 1.35em;
  color: var(--dark-brown);
}

.contact__hint:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.6em;
  background-color: var(--main);
}

.contact__hint a {
  color: inherit;
}

.contact__done {
  display: grid;
  gap: 4vh;
  outline: none;
}

.contact__done[hidden] {
  display: none;
}

.contact__done-title {
  max-width: 14ch;
  margin: 0;
  font-size: 7.2em;
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.contact__done-text {
  max-width: 28ch;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .contact__done-title {
    font-size: 6em;
  }
}

@media screen and (max-width: 767px) {
  .contact {
    padding: calc(var(--home-header) + 7vh) 0 12vh;
  }

  .contact__main {
    grid-column: 1 / -1;
  }

  .contact__aside {
    grid-column: 1 / -1;
    grid-row: 2;
    position: static;
    gap: 1.6em;
  }

  .contact__value {
    font-size: 1.25em;
  }

  .contact__textarea {
    font-size: 1.15em;
  }

  .contact__send {
    font-size: 1.25em;
  }

  .contact__done-title {
    font-size: 2.65em;
  }
}