/*
Theme Name: Munting Kwento
Theme URI: https://muntingkwento.com
Author: Munti
Description: Isang tahimik na tahanan ng mga salaysay — custom WordPress theme para sa MuntingKwento.com. Idinisenyo upang maramdaman ng bisita na parang binubuksan niya ang isang lumang kuwaderno, hindi isang blog.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: muntingkwento
*/

/* =========================================================
   0. DESIGN TOKENS
   -----------------------------------------------------------
   Palette — sepia ink kuwaderno, hindi flat minimalist:
   --paper        #FAF5E9  pangunahing background (papel)
   --paper-warm   #F3ECDA  panel / page-turn background
   --paper-deep   #EADFC4  hairline, spiral rings, dog-ear shadow
   --ink-soft     #7A6E5C  pangalawahing text, meta, warm gray-brown
   --ink          #2C2419  pangunahing text — "tinta"
   --sepia        #7A3B2E  accent ink — links, ribbon, stamps (hindi terracotta-clay)
   --brass        #A6813F  gold/brass — washi tape, seal, star
   --moss         #5B6B4F  pangatlong accent, napaka-konti lang gamit
   Type:
   Display   — "Fraunces"       (mainit na serif, may italics na parang guhit)
   Handwrite — "Caveat"         (sulat-kamay — annotations, tala sa gilid)
   Typewriter— "Special Elite"  (petsa, numero, eyebrow — parang lumang makinilya)
   Body      — "Lora"           (komportable basahin nang mahaba)
   UI        — "Inter"          (mga form field lamang, para sa clarity)
   Signature: animated fountain-pen underline sa ilalim ng bawat pangunahing
   pamagat; "bookmark ribbon" na dog-ear sa tampok na kwento; custom cursor
   na parang munting fountain-pen nib; page-turn scroll reveal.
   ========================================================= */

:root{
  --paper:#FAF5E9;
  --paper-warm:#F3ECDA;
  --paper-deep:#EADFC4;
  --ink-soft:#7A6E5C;
  --ink:#2C2419;
  --sepia:#7A3B2E;
  --sepia-soft: rgba(122,59,46,0.10);
  --brass:#A6813F;
  --moss:#5B6B4F;

  --font-display: "Fraunces", "Georgia", serif;
  --font-hand: "Caveat", cursive;
  --font-type: "Special Elite", "Courier New", monospace;
  --font-body: "Lora", "Georgia", serif;
  --font-ui: "Inter", -apple-system, sans-serif;

  --max-w: 43rem;
  --max-w-wide: 68rem;
  --radius-soft: 2px;
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-page: cubic-bezier(.16,.84,.3,1);
}

/* =========================================================
   1. RESET & BASE + PAPER TEXTURE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
  .reveal{opacity:1 !important;transform:none !important;}
  #mk-cursor,#mk-cursor-ring{display:none !important;}
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* pinong grain ng papel — SVG fractal noise, sobrang subtle */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:2000;
  opacity:0.035;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* napakapaladang ink stains, dalawa lang, sa pundo ng page */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 340px 220px at 8% 6%, rgba(122,59,46,0.035), transparent 60%),
    radial-gradient(ellipse 300px 260px at 95% 85%, rgba(91,107,79,0.03), transparent 60%);
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--sepia);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--ink);}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.2;
  color:var(--ink);
  margin:0 0 0.6em;
  letter-spacing:-0.01em;
}
h1 em, h2 em, .hero h1 .accent{font-style:italic;color:var(--sepia);font-weight:500;}
p{margin:0 0 1.4em;}
ul{padding-left:1.2em;}
button, input, textarea, select{font-family:inherit;}
:focus-visible{outline:2px solid var(--sepia);outline-offset:3px;}
.container{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;position:relative;z-index:1;}
.container-wide{max-width:var(--max-w-wide);margin:0 auto;padding:0 1.5rem;position:relative;z-index:1;}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);
  padding:0.75em 1.2em;z-index:9999;
}
.skip-link:focus{left:1rem;top:1rem;}

