/* =========================================================
   Nashrah Shireen — Master Stylesheet
   A publishing & media house: forest green + antique gold,
   set against a hand-drawn dusk landscape.
   ========================================================= */

:root{
  --forest-deep:   #0a2a1e;
  --forest:        #123a29;
  --forest-mid:    #1c4d37;
  --forest-light:  #2f6b4c;
  --gold:          #c9a038;
  --gold-bright:   #e9c65f;
  --gold-pale:     #f6e6ae;
  --paper:         #faf5e8;
  --paper-dim:     #f0e8d4;
  --ink:           #241f14;
  --ink-soft:      #4a4230;
  --line:          rgba(36,31,20,0.12);
  --shadow-soft:   0 18px 40px rgba(10,26,18,0.18);
  --radius-lg:     22px;
  --radius-md:     14px;
  --radius-sm:     8px;
  --maxw:          1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Playfair Display', Georgia, serif;
  color:var(--forest-deep);
  margin:0 0 .5em;
  line-height:1.18;
  font-weight:700;
}

p{ margin:0 0 1.1em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* -------- Justified body copy -------- */
.prose p, .justify{
  text-align:justify;
  text-justify:inter-word;
  max-width:74ch;
  color:var(--ink-soft);
  font-size:1.04rem;
}
.prose{ max-width:74ch; }

/* =========================================================
   NATURE BACKDROP — layered SVG dusk-over-hills scene,
   fixed behind every page.
   ========================================================= */
.nature-backdrop{
  position:fixed; inset:0; z-index:-2;
  background:linear-gradient(180deg, #16324a 0%, #3c5f5a 28%, #7c8a53 46%, #cfa855 62%, #f4dfa0 72%, #f8ecc7 100%);
}
.nature-backdrop svg{ position:absolute; bottom:0; left:0; width:100%; height:60%; }
.nature-backdrop::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,26,18,0.06) 0%, rgba(10,26,18,0.55) 100%);
}

/* =========================================================
   TOP UTILITY STRIP
   ========================================================= */
.utility-bar{ background:var(--forest-deep); color:var(--gold-pale); font-size:.8rem; letter-spacing:.02em; }
.utility-bar .container{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; padding-bottom:8px; flex-wrap:wrap; gap:8px;
}
.utility-bar a{ color:var(--gold-bright); }
.utility-bar a:hover{ text-decoration:underline; }
.utility-bar .u-links{ display:flex; gap:18px; }

/* =========================================================
   GOOGLE-STYLE MASTHEAD
   ========================================================= */
.masthead{
  background:rgba(250,245,232,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
}
.masthead-row{ display:flex; align-items:center; gap:18px; padding:14px 0; }
.hamburger{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:var(--paper); display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex:0 0 auto; transition:background .2s;
}
.hamburger:hover{ background:var(--paper-dim); }
.hamburger span{ display:block; width:20px; height:2px; background:var(--forest-deep); position:relative; }
.hamburger span::before,.hamburger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--forest-deep); }
.hamburger span::before{ top:-6px; }
.hamburger span::after{ top:6px; }

