/*
Theme Name: Munting Kwento
Theme URI: https://muntingkwento.com
Author: Munti
Description: Isang tahimik na tahanan ng mga alaala — custom WordPress theme na dinisenyo upang maramdaman ng bisita na parang bumubukas siya ng lumang kuwaderno sa isang tahimik na coffee shop. Gawa para sa MuntingKwento.com.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: munting-kwento
Tags: blog, custom-post-type, translation-ready, accessibility-ready
*/

/* =========================================================
   MUNTING KWENTO — DESIGN SYSTEM
   Signature: ang website ay parang isang buhay na journal.
   Ang scroll ay parang unti-unting binubuksan ang kuwaderno;
   ang hero title ay "isinusulat" gamit ang fountain pen stroke.
   ========================================================= */

:root{
  /* ---- Paper & Ink palette (hindi cream+terracotta na cliché) ---- */
  --paper:        #EDE6D3;   /* pangunahing papel — mainit na ivory, may dilaw */
  --paper-soft:   #F4EFE2;   /* mas magaan na papel, para sa cards */
  --paper-deep:   #E2D8BE;   /* mas madilim na papel, borders/creases */
  --ink:          #2B2620;   /* halos itim na tinta, hindi pure black */
  --ink-soft:     #5B5347;   /* pantulong na teksto */
  --pen-indigo:   #33415C;   /* fountain-pen blue-black — pangunahing accent */
  --pen-indigo-d: #232C3F;
  --moss:         #5B6B4E;   /* pangalawang accent — tag, divider, badge */
  --rust:         #8C4E33;   /* mahinang paggamit — warm highlight, hover */
  --gold:         #B08D46;   /* bookmark ribbon, stars, dulo ng detalye */
  --shadow-paper: 220 25% 12%;

  /* ---- Dark mode (lumang papel sa gabi, hindi purong itim) ---- */
  --paper-dk:      #211D18;
  --paper-soft-dk: #2A251E;
  --paper-deep-dk: #171410;
  --ink-dk:        #E9E1CE;
  --ink-soft-dk:   #B9AE97;
  --pen-indigo-dk: #8CA0C7;
  --gold-dk:       #D9B96B;

  /* ---- Type ---- */
  --font-hand:  'Caveat', cursive;                 /* fountain-pen writing */
  --font-serif: 'Lora', Georgia, serif;             /* katawan ng kwento */
  --font-sans:  'Work Sans', -apple-system, sans-serif; /* UI, meta, labels */

  --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --step-2: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --step-3: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  --step-4: clamp(3.25rem, 2.5rem + 3vw, 5.5rem);

  --radius-page: 3px;
  --radius-card: 2px;
  --ease-page: cubic-bezier(.22,.61,.36,1);
}

[data-theme="dark"]{
  --paper: var(--paper-dk);
  --paper-soft: var(--paper-soft-dk);
  --paper-deep: var(--paper-deep-dk);
  --ink: var(--ink-dk);
  --ink-soft: var(--ink-soft-dk);
  --pen-indigo: var(--pen-indigo-dk);
  --gold: var(--gold-dk);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-serif);
  font-size:var(--step-0);
  line-height:1.7;
  transition:background .4s var(--ease-page), color .4s var(--ease-page);
  overflow-x:hidden;
}

/* Paper grain — pinaka-magaan na texture layer sa ibabaw ng buong site */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:
    radial-gradient(circle at 20% 30%, transparent 0, transparent 2px, var(--ink) 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, transparent 0, transparent 2px, var(--ink) 2px, transparent 3px);
  background-size: 140px 140px, 180px 180px;
}

a{ color:var(--pen-indigo); text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family:var(--font-serif); font-weight:600; color:var(--ink); margin:0 0 .5em; }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper); padding:.75em 1.25em; z-index:9999; }
.skip-link:focus{ left:1rem; top:1rem; }
:focus-visible{ outline:2px solid var(--pen-indigo); outline-offset:3px; }

.container{ max-width:1160px; margin:0 auto; padding:0 1.5rem; position:relative; z-index:1; }
.eyebrow{ font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--moss); font-weight:600; }

/* ---- Hand-drawn underline (SVG stroke-draw animation) ---- */
.hand-underline{ position:relative; display:inline-block; }
.hand-underline svg{
  position:absolute; left:0; bottom:-0.28em; width:100%; height:.6em;
  overflow:visible;
}
.hand-underline svg path{
  fill:none; stroke:var(--rust); stroke-width:4; stroke-linecap:round;
  stroke-dasharray:400; stroke-dashoffset:400;
  animation: draw-underline 1.1s var(--ease-page) forwards;
  animation-delay:.9s;
}
@keyframes draw-underline{ to{ stroke-dashoffset:0; } }

