/* ==========================================================================
   Page-level compositions: home intro, work list, project page
   ========================================================================== */

/* Home — full width ---------------------------------------------------------- */

/* Project titles on the home templates scale with the full-width layout:
   36 on phones → 95 at 1440 → 144 cap */
:is(.template-home, .template-home-stepped, .template-home-masthead) .main {
  --text-display-m: clamp(2.25rem, 0.4rem + 6.2vw, 9rem);
}

/* Home — statement ---------------------------------------------------------- */

/* The page's one display-size line: positioning before biography */
.statement { padding-top: var(--space-8); }
.statement__text {
  max-width: 24ch;
  font-family: var(--font-serif);
  /* 32 → 56 at 1440 → 72, clearly under the project titles (36 → 144). Also
     capped by the screen height, so on short screens the project list still
     starts above the fold */
  font-size: min(clamp(2rem, 1rem + 2.8vw, 4.5rem), 6.5svh);
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
/* The portrait opens the statement, inline, in the same pill as the project
   thumbnails: the person and the point of view in one line */
.statement__portrait {
  display: inline-block;
  width: 1.55em;
  aspect-ratio: 194 / 116;
  margin-right: 0.25em;
  vertical-align: -0.12em;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-placeholder);
}
.statement__portrait .picture { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) {
  .statement { padding-top: var(--space-11); }
}
@media (min-width: 1024px) {
  .home-hero--statement { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .home-hero--statement .statement { grid-column: 1 / span 8; }
  .home-hero--statement .statement__text { max-width: none; }
}

/* About, after the work: on the 12-column grid like everything above, the
   text over seven columns (tablet) or five (desktop) from column 1 */
.home-about { margin-top: var(--space-11); }
@media (min-width: 768px) {
  .home-about { margin-top: var(--space-12); }
  .home-about .intro__body { max-width: 40rem; }
}
@media (min-width: 1024px) {
  .home-about .intro__text { font-size: var(--text-reading); } /* 18 */
}

/* Home — intro -------------------------------------------------------------- */

.intro {
  display: grid;
  gap: var(--space-8);
  padding-top: var(--space-8);
}
@media (min-width: 768px) {
  .intro { padding-top: var(--space-11); }
}

.intro__portrait { width: clamp(7.5rem, 5rem + 8vw, 12.125rem); /* 120 → 194 */ }
.intro__portrait .picture {
  width: 100%;
  aspect-ratio: 194 / 116;
  object-fit: cover;
  border-radius: var(--radius-pill);
  background: var(--color-placeholder);
}

.intro__text {
  max-width: var(--width-text); /* --width-content grows above 1440; the measure must not */
  font-size: var(--text-body-lg);
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

.intro__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: var(--space-5);
}

/* "More about me": a link to the About page, in the secondary button style */
.intro__more .icon { transition: transform var(--duration-base) var(--ease-out); }
.intro__more:hover .icon { transform: translateX(var(--space-1)); }

/* Desktop: portrait in a left column, content on the right */
@media (min-width: 768px) {
  .intro { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
}
@media (max-width: 767px) {
  .intro { gap: var(--space-6); }
  .intro__actions { align-items: stretch; }
  .intro__more { min-height: 2.75rem; }
}

/* Home — work list ----------------------------------------------------------- */

.work { margin-top: var(--space-section-lg); }
.template-home .work { margin-top: var(--space-10); }
@media (min-width: 768px) {
  .template-home .work { margin-top: var(--space-11); }
}
/* "Selected work" and, on the default home, "About": the same section label */
.work__heading,
.home-about__heading {
  margin-bottom: var(--space-5);
  font-size: var(--text-lead);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}
@media (min-width: 768px) {
  .work__heading,
  .home-about__heading { margin-bottom: var(--space-7); }
}
.work--index { padding-top: var(--space-11); }

/* Project — hero --------------------------------------------------------------- */

.project-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: var(--space-7);
}
/* Breadcrumb: Work / this project. Work in grey, the project in ink. The
   switcher keeps its pill on hover, so its text sits one padding in. */
.project-hero .project-nav { align-self: flex-start; display: flex; align-items: center; gap: var(--space-3); }
.project-nav__work {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  transition: color var(--duration-fast) ease;
}
.project-nav__work:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 0.2em; }
.project-nav__sep { color: var(--color-text-subtle); }
.project-switch__toggle { min-height: 2.75rem; padding-inline: var(--space-3); }
/* Pulled back by its padding, so the name sits as far from the slash as Work */
.project-nav .project-switch { margin-left: calc(var(--space-3) * -1 + 2px); }

.project-hero__title {
  margin-top: var(--space-7);
  font-family: var(--font-serif);
  font-size: var(--text-display-l);
  line-height: 0.95;
  letter-spacing: -0.005em;
}
.project-hero__subtitle {
  max-width: 48rem;
  margin-top: var(--space-5);
  font-size: var(--text-lead);
  font-weight: var(--weight-medium);
  line-height: var(--leading-lead);
  color: var(--color-text-muted);
}
.project-hero > .button:last-child:not(:first-child) { margin-top: var(--space-7); }

