/* ==========================================================================
   Turnabout case study — project-specific art direction
   Loaded only by /work/turnabout/ (on top of the V3 frame).
   Palette is Turnabout's own, from the brand guideline:
   Black #000000 · Moon Mist #DFD9CD · Gallery #EAEAEA · Tuna #313037.
   The AkhilJ wine accent is deliberately not used inside this project.
   ========================================================================== */

.project-ta {
  --ta-black: #000000;
  --ta-mist: #DFD9CD;
  --ta-gallery: #EAEAEA;
  --ta-tuna: #313037;
  --ta-cream: #EEE9E0;
}

/* ---------- Image frames + reveal ---------- */
.ta-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--ta-mist);
}
/* One consistent edge on every frame: the same radius and a hairline drawn above the image */
.ta-frame::after,
.ta-lockups::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(24, 23, 21, 0.1);
  pointer-events: none;
}
.ta-band--black .ta-frame::after,
.ta-band--black .ta-lockups::after { box-shadow: inset 0 0 0 1px rgba(238, 233, 224, 0.12); }
.ta-img { display: block; width: 100%; height: auto; }

/* Logo lockups, rebuilt natively: the wordmark + monogram are alpha masks
   extracted from the brand guideline, coloured with the brand palette */
.ta-lockups {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: var(--radius-l);
  overflow: hidden;
}
.ta-lock { display: grid; place-items: center; aspect-ratio: 3.2 / 1; background: var(--bg); color: var(--fg); }
.ta-lock i { display: block; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ta-wordmark { --m: url("../../images/projects/turnabout/wordmark.png"); width: 62%; aspect-ratio: 2863 / 350; }
.ta-monogram { --m: url("../../images/projects/turnabout/monogram.png"); height: 34%; aspect-ratio: 284 / 368; }
.js .project-ta [data-reveal="media"] .ta-img { scale: 1.08; transition: scale 1900ms var(--ease-out); }
.js .project-ta [data-reveal="media"].is-in .ta-img { scale: 1; }
.ta-figure figcaption { margin-top: 12px; font-size: var(--fs-xs); color: var(--muted); max-width: 60ch; }

/* ---------- Hero ---------- */
.ta-hero { padding: clamp(20px, 2.5vw, 36px) 0 0; }
.ta-hero__head { margin-top: clamp(36px, 5vw, 80px); align-items: end; row-gap: 28px; }
.ta-hero__main { grid-column: 1 / span 8; }
.ta-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 24px; font-size: var(--fs-xs); color: var(--muted); }
.ta-hero__title { font-size: clamp(3.4rem, 1rem + 9vw, 10rem); line-height: 0.88; letter-spacing: -0.06em; }
.ta-hero__disc { margin-top: 20px; font-size: var(--fs-sm); color: var(--muted); }
.ta-hero__desc { grid-column: 9 / span 4; font-size: var(--fs-lg); line-height: 1.55; color: var(--ink-2); }
.ta-hero__image { margin-top: clamp(40px, 5vw, 72px); }

.ta-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 28px;
  border-top: 1px solid var(--line-strong);
}
.ta-facts > div { padding: 18px 24px 0 0; }
.ta-facts > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.ta-facts dt { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 6px; }
.ta-facts dd { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); line-height: 1.45; }

/* ---------- Sections ---------- */
.ta-section { padding-block: clamp(88px, 9vw, 140px); }
.ta-section--flush-top { padding-top: 0; }
.ta-split { align-items: start; row-gap: 32px; }
.ta-split__head { grid-column: 1 / span 5; }
.ta-split__body { grid-column: 7 / span 6; }
.ta-split__head .kicker { margin-bottom: 20px; }
.ta-h2 { font-size: clamp(1.9rem, 1.2rem + 1.8vw, 3rem); line-height: 1.06; letter-spacing: -0.04em; max-width: 16ch; }
.ta-copy p { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); max-width: 58ch; }
.ta-copy p + p { margin-top: 18px; }
.ta-copy strong { color: var(--ink); font-weight: 600; }
.ta-block { margin-top: clamp(48px, 5vw, 80px); }

