:root {
  --paper: #f3f0e7;
  --paper-deep: #e9e4d7;
  --ink: #191918;
  --ink-soft: #5f5b53;
  --rule: #c9c3b4;
  --rule-dark: #8d877a;
  --brick: #b13828;
  --brick-dark: #8f2c20;
  --white: #fffdf7;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
}

img {
  display: block;
  max-width: 100%;
}

button,
input {
  font: inherit;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--brick);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.wrap {
  width: min(100% - 32px, 1320px);
  margin-inline: auto;
}

.topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  background: var(--brick);
  border-radius: 50%;
}

.masthead {
  padding: 28px 0 18px;
  border-bottom: 3px double var(--ink);
}

.brand {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6.5vw, 7rem);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.masthead-sub {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.nav > div {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav > div a,
.nav > div button {
  color: var(--ink);
  text-decoration: none;
}

.nav > div a:hover,
.nav > div button:hover {
  color: var(--brick);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
  padding: 44px 0 56px;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 10px;
  background: var(--brick);
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 5.2vw, 5.6rem);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.035em;
}

.lede {
  max-width: 46ch;
  margin: 22px 0 0;
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.5;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.feature-stamp {
  position: absolute;
  top: 18px;
  right: -18px;
  padding: 8px 12px;
  background: var(--paper);
  border: 2px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(2deg);
}

.hero-art {
  position: relative;
  padding: 22px;
}

.hero-art::before {
  content: "";
  position: absolute;
  inset: 12px -12px -12px 12px;
  background: var(--brick);
}

.feature-figure {
  position: relative;
  background: var(--white);
  padding: 14px;
}

.feature-figure img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.feature-figure figcaption {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: var(--brick);
  border-color: var(--brick);
}

.button.dark {
  background: var(--brick);
  border-color: var(--brick);
}

.button.dark:hover {
  background: var(--brick-dark);
  border-color: var(--brick-dark);
}

.button.outline {
  background: transparent;
  color: var(--ink);
}

.button.outline:hover {
  background: var(--ink);
  color: var(--white);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 34px 0 14px;
  border-bottom: 3px double var(--ink);
}

.section-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.archive-tools {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: end;
  padding: 18px 0;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filters button {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--rule-dark);
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.filters button[aria-pressed="true"] {
  background: var(--brick);
  border-color: var(--brick);
  color: var(--white);
}

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid var(--ink);
}

.search label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.search input {
  width: 100%;
  min-height: 42px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.search input:focus {
  outline: 0;
  border-bottom-color: var(--brick);
}

#result-count {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px 28px;
  padding: 26px 0 48px;
}

.post-card {
  display: flex;
  flex-direction: column;
}

.post-image {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--rule);
  cursor: pointer;
}

.post-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 8px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.post-meta .category {
  color: var(--brick);
  font-weight: 700;
}

.post-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.12;
}

.post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.post-actions .button {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 0.64rem;
}

