*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:#000;font-family:Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:4px}
a:hover,a:focus{background:#000;color:#fff}
.wander{overflow:hidden}
.masthead{min-height:100svh;padding:24px;display:flex;flex-direction:column;justify-content:space-between;border-bottom:4px solid}
.kicker,.small,nav,footer{font-family:"Courier New",monospace;font-weight:bold}
.masthead h1{font-size:clamp(7rem,30vw,24rem);letter-spacing:-.09em;line-height:.66;margin:.15em 0}
.masthead nav a{display:inline-block;border:3px solid;padding:12px;text-decoration:none}
.fragment{min-height:85svh;padding:10vw 6vw;border-bottom:4px solid;display:flex;flex-direction:column;justify-content:center}
.fragment.right{text-align:right;align-items:flex-end}
.giant{font-size:clamp(4rem,18vw,13rem);font-weight:900;line-height:.78;letter-spacing:-.07em;margin:0 0 40px}
.fragment>p:not(.giant){font-family:"Courier New",monospace;max-width:42ch;font-weight:bold}
.strip{border-bottom:4px solid;padding:0;display:flex;flex-direction:column}
.strip a{font-size:clamp(2rem,9vw,7rem);font-weight:900;letter-spacing:-.05em;text-decoration:none;padding:20px 24px;border-bottom:2px solid;line-height:.9}
.strip a:last-child{border-bottom:0}
footer{padding:20px 24px;display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap}
.archive-wrap{width:min(820px,calc(100% - 32px));margin:auto;padding:36px 0 80px}
.archive-head{margin-bottom:64px}
.archive-head h1{font-size:clamp(5rem,22vw,11rem);line-height:.8;letter-spacing:-.08em;margin:40px 0 10px}
.archive section{border-top:4px solid;padding:20px 0 42px}
.archive h2{font-family:"Courier New",monospace;margin:0 0 28px}
.archive article{border-top:1px solid;padding:16px 0}
.archive article:first-of-type{border-top:0}
.archive h3{font-size:1.45rem;margin:0 0 8px}
.archive p{margin:0;line-height:1.7}
.archive-foot{border-top:4px solid;display:block;padding-left:0;padding-right:0}
@media(max-width:560px){.masthead{padding:16px}.fragment{padding:18vw 16px}.strip a{padding:18px 16px}footer{padding:16px}.archive-wrap{width:calc(100% - 24px)}}

.quote-block{min-height:72svh;border-bottom:4px solid;display:flex;align-items:center;padding:8vw 6vw}
.quote-block>a{display:block;text-decoration:none;width:100%}
.quote-block>a:hover,.quote-block>a:focus{background:transparent;color:inherit}
.quote-block blockquote{font-size:clamp(2.6rem,10vw,8rem);font-weight:900;line-height:.92;letter-spacing:-.055em;margin:0;max-width:14ch}
.quote-block cite{display:block;font-family:"Courier New",monospace;font-style:normal;font-weight:bold;margin-top:36px}
.quote-block.inverse{background:#000;color:#fff}
.quote-block.inverse blockquote{margin-left:auto;text-align:right}
.quote-block.inverse cite{text-align:right}
.archive-call{margin-top:36px}
@media(max-width:560px){
  .quote-block{min-height:68svh;padding:18vw 16px}
  .quote-block blockquote{font-size:clamp(2.5rem,14vw,5rem)}
}

.fh-mark{font-family:"Times New Roman",serif;font-size:clamp(2.4rem,5vw,4.5rem);line-height:1;margin-bottom:18px}
.footer-mark{padding:5vw 4vw 0;border-top:4px solid;margin:0}


/* v0.4: three visual interruptions from the archive */
.artifact{border-bottom:4px solid;min-height:90svh;position:relative;display:flex;align-items:center;justify-content:center;padding:7vw 5vw;overflow:hidden}
.artifact>a{display:block;position:relative;text-decoration:none}
.artifact>a:hover,.artifact>a:focus{background:transparent;color:inherit}
.artifact img{display:block;max-width:100%;height:auto}
.artifact span{display:inline-block;margin-top:14px;font-family:"Courier New",monospace;font-weight:bold;font-size:.85rem;letter-spacing:.02em}
.artifact-poster{background:#000;color:#fff;padding:0;min-height:auto}
.artifact-poster>a{width:100%}
.artifact-poster img{width:100%;max-height:110svh;object-fit:cover;object-position:center}
.artifact-poster span{position:absolute;left:18px;bottom:18px;background:#fff;color:#000;padding:9px 11px;margin:0}
.artifact-sticker{min-height:100svh}
.artifact-sticker>a{width:min(58vw,620px);transform:rotate(-2deg)}
.artifact-sticker img{width:100%}
.artifact-zine{background:#000;color:#fff;min-height:100svh}
.artifact-zine>a{width:min(62vw,680px);transform:rotate(1.2deg)}
.artifact-zine img{width:100%;box-shadow:18px 18px 0 #fff}
.artifact-zine span{margin-top:28px}
@media(max-width:560px){
 .artifact{padding:18vw 16px}
 .artifact-poster{padding:0}
 .artifact-poster img{min-height:82svh;object-fit:cover}
 .artifact-sticker>a{width:84vw}
 .artifact-zine>a{width:78vw}
 .artifact-zine img{box-shadow:10px 10px 0 #fff}
}

/* v0.6 — clean black/white scroll choreography */
.sound-switch{
  position:sticky;top:12px;z-index:50;display:block;width:max-content;
  margin:12px 12px -48px auto;padding:9px 11px;border:2px solid #000;
  background:#fff;color:#000;font:700 .72rem/1 "Courier New",monospace;
  cursor:pointer;letter-spacing:.03em
}
.sound-switch:hover,.sound-switch:focus{background:#000;color:#fff}

.reading{min-height:100svh;border-bottom:4px solid;padding:11vw 7vw;display:flex;align-items:center}
.reading>a{width:100%;text-decoration:none}
.reading>a:hover,.reading>a:focus{background:transparent;color:inherit}
.reading blockquote{margin:0;max-width:23ch;font-size:clamp(2.1rem,6.7vw,6.6rem);font-weight:900;line-height:.98;letter-spacing:-.045em}
.reading cite{display:block;margin-top:42px;font:700 .85rem/1.3 "Courier New",monospace;font-style:normal}
.reading.inverse{background:#000;color:#fff}
.reading.inverse blockquote{margin-left:auto}
.reading.inverse cite{text-align:right}

.visual{position:relative;overflow:hidden;border-bottom:4px solid;display:flex;align-items:center;justify-content:center}
.visual a{display:block;text-decoration:none}
.visual a:hover,.visual a:focus{background:transparent}
.visual img{display:block;max-width:none}
.visual.inverse{background:#000;color:#fff}

.visual-crop{height:105svh;justify-content:flex-start}
.visual-crop a{width:100%;height:100%}
.visual-crop img{width:112vw;height:112svh;object-fit:cover;object-position:35% 50%;transform:translateX(-8vw)}

.visual-small{min-height:105svh;background:#fff}
.visual-small img{width:min(25vw,310px);height:auto}

.visual-full{min-height:115svh}
.visual-full a{width:min(68vw,780px)}
.visual-full img{width:100%;height:auto}

.inverse-block{background:#000;color:#fff}
.inverse-block a{color:inherit}

.silence{height:82svh;background:#fff;border-bottom:4px solid;display:flex;align-items:center;justify-content:center}
.silence span{font-family:"Times New Roman",serif;font-size:clamp(2.8rem,5vw,5rem)}

@media(max-width:560px){
  .sound-switch{font-size:.64rem;margin-bottom:-42px}
  .reading{padding:24vw 16px}
  .reading blockquote{font-size:clamp(2rem,10vw,3.7rem);line-height:1.01}
  .visual-crop{height:92svh}
  .visual-crop img{width:155vw;height:100%;transform:translateX(-30vw)}
  .visual-small{min-height:92svh}
  .visual-small img{width:45vw}
  .visual-full{min-height:100svh}
  .visual-full a{width:88vw}
  .silence{height:72svh}
}