/* ==========================================================================
   About · Creative archive · Contact
   Flat documents rather than camera destinations. They share the case study's
   surface and placeholder language so the whole site reads as one system.
   ========================================================================== */

/* `width: 100%` matters: the stage stretches its grid item, but an auto
   inline margin makes the item shrink-wrap to its content instead — which
   silently narrows any page whose content happens to be narrow. */
.page {
  position: relative;
  width: 100%; max-width: 78rem; margin-inline: auto;
  padding: calc(var(--header-h) + .5rem) var(--gutter) clamp(3rem, 10vh, 6rem);
  text-align: left;
  opacity: 0;
}
.page[data-ready="true"] { opacity: 1; transition: opacity var(--dur-l) var(--ease-out); }

.page__foot {
  margin-top: clamp(2.5rem, 7vh, 4rem);
  padding-top: clamp(1.5rem, 4vh, 2rem);
  border-top: 1px solid var(--rule-soft);
}

.ab__eyebrow { color: var(--ink-muted); margin: 0 0 1rem; }

/* About has its own stylesheet, about.css. `.ab__eyebrow` above stays: the
   404 page uses it. */

/* -------------------------------------------------------------- archive --- */
.ar__hero { max-width: 44rem; padding: clamp(2rem, 6vh, 3.5rem) 0 clamp(1.5rem, 4vh, 2.5rem); }
.ar__title {
  margin: 0; font-weight: 300;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.04; letter-spacing: -.03em;
}
.ar__body { margin: 1.1rem 0 1.5rem; font-size: var(--t-lede); line-height: 1.68; color: var(--ink-soft); }
.ar__tags { color: var(--ink-muted); margin: 0; }
.ar__tags span { color: var(--ink-quiet); padding: 0 .3rem; }

.ar__note {
  max-width: 44rem; margin: 0 0 clamp(1.5rem, 4vh, 2.25rem);
  padding: .85rem 1rem;
  border-left: 2px solid var(--focus);
  background: rgba(31, 92, 107, .05);
  font-size: .8125rem; line-height: 1.65; color: var(--ink-soft);
}
.ar__note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95em; background: rgba(22,25,30,.06); padding: .05em .3em;
}

.tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.25rem);
}
.tile { margin: 0; position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .6rem .7rem; color: var(--on-dark);
  background: linear-gradient(to top, rgba(12,16,22,.6), transparent);
}
.tile--empty {
  display: grid; place-content: center; gap: .4rem; text-align: center;
  border: 1px dashed var(--rule);
  background: repeating-linear-gradient(-45deg,
    rgba(22,25,30,.016) 0 8px, transparent 8px 16px);
}
.tile__no { color: var(--ink-muted); }
.tile__hint { color: var(--ink-muted); }

/* -------------------------------------------------------------- contact --- */
/* The sky bleeds the full width of the viewport while the copy stays in the
   same measure as every other page, so contact feels like the same site with
   the lights turned up rather than a different one. */
