:root {
  color-scheme: light;
  --blue: #17558c;
  --contact-blue: #3d749e;
  --contact-muted: #f1f5f8;
  --ink: #272e33;
  --muted: #59636a;
  --paper: #e4e5e3;
  --line: #bec4c6;
  --gutter: clamp(22px, 4.1vw, 72px);
}
* { box-sizing: border-box; }
html {
  scroll-padding-top: 24px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.wrap {
  width: min(1360px, calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}
/* A closer reading width beneath the broad photograph. */
.introduction.wrap,
.projects.wrap,
.contact-inner.wrap,
.footer-inner.wrap {
  width: min(1080px, calc(100% - var(--gutter) * 2));
}
p, h1, h2, h3, figure { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 5px; }
a:hover { color: var(--blue); }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

/* One reading order at every width: name, description, navigation, image. */
.masthead { padding-block: 38px 24px; }
.masthead h1 {
  color: var(--blue);
  font-size: clamp(2.5rem, 5.3vw, 4.75rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.05em;
}
.mast-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 40px;
  row-gap: 14px;
  margin-top: 18px;
}
.discipline { font-size: 1rem; line-height: 1.45; }
.discipline span { display: inline-block; max-width: 100%; }
.masthead nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: .9375rem; }
.masthead nav a { padding-block: 6px; text-decoration: none; }
.masthead nav a:hover { text-decoration: underline; }

.project-image img { display: block; width: 100%; height: auto; }
.project-image figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 32px;
  padding-top: 12px;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted);
}
figcaption strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: .9375rem; font-weight: 400; }
.project-role { text-align: right; }

.introduction {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 8vw, 125px);
  padding-block: 54px 64px;
}
.lead {
  max-width: 600px;
  font-size: clamp(1.8rem, 2.7vw, 2.65rem);
  font-weight: 400;
  line-height: 1.23;
  letter-spacing: -.035em;
  overflow-wrap: break-word;
}
.copy { max-width: 580px; }
.keep-together { display: inline-block; max-width: 100%; }
.copy p + p { margin-top: 18px; }

.section-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 32px;
  border-top: 1px solid var(--blue);
  padding-block: 24px 28px;
}
.section-heading h2 {
  color: var(--blue);
  font-size: clamp(1.8rem, 2.7vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.2;
}
.section-heading > p { color: var(--muted); font-size: .875rem; }
.project-list { list-style: none; padding: 0; margin: 0; }
.project-list li {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.5fr) minmax(0, .7fr);
  gap: 32px;
  border-top: 1px solid var(--line);
  padding-block: 24px 26px;
}
.project-name h3 { margin-bottom: 7px; font-size: 1.3125rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.25; }
.project-name > p { color: var(--muted); font-size: .875rem; line-height: 1.5; }
.project-description p { max-width: 490px; font-size: 1rem; }
.attribution { display: block; margin-top: 7px; color: var(--muted); font-size: .8125rem; }
.project-detail { text-align: right; font-size: .875rem; line-height: 1.6; font-variant-numeric: tabular-nums; }
.project-detail span { display: block; color: var(--muted); }

