/*
Theme Name: Fajr Muhammad
Theme URI: https://example.com
Author: Fajr Muhammad
Description: A minimalist mixed-media author block theme — paper grain, ink-line illustrations, kraft collage, EB Garamond + Courier Prime. Fully editable in the Site Editor.
Version: 2.0.0
Requires at least: 6.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: fajr-muhammad
*/

:root{
  --paper:#fbfaf6;
  --ink:#1a1917;
  --graphite:#6e6a63;
  --red:#be2b1f;
  --kraft:#d8c5a3;
  --display:'EB Garamond', serif;
  --type:'Courier Prime', monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--display);
  font-size:1.15rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  margin:0;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--red)}
a:hover{color:var(--red)}
a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.005em}

.type-label{
  font-family:var(--type)!important;font-size:.75rem!important;
  letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);
}

/* ---------- header / nav ---------- */
.site-nav{position:relative;z-index:2;padding:30px 28px 0}
.nav-inner{max-width:880px;margin:0 auto}
.wordmark, .wordmark a{
  font-family:var(--type);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);
}
.site-nav .wp-block-navigation a{
  font-family:var(--type);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--graphite);
}
.site-nav .wp-block-navigation a:hover{color:var(--red)}
.site-nav .wp-block-navigation .current-menu-item a{color:var(--ink)}

/* ---------- hero ---------- */
.hero-wrap{position:relative;padding:110px 0 130px;z-index:1}
.hero{max-width:880px;margin:0 auto;padding:0 28px;position:relative}
.hero-name{
  font-size:clamp(3rem, 8.5vw, 5.6rem)!important;
  line-height:1.05;letter-spacing:-.01em;max-width:15ch;margin:0;
}
.hero-title{
  margin-top:18px;
  font-size:clamp(1.4rem, 3vw, 2rem);
  font-style:italic;letter-spacing:.01em;
}
.hero-title em{font-style:italic;color:var(--red)}
.ink-line{position:absolute;top:-24px;right:-40px;width:min(44vw,360px);height:auto;pointer-events:none}
.ink-line path{
  fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:1600;stroke-dashoffset:1600;
  animation:draw 2.8s ease forwards .4s;
}
@keyframes draw{to{stroke-dashoffset:0}}
.fragment{
  position:absolute;
  font-family:var(--type);font-size:.72rem;line-height:1.5;
  padding:14px 16px;box-shadow:2px 3px 0 rgba(26,25,23,.08);
}
.fragment.kraft{
  background:var(--kraft);transform:rotate(-2.5deg);
  bottom:-64px;left:28px;
  clip-path:polygon(0 4%, 3% 0, 97% 1%, 100% 8%, 99% 95%, 95% 100%, 4% 99%, 0 92%);
}
.fragment .tape{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(1.5deg);
  width:64px;height:18px;background:rgba(255,255,255,.55);
  border-left:1px dashed rgba(26,25,23,.15);border-right:1px dashed rgba(26,25,23,.15);
}
.red-scrap{
  position:absolute;right:12%;bottom:-40px;
  width:88px;height:56px;background:var(--red);
  transform:rotate(3deg);
  clip-path:polygon(2% 8%, 12% 0, 100% 6%, 96% 90%, 88% 100%, 0 94%);
  opacity:.92;
}

