/* =====================================================
   RAW1ST Portfolio — Old-School Skate 90s
   Palette:
     --paper     #F2ECD8   (bone / grip-tape paper)
     --paper-2   #E8DFC2   (deeper paper, alt sections)
     --ink       #121212   (deck black)
     --ink-2     #000000   (true black, headers/footer)
     --yellow    #FFD400   (deck yellow)
     --orange    #FF4E00   (spray orange)
     --pink      #FF2E7E   (highlighter pink)
     --teal      #00C2B2   (grip teal)
   ===================================================== */

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

:root {
  --paper:    #F2ECD8;
  --paper-2:  #E8DFC2;
  --ink:      #121212;
  --ink-2:    #000000;
  --yellow:   #FFD400;
  --orange:   #FF4E00;
  --pink:     #FF2E7E;
  --teal:     #00C2B2;
  --line-green: #06C755;
  --radius: 4px;
  --hairline: 3px solid var(--ink);
  --transition: 0.2s ease;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Space Mono', 'Trirong', 'Courier New', monospace;
  font-weight: 400;
  background-color: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Grain overlay — sits above everything, non-interactive */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  background-image: var(--noise);
  background-size: 180px 180px;
  opacity: 0.06;
  mix-blend-mode: multiply;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ── Typography ──────────────────────────────────── */
h1, h2 {
  font-family: 'Anton', 'Trirong', 'Arial Black', sans-serif;
  font-weight: 400;
  color: var(--ink);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  -webkit-text-stroke: 1.5px var(--ink);
}

h1 { font-size: clamp(3.6rem, 11vw, 9rem); line-height: 1.2; font-weight: 600; letter-spacing: 0; }
h2 { font-size: clamp(2.6rem, 7vw, 5.6rem); font-weight: 400; }

em {
  font-family: 'Bungee', 'Anton', 'Arial Black', sans-serif;
  font-style: normal;
  font-weight: 400;
  color: var(--pink);
  text-transform: uppercase;
  -webkit-text-stroke: 0;
}

.hero-title em { font-weight: 400; }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'Space Mono', 'Trirong', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  padding: 0.45em 0.9em;
  transform: rotate(-2deg);
  box-shadow: 4px 4px 0 var(--yellow);
}
.section-label::before {
  content: '\2726';
  color: var(--yellow);
}

/* Ornamental divider — skate deck bolt-strip */
.ornament {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.3rem 0 1.7rem;
  max-width: 340px;
}
.ornament-line {
  flex: 1;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--ink) 0px, var(--ink) 8px,
    transparent 8px, transparent 14px
  );
}
.ornament-mark {
  color: var(--orange);
  font-size: 1.1rem;
  line-height: 1;
  transform: rotate(15deg);
}

/* ── Layout helpers ──────────────────────────────── */
.container {
  width: min(92%, 1200px);
  margin-inline: auto;
}

/* ── Buttons ─────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  margin-top: 2.2rem;
  padding: 0.95rem 2.6rem;
  border: 3px solid var(--ink);
  color: var(--ink);
  background: var(--yellow);
  font-family: 'Space Mono', 'Trirong', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn-primary:hover {
  background: var(--orange);
  color: var(--paper);
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ink);
}
.btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

/* ── Skate sticker CTA (hero) ───────────────────────
   90s deck-sticker treatment: chunky border, hard offset
   shadow, grip-tape texture, slight peel/rotation.        */
.btn-skate {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.8rem;
  padding: 1.47rem 3.36rem;
  overflow: hidden;
  background: var(--pink);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  font-family: 'Bungee', 'Kanit', sans-serif;
  font-size: 1.23rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  box-shadow: 6px 6px 0 var(--ink), 11px 11px 0 var(--yellow);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease;
}

/* Grip-tape dot texture, clipped to the sticker */
.btn-skate::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(18,18,18,0.6) 1px, transparent 1.4px);
  background-size: 6px 6px;
  opacity: 0.14;
  pointer-events: none;
}

.btn-skate-icon {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  transition: transform 0.5s cubic-bezier(.34,1.56,.64,1);
}

.btn-skate span {
  position: relative;
  z-index: 1;
}

.btn-skate:hover {
  background: var(--yellow);
  transform: rotate(0deg) translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--ink), 15px 15px 0 var(--teal);
}
.btn-skate:hover .btn-skate-icon {
  transform: rotate(360deg);
}

.btn-skate:active {
  transform: rotate(0deg) translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink), 6px 6px 0 var(--teal);
}

/* Row that holds the hero CTAs side by side */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  margin-top: 0.4rem;
}
.hero-actions .btn-skate { margin-top: 0; }

/* Second sticker CTA — same deck-sticker treatment, different
   spray colour + tilt so it reads as its own button, not a twin. */
.btn-skate--alt {
  background: var(--teal);
  transform: rotate(2deg);
  box-shadow: 6px 6px 0 var(--ink), 11px 11px 0 var(--pink);
  cursor: pointer;
}
.btn-skate--alt:hover {
  background: var(--orange);
  color: var(--paper);
  transform: rotate(0deg) translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--ink), 15px 15px 0 var(--yellow);
}
.btn-skate--alt:active {
  transform: rotate(0deg) translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink), 6px 6px 0 var(--yellow);
}

/* Green LINE OA contact sticker — same deck-sticker treatment
   as .btn-skate, in LINE's brand green. */
.btn-line {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.8rem;
  padding: 1.1rem 2.6rem;
  background: var(--line-green);
  color: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  font-family: 'Bungee', 'Kanit', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  transform: rotate(-1deg);
  box-shadow: 6px 6px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease, background var(--transition);
}
.btn-line-icon { flex-shrink: 0; width: 22px; height: 22px; }
.btn-line:hover {
  background: #05a648;
  transform: rotate(0deg) translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--ink);
}
.btn-line:active {
  transform: rotate(0deg) translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink);
}