/* ---- Site header ---- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--paper-deep);
}
.site-header .inner{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 0; }
.site-logo{ font-family:var(--font-hand); font-size:1.9rem; color:var(--ink); display:flex; align-items:center; gap:.5rem; }
.site-logo svg{ width:28px; height:28px; }
.primary-nav ul{ list-style:none; display:flex; gap:2rem; margin:0; padding:0; font-family:var(--font-sans); font-size:.92rem; }
.primary-nav a{ color:var(--ink-soft); position:relative; padding:.2rem 0; }
.primary-nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--rust);
  transition:width .3s var(--ease-page);
}
.primary-nav a:hover::after, .primary-nav a:focus::after{ width:100%; }
.mode-toggle{ background:none; border:1px solid var(--paper-deep); border-radius:99px; width:38px; height:38px; display:grid; place-items:center; cursor:pointer; color:var(--ink); }
.menu-toggle{ display:none; }

@media (max-width:800px){
  .primary-nav{ display:none; }
}

/* ---- Buttons: elegant hover, ink-fill sweep ---- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-sans); font-weight:600; font-size:.92rem;
  padding:.85rem 1.5rem; border-radius:var(--radius-card);
  border:1px solid var(--ink); color:var(--ink); background:transparent;
  overflow:hidden; cursor:pointer; z-index:0; transition:color .45s var(--ease-page);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--ink); z-index:-1;
  transform:translateY(101%); transition:transform .45s var(--ease-page);
}
.btn:hover, .btn:focus-visible{ color:var(--paper); }
.btn:hover::before, .btn:focus-visible::before{ transform:translateY(0); }
.btn.primary{ background:var(--ink); color:var(--paper); }
.btn.primary::before{ background:var(--rust); }

/* ---- Hero ---- */
.hero{ position:relative; padding:6.5rem 0 5rem; overflow:hidden; }
.hero-notebook{
  position:absolute; inset:0; z-index:-1; opacity:.55;
  background-image:
    linear-gradient(var(--paper-deep) 1px, transparent 1px);
  background-size: 100% 2.1em;
  background-position: 0 4.5rem;
  mask-image:linear-gradient(to bottom, transparent, black 12%, black 80%, transparent);
}
.hero-spiral{ position:absolute; left:0; top:0; bottom:0; width:46px; z-index:-1; }
.hero .container{ display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center; }
@media (max-width:900px){ .hero .container{ grid-template-columns:1fr; } }

.hero-title{
  font-family:var(--font-hand); font-size:var(--step-4); line-height:1.05; color:var(--ink);
  margin:0 0 .3em; position:relative;
}
.hero-title .ink-write{
  display:inline-block;
}
.hero-title svg text{
  font-family:var(--font-hand);
}
.hero-sub{
  font-family:var(--font-sans); font-size:1.1rem; color:var(--ink-soft); max-width:34ch; min-height:2.6em;
}
.typewriter-caret{ display:inline-block; width:2px; height:1em; background:var(--ink-soft); vertical-align:-2px; animation:blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }

.hero-art{ position:relative; }
.hero-art svg{ width:100%; height:auto; }
.hero-art .float-slow{ animation: float-y 6s ease-in-out infinite; }
.hero-art .float-slow.d2{ animation-delay:1.2s; }
@keyframes float-y{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

/* ---- floating particles (napakagaan) ---- */
.particles{ position:fixed; inset:0; pointer-events:none; z-index:1; }
.particles span{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:var(--paper-deep); opacity:.35;
  animation:drift linear infinite;
}
@keyframes drift{ from{ transform:translateY(110vh) translateX(0);} to{ transform:translateY(-10vh) translateX(20px);} }

/* ---- Section rhythm: iba't ibang laki, may overlap ---- */
section{ position:relative; padding:5rem 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:2.5rem; flex-wrap:wrap; }
.section-head h2{ font-size:var(--step-2); }

/* ---- Tampok na Kwento: parang bukas na journal spread ---- */
.featured-story{
  background:var(--paper-soft);
  border:1px solid var(--paper-deep);
  border-radius:var(--radius-page);
  padding:3rem; display:grid; grid-template-columns:1fr 1fr; gap:3rem;
  position:relative; box-shadow:0 30px 60px -30px hsl(var(--shadow-paper) / .35);
}
.featured-story::before{
  content:""; position:absolute; left:50%; top:2rem; bottom:2rem; width:1px;
  background:linear-gradient(to bottom, transparent, var(--paper-deep) 15%, var(--paper-deep) 85%, transparent);
}
@media (max-width:820px){ .featured-story{ grid-template-columns:1fr; padding:1.75rem; } .featured-story::before{ display:none; } }
.featured-story .ribbon{ position:absolute; top:-10px; left:2.5rem; width:26px; height:52px; background:var(--rust); clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%); }
.featured-story h3{ font-size:var(--step-2); }
.featured-story .excerpt{ color:var(--ink-soft); }

