/* ========================================================
   THE TIWARI GAZETTE — Old Timey Newspaper Stylesheet
   ======================================================== */

/* --- Design Tokens (Light / Newspaper default) --- */
:root {
  /* Paper & Ink */
  --paper:          #f5f0e1;
  --paper-aged:     #ebe5d3;
  --ink:            #1a1610;
  --ink-faded:      #4a4438;
  --ink-light:      #7a7264;
  --rule-color:     #1a1610;
  --rule-faded:     #c4bba6;
  --accent:         #8b0000;
  --accent-hover:   #a52a2a;

  /* Typography */
  --ff-display:     'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --ff-body:        'EB Garamond', 'Georgia', 'Times New Roman', serif;
  --ff-blackletter: 'UnifrakturCook', cursive;

  /* Spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 5rem;

  /* Layout */
  --max-width: 960px;

  /* Transitions */
  --transition: 0.3s ease;

  color-scheme: light dark;
}

/* --- Dark Mode (Evening Edition) --- */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #1a1810;
    --paper-aged:   #222014;
    --ink:          #e8e0c8;
    --ink-faded:    #b8b09a;
    --ink-light:    #8a826e;
    --rule-color:   #e8e0c8;
    --rule-faded:   #3a3628;
    --accent:       #d4644a;
    --accent-hover: #e07860;
  }
}

/* Override when user explicitly picks a scheme */
:root[data-scheme="light"] {
  --paper:        #f5f0e1;
  --paper-aged:   #ebe5d3;
  --ink:          #1a1610;
  --ink-faded:    #4a4438;
  --ink-light:    #7a7264;
  --rule-color:   #1a1610;
  --rule-faded:   #c4bba6;
  --accent:       #8b0000;
  --accent-hover: #a52a2a;
}

:root[data-scheme="dark"] {
  --paper:        #1a1810;
  --paper-aged:   #222014;
  --ink:          #e8e0c8;
  --ink-faded:    #b8b09a;
  --ink-light:    #8a826e;
  --rule-color:   #e8e0c8;
  --rule-faded:   #3a3628;
  --accent:       #d4644a;
  --accent-hover: #e07860;
}


/* ========================================================
   RESET & BASE
   ======================================================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

body {
  font-family: var(--ff-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--paper);
  transition: background-color var(--transition), color var(--transition);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ink);
  text-decoration: none;
}

img { max-width: 100%; display: block; }
ul { list-style: none; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}


/* ========================================================
   MASTHEAD
   ======================================================== */
.masthead {
  padding-top: var(--space-lg);
  text-align: center;
}

.masthead-top-rule {
  height: 4px;
  background: var(--rule-color);
  margin-bottom: 2px;
  position: relative;
}
.masthead-top-rule::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--rule-color);
  margin-top: 2px;
}

.masthead-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  font-family: var(--ff-body);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faded);
}

.masthead-rule {
  background: var(--rule-color);
}
.masthead-rule.thin {
  height: 1px;
}
.masthead-rule.thick {
  height: 3px;
  position: relative;
}
.masthead-rule.thick::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--rule-color);
  margin-top: 3px;
}

.masthead-title {
  font-family: var(--ff-blackletter);
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  padding: var(--space-sm) 0 0;
  color: var(--ink);
}

.masthead-motto {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-faded);
  padding-bottom: var(--space-sm);
  letter-spacing: 0.04em;
}

/* --- Navigation Bar --- */
.nav-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  flex-wrap: wrap;
}

.nav-link {
  font-family: var(--ff-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faded);
  transition: color var(--transition);
  padding: 0.15rem 0;
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width var(--transition);
}
.nav-link:hover {
  color: var(--ink);
}
.nav-link:hover::after {
  width: 100%;
}

.nav-dot {
  color: var(--ink-light);
  font-size: 0.6rem;
  user-select: none;
}

/* --- Theme Toggle --- */
.theme-toggle {
  font-family: var(--ff-body);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: none;
  border: 1px solid var(--rule-faded);
  color: var(--ink-faded);
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  transition: all var(--transition);
}
.theme-toggle:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Show/hide labels based on current scheme */
.dark-label { display: none; }
.light-label { display: inline; }

@media (prefers-color-scheme: dark) {
  .dark-label { display: inline; }
  .light-label { display: none; }
}
:root[data-scheme="dark"] .dark-label { display: none; }
:root[data-scheme="dark"] .light-label { display: inline; }
:root[data-scheme="dark"] .dark-label { display: none; }

:root[data-scheme="light"] .light-label { display: none; }
:root[data-scheme="light"] .dark-label { display: inline; }