/* ── Header / Nav ────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--ink-2);
  border-bottom: 4px solid var(--ink);
  box-shadow: 0 4px 0 var(--yellow);
  background-image: repeating-linear-gradient(
    90deg,
    var(--ink-2) 0px, var(--ink-2) 22px,
    #1c1c1c 22px, #1c1c1c 24px
  );
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(92%, 1200px);
  margin-inline: auto;
  padding: 1.1rem 0;
}

.logo {
  font-family: 'Bungee', 'Anton', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 2.1rem;
  letter-spacing: 0.02em;
  color: var(--yellow);
  text-transform: uppercase;
  transform: rotate(-2deg);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-shadow: 2px 2px 0 var(--pink);
}

.logo-icon {
  height: 2.6rem;
  width: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-links { display: flex; gap: 2.4rem; }
.nav-links a {
  font-family: 'Space Mono', 'Trirong', monospace;
  font-size: 0.936rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
  position: relative;
  padding: 0.3em 0.1em;
  transition: color var(--transition);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0;
  height: 3px;
  background: var(--teal);
  transition: width 0.25s ease;
}
.nav-links a:hover { color: var(--yellow); }
.nav-links a:hover::after { width: 100%; background: var(--yellow); }

.nav-link-icon { display: inline-flex; align-items: center; gap: 0.5em; }
.nav-icon { width: 2.34em; height: 2.34em; object-fit: contain; flex-shrink: 0; }

/* ── Hero ────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 7rem 5% 3rem;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,46,126,0.16) 0%, transparent 42%),
    radial-gradient(circle at 8% 78%, rgba(0,194,178,0.18) 0%, transparent 40%),
    var(--paper);
  border-bottom: var(--hairline);
  position: relative;
  overflow: hidden;
}

/* Checkerboard strip in background */
.hero::before {
  content: '';
  position: absolute;
  top: 5rem; left: 0; right: 0;
  height: 14px;
  background-image:
    linear-gradient(45deg, var(--ink) 25%, transparent 25%, transparent 75%, var(--ink) 75%),
    linear-gradient(45deg, var(--ink) 25%, transparent 25%, transparent 75%, var(--ink) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
  opacity: 0.9;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 3rem;
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  text-align: left;
}

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

.hero-eyebrow {
  font-family: 'Permanent Marker', 'Trirong', cursive;
  font-size: 1.33rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--orange);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;
  transform: rotate(-1.5deg);
  transform-origin: left center;
}
.eyebrow-brand {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-eyebrow::after {
  content: '';
  flex: 0 0 60px;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 11px);
}

.hero-title {
  margin-bottom: 1.1rem;
  font-family: 'Kanit', 'Trirong', sans-serif;
  font-size: clamp(2.38rem, min(5.6vw, 6.8svh), 5.6rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-title .title-line {
  display: block;
  text-shadow: 4px 4px 0 var(--yellow);
  -webkit-text-stroke: 1px var(--ink);
}

/* Big statement line — the punch. Lighter than the default 900/1px-stroke
   sticker treatment: this line runs long, so heavy weight + tight tracking
   made letterforms crowd together. Still bold Kanit + the yellow hard-shadow
   sticker look, just legible at length. */
.hero-title .title-line--1 {
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0;
  -webkit-text-stroke: 0.6px var(--ink);
  transform: rotate(-2deg);
  transform-origin: center;
}

/* Small connector line — breathing room before the sticker */
.hero-title .title-line--2 {
  margin-top: 0.3em;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink);
  text-shadow: 3px 3px 0 var(--teal);
  -webkit-text-stroke: 0.6px var(--ink);
  transform: rotate(1.5deg);
  transform-origin: center;
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

/* Sticker badge — the drop-shadowed skate-deck logo hit */
.hero-title em {
  display: inline-block;
  margin-top: 0.32em;
  font-family: 'Bungee', 'Kanit', sans-serif;
  font-size: 0.72em;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: var(--paper);
  background: var(--pink);
  padding: 0.22em 0.6em;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  transform: rotate(-2deg);
  transform-origin: center;
  text-shadow: none;
  box-shadow: 6px 6px 0 var(--ink), 11px 11px 0 var(--yellow);
}

.hero-title .title-line--2 em {
  font-size: inherit;
}

.hero-sub {
  font-family: 'Noto Sans Thai', 'Trirong', sans-serif;
  font-size: clamp(1.19rem, min(2.3vw, 3.15svh), 1.89rem);
  letter-spacing: 0.01em;
  line-height: 1.55;
  color: var(--ink);
  margin: 1.3rem 0 0;
  opacity: 0.82;
  max-width: 40ch;
  transform: rotate(-1deg);
  transform-origin: left center;
}

/* Hero slideshow — old-school skate-mag photo box, left of the hero copy */
.hero-slideshow {
  display: block;
  flex: 0 0 auto;
  width: clamp(300px, min(38vw, 56svh), 460px);
  max-width: 50%;
  transform: rotate(-2deg);
}

.hero-slide-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  background: transparent;
  border: 5px solid var(--ink);
  box-shadow: 9px 9px 0 var(--orange), 9px 9px 0 3px var(--ink), 0 16px 28px rgba(0,0,0,0.35);
  overflow: hidden;
}

/* Newsprint halftone overlay for that photocopied zine texture */
.hero-slide-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: radial-gradient(circle, var(--ink) 1px, transparent 1.3px);
  background-size: 5px 5px;
  opacity: 0.16;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.hero-slide-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: grayscale(0.55) contrast(1.2) saturate(1.05);
}

.hero-slide-sticker {
  position: absolute;
  z-index: 3;
  top: -0.7rem;
  left: -0.9rem;
  font-family: 'Bungee', 'Kanit', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--paper);
  background: var(--pink);
  padding: 0.3em 0.65em;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  transform: rotate(-8deg);
  box-shadow: 4px 4px 0 var(--ink);
}

.hero-slide-counter {
  position: absolute;
  z-index: 3;
  bottom: 0.7rem;
  right: 0.7rem;
  font-family: 'Anton', 'Arial Black', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--yellow);
  background: var(--ink);
  padding: 0.15em 0.5em;
  line-height: 1.4;
}

/* ── About ───────────────────────────────────────── */
.about {
  padding: 7rem 0;
  background: var(--paper-2);
  border-bottom: var(--hairline);
  position: relative;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 4rem;
  align-items: start;
}

.about-text h2 { margin-bottom: 1.6rem; }

.about-text .section-label { font-size: 0.85rem; }

/* Thai display heading — Anton has no Thai glyphs, so the base h2 rule
   silently falls back to thin-serif Trirong for this text and looks
   off-weight. Kanit 900 is Thai-native and matches Anton's block-letter
   heft, so the section keeps its skate-poster proportions in Thai too. */