/* ---- Story cards: parang magkakapatong na pahina ---- */
.story-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
@media (max-width:900px){ .story-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .story-grid{ grid-template-columns:1fr; } }

.story-card{
  position:relative; background:var(--paper-soft); border:1px solid var(--paper-deep);
  border-radius:var(--radius-card); padding:1.75rem;
  transition:transform .4s var(--ease-page), box-shadow .4s var(--ease-page), rotate .4s var(--ease-page);
  box-shadow:0 2px 0 var(--paper-deep), 0 10px 24px -18px hsl(var(--shadow-paper) / .4);
}
.story-card::after{ /* stacked page peeking below */
  content:""; position:absolute; inset:6px -6px -8px 6px; z-index:-1;
  background:var(--paper-deep); border-radius:var(--radius-card); opacity:.6;
}
.story-card:hover, .story-card:focus-within{
  transform:translateY(-6px) rotate(-.6deg);
  box-shadow:0 24px 36px -22px hsl(var(--shadow-paper) / .5);
}
.story-card .meta{ font-family:var(--font-sans); font-size:.78rem; color:var(--moss); display:flex; gap:.75rem; margin-bottom:.6rem; text-transform:uppercase; letter-spacing:.06em; }
.story-card h3{ font-size:1.35rem; margin-bottom:.5rem; }
.story-card p{ color:var(--ink-soft); font-size:.95rem; }
.story-card .topic-tag{
  display:inline-block; margin-top:1rem; font-family:var(--font-sans); font-size:.72rem;
  padding:.25rem .65rem; border:1px solid var(--moss); color:var(--moss); border-radius:99px;
}

/* ---- Polaroid-style image sway ---- */
.polaroid{ background:#fff; padding:10px 10px 34px; box-shadow:0 14px 26px -16px hsl(var(--shadow-paper) / .5); transform:rotate(-2deg); transition:transform .4s var(--ease-page); }
.polaroid:hover{ transform:rotate(0deg) scale(1.02); }

/* ---- Munting Sipi (rotating quote) ---- */
.quote-strip{ background:var(--pen-indigo); color:var(--paper-soft); text-align:center; padding:4.5rem 0; }
.quote-strip blockquote{ font-family:var(--font-hand); font-size:var(--step-3); max-width:24ch; margin:0 auto; line-height:1.2; }
.quote-strip cite{ font-family:var(--font-sans); font-size:.8rem; opacity:.7; display:block; margin-top:1rem; font-style:normal; letter-spacing:.06em; }

/* ---- Topics index (parang aklat index) ---- */
.topics-index{ columns:2; column-gap:3rem; font-family:var(--font-sans); }
@media (max-width:620px){ .topics-index{ columns:1; } }
.topics-index a{ display:flex; justify-content:space-between; padding:.7rem 0; border-bottom:1px dotted var(--paper-deep); color:var(--ink); break-inside:avoid; }
.topics-index a span{ color:var(--moss); font-size:.85rem; }

/* ---- About / Tungkol kay Munti ---- */
.about-munti{ display:grid; grid-template-columns:.8fr 1.2fr; gap:3rem; align-items:center; }
@media (max-width:820px){ .about-munti{ grid-template-columns:1fr; } }
.about-munti p{ color:var(--ink-soft); }
.about-munti .signature{ font-family:var(--font-hand); font-size:2rem; color:var(--pen-indigo); margin-top:1rem; }

/* ---- Reading experience (single story) ---- */
.reading-progress{ position:fixed; top:0; left:0; height:3px; background:var(--rust); z-index:60; width:0%; }
.story-header{ max-width:70ch; margin:0 auto 2.5rem; text-align:center; }
.story-header .meta{ font-family:var(--font-sans); font-size:.85rem; color:var(--moss); display:flex; justify-content:center; gap:1rem; margin-bottom:1rem; }
.story-header h1{ font-size:var(--step-3); }
.story-toc{ font-family:var(--font-sans); font-size:.85rem; background:var(--paper-soft); border:1px solid var(--paper-deep); border-radius:var(--radius-card); padding:1.25rem 1.5rem; max-width:70ch; margin:0 auto 2.5rem; }
.story-toc summary{ cursor:pointer; font-weight:600; }
.story-body{ max-width:66ch; margin:0 auto; font-size:1.12rem; line-height:1.85; }
.story-body p:first-of-type::first-letter{
  font-family:var(--font-hand); font-size:4.2rem; float:left; line-height:.8; padding:.1em .12em 0 0; color:var(--pen-indigo);
}
.story-body blockquote{ font-family:var(--font-hand); font-size:1.6rem; color:var(--pen-indigo); border-left:3px solid var(--gold); padding-left:1.25rem; margin:2rem 0; }
.story-nav{ max-width:66ch; margin:3rem auto 0; display:flex; justify-content:space-between; font-family:var(--font-sans); font-size:.9rem; gap:1rem; }
.story-nav a{ display:block; padding:1rem; border:1px solid var(--paper-deep); border-radius:var(--radius-card); flex:1; }
.related-stories{ max-width:66ch; margin:3rem auto 0; }

/* ---- Comments: munting sulat sa gilid ---- */
.comments-area{ max-width:66ch; margin:3.5rem auto 0; }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-body{
  position:relative; background:var(--paper-soft); border:1px solid var(--paper-deep);
  border-radius:var(--radius-card); padding:1.5rem; margin-bottom:1.25rem;
}
.comment-body::before{ content:"\201C"; position:absolute; top:-6px; left:1rem; font-family:var(--font-hand); font-size:2.5rem; color:var(--paper-deep); }
.comment-author{ font-family:var(--font-sans); font-weight:600; font-size:.9rem; display:flex; align-items:center; gap:.5rem; }
.author-badge{ font-family:var(--font-sans); font-size:.65rem; background:var(--pen-indigo); color:var(--paper); padding:.15rem .5rem; border-radius:99px; letter-spacing:.04em; }
.comment-meta{ font-family:var(--font-sans); font-size:.75rem; color:var(--ink-soft); margin-bottom:.5rem; }
.children{ list-style:none; margin-left:2rem; padding:0; }

/* ---- Submission form ---- */
.story-form{ max-width:60ch; margin:0 auto; display:grid; gap:1.25rem; font-family:var(--font-sans); }
.story-form label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.4rem; }
.story-form input[type=text], .story-form input[type=email], .story-form select, .story-form textarea{
  width:100%; padding:.8rem 1rem; border:1px solid var(--paper-deep); background:var(--paper-soft);
  border-radius:var(--radius-card); font-family:var(--font-serif); color:var(--ink); font-size:1rem;
}
.story-form textarea{ min-height:220px; }
.form-note{ font-size:.82rem; color:var(--ink-soft); }

