/* Maya Fielding website
   Ground ivory, ink charcoal. 80 px margins at 1440, 8 px unit, 16 px gutter, square corners.
   Values from the brand book tokens. Ivory #fdfbf5 from November 3, 2026. */

:root {
  --ground: #fdfbf5;
  --ink: #333439;
  --muted: #66625b;
  --beige: #f1e8dc;
  --meadow: #dbcfb9;
  --dusk: #bfaab5;      /* accent: one mark per page at most; here, the office on the map */
  --pine: #616965;      /* dark field */
  --clay: #b8a089;      /* mid field; on the map, projects under construction, with a charcoal ring */
  --rule: rgba(51, 52, 57, 0.10);
  --display: 'Maya Fielding Display', 'Stoned Youth', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --sketch-opacity: 0.30;   /* the background drawing; raise toward 0.45 if it reads too faint */
  color-scheme: light;
}

@font-face {
  font-family: 'Maya Fielding Display';
  src: url('../fonts/MayaFieldingDisplay-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: block;
}

* { box-sizing: border-box; }
html { height: auto; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--text); font-size: 16px; line-height: 1.5; font-weight: 400;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--muted); }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* ---- sheet ---- */
.page { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; }
.wrap {
  padding-left: max(16px, env(safe-area-inset-left, 0px), 5.5vw);
  padding-right: max(16px, env(safe-area-inset-right, 0px), 5.5vw);
}
@media (min-width: 1440px) { .wrap { padding-left: 80px; padding-right: 80px; } }
.line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rule); pointer-events: none; }
@media (max-width: 800px) { .line { display: none; } }

/* ---- header ---- */
header.top { display: flex; justify-content: space-between; align-items: center; height: 80px; }
header.top svg { width: 228px; height: 40px; display: block; flex: none; fill: var(--ink); }
/* phones: the wordmark keeps its size; the navigation drops to its own line under it */
@media (max-width: 600px) {
  header.top { height: auto; flex-wrap: wrap; row-gap: 12px; padding-block: 20px 16px; }
  header.top nav { width: 100%; gap: 24px; }
}
nav { display: flex; gap: 32px; font-size: 14px; line-height: 20px; }

/* ---- type ---- */
h1, h2 { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; text-wrap: balance; }
/* page title matches the wordmark: its capitals are 19.8 px tall at 228 px wide; the display face's capitals are 0.7 em */
h1 { font-size: 28px; line-height: 32px; letter-spacing: 0.5px; }
h2 { font-size: 22px; line-height: 24px; letter-spacing: 0.5px; }
.meta { margin: 0; font-size: 13px; line-height: 20px; color: var(--muted); }
.meta.right { text-align: right; }
.cap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; line-height: 20px; color: var(--muted); }
.cap p { margin: 0; }

/* ---- background sketch (project pages) ---- */
#sketch { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--sketch-opacity); mix-blend-mode: multiply; }
#sketch canvas { display: block; width: 100%; height: 100%; }