.about-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3em;
  font-family: 'Kanit', 'Trirong', sans-serif;
  font-weight: 900;
  font-size: clamp(2.6rem, 6.4vw, 4.8rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: none;
  -webkit-text-stroke: 0;
}

.about-heading-line {
  color: var(--ink);
  text-shadow: 4px 4px 0 var(--teal);
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

.about-heading-accent {
  display: inline-block;
  font-size: 0.92em;
  color: var(--paper);
  background: var(--orange);
  padding: 0.18em 0.55em;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  transform: rotate(1.5deg);
  transform-origin: left center;
  box-shadow: 5px 5px 0 var(--ink);
}
.about-text p {
  font-family: 'Space Mono', 'Trirong', monospace;
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1rem;
  color: var(--ink);
  opacity: 0.85;
}

/* Slideshow inside About */
.about-slideshow {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

/* Deck-mat frame around the carousel */
.slide-frame {
  position: relative;
  background: var(--ink-2);
  padding: 14px;
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--orange), 0 18px 32px rgba(0,0,0,0.35);
}
.slide-frame::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 2px dashed var(--yellow);
  pointer-events: none;
  opacity: 0.6;
}

.about-slideshow .slideshow {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: transparent;
  user-select: none;
}

.about-slideshow .slide img {
  object-fit: contain;
  background: transparent;
}

/* ── Slideshow (base) ────────────────────────────── */
.slideshow {
  position: relative;
  width: 100%;
  height: clamp(300px, 70vh, 820px);
  overflow: hidden;
  background: var(--ink);
  user-select: none;
}

.slideshow-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 450ms ease;
  pointer-events: none;
}

.slide.is-active {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.7) contrast(1.15) saturate(0.8);
  transition: filter 0.6s ease;
  pointer-events: none;
}

.slide.is-active img {
  filter: grayscale(0.1) contrast(1.08) saturate(1.1);
}

.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18,18,18,0.8) 0%, transparent 55%);
  pointer-events: none;
}

/* Clickable affordance — slides open the lightbox */
.slide { cursor: pointer; }
.slide:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: -3px;
}

.slide-view-hint {
  position: absolute;
  z-index: 11;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-4deg) scale(0.9);
  font-family: 'Bungee', 'Kanit', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--yellow);
  padding: 0.5em 1em;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--ink);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.slide.is-active:hover .slide-view-hint,
.slide.is-active:focus-visible .slide-view-hint {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-4deg) scale(1);
}

/* HUD — counter + title */
.slide-hud {
  position: absolute;
  bottom: 1.8rem;
  left: 1.8rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  pointer-events: none;
}

.slide-counter {
  font-family: 'Anton', 'Arial Black', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: 0.02em;
  color: var(--yellow);
  line-height: 1;
}

.slide-sep { color: var(--teal); }

.slide-title-hud {
  font-family: 'Space Mono', 'Trirong', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--paper);
}

/* Progress bar */
.slide-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(242,236,216,0.15);
  z-index: 10;
}

.slide-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--pink);
}

/* Empty state */
.gallery-empty {
  text-align: center;
  padding: 4rem 0;
  color: var(--ink);
  font-family: 'Space Mono', 'Trirong', monospace;
  font-size: 0.8rem;
  line-height: 2.2;
  border: 2px dashed var(--ink);
  margin-top: 1rem;
}
.gallery-empty code {
  font-family: 'Space Mono', 'Trirong', monospace;
  background: var(--ink);
  color: var(--yellow);
  padding: 0.1em 0.5em;
}

/* ── Lightbox — full-view of a portfolio slide ──────
   Same skate-mag deck-mat treatment as the hero photo box:
   ink-black mat, hard offset shadow, sticker + counter HUD. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}
.lightbox[hidden] { display: none; }

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.88);
  background-image: var(--noise);
  background-size: 180px 180px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.lightbox.is-open .lightbox-backdrop { opacity: 1; }

.lightbox-frame {
  position: relative;
  z-index: 1;
  width: min(880px, 100%);
  max-height: 92vh;
  background: var(--ink-2);
  border: 5px solid var(--paper);
  box-shadow: 10px 10px 0 var(--orange), 10px 10px 0 3px var(--ink), 0 24px 48px rgba(0,0,0,0.5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: scale(0.92) rotate(-1deg);
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), opacity 0.2s ease;
}
.lightbox.is-open .lightbox-frame {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.lightbox-sticker {
  position: absolute;
  z-index: 3;
  top: -1rem;
  left: -1rem;
  font-family: 'Bungee', 'Kanit', sans-serif;
  font-size: 0.85rem;
  color: var(--paper);
  background: var(--pink);
  padding: 0.3em 0.65em;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  transform: rotate(-8deg);
  box-shadow: 4px 4px 0 var(--ink);
}

.lightbox-close {
  position: absolute;
  z-index: 3;
  top: -1rem;
  right: -1rem;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Anton', 'Arial Black', sans-serif;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink);
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  transform: rotate(6deg);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.lightbox-close:hover { background: var(--pink); transform: rotate(0deg) scale(1.06); }
.lightbox-close:active { transform: rotate(0deg) translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }

.lightbox-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
}

.lightbox-img {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--ink);
  background: var(--teal);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.lightbox-arrow:hover { background: var(--yellow); transform: translateY(-50%) scale(1.08); }
.lightbox-arrow:active { transform: translateY(-50%) translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.lightbox-prev { left: 0.8rem; }
.lightbox-next { right: 0.8rem; }

.lightbox-hud {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.2rem 0.3rem;
}

.lightbox-counter {
  font-family: 'Anton', 'Arial Black', sans-serif;
  font-size: 1.2rem;
  color: var(--yellow);
}

.lightbox-title {
  font-family: 'Space Mono', 'Trirong', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--paper);
}

/* ── Portfolio grid popup — กดปุ่ม "สำรวจผลงาน" ─────
   Contact-sheet / sticker-album treatment: bone paper
   zine page, checkerboard divider, 4-col grid of tilted
   photo stickers pulled straight from port/.             */
.port-modal {
  position: fixed;
  inset: 0;
  z-index: 890;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}
.port-modal[hidden] { display: none; }