/* =========================================================
   2. CUSTOM CURSOR (fountain pen) — desktop lamang
   ========================================================= */
@media (hover:hover) and (pointer:fine){
  .mk-journal{cursor:none;}
  #mk-cursor{
    position:fixed;top:0;left:0;width:26px;height:26px;
    pointer-events:none;z-index:9998;
    transform:translate(-2px,-22px) rotate(-45deg);
    color:var(--sepia);
    opacity:0;transition:opacity 0.25s var(--ease);
    will-change:transform;
  }
  #mk-cursor.is-visible{opacity:0.9;}
  #mk-cursor svg{width:100%;height:100%;filter:drop-shadow(0 1px 1px rgba(44,36,25,0.25));}
  #mk-cursor-ring{
    position:fixed;top:0;left:0;width:6px;height:6px;border-radius:50%;
    background:var(--sepia);pointer-events:none;z-index:9997;opacity:0;
    transform:translate(-3px,-3px);transition:opacity 0.3s var(--ease), transform 0.15s var(--ease);
  }
  a:hover ~ #mk-cursor-ring,
  button:hover ~ #mk-cursor-ring{opacity:0.5;}
  a, button, .btn, input, textarea, select, .comment-reply-link{cursor:none;}
}

/* =========================================================
   3. SCROLL REVEAL — parang unti-unting lumilitaw na pahina
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.9s var(--ease-page), transform 0.9s var(--ease-page);
}
.reveal.in-view{opacity:1;transform:translateY(0);}
.reveal-1.in-view{transition-delay:0.06s;}
.reveal-2.in-view{transition-delay:0.14s;}
.reveal-3.in-view{transition-delay:0.22s;}

/* =========================================================
   4. TYPOGRAPHY COMPONENTS
   ========================================================= */
.eyebrow{
  font-family:var(--font-type);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:0.5em;
}
.hairline{
  border:none;border-top:1px solid var(--paper-deep);margin:2.5rem 0;
}
.kwento-number{
  font-family:var(--font-type);
  font-size:0.74rem;
  color:var(--ink-soft);
  letter-spacing:0.02em;
}

/* pen-drawn animated underline — SVG path, isinasagawa via JS (.draw-in) */
.pen-underline{display:block;width:120px;height:12px;color:var(--sepia);margin:0.5rem auto 0;}
.pen-underline path{
  stroke-dasharray:200;stroke-dashoffset:200;
  transition:stroke-dashoffset 1.1s var(--ease-page);
}
.reveal.in-view .pen-underline path,
.hero .pen-underline.draw-now path{stroke-dashoffset:0;}

/* animated hand-drawn underline sa mga link/heading na piniling bigyang-diin */
.ink-link{
  position:relative;text-decoration:none;color:inherit;
}
.ink-link::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--sepia);transition:right 0.3s var(--ease-page);
}
.ink-link:hover::after{right:0;}

/* drop cap sa unang talata ng kwento */
.story-body > p:first-of-type::first-letter{
  font-family:var(--font-display);
  font-weight:600;
  font-size:4.2em;
  float:left;
  line-height:0.82;
  padding:0.06em 0.1em 0 0;
  color:var(--sepia);
}

/* mga munting sulat-kamay na tala (annotation) */
.hand-note{
  font-family:var(--font-hand);
  font-size:1.35rem;
  color:var(--sepia);
  line-height:1.1;
  transform:rotate(-2deg);
  display:inline-block;
}

/* =========================================================
   5. HEADER
   ========================================================= */
