/* ===================================
   Elvira Site - Main Stylesheet
   =================================== */

/* Font Loading
   ========================================================================== */
/* Removed legacy font faces (Inter, Newsreader, Sohne) — site now uses
   Instrument Sans/Serif exclusively. */

/* Instrument Sans (variable) */
@font-face {
  font-family: "Instrument Sans";
  font-display: block;
  src: url(fonts/InstrumentSans-Var.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Instrument Sans";
  font-display: block;
  src: url(fonts/InstrumentSans-ItalicVar.woff2) format("woff2");
  font-weight: 100 900;
  font-style: italic;
}

/* Instrument Serif */
@font-face {
  font-family: "Instrument Serif";
  font-display: block;
  src: url(fonts/InstrumentSerif-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Instrument Serif";
  font-display: block;
  src: url(fonts/InstrumentSerif-Italic.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
}

/* CSS Variables
   ========================================================================== */
:root {
  /* Colors - Light Theme */
  --bg: #F5F5F5;
  --fg: #000000;
  --text-color: #000000;

  /* Monochrome scale - Light theme */
  --mono1: #f0f0f0;
  --mono2: #e5e5e5;
  --mono3: #dadada;
  --mono4: #d0d0d0;
  --mono5: #c5c5c5;
  --mono6: #bababa;
  --mono7: #a0a0a0;
  --mono8: #888888;
  --mono9: #666666;
  --mono10: #555555;
  --mono11: #444444;
  --mono12: #333333;

  /* Layout */
  --page-width: 1072px;
  --content-width: 640px;
  --body-margin-left: max(24px, env(safe-area-inset-left));
  --body-margin-right: max(24px, env(safe-area-inset-right));
  --page-top: 128px;

  /* Typography */
  --font-fallback: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  --font-display: "Instrument Serif", var(--font-fallback);
  --font-sans: "Instrument Sans", var(--font-fallback);
  --font-serif: "Instrument Serif", "Times", serif;

  /* Spacing */
  --gap: 8px;
  --gap-2x: 16px;
  --gap-3x: 24px;
  --gap-4x: 32px;
  --gap-6x: 48px;
  --gap-8x: 64px;

  /* Font sizes */
  --text-2xl: 30px;
  --text-xl: 24px;
  --text-l: 20px;
  --text: 16px;
  --text-s: 14px;

  /* Line heights */
  --leading-xl: 40px;
  --leading-l: 32px;
  --leading: 28px;
  --leading-s: 20px;

  /* Transitions */
  --transition-fast: 100ms;
  --transition-med: 160ms;
  --transition-xx: 240ms;
  --transition-long: 480ms;

  /* Misc */
  --radius: 8px;
  --scrollbar-color: var(--mono7);
}

/* Base/Reset Styles
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-padding-top: calc(var(--gap-2x));
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-y: scroll;
  min-height: 100%;
}

/* Custom Scrollbar
   ========================================================================== */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--mono5) transparent;
}

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-thumb {
  min-height: 44px;
  min-width: 44px;
  background-color: var(--scrollbar-color);
  border-radius: 16px;
  border: 5px solid transparent;
  background-clip: padding-box;
}

@media (hover: hover) {
  ::-webkit-scrollbar-thumb:hover {
    --scrollbar-color: var(--mono7);
  }
}

::-webkit-scrollbar-thumb:active {
  --scrollbar-color: var(--mono9);
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* Layout
   ========================================================================== */
main {
  min-height: calc(100vh);
  position: relative;
  padding: var(--page-top) 0;
  margin: 0 auto;
  max-width: var(--page-width);
  padding-left: var(--body-margin-left);
  padding-right: var(--body-margin-right);
}

/* Typography
   ========================================================================== */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  /* Remove 'case' to avoid oversized punctuation in mixed case */
  font-feature-settings: "kern", "calt";
  margin-bottom: var(--gap-3x);
}

h1 {
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.2;
  margin-bottom: var(--gap-4x);
}

h2 {
  font-size: clamp(20px, 3.2vw, 28px);
  line-height: var(--leading-l);
  margin-top: var(--gap-8x);
  margin-bottom: var(--gap-2x);
}

p {
  font-size: var(--text);
  line-height: var(--leading);
  letter-spacing: 0;
  font-feature-settings: "kern", "frac", "kern", "ss02";
  margin-bottom: var(--gap-2x);
}

/* Remove margin from paragraphs that only contain read-more links */
p:has(.read-more) {
  margin-bottom: 0;
  margin-top: 0;
}

em,
i {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: calc(1em + 1px);
  color: var(--fg);
}

/* Links
   ========================================================================== */
a {
  color: var(--fg);
  position: relative;
  transition: var(--transition-xx);
  transition-property: text-decoration-color;
  text-decoration: underline;
  text-decoration-color: var(--mono8);
  text-decoration-thickness: 1px;
  text-underline-offset: 2.5px;
  cursor: pointer;
  outline-offset: 2px;
}

@media (hover: hover) {
  a:hover {
    transition: var(--transition-fast);
    text-decoration-color: var(--mono11);
  }
}

/* External link indicator */
a[href^="http"]:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  transform: translateY(-1px);
  mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.6928 18.3072C5.30227 17.9167 5.30227 17.2835 5.69279 16.893L15.9857 6.6001L9.5999 6.6001C9.04762 6.6001 8.5999 6.15238 8.5999 5.6001C8.5999 5.04781 9.04762 4.6001 9.59991 4.6001L18.3999 4.6001C18.6651 4.6001 18.9195 4.70545 19.107 4.89299C19.2945 5.08053 19.3999 5.33488 19.3999 5.6001L19.3999 14.4001C19.3999 14.9524 18.9522 15.4001 18.3999 15.4001C17.8476 15.4001 17.3999 14.9524 17.3999 14.4001L17.3999 8.01432L7.10701 18.3072C6.71649 18.6977 6.08332 18.6977 5.6928 18.3072Z' fill='currentColor'/%3E%3C/svg%3E%0A")
    no-repeat;
  background-color: var(--mono8);
}