.port-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.88);
  background-image: var(--noise);
  background-size: 180px 180px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.port-modal.is-open .port-modal-backdrop { opacity: 1; }

.port-modal-frame {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
  max-height: 92vh;
  background: var(--paper);
  border: 5px solid var(--ink);
  box-shadow: 10px 10px 0 var(--teal), 10px 10px 0 3px var(--ink), 0 24px 48px rgba(0,0,0,0.5);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: scale(0.92) rotate(1deg);
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), opacity 0.2s ease;
}
.port-modal.is-open .port-modal-frame {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.port-modal-sticker { top: -1.1rem; left: -1rem; }
.port-modal-close { top: -1.1rem; right: -1rem; }

.port-modal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.4rem 0.2rem 0;
}

.port-modal-title {
  font-family: 'Anton', 'Trirong', 'Arial Black', sans-serif;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  text-transform: uppercase;
  color: var(--ink);
  -webkit-text-stroke: 1px var(--ink);
}
.port-modal-title em {
  font-family: 'Bungee', 'Anton', 'Arial Black', sans-serif;
  font-style: normal;
  color: var(--pink);
  -webkit-text-stroke: 0;
}

.port-modal-count {
  font-family: 'Space Mono', 'Trirong', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 0.35em 0.7em;
  border-radius: var(--radius);
  transform: rotate(-2deg);
}

/* Checkerboard divider — vans-tape strip */
.port-modal-checker {
  height: 10px;
  flex-shrink: 0;
  background-image:
    linear-gradient(45deg, var(--ink) 25%, transparent 25%, transparent 75%, var(--ink) 75%),
    linear-gradient(45deg, var(--ink) 25%, transparent 25%, transparent 75%, var(--ink) 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}

.port-modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.6rem 0.3rem 0.2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) transparent;
}

.port-modal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}

.port-card {
  position: relative;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  background: var(--ink);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(var(--tilt, -1.5deg));
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease;
}
.port-card:nth-child(3n)   { --tilt: 1.5deg; }
.port-card:nth-child(4n)   { --tilt: -1deg; }
.port-card:nth-child(5n)   { --tilt: 2deg; }

.port-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.08) contrast(1.08) saturate(1.1);
}

.port-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18,18,18,0.85) 0%, transparent 50%);
  pointer-events: none;
}

.port-card-title {
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  bottom: 0.5rem;
  z-index: 2;
  font-family: 'Space Mono', 'Trirong', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.port-card-hint {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-4deg) scale(0.85);
  font-family: 'Bungee', 'Kanit', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--yellow);
  padding: 0.45em 0.8em;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 var(--ink);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.port-card:hover,
.port-card:focus-visible {
  transform: rotate(0deg) translateY(-4px) scale(1.04);
  box-shadow: 6px 6px 0 var(--orange);
  outline: none;
  z-index: 2;
}
.port-card:hover .port-card-hint,
.port-card:focus-visible .port-card-hint {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-4deg) scale(1);
}
.port-card:active { transform: rotate(0deg) translate(2px, 2px) scale(1.01); box-shadow: 2px 2px 0 var(--orange); }

/* ── Comic reader popup — กดปุ่ม "เกี่ยวกับเฟิร์ส" ──────
   Single-page photocopy-zine comic reader: halftone-dot
   backdrop, jagged burst badge, thick panel gutter, POW
   arrow buttons. Pulls pages straight from image/.          */
.comic-modal {
  position: fixed;
  inset: 0;
  z-index: 910;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}
.comic-modal[hidden] { display: none; }

.comic-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.9);
  background-image:
    radial-gradient(rgba(255,255,255,0.16) 1.6px, transparent 1.8px);
  background-size: 14px 14px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.comic-modal.is-open .comic-modal-backdrop { opacity: 1; }

.comic-modal-frame {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  max-height: 94vh;
  background: var(--paper);
  border: 5px solid var(--ink);
  box-shadow: 10px 10px 0 var(--pink), 10px 10px 0 3px var(--ink), 0 24px 48px rgba(0,0,0,0.55);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: scale(0.9) rotate(1.5deg);
  transition: transform 0.28s cubic-bezier(.34,1.56,.64,1), opacity 0.2s ease;
}
.comic-modal.is-open .comic-modal-frame {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Jagged comic burst — "เกี่ยวกับเฟิร์ส!" splash badge */
.comic-modal-burst {
  position: absolute;
  z-index: 3;
  top: -1.9rem;
  left: -1.6rem;
  width: 6.6rem;
  height: 6.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--yellow);
  border: 3px solid var(--ink);
  clip-path: polygon(
    50% 0%, 62% 12%, 78% 3%, 82% 20%, 100% 18%, 92% 34%,
    108% 46%, 90% 54%, 96% 72%, 78% 68%, 74% 88%, 58% 76%,
    50% 100%, 42% 76%, 26% 88%, 22% 68%, 4% 72%, 10% 54%,
    -8% 46%, 8% 34%, 0% 18%, 18% 20%, 22% 3%, 38% 12%
  );
  transform: rotate(-10deg);
  filter: drop-shadow(3px 3px 0 var(--ink));
}
.comic-modal-burst-line1,
.comic-modal-burst-line2 {
  font-family: 'Bungee', 'Kanit', sans-serif;
  line-height: 1.05;
  color: var(--ink);
  text-transform: uppercase;
}
.comic-modal-burst-line1 { font-size: 0.58rem; letter-spacing: 0.02em; }
.comic-modal-burst-line2 { font-size: 0.85rem; color: var(--pink); }

.comic-modal-close { top: -1.1rem; right: -1rem; }

/* Row = scroll-snap reader (left) + up/down nav column (right) */
.comic-modal-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

/* Vertical snap reader — one page fills the frame, scroll/swipe
   or the up/down arrows glide to the next page, story-style. */
.comic-modal-scroll {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 66vh;
  max-height: 66vh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  background: var(--ink-2);
  border: 4px solid var(--ink);
  box-shadow: inset 0 0 0 3px var(--paper);
  padding: 4px;
  scrollbar-width: none;
}
.comic-modal-scroll::-webkit-scrollbar { display: none; }

