/* ==========================================================================
   PK Architect / Pallob Kumar Ray — Portfolio & Architectural Showcase
   Theme: Drafting-sheet (Paper / Ink / Rust Accent)
   Universal & Fully Responsive CSS Engine (320px to 4K Displays)
   ========================================================================== */

/* 1. Universal Design Tokens ----------------------------------------------- */
:root {
  --ink: #1A1D1F;
  --ink-soft: #3A3D3E;
  --paper: #F5F3EE;
  --paper-raised: #FBFAF7;
  --concrete: #8B8680;
  --rust: #C06B4E;             /* Rust Accent Color */
  --rust-dark: #8F3D22;
  --rust-glow: rgba(192, 107, 78, 0.55);
  --hairline: #D4CFC4;
  --hairline-strong: #B9B2A4;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  --container-max: 1280px;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --section-space: clamp(3rem, 7vw, 6.5rem);

  /* Touch & Safe-Area Insets for Modern Mobile Devices */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* 2. Reset & Core Base Rules ------------------------------------------------ */
*, *::before, *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

html { 
  scroll-behavior: smooth; 
  font-size: 16px; 
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body {
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
  min-height: 100vh;
}

img, video { 
  max-width: 100%; 
  height: auto;
  display: block; 
}

a { 
  color: inherit; 
  text-decoration: none; 
}

button { 
  font: inherit; 
  cursor: pointer; 
  background: none;
  border: none;
}

ul, ol { 
  list-style: none; 
}

.container { 
  width: 100%; 
  max-width: var(--container-max); 
  margin: 0 auto; 
  padding-left: calc(var(--gutter) + var(--sal)); 
  padding-right: calc(var(--gutter) + var(--sar)); 
}

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

/* Accessibility Focus States */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; 
  width: 1px; 
  height: 1px; 
  padding: 0; 
  margin: -1px;
  overflow: hidden; 
  clip: rect(0,0,0,0); 
  white-space: nowrap; 
  border: 0;
}

/* 3. Preloader / Loading Screen -------------------------------------------- */
#loading-screen {
  position: fixed; 
  inset: 0; 
  z-index: 9999;
  background: var(--paper);
  display: flex; 
  align-items: center; 
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#loading-screen.is-hidden { 
  opacity: 0; 
  visibility: hidden; 
  pointer-events: none; 
}

.dot-spinner { 
  --uib-size: 40px; 
  --uib-speed: 0.9s; 
  --uib-color: var(--rust);
  position: relative; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  height: var(--uib-size); 
  width: var(--uib-size); 
}

.dot-spinner__dot { 
  position: absolute; 
  top: 0; 
  left: 0; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  height: 100%; 
  width: 100%; 
}

.dot-spinner__dot::before {
  content: ''; 
  height: 20%; 
  width: 20%; 
  border-radius: 50%; 
  background: var(--uib-color);
  transform: scale(0); 
  opacity: 0.5;
  animation: dot-spinner-pulse calc(var(--uib-speed) * 1.111) ease-in-out infinite;
  box-shadow: 0 0 20px rgba(192, 107, 78, 0.2);
}

.dot-spinner__dot:nth-child(2) { transform: rotate(45deg); }
.dot-spinner__dot:nth-child(2)::before { animation-delay: -0.826s; }
.dot-spinner__dot:nth-child(3) { transform: rotate(90deg); }
.dot-spinner__dot:nth-child(3)::before { animation-delay: -0.7515s; }
.dot-spinner__dot:nth-child(4) { transform: rotate(135deg); }
.dot-spinner__dot:nth-child(4)::before { animation-delay: -0.677s; }
.dot-spinner__dot:nth-child(5) { transform: rotate(180deg); }
.dot-spinner__dot:nth-child(5)::before { animation-delay: -0.6025s; }
.dot-spinner__dot:nth-child(6) { transform: rotate(225deg); }
.dot-spinner__dot:nth-child(6)::before { animation-delay: -0.528s; }
.dot-spinner__dot:nth-child(7) { transform: rotate(270deg); }
.dot-spinner__dot:nth-child(7)::before { animation-delay: -0.4535s; }
.dot-spinner__dot:nth-child(8) { transform: rotate(315deg); }
.dot-spinner__dot:nth-child(8)::before { animation-delay: -0.379s; }

