/* Two studio stories, each with its own complete colour context. */
.studio-page-surface,
.origin-page-surface {
  color-scheme: light;
  --sheet: #f1f0e9;
  --panel: #e5e6dd;
  --raised: #fafaf5;
  --ink: #242b25;
  --ink-2: #535e53;
  --ink-3: #535e53;
  --oxide: #923e29;
  --oxide-tint: #e6d7cc;
  --on-accent: #fff;
  --rule: #bfc5b9;
  --rule-2: #d6d9ce;
  --control-border: #687568;
  --paper: var(--sheet);
  --paper-2: var(--panel);
  --paper-3: var(--panel);
  --surface: var(--raised);
  --line: var(--rule-2);
  --line-strong: var(--rule);
  --c: var(--oxide);
  --ci: var(--oxide);
  background: var(--sheet);
  color: var(--ink);
}

.studio-opening,
.origin-opening {
  padding-top: 154px;
}

.studio-opening-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 8%;
  align-items: end;
  padding-top: 4.3rem;
  padding-bottom: 4.6rem;
}

.studio-opening-grid h1 {
  font-size: clamp(3.8rem, 7.8vw, 8.3rem);
}

.studio-position {
  padding-bottom: .4rem;
}

.studio-position > p:first-child {
  font: 400 clamp(1.55rem, 2.6vw, 2.7rem)/1.25 'Newsreader', Georgia, serif;
  letter-spacing: -.025em;
}

.studio-position > p + p {
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.8;
  max-width: 34ch;
  margin-top: 1.4rem;
}

.studio-switchboard {
  background: var(--panel);
  padding: 2.6rem clamp(2rem, 6vw, 6rem) 2rem;
  border-top: 1px solid var(--control-border);
}

.studio-models {
  padding: 0;
  margin: 0;
  border: 0;
  min-width: 0;
}

.studio-models legend {
  padding: 0;
  margin-bottom: 1.9rem;
  font-size: .8125rem;
  color: var(--ink-2);
}

.studio-model-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.studio-model-option {
  position: relative;
  cursor: pointer;
  min-width: 0;
}

.studio-model-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.studio-model-option > span {
  display: block;
  position: relative;
  min-height: 74px;
  padding: .8rem 0 1rem;
  border-bottom: 1px solid var(--control-border);
  color: var(--ink-2);
  transition: color .35s;
}

.studio-model-option > span::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 3px;
  background: var(--oxide);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}

.studio-model-option > span > span {
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  letter-spacing: -.035em;
  line-height: 1.2;
}

.studio-model-option small {
  display: block;
  font-size: .75rem;
  line-height: 1.5;
  margin-top: .55rem;
}

.studio-model-option input:checked + span {
  color: var(--ink);
}

.studio-model-option input:checked + span::after {
  transform: scaleX(1);
}

.studio-model-option:hover > span {
  color: var(--oxide);
}

.studio-model-option input:focus-visible + span {
  outline: 2px solid var(--oxide);
  outline-offset: 6px;
}

.studio-model-stage {
  position: relative;
  display: grid;
  place-items: center;
  gap: 1.5rem;
  padding: 3.5rem 0 3.6rem;
  min-height: 200px;
}

.studio-model-stage::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 2rem;
  bottom: 0;
  left: 50%;
  background: var(--control-border);
}

.studio-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font: 400 clamp(2.7rem, 5.1vw, 5.4rem)/1.1 'Newsreader', Georgia, serif;
  letter-spacing: -.055em;
  text-align: center;
  min-height: 1.1em;
}

.studio-provider img {
  width: clamp(32px, 4vw, 52px);
  height: auto;
  mix-blend-mode: multiply;
}

.studio-provider-other {
  font-size: clamp(2.3rem, 4.2vw, 4.5rem);
}

/* Native radios provide the keyboard interaction, including without JS. */
@supports selector(:has(*)) {
  .studio-provider { display: none; }
  .studio-switchboard:has(#studio-model-claude:checked) [data-provider='claude'],
  .studio-switchboard:has(#studio-model-openai:checked) [data-provider='openai'],
  .studio-switchboard:has(#studio-model-other:checked) [data-provider='other'] {
    display: flex;
    animation: studio-model-in .42s var(--ease) both;
  }
}

@keyframes studio-model-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

.studio-context-title {
  text-align: center;
  font-size: .8125rem;
  color: var(--ink-2);
  padding: 1.2rem 0 1.8rem;
}

.studio-context-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--control-border);
  text-align: center;
}

.studio-context-columns h2 {
  font-size: clamp(1.55rem, 2.8vw, 2.6rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.04em;
}

.studio-context-columns p {
  font-size: .875rem;
  color: var(--ink-2);
  line-height: 1.6;
  margin-top: .75rem;
}

.studio-switchboard figcaption {
  text-align: center;
  margin-top: 3rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--rule);
  font-size: .875rem;
}