/* ---- Footer ---- */
.site-footer{ border-top:1px solid var(--paper-deep); padding:3rem 0; font-family:var(--font-sans); font-size:.85rem; color:var(--ink-soft); }
.site-footer .inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }

/* ---- Scroll reveal (parang unti-unting binubuksan ang journal) ---- */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-page), transform .8s var(--ease-page); }
[data-reveal].is-revealed{ opacity:1; transform:translateY(0); }
[data-reveal="fold"]{ transform-origin:top center; transform:translateY(20px) rotateX(6deg); }
[data-reveal="fold"].is-revealed{ transform:translateY(0) rotateX(0); }

/* ---- Mobile nav open state ---- */
@media (max-width:800px){
  .menu-toggle{ display:inline-flex; background:none; border:1px solid var(--paper-deep); border-radius:var(--radius-card); width:38px; height:38px; align-items:center; justify-content:center; }
  .primary-nav{ display:block; position:fixed; inset:64px 0 auto 0; background:var(--paper); border-bottom:1px solid var(--paper-deep); transform:translateY(-110%); transition:transform .35s var(--ease-page); }
  .primary-nav.is-open{ transform:translateY(0); }
  .primary-nav ul{ flex-direction:column; gap:0; padding:1rem 1.5rem 1.5rem; }
  .primary-nav li{ padding:.75rem 0; border-bottom:1px dotted var(--paper-deep); }
}

/* ---- Custom cursor (desktop lamang) ---- */
@media (hover:hover) and (pointer:fine){
  body.has-custom-cursor{ cursor:none; }
  .pen-cursor{ position:fixed; top:0; left:0; width:22px; height:22px; pointer-events:none; z-index:9999; transform:translate(-2px,-18px); mix-blend-mode:difference; }
}

/* =========================================================
   CINEMATIC JOURNAL PASS
   Iterative upgrade: mas may rhythm, lalim, at buhay ang umiiral
   na templates nang hindi binabago ang WordPress content flow.
   ========================================================= */

:root{
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 2rem;
  --step-3: 3.125rem;
  --step-4: 4.75rem;
  --desk-shadow: 0 42px 90px -54px hsl(var(--shadow-paper) / .72);
  --lift-shadow: 0 32px 70px -44px hsl(var(--shadow-paper) / .68);
  --paper-line: color-mix(in srgb, var(--paper-deep) 70%, transparent);
}