/* Sections
   ========================================================================== */
section {
  padding: var(--gap-6x) 0;
  position: relative;
}

section:not([hidden]) + section:not([hidden]) {
  border-top: 1px solid var(--mono5);
}

/* When Archive is revealed, add a divider above it */
#read-more-section:not([hidden]) {
  border-top: 1px solid var(--mono5);
}

/* Component Styles
   ========================================================================== */

/* Special Text Styles */
.kicker {
  color: var(--mono11);
  font-style: italic;
  font-family: var(--font-sans);
  font-size: calc(1em + 1px);
  margin-top: var(--gap);
  margin-bottom: var(--gap-2x);
}

.lede {
  margin-top: var(--gap-2x);
  margin-bottom: var(--gap-3x);
  max-width: 70ch;
  color: var(--mono12);
}

.read-more {
  display: inline-block;
  margin-top: 0;
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--mono8);
  transition: var(--transition-xx);
}

@media (hover: hover) {
  .read-more:hover {
    text-decoration-color: var(--mono11);
  }
}

/* Archive list under Read More */
.archive-list {
  list-style: none;
  padding: 0;
  margin: var(--gap-2x) 0 var(--gap-3x);
}
.archive-list li { margin-bottom: var(--gap); }

/* Archive items styled like compact projects */
.archive-items { margin-top: var(--gap-2x); display: grid; gap: var(--gap-3x); }
.archive-item .archive-title { margin: 0 0 var(--gap); }
.archive-item a { color: var(--fg); }

/* Archive titles use body font to match read-more vibe */
.archive-title, .archive-title a, .archive-title span {
  font-family: var(--font-sans);
  font-weight: 400;
}

/* Plain variant: same vibe, no underline */
.read-more-plain {
  color: var(--fg);
  text-decoration: none;
}

/* Media/Images */
figure {
  margin: var(--gap-4x) 0;
}

.media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--mono5);
  background: var(--mono2);
}

/* Videos styled like images */
.media video,
.media-grid video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--mono5);
  background: var(--mono2);
}

figcaption {
  margin-top: var(--gap);
  color: var(--mono9);
  font-size: var(--text-s);
  line-height: var(--leading-s);
}

/* Media grid for galleries */
.media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-3x);
  margin-top: var(--gap-3x);
}

@media (max-width: 768px) {
  .media-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-2x);
  }
}

/* Hero Section Special Styling */
.hero-section {
  padding-top: var(--gap-6x);
  padding-bottom: var(--gap-6x);
  /* Shared hero sizing so subtitle width can relate to title */
  --elvira-size: clamp(40px, 6vw, 64px);
}

.hero-content {
  display: flex;
  align-items: center;
  gap: var(--gap-8x);
  max-width: 1200px;
  margin: 0 auto;
}

.hero-text {
  flex: 1;
  min-width: 0;
}

.hero-greeting {
  font-family: var(--font-display);
  font-size: var(--elvira-size);
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: var(--gap-2x);
  letter-spacing: -0.02em;
}

.hero-title {
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: var(--gap-3x);
  letter-spacing: -0.01em;
  font-feature-settings: "kern", "calt";
  font-family: var(--font-sans);
  /* Approximate: first line ~ 2.5 × width of "Elvira" */
  max-width: calc(8.25 * var(--elvira-size));
}

.hero-title span {
  display: block;
}

.hero-intro {
  margin-top: var(--gap-3x);
  color: var(--mono9);
  font-style: italic;
  font-family: var(--font-serif);
  font-size: calc(1em + 2px);
}

.hero-image {
  flex: 0 0 auto;
  margin: 0;
}

/* Cutout Image Effect */
.image-cutout {
  position: relative;
  width: 400px;
  height: 400px;
  clip-path: polygon(
    20% 0%,
    80% 0%,
    100% 20%,
    100% 60%,
    95% 80%,
    80% 90%,
    60% 95%,
    40% 100%,
    20% 95%,
    5% 85%,
    0% 60%,
    0% 30%,
    10% 10%
  );
  background: var(--mono2);
  overflow: hidden;
}

