/*
 * Site styles. All colors and fonts come from tokens.css – change the
 * look there, not here. Layered so later layers win without specificity
 * fights: reset → base → nav → case → work → footer.
 */

@layer reset, base, nav, case, work, footer;

@layer reset {
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; }
  img { display: block; width: 100%; height: 100%; object-fit: cover; }
}

@layer base {
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2 { font-family: var(--font-sans); font-weight: var(--weight-heading); text-wrap: balance; margin: 0; }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  .eyebrow {
    font-family: var(--font-sans);
    font-weight: var(--weight-label);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .78rem;
    color: var(--stone);
  }

  .skip-link {
    position: absolute;
    left: var(--gutter);
    top: -100%;
    z-index: 100;
    padding: .6rem 1rem;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    font-size: .9rem;
  }
  .skip-link:focus { top: .5rem; }
}

@layer nav {
  .navbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25vw;
    padding: 1.1rem var(--gutter);
    background: var(--paper);
  }
  .wordmark {
    font-family: var(--font-sans);
    font-weight: var(--weight-heading-strong);
    font-size: 1.3rem;
    letter-spacing: .01em;
    color: var(--ink);
    text-decoration: none;
  }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 2.1rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav-links a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: var(--weight-ui);
    letter-spacing: .01em;
  }
  .nav-links a[aria-current="page"] { color: var(--ink); }
  .nav-links a:hover, .nav-links a:focus-visible { color: var(--accent); }

  .hamburger {
    display: none;
    width: 2rem;
    height: 2rem;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0;
    flex-direction: column;
    justify-content: center;
    gap: .32rem;
  }
  .hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--ink);
    transition: transform .2s ease, opacity .2s ease;
  }
  .mobile-panel { display: none; }

  @media (max-width: 820px) {
    .navbar { justify-content: space-between; }
    .nav-links { display: none; }
    .hamburger { display: flex; }
    body.nav-open .mobile-panel {
      display: flex;
      flex-direction: column;
      gap: 0;
      background: var(--paper-raised);
      border-bottom: 1px solid var(--line);
      padding: .5rem var(--gutter) 1.25rem;
    }
    .mobile-panel a {
      padding: .85rem 0;
      border-bottom: 1px solid var(--line);
      text-decoration: none;
      color: var(--ink);
      font-size: 1.02rem;
    }
    body.nav-open .hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    body.nav-open .hamburger span:nth-child(2) { opacity: 0; }
    body.nav-open .hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  }
}