.site-header{
  padding:2rem 0 1.5rem;
  border-bottom:1px solid var(--paper-deep);
  position:relative;
  background:var(--paper);
  z-index:50;
}
.site-header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  max-width:var(--max-w-wide);margin:0 auto;padding:0 1.5rem;
}
.site-title-wrap{display:flex;align-items:center;gap:0.7rem;}
.site-title-wrap .mk-icon{width:26px;height:26px;color:var(--sepia);flex:none;}
.site-title{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:600;
  margin:0;
  letter-spacing:0.01em;
}
.site-title a{color:var(--ink);text-decoration:none;}
.site-tagline{
  font-family:var(--font-hand);
  font-size:1.15rem;
  color:var(--ink-soft);
  margin-top:-0.1rem;
  transform:rotate(-1deg);
}
.primary-nav ul{
  list-style:none;display:flex;gap:1.8rem;margin:0;padding:0;
}
.primary-nav a{
  font-family:var(--font-type);
  font-size:0.82rem;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.primary-nav a:hover{border-color:var(--sepia);color:var(--sepia);}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:0.4rem;color:var(--ink);}
.menu-toggle svg{width:22px;height:22px;}

@media (max-width:720px){
  .primary-nav{
    display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);
    border-bottom:1px solid var(--paper-deep);padding:1rem 1.5rem;
    box-shadow:0 8px 16px rgba(44,36,25,0.06);
  }
  .primary-nav.is-open{display:block;}
  .primary-nav ul{flex-direction:column;gap:1rem;}
  .menu-toggle{display:block;}
  .site-header{position:relative;}
}

/* reading progress bar — para lamang sa single story */
.reading-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:var(--sepia);z-index:9999;
  transition:width 0.1s linear;
}

/* =========================================================
   6. BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:0.55em;
  font-family:var(--font-type);
  font-size:0.82rem;
  letter-spacing:0.01em;
  padding:0.8em 1.5em;
  border-radius:var(--radius-soft);
  border:1px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  text-decoration:none;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  z-index:1;
  transition:color 0.35s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.btn svg{width:16px;height:16px;flex:none;position:relative;z-index:1;}
.btn span, .btn{position:relative;}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateX(-101%);transition:transform 0.35s var(--ease-page);z-index:-1;
}
.btn:hover::before{transform:translateX(0);}
.btn:hover{color:var(--paper);}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--sepia);border-color:var(--sepia);color:var(--paper);}
.btn-primary::before{background:var(--ink);}
.btn-primary:hover{border-color:var(--ink);}
.btn-ghost{border-color:var(--paper-deep);color:var(--ink-soft);}
.btn-ghost::before{background:var(--paper-deep);}
.btn-ghost:hover{color:var(--ink);}
.btn-row{display:flex;flex-wrap:wrap;gap:0.9rem;}

/* =========================================================
   7. HERO — magazine cover ng isang journal
   ========================================================= */
