/* =====================================================
   Surya Thalli — Sub-page shared styles
   pages.css
   ===================================================== */


/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* --- Design tokens --- */
:root {
  --gold:       #c9a84c;
  --accent:     #e2b84a;   /* brighter yellow for page titles */
  --accent-dim: rgba(226, 184, 74, 0.45);
  --font-display: 'Cormorant Garamond', serif;
  --font-arch:    'Raleway', sans-serif;
}


/* --- Base --- */
html, body {
  height: 100%;
  color: var(--accent);
}

/* --- Full-screen background image ---
   Each page sets --bg-image and --overlay in its own <style> block. */
.bg {
  position: fixed;
  inset: 0;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center center;
  z-index: 0;
}

/* Dark overlay — opacity controlled per page via --overlay */
.bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 3, var(--overlay, 0.70));
}

/* --- Grain texture overlay --- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.10;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}


/* --- Back-home name link ---
   Painted name image, top-left, returns to index.html on click. */
.back-home {
  z-index: 10;
  position: fixed;
  top: 1.2rem;
  left: 1.8rem;
  z-index: 10;
  text-decoration: none;
  display: block;
  transition: opacity 0.3s ease;
}

.back-home img {
  width: clamp(180px, 22vw, 300px);
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
}

.back-home:hover {
  opacity: 0.8;
}


/* --- Page layout --- */
.page {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100vh;
  padding: 0 10vw;
}


/* --- Section label ---
   Small uppercase prefix above the title, e.g. "— WORK". */
.page-label {
  font-family: var(--font-arch);
  font-weight: 100;
  font-size: clamp(0.6rem, 1vw, 0.75rem);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin-bottom: 1.2rem;
}


/* --- Page title ---
   Large, thin Josefin Sans — architectural drafting quality. */
.page-title {
  font-family: var(--font-arch);
  font-weight: 100;
  font-size: clamp(3.5rem, 10vw, 9rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 2.5rem;
}


/* --- Rule --- */
.page-rule {
  width: clamp(60px, 8vw, 120px);
  height: 1px;
  background: var(--accent-dim);
  margin-bottom: 2rem;
}


/* --- Placeholder note ---
   Small italic line; will be replaced with real content later. */
.page-note {
  font-family: var(--font-arch);
  font-weight: 100;
  font-size: clamp(0.65rem, 1.1vw, 0.8rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-dim);
}


@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* --- Mobile font weight boost ---
   Raleway 300 is too thin on small screens — bump key elements to 400. */
@media (max-width: 767px) {
  .page-label,
  .page-title,
  .page-note,
  .page-rule + * {
    font-weight: 400;
  }
}


/* --- Contact bar ---
   Fixed at the bottom of every sub-page. z-index 101 puts it above the
   grain overlay (z-index 100) so it's always legible. */
.contact-bar {
  position: fixed;
  bottom: 1.6rem;
  left: 2rem;
  z-index: 101;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  pointer-events: auto;
  white-space: nowrap;
  animation: fadeIn 0.7s ease-out 0.5s both;
  background: rgba(8, 7, 3, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
}

.contact-bar a {
  color: #c9a84c;
  text-decoration: none;
  display: flex;
  align-items: center;
  line-height: 0;
  transition: color 0.3s ease;
}

.contact-bar a svg {
  width: 24px;
  height: 24px;
}

.contact-bar a:hover,
.contact-bar a:focus {
  color: #e2c96a;
}