.comic-modal-page {
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comic-modal-page img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

/* Bouncing "scroll to continue" cue on the first page only */
.comic-modal-hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0.9rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  font-family: 'Space Mono', 'Trirong', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--yellow);
  padding: 0.35em 0.7em;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 var(--ink);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
  animation: comicHintBounce 1.3s ease-in-out infinite;
}
.comic-modal-hint.is-hidden { opacity: 0; }
@keyframes comicHintBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 5px); }
}

.comic-modal-navcol {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}

.comic-modal-arrow {
  position: relative;
  flex: 0 0 auto;
  z-index: 3;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Anton', 'Arial Black', sans-serif;
  font-size: 1rem;
  color: var(--ink);
  background: var(--teal);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.comic-modal-arrow:hover { background: var(--yellow); transform: scale(1.08); }
.comic-modal-arrow:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.comic-modal-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
  box-shadow: 2px 2px 0 var(--ink);
}

.comic-modal-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.1rem 0.2rem 0;
}

.comic-modal-counter {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.4rem;
  font-family: 'Anton', 'Arial Black', sans-serif;
  font-size: 1rem;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  padding: 0.4em;
  transform: rotate(-4deg);
}

.comic-modal-dots {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.comic-modal-dot {
  width: 0.6rem;
  height: 0.6rem;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.comic-modal-dot:hover { transform: scale(1.2); }
.comic-modal-dot.is-active { background: var(--pink); transform: scale(1.25); }

/* ── Social embed building blocks — reused on showcase.html ──
   TikTok / Facebook embed cards in a graffiti sticker treatment. */
.idea-embed-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.idea-embed-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  align-self: flex-start;
  font-family: 'Bungee', 'Kanit', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  padding: 0.4em 0.8em;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  transform: rotate(-1deg);
}
.idea-embed-heading--tiktok { box-shadow: 3px 3px 0 var(--teal); }
.idea-embed-heading--facebook { box-shadow: 3px 3px 0 var(--pink); }
.idea-embed-heading-icon { flex-shrink: 0; }

/* Horizontal strip of TikTok clip cards, scroll-snap like a contact sheet */
.idea-embed-row {
  width: 100%;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.3rem 0.1rem 0.6rem;
}

.idea-embed-tiktok {
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 0.4rem;
  transform: rotate(-1deg);
  overflow: hidden;
}
.idea-embed-tiktok:nth-child(2) { transform: rotate(1deg); }

/* ── Spray-stencil frame — shared by TikTok + Facebook clip cards on
   showcase.html. Layered "double spray" shadow (ink outline + a
   colored duplicate a few px behind it), a corner tag stamp slapped
   on like a sticker, and a lift-on-hover so the stack reads as loose
   scrapbook pieces rather than a flat photo grid. */
.showcase-clip-card .idea-embed-tiktok,
.showcase-fb-clip-card .idea-embed-fb-video {
  position: relative;
  border-width: 4px;
  box-shadow: 4px 4px 0 var(--ink), 8px 8px 0 var(--accent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.showcase-clip-card .idea-embed-tiktok:hover,
.showcase-fb-clip-card .idea-embed-fb-video:hover {
  transform: translateY(-4px);
  box-shadow: 5px 5px 0 var(--ink), 10px 10px 0 var(--accent);
}
.showcase-clip-card .idea-embed-tiktok::before,
.showcase-fb-clip-card .idea-embed-fb-video::before {
  content: 'RAW1ST';
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  font-family: 'Bungee', 'Kanit', sans-serif;
  font-size: 0.56rem;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: var(--accent);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0.3em 0.6em;
  transform: rotate(7deg);
  box-shadow: 2px 2px 0 var(--ink);
  pointer-events: none;
}

.idea-embed-fb {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0.7rem;
  overflow: hidden;
  transform: rotate(0.4deg);
}

.idea-embed-more {
  align-self: center;
  font-family: 'Space Mono', 'Trirong', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--paper);
  opacity: 0.8;
  border-bottom: 1px dashed var(--paper);
  transition: opacity 0.15s ease;
}
.idea-embed-more:hover { opacity: 1; }

/* ── Contact ─────────────────────────────────────── */
.contact {
  padding: 8rem 0;
  background: var(--ink-2);
  background-image:
    radial-gradient(circle at 15% 25%, rgba(255,212,0,0.12) 0%, transparent 38%),
    radial-gradient(circle at 85% 75%, rgba(0,194,178,0.14) 0%, transparent 40%);
  border-bottom: 4px solid var(--ink);
}

.contact-inner { text-align: center; }
.contact-inner .section-label {
  color: var(--ink);
  background: var(--teal);
  border-color: var(--paper);
  box-shadow: 4px 4px 0 var(--pink);
}
/* Base h2/em stack (Anton/Bungee) has no Thai glyphs, so Thai copy here
   ("จับมือลุย! มาร่วมงานกัน") was silently falling back to the browser's
   default serif — same issue the about-heading comment flags. Kanit 900
   is Thai-native and keeps the block-letter skate-poster heft. */
.contact-inner h2 {
  font-family: 'Kanit', 'Trirong', sans-serif;
  font-weight: 900;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--paper);
  text-shadow: 4px 4px 0 var(--pink);
  -webkit-text-stroke: 0;
  transform: rotate(-1deg);
}
.contact-inner h2 em {
  font-family: 'Bungee', 'Kanit', sans-serif;
  color: var(--yellow);
  text-shadow: none;
  -webkit-text-stroke: 0;
}
.contact-inner .btn-primary {
  background: var(--pink);
  color: var(--paper);
  border-color: var(--paper);
  box-shadow: 5px 5px 0 var(--yellow);
}
.contact-inner .btn-primary:hover {
  background: var(--teal);
  color: var(--ink);
  box-shadow: 7px 7px 0 var(--yellow);
}

/* ── Footer ──────────────────────────────────────── */
.site-footer {
  background: var(--ink-2);
  border-top: 4px solid var(--yellow);
  padding: 2rem 0;
  background-image:
    linear-gradient(45deg, #1a1a1a 25%, transparent 25%, transparent 75%, #1a1a1a 75%),
    linear-gradient(45deg, #1a1a1a 25%, transparent 25%, transparent 75%, #1a1a1a 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.site-footer .logo {
  font-family: 'Bungee', 'Anton', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--yellow);
  text-shadow: 2px 2px 0 var(--pink);
}
.site-footer p {
  font-family: 'Space Mono', 'Trirong', monospace;
  font-size: 0.62rem;
  color: rgba(242,236,216,0.55);
  letter-spacing: 0.12em;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
  .hero-content { flex-direction: column; gap: 1.4rem; text-align: center; }
  .hero-eyebrow { justify-content: center; transform-origin: center; }
  .hero-title { align-items: center; }
  .hero-sub { margin-inline: auto; transform-origin: center; }
  .hero-slideshow { width: min(62vw, 46svh, 340px); max-width: 100%; margin: 0 auto 1rem; }
  .about-grid { grid-template-columns: 1fr; gap: 2.8rem; }
  .about { padding: 5rem 0; }
  .contact { padding: 6rem 0; }
  .logo { font-size: 1.7rem; }
  .logo-icon { height: 2.1rem; }
  .nav-links { gap: 1rem; }
  .nav-links a { font-size: 0.95rem; letter-spacing: 0.08em; }
  .nav-icon { width: 1.9rem; height: 1.9rem; }
  .slide-counter { font-size: 1.5rem; }
  .slide-frame { padding: 10px; }
  .lightbox-frame { padding: 10px; gap: 8px; }
  .lightbox-sticker { font-size: 0.72rem; top: -0.8rem; left: -0.6rem; }
  .lightbox-close { width: 2rem; height: 2rem; font-size: 1.15rem; top: -0.8rem; right: -0.6rem; }
  .lightbox-arrow { width: 2.2rem; height: 2.2rem; font-size: 0.9rem; }
  .lightbox-prev { left: 0.4rem; }
  .lightbox-next { right: 0.4rem; }
  .lightbox-img { max-height: 60vh; }
  .slide-view-hint { font-size: 0.68rem; padding: 0.4em 0.8em; }
  .port-modal-frame { padding: 14px; gap: 10px; }
  .port-modal-title { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  .port-modal-grid { grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
  .port-card-hint { font-size: 0.58rem; padding: 0.4em 0.7em; }
  .idea-embed-fb .fb-page { max-width: 100%; }
  /* Keep both hero CTAs on one row instead of stacking */
  .hero-actions { flex-wrap: nowrap; justify-content: center; gap: 0.6rem; width: 100%; }
  .hero-actions .btn-skate {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 0.8rem 0.5rem;
    font-size: clamp(0.6rem, 2.6vw, 0.85rem);
    gap: 0.4rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 4px 4px 0 var(--ink), 7px 7px 0 var(--yellow);
  }
  .hero-actions .btn-skate--alt { box-shadow: 4px 4px 0 var(--ink), 7px 7px 0 var(--pink); }
  .hero-actions .btn-skate-icon { width: 18px; height: 18px; }
  .comic-modal-frame { padding: 12px; gap: 8px; }
  .comic-modal-burst { width: 5.2rem; height: 5.2rem; top: -1.4rem; left: -1.2rem; }
  .comic-modal-burst-line1 { font-size: 0.5rem; }
  .comic-modal-burst-line2 { font-size: 0.7rem; }
  .comic-modal-close { width: 2rem; height: 2rem; font-size: 1.15rem; top: -0.8rem; right: -0.6rem; }
  .comic-modal-arrow { width: 2.2rem; height: 2.2rem; font-size: 0.9rem; }
  .comic-modal-scroll { height: 56vh; max-height: 56vh; }
  .comic-modal-navcol { gap: 0.5rem; }
}

@media (max-width: 480px) {
  /* Scale with viewport width (not a fixed rem floor) so each <br>-separated
     phrase keeps to its own line instead of wrapping into a 3rd/4th line.
     4.8vw sized against Noto Sans Thai's real advance widths (measured via
     the font file) for the longer phrase, with headroom to spare. */
  .hero-sub {
    font-size: clamp(0.9rem, 4.8vw, 1.3rem);
    line-height: 1.5;
    letter-spacing: 0.01em;
    max-width: 100%;
    margin-top: 1.3rem;
  }
  .hero-slideshow { width: min(70vw, 40svh, 280px); max-width: 100%; margin: 0 auto 1rem; }
  .port-modal-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .port-modal-count { font-size: 0.65rem; }
  .btn-skate { padding: 0.9rem 1.9rem; font-size: 0.8rem; margin-top: 1.8rem; }
  .hero-actions { gap: 0.5rem; }
  .hero-actions .btn-skate {
    margin-top: 0;
    padding: 0.65rem 0.4rem;
    font-size: clamp(0.52rem, 3.1vw, 0.68rem);
    gap: 0.3rem;
  }
  .hero-actions .btn-skate-icon { width: 15px; height: 15px; }
  .comic-modal-frame { width: min(92vw, 480px); }
  .comic-modal-counter { min-width: 2.8rem; font-size: 0.85rem; }
  .comic-modal-stage { flex-direction: column; }
  .comic-modal-scroll { height: 50vh; max-height: 50vh; }
  .comic-modal-navcol { flex-direction: row; }
  .logo { font-size: 1.35rem; }
  .logo-icon { height: 1.7rem; }
  .nav-links { gap: 0.6rem; }
  .nav-links a { font-size: 0.74rem; letter-spacing: 0.03em; }
  .nav-icon { width: 1.5rem; height: 1.5rem; }
  .nav-link-icon { gap: 0.3em; white-space: nowrap; }
}

/* ── Scroll reveal ────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================
   SHOWCASE PAGE (showcase.html) — Old-School Graffiti Wall
   Concrete/brick backdrop, spray-can drips, torn-sticker
   comment notes. Reuses .idea-embed-* card components.
   ===================================================== */
body.page-showcase {
  background-color: #4a4640;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.32) 0 3px, transparent 3px 46px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.22) 0 3px, transparent 3px 92px);
}

.showcase-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

/* ── Hero ── */
.showcase-hero {
  position: relative;
  padding: 9rem 5% 5rem;
  overflow: hidden;
  background-image:
    radial-gradient(circle at 85% 12%, rgba(255,46,126,0.28) 0%, transparent 40%),
    radial-gradient(circle at 10% 85%, rgba(0,194,178,0.26) 0%, transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(255,212,0,0.1) 0%, transparent 55%);
  border-bottom: var(--hairline);
  text-align: center;
}

.showcase-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'Space Mono', 'Trirong', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--yellow);
  border: 2px solid var(--ink);
  padding: 0.4em 0.9em;
  transform: rotate(-2deg);
  box-shadow: 4px 4px 0 var(--ink);
  margin-bottom: 1.8rem;
}

.showcase-hero-title {
  font-family: 'Bungee', 'Kanit', sans-serif;
  font-size: clamp(2.6rem, 9vw, 6.4rem);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--yellow);
  text-shadow: 5px 5px 0 var(--pink), 10px 10px 0 var(--ink);
  -webkit-text-stroke: 1.5px var(--ink);
  transform: rotate(-1.5deg);
}

.showcase-hero-title span {
  display: block;
}

.showcase-hero-title .showcase-hero-title-accent {
  color: var(--paper);
  text-shadow: 5px 5px 0 var(--teal), 10px 10px 0 var(--ink);
  transform: rotate(1deg);
  margin-top: 0.15em;
}

.showcase-hero-sub {
  max-width: 46ch;
  margin: 2rem auto 0;
  font-family: 'Permanent Marker', 'Trirong', cursive;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--paper);
  opacity: 0.9;
  line-height: 1.6;
  transform: rotate(-0.6deg);
}

