/* Project page: white page, small text against very large type and big figures.
   Everything, sliders included, sits inside the same side margins on a hidden
   12-column grid (4 on phones), placed with --c. */
:root {
  --paper: #ffffff;
  --ink: #111111;
  --muted: #8a8a8a;
  --line: #dedbd6;
  --font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --big: clamp(40px, 1.6rem + 4.4vw, 104px);
  --mid: clamp(26px, 1.1rem + 2vw, 52px);
  --cols: 12;
  --gap: 20px;
  --max: 1440px;
  --side: max(20px, env(safe-area-inset-left, 0px));
  --side-r: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (max-width: 760px) { :root { --cols: 4; --gap: 12px; --side: max(16px, env(safe-area-inset-left, 0px)); --side-r: max(16px, env(safe-area-inset-right, 0px)); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 14px/1.5 var(--font); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
p, ol, ul, dl, dd, h2, h3 { margin: 0; padding: 0; font: inherit; }
img, video { display: block; width: 100%; height: auto; }
figure { margin: 0; }
figcaption, .muted { color: var(--muted); }
figcaption { margin-top: 8px; }

.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap); max-width: var(--max); margin: 0 auto; padding-left: var(--side); padding-right: var(--side-r); }
.grid > * { grid-column: var(--c, 1 / -1); grid-row: var(--r, auto); min-width: 0; }
@media (max-width: 760px) { .grid > * { grid-column: var(--m, 1 / -1); grid-row: auto; } }

/* header */
header.grid { font-size: 17px; letter-spacing: -.01em; padding-block: 20px; }
header .l { grid-column: 1 / span 3; }
header .c { grid-column: 5 / span 4; text-align: center; }
header .r { grid-column: 10 / -1; text-align: right; }
@media (max-width: 760px) { header.grid { font-size: 15px; } header .l { grid-column: 1; } header .c { grid-column: 2 / span 2; white-space: nowrap; } header .r { grid-column: 4; } }

/* type */
.big { font-size: var(--big); line-height: .98; letter-spacing: -.035em; font-weight: 400; text-wrap: balance; }
.mid { font-size: var(--mid); line-height: 1.02; letter-spacing: -.03em; font-weight: 400; text-wrap: balance; }
.lede { font-size: 16px; line-height: 1.45; }
strong { font-weight: 500; color: var(--ink); }
.label { color: var(--muted); }

/* section opener: number, title, note */
.sec { display: grid; grid-template-columns: subgrid; align-items: baseline; font-size: clamp(20px, 1rem + .7vw, 26px); letter-spacing: -.015em; }
.sec .note { font-size: 14px; letter-spacing: 0; }
.sec .n { grid-column: 1 / span 1; }
.sec .t { grid-column: 2 / span 5; }
.sec .note { grid-column: 9 / -1; text-align: right; color: var(--muted); }
@media (max-width: 760px) { .sec .t { grid-column: 2 / span 3; } .sec .note { display: none; } }

.space { margin-top: 22vh; }
@media (max-width: 760px) { .space { margin-top: 14vh; } }

.bleed img { width: 100%; }

.drawing img { mix-blend-mode: multiply; }
.clip1 { clip-path: polygon(0 0, 100% 0, 100% 52%, 72% 52%, 72% 100%, 0 100%); }
.clip2 { clip-path: polygon(0 60%, 24% 42%, 34% 0, 100% 0, 100% 22%, 94% 26%, 94% 40%, 66% 40%, 66% 100%, 0 100%); }
.clip3 { clip-path: polygon(0 58%, 40% 0, 100% 0, 100% 8%, 88% 8%, 88% 36%, 64% 36%, 64% 100%, 0 100%); }
.clip4 { clip-path: polygon(0 66%, 42% 0, 100% 0, 100% 100%, 0 100%); }


.list { display: grid; gap: 2px; }
.list li { list-style: none; border-top: 1px solid var(--line); padding-top: 6px; padding-bottom: 6px; }

.facts div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 12px; border-top: 1px solid var(--line); padding-block: 6px; }
.facts dt { color: var(--muted); }
.text { display: grid; gap: 1.2em; align-content: start; }
.text ol { padding-left: 1.2em; }
.text a { text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 2px; }

.end { align-self: end; }

.mark { font-size: 30.3vw; line-height: .74; letter-spacing: -.05em; font-weight: 500; margin: 22vh 0 0; padding: 0 var(--side) 3vw; white-space: nowrap; overflow: hidden; text-align: center; }
@media (max-width: 760px) { .mark { font-size: 27.5vw; } }


