@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #f7f3ea;
  --cream: #fffaf1;
  --ink: #202c20;
  --quiet: #505b4b;
  --accent: #963b26;
  --rule: #d6cdbb;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; letter-spacing: -.045em; line-height: 1.05; }
main { min-height: 52vh; }
.shell { width: min(100% - 4rem, 78rem); margin-inline: auto; }
.skip-link { position: fixed; z-index: 2; inset: .5rem auto auto .5rem; padding: .75rem; background: var(--cream); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.template-ad-slot { max-width: 100%; }

.masthead { border-top: .35rem solid var(--ink); }
.masthead-inner { min-height: 5.55rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: block; flex: 0 0 auto; width: clamp(12rem, 23vw, 18.75rem); }
.brand img { width: 100%; height: auto; }
.masthead-note { font-size: .75rem; text-transform: uppercase; letter-spacing: .13em; color: var(--quiet); }
.main-nav { border-block: 1px solid var(--rule); }
.nav-inner { display: flex; flex-wrap: wrap; gap: 0 clamp(.8rem, 3vw, 2.5rem); }
.nav-inner a { font-size: .875rem; font-weight: 600; text-decoration: none; color: var(--quiet); padding: .88rem 0 .77rem; border-bottom: .15rem solid transparent; }
.nav-inner a:hover, .nav-inner a[aria-current="page"] { color: var(--accent); border-color: currentColor; }
.category-menu { display: none; position: relative; flex: 0 0 auto; }
.category-menu summary {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding-inline: .75rem;
  border: 1px solid var(--rule);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 650;
  list-style: none;
}
.category-menu summary::-webkit-details-marker { display: none; }
.category-menu summary::after {
  content: "";
  width: .42rem;
  height: .42rem;
  border: solid currentColor;
  border-width: 0 1px 1px 0;
  transform: translateY(-.13rem) rotate(45deg);
}
.category-menu[open] summary::after { transform: translateY(.1rem) rotate(225deg); }
.category-menu nav {
  position: absolute;
  z-index: 3;
  inset: calc(100% + .4rem) 0 auto auto;
  width: 11rem;
  padding: .3rem;
  border: 1px solid var(--rule);
  background: var(--cream);
  box-shadow: 0 .4rem 1rem #202c201a;
}
.category-menu nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: .65rem;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
}
.category-menu nav a:hover, .category-menu nav a[aria-current="page"] { color: var(--accent); background: var(--paper); }