/* Moon Mist band — vision & mission */
.ta-band--mist { background: var(--ta-mist); --muted: #57524C; }
.ta-statements { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; gap: clamp(32px, 5vw, 80px); margin-top: clamp(40px, 5vw, 64px); }
.ta-statement { padding-top: 20px; border-top: 1px solid rgba(24, 23, 21, 0.3); }
.ta-statement dt { font-size: var(--fs-xs); color: var(--muted); }
.ta-statement dd {
  margin-top: 16px;
  font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.9rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Black band — logo system */
.ta-band--black {
  background: var(--ta-black);
  color: rgba(238, 233, 224, 0.72);
  --muted: rgba(238, 233, 224, 0.62);
  --line-strong: rgba(238, 233, 224, 0.25);
  --focus: var(--ta-cream);
}
.ta-band--black .ta-h2, .ta-band--black h2, .ta-band--black h3 { color: var(--ta-cream); }
.ta-band--black .kicker { color: rgba(238, 233, 224, 0.62); }
.ta-band--black .ta-copy p { color: rgba(238, 233, 224, 0.78); }
.ta-band--black .ta-frame { background: #111; }

/* Core values */
.ta-values { border-top: 1px solid var(--line-strong); }
.ta-values li { padding: 24px 0; border-bottom: 1px solid var(--line); align-items: baseline; row-gap: 8px; }
.ta-values .meta { grid-column: 1 / span 1; }
.ta-values h3 { grid-column: 2 / span 4; font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.8rem); letter-spacing: -0.03em; }
.ta-values p { grid-column: 7 / span 6; color: var(--ink-2); max-width: 54ch; }

/* Colour */
.ta-defs { margin-top: 28px; display: grid; gap: 12px; }
.ta-defs div { font-size: var(--fs-sm); color: var(--ink-2); }
.ta-defs dt { display: inline; font-weight: 600; color: var(--ink); }
.ta-defs dd { display: inline; }
.ta-palette {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: clamp(48px, 5vw, 72px);
}
.ta-swatch {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 4 / 5;
  padding: 20px;
  border-radius: var(--radius-l);
  background: var(--c);
  color: var(--sw-ink, #F4F1EC);
  box-shadow: inset 0 0 0 1px rgba(24, 23, 21, 0.08);
}
.ta-swatch__name { font-size: var(--fs-lg); letter-spacing: -0.02em; }
.ta-swatch__hex { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; opacity: 0.85; }

/* Typography */
.ta-specimen { background: #fff; padding: clamp(24px, 4vw, 64px); }
.ta-type-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: 20px; }
.ta-type-notes div { padding-top: 14px; border-top: 1px solid var(--line-strong); }
.ta-type-notes dt { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.ta-type-notes dd { margin-top: 4px; font-size: var(--fs-sm); color: var(--muted); }

/* Applications */
.ta-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 28px; }
.ta-apps div { padding-top: 14px; border-top: 1px solid var(--line-strong); }
.ta-apps dt { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.ta-apps dd { margin-top: 4px; font-size: var(--fs-sm); color: var(--muted); }
.ta-gallery { row-gap: var(--gap); margin-top: clamp(48px, 5vw, 80px); }
.ta-gallery .ta-g--half { grid-column: span 6; }
.ta-gallery .ta-g--full { grid-column: 1 / -1; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .ta-hero__main, .ta-hero__desc { grid-column: 1 / -1; }
  .ta-hero__desc { max-width: 44ch; }
  .ta-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ta-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .ta-facts > div:nth-child(n + 3) { margin-top: 18px; border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .ta-split__head, .ta-split__body { grid-column: 1 / -1; }
  .ta-statements { grid-template-columns: 1fr; }
  .ta-values h3 { grid-column: 2 / -1; }
  .ta-values p { grid-column: 2 / -1; }
  .ta-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ta-apps { grid-template-columns: 1fr; }
  .ta-gallery .ta-g--half { grid-column: 1 / -1; }
  .ta-lockups { grid-template-columns: 1fr; }
  .ta-lock { aspect-ratio: 2.4 / 1; }
  .ta-lock:nth-child(2) { order: 3; }
}
@media (max-width: 600px) {
  .ta-facts { grid-template-columns: 1fr; }
  .ta-facts > div, .ta-facts > div + div { padding: 16px 0; border-left: 0; margin-top: 0; }
  .ta-facts > div + div { border-top: 1px solid var(--line); }
  .ta-type-notes { grid-template-columns: 1fr; }
  .ta-values .meta, .ta-values h3, .ta-values p { grid-column: 1 / -1; }
  .ta-swatch { aspect-ratio: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .js .project-ta [data-reveal="media"] .ta-img { scale: 1; transition: none; }
}