/* ========================================================
   SECTIONS — General
   ======================================================== */
.section {
  padding: var(--space-xl) 0;
}

.section-title {
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--space-xs);
  letter-spacing: 0.02em;
}

.section-subtitle {
  text-align: center;
  color: var(--ink-faded);
  font-size: 0.95rem;
  margin-bottom: var(--space-lg);
}

/* --- Ornamental section dividers --- */
.section-rule {
  padding: 0;
}
.ornamental-rule {
  position: relative;
  height: 1px;
  background: var(--rule-faded);
}
.ornamental-rule .ornament {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--paper);
  padding: 0 var(--space-md);
  color: var(--ink-light);
  font-size: 1rem;
  font-family: var(--ff-display);
  transition: background-color var(--transition);
}


/* ========================================================
   HERO / HEADLINE
   ======================================================== */
.hero {
  text-align: center;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.kicker {
  font-family: var(--ff-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.headline {
  font-family: var(--ff-display);
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: var(--space-md);
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.subheadline {
  font-family: var(--ff-body);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--ink-faded);
  max-width: 600px;
  margin: 0 auto var(--space-md);
  line-height: 1.6;
}

.byline {
  font-family: var(--ff-body);
  font-size: 0.85rem;
  color: var(--ink-light);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-lg);
}
.byline-sep {
  margin: 0 0.3em;
}

/* Availability badge */
.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--ff-body);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faded);
  border: 1px solid var(--rule-faded);
  padding: 0.4rem 1rem;
  margin-bottom: var(--space-lg);
}

.pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2d6a2d;
  position: relative;
}
.pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid #2d6a2d;
  animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(2); }
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}


/* ========================================================
   BUTTONS (Newspaper style)
   ======================================================== */
.btn-newspaper {
  font-family: var(--ff-body);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--rule-color);
  padding: 0.5rem 1.4rem;
  transition: all var(--transition);
  display: inline-block;
  cursor: pointer;
  background: transparent;
}
.btn-newspaper:hover {
  background: var(--ink);
  color: var(--paper);
}
.btn-newspaper.btn-lg {
  font-size: 1rem;
  padding: 0.7rem 2rem;
}


/* ========================================================
   ABOUT
   ======================================================== */
.about-columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.column p {
  text-align: justify;
  hyphens: auto;
  margin-bottom: var(--space-md);
}

/* Drop cap */
.drop-cap::first-letter {
  font-family: var(--ff-display);
  font-size: 3.8rem;
  font-weight: 900;
  float: left;
  line-height: 0.8;
  margin-right: 0.08em;
  margin-top: 0.05em;
  color: var(--ink);
}

.about-stats {
  border: 1px solid var(--rule-faded);
  padding: var(--space-lg);
}

.stat {
  text-align: center;
  padding: var(--space-md) 0;
}
.stat-number {
  display: block;
  font-family: var(--ff-display);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.stat-label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-light);
  margin-top: 0.3rem;
}
.stat-divider {
  height: 1px;
  background: var(--rule-faded);
  margin: 0;
}


/* ========================================================
   PROJECTS
   ======================================================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--rule-faded);
}

.project-card {
  padding: var(--space-lg);
  border: 0.5px solid var(--rule-faded);
  display: flex;
  flex-direction: column;
  transition: background-color var(--transition);
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
}
.project-card:hover {
  background: var(--paper-aged);
}

.project-tag {
  font-family: var(--ff-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-xs);
}

.project-title {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
  line-height: 1.2;
}

.project-label {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-light);
  margin-bottom: var(--space-sm);
}

.project-rule {
  height: 1px;
  background: var(--rule-faded);
  margin-bottom: var(--space-sm);
}

.project-desc {
  font-size: 0.92rem;
  color: var(--ink-faded);
  text-align: justify;
  hyphens: auto;
  flex-grow: 1;
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

.project-stack {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}
.project-stack span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-light);
  border: 1px solid var(--rule-faded);
  padding: 0.15rem 0.5rem;
}

.read-more {
  font-family: var(--ff-body);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--accent);
  transition: color var(--transition);
}
.project-card:hover .read-more {
  color: var(--accent-hover);
}


/* ========================================================
   SKILLS
   ======================================================== */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--rule-faded);
}

.skill-group {
  padding: var(--space-lg) var(--space-md);
  border: 0.5px solid var(--rule-faded);
}

.skill-group-title {
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-sm);
  text-align: center;
}

.skill-rule {
  height: 1px;
  background: var(--rule-faded);
  margin-bottom: var(--space-md);
}

