/*
Theme Name: Quadrille
Theme URI: https://vaxdungeon.com/
Description: Graph-paper mapping theme for a dungeon-crawl blog. The archive is drawn as a floorplan: every article is a keyed room whose footprint is set by its length, walls are the gaps in the grid, and doorways connect one room to the next. Built text-first for archives that carry almost no images.
Author: vaxdungeon.com
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: quadrille
*/

/* ---------------------------------------------------------------- fonts */
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/Sora-600.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/Sora-700.woff2') format('woff2');}
@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/Karla-400.woff2') format('woff2');}
@font-face{font-family:'Karla';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/Karla-400i.woff2') format('woff2');}
@font-face{font-family:'Karla';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/Karla-600.woff2') format('woff2');}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/MartianMono-500.woff2') format('woff2');}

/* --------------------------------------------------------------- tokens */
:root{
  --paper:#F6F8F3; --room:#FCFDFA; --room-2:#EFF3EC;
  --grid:#D3E0DF; --grid-2:#B2C7CC;
  --ink:#14222A; --ink-2:#39505B; --dim:#6B818A;
  --pen:#1A4E6E; --pen-2:#2E6B90;
  --key:#C2452F; --key-2:#9E3524;
  --rule:#BFCFD2;

  --f-disp:'Sora',system-ui,'Segoe UI',Roboto,sans-serif;
  --f-body:'Karla',system-ui,'Segoe UI',Roboto,sans-serif;
  --f-mono:'Martian Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1160px; --measure:64ch;
  --sq:22px;            /* one square of the paper — the whole page is set on it */
  --wall:3px;
  --s1:6px; --s2:11px; --s3:22px; --s4:33px; --s5:44px; --s6:66px; --s7:88px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  background-color:var(--paper);
  /* the sheet: index lines every fifth square, drawn over the fine grid */
  background-image:
    linear-gradient(var(--grid-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-2) 1px,transparent 1px),
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:calc(var(--sq) * 5) calc(var(--sq) * 5),calc(var(--sq) * 5) calc(var(--sq) * 5),var(--sq) var(--sq),var(--sq) var(--sq);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--pen);text-decoration:none}
a:hover{color:var(--key)}
:focus-visible{outline:2px solid var(--key);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--pen);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------- masthead */
.mast{background:var(--room);border-bottom:var(--wall) solid var(--pen)}
.mast__in{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) 22px;max-width:var(--wrap);margin:0 auto}
.brand{display:flex;align-items:center;gap:13px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand__mark{flex:none;width:38px;height:38px}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--f-disp);font-weight:700;font-size:25px;letter-spacing:-.015em}
.brand__sub{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:7px}
.mast__nav{margin-left:auto}
.mast__nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s3);margin:0;padding:0}
.mast__nav a{
  font-family:var(--f-disp);font-weight:600;font-size:13.5px;letter-spacing:.01em;
  color:var(--ink-2);padding:5px 0;display:block;border-bottom:2px solid transparent;
}
.mast__nav a:hover,.mast__nav .current-menu-item>a{color:var(--pen);border-bottom-color:var(--key)}
.mast__toggle{display:none}

/* scale bar — the page states its own unit, as a map does */
.scale{background:var(--room-2);border-bottom:1px solid var(--rule)}
.scale__in{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;
  max-width:var(--wrap);margin:0 auto;padding:9px 22px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
}
.scale__in b{color:var(--ink-2);font-weight:500}
.scale__bar{
  display:inline-block;width:110px;height:8px;
  background:repeating-linear-gradient(90deg,var(--pen) 0 22px,transparent 22px 44px);
  border:1px solid var(--pen);
}
.scale__search{margin-left:auto}

/* ----------------------------------------------------------- searchform */
.sform{display:flex;align-items:center;gap:7px}
.sform input[type=search]{
  font-family:var(--f-body);font-size:13px;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--rule);padding:3px 2px;width:130px;
}
.sform input[type=search]:focus{border-bottom-color:var(--key);outline:none}
.sform button{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:0;color:var(--pen);cursor:pointer;padding:3px 0;
}
.sform button:hover{color:var(--key)}

