/* =========================================================
   Home page
   ========================================================= */

/* ---------- Hero: type tucked into satin ---------- */
.hero {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: var(--espresso);
  isolation: isolate;
}
.hero-layer { position: absolute; will-change: transform; }
.hero-back { inset: -6% -4%; z-index: 0; }
.hero-back img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero-back::after { /* vignette so type and UI stay readable */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 30%, transparent 30%, rgba(8,6,5,.55) 100%),
    linear-gradient(180deg, rgba(8,6,5,.55) 0%, transparent 25%);
}

.hero-title {
  position: absolute; z-index: 1;
  left: 0; right: 0;
  top: clamp(96px, 17vh, 200px);
  padding-inline: calc(var(--gutter) * .5);
  text-align: center;
  color: var(--white);
  pointer-events: none;
}
.hero-title .line { display: block; white-space: nowrap; font-size: 16.4vw; }
.hero-title .line + .line { margin-top: -0.02em; }
.hero-title .char { display: inline-block; }
.js .hero-title .char { transform: translateY(105%); opacity: 0; }
.is-loaded .hero-title .char {
  transform: none; opacity: 1;
  transition: transform 1.3s var(--ease-out), opacity .9s var(--ease-out);
  transition-delay: calc(var(--i) * 45ms + 150ms);
}
.hero-title .outline-type { -webkit-text-stroke-width: max(1.5px, 0.008em); }

.hero-front {
  left: -2%; right: -2%; bottom: -4%; /* JS refines top/height to meet the type */
  height: 64%;
  z-index: 2;
}
.hero-front img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.js .hero-front { opacity: 0; translate: 0 12%; }
.is-loaded .hero-front { opacity: 1; translate: 0 0; transition: translate 1.6s var(--ease-out), opacity 1s var(--ease-out); }

.hero-content {
  position: absolute; z-index: 3;
  left: 0; right: 0; bottom: 0;
  padding: 0 var(--gutter) clamp(24px, 5vh, 56px);
  display: grid; gap: 24px;
  align-items: end;
}
.hero-intro { max-width: 46ch; }
.hero-name {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  font-size: var(--step-1); line-height: 1.1; letter-spacing: .01em; color: var(--white);
  text-transform: uppercase;
}
.hero-role { margin-top: 10px; color: var(--text-dim); font-size: var(--step-0); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-meta {
  display: none;
  color: var(--text-faint); font-size: var(--step--1);
}
.js .hero-content > * { opacity: 0; transform: translateY(16px); }
.is-loaded .hero-content > * { opacity: 1; transform: none; transition: opacity 1s var(--ease-out) .9s, transform 1s var(--ease-out) .9s; }

@media (min-width: 900px) {
  .hero-content { grid-template-columns: 1fr auto; }
  .hero-actions { justify-content: flex-end; }
}
/* tall phones: title sits a bit lower, satin rises less */
@media (max-aspect-ratio: 3/4) {
  .hero-title { top: 30vh; }
  .hero-front { left: -45%; right: -45%; }
  .hero-front img { object-position: 50% 0; }
}
.scroll-cue {
  position: absolute; z-index: 3; left: 50%; top: calc(100% - 28px);
  width: 1px; height: 0; background: var(--line-strong);
}

/* ---------- Statement ---------- */
.statement-text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1.18;
  letter-spacing: -0.02em;
  max-width: 24ch;
  color: var(--cream);
}
.statement-text .w { transition: opacity .3s linear; }
.js .statement-text .w { opacity: .18; }
.js .statement-text .w.lit { opacity: 1; }
@media (min-width: 1100px) { .statement-text { max-width: 28ch; } }