.ct {
  /* Full bleed: the sky reaches the viewport edges while the copy keeps the
     same measure as every other page. */
  max-width: none; margin-inline: 0;
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding-inline: 0;
}
.ct > *:not(.ct__sky) {
  position: relative; z-index: 1;
  width: 100%; max-width: 78rem; margin-inline: auto;
  padding-inline: var(--gutter);
}
.ct__sky {
  /* Up behind the header too: the page's top padding was leaving a band of
     flat paper above the photograph, which broke the full bleed. */
  position: absolute; inset: calc(-1 * (var(--header-h) + .5rem)) 0 0; z-index: 0;
  background:
    /* A soft lift under the right-hand column. The new photograph is far more
       vivid than the one it replaced, and the pull-quote was landing on lit
       water at 4.43:1 — just under AA. This raises only the patch the contact
       rows and the quote sit on, so the skyline itself keeps its light. */
    radial-gradient(64% 52% at 74% 56%,
      rgba(244, 241, 236, .52) 0%, rgba(244, 241, 236, 0) 72%),
    /* Lightened at both ends: the top so the headline holds, the bottom so the
       discipline tags are not sitting on the skyline at 2:1. */
    linear-gradient(to bottom,
      rgba(242,239,234,.90) 0%,
      rgba(242,239,234,.30) 38%,
      rgba(242,239,234,0)   58%,
      rgba(242,239,234,.55) 86%,
      rgba(242,239,234,.88) 100%),
    image-set(url("/assets/img/contact-sky-640.webp")  1x,
              url("/assets/img/contact-sky-960.webp")  1.5x,
              url("/assets/img/contact-sky-1254.webp") 2x) center 42% / cover no-repeat;
  /* The source is square and the section is a wide band, so `cover` crops it.
     42% is the position where the whole skyline sits in the lower half with the
     sun still in frame, and the copy above it lands on open sky. Swept every
     position from 0 to 85%: all of them clear AA on this picture, so this was
     chosen on composition rather than forced by contrast. */
}
.ct__grid {
  flex: 1; display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(14rem, .85fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-content: center; align-items: center;
  padding: clamp(2rem, 8vh, 5rem) 0;
  /* A slight lift off dead centre, without touching the gap/padding above
     that keep every element's spacing relative to the others. */
  transform: translateY(clamp(-3rem, -6vh, -1rem));
}
.ct__title {
  margin: 0; font-weight: 300; font-family: OrticaLinear-Light, var(--font);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.06; letter-spacing: var(--track-tight);
  max-width: 11em;
  color: #000;
}
.ct__body {
  margin: 1.1rem 0 2rem; max-width: 26rem;
  font-size: var(--t-lede); line-height: 1.66;
  color: #000;
}

.chs { list-style: none; margin: 0; padding: 0; }
.ch { border-bottom: 1px solid var(--rule-soft); }
.ch__row {
  display: flex; align-items: center; gap: .8rem;
  padding: .85rem 0; font-size: .9375rem;
  color: #000;
}
.ch__row--static { color: #000; }
.ch__icon { flex: none; color: var(--ink-muted); }
.ch__label { flex: 1; }
.ch__note {
  color: var(--ink-muted);
  border: 1px dashed var(--rule); padding: .15rem .45rem;
  /* These markers sit straight on the photograph, where the brightest lit
     windows drop muted ink to about 4.2:1. A faint plate under them is enough
     to clear AA without turning a placeholder into a component. */
  background: rgba(246, 244, 241, .74);
}
a.ch__row:hover { color: #73765F; }
a.ch__row:hover .ch__icon { color: #73765F; }

.ct__lead .btn { color: #000; }

/* ==========================================================================
   Stacked
   ========================================================================== */
@media (max-width: 62rem) {
  .ct__grid { grid-template-columns: 1fr; gap: 2.5rem; align-content: start; }
}
/* Phones: the links sit on a quiet paper panel so they read clearly over the
   skyline, and every row is a comfortable finger-sized target. */
@media (max-width: 46rem) {
  /* no panel: the rows sit on the photograph, with a faint light halo
     behind the words alone for legibility */
  .ch__label { text-shadow: 0 0 10px rgba(248, 246, 242, .9), 0 0 2px rgba(248, 246, 242, .8); }
  /* The photograph sits lower on a phone, so the skyline lands in the open
     space below the links instead of behind them; its top dissolves into the
     page's cream, where the headline already sat on a heavy lightening. */
  .ct__sky {
    background:
      linear-gradient(to bottom,
        rgb(242, 239, 234) 0%, rgba(242, 239, 234, .94) 30%, rgba(242, 239, 234, .5) 46%,
        rgba(242, 239, 234, 0) 60%, rgba(242, 239, 234, 0) 90%, rgba(242, 239, 234, .3) 100%),
      image-set(url("/assets/img/contact-sky-640.webp")  1x,
                url("/assets/img/contact-sky-960.webp")  1.5x,
                url("/assets/img/contact-sky-1254.webp") 2x) 50% calc(24svh + 1.3rem) / auto 100% no-repeat,
      #EEEBE7;
  }
  .ch:last-child { border-bottom: 0; }
  .ch__row { min-height: 48px; }
}

@media (max-width: 34rem) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------- 404 ---- */
.nf__inner { max-width: 40rem; padding: clamp(2rem, 8vh, 5rem) 0; }
.nf__inner code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95em; background: rgba(22,25,30,.06); padding: .05em .3em;
}
.nf__label { color: var(--ink-muted); margin: clamp(1.75rem, 5vh, 2.5rem) 0 .75rem; }
.nf__list { list-style: none; margin: 0 0 2rem; padding: 0; }
.nf__link {
  display: grid; grid-template-columns: 2.25rem 1fr; align-items: baseline;
  gap: .5rem; width: 100%; text-align: left;
  padding: .8rem 0; border-bottom: 1px solid var(--rule-soft);
  font-size: 1.0625rem;
  transition: color var(--dur-s) var(--ease-out);
}
.nf__link:hover { color: var(--focus); }
.nf__no { color: var(--ink-muted); }
.nf__back { margin: 0; }