/* DESSAU NOTES — the Bauhaus issue. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/fonts/plex-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --paper: #ffffff;
  --ink: #181817;
  --plate: #eae7df;
  --gutter: 18px;
  --gap: 24px;
  --sans: Arial, Helvetica, sans-serif;
  --reading-sans: "IBM Plex Sans", var(--sans);
  --wordmark-size: 20px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); scroll-behavior: auto; }
body { margin: 0; font: 13px/1.42 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { color: var(--paper); background: var(--ink); }
.dark ::selection { color: var(--ink); background: var(--paper); }
a { color: inherit; text-decoration: none; }
a:hover { font-style: italic; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
p, h1, h2, h3, figure, blockquote { margin: 0; }
p { font-family: var(--reading-sans); }
h1, h2, h3 { font-weight: 400; }
h2 { font-size: 30px; line-height: 1.04; letter-spacing: -.9px; }
h3 { font-size: 22px; line-height: 1.1; letter-spacing: -.55px; }
p + p { margin-top: 1em; }
img { display: block; width: 100%; height: auto; object-fit: cover; }
figcaption { margin-top: 7px; font: 11px/1.4 var(--sans); }
button, input { font: inherit; }
.pad { padding: 28px var(--gutter); }
.dark { background: var(--ink); color: var(--paper); }
.prose { font: 14px/1.52 var(--reading-sans); }
.prose h3 { font: 15px/1.22 var(--sans); letter-spacing: -.25px; margin-bottom: 10px; }
.standfirst { font: 19px/1.34 var(--reading-sans); }
.text-link { display: inline-block; font: 12px/1.4 var(--sans); }
.skip-link { position: absolute; z-index: 10; top: 8px; left: 8px; padding: 10px 14px; background: var(--ink); color: var(--paper); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
/* Compact masthead; the page begins immediately with the work. */
.masthead { display: grid; grid-template-columns: 1.05fr 1fr 1.8fr; align-items: baseline; gap: var(--gap); padding: 13px var(--gutter) 16px; }
.masthead h1, .footer-wordmark { font: 700 var(--wordmark-size)/1.15 var(--sans); letter-spacing: normal; }
.masthead h1 a:hover, .footer-wordmark:hover { font-style: normal; text-decoration: underline; text-underline-offset: .15em; }
.masthead nav { grid-column: -2 / -1; display: flex; justify-content: flex-end; gap: 28px; font-size: 12px; }
.cover { padding-top: 0; }
.cover-grid { display: grid; grid-template-columns: 6fr 3fr 2.5fr; gap: var(--gap); align-items: stretch; }
.cover-image { min-width: 0; }
.cover-image img { height: clamp(530px, 43vw, 710px); object-position: 50% 52%; }
.cover-story { display: flex; flex-direction: column; justify-content: space-between; padding: 4px 0 22px; gap: 20px; }
.cover-story h2 { font-size: clamp(36px, 3.1vw, 47px); line-height: .99; letter-spacing: -1.8px; margin-bottom: 27px; }
.cover-story .standfirst { margin-bottom: 24px; }
.cover-story .prose { font-size: 14px; }
.cover-sidebar { display: grid; grid-template-rows: 1fr 1fr; gap: 25px; min-width: 0; }
.cover-sidebar img { aspect-ratio: 1.6; height: auto; margin-bottom: 11px; }
.cover-sidebar article:first-child img { object-position: 50% 57%; }
.cover-sidebar h3 { font-size: 22px; margin-bottom: 9px; }
.cover-sidebar p { font-size: 12px; line-height: 1.4; }
.opening-notes { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--gap); margin-top: 30px; }
.opening-notes h2 { font-size: 25px; }
.opening-notes > p { margin: 0; }
.opening-notes > div > p { font-size: 13px; margin-bottom: 11px; }
.contents { display: grid; gap: 5px; font-family: var(--reading-sans); font-size: 14px; }
/* An architectural spread: panoramic lead, a narrow column, four-column essay. */
.section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: end; margin-bottom: 24px; }
.section-heading p { font-size: 12px; justify-self: start; }
.room-lead { display: grid; grid-template-columns: 3.1fr 1fr; gap: var(--gap); }
.room-lead img { height: clamp(360px, 32vw, 590px); object-position: center; }
.room-lead article { display: flex; flex-direction: column; }
.room-lead article h3 { font-size: 31px; letter-spacing: -1px; margin-bottom: 20px; }
.room-lead article .prose { font-size: 14px; }
.room-lead .byline { font-size: 11px; margin-top: auto; padding-top: 20px; }
.room-columns { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--gap); margin-top: 28px; }
/* Four still-life plates, captions as compact essays. */
.inventory-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--gap); }
.inventory-grid img { height: clamp(260px,28vw,480px); object-position: center; }
figure.paper-plate img { object-fit: contain; object-position: center; padding: clamp(12px,1.35vw,24px); background: var(--plate); }
.inventory-grid h3 { font-size: 22px; margin: 16px 0 12px; }
/* A full-bleed split spread; its structure replaces dividers. */
.keeping { display: grid; grid-template-columns: 1fr 1fr; min-height: 610px; }
.keeping-image { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; background: var(--plate); }
.keeping-image > img { align-self: center; height: clamp(400px,40vw,640px); padding: clamp(20px,3vw,48px); object-fit: contain; }
.image-note { padding: 22px var(--gutter); background: var(--ink); color: var(--paper); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: end; }
.image-note h2 { font-size: 31px; }
.image-note p { font-size: 12px; }
.keeping-copy { padding-top: 28px; padding-bottom: 28px; background: var(--ink); color: var(--paper); }
.keeping-copy > h3 { font-size: 40px; line-height: 1.02; letter-spacing: -1.4px; margin-bottom: 22px; }
.keeping-copy .standfirst { font-size: 20px; margin-bottom: 28px; }
.keeping-text { columns: 2; column-gap: var(--gap); }
.keeping-text p { orphans: 3; widows: 3; }
.keeping-copy > .text-link { margin-top: 22px; }
/* Six-frame visual essay. */
.light { padding-top: 34px; }
.light-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 23px var(--gap); }
.light-grid img { aspect-ratio: 1.5; height: auto; }
.light-grid figcaption { display: flex; gap: 13px; }
.light-note { display: grid; grid-template-columns: 1fr 2.05fr; gap: var(--gap); margin-top: 27px; }
.light-note > p:first-child { font-size: 19px; letter-spacing: -.3px; }
.light-note .prose { columns: 2; column-gap: var(--gap); margin: 0; }
/* A print and a set of reading notes. */
.conversation-heading { display: grid; grid-template-columns: 1.1fr 1.8fr 1fr; gap: var(--gap); align-items: start; margin-bottom: 27px; }
.conversation-heading h2 { font-size: 32px; }
.conversation-heading .standfirst { font-size: 22px; margin: 0; }
.conversation-heading > p:last-child { font-size: 12px; justify-self: end; margin: 0; }
.interview-layout { display: grid; grid-template-columns: 1fr 3.1fr; gap: var(--gap); align-items: start; }
.interview-figure img { aspect-ratio: .69; object-position: 36% 50%; }
.interview-text { columns: 3; column-gap: var(--gap); }
.qa { margin-bottom: 23px; break-inside: avoid-column; }
.qa h3 { font-size: 14px; font-weight: 600; line-height: 1.25; break-after: avoid; }
.qa p { orphans: 3; widows: 3; }
/* Unequal, inverted facing pages. */
.two-views { display: grid; grid-template-columns: 5fr 7fr; }
.view-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 22px; }
.view-heading h2 { font-size: 29px; }
.view-heading p { font-size: 12px; }
.two-views img { height: clamp(350px,37vw,620px); }
.near-view img { object-position: center; }
.far-view img { object-position: 50% 44%; }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: 22px; }
.two-columns p { margin: 0; }
/* Dense marginalia; five different editorial columns, no card chrome. */
.notebook { padding-top: 32px; }
.notebook-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr 1.15fr; gap: var(--gap); align-items: start; }
.notebook-grid h3 { font-size: 19px; margin-bottom: 12px; }
.notebook-lead h3, .notebook-last h3 { font-size: 24px; letter-spacing: -.7px; }
.notebook-pair { display: grid; gap: 23px; }
.notebook-grid .prose { font-size: 13px; }
.notebook-image img { height: clamp(340px,32vw,510px); object-position: 49% 50%; }
.notebook-last .text-link { margin-top: 23px; }
.prose a, .image-credits a, .byline.text-link, .keeping-copy > .text-link { text-decoration: underline; text-underline-offset: .18em; }
.image-credits { margin-top: 32px; max-width: 92ch; }
.image-credits summary { width: fit-content; padding: 8px 0; font-size: 14px; cursor: pointer; }
.image-credits summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.image-credits > p { margin: 8px 0 16px; max-width: 76ch; }
.image-credits h3 { font-size: 16px; margin: 14px 0 6px; }
.image-credits ul { margin: 0; padding-inline-start: 18px; }
.image-credits li + li { margin-top: 4px; }
.colophon { display: grid; grid-template-columns: 1.15fr 1fr 2.1fr 1.15fr; gap: var(--gap); align-items: start; font-size: 12px; padding-top: 26px; padding-bottom: 29px; }
.colophon > p { grid-column: 3; margin: 0; }
.colophon nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px 20px; }
@media (min-width: 1800px) {
  :root { --gap: 30px; --gutter: 22px; }
  body { font-size: 14px; }
  .prose, .cover-story .prose, .room-lead article .prose { font-size: 15px; }
  .cover-story .prose { font-size: clamp(17px, .9vw, 21px); }
  .cover-sidebar p, .notebook-grid .prose { font-size: 14px; }
  .cover-story .standfirst { font-size: 22px; }
  .keeping { min-height: 640px; }
  .cover-sidebar img { aspect-ratio: 1.8; }
  .notebook-grid h3 { font-size: 22px; }
}
@media (max-width: 1100px) {
  :root { --gap: 18px; --gutter: 14px; }
  .masthead { grid-template-columns: 1fr .9fr 1.8fr; }
  .masthead nav { gap: 16px; flex-wrap: wrap; }
  .cover-grid { grid-template-columns: 4.5fr 3fr 2.5fr; }
  .cover-story h2 { font-size: clamp(30px, 4vw, 34px); }
  .cover-story .standfirst { font-size: 17px; }
  .cover-story .prose { font-size: 13px; }
  .cover-sidebar h3 { font-size: 19px; }
  .room-lead { grid-template-columns: 2fr 1fr; }
  .room-lead article h3 { font-size: 26px; }
  .room-lead img { height: 100%; min-height: 420px; }
  .room-lead figure { display: flex; flex-direction: column; }
  .inventory-grid { gap: 16px; }
  .inventory-grid h3 { font-size: 19px; }
  .keeping-text { columns: 1; }
  .keeping-copy > h3 { font-size: 34px; }
  .image-note { display: block; }
  .image-note p { margin-top: 15px; }
  .conversation-heading { grid-template-columns: 1fr 1.5fr; }
  .conversation-heading > p:last-child { display: none; }
  .interview-layout { grid-template-columns: 1fr 2.1fr; }
  .interview-text { columns: 2; }
  .interview-figure img { aspect-ratio: .58; }
  .view-heading { display: block; }
  .view-heading p { margin-top: 8px; }
  .notebook-grid { grid-template-columns: 1fr 1fr 1fr; }
  .notebook-grid > :nth-child(4) { grid-column: 1 / 3; grid-template-columns: repeat(3,1fr); }
  .notebook-last { grid-column: 3; }
  .colophon { grid-template-columns: 1fr 1fr 1.4fr; }
  .colophon nav { grid-column: 1/-1; justify-content: flex-start; }
}
@media (max-width: 760px) {
  :root { --gap: 18px; --gutter: 12px; --wordmark-size: 18px; }
  body { font-size: 13px; }
  h2 { font-size: 28px; }
  .prose, .cover-story .prose, .room-lead article .prose { font-size: 15px; line-height: 1.5; }
  .pad { padding-top: 24px; padding-bottom: 24px; }
  .masthead { grid-template-columns: 1fr 1fr; gap: 13px; padding-top: 15px; padding-bottom: 19px; }
  .masthead nav { grid-column: 1/-1; justify-content: space-between; gap: 8px; font-size: 12px; }
  .masthead nav a { padding: 6px 0; }
  .cover { padding-top: 0; }
  .cover-grid { grid-template-columns: 1fr 1fr; gap: 20px var(--gap); }
  .cover-image { grid-column: 1/-1; }
  .cover-image img { height: auto; }
  .cover-story { grid-column: 1/-1; padding: 0; gap: 17px; }
  .cover-story > div { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .cover-story h2 { font-size: 38px; margin: 0; }
  .cover-story .standfirst { margin: 0; font-size: 19px; }
  .cover-story .prose { grid-column: 1/-1; columns: 2; column-gap: var(--gap); }
  .cover-story .text-link { padding: 5px 0; }
  .cover-sidebar { grid-column: 1/-1; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: var(--gap); }
  .cover-sidebar img { aspect-ratio: 1.1; }
  .cover-sidebar h3 { font-size: 21px; }
  .cover-sidebar p { font-size: 13px; }
  .opening-notes { grid-template-columns: 1fr 1fr; margin-top: 26px; }
  .opening-notes h2 { font-size: 27px; }
  .opening-notes .prose { font-size: 14px; }
  .contents { font-size: 14px; }
  .section-heading { grid-template-columns: 1.1fr 1fr; align-items: start; margin-bottom: 20px; gap: 16px; }
  .section-heading h2 { font-size: 27px; }
  .section-heading p { font-size: 12px; }
  .desktop-only { display: none; }
  .room-lead { grid-template-columns: 1fr; }
  .room-lead figure { display: block; }
  .room-lead img { min-height: 0; height: 55vw; }
  .room-lead article h3 { font-size: 28px; }
  .room-lead article .prose { columns: 2; column-gap: var(--gap); }
  .room-columns { grid-template-columns: 1fr 1fr; gap: 24px var(--gap); }
  .inventory-grid { grid-template-columns: 1fr 1fr; gap: 25px var(--gap); }
  .inventory-grid img { height: 55vw; }
  .inventory-grid h3 { font-size: 21px; }
  .inventory-grid .prose { font-size: 14px; }
  .keeping { grid-template-columns: 1fr; }
  .keeping-image > img { height: min(105vw,600px); }
  .image-note { display: grid; grid-template-columns: 1.3fr 1fr; }
  .image-note h2 { font-size: 27px; }
  .image-note p { font-size: 11px; }
  .keeping-copy > h3 { font-size: 34px; }
  .keeping-copy .standfirst { font-size: 21px; }
  .keeping-text { columns: 2; }
  .light-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .light-grid img { aspect-ratio: 1.15; }
  .light-grid figcaption { gap: 7px; font-size: 11px; }
  .light-note { grid-template-columns: 1fr; gap: 15px; }
  .light-note .prose { columns: 2; }
  .conversation-heading { grid-template-columns: 1fr 1fr; }
  .conversation-heading h2 { font-size: 29px; }
  .conversation-heading .standfirst { font-size: 18px; }
  .interview-layout { grid-template-columns: 1fr; }
  .interview-figure { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 18px; }
  .interview-figure img { aspect-ratio: .84; }
  .interview-figure figcaption { grid-column: 2; font-size: 12px; margin: 0; align-self: end; }
  .interview-text { columns: 2; }
  .interview-text h3 { font-size: 15px; }
  .two-views { grid-template-columns: 1fr; }
  .two-views img { height: 75vw; max-height: 650px; }
  .view-heading { display: flex; align-items: start; }
  .view-heading h2 { font-size: 28px; }
  .view-heading p { font-size: 12px; margin: 0; max-width: 43%; }
  .two-columns { gap: 18px; }
  .notebook-grid { grid-template-columns: 1fr 1fr; }
  .notebook-image { grid-column: 1/-1; }
  .notebook-image img { height: 52vw; object-position: 50% 53%; }
  .notebook-grid > :nth-child(4) { grid-column: 1; grid-template-columns: 1fr; }
  .notebook-last { grid-column: 2; }
  .notebook-grid .prose { font-size: 14px; }
  .colophon { grid-template-columns: 1fr 1fr; gap: 20px; }
  .colophon > p { grid-column: 1/-1; }
  .colophon nav { grid-column: 1/-1; justify-content: space-between; }
}
@media (max-width: 540px) {
  .cover-story > div { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 420px) {
  :root { --gap: 15px; }
  .cover-story h2 { font-size: 34px; }
  .cover-story .standfirst { font-size: 17px; }
  .cover-story .prose { columns: 1; }
  .opening-notes { grid-template-columns: 1fr 1fr; }
  .opening-notes > h2 { grid-column: 1/-1; }
  .opening-notes > div:last-child { grid-column: 1/-1; }
  .contents { grid-template-columns: 1fr 1fr; gap: 8px 15px; }
  .section-heading h2 { font-size: 25px; }
  .room-lead article .prose { columns: 1; }
  .room-columns { grid-template-columns: 1fr; }
  .room-columns > div { columns: 2; column-gap: 15px; }
  .room-columns h3 { column-span: all; }
  .room-columns p { font-size: 14px; }
  .inventory-grid h3 { font-size: 19px; }
  .inventory-grid .prose { font-size: 14px; }
  .keeping-text { columns: 1; }
  .light-note .prose { columns: 1; }
  .conversation-heading { grid-template-columns: 1fr; }
  .conversation-heading h2 br { display: none; }
  .conversation-heading .standfirst { font-size: 19px; }
  .interview-text { columns: 1; }
  .interview-figure { display: block; }
  .interview-figure img { aspect-ratio: 1; }
  .interview-figure figcaption { margin-top: 7px; }
  .interview-text .qa { margin-bottom: 24px; }
  .two-columns { font-size: 14px; }
  .notebook-grid h3 { font-size: 19px; }
  .notebook-grid .prose { font-size: 14px; }
}
@media print {
  :root { --gutter: 0; --gap: 16px; }
  body { font-size: 10pt; }
  .masthead nav, .contents, .text-link, .colophon nav, .skip-link { display: none; }
  .dark { background: white; color: black; }
  .pad { padding-block: 15px; }
  img { max-height: 70mm !important; }
  .keeping-image > img { position: static; min-height: 0; }
  .image-note { position: static; color: black; padding: 10px 0; }
  .keeping-copy { color: black; background: white; }
  .prose { font-size: 10pt; }
  section { break-before: auto; }
  figure, h2, h3 { break-inside: avoid; }
  h2,h3 { break-after: avoid; }
}