.brand-block{ flex:1 1 auto; text-align:center; }
.brand-name{
  font-family:'Playfair Display', serif; font-weight:800; font-size:2.6rem;
  letter-spacing:.01em; line-height:1;
  background:linear-gradient(100deg,var(--forest-deep) 0%, var(--forest-light) 35%, var(--gold) 62%, var(--gold-bright) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; margin:0;
}
.brand-urdu{ font-family:'Noto Nastaliq Urdu', serif; color:var(--ink-soft); font-size:1.15rem; margin-top:2px; }
.brand-tag{ font-size:.86rem; color:var(--ink-soft); letter-spacing:.06em; margin-top:4px; }
.masthead-cta{ flex:0 0 auto; }

.explore-bar{
  max-width:640px; margin:0 auto 22px; display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:12px 20px;
  box-shadow:0 2px 10px rgba(10,26,18,0.06); transition:box-shadow .2s;
}
.explore-bar:hover{ box-shadow:0 6px 18px rgba(10,26,18,0.12); }
.explore-bar input{ border:none; outline:none; flex:1; font-size:1rem; background:transparent; color:var(--ink); font-family:inherit; }
.explore-bar button{ border:none; background:none; cursor:pointer; color:var(--forest); font-size:1.1rem; }

.primary-nav{ border-top:1px solid var(--line); }
.primary-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:2px; }
.primary-nav a{ display:block; padding:12px 16px; font-size:.86rem; color:var(--ink-soft); font-weight:600; letter-spacing:.01em; border-bottom:3px solid transparent; }
.primary-nav a:hover, .primary-nav a.active{ color:var(--forest-deep); border-bottom:3px solid var(--gold); }

/* =========================================================
   OFF-CANVAS SIDEBAR (all menu items)
   ========================================================= */
.sidebar-overlay{ position:fixed; inset:0; background:rgba(10,20,14,0.5); opacity:0; pointer-events:none; transition:opacity .25s; z-index:60; }
.sidebar-overlay.open{ opacity:1; pointer-events:auto; }
.sidebar{
  position:fixed; top:0; left:0; height:100%; width:300px;
  background:linear-gradient(190deg,var(--forest-deep), var(--forest));
  color:var(--paper); transform:translateX(-104%); transition:transform .3s ease;
  z-index:70; padding:26px 0; overflow-y:auto;
}
.sidebar.open{ transform:translateX(0); }
.sidebar-head{ padding:0 26px 18px; border-bottom:1px solid rgba(246,230,174,0.18); margin-bottom:10px; position:relative; }
.sidebar-head .brand-name{ font-size:1.5rem; background:none; -webkit-text-fill-color:var(--gold-bright); color:var(--gold-bright); }
.sidebar-head small{ color:var(--gold-pale); opacity:.85; }
.sidebar-close{ position:absolute; top:-4px; right:0; background:none; border:none; color:var(--gold-pale); font-size:1.3rem; cursor:pointer; }
.sidebar nav ul{ list-style:none; margin:0; padding:0; }
.sidebar nav a{ display:flex; align-items:center; justify-content:space-between; padding:13px 26px; color:var(--paper); font-size:.98rem; border-left:3px solid transparent; }
.sidebar nav a:hover, .sidebar nav a.active{ background:rgba(246,230,174,0.08); border-left:3px solid var(--gold-bright); color:var(--gold-bright); }
.sidebar nav .num{ color:var(--gold); font-size:.78rem; opacity:.8; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 26px; border-radius:999px; font-weight:600; font-size:.95rem; border:1px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; }
.btn:hover{ transform:translateY(-2px); }

.btn-gold{
  position:relative; overflow:hidden; color:#2c2107;
  background:linear-gradient(120deg,#a9812c 0%, #e9c65f 30%, #fff3c4 50%, #e9c65f 70%, #a9812c 100%);
  background-size:220% 100%;
  box-shadow:0 8px 20px rgba(155,120,30,0.35), inset 0 0 0 1px rgba(255,255,255,0.4);
  animation:goldflow 5s linear infinite;
}
@keyframes goldflow{ 0%{ background-position:0% 50%; } 100%{ background-position:220% 50%; } }
.btn-gold::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.85), transparent);
  transform:skewX(-20deg); animation:shine 2.6s ease-in-out infinite;
}
@keyframes shine{ 0%{ left:-60%; } 45%{ left:130%; } 100%{ left:130%; } }
.btn-gold:hover{ box-shadow:0 10px 26px rgba(155,120,30,0.5), inset 0 0 0 1px rgba(255,255,255,0.6); }