/* gallery: one slide at a time inside the page margins. Renders fill the stage; portraits and model photos sit inside it on white. */
.slider { max-width: var(--max); margin: 28px auto 0; padding-left: var(--side); padding-right: var(--side-r); }
.slider .grid { padding: 0; }
.stage { position: relative; width: 100%; aspect-ratio: 2000 / 1307; max-height: 90vh; overflow: hidden; background: var(--paper); }
.slide { position: absolute; inset: 0; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide.contain img { object-fit: contain; }
.arrow { position: absolute; top: 0; bottom: 0; width: 50%; display: flex; align-items: center; padding: 0 16px; background: none; border: 0; color: #fff; mix-blend-mode: difference; -webkit-tap-highlight-color: transparent; }
.arrow.prev { left: 0; justify-content: flex-start; cursor: w-resize; }
.arrow.next { right: 0; justify-content: flex-end; cursor: e-resize; }
.arrow svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.1; }
.arrow:focus-visible { outline: none; }
.arrow:focus-visible svg { outline: 1px solid currentColor; outline-offset: 6px; }
.count { text-align: right; font-variant-numeric: tabular-nums; }

/* plans and their legends */
.clip-gf { clip-path: polygon(0 4%, 15% 4%, 15% 0, 100% 0, 100% 88%, 93% 88%, 93% 100%, 0 100%); }
.legend { align-self: end; display: grid; gap: 10px; }
.legend-t { color: var(--muted); }
.legend ol { list-style: none; margin: 0; padding: 0; }
.legend li { display: grid; grid-template-columns: 2em minmax(0, 1fr); border-top: 1px solid var(--line); padding-block: 5px; }
.legend li b { font-weight: 500; font-variant-numeric: tabular-nums; }

/* numbered lists beside the section; numbers match the drawings and plan legends */
.list.num li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); }
.list.num b { font-weight: 500; font-variant-numeric: tabular-nums; }

/* research */
.quote { margin: 0; display: grid; gap: 16px; }
.fig { font-size: clamp(44px, 1.6rem + 3.6vw, 88px); line-height: 1; letter-spacing: -.04em; margin: 10px 0 14px; }
.figures > div p:last-child { max-width: 26em; }
.list.rows li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; padding-block: 10px; }
.list.rows b { font-weight: 500; }
.contact { margin-top: 12px; }
.clip-sec { clip-path: polygon(3.5% 0, 100% 0, 100% 100%, 0 100%, 0 80%, 3.5% 80%); }

/* extra numbers set on top of the section drawing, in the drawing's own style */
.tagged { position: relative; container-type: inline-size; }
.tag { position: absolute; transform: translate(-50%, -50%); font-weight: 500; font-size: 2.92cqw; line-height: 1; color: #111; }
.aside { margin-top: 14px; }

@media (max-width: 760px) { .list.steps li { grid-template-columns: 5em minmax(0, 1fr); } }

/* sliders on phones: bolder arrows that read on light photos, and swipes left to the slider */
.stage { touch-action: pan-y; }
@media (max-width: 760px) { .arrow { padding: 0 8px; } .arrow svg { width: 28px; height: 28px; stroke-width: 1.8; } }
@media (max-width: 760px) { .slider.model .stage { aspect-ratio: 5 / 4; } }

/* arrows sit in a row just below each picture, at its two edges, with the count between; the picture itself stays clear */
.arrow svg { display: none; }
.slider .count { grid-column: 1 / -1; order: -1; display: flex; justify-content: space-between; align-items: center; }
.slider .cap { margin-top: 4px; }
.nav { display: inline-flex; padding: 4px 0; background: none; border: 0; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.nav:hover { opacity: .55; }
@media (max-width: 760px) { .slider .cap { grid-column: 1 / -1; } }

/* scale bars: drawn as a share of each drawing's width, so they stay true at any screen size */
.scalebar { position: relative; margin: 16px 0 26px var(--o); width: var(--w); color: var(--ink); font-size: 11px; line-height: 1; }
.scalebar svg { display: block; width: 100%; height: 6px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1; }
.scalebar span { position: absolute; top: 12px; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.scalebar i { position: absolute; left: 100%; font-style: normal; white-space: pre; }
.goal a { display: block; }
/* accents: in any text with a bold accent, the rest goes grey so the accent reads clearly */
p:has(> strong), li > span:has(> strong) { color: var(--muted); }

/* the plans' scale bar sits in the section header; it spans 4 columns like each plan, so its metre matches theirs */
.sec > span { grid-row: 1; }
.sec .scalebar { grid-column: 3 / span 4; grid-row: 1; align-self: center; margin: 0 0 12px; }
@media (max-width: 760px) { .sec .scalebar { grid-column: 1 / -1; grid-row: 2; margin: 18px 0 14px; } }
@media (min-width: 761px) { .sec .scalebar.at6 { grid-column: 6 / span 4; } }