/* ---------- illustrated index ---------- */
.index{padding:60px 0 90px;position:relative;z-index:1}
.index .wrap{max-width:880px;margin:0 auto;padding:0 28px}
.index-grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:8px;margin-top:36px;
}
.door{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  text-decoration:none;padding:26px 10px 22px;
  transition:transform .25s ease;
}
.door:hover{transform:translateY(-4px)}
.door svg{width:84px;height:84px;overflow:visible}
.door path{
  fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:600;stroke-dashoffset:600;
  animation:draw 1.8s ease forwards;
  transition:stroke .25s ease;
}
.door:nth-child(1) path{animation-delay:.5s}
.door:nth-child(2) path{animation-delay:.75s}
.door:nth-child(3) path{animation-delay:1s}
.door:nth-child(4) path{animation-delay:1.25s}
.door:nth-child(5) path{animation-delay:1.5s}
.door:hover path{stroke:var(--red)}
.door-label{
  font-family:var(--type);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.door:hover .door-label{color:var(--red)}
.door .under{width:44px;height:8px;margin-top:-6px}
.door .under path{stroke:var(--red);stroke-dasharray:none;stroke-dashoffset:0;animation:none;opacity:0;transition:opacity .25s ease}
.door:hover .under path{opacity:1}
@media (prefers-reduced-motion: reduce){
  .ink-line path, .door path{animation:none;stroke-dashoffset:0}
  .door{transition:none}
}

/* ---------- page scaffolding ---------- */
.page-section{padding:80px 0 120px;position:relative;z-index:1}
.page-section > .wrap, .page-section.wp-block-group{max-width:initial}
.wrap{max-width:880px;margin:0 auto;padding:0 28px}
.section-mark{width:54px;height:auto;display:block;margin-bottom:18px}
.section-mark path{fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round}
.page-title, h1.wp-block-post-title{
  font-size:clamp(1.9rem,4vw,2.6rem);margin:0 0 30px;
}
.entry-content p, .wp-block-post-content > p{max-width:58ch;margin:0 0 1.25em}
.wp-block-post-content h2{font-size:clamp(1.7rem,3.5vw,2.2rem);margin:1.6em 0 .8em}
.wp-block-post-content blockquote{border-left:2px solid var(--red);padding-left:1.2em;font-style:italic;margin:0 0 1.25em;max-width:54ch}

/* timeline + status lines */
.timeline-words{margin:40px 0 10px!important;font-family:var(--type)!important;font-size:.85rem!important;letter-spacing:.1em;color:var(--graphite)}
.timeline-words b{color:var(--ink);font-weight:400}
.timeline-words .slash{color:var(--red);margin:0 10px}
.status{font-family:var(--type)!important;font-size:.72rem!important;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);margin-top:26px!important}

/* essays & events as editable group "items" */
.essay-item, .event-item{
  padding:26px 0;border-bottom:1px solid rgba(26,25,23,.14);max-width:640px;margin:0;
}
.essay-item:first-of-type, .event-item:first-of-type{border-top:1px solid rgba(26,25,23,.14)}
.essay-item h3{font-size:1.35rem;margin:6px 0}
.essay-item .meta, .event-item .date{
  font-family:var(--type)!important;font-size:.72rem!important;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);margin:0;
}
.event-item .date{color:var(--red)}
.essay-item p:not(.meta), .event-item p:not(.date){color:var(--graphite);font-size:1.02rem;margin:6px 0 0}
.event-item .what{font-family:var(--display);font-size:1.1rem;color:var(--ink)}

/* about */
.about-grid{margin-top:10px}
.photo-frame{
  position:relative;background:#fff;
  padding:12px 12px 40px;
  transform:rotate(-2deg);
  box-shadow:3px 4px 0 rgba(26,25,23,.1);
  max-width:340px;
}
.photo-frame::before{
  content:"";
  position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(2deg);
  width:80px;height:22px;background:rgba(255,255,255,.6);
  border-left:1px dashed rgba(26,25,23,.15);border-right:1px dashed rgba(26,25,23,.15);
  box-shadow:0 1px 2px rgba(26,25,23,.08);z-index:1;
}
.photo-frame img{display:block;width:100%;height:auto;filter:saturate(.96)}
.photo-frame .photo-caption{
  text-align:center;margin:12px 0 0;
  font-family:var(--type)!important;font-size:.7rem!important;letter-spacing:.1em;color:var(--graphite);
}
.about-note{
  display:inline-block;margin-top:26px;background:var(--kraft);
  font-family:var(--type)!important;font-size:.78rem!important;line-height:1.7;
  padding:16px 20px;max-width:46ch;transform:rotate(-1.2deg);
  clip-path:polygon(0 5%, 2% 0, 98% 2%, 100% 10%, 99% 94%, 96% 100%, 3% 98%, 0 90%);
  box-shadow:2px 3px 0 rgba(26,25,23,.08);
}

/* buttons — style core button block to match */
.wp-block-button .wp-block-button__link{
  font-family:var(--type);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);
  padding:14px 30px;border-radius:0;text-decoration:none;
}
.wp-block-button .wp-block-button__link:hover{background:var(--red);color:var(--paper)}
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;color:var(--ink);border:1px solid var(--ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{color:var(--red);border-color:var(--red);background:transparent}

/* footer */
.site-footer{
  padding:60px 28px;text-align:center;
  font-family:var(--type);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);
  position:relative;z-index:1;
}
.site-footer p{margin:0;font-size:inherit}

@media (max-width:720px){
  .hero-wrap{padding:70px 0 140px}
  .ink-line{top:auto;bottom:-110px;right:-20px;width:50vw;opacity:.9}
  .fragment.kraft{bottom:-112px}
  .red-scrap{display:none}
  .index-grid{grid-template-columns:repeat(2,1fr)}
  .index-grid .door:last-child{grid-column:1 / -1}
  .page-section{padding:60px 0 90px}
  .photo-frame{max-width:320px}
}