/* The Slarvath Archive — Office of Off-World Correspondence
   Stapled to a pole. His flyers over their record. */

:root{
  --board:#1b1613;
  --paper:#f1ebdd; --paper2:#e6dfcd; --news:#ded6c2;
  --ink:#17140f; --ink2:#3a352c; --ink3:#5e574b;
  --red:#c33a24;
  --phos:#8fc79a; --office:#0e1512; --office2:#18211d; --officeline:#2a3830;
  --rose:#a98a96; --rose-bg:#f0e8ea; --rose-ink:#6a5560;
  --poster:Oswald,"Arial Narrow",Impact,sans-serif;
  --type:"Courier Prime",ui-monospace,"Courier New",monospace;
  --hand:Caveat,"Bradley Hand",cursive;
  --body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:Fraunces,Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.65;
  background:var(--board);
  background-image:
    repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 2px,transparent 2px 9px,rgba(255,255,255,.02) 9px 11px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 60px,rgba(255,255,255,.015) 60px 63px),
    linear-gradient(160deg,#241c17,#150f0c);
  background-attachment:scroll;
}
img{max-width:100%;height:auto}
.wrap{max-width:820px;margin:0 auto;padding:0 24px 90px}
a{color:var(--red)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--paper);color:var(--ink);padding:9px 14px}