/* A distinct closing section, outside the project list's visual rhythm. */
.contact { margin-top: 50px; background: var(--contact-blue); color: #fff; }
.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  align-items: baseline;
  gap: 40px;
  padding-block: 54px 50px;
}
.contact h2 { font-size: clamp(2rem, 3.3vw, 3rem); font-weight: 400; letter-spacing: -.04em; line-height: 1.15; }
.contact address { font-style: normal; }
.contact .email {
  display: inline-block;
  max-width: 100%;
  color: #fff;
  font-size: clamp(1.25rem, 2.5vw, 2.25rem);
  line-height: 1.3;
  letter-spacing: -.035em;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact .email:hover { text-decoration: underline; }
.contact-details > p { margin-top: 20px; font-size: 1rem; line-height: 1.6; }
.contact-details > p span { display: block; color: var(--contact-muted); }
footer { background: var(--contact-blue); color: var(--contact-muted); font-size: .8125rem; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; border-top: 1px solid #ffffff40; padding-block: 16px 24px; }
.skip { position: absolute; top: -100px; left: 20px; z-index: 10; background: var(--paper); padding: 10px; }
.skip:focus { top: 10px; }

@media (max-width: 900px) {
  .introduction { gap: 40px; }
  .project-list li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px 32px; }
  .project-detail { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 14px; text-align: left; }
  .project-detail span { display: inline; }
  .contact-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; }
}
@media (max-width: 700px) {
  .masthead { padding-block: 26px 20px; }
  .masthead h1 { font-size: clamp(2.35rem, 9vw, 3.6rem); letter-spacing: -.045em; }
  .mast-meta { display: block; margin-top: 12px; }
  .discipline { max-width: 27ch; font-size: 1rem; }
  .masthead nav { margin-top: 14px; gap: 8px 26px; }
  .project-image img {
    width: calc(100% + var(--gutter) * 2);
    max-width: none;
    margin-inline: calc(var(--gutter) * -1);
    aspect-ratio: 1.6;
    height: auto;
    object-fit: cover;
    object-position: 62% center;
  }
  .project-image figcaption { display: block; padding-top: 12px; }
  .project-role { margin-top: 6px; text-align: left; }
  .introduction { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 34px 42px; }
  .lead { max-width: 540px; font-size: 1.8rem; line-height: 1.25; }
  .copy { max-width: none; }
  .section-heading { display: block; padding-block: 22px 24px; }
  .section-heading > p { max-width: 34ch; margin-top: 10px; }
  .project-list li { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 23px 25px; }
  .project-name h3 { font-size: 1.3125rem; margin-bottom: 5px; }
  .project-description p { max-width: none; }
  .project-detail { grid-column: auto; }
  .contact { margin-top: 26px; }
  .contact-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-block: 34px 32px; }
  .contact h2 { font-size: 2.25rem; }
  .contact .email { font-size: clamp(1.125rem, 5.45vw, 1.65rem); letter-spacing: -.025em; }
  .contact-details > p { margin-top: 18px; }
  .footer-inner { padding-bottom: 22px; }
}

/* Refinements shared by all three review directions. */
.project-image picture { display: block; }
.project-image figcaption, .attribution, footer { font-size: .875rem; }
.masthead nav a { display: inline-flex; align-items: center; min-height: 44px; }
.contact .email { min-height: 44px; display: inline-flex; align-items: center; }
.project-detail { max-width: 240px; justify-self: end; }
.project-number { display: none; }
#main:focus { outline: none; }
@media (max-width:900px) { .project-detail { max-width: none; justify-self: start; } }

/* B: the same content arranged as an architectural editorial. */
.direction-b { --paper:#e7e6e2; --blue:#264e6c; --muted:#59636a; --contact-blue:#3d749e; }
.direction-b .masthead { padding-top:30px; }
.direction-b .masthead h1 { font-size:clamp(2.35rem,4.2vw,3.8rem); }
.editorial-opening { padding-block:24px 40px; }
.direction-b .editorial-opening .lead { font-family:Georgia,'Times New Roman',serif; max-width:1100px; font-size:clamp(2.6rem,5.1vw,4.8rem); line-height:1.08; letter-spacing:-.045em; }
.direction-b .introduction { display:block; padding-block:42px 58px; }
.direction-b .copy { max-width:650px; margin-left:auto; font-size:1.125rem; }
.direction-b .section-heading { align-items:flex-start; padding-top:28px; }
.direction-b .section-heading h2 { font-size:clamp(2rem,3vw,2.8rem); }
.direction-b .project-list li { grid-template-columns:minmax(0,1.2fr) minmax(0,1.5fr) minmax(0,.8fr); gap:28px; padding-block:32px; }
.direction-b .project-name h3 { font-size:1.625rem; font-weight:400; }
.direction-b .contact-inner { grid-template-columns:1fr; gap:30px; }
.direction-b .contact h2 { font-size:clamp(2.5rem,5vw,4.5rem); }
.direction-b .contact .email { font-size:clamp(1.2rem,3.5vw,3rem); }
.direction-b .contact-details>p { display:flex; flex-wrap:wrap; gap:8px 24px; }
@media(max-width:900px){ .direction-b .project-list li{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)} }
@media(max-width:700px){
 .editorial-opening{padding-block:18px 30px}
 .direction-b .editorial-opening .lead{font-size:2.65rem;line-height:1.12}
 .direction-b .introduction{padding-block:30px 38px}
 .direction-b .copy{font-size:1rem}
 .direction-b .project-list li{grid-template-columns:minmax(0,1fr);gap:14px;padding-block:25px}
 .direction-b .project-name h3{font-size:1.5rem}
}

