:root{
  --paper: #f3ecdd;
  --paper-2: #ebe1c8;
  --ink: #3a3128;
  --ink-soft: #6b5f50;
  --red: #c85a3e;
  --fl-pink: #f5a3c2;
  --fl-yellow: #f1dc7a;
  --fl-cyan: #9dc9cc;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Zen Kaku Gothic Antique", sans-serif;
  background:#ece2cb;
  color:var(--ink);
  overflow-x:hidden;
}
.paper-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(1400px 900px at 30% 0%, #f6efe0 0%, #eee4cd 55%, #e2d6ba 100%);
}
.paper-bg::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(60,45,25,.08) 1px, transparent 1.3px),
    radial-gradient(rgba(60,45,25,.05) 1px, transparent 1px);
  background-size: 2.5px 2.5px, 5px 5px;
  mix-blend-mode: multiply; opacity:.45;
}
.paper-bg::after{
  content:""; position:absolute; inset:0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.12 0 0 0 0 0.08 0 0 0 0 0.18'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply; opacity:.3;
}
main{position:relative; z-index:1}

/* NAV */
nav.top{
  position: sticky; top:0; left:0; right:0; z-index:50;
  padding: 14px 28px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:"Space Mono", monospace;
  font-size: 10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:#fff;
  background: rgba(10,10,12,.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.14);
}
nav.top .brand{ font-family:"Archivo Black",sans-serif; font-size:14px; letter-spacing:0; color:#fff }
nav.top ul{ list-style:none; margin:0; padding:0; display:flex; gap:28px }
nav.top a{ color:#fff; text-decoration:none; opacity:.75 }
nav.top a:hover{ opacity:1; color:#fff }
nav.top .meta{ color: rgba(255,255,255,.6) }

/* nav buttons — plain text */
nav.top .nav-links{ display:flex; gap:24px; align-items:center }
nav.top a.nav-btn{
  font-family:"Space Mono",monospace; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  padding:2px 0; opacity:.55; position:relative;
  transition: opacity .25s ease, color .25s ease;
}
nav.top a.nav-btn::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
  background:currentColor; transition: right .25s ease;
}
nav.top a.nav-btn:hover{ opacity:1; color:inherit }
nav.top a.nav-btn:hover::after{ right:0 }
nav.top a.nav-btn.is-active{ opacity:1; color:#fff }
nav.top a.nav-btn.is-active::after{ right:0; background:#fff }

/* on-paper variant now inherits the universal black glass bar */
nav.top.on-paper{ color:#fff; border-bottom-color:rgba(255,255,255,.14) }
nav.top.on-paper .brand{ color:#fff }
nav.top.on-paper a{ color:#fff }
nav.top.on-paper a.nav-btn:hover{ color:#fff }
nav.top.on-paper a.nav-btn.is-active{ color:#fff }
nav.top.on-paper a.nav-btn.is-active::after{ background:#fff }
nav.top.on-paper .meta{ color:rgba(255,255,255,.6) }

section{ position:relative; padding: 120px 48px; max-width: 1400px; margin: 0 auto }
.kicker{
  font-family:"Space Mono", monospace;
  font-size: 11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--red);
  display:flex; align-items:center; gap: 12px;
  margin-bottom: 18px;
}
.kicker::before{ content:""; width:28px; height:1px; background:var(--red) }
.section-num{
  position:absolute; top: 60px; right: 48px;
  font-family:"Archivo Black",sans-serif;
  font-size: 110px; line-height:.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(58,49,40,.22);
  letter-spacing:-.04em;
  pointer-events:none;
}

/* HERO */
.hero{
  padding:0; max-width:none; margin:0;
  height: 100vh; min-height: 720px;
  position:relative; overflow:hidden;
  background:#1d2530;
}
.hero .stage{
  position:absolute; inset:0;
  background: url("images/stage-blue.jpg") center/cover;
  filter: contrast(1.02) saturate(.95) brightness(.9);
  will-change: transform;
}
.hero .stage::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, rgba(29,37,48,.15), rgba(29,37,48,.55));
}
.hero .chroma-r, .hero .chroma-b{
  position:absolute; inset:0;
  background: url("images/stage-blue.jpg") center/cover;
  mix-blend-mode:screen; pointer-events:none;
}
.hero .chroma-r{ filter: saturate(2.5) hue-rotate(-12deg); transform: translate(3px,-2px); opacity:.3 }
.hero .chroma-b{ filter: saturate(2.5) hue-rotate(170deg); transform: translate(-3px,2px); opacity:.22 }
.hero .scanband{
  position:absolute; left:0; right:0; height:4px;
  background: rgba(255,255,255,.14);
  mix-blend-mode: overlay;
  animation: scan 5s linear infinite;
}
@keyframes scan{ 0%{top:-5%} 100%{top:105%} }

/* SIGNAL LOSS flash */
.hero .signal-loss{
  position:absolute; top:108px; right:32px; z-index:4;
  font-family:"VT323",monospace; font-size:18px; letter-spacing:.15em;
  color:#ffdc4e;
  background:#3b1a12;
  padding:3px 9px;
  border:1px solid #ffdc4e;
  box-shadow: 0 0 8px rgba(255,220,78,.5), inset 0 0 6px rgba(255,220,78,.2);
  opacity:0; pointer-events:none;
  transition: opacity .05s;
  text-shadow: 0 0 6px rgba(255,220,78,.7);
}
.hero .signal-loss.on{
  opacity:1;
  animation: signalBlink .18s steps(2) 2;
}
@keyframes signalBlink{ 50%{opacity:.2} }
.hero .hud-tl{
  position:absolute; top:72px; left:32px; z-index:3;
  font-family:"VT323",monospace; font-size:20px; color:#ff6a4e; letter-spacing:.06em;
}
.hero .hud-tl::before{
  content:""; display:inline-block; width:10px; height:10px; border-radius:50%;
  background:#ff6a4e; margin-right:8px; vertical-align:1px;
  animation: blink 1.2s infinite;
}
@keyframes blink{ 50%{ opacity:.25 } }
.hero .hud-tr{
  position:absolute; top:72px; right:32px; z-index:3;
  font-family:"VT323",monospace; font-size:18px; color:var(--fl-yellow);
  letter-spacing:.08em; text-align:right; line-height:1.5;
}
.hero .title-wrap{ position:absolute; left:48px; right:48px; bottom:90px; z-index:3 }
.hero .kicker-h{
  font-family:"Space Mono",monospace;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color: var(--fl-yellow); margin-bottom:14px;
}
.hero h1{
  font-family:"Archivo Black",sans-serif;
  font-size: clamp(80px, 14vw, 220px);
  line-height:.85; letter-spacing:-.04em; margin:0;
  text-transform:uppercase;
  color:#f3ecdd;
  text-shadow: 3px 3px 0 rgba(200,90,62,.55);
  mix-blend-mode: screen;
}
.hero h1 span{ display:block; color: var(--fl-yellow); text-shadow: 3px 3px 0 rgba(29,37,48,.65) }
.hero .sub{
  margin-top:18px;
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  font-family:"VT323",monospace; color:#f3ecdd;
  font-size:22px; letter-spacing:.05em;
  max-width:900px;
}
.hero .sub b{ color: var(--fl-cyan); font-weight:400; display:block; font-size:12px; font-family:"Space Mono",monospace; letter-spacing:.25em; margin-bottom:4px }
.hero .scroll-hint{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%); z-index:4;
  font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:#f3ecdd; opacity:.7;
}
.hero .scroll-hint::after{
  content:""; display:block; width:1px; height:28px;
  background:#f3ecdd; margin:10px auto 0;
  animation: drop 1.8s ease-in-out infinite;
}
@keyframes drop{ 0%,100%{opacity:0; transform: translateY(-6px)} 50%{ opacity:.9 } }

/* TRACKLIST */
.tracklist .grid-2{ display:grid; grid-template-columns:320px 1fr; gap:80px; margin-top:40px }
.tracklist .ph-wrap{ position:relative }
.tracklist .ph{
  width:100%; aspect-ratio:3/4;
  background: url("images/guitar-white.jpg") center/cover;
  filter: grayscale(1) contrast(1.08);
  box-shadow: 0 10px 24px -10px rgba(60,45,25,.35);
}
.tracklist .ph-wrap .stamp{
  position:absolute; right:-28px; bottom:28px;
  width:118px; height:118px;
  border:3px solid var(--red);
  outline:2px solid var(--red); outline-offset:4px;
  color:var(--red); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:"Space Mono",monospace; font-weight:700;
  font-size:13px; letter-spacing:.2em;
  transform: rotate(-14deg); opacity:1; mix-blend-mode:multiply;
  text-align:center; line-height:1.35;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(200,62,48,.35);
  filter: contrast(1.15);
}
.tracklist h2{
  font-family:"Archivo Black",sans-serif;
  font-size:72px; line-height:.9; letter-spacing:-.03em;
  margin:0 0 24px; text-transform:uppercase;
}
.tracklist h2 em{ color:var(--red); font-style:normal }
.tracklist .tl{ border-top:1px solid rgba(58,49,40,.4); font-family:"Space Mono",monospace; font-size:13px; line-height:1 }
.tracklist .row{
  display:grid; grid-template-columns:40px 1fr 100px 60px; gap:16px; align-items:center;
  padding:18px 4px; border-bottom:1px solid rgba(58,49,40,.2);
  transition: background .25s, padding .25s; cursor:pointer;
}
.tracklist .row:hover{ background: rgba(200,90,62,.06); padding-left:14px }
.tracklist .row b{ color:var(--red); font-weight:700; letter-spacing:.1em }
.tracklist .row .name{ font-family:"Shippori Antique",serif; font-size:22px; color:var(--ink) }
.tracklist .row .name small{
  display:block; font-family:"Space Mono",monospace;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:4px;
}
.tracklist .row .tag{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft) }
.tracklist .row .time{ text-align:right; color:var(--ink-soft) }
.tracklist .thanks{
  margin-top:40px; padding-top:20px;
  border-top:1px solid rgba(58,49,40,.3);
  font-family:"Shippori Antique",serif;
  font-size:13px; line-height:1.7; color:var(--ink-soft);
  column-count:2; column-gap:40px; text-align:justify;
}

/* RISO */
.riso{ max-width:none; padding:140px 0 140px }
.riso .inner{ max-width:1400px; margin:0 auto; padding:0 48px }
.riso .head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:60px; gap:40px }
.riso .head h2{
  font-family:"Archivo Black",sans-serif;
  font-size:72px; line-height:.9; letter-spacing:-.03em; margin:0; text-transform:uppercase;
}
.riso .head h2 em{ color:var(--fl-pink); font-style:normal; font-family:"Shippori Antique",serif; font-weight:400 }
.riso .head .note{
  font-family:"Caveat",cursive; color:var(--red);
  font-size:22px; max-width:300px; text-align:right;
  transform: rotate(-2deg);
}
.riso .strip{ display:grid; grid-template-columns: repeat(6,1fr); gap:2px; padding:0 48px; margin:0 -48px }
.riso .frag{ position:relative; aspect-ratio:3/4; overflow:hidden; background:#ece2cb }
.riso .frag .img{ position:absolute; inset:0; background-size:cover; background-position:center; filter: grayscale(1) contrast(1.3) brightness(1.02); mix-blend-mode:multiply; transition: transform .35s cubic-bezier(.2,.7,.2,1) }
.riso .frag .dup{ position:absolute; inset:0; background-size:cover; background-position:center; filter: grayscale(1) contrast(1.2); mix-blend-mode:multiply; transform: translate(4px,-3px); opacity:.5; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s }
.riso .frag:hover .img{ transform: translate(-3px, 2px) }
.riso .frag:hover .dup{ opacity:.75 }
.riso .frag.pink:hover .dup{ transform: translate(11px, -8px) rotate(.4deg) }
.riso .frag.yellow:hover .dup{ transform: translate(10px, -6px) rotate(-.3deg) }
.riso .frag.cyan:hover .dup{ transform: translate(12px, -8px) rotate(.5deg) }
.riso .frag.pink .dup::after{ content:""; position:absolute; inset:0; background: var(--fl-pink); mix-blend-mode:screen }
.riso .frag.yellow .dup::after{ content:""; position:absolute; inset:0; background: var(--fl-yellow); mix-blend-mode:screen }
.riso .frag.cyan .dup::after{ content:""; position:absolute; inset:0; background: var(--fl-cyan); mix-blend-mode:screen }
.riso .frag .dots{ position:absolute; inset:0; background-image: radial-gradient(rgba(0,0,0,.25) 1px, transparent 1.2px); background-size:3px 3px; mix-blend-mode:multiply; opacity:.35 }
.riso .frag .lbl{
  position:absolute; left:8px; bottom:8px; z-index:3;
  font-family:"Space Mono",monospace; font-size:8.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); background: rgba(243,236,221,.8); padding:3px 6px;
}
.riso .frag .num{ position:absolute; top:8px; right:8px; z-index:3; font-family:"Archivo Black",sans-serif; font-size:12px; color:var(--ink) }
.riso .strip .frag:nth-child(odd){ transform: translateY(18px) }
.riso .caption{ margin-top:40px; font-family:"Special Elite",monospace; font-size:12px; letter-spacing:.08em; color:var(--ink-soft); text-align:center }

/* SPREAD */
.spread{ max-width:1500px }
.spread .book{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  background:#f7f0df;
  box-shadow: 0 30px 80px -30px rgba(60,45,25,.35), 0 1px 0 rgba(0,0,0,.05);
  padding: 72px 72px;
  margin-top: 40px;
}
.spread .book::before{ content:""; position:absolute; top:10%; bottom:10%; left:50%; width:1px; background: linear-gradient(180deg, transparent, rgba(58,49,40,.35), transparent) }
.spread .left{ padding-right:48px; position:relative }
.spread .left .img{
  width:100%; aspect-ratio:3/4;
  background: url("images/vest.jpg") center/cover;
  filter: contrast(1.02) saturate(.88);
  position:relative;
}
.spread .left .img::after{ content:""; position:absolute; inset:0; background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,.03) 4px 5px) }
.spread .left .cap{
  margin-top:14px;
  font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.18em; color:var(--ink-soft);
  display:flex; justify-content:space-between; text-transform:uppercase;
}
.spread .right{ padding-left:48px; display:flex; flex-direction:column; justify-content:space-between }
.spread .right .kick{
  font-family:"Space Mono",monospace;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--red); border-bottom:1px solid rgba(58,49,40,.4); padding-bottom:8px;
}
.spread .right .headline{
  font-family:"Shippori Antique",serif;
  font-size:64px; line-height:1; margin:30px 0 24px; letter-spacing:-.01em;
}
.spread .right .headline em{ color:var(--red); font-style:italic }
.spread .right .body{
  font-family:"Shippori Antique",serif;
  font-size:14px; line-height:1.7; column-count:2; column-gap:28px; text-align:justify; color:var(--ink);
  margin-bottom:24px;
}
.spread .right .body p{ margin:0 0 12px }
.spread .right .dropcap{
  float:left; font-family:"Archivo Black",sans-serif;
  font-size:56px; line-height:.85; margin:4px 6px -2px 0; color:var(--red);
}
.spread .right .byline{
  font-family:"Special Elite",monospace; font-size:10px; color:var(--ink-soft);
  border-top:1px solid rgba(58,49,40,.4); padding-top:10px;
  display:flex; justify-content:space-between; text-transform:uppercase; letter-spacing:.15em;
}
.spread .folio{
  position:absolute; left:50%; transform:translateX(-50%); bottom:28px;
  font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.3em; color:var(--ink-soft);
}

/* FEATURE (image + text) */
.feature{ max-width:1400px; padding:140px 48px }
.feature .cols{ display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:start; margin-top:50px }
.feature .cols.reverse{ grid-template-columns:1fr 1.2fr }
.feature .ph{ position:relative; aspect-ratio:3/4; background-size:cover; background-position:center; box-shadow: 0 20px 40px -20px rgba(60,45,25,.3) }
.feature .ph.a{ background-image: url("images/bike.jpg") }
.feature .ph.b{ background-image: url("images/home-bw.jpg") }
.feature .ph .ft-cap{
  position:absolute; left:0; right:0; bottom:-32px;
  font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.18em; color:var(--ink-soft);
  text-transform:uppercase; display:flex; justify-content:space-between;
}
.feature .text h3{ font-family:"Shippori Antique",serif; font-size:44px; line-height:1.05; margin:14px 0 24px; letter-spacing:-.01em }
.feature .text h3 em{ color:var(--red); font-style:italic }
.feature .text p{ font-family:"Shippori Antique",serif; font-size:15.5px; line-height:1.75; color:var(--ink); margin:0 0 14px; text-align:justify }
.feature .text .pull{
  margin: 24px 0; padding: 22px 28px;
  border-left: 3px solid var(--red);
  font-family:"Archivo Black",sans-serif;
  font-size:26px; line-height:1.1; letter-spacing:-.01em; text-transform:uppercase; color:var(--ink);
}
.feature .text .pull em{ color:var(--red); font-style:normal }
.feature .divider{
  margin:140px auto 0; max-width:900px;
  border:0; border-top:1px solid rgba(58,49,40,.3);
  position:relative; text-align:center;
}
.feature .divider::after{
  content:"* * *"; position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  background:#ece2cb; padding:0 16px;
  font-family:"Space Mono",monospace; color:var(--red); letter-spacing:.4em;
}

/* INDEX */
.index{ padding:140px 48px 120px }
.index .grid-thumbs{ margin-top:40px; display:grid; grid-template-columns: repeat(4,1fr); gap:32px 24px }
.index .t{ position:relative; cursor:pointer }
.index .t .th{
  aspect-ratio:3/4; background-size:cover; background-position:center;
  filter: saturate(.88) contrast(1.02);
  transform: rotate(var(--tilt, 0deg));
  transition: filter .35s ease, transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
  will-change: transform;
}
/* default scattered tilt — like photos loose on a desk */
.index .t:nth-child(8n+1) .th{ --tilt: -1.4deg }
.index .t:nth-child(8n+2) .th{ --tilt:  0.9deg }
.index .t:nth-child(8n+3) .th{ --tilt: -0.5deg }
.index .t:nth-child(8n+4) .th{ --tilt:  1.6deg }
.index .t:nth-child(8n+5) .th{ --tilt: -1.1deg }
.index .t:nth-child(8n+6) .th{ --tilt:  0.4deg }
.index .t:nth-child(8n+7) .th{ --tilt: -1.8deg }
.index .t:nth-child(8n)   .th{ --tilt:  1.2deg }
/* hover: straighten, lift, faint paper shadow */
.index .t:hover .th{
  filter: saturate(1) contrast(1.08);
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 14px 28px -18px rgba(58,49,40,.55), 0 2px 6px -3px rgba(58,49,40,.35);
}
@media (prefers-reduced-motion: reduce){
  .index .t .th, .index .t:hover .th{ transform:none; transition:filter .2s ease }
}
.index .t .meta{ margin-top:10px; font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); display:flex; justify-content:space-between }
.index .t .title{ font-family:"Shippori Antique",serif; font-size:18px; margin:2px 0 0; color:var(--ink) }