.studio-switchboard figcaption > span {
  display: block;
  font-size: .75rem;
  color: var(--ink-2);
  margin-top: .4rem;
  line-height: 1.6;
}

.studio-engagement {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: 12%;
  padding-top: 5rem;
  padding-bottom: 6rem;
}

.studio-partner-note > p:first-child {
  font-size: .8125rem;
  margin-bottom: 1.3rem;
}

.studio-partner-note > p + p {
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--ink-2);
  max-width: 35ch;
}

.studio-partner-note > a {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: .5rem 0;
  margin-top: 1rem;
  font-size: .8125rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.studio-next-links > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  border-top: 1px solid var(--rule);
  padding: 1.8rem 0;
}

.studio-next-links > a > span:first-child > span {
  font: 400 clamp(1.5rem, 2.2vw, 2.4rem)/1.25 'Newsreader', Georgia, serif;
  letter-spacing: -.025em;
}

.studio-next-links small {
  display: block;
  color: var(--ink-2);
  font-size: .8125rem;
  margin-top: .75rem;
}

.studio-next-links > a > span:last-child {
  font-size: 1.5rem;
  transition: transform .45s var(--ease);
}

.studio-next-links > a:hover > span:last-child {
  transform: translate(4px, -4px);
}

.studio-next-links > a:hover {
  color: var(--oxide);
}

/* The entire tower and retained brick stay in frame. */
.origin-page-surface {
  --sheet: #eeece4;
  --panel: #e4e4da;
  --paper: var(--sheet);
  --paper-2: var(--panel);
  --paper-3: var(--panel);
}

.origin-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3rem;
  padding: 4.2rem 0 3.7rem;
}

.origin-title h1 {
  font-size: clamp(3.6rem, 7vw, 7.5rem);
}

.origin-title > a {
  display: block;
  position: relative;
  padding: .5rem 3rem .5rem 0;
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--ink-2);
  flex-shrink: 0;
}

.origin-title > a > span {
  position: absolute;
  bottom: .6rem;
  right: .1rem;
  font-size: 1.25rem;
  transition: transform .4s var(--ease);
}

.origin-title > a:hover > span {
  transform: translateY(4px);
}

.origin-photo-window {
  aspect-ratio: 13 / 10;
  background: var(--panel);
  overflow: hidden;
}

.origin-photo-window img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(.35);
}

.origin-figure figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem 3rem;
  color: var(--ink-2);
  font-size: .6875rem;
  line-height: 1.6;
  padding-top: .9rem;
}

.origin-figure figcaption > span:last-child {
  text-align: right;
}

.origin-figure figcaption a,
.origin-story-links > a:last-child {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.origin-adaptation {
  display: block;
}

.origin-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10%;
  padding-top: 4.5rem;
  padding-bottom: 6rem;
}

.origin-story > p {
  max-width: 42ch;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--ink-2);
}

.origin-story > div > p {
  font: 400 clamp(1.7rem, 2.7vw, 2.7rem)/1.35 'Newsreader', Georgia, serif;
  letter-spacing: -.025em;
  max-width: 32ch;
}

.origin-story-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  align-items: center;
  margin-top: 1.8rem;
}

.origin-story-links .inline-link {
  margin-top: 0;
  font-size: .875rem;
}

.origin-story-links > a:last-child {
  padding: .5rem 0;
  color: var(--ink-2);
  font-size: .75rem;
}

@media (max-width: 850px) {
  .studio-opening-grid { gap: 7%; grid-template-columns: 1.1fr .9fr; }
  .studio-opening-grid h1 { font-size: clamp(3.5rem, 8.2vw, 5.8rem); }
  .studio-switchboard { padding-inline: 2.2rem; }
  .studio-engagement { gap: 7%; grid-template-columns: .8fr 1.2fr; }
  .origin-title { align-items: flex-start; flex-direction: column; gap: 1.8rem; }
  .origin-story { gap: 7%; }
}