.statement-grid { display: grid; gap: clamp(48px, 7vw, 120px); }
@media (min-width: 1100px) {
  .statement-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; }
}
.facts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.fact {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 6px 24px;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.fact b {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  font-size: var(--step-3); line-height: 1; color: var(--white);
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fact span { display: block; color: var(--text-dim); font-size: var(--step--1); line-height: 1.45; max-width: 30ch; }
.statement-now { margin-top: 32px; color: var(--text-dim); max-width: 52ch; }
.statement-now strong { color: var(--cream); font-weight: 600; }

/* ---------- Featured work bento ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 24px);
}
.work-card { grid-column: span 12; }
@media (min-width: 700px) {
  .work-card { grid-column: span 6; }
  .work-card--wide { grid-column: span 12; }
}
@media (min-width: 1100px) {
  .work-card--a { grid-column: span 8; }
  .work-card--b { grid-column: span 4; }
  .work-card--c { grid-column: span 6; }
  .work-card--d { grid-column: span 6; }
  .work-card--e { grid-column: span 5; }
  .work-card--f { grid-column: span 7; }
}

.work-card a {
  --px: 50%; --py: 50%; --rx: 0deg; --ry: 0deg;
  position: relative; display: flex; flex-direction: column; height: 100%;
  border-radius: var(--radius-lg);
  background: var(--espresso);
  border: 1px solid var(--line);
  overflow: hidden; isolation: isolate;
  transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .6s var(--ease-out), border-color .4s;
}
.work-card a::before { /* pointer-follow light */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(600px circle at var(--px) var(--py), rgba(251,231,178,.13), transparent 45%);
  opacity: 0; transition: opacity .4s;
}
.work-card a:hover::before, .work-card a:focus-visible::before { opacity: 1; }
.work-card a:hover, .work-card a:focus-visible { border-color: rgba(251,231,178,.28); }

.work-media {
  position: relative; flex: 1;
  min-height: clamp(260px, 30vw, 560px);
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 100%, rgba(182,154,88,.22), transparent 70%),
    linear-gradient(180deg, var(--espresso-2), var(--espresso));
}
.work-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.work-card a:hover .work-media img, .work-card a:focus-visible .work-media img { transform: scale(1.04); }

/* device mockups float on the espresso stage instead of filling it */
.work-media--device img {
  inset: 8% 6% 4%; width: 88%; height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 40px 50px rgba(0,0,0,.55));
}
.work-card a:hover .work-media--device img { transform: translateY(-2%) scale(1.03); }

/* FASS social: a fanned trio of posts */
.work-media--stack { display: grid; place-items: center; }
.work-media--stack img {
  position: absolute; inset: auto; top: 50%; left: 50%;
  width: min(46%, 300px); height: auto; aspect-ratio: 1;
  border-radius: 10px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8);
  transition: transform .9s var(--ease-out);
}
.work-media--stack img:nth-child(1) { transform: translate(-95%, -50%) rotate(-8deg); }
.work-media--stack img:nth-child(2) { transform: translate(-5%, -50%) rotate(7deg); }
.work-media--stack img:nth-child(3) { transform: translate(-50%, -48%); z-index: 1; }
.work-card a:hover .work-media--stack img:nth-child(1) { transform: translate(-112%, -52%) rotate(-12deg); }
.work-card a:hover .work-media--stack img:nth-child(2) { transform: translate(12%, -52%) rotate(11deg); }
.work-card a:hover .work-media--stack img:nth-child(3) { transform: translate(-50%, -54%) scale(1.04); }

.work-info {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center;
  padding: clamp(18px, 1.8vw, 28px);
  border-top: 1px solid var(--line);
}
.work-title {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  font-size: var(--step-1); line-height: 1.1; text-transform: uppercase; letter-spacing: .005em;
}
.work-kind { grid-column: 1; color: var(--text-dim); font-size: var(--step--1); }

.work-go {
  grid-row: 1 / span 2; grid-column: 2;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  transition: background .35s, color .35s, transform .5s var(--ease-out), border-color .35s;
}
.work-go svg { width: 18px; height: 18px; }
.work-card a:hover .work-go, .work-card a:focus-visible .work-go {
  background: var(--gold-light); color: var(--black); border-color: var(--gold-light); transform: rotate(-45deg);
}

.work-more { margin-top: clamp(32px, 4vw, 56px); display: flex; justify-content: center; }

