/* Layout: a charcoal sketchbook — off-white paper, black brush drawings, huge lowercase grotesk, one idea per screen */
:root{
  --paper:#F3F3F1;
  --white:#FCFCFB;
  --ink:#1C1F22;
  --ink-soft:#5E6266;
  --grey:#B4B7BA;      /* words not yet read */
  --mint:#EAF2EE;      /* tinted section */
  --stone:#ECEAE5;     /* tinted section */
  --rule:rgba(28,31,34,.16);
  --accent:#1F4FD8;     /* cobalt, like the iron plant stands on the pavement; used sparingly */
  --f-sans:"Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-hand:"Caveat", "Segoe Print", "Bradley Hand", cursive;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--f-sans);font-size:17px;line-height:1.55;overflow-x:hidden;margin:0;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px dashed var(--ink);outline-offset:4px}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(20px, env(safe-area-inset-left,0px));padding-right:max(20px, env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-sans);font-weight:800;text-wrap:balance;margin:0;text-transform:lowercase;letter-spacing:-.045em;line-height:.95}
h1{font-size:clamp(3rem,10vw,8.6rem)}
h2{font-size:clamp(2.4rem,6.4vw,5.4rem)}
h3{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.03em;line-height:1.05}
p{margin:0;max-width:62ch}
.label{font-weight:700;font-size:1rem;text-transform:lowercase;letter-spacing:0;margin-bottom:14px;display:block}
.hand{font-family:var(--f-hand);font-weight:700;line-height:1}
.muted{color:var(--ink-soft)}
.stars{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.stars li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:baseline}
.stars li::before{content:"✶";font-size:.9rem}
.tint-mint{background:var(--mint)}
.tint-stone{background:var(--stone)}

/* nav */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:16px max(20px, env(safe-area-inset-right,0px)) 16px max(20px, env(safe-area-inset-left,0px));
  background:linear-gradient(var(--paper) 50%, rgba(243,243,241,0));text-transform:lowercase;font-size:.95rem}
.nav .logo{font-weight:700;text-decoration:none;white-space:nowrap;letter-spacing:-.01em}
.nav ul{display:flex;gap:clamp(14px,2.6vw,32px);list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;position:relative}
.nav ul a[aria-current="page"]{font-weight:700}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.nav ul a:hover::after,.nav ul a[aria-current="page"]::after{transform:scaleX(1)}
.nav .book{justify-self:end}
@media (max-width:640px){.nav{grid-template-columns:1fr auto;row-gap:8px;background:var(--paper);border-bottom:1px solid var(--rule);padding-block:12px 10px}.nav ul{grid-column:1 / -1;grid-row:2;justify-content:flex-start}}

.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;text-transform:lowercase;text-decoration:none;color:var(--white);background:var(--ink);
  padding:10px 22px 11px;border-radius:255px 18px 225px 16px/16px 225px 18px 255px;transition:transform .25s}
.btn:hover{transform:rotate(-2deg) scale(1.04)}
.btn.accent{background:var(--accent)}
.btn.small{padding:6px 16px 7px;font-size:.92rem}

/* word reveal (grey → ink) */
.reveal-words .w{color:var(--grey);transition:color .2s}
.reveal-words .w.on{color:var(--ink)}

/* sketches */
.sketch{display:block;width:100%;height:auto;overflow:visible}

footer{padding-block:48px 56px;border-top:1px solid var(--rule);text-transform:lowercase;font-size:.92rem;color:var(--ink-soft)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 30px}
footer a{text-decoration:none}
footer .f-logo{font-weight:800;color:var(--ink);font-size:1.3rem;letter-spacing:-.03em}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal-words .w{color:var(--ink)}}

/* WordPress admin bar */
.admin-bar .nav{top:32px}
@media (max-width:782px){.admin-bar .nav{top:46px}}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.pager .nav-links{display:flex;gap:20px;justify-content:center;padding-bottom:10vh;text-transform:lowercase}
.pager .page-numbers{text-decoration:none}
.post .thumb{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px}