.hero{
  padding:4.5rem 0 3rem;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero-scene{position:relative;max-width:var(--max-w-wide);margin:0 auto;}
.hero-mark{width:52px;height:52px;margin:0 auto 1.2rem;color:var(--sepia);}
.hero-decor{
  position:absolute;color:var(--ink-soft);opacity:0.5;pointer-events:none;
}
.hero-decor.d-clip{top:-6px;left:6%;width:40px;height:40px;transform:rotate(-18deg);color:var(--brass);opacity:0.75;}
.hero-decor.d-leaves{bottom:6%;left:2%;width:56px;height:56px;transform:rotate(-8deg);color:var(--moss);opacity:0.55;}
.hero-decor.d-stars{top:8%;right:6%;width:44px;height:44px;color:var(--brass);opacity:0.7;}
.hero-decor.d-coffee{bottom:0;right:4%;width:48px;height:48px;color:var(--ink-soft);opacity:0.5;}
@media (max-width:800px){.hero-decor{display:none;}}

.hero h1{
  font-size:clamp(2.3rem, 6vw, 3.6rem);
  margin-bottom:0.3rem;
}
.hero .type-caret{display:inline-block;width:2px;background:var(--sepia);margin-left:2px;animation:mk-blink 1s steps(1) infinite;vertical-align:-0.1em;}
@keyframes mk-blink{50%{opacity:0;}}
.hero p.hero-lede{
  max-width:36rem;margin:1.4rem auto 2.2rem;
  color:var(--ink-soft);
  font-size:1.08rem;
  min-height:3.2em;
}
.hero .btn-row{justify-content:center;}

/* =========================================================
   8. FEATURED STORY — bukas na journal, dog-ear + bookmark ribbon
   ========================================================= */
.featured{
  background:var(--paper-warm);
  border:1px solid var(--paper-deep);
  border-radius:var(--radius-soft);
  padding:3.2rem 3rem;
  position:relative;
  overflow:hidden;
  margin:3rem auto;
  max-width:var(--max-w-wide);
  box-shadow:0 22px 40px -28px rgba(44,36,25,0.35), 0 2px 0 var(--paper-deep);
  transition:transform 0.4s var(--ease-page), box-shadow 0.4s var(--ease-page);
}
.featured:hover{transform:translateY(-3px);}
.featured::before{
  content:"";position:absolute;top:0;right:0;
  width:0;height:0;
  border-style:solid;
  border-width:0 36px 36px 0;
  border-color:transparent var(--paper) transparent transparent;
  filter:drop-shadow(-2px 2px 2px rgba(44,36,25,0.12));
}
.featured .mk-ribbon{
  position:absolute;top:-8px;left:2.6rem;width:30px;height:52px;color:var(--sepia);
  filter:drop-shadow(0 4px 4px rgba(44,36,25,0.2));
}
.featured .eyebrow{margin-bottom:0.8rem;}
.featured h2{font-size:clamp(1.6rem,3.4vw,2.3rem);}
.featured .excerpt{color:var(--ink-soft);max-width:42rem;}
.featured .meta{margin-top:1.2rem;}
@media (max-width:640px){.featured{padding:2.2rem 1.6rem;}}

/* =========================================================
   9. STORY LIST / ARCHIVE ROWS
   ========================================================= */
.story-list{max-width:var(--max-w-wide);margin:0 auto;}
.story-row{
  display:grid;grid-template-columns:5rem 1fr auto;gap:1.6rem;align-items:start;
  padding:2rem 1.2rem;
  border-bottom:1px solid var(--paper-deep);
  border-radius:var(--radius-soft);
  transition:transform 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
  position:relative;
}
.story-row:first-child{padding-top:1.2rem;}
.story-row:hover{
  background:var(--paper-warm);
  transform:translateY(-2px) rotate(-0.25deg);
  box-shadow:0 14px 26px -20px rgba(44,36,25,0.35);
}
.story-row .kwento-number{padding-top:0.35rem;}
.story-row h3{font-size:1.35rem;margin-bottom:0.4rem;}
.story-row h3 a{color:var(--ink);text-decoration:none;}
.story-row h3 a:hover{color:var(--sepia);}
.story-row .excerpt{color:var(--ink-soft);margin-bottom:0.6rem;font-size:0.98rem;}
.story-row .meta{
  font-family:var(--font-type);font-size:0.74rem;color:var(--ink-soft);
  display:flex;gap:0.9rem;flex-wrap:wrap;letter-spacing:0.01em;
}
.story-row .meta .topic{color:var(--sepia);}
.story-row .continue{
  font-family:var(--font-type);font-size:0.8rem;white-space:nowrap;align-self:end;
  text-decoration:none;border-bottom:1px solid var(--paper-deep);color:var(--ink);
}
.story-row .continue:hover{border-color:var(--sepia);color:var(--sepia);}
@media (max-width:640px){
  .story-row{grid-template-columns:1fr;}
  .story-row .continue{justify-self:start;}
}

/* =========================================================
   10. TOPICS — parang index ng lumang libro
   ========================================================= */
.topics-cloud{display:flex;flex-wrap:wrap;gap:0.7rem;justify-content:center;max-width:var(--max-w-wide);margin:0 auto;}
.topic-chip{
  font-family:var(--font-type);font-size:0.78rem;color:var(--ink);
  border:1px solid var(--paper-deep);padding:0.6em 1.15em;border-radius:999px;
  text-decoration:none;transition:all 0.25s var(--ease);background:var(--paper);
}
.topic-chip:hover{border-color:var(--sepia);color:var(--sepia);transform:translateY(-2px);background:var(--paper-warm);}

/* =========================================================
   11. MUNTING SIPI — parang pinunit na pahina na may quote
   ========================================================= */
.munting-sipi{
  text-align:center;padding:5rem 1.5rem;background:var(--paper-warm);
  border-top:1px solid var(--paper-deep);border-bottom:1px solid var(--paper-deep);
  position:relative;
}
.munting-sipi .mk-icon.quote-icon{width:34px;height:34px;color:var(--brass);margin:0 auto 1rem;opacity:0.8;}
.munting-sipi blockquote{
  font-family:var(--font-display);font-size:clamp(1.35rem,3vw,2.1rem);
  max-width:40rem;margin:0 auto;color:var(--ink);font-style:italic;
  line-height:1.5;
}
.munting-sipi cite{
  display:block;margin-top:1.3rem;font-family:var(--font-type);
  font-size:0.78rem;color:var(--ink-soft);font-style:normal;
}

/* =========================================================
   12. ABOUT SECTION
   ========================================================= */
.about-munti{
  max-width:var(--max-w);margin:5rem auto;text-align:center;position:relative;
}
.about-munti .portrait-mark{width:52px;height:52px;margin:0 auto 1.4rem;color:var(--sepia);}
.about-munti p{color:var(--ink);}
.about-munti .hand-note{margin-bottom:0.6rem;}

/* =========================================================
   13. NEWSLETTER — parang liham na iaabot
   ========================================================= */
.newsletter{
  max-width:34rem;margin:4.5rem auto;text-align:center;padding:0 1.5rem;position:relative;
}
.newsletter .mk-icon.envelope-icon{width:40px;height:40px;color:var(--sepia);margin:0 auto 1rem;}
.newsletter h3{font-size:1.4rem;}
.newsletter p{color:var(--ink-soft);}
.newsletter-form{display:flex;gap:0.7rem;margin-top:1.4rem;}
.newsletter-form input[type=email]{
  flex:1;padding:0.85em 1.1em;border:1px solid var(--paper-deep);
  background:var(--paper);border-radius:var(--radius-soft);font-size:0.95rem;
  color:var(--ink);
}
.newsletter-form input[type=email]:focus{border-color:var(--sepia);}
.newsletter-note{font-size:0.76rem;color:var(--ink-soft);margin-top:0.9rem;}
@media (max-width:520px){.newsletter-form{flex-direction:column;}}

/* =========================================================
   14. SINGLE STORY — reading experience
   ========================================================= */
.single-story{max-width:var(--max-w);margin:0 auto;padding:3.5rem 1.5rem 2rem;position:relative;}
.story-header{text-align:center;margin-bottom:2.2rem;}
.story-header .eyebrow{margin-bottom:1rem;}
.story-header h1{font-size:clamp(2rem,5vw,2.9rem);}
.story-header .meta{
  font-family:var(--font-type);font-size:0.78rem;color:var(--ink-soft);
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.1rem;
}
.story-featured-image{
  margin:2.4rem auto;border-radius:var(--radius-soft);overflow:hidden;
  max-width:34rem;
  background:var(--paper);
  padding:0.6rem 0.6rem 2rem;
  box-shadow:0 20px 34px -22px rgba(44,36,25,0.4);
  transform:rotate(-1deg);
  transition:transform 0.35s var(--ease);
}
.story-featured-image:hover{transform:rotate(0deg);}
.story-featured-image img{border-radius:1px;}
.story-body{font-size:1.12rem;line-height:1.9;}
.story-body p{margin-bottom:1.6em;}
.story-body h2{font-size:1.5rem;margin-top:2em;}
.story-body blockquote{
  margin:2em 0;padding-left:1.4em;border-left:3px solid var(--paper-deep);
  color:var(--ink-soft);font-style:italic;font-family:var(--font-display);
}
.share-row{
  display:flex;align-items:center;gap:1rem;margin:3rem 0;padding:1.6rem 1.6rem;
  border-top:1px solid var(--paper-deep);border-bottom:1px solid var(--paper-deep);
  position:relative;
}
.share-row span{font-family:var(--font-hand);font-size:1.2rem;color:var(--sepia);}
.share-links{display:flex;gap:0.7rem;margin-left:auto;}
.share-links a{
  width:34px;height:34px;border:1px solid var(--paper-deep);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  text-decoration:none;transition:all 0.25s var(--ease);
}
.share-links a:hover{border-color:var(--sepia);color:var(--sepia);transform:translateY(-2px);}
.share-links svg{width:15px;height:15px;}

.story-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin:2.4rem 0;
}
.story-nav a{
  display:block;padding:1.4rem;border:1px solid var(--paper-deep);border-radius:var(--radius-soft);
  text-decoration:none;color:var(--ink);transition:all 0.25s var(--ease);
}
.story-nav a:hover{border-color:var(--sepia);background:var(--paper-warm);}
.story-nav .dir{font-family:var(--font-type);font-size:0.7rem;color:var(--ink-soft);display:block;margin-bottom:0.4rem;}
.story-nav .next{text-align:right;}
@media (max-width:600px){.story-nav{grid-template-columns:1fr;}}

