.light-switch {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: 0 0 auto;
}

.light-switch-plate {
  --switch-angle: -27deg;
  --switch-indicator: #ffaf89;
  --switch-face: linear-gradient(150deg, #355347, #1c342d);
  --switch-rim: #819584;
  --switch-ink: #f4f5e9;
  --switch-active: #172e26;
  position: relative;
  display: grid;
  align-content: space-between;
  justify-items: start;
  width: 54px;
  height: 48px;
  padding: 4px 6px;
  border: 1px solid var(--switch-rim);
  border-radius: 8px;
  background: var(--switch-face);
  box-shadow: inset 0 0 0 2px #ffffff18, 0 2px 3px #15291f38;
  color: var(--switch-ink);
}

.theme-light .light-switch-plate {
  --switch-angle: 152deg;
  --switch-indicator: #ffcf57;
  --switch-face: linear-gradient(150deg, #f7faf4, #c7d8c1);
  --switch-rim: #7d957d;
  --switch-ink: #294335;
  --switch-active: #294335;
}

.light-switch-plate::before,
.light-switch-plate::after {
  content: '';
  position: absolute;
  right: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e1c190 39%, #423122 42% 57%, #a78250 60%);
  box-shadow: 0 1px 1px #33200c88;
}
.light-switch-plate::before { top: 5px; }
.light-switch-plate::after { bottom: 5px; }

.switch-lever {
  position: absolute;
  top: 14px;
  right: 9px;
  width: 18px;
  height: 18px;
  border: 2px solid #694c2e;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #64523d, #231b13 70%);
  box-shadow: 0 0 0 1px #f1d7a6aa, 0 2px 2px #2f1d0c70;
}
.switch-lever::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 4px;
  width: 7px;
  height: 14px;
  border-radius: 3px 3px 5px 5px;
  background: linear-gradient(90deg, #654729, #ffebc6 42%, #aa7d48);
  box-shadow: 1px 1px 2px #1d130db0;
  transform-origin: center 2px;
  transform: rotate(var(--switch-angle));
}

.switch-on,
.switch-off {
  display: inline-flex;
  align-items: center;
  padding: 1px 2px;
}
.light-switch-plate svg { display: block; width: 14px; height: 14px; }
.theme-light .switch-on,
body:not(.theme-light) .switch-off {
  color: #fff6de;
  background: var(--switch-active);
  border-radius: 3px;
}
.theme-light .switch-on svg,
body:not(.theme-light) .switch-off svg { color: var(--switch-indicator); }
.light-switch:hover .light-switch-plate { filter: brightness(1.08); }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 380ms ease-out both switch-shadow; }
  ::view-transition-new(root) { animation: 380ms ease-out both switch-light; }
}
@keyframes switch-shadow {
  to { filter: brightness(.5); transform: skewX(-1deg); }
}
@keyframes switch-light {
  from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); filter: brightness(.72); }
  to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); filter: brightness(1); }
}

.light-switch:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 6px;
}

.project-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 19px;
}

