/* =========================================================
   FASTER, CLEANER, SAME VIBE
   ========================================================= */

/* Consider moving these to <link rel="preconnect"> + <link href=...> in HTML for better perf */
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Candal&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

/* -------------------- TOKENS -------------------- */
:root {
  --white: #fff;
  --black: #000;
  --link: #9B4F96;
  --link-hover: #D60270;

  --blue: #0038A8;
  ---purple: #9B4F96;
  ---pink: #D60270;

  --shadow: 0 10px 20px rgba(0,0,0,.3);
  --radius: 12px;
}

/* -------------------- RESET / BASE -------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  height: 100%;
  overflow-x: hidden;
  background-color: var(--black);
  color: var(--white);
  font-family: Helvetica, Arial, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", sans-serif;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration-thickness: .08em; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

/* -------------------- LAYOUT (horizontal scroll rig) -------------------- */
div.scroll-container {
  height: 100vh;
  position: relative;
  overflow: hidden;
  overscroll-behavior: none;
}

div.horizontal-scroll {
  display: flex;
  height: 100vh;
  width: 400vw; /* 4 panels x 100vw */
  position: fixed;
  inset: 0;
  will-change: transform;
}

.panel {
  position: relative;
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  color: var(--black);
}

/* On phones: just stack vertically */
@media (max-width: 768px) {
  .horizontal-scroll {
    display: block;    /* stop flex row */
    width: auto;
    height: auto;
    position: static;  /* let it flow normally */
    transform: none !important;
  }

  .panel {
    width: 100%;
    height: auto;      /* panel height adjusts to content */
    min-height: 100svh; /* still fills screen if you want */
  }
}

.panel.black,
.black {
  background-color: var(--black);
  color: var(--white);
  border: 1px solid var(--black);
}

/* -------------------- HEADINGS -------------------- */
h1 {
  font-style: italic;
  text-transform: lowercase;
  padding: 5px 8px;
  margin: 10px;
  display: inline-block;
  font-size: 3rem;
  max-height: 100px;

  border: 5px solid var(--pink, #D60270);
  box-shadow:
    0 0 0 2px var(--blue, #0038A8),
    0 0 0 4px var(--purple, #9B4F96),
    0 0 0 6px var(--pink, #D60270);
  /* Fixed positioning when desired */
  position: absolute;
  top: 10px;        /* FIX: added units */
  left: 10px;       /* FIX: added units */
  z-index: 2;
}

h2 {
  font-family: "Candal", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: inherit;
}

.description {
  font-family: "Candal", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:3.0em;
  color: inherit;
}

/* -------------------- HEADER IMG -------------------- */
header > img {
  max-width: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50%;
}

/* -------------------- VERTICAL LABEL -------------------- */
.vertical-label {
  writing-mode: vertical-rl;
  text-orientation: upright;
  position: absolute;
  top: 0;
  left: 10px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  max-width: 10%;
  text-transform: lowercase;
  font-style: italic;
  font-size: 2rem;
}

/* -------------------- CONTENT -------------------- */
.content { margin-left: 10%; font-size: 1.1em; }
.content p { padding: 10px; }

.flex { display: flex; flex-direction: row; flex-wrap: wrap; }

body#home section.panel img {
  max-width: 200px;
  margin: auto;
  
}

section.panel{   font-family: "Special Elite", system-ui;
  font-weight: 400;
  font-style: normal;
line-height: 1.5;
  
}
/* -------------------- FIGURES -------------------- */
figure { display: inline-block; }
figcaption { text-align: center; }

/* -------------------- MAIN / ARTICLE / TYPE -------------------- */
main { clear: both; margin: 100px auto; width: 50%; }
article { margin-bottom: 30px; }
p, blockquote { padding: 10px; }
blockquote { font-style: italic; }

/* Details/summary markers (cross-browser friendly) */
summary { font-weight: bold; cursor: pointer; list-style: none; }
summary::marker { content: "+ "; }
details[open] > summary::marker { content: "- "; }

/* -------------------- MEDIA -------------------- */
iframe {
  width: 100%;
  aspect-ratio: 16 / 9;  /* better than height:auto for embeds */
  border: 0;
}

/* -------------------- POLAROID -------------------- */
.polaroid {
  background: var(--white);
  color: #333;
  padding: 10px 10px 40px;
  width: max-content;
  box-shadow: var(--shadow);
  border: 1px solid #ccc;
  display: inline-block;
  text-align: center;
  font-family: 'Patrick Hand', cursive, sans-serif;
  margin: 1rem;
}
.polaroid img {
  
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;      /* never taller than screen */
  object-fit: contain;   /* scale nicely inside frame */
  
}

.polaroid > figcaption {
  margin-top: 10px;
  font-size: 1rem;
  transform: rotate(-1.5deg);
  color: #333;
}

/* Smaller polaroids on #home */
#home .polaroid img {
  width: 200px !important;
  height: 100px !important;
  object-fit: contain;
}

/* -------------------- TAPED EFFECT -------------------- */
.taped {
  position: relative;
  background: var(--white);
  color: #333;
  padding: 10px 10px 40px;
  width: max-content;
  box-shadow: var(--shadow);
  border: 1px solid #ccc;
  display: inline-block;
  text-align: center;
  font-family: 'Patrick Hand', cursive, sans-serif;
  margin: 2rem;
  transform: rotate(-2deg);
}
.taped figcaption {
  margin-top: 10px;
  font-size: 1rem;
  transform: rotate(-1.5deg);
  color: #333;
}
.taped::before,
.taped::after {
  content: '';
  position: absolute;
  width: 60px;
  height: 20px;
  background: rgba(255,255,255,.7);
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
  transform: rotate(-10deg);
  z-index: 10;
}
.taped::before { top: -10px; left: -10px; }
.taped::after  { top: -10px; right: -10px; transform: rotate(10deg); }

/* -------------------- FOOTER -------------------- */
footer {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  text-align: center;
  padding: 1rem;
  font-size: 1rem;
  border-top: 2px solid var(--white);
  height: 50px;
}
menu {
  display: block;
  list-style: none;
  text-align: left;
  text-transform: lowercase;
}
li { display: inline; padding: 5px; }

/* Footer nav colors (FIX: '#white' -> 'white') */
nav#footer a { color: white !important; }
nav#footer a:hover { color: white !important; }

/* -------------------- MISC -------------------- */
footer iframe { width: 100%; height:200px; }
img#cover { height: 100vh; box-shadow: 5px 5px 10px var(--white); }
#home { background-color: var(--black); }

/* Theme hook for gallery panels */
.gallery .panel { background-color: var(--black); color: var(--white);  border: 1px solid black;  }

.gallery{ z-index:2;}
/* -------------------- REDUCED MOTION -------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}