@layer case {
  /* ---- hero ---- */
  .hero {
    position: relative;
    /* TODO §7: title/subtitle/year moved below the hero into .entry-title
       (~20vh) — the hero shrinks by the same amount so the page doesn't grow
       taller than before. */
    height: calc(min(88vh, 54rem) - 20vh);
    min-height: 26rem;
    overflow: hidden;
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / .05) 0%, rgb(0 0 0 / 0) 32%, rgb(0 0 0 / .55) 100%);
  }
  /* No hero image: transparent, sized to its own text — not a photo gradient
     over nothing, not the 26rem floor meant to hold a picture, and no
     coloured banner either (the admin sets title_color/accent to black for
     this state — see editor.js — so this only needs to get out of the way). */
  .hero.hero--no-image {
    height: auto;
    min-height: 0;
    background: transparent;
  }
  .hero.hero--no-image::after { content: none; }

  /* ---- title band (TODO §7) ----
     Case title/subtitle/year used to overlay the hero photo as a caption;
     they now sit in their own band below it, left-aligned to the body
     column instead of centered over the image. */
  .entry-title {
    min-height: 10vh;
    display: flex;
    flex-direction: column;
    justify-content: left;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 1.5rem var(--gutter);
    padding-bottom: 0;
    color: var(--ink);
  }
  @media (min-width: 1220px) {
    /* Above this breakpoint .case-body's own gutter sits on the outer 96rem
       box, not on its text column (grid-column:2 has no padding of its
       own) — .entry-title has to match that: drop its horizontal padding
       here too, or the gutter would double up and shift it right of the
       body column it's supposed to align with. */
    .entry-title { max-width: var(--case-measure); padding-inline: 0; }
  }
  .entry-title h1 {
    font-weight: 700;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.05;
  }
  .entry-title-year {
    font-style: italic;
    font-weight: var(--weight-heading);
  }
  .entry-title .subtitle {
    font-family: var(--font-sans);
    font-size: 1.14rem;
    line-height: 1.4rem;
    margin-top: .5rem;
    color: var(--ink-soft);
    max-width: 40rem;
  }

  /* Practice (no hero, no title band): title/subtitle/eyebrow sit centered
     on the page's own ground at the old overlay-caption scale. */
  .entry-head h1 {
    /* --title-len (set per entry in render_entry()) is the longest WORD in
       the title, not the whole title — a multi-word title just wraps at the
       huge size (max-width below allows that); a single word that long
       can't wrap, so it has to shrink instead. Short words hit the
       18vw/14rem ceiling exactly as before — the length term only ever
       pulls it down, never up, because clamp() takes the smallest of the
       three above the floor. 0.6 is an approximate average glyph width for
       this font. */
    font-size: clamp(4rem, min(18vw, calc(88vw / (var(--title-len, 8) * 0.6))), 14rem);
    line-height: 1.02;
    margin-top: .3rem;
    max-width: 20ch;
  }
  .entry-head .subtitle {
    font-family: var(--font-sans);
    font-size: 1.14rem;
    line-height: 1rem;
    margin-top: 2.02rem;
    max-width: 40rem;
    color: var(--ink-soft);
  }
  .entry-head .eyebrow {
    font-size: 1.14rem;
    line-height: 1rem;
    margin-top: .35rem;
    color: var(--stone);
  }

  /* A collection with no cover image opens with its title on the page's own
     ground — the same type as a heroless hero caption, without the banner
     machinery that only exists to sit over a photo. */
  .entry-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem var(--gutter) 0;
    color: var(--ink);
  }

  /* ---- body column ----
     Single centered column at --measure. On very wide screens the
     contributors panel is absolutely positioned into the right gutter,
     so it can never stretch the content column's rows. */
  .case-body {
    display: grid;
    grid-template-columns: 1fr;
    max-width: var(--measure);
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) 6rem;
  }
  .case-body > * { grid-column: 1; }

  /* About/Contact's own h1 (TODO §9) — same scale as the Case overview's h1. */
  .page-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.05;
    margin-bottom: 1rem;
  }

  /* ---- contributors ---- */
  .contributors {
    grid-column: 1;
    background: var(--paper);
    border: 1px solid #000;
    margin: 0 0 1.75rem;
  }
  .contrib-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    padding: 1rem 1.25rem;
    color: var(--ink);
  }
  .contrib-toggle .eyebrow { color: var(--accent); }
  .contrib-toggle svg { width: .6rem; height: .6rem; flex: none; transition: transform .18s ease; }
  .contrib-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .contrib-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .22s ease;
  }
  .contrib-body > div { overflow: hidden; }
  .contributors.open .contrib-body { grid-template-rows: 1fr; }
  .contrib-inner { padding: 0 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 1.5rem; }
  .contrib-group .eyebrow { margin-bottom: .5rem; }
  .contrib-group p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink-soft); }

  @media (min-width: 1220px) {
    .case-body {
      position: relative;
      /* --case-measure (tokens.css): narrows the body column fluidly near
         the collapse threshold, so the fixed-width contributors sidebar
         always has room without overflow. Shared with .entry-title so both
         center the exact same column, not two formulas that happen to
         agree only below this breakpoint. */
      grid-template-columns: 1fr min(var(--case-measure), 100%) 1fr;
      column-gap: 2.5rem;
      max-width: 96rem;
    }
    .case-body > * { grid-column: 2; }
    /* Above this breakpoint the body is three columns inside 96rem, so a cover
       image spans all three rather than 90vw of a much wider screen. */
    .case-body > .block-image--cover {
      grid-column: 1 / -1;
      width: auto;
      margin-left: 0;
    }
    .contributors {
      grid-column: 3;
      grid-row: 1;
      position: absolute;
      top: 0;
      left: 0;
      /* Exact leftover space in the right-hand grid column: viewport minus
         the body column, minus .case-body's own left+right padding
         (var(--gutter) each side — border-box, so it eats into the grid's
         content box), minus the two column-gaps, halved. Capped at the
         full 18rem sidebar width used once there's room. */
      width: min(18rem, calc((100vw - var(--case-measure) - 2 * var(--gutter) - 5rem) / 2));
      margin: 0;
      border: 0;
    }
    .contrib-toggle { display: none; }
    .contrib-body { display: block; }
    .contrib-inner { padding: 1.5rem; }
  }

  /* ---- content blocks ---- */
  .block { margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); }
  .block:last-child { margin-bottom: 0; }

  /* Set on the block, not only on <p>: text saved outside a paragraph still
     reads at the same size as the paragraphs around it. */
  .block-text {
    font-size: 1.14rem;
    line-height: 1.5;
    color: var(--ink);
  }
  .block-text p {
    font-size: 1.14rem;
    line-height: 1.5;
    color: var(--ink);
    margin: 0 0 1.1rem;
  }
  .block-text p:last-child { margin-bottom: 0; }

  /* Bullet lists and underline come from the editor toolbar; they read as body
     copy, so they inherit the paragraph's size, rhythm and colour. */
  .block-text ul {
    margin: 0 0 1.1rem;
    padding-left: 1.35rem;
    list-style: disc;
  }
  .block-text ul:last-child { margin-bottom: 0; }
  .block-text li {
    font-size: 1.14rem;
    line-height: 1.5;
    color: var(--ink);
    margin-bottom: .35rem;
  }
  .block-text li:last-child { margin-bottom: 0; }
  .block-text li p { margin: 0; }
  .block-text u { text-decoration-thickness: from-font; text-underline-offset: .12em; }

  .block-image img {
    width: 100%;
    max-height: 40rem;
    border: 0;
  }

  /* Cover: the one block that is wider than the text column. The body column
     is centred in the viewport, so 50% of it is the viewport's centre and the
     figure can be pulled out symmetrically. max() keeps it from ever coming
     out narrower than the column it breaks out of — on a phone 90vw is less
     than the column, and there the shift collapses to 0. */
  .block-image--cover {
    width: max(100%, 90vw);
    margin-left: calc(50% - max(50%, 45vw));
  }
  /* Taller cap than a column image, and object-fit so the cap crops the
     letterbox instead of squashing the picture. */
  .block-image--cover img {
    max-height: 90vh;
    object-fit: contain;
  }
  figcaption {
    margin-top: .65rem;
    font-family: var(--font-sans);
    font-size: .82rem;
    letter-spacing: .03em;
    color: var(--ink-soft);
  }

  .block-quote blockquote {
    margin: 0;
    padding-left: 1.6rem;
    border-left: 3px solid var(--accent);
    font-family: var(--font-sans);
    font-weight: var(--weight-heading);
    font-style: italic;
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    line-height: 1.4;
    color: var(--ink);
  }
  /* 'small': the quote reads at body-text size (.block-text p) instead of
     the big display size above — everything else about it stays the same. */
  .block-quote--small blockquote {
    font-size: 1.14rem;
    line-height: 1.5;
  }
  .block-quote cite {
    display: block;
    margin-top: .85rem;
    font-style: normal;
    font-family: var(--font-sans);
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .8rem;
    color: var(--stone);
  }

  /* Video block: Plyr player fills the column. (The old dashed
     placeholder styling served the static mockup only.) */
  .block-video { width: 100%; }
  .block-video .js-player,
  .block-video video { width: 100%; display: block; }

  .block-link a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
  }
  .block-link a:hover { border-color: var(--accent); }
  .block-link .l-left { display: flex; align-items: center; gap: .5rem; min-width: 0; }
  .block-link .l-icon { width: 1.1rem; height: 1.1rem; flex: none; }
  .block-link .l-title { font-weight: var(--weight-ui); }
  .block-link .l-url {
    font-family: var(--font-sans);
    letter-spacing: .03em;
    color: var(--stone);
    font-size: .85rem;
    white-space: nowrap;
  }
}