.home-intro { display: flex; justify-content: space-between; align-items: end; gap: 1.25rem; margin: clamp(2rem, 5vw, 4.25rem) 0 1.55rem; }
.home-intro h1 { font-size: clamp(2.8rem, 6.7vw, 6.4rem); }
.home-intro p { color: var(--quiet); font-size: clamp(.95rem, 1.65vw, 1.13rem); max-width: 19rem; line-height: 1.6; padding-bottom: .3rem; }
.lead-story { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); background: var(--ink); color: var(--cream); }
.lead-story > img { width: 100%; height: 100%; min-height: 24rem; object-fit: cover; aspect-ratio: 3 / 2; }
.lead-text { display: flex; flex-direction: column; justify-content: center; align-items: start; padding: clamp(1.65rem, 4.25vw, 4.7rem); gap: 1.15rem; }
.lead-text .kicker { color: #f1a28a; }
.lead-text h2 { font-size: clamp(2.25rem, 4.4vw, 4.55rem); }
.lead-text h2 a { text-decoration: none; }
.lead-text > p:not(.kicker) { line-height: 1.65; color: #eee5d6; max-width: 36ch; }
.lead-text .read-link { color: #f6c0a7; margin-top: .35rem; }
.kicker, .read-time { text-transform: uppercase; letter-spacing: .11em; font-weight: 650; font-size: .68rem; line-height: 1.5; color: var(--accent); }
.read-link { display: inline-flex; align-items: baseline; gap: .55rem; font-size: .82rem; font-weight: 700; color: var(--accent); text-decoration-thickness: 1px; white-space: nowrap; }
.read-link span { font-size: 1.05em; }
.department { margin-top: clamp(2.9rem, 6vw, 5.6rem); }
.department-head { border-top: 1px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding-block: 1rem 1.3rem; }
.department-head h2 { font-size: clamp(2rem, 4.2vw, 3.45rem); }
.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.35rem clamp(1rem, 2.5vw, 2rem); }
.story-card a { display: grid; gap: .53rem; text-decoration: none; }
.story-card a:hover :is(h2, h3) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.story-card .story-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: .45rem; }
.story-card :is(h2, h3) { font-size: clamp(1.5rem, 2.6vw, 2.45rem); }
.story-card p { color: var(--quiet); font-size: .9rem; line-height: 1.55; }
.department-culture { padding: clamp(1.25rem, 3vw, 2.5rem); background: #e9e7d8; }
.department-culture .department-head { padding-top: 0; border-top: 0; }
.department-techniques .story-card a { border-bottom: 1px solid var(--rule); padding-bottom: 1rem; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; color: var(--quiet); font-size: .83rem; letter-spacing: .01em; margin-bottom: 1.4rem; }
.breadcrumb a:hover { color: var(--accent); }
.page-heading { padding-block: clamp(2rem, 5vw, 4.4rem) 2rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--rule); }
.page-heading h1 { font-size: clamp(2.7rem, 6vw, 5.25rem); }
.page-heading p { margin-top: .85rem; line-height: 1.6; color: var(--quiet); max-width: 55ch; }
.pagination { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.pagination a { display: block; padding: .6rem 1rem; border: 1px solid var(--rule); }
.pagination [aria-current="page"] { background: var(--ink); color: var(--cream); }

.story-heading { grid-area: heading; padding-block: clamp(2rem, 5vw, 4.25rem) clamp(1.6rem, 4vw, 2.9rem); }
.story-heading h1 { font-size: clamp(2.65rem, 6.3vw, 5.9rem); overflow-wrap: anywhere; }
.story-deck { font: clamp(1.18rem, 2.6vw, 1.72rem)/1.45 var(--serif); color: var(--quiet); margin: .92rem 0 1.15rem; max-width: 46ch; }
.story-layout {
  display: grid;
  align-items: start;
  justify-content: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(62%, 45rem)) minmax(0, 1fr);
  grid-template-areas: ". heading ." ". cover ." ". ad ." "contents prose .";
  column-gap: clamp(1.5rem, 4vw, 4.5rem);
}
.story-layout > .story-photo { grid-area: cover; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.story-layout > .template-ad-article { grid-area: ad; min-width: 0; }
.story-layout > .prose { grid-area: prose; }
.story-layout > :is(.prose, .article-aside) { margin-top: clamp(1.5rem, 5vw, 4rem); }
.article-aside { grid-area: contents; justify-self: end; width: min(100%, 12.5rem); position: sticky; top: 1.5rem; border-top: 2px solid var(--rule); padding-top: .95rem; color: var(--quiet); }
.article-aside summary { cursor: pointer; font-weight: 700; color: var(--ink); font-size: .85rem; }
.article-aside nav { display: grid; gap: .6rem; margin-top: .85rem; max-height: min(65vh, 30rem); overflow-y: auto; padding: .25rem .35rem; }
.article-aside nav a { font-size: .8rem; line-height: 1.5; }
.prose { max-width: 45rem; min-width: 0; overflow-wrap: anywhere; font: clamp(1.06rem, 1.5vw, 1.19rem)/1.75 Georgia, serif; }
.prose p + p { margin-top: 1.12em; }
.prose :is(h2, h3, h4) { margin: 1.45em 0 .53em; line-height: 1.13; }
.prose h2 { font-size: clamp(1.75rem, 3.2vw, 2.65rem); }
.prose h3 { font-size: clamp(1.4rem, 2.5vw, 1.95rem); }
.prose li + li { margin-top: .45em; }
.prose a { color: var(--accent); }
.prose dl { margin: 1.35em 0; }
.prose dt { font-weight: bold; margin: .85em 0 .2em; }
.prose dd { margin-inline-start: 0; }
.prose .revision { margin-bottom: 1.3rem; font: .78rem/1.4 var(--sans); color: var(--quiet); }
.info-page { max-width: 58rem; }

.site-footer { margin-top: clamp(3.25rem, 7vw, 7rem); padding-top: 2.2rem; background: #eae4d6; border-top: 1px solid var(--rule); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; padding-bottom: 2rem; }
.footer-inner .brand { width: min(14rem, 100%); }
.footer-inner nav { display: flex; flex-wrap: wrap; gap: .9rem 1.25rem; font-size: .87rem; }
.footer-inner nav a:hover { color: var(--accent); }
.footer-end { border-top: 1px solid var(--rule); padding: 1rem 0 1.4rem; color: var(--quiet); font-size: .78rem; }

@media (max-width: 56rem) {
  .home-intro { align-items: start; flex-direction: column; gap: .45rem; }
  .home-intro p { max-width: none; }
  .lead-story { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .lead-story > img { min-height: 19rem; }
  .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-layout { grid-template-columns: minmax(0, 45rem); grid-template-areas: "heading" "cover" "ad" "contents" "prose"; }
  .story-layout > .prose { margin-top: 1.4rem; }
  .article-aside { justify-self: stretch; width: auto; position: static; padding: .85rem 1rem; border: 1px solid var(--rule); }
  .article-aside nav { max-height: none; }
}
@media (max-width: 37rem) {
  .shell { width: calc(100% - 2rem); }
  .masthead-inner { min-height: 4.35rem; }
  .masthead-inner .brand { width: min(55%, 12rem); }
  .masthead-note, .main-nav { display: none; }
  .category-menu { display: block; }
  .lead-story { grid-template-columns: 1fr; }
  .lead-story > img { min-height: 0; aspect-ratio: 3 / 2; }
  .lead-text { gap: .8rem; }
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-inner { flex-direction: column; align-items: start; }
}