/* ============================================================
   Mobile design laboratory — six intentionally mobile concepts
   ============================================================ */

.kc-mobile-lab {
  --ml-width: 480px;
  min-height: 100vh;
  padding: 32px 18px 90px;
  background: #111612;
  color: #f7f3e8;
}
.kc-mobile-labbar,
.kc-mobile-lablinks,
.kc-mobile-canvas { width: min(100%, var(--ml-width)); margin-inline: auto; }
.kc-mobile-labbar { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 14px; }
.kc-mobile-labbar > a { display: grid; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: inherit; font-size: 18px; text-decoration: none; }
.kc-mobile-labbar > div { min-width: 0; text-align: center; }
.kc-mobile-labbar span,
.kc-mobile-labbar small { display: block; color: rgba(255,255,255,.48); font-family: var(--font-mono); font-size: 8px; letter-spacing: .07em; line-height: 1.45; text-transform: uppercase; }
.kc-mobile-labbar strong { display: block; overflow: hidden; margin: 3px 0; font-size: 17px; font-weight: 600; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.kc-mobile-lablinks { display: flex; justify-content: space-between; padding: 17px 4px 22px; }
.kc-mobile-lablinks a { color: rgba(255,255,255,.58); font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.kc-mobile-canvas { position: relative; overflow: clip; background: #f4efe4; color: #17231d; box-shadow: 0 34px 90px rgba(0,0,0,.48); }
.kc-mobile-canvas h1,
.kc-mobile-canvas h2,
.kc-mobile-canvas h3,
.kc-mobile-canvas p { margin-top: 0; }
.kc-mobile-canvas picture,
.kc-mobile-canvas img { max-width: 100%; }
.kc-mobile-canvas summary { -webkit-tap-highlight-color: transparent; }
.kc-mobile-canvas .kc-store-ctas { max-width: 100%; }
.kc-mobile-canvas .kc-store-badge img { height: auto; }

/* 01A — cinematic / focus mode */
.is-cinematic-focus .kc-mobile-canvas { background: #102b20; color: #f7f3e8; }
.kc-mf-hero { position: relative; min-height: 820px; padding: 26px 22px 48px; overflow: hidden; }
.kc-mf-grid { position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(#000, transparent 86%); }
.kc-mf-hero > *:not(.kc-mf-grid) { position: relative; z-index: 1; }
.kc-mf-hero > header { display: flex; justify-content: space-between; align-items: center; }
.kc-mf-hero > header > span { color: rgba(255,255,255,.45); font-family: var(--font-mono); font-size: 8px; }
.kc-mf-brand { display: flex; align-items: center; gap: 10px; }
.kc-mf-brand img { width: 46px; height: 46px; border-radius: 11px; }
.kc-mf-brand span { max-width: 130px; font-size: 10px; font-weight: 600; line-height: 1.15; }
.kc-mf-copy { padding-top: 72px; }
.kc-mf-copy > span { display: block; margin-bottom: 16px; color: #b9dd55; font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.kc-mf-copy h1 { margin-bottom: 18px; color: #f7f3e8; font-size: clamp(52px, 14vw, 68px); line-height: .85; letter-spacing: -.065em; }
.kc-mf-copy p { max-width: 390px; margin-bottom: 0; color: rgba(247,243,232,.62); font-size: 14px; line-height: 1.55; }
.kc-mf-device { position: relative; height: 360px; margin-top: 30px; }
.kc-mf-device::before { content: ""; position: absolute; width: 300px; aspect-ratio: 1; right: -95px; top: 6px; border: 1px solid rgba(185,221,85,.5); border-radius: 50%; box-shadow: 0 0 0 38px rgba(185,221,85,.035), 0 0 0 76px rgba(185,221,85,.025); }
.kc-mf-device picture { position: absolute; right: 16px; bottom: -78px; width: 205px; transform: rotate(3deg); }
.kc-mf-device img { display: block; width: 100%; height: auto; }
.kc-mf-balance { position: absolute; z-index: 2; left: 0; top: 78px; display: block; padding: 16px; border: 1px solid rgba(255,255,255,.2); background: rgba(16,43,32,.86); backdrop-filter: blur(12px); }
.kc-mf-balance i { display: block; margin-bottom: 5px; color: rgba(255,255,255,.45); font-family: var(--font-mono); font-size: 8px; font-style: normal; }
.kc-mf-balance b { font-size: 29px; letter-spacing: -.04em; }
.kc-mf-hero > .kc-store-ctas { margin-top: 24px; }
.kc-mf-proof { display: grid; grid-template-columns: repeat(3, 1fr); background: #b9dd55; color: #102b20; }
.kc-mf-proof span { padding: 20px 10px; border-right: 1px solid rgba(16,43,32,.25); font-family: var(--font-mono); font-size: 8px; line-height: 1.35; text-align: center; text-transform: uppercase; }
.kc-mf-proof span:last-child { border-right: 0; }
.kc-mf-proof b { display: block; margin-bottom: 6px; font-size: 25px; line-height: 1; }
.kc-mf-glance { padding: 82px 22px; background: #f4efe4; color: #17231d; }
.kc-mf-glance > header { display: grid; grid-template-columns: 34px 1fr; gap: 16px; }
.kc-mf-glance > header span { padding-top: 7px; color: #d04d34; font-family: var(--font-mono); font-size: 9px; }
.kc-mf-glance h2 { margin-bottom: 38px; font-size: 47px; line-height: .9; letter-spacing: -.055em; }
.kc-mf-shots { display: flex; gap: 16px; margin-right: -22px; padding-right: 22px; overflow-x: auto; scroll-snap-type: inline mandatory; }
.kc-mf-shots a { flex: 0 0 78%; color: inherit; text-decoration: none; scroll-snap-align: start; }
.kc-mf-shots picture { display: block; padding: 8px; background: #fff; box-shadow: 0 18px 32px -24px rgba(23,35,29,.6); }
.kc-mf-shots img { display: block; width: 100%; height: auto; }
.kc-mf-shots span { display: block; margin-top: 13px; font-family: var(--font-mono); font-size: 8px; text-transform: uppercase; }
.kc-mf-why { padding: 80px 26px; background: #d04d34; color: #fffaf0; }
.kc-mf-why > span { font-family: var(--font-mono); font-size: 9px; }
.kc-mf-why h2 { margin: 26px 0 24px; color: inherit; font-size: 48px; line-height: .88; letter-spacing: -.06em; }
.kc-mf-why p { margin-bottom: 0; color: rgba(255,250,240,.72); font-family: Georgia, serif; font-size: 19px; line-height: 1.52; }
.kc-mf-drawers { background: #f4efe4; color: #17231d; }
.kc-mf-drawers > details { border-bottom: 1px solid rgba(23,35,29,.2); }
.kc-mf-drawers > details > summary { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 28px 22px; cursor: pointer; list-style: none; }
.kc-mf-drawers summary::-webkit-details-marker { display: none; }
.kc-mf-drawers > details > summary span { color: #d04d34; font-family: var(--font-mono); font-size: 9px; }
.kc-mf-drawers > details > summary strong { font-size: 21px; }
.kc-mf-drawers > details > summary b { font-size: 20px; font-weight: 400; transition: transform 180ms ease; }
.kc-mf-drawers > details[open] > summary b { transform: rotate(45deg); }
.kc-mf-feature-list,
.kc-mf-pillars,
.kc-mf-faq { padding: 0 22px 28px 66px; }
.kc-mf-feature-list > a { position: relative; display: block; padding: 16px 30px 16px 0; border-top: 1px solid rgba(23,35,29,.14); color: inherit; text-decoration: none; }
.kc-mf-feature-list strong,
.kc-mf-feature-list span { display: block; }
.kc-mf-feature-list strong { margin-bottom: 5px; font-size: 15px; }
.kc-mf-feature-list span { color: rgba(23,35,29,.62); font-size: 12px; line-height: 1.45; }
.kc-mf-feature-list > a > b { position: absolute; right: 0; top: 17px; color: #d04d34; }
.kc-mf-pillars article { padding: 17px 0; border-top: 1px solid rgba(23,35,29,.14); }
.kc-mf-pillars h3 { margin-bottom: 7px; font-size: 20px; }
.kc-mf-pillars p,
.kc-mf-faq p { margin-bottom: 0; color: rgba(23,35,29,.64); font-size: 12px; line-height: 1.5; }
.kc-mf-faq details { border-top: 1px solid rgba(23,35,29,.14); }
.kc-mf-faq summary { display: flex; justify-content: space-between; gap: 10px; padding: 16px 0; cursor: pointer; list-style: none; font-size: 14px; }
.kc-mf-faq details p { padding-bottom: 16px; }
.kc-mf-final { padding: 88px 24px; background: #102b20; color: #f7f3e8; }
.kc-mf-final > span { color: #b9dd55; font-family: var(--font-mono); font-size: 9px; }
.kc-mf-final h2 { margin: 30px 0 38px; color: inherit; font-size: 53px; line-height: .86; letter-spacing: -.06em; }

/* 01B — cinematic / guided journey */
.is-cinematic-journey .kc-mobile-canvas { background: #18271f; color: #fffaf0; }
.kc-mj-intro { position: relative; min-height: 780px; padding: 28px 24px 48px; overflow: hidden; background: #d04d34; }
.kc-mj-ring { position: absolute; width: 440px; aspect-ratio: 1; right: -250px; top: -120px; border: 1px solid rgba(255,250,240,.32); border-radius: 50%; box-shadow: 0 0 0 54px rgba(255,250,240,.04), 0 0 0 108px rgba(255,250,240,.03); }
.kc-mj-intro > *:not(.kc-mj-ring) { position: relative; z-index: 1; }
.kc-mj-intro header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 116px; }
.kc-mj-intro header img { width: 52px; height: 52px; border-radius: 12px; }
.kc-mj-intro header span,
.kc-mj-intro > span { font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.kc-mj-intro h1 { margin: 22px 0; color: inherit; font-size: 65px; line-height: .8; letter-spacing: -.075em; }
.kc-mj-intro p { color: rgba(255,250,240,.75); font-family: Georgia, serif; font-size: 23px; line-height: 1.2; }
.kc-mj-intro > a { position: absolute !important; left: 24px; bottom: 48px; color: inherit; font-family: var(--font-mono); font-size: 9px; text-decoration: none; text-transform: uppercase; }
.kc-mj-scene { position: relative; display: flex; min-height: 820px; flex-direction: column; padding: 30px 24px 44px; overflow: hidden; background: #f1ecdf; color: #17231d; }
.kc-mj-scene.is-2 { background: #b9dd55; }
.kc-mj-scene.is-3 { background: #244c3d; color: #fffaf0; }
.kc-mj-scene header { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; }
.kc-mj-scene header span { color: #d04d34; }
.kc-mj-scene h2 { margin: 70px 0 16px; color: inherit; font-size: 52px; line-height: .85; letter-spacing: -.06em; }
.kc-mj-scene > p { max-width: 350px; color: currentColor; opacity: .65; font-size: 14px; line-height: 1.55; }
.kc-mj-scene > a { position: relative; display: block; width: 235px; margin: 35px auto 0; padding: 10px 10px 34px; background: #fffdf7; box-shadow: 0 24px 42px -28px rgba(0,0,0,.62); transform: rotate(2deg); }
.kc-mj-scene.is-2 > a { transform: rotate(-2deg); }
.kc-mj-scene > a img { display: block; width: 100%; height: auto; }
.kc-mj-scene > small { margin-top: auto; font-family: var(--font-mono); font-size: 8px; text-align: center; text-transform: uppercase; }
.kc-mj-after { padding: 92px 24px 110px; background: #fffaf0; color: #17231d; }
.kc-mj-after > span { color: #d04d34; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; }
.kc-mj-after h2 { margin: 25px 0 38px; font-size: 54px; line-height: .86; letter-spacing: -.06em; }
.kc-mj-after > details { border-top: 1px solid rgba(23,35,29,.2); }
.kc-mj-after > details:nth-of-type(2) { border-bottom: 1px solid rgba(23,35,29,.2); }
.kc-mj-after > details > summary { display: flex; justify-content: space-between; gap: 18px; padding: 21px 0; cursor: pointer; list-style: none; font-size: 18px; font-weight: 600; }
.kc-mj-after summary::-webkit-details-marker { display: none; }
.kc-mj-after ul { margin: 0; padding: 0 0 26px; list-style: none; }
.kc-mj-after li { padding: 13px 0; border-top: 1px solid rgba(23,35,29,.1); }
.kc-mj-after li strong,
.kc-mj-after li span { display: block; }
.kc-mj-after li strong { font-size: 13px; }
.kc-mj-after li span,
.kc-mj-after details > p { color: rgba(23,35,29,.62); font-size: 11px; line-height: 1.45; }
.kc-mj-after .kc-store-ctas { margin-top: 42px; }
.kc-mj-dock { position: sticky; z-index: 8; bottom: 14px; display: flex; width: max-content; gap: 3px; margin: -68px auto 16px; padding: 5px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(17,22,18,.82); backdrop-filter: blur(14px); }
.kc-mj-dock a { display: grid; min-width: 39px; height: 37px; place-items: center; border-radius: 999px; color: rgba(255,255,255,.76); font-family: var(--font-mono); font-size: 8px; text-decoration: none; }
.kc-mj-dock a:first-child { background: #d04d34; color: #fff; }

/* 03A — paper / pocket ledger */
.is-paper-pocket .kc-mobile-canvas { background: #d8c8ad; color: #252018; padding: 20px 14px 28px; }
.kc-mp-cover { position: relative; padding: 54px 22px 34px; background: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(55,45,30,.07) 31px 32px), #fffaf0; box-shadow: 0 18px 34px -26px rgba(55,45,30,.6); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.kc-mp-cover::after { content: ""; position: absolute; right: 0; top: 0; width: 28px; height: 28px; background: linear-gradient(45deg, rgba(55,45,30,.14) 50%, transparent 51%); }
.kc-mp-tab { position: absolute; left: 18px; top: -13px; padding: 9px 13px; background: #c95b3f; color: #fffaf0; font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; }
.kc-mp-cover header { display: flex; align-items: center; gap: 12px; }
.kc-mp-cover header img { width: 52px; height: 52px; border-radius: 12px; }
.kc-mp-cover header small { color: rgba(37,32,24,.5); font-family: var(--font-mono); font-size: 8px; }
.kc-mp-cover h1 { margin: 42px 0 18px; font-family: Georgia, serif; font-size: 58px; font-weight: 400; line-height: .82; letter-spacing: -.055em; }
.kc-mp-headline { color: #c95b3f; font-family: Georgia, serif; font-size: 25px; line-height: 1.08; }
.kc-mp-photo { position: relative; width: 78%; margin: 38px auto 32px; padding: 10px 10px 35px; background: #f2e8d6; box-shadow: 0 22px 36px -26px rgba(37,32,24,.62); transform: rotate(2deg); }
.kc-mp-photo img { display: block; width: 100%; height: auto; }
.kc-mp-photo span { position: absolute; left: 12px; bottom: 13px; font-family: var(--font-mono); font-size: 8px; }
.kc-mp-cover > p:last-child { margin: 28px 0 0; padding-top: 16px; border-top: 1px dashed rgba(37,32,24,.2); color: rgba(37,32,24,.56); font-family: Georgia, serif; font-size: 15px; line-height: 1.45; }
.kc-mp-index { margin-top: 14px; padding: 38px 20px 24px; background: #294f77; color: #fffaf0; }
.kc-mp-index > span { display: block; margin-bottom: 22px; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; }
.kc-mp-index > details { border-top: 1px solid rgba(255,250,240,.24); }
.kc-mp-index > details:last-child { border-bottom: 1px solid rgba(255,250,240,.24); }
.kc-mp-index summary { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 20px 0; cursor: pointer; list-style: none; font-family: Georgia, serif; font-size: 18px; }
.kc-mp-index summary::-webkit-details-marker { display: none; }
.kc-mp-index summary i { font-family: var(--font-mono); font-size: 8px; font-style: normal; }
.kc-mp-index summary b { color: #e7bc4c; font-weight: 400; }
.kc-mp-index details > p,
.kc-mp-index details > div { margin: 0; padding: 0 0 24px 36px; color: rgba(255,250,240,.7); font-size: 13px; line-height: 1.55; }
.kc-mp-index article { padding: 14px 0; border-top: 1px solid rgba(255,250,240,.14); }
.kc-mp-index article strong { display: block; color: #fffaf0; font-family: Georgia, serif; font-size: 17px; font-weight: 400; }
.kc-mp-index article p { margin: 5px 0 0; font-size: 11px; }
.kc-mp-pages { margin-top: 14px; padding: 58px 20px; background: #c95b3f; color: #fffaf0; }
.kc-mp-pages header > span { font-family: var(--font-mono); font-size: 8px; text-transform: uppercase; }
.kc-mp-pages h2 { margin: 24px 0 36px; color: inherit; font-family: Georgia, serif; font-size: 40px; font-weight: 400; line-height: .94; }
.kc-mp-visible { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kc-mp-visible a,
.kc-mp-more a { padding: 7px 7px 24px; background: #fffaf0; color: #252018; text-decoration: none; }
.kc-mp-visible img,
.kc-mp-more img { display: block; width: 100%; height: auto; }
.kc-mp-visible span,
.kc-mp-more span { display: block; margin-top: 9px; font-family: var(--font-mono); font-size: 7px; }
.kc-mp-pages > details { margin-top: 26px; }
.kc-mp-pages > details > summary { display: flex; justify-content: space-between; padding: 16px 0; border-top: 1px solid rgba(255,250,240,.3); border-bottom: 1px solid rgba(255,250,240,.3); cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; }
.kc-mp-pages summary::-webkit-details-marker { display: none; }
.kc-mp-more { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 20px; }
.kc-mp-final { margin-top: 14px; padding: 72px 22px; background: #4b6b50; color: #fffaf0; }
.kc-mp-stamp { display: grid; width: 116px; aspect-ratio: 1; place-content: center; border: 3px double rgba(255,250,240,.6); border-radius: 50%; font-family: var(--font-mono); font-size: 9px; line-height: 1.4; text-align: center; transform: rotate(-8deg); }
.kc-mp-final h2 { margin: 48px 0 38px; color: inherit; font-family: Georgia, serif; font-size: 45px; font-weight: 400; line-height: .91; }

/* 03B — paper / daily journal */
.is-paper-daily .kc-mobile-canvas { background: #fffaf0; color: #272018; }
.kc-md-cover { min-height: 720px; padding: 28px 22px 52px; background: repeating-linear-gradient(to bottom, transparent 0 35px, rgba(41,79,119,.1) 35px 36px), linear-gradient(90deg, transparent 0 44px, rgba(201,91,63,.22) 44px 45px, transparent 45px), #fffaf0; }
.kc-md-cover header { display: flex; justify-content: space-between; align-items: center; }
.kc-md-cover header span { font-family: var(--font-mono); font-size: 8px; }
.kc-md-cover header img { width: 52px; height: 52px; border-radius: 12px; }
.kc-md-cover > p { margin: 116px 0 24px; color: #c95b3f; font-family: Georgia, serif; font-size: 21px; font-style: italic; }
.kc-md-cover h1 { max-width: 410px; font-family: Georgia, serif; font-size: 55px; font-weight: 400; line-height: .88; letter-spacing: -.05em; }
.kc-md-cover > a { display: inline-block; margin-top: 64px; color: #294f77; font-family: var(--font-mono); font-size: 9px; text-decoration: none; text-transform: uppercase; }
.kc-md-timeline { padding: 20px 16px 80px; background: #d9c9ae; }
.kc-md-timeline > article { display: grid; grid-template-columns: 54px 1fr; gap: 10px; padding-top: 18px; }
.kc-md-date { padding-top: 16px; border-right: 1px solid rgba(39,32,24,.2); }
.kc-md-date b { display: block; color: #c95b3f; font-family: Georgia, serif; font-size: 36px; font-weight: 400; line-height: 1; }
.kc-md-date span { display: block; margin-top: 9px; font-family: var(--font-mono); font-size: 7px; line-height: 1.5; }
.kc-md-entry { margin-bottom: 18px; padding: 26px 18px 20px; background: #fffaf0; box-shadow: 0 18px 28px -24px rgba(39,32,24,.62); }
.kc-md-entry > span { color: #294f77; font-family: var(--font-mono); font-size: 8px; text-transform: uppercase; }
.kc-md-entry h2 { margin: 24px 0 13px; font-family: Georgia, serif; font-size: 38px; font-weight: 400; line-height: .9; }
.kc-md-entry > p { color: rgba(39,32,24,.62); font-size: 12px; line-height: 1.5; }
.kc-md-entry > a { display: block; width: 78%; margin: 28px auto 0; padding: 8px 8px 28px; background: #efe4d1; transform: rotate(1deg); }
.kc-md-entry img { display: block; width: 100%; height: auto; }
.kc-md-notes { padding: 74px 20px; background: #294f77; color: #fffaf0; }
.kc-md-notes > span { font-family: var(--font-mono); font-size: 8px; text-transform: uppercase; }
.kc-md-notes > div { display: flex; gap: 14px; margin: 34px -20px 0 0; padding: 0 20px 22px 0; overflow-x: auto; scroll-snap-type: inline mandatory; }
.kc-md-notes article { flex: 0 0 220px; min-height: 210px; padding: 22px; background: #efd16c; color: #272018; box-shadow: 7px 9px 0 rgba(0,0,0,.14); scroll-snap-align: start; transform: rotate(-1deg); }
.kc-md-notes article:nth-child(even) { background: #d5e1d2; transform: rotate(1deg); }
.kc-md-notes small { font-family: var(--font-mono); font-size: 8px; }
.kc-md-notes strong { display: block; margin-top: 74px; font-family: Georgia, serif; font-size: 24px; font-weight: 400; line-height: 1.04; }
.kc-md-drawer { padding: 28px 20px; background: #fffaf0; }
.kc-md-drawer > details > summary { display: flex; justify-content: space-between; padding: 22px 0; cursor: pointer; list-style: none; border-top: 1px solid rgba(39,32,24,.2); border-bottom: 1px solid rgba(39,32,24,.2); font-family: Georgia, serif; font-size: 19px; }
.kc-md-drawer summary::-webkit-details-marker { display: none; }
.kc-md-drawer details > div { padding: 18px 0; }
.kc-md-drawer article { padding: 14px 0; border-bottom: 1px dashed rgba(39,32,24,.15); }
.kc-md-drawer article strong { font-family: Georgia, serif; font-size: 17px; font-weight: 400; }
.kc-md-drawer article p { margin: 5px 0 0; color: rgba(39,32,24,.62); font-size: 11px; line-height: 1.45; }
.kc-md-private { padding: 82px 22px; background: #4b6b50; color: #fffaf0; }
.kc-md-private > span { font-family: var(--font-mono); font-size: 8px; text-transform: uppercase; }
.kc-md-private h2 { margin: 30px 0 20px; color: inherit; font-family: Georgia, serif; font-size: 49px; font-weight: 400; line-height: .9; }
.kc-md-private > p { color: rgba(255,250,240,.66); font-size: 13px; line-height: 1.5; }
.kc-md-private > div { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 40px; }
.kc-md-private > div strong { padding: 8px 10px; border: 1px solid rgba(255,250,240,.3); border-radius: 999px; font-family: var(--font-mono); font-size: 8px; font-weight: 500; }

/* 04A — atelier / editorial deck */
.is-atelier-deck .kc-mobile-canvas { background: #f2ecdf; color: #18261f; }
.kc-mad-hero { min-height: 650px; padding: 28px 22px 48px; background: linear-gradient(rgba(24,38,31,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(24,38,31,.12) 1px, transparent 1px), #f2ecdf; background-size: 46px 46px; }
.kc-mad-hero header { display: flex; justify-content: space-between; align-items: center; }
.kc-mad-hero header img { width: 52px; height: 52px; border-radius: 12px; }
.kc-mad-hero header span,
.kc-mad-hero > span { font-family: var(--font-mono); font-size: 8px; text-transform: uppercase; }
.kc-mad-hero h1 { margin: 104px 0 24px; font-size: 61px; line-height: .82; letter-spacing: -.07em; }
.kc-mad-hero p { max-width: 360px; color: rgba(24,38,31,.62); font-family: Georgia, serif; font-size: 18px; line-height: 1.42; }
.kc-mad-hero > span { display: block; margin-top: 72px; color: #d14d34; }
.kc-mad-deck { display: flex; gap: 12px; padding: 14px 14px 24px; overflow-x: auto; background: #18261f; scroll-snap-type: inline mandatory; }
.kc-mad-deck > article { position: relative; flex: 0 0 calc(100% - 28px); min-height: 740px; padding: 28px 24px; overflow: hidden; background: #fffdf7; color: #18261f; scroll-snap-align: center; }
.kc-mad-deck > article > span { color: #d14d34; font-family: var(--font-mono); font-size: 9px; }
.kc-mad-deck h2 { margin: 56px 0 22px; color: inherit; font-size: 51px; line-height: .85; letter-spacing: -.06em; }
.kc-mad-deck p { color: rgba(24,38,31,.62); font-size: 13px; line-height: 1.5; }
.kc-mad-deck .is-start { background: #c7dd5a; }
.kc-mad-deck .is-start picture { position: absolute; right: 22px; bottom: -42px; width: 230px; transform: rotate(3deg); }
.kc-mad-deck .is-start img { display: block; width: 100%; height: auto; }
.kc-mad-deck .is-start small { position: absolute; left: 24px; bottom: 28px; font-family: var(--font-mono); font-size: 8px; text-transform: uppercase; }
.kc-mad-deck .is-scene.is-2 { background: #d14d34; color: #fffdf7; }
.kc-mad-deck .is-scene.is-3 { background: #355e4d; color: #fffdf7; }
.kc-mad-deck .is-scene > a { position: absolute; left: 50%; bottom: -28px; width: 240px; padding: 9px 9px 34px; background: #fffdf7; transform: translateX(-50%) rotate(2deg); }
.kc-mad-deck .is-scene.is-2 > a { transform: translateX(-50%) rotate(-2deg); }
.kc-mad-deck .is-scene img { display: block; width: 100%; height: auto; }
.kc-mad-deck .is-features { background: #b8d2de; }
.kc-mad-deck .is-features > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 56px 0 24px; }
.kc-mad-deck .is-features > div b { padding: 22px 12px; border: 1px solid rgba(24,38,31,.2); font-family: var(--font-mono); font-size: 10px; text-align: center; }
.kc-mad-deck .is-features details { border-top: 1px solid rgba(24,38,31,.2); border-bottom: 1px solid rgba(24,38,31,.2); }
.kc-mad-deck .is-features summary { display: flex; justify-content: space-between; padding: 18px 0; cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; }
.kc-mad-deck .is-features summary::-webkit-details-marker { display: none; }
.kc-mad-deck .is-features ul { margin: 0; padding: 4px 0 20px 18px; font-size: 11px; line-height: 1.5; }
.kc-mad-deck .is-private { background: #18261f; color: #fffdf7; }
.kc-mad-deck .is-private > div { display: grid; gap: 10px; margin-top: 70px; }
.kc-mad-deck .is-private strong { padding: 18px; border: 1px solid rgba(255,253,247,.2); font-family: Georgia, serif; font-size: 19px; font-weight: 400; }
.kc-mad-final { padding: 82px 22px; background: #d14d34; color: #fffdf7; }
.kc-mad-final > span { font-family: var(--font-mono); font-size: 8px; text-transform: uppercase; }
.kc-mad-final h2 { margin: 32px 0 38px; color: inherit; font-size: 52px; line-height: .85; letter-spacing: -.06em; }

/* 04B — atelier / orbit menu */
.is-atelier-orbit .kc-mobile-canvas { background: #f2ecdf; color: #18261f; }
.kc-mao-hero { position: relative; min-height: 780px; padding: 28px 22px 52px; overflow: hidden; background: linear-gradient(rgba(24,38,31,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(24,38,31,.11) 1px, transparent 1px), #f2ecdf; background-size: 46px 46px; }
.kc-mao-hero header { display: flex; justify-content: space-between; align-items: center; }
.kc-mao-hero header img { width: 52px; height: 52px; border-radius: 12px; }
.kc-mao-hero header span,
.kc-mao-hero > span { font-family: var(--font-mono); font-size: 8px; text-transform: uppercase; }
.kc-mao-hero > span { display: block; margin-top: 62px; color: #d14d34; }
.kc-mao-hero h1 { margin: 22px 0 12px; font-size: 53px; line-height: .84; letter-spacing: -.065em; }
.kc-mao-orbit { position: relative; height: 360px; margin-top: 12px; }
.kc-mao-orbit > i { position: absolute; width: 310px; aspect-ratio: 1; left: 50%; top: 22px; border: 1px solid rgba(24,38,31,.28); border-radius: 50%; box-shadow: 0 0 0 42px rgba(24,38,31,.035), 0 0 0 84px rgba(24,38,31,.025); transform: translateX(-50%); }
.kc-mao-orbit picture { position: absolute; z-index: 2; left: 50%; top: 46px; width: 145px; transform: translateX(-50%); }
.kc-mao-orbit img { display: block; width: 100%; height: auto; }
.kc-mao-orbit b { position: absolute; z-index: 3; display: grid; width: 38px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: #d14d34; color: #fffdf7; font-family: var(--font-mono); font-size: 8px; }
.kc-mao-orbit b:nth-of-type(1) { left: 27px; top: 94px; }
.kc-mao-orbit b:nth-of-type(2) { right: 35px; top: 55px; background: #355e4d; }
.kc-mao-orbit b:nth-of-type(3) { left: 56px; bottom: 33px; background: #355e4d; }
.kc-mao-orbit b:nth-of-type(4) { right: 46px; bottom: 55px; background: #d14d34; }
.kc-mao-hero > p { margin-bottom: 0; color: rgba(24,38,31,.56); font-family: Georgia, serif; font-size: 15px; line-height: 1.45; text-align: center; }
.kc-mao-menu { background: #18261f; color: #fffdf7; }
.kc-mao-menu > details { border-bottom: 1px solid rgba(255,253,247,.18); }
.kc-mao-menu > details > summary { display: grid; grid-template-columns: 38px 1fr auto; gap: 14px; align-items: center; min-height: 108px; padding: 22px; cursor: pointer; list-style: none; }
.kc-mao-menu summary::-webkit-details-marker { display: none; }
.kc-mao-menu > details > summary > span { color: #c7dd5a; font-family: var(--font-mono); font-size: 9px; }
.kc-mao-menu summary small,
.kc-mao-menu summary strong { display: block; }
.kc-mao-menu summary small { margin-bottom: 6px; color: rgba(255,253,247,.44); font-family: var(--font-mono); font-size: 7px; text-transform: uppercase; }
.kc-mao-menu summary strong { max-width: 280px; font-family: Georgia, serif; font-size: 19px; font-weight: 400; line-height: 1.12; }
.kc-mao-menu summary > b { color: #d14d34; font-size: 20px; font-weight: 400; transition: transform 180ms ease; }
.kc-mao-menu details[open] summary > b { transform: rotate(90deg); }
.kc-mao-gallery { display: flex; gap: 12px; padding: 0 22px 32px; overflow-x: auto; }
.kc-mao-gallery a { flex: 0 0 70%; padding: 7px; background: #fffdf7; }
.kc-mao-gallery img { display: block; width: 100%; height: auto; }
.kc-mao-copy,
.kc-mao-features,
.kc-mao-private { padding: 4px 22px 36px 74px; }
.kc-mao-copy h2,
.kc-mao-private h2 { margin-bottom: 16px; color: #fffdf7; font-family: Georgia, serif; font-size: 36px; font-weight: 400; line-height: .92; }
.kc-mao-copy p,
.kc-mao-private p { margin-bottom: 0; color: rgba(255,253,247,.6); font-size: 12px; line-height: 1.55; }
.kc-mao-features article { padding: 15px 0; border-top: 1px solid rgba(255,253,247,.13); }
.kc-mao-features article strong { display: block; font-size: 14px; }
.kc-mao-features article p { margin: 5px 0 0; color: rgba(255,253,247,.56); font-size: 10px; line-height: 1.45; }
.kc-mao-private > strong { display: block; padding: 14px 0; border-top: 1px solid rgba(255,253,247,.13); font-family: Georgia, serif; font-size: 17px; font-weight: 400; }
.kc-mao-private > p + strong { margin-top: 22px; }
.kc-mao-final { padding: 86px 22px; background: #d14d34; color: #fffdf7; }
.kc-mao-final > span { font-family: var(--font-mono); font-size: 8px; text-transform: uppercase; }
.kc-mao-final h2 { margin: 31px 0 40px; color: inherit; font-size: 52px; line-height: .85; letter-spacing: -.06em; }

@media (max-width: 560px) {
  .kc-mobile-lab { padding: 18px 0 0; }
  .kc-mobile-labbar,
  .kc-mobile-lablinks { width: calc(100% - 28px); }
  .kc-mobile-canvas { width: 100%; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kc-mf-drawers > details > summary b,
  .kc-mao-menu summary > b { transition: none; }
}