/* The Studio — site.css */
:root { --accent: var(--peach); --accent-2: var(--sky); }

/* Hero */
.studio-hero__title {
  font-size: clamp(2.75rem, 1.2rem + 4.4vw, 4.75rem);
  font-weight: 760;
  line-height: 0.95;
  letter-spacing: -0.045em;
  max-width: 11ch;
  text-wrap: balance;
}
.studio-hero__deck { max-width: 20ch; }
.studio-hero__line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.studio-hero__line span + span::before { content: "/"; margin: 0 10px; color: var(--coral); }

/* Framed artwork: a slate frame with a peach plane offset behind it */
.studio-frame { position: relative; }
.studio-frame__plate {
  position: relative;
  isolation: isolate;
}
.studio-frame__plate::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 14px -14px -14px 14px;
  background: var(--peach);
}
.studio-frame__plate img {
  display: block;
  width: 100%;
  border: 1.5px solid var(--slate);
}
.studio-frame figcaption {
  display: flex;
  gap: 10px;
  margin-top: 26px;
  font-size: 0.875rem;
  color: var(--ink-muted);
}
.studio-frame figcaption b {
  flex: none;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.studio-frame--hero { padding-right: 14px; }
.studio-hero .eco-hero__art { align-self: center; }
@media (min-width: 960px) { .studio-hero .eco-hero__grid { align-items: center; } .studio-hero .eco-hero__copy { padding-bottom: 48px; } }
.studio-frame--wide { margin-block: 8px 40px; padding-right: 14px; }
.eco-section--dark .studio-frame__plate::before { background: var(--peach); }
.eco-section--dark .studio-frame__plate img { border-color: var(--ivory); }

/* Gentle reveal (only when JS runs and motion is allowed) */
.studio-motion .studio-frame, .studio-motion .medium {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 700ms var(--ease);
}
.studio-motion .is-in { opacity: 1; transform: none; }

/* Method strip */
.studio-method { padding-top: 40px; }
.studio-method .method-rail { margin-bottom: 0; }

/* 01 Idea */
.studio-idea__grid { display: grid; gap: 24px; }
.studio-lede {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  font-weight: 560;
  line-height: 1.4;
  letter-spacing: -0.012em;
}
.prose .studio-lede + p { margin-top: 1.3em; }
.prose a { text-decoration-color: var(--peach); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pullquote {
  position: relative;
  margin: clamp(48px, 7vw, 88px) 0 0;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 5vw, 64px);
  border-top: 2px solid var(--slate);
  border-bottom: 2px solid var(--slate);
  isolation: isolate;
  overflow: hidden;
}
.pullquote::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0; left: -6%;
  width: clamp(80px, 16vw, 220px);
  background: var(--peach);
  transform: skewX(var(--slash-skew));
  transform-origin: bottom left;
}
.pullquote p {
  max-width: 24em;
  margin-left: auto;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
@media (min-width: 960px) {
  .studio-idea__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
  .studio-idea .section__head { margin-bottom: 0; }
}

/* 02 Mediums */
.mediums { display: grid; gap: 14px; }
.medium {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--slate);
  background: var(--ivory);
}
.medium__art {
  aspect-ratio: 300 / 140;
  overflow: hidden;
  border-bottom: 1.5px solid var(--slate);
  background: var(--peach);
}
.medium__art img { width: 100%; height: 100%; object-fit: cover; }
.medium__title {
  padding: 16px 18px 0;
  font-size: 1.25rem;
  font-weight: 730;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.medium__body { padding: 8px 18px 20px; font-size: 0.9375rem; color: var(--ink-muted); line-height: 1.5; }
@media (max-width: 559px) {
  .medium { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .medium__art { grid-row: span 2; aspect-ratio: auto; height: 100%; border-bottom: 0; border-right: 1.5px solid var(--slate); }
  .medium__title { padding: 14px 14px 0; font-size: 1.0625rem; }
  .medium__body { padding: 4px 14px 14px; font-size: 0.875rem; }
}
@media (min-width: 560px) { .mediums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mediums { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }

/* 03 Stack */
.studio-stack__lead { margin: 12px 0 8px; font-weight: 600; }
.tools { margin-top: 36px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.tools summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.tools summary::-webkit-details-marker { display: none; }
.tools summary::after { content: "+"; font-size: 1.5rem; font-weight: 300; color: var(--peach); }
.tools[open] summary::after { content: "\2212"; }
.tools__list {
  display: grid;
  gap: 1px;
  margin: 4px 0 0;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.tools__list div { padding: 16px 18px; background: var(--slate); }
.tools__list dt { font-weight: 700; font-size: 1.0625rem; }
.tools__list dd { margin: 4px 0 0; font-size: 0.9375rem; color: var(--ink-muted); }
.tools__note { padding: 16px 0 20px; font-size: 0.875rem; color: var(--ink-muted); max-width: 46em; }
@media (min-width: 640px) { .tools__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tools__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 04 Crew */
.studio-crew__art { margin-top: 0; }
.studio-crew__grid { display: grid; gap: 8px; }
@media (min-width: 960px) {
  .studio-crew__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
}

/* 05 What if? */
.studio-whatif {
  position: relative;
  padding-block: clamp(64px, 9vw, 128px);
  border-top: 2px solid var(--slate);
  border-bottom: 2px solid var(--slate);
  background: var(--white);
  overflow-x: clip;
}
.studio-whatif__grid { display: grid; gap: 40px; align-items: center; }
.studio-whatif__title {
  font-size: clamp(2.25rem, 1.2rem + 4vw, 4.5rem);
  font-weight: 760;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.studio-whatif__qs {
  margin-top: 24px;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 560;
  line-height: 1.4;
  max-width: 28em;
}
.studio-whatif__body { margin-top: 18px; max-width: 32em; color: var(--ink-muted); }
@media (min-width: 960px) {
  .studio-whatif__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
}

/* 06 Work */
.studio-work__grid { display: grid; gap: 8px; margin-bottom: 32px; }
@media (min-width: 960px) {
  .studio-work__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
}
.works:empty { display: none; }
.works { display: grid; gap: 14px; margin-bottom: 40px; }
@media (min-width: 640px) { .works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .works { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.work { border: 1.5px solid var(--slate); }
.work img { width: 100%; border-bottom: 1.5px solid var(--slate); }
.work__meta { padding: 14px 16px 0; font-size: 0.75rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.work h3 { padding: 6px 16px 0; font-size: 1.25rem; font-weight: 720; letter-spacing: -0.02em; }
.work p { padding: 6px 16px 0; font-size: 0.9375rem; color: var(--ink-muted); }
.work__credits { padding-bottom: 16px; }

/* 07 Ethic */
.studio-ethic { display: grid; gap: 24px; }
.studio-ethic__intro { max-width: 30em; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }
@media (min-width: 960px) { .studio-ethic { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; } }
.studio-close {
  margin-top: clamp(48px, 7vw, 88px);
  padding-top: 24px;
  border-top: 2px solid var(--slate);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  font-weight: 740;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.studio-close span { display: block; color: var(--coral); }

/* Ecosystem line */
.studio-eco { padding-block: 28px; border-top: 1px solid var(--rule); }
.studio-eco__list { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 0.9375rem; color: var(--ink-muted); }
.studio-eco__list a, .studio-eco__list strong { color: var(--ink); font-weight: 680; }
.studio-eco__list a { text-decoration-color: var(--peach); text-decoration-thickness: 2px; text-underline-offset: 4px; }