/* C: a stronger blue identity and a readable project index. */
.direction-c { --paper:#e2e5e8; --blue:#174f7b; --ink:#202f3a; --muted:#53616b; --line:#b9c3ca; --contact-blue:#ccdce7; --contact-muted:#234961; }
.direction-c .masthead.wrap{width:100%;padding:34px max(var(--gutter),calc((100% - 1360px)/2)) 24px;background:var(--blue);color:white}
.direction-c .masthead h1{color:white;font-weight:700;letter-spacing:-.06em;font-size:clamp(2.4rem,5.1vw,4.8rem)}
.direction-c .masthead nav a:hover{color:white}
.direction-c .project-image{margin-top:32px}
.direction-c .introduction{padding-block:42px 56px}
.direction-c .lead{font-weight:700;color:var(--blue);letter-spacing:-.04em}
.direction-c .section-heading{border-top-width:3px}
.direction-c .project-list{counter-reset:project}
.direction-c .project-name{position:relative;padding-left:38px}
.direction-c .project-number{display:block;position:absolute;left:0;top:2px;font-family:'Courier New',monospace;font-size:.875rem;color:var(--blue)}
.direction-c .project-detail{font-family:'Courier New',monospace;font-size:.875rem;line-height:1.5}
.direction-c .contact,.direction-c .contact .email{color:#17394f}
.direction-c .footer-inner{border-color:#23496155}
.direction-c .contact h2{font-weight:700}
@media(max-width:700px){.direction-c .project-image{margin-top:0}.direction-c .masthead.wrap{padding-top:26px;padding-bottom:20px}}
.direction-b .editorial-opening .lead { text-wrap: balance; }
.direction-b .project-name h3 { font-weight:700; }

/* Unified Signature approved by Ben Allwood, 28 September 2026. */
[class*="opening-"] .masthead h1 { font-size:clamp(2.25rem,4.8vw,4.25rem); }
[class*="opening-"] .masthead .discipline span { display:block; }
[class*="opening-"] .masthead nav { font-size:.875rem; }
[class*="opening-"] .masthead nav a { min-height:28px; padding-block:3px; }
.opening-signature .masthead { padding-block:36px 30px; }
.opening-signature .mast-meta { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; margin-top:12px; align-items:start; }
.opening-signature .discipline { line-height:1.5; padding-top:3px; }
.opening-signature .masthead .discipline span { display:inline; }
.opening-signature .masthead nav { display:flex; flex-direction:column; gap:0; align-items:flex-start; }
@media(max-width:700px){
 [class*="opening-"] .masthead h1 { font-size:clamp(2rem,9.2vw,3.4rem); letter-spacing:-.05em; }
 .opening-signature .masthead { padding-block:28px 26px; }
 .opening-signature .mast-meta { margin-top:10px; }
 .opening-signature .masthead .discipline span { display:block; }
 .opening-signature .discipline { max-width:none; font-size:1rem; }
 .opening-signature .masthead nav { margin-top:0; }
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}