@keyframes dot-spinner-pulse { 
  0%, 100% { transform: scale(0); opacity: 0.5; } 
  50% { transform: scale(1); opacity: 1; } 
}

/* 4. Universal Header & Responsive Navigation ------------------------------- */
.site-header {
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  z-index: 200;
  padding: calc(1.4rem + var(--sat)) 0 1.4rem 0;
  background: transparent;
  transition: background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}

.site-header.is-scrolled {
  background: rgba(245, 243, 238, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: calc(0.75rem + var(--sat)) 0 0.75rem 0;
  box-shadow: 0 4px 24px rgba(26,29,31,0.06);
  border-bottom: 1px solid var(--hairline);
}

.site-header .container { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
}

.brand-logo { 
  display: flex; 
  align-items: center; 
  gap: 0.65rem; 
  line-height: 1.1; 
}

.brand-copy { 
  display: flex; 
  flex-direction: column; 
}

.brand-mark { 
  width: 2.2rem; 
  height: 2.2rem; 
  border-radius: 50%; 
  flex: 0 0 auto; 
  object-fit: cover;
}

.brand-name { 
  font-family: var(--font-display); 
  font-weight: 600; 
  font-size: 1.15rem; 
  color: var(--ink); 
  transition: color 0.3s ease; 
}

.site-header:not(.is-scrolled) .brand-name { 
  color: var(--paper); 
}

.brand-title { 
  font-family: var(--font-mono); 
  font-size: 0.62rem; 
  letter-spacing: 0.16em; 
  text-transform: uppercase; 
  color: var(--concrete); 
}

.site-header:not(.is-scrolled) .brand-title { 
  color: rgba(245,243,238,0.7); 
}

.nav-menu { 
  display: flex; 
  align-items: center; 
  gap: clamp(1.2rem, 2.5vw, 2.2rem); 
}

.nav-menu a:not(.btn) {
  font-family: var(--font-mono); 
  font-size: 0.76rem; 
  letter-spacing: 0.05em; 
  text-transform: uppercase;
  color: var(--ink); 
  position: relative; 
  padding-bottom: 3px; 
  transition: color 0.3s ease;
}

.site-header:not(.is-scrolled) .nav-menu a:not(.btn) { 
  color: var(--paper); 
}

.nav-menu a:not(.btn)::after {
  content: ''; 
  position: absolute; 
  left: 0; 
  right: 100%; 
  bottom: 0; 
  height: 1px; 
  background: var(--rust);
  transition: right 0.25s ease;
}

.nav-menu a:not(.btn):hover::after, 
.nav-menu a.is-active::after { 
  right: 0; 
}

.nav-toggle { 
  display: none; 
  background: none; 
  border: none; 
  flex-direction: column; 
  gap: 5px; 
  padding: 0.5rem; 
  cursor: pointer;
  z-index: 201;
}

.nav-toggle span { 
  width: 22px; 
  height: 1.5px; 
  background: var(--ink); 
  transition: all 0.3s ease; 
}

.site-header:not(.is-scrolled) .nav-toggle span { 
  background: var(--paper); 
}

/* Header Specific Button Styling Rules */
.site-header:not(.is-scrolled) .nav-menu .btn {
  background-color: #111111 !important;
  color: #FFFFFF !important;
  border: 1.5px solid #111111 !important;
}

.site-header:not(.is-scrolled) .nav-menu .btn:hover {
  background-color: var(--rust) !important;
  border-color: var(--rust) !important;
  color: #FFFFFF !important;
}

.site-header.is-scrolled .nav-menu .btn {
  background-color: transparent !important;
  color: #111111 !important;
  border: 1.5px solid #111111 !important;
}

.site-header.is-scrolled .nav-menu .btn:hover {
  background-color: var(--rust) !important;
  border-color: var(--rust) !important;
  color: #FFFFFF !important;
}

/* 5. Universal Button Engine ----------------------------------------------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85em 1.7em;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--ink);
  background: transparent;      /* Default: Clean Outline System */
  color: var(--ink);             /* Default: Dark Text */
  border-radius: 2px;
  z-index: 1;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rust);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}