/* ---- hero ---- */
.hero { padding-bottom: 40px; display: flex; flex-direction: column; gap: 24px; }
.heroimg { margin: 0; width: 100%; aspect-ratio: 1800 / 1208; max-height: calc(100vh - 160px); overflow: hidden; background: var(--meadow); }
.heroimg img { width: 100%; height: 100%; object-fit: cover; }
.herorow { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.titleblock { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.titleblock .meta { font-size: 14px; }

/* ---- hero gallery ----
   One slide per screen, snaps on swipe. Photos and renders fill the frame (.photo);
   drawings sit whole on the ground (.drawing). */
.gallery { display: flex; flex-direction: column; gap: 12px; outline: none; }
.gallery:focus-visible .track { outline: 1px solid var(--ink); outline-offset: 4px; }
.track {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;
}
.track::-webkit-scrollbar { display: none; }
/* every image is shown whole at its own proportion, centred in the frame on the ground; a slide of
   two narrow images sets them side by side with the 16 px gutter */
.slide { margin: 0; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; aspect-ratio: 1800 / 1208; max-height: calc(100vh - 200px);
  background: var(--ground); display: flex; justify-content: center; align-items: center; gap: 16px; }
.slide img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; min-width: 0; }
.slide.two img { width: 0; height: auto; max-width: none; max-height: none; }
.slide .mat { height: 100%; aspect-ratio: auto; }
.gbar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.gnav { display: flex; align-items: center; gap: 16px; font-size: 13px; line-height: 20px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gnav button {
  appearance: none; border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.gnav button:hover { color: var(--muted); }
.gnav button:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.gnav svg { width: 24px; height: 24px; display: block; }
@media (prefers-reduced-motion: reduce) { .track { scroll-behavior: auto; } }

/* ---- collage ----
   The sheets hang on a spine: a vertical line at a place fixed for each project (--spine, set
   on the element from SPINE in make.py). Figures alternate sides with one edge on the spine,
   the two sides run as independent columns, and the right one starts lower so they interleave.
   Captions read toward the spine. Phones stack the figures in their original order. */
.collage { padding-top: 96px; padding-bottom: 96px; }
.spine { display: grid; grid-template-columns: minmax(0, var(--spine, 50%)) minmax(0, 1fr); column-gap: 16px; align-items: start; }
.spine .side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.spine .side.l { align-items: flex-end; }
.spine .side.r { align-items: flex-start; padding-top: 120px; }
.collage figure { margin: 0; min-width: 0; max-width: 100%; position: relative; }
.collage figure.wide { width: min(100%, 560px); }
.collage figure.square { width: min(100%, 420px); }
.collage figure.tall { width: min(100%, 340px); }
/* the caption floats on the image, no box: placed where it reads with the most contrast and set in
   charcoal, or ivory where the image is dark there (positions from _build/place_captions.py) */
@font-face { font-family: 'Maya Fielding Display'; src: url('../fonts/MayaFieldingDisplay-Bold.otf') format('opentype'); font-weight: 700; font-display: block; }
@font-face { font-family: 'Jacob Kanner'; src: url('../fonts/JacobKanner-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
.collage figcaption.float { position: absolute; top: var(--t); left: var(--l); width: var(--w); max-width: calc(100% - 24px); margin: 0;
  font-family: 'Jacob Kanner', var(--text); font-size: 12px; line-height: 15px; word-spacing: 0.2em; color: var(--ink); }
.collage figcaption.float.ground { color: var(--ground); }

.collage figure > img { width: 100%; }
.facts { margin-top: 96px; display: flex; flex-wrap: wrap; gap: 16px; }
/* phones keep the spine: two columns at the project's spine, every figure the full width of its side,
   8 px between figures and across the spine; captions shrink to fit */
@media (max-width: 800px) {
  .collage { padding-top: 48px; padding-bottom: 48px; }
  .spine { column-gap: 8px; }
  .spine .side { gap: 8px; }
  .spine .side.r { padding-top: 48px; }
  .collage figure, .collage figure.wide, .collage figure.square, .collage figure.tall, .collage figure.narrow { width: 100%; }
  .collage figcaption.float { font-size: 10px; line-height: 12px; word-spacing: 0.15em; top: var(--tm); left: var(--lm); width: var(--wm); max-width: calc(100% - 16px); color: var(--ink); }
  .collage figcaption.float.m-ground { color: var(--ground); }
  .collage figcaption.float.m-hide { display: none; }
  .facts { margin-top: 48px; }
}

/* placeholder mats until real images go in */
.mat {
  width: 100%; aspect-ratio: 4 / 3; padding: 24px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 13px; line-height: 20px; color: var(--muted);
}
.mat.beige { background: var(--beige); }
.mat.meadow { background: var(--meadow); color: var(--ink); }
.mat.portrait { aspect-ratio: 3 / 4; }
.mat.square { aspect-ratio: 1; }

/* the blank band where the background drawing finishes; nothing goes in it */
.sketch-room { height: max(60vh, 520px); }

/* the landing sheet (retired November 5, 2026; kept for reference) */
.sketch-final { grid-column: 8 / span 5; margin-top: 160px; }
.sketch-final img { opacity: 0; width: 100%; mix-blend-mode: multiply; }
.sketch-final.landed img { opacity: 1; }
.sketch-final .cap { opacity: 0; transition: opacity 0.3s; }
.sketch-final.landed .cap { opacity: 1; }
@media (max-width: 800px) { .sketch-final { grid-column: 1 / -1; margin-top: 0; } }
@media (prefers-reduced-motion: reduce) { .sketch-final img, .sketch-final .cap { opacity: 1; } }

/* plans stacked as one set */
.plans { display: flex; flex-direction: column; gap: 12px; }

/* facts */
.facts dl { margin: 0; flex: 1 1 400px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; font-size: 14px; line-height: 20px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.facts .body { margin: 0; flex: 1 1 400px; min-width: 0; font-size: 16px; line-height: 24px; font-weight: 300; max-width: 60ch; }

/* ---- home index ---- */
.index { padding-top: 80px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 96px; }
.index article { display: flex; flex-direction: column; gap: 16px; }
.index .head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.index .pair { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.index .pair > * { flex: 1 1 400px; min-width: 0; }
.index .pair > img { height: auto; }

/* ---- footer ---- */
footer { padding-top: 32px; padding-bottom: 40px; }
footer .rule { height: 1px; background: var(--ink); margin-bottom: 24px; }
footer .cols { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; line-height: 20px; color: var(--muted); }
footer p { margin: 0; flex: 1 1 240px; min-width: 0; }
footer p.right { text-align: right; flex: 1 1 200px; }
footer strong { font-weight: 400; color: var(--ink); }

/* ---- map, home page footer ----
   NYC shoreline drawn from the city's borough boundaries; pins are placed by neighborhood, never by address. */
.mapblock { margin-top: 48px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px 40px; align-items: end; }
.nycmap { display: block; width: 100%; max-width: 260px; height: auto; overflow: hidden; }
.nycmap .land { fill: var(--beige); stroke: var(--ink); stroke-width: 0.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.nycmap .pin.build { fill: var(--clay); stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.nycmap .pin.done { fill: var(--ink); }
.nycmap .pin.office { fill: var(--dusk); stroke: var(--ink); stroke-width: 0.75px; vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
.nycmap text { font-family: var(--text); font-size: 13px; fill: var(--ink); }
.nycmap a:hover text, .nycmap a:focus text { text-decoration: underline; }
.maplegend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 20px; color: var(--ink); }
.maplegend li { display: flex; align-items: center; gap: 10px; }
.maplegend i { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.maplegend .build { background: var(--clay); box-shadow: inset 0 0 0 1px var(--ink); }
.maplegend .done { background: var(--ink); }
.maplegend .xmark { width: 13px; height: 13px; flex: none; fill: var(--dusk); stroke: var(--ink); stroke-width: 0.75px; vector-effect: non-scaling-stroke; }
.maplegend .note { color: var(--muted); }
@media (max-width: 800px) { .mapblock { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { #sketch { display: none; } }

/* ---- contact page ----
   the founders side by side; names stacked one word per line, the middle name in Bold (brand book chapter 3) */
.contact { padding-top: 40px; padding-bottom: 24px; }
.contact .people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; margin-top: 40px; max-width: 880px; }
.person figure { margin: 0; aspect-ratio: 4 / 5; max-width: 100%; }
.person figure img, .person figure .mat { width: 100%; height: 100%; object-fit: cover; display: block; }
.person .name { margin-top: 16px; }
.person .name b { font-weight: 700; }
.person p { margin: 8px 0 0; font-size: 14px; line-height: 20px; }
.person .role { color: var(--muted); }
.person a { color: var(--ink); }
.contact .studio { margin-top: 56px; font-size: 14px; line-height: 20px; }
.contact .studio strong { font-weight: 400; }
.contact .mapblock { margin-top: 24px; }
@media (max-width: 600px) { .contact .people { grid-template-columns: 1fr; } }
/* the wordmark as the studio's entry in the map legend: letters at the legend's cap height */
.maplegend .studio-mark svg:not(.xmark) { width: 109px; height: 19px; display: block; fill: var(--ink); margin-left: -2px; }
/* a drawing on the home page sits on the ground: its sheet is transparent (white removed on export) */
/* a photograph with its drawing laid over its right edge: the photo takes 60 percent, the drawing
   (transparent sheet) starts inside it and sits lower, so the lines cross onto the photo */
.index .pair.overlap { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 0; }
.index .pair.overlap > img:first-child { grid-column: 1 / 13; grid-row: 1; }
.index .pair.overlap > img.drawing { grid-column: 10 / 21; grid-row: 1; align-self: start; margin-top: 8%; position: relative; z-index: 1; }
@media (max-width: 600px) {
  .index .pair.overlap > img:first-child { grid-column: 1 / 17; }
  .index .pair.overlap > img.drawing { grid-column: 6 / 21; grid-row: 2; margin-top: -18%; }
}
.collage figure.narrow { width: min(100%, 220px); }