:root { color-scheme: light; --paper:#f4f4f4; --deep:#e9e9e9; --ink:#171717; --muted:#626262; --rule:#c6c6c6; --serif:Georgia,'Times New Roman',serif; --sans:Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--serif); -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; inset:0; z-index:50; pointer-events:none; background:radial-gradient(#555 .33px,transparent .45px) 0 0/5px 5px; opacity:.13; mix-blend-mode:multiply; }
a { color:inherit; } img { display:block; max-width:100%; } figure,h1,h2,p { margin:0; }
::selection { background:#222; color:#fff; }
:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.skip-link { position:absolute; top:-100px; left:15px; z-index:70; background:#fff; padding:12px 15px; font:700 12px var(--sans); }
.skip-link:focus { top:15px; }
.progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:60; pointer-events:none; }
.progress span { display:block; width:0; height:100%; background:#111; }
.site-header { height:72px; display:flex; align-items:center; gap:22px; padding:0 clamp(22px,4vw,70px); border-bottom:1px solid #b8b8b8; background:rgba(244,244,244,.96); position:sticky; top:0; z-index:40; backdrop-filter:blur(8px); }
.brand { font:italic 700 32px/.9 var(--serif); letter-spacing:-.12em; text-decoration:none; min-width:34px; }
.brand span { font-weight:400; margin-left:2px; }
.site-caption { border-left:1px solid #aaa; padding-left:20px; font:10px var(--sans); text-transform:uppercase; letter-spacing:.17em; white-space:nowrap; }
.section-nav { display:flex; margin-left:auto; height:100%; gap:clamp(16px,2.1vw,34px); }
.section-nav a { display:inline-flex; align-items:center; gap:7px; position:relative; font:10px var(--sans); letter-spacing:.1em; text-decoration:none; color:#777; }
.section-nav a span { text-transform:uppercase; letter-spacing:.07em; color:#222; }
.section-nav a::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#111; transform:scaleX(0); transform-origin:left; transition:transform .2s; }
.section-nav a:hover::after,.section-nav a.active::after { transform:scaleX(1); }

.hero { display:grid; grid-template-columns:minmax(0,42%) minmax(0,58%); background:var(--paper); border-bottom:1px solid #1c1c1c; }
.hero-content { min-width:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:clamp(50px,6vw,92px) clamp(25px,4.2vw,70px); }
.hero-figure { min-width:0; align-self:center; background:#ededed; border-left:1px solid var(--rule); }
.hero-image { width:100%; height:auto; filter:grayscale(1) contrast(1.06); }
.hero-figure figcaption { padding:13px 17px; border-top:1px solid var(--rule); font:10px var(--sans); text-transform:uppercase; letter-spacing:.15em; }
.hero-kicker { font:11px var(--sans); text-transform:uppercase; letter-spacing:.21em; }
.hero h1 { font:normal clamp(3.2rem,6.2vw,7rem)/.95 var(--serif); letter-spacing:-.085em; margin:36px 0 0 -.04em; white-space:nowrap; }
.hero h1 span { font-style:italic; }
.hero-deck { font:italic clamp(1.25rem,1.9vw,1.65rem)/1.38 var(--serif); margin-top:30px; max-width:390px; }
.hero-read { display:inline-flex; justify-content:space-between; min-width:188px; gap:30px; margin-top:45px; padding:0 0 10px; border-bottom:1px solid #111; font:10px var(--sans); text-transform:uppercase; text-decoration:none; letter-spacing:.16em; }
.hero-read span { font-size:22px; line-height:.55; transition:transform .2s; }
.hero-read:hover span { transform:translate(4px,4px); }
.hero-index { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:clamp(45px,7vw,105px); font:10px var(--sans); text-transform:uppercase; letter-spacing:.11em; }
.hero-index span:nth-child(1),.hero-index span:nth-child(4) { color:#777; }
.collection-intro { max-width:1250px; min-height:185px; margin:auto; padding:42px 35px; display:grid; grid-template-columns:1fr 3fr 1fr; align-items:center; gap:20px; }
.collection-intro > span { font:10px var(--sans); text-transform:uppercase; letter-spacing:.13em; white-space:nowrap; }
.collection-intro > span:last-child { text-align:right; color:#666; }
.collection-intro p { font:italic clamp(1.15rem,1.8vw,1.6rem)/1.45 var(--serif); }
.collection-intro i { font-style:normal; margin:0 7px; color:#999; }

.poem-section { border-top:1px solid #202020; scroll-margin-top:71px; }
.poem-heading { display:flex; align-items:start; gap:40px; margin-bottom:55px; }
.poem-label { display:flex; gap:10px; align-items:center; padding-top:14px; min-width:105px; font:10px var(--sans); letter-spacing:.12em; color:#686868; }
.label-line { width:25px; height:1px; background:#777; transform:rotate(-5deg); }
.poem-heading h2 { font:normal clamp(3.8rem,6.4vw,7.4rem)/.9 var(--serif); letter-spacing:-.07em; }
.poem-body { font:clamp(1.13rem,1.46vw,1.32rem)/1.58 var(--serif); }
.stanza + .stanza { margin-top:1.58em; }
.verse-line { display:block; }
.verse-line em { font-style:italic; text-decoration:underline; text-decoration-color:#aaa; text-underline-offset:4px; }
.poem-first { padding:112px 28px 140px; }
.first-inner { max-width:980px; margin:auto; }
.poem-first .poem-body { margin-left:145px; max-width:735px; }
.poem-first .poem-heading { border-bottom:1px solid var(--rule); padding-bottom:54px; margin-bottom:60px; }

.poem-split { padding:110px clamp(25px,5vw,90px) 125px; }
.poem-split:nth-of-type(odd) { background:var(--deep); }
.split-inner { max-width:1320px; margin:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"copy art"; gap:clamp(35px,6vw,105px); align-items:start; }
.poem-copy { grid-area:copy; }
.poem-art { grid-area:art; margin-top:5px; }
.image-left .split-inner { grid-template-areas:"art copy"; }
.image-left .poem-art { margin-top:15px; }
.poem-split .poem-heading { display:block; }
.poem-split .poem-label { margin-bottom:38px; }
.poem-split .poem-heading h2 { font-size:clamp(3.6rem,5.4vw,6.3rem); }
.poem-split .poem-body { max-width:640px; }
.art-frame { padding:8px; border:1px solid #bdbdbd; background:#f4f4f4; box-shadow:8px 10px 0 rgba(0,0,0,.07); }
.poem-art img { width:100%; height:auto; filter:grayscale(1) contrast(1.08); }
.poem-art figcaption { display:flex; justify-content:space-between; gap:12px; padding-top:17px; font:10px var(--sans); text-transform:uppercase; letter-spacing:.15em; }

.poem-geometry { background:#1b1b1b; color:#eee; border-top:3px solid #111; }
.geometry-image { background:var(--paper); padding:70px clamp(25px,5vw,90px); }
.geometry-image .poem-art { max-width:1320px; margin:auto; }
.geometry-image .art-frame { padding:9px; }
.geometry-image figcaption { color:#222; }
.geometry-inner { position:relative; overflow:hidden; max-width:1000px; margin:auto; padding:95px 28px 130px; }
.geometry-inner::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px); background-size:58px 58px; mask-image:linear-gradient(to bottom,black,transparent 75%); }
.poem-geometry .poem-heading,.poem-geometry .poem-body { position:relative; z-index:1; }
.poem-geometry .poem-heading { border-bottom:1px solid #656565; padding-bottom:54px; }
.poem-geometry .poem-heading h2 { font-size:clamp(5.2rem,9vw,10rem); letter-spacing:-.09em; }
.poem-geometry .poem-heading h2 em { font-style:italic; }
.poem-geometry .poem-label { color:#aaa; }
.poem-geometry .label-line { background:#aaa; }
.poem-geometry .poem-body { margin-left:145px; max-width:735px; }
.poem-geometry .stanza:first-child { text-transform:uppercase; font-family:var(--sans); font-size:.86em; letter-spacing:.16em; line-height:2.1; }
.poem-geometry .stanza:nth-last-child(2) { font-size:1.2em; }
.poem-geometry .stanza:last-child { margin-top:2.2em; font-style:italic; }

.endpiece { text-align:center; padding:95px 20px 105px; }
.end-mark { font:28px var(--serif); display:block; margin-bottom:26px; }
.endpiece p { font:italic clamp(2.5rem,5vw,4.7rem) var(--serif); letter-spacing:-.05em; }
.endpiece a { display:inline-block; margin-top:45px; padding-bottom:8px; border-bottom:1px solid #222; font:10px var(--sans); letter-spacing:.16em; text-transform:uppercase; text-decoration:none; }
.endpiece a span { font-size:15px; margin-left:15px; }
.site-footer { display:flex; justify-content:space-between; background:#1b1b1b; color:#eee; padding:23px clamp(24px,4vw,70px); font:10px var(--sans); text-transform:uppercase; letter-spacing:.17em; }

@media (max-width:950px) {
  .site-caption { display:none; }
  .poem-heading { gap:20px; }
  .poem-label { min-width:85px; }
  .poem-first .poem-body,.poem-geometry .poem-body { margin-left:105px; }
  .poem-split .poem-heading h2 { font-size:clamp(3.4rem,6vw,5rem); }
}
@media (max-width:700px) {
  .site-header { height:64px; padding:0 20px; }
  .section-nav { gap:20px; }
  .section-nav a span { display:none; }
  .hero { display:flex; flex-direction:column; }
  .hero-content { padding:58px 24px 45px; }
  .hero h1 { font-size:clamp(3.6rem,13vw,6.2rem); margin-top:38px; }
  .hero-deck { margin-top:25px; }
  .hero-index { margin-top:55px; gap:8px; font-size:9px; }
  .hero-figure { width:100%; border-left:0; border-top:1px solid var(--rule); }
  .collection-intro { display:block; min-height:0; padding:45px 22px; }
  .collection-intro p { margin:18px 0; }
  .collection-intro > span:last-child { display:block; text-align:left; }
  .poem-section { scroll-margin-top:63px; }
  .poem-heading { display:block; margin-bottom:40px; }
  .poem-label { margin-bottom:40px; }
  .poem-heading h2 { font-size:clamp(3.9rem,13vw,6.8rem); }
  .poem-body { font-size:1.13rem; line-height:1.58; }
  .stanza + .stanza { margin-top:1.65em; }
  .poem-first { padding:75px 22px 95px; }
  .poem-first .poem-heading { padding-bottom:43px; margin-bottom:48px; }
  .poem-first .poem-body { margin-left:0; }
  .poem-split { padding:75px 22px 90px; }
  .split-inner,.image-left .split-inner { display:flex; flex-direction:column; gap:45px; }
  .poem-art { width:100%; }
  .poem-split .poem-heading h2 { font-size:clamp(3.8rem,12vw,6rem); }
  .art-frame { padding:5px; box-shadow:5px 6px 0 rgba(0,0,0,.07); }
  .geometry-image { padding:45px 18px; }
  .geometry-inner { padding:80px 22px 100px; }
  .poem-geometry .poem-heading h2 { font-size:clamp(4.8rem,15vw,8rem); }
  .poem-geometry .poem-body { margin-left:0; }
  .endpiece { padding:80px 20px 90px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }

/* Cross-links to the rest of the collection */
.works-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 1.8vw, 26px); }
.works-nav a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.32); padding-bottom: 4px; transition: border-color .2s; }
.works-nav a:hover { border-bottom-color: currentColor; }
@media (max-width: 700px) {
  .site-footer { flex-direction: column; align-items: center; gap: 14px; text-align: center; }
}