/* ---------- Capabilities ---------- */
.caps { border-top: 1px solid var(--line); }
.cap {
  position: relative;
  display: grid; gap: 8px 40px;
  padding: clamp(22px, 2.6vw, 40px) 0;
  border-bottom: 1px solid var(--line);
}
.cap h3 {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  font-size: var(--step-2); line-height: 1.02; text-transform: uppercase;
  transition: color .35s, transform .6s var(--ease-out);
}
.cap p { color: var(--text-dim); max-width: 52ch; }
.cap .cap-proof { color: var(--text-faint); font-size: var(--step--1); }
@media (min-width: 1000px) {
  .cap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
  .cap-body { display: grid; gap: 6px; }
}
@media (hover: hover) and (pointer: fine) {
  .cap:hover h3 { color: var(--gold-light); transform: translateX(14px); }
}
/* image that trails the pointer across the capability list (desktop only, decorative) */
.cap-preview {
  position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
  width: clamp(220px, 20vw, 340px); aspect-ratio: 4 / 3;
  border-radius: 16px; overflow: hidden;
  opacity: 0; scale: .85;
  transition: opacity .35s, scale .5s var(--ease-out);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.9);
  background: var(--espresso);
}
.cap-preview.is-on { opacity: 1; scale: 1; }
.cap-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Tools marquee ---------- */
.marquee {
  margin-top: clamp(56px, 7vw, 120px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; width: max-content;
  animation: marquee 60s linear infinite;
}

.marquee-group { display: flex; align-items: center; flex: none; }
.marquee-item {
  display: inline-flex; align-items: center; gap: clamp(20px, 2.4vw, 44px);
  padding-right: clamp(20px, 2.4vw, 44px);
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  font-size: clamp(1.8rem, 4.6vw, 5rem); line-height: 1.1; text-transform: uppercase;
  white-space: nowrap;
}
.marquee-item:nth-child(even) { color: transparent; -webkit-text-stroke: 1px var(--text-dim); }
.marquee-item::after {
  content: ""; width: .32em; height: .32em; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--gold-light), var(--gold) 60%, var(--gold-deep));
}
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-note { margin-top: 20px; color: var(--text-faint); font-size: var(--step--1); padding-inline: var(--gutter); }

/* ---------- Range: endless drag strip ---------- */
.range { padding-bottom: 0; }
.range-strip {
  display: flex; gap: clamp(12px, 1.3vw, 22px);
  overflow-x: auto; overscroll-behavior-x: contain;
  padding: 8px var(--gutter) 40px;
  scrollbar-width: none;
  cursor: grab;
  align-items: flex-end;
}
.range-strip::-webkit-scrollbar { display: none; }
.range-strip.is-dragging { cursor: grabbing; }
.range-strip.is-dragging a { pointer-events: none; }
.range-item { flex: none; width: var(--w, 300px); }
.range-item a { display: block; }
.range-item figure { display: grid; gap: 12px; }
.range-thumb {
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--espresso);
  border: 1px solid var(--line);
  height: var(--h, 380px);
}
.range-thumb img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
  transition: transform 1s var(--ease-out);
  -webkit-user-drag: none; user-select: none;
}
/* tall email designs slowly scroll inside their frame on hover */
.range-item--tall .range-thumb img { height: auto; min-height: 100%; }
.range-item--tall a:hover .range-thumb img,
.range-item--tall a:focus-visible .range-thumb img { transform: translateY(calc(-100% + var(--h, 380px))); transition-duration: 5s; transition-timing-function: linear; }
.range-item:not(.range-item--tall) a:hover .range-thumb img { transform: scale(1.05); }
.range-item figcaption { display: grid; gap: 2px; }
.range-item figcaption b { font-weight: 600; font-size: var(--step--1); color: var(--cream); }
.range-item figcaption span { font-size: .8rem; color: var(--text-faint); }
.range-controls { display: flex; gap: 10px; }
.range-btn {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  transition: background .3s, color .3s;
}
.range-btn:hover { background: var(--cream); color: var(--black); }
.range-btn svg { width: 18px; height: 18px; }