@media (max-width:900px){
  :root{
    --step-2: 1.75rem;
    --step-3: 2.45rem;
    --step-4: 3.45rem;
  }
}

body{
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--paper) 78%, white 22%), var(--paper) 42%, color-mix(in srgb, var(--paper-deep) 42%, var(--paper) 58%));
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.17;
  background:
    linear-gradient(90deg, transparent 0 9%, color-mix(in srgb, var(--gold) 18%, transparent) 9.2% 9.35%, transparent 9.6%),
    repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--ink) 6%, transparent) 32px);
  mask-image:linear-gradient(to bottom, black, transparent 78%);
}

.ambient-sketches{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

.sketch-line{
  position:absolute;
  width:120px;
  height:38px;
  border-bottom:1px solid color-mix(in srgb, var(--rust) 55%, transparent);
  border-radius:50%;
  opacity:.28;
}

.sketch-line-one{ right:8vw; top:22vh; transform:rotate(-11deg); }
.sketch-line-two{ left:7vw; bottom:18vh; transform:rotate(9deg); }
.sketch-dot{
  position:absolute;
  right:18vw;
  bottom:28vh;
  width:8px;
  height:8px;
  border:1px solid color-mix(in srgb, var(--moss) 60%, transparent);
  transform:rotate(12deg);
  opacity:.32;
}

.site-header{
  box-shadow:0 18px 48px -42px hsl(var(--shadow-paper) / .75);
}

.site-logo{
  letter-spacing:0;
  text-shadow:0 1px 0 color-mix(in srgb, white 25%, transparent);
}

.mode-toggle,
.menu-toggle{
  transition:transform .35s var(--ease-page), box-shadow .35s var(--ease-page), background .35s var(--ease-page);
}

.mode-toggle:hover,
.menu-toggle:hover{
  transform:translateY(-2px) rotate(-3deg);
  background:var(--paper-soft);
  box-shadow:0 14px 30px -24px hsl(var(--shadow-paper) / .7);
}

.btn{
  box-shadow:0 10px 26px -24px hsl(var(--shadow-paper) / .85);
}

.btn .btn-icon{
  width:22px;
  height:22px;
  transition:transform .4s var(--ease-page);
}

.btn:hover .btn-icon,
.btn:focus-visible .btn-icon{
  transform:translateX(2px) rotate(-8deg);
}

.btn.is-inked{
  box-shadow:0 18px 38px -28px hsl(var(--shadow-paper) / .9);
}

.btn.is-inked::after{
  content:"";
  position:absolute;
  left:1rem;
  right:1rem;
  bottom:.48rem;
  height:1px;
  background:currentColor;
  opacity:.38;
  transform:scaleX(1);
  transform-origin:left;
  animation:ink-line .5s var(--ease-page);
}

@keyframes ink-line{
  from{ transform:scaleX(0); opacity:0; }
  to{ transform:scaleX(1); opacity:.38; }
}

.cinematic-hero{
  min-height:calc(100vh - 72px);
  display:grid;
  align-items:center;
  padding:5.25rem 0 6.5rem;
  isolation:isolate;
}

.hero-light{
  position:absolute;
  inset:-12% -8% 12% -8%;
  z-index:-2;
  pointer-events:none;
  opacity:.74;
  background:
    radial-gradient(ellipse at 74% 20%, color-mix(in srgb, var(--gold) 27%, transparent), transparent 36%),
    radial-gradient(ellipse at 22% 18%, color-mix(in srgb, white 38%, transparent), transparent 32%);
}

.hero-desk{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}

.desk-paper{
  position:absolute;
  display:block;
  background:color-mix(in srgb, var(--paper-soft) 82%, white 18%);
  border:1px solid var(--paper-deep);
  box-shadow:var(--desk-shadow);
}

.desk-paper::before{
  content:"";
  position:absolute;
  inset:18px 22px;
  background:repeating-linear-gradient(0deg, transparent 0 25px, var(--paper-line) 26px);
  opacity:.48;
}

.desk-paper-one{
  width:280px;
  height:360px;
  right:-74px;
  top:16%;
  transform:rotate(8deg);
}

.desk-paper-two{
  width:230px;
  height:290px;
  left:-68px;
  bottom:7%;
  transform:rotate(-10deg);
}

.desk-tape{
  position:absolute;
  width:92px;
  height:28px;
  right:21%;
  top:13%;
  background:color-mix(in srgb, var(--gold) 24%, white 76%);
  border:1px solid color-mix(in srgb, var(--gold) 36%, transparent);
  opacity:.62;
  transform:rotate(-13deg);
  box-shadow:0 8px 20px -18px hsl(var(--shadow-paper) / .8);
}

.coffee-ring{
  position:absolute;
  width:118px;
  height:118px;
  left:12%;
  top:28%;
  border:7px double color-mix(in srgb, var(--rust) 24%, transparent);
  border-radius:50%;
  opacity:.24;
  transform:rotate(18deg);
}

.hero .container{
  grid-template-columns:minmax(0,1.04fr) minmax(300px,.96fr);
  gap:4.25rem;
}

.hero-copy{
  max-width:680px;
}

.hero-title{
  max-width:9.5ch;
  text-wrap:balance;
  filter:drop-shadow(0 16px 28px hsl(var(--shadow-paper) / .13));
}

.hero-sub{
  max-width:42ch;
  padding-left:1rem;
  border-left:2px solid color-mix(in srgb, var(--gold) 58%, transparent);
}

.journal-stack{
  position:relative;
  min-height:540px;
  transform-style:preserve-3d;
  perspective:1000px;
}

.journal-page{
  position:absolute;
  background:var(--paper-soft);
  border:1px solid var(--paper-deep);
  box-shadow:var(--desk-shadow);
  color:var(--pen-indigo);
  overflow:hidden;
}

.journal-page::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--paper-deep) 50%, transparent), transparent 18%),
    repeating-linear-gradient(0deg, transparent 0 30px, var(--paper-line) 31px);
  opacity:.42;
}