@media (max-width: 600px) {
  .studio-opening, .origin-opening { padding-top: 120px; }
  .studio-opening-grid { grid-template-columns: 1fr; gap: 2.1rem; padding-top: 3rem; padding-bottom: 3rem; }
  .studio-opening-grid h1 { font-size: clamp(3.6rem, 13vw, 5rem); }
  .studio-position > p:first-child { font-size: 1.65rem; }
  .studio-position > p + p { margin-top: 1rem; max-width: 38ch; font-size: .9375rem; }
  .studio-switchboard { padding: 1.7rem 1.2rem 1.5rem; }
  .studio-models legend { font-size: .75rem; margin-bottom: 1.2rem; }
  .studio-model-options { gap: .85rem; }
  .studio-model-option > span { padding: .65rem 0 .9rem; min-height: 88px; }
  .studio-model-option > span > span { font-size: 1rem; line-height: 1.2; }
  .studio-model-option small { font-size: .625rem; line-height: 1.45; margin-top: .55rem; }
  .studio-model-stage { padding: 2.4rem 0 2.6rem; min-height: 154px; }
  .studio-provider { font-size: 2.9rem; gap: .75rem; }
  .studio-provider-other { font-size: 2.4rem; }
  .studio-provider img { width: 32px; }
  .studio-context-title { font-size: .75rem; padding: 1rem 0 1.4rem; }
  .studio-context-columns { gap: 1rem; padding-top: 1.4rem; }
  .studio-context-columns h2 { font-size: 1.35rem; line-height: 1.2; }
  .studio-context-columns p { font-size: .75rem; line-height: 1.6; margin-top: .65rem; }
  .studio-switchboard figcaption { font-size: .8125rem; margin-top: 2rem; padding-top: 1.4rem; line-height: 1.6; }
  .studio-switchboard figcaption > span { font-size: .6875rem; margin-top: .6rem; }
  .studio-engagement { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 3rem; padding-bottom: 3.5rem; }
  .studio-partner-note > p:first-child { margin-bottom: .8rem; }
  .studio-partner-note > p + p { max-width: 41ch; font-size: .875rem; }
  .studio-partner-note > a { margin-top: .6rem; }
  .studio-next-links > a { gap: 1.5rem; padding: 1.5rem 0; }
  .studio-next-links > a > span:first-child > span { font-size: 1.6rem; }
  .studio-next-links small { font-size: .75rem; line-height: 1.6; }
  .origin-title { padding: 3rem 0 2.6rem; }
  .origin-title h1 { font-size: clamp(3.5rem, 12vw, 4.8rem); }
  .origin-title > a { font-size: .75rem; }
  .origin-photo-window { aspect-ratio: 1 / 1; }
  .origin-figure figcaption { display: block; font-size: .625rem; padding-top: .8rem; }
  .origin-figure figcaption > span { display: block; }
  .origin-figure figcaption > span:last-child { text-align: left; margin-top: .5rem; }
  .origin-adaptation { display: inline; margin-left: .35rem; }
  .origin-story { grid-template-columns: 1fr; gap: 2rem; padding-top: 2.8rem; padding-bottom: 3.5rem; }
  .origin-story > p { font-size: .9375rem; max-width: 43ch; }
  .origin-story > div > p { font-size: 1.85rem; max-width: 30ch; }
  .origin-story-links { margin-top: 1.4rem; gap: 1rem 2rem; }
}

@media (max-width: 360px) {
  .studio-choice { padding-inline: 1rem; }
  .studio-switchboard { padding-inline: 1rem; }
  .studio-model-options { gap: .65rem; }
  .studio-model-option > span > span { font-size: .9375rem; }
  .studio-context-columns { gap: .8rem; }
  .studio-context-columns h2 { font-size: 1.25rem; }
  .origin-title h1 { font-size: 3.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-switchboard .studio-provider { animation: none; }
  .studio-model-option > span,
  .studio-model-option > span::after,
  .studio-next-links > a > span:last-child,
  .origin-title > a > span { transition: none; }
}

/* Final editorial trim. */
.studio-switchboard {position:relative}
.studio-switchboard figcaption {position:absolute;right:clamp(2rem,6vw,6rem);top:2.6rem;font-size:.75rem;color:var(--ink-2);padding:0;margin:0;border:0}
.studio-context-columns {margin-top:1.5rem;padding-bottom:1rem}
.studio-context-columns h2 {font-size:clamp(1.25rem,2.4vw,2.2rem)}
.origin-figure figcaption {font-size:.75rem}
@media(max-width:600px){.studio-switchboard figcaption{top:1.7rem;right:1.2rem}.studio-model-option small{font-size:.75rem}.studio-context-columns h2{font-size:1.15rem}.origin-figure figcaption{font-size:.75rem}}

@media(max-width:600px){.studio-opening-grid h1{font-size:clamp(2.8rem,11vw,5rem)}}

.model-choice-intro{display:grid;grid-template-columns:1fr 1fr;gap:12%;align-items:start;padding:55px 0 65px;border-top:1px solid #bdc6b6;color:#243c2e}.model-choice-intro h2{font:400 clamp(2.8rem,5vw,5rem)/1.1 'Archivo',sans-serif;letter-spacing:-.055em}.model-choice-intro h2 em{font:italic 1.06em/1.1 'Newsreader',Georgia,serif;color:#9f462d}.model-choice-intro p{font-size:19px;line-height:1.8;max-width:42ch}.model-considerations{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-bottom:80px;color:#243c2e}.model-considerations article{border-top:1px solid #bdc6b6;padding-top:25px}.model-considerations article>span{font:italic 28px 'Newsreader',Georgia,serif;color:#9f462d}.model-considerations h3{font-size:24px;font-weight:400;margin:22px 0 16px}.model-considerations p{font-size:16px;line-height:1.8;color:#53624e}@media(max-width:700px){.model-choice-intro,.model-considerations{display:block}.model-choice-intro p{margin-top:25px;font-size:17px}.model-considerations article+article{margin-top:30px}.model-considerations{padding-bottom:45px}}