/* ---------- masthead ---------- */
.mast{padding:38px 0 22px}
.mark{font-family:var(--poster);font-weight:700;font-size:clamp(46px,10vw,86px);line-height:.86;
  letter-spacing:.01em;color:#f4efe3;text-transform:uppercase;margin:0;text-shadow:0 3px 0 rgba(0,0,0,.5)}
.mark a{color:inherit;text-decoration:none}
.mark .sml{display:block;font-family:var(--type);font-size:11px;letter-spacing:.3em;
  color:#a99f8d;margin-top:9px;text-shadow:none;font-weight:400}
nav.mnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
nav.mnav a{font-family:var(--type);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#2a241c;background:var(--paper2);padding:6px 11px;text-decoration:none;
  box-shadow:0 2px 5px rgba(0,0,0,.45);transform:rotate(-.6deg)}
nav.mnav a:nth-child(2n){transform:rotate(.7deg);background:var(--news)}
nav.mnav a.on,nav.mnav a[aria-current="page"]{background:var(--red);color:#fff}
nav.mnav a:hover,nav.mnav a:focus{background:#fff}

/* ---------- the flyer ---------- */
.flyer{position:relative;background:var(--paper);box-shadow:0 14px 34px rgba(0,0,0,.62);
  margin:0 0 44px;transform:rotate(-.7deg)}
.flyer.r2{transform:rotate(.6deg);background:var(--news)}
.flyer.solo{margin-bottom:24px}
.staple{position:absolute;width:16px;height:5px;border-radius:1px;z-index:7;
  background:linear-gradient(#e2e2e2,#8b8b8b);box-shadow:0 1px 3px rgba(0,0,0,.6)}
.st1{top:8px;left:24px;transform:rotate(-15deg)}
.st2{top:10px;right:28px;transform:rotate(11deg)}
.st3{bottom:7px;left:40px;transform:rotate(5deg)}
.st4{bottom:9px;right:44px;transform:rotate(-7deg)}

/* the Office's record — the substrate */
.plate{background:var(--office);border-bottom:3px solid #000;position:relative;overflow:hidden}
.plate img{display:block;width:100%;height:210px;object-fit:cover;object-position:50% 45%;
  filter:grayscale(1) contrast(1.22) brightness(.78)}
.plate .scan{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.62) 0,rgba(0,0,0,0) 44px),
    linear-gradient(0deg,rgba(0,0,0,.62) 0,rgba(0,0,0,0) 44px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.26) 0 1px,transparent 1px 3px)}
.plate .recl{position:absolute;inset:0;pointer-events:none}
.plate .recl:before,.plate .recl:after{content:"";position:absolute;background:rgba(143,199,154,.42)}
.plate .recl:before{left:50%;top:40%;width:1px;height:20%}
.plate .recl:after{top:50%;left:40%;height:1px;width:20%}
.tick{position:absolute;z-index:3;font-family:var(--type);font-size:9px;letter-spacing:.16em;
  color:var(--phos);white-space:nowrap;background:rgba(6,12,9,.62);padding:3px 6px;
  text-shadow:0 0 4px #000}
.tick.a{top:10px;left:10px} .tick.b{top:10px;right:10px}
.tick.c{bottom:10px;left:10px} .tick.d{bottom:10px;right:10px}
.plate.noimg{padding:16px 14px;border-bottom:3px solid #000}
.plate.noimg .np{font-family:var(--type);font-size:11px;letter-spacing:.14em;color:var(--phos);opacity:.75}

/* his photograph, taped over theirs */
.pola{position:relative;background:#fff;padding:10px 10px 40px;width:238px;z-index:6;
  box-shadow:0 12px 26px rgba(0,0,0,.6);transform:rotate(-3.2deg);margin:-92px 0 0 26px}
.pola.right{transform:rotate(2.6deg);margin-left:auto;margin-right:26px}
.pola.print{padding:9px 9px 12px}
.pola.print .cap{font-size:16px;margin-top:7px}
.pola img{display:block;width:100%}
.pola .cap{font-family:var(--hand);font-size:19px;color:#2b2b33;margin-top:8px;line-height:1.12}
.tape{position:absolute;width:74px;height:22px;background:rgba(232,222,182,.72);z-index:8;
  box-shadow:0 1px 3px rgba(0,0,0,.35)}
.tape.l{top:-10px;left:-14px;transform:rotate(-30deg)}
.tape.r{top:-10px;right:-14px;transform:rotate(27deg)}

.fbody{padding:20px 26px 0;position:relative;z-index:2}
.fbody.nopola{padding-top:22px}
.acc{font-family:var(--type);font-size:11px;letter-spacing:.22em;color:var(--red);font-weight:700}
.acc a{color:inherit;text-decoration:none}
.medtag{font-family:var(--type);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#7a7266;float:right;margin-top:3px}
.medtag a{color:inherit;text-decoration:none;border-bottom:1px dotted #b9b09b}
.ftitle{font-family:var(--poster);font-weight:700;font-size:clamp(26px,5vw,34px);line-height:.98;
  text-transform:uppercase;margin:8px 0 14px;color:var(--ink)}
.ftitle a{color:inherit;text-decoration:none}
.ftext{font-size:15.5px;line-height:1.64;color:var(--ink2)}
.ftext p{margin:0 0 11px}
.ann{margin:16px 0 0;background:var(--office2);color:#b6c9b8;padding:14px 16px;
  font-family:var(--type);font-size:12.5px;line-height:1.66;border-left:3px solid var(--phos)}
.ann .l{display:block;font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--phos);margin-bottom:8px}
.ann .vessel{display:block;margin-top:11px}
.float .ann .vessel{color:var(--rose-ink)}

/* an appended recording, taped to the flyer */
.reel{position:relative;margin:22px 0 0;background:var(--paper2);padding:14px 16px 15px;
  box-shadow:0 3px 10px rgba(0,0,0,.22);transform:rotate(-.5deg)}
.flyer.r2 .reel{background:#e9e1cd;transform:rotate(.4deg)}
.reel .rl{display:block;font-family:var(--type);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.reel .tape{width:56px;height:17px;top:-8px}
.reel .tape.l{left:-10px;transform:rotate(-26deg)}
.reel .tape.r{right:-10px;transform:rotate(23deg)}

.playbtn{display:inline-flex;align-items:center;gap:11px;cursor:pointer;
  font-family:var(--poster);font-weight:600;font-size:17px;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;background:var(--red);border:0;
  padding:13px 22px;box-shadow:0 3px 0 #8f2a19,0 7px 14px rgba(0,0,0,.35)}
.playbtn:hover{background:#d2452e}
.playbtn:active{transform:translateY(2px);box-shadow:0 1px 0 #8f2a19,0 4px 9px rgba(0,0,0,.35)}
.playbtn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.playbtn .ico{font-size:13px;line-height:1}
.reel.playing .playbtn{background:var(--ink);box-shadow:0 3px 0 #000,0 7px 14px rgba(0,0,0,.35)}

.reel .dur{display:inline-block;margin-left:13px;font-family:var(--type);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);vertical-align:middle}
.reel audio{display:block;width:100%;max-width:420px;height:34px;margin-top:12px}
.reel.js audio{display:none}

@media(max-width:600px){
  .reel audio{max-width:100%}
  .playbtn{width:100%;justify-content:center;font-size:16px}
  .reel .dur{display:block;margin:9px 0 0}
}

/* tear-off strip */
.tear{display:flex;margin:20px 0 0;border-top:1px dashed #b9b09b}
.tear .tab{flex:1;border-right:1px dashed #b9b09b;height:96px;padding:10px 3px;
  writing-mode:vertical-rl;text-orientation:mixed;text-align:center;white-space:nowrap;
  font-family:var(--type);font-size:8.5px;line-height:1.9;letter-spacing:.06em;color:var(--ink3)}
.tear .tab:last-child{border-right:0}
.tear .tab b{color:var(--red)}

/* ---------- slarvathia: nothing is stapled ---------- */
.lanehead{text-align:center;padding:14px 0 30px}
.lanehead .k{font-family:var(--type);font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:#a99f8d}
.lanehead h1{font-family:var(--serif);font-weight:400;font-style:italic;font-size:34px;
  color:#efe7da;margin:8px 0 0}
.lanehead.poster h1{font-family:var(--poster);font-style:normal;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;color:#f2ece0}
.float{background:#fbf7f2;box-shadow:0 20px 50px rgba(0,0,0,.55);margin:0 auto 42px;max-width:660px}
.float img{display:block;width:100%}
.float .fb{padding:22px 26px 26px}
.float .acc{color:#8a6f7a}
.float .ftitle{font-family:var(--serif);font-weight:600;font-size:29px;text-transform:none;
  letter-spacing:0;margin:6px 0 12px}
.float .ftext{color:#3b352f}
.float .ann{background:var(--rose-bg);color:var(--rose-ink);border-left-color:var(--rose)}
.float .ann .l{color:var(--rose)}

/* ---------- depictions ---------- */
.dep{background:var(--paper);box-shadow:0 12px 30px rgba(0,0,0,.55);margin:0 0 36px;transform:rotate(-.5deg)}
.dep.alt{transform:rotate(.6deg);background:var(--news)}
.dep img{display:block;width:100%}
.dep .db{padding:16px 24px 22px}

/* polaroid placeholder — a photograph not yet taken */
.pola .ph{width:100%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:14px;line-height:1.5;
  background:repeating-linear-gradient(45deg,#dedad1 0 9px,#d4cfc4 9px 18px);
  font-family:var(--type);font-size:9.5px;color:#6e695f}
.pola .ph b{display:block;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#4e4a42;margin-bottom:9px}

/* depiction attribution */
.dep .dt{font-family:var(--poster);font-weight:600;font-size:clamp(19px,4vw,23px);
  text-transform:uppercase;line-height:1.04;margin:8px 0 6px;color:var(--ink)}
.dep .dt a{color:inherit;text-decoration:none}
.dep .attr{font-family:var(--type);font-size:10.5px;letter-spacing:.1em;color:var(--ink3);
  margin:0 0 11px}

/* permalink pager */
.pager{margin:6px 0 0}
.pager a{display:inline-block;font-family:var(--type);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#2a241c;background:var(--paper2);padding:7px 13px;
  text-decoration:none;box-shadow:0 2px 5px rgba(0,0,0,.45);transform:rotate(-.5deg)}
.pager a:hover{background:#fff}

/* ---------- plain pages, as Office documents ---------- */
.doc{background:var(--paper);box-shadow:0 14px 34px rgba(0,0,0,.6);margin:6px 0 40px;
  transform:rotate(-.4deg);position:relative}
.doc .dhead{background:var(--office);color:var(--phos);padding:10px 20px;display:flex;
  justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--type);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.doc .dbody{padding:24px 26px 28px}
.doc h1{font-family:var(--poster);font-weight:700;font-size:clamp(28px,5.5vw,38px);
  text-transform:uppercase;line-height:1;margin:0 0 10px}
.doc h2{font-family:var(--poster);font-weight:600;font-size:19px;text-transform:uppercase;
  letter-spacing:.04em;margin:30px 0 8px}
.doc p{margin:0 0 13px;color:var(--ink2);font-size:15.5px}
.doc .standfirst{color:var(--ink3);font-size:16.5px;margin-bottom:20px}
dl.lex{margin:16px 0}
dl.lex dt{font-family:var(--poster);font-weight:600;font-size:19px;margin-top:18px;text-transform:uppercase;letter-spacing:.02em}
dl.lex dt em{font-family:var(--type);font-style:normal;font-size:10.5px;color:var(--ink3);
  letter-spacing:.12em;margin-left:9px;text-transform:none}
dl.lex dt .say{font-family:var(--type);font-size:11px;letter-spacing:.1em;margin-left:10px;
  color:var(--red);text-transform:none;white-space:nowrap}
dl.lex dt .say:before{content:"· ";color:#b9b09b}
dl.lex dt .say i{font-style:normal;color:var(--ink3);letter-spacing:.04em}
dl.lex dt .say i:before{content:"("} dl.lex dt .say i:after{content:")"}
dl.lex dd{margin:3px 0 0;color:var(--ink2);font-size:15.5px}
table.record{width:100%;border-collapse:collapse;margin:16px 0;font-size:15.5px}
table.record th{text-align:left;font-family:var(--type);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink3);border-bottom:2px solid var(--ink);
  padding:0 12px 7px 0;font-weight:700}
table.record td{border-bottom:1px solid #c9bfa8;padding:10px 12px 10px 0;vertical-align:top;color:var(--ink2)}
table.record td:first-child{white-space:nowrap;font-family:var(--type);font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
.medium-list{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 0;padding:0;list-style:none}
.medium-list a{display:block;background:var(--office2);color:#b6c9b8;padding:8px 13px;
  font-family:var(--type);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.medium-list a:hover{background:var(--office);color:var(--phos)}
.medium-list .count{color:var(--phos)}

footer{margin-top:60px;padding-top:18px;border-top:1px solid #3a2f26;
  font-family:var(--type);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#8d8478;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

@media(max-width:600px){
  .wrap{padding:0 14px 60px}
  .pola{width:200px;margin-left:16px;margin-top:-74px}
  .fbody{padding:18px 18px 0}
  .tear .tab{font-size:7.5px;height:78px}
  .plate img{height:150px}
  .tick{font-size:8px;letter-spacing:.1em;padding:2px 5px}
  .tick.c,.tick.d{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}