/* COLOPHON */
.colophon{
  margin-top:80px; padding:100px 48px 60px;
  background:#3a3128; color:#ece2cb;
  max-width:none; position:relative; overflow:hidden;
}
.colophon::before{
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px);
  pointer-events:none;
}
.colophon .inner{ max-width:1400px; margin:0 auto; position:relative }
.colophon .kicker{ color:var(--fl-yellow) }
.colophon .kicker::before{ background:var(--fl-yellow) }
.colophon h2{
  font-family:"Archivo Black",sans-serif;
  font-size:96px; line-height:.85; letter-spacing:-.04em;
  margin:0 0 50px; text-transform:uppercase;
}
.colophon h2 em{ color:var(--fl-yellow); font-style:normal }
.colophon .co-grid{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:60px;
  padding-top:40px; border-top:1px solid rgba(236,226,203,.25);
}
.colophon .co-col h4{
  font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--fl-yellow); margin:0 0 14px;
}
.colophon .co-col p{ font-family:"Shippori Antique",serif; font-size:14px; line-height:1.7; color:#ece2cb; margin:0 0 10px }
.colophon .co-col p small{
  display:block; font-family:"Space Mono",monospace;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(236,226,203,.55); margin-top:2px;
}
.colophon .co-col b{ color:var(--fl-yellow); font-weight:400 }
.colophon .co-col ul{ list-style:none; margin:0; padding:0 }
.colophon .co-col li{
  display:flex; justify-content:space-between;
  padding:8px 0; border-bottom:1px solid rgba(236,226,203,.1);
  font-family:"Shippori Antique",serif; font-size:12px;
}
.colophon .co-col li span:first-child{ color:rgba(236,226,203,.55); font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase }
.colophon .rationale{
  grid-column:1 / -1; margin-top:60px; padding-top:40px;
  border-top:1px solid rgba(236,226,203,.25);
  max-width:900px;
}
.colophon .rationale h4{
  font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--fl-yellow); margin:0 0 18px;
}
.colophon .rationale p{ font-family:"Shippori Antique",serif; font-size:18px; line-height:1.75; color:#ece2cb; margin:0 0 14px }
.colophon .rationale p em{ color:var(--fl-yellow); font-style:italic }
.colophon .sig{ margin-top:36px; font-family:"Caveat",cursive; font-size:28px; color:var(--fl-yellow); transform:rotate(-3deg); display:inline-block }
.colophon .co-foot{
  margin-top:80px; padding-top:28px;
  border-top:1px solid rgba(236,226,203,.25);
  display:grid; grid-template-columns:1fr 1fr 1fr;
  font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(236,226,203,.6);
}
.colophon .co-foot .c{ text-align:center }
.colophon .co-foot .r{ text-align:right }
.colophon .co-foot b{ color:var(--fl-yellow); font-weight:400; display:block; margin-bottom:4px }

@media (max-width:900px){
  section{ padding:80px 24px }
  nav.top ul{ display:none }
  .hero .title-wrap{ left:24px; right:24px; bottom:60px }
  .tracklist .grid-2{ grid-template-columns:1fr; gap:40px }
  .spread .book{ grid-template-columns:1fr; padding:36px }
  .spread .book::before{ display:none }
  .spread .left, .spread .right{ padding:0 }
  .feature .cols, .feature .cols.reverse{ grid-template-columns:1fr; gap:48px }
  .index .grid-thumbs{ grid-template-columns: repeat(2,1fr) }
  .riso .strip{ grid-template-columns: repeat(3,1fr) }
  .colophon .co-grid{ grid-template-columns:1fr; gap:40px }
  .colophon .co-foot{ grid-template-columns:1fr; gap:12px }
  .colophon .co-foot .c, .colophon .co-foot .r{ text-align:left }
  .section-num{ font-size:64px; top:30px; right:24px }
}