@font-face {
  font-family: Editorial;
  src: url("assets/editorial-regular.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: Editorial;
  src: url("assets/editorial-italic.otf") format("opentype");
  font-style: italic;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #f6f3ed;
  --ink: #211e1b;
  --muted: #5e5852;
  --rule: #c7bdb0;
  --accent: #b62b16;
  --serif: Editorial, "Times New Roman", serif;
  --sans: "Helvetica Neue", Arial, sans-serif;
  --mono: "Courier New", monospace;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
img { display: block; max-width: 100%; height: auto; }
figure, h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
em { font-weight: 400; }
.frame { width: min(100% - 8vw, 1490px); margin-inline: auto; }
.line { border-bottom: 1px solid var(--rule); }
.eyebrow { font: 700 .7rem/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.skip { position: absolute; z-index: 5; top: 0; left: 0; padding: 10px 14px; background: var(--paper); transform: translateY(-120%); }
.skip:focus { transform: none; }
.folio {
  min-height: 39px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font: 700 .64rem/1.2 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.folio a { justify-self: end; }
.folio a span { padding-left: 3px; }
.masthead {
  min-height: 162px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 11px 0 10px;
}
.brand { display: block; width: clamp(245px, 31vw, 440px); }
.brand img { width: 100%; }
.mast-note { font: italic 1.12rem/1.18 var(--serif); color: var(--muted); }
.mast-note-right { text-align: right; }
.navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  column-gap: clamp(15px, 4vw, 57px);
  font: 700 .67rem/1.2 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.navigation a { display: block; padding: 15px 0; white-space: nowrap; }
.shop-link { color: var(--accent); }
.cover {
  display: grid;
  grid-template-columns: .81fr 1.19fr;
  min-height: clamp(430px, 38vw, 590px);
  margin-top: 22px;
  border: 1px solid var(--rule);
}
.cover-copy {
  min-width: 0;
  padding: clamp(20px, 3.15vw, 49px) clamp(21px, 3.9vw, 63px) clamp(17px, 2.3vw, 35px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}
.cover-kicker { display: flex; align-items: center; gap: 11px; color: var(--accent); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.separator { display: block; width: 14px; height: 1px; background: var(--rule); }
.cover h1 { font-size: clamp(2.7rem, 5.5vw, 6.05rem); letter-spacing: -.069em; line-height: .95; }
.cover h1 em { display: block; white-space: nowrap; }
.cover-text p { max-width: 37ch; margin-top: 21px; color: var(--muted); font-size: .96rem; line-height: 1.62; }
.cover-link {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  margin-top: 22px;
  padding-bottom: 7px;
  border-bottom: 1px solid currentColor;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .105em;
  text-transform: uppercase;
}
.cover-link span, .text-link span { font-size: .95rem; }
.cover-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--rule); }
.cover-image { position: relative; min-width: 0; overflow: hidden; background: #403b37; }
.cover-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 59% 45%; }
.cover-image figcaption { position: absolute; right: 14px; bottom: 14px; padding: 8px 10px; color: #fffdf9; background: #181614d9; font-size: .62rem; }
.cover-image figcaption span { padding-inline: 5px; }
.selection { padding-top: clamp(47px, 6.9vw, 108px); }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--rule);
}
.section-label { color: var(--accent); margin-bottom: 9px; }
.section-head h2, .back-panel h2 { font-size: clamp(2.2rem, 4.9vw, 4.8rem); letter-spacing: -.055em; line-height: 1; }
.text-link { padding: 8px 0; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 39px); margin-top: 20px; }
.story { min-width: 0; }
.story img { width: 100%; aspect-ratio: 1.12; object-fit: cover; object-position: center; background: #d8d0c3; }
.story a { display: block; }
.story-label { display: flex; justify-content: space-between; gap: 5px; margin: 12px 0 8px; color: var(--accent); }
.story h3 { font-size: clamp(1.55rem, 2.5vw, 2.65rem); line-height: 1.05; letter-spacing: -.04em; }
.story h3 span { font: 400 .9rem var(--sans); color: var(--accent); white-space: nowrap; }
.story p { margin-top: 9px; font-size: .89rem; line-height: 1.55; color: var(--muted); }
.backmatter { display: grid; grid-template-columns: 1fr 1fr; margin: clamp(36px, 6vw, 84px) 0 51px; border: 1px solid var(--rule); }
.back-panel { padding: clamp(22px, 3.6vw, 49px); }
.back-panel + .back-panel { border-left: 1px solid var(--rule); }
.back-panel--editions { background-color: #ebe4d9; }
.catalogue-entry {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 17px;
  align-items: center;
  margin-top: 23px;
  border-top: 1px solid var(--rule);
  padding-top: 13px;
}
.entry-no { font: italic clamp(2.1rem, 4vw, 4rem)/1 var(--serif); color: var(--accent); }
.catalogue-entry strong { display: block; font: 400 1.28rem/1.2 var(--serif); }
.catalogue-entry small { color: var(--muted); display: block; margin-top: 4px; }
.entry-arrow { color: var(--accent); }
.shop-intro { max-width: 46ch; margin-top: 15px; color: var(--muted); font-size: .91rem; line-height: 1.55; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 21px 0 26px; border-top: 1px solid var(--rule); }
.site-footer img { width: 115px; }
.site-footer p { color: var(--muted); font-size: .77rem; }
.back-top { text-align: right; }
@media (max-width: 880px) {
  .cover-copy { padding-inline: 22px; }
  .cover { min-height: 430px; }
  .masthead { min-height: 134px; }
}
@media (max-width: 650px) {
  .frame { width: calc(100% - 28px); }
  .folio { grid-template-columns: 1fr auto; font-size: .61rem; }
  .folio-center, .mast-note { display: none; }
  .masthead { display: flex; justify-content: center; min-height: 0; padding: 10px 0; }
  .brand { width: clamp(165px, 57vw, 280px); }
  .navigation { column-gap: clamp(13px, 4vw, 24px); font-size: .61rem; padding: 5px 0; min-height: 0; }
  .navigation a { padding: 8px 0; }
  .cover { grid-template-columns: 1fr; min-height: 0; margin-top: 13px; }
  .cover-image { order: -1; aspect-ratio: 1.28; }
  .cover-image figcaption { bottom: 9px; right: 9px; font-size: .56rem; }
  .cover-copy { padding: 21px 19px 14px; gap: 20px; }
  .cover h1 { font-size: clamp(2.65rem, 10.3vw, 4.75rem); }
  .cover-text p { margin-top: 12px; }
  .cover-link { margin-top: 15px; }
  .cover-meta { padding-top: 9px; font-size: .6rem; }
  .section-head { display: block; }
  .text-link { display: inline-block; padding-bottom: 0; margin-top: 5px; }
  .stories { grid-template-columns: 1fr; gap: 25px; }
  .story img { aspect-ratio: 1.5; }
  .backmatter { grid-template-columns: 1fr; }
  .back-panel + .back-panel { border-left: 0; border-top: 1px solid var(--rule); }
  .site-footer { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.shop-link span, .cover-link span, .text-link span,
.story h3 span, .entry-arrow { font-family: var(--mono); }
.masthead {
  background: #211e1b;
  color: #f6f3ed;
  padding-inline: clamp(16px, 3.2vw, 48px);
}
.mast-note { color: #e0d7ca; }
.brand { width: clamp(220px, 38vw, 550px); }
.brand img { margin-inline: auto; max-height: 165px; object-fit: contain; }
.folio { min-height: 42px; }
.footer-logo { display: block; background: #211e1b; padding: 9px 11px; }
.footer-links, .nav-menu { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.35rem; font-size: .78rem; }
.nav-menu { list-style: none; margin: 0; padding: 0; }
.navigation .nav-menu { column-gap: clamp(15px, 4vw, 57px); justify-content: center; font-size: inherit; }
.navigation [aria-current="page"] { color: var(--accent); }
.cover-without-image { grid-template-columns: 1fr; min-height: 300px; }
.cover-without-image h1 { max-width: 16ch; }
.cover h1 { overflow-wrap: anywhere; }
.cover h1 em { white-space: normal; }
.stories .story-text { border-top: 1px solid var(--rule); padding: 3px 0 10px; }
.stories { row-gap: 30px; }
.cover .cover-image picture { display: contents; }
.preview-banner { background: #ebe4d9; color: var(--ink); padding: .8rem 1rem; margin: 18px 0; }
.publication-head { padding-block: clamp(37px, 7vw, 92px) clamp(20px, 3vw, 38px); border-bottom: 1px solid var(--rule); }
.publication-head h1 { font-size: clamp(2.65rem, 8.2vw, 7rem); line-height: .98; letter-spacing: -.055em; overflow-wrap: anywhere; }
.publication-head .deck { margin-top: 18px; color: var(--muted); font: italic clamp(1.2rem, 2.4vw, 1.8rem)/1.28 var(--serif); }
.pending-cover { min-height: 50vh; margin-bottom: 45px; }
.pending-cover p:last-child { margin-top: 16px; color: var(--muted); line-height: 1.55; }
.listing { min-height: 50vh; padding-bottom: 48px; }
.reading { max-width: 940px; margin-inline: auto; }
.reading .publication-head h1 { font-size: clamp(2.55rem, 7.4vw, 6.4rem); max-width: 15ch; }
.byline { color: var(--muted); margin-top: 20px; }
.reading-image { margin-top: 24px; }
.reading-image img { width: 100%; max-height: 580px; object-fit: cover; }
.reading-image figcaption { color: var(--muted); margin-top: 9px; }
.article-body { max-width: 690px; margin: clamp(25px, 5vw, 55px) auto; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.8; overflow-wrap: anywhere; }
.article-body > * + * { margin-top: 1.12em; }
.article-body h2, .article-body h3 { font-size: clamp(1.65rem, 4vw, 2.45rem); letter-spacing: -.033em; line-height: 1.14; }
.article-body a { text-decoration: underline; text-underline-offset: 3px; }
.article-body iframe, .article-body video, .article-body audio { max-width: 100%; }
.article-body blockquote { margin-inline: 0; padding-left: 1.05em; border-left: 2px solid var(--accent); font-family: var(--serif); font-size: 1.25em; }
.issue-end { padding: 18px 0 38px; border-top: 1px solid var(--rule); margin-top: 26px; }
.issue-end + .issue-end { margin-top: 0; }
.archive-list { max-width: 900px; margin-bottom: 27px; }
.empty-message { margin: 20px 0; color: var(--muted); line-height: 1.55; }
.section-search { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 23px 0; }
.section-search input, .section-search-submit { min-height: 44px; border: 1px solid var(--rule); color: var(--ink); }
.section-search input {
  flex: 0 1 19rem;
  min-width: 0;
  max-width: 100%;
  padding: 8px 12px;
  background: var(--paper);
  font: inherit;
}
.section-search input::placeholder { color: var(--muted); opacity: 1; }
.section-search-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  box-shadow: inset 0 -2px var(--accent);
  font: 700 .72rem/1.2 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
}
.section-search-submit svg { color: var(--accent); }
.section-search-submit:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.section-search-submit:hover svg { color: inherit; }
.section-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 520px) {
  .section-search input { flex: 1 1 10rem; }
  .section-search-submit { padding-inline: 11px; }
}
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; position: absolute; white-space: nowrap; }
.pagination .nav-links { margin-top: 25px; display: flex; gap: 14px; }
.pagination .current { font-weight: 700; color: var(--accent); }
.related-artists { margin-block: 30px; }
.commerce { padding-top: 30px; }
.commerce h1 { font-size: clamp(2.6rem, 7vw, 5rem); letter-spacing: -.045em; margin-bottom: 20px; }
@media (max-width: 650px) {
  .masthead { padding-block: 16px; }
  .brand { width: clamp(165px, 64vw, 300px); }
  .masthead .brand img { max-height: 104px; }
  .footer-links { width: 100%; order: 3; }
  .reading-image img { max-height: none; }
  .cover-without-image { min-height: 0; }
}

.arrow-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: .67rem;
  height: .67rem;
  padding: 0;
  vertical-align: .05em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 10 10 2M3 2h7v7' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.folio a .arrow-icon { margin-left: 3px; }

.editorial-media { margin-block: clamp(42px, 7vw, 85px) 0; }
.editorial-media-group { margin-top: 27px; }
.editorial-media-group h3 { margin-bottom: 13px; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.editorial-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 3vw, 32px); }
.editorial-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #ebe4d9; }
.editorial-gallery figcaption { display: grid; justify-items: start; gap: 3px; margin-top: 7px; font-size: .83rem; color: var(--muted); }
.editorial-gallery figcaption .text-link { text-decoration: underline; text-underline-offset: 3px; }
.editorial-media video, .editorial-media iframe { display: block; width: 100%; border: 0; background: var(--ink); aspect-ratio: 16 / 9; }
.editorial-media audio { display: block; width: 100%; max-width: 600px; }
.editorial-media-credit { margin-top: 19px; color: var(--muted); }
.artist-cover img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.artist-bio-with-portrait { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); align-items: start; gap: clamp(18px, 4vw, 52px); margin-top: 29px; }
.artist-bio-with-portrait .article-body { margin-block: 0; }
.artist-portrait img { width: 100%; }
.artist-portrait figcaption { margin-top: 7px; color: var(--muted); }
.artist-contact { margin-block: 32px; padding-top: 16px; border-top: 1px solid var(--rule); }
.artist-contact h2 { font: 400 clamp(1.8rem, 4vw, 3rem)/1.05 var(--serif); }
.artist-channels { display: flex; flex-wrap: wrap; gap: .45rem .65rem; margin-top: 14px; }
.artist-channels .text-link { min-width: 0; padding: .55rem .8rem; border: 1px solid var(--rule); overflow-wrap: anywhere; }
.artist-channels .text-link:hover { border-color: var(--accent); }
.story .artist-discipline { color: var(--accent); margin-bottom: 6px; font-size: .7rem; }
@media (max-width: 650px) {
  .artist-bio-with-portrait { grid-template-columns: 1fr; }
  .artist-portrait { max-width: 320px; }
}
@media (max-width: 460px) {
  .editorial-gallery { grid-template-columns: 1fr; }
}

.cover-demo {
  --demo-accent: #772a3d;
  background: #eee5d9;
  border-color: #cbb6ab;
}
.cover-demo .cover-kicker, .cover-demo .cover-link { color: var(--demo-accent); }
.cover-demo .cover-kicker .dot { background: var(--demo-accent); }
.cover-demo .cover-image img { object-position: 53% 37%; }
.cover-demo .cover-text p { max-width: 33ch; }
.demo-artist {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.7fr); align-items: center;
  margin: clamp(45px,7vw,90px) 0 35px; border: 1px solid #cbb6ab; background: #eee5d9;
}
.demo-artist > img { width: 100%; max-height: 390px; aspect-ratio: 1.2; object-fit: cover; object-position: center 30%; }
.demo-artist > div { padding: clamp(20px,4vw,57px); }
.demo-artist h2 { font: 400 clamp(2.4rem,5.5vw,5rem)/.98 var(--serif); letter-spacing: -.045em; }
.demo-artist div > p:not(.eyebrow) { margin: 12px 0; color: var(--muted); }
.demo-artist .section-label, .demo-artist .text-link { color: #772a3d; }
@media (max-width: 650px) {
  .demo-artist { grid-template-columns: 1fr; }
  .demo-artist > img { max-height: 290px; }
  .cover-demo .cover-image img { object-position: 50% 24%; }
}

.artist-gallery-collage {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: clamp(12px, 2.3vw, 25px);
  padding: 6px 4px 8px;
}
.artist-gallery-collage > figure { grid-column: span 6; min-width: 0; }
.artist-gallery-collage > figure:nth-child(6n+1) { grid-column: span 7; transform: rotate(-.8deg); }
.artist-gallery-collage > figure:nth-child(6n+2) { grid-column: span 5; margin-top: 12px; transform: rotate(.8deg); }
.artist-gallery-collage > figure:nth-child(6n+3) { grid-column: span 4; transform: rotate(.75deg); }
.artist-gallery-collage > figure:nth-child(6n+4) { grid-column: span 8; transform: rotate(-.65deg); }
.artist-gallery-collage > figure:nth-child(6n+5) { margin-top: 10px; transform: rotate(-.8deg); }
.artist-gallery-collage > figure:nth-child(6n+6) { transform: rotate(.65deg); }
.artist-gallery-collage > figure:only-child { grid-column: 1 / -1; transform: none; }
.artist-gallery-collage img { object-fit: cover; background: var(--paper); }
.artist-gallery-collage > figure:nth-child(6n+2) img,
.artist-gallery-collage > figure:nth-child(6n+3) img { aspect-ratio: 4 / 5; }
.artist-gallery-collage > figure:nth-child(6n+4) img { aspect-ratio: 16 / 10; }
@media (max-width: 650px) {
  .artist-gallery-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .artist-gallery-collage > figure:nth-child(n) { grid-column: auto; transform: none; margin: 0; }
  .artist-gallery-collage > figure:nth-child(3n+1) { grid-column: 1 / -1; }
}