.btn-outline{ background:transparent; border:1.5px solid var(--forest); color:var(--forest-deep); }
.btn-outline:hover{ background:var(--forest-deep); color:var(--paper); }
.btn-ghost{ background:rgba(250,245,232,0.9); color:var(--forest-deep); border:1px solid var(--line); }
.btn-sm{ padding:8px 18px; font-size:.82rem; }

/* =========================================================
   SECTIONS / CARDS
   ========================================================= */
section{ padding:64px 0; }
.section-tight{ padding:40px 0; }
.eyebrow{ color:var(--gold); font-weight:700; font-size:.85rem; margin-bottom:8px; }
.panel{ background:rgba(250,245,232,0.96); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); border:1px solid rgba(255,255,255,0.4); }

.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{ background:#fff; border-radius:var(--radius-md); padding:26px; border:1px solid var(--line); box-shadow:0 10px 24px rgba(20,30,20,0.06); transition:box-shadow .2s, transform .2s; }
.card:hover{ box-shadow:0 16px 34px rgba(20,30,20,0.12); transform:translateY(-3px); }
.card h3{ font-size:1.15rem; margin-bottom:8px; }
.card p{ font-size:.92rem; color:var(--ink-soft); margin-bottom:14px; }
.card-title-row{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.chip{ display:inline-block; font-size:.72rem; font-weight:700; color:var(--forest); background:var(--paper-dim); border:1px solid var(--line); border-radius:999px; padding:3px 11px; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ text-align:center; padding:56px 0 30px; }
.hero h1{ font-size:2.7rem; max-width:820px; margin:0 auto .4em; }
.hero .lede{ max-width:640px; margin:0 auto 26px; color:var(--ink-soft); font-size:1.08rem; }

/* =========================================================
   FONT SHOWCASE STRIP (home page, top)
   ========================================================= */
.font-strip-wrap{ background:linear-gradient(180deg, rgba(10,42,30,0.94), rgba(18,58,41,0.94)); padding:30px 0 34px; border-bottom:2px solid var(--gold); }
.font-strip-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; gap:12px; flex-wrap:wrap; }
.font-strip-head h2{ color:var(--gold-pale); margin:0; font-size:1.5rem; }
.font-strip-head p{ color:rgba(246,230,174,0.75); margin:0; font-size:.88rem; }
.font-strip{ display:flex; gap:16px; overflow-x:auto; padding:6px 2px 14px; scroll-snap-type:x proximity; }
.font-strip::-webkit-scrollbar{ height:8px; }
.font-strip::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:8px; }
.font-pill{ flex:0 0 auto; width:222px; scroll-snap-align:start; background:rgba(250,245,232,0.98); border-radius:var(--radius-md); padding:18px 18px 16px; border:1px solid rgba(246,230,174,0.25); }
.font-pill .fp-sample{ font-size:1.35rem; color:var(--forest-deep); line-height:1.25; min-height:64px; display:flex; align-items:center; }
.font-pill .fp-name{ font-size:.74rem; color:var(--ink-soft); margin:8px 0 12px; letter-spacing:.01em; }

/* =========================================================
   FONTS PAGE — full gallery
   ========================================================= */
.font-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.font-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:24px; display:flex; flex-direction:column; gap:14px; box-shadow:0 10px 24px rgba(20,30,20,0.06); }
.font-card .fc-sample{ font-size:1.7rem; color:var(--forest-deep); line-height:1.3; min-height:72px; display:flex; align-items:center; }
.font-card .fc-meta{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.font-card .fc-name{ font-size:.86rem; font-weight:700; color:var(--ink); }
.font-card .fc-index{ font-size:.72rem; color:var(--gold); }

/* =========================================================
   SERVICE GRID (home)
   ========================================================= */
.service-card{ padding:28px 24px; border-radius:var(--radius-md); background:#fff; border:1px solid var(--line); display:flex; flex-direction:column; gap:10px; box-shadow:0 10px 24px rgba(20,30,20,0.06); }
.service-card .si{ width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--forest),var(--forest-light)); color:var(--gold-pale); display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-weight:700; font-size:1.1rem; }
.service-card a.more{ color:var(--forest); font-weight:600; font-size:.86rem; margin-top:auto; }
.service-card a.more:hover{ text-decoration:underline; }