.btn span, 
.btn svg {
  display: inline-block;
  transition: transform 0.35s ease, color 0.35s ease;
}

.btn:hover {
  color: #FFFFFF !important;
  border-color: var(--rust) !important;
}

.btn:hover::before {
  transform: scaleX(1);
}

.btn:hover span, 
.btn:hover svg {
  transform: translateY(-2px);
}

/* Primary Solid Button Override */
.btn.primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn.primary:hover {
  border-color: var(--rust);
}

/* Ghost / Transparent Button Override */
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

/* Dark Section Button Override */
.btn.on-dark {
  border-color: var(--paper);
  background: transparent;
  color: var(--paper);
}

.btn.on-dark:hover {
  color: #FFFFFF;
}

.btn.small {
  padding: 0.65em 1.3em;
  font-size: 0.68rem;
  min-height: 36px;
}

/* Tags & Universal Badges */
.tag {
  font-family: var(--font-mono); 
  font-size: 0.7rem; 
  letter-spacing: 0.14em; 
  text-transform: uppercase;
  color: var(--rust); 
  display: inline-flex; 
  align-items: center; 
  gap: 0.5em;
}

.tag::before { 
  content: ''; 
  width: 18px; 
  height: 1px; 
  background: var(--rust); 
  display: inline-block; 
}

.scale-bar-divider {
  height: 10px;
  background-image: repeating-linear-gradient(to right, var(--hairline-strong) 0, var(--hairline-strong) 1px, transparent 1px, transparent 20px);
  border-bottom: 1px solid var(--hairline-strong);
}

/* 6. Hero Section --------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: calc(5rem + var(--sat));
  padding-bottom: 3rem;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media video,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(18, 21, 23, 0.75), rgba(26, 29, 31, 0.62));
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  color: var(--paper);
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.38);
}

.hero-eyebrow {
  color: rgba(245, 243, 238, 0.92);
  font-size: clamp(0.7rem, 1.2vw, 0.82rem);
  letter-spacing: 0.2em;
  margin-bottom: 1.35rem;
}

.hero-eyebrow::before {
  background: #E8B79C;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 6.5vw, 5.2rem);
  line-height: 1.08;
  margin-bottom: 0.45rem;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}

.hero-title {
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 1.35vw, 1.05rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 1.35rem;
}

.hero-desc {
  font-size: clamp(0.95rem, 1.4vw, 1.2rem);
  color: rgba(255, 255, 255, 0.92);
  max-width: 54ch;
  margin: 0 auto 2.4rem;
  line-height: 1.7;
}

/* 7. Statistics Strip ------------------------------------------------------ */
.stats-strip { 
  background: var(--ink); 
  padding: clamp(2.5rem, 6vw, 3.5rem) 0; 
}

.stats-grid { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 0; 
  max-width: 1100px; 
  margin: 0 auto; 
}

.stat-card { 
  text-align: center; 
  border-left: 1px solid rgba(245,243,238,0.18); 
  padding: 0 1.2rem; 
}

.stat-card:first-child { 
  border-left: 0; 
}

.stat-num { 
  font-family: var(--font-display); 
  font-weight: 500; 
  font-size: clamp(2rem, 4vw, 2.8rem); 
  color: var(--paper); 
  display: block; 
}

.stat-num .plus { 
  color: var(--rust); 
}

.stat-label { 
  font-family: var(--font-mono); 
  font-size: 0.7rem; 
  letter-spacing: 0.04em; 
  color: rgba(245,243,238,0.6); 
  margin-top: 0.5rem; 
  display: block; 
  text-transform: uppercase; 
}

/* 8. Common Section Headers ------------------------------------------------ */
.section-header { 
  margin-bottom: clamp(2.2rem, 5vw, 3.2rem); 
  max-width: 60ch; 
}