.journal-page svg{
  position:relative;
  z-index:1;
}

.page-back{
  width:62%;
  height:66%;
  right:11%;
  top:2%;
  transform:rotate(9deg) translateZ(-42px);
  opacity:.72;
}

.page-back .icon{
  width:42%;
  margin:25% auto;
}

.page-middle{
  width:72%;
  height:76%;
  right:6%;
  top:10%;
  transform:rotate(-5deg) translateZ(-18px);
}

.page-middle .icon{
  width:44%;
  margin:28% auto 0;
  opacity:.64;
}

.page-front{
  width:76%;
  min-height:460px;
  right:15%;
  top:8%;
  padding:2.6rem;
  transform:rotate(2.5deg) translateZ(18px);
}

.page-front > svg{
  width:100%;
  margin-top:2rem;
}

.bookmark-ribbon{
  position:absolute;
  right:2.2rem;
  top:-1px;
  z-index:2;
  width:28px;
  height:116px;
  background:linear-gradient(var(--rust), color-mix(in srgb, var(--rust) 68%, var(--gold)));
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);
  animation:bookmark-breathe 4.8s ease-in-out infinite;
}

.paper-clip{
  position:absolute;
  right:2.1rem;
  top:1.6rem;
  z-index:3;
  width:26px;
  height:58px;
  border:2px solid color-mix(in srgb, var(--pen-indigo) 70%, white 30%);
  border-left-width:1px;
  border-radius:16px;
  transform:rotate(10deg);
  opacity:.72;
}

@keyframes bookmark-breathe{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(9px); }
}

section{
  padding:5.75rem 0;
}

.section-featured{
  margin-top:-2.8rem;
  padding-top:7rem;
}

.section-latest{
  padding-top:6.5rem;
}

.section-latest .container{
  max-width:1240px;
}

.section-topics{
  padding-top:3.5rem;
}

.section-about{
  padding-bottom:7rem;
}

.chapter-kicker{
  width:100%;
  margin:0 0 .25rem;
  font-family:var(--font-hand);
  font-size:1.55rem;
  color:var(--rust);
}

.section-head a{
  font-family:var(--font-sans);
  font-weight:600;
  border-bottom:1px solid currentColor;
  transition:color .3s var(--ease-page), transform .3s var(--ease-page);
}

.section-head a:hover,
.section-head a:focus-visible{
  color:var(--rust);
  transform:translateX(4px);
}

.featured-story{
  overflow:hidden;
  transform:rotate(-.45deg);
}

.featured-story::after{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid color-mix(in srgb, var(--gold) 20%, transparent);
  pointer-events:none;
}

.featured-story > div:not(.ribbon){
  position:relative;
  z-index:1;
}

.featured-story h3 a,
.story-card h3 a{
  color:var(--ink);
  background-image:linear-gradient(color-mix(in srgb, var(--rust) 55%, transparent), color-mix(in srgb, var(--rust) 55%, transparent));
  background-size:0 2px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .45s var(--ease-page), color .3s var(--ease-page);
}

.featured-story h3 a:hover,
.story-card h3 a:hover,
.featured-story h3 a:focus-visible,
.story-card h3 a:focus-visible{
  color:var(--pen-indigo);
  background-size:100% 2px;
}