/* =========================================================
   TOOLS GRID
   ========================================================= */
.tool-group h3{ font-size:1.1rem; margin:34px 0 14px; padding-bottom:8px; border-bottom:2px solid var(--gold-pale); }
.tool-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tool-chip{ display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px 16px; font-size:.86rem; font-weight:600; color:var(--ink); box-shadow:0 4px 10px rgba(20,30,20,0.05); }
.tool-chip:hover{ border-color:var(--gold); color:var(--forest-deep); }
.tool-chip .go{ color:var(--gold); font-size:1rem; }

/* =========================================================
   LIST-STYLE ITEMS (news, journals, publications)
   ========================================================= */
.stack{ display:flex; flex-direction:column; gap:16px; }
.item-row{ display:flex; gap:20px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:22px 26px; box-shadow:0 8px 20px rgba(20,30,20,0.05); }
.item-row .idx{ font-family:'Playfair Display',serif; font-weight:700; color:var(--gold); font-size:1.4rem; flex:0 0 auto; width:34px; }
.item-row h3{ font-size:1.12rem; margin-bottom:4px; }
.item-row .domain{ font-size:.82rem; color:var(--forest); font-weight:600; margin-bottom:8px; display:inline-block; }
.item-row p{ font-size:.92rem; color:var(--ink-soft); margin-bottom:10px; }

/* =========================================================
   PAGE HEADER (interior pages)
   ========================================================= */
.page-hero{ padding:52px 0 40px; text-align:center; border-bottom:1px solid var(--line); }
.page-hero .eyebrow{ justify-content:center; display:flex; }
.page-hero h1{ font-size:2.3rem; }
.page-hero .lede{ max-width:620px; margin:14px auto 0; color:var(--ink-soft); }
.crumb{ font-size:.8rem; color:var(--ink-soft); margin-bottom:10px; }
.crumb a{ color:var(--forest); font-weight:600; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:start; }
.contact-info .ci-row{ display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; }
.contact-info .ci-icon{ width:42px; height:42px; border-radius:50%; background:var(--forest-deep); color:var(--gold-bright); display:flex; align-items:center; justify-content:center; flex:0 0 auto; font-size:1.1rem; }
.form-field{ margin-bottom:16px; }
.form-field label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:6px; color:var(--ink-soft); }
.form-field input, .form-field textarea{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line); font-family:inherit; font-size:.95rem; background:#fff; }
.form-field textarea{ min-height:120px; resize:vertical; }

/* =========================================================
   FOOTER
   ========================================================= */
footer{ background:var(--forest-deep); color:rgba(250,245,232,0.85); padding:52px 0 26px; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; margin-bottom:34px; }
footer h4{ color:var(--gold-bright); font-size:.95rem; margin-bottom:14px; }
footer .brand-name{ background:none; -webkit-text-fill-color:var(--gold-bright); color:var(--gold-bright); font-size:1.6rem; }
footer p{ color:rgba(250,245,232,0.7); font-size:.9rem; }
footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
footer a{ color:rgba(250,245,232,0.78); font-size:.88rem; }
footer a:hover{ color:var(--gold-bright); }
.footer-bottom{ border-top:1px solid rgba(250,245,232,0.15); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.8rem; color:rgba(250,245,232,0.6); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .font-gallery{ grid-template-columns:repeat(2,1fr); }
  .tool-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .brand-name{ font-size:1.9rem; }
  .hero h1{ font-size:1.9rem; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .font-gallery{ grid-template-columns:1fr; }
  .tool-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .primary-nav ul{ display:none; }
  section{ padding:44px 0; }
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){ .btn-gold, .btn-gold::after{ animation:none; } }