/* ==========================================================
   UPGRADE LAYER — typography, motion system, signature details
   Loaded after page CSS on every page. Safe to remove in one line.
   ========================================================== */

:root {
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --nunito: 'DM Sans', -apple-system, sans-serif;
  --mono: 'DM Sans', -apple-system, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --sunset: linear-gradient(100deg, #ffd8a8 0%, #ff8b60 45%, #eb4400 100%);
  --peach: #ffae85;
}

html { font-family: var(--sans); text-rendering: optimizeLegibility; font-kerning: normal; }

/* ---------- Typography ---------- */
h1, h2, .page-title, .card-title {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 em, h2 em, .page-title em {
  font-style: italic;
  color: var(--peach);
  padding-right: .04em;
}
p { text-wrap: pretty; }
.card-tag, .eyebrow, [class*="kicker"], [class*="label"], .compass-label, .scroll-cue span {
  font-family: var(--sans) !important;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .7rem;
}
::selection { background: #ff8b60; color: #0a0b0e; }

/* ---------- Home hero ---------- */
.home .stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 15;
  background:
    linear-gradient(90deg, rgba(8,9,14,.66) 0%, rgba(8,9,14,.3) 34%, rgba(8,9,14,0) 60%),
    linear-gradient(0deg, rgba(8,9,14,.55) 0%, rgba(8,9,14,0) 28%);
  opacity: var(--reveal, 0);
}
.home .intro { top: auto; bottom: 14%; max-width: 46%; }
.intro-eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 22px;
  font: 600 .74rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(242,230,189,.78);
}
.eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #ff6a26;
  box-shadow: 0 0 0 4px rgba(255,106,38,.18), 0 0 14px rgba(255,106,38,.8);
}
.home .intro h1 {
  margin: 0;
  font-size: clamp(3.6rem, 7.2vw, 8.4rem);
  line-height: .9;
  letter-spacing: -.025em;
  color: #f4ecd0;
  text-shadow: 0 2px 30px rgba(0,0,0,.4);
}
.home .intro h1 em { color: var(--peach); font-size: 1.04em; letter-spacing: -.03em; }
.home .intro-sub {
  font-family: var(--sans); font-weight: 400;
  color: rgba(242,236,212,.84); font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.55;
  max-width: 40ch; margin-top: 26px;
}
.home .intro-cta { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.home .button.primary-btn {
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  text-transform: none; letter-spacing: 0;
  border-radius: 999px; padding: 12px 14px 12px 26px; gap: 18px; min-height: 52px;
  background: #f4ecd0; color: #14110d;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.home .button.primary-btn:hover { background: #fff; box-shadow: 0 14px 34px rgba(0,0,0,.34); }
.home .btn-arrow {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: #eb4400; color: #fff; font-size: 1rem;
}
.intro-link {
  font: 500 .95rem/1 var(--sans); color: #f4ecd0;
  padding-bottom: 4px; border-bottom: 1px solid rgba(244,236,208,.35);
  transition: border-color .3s, color .3s;
}
.intro-link span { display: inline-block; margin-left: 6px; transition: transform .35s var(--ease-out); }
.intro-link:hover { color: var(--peach); border-color: var(--peach); }
.intro-link:hover span { transform: translateX(4px); }

/* Work card */
.home .point-card {
  bottom: 8%; width: 30%; min-width: 340px; max-width: 420px;
  padding: 24px 26px 20px; border-radius: 18px;
  background: rgba(16,15,18,.42); border-color: rgba(255,255,255,.12);
}
.home .card-tag { color: #ff8b60; }
.home .card-title { font-size: 3.6rem; letter-spacing: -.02em; }
.home .work-arrow { width: 44px; height: 36px; }
.home .card-caption { font-family: var(--sans); font-size: .98rem; margin-top: 12px; }
.home .card-foot { font-family: var(--sans); font-size: .8rem; }

/* Work card thumbnail strip */
.card-thumbs { display: flex; gap: 6px; margin: 14px 0 2px; }
.card-thumbs img {
  width: 33%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px;
  filter: saturate(.9) brightness(.9);
  transform: translateY(0) rotate(0);
  transition: transform .7s var(--ease-out), filter .5s;
}
.point-card:hover .card-thumbs img { filter: saturate(1.1) brightness(1); }
.point-card:hover .card-thumbs img:nth-child(1) { transform: translateY(-6px) rotate(-4deg); }
.point-card:hover .card-thumbs img:nth-child(2) { transform: translateY(-12px); }
.point-card:hover .card-thumbs img:nth-child(3) { transform: translateY(-6px) rotate(4deg); }

/* ---------- Line-mask text reveal ---------- */
.u-split .u-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.u-split .u-line > span {
  display: inline-block;
  transform: translateY(105%) rotate(2deg);
  transition: transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i) * 90ms);
}
.u-split.u-in .u-line > span { transform: none; }

.u-reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.u-reveal.u-in { opacity: 1; transform: none; }

/* ---------- Custom cursor ---------- */
@media (hover: hover) and (pointer: fine) {
  .u-cursor, .u-cursor-dot {
    position: fixed; top: 0; left: 0; z-index: 99999; pointer-events: none;
    border-radius: 50%; will-change: transform;
  }
  .u-cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #ff8b60; }
  .u-cursor {
    width: 38px; height: 38px; margin: -19px 0 0 -19px;
    border: 1px solid rgba(242,230,189,.55);
    display: grid; place-items: center;
    font: 600 10px/1 var(--mono); letter-spacing: .12em; color: #0a0b0e;
    transition: width .45s var(--ease-out), height .45s var(--ease-out), margin .45s var(--ease-out),
                background .3s, border-color .3s;
  }
  .u-cursor span { opacity: 0; transition: opacity .2s; }
  .u-cursor.is-link { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(255,139,96,.18); border-color: #ff8b60; }
  .u-cursor.is-view { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: #ff8b60; border-color: #ff8b60; }
  .u-cursor.is-view span { opacity: 1; }
  .u-cursor.is-down { transform-origin: center; scale: .85; }
}

/* ---------- Grain + progress ---------- */
.u-grain {
  position: fixed; inset: -50%; z-index: 9990; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: u-grain 1s steps(6) infinite;
}
@keyframes u-grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(0,0)} }
.u-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 9995;
  background: var(--sunset); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}