.story-grid{
  align-items:start;
}

.story-card{
  min-height:250px;
  overflow:hidden;
  transform:rotate(var(--card-tilt, 0deg));
}

.story-card:nth-child(3n+1){ --card-tilt:-1.1deg; margin-top:1.4rem; }
.story-card:nth-child(3n+2){ --card-tilt:.85deg; }
.story-card:nth-child(3n){ --card-tilt:-.35deg; margin-top:3.2rem; }

.story-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(110deg, color-mix(in srgb, white 34%, transparent), transparent 35%),
    repeating-linear-gradient(0deg, transparent 0 28px, var(--paper-line) 29px);
  opacity:.34;
  pointer-events:none;
}

.paper-corner{
  position:absolute;
  right:-1px;
  top:-1px;
  width:44px;
  height:44px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--paper-deep) 82%, white 18%) 0 50%, transparent 51%);
  box-shadow:-7px 7px 18px -18px hsl(var(--shadow-paper) / .9);
  opacity:.86;
}

.card-thread{
  position:absolute;
  left:1.2rem;
  right:1.2rem;
  bottom:1rem;
  height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--rust) 34%, transparent), transparent);
  transform:rotate(-1deg);
}

.story-card > *{
  position:relative;
  z-index:1;
}

.story-card:hover,
.story-card:focus-within{
  transform:translateY(-9px) rotate(calc(var(--card-tilt, 0deg) * -1));
}

.polaroid{
  border:1px solid color-mix(in srgb, var(--paper-deep) 72%, white 28%);
}

.cinematic-quote{
  margin:2rem 0;
  background:
    linear-gradient(120deg, var(--pen-indigo-d), var(--pen-indigo) 58%, color-mix(in srgb, var(--moss) 36%, var(--pen-indigo)));
  box-shadow:inset 0 1px 0 color-mix(in srgb, white 16%, transparent), inset 0 -1px 0 color-mix(in srgb, black 18%, transparent);
  overflow:hidden;
}

.cinematic-quote::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 44px, color-mix(in srgb, white 5%, transparent) 45px),
    linear-gradient(180deg, color-mix(in srgb, white 12%, transparent), transparent 30%, color-mix(in srgb, black 10%, transparent));
  opacity:.45;
}

.quote-pin{
  position:absolute;
  left:50%;
  top:-17px;
  width:36px;
  height:36px;
  border-radius:50%;
  transform:translateX(-50%);
  background:var(--gold);
  border:1px solid color-mix(in srgb, white 34%, var(--gold));
  box-shadow:0 12px 24px -18px hsl(var(--shadow-paper) / .9);
}

.quote-strip blockquote{
  position:relative;
  z-index:1;
  text-shadow:0 16px 34px color-mix(in srgb, black 20%, transparent);
}

.topics-index{
  padding:2rem 2.4rem;
  background:color-mix(in srgb, var(--paper-soft) 80%, white 20%);
  border:1px solid var(--paper-deep);
  box-shadow:var(--lift-shadow);
  transform:rotate(.35deg);
}

.topics-index a{
  position:relative;
  transition:padding .3s var(--ease-page), color .3s var(--ease-page);
}

.topics-index a::before{
  content:"";
  width:0;
  height:1px;
  background:var(--rust);
  position:absolute;
  left:0;
  bottom:.58rem;
  transition:width .35s var(--ease-page);
}

.topics-index a:hover,
.topics-index a:focus-visible{
  color:var(--rust);
  padding-left:.55rem;
}

.topics-index a:hover::before,
.topics-index a:focus-visible::before{
  width:2rem;
}

.about-munti{
  background:color-mix(in srgb, var(--paper-soft) 70%, transparent);
  border:1px solid var(--paper-deep);
  padding:3rem;
  box-shadow:var(--lift-shadow);
}

.about-illustration{
  position:relative;
  min-height:280px;
  display:grid;
  place-items:center;
}

.about-illustration svg{
  position:relative;
  z-index:1;
  width:min(260px,70%);
  filter:drop-shadow(0 26px 30px hsl(var(--shadow-paper) / .18));
}

.lamp-glow{
  position:absolute;
  inset:12% 6%;
  background:radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 62%);
  opacity:.7;
  animation:lamp-flicker 5.8s ease-in-out infinite;
}

@keyframes lamp-flicker{
  0%,100%{ opacity:.58; transform:scale(1); }
  45%{ opacity:.78; transform:scale(1.03); }
  55%{ opacity:.62; transform:scale(.99); }
}

.reading-shell{
  padding-top:4.5rem;
}