/* ------------------------------------------------------------- entrance */
.entrance{
  position:relative;margin:var(--s5) 0 var(--s4);
  border:var(--wall) solid var(--pen);background:var(--room);overflow:hidden;
}
.entrance__in{padding:var(--s5) var(--s4)}
/* the stair block, hatched the way a map hatches steps */
.entrance__stair{
  position:absolute;right:0;top:0;bottom:0;width:132px;border-left:var(--wall) solid var(--pen);
  background:repeating-linear-gradient(180deg,var(--room) 0 18px,var(--pen-2) 18px 20px);
}
.entrance__stair span{
  position:absolute;bottom:14px;left:0;right:0;text-align:center;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--pen);
  background:var(--room);padding:4px 0;
}
.entrance__k{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 var(--s3);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--key);
}
.entrance__k::before{content:"";width:11px;height:11px;border:2px solid var(--key)}
.entrance__k em{font-style:normal;color:var(--dim)}
.entrance__title{
  font-family:var(--f-disp);font-weight:700;font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.08;
  letter-spacing:-.028em;margin:0 0 var(--s2);max-width:20ch;text-wrap:balance;
}
.entrance__title a{color:var(--ink)}
.entrance__title a:hover{color:var(--pen)}
.entrance__stand{color:var(--ink-2);margin:0 0 var(--s3);max-width:50ch;font-size:1.06rem;line-height:1.58}
.entrance__plate{margin-top:var(--s3);max-width:520px;border:2px solid var(--pen);padding:4px;background:#fff}

/* meta vocabulary */
.mk{
  display:flex;flex-wrap:wrap;gap:6px 15px;align-items:center;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
}
.mk b{color:var(--ink-2);font-weight:500}
.sym{
  --cc:var(--dim);
  display:inline-flex;align-items:center;gap:7px;color:var(--cc);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
}
.sym::before{content:"";width:9px;height:9px;background:var(--cc);flex:none}
a.sym:hover{color:var(--key)}
a.sym:hover::before{background:var(--key)}

/* --------------------------------------------------------------- section */
.shead{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3);margin:var(--s5) 0 var(--s3)}
.shead h2{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin:0;color:var(--pen)}
.shead__n{margin-left:auto;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* ------------------------------------------------------------ floorplan */
/* walls are the gaps: the plan itself is inked, the rooms are cut out of it */
.plan{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--wall);
  background:var(--pen);border:var(--wall) solid var(--pen);
  grid-auto-rows:minmax(198px,auto);grid-auto-flow:dense;overflow:hidden;
}
.room{
  position:relative;background:var(--room);padding:var(--s3) var(--s3) var(--s2);
  display:flex;flex-direction:column;gap:var(--s2);transition:background-color .16s ease;
}
.room--hall{grid-column:span 2}
/* the doorway through the right-hand wall; clipped away at the outer edge */
.room::after{
  content:"";position:absolute;right:calc(var(--wall) * -1);top:50%;transform:translateY(-50%);
  width:var(--wall);height:34px;background:var(--room);
}
.room:hover{background:var(--room-2)}
.room:hover::after{background:var(--room-2)}
.room__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)}
.room__area{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.room__title{
  font-family:var(--f-disp);font-weight:700;font-size:1.16rem;line-height:1.22;letter-spacing:-.018em;
  margin:0;text-wrap:balance;
}
.room--hall .room__title{font-size:1.44rem}
.room__title a{color:var(--ink)}
.room__title a:hover{color:var(--pen)}
.room__stand{color:var(--ink-2);margin:0;font-size:.95rem;line-height:1.5}
.room__foot{margin-top:auto;padding-top:var(--s2);border-top:1px dashed var(--rule)}
.room__plate{margin:0 calc(var(--s3) * -1) 0;border-top:1px dashed var(--rule)}
.room__plate img{width:100%}

/* --------------------------------------------------------------- map key */
.mapkey{
  border:var(--wall) solid var(--pen);background:var(--room);padding:var(--s3);
  margin:var(--s4) 0 0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;
}
.mapkey__l{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--pen)}
.mapkey__i{
  --cc:var(--dim);
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);
}
.mapkey__i::before{content:"";width:11px;height:11px;background:var(--cc);flex:none}
.mapkey__i b{color:var(--dim);font-weight:500}
.mapkey__i:hover{color:var(--key)}