.related-stories{margin:3.5rem 0;}
.related-stories h4{font-family:var(--font-type);font-size:0.76rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);text-align:center;margin-bottom:1.6rem;}

/* =========================================================
   15. COMMENTS — "marginalia" na munting tala sa gilid
   ========================================================= */
.comments-area{max-width:var(--max-w);margin:3rem auto 5rem;padding:0 1.5rem;}
.comments-title{font-size:1.3rem;}
.comment-list{list-style:none;margin:0;padding:0;}
.comment-list .children{list-style:none;padding-left:2.2rem;margin-top:1.4rem;}
.comment-body{
  padding:1.3rem 1.4rem;margin:1.1rem 0;
  background:var(--paper-warm);
  border:1px solid var(--paper-deep);
  border-radius:1px;
  position:relative;
  box-shadow:0 10px 18px -14px rgba(44,36,25,0.3);
}
.comment-list > li:nth-child(odd) > .comment-body{transform:rotate(-0.4deg);}
.comment-list > li:nth-child(even) > .comment-body{transform:rotate(0.4deg);}
.comment-meta{display:flex;align-items:baseline;gap:0.7rem;flex-wrap:wrap;margin-bottom:0.5rem;}
.comment-author{font-family:var(--font-hand);font-weight:600;font-size:1.25rem;color:var(--ink);}
.comment-author img{display:none;}
.author-badge{
  font-family:var(--font-type);font-size:0.62rem;letter-spacing:0.04em;text-transform:uppercase;
  background:var(--sepia-soft);color:var(--sepia);padding:0.25em 0.6em;border-radius:999px;
}
.comment-date{font-family:var(--font-type);font-size:0.72rem;color:var(--ink-soft);}
.comment-content p{margin-bottom:0.9em;font-size:0.98rem;}
.comment-reply-link{
  font-family:var(--font-type);font-size:0.74rem;color:var(--sepia);text-decoration:none;border-bottom:1px solid transparent;
}
.comment-reply-link:hover{border-color:var(--sepia);}
.comment-form{margin-top:2.4rem;}
.comment-form p{margin-bottom:1rem;}
.comment-form label{display:block;font-family:var(--font-ui);font-size:0.8rem;color:var(--ink-soft);margin-bottom:0.4rem;}
.comment-form input[type=text],.comment-form input[type=email],.comment-form textarea{
  width:100%;padding:0.85em 1em;border:1px solid var(--paper-deep);background:var(--paper);
  border-radius:var(--radius-soft);font-family:var(--font-body);font-size:0.98rem;color:var(--ink);
}
.comment-form textarea{min-height:120px;resize:vertical;}
.comment-form input:focus,.comment-form textarea:focus{border-color:var(--sepia);}
#respond .comment-notes{color:var(--ink-soft);font-size:0.85rem;}
.pending-notice{
  font-family:var(--font-ui);font-size:0.8rem;color:var(--ink-soft);
  background:var(--paper);padding:0.8em 1.2em;border-radius:var(--radius-soft);margin-top:1rem;
}