/* Reviewed integration: exact markup selectors and completed responsive layout. */
html{scroll-padding-top:20px}
button{cursor:pointer}button,a,input{-webkit-tap-highlight-color:transparent}
.masthead{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:30px 0}
.brand{display:block;text-decoration:none;text-transform:none;white-space:nowrap;font-size:clamp(2.4rem,6.5vw,6.9rem)}
.brand span,.section-head h2 span{color:var(--brick)}
.masthead-sub{line-height:1.7;flex-shrink:0;margin:0}
.nav{font-size:12px}.nav > div{display:flex;gap:28px;align-items:center}.nav button{background:none;border:0;padding:6px 0;font:inherit}.nav a{text-decoration:none}
.hero{padding:50px 0 66px;gap:70px}
.hero h1{font-size:clamp(3.7rem,6.5vw,6.9rem);font-weight:700;line-height:.95}
em{font-weight:400;color:var(--brick)}
.eyebrow{padding:0;background:none;color:var(--ink-soft);font-size:10px;letter-spacing:.12em}
.lede{font-family:var(--sans);font-size:16px;line-height:1.7;max-width:40ch}
.hero-note{font-family:var(--mono);font-size:10px;color:var(--ink-soft);margin-top:25px}
.button{gap:24px;letter-spacing:.02em;text-transform:none;font-size:12px}.button.dark{background:var(--ink);border-color:var(--ink)}.button.dark:hover{background:var(--brick)}
.hero-art{padding:16px 20px 0 0}.hero-art:before{inset:32px 0 10px 36px}
.feature-stamp{z-index:3;top:0;right:0;background:var(--brick);color:var(--white);border:0;transform:rotate(5deg);padding:10px 15px}
.feature-figure{position:relative;margin:0;padding:20px 20px 0;border:1px solid var(--ink);background:var(--white)}
.feature-figure img{width:100%;height:380px;object-fit:contain}
.feature-figure figcaption{display:flex;justify-content:space-between;gap:15px;padding:17px 0;font:9px var(--mono);letter-spacing:.05em}
.feature-figure figcaption a{text-decoration:none}
.margin-note{display:block;position:relative;margin:23px 0 0;text-align:right;font:8px var(--mono);letter-spacing:.1em}
.ticker{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 0;font:10px var(--mono);letter-spacing:.09em}.ticker span:nth-child(even){color:var(--brick);font-size:22px}
.archive{padding:35px 0 65px}.section-head{border:0;align-items:end;padding-bottom:20px}.section-head h2{font-size:clamp(2.5rem,4vw,4rem);font-weight:400;line-height:1.1}.section-head p{font-size:13px;color:var(--ink-soft);line-height:1.7;margin:0}
.archive-tools{border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);grid-template-columns:1fr 230px;align-items:center;gap:25px}
.filters{gap:3px}.filters button{border:0;min-height:42px;padding:9px 11px;font-size:10px;letter-spacing:0;text-transform:none;background:transparent}.filters button[aria-pressed=true]{background:var(--ink);color:var(--white)}
.search{border:1px solid var(--rule);padding:0 10px;gap:4px}.search input{font:11px var(--sans);min-width:0}.search input:focus-visible{outline:2px solid var(--brick);outline-offset:3px}.search>span:last-child{font-size:23px}
.collection-meta{display:flex;justify-content:space-between;gap:20px;margin-top:14px;color:var(--ink-soft);font:9px var(--mono);letter-spacing:.06em}#result-count{margin:0;font:inherit}
.post-image{height:300px;padding:15px;background:var(--paper-deep);border:0}.post-image img{height:100%;object-fit:contain}.post-image:hover{background:#ded8ca}
.post-card{border-top:2px solid var(--ink);padding-top:10px;min-width:0}.post-meta{font-size:9px;color:var(--ink-soft)}.post-card h3{font-weight:400;font-size:25px;line-height:1.17;margin:0 0 18px}
.post-actions{margin-top:auto;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--rule);font:11px var(--mono)}.post-actions a{text-decoration:none}.post-actions button{background:transparent;border:0;font:inherit;padding:8px 2px}.post-actions button[aria-pressed=true]{color:var(--brick);font-weight:bold}
.empty{grid-column:1/-1;padding:60px 0;text-align:center;border-block:1px solid var(--rule)}
.archive-foot{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--ink);padding:20px 0;font:11px var(--mono);color:var(--ink-soft)}.archive-foot a{color:var(--ink)}
.about{background:var(--ink);color:var(--paper);padding:72px 0}.about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:120px}.about .eyebrow{color:#bcb6a8}.about h2{font:clamp(2.2rem,3.5vw,3.8rem)/1.06 var(--serif);margin:0 0 25px}.about p{color:#c4c0b6;font-size:14px;line-height:1.8;max-width:51ch}.about em{color:#e97660}.text-link{display:inline-block;margin-top:10px;font:12px var(--mono)}.facts>div{border-top:1px solid #55534d;padding:20px 0 12px}.facts span{font:9px var(--mono);color:#aaa69b}.facts h3{font:23px var(--serif);margin:10px 0}.facts p{margin:0;font-size:13px}
.closing{background:var(--brick);color:var(--paper);padding:65px 0 75px;overflow:hidden}.closing>.wrap{position:relative}.closing .eyebrow{color:var(--paper)}.closing h2{font:clamp(3rem,5.5vw,6.2rem)/1 var(--serif);margin:0 0 30px;position:relative;z-index:1}.closing em{color:var(--paper)}.light{background:var(--paper);border-color:var(--paper);color:var(--ink);position:relative;z-index:1}.light:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}.closing-symbol{position:absolute;right:6%;top:-65px;color:#c95b4c;font:400px/1 var(--serif);pointer-events:none}
footer{padding:35px 0 25px}.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:25px;font:11px var(--mono)}.footer-grid a{text-decoration:none}.footer-brand{font:bold 24px var(--serif)}footer p{font:9px/1.8 var(--mono);color:var(--ink-soft);margin-top:25px}
dialog{width:min(740px,calc(100% - 30px));max-height:92vh;overflow:auto;border:1px solid var(--ink);padding:22px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#191918d9}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px}.dialog-head h2{font:25px var(--serif);margin:0}.dialog-head button{background:transparent;border:1px solid var(--rule);font-size:28px;min-width:44px;min-height:44px}#dialog-image{max-height:65vh;width:100%;object-fit:contain;background:#fff;margin-bottom:18px}#dialog-source{width:100%}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:20;background:var(--ink);color:var(--paper);padding:15px 22px;font:12px var(--mono);max-width:calc(100% - 30px);box-shadow:0 3px 20px #0003}.notice{border:1px solid var(--brick);padding:14px;font-size:13px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.legal{max-width:850px;padding:50px 0}.legal h1{font-size:clamp(2.5rem,6vw,4.5rem);margin:30px 0}.legal h2{font:30px var(--serif);margin-top:35px}.legal p{line-height:1.85;font-size:16px}
@media(min-width:1450px){.wrap{width:min(100% - 100px,1320px)}}
@media(max-width:1000px){.masthead-sub{font-size:9px}.hero{gap:30px}.feature-figure img{height:330px}.archive-tools{grid-template-columns:1fr}.search{max-width:400px}.about-grid{gap:50px}.ticker{font-size:8px}.post-image{height:260px}.nav > div{gap:18px}}
@media(max-width:760px){.wrap{width:calc(100% - 36px)}.topline{font-size:8px}.topline>span:nth-child(2){display:none}.masthead{padding:25px 0}.brand{font-size:clamp(2rem,8vw,3.8rem)}.masthead-sub{display:none}.nav{font-size:10px;gap:10px}.nav>div{gap:15px;flex-wrap:wrap}.follow-link{display:none}.hero{grid-template-columns:1fr;padding:35px 0 45px;gap:40px}.hero h1{font-size:clamp(3.2rem,12vw,5.6rem)}.lede{font-size:15px}.hero-art{max-width:540px;justify-self:center;width:100%;padding:16px 15px 0 0}.feature-figure{padding:18px 18px 0}.feature-figure img{height:340px}.hero-note{font-size:9px}.ticker{gap:12px;flex-wrap:wrap;justify-content:center}.ticker span:nth-last-child(-n+2){display:none}.section-head{display:block}.section-head>p{margin-top:20px}.archive{padding-top:28px}.filters button{font-size:10px;padding:8px 9px}.collection-meta{font-size:8px}#post-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}.post-image{height:245px}.post-card h3{font-size:23px}.post-meta{font-size:8px}.about{padding:50px 0}.about-grid{grid-template-columns:1fr;gap:35px}.closing-symbol{right:-65px;font-size:310px;top:0}.footer-grid{flex-wrap:wrap;gap:20px}.footer-brand{flex-basis:100%}.archive-foot{font-size:10px;flex-direction:column}.hero-actions{gap:10px}.button{padding:13px 15px;gap:20px}}
@media(max-width:480px){#post-grid{grid-template-columns:1fr}.post-image{height:345px}.feature-figure img{height:310px}.feature-figure figcaption{font-size:8px}.hero-actions .button{font-size:11px}.collection-meta{flex-wrap:wrap;gap:10px}.ticker{font-size:7px}.ticker span:nth-child(even){font-size:17px}.post-card h3{font-size:28px}.nav>div{gap:14px}.topline{letter-spacing:.03em}}