/* ------------------------------------------------------------ pagination */
.pagination{padding:var(--s5) 0}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:var(--wall);align-items:stretch;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.pagination .page-numbers{display:inline-block;padding:10px 14px;background:var(--room);border:var(--wall) solid var(--pen);color:var(--ink-2)}
.pagination .page-numbers:hover{background:var(--room-2);color:var(--pen)}
.pagination .page-numbers.current{background:var(--pen);border-color:var(--pen);color:#fff}
.pagination .page-numbers.dots{border-color:transparent;background:none}

/* ---------------------------------------------------------------- entry */
.entry{padding:var(--s5) 0 var(--s5)}
.entry__head{max-width:78ch;margin:0 auto var(--s4);border:var(--wall) solid var(--pen);background:var(--room);padding:var(--s4)}
.entry__k{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 var(--s2);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--key);
}
.entry__k::before{content:"";width:11px;height:11px;border:2px solid var(--key)}
.entry__title{
  font-family:var(--f-disp);font-weight:700;font-size:clamp(1.8rem,4.4vw,2.8rem);line-height:1.08;
  letter-spacing:-.03em;margin:0 0 var(--s2);text-wrap:balance;
}
.entry__stand{color:var(--ink-2);font-size:1.09rem;line-height:1.56;margin:0 0 var(--s3);font-style:italic}
.entry__plate{max-width:900px;margin:0 auto var(--s4);border:var(--wall) solid var(--pen);padding:5px;background:#fff}

.prose{
  max-width:var(--measure);margin:0 auto;font-size:1.06rem;line-height:1.72;
  background:var(--room);border:var(--wall) solid var(--pen);padding:var(--s4);
}
.prose p{margin:0 0 1.25em}
.prose>*:first-child{margin-top:0}
.prose h1,.prose h2,.prose h3,.prose h4{font-family:var(--f-disp);color:var(--ink);line-height:1.18;letter-spacing:-.022em}
.prose h2{font-size:1.42rem;font-weight:700;margin:2em 0 .55em;display:flex;align-items:center;gap:12px}
/* the section mark is a doorway seen in plan */
.prose h2::before{content:"";flex:none;width:16px;height:10px;border:2px solid var(--pen);border-bottom:0}
.prose h3{font-size:1.14rem;font-weight:600;margin:1.8em 0 .45em;color:var(--pen)}
.prose h4{font-size:1.02rem;font-weight:600;margin:1.6em 0 .4em}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.prose a:hover{text-decoration-color:var(--key)}
.prose ul,.prose ol{margin:0 0 1.25em;padding-left:1.35em}
.prose li{margin:0 0 .45em}
.prose li::marker{color:var(--key)}
.prose blockquote{margin:1.6em 0;padding:var(--s2) var(--s3);border-left:var(--wall) solid var(--key);background:var(--room-2);font-style:italic;color:var(--ink-2)}
.prose blockquote p:last-child{margin-bottom:0}
.prose img{margin:1.6em 0;border:2px solid var(--pen);padding:4px;background:#fff}
.prose figure{margin:1.6em 0}
.prose figcaption{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.09em;color:var(--dim);margin-top:8px;text-transform:uppercase}
.prose code{font-family:var(--f-mono);font-size:.82em;background:var(--room-2);padding:1px 5px}
.prose pre{background:var(--ink);color:#D6E3E8;padding:18px;overflow:auto;font-family:var(--f-mono);font-size:.78rem;line-height:1.6}
.prose pre code{background:none;padding:0;color:inherit}
.prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.95rem}
.prose th,.prose td{border:1px solid var(--rule);padding:9px 11px;text-align:left}
.prose th{background:var(--room-2);font-family:var(--f-disp);font-weight:600;font-size:.85rem}
.prose hr{border:0;border-top:1px dashed var(--rule);margin:2.2em 0}

.filing{max-width:var(--measure);margin:var(--s4) auto 0;display:flex;flex-wrap:wrap;gap:9px 18px;align-items:center}
.filing__l{font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}

/* corridors out of this room */
.exits{max-width:var(--wrap);margin:var(--s5) auto 0;display:grid;grid-template-columns:1fr 1fr;gap:var(--wall);background:var(--pen);border:var(--wall) solid var(--pen)}
.exit{background:var(--room);padding:var(--s3);display:block}
.exit:hover{background:var(--room-2)}
.exit__k{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--key);display:block;margin-bottom:9px}
.exit__t{font-family:var(--f-disp);font-weight:600;font-size:1.04rem;line-height:1.24;color:var(--ink)}
.exit--next{text-align:right}

.adjacent-rooms{padding:var(--s5) 0 0}
.adjacent-rooms .plan{grid-auto-rows:minmax(160px,auto);grid-template-columns:repeat(3,1fr)}

/* ------------------------------------------------------------ page/misc */
.pagehead{padding:var(--s5) 0 var(--s2)}
.pagehead__t{font-family:var(--f-disp);font-weight:700;font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.1;letter-spacing:-.03em;margin:0}
.pagehead__d{color:var(--ink-2);margin:var(--s2) 0 0;max-width:60ch}
.notice{border:var(--wall) solid var(--pen);background:var(--room);padding:var(--s5);text-align:center;margin:var(--s3) 0 var(--s5)}
.notice h2{font-family:var(--f-disp);font-weight:700;font-size:1.4rem;letter-spacing:-.025em;margin:0 0 10px}
.notice p{color:var(--ink-2);margin:0 auto var(--s3);max-width:48ch}
.notice .sform{justify-content:center}

/* --------------------------------------------------------------- widget */
.widget{border:var(--wall) solid var(--pen);background:var(--room);padding:var(--s3);margin:0 0 var(--s3)}
.widget-title{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px;color:var(--pen)}
.widget ul{list-style:none;margin:0;padding:0;font-size:.95rem}
.widget li{padding:5px 0;border-bottom:1px dashed var(--rule)}
.widget li:last-child{border-bottom:0}

/* --------------------------------------------------------------- footer */
.foot{background:var(--ink);color:#A9C0C9;margin-top:var(--s6);border-top:var(--wall) solid var(--pen)}
.foot__in{max-width:var(--wrap);margin:0 auto;padding:var(--s6) 22px var(--s4);display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--s5)}
.foot h3{font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#7C9AA5;margin:0 0 var(--s3)}
.foot p{margin:0 0 1em;font-size:.97rem;line-height:1.6;color:#9DB5BF;max-width:44ch}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 8px}
.foot a{color:#CFE0E6;font-family:var(--f-body);font-weight:600;font-size:.95rem}
.foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot__brand{display:flex;align-items:center;gap:12px;margin-bottom:var(--s3)}
.foot__brand svg{width:40px;height:40px;flex:none}
.foot__name{font-family:var(--f-disp);font-weight:700;font-size:21px;letter-spacing:-.02em;color:#fff}
.colophon{
  border-top:1px solid rgba(255,255,255,.13);max-width:var(--wrap);margin:0 auto;padding:var(--s3) 22px var(--s4);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#7C9AA5;
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
}

/* ------------------------------------------------------------ responsive */
@media (max-width:1000px){
  .plan{grid-template-columns:repeat(3,1fr)}
  .adjacent-rooms .plan{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .plan{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(176px,auto)}
  .adjacent-rooms .plan{grid-template-columns:repeat(2,1fr)}
  .foot__in{grid-template-columns:1fr 1fr}
  .foot__about{grid-column:1/-1}
  .entrance__stair{display:none}
  .entrance__title{max-width:none}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .plan{grid-template-columns:1fr;grid-auto-rows:auto}
  .adjacent-rooms .plan{grid-template-columns:1fr}
  .room--hall{grid-column:span 1}
  .room::after{right:auto;left:50%;top:auto;bottom:calc(var(--wall) * -1);transform:translateX(-50%);width:34px;height:var(--wall)}
  .mast__in{flex-wrap:wrap;gap:var(--s2) var(--s3);padding:var(--s2) 20px}
  .mast__toggle{
    display:block;margin-left:auto;background:none;border:2px solid var(--pen);color:var(--pen);
    font-family:var(--f-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;padding:7px 10px;cursor:pointer;
  }
  .mast__nav{flex-basis:100%;margin-left:0;display:none}
  .mast__nav.is-open{display:block}
  .mast__nav ul{flex-direction:column;gap:0}
  .mast__nav li{border-top:1px dashed var(--rule)}
  .mast__nav a{padding:11px 0}
  .wrap{padding:0 18px}
  .scale__in{padding:9px 18px;gap:8px var(--s3)}
  .scale__search{margin-left:0;flex-basis:100%}
  .sform input[type=search]{width:100%}
  .entrance__in{padding:var(--s4) var(--s3)}
  .entry__head,.prose{padding:var(--s3)}
  .exits{grid-template-columns:1fr}
  .exit--next{text-align:left}
  .foot__in{grid-template-columns:1fr;padding:var(--s5) 18px var(--s3)}
  .colophon{padding:var(--s3) 18px var(--s3)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
@media print{
  .mast,.scale,.foot,.pagination,.exits,.adjacent-rooms,.colophon{display:none}
  body{background:#fff;background-image:none}
}