.section-header h2 { 
  font-family: var(--font-display); 
  font-weight: 500; 
  font-size: clamp(1.8rem, 3.6vw, 2.5rem); 
  margin: 0.5rem 0 0.6rem; 
  letter-spacing: -0.01em; 
  color: var(--ink);
}

.section-header p { 
  color: var(--concrete); 
  font-size: 0.98rem; 
}

/* 9. Featured Showcase ----------------------------------------------------- */
.featured-ref-box {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  background: var(--paper-raised);
  border: 1px solid var(--hairline-strong);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(26,29,31,0.06);
  border-radius: 4px;
}

.frb-image {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  display: block;
}

.frb-content {
  padding: clamp(2rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.frb-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rust);
  background: rgba(192, 107, 78, 0.08);
  padding: 0.35em 0.8em;
  margin-bottom: 1.2rem;
  border-left: 2px solid var(--rust);
}

.frb-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  color: var(--ink);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.frb-desc {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 1.8rem;
}

/* 10. Selected Work Grid & Filtering ---------------------------------------- */
.filter-bar { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 0.6rem; 
  margin-bottom: 2.4rem; 
}

.filter-btn {
  background: transparent; 
  border: 1px solid var(--hairline-strong); 
  border-radius: 2px;
  color: var(--ink-soft);
  font-family: var(--font-mono); 
  font-size: 0.7rem; 
  letter-spacing: 0.06em; 
  text-transform: uppercase;
  padding: 0.55em 1.1em; 
  transition: all 0.25s ease;
  min-height: 38px;
}

.filter-btn:hover, 
.filter-btn.active { 
  border-color: var(--rust); 
  background: var(--rust); 
  color: #FFFFFF; 
}

.work-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 1.6rem; 
}

.project-card { 
  position: relative; 
  overflow: hidden; 
  background: var(--ink); 
  aspect-ratio: 4/5;
  border-radius: 2px;
  transition: transform 0.4s ease, box-shadow 0.4s ease; 
  min-width: 0;
}

.project-card:hover { 
  transform: translateY(-4px); 
  box-shadow: 0 18px 36px rgba(26,29,31,0.18); 
}

.project-card img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  transition: transform 0.6s ease, filter 0.6s ease; 
  filter: saturate(0.92); 
}

.project-card:hover img { 
  transform: scale(1.06); 
  filter: saturate(1.05); 
}

.project-card .pc-overlay {
  position: absolute; 
  inset: 0; 
  background: linear-gradient(to top, rgba(26,29,31,0.92) 0%, rgba(26,29,31,0.15) 55%, transparent 75%);
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end; 
  padding: 1.3rem; 
  color: var(--paper);
  opacity: 0; 
  transition: opacity 0.3s ease;
}

.project-card:hover .pc-overlay,
.project-card:focus-within .pc-overlay { 
  opacity: 1; 
}

.pc-cat { 
  font-family: var(--font-mono); 
  font-size: 0.62rem; 
  letter-spacing: 0.1em; 
  text-transform: uppercase; 
  color: #E8B79C; 
  margin-bottom: 0.4em; 
}

.pc-name { 
  font-family: var(--font-display); 
  font-size: 1.15rem; 
  margin-bottom: 0.2em; 
}

.pc-meta { 
  font-family: var(--font-mono); 
  font-size: 0.65rem; 
  color: rgba(245,243,238,0.65); 
}

.view-all-wrap { 
  text-align: center; 
  margin-top: 2.8rem; 
}

/* 11. Design Philosophy Parallax Banner ------------------------------------- */
.philosophy-section.parallax-bg {
  position: relative;
  background: var(--ink) url('../images/pic01.jpg') center / cover no-repeat fixed;
  padding: clamp(4rem, 8vw, 6.25rem) 0;
}

.philosophy-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 29, 31, 0.82);
  z-index: 1;
}

.relative-z {
  position: relative;
  z-index: 2;
}

.philosophy-section .container { 
  max-width: 900px; 
  text-align: center; 
}

