/* ============================================================
   LAI Design Editorial Rebuild v2 — Main Stylesheet
   Apple Light Premium · 7-scene composition · Fraunces + Noto Serif TC
   ============================================================ */


/* --- Design tokens ----------------------------------------- */
:root {
  /* Colors */
  --color-paper:        #F5F0E6;
  --color-ink:          #1A1614;
  --color-ink-2:        #4A3F39;
  --color-ink-soft:     #736961;
  --color-persimmon:    #E55934;
  --color-rule:         rgba(26, 22, 20, 0.12);

  /* Typography — clamp-based fluid */
  --type-mega:        clamp(96px, 14vw, 240px);
  --type-display-xl:  clamp(64px, 10vw, 144px);
  --type-display-lg:  clamp(40px, 6vw, 88px);
  --type-display-md:  clamp(28px, 4vw, 56px);
  --type-display-sm:  clamp(20px, 2.5vw, 32px);
  --type-body-lg:     clamp(17px, 1.2vw, 20px);
  --type-body:        clamp(15px, 1vw, 17px);
  --type-meta:        12px;

  /* Fonts */
  --font-serif: 'Fraunces', 'Noto Serif TC', Georgia, serif;
  --font-sans:  'Inter', system-ui, sans-serif;

  /* Spacing */
  --space-scene-py:   clamp(5rem, 10vw, 10rem);
  --space-elem-y:     clamp(1.5rem, 3vw, 3rem);
  --space-cluster:    clamp(0.75rem, 1.5vw, 1.25rem);
  --container-max:    96rem;
  --grid-works-gap:   clamp(1.5rem, 2.5vw, 2rem);

  /* Motion */
  --ease-quick:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.2, 0.7, 0, 1);
}


/* --- Base -------------------------------------------------- */
body {
  font-family: var(--font-sans);
  background: var(--color-paper);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* --- Paper noise texture (toned -20% vs Phase 5) ----------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  z-index: 0;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.085 0 0 0 0 0.075 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}


/* --- Display type ------------------------------------------ */
.font-display {
  font-family: var(--font-serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  font-feature-settings: 'kern', 'liga', 'ss01';
}


/* --- Scene container --------------------------------------- */
.scene {
  position: relative;
  min-height: 100svh;
  padding-block: var(--space-scene-py);
  padding-inline: clamp(1rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.scene-dark {
  background: var(--color-ink);
  color: var(--color-paper);
}

.scene-marker {
  position: absolute;
  top: clamp(1.5rem, 3vw, 3rem);
  right: clamp(1.5rem, 3vw, 3rem);
  font-family: var(--font-sans);
  font-size: var(--type-meta);
  letter-spacing: 0.15em;
  color: var(--color-ink-soft);
  text-transform: uppercase;
}


/* --- Headlines --------------------------------------------- */
.headline-mega {
  font-family: var(--font-serif);
  font-size: var(--type-mega);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
}
.headline-xl {
  font-family: var(--font-serif);
  font-size: var(--type-display-xl);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.italic-accent {
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}


/* --- Photo treatments -------------------------------------- */
.photo-bleed,
.photo-half,
.photo-card {
  overflow: hidden;
  filter: contrast(1.05) saturate(0.92);
  will-change: transform;
}
.photo-bleed img,
.photo-half img,
.photo-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-bleed {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.photo-bleed::after {
  /* dark scrim only for text-overlay scenes */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(0, 0, 0, 0.45),
              rgba(0, 0, 0, 0.25),
              rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
.photo-half {
  aspect-ratio: 3 / 4;
}
.photo-card {
  aspect-ratio: 4 / 3;
}


/* --- Works grid (Scene 4) ---------------------------------- */
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--grid-works-gap);
}
@media (min-width: 768px) {
  .works-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.work-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-ink);
  text-decoration: none;
  color: var(--color-paper);
}
.work-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.92);
  transition: transform 360ms var(--ease-out), filter 360ms var(--ease-out);
}
.work-tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(180deg, rgba(26, 22, 20, 0), rgba(26, 22, 20, 0.92));
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
}
.work-tile:hover img,
.work-tile:focus-visible img {
  transform: scale(1.03);
  filter: contrast(1.1) saturate(1);
}
.work-tile:hover .work-tile-overlay,
.work-tile:focus-visible .work-tile-overlay {
  opacity: 1;
}
.work-tile:focus-visible {
  outline: 2px solid var(--color-persimmon);
  outline-offset: 2px;
}
.work-tile-overlay__title {
  font-family: var(--font-serif);
  font-size: var(--type-display-sm);
  font-weight: 600;
  line-height: 1.1;
}
.work-tile-overlay__meta {
  font-size: var(--type-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 0.35rem;
}
.work-tile-overlay__arrow {
  position: absolute;
  bottom: 1.25rem;
  right: 1.5rem;
  color: var(--color-persimmon);
  font-size: 1.5rem;
  line-height: 1;
}


/* --- CTA button (magnetic, transform reserved for JS) ------ */
.btn-editorial,
.btn-editorial-ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 1.7rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--color-ink);
  will-change: transform;
  transition:
    background-color 240ms var(--ease-quick),
    color 240ms var(--ease-quick),
    border-color 240ms var(--ease-quick);
}
.btn-editorial {
  background: var(--color-persimmon);
  border-color: var(--color-persimmon);
  color: var(--color-paper);
}
.btn-editorial:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
}
.btn-editorial-ghost {
  background: transparent;
  color: var(--color-ink);
}
.btn-editorial-ghost:hover {
  background: var(--color-ink);
  color: var(--color-paper);
}
.scene-dark .btn-editorial-ghost {
  color: var(--color-paper);
  border-color: var(--color-paper);
}
.scene-dark .btn-editorial-ghost:hover {
  background: var(--color-paper);
  color: var(--color-ink);
}