.image-cutout img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  border-radius: 0;
  background: transparent;
}

/* Tandem Section Special Styling */
.tandem-section {
  padding-top: var(--gap-6x);
  padding-bottom: var(--gap-6x);
}

/* Pull the first project section closer to the divider */
.hero-section + .tandem-section {
  padding-top: var(--gap-3x);
}

.tandem-content {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-6x);
  max-width: 1200px;
  margin: 0 auto;
}

/* Mirror layout: image left, text right */
.tandem-content.reverse {
  flex-direction: row-reverse;
}

.tandem-text {
  flex: 1;
  min-width: 0;
}

.tandem-text h2 {
  margin-top: 0;
  font-size: clamp(24px, 3.6vw, 34px);
  line-height: 1.2;
}

/* Make the first section heading (Two Cents Club) a touch larger */
.hero-section + .tandem-section .tandem-text h2 {
  font-size: clamp(26px, 4vw, 38px);
}

/* First project: reduce column gap for a wider text column */
.hero-section + .tandem-section .tandem-content {
  gap: var(--gap-4x);
}

/* First project: remove extra space between kicker and description */
.hero-section + .tandem-section .tandem-text .kicker { margin-bottom: calc(var(--gap) / 2); }
.hero-section + .tandem-section .tandem-text .kicker + .lede { margin-top: 0; }

.tandem-image {
  flex: 0 0 auto;
  margin: 0;
  width: 440px;
}

.tandem-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--mono5);
  background: var(--mono2);
}

/* Footer Panels (Contact + Fun)
   ========================================================================== */
.footer-panels {
  padding-top: var(--gap-6x);
  padding-bottom: var(--gap-6x);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-8x);
  align-items: start;
}

.panel h2 { margin-top: 0; }

.cta-btn {
  display: inline-block;
  padding: 10px 14px;
  font: inherit;
  color: var(--fg);
  background: var(--mono3);
  border: 1px solid var(--mono5);
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-xx), border-color var(--transition-xx);
}

@media (hover: hover) {
  .cta-btn:hover {
    background: var(--mono4);
    border-color: var(--mono6);
  }
}

.fun-secret[hidden] { display: none; }
.fun-secret { margin-top: var(--gap-3x); }

/* Confetti canvas overlay */
#confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

/* Animations
   ========================================================================== */
[data-animate] {
  --stagger: 0;
  --delay: 120ms; /* per-item by default */
}

@media (prefers-reduced-motion: no-preference) {
  [data-animate] {
    animation: enter 0.6s both;
    animation-delay: calc(var(--stagger) * var(--delay) + var(--start));
  }
}

/* Start time baseline */
main > section { --start: 0ms; }

/* Gentle cascade by section (CSS‑only):
   sections 1–2 still stagger by item; sections 3+ animate as a unit. */
main > section:nth-of-type(1) { --start: 0ms; }
main > section:nth-of-type(2) { --start: 80ms; }
main > section:nth-of-type(3) { --start: 160ms; }
main > section:nth-of-type(4) { --start: 240ms; }
main > section:nth-of-type(5) { --start: 320ms; }
main > section:nth-of-type(6) { --start: 400ms; }

/* From section 3 onward, animate items together (no per-item delay) */
/* Keep per-item stagger through Pixel; disable for Contact/Archive */
main > section:nth-of-type(n+5) [data-animate] { --delay: 0ms; }

@keyframes enter {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Responsive Design
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-content {
    flex-direction: column;
    text-align: center;
    gap: var(--gap-6x);
  }

  .hero-text {
    max-width: 600px;
  }

  .image-cutout {
    width: 350px;
    height: 350px;
  }

  .tandem-content {
    flex-direction: column;
    text-align: center;
    gap: var(--gap-4x);
    align-items: center;
  }

  /* Ensure reverse variant also stacks on mobile */
  .tandem-content.reverse {
    flex-direction: column;
  }

  .tandem-text {
    max-width: 600px;
  }

  .tandem-image {
    width: 100%;
    max-width: 600px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-4x);
    text-align: center;
  }
}

@media (max-width: 768px) {
  main {
    max-width: var(--content-width);
    padding-top: var(--gap-6x);
  }

  section {
    padding: var(--gap-4x) 0;
  }

  [data-animate] { --delay: 60ms; }
  main > section:nth-of-type(n+5) [data-animate] { --delay: 0ms; }

  .hero-greeting {
    font-size: clamp(32px, 8vw, 48px);
  }

  .hero-title {
    font-size: clamp(18px, 4.5vw, 24px);
  }

  .image-cutout {
    width: 280px;
    height: 280px;
  }

  .hero-content {
    gap: var(--gap-4x);
  }

  /* Tighter columns on small screens */
  .tandem-text {
    max-width: 520px;
  }
  .tandem-image {
    max-width: 520px;
  }
}