.philosophy-quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 3.4vw, 2.3rem);
  line-height: 1.4;
  margin: 1.4rem 0 1.6rem;
  color: #FFFFFF;
}

.philosophy-quote::before { content: '\201C'; color: var(--rust); }
.philosophy-quote::after { content: '\201D'; color: var(--rust); }

.philosophy-para {
  color: rgba(255, 255, 255, 0.78);
  max-width: 56ch;
  margin: 0 auto 2rem;
  font-size: 1.05rem;
  line-height: 1.7;
}

.tag.on-dark { color: #E8B79C; }
.tag.on-dark::before { background: #E8B79C; }

/* 12. About Preview ------------------------------------------------------- */
.about-preview-split { 
  display: grid; 
  grid-template-columns: 0.85fr 1.15fr; 
  gap: clamp(2rem, 6vw, 4.5rem); 
  align-items: center; 
}

.ap-photo { 
  border: 1px solid var(--hairline-strong); 
  padding: 10px; 
  background: var(--paper-raised); 
  border-radius: 2px;
}

.ap-photo img { 
  aspect-ratio: 3/4; 
  object-fit: cover; 
  width: 100%; 
}

.ap-info-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 1.2rem; 
  margin: 1.8rem 0; 
  border-top: 1px solid var(--hairline); 
  padding-top: 1.4rem; 
}

.ap-info-grid span { 
  display: block; 
}

.ap-info-grid .label { 
  font-family: var(--font-mono); 
  font-size: 0.62rem; 
  letter-spacing: 0.1em; 
  text-transform: uppercase; 
  color: var(--concrete); 
  margin-bottom: 0.4em; 
}

.ap-info-grid .value { 
  font-family: var(--font-display); 
  font-size: 1rem; 
  color: var(--ink); 
}

/* 13. Design Process Steps ------------------------------------------------- */
.process-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.process-step {
  background: var(--paper-raised);
  border: 1px solid var(--hairline-strong);
  border-radius: 4px;
  padding: 2rem 1.8rem;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.process-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--rust);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.process-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(26, 29, 31, 0.08);
  border-color: var(--rust);
}

.process-step:hover::before {
  opacity: 1;
}

.process-step .step-num {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--rust);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-block;
  background: rgba(192, 107, 78, 0.08);
  padding: 0.2rem 0.8rem;
  border-radius: 20px;
  margin-bottom: 0.8rem;
}

.process-step .step-icon {
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(192, 107, 78, 0.42);
  border-radius: 50%;
  color: var(--rust);
}

.process-step .step-icon svg { 
  width: 1.35rem; 
  height: 1.35rem; 
  fill: none; 
  stroke: currentColor; 
  stroke-width: 1.5; 
  stroke-linecap: round; 
  stroke-linejoin: round; 
}

.process-step h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.process-step p {
  font-size: 0.9rem;
  color: var(--concrete);
  line-height: 1.6;
  margin: 0;
}

/* 14. Journal / Articles ---------------------------------------------------- */
.journal-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 1.8rem; 
}

.journal-card { 
  display: block; 
  min-width: 0;
}

.jc-image { 
  aspect-ratio: 16/10; 
  overflow: hidden; 
  margin-bottom: 1.1rem; 
  background: var(--ink); 
  border-radius: 2px;
}

.jc-image img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  transition: transform 0.5s ease; 
}

.journal-card:hover .jc-image img { 
  transform: scale(1.05); 
}

.journal-card:hover .jc-title, 
.journal-card:hover .jc-read { 
  color: var(--rust); 
}

.jc-meta { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 0.45rem; 
  align-items: center; 
  font-family: var(--font-mono); 
  font-size: 0.63rem; 
  letter-spacing: 0.06em; 
  text-transform: uppercase; 
  color: var(--rust); 
  margin-bottom: 0.7rem; 
}

.jc-meta .dot-sep { 
  color: var(--hairline-strong); 
}