@layer work {
  /* /work grid: a contact sheet. Five small landscape thumbnails per row, set
     close together, each carrying its own title. The tiles are the content;
     nothing sits between them. */
  .work-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: start; /* a short tile never stretches to a tall row */
    gap: clamp(.4rem, .8vw, .75rem);
    padding: calc(var(--gutter) * 1.5) var(--gutter) calc(var(--gutter) * 2);
  }
  @media (max-width: 1100px) { .work-grid { grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 860px)  { .work-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 620px)  { .work-grid { grid-template-columns: repeat(2, 1fr); } }

  /* Page title above the grid — the page's single h1. Spans every column so it
     never sits inside a card's track. */
  .work-title {
    grid-column: 1 / -1;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.05;
    margin-bottom: calc(var(--gutter) * .5);
  }

  .work-card {
    display: block;
    color: var(--ink);
    text-decoration: none;
  }
  .work-card img {
    width: 100%;
    /* The reset sets height:100%, which in a stretched grid item defeats
       aspect-ratio and lets the image swallow the card. Landscape 3:2 here. */
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
  }
  .work-card h2 {
    margin-top: .5rem;
    padding: 0;
    text-align: left;
    font-size: clamp(.85rem, 1vw, 1.05rem);
    font-weight: var(--weight-ui);
    line-height: 1.15;
    transition: color .18s ease;
  }
  .work-card:hover h2,
  .work-card:focus-visible h2 { color: var(--accent); }
  .work-year {
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: .03em;
    color: var(--stone);
    font-size: .85em;
  }
  @media (prefers-reduced-motion: reduce) {
    .work-card h2 { transition: none; }
  }

  /* /practices/ overview: the work grid's sibling. No thumbnails — practices
     have no hero — so the rows carry the whole story: title, and year when
     one is set. */
  .practice-index {
    max-width: var(--measure);
    margin: 0 auto;
    padding: calc(var(--gutter) * 1.5) var(--gutter) calc(var(--gutter) * 2);
  }
  .practice-list { list-style: none; margin: 0; padding: 0; }
  .practice-row a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
  }
  .practice-row a:hover { border-color: var(--accent); }
  .practice-row a:hover .p-title,
  .practice-row a:focus-visible .p-title { color: var(--accent); }
  .p-title {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: var(--weight-ui);
    line-height: 1.15;
  }
  .p-year {
    font-family: var(--font-sans);
    letter-spacing: .03em;
    color: var(--stone);
    font-size: .85rem;
    white-space: nowrap;
  }
}

@layer footer {
  .next-case {
    background: color-mix(in srgb, black 3%, color-mix(in srgb, var(--accent) 8%, var(--paper)));
    padding: clamp(3rem, 7vw, 5rem) var(--gutter);
    text-align: center;
  }
  .next-case a { text-decoration: none; color: inherit; }
  .next-case h2 { font-size: clamp(1.8rem, 4vw, 3rem); margin-top: .6rem; }

  .site-footer {
    padding: 1.5rem var(--gutter);
    text-align: center;
    font-size: .85rem;
    color: var(--stone);
  }
  .site-footer a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
  .site-footer a:hover { color: var(--accent); }
}