/* Spray drips leaking off a section's top edge */
.showcase-drip {
  position: absolute;
  top: -4px;
  width: 14px;
  height: 46px;
  border-radius: 0 0 50% 50%;
  z-index: 2;
  opacity: 0.9;
}
.showcase-drip--1 { left: 12%; height: 34px; background: var(--pink); }
.showcase-drip--2 { right: 18%; height: 58px; background: var(--teal); }
.showcase-drip--3 { left: 48%; height: 40px; background: var(--yellow); }

/* ── Generic section shell ── */
.showcase-section {
  position: relative;
  padding: 6rem 0;
  border-bottom: var(--hairline);
}
.showcase-section--dark {
  background: var(--ink-2);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,212,0,0.1) 0%, transparent 38%),
    radial-gradient(circle at 85% 80%, rgba(255,46,126,0.12) 0%, transparent 40%);
}
.showcase-section--paper {
  background: var(--paper-2);
}

.showcase-section-head {
  text-align: center;
  margin-bottom: 3rem;
}
.showcase-section--dark .showcase-section-head .section-label {
  box-shadow: 4px 4px 0 var(--pink);
}

.showcase-section-title {
  margin-top: 1rem;
  font-family: 'Kanit', 'Trirong', sans-serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  text-transform: none;
  -webkit-text-stroke: 0;
  transform: rotate(-1deg);
}
.showcase-section--dark .showcase-section-title {
  color: var(--paper);
  text-shadow: 4px 4px 0 var(--pink);
}
.showcase-section--paper .showcase-section-title {
  color: var(--ink);
  text-shadow: 4px 4px 0 var(--teal);
}
.showcase-section-title em {
  font-family: 'Bungee', 'Kanit', sans-serif;
  font-style: normal;
  color: var(--yellow);
  text-shadow: none;
}

