/* PlantedShack. Journal look: paper canvas, ink rules, square corners, moss accent used only for marks and offset shadows. */
:root{
  --paper:#f7f3ec; --ink:#1e2219; --ink-2:#4b5145; --rule:#1e2219; --rule-soft:#cfc8b8;
  --moss:#b9b23d; --moss-wash:#ebe8c9;
  --display:'Young Serif',Georgia,serif; --text:'Source Serif 4',Georgia,serif; --type:'Courier Prime','Courier New',monospace;
  --measure:40rem; --wide:72rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.7 var(--text)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-color:var(--moss);text-decoration-thickness:3px}
img{max-width:100%;height:auto}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 1rem}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;background:var(--paper);padding:.5rem;border:1px solid var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* masthead */
.mast{border-bottom:1px solid var(--rule)}
.mast .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.25rem;padding-bottom:1rem}
.brand{font:400 1.9rem/1 var(--display);text-decoration:none;letter-spacing:-.01em}
.brand span{display:inline-block;width:.55em;height:.55em;background:var(--moss);border:1px solid var(--ink);margin-left:.15em;vertical-align:.1em}
.nav{display:flex;gap:1.25rem;flex-wrap:wrap;font:400 .9rem/1.4 var(--type);text-transform:lowercase}
.nav a{text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current=page]{border-bottom-color:var(--ink)}

/* labels */
.label{font:400 .78rem/1.3 var(--type);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.label a{text-decoration:none}

/* home shelf */
.shelf{margin:2.5rem 0 3rem;border:1px solid var(--ink);background:var(--moss-wash);box-shadow:8px 8px 0 var(--moss);padding:2rem 1.5rem}
.shelf h1{font:400 clamp(2rem,5vw,3.4rem)/1.02 var(--display);margin:.5rem 0 1rem;text-wrap:balance;max-width:20ch}
.shelf p{max-width:36rem;margin:0 0 1.5rem}
.btn{display:inline-block;font:700 .9rem/1 var(--type);text-decoration:none;background:var(--paper);border:1px solid var(--ink);padding:.85rem 1.6rem;box-shadow:5px 5px 0 var(--ink)}
.btn:hover{box-shadow:3px 3px 0 var(--ink);transform:translate(2px,2px);text-decoration:none}

/* ruled index (lists of articles) */
.index-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:.4rem;margin:3rem 0 0}
.index-head h2{font:400 1.6rem/1.2 var(--display);margin:0}
.index{list-style:none;margin:0;padding:0}
.index li{display:grid;grid-template-columns:7rem 1fr;gap:1rem;border-bottom:1px solid var(--rule-soft);padding:1.1rem 0}
.index h3{font:400 1.35rem/1.25 var(--display);margin:0 0 .3rem;text-wrap:balance}
.index h3 a{text-decoration:none}.index h3 a:hover{text-decoration:underline;text-decoration-color:var(--moss);text-decoration-thickness:3px}
.index p{margin:0;color:var(--ink-2);font-size:1rem;line-height:1.55}
@media (max-width:600px){.index li{grid-template-columns:1fr;gap:.3rem}}

/* category tiles */
.beds{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0;border-left:1px solid var(--ink);border-top:1px solid var(--ink);margin:1.25rem 0 3rem}
.bed{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:1.25rem;text-decoration:none;display:block}
.bed:hover{background:var(--moss-wash)}
.bed strong{display:block;font:400 1.3rem/1.2 var(--display);margin:.6rem 0 .3rem}
.bed span{font-size:.95rem;color:var(--ink-2)}
.mark{width:28px;height:28px;stroke:var(--ink);fill:none;stroke-width:1.4}

/* article */
.article{max-width:var(--measure);margin:2.5rem auto 4rem}
.article h1{font:400 clamp(2rem,4.6vw,3rem)/1.08 var(--display);margin:.6rem 0 .8rem;text-wrap:balance}
.article .standfirst{font-size:1.2rem;color:var(--ink-2);margin:0 0 1.2rem}
.meta{font:400 .82rem/1.5 var(--type);color:var(--ink-2);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:.5rem 0;margin-bottom:2rem}
.body h2{font:400 1.7rem/1.2 var(--display);margin:2.6rem 0 .6rem;text-wrap:balance}
.body h3{font:600 1.15rem/1.35 var(--text);margin:1.8rem 0 .4rem}
.body p{margin:0 0 1.1rem;text-wrap:pretty}
.body ul,.body ol{padding-left:1.4rem;margin:0 0 1.2rem}.body li{margin:.35rem 0}
.body ol{list-style:none;counter-reset:s;padding-left:0}
.body ol>li{counter-increment:s;position:relative;padding-left:2.6rem}
.body ol>li::before{content:counter(s);position:absolute;left:0;top:.1rem;width:1.8rem;height:1.8rem;border:1px solid var(--ink);font:700 .85rem/1.8rem var(--type);text-align:center;background:var(--paper)}
.body>p:first-child{border:1px solid var(--ink);background:var(--moss-wash);padding:1rem 1.2rem;box-shadow:6px 6px 0 var(--moss)}
.body table,.page table{border-collapse:collapse;width:100%;font-size:.95rem;line-height:1.45;margin:0 0 1.5rem;display:block;overflow-x:auto}
.body th,.page th{font:700 .8rem/1.3 var(--type);text-transform:uppercase;letter-spacing:.04em;text-align:left;border-bottom:2px solid var(--ink);padding:.5rem .6rem}
.body td,.page td{border-bottom:1px solid var(--rule-soft);padding:.55rem .6rem;vertical-align:top}
.body a{text-decoration-color:var(--moss);text-decoration-thickness:2px}
.related{border-top:2px solid var(--ink);margin-top:3rem;padding-top:.8rem}

/* plain pages */
.page{max-width:var(--measure);margin:2.5rem auto 4rem}
.page h1{font:400 clamp(2rem,4.4vw,2.8rem)/1.1 var(--display);margin:0 0 1.5rem}
.page h2{font:400 1.4rem/1.25 var(--display);margin:2rem 0 .5rem}

/* footer */
.foot{border-top:1px solid var(--ink);margin-top:4rem;padding:1.5rem 0 2.5rem;font:400 .85rem/1.6 var(--type)}
.foot .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot a{text-decoration:none}.foot a:hover{text-decoration:underline}
.foot nav{display:flex;gap:1rem;flex-wrap:wrap}