/* A small studio, expressed through its materials rather than a stock portrait. */
.about-intro { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 3rem; }
.about-intro .studio-intro { padding: 0; }
.about-intro .studio-intro h1 { max-width: none; font-size: clamp(2.5rem,4.3vw,4.4rem); }
.about-intro .studio-intro p { max-width: 38ch; }
.about-intro .studio-intro p + p { margin-top: 1rem; }
.studio-composition { position: relative; aspect-ratio: 1; isolation: isolate; }
.composition-orbit { position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--color-gold) 35%,transparent),transparent 70%),radial-gradient(circle at 70% 80%,color-mix(in srgb,var(--studio-blue) 30%,transparent),transparent 70%); }
.composition-window { position: absolute; inset: 12% 8% 18%; border-radius: 22px; background: var(--color-primary); transform: rotate(-7deg); box-shadow: 0 25px 60px color-mix(in srgb,var(--color-primary) 20%,transparent); display: flex; flex-direction: column; align-items: center; overflow: hidden; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.studio-composition:hover .composition-window { transform: rotate(-3deg) translateY(-5px); }
.composition-window__bar { display: flex; width: 100%; padding: 1rem; gap: .4rem; background: color-mix(in srgb,var(--color-ivory) 5%,transparent); }
.composition-window__bar span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold); opacity: .7; }
.composition-mark { width: 45%; height: 40%; margin: 8% 0 4%; background: var(--color-gold); mask: url('/assets/images/brand/novoro-mark-full.svg') center/contain no-repeat; }
.composition-palette { display: flex; gap: .8rem; margin-top: 6%; }
.composition-palette i { width: 18px; height: 18px; border-radius: 50%; background: var(--studio-blue); }
.composition-palette i:nth-child(2) { background: var(--studio-peach); }
.composition-palette i:nth-child(3) { background: var(--studio-mint); }
.composition-note { position: absolute; width: 48%; right: 0; bottom: 5%; padding: 1.5rem; border-radius: 14px; transform: rotate(7deg); background: var(--color-ivory); box-shadow: 0 10px 40px color-mix(in srgb,var(--color-primary) 15%,transparent); }
.composition-note > span { font-size: .7rem; color: var(--color-text-secondary); }
.composition-note svg { display: block; width: 100%; margin-block: .8rem; color: var(--studio-mint); }
.composition-note strong { font-size: .8rem; font-weight: 500; }
.composition-swatch { position: absolute; left: 0; top: 18%; display: grid; grid-template-columns: repeat(2,1fr); gap: .35rem; width: 22%; aspect-ratio: 1; padding: .6rem; border-radius: 14px; background: var(--color-ivory); box-shadow: 0 10px 30px color-mix(in srgb,var(--color-primary) 12%,transparent); transform: rotate(12deg); }
.composition-swatch span { border-radius: 7px; background: var(--color-gold); }
.composition-swatch span:nth-child(2) { background: var(--studio-blue); }
.composition-swatch span:nth-child(3) { background: var(--studio-peach); }
.composition-swatch span:nth-child(4) { background: var(--studio-mint); }
/* Enlarged text outgrows the note's fixed share of the art; the note is decoration, so it steps aside. */
.studio-composition { container-type: inline-size; }
@container (max-width: 15rem) { .composition-note { display: none; } }
/* The workshop: origin and process share one warm panel. */
.about-workshop { display: grid; }
.workshop-panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2.5rem,5vw,5rem); align-items: center; padding: clamp(1.5rem,4.5vw,4rem); border-radius: 28px; background: radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--studio-blue) 17%,transparent),transparent 62%),radial-gradient(ellipse at 0 100%,color-mix(in srgb,var(--color-gold) 16%,transparent),transparent 55%),color-mix(in srgb,var(--color-project-warm) 45%,var(--color-ivory)); box-shadow: 0 0 0 1px color-mix(in srgb,var(--color-primary) 6%,transparent); }
.workshop-story h2 { max-width: 14ch; font-size: clamp(1.9rem,1.4rem + 1.8vw,3rem); line-height: 1.12; letter-spacing: -.05em; font-weight: 400; }
.story-copy { margin-top: 1.5rem; }
.story-copy p { max-width: 52ch; color: var(--color-text-secondary); }

