/* ============================================================
   MAKUTA NIRVANA · Journal article — shared stylesheet
   Crayon theme. Linked by every journal-*.html article page.
   ============================================================ */
:root{
  --paper:#f4efe3; --paper2:#ede6d6; --sheet:#faf6ea;
  --ink:#40382c; --dim:rgba(64,56,44,.62); --line:rgba(64,56,44,.16);
  --gold:#c1873a;
  --serif:"Fraunces",Georgia,serif; --sans:"Karla",-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.8,.28,1); --pad:clamp(22px,5vw,90px);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden;
  opacity:0;animation:pageIn .8s var(--ease) .05s forwards}
@keyframes pageIn{to{opacity:1}}
::selection{background:var(--gold);color:#fff}
a{color:inherit;text-decoration:none}
em{font-style:italic;color:var(--gold);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12'%3E%3Cpath d='M2 8 Q 14 3 27 7 T 52 7 T 76 6 T 98 7' fill='none' stroke='%23c1873a' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:0 100%;background-size:100% .42em;padding-bottom:.06em}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.sk{width:100%;height:100%;display:block}
.sk .ln{fill:none;stroke:#5b4a34;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;opacity:.82}
.sk .thin{fill:none;stroke:#5b4a34;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.sk .fl{opacity:.85}

header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);
  background:rgba(244,239,227,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:11px}
.brand-emblem{width:26px;height:30px;flex:none}
.brand .wm{display:flex;flex-direction:column;justify-content:center;line-height:1;font-family:"Jost",var(--sans);text-transform:uppercase}
.brand .wm small{font-size:.5rem;letter-spacing:.4em;font-weight:500;color:var(--gold);margin-bottom:3px}
.brand .wm b{font-size:1.18rem;letter-spacing:.24em;font-weight:400;color:inherit}
.menu{display:flex;gap:clamp(14px,2.4vw,32px);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.menu a{opacity:.66;transition:opacity .3s}.menu a:hover{opacity:1}.menu a.active{opacity:1;color:var(--gold)}
.cta{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--line);border-radius:99px;padding:10px 22px;transition:all .4s var(--ease);cursor:pointer;background:none;color:inherit;font-family:inherit}
.cta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media(max-width:760px){.menu{display:none}}

.art{max-width:1120px;margin:0 auto;padding:clamp(104px,15vh,140px) var(--pad) clamp(30px,5vh,60px)}
.back{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:inline-flex;gap:8px;margin-bottom:26px;transition:gap .3s}
.back:hover{gap:14px}
.cat{display:block;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.art h1{font-family:var(--serif);font-weight:320;font-size:clamp(2.1rem,5.2vw,3.4rem);line-height:1.05;letter-spacing:-.015em;margin:14px 0 16px}
.dek{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.05rem,2.2vw,1.35rem);color:var(--dim);line-height:1.5}
.byline{margin-top:20px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.lead{width:100%;aspect-ratio:16/8;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--paper2);margin:28px 0 8px}
.hr{height:30px;margin:30px 0;display:flex;justify-content:center}
.hr svg{height:100%}
.prose p{font-weight:300;font-size:1.04rem;line-height:1.8;color:#4a4030;margin:0 0 20px}
.prose h2{font-family:var(--serif);font-weight:350;font-size:clamp(1.35rem,3vw,1.8rem);margin:34px 0 12px;letter-spacing:-.01em}
.prose strong{font-weight:500;color:var(--ink)}
.prose .pull{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.3rem,3vw,1.7rem);line-height:1.4;color:var(--gold);border-left:2px solid var(--gold);padding-left:22px;margin:30px 0}
.prose ul{margin:0 0 20px;padding-left:20px;color:#4a4030;font-weight:300}
.prose li{margin-bottom:8px;line-height:1.7}
.cta-block{margin-top:44px;background:var(--sheet);border:1px solid var(--line);border-radius:16px;padding:clamp(26px,4vw,40px);text-align:center;box-shadow:0 30px 70px -50px rgba(70,55,35,.5)}
.cta-block h3{font-family:var(--serif);font-weight:340;font-size:clamp(1.3rem,3vw,1.9rem);margin-bottom:8px}
.cta-block p{color:var(--dim);font-size:.92rem;margin-bottom:20px}
.cta-block .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-block .btn{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line);border-radius:99px;padding:13px 26px;cursor:pointer;background:none;color:var(--ink);font-family:inherit;transition:all .35s var(--ease)}
.cta-block .btn:hover{border-color:var(--ink)}
.cta-block .btn.gold{background:var(--gold);border-color:var(--gold);color:#fff}
.cta-block .btn.gold:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(193,135,58,.3)}
.keep{margin-top:clamp(40px,6vh,64px)}
.keep .kh{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.keep .krow{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:640px){.keep .krow{grid-template-columns:1fr}}
.keep a{display:block;background:var(--sheet);border:1px solid var(--line);border-radius:12px;padding:20px;transition:transform .4s var(--ease)}
.keep a:hover{transform:translateY(-3px)}
.keep .kc{font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.keep h4{font-family:var(--serif);font-weight:350;font-size:1.12rem;line-height:1.2;margin-top:8px;transition:color .3s}
.keep a:hover h4{color:var(--gold)}
footer{margin-top:clamp(40px,7vh,72px);padding:26px var(--pad);display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);font-size:.72rem;letter-spacing:.06em;color:var(--dim)}
footer .fnav{display:flex;flex-wrap:wrap;gap:18px;text-transform:uppercase;letter-spacing:.16em;font-size:.64rem}
footer .fnav a{opacity:.7;transition:opacity .3s}footer .fnav a:hover{opacity:1}

/* ============================================================
   Elements the generated journal posts emit (admin.html → blog-build.js).
   The hand-written articles only ever used h2 / ul / p / .pull, so the rich
   text editor's full range — h3–h6, ordered lists, blockquotes, links, images,
   figures with captions — had nothing to style against.
   ============================================================ */
.prose h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,2.4vw,1.4rem);margin:28px 0 10px}
.prose h4{font-family:var(--serif);font-weight:500;font-size:1.1rem;margin:24px 0 8px}
.prose h5,.prose h6{font-weight:600;font-size:.98rem;margin:20px 0 8px;color:var(--ink)}
.prose ol{margin:0 0 20px;padding-left:22px;color:#4a4030;font-weight:300}
.prose em{font-style:italic}
.prose u{text-decoration:underline;text-underline-offset:2px}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{opacity:.75}
.prose blockquote{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.15rem,2.6vw,1.45rem);
  line-height:1.5;color:var(--gold);border-left:2px solid var(--gold);padding-left:22px;margin:30px 0}
.prose blockquote p{font-family:inherit;font-size:inherit;color:inherit;font-style:inherit;margin:0 0 8px}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{background:var(--sheet);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:.88em}
.prose hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.prose img{max-width:100%;height:auto;border-radius:12px;display:block;margin:26px 0}
.prose figure{margin:30px 0}
.prose figure img{margin:0}
.prose figcaption{font-size:.8rem;color:var(--dim);text-align:center;margin-top:10px;font-style:italic}

/* Cover image on a generated post (the hand-written ones use an inline SVG). */
.lead.cover{aspect-ratio:16/8.2;border-radius:14px;overflow:hidden;border:1px solid var(--line);margin:0 0 6px;padding:0}
.lead.cover img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;margin:0}
.lead.cover figcaption{font-size:.78rem;color:var(--dim);text-align:center;padding:8px 4px 0;font-style:italic}

/* ============================================================
   Wider editorial layout — the article used to be a 720px column
   stranded in empty space. Now .art is a wide canvas: the text sits
   at a comfortable reading measure, left-aligned, while the cover
   hero and the closing CTA + "keep reading" bands span the full
   width — everything sharing one left edge. Pure CSS, no HTML change,
   so it applies to both the generated and hand-built posts.
   ============================================================ */
.art .back,
.art .cat,
.art h1,
.art .dek,
.art .byline,
.art .hr,
.art .prose,
.art .tags{max-width:704px}
.art .hr{justify-content:flex-start}
/* hero + closing bands fill the canvas */
.art .lead,
.art .lead.cover{margin-top:34px;margin-bottom:12px}
.art .lead.cover{aspect-ratio:16/6.6}
.cta-block{margin-top:52px}
/* three related cards across the wider closing band */
.keep .krow{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.keep .krow{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.keep .krow{grid-template-columns:1fr}}

/* Tag links under the article body, and the tag archive pages. */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.tags a{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);border-radius:99px;padding:6px 14px;transition:all .3s var(--ease)}
.tags a:hover{color:var(--gold);border-color:var(--gold)}