/* Mutton lives in the same portfolio; only page-specific compositions belong here. */

/* A deeper story: the page-builder boundary, continuity and delivery. */
.mutton-project-context { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; padding: 42px 4% 0; }
.mutton-project-context dt { color: var(--case-muted); font-size: .8rem; margin-bottom: 8px; }
.mutton-project-context dd { font-size: 1.05rem; font-weight: 600; }
.mutton-choice-map { margin-top: 45px; }
.mutton-choice-map > div { display: grid; grid-template-columns: 1.2fr 45px 1fr; gap: 25px; align-items: center; padding-block: 26px; border-bottom: 1px solid #e9e3e9; }
.mutton-choice-map > div:last-child { border-bottom: 0; }
.mutton-choice-map > div > span { color: var(--portfolio-body); font-size: clamp(1.1rem,2vw,1.5rem); }
.mutton-choice-map strong { font-size: clamp(1.25rem,2.2vw,1.7rem); font-weight: 600; letter-spacing: -.035em; }
.mutton-choice-map i { font-style: normal; color: #a284b9; font-size: 1.5rem; }
.mutton-case-study .mutton-map-note { margin-top: 24px; text-align: right; rotate: -2deg; color: #835b78; }
.mutton-builder-composition { display: grid; grid-template-columns: 1.35fr 1fr; gap: 9%; align-items: center; margin-top: 65px; }
.mutton-template-pair { display: grid; grid-template-columns: 1fr 32px 1fr; gap: 18px; align-items: center; }
.mutton-template-schematic { position: relative; aspect-ratio: 360/610; border: 1px dashed #b9a9c3; border-radius: 18px; padding: 10% 6%; display: flex; flex-direction: column; gap: 13px; background: linear-gradient(150deg,#f6f2f9,rgba(246,242,249,.1)); }
.mutton-template-ruler { position: absolute; top: -30px; left: 0; width: 100%; text-align: center; font-size: .7rem; color: #806591; }
.mutton-template-header { height: 28%; border: 1px dashed #c6b5cf; display: grid; place-items: center; background: #ebe2f044; border-radius: 6px; }
.mutton-template-header span,.mutton-template-content span { color: #806591; font-size: .7rem; }
.mutton-template-progress { height: 9%; display: flex; gap: 4px; }
.mutton-template-progress i { flex: 1; background: #e4d9ed; border-radius: 3px; }
.mutton-template-progress i:first-child { background: #c4acd9; }
.mutton-template-content { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.mutton-template-content i { flex: 1; border: 1px dashed #c6b5cf; border-radius: 5px; }
.mutton-template-arrow { font-size: 1.6rem; color: #a48aaf; }
.mutton-builder-proof figcaption { max-width: 400px; margin-top: 22px; }
.mutton-builder-copy > div + div { margin-top: 35px; }
.mutton-bound-label { display: block; font-size: .8rem; color: #835b78; margin-bottom: 10px; }
.mutton-case-study .mutton-builder-copy h3 { font-size: clamp(1.6rem,2.4vw,2.1rem); }
.mutton-case-study .mutton-builder-copy p { font-size: 1.04rem; margin-top: 12px; }
.mutton-case-study .mutton-builder-copy .case-handwriting { margin-top: 30px; color: #835b78; font-size: 1.25rem; rotate: -4deg; }
.mutton-context-strips { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; margin-top: 50px; }
.mutton-screen--context { aspect-ratio: 360/255; border-radius: 14px; }
.mutton-context-strips .mutton-size-label { min-height: 2.5em; line-height: 1.4; margin-bottom: 10px; }
.mutton-case-study .mutton-delivery { display: grid; grid-template-columns: .75fr 1.25fr; gap: 9%; align-items: center; padding: 100px 4%; }
.mutton-delivery-number { text-align: center; }
.mutton-delivery-number strong { display: block; font-size: clamp(8rem,16vw,14rem); line-height: .9; letter-spacing: -.05em; font-weight: 700; }
.mutton-delivery-number strong span { display: block; font-size: .2em; letter-spacing: -.025em; margin-top: 15px; }
.mutton-case-study .mutton-delivery-number p { margin-top: 22px; font-size: 1rem; }
.mutton-delivery-number .case-handwriting { display: block; margin-top: 30px; rotate: -7deg; color: #835b78; }
.mutton-delivery-decisions { margin-top: 35px !important; }
.mutton-delivery-decisions > div { display: grid; grid-template-columns: 120px 1fr; gap: 22px; padding-block: 15px; }
.mutton-delivery-decisions dt { font-size: .83rem; color: #835b78; }
.mutton-delivery-decisions dd { font-size: 1rem; line-height: 1.45; color: var(--portfolio-body); }
.mutton-learning-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; margin-top: 50px; }
.mutton-learning-pair strong { font-size: clamp(3.5rem,6.8vw,5.8rem); font-weight: 700; line-height: 1.2; letter-spacing: -.04em; display: block; }
.mutton-case-study .mutton-learning-pair h3 { font-size: 1.3rem; margin-top: 16px; }
.mutton-case-study .mutton-learning-pair p { margin-top: 12px; font-size: 1rem; }
.mutton-case-study .mutton-learning-reading { max-width: 720px; margin-top: 40px; font-size: 1rem; color: var(--case-muted); }
@media(max-width:900px) {
  .mutton-builder-composition { gap: 6%; grid-template-columns: 1.1fr 1fr; }
  .mutton-template-pair { gap: 10px; grid-template-columns: 1fr 20px 1fr; }
  .mutton-template-header span,.mutton-template-content span { font-size: .6rem; }
  .mutton-context-strips { gap: 20px; }
  .mutton-delivery-decisions > div { grid-template-columns: 100px 1fr; gap: 15px; }
}
@media(max-width:650px) {
  .mutton-project-context { grid-template-columns: 1fr; gap: 0; padding: 15px 0 0; }
  .mutton-project-context > div { display: flex; justify-content: space-between; gap: 15px; padding: 12px 0; }
  .mutton-project-context dt { margin: 0; }
  .mutton-project-context dd { font-size: .95rem; }
  .mutton-choice-map > div { grid-template-columns: 1fr 22px; gap: 10px; padding-block: 20px; }
  .mutton-choice-map strong { grid-column: 1; }
  .mutton-choice-map i { grid-column: 2; grid-row: span 2; rotate: 90deg; }
  .mutton-choice-map > div > span { font-size: 1rem; }
  .mutton-case-study .mutton-map-note { font-size: 1.1rem; }
  .mutton-builder-composition { grid-template-columns: 1fr; gap: 40px; margin-top: 65px; }
  .mutton-template-pair { gap: 10px; grid-template-columns: 1fr 20px 1fr; max-width: 420px; margin-inline: auto; }
  .mutton-template-schematic { gap: 8px; }
  .mutton-template-content { gap: 6px; }
  .mutton-builder-copy { max-width: 420px; }
  .mutton-context-strips { grid-template-columns: 1fr; gap: 30px; max-width: 360px; margin-inline: auto; margin-top: 35px; }
  .mutton-context-strips .mutton-size-label { min-height: 0; }
  .mutton-case-study .mutton-delivery { grid-template-columns: 1fr; padding: 60px 0; gap: 50px; }
  .mutton-delivery-number strong { font-size: 9rem; }
  .mutton-delivery-number .case-handwriting { margin-top: 24px; }
  .mutton-delivery-decisions > div { grid-template-columns: 95px 1fr; gap: 15px; }
  .mutton-learning-pair { gap: 40px; grid-template-columns: 1fr; margin-top: 35px; }
  .mutton-learning-pair strong { font-size: 4rem; }
}

.mutton-case-study { --case-blue: #8550ff; --case-blue-ink: #7950c8; --mutton-rose: #fcebec; }
.mutton-case-study .mutton-section { padding-block: 95px; }
.mutton-heading { max-width: 750px; }
.mutton-heading > p:last-child { max-width: 640px; }
.mutton-hero-scene .case-scene-aura { background: radial-gradient(ellipse,rgba(253,203,200,.5),transparent 70%); }
.mutton-hero-scene .case-hero-preview { width: 70%; left: 25%; top: -6%; }
.mutton-hero-scene .case-scene-note { top: 12%; left: -1%; width: 160px; }
.mutton-hero-scene .case-scene-note .case-handwriting { display: block; }
.mutton-hero-scene .case-scene-note svg { display: block; }
.mutton-hero-cubes { position: absolute; width: 37%; left: 0; top: 53%; z-index: 3; pointer-events: none; animation: mutton-float 5.5s ease-in-out infinite; animation-play-state: paused; }
.mutton-hero-scene.is-motion-active .mutton-hero-cubes { animation-play-state: running; }
.mutton-results { display: grid; grid-template-columns: 1.15fr 1fr 1fr; align-items: center; gap: 45px; padding: 48px 4% 30px; }
.mutton-results-intro > p:last-child { font-size: 1.45rem; line-height: 1.3; color: var(--portfolio-ink); font-weight: 600; }
.mutton-case-study .mutton-results .case-kicker { margin-bottom: 12px; }
.mutton-result strong { display: block; font-size: clamp(3.1rem,5.5vw,5rem); line-height: 1.1; font-weight: 700; letter-spacing: -.045em; white-space: nowrap; font-variant-numeric: lining-nums; }
.mutton-result > span { display: block; margin-top: 12px; font-size: 1rem; color: var(--portfolio-body); }
.mutton-result small { display: block; margin-top: 7px; font-size: .8rem; color: var(--case-muted); }
.mutton-ritual { list-style: none; padding: 0; margin: 60px 0 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6%; }
.mutton-ritual li { position: relative; padding-inline: 5%; }
.mutton-ritual li + li::before { content: "→"; position: absolute; top: 140px; left: -13%; font-size: 2rem; font-weight: 300; color: #c0b3cd; }
.mutton-step-no { font-size: .8rem; color: var(--portfolio-muted); letter-spacing: .1em; }
.mutton-ritual-art { height: 220px; margin: 15px 0 25px; display: flex; align-items: center; justify-content: center; position: relative; }
.mutton-ritual-art--part img { width: 120px; height: 210px; object-fit: contain; rotate: 13deg; }
.mutton-ritual-art--part span { font-family: "Bradley Hand","Segoe Print",cursive; color: #805165; font-size: 1.12rem; line-height: 2; rotate: -4deg; }
.mutton-ritual-art--size img { width: 100%; height: 190px; object-fit: contain; }
.mutton-ritual-art--extras { display: flex; gap: 10px; flex-wrap: wrap; align-content: center; padding: 25px 0; }
.mutton-ritual-art--extras span { border-radius: 100px; padding: 13px 23px; background: #f8efee; font-size: 1.25rem; rotate: -7deg; }
.mutton-ritual-art--extras span:nth-child(2) { background: #f0ebfa; rotate: 7deg; }
.mutton-ritual-art--extras span:nth-child(3) { margin-left: 25%; background: #f6f1e7; rotate: -4deg; }
.mutton-ritual-art--extras i { position: absolute; right: 6%; bottom: 28px; font-size: 3rem; color: #ac7a91; font-weight: 300; font-style: normal; rotate: 12deg; }
.mutton-case-study .mutton-ritual h3 { font-size: clamp(1.4rem,2.1vw,1.8rem); }
.mutton-case-study .mutton-ritual p { font-size: 1rem; margin-top: 12px; }
.mutton-case-study .mutton-principle { margin: 100px auto 0; text-align: center; font-size: clamp(1.75rem,3vw,2.5rem); line-height: 1.35; color: var(--portfolio-ink); font-weight: 600; letter-spacing: -.045em; }
.mutton-principle span { color: var(--case-blue-ink); }
.mutton-experience { padding-top: 40px !important; }
.mutton-decision { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12%; padding: 95px 5% 45px; }
.mutton-decision-copy { max-width: 410px; }
.mutton-decision-copy .case-handwriting { margin-top: 32px; rotate: -4deg; color: #835b78; }
.mutton-case-study .mutton-decision-detail { font-size: 1rem; color: var(--portfolio-ink); margin-top: 22px; }
.mutton-product-figure { position: relative; justify-self: center; width: min(100%,340px); isolation: isolate; }
.mutton-product-figure::before { content: ""; position: absolute; inset: 0 -40%; background: radial-gradient(ellipse,#fbe9e9,transparent 70%); z-index: -1; pointer-events: none; }
.mutton-screen { display: block; position: relative; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 16px 48px rgb(55 32 47 / 8%); transition: transform .35s ease,box-shadow .35s ease; isolation: isolate; }
.mutton-screen img { width: 100%; }
.mutton-screen--parts { aspect-ratio: 360/610; }
.mutton-product-figure figcaption { text-align: center; }
.mutton-sizes { padding: 115px 3% 55px; }
.mutton-size-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; align-items: end; }
.mutton-size-heading > p { max-width: 450px; }
.mutton-size-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; margin-top: 55px; }
.mutton-size-label { display: block; margin-bottom: 18px; font-size: .85rem; font-weight: 600; color: #835b78; }
.mutton-size-options .mutton-screen { aspect-ratio: 360/430; border-radius: 13px; }
.mutton-screen--small img { transform: translateY(-10.5%); }
.mutton-screen--large img { transform: translateY(-27%); }
.mutton-screen--boneless img { transform: translateY(-44.6%); }
.mutton-case-study .mutton-size-note { text-align: center; margin-top: 40px; rotate: -2deg; color: #835b78; }
.mutton-decision--reverse .mutton-decision-copy { grid-column: 2; grid-row: 1; }
.mutton-decision--reverse .mutton-product-figure { grid-column: 1; grid-row: 1; }
.mutton-screen--extras { aspect-ratio: 360/1050; }
.mutton-case-study .mutton-chef { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; align-items: center; padding: 45px 4% 95px; }
.mutton-chef > figure { max-width: 355px; width: 100%; justify-self: center; rotate: -3deg; }
.mutton-screen--chef { aspect-ratio: 360/408; }
.mutton-screen--chef img { transform: translateY(-47.6%); }
.mutton-chef .case-handwriting { margin-top: 30px; rotate: -3deg; color: #835b78; }
.mutton-flow-heading { max-width: none; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.mutton-flow-heading .case-handwriting { rotate: -5deg; color: #835b78; }
.mutton-flow { display: flex; overflow-x: auto; gap: 30px; padding: 45px 12px 40px; margin: 15px -12px 0; scroll-snap-type: x proximity; overscroll-behavior-inline: contain; scrollbar-color: #c9b7dd transparent; scrollbar-width: thin; }
.mutton-flow > figure { flex: 0 0 240px; scroll-snap-align: start; }
.mutton-screen--flow { height: 475px; }
.mutton-flow figcaption { display: flex; gap: 12px; font-size: .85rem; }
.mutton-flow figcaption span { color: var(--case-blue-ink); }
.mutton-flow:focus-visible { outline: 3px solid var(--case-blue); outline-offset: 8px; }
.mutton-case-study .mutton-reflection { text-align: center; padding-block: 80px 75px; }
.mutton-reflection > p:not(.case-kicker) { max-width: 670px; margin-inline: auto; }
.mutton-case-study .mutton-ending { margin-top: 35px; color: var(--case-blue-ink); font-size: 1.5rem; line-height: 1.4; font-weight: 500; }
.mutton-reflection .case-text-link { margin-top: 38px; }
.mutton-case-study .contact-chapter { padding-top: 65px; }
.mutton-case-study.case-motion-paused .mutton-hero-cubes { animation-play-state: paused !important; }
@keyframes mutton-float { 0%,100% { transform: translate(0,0) rotate(-2deg); } 50% { transform: translate(3px,-12px) rotate(2deg); } }
@media (hover:hover) and (pointer:fine) {
  .mutton-screen:hover { transform: translateY(-4px); box-shadow: 0 22px 52px rgb(55 32 47 / 12%); }
}
@media (max-width:900px) {
  .mutton-case-study .mutton-section { padding-block: 70px; }
  .mutton-results { gap: 25px; padding-inline: 0; }
  .mutton-ritual { gap: 4%; }
  .mutton-ritual-art--part span { font-size: .95rem; }
  .mutton-ritual-art--part img { width: 95px; }
  .mutton-ritual-art--extras span { padding: 12px 16px; font-size: 1rem; }
  .mutton-decision { gap: 7%; padding-inline: 0; }
  .mutton-size-options { gap: 20px; }
  .mutton-sizes { padding-inline: 0; }
  .mutton-case-study .mutton-chef { gap: 8%; padding-inline: 0; }
}
@media (max-width:650px) {
  .mutton-case-study .case-opening-grid { grid-template-columns: 1fr; padding-inline: 0; gap: 25px; min-height: 0; }
  .mutton-hero-scene { max-width: 460px; aspect-ratio: .94; margin-inline: auto; }
  .mutton-hero-scene .case-hero-preview { width: 66%; top: 0; left: 29%; }
  .mutton-hero-scene .case-scene-note { width: 130px; left: 0; top: 14%; }
  .mutton-hero-scene .case-scene-note .case-handwriting { font-size: 1rem; }
  .mutton-results { grid-template-columns: 1fr 1fr; gap: 24px 16px; padding-top: 25px; }
  .mutton-results-intro { grid-column: 1/-1; }
  .mutton-results-intro > p:last-child { font-size: 1.3rem; }
  .mutton-result strong { font-size: clamp(2.5rem,9vw,3.5rem); }
  .mutton-result > span { font-size: .92rem; }
  .mutton-result small { font-size: .73rem; line-height: 1.4; }
  .mutton-case-study .mutton-section { padding-block: 55px; }
  .mutton-ritual { grid-template-columns: 1fr; gap: 35px; margin-top: 35px; }
  .mutton-ritual li { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; padding: 0; }
  .mutton-step-no { grid-column: 1; align-self: end; }
  .mutton-ritual-art { grid-column: 2; grid-row: 1/4; height: 175px; margin: 0; }
  .mutton-ritual h3 { grid-column: 1; align-self: end; margin-top: 10px; }
  .mutton-ritual p { grid-column: 1; }
  .mutton-ritual li + li::before { display: none; }
  .mutton-ritual-art--part img { height: 160px; width: 80px; }
  .mutton-ritual-art--part span { font-size: .78rem; line-height: 1.8; }
  .mutton-ritual-art--size img { height: 145px; }
  .mutton-ritual-art--extras { gap: 7px; }
  .mutton-ritual-art--extras span { padding: 9px 14px; font-size: .95rem; }
  .mutton-ritual-art--extras i { bottom: 4px; right: 0; font-size: 2rem; }
  .mutton-case-study .mutton-principle { margin-top: 50px; font-size: 1.7rem; }
  .mutton-decision,.mutton-size-heading,.mutton-case-study .mutton-chef { grid-template-columns: 1fr; gap: 35px; }
  .mutton-decision { padding-top: 60px; padding-bottom: 15px; }
  .mutton-decision-copy { max-width: none; }
  .mutton-product-figure { width: min(90%,340px); }
  .mutton-decision--reverse .mutton-decision-copy,.mutton-decision--reverse .mutton-product-figure { grid-column: auto; grid-row: auto; }
  .mutton-sizes { padding-top: 75px; padding-bottom: 15px; }
  .mutton-size-options { grid-template-columns: 1fr; gap: 35px; width: min(90%,340px); margin-inline: auto; margin-top: 35px; }
  .mutton-size-options .mutton-screen { aspect-ratio: 360/430; }
  .mutton-size-label { margin-bottom: 12px; }
  .mutton-screen--extras { aspect-ratio: 360/1030; }
  .mutton-chef > figure { order: 2; width: min(90%,340px); rotate: -2deg; }
  .mutton-flow-heading { display: block; }
  .mutton-flow-heading .case-handwriting { margin-top: 25px; text-align: right; }
  .mutton-flow { gap: 22px; padding-top: 30px; }
  .mutton-flow > figure { flex-basis: 225px; }
  .mutton-screen--flow { height: 445px; }
  .mutton-case-study .mutton-reflection { padding-top: 45px; }
  .mutton-case-study .mutton-ending { font-size: 1.25rem; }
}
@media (prefers-reduced-motion:reduce) {
  .mutton-hero-cubes { animation: none; }
  .mutton-screen { transition: none; }
}

/* One open snapshot: project context belongs with the experiment response. */
.mutton-case-study #experiment-summary { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 10%; padding: 65px 4% 70px; }
.mutton-case-study #experiment-summary .case-kicker { margin-bottom: 18px; color: var(--case-muted); font-size: .72rem; letter-spacing: .16em; }
.mutton-case-study #experiment-summary h2 { font-size: clamp(1.9rem,3.1vw,2.7rem); line-height: 1.14; letter-spacing: -.045em; text-wrap: balance; }
.mutton-case-study #experiment-summary .mutton-snapshot-context { margin-top: 30px; color: var(--case-muted); font-size: 1rem; line-height: 1.7; font-weight: 400; letter-spacing: -.015em; }
#experiment-summary .mutton-snapshot-context .case-handwriting { display: inline-block; position: relative; margin: 0 .15em .15em; color: #855eb5; font-size: 1.7rem; line-height: 1.1; rotate: -4deg; }
#experiment-summary .mutton-snapshot-context .case-handwriting::after { content: ""; position: absolute; height: 2px; left: 0; right: -5px; bottom: -5px; background: #bb9fe0; border-radius: 50%; rotate: -2deg; }
#experiment-summary .mutton-snapshot-outcomes { display: grid; gap: 48px; }
#experiment-summary .mutton-result { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 25px; align-items: center; }
#experiment-summary .mutton-result strong { font-size: clamp(3rem,5.8vw,5rem); font-weight: 700; letter-spacing: -.055em; line-height: 1.05; }
#experiment-summary .mutton-result > span { margin: 0; font-size: 1.05rem; font-weight: 500; line-height: 1.4; color: var(--portfolio-ink); }
#experiment-summary .mutton-result small { margin-top: 7px; font-size: .78rem; font-weight: 400; line-height: 1.5; color: var(--case-muted); }
@media(max-width:1000px) {
  .mutton-case-study #experiment-summary { gap: 7%; padding-inline: 2%; }
  #experiment-summary .mutton-result { gap: 16px; }
  #experiment-summary .mutton-result strong { font-size: clamp(2.75rem,5.5vw,4rem); }
  #experiment-summary .mutton-result > span { font-size: .92rem; }
}
@media(max-width:700px) {
  .mutton-case-study #experiment-summary { grid-template-columns: 1fr; gap: 38px; padding: 35px 0 40px; }
  #experiment-summary .mutton-results-intro { grid-column: auto; }
  .mutton-case-study #experiment-summary h2 { font-size: clamp(1.8rem,7vw,2.4rem); }
  .mutton-case-study #experiment-summary .mutton-snapshot-context { margin-top: 22px; font-size: .95rem; }
  #experiment-summary .mutton-snapshot-outcomes { gap: 28px; }
  #experiment-summary .mutton-result { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 22px; }
  #experiment-summary .mutton-result strong { font-size: clamp(3rem,12vw,4.5rem); }
  #experiment-summary .mutton-result > span { font-size: 1rem; }
}