.reading-shell::before{
  content:"";
  position:absolute;
  left:50%;
  top:2.5rem;
  bottom:-1.5rem;
  width:min(900px, calc(100% - 2rem));
  transform:translateX(-50%) rotate(-.18deg);
  z-index:-1;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--paper-deep) 28%, transparent), transparent 9%, transparent 91%, color-mix(in srgb, var(--paper-deep) 22%, transparent)),
    color-mix(in srgb, var(--paper-soft) 86%, white 14%);
  border:1px solid var(--paper-deep);
  box-shadow:var(--desk-shadow);
}

.story-header{
  position:relative;
}

.chapter-mark{
  display:inline-block;
  margin-bottom:.75rem;
  font-family:var(--font-hand);
  font-size:1.6rem;
  color:var(--rust);
  transform:rotate(-3deg);
}

.story-layout{
  position:relative;
  max-width:980px;
  margin:0 auto;
}

.reading-aside{
  position:absolute;
  left:0;
  top:2rem;
  width:120px;
  display:grid;
  gap:.75rem;
  justify-items:center;
  color:color-mix(in srgb, var(--moss) 70%, transparent);
  font-family:var(--font-hand);
  font-size:1.2rem;
  transform:rotate(-7deg);
}

.reading-aside .icon{
  width:44px;
  height:44px;
}

.story-body{
  position:relative;
  padding:0 1rem 3.5rem;
}

.story-body::before{
  content:"";
  position:absolute;
  left:-1rem;
  top:0;
  bottom:0;
  width:1px;
  background:linear-gradient(transparent, color-mix(in srgb, var(--gold) 42%, transparent), transparent);
}

.story-body h2,
.story-body h3{
  margin-top:2.25em;
  text-wrap:balance;
}

.story-body p{
  margin:0 0 1.45em;
}

.story-body blockquote{
  position:relative;
  background:color-mix(in srgb, var(--paper-soft) 60%, transparent);
  padding:1.25rem 1.5rem 1.25rem 1.8rem;
  box-shadow:0 18px 36px -32px hsl(var(--shadow-paper) / .6);
  transform:rotate(-.35deg);
}

.story-toc{
  box-shadow:0 18px 40px -34px hsl(var(--shadow-paper) / .68);
}

.chapter-nav a{
  background:color-mix(in srgb, var(--paper-soft) 78%, white 22%);
  box-shadow:0 16px 34px -30px hsl(var(--shadow-paper) / .75);
  transition:transform .35s var(--ease-page), box-shadow .35s var(--ease-page), border-color .35s var(--ease-page);
}

.chapter-nav a:hover,
.chapter-nav a:focus-visible{
  transform:translateY(-4px) rotate(-.45deg);
  border-color:color-mix(in srgb, var(--rust) 44%, var(--paper-deep));
  box-shadow:0 26px 54px -38px hsl(var(--shadow-paper) / .85);
}

.comments-area{
  position:relative;
  padding:2rem;
  background:color-mix(in srgb, var(--paper-soft) 58%, transparent);
  border:1px solid var(--paper-deep);
  box-shadow:var(--lift-shadow);
}

.comment-body{
  transform:rotate(var(--comment-tilt, -.25deg));
  box-shadow:0 14px 32px -28px hsl(var(--shadow-paper) / .76);
}

.comment-list > li:nth-child(even) .comment-body{ --comment-tilt:.35deg; }

.comment-reply-link{
  font-family:var(--font-sans);
  font-size:.8rem;
  font-weight:600;
  border-bottom:1px solid currentColor;
}

.comment-form textarea,
.comment-form input:not([type=submit]){
  width:100%;
  border:1px solid var(--paper-deep);
  background:var(--paper-soft);
  color:var(--ink);
  font-family:var(--font-serif);
  padding:.85rem 1rem;
}

@media (max-width:1000px){
  .reading-aside{ display:none; }
}

@media (max-width:900px){
  .cinematic-hero{
    min-height:auto;
    padding-top:4rem;
  }

  .hero .container{
    grid-template-columns:1fr;
    gap:2.5rem;
  }

  .journal-stack{
    min-height:420px;
    max-width:520px;
    margin:0 auto;
  }

  .page-front{
    right:9%;
    min-height:360px;
  }

  .desk-paper-one{ right:-160px; }
  .desk-paper-two{ left:-170px; }
}

@media (max-width:620px){
  .hero-actions .btn{
    width:100%;
    justify-content:center;
  }

  .story-card:nth-child(n){
    margin-top:0;
  }

  .featured-story,
  .topics-index,
  .about-munti{
    transform:none;
  }

  .about-munti,
  .comments-area{
    padding:1.5rem;
  }

  .reading-shell::before{
    width:calc(100% - 1rem);
  }
}