@media (min-width: 768px) {
  .project-hero {
    align-items: center;
    text-align: center;
    padding-top: var(--space-9);
  }
  /* The hero stays centred — it's the one deliberate break from the spine.
     The breadcrumb is centred with it, as the first line of the
     hero: on the left they started on neither the header's edge nor any
     other edge nearby. */
  .project-hero .project-nav { align-self: center; }
  .project-hero__title { margin-top: var(--space-10); }
  .project-hero__subtitle { margin-top: var(--space-6); }
}

.project-cover { margin-top: var(--space-5); }
@media (min-width: 768px) {
  .project-cover { margin-top: var(--space-7); }
  .project-cover .picture { aspect-ratio: 1126 / 632; }
}

.project-live {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

/* Project — facts and recap ---------------------------------------------------- */

/* Facts: client, studio, type, year, in the hero under the subtitle, centred
   like the title above them (left-aligned with the hero on phones, two by
   two). Quiet: they say what the project is; the recap band says why it
   matters. */
.project-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
  width: 100%;
  margin-top: var(--space-6);
}
.project-facts div { display: flex; flex-direction: column; gap: var(--space-1); }
.project-facts dt {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.project-facts dd { color: var(--color-text-body); }
@media (min-width: 768px) {
  .project-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4) var(--space-8);
    width: auto;
    margin-top: var(--space-7);
  }
}

/* Quick recap: a band across the page width, under the cover. Three short
   columns read in one glance; the result is the visual anchor. A summary in
   its own right, so it splits the 12 columns into equal thirds rather than
   following the text column below. */
.recap-band { margin-top: var(--space-8); }
.recap {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-block: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  .recap-band { margin-top: var(--space-10); }
}
@media (min-width: 1024px) {
  .recap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  /* Even thirds: the problem is usually the longest text, so it can't be the
     narrowest column; equal widths keep the three statements level */
  .recap__row--problem      { grid-column: 1 / span 4; }
  .recap__row--contribution { grid-column: 5 / span 4; }
  .recap__row--result       { grid-column: 9 / span 4; }
}
.recap dt {
  margin-bottom: var(--space-2);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.recap dd {
  font-size: var(--text-reading);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  text-wrap: pretty;
}
.recap__row--result dd { display: flex; flex-direction: column; gap: var(--space-2); }
.recap__value {
  font-family: var(--font-serif);
  font-size: var(--text-metric);
  font-weight: var(--weight-regular);
  line-height: 0.9;
}
.recap__measure { font-size: var(--text-body); color: var(--color-text-body); }
/* Section index (inside the Chapter break, blocks/chapter.php): numbered
   links to the sections that follow, on the text column, two columns from
   1024px. */
.contents__list { grid-column: var(--spine); margin: 0; padding: 0; list-style: none; }
/* The row's spacing is the link's own padding, so the whole row is the tap
   target (37px instead of the text's 21px); the layout is unchanged */
.contents__list li { break-inside: avoid; }
.contents__link { display: flex; gap: var(--space-3); padding-block: var(--space-2); color: var(--color-text); }
.contents__link:hover .contents__text { text-decoration: underline; text-underline-offset: 0.2em; }
.contents__num,
.block--section-num {
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-subtle);
}
.contents__num { padding-top: 0.15em; }
@media (min-width: 1024px) {
  .contents__list { columns: 2; column-gap: var(--grid-gap); }
}

/* Recap → narrative is a change of register, so it gets the largest
   gap on the page, clearly bigger than the section-to-section gap inside the body. */
.project-body { margin-top: var(--space-12); }
@media (min-width: 768px) {
  .project-body { margin-top: var(--space-13); }
}

/* Project — next --------------------------------------------------------------- */

.next-project { margin-top: var(--space-section-lg); }
.next-project__label {
  text-align: center;
  font-size: var(--text-lead);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}
@media (min-width: 768px) {
  .next-project { margin-top: var(--space-13); }
  .next-project__label { margin-bottom: var(--space-8); }
}

/* Project — locked (password-protected case study) ---------------------------
   Sits on the spine, like the Details summary it replaces. */
.project-unlock {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-8);
}
@media (min-width: 768px) {
  .project-unlock {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    margin-top: var(--space-10);
  }
}
.project-unlock__inner { grid-column: var(--spine); max-width: var(--width-text); }
/* The result stays public: something to take away even without the password */
.project-unlock__result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-3);
  margin-bottom: var(--space-7);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-medium);
}
.project-unlock__intro {
  font-size: var(--text-reading);
  line-height: var(--leading-reading);
  color: var(--color-text-body);
}
.unlock-form { margin-top: var(--space-6); }
.unlock-form__label {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.unlock-form__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.unlock-form__row .field { flex: 1 1 14rem; min-width: 0; }
.unlock-form__error { margin-top: var(--space-3); color: var(--color-text); }
/* tertiary padding offset so the label lines up with the text above */
.project-unlock__ask { margin-top: var(--space-5); margin-inline-start: calc((var(--space-4) + 1px) * -1); }