/* The page itself, and everything that is not Elementor's. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--tan)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{overflow-x:clip}
body{margin:0;background:#F0E2C0 url(../img/bg/paper-cream.webp) 0 0/var(--tile);color:var(--ink);font:400 var(--t-body)/1.6 var(--f-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,canvas{max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:400;line-height:1.02}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
main{display:block}
main:focus{outline:none}

:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.skip-link{position:fixed;left:12px;top:-60px;z-index:200;padding:10px 16px;background:var(--ink);color:var(--bone);font-weight:600;text-decoration:none}
.skip-link:focus{top:12px}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ico{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}

.wrap{width:min(100% - var(--gutter) * 2,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - var(--gutter) * 2,760px);margin-inline:auto}

/* the sheets: every section is a sheet of old paper with its own inks */
.sheet-cream{--sheet-c:#F0E2C0;--sheet-i:url(../img/bg/paper-cream.webp);--fg:var(--ink);--fg2:var(--ink-2);--fg3:var(--ink-3);--acc:var(--red);--shade:rgba(163,21,26,.9);--line-c:rgba(23,18,14,.2);--btn-bg:var(--red);--btn-fg:var(--bone);--btn-hi:var(--ink);--btn-sh:var(--ink)}
.sheet-tan{--sheet-c:#D8BC8C;--sheet-i:url(../img/bg/paper-tan.webp);--fg:var(--ink);--fg2:#2E2218;--fg3:#55422F;--acc:var(--red-lo);--shade:rgba(163,21,26,.9);--line-c:rgba(23,18,14,.24);--btn-bg:var(--red);--btn-fg:var(--bone);--btn-hi:var(--ink);--btn-sh:var(--ink)}
.sheet-red{--sheet-c:#86161A;--sheet-i:url(../img/bg/paper-red.webp);--fg:var(--bone);--fg2:#F4DFC0;--fg3:#E5C39C;--acc:var(--gold-hi);--shade:rgba(30,6,6,.75);--line-c:rgba(251,239,213,.26);--btn-bg:var(--gold-hi);--btn-fg:var(--ink);--btn-hi:var(--bone);--btn-sh:#2A0507}
.sheet-teal{--sheet-c:#125E66;--sheet-i:url(../img/bg/paper-teal.webp);--fg:var(--bone);--fg2:#E6EBD6;--fg3:#BFD8CC;--acc:var(--gold-hi);--shade:rgba(4,30,34,.75);--line-c:rgba(251,239,213,.26);--btn-bg:var(--gold-hi);--btn-fg:var(--ink);--btn-hi:var(--bone);--btn-sh:#04262A}
.sheet-ink{--sheet-c:#1E1815;--sheet-i:url(../img/bg/paper-ink.webp);--fg:var(--bone);--fg2:#E9D9BD;--fg3:#B9A384;--acc:var(--gold-hi);--shade:rgba(163,21,26,.95);--line-c:rgba(251,239,213,.2);--btn-bg:var(--red-hi);--btn-fg:var(--bone);--btn-hi:var(--gold-hi);--btn-sh:#000}
.sheet-cream,.sheet-tan,.sheet-red,.sheet-teal,.sheet-ink{background:var(--sheet-c) var(--sheet-i) 0 0/var(--tile);color:var(--fg)}

/* the tear: the sheet carries on upward past its own top edge, ripped.
   ::before is the same paper, masked to the rip; ::after is the white core the
   rip exposed and the shadow the sheet drops on the one below it. No mask on the
   section itself, so neither of them gets cut off, and the two overlap the
   section by 2px, so there is no line to see. */
.tear{--th:clamp(46px,6.4vw,120px);--tm:url(../img/tear/tear-a.webp);--tr:url(../img/tear/tear-a-rim.webp);position:relative;isolation:isolate}
.tear-b{--tm:url(../img/tear/tear-b.webp);--tr:url(../img/tear/tear-b-rim.webp)}
.tear-c{--tm:url(../img/tear/tear-c.webp);--tr:url(../img/tear/tear-c-rim.webp)}
.tear::before,.tear::after{content:"";position:absolute;left:0;right:0;top:calc(var(--th) * -1);height:calc(var(--th) + 2px);z-index:-1;pointer-events:none}
.tear::before{background:var(--sheet-c) var(--sheet-i) 0 var(--th)/var(--tile);-webkit-mask:var(--tm) 0 0/auto 100% repeat-x;mask:var(--tm) 0 0/auto 100% repeat-x}
.tear::after{background:var(--tr) 0 0/auto 100% repeat-x}

/* eyebrows: tattoo script, leaning into the heavy type under it */
.eyebrow{font:400 clamp(2.1rem,3.2vw,3.3rem)/1 var(--f-script);color:var(--acc,var(--red))}

/* buttons: a hand-cut paper label stuck on the sheet. Shared by plain links and Elementor's button widget. */
.btn,body .elementor .elementor-widget-button .elementor-button{
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:60px;padding:.5em 1.9em;border:0;border-radius:0;background:none;color:var(--fg,var(--ink));
  font:700 1.14rem/1 var(--f-label);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:color .2s,transform .25s var(--ease);
}
.btn-gold.btn,body .elementor .btn-gold .elementor-button{color:var(--btn-fg,var(--bone))}
.btn-gold.btn::before,body .elementor .btn-gold .elementor-button::before,.btn-gold.btn::after,body .elementor .btn-gold .elementor-button::after{content:"";position:absolute;inset:0;-webkit-mask:url(../img/label.webp) center/100% 100% no-repeat;mask:url(../img/label.webp) center/100% 100% no-repeat}
.btn-gold.btn::before,body .elementor .btn-gold .elementor-button::before{z-index:-1;background:var(--btn-bg,var(--red));transition:background .2s}
.btn-gold.btn::after,body .elementor .btn-gold .elementor-button::after{z-index:-2;background:var(--btn-sh,var(--ink));transform:translate(4px,5px);transition:transform .2s var(--ease)}
.btn-gold.btn:hover,body .elementor .btn-gold .elementor-button:hover{transform:translate(-2px,-2px) rotate(-.5deg);color:var(--btn-fg,var(--bone))}
.btn-gold.btn:hover::after,body .elementor .btn-gold .elementor-button:hover::after{transform:translate(7px,8px)}
.btn-gold.btn:active,body .elementor .btn-gold .elementor-button:active{transform:translate(2px,3px)}
.btn-gold.btn:active::after,body .elementor .btn-gold .elementor-button:active::after{transform:translate(1px,1px)}
.btn-line.btn::before,body .elementor .btn-line .elementor-button::before{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:url(../img/label-line.webp) center/100% 100% no-repeat;mask:url(../img/label-line.webp) center/100% 100% no-repeat}
.btn-line.btn,body .elementor .btn-line .elementor-button{color:var(--fg,var(--ink))}
.btn-line.btn:hover,body .elementor .btn-line .elementor-button:hover{color:var(--acc,var(--red));transform:rotate(-.5deg)}
body .elementor .btn-text .elementor-button{min-height:0;padding:0;color:var(--acc,var(--red));background:none;border-bottom:1px solid currentColor}
.btn-off{color:var(--fg3,var(--ink-3));cursor:default}

/* status */
.status{display:inline-flex;align-items:center;gap:.5em;font:500 1.04rem/1.2 var(--f-text);color:var(--fg,var(--ink))}
.status-led{width:10px;height:10px;border-radius:50%;background:var(--fg3,var(--ink-3))}
.status.is-open .status-led{background:var(--open);box-shadow:0 0 0 3px rgba(42,122,85,.24)}
.status-label{font-weight:600}
.status-detail{opacity:.8}

.note-admin{margin:0 0 1em;padding:.7em 1em;background:rgba(163,21,26,.1);border-left:3px solid var(--red);font:400 1rem/1.4 var(--f-text)}

/* prose, for the pages Elementor does not build */
.prose{font-size:var(--t-body)}
.prose h2{font-size:clamp(1.7rem,2.6vw,2.4rem);margin:1.2em 0 .4em}
.prose a{color:var(--acc,var(--red));text-decoration-thickness:1px;text-underline-offset:3px}
.prose ul{padding-left:1.1em}
.post-list{list-style:none;margin:0;padding:0;display:grid;gap:2.4rem}
.post-card h2{font-size:clamp(1.7rem,2.6vw,2.4rem);margin-bottom:.3em}
.post-card h2 a{text-decoration:none}
.post-meta{font:700 1rem/1.2 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--acc,var(--red));margin-bottom:.4em}
.pager{margin-top:3rem}
.search-form{display:flex;gap:10px;margin-bottom:2rem}
.search-form label{flex:1 1 auto;min-width:0}
.search-form .btn{flex:none}
.search-field{width:100%;min-height:54px;padding:0 1em;font:inherit;background:#FBF3DF;border:1px solid #8C7355;color:var(--ink)}