.jc-title { 
  font-family: var(--font-display); 
  font-weight: 600; 
  font-size: clamp(1.15rem, 2vw, 1.35rem); 
  color: var(--ink); 
  margin-bottom: 0.6rem; 
  transition: color 0.25s ease; 
}

.jc-excerpt { 
  font-size: 0.9rem; 
  color: var(--concrete); 
  margin-bottom: 0.9rem; 
  line-height: 1.65; 
}

.jc-read { 
  font-family: var(--font-mono); 
  font-size: 0.7rem; 
  text-transform: uppercase; 
  letter-spacing: 0.05em; 
  color: var(--ink); 
  border-bottom: 1px solid var(--rust); 
  padding-bottom: 2px; 
  transition: color 0.25s ease; 
}

/* 15. Contact CTA Section -------------------------------------------------- */
.contact-cta { 
  text-align: center; 
  background: var(--paper-raised); 
  border-top: 1px solid var(--hairline); 
  border-bottom: 1px solid var(--hairline); 
}

.contact-cta h2 { 
  font-family: var(--font-display); 
  font-weight: 500; 
  font-size: clamp(1.9rem, 4vw, 2.8rem); 
  margin: 0.6rem 0 1rem; 
}

.contact-cta p { 
  max-width: 52ch; 
  margin: 0 auto 2.2rem; 
  color: var(--ink-soft); 
}

.cta-btn-row { 
  display: flex; 
  gap: 1rem; 
  justify-content: center; 
  align-items: center;
  flex-wrap: wrap; 
}

.tag-status { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 0.6rem; 
  flex-wrap: nowrap; 
  white-space: nowrap; 
}

.tag-label { 
  font-size: 0.95rem; 
  font-weight: 600; 
  letter-spacing: 0.12em; 
  text-transform: uppercase; 
  color: var(--ink) !important; 
}

.status-dot { 
  display: inline-flex; 
  align-items: center; 
  gap: 0.4rem; 
  font-size: 0.8rem; 
  color: var(--ink-soft); 
}

.status-dot .dot { 
  width: 7px; 
  height: 7px; 
  border-radius: 50%; 
  background: #047fb8; 
  animation: blink-dot 2s infinite; 
}

@keyframes blink-dot { 
  0%, 100% { opacity: 1; } 
  50% { opacity: 0.4; } 
}

/* 16. Universal Footer ----------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(3rem, 7vw, 4.5rem) 0 calc(1.6rem + var(--sab)) 0;
  margin-top: 0;
}

.footer-top { 
  display: grid; 
  grid-template-columns: 1.3fr 0.8fr 1fr 1.1fr; 
  gap: clamp(2rem, 5vw, 3rem); 
  padding-bottom: 2.6rem; 
  border-bottom: 1px solid rgba(245,243,238,0.14); 
}

.footer-brand .brand-name { 
  color: var(--paper); 
  font-size: 1.3rem; 
}

.footer-brand .brand-title { 
  color: rgba(245,243,238,0.55); 
}

.footer-desc { 
  margin-top: 1rem; 
  color: rgba(245,243,238,0.6); 
  font-size: 0.9rem; 
  max-width: 32ch; 
}

.footer-col h4 { 
  font-family: var(--font-mono); 
  font-size: 0.68rem; 
  letter-spacing: 0.12em; 
  text-transform: uppercase; 
  color: #E8B79C; 
  margin-bottom: 1.2rem; 
}

.footer-col ul { 
  display: grid; 
  gap: 0.7rem; 
}

.footer-col a, 
.footer-col p { 
  color: rgba(245,243,238,0.72); 
  font-size: 0.92rem; 
}

.footer-col a:hover { 
  color: var(--rust); 
}

.social-lights { 
  display: flex; 
  gap: 0.9rem; 
  flex-wrap: wrap; 
  margin-top: 0.4rem; 
}

.light-btn { 
  position: relative; 
  height: 70px; 
  width: 46px; 
  display: flex; 
  align-items: flex-end; 
  justify-content: center; 
}

.light-btn .beam {
  position: absolute; 
  top: 0; 
  left: 50%; 
  transform: translateX(-50%);
  width: 90px; 
  height: 70px;
  clip-path: polygon(50% 0%, 25% 100%, 75% 100%);
  background: transparent; 
  pointer-events: none; 
  transition: background 0.35s ease;
}

.light-btn .lb-holder {
  position: relative; 
  z-index: 1;
  width: 40px; 
  height: 40px; 
  border-radius: 6px;
  display: flex; 
  align-items: center; 
  justify-content: center;
  border: 1px solid rgba(245,243,238,0.25); 
  color: rgba(245,243,238,0.55);
  background: rgba(245,243,238,0.03);
  transition: all 0.3s ease;
}

.light-btn .lb-holder svg { 
  width: 18px; 
  height: 18px; 
  fill: currentColor; 
}

.light-btn:hover .lb-holder { 
  border-color: var(--rust); 
  color: var(--rust); 
  background: rgba(192, 107, 78, 0.08); 
}

.light-btn:hover .beam { 
  background: linear-gradient(180deg, var(--rust-glow) 0%, rgba(192, 107, 78, 0) 75%); 
}

.footer-bottom { 
  margin-top: 1.6rem; 
  display: flex; 
  justify-content: space-between; 
  flex-wrap: wrap; 
  gap: 0.8rem;
  font-family: var(--font-mono); 
  font-size: 0.68rem; 
  letter-spacing: 0.05em; 
  text-transform: uppercase; 
  color: rgba(245,243,238,0.4); 
}

/* 17. Floating Utilities & Share Panel -------------------------------------- */
.floating-stack { 
  position: fixed; 
  right: calc(1.6rem + var(--sar)); 
  bottom: calc(1.6rem + var(--sab)); 
  z-index: 150; 
  display: flex; 
  flex-direction: column; 
  gap: 0.8rem; 
  align-items: flex-end; 
}