/* Decorative project desk: a brief card beneath the software it becomes. */
.project-desk { position: relative; width: min(100%,320px); aspect-ratio: 16 / 9; margin-top: 2.25rem; }
.project-desk__brief { position: absolute; left: 0; top: 6%; display: grid; align-content: start; gap: .55rem; width: 58%; height: 76%; padding: .9rem 1rem; border-radius: 14px; background: color-mix(in srgb,var(--studio-blue) 15%,var(--color-ivory)); box-shadow: 0 10px 26px color-mix(in srgb,var(--color-primary) 10%,transparent); transform: rotate(-6deg); }
.project-desk__brief span,.project-desk__body span { font-size: var(--font-size-label); font-weight: 600; }
.project-desk__brief span { margin-bottom: .2rem; color: var(--color-primary); }
.project-desk__brief i { height: 6px; border-radius: 6px; background: color-mix(in srgb,var(--studio-blue) 40%,var(--color-ivory)); }
.project-desk__brief i:nth-of-type(2) { width: 82%; }
.project-desk__brief i:nth-of-type(3) { width: 64%; }
.project-desk__app { position: absolute; right: 0; bottom: 0; width: 60%; height: 72%; overflow: hidden; border-radius: 14px; background: var(--color-primary); box-shadow: 0 18px 36px color-mix(in srgb,var(--color-primary) 24%,transparent); transform: rotate(3deg); }
.project-desk__bar { display: flex; align-items: center; gap: .3rem; padding: .55rem .7rem; background: color-mix(in srgb,var(--color-ivory) 7%,transparent); }
.project-desk__bar b { width: 18px; height: 13px; margin-right: auto; background: var(--color-gold); mask: url('/assets/images/brand/novoro-mark-full.svg') center/contain no-repeat; }
.project-desk__bar i { width: 5px; height: 5px; border-radius: 50%; background: var(--color-gold); opacity: .7; }
.project-desk__body { display: grid; gap: .5rem; padding: .7rem .8rem; }
.project-desk__body span { color: var(--color-on-dark); }
.project-desk__body i { height: 6px; border-radius: 6px; background: var(--color-gold); }
.project-desk__body i:last-child { width: 62%; background: color-mix(in srgb,var(--studio-mint) 70%,var(--color-ivory)); }
/* Enlarged text outgrows the fixed-ratio cards; the desk is decoration, so it steps aside. */
.workshop-story { container-type: inline-size; }
@container (max-width: 12rem) { .project-desk { display: none; } }

/* Three always-visible steps joined by a quiet gold line. */
.workshop-steps { display: grid; gap: 2rem; }
.workshop-steps li { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0,1fr); column-gap: 1.25rem; row-gap: .4rem; }
.workshop-steps li:not(:last-child)::before { content: ''; position: absolute; left: calc(1.375rem - 1px); top: 3.25rem; bottom: -1.5rem; width: 2px; border-radius: 2px; background: color-mix(in srgb,var(--color-gold) 55%,transparent); }
.workshop-steps__number { grid-row: span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--color-gold); color: var(--color-primary); font: 600 var(--font-size-sm) var(--font-heading); }
.workshop-steps h3 { display: flex; align-items: center; min-height: 2.75rem; font-size: var(--font-size-xl); font-weight: 500; letter-spacing: -.02em; }
.workshop-steps p { color: var(--color-text-secondary); overflow-wrap: break-word; }
.workshop-process .studio-button { margin: 2.25rem 0 0 4rem; }
/* When enlarged text starves the step copy beside its number, stack the number above it. */
.workshop-process { container-type: inline-size; }
@container (max-width: 12rem) {
 .workshop-steps li { grid-template-columns: minmax(0,1fr); }
 .workshop-steps__number { grid-row: auto; }
 /* Block, not flex: a flex item keeps its min-content width and would not let a long word break. */
 .workshop-steps h3 { display: block; min-height: 0; }
 .workshop-steps li:not(:last-child)::before { display: none; }
 .workshop-process .studio-button { margin-left: 0; }
}

@media(max-width:850px) {
 /* Enlarged text makes the rotated note taller, swinging its corner past a phone's edge. */
 .about-intro { grid-template-columns: minmax(0,1fr); overflow-x: clip; }
 .studio-composition { width: min(100%,500px); justify-self: center; }
 .composition-note { padding: 1rem; }
 .composition-note strong { font-size: .65rem; }
 .composition-window__bar { padding: .8rem; }
 /* Inline padding tracks the viewport, so enlarged text keeps the reading width. */
 .workshop-panel { grid-template-columns: minmax(0,1fr); padding: 2rem min(1.5rem,6vw); border-radius: 22px; }
 .workshop-steps { gap: 1.75rem; }
 .workshop-steps li { column-gap: 1rem; }
 .workshop-steps li:not(:last-child)::before { bottom: -1.25rem; }
 .workshop-process .studio-button { margin-left: 0; }
}
@media(prefers-reduced-motion:reduce) { .composition-window { transition: none; } .studio-composition:hover .composition-window { transform: rotate(-7deg); } }

/* Two chapters, each owning the available viewport; content can grow without clipping. */
.about-intro,.about-workshop { min-height: calc(100svh - var(--header-height)); align-items: center; align-content: center; padding-block: 3rem; }
@media(max-width:850px) {
 .about-intro { gap: 1.5rem; }
 .about-workshop { padding-block: 1rem 3rem; }
}