:root{
  --ink:#0c0a08; --ink2:#16120e; --bone:#e3dbcc; --paper:#efe9de; --dust:#8d8578;
  --rust:#a13c25; --red:#c8322a; --gold:#e3a33c;
  --display:'IM Fell DW Pica','IM Fell English','Garamond',serif;
  --serif:'IM Fell English','Garamond',serif;
  --type:'Courier Prime','Courier New',monospace;
  --mono:'Special Elite','Courier New',monospace;
  --old:'Old Standard TT','Garamond',serif;
  --goudy:'Goudy Bookletter 1911','Garamond',serif;
  --thin:'Jost','Century Gothic','Futura',sans-serif;
  --blk:'UnifrakturMaguntia','Old Standard TT',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--bone);font-family:var(--serif);font-size:19px;line-height:1.45;overflow-x:hidden}
img{display:block;max-width:100%}
figure{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
section{position:relative;overflow:hidden}

/* type voices */
.cap{font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.02em;text-transform:lowercase;color:var(--dust)}
.big{font-family:var(--display);font-weight:400;text-transform:lowercase;line-height:.84;letter-spacing:-.035em}
.soft{color:var(--sc,#efe6d6)!important;text-shadow:.022em .014em 0 var(--mis,rgba(200,50,42,.7));filter:url(#rough)}
body::after{content:'';position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.13;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>")}
.wide{font-family:var(--mono);font-weight:400;text-transform:lowercase;letter-spacing:-.01em;font-size:clamp(28px,5vw,72px);line-height:1}
.wide i{font-family:var(--serif);font-style:italic;color:var(--gold)}
.lyric,.lyric-s{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none}
.lyric{font-size:clamp(40px,7vw,120px);line-height:.9}
.lyric-s{font-size:1.35em;color:var(--bone)}
.empty{font-family:var(--type);font-size:14px;color:var(--dust);border:1px dashed #4a433b;padding:10px 12px;margin-top:12px}


/* mixed type utilities */
.f-type{font-family:var(--type)}
.f-thin{font-family:var(--thin);font-weight:200;font-style:normal;letter-spacing:.18em;text-transform:uppercase}
.f-mono{font-family:var(--mono)}
.f-goudy{font-family:var(--goudy);font-style:normal}
.f-old{font-family:var(--old)}
.f-fell{font-family:var(--serif)}
.i{font-style:italic}
.b{font-weight:700}
.xl{font-size:2em;line-height:.8}
.dbl{position:relative}
.dbl-a{position:relative;z-index:1}
.dbl-b{position:absolute;left:.35em;top:.55em;font-size:.5em;letter-spacing:.32em;color:var(--red);white-space:nowrap;z-index:0;opacity:.9}

/* cover additions */
.cover-word-ghost{position:absolute;left:16vw;bottom:calc(3vh + 12vw);font-family:var(--old);font-style:italic;font-size:17vw;line-height:.8;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px rgba(255,240,222,.6);pointer-events:none;white-space:nowrap}
.cover-poem{position:absolute;left:3vw;top:34vh;width:44vw;color:#fff6ea;font-size:clamp(15px,1.45vw,22px);line-height:1.05;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.cover-poem p{margin-bottom:.35em}
.cover-poem p:nth-child(2){padding-left:7vw}
.cover-poem .dbl{padding-left:2vw;font-size:1.5em;margin-top:.3em}
.cover-poem .dbl-b{color:#ffc8a8;opacity:.8;top:-.95em;left:1.4em;font-size:.48em;letter-spacing:.42em}
.cover-poem .cap{color:#f3e9d8;padding-left:2vw;margin-top:1em}
.cover-vert{position:absolute;right:1vw;top:14vh;writing-mode:vertical-rl;font-family:var(--thin);font-weight:300;text-transform:uppercase;font-size:11px;letter-spacing:.3em;color:#f3e9d8;text-shadow:0 1px 4px rgba(0,0,0,.7)}

/* poema */
.poema{background:var(--paper);color:var(--ink);height:100vw;min-height:880px}
.poema>*{position:absolute;margin:0}
.pm-elpaso{top:2vw;left:-1vw;font-family:var(--old);font-style:italic;font-weight:400;font-size:21vw;line-height:.85;letter-spacing:-.04em;--sc:var(--ink);--mis:rgba(161,60,37,.55);z-index:2}
.pm-elpaso-ghost{top:-3vw;left:28vw;font-family:var(--display);font-size:30vw;line-height:.85;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--rust);opacity:.55;white-space:nowrap;z-index:1;pointer-events:none}
.pm-l1{top:27vw;left:8vw;font-size:1.6vw;white-space:nowrap;z-index:2}
.pm-plain{font-size:9.5em;line-height:.8;letter-spacing:-.03em;--sc:var(--ink);--mis:rgba(200,50,42,.5);vertical-align:-.2em}
.pm-track{font-size:1.7em;letter-spacing:.4em}
.pm-l2{top:6vw;right:3vw;writing-mode:vertical-rl;font-size:3.6vw;line-height:1;color:var(--rust);z-index:2}
.pm-l3{top:46vw;left:63vw;font-size:14px;letter-spacing:.08em}
.pm-strip{top:50vw;left:0;width:100%;height:24vw;overflow:hidden;cursor:zoom-in}
.pm-strip img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.pm-l4{top:57vw;left:4vw;font-size:2.3vw;color:#fff6ea;text-shadow:0 1px 14px rgba(0,0,0,.5);white-space:nowrap;z-index:2}
.pm-l4 .xl{font-size:3.4em}
.pm-l5{top:80vw;right:4vw;font-size:6.6vw;line-height:1;white-space:nowrap}
.pm-l5 .dbl-a{--sc:var(--ink);--mis:rgba(200,50,42,.4)}
.pm-l5 .dbl-b{top:.9em;left:1.2em;font-size:.26em}
.pm-oz{top:93vw;right:4vw}
.pm-ladder{top:78vw;left:6vw;width:24vw}
.pm-ladder .note-t{color:var(--rust)}
.pm-horiz{top:90vw;left:34vw;white-space:nowrap}
.pm-horiz .f-old{font-size:5vw;line-height:1}
.pm-horiz .f-thin{font-size:1.5vw;letter-spacing:.7em}
.sol-ghost{position:absolute;right:-3vw;top:2vh;font-family:var(--goudy);font-size:42vw;line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--red);z-index:2;pointer-events:none;opacity:.8}
.sol-word em{font-style:normal}
.win-echo{position:absolute;top:calc(8vh + 15.5vw);right:3vw;font-family:var(--mono);font-size:1.5vw;letter-spacing:.5em;color:var(--red);z-index:3;white-space:nowrap;pointer-events:none}
.win-echo .f-thin{color:var(--ink);letter-spacing:.3em;text-transform:none}
.win-echo .f-old{font-size:2.2em;letter-spacing:0;color:var(--ink)}

/* nav */
.bar{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;gap:18px;align-items:center;padding:12px 18px 22px;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:lowercase;color:#fff8ee;background:linear-gradient(rgba(8,7,6,.62),rgba(8,7,6,0));text-shadow:0 1px 3px rgba(0,0,0,.6)}
.bar a{text-decoration:none;opacity:1}
.bar a:hover{opacity:1;text-decoration:underline}
.bar-mark{font-family:var(--serif);font-style:italic;font-size:22px;margin-right:auto;letter-spacing:0}

/* cover */
.cover{height:100vh;height:100svh;min-height:560px}
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;cursor:zoom-in}
.cover-ghost{position:absolute;right:4vw;top:14vh;width:22vw;height:58vh;object-fit:cover;object-position:50% 10%;transform:rotate(3deg);box-shadow:0 0 0 6px var(--ink);filter:saturate(1.3);pointer-events:none}
.cover-word{position:absolute;left:-1vw;bottom:3vh;font-family:var(--display);font-weight:400;font-size:20vw;line-height:.8;letter-spacing:-.04em;text-transform:lowercase;--sc:#fff6ea;--sg:rgba(255,226,190,.55);pointer-events:none}
.cover-word-blur{position:absolute;left:-.4vw;bottom:calc(3vh - .5vw);font-family:var(--display);font-size:21vw;line-height:.8;letter-spacing:-.06em;color:transparent;text-shadow:0 0 .05em rgba(255,236,210,.85),0 0 .18em rgba(255,140,60,.5);pointer-events:none}
.cover-name{position:absolute;top:15vh;left:3vw;font-family:var(--serif);font-style:italic;font-size:clamp(34px,5vw,80px);color:var(--paper);line-height:1;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.cover-cap{position:absolute;left:3vw;top:calc(15vh + clamp(44px,6.4vw,96px));color:#f3e9d8;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.cover-count{position:absolute;right:4vw;top:calc(14vh + 58vh + 22px);font-family:var(--thin);font-weight:300;text-transform:uppercase;letter-spacing:.22em;font-size:10px;text-align:right;color:#f3e9d8;line-height:1.5;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.cover-count b{font-family:var(--serif);font-style:italic;font-size:52px;font-weight:400;display:block;line-height:1}
.cover-down{position:absolute;right:4vw;bottom:18px;font-family:var(--mono);font-size:11px;text-decoration:none;color:#f3e9d8}

/* sol diptych */
.sol{background:var(--paper);color:var(--ink);padding:12vh 0 14vh}
.dip{display:grid;grid-template-columns:1.4fr 1fr;gap:0;height:96vh;max-height:980px}
.dip figure{overflow:hidden;cursor:zoom-in}
.dip img{width:100%;height:100%;object-fit:cover}
.dip-a img{object-position:30% 40%}
.dip-b{margin-top:14vh;margin-bottom:-6vh}
.dip-b img{object-position:100% 100%;transform:scale(2.8) rotate(-8deg);transform-origin:78% 72%}
.sol-word{position:absolute;left:-.5vw;top:4vh;font-size:15vw;--sc:var(--red);--mis:rgba(20,40,120,.45);mix-blend-mode:multiply;pointer-events:none;display:flex;flex-direction:column}
.sol-word span:last-child{padding-left:30vw;color:var(--ink);mix-blend-mode:normal}
.sol-lyric{position:absolute;right:5vw;bottom:5vh;color:var(--ink)}
.sol-cap{position:absolute;left:3vw;bottom:4vh;color:#5d554a;max-width:28ch}

/* fling */
.fling-wrap{padding:16vh 3vw 12vh}
.fling-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:6vh;border-top:1px solid #3a332b;padding-top:10px}
.fling{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:8px;grid-auto-flow:dense;column-gap:1.6vw}
.fl{position:relative;cursor:zoom-in;transition:transform .5s cubic-bezier(.2,.7,.2,1),z-index 0s}
.fl img{width:100%;height:100%;object-fit:cover;background:var(--ink2)}
.fl:hover{z-index:5;transform:rotate(0deg) scale(1.04)!important}
.fl .cap{position:absolute;left:0;right:0;top:calc(100% + 4px);white-space:nowrap;overflow:hidden}
.fl .sw{display:inline-block;width:8px;height:8px;margin-right:6px;vertical-align:-1px}
.fl-word{grid-column:1/-1;align-self:center;font-family:var(--old);font-style:italic;letter-spacing:-.02em;font-size:clamp(36px,6vw,96px);line-height:1;color:var(--gold);padding:2vh 0;cursor:default;pointer-events:none}
.night .fl-word{color:#7a8cff}

/* single */
.single{padding:18vh 0;display:flex;justify-content:center}
.single figure{width:min(46vw,620px);cursor:zoom-in}
.single img{width:100%}
.single figcaption{margin-top:10px}
.vert{position:absolute;right:3vw;top:18vh;writing-mode:vertical-rl;font-family:var(--mono);font-size:11px;color:var(--dust)}

/* window */
.window{background:var(--paper);color:var(--ink);height:150vh;min-height:1100px}
.window figure{position:absolute;overflow:hidden;cursor:zoom-in}
.window img{width:100%;height:100%;object-fit:cover}
.win-word{position:absolute;top:8vh;right:-2vw;font-size:19vw;--sc:#fff;--mis:rgba(0,0,0,0);z-index:2;mix-blend-mode:difference;pointer-events:none}
.w1{left:0;top:18vh;width:46vw;height:70vh}
.w2{left:52vw;top:44vh;width:20vw;height:40vh;transform:rotate(-4deg)}
.w3{left:24vw;top:92vh;width:42vw;height:34vh}
.w3 img{object-position:50% 70%}
.w4{right:3vw;top:84vh;width:24vw;height:54vh}
.w-cap{position:absolute;left:3vw;top:91vh;max-width:19vw;color:#5d554a}
.w-lyric{position:absolute;left:3vw;bottom:6vh;color:var(--rust);font-size:clamp(34px,5vw,84px)}

/* dusk band */
.dusk{padding:14vh 0 10vh}
.dusk-head{padding:0 3vw;display:flex;align-items:flex-end;gap:3vw;margin-bottom:4vh}
.dusk-word{font-size:15vw;font-family:var(--mono);letter-spacing:-.06em;--sc:#e3a33c;--mis:rgba(60,90,200,.6)}
.dusk-head .cap{max-width:32ch;padding-bottom:2vw}
.band{display:flex;height:72vh;min-height:420px;width:100%}
.sl{flex:1 1 0;min-width:0;background-size:cover;background-position:center;transition:flex-grow .45s cubic-bezier(.2,.7,.2,1);cursor:zoom-in;outline:none}
.sl:hover,.sl:focus-visible,.sl.on{flex-grow:28}
.band-cap{display:flex;justify-content:space-between;padding:8px 3vw 0}

/* noche */
.noche{padding:12vh 3vw 16vh;min-height:110vh}
.noche-word{font-size:22vw;font-style:italic;--sc:#26306e;--mis:rgba(200,50,42,.55);position:absolute;left:-1vw;top:2vh;line-height:.75;pointer-events:none}
.noche-lyric{position:relative;z-index:2;color:var(--bone);margin:22vh 0 0 4vw}
.luces{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:3vw;width:min(70vw,900px);margin:-4vh 0 0 auto}
.luces figure{cursor:zoom-in;overflow:hidden}
.luces img{width:100%;aspect-ratio:3/4;object-fit:cover}
.l2{margin-top:16vh}
.noche-cap{margin-top:16px;text-align:right}

/* correspondencias */
.cx{background:#050407;padding:14vh 3vw 12vh}
.cx-head{display:grid;grid-template-columns:1fr minmax(240px,26vw);gap:2vh 4vw;align-items:end;border-top:1px solid #3a332b;padding-top:10px;margin-bottom:10vh}
.cx-head>.cap:first-child{grid-column:1/-1}
.cx-title{grid-column:1/-1}
.cx-epi{grid-column:2;grid-row:3}
.cx-rule{grid-row:3;align-self:end}
.cx-title{font-family:var(--old);font-style:italic;font-weight:400;font-size:11.5vw;line-height:.82;letter-spacing:-.04em;--sc:#e8392c;--mis:rgba(40,60,200,.5);margin-left:-.6vw}
.cx-epi{padding-bottom:1.4vw}
.cx-rule{grid-column:1;max-width:46ch;color:#b8a98f}
.note-t{font-family:var(--old);font-style:italic;font-size:22px;line-height:1.1;margin-bottom:6px;color:inherit}
.note-x{font-family:var(--type);font-size:15px;line-height:1.5;margin-bottom:8px}
.pair{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.78fr);gap:3vw;align-items:start;padding:7vh 0;border-top:1px solid #1d1914}
.pair figure{cursor:zoom-in;overflow:hidden}
.p-n{position:absolute;top:10px;left:0;font-family:var(--mono);font-size:11px;color:#6d6458}
.rev .p-n{left:auto;right:0}
.pair img{width:100%;object-fit:cover}
.p-sign img{height:74vh;max-height:820px}
.p-sign.zoom img{object-position:20% 80%;transform:scale(1.5);transform-origin:20% 80%}
.p-ans{margin-top:22vh}
.p-ans img{height:46vh;max-height:520px}
.p-ans figcaption,.p-ans>.cap{margin-top:6px}
.p-ans.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.p-ans.two img{height:40vh}
.p-ans.two .cap{grid-column:1/-1}
.rev{grid-template-columns:minmax(0,.78fr) minmax(0,1fr) minmax(0,1.15fr)}
.p-ans.nat img,.p-sign.nat img{height:auto;max-height:none}
.rev .p-sign{order:3}
.rev .p-txt{order:2}
.rev .p-ans{order:1}
.p-txt{padding-top:4vh;color:var(--bone)}
.p-word{display:flex;flex-direction:column;gap:.1em;margin-bottom:4vh}
.p-a{font-family:var(--old);font-weight:700;font-size:clamp(20px,2vw,30px);letter-spacing:.24em;color:#b8a98f}
.p-eq{font-family:var(--old);font-size:26px;color:var(--red);line-height:1}
.p-b{font-family:var(--goudy);font-size:clamp(54px,6.6vw,112px);line-height:.86;letter-spacing:-.02em;color:#efe6d6;text-shadow:.025em .015em 0 rgba(200,50,42,.6)}
.p-b.blk{font-family:var(--blk);letter-spacing:0;color:#e3a33c;text-shadow:.02em .012em 0 rgba(40,60,200,.5)}
.p-gloss{font-family:var(--thin);font-weight:300;font-size:17px;letter-spacing:.02em;line-height:1.5;color:#cbbfa9;max-width:30ch;margin-top:3vh;padding-top:10px;border-top:1px solid #3a332b}
.cx-foot{position:relative;padding-top:10vh;min-height:44vh}
.cx-type{font-family:var(--display);letter-spacing:-.05em;font-size:13vw;line-height:.8;--sc:#c8322a;--mis:rgba(40,60,200,.5);white-space:nowrap;margin-left:-3vw;opacity:.55;pointer-events:none}
.cx-close{font-family:var(--old);color:var(--gold);margin:-5vw 0 14px 30vw;position:relative}
.cx-foot>.cap{margin-left:30vw}

/* cuaderno */
.cq{background:var(--paper);color:var(--ink);padding:14vh 3vw 12vh}
.cq .cap{color:#5d554a}
.cq-head{border-top:1px solid var(--ink);padding-top:10px;margin-bottom:7vh;display:grid;grid-template-columns:auto 1fr;gap:1vh 4vw;align-items:end}
.cq-head>.cap:first-child{grid-column:1/-1}
.cq-title{font-family:var(--goudy);font-weight:400;font-size:14vw;line-height:.8;letter-spacing:-.035em;--sc:var(--ink);--mis:rgba(200,50,42,.55);margin-left:-.5vw}
.cq-sub{max-width:34ch;padding-bottom:1.4vw}
.notes{columns:4 240px;column-gap:3vw}
.note{break-inside:avoid;margin:0 0 5vh;padding:18px 18px 14px;background:#f6f1e6;border:1px solid #d6ccb9;rotate:var(--r,0deg)}
.note:nth-child(3n+1){--r:-.8deg}
.note:nth-child(4n+2){--r:.9deg}
.note:nth-child(5n){--r:-1.4deg}
.note .cap{margin-bottom:8px}
.note .note-x{font-size:15.5px}
.big-note{background:var(--ink);color:var(--paper)}
.big-note .cap{color:#b8a98f}
.big-note .note-x{font-family:var(--old);font-style:italic;font-size:26px;line-height:1.15}
.note-blk{font-family:var(--blk);font-size:30px;line-height:1.05;color:var(--red);margin-top:10px}

/* scattered lines */
.w-haze{position:absolute;right:36vw;bottom:5vh;max-width:30ch;text-align:left;font-family:var(--goudy);font-size:24px;color:var(--ink)}
.w-haze .note-t{display:block;font-size:18px;color:var(--rust)}
.w-haze .cap{display:block;margin-top:4px;color:#5d554a}
.band-line{padding:5vh 3vw 0;font-family:var(--old);font-style:italic;font-size:clamp(26px,3.4vw,52px);line-height:1.05;color:var(--bone);max-width:24ch}
.band-line .cap{display:block;font-style:normal;margin-top:8px}

/* blur */
.blur{height:120vh;min-height:760px}
.blur-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:zoom-in;filter:saturate(1.2)}
.blur-word{position:absolute;left:3vw;bottom:8vh;font-size:9.5vw;--sc:#f4ecdc;pointer-events:none}
.blur-cap{position:absolute;right:3vw;top:10vh;color:#f3e9d8;text-shadow:0 1px 4px #000}

/* work */
.work{background:var(--paper);color:var(--ink);padding:14vh 3vw 12vh}
.work .cap{color:#5d554a}
.work-head{border-top:1px solid var(--ink);padding-top:10px;margin-bottom:6vh}
.work-head .wide{margin-top:12px}
.row{display:grid;grid-template-columns:110px 1fr minmax(180px,30vw);gap:3vw;padding:5vh 0;border-top:1px solid #cfc6b5;align-items:start}
.row-n{font-family:var(--display);font-style:italic;font-weight:400;font-size:84px;line-height:.8;color:var(--red)}
.row-t h3{font-family:var(--mono);font-weight:400;letter-spacing:-.02em;font-size:clamp(30px,3.4vw,52px);text-transform:lowercase;line-height:1;margin-bottom:14px}
.row-t p{max-width:60ch;margin-bottom:10px}
.row-t .lyric-s{color:var(--rust);font-size:28px}
.row-i{cursor:zoom-in}
.row-i img{width:100%;max-height:52vh;object-fit:cover}
.row-i.paint{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.row-i.paint img{aspect-ratio:3/4;height:auto}
.work .empty{border-color:#b9ae9b;color:#5d554a}
form{display:grid;gap:12px;max-width:520px;margin-top:16px}
label{display:grid;gap:4px;font-family:var(--mono);font-size:11px;color:#5d554a}
input,textarea{font:inherit;font-family:var(--type);font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:6px 0;border-radius:0}
input:focus,textarea:focus{outline:none;border-bottom-color:var(--red)}
form button{justify-self:start;font-family:var(--mono);font-size:12px;background:var(--ink);color:var(--paper);padding:10px 22px}
form button:hover{background:var(--red)}
.form-msg{min-height:1.4em}

/* index */
.idx{padding:14vh 3vw 10vh}
.idx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:4vh;flex-wrap:wrap}
.idx-word{font-size:13vw;font-family:var(--mono);letter-spacing:-.06em;--sc:#e3dbcc}
.filters{display:flex;gap:6px}
.filters button{font-family:var(--mono);font-size:12px;border:1px solid #4a433b;padding:8px 14px;color:var(--dust)}
.filters button i{font-style:normal;opacity:.7}
.filters button.on{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:4px}
.gi{aspect-ratio:3/4;overflow:hidden;cursor:zoom-in;background:var(--ink2);position:relative}
.gi img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gi:hover img{transform:scale(1.06)}
.gi span{position:absolute;left:4px;bottom:3px;font-family:var(--mono);font-size:9px;color:#fff;text-shadow:0 1px 3px #000;opacity:0;transition:opacity .2s}
.gi:hover span{opacity:1}

/* footer */
.foot{padding:12vh 3vw 6vh;border-top:1px solid #3a332b;display:grid;gap:8px;overflow:hidden}
.foot-word{font-family:var(--display);font-style:italic;font-weight:400;font-size:12.5vw;line-height:.85;letter-spacing:-.03em;color:#3a332b;filter:url(#rough);white-space:nowrap;margin-bottom:3vh}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(8,7,6,.97);display:flex;align-items:center;justify-content:center}
.lb[hidden]{display:none}
.lb img{max-width:92vw;max-height:84vh;object-fit:contain}
.lb-cap{position:absolute;left:18px;bottom:16px;color:#cfc4b2}
.lb-btn{position:absolute;font-family:var(--mono);font-size:12px;color:var(--bone);padding:14px 16px}
.lb-btn:hover{color:var(--gold)}
.lb-close{top:6px;right:6px}
.lb-prev{left:6px;top:50%;transform:translateY(-50%)}
.lb-next{right:6px;top:50%;transform:translateY(-50%)}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* mobile */
@media (max-width:760px){
  .bar{gap:12px;padding:10px 12px}
  .bar a:not(.bar-mark):nth-child(n+5){display:none}
  .cover-ghost{width:40vw;height:34vh;top:12vh;right:5vw}
  .cover-word,.cover-word-blur{font-size:23vw;bottom:4vh}
  .cover-name{top:auto;bottom:calc(4vh + 36vw);left:5vw;font-size:44px}
  .cover-cap{top:auto;bottom:calc(4vh + 36vw - 22px);left:5vw}
  .cover-count{top:calc(12vh + 34vh + 14px);right:5vw}
  .cover-down{display:none}
  .cover-word-ghost{font-size:21vw;left:6vw;bottom:calc(4vh + 15vw)}
  .cover-poem{top:12vh;left:5vw;width:50vw;font-size:13px}
  .cover-poem p:nth-child(2){padding-left:5vw}
  .cover-vert{display:none}
  .cover-poem .dbl{padding-left:0;font-size:1.35em}
  .cover-poem .dbl-b{white-space:normal;top:-1.4em;left:.4em;width:44vw}
  .cover-name{bottom:calc(4vh + 50vw)}
  .cover-cap{bottom:calc(4vh + 50vw - 22px)}
  .win-echo{position:relative;top:auto;right:auto;grid-column:1/-1;font-size:3.4vw;padding:0 4vw;margin:-2vh 0 3vh;white-space:normal}
  .win-word{order:0}.win-echo{order:1}.w1{order:2}.w2{order:3}.w4{order:4}.w3{order:5}.w-cap{order:6}.w-lyric{order:7}.w-haze{order:8}
  .poema{height:268vw;min-height:0}
  .pm-elpaso{font-size:30vw;top:6vw}
  .pm-elpaso-ghost{font-size:40vw;top:0;left:8vw}
  .pm-l1{top:44vw;left:4vw;font-size:3.8vw}
  .pm-plain{font-size:6.6em}
  .pm-track{font-size:1.4em;letter-spacing:.25em;display:block;padding-left:20vw}
  .pm-l2{top:44vw;right:3vw;font-size:7vw}
  .pm-l3{top:96vw;left:44vw;font-size:11px}
  .pm-strip{top:104vw;height:62vw}
  .pm-strip img{object-position:50% 50%}
  .pm-l4{top:112vw;left:4vw;font-size:4.4vw;white-space:normal;width:86vw}
  .pm-l4 .xl{font-size:2.6em}
  .pm-l5{top:176vw;left:4vw;right:auto;font-size:10.5vw}
  .pm-ladder{top:202vw;left:8vw;width:62vw}
  .pm-oz{top:194vw;left:4vw;right:auto}
  .pm-horiz{top:252vw;left:18vw}
  .pm-horiz .f-old{font-size:11vw}
  .pm-horiz .f-thin{font-size:3.4vw}
  .sol-ghost{font-size:58vw;top:3vh}
  .sol{padding:9vh 0 12vh}
  .dip{grid-template-columns:1fr 1fr;height:70vh}
  .dip-b{margin-bottom:0;margin-top:10vh}
  .sol-word{font-size:19vw;top:5vh}
  .sol-word span:last-child{padding-left:12vw}
  .sol-lyric{font-size:48px;right:5vw;bottom:3vh}
  .sol-cap{position:static;padding:5vh 5vw 0;max-width:none}
  .fling-wrap{padding:10vh 4vw 8vh}
  .fling-head{flex-direction:column;align-items:flex-start;gap:6px}
  .fling{grid-template-columns:repeat(6,1fr);column-gap:3vw}
  .fl .cap{font-size:9px}
  .single{padding:10vh 0}
  .single figure{width:78vw}
  .vert{top:10vh;right:2vw}
  .window{height:auto;min-height:0;padding:10vh 0 8vh;display:grid;grid-template-columns:1fr 1fr;gap:3vw}
  .window figure{position:relative;inset:auto;transform:none}
  .win-word{position:relative;grid-column:1/-1;top:0;right:auto;left:-1vw;font-size:25vw;--sc:var(--ink);mix-blend-mode:normal;margin-bottom:2vh}
  .w1{grid-column:1/-1;width:100%;height:60vh}
  .w2{width:auto;height:44vh;margin-left:4vw}
  .w4{width:auto;height:44vh;margin-right:4vw;margin-top:8vh;right:auto;top:auto}
  .w3{grid-column:1/-1;width:92vw;margin:0 4vw;height:30vh;left:auto;top:auto}
  .w-cap{position:static;grid-column:1/-1;max-width:none;padding:0 4vw}
  .w-lyric{position:static;grid-column:1/-1;padding:4vh 4vw 0;font-size:48px}
  .dusk-head{flex-direction:column;align-items:flex-start;gap:6px;padding:0 4vw}
  .dusk-word{font-size:26vw}
  .band{height:56vh;min-height:340px}
  .sl.on{flex-grow:60}
  .noche{padding:8vh 4vw 10vh;min-height:0}
  .noche-word{font-size:30vw}
  .noche-lyric{margin:20vh 0 4vh 0;font-size:52px}
  .luces{width:100%;margin:0}
  .l2{margin-top:10vh}
  .cx{padding:10vh 4vw 8vh}
  .cx-head{grid-template-columns:1fr;margin-bottom:6vh}
  .cx-title{font-size:15.5vw}
  .cx-rule,.cx-epi{grid-column:auto;grid-row:auto}
  .pair,.rev{grid-template-columns:1fr 1fr;gap:4vw;padding:6vh 0}
  .p-sign.nat img{height:auto}
  .pair .p-sign{grid-column:1/-1;order:1}
  .pair .p-txt{order:2;padding-top:0;grid-column:1/-1}
  .pair .p-ans{order:3;margin-top:2vh;grid-column:1/-1;width:66%;margin-left:auto}
  .pair.rev .p-ans{margin-left:0}
  .p-sign img{height:56vh}
  .p-ans img{height:34vh}
  .pair .p-ans.two{width:100%;grid-template-columns:1fr 1fr;gap:6px}
  .p-ans.two img{height:30vh}
  .p-b{font-size:13vw}
  .p-a{font-size:15px;letter-spacing:.18em}
  .note-x{font-size:14px}
  .p-gloss{font-size:18px}
  .cx-type{font-size:18vw}
  .cx-close{margin:4vh 0 10px 4vw;font-size:44px}
  .cx-foot>.cap{margin-left:4vw}
  .cx-foot{min-height:0}
  .cq{padding:10vh 4vw 8vh}
  .cq-head{grid-template-columns:1fr}
  .cq-title{font-size:24vw}
  .w-haze{position:static;grid-column:1/-1;text-align:left;padding:3vh 4vw 0;font-size:22px}
  .band-line{padding:4vh 4vw 0}
  .blur{height:90vh;min-height:560px}
  .blur-word{font-size:13vw;left:4vw}
  .work{padding:10vh 4vw}
  .row{grid-template-columns:1fr;gap:16px}
  .row-n{font-size:64px}
  .row-i img{max-height:60vh}
  .idx{padding:10vh 4vw 8vh}
  .idx-word{font-size:26vw}
  .grid{grid-template-columns:repeat(4,1fr)}
  .foot{padding:10vh 4vw 6vh}
  .lb img{max-width:100vw;max-height:76vh}
  .lb-prev,.lb-next{top:auto;bottom:44px;transform:none}
}
@media (max-width:760px){.cover-poem .dbl-b{display:none}}

/* keep all text level: captions undo their photo's tilt */
figure[style*='--rot'] figcaption,figure[style*='--rot'] .cap{transform:rotate(calc(-1 * var(--rot)));transform-origin:left top}