/* ---------- Contact ---------- */
.contact { overflow: hidden; isolation: isolate; }
.contact-glow {
  position: absolute; inset: auto -10% -40% -10%; height: 90%; z-index: -1;
  background: radial-gradient(60% 60% at 50% 100%, rgba(182,154,88,.28), transparent 70%);
  pointer-events: none;
}
.contact-lead { color: var(--text-dim); font-size: var(--step-1); max-width: 34ch; }
.contact-email {
  display: block; margin-top: clamp(24px, 3vw, 48px);
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  font-size: 7.2vw; line-height: 1; letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--white);
  transition: color .4s;
}
.contact-email:hover, .contact-email:focus-visible { color: var(--gold-light); }
.contact-email .at { color: var(--gold); }
.contact-actions { margin-top: clamp(32px, 4vw, 56px); display: flex; flex-wrap: wrap; gap: 12px; }
.copy-btn[data-state="copied"] { color: var(--black); }
.copy-btn[data-state="copied"]::before { width: 260%; height: 600%; }
.contact-meta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 28px; color: var(--text-faint); font-size: var(--step--1); }
.contact-meta a { color: var(--text-dim); }
.contact-meta a:hover { color: var(--cream); }
@media (max-width: 520px) {
  .contact-email { font-size: 8.6vw; }
}
.contact-email { margin-inline: 0; }

/* =========================================================
   v5: homepage edits
   ========================================================= */
/* soft fade at the bottom of the hero */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,6,5,0), rgba(8,6,5,.75) 60%, var(--black) 100%);
}
/* the summary under the hero sits on solid black */
.statement { position: relative; background: var(--black); }

/* selected work: zig-zag rows, websites first */
@media (min-width: 700px) { .work-card--w7, .work-card--w5 { grid-column: span 6; } }
@media (min-width: 1100px) { .work-card--w7 { grid-column: span 7; } .work-card--w5 { grid-column: span 5; } }
/* every project sits on brown satin */
.work-media {
  background:
    radial-gradient(90% 70% at 50% 110%, rgba(182,154,88,.30), transparent 70%),
    linear-gradient(180deg, rgba(8,6,5,.28), rgba(8,6,5,.62)),
    url("../img/portfolio-decoration/p01-decoration-64-800.webp?v=9") 50% 50% / cover,
    var(--espresso);
}
.work-kind .status { margin-right: 8px; vertical-align: 1px; }
.work-media--stack img:nth-child(3) { z-index: 1; }

/* what I do: no floating images. A soft satin light passes across the row,
   and each area links straight to the projects that show it */
.cap { overflow: hidden; isolation: isolate; padding-inline: clamp(0px, 1.4vw, 24px); }
.cap::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, transparent 20%, rgba(182,154,88,.10) 50%, transparent 80%),
    linear-gradient(90deg, transparent, rgba(34,26,20,.6));
  opacity: 0; transform: translateX(-30%);
  transition: opacity .5s, transform 1.2s var(--ease-out);
}
.cap:hover::before, .cap:focus-within::before { opacity: 1; transform: none; }
.cap-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cap-links a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); font-size: .82rem; color: var(--text-dim);
  transition: background .3s, color .3s, border-color .3s;
}
.cap-links a::after { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; transition: transform .4s var(--ease-out); }
.cap-links a:hover, .cap-links a:focus-visible { background: var(--cream); color: var(--black); border-color: var(--cream); }
.cap-links a:hover::after { transform: translateX(3px) rotate(45deg); }

/* tools marquee runs across a satin ribbon */
.ribbon {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: clamp(56px, 7vw, 120px);
  padding-block: clamp(18px, 2.4vw, 36px);
  border-block: 1px solid rgba(251,231,178,.22);
}
.ribbon .marquee { margin-top: 0; }
.ribbon-satin {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(8,6,5,.55), rgba(8,6,5,.35) 50%, rgba(8,6,5,.6)),
    url("../img/portfolio-decoration/p01-decoration-65-800.webp?v=9") 0% 40% / 140% auto;
  animation: ribbon-drift 30s var(--ease-in-out) infinite alternate;
}
@keyframes ribbon-drift { from { background-position: 0% 40%, 0% 40%; } to { background-position: 0% 40%, 100% 60%; } }

/* full range: thumbnails on satin */
.range-thumb {
  background:
    linear-gradient(180deg, rgba(8,6,5,.2), rgba(8,6,5,.55)),
    url("../img/portfolio-decoration/p01-decoration-64-800.webp?v=9") 50% 50% / cover;
}

/* contact: soft gold glow (no satin) */
.contact { position: relative; isolation: isolate; overflow: hidden; }

/* phone-only tools list (shown by mobile.css) */
@media (min-width: 760px) { .tool-pills { display: none; } }