/* Stills mobile composition. Every rule is breakpoint-scoped so desktop stays untouched. */
@media (max-width:760px){
  :root{--living-gutter:20px}
  html{scroll-padding-top:calc(76px + env(safe-area-inset-top))}
  body.living{font-size:16px}
  .living .grain{opacity:.065;animation:none}

  /* Compact, notch-aware navigation with full-size touch targets. */
  .living-header{
    height:calc(64px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 18px 0;
    background:linear-gradient(180deg,rgba(12,10,9,.76),rgba(12,10,9,.22));
  }
  .living-header.scrolled{height:calc(64px + env(safe-area-inset-top));background:rgba(12,10,9,.86)}
  .living-logo{font-size:1.35rem;min-width:52px;min-height:44px;display:flex;align-items:center}
  .living-nav{gap:8px}.living-nav>a:not(.living-join){display:none}
  .living-nav .living-join{min-height:44px;display:flex;align-items:center;padding:0 16px;font-size:.61rem;letter-spacing:.13em}

  /* Hero typography is sized against narrow screens, not desktop minimums. */
  .living-hero{
    min-height:100svh;padding:calc(96px + env(safe-area-inset-top)) 20px calc(74px + env(safe-area-inset-bottom));
  }
  .living-hero video{object-position:52% 48%}
  .living-hero::before{background:linear-gradient(180deg,rgba(8,7,6,.5),rgba(8,7,6,.46) 48%,#0c0a09 100%),radial-gradient(circle at 52% 35%,transparent 0 14%,rgba(0,0,0,.5) 76%)}
  .living-hero-copy{width:100%}
  .living-hero h1{font-size:clamp(3rem,15.5vw,4.55rem);line-height:.86;letter-spacing:-.052em;margin:20px auto 24px;max-width:6.2ch}
  .living-hero .living-lede{font-size:clamp(1.08rem,4.8vw,1.25rem);line-height:1.23;max-width:22ch}
  .living-kicker{font-size:.6rem;letter-spacing:.25em}
  .living-cue{bottom:calc(18px + env(safe-area-inset-bottom));width:max-content;max-width:85vw;letter-spacing:.17em}

  /* The camera illustration stays atmospheric instead of crowding the copy. */
  .living-story{padding-top:66px}
  .living-story-head{padding:76px 4px 66px;margin-bottom:0}
  .living-story-head h2{font-size:clamp(2.55rem,12vw,3.45rem);line-height:.91;margin:16px auto 19px;max-width:10ch}
  .living-story-head>p:last-child{font-size:.98rem;line-height:1.55;max-width:31ch}
  .living-camera-silhouette{--camera-line:rgba(255,252,242,.15);--camera-fine:rgba(255,252,242,.075);width:min(118vw,530px);top:53%;opacity:.82;transform:translate(-50%,-50%) rotate(-4deg)}

  /* Mobile keeps the three-step story pinned, showing one concise card at a time. */
  .living-journey{min-height:285svh;padding-bottom:0}
  .living-process-stage{
    position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;
    gap:20px;padding:calc(76px + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom));overflow:hidden;
  }
  .living-process-stage .living-frame-stage{order:0;width:min(58vw,230px);margin:0 auto;flex:none;transform:rotate(-2deg);filter:drop-shadow(0 28px 42px rgba(0,0,0,.54))}
  .living-process-stage .living-process-stamp{right:-9px;bottom:14px;max-width:calc(100% + 18px);padding:9px 11px;font-size:.5rem;letter-spacing:.12em;white-space:nowrap}
  .living-process-steps{order:1;position:relative;width:100%;height:206px;display:block;flex:none}
  .living-process-steps .living-step{
    position:absolute!important;inset:0!important;width:100%;height:100%;min-height:0;padding:20px 20px 18px;
    display:flex;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;
    transform:translate3d(0,14px,0) scale(.985);background:rgba(25,23,20,.9);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    transition:opacity .34s var(--dev),transform .34s var(--dev),visibility 0s linear .34s;
  }
  .living-process-steps .living-step.active{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
  .living-process-steps .living-step strong{font-size:clamp(1.7rem,8vw,2rem);margin:9px 0 8px}
  .living-process-steps .living-step p{font-size:.9rem;line-height:1.42;max-width:32ch}
  .living-process-steps .living-step-meta{position:static;display:block;margin-top:auto;padding-top:10px;font-size:.54rem}
  .living-frame-stage.phase-1 .living-stack-card-left{transform:translate(-12%,-3%) rotate(-8deg) scale(.94)}
  .living-frame-stage.phase-1 .living-stack-card-right{transform:translate(12%,3%) rotate(8deg) scale(.94)}
  .living-frame-stage.phase-2 .living-stack-card-left{transform:translate(-17%,-5%) rotate(-10deg) scale(.95);animation:living-mobile-left-settle 2.4s var(--dev) both}
  .living-frame-stage.phase-2 .living-stack-card-right{transform:translate(17%,5%) rotate(10deg) scale(.95);animation:living-mobile-right-settle 2.4s var(--dev) both}
  .living-frame-stage.phase-2 .living-photo{animation:living-mobile-center-settle 2.4s var(--dev) both}
  .living-develop-bloom{inset:-24%;filter:blur(10px)}
  @keyframes living-mobile-left-settle{0%{transform:translate(-12%,-3%) rotate(-8deg) scale(.94)}58%{transform:translate(-19%,-6%) rotate(-11deg) scale(.96)}100%{transform:translate(-17%,-5%) rotate(-10deg) scale(.95)}}
  @keyframes living-mobile-right-settle{0%{transform:translate(12%,3%) rotate(8deg) scale(.94)}58%{transform:translate(19%,6%) rotate(11deg) scale(.96)}100%{transform:translate(17%,5%) rotate(10deg) scale(.95)}}
  @keyframes living-mobile-center-settle{0%{transform:scale(1.035)}58%{transform:translateY(-1%) scale(.99)}100%{transform:scale(1)}}

  /* Mobile gallery becomes a deliberate swipeable film strip. */
  .living-contact{padding:86px 0 74px}
  .living-contact-head{display:block;margin-bottom:34px}
  .living-contact h2{font-size:clamp(3rem,14vw,4rem);line-height:.88;margin:14px 0 22px}
  .living-contact-head>p{font-size:.98rem;line-height:1.55;max-width:31ch}
  .living-strip{display:block;overflow-x:auto;padding:8px 0 30px;scroll-snap-type:x mandatory;scroll-padding-inline:20px;mask-image:none;-webkit-mask-image:none;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .living-strip::-webkit-scrollbar{display:none}
  .living-strip-track{gap:12px;width:max-content;padding:0 20px;animation:none;will-change:auto}
  .living-strip-track .living-shot[aria-hidden="true"]{display:none}
  .living-shot{width:min(76vw,310px);scroll-snap-align:center;scroll-snap-stop:always}
  .living-shot:hover{transform:none}
  .living-shot span{left:13px;right:13px;bottom:12px;gap:12px;font-size:.52rem;letter-spacing:.12em}

  /* Editorial sections use a tighter vertical rhythm and readable line lengths. */
  .living-promises{padding:82px 0 74px}
  .living-promise{grid-template-columns:48px 1fr;gap:16px 12px;padding:32px 0}
  .living-promise:first-of-type{margin-top:38px}
  .living-promise-num{font-size:2.8rem}
  .living-promise h3{font-size:clamp(2rem,10vw,2.7rem);align-self:center}
  .living-promise p{grid-column:1/-1;font-size:.98rem;line-height:1.58;max-width:34ch}
  .living-beyond{padding:82px 0 76px}
  .living-beyond::before{width:150vw;height:130vw;left:-90vw}
  .living-beyond-head{display:block;margin-bottom:38px}
  .living-beyond-head h2{font-size:clamp(3rem,13.4vw,4rem);line-height:.89;margin:16px 0 22px;max-width:9ch}
  .living-beyond-head>p:last-child{font-size:.98rem;line-height:1.55;max-width:32ch}
  .living-tease-grid{grid-template-columns:1fr;border-left:0}
  .living-tease{min-height:0;padding:30px 22px 32px;border-left:1px solid var(--line)}
  .living-tease>span{right:18px;top:17px;font-size:3.5rem}
  .living-tease h3{font-size:clamp(2rem,9.6vw,2.7rem);margin:34px 0 16px;max-width:11ch}
  .living-tease>p:last-child{font-size:.94rem;line-height:1.52;max-width:30ch}

  /* The final signup is built for thumbs and avoids iOS input zoom. */
  .living-return{min-height:92svh;padding:96px 20px calc(74px + env(safe-area-inset-bottom));scroll-margin-top:calc(68px + env(safe-area-inset-top))}
  .living-return-photo{width:118vw;max-width:560px;filter:brightness(.38)}
  .living-return::after{background:radial-gradient(circle,rgba(12,10,9,.26),#0c0a09 72%)}
  .living-return h2{font-size:clamp(3rem,15vw,4.25rem);line-height:.87;margin:16px auto 22px;max-width:8ch}
  .living-return-copy>p:not(.living-kicker){font-size:.98rem;line-height:1.55;max-width:31ch;margin-bottom:0}
  .living-signup{margin-top:28px}
  .living-signup-shell{display:block;border-radius:20px;padding:6px}
  .living-signup input{display:block;width:100%;min-height:52px;padding:13px 14px;text-align:left;font-size:16px}
  .living-signup button{width:100%;min-width:0;min-height:52px;padding:14px 18px}
  .living-signup-status{padding-inline:6px;line-height:1.45}

  /* Footer controls remain easy to tap without becoming visually heavy. */
  .living-colophon{padding:30px 0 calc(30px + env(safe-area-inset-bottom))}
  .living-colophon .foot{flex-direction:column;align-items:flex-start;gap:18px}
  .living-colophon .foot-nav{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .living-colophon .foot-nav a{min-height:42px;display:flex;align-items:center;justify-content:center;padding:8px 10px}
  .living-colophon .soc-row{gap:6px}
  .living-colophon .soc{width:42px;height:42px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%}
  .living-colophon .foot-base{margin-top:20px;padding-top:18px;gap:9px}
}

/* Very narrow and short phones need a denser pinned story. */
@media (max-width:360px){
  .living-hero h1{font-size:3rem}
  .living-process-stage{gap:15px;padding-inline:16px}
  .living-process-stage .living-frame-stage{width:min(54vw,190px)}
  .living-process-steps{height:196px}
  .living-process-steps .living-step{padding:17px}
  .living-process-steps .living-step p{font-size:.84rem}
}

@media (max-width:760px) and (max-height:700px){
  .living-process-stage{gap:14px;padding-top:calc(68px + env(safe-area-inset-top));padding-bottom:12px}
  .living-process-stage .living-frame-stage{width:min(47vw,188px)}
  .living-process-steps{height:192px}
  .living-process-steps .living-step{padding:16px 18px}
  .living-process-steps .living-step strong{font-size:1.65rem;margin:7px 0}
  .living-process-steps .living-step p{font-size:.83rem}
}

/* Secondary pages share the same mobile header, reading width and footer rhythm. */
@media (max-width:760px){
  .site-header{height:calc(64px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 18px 0}
  .site-logo{font-size:1.35rem;min-height:44px;display:flex;align-items:center}
  .site-nav{gap:7px}.site-nav a{min-height:44px;display:flex;align-items:center}
  .site-updates{padding:0 7px}.site-join{padding:0 14px}
  body:not(.living){font-size:16px}
  body:not(.living) .grain{opacity:.065;animation:none}
  body:not(.living) .shell{width:calc(100% - 40px)}
  body:not(.living) .pagehead{padding:calc(110px + env(safe-area-inset-top)) 20px 38px}
  body:not(.living) .pagehead h1{font-size:clamp(2.65rem,13vw,3.5rem);line-height:.94}
  body:not(.living) .pagehead .sub{font-size:1rem;line-height:1.55;max-width:32ch}
  body:not(.living) .prose{padding-bottom:72px}
  body:not(.living) .prose .lead{font-size:1.35rem;line-height:1.35}
  body:not(.living) .prose h2{font-size:1.65rem;margin-top:38px}
  body:not(.living) .prose p,body:not(.living) .prose li{font-size:1rem;line-height:1.62}
  body:not(.living) .upd{padding:calc(110px + env(safe-area-inset-top)) 0 72px;min-height:100svh}
  body:not(.living) .upd .label{margin-bottom:24px}
  body:not(.living) .stage{width:min(224px,60vw);margin-bottom:32px}
  body:not(.living) .upd h1{font-size:clamp(2.7rem,13vw,3.5rem)}
  body:not(.living) .upd .sub{font-size:1rem;line-height:1.55;margin-top:20px}
  body:not(.living) .colophon{padding:30px 0 calc(30px + env(safe-area-inset-bottom))}
  body:not(.living) .colophon .foot{flex-direction:column;align-items:flex-start;gap:18px}
  body:not(.living) .foot-nav{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body:not(.living) .foot-nav a{min-height:42px;display:flex;align-items:center;justify-content:center;padding:8px 10px}
  body:not(.living) .colophon .soc-row{gap:6px}
  body:not(.living) .colophon .soc{width:42px;height:42px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%}
  body:not(.living) .foot-base{margin-top:20px;padding-top:18px;gap:9px}
}

@media (max-width:390px){.site-updates{display:none}}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .living-journey{min-height:auto;padding:16px 0 84px}
  .living-process-stage{position:relative;height:auto;display:flex;overflow:visible;padding:20px;gap:30px}
  .living-process-stage .living-frame-stage{width:min(64vw,240px)}
  .living-process-steps{height:auto;display:grid;gap:12px}
  .living-process-steps .living-step{position:relative!important;inset:auto!important;height:auto;min-height:0;opacity:1;visibility:visible;pointer-events:auto;transform:none}
}