.project-options button {
  min-height: 48px;
  padding: 8px 9px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.idea-view .idea-label {
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.idea-view .idea-input textarea {
  display: block;
  width: 100%;
  min-height: 124px;
  height: 124px;
  max-height: 300px;
  resize: vertical;
  font: 500 clamp(16px, 1.45vw, 21px)/1.5 var(--sans);
}

.idea-view .input-foot {
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 13px;
}

.free-quote {
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 5px;
  color: var(--ink);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.25;
}

.holiday-banner {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 2vw, 24px);
  overflow: hidden;
  margin-inline: 4.5vw;
  padding: 8px clamp(12px, 2.5vw, 26px);
  border: 1px solid #ac7e60;
  border-radius: 9px;
  background: radial-gradient(ellipse at 95% 100%, #67393e, transparent 65%), #3e232b;
  color: #fff3e0;
  font: 400 12px/1.25 var(--sans);
}

body[data-step]:not([data-step="idea"]) .holiday-banner,
body[data-project="portrait"] .holiday-banner { display: none; }

.holiday-discount {
  padding-inline-end: clamp(8px, 2vw, 24px);
  border-inline-end: 1px solid #c39370;
  color: #ffdb9d;
  font: 600 clamp(25px, 3vw, 38px)/1.1 'Fraunces', Georgia, serif;
  letter-spacing: -.045em;
}

.holiday-copy { display: grid; gap: 2px; }
.holiday-copy strong { font-size: clamp(14px, 1.65vw, 19px); }
.holiday-copy > span { color: #f4ddce; }
.holiday-star { color: #e8c78c; font-size: clamp(20px, 4vw, 42px); line-height: 1; }

@media (prefers-reduced-motion: no-preference) {
  .holiday-banner::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(108deg, transparent 42%, #f5c78232 50%, transparent 58%);
    transform: translateX(-65%);
    animation: holiday-glint 2.1s ease-out 2;
  }
}

@keyframes holiday-glint {
  60%, 100% { transform: translateX(65%); }
}
.idea-view .next-button, .theme-light .next-button, .next-button { font-size: 15px; }
.desk-note p, .desk-note button, .theme-light .desk-note p, .theme-light .desk-note button { font-size: 13px; }
.masthead .about-link, .theme-light .masthead .about-link { font-size: 13px; }
.field label, .finish-choice legend, .photo-slot label,
.theme-light .field label, .theme-light .finish-choice legend { font-size: 14px; }
.photo-slot small, .photo-slot input, .finish-choice small { font-size: 12px; }
.portrait-photos p, .photo-note { font-size: 13px; }
.privacy-note, .private-note, .theme-light .privacy-note, .theme-light .private-note { font-size: 12px; }
.summary-intro, .theme-light .summary-intro { font-size: 15px; }
.summary-content dt, .email-destination, .theme-light .email-destination { font-size: 12px; }
.summary-content dd, .summary-actions button, .text-button,
.theme-light .summary-actions button, .theme-light .text-button { font-size: 14px; }
.site-footer button, .theme-light .site-footer button { font-size: 12px; }
.site-footer .preview-label, .theme-light .site-footer .preview-label { font-size: 11px; }
.site-footer > div { flex-wrap: wrap; }

@media (max-width: 760px) {
  .masthead .about-link, .theme-light .masthead .about-link {
    display: inline-block;
    min-height: 44px;
    margin-left: auto;
    padding: 5px 0;
    line-height: 1.15;
  }
  .masthead .light-switch { margin-left: 0; }
  .project-options button { font-size: 14px; }
  body[data-step=idea] .idea-view form { grid-row: 4; }
  body[data-step=idea] .desk-note { grid-row: 5; }
}

.portrait-heading { display: none; }

body[data-project=portrait] :is(.theater, .joy-scribble, .hidden-ink, .beam-dust, .global-light, .torch-reticle) {
  display: none;
}

body[data-project=portrait][data-step] .workspace {
  display: block;
  min-height: 0;
  max-width: 820px;
  padding: 12px clamp(16px, 4vw, 32px) 4px;
}

body[data-project=portrait][data-step] :is(.brief-desk, .view:not([hidden])) { display: block; }
body[data-project=portrait] .brief-desk { padding-right: 0; }
body[data-project=portrait][data-step] .steps { margin-bottom: 8px; }
body[data-project=portrait] .step-number { font-size: 22px; }
body[data-project=portrait] .idea-view > .eyebrow { display: none; }
body[data-project=portrait][data-step] .idea-view h1 {
  margin: 0 0 10px;
  font-size: clamp(49px, 9vw, 84px);
}
body[data-project=portrait][data-step] .idea-view form { margin-top: 0; }
body[data-project=portrait] .project-options { margin-bottom: 12px; }
body[data-project=portrait] .idea-view .idea-input textarea { min-height: 96px; height: 96px; }
body[data-project=portrait] .desk-note { margin-top: 12px; padding-top: 8px; }

body[data-project=portrait] .view-heading h2 {
  font-size: clamp(32px, 5vw, 50px);
  line-height: 1.05;
}
body[data-project=portrait] .portrait-heading { display: inline; }
body[data-project=portrait] :is(.scene-heading, .chosen-idea, .summary-symbol) { display: none; }
body[data-project=portrait] .back-button { font-size: 13px; }

body[data-project=portrait] .portrait-photos {
  padding: 0;
  border: 0;
  margin: 8px 0 0;
}
.photos-view .photo-slots {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-block: 7px;
}
.photos-view .photo-slot {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: 5px;
}
.photos-view .photo-slot :is(.photo-guide, label) { grid-column: 1 / -1; }
.photos-view .photo-guide {
  height: clamp(42px, calc((100dvh - 504px) / 2), 138px);
  width: auto;
  margin: 0 auto 4px;
}
.photos-view .photo-slot img {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 38px;
  height: 38px;
  object-fit: cover;
  border: 2px solid var(--night);
}
.photos-view .photo-slot label { font-size: 12px; }
.photos-view .photo-slot small { font-size: 10px; }
.photos-view .photo-slot input { margin-block: 2px; font-size: 10px; }
.photos-view .photo-slot input::file-selector-button { padding: 4px; }
.photos-view .portrait-process { margin: 4px 0; }
.photos-view .photo-limits { font-size: 11px; }

body[data-project=portrait] #request-form { margin-top: 14px; }
body[data-project=portrait] :is(.field, .finish-choice) { margin-bottom: 10px; }
body[data-project=portrait] .field textarea { min-height: 64px; height: 64px; }
body[data-project=portrait] .privacy-note { margin-top: 7px; }
body[data-project=portrait] .next-button { min-height: 48px; margin-top: 10px; }
body[data-project=portrait] .button-arrow { width: 34px; height: 34px; }

body[data-project=portrait] .summary-intro { margin-top: 7px; }
body[data-project=portrait] .summary-content {
  display: grid;
  grid-template-columns: minmax(92px, 35%) minmax(0, 1fr);
  gap: 4px 8px;
  padding: 7px 0;
  margin: 8px 0;
}
body[data-project=portrait] .summary-content :is(dt, dd) { margin: 0; }
body[data-project=portrait] .summary-content dt { font-size: 10px; }
body[data-project=portrait] .summary-content dd {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 13px;
}
body[data-project=portrait] .summary-view :is(.private-note, .email-destination) { display: none; }
body[data-project=portrait] .summary-view .photo-note { margin-block: 6px; padding-block: 5px; }
body[data-project=portrait] .summary-view #send-email {
  display: flex;
  min-height: 36px;
  margin-top: 2px;
  padding: 2px 0;
  background: none;
  color: var(--fresh);
  text-decoration: underline;
  border-radius: 0;
}
body[data-project=portrait] .summary-view #send-email :is(span, span:hover) { color: inherit; }
body[data-project=portrait] .summary-view #send-email .button-arrow { display: none; }
body[data-project=portrait] .summary-view #send-email[hidden] { display: none; }
body[data-project=portrait] .summary-actions { margin-top: 8px; }
body[data-project=portrait] .status-note:empty { display: none; }
body[data-project=portrait] .site-footer {
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-block: 8px;
  margin-top: 5px;
}
body[data-project=portrait] .site-footer > div { margin-left: 0; }

@media (max-width: 560px) {
  body[data-project=portrait] .masthead { padding-block: 8px; }
  body[data-project=portrait] .site-footer { display: none; }
  .photos-view .photo-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.secret-pencil { left: 8%; bottom: 16%; width: 117px; transform: rotate(-10deg); }
.secret-pencil span { font: 400 24px/1 'Caveat', cursive; }
.secret-pencil svg { height: 30px; }

.project-options button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  text-align: left;
}
.project-icon { flex: 0 0 22px; width: 22px; height: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .project-options button:is(:hover, :focus-visible) .project-icon path {
    stroke-dasharray: 110;
    animation: pencil-trace .6s ease-out both;
  }
}
@keyframes pencil-trace {
  from { stroke-dashoffset: 110; }
  to { stroke-dashoffset: 0; }
}

.photos-view .photo-slot .photo-slot-error {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.25;
}
.photo-slot:has(input[aria-invalid=true]) { border-color: currentColor; }

.finish-choice { gap: 8px; }
.finish-choice label > span {
  min-height: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.15;
}
.finish-choice input:checked + span {
  border-color: currentColor;
  background: color-mix(in srgb, var(--fresh) 10%, transparent);
}
.finish-choice small {
  max-width: none;
  margin-top: 3px;
  color: inherit;
  font-size: 11px;
  line-height: 1.2;
}
.finish-icon { flex: 0 0 20px; width: 20px; height: 20px; }
.quote-note { font-size: 12px; line-height: 1.25; }

.summary-content dt { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.summary-edit {
  padding: 1px 0;
  color: var(--fresh);
  text-decoration: underline;
  text-underline-offset: .2em;
  font-size: 12px;
  letter-spacing: 0;
}
body[data-project=portrait] .summary-content dt { align-items: flex-start; flex-direction: column; gap: 0; }
body[data-project=portrait] .summary-content dt .summary-edit { font-size: 11px; }
@media (max-width: 760px) {
  .secret-pencil { left: auto; right: 4%; bottom: 22%; width: 95px; }
  .secret-pencil span { font-size: 19px; }
}
@media (max-width: 560px) {
  .project-icon { flex-basis: 19px; width: 19px; height: 19px; }
  body[data-project=portrait] #request-form { margin-top: 10px; }
  body[data-project=portrait] .field textarea { min-height: 58px; height: 58px; }
  body[data-project=portrait] .privacy-note { line-height: 1.25; }
}

.idea-view > .imagination-line {
  color: var(--ink);
  font-size: clamp(18px, 1.85vw, 26px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}

.idea-title-detail {
  display: block;
  margin-top: .2em;
  font-size: clamp(24px, 3.55vw, 52px);
  line-height: 1.05;
  letter-spacing: -.02em;
  white-space: normal;
}

.theater-access { display: flex; flex-wrap: wrap; gap: 12px; }
.theater-access > button:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}
.theater-access > button:focus { margin: 6px 2px; padding: 4px; }

.info-dialog:has(.atelier-pack) { width: min(760px, 92vw); }
.info-dialog .atelier-pack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 16px;
  align-items: center;
}
.atelier-pack figure { margin: 0; }
.atelier-pack img { width: 100%; height: auto; border-radius: 8px; }
.atelier-pack figcaption { margin-top: 4px; font-size: 11px; }
@media (max-width: 560px) {
  .info-dialog .atelier-pack { grid-template-columns: 1fr; gap: 8px; }
  .info-dialog .atelier-pack p { margin-block: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .info-dialog,
  .info-dialog::backdrop {
    opacity: 0;
    transition:
      opacity 220ms ease-in-out,
      display 220ms allow-discrete,
      overlay 220ms allow-discrete;
  }

  .info-dialog[open],
  .info-dialog[open]::backdrop { opacity: 1; }

  @starting-style {
    .info-dialog[open],
    .info-dialog[open]::backdrop { opacity: 0; }
  }
}

.start-button-copy {
  display: grid;
  gap: 2px;
  line-height: 1.15;
}
.start-button-copy strong { font-weight: 700; }
.start-button-copy small { font-size: .8em; font-weight: 500; }
.button-arrow svg { display: block; width: 20px; height: 20px; }

.studio-links {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}
.masthead .studio-links .about-link { margin-left: 0; }
.masthead .studio-links .gallery-link span { margin-left: 0; color: inherit; font-size: inherit; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.gallery-grid figure { margin: 0; }
.gallery-grid img { width: 100%; height: auto; border-radius: 8px; }
.gallery-grid figcaption { margin-top: 5px; font-size: 13px; font-weight: 600; }

@media (max-width: 760px) {
  .studio-links { flex-direction: column; align-items: flex-end; gap: 0; }
  .masthead .studio-links .about-link { min-height: 24px; padding: 3px 0; }
  .gallery-link-prefix { display: none; }
  .gallery-link-label { text-transform: capitalize; }
  .gallery-grid { gap: 12px; }
}

@media (max-width: 560px) {
  .gallery-grid-portraits { grid-template-columns: 1fr; }
}

.portfolio-page :is(.masthead, .holiday-banner) {
  width: min(1220px, 90vw);
  margin-inline: auto;
}
.masthead .gallery-return { margin-left: auto; min-height: auto; }
.portfolio-page .masthead { gap: clamp(10px, 2vw, 28px); }

.gallery-page {
  width: min(1220px, 90vw);
  margin-inline: auto;
  padding-block: clamp(24px, 5vw, 66px);
}
.portfolio-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}
.portfolio-kicker {
  margin-bottom: 16px;
  color: #486654;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.gallery-page h1 {
  font: 500 clamp(42px, 5.6vw, 83px)/.99 var(--serif);
  letter-spacing: -.055em;
}
.gallery-page h1 em { display: block; color: #456e5a; }
.gallery-page .gallery-note { margin-top: 14px; max-width: 45ch; font-size: 15px; }
.portfolio-explore {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 24px;
  background: #253a31;
  color: #fffdf7;
  font-weight: 600;
}
.portfolio-explore:hover { background: #3e6653; }
.portfolio-explore span { color: #ffcf57; }
.portfolio-feature { margin: 0; }
.portfolio-feature img { width: 100%; height: auto; border-radius: 16px; }
.portfolio-feature figcaption { margin-top: 8px; color: #486654; font-size: 13px; }

.gallery-page h2 {
  font: 500 clamp(27px, 3.4vw, 45px)/1.08 var(--serif);
  letter-spacing: -.035em;
}
.portfolio-portraits,
.portfolio-objects { margin-top: clamp(32px, 6vw, 82px); }
.portfolio-portraits {
  padding: clamp(18px, 4vw, 48px);
  border-radius: 16px;
  background: #254337;
  color: #f7fbf2;
  scroll-margin-top: 16px;
}
.portfolio-portraits .gallery-note { color: #d6e6da; max-width: none; }
.gallery-page .gallery-grid { margin-top: 20px; gap: clamp(12px, 2.1vw, 26px); }
.portfolio-portraits .gallery-zoom:focus-visible,
.portfolio-portraits .gallery-zoom:hover img { outline-color: #ffcf57; }
.gallery-page .gallery-grid img { border-radius: 12px; }
.gallery-page .gallery-grid figcaption { margin-top: 8px; }
.portfolio-objects .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.portfolio-page:not(.theme-light) :is(.portfolio-kicker, .portfolio-feature figcaption, .gallery-return) {
  color: #b6cbbd;
}
.portfolio-page:not(.theme-light) .gallery-page h1 em { color: #c8deaa; }
.portfolio-page:not(.theme-light) .portfolio-explore { background: #d5ec9b; color: #172e26; }
.portfolio-page:not(.theme-light) .portfolio-explore:hover { background: #e6f3c6; }
.portfolio-page:not(.theme-light) .portfolio-explore span { color: inherit; }
.portfolio-page:not(.theme-light) .portfolio-portraits { background: #203d33; }

@media (max-width: 760px) {
  .portfolio-page .masthead { padding-inline: 0; }
  .portfolio-page .gallery-return { max-width: 12ch; text-align: right; }
  .portfolio-intro { grid-template-columns: 1fr; }
  .portfolio-objects .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gallery-zoom { display: block; cursor: zoom-in; }
.gallery-zoom:hover img { outline: 2px solid var(--fresh); outline-offset: 2px; }

.gallery-image-dialog {
  width: min(1100px, 94vw);
  max-height: 94dvh;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: var(--night);
  color: var(--ink);
}
.gallery-image-dialog::backdrop { background: #0d1c17db; }
.gallery-image-dialog form { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.gallery-image-dialog button {
  min-height: 44px;
  padding: 0 12px;
  color: var(--fresh);
  font-weight: 600;
}
.gallery-image-dialog button span { margin-left: 4px; font-size: 20px; }
.gallery-image-dialog figure { margin: 0; }
.gallery-image-dialog img {
  width: 100%;
  height: auto;
  max-height: min(72dvh, calc(94dvh - 124px));
  object-fit: contain;
}
.gallery-image-dialog figcaption {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
  text-align: center;
}
.gallery-image-dialog [data-gallery-direction] {
  display: grid;
  place-items: center;
  width: 44px;
  padding: 0;
  border: 1px solid var(--fresh);
  border-radius: 50%;
}
.gallery-image-dialog [data-gallery-direction]:hover {
  background: var(--fresh);
  color: #fff;
}

.gallery-image-dialog img { touch-action: pan-y pinch-zoom; }

.masthead .wordmark {
  color: var(--fresh);
  font: 600 clamp(28px, 3.2vw, 35px)/1 'Fraunces', Georgia, serif;
  letter-spacing: -.06em;
}
.masthead .wordmark > span:first-child { color: var(--amber); }
.masthead .wordmark .wordmark-tagline {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font: 600 11px/1.2 var(--sans);
  letter-spacing: .015em;
  white-space: normal;
}
@media (max-width: 760px) {
  .masthead .wordmark .wordmark-tagline { max-width: 18ch; font-size: 10px; }
}

@media (min-width: 761px) {
  body { --studio-content-width: min(1100px, 86vw); }

  body[data-step] :is(.masthead, .holiday-banner, .site-footer),
  body[data-step]:not([data-project="portrait"]) .workspace,
  .portfolio-page :is(.masthead, .holiday-banner, .gallery-page) {
    width: var(--studio-content-width);
    margin-inline: auto;
    padding-inline: 0;
  }

  body[data-step] .holiday-banner,
  .portfolio-page .holiday-banner { padding-inline: clamp(12px, 2.5vw, 26px); }
}

body[data-step="idea"]:not([data-project="portrait"]) .workspace {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.03fr);
  column-gap: clamp(12px, 3vw, 40px);
}

body[data-step="idea"]:not([data-project="portrait"]) .brief-desk { padding-right: 0; }

body[data-step="idea"]:not([data-project="portrait"]) .idea-view h1 {
  font: 500 clamp(63px, 8vw, 108px)/1 'Fraunces', Georgia, serif;
  letter-spacing: -.07em;
  white-space: normal;
}

.idea-title-detail { font-family: 'Fraunces', Georgia, serif; }

@media (max-width: 760px) {
  body[data-step="idea"]:not([data-project="portrait"]) .workspace {
    grid-template-columns: minmax(0, .48fr) minmax(0, .52fr);
    column-gap: 8px;
  }

  body[data-step="idea"]:not([data-project="portrait"]) .idea-view h1 {
    font-size: clamp(32px, 10.7vw, 76px);
    white-space: nowrap;
  }

  .idea-title-detail {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(20px, 6.1vw, 32px);
  }
  .joy-scribble { display: none; }
}