/* ── Works track: shared responsive container ──
   One markup, two behaviors via media query — no duplicated HTML.
   Mobile (<768px): horizontal scroll-snap row, cards at 78% width so the
   next card peeks in at the edge, swipeable, with dot indicators below.
   Desktop (≥768px): the same track becomes a plain 3-column grid. */
.works__track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.55rem 11% 0.7rem;
  margin: 0 -6%;
}
.works__track::-webkit-scrollbar { display: none; }
.works__track > * {
  flex: 0 0 78%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.works__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  color: var(--ink);
}
.showcase-section--dark .works__dots { color: var(--paper); }
.works__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.28;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.works__dots span.is-active { opacity: 1; transform: scale(1.4); }

@media (min-width: 768px) {
  .works__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    padding: 0;
    margin: 0;
    scroll-snap-type: none;
  }
  .works__dots { display: none; }
}

/* ── TikTok clip grid ── */
.showcase-clip-grid {
  align-items: start;
}
@media (min-width: 768px) {
  /* Equal thirds inside a capped-width strip, instead of letting grid
     columns run full container width — that used to leave a fixed
     260px card floating in a much wider track with dead space on
     both sides. Capping the whole strip lets each column (and the
     frame filling it) size proportionately to the page instead. */
  .showcase-clip-grid {
    gap: 2rem;
    max-width: 980px;
    margin-inline: auto;
  }
}

.showcase-clip-card {
  --accent: var(--pink);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: rotate(var(--tilt, -1.5deg));
}
.showcase-clip-card:nth-child(2) { --tilt: 1.4deg; --accent: var(--teal); }
.showcase-clip-card:nth-child(3) { --tilt: -0.8deg; --accent: var(--yellow); }

.showcase-clip-card .idea-embed-tiktok {
  transform: none;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* ── TikTok hover-to-play card ──
   Shows a cover thumbnail; hovering (or focusing/tapping on touch)
   swaps in a live, muted, autoplaying embed in place of the cover. */
.tiktok-hover-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  width: 100%;
}

.tiktok-hover-media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  background: #141414;
  cursor: pointer;
}

.tiktok-hover-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #141414;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.tiktok-hover-frame {
  position: absolute;
  inset: 0;
}
.tiktok-hover-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  object-position: center;
}

.tiktok-hover-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.35) 100%);
  transition: opacity 0.2s ease;
}
.tiktok-hover-play svg {
  width: 3rem;
  height: 3rem;
  fill: var(--paper);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
  transition: transform 0.2s ease;
}
.tiktok-hover-media:hover .tiktok-hover-play svg { transform: scale(1.12); }

.tiktok-hover-card.is-playing .tiktok-hover-poster,
.tiktok-hover-card.is-playing .tiktok-hover-play {
  opacity: 0;
}

.tiktok-hover-link {
  align-self: center;
  font-family: 'Space Mono', 'Trirong', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  opacity: 0.7;
  border-bottom: 1px dashed var(--ink);
  transition: opacity 0.15s ease;
}
.tiktok-hover-link:hover { opacity: 1; }

/* ── Comment sticky note ──
   A torn scrap of paper pinned under the clip with a strip of masking
   tape, instead of the old flat color block — reads closer to a fan's
   Polaroid caption taped to a wall than a UI card. */