/* ---------- Page transitions ---------- */
/* Handled by the curtain in system.js */
@keyframes u-out { to { opacity: 0; transform: scale(.98); filter: blur(6px); } }
@keyframes u-in { from { opacity: 0; transform: translateY(24px); } }

/* ---------- Giant footer signature ---------- */
.u-signature {
  position: relative; overflow: hidden; padding: 8vw 4% 3vw; margin-top: 4vw;
  border-top: 1px solid rgba(242,230,189,.12);
  background: radial-gradient(120% 90% at 50% 120%, rgba(255,139,96,.22), transparent 60%);
}
.u-signature-cta {
  display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #c2bfaa;
}
.u-signature-cta a { color: #ff8b60; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.u-signature-name {
  display: flex; justify-content: space-between; margin-top: 3vw;
  font-family: var(--serif); font-weight: 300; line-height: .8; letter-spacing: -.06em;
  font-size: 15.5vw; color: #eee9bc; user-select: none;
}
.u-signature-name span {
  display: inline-block; transition: transform .6s var(--ease-out), color .4s;
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0deg));
}
.u-signature-name span.hot { color: #ff8b60; }

/* ---------- Magnetic ---------- */
.u-magnetic { transition: transform .5s var(--ease-out); will-change: transform; }

/* ---------- Toolkit: night sky ---------- */
.u-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .9; }
.toolkit-page main, .toolkit-page footer, .toolkit-page header { position: relative; z-index: 1; }