/* --- Animated link underline (ease-out, no spring) --------- */
.link-underline {
  position: relative;
  display: inline-block;
}
.link-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 100%;
  background: var(--color-persimmon);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 280ms var(--ease-out);
}
.link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}


/* --- Hero reveal mask (sustained from Phase 2) ------------- */
/* Padding-block (not just bottom) so CJK ascenders don't clip when
   overflow:hidden masks the inner translateY reveal. */
.reveal-mask {
  display: block;
  overflow: hidden;
  padding-block: 0.18em;
  margin-block: -0.18em;
}
.reveal-inner {
  display: block;
}
/* Hidden state applies ONLY when JS armed it (.js-reveal-armed on <html>)
   AND the line hasn't been revealed yet. CSS-only transition — no GSAP on
   the critical path. Default (un-armed / no-JS) state is fully visible. */
.js-reveal-armed .reveal-inner {
  transform: translateY(115%);
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform 0.9s cubic-bezier(0.2, 0.7, 0, 1),
    opacity 0.7s ease;
}
.js-reveal-armed .reveal-inner.is-revealed {
  transform: translateY(0);
  opacity: 1;
}


/* --- Scroll progress bar (1px, down from Phase 5's 2px) ---- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-persimmon);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 60;
  pointer-events: none;
}


/* --- Selection -------------------------------------------- */
::selection {
  background: var(--color-ink);
  color: var(--color-paper);
}


/* --- Alpine x-cloak --------------------------------------- */
[x-cloak] { display: none !important; }


/* --- Reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal-armed .reveal-inner {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .work-tile img { transform: none !important; }
}


/* --- Award seal strip (footer) ---------------------------- */
/* Renders the 6-ish international design award seals as a wrapping
   horizontal strip in the footer's Recognition column. SVG seals are
   shown desaturated and at ~38px height; text fallbacks appear in a
   small uppercase typewriter style so missing-seal items still look
   intentional. */
.award-strip {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem 1.25rem;
}
.award-seal {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.award-seal img {
  display: block;
  height: 38px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.78);
  transition: filter 200ms ease, transform 200ms ease;
}
.award-seal a:hover img,
.award-seal a:focus-visible img {
  filter: grayscale(0) opacity(1);
  transform: translateY(-1px);
}
.award-seal a:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}
.award-fallback {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft, #8a857d);
  text-decoration: none;
}
.award-fallback:hover,
.award-fallback:focus-visible {
  color: var(--color-ink);
}