/* A linen atelier with one continuous, animated hand-sewn seam. */
.maka-section { background: #eee6d8; overflow: hidden; border-top: 1px solid #d8cdbb80; }
.maka-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .23; background-image: repeating-linear-gradient(0deg, transparent 0 3px, #d3c5af1f 3px 4px), repeating-linear-gradient(90deg, transparent 0 3px, #fffbec80 3px 4px); }
.maka-section .shell { position: relative; }
.maka-heading .eyebrow { color: #8b7464; }
.maka-heading h2 em { color: #92705d; }
.maka-heading p { color: #8c7c6b; }
.maka-layout { display: grid; grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr); gap: 72px; align-items: center; max-width: 1015px; margin: 66px auto 0; }
.maka-photo-story { position: relative; padding: 0 0 56px; }
.maka-portrait { position: relative; padding: 12px 12px 0; background: #fcfaf3; transform: rotate(-3deg); box-shadow: 0 17px 28px #63534319, 0 2px 5px #63534312; }
.maka-portrait .paper-tape { width: 109px; left: calc(50% - 54px); }
.maka-portrait img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; background: #e0d6c3; }
.maka-portrait figcaption { text-align: center; padding: 17px 5px 18px; }
.maka-portrait figcaption > span { display: block; color: #6c584b; font-family: var(--serif); font-size: 20px; font-style: italic; line-height: 1.35; }
.maka-portrait figcaption small { display: block; font-size: 7px; letter-spacing: 1.2px; color: #a79580; margin-top: 9px; }
.maka-photo-note { position: absolute; right: -4px; bottom: -7px; color: #9c7961; font-size: 19px; line-height: 1.4; text-align: right; transform: rotate(-5deg); }
.maka-photo-spark { position: absolute; top: -29px; right: -33px; font-family: var(--serif); font-size: 45px; line-height: 1; color: #af8c64; transform: rotate(11deg); }
.maka-studio { position: relative; min-width: 0; padding: 24px 31px 22px; background: #faf5e9; border: 1px solid #cfbea342; border-radius: 4px; box-shadow: 0 12px 32px #7360450a; }
.maka-studio::after { content: ''; position: absolute; inset: 8px; border: 1px dashed #cbb99b70; pointer-events: none; border-radius: 2px; }
.maka-studio-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #9c876e; font-size: 7px; letter-spacing: 1.8px; line-height: 1.7; }
.maka-studio-top .icon { width: 18px; height: 18px; color: #b09673; }
.maka-hoop { position: relative; width: 254px; max-width: calc(100% - 24px); aspect-ratio: 1; margin: 31px auto 18px; border: 9px solid #c1a279; border-radius: 50%; box-shadow: inset 0 0 0 2px #ead2ae, 0 0 0 1px #a18461, 0 9px 16px #a18a651c; background: #efe3c9; }
.maka-hoop::after { content: ''; position: absolute; inset: -5px; border: 1px solid #e1c5a0; border-radius: 50%; pointer-events: none; }
.maka-hoop-clasp { position: absolute; width: 37px; height: 20px; background: linear-gradient(90deg, #b29973, #e2d2b3 35% 64%, #a38863); border-radius: 3px 3px 1px 1px; left: calc(50% - 18px); top: -22px; box-shadow: 0 2px 0 #806c4c; }
.maka-hoop-clasp::after { content: ''; position: absolute; left: -8px; right: -8px; height: 4px; top: 7px; background: #847358; border-radius: 3px; }
.maka-fabric { position: absolute; inset: 3px; border-radius: 50%; overflow: hidden; background-color: #f7f0df; background-image: repeating-linear-gradient(0deg, transparent 0 2px, #bdae8b15 2px 3px), repeating-linear-gradient(90deg, transparent 0 2px, #fffdf360 2px 3px); }
.maka-brand { position: absolute; width: 59%; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); mix-blend-mode: multiply; }
.maka-stitching { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.maka-stitch-guide { stroke: #b49d7b; stroke-width: 1; stroke-dasharray: 2 7; opacity: .25; }
.maka-thread { stroke: #9b6b55; stroke-width: 2.8; stroke-dasharray: 4 5; stroke-linecap: round; }
#maka-stitch-reveal { stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.maka-needle { opacity: 0; transition: opacity .18s; }
.maka-needle-thread { stroke: #9b6b55; stroke-width: 1.8; stroke-linecap: round; }
.maka-sewn-tag { position: absolute; right: -23px; bottom: 2px; padding: 10px 12px; text-align: center; font-size: 7px; letter-spacing: 1.4px; line-height: 1.7; color: #857557; background: #f0e7d2; border: 1px dashed #af99735e; box-shadow: 1px 4px 8px #87735b1a; opacity: 0; transform: rotate(-9deg) translateY(9px) scale(.85); transition: opacity .5s, transform .65s cubic-bezier(.2,.8,.2,1); }
.maka-message-space { display: grid; text-align: center; }
.maka-message-space > div { grid-area: 1 / 1; }
.maka-teaser { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 14px 0 24px; transition: opacity .35s; }
.maka-teaser-line { display: block; width: 35px; height: 1px; background: #bb9a71; margin-bottom: 19px; }
.maka-teaser h3 { font-size: 29px; line-height: 1.17; color: #846f5b; }
.maka-teaser p { font-size: 11px; color: #aa947c; line-height: 1.75; margin-top: 18px; }
.maka-wish { visibility: hidden; opacity: 0; transform: translateY(13px); padding: 6px 0 9px; transition: opacity .7s, transform .7s, visibility .7s; }
.maka-wish h3 { font-size: 28px; line-height: 1.14; color: #6f5a4b; letter-spacing: -.4px; }
.maka-wish h3 em { color: #9a6d5b; }
.maka-wish > p { color: #897761; font-size: 12px; line-height: 1.75; margin: 13px auto 0; max-width: 350px; }
.maka-wish-signature { display: block; color: #a08067; font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.4; margin-top: 18px; }
.maka-controls { position: relative; z-index: 1; margin-top: 18px; text-align: center; }
.maka-button { margin: 0 auto; justify-content: center; min-height: 48px; gap: 12px; padding-inline: 24px; background: #75624f; color: #fcf6e8; font-size: 11px; border-radius: 3px; transition: background .2s, transform .2s; }
.maka-button .icon { width: 18px; height: 18px; }
.maka-button:not([aria-disabled="true"]):hover { background: #5e4d3e; transform: translateY(-1px); }
.maka-button[aria-disabled="true"] { cursor: wait; background: #9c8b77; }
.maka-status { color: #a18e75; font-size: 9px; min-height: 19px; margin-top: 10px; line-height: 1.7; }
.maka-studio.is-stitching .maka-needle { opacity: 1; }
.maka-studio.is-complete .maka-sewn-tag { opacity: 1; transform: rotate(-9deg) translateY(0) scale(1); }
.maka-studio.is-complete .maka-teaser { visibility: hidden; opacity: 0; }
.maka-studio.is-complete .maka-wish { visibility: visible; opacity: 1; transform: none; }
@media (max-width: 1100px) {
  .maka-layout { gap: 42px; }
  .maka-studio { padding-inline: 25px; }
  .maka-portrait figcaption > span { font-size: 17px; }
  .maka-photo-note { font-size: 17px; }
  .maka-wish h3 { font-size: 26px; }
}
@media (max-width: 820px) {
  .maka-layout { grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr); gap: 28px; margin-top: 49px; align-items: center; }
  .maka-studio { padding-inline: 19px; }
  .maka-studio-top { font-size: 6px; letter-spacing: 1.2px; }
  .maka-hoop { width: 215px; margin-top: 29px; }
  .maka-wish h3 { font-size: 24px; }
  .maka-wish > p { font-size: 11px; }
  .maka-wish-signature { font-size: 14px; }
  .maka-portrait { padding: 9px 9px 0; }
  .maka-portrait figcaption > span { font-size: 16px; }
  .maka-portrait figcaption small { font-size: 6px; letter-spacing: .6px; }
  .maka-photo-spark { right: -14px; top: -28px; font-size: 31px; }
  .maka-photo-note { right: 0; font-size: 15px; }
}
@media (max-width: 650px) {
  .maka-heading p { max-width: 255px; margin-inline: auto; }
  .maka-layout { display: flex; flex-direction: column; gap: 43px; margin-top: 43px; }
  .maka-photo-story { width: min(100% - 26px, 335px); padding-bottom: 45px; }
  .maka-photo-note { bottom: -8px; right: -7px; font-size: 17px; }
  .maka-portrait figcaption > span { font-size: 19px; }
  .maka-portrait figcaption small { font-size: 6.5px; letter-spacing: .8px; }
  .maka-studio { width: min(100%, 438px); padding: 22px 25px 20px; }
  .maka-studio-top { font-size: 6.5px; }
  .maka-hoop { width: 242px; margin-top: 31px; margin-bottom: 20px; }
  .maka-wish h3 { font-size: 28px; }
  .maka-wish > p { font-size: 12px; line-height: 1.8; }
  .maka-wish-signature { font-size: 16px; }
  .maka-controls { margin-top: 15px; }
}
@media (max-width: 360px) {
  .maka-studio { padding-inline: 21px; }
  .maka-hoop { width: 216px; }
  .maka-wish h3 { font-size: 25px; }
  .maka-wish > p { font-size: 11px; }
  .maka-wish-signature { font-size: 15px; }
  .maka-sewn-tag { right: -19px; }
}