.back-to-top, 
.share-toggle {
  width: 46px; 
  height: 46px; 
  border-radius: 50%; 
  background: var(--ink); 
  color: var(--paper);
  border: 1px solid var(--ink); 
  display: flex; 
  align-items: center; 
  justify-content: center;
  box-shadow: 0 6px 18px rgba(26,29,31,0.25);
  opacity: 0; 
  transform: translateY(10px) scale(0.9); 
  pointer-events: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.back-to-top.is-visible, 
.share-toggle.is-visible { 
  opacity: 1; 
  transform: translateY(0) scale(1); 
  pointer-events: auto; 
}

.back-to-top:hover, 
.share-toggle:hover { 
  background: var(--rust); 
  border-color: var(--rust); 
}

.back-to-top svg, 
.share-toggle svg { 
  width: 16px; 
  height: 16px; 
}

.share-panel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-end;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.share-panel.is-open {
  max-height: 260px;
  opacity: 1;
  margin-bottom: 0.4rem;
}

.share-panel a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1.2rem 0.45rem 0.9rem;
  border-radius: 40px;
  background: var(--paper-raised);
  border: 1px solid var(--hairline-strong);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.share-panel a:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: translateX(-4px);
}

.share-panel a svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: currentColor;
}

/* 18. Decorative Elements --------------------------------------------------- */
.scale-divider-wrap { 
  display: flex; 
  align-items: center; 
  gap: 1rem; 
}

.scale-divider-wrap .line { 
  flex: 1; 
}

.scale-divider-wrap .label { 
  font-family: var(--font-mono); 
  font-size: 0.65rem; 
  color: var(--concrete); 
  white-space: nowrap; 
}

/* 19. Scroll Animation (Reveal System) ------------------------------------- */
.reveal-on-scroll { 
  opacity: 0; 
  transform: translateY(18px); 
  transition: opacity 0.7s ease, transform 0.7s ease; 
}

.reveal-on-scroll.is-visible { 
  opacity: 1; 
  transform: translateY(0); 
}

@media (prefers-reduced-motion: reduce) { 
  .reveal-on-scroll { 
    opacity: 1; 
    transform: none; 
  } 
}

/* ==========================================================================
   20. Universal Responsive Breakpoints Engine
   ========================================================================== */