.skill-list {
  list-style: none;
}
.skill-list li {
  font-size: 0.88rem;
  color: var(--ink-faded);
  padding: 0.3rem 0;
  border-bottom: 1px dotted var(--rule-faded);
  text-align: center;
}
.skill-list li:last-child {
  border-bottom: none;
}


/* ========================================================
   EXPERIENCE
   ======================================================== */
.experience-block {
  border: 1px solid var(--rule-faded);
  padding: var(--space-lg);
}

.exp-header {
  text-align: center;
  margin-bottom: var(--space-md);
}

.exp-role {
  font-family: var(--ff-display);
  font-size: 1.4rem;
  font-weight: 700;
}

.exp-company {
  font-size: 0.95rem;
  color: var(--ink-faded);
  margin-top: 0.2rem;
}

.exp-date {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-light);
  margin-top: 0.3rem;
}

.exp-rule {
  height: 1px;
  background: var(--rule-faded);
  margin-bottom: var(--space-lg);
}

.exp-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

.exp-column p {
  text-align: justify;
  hyphens: auto;
  margin-bottom: var(--space-md);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-faded);
}

.exp-figures {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--rule-faded);
}

.figure-item {
  text-align: center;
  padding: 0 var(--space-sm);
}

.figure-number {
  display: block;
  font-family: var(--ff-display);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

.figure-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-light);
  margin-top: 0.3rem;
}

.figure-divider {
  width: 1px;
  height: 40px;
  background: var(--rule-faded);
}


/* ========================================================
   EDUCATION & LEADERSHIP
   ======================================================== */
.edu-lead-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.edu-block,
.lead-block {
  border: 1px solid var(--rule-faded);
  padding: var(--space-lg);
}

.subsection-title {
  font-family: var(--ff-display);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: var(--space-sm);
}

.edu-rule {
  height: 1px;
  background: var(--rule-faded);
  margin-bottom: var(--space-md);
}

.edu-degree {
  font-family: var(--ff-display);
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}

.edu-school {
  font-size: 0.92rem;
  color: var(--ink-faded);
  text-align: center;
  margin-top: 0.3rem;
}

.edu-meta {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-light);
  text-align: center;
  margin-top: 0.4rem;
}

.leadership-list {
  list-style: none;
}

.leadership-list li {
  font-size: 0.9rem;
  color: var(--ink-faded);
  padding: var(--space-sm) 0;
  border-bottom: 1px dotted var(--rule-faded);
  line-height: 1.6;
}

.leadership-list li:last-child {
  border-bottom: none;
}

.leadership-list li strong {
  color: var(--ink);
}


/* ========================================================
   CONTACT
   ======================================================== */
#contact {
  text-align: center;
}

.contact-text {
  max-width: 560px;
  margin: var(--space-md) auto var(--space-lg);
  color: var(--ink-faded);
  font-style: italic;
  text-align: center;
  line-height: 1.7;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.contact-details {
  margin-bottom: var(--space-sm);
}

.contact-phone {
  font-size: 0.85rem;
  color: var(--ink-light);
  letter-spacing: 0.06em;
  margin-top: var(--space-sm);
}

.social-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink-light);
  transition: color var(--transition), transform var(--transition);
}
.social-link:hover {
  color: var(--ink);
  transform: translateY(-2px);
}

.social-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}


/* ========================================================
   FOOTER
   ======================================================== */
#footer {
  padding: var(--space-lg) 0 var(--space-xl);
  text-align: center;
}

.footer-rule {
  height: 3px;
  background: var(--rule-color);
  margin-bottom: 2px;
  position: relative;
}
.footer-rule::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--rule-color);
  margin-top: 3px;
}

#footer p {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-light);
  margin-top: var(--space-md);
}


/* ========================================================
   SCROLL ANIMATIONS (fade in from below)
   ======================================================== */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ========================================================
   RESPONSIVE
   ======================================================== */
@media (max-width: 768px) {
  .about-columns {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .exp-columns {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .exp-figures {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  .figure-divider {
    display: none;
  }

  .edu-lead-columns {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .masthead-meta {
    flex-direction: column;
    gap: 0.2rem;
  }

  .headline {
    font-size: clamp(1.5rem, 6vw, 2.4rem);
  }
}

@media (max-width: 480px) {
  .skills-grid {
    grid-template-columns: 1fr;
  }

  .container {
    padding: 0 var(--space-md);
  }

  .nav-bar {
    gap: var(--space-xs);
  }
  .nav-dot {
    display: none;
  }
}