/* ---------- Video hover previews ---------- */
video.u-hover-play { transition: transform .8s var(--ease-out), filter .5s; }
*:hover > video.u-hover-play { transform: scale(1.03); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .u-split .u-line > span, .u-reveal { transform: none !important; opacity: 1 !important; transition: none !important; }
  .u-grain { animation: none; }
  .u-cursor, .u-cursor-dot { display: none; }
  .u-signature-name span { transform: none !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 800px) {
  .home .stage::after { background: linear-gradient(180deg, rgba(8,9,14,.1) 0%, rgba(8,9,14,.7) 60%); }
  .home .intro { max-width: 92% !important; top: 12%; bottom: auto; }
  .intro-eyebrow { margin-bottom: 16px; font-size: .66rem; }
  .home .intro h1 { font-size: clamp(2.8rem, 13vw, 4.4rem); }
  .home .intro-sub { margin-top: 16px; }
  .home .intro-cta { margin-top: 22px; }
  .home .point-card { bottom: 9%; padding: 18px 20px 16px; min-width: 0; width: auto; max-width: none; }
  .home .card-title { font-size: 2.6rem; }
  .home .card-rule, .home .card-foot { display: none; }
  .home .intro-cta { gap: 20px; flex-wrap: wrap; }
  .card-thumbs { display: none; }
  .u-signature-name { font-size: 16vw; }
}

/* Tame the mid-scroll light wave: warm tint instead of milky white-out */
.stage.ripple-active .ripple-canvas { opacity: .55; mix-blend-mode: screen; filter: saturate(1.25) sepia(.25); }

/* Signature: tighter, monumental set */
.u-signature-name { justify-content: center; letter-spacing: -.02em; gap: .01em; }

/* Home: latest project pill */
.intro-latest {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 26px;
  padding: 6px 16px 6px 6px; border-radius: 999px;
  background: rgba(16, 15, 22, 0.42); border: 1px solid rgba(185, 173, 255, 0.28);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font: 400 .88rem/1.2 var(--sans); color: rgba(244, 236, 208, .88);
  transition: border-color .3s, background .3s;
}
.intro-latest strong { font-weight: 600; color: #f4ecd0; }
.latest-tag {
  padding: 5px 10px; border-radius: 999px; background: #6d5cff; color: #fff;
  font: 600 .66rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.latest-arrow { transition: transform .35s var(--ease-out); }
.intro-latest:hover { border-color: rgba(185, 173, 255, .7); background: rgba(40, 32, 70, .5); }
.intro-latest:hover .latest-arrow { transform: translateX(4px); }
@media (max-width: 800px) {
  .intro-latest { margin-top: 18px; font-size: .8rem; gap: 10px; }
}

/* ---------- Home hero: fit short screens (laptops, small phones) ---------- */
@media (min-width: 801px) {
  .home .intro h1 { font-size: clamp(2.8rem, min(7.2vw, 11.5vh), 8.4rem); }
  .home .intro-sub { margin-top: min(26px, 2.6vh); }
  .home .intro-cta { margin-top: min(34px, 3.4vh); }
  .intro-eyebrow { margin-bottom: min(22px, 2.2vh); }
  .intro-latest { margin-top: min(26px, 2.6vh); }
}
@media (min-width: 801px) and (max-height: 700px) {
  .home .intro { bottom: 9%; }
  .home .intro-sub { font-size: 0.98rem; line-height: 1.45; }
  .home .point-card { bottom: 6%; }
  .home .card-thumbs img { aspect-ratio: 4 / 3; }
}
@media (max-width: 800px) and (max-height: 720px) {
  .home .intro { top: 10%; }
  .intro-eyebrow { margin-bottom: 10px; font-size: .62rem; }
  .home .intro h1 { font-size: clamp(2.4rem, min(12vw, 7.2vh), 4.4rem); }
  .home .intro-sub { margin-top: 10px; font-size: .92rem; line-height: 1.45; }
  .home .intro-cta { margin-top: 14px; }
  .home .button.primary-btn { min-height: 44px; }
  .intro-latest { margin-top: 12px; font-size: .76rem; }
  .home .point-card { bottom: 10%; padding: 14px 18px 12px; }
  .home .card-title { font-size: 2.2rem; }
  .home .card-caption { display: none; }
}