/* Ultra Wide Displays & 4K Monitors (1600px and up) */
@media (min-width: 1600px) {
  :root {
    --container-max: 1480px;
  }
  html {
    font-size: 18px;
  }
}

/* Large Desktop / Laptops (1200px to 1599px) */
@media (max-width: 1200px) {
  .work-grid, 
  .journal-grid, 
  .process-rail {
    gap: 1.25rem;
  }
}

/* Tablets Landscape & Small Laptops (992px to 1199px) */
@media (max-width: 992px) {
  .featured-ref-box { 
    grid-template-columns: 1fr; 
  }
  .frb-image { 
    min-height: 280px; 
    max-height: 400px;
  }
  .work-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
  .stats-grid { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 2rem 1.5rem; 
  }
  .about-preview-split { 
    grid-template-columns: 1fr; 
  }
  .ap-photo { 
    max-width: 380px; 
    margin: 0 auto;
  }
  .process-rail { 
    grid-template-columns: repeat(2, 1fr); 
  }
  .footer-top { 
    grid-template-columns: 1fr 1fr; 
  }
  .journal-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
  .philosophy-section.parallax-bg { 
    background-attachment: scroll;
  }
}

/* Mobile Devices & Tablets Portrait (768px and below) */
@media (max-width: 768px) {
  .nav-menu { 
    position: fixed; 
    inset: 0 0 0 auto; 
    width: min(85vw, 320px); 
    background: var(--paper); 
    flex-direction: column;
    align-items: flex-start; 
    justify-content: flex-start; 
    padding: calc(5rem + var(--sat)) 2rem 2rem; 
    gap: 1.6rem;
    transform: translateX(100%); 
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); 
    box-shadow: -10px 0 30px rgba(0,0,0,0.15); 
    z-index: 200;
  }

  .nav-menu.is-open { 
    transform: translateX(0); 
  }

  .nav-menu a:not(.btn) { 
    color: var(--ink) !important; 
    font-size: 0.9rem; 
  }

  .nav-toggle { 
    display: flex; 
  }

  .nav-toggle span { 
    background: var(--ink) !important; 
  }

  .nav-menu .btn {
    width: 100%;
    border-color: var(--ink) !important;
    color: var(--ink) !important;
  }

  .work-grid, 
  .journal-grid { 
    grid-template-columns: 1fr; 
  }

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

  .footer-top { 
    grid-template-columns: 1fr; 
    gap: 2rem; 
  }

  .process-rail { 
    grid-template-columns: 1fr; 
  }

  .cta-btn-row { 
    flex-direction: column; 
    align-items: stretch; 
  }

  .floating-stack { 
    right: calc(0.8rem + var(--sar)); 
    bottom: calc(0.8rem + var(--sab)); 
  }

  .back-to-top, 
  .share-toggle { 
    width: 42px; 
    height: 42px; 
  }

  .hero h1 { 
    font-size: clamp(2.1rem, 9vw, 3.2rem); 
  }

  .ap-info-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
}

/* Small Smartphone Devices (480px and below) */
@media (max-width: 480px) {
  .tag-status { 
    flex-wrap: wrap; 
  }
  .tag-label { 
    font-size: 0.8rem; 
  }
  .status-dot { 
    font-size: 0.7rem; 
  }
  .stats-grid { 
    grid-template-columns: 1fr; 
  }
  .stat-card { 
    border-left: none; 
    border-bottom: 1px solid rgba(245,243,238,0.18); 
    padding: 1rem 0; 
  }
  .stat-card:last-child { 
    border-bottom: none; 
  }
  .frb-content {
    padding: 1.5rem 1.25rem;
  }
  .btn {
    width: 100%;
  }
}

/* Touch Input Specific Accessibility Adjustments */
@media (hover: none) and (pointer: coarse) {
  .btn, .filter-btn, .light-btn {
    min-height: 48px; /* Touch Target Optimization */
  }
  .project-card .pc-overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(26,29,31,0.95) 0%, rgba(26,29,31,0.2) 60%, transparent 80%);
  }
}