.comment-sticky {
  position: relative;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-left: 6px solid var(--accent, var(--pink));
  border-radius: var(--radius);
  padding: 1.3rem 1.1rem 1.2rem;
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(var(--sticky-tilt, 1.2deg));
}
.showcase-clip-card:nth-child(2) .comment-sticky { --sticky-tilt: -1.4deg; }
.showcase-clip-card:nth-child(3) .comment-sticky { --sticky-tilt: 1.8deg; }

/* Masking-tape strip pinning the note in place */
.comment-sticky::before {
  content: '';
  position: absolute;
  top: -0.6rem;
  left: 1rem;
  width: 2.8rem;
  height: 1rem;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 0 4px, rgba(255,255,255,0.22) 4px 8px),
    #d8d2bd;
  opacity: 0.92;
  transform: rotate(-6deg);
  box-shadow: 1px 2px 3px rgba(0,0,0,0.35);
}

/* Big quote mark, pushed behind the copy as a watermark rather than
   the loud foreground accent it used to be — the tape carries that now */
.comment-sticky::after {
  content: '\201C';
  position: absolute;
  top: 0.15rem;
  right: 0.5rem;
  font-family: 'Anton', 'Arial Black', sans-serif;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent, var(--ink));
  opacity: 0.28;
  z-index: 0;
}
.comment-sticky-quote,
.comment-sticky-name {
  position: relative;
  z-index: 1;
}

.comment-sticky-quote {
  font-family: 'Space Mono', 'Trirong', monospace;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--ink);
}

.comment-sticky-name {
  display: block;
  margin-top: 0.7rem;
  font-family: 'Permanent Marker', 'Trirong', cursive;
  font-size: 0.85rem;
  color: var(--ink);
  opacity: 0.75;
}

/* Single centered comment sticky (Facebook section) */
.showcase-comment-single {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}
.showcase-comment-single .comment-sticky {
  max-width: 440px;
  --sticky-tilt: -1.2deg;
  background: var(--yellow);
  border: none;
  box-shadow: none;
}

/* ── Facebook video grid (individual clips) ── */
.showcase-fb-video-grid {
  align-items: start;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  /* Same capped-strip fix as the TikTok grid above — see the comment
     there for why this replaced the old fixed max-width-on-the-card
     approach. */
  .showcase-fb-video-grid {
    gap: 1.6rem;
    max-width: 980px;
    margin-inline: auto;
  }
}

.showcase-fb-clip-card {
  --accent: var(--pink);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: rotate(var(--tilt, -1deg));
}
.showcase-fb-clip-card:nth-child(2) { --tilt: 1.2deg; --accent: var(--teal); }
.showcase-fb-clip-card:nth-child(3) { --tilt: -0.6deg; --accent: var(--yellow); }
.showcase-fb-clip-card:nth-child(2) .comment-sticky { --sticky-tilt: -1.4deg; }
.showcase-fb-clip-card:nth-child(3) .comment-sticky { --sticky-tilt: 1.8deg; }

.showcase-fb-clip-card .idea-embed-fb-video {
  transform: none;
  width: 100%;
}

.idea-embed-fb-video {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

/* Facebook hover-to-play card — same mechanic as the TikTok cards above,
   but embeds via facebook.com/plugins/video.php directly instead of the
   XFBML SDK widget, since that widget commonly gets blocked by ad/privacy
   extensions (and doesn't support Reel share links at all), which is why
   the videos were showing up blank. See facebook-hover.js.

   Unlike the TikTok cards, there's no fake poster image here: Facebook has
   no public oEmbed to fetch a real cover thumbnail from, so the iframe
   itself is embedded paused (autoplay=false) from page load — Facebook
   renders its own real cover + correct video proportions natively. Hovering
   swaps the iframe src to autoplay=true. */
.facebook-hover-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  width: 100%;
}

.fb-hover-media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  cursor: pointer;
  background: repeating-linear-gradient(135deg, #1c1c1c 0 10px, #141414 10px 20px);
}

.fb-hover-frame {
  position: absolute;
  inset: 0;
}
.fb-hover-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  object-position: center;
}

.fb-hover-link {
  align-self: center;
  font-family: 'Space Mono', 'Trirong', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  opacity: 0.7;
  border-bottom: 1px dashed var(--ink);
  transition: opacity 0.15s ease;
}
.fb-hover-link:hover { opacity: 1; }

/* ── Facebook embed wrap ── */
.showcase-fb-wrap {
  display: flex;
  justify-content: center;
}
.showcase-fb-wrap .idea-embed-fb {
  transform: none;
  max-width: 560px;
}

/* "ดูเพิ่มเติม" links sit on both dark and light section backgrounds */
.showcase-more-link {
  text-align: center;
  margin-top: 2.5rem;
}
.showcase-section--paper .idea-embed-more {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ── Bottom CTA ── */
.showcase-cta {
  padding: 6rem 0;
  text-align: center;
  background: var(--ink-2);
  border-bottom: 4px solid var(--ink);
}
.showcase-cta .section-label { box-shadow: 4px 4px 0 var(--teal); }
.showcase-cta h2 {
  margin-top: 1rem;
  font-family: 'Kanit', 'Trirong', sans-serif;
  font-weight: 900;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--paper);
  text-shadow: 4px 4px 0 var(--pink);
  -webkit-text-stroke: 0;
  transform: rotate(-1deg);
}
.showcase-cta h2 em {
  font-family: 'Bungee', 'Kanit', sans-serif;
  font-style: normal;
  color: var(--yellow);
  text-shadow: none;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .showcase-fb-video-grid { margin-bottom: 2.4rem; }
}

@media (max-width: 768px) {
  .showcase-hero { padding: 7.5rem 6% 3.6rem; }
  .showcase-hero-sub { margin-top: 1.5rem; }
  .showcase-section { padding: 4rem 0; }
  .showcase-section-head { margin-bottom: 2.2rem; }
  .showcase-cta { padding: 4.5rem 0; }
}

@media (max-width: 480px) {
  .showcase-hero { padding: 6.5rem 6% 3rem; }
  .showcase-section { padding: 3.2rem 0; }
  .comment-sticky { padding: 0.85rem 1rem 1.05rem; }
  .comment-sticky-quote { font-size: 0.82rem; }
  .showcase-fb-wrap .idea-embed-fb { padding: 0.5rem; }
  .showcase-cta { padding: 3.8rem 0; }
}