/* =========================================================
   16. SUBMIT STORY FORM
   ========================================================= */
.submit-story{max-width:var(--max-w);margin:0 auto;padding:3.5rem 1.5rem 5rem;}
.submit-story .intro{color:var(--ink-soft);margin-bottom:2.5rem;}
.mk-form p{margin-bottom:1.3rem;}
.mk-form label{display:block;font-family:var(--font-ui);font-size:0.82rem;color:var(--ink);margin-bottom:0.5rem;}
.mk-form input[type=text],.mk-form input[type=email],.mk-form textarea,.mk-form select{
  width:100%;padding:0.9em 1.05em;border:1px solid var(--paper-deep);background:var(--paper-warm);
  border-radius:var(--radius-soft);font-family:var(--font-body);font-size:1rem;color:var(--ink);
}
.mk-form textarea{min-height:280px;resize:vertical;line-height:1.8;}
.mk-form input:focus,.mk-form textarea:focus,.mk-form select:focus{border-color:var(--sepia);background:var(--paper);}
.mk-checkbox{display:flex;align-items:flex-start;gap:0.7em;}
.mk-checkbox input{margin-top:0.3em;}
.mk-checkbox label{font-family:var(--font-body);font-size:0.9rem;color:var(--ink-soft);margin:0;}
.mk-radio-row{display:flex;gap:1.6rem;flex-wrap:wrap;}
.mk-radio-row label{display:flex;align-items:center;gap:0.5em;font-family:var(--font-body);font-size:0.95rem;color:var(--ink);}
.form-message{padding:1em 1.3em;border-radius:var(--radius-soft);font-family:var(--font-ui);font-size:0.88rem;margin-bottom:1.5rem;}
.form-message.success{background:var(--sepia-soft);color:var(--sepia);}
.form-message.error{background:#f7e6e2;color:#a1432c;}

/* =========================================================
   17. 404
   ========================================================= */
.error-404{
  text-align:center;padding:6rem 1.5rem;max-width:32rem;margin:0 auto;
}
.error-404 .hero-mark{opacity:0.6;}
.error-404 p{color:var(--ink-soft);}

/* =========================================================
   18. FOOTER — huling pahina, gabi
   ========================================================= */
.site-footer{
  border-top:1px solid var(--paper-deep);padding:3.5rem 0 3rem;margin-top:3rem;
  background:var(--ink);
  color:var(--paper);
  position:relative;
  overflow:hidden;
}
.site-footer .mk-icon.footer-moon{position:absolute;top:1rem;right:8%;width:38px;height:38px;color:var(--paper);opacity:0.12;}
.site-footer .mk-icon.footer-stars{position:absolute;bottom:0.5rem;left:6%;width:44px;height:44px;color:var(--brass);opacity:0.35;}
.site-footer-inner{
  max-width:var(--max-w-wide);margin:0 auto;padding:0 1.5rem;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
  position:relative;z-index:1;
}
.footer-note{font-family:var(--font-hand);font-size:1.15rem;color:var(--paper);opacity:0.85;}
.footer-links{display:flex;gap:1.4rem;}
.footer-links a{font-family:var(--font-type);font-size:0.76rem;color:var(--paper);opacity:0.7;text-decoration:none;}
.footer-links a:hover{opacity:1;color:var(--brass);}

/* =========================================================
   19. UTILITIES / MISC
   ========================================================= */
.section{padding:4rem 0;position:relative;}
.section-head{text-align:center;max-width:34rem;margin:0 auto 2.4rem;}
.section-head h2{font-size:clamp(1.5rem,3.4vw,2rem);}
.center{text-align:center;}
.pagination{display:flex;justify-content:center;gap:1rem;margin:3rem 0;font-family:var(--font-type);font-size:0.84rem;}
.pagination a,.pagination span{padding:0.5em 1em;border:1px solid var(--paper-deep);border-radius:var(--radius-soft);text-decoration:none;color:var(--ink);}
.pagination .current{background:var(--sepia);color:var(--paper);border-color:var(--sepia);}