/* ===== Leo Martins — MOBILE (narrow screens) =====
   Rendered by MobileOnePage (v2/leo-mobile.jsx) when viewport <= 820px.
   Reuses :root vars from onepage.css (--ink, --paper, --orange, --disp, --grot,
   --serif, --body). All classes prefixed .m- so desktop styles are untouched. */

.m-root{--barW:52px;--ball:38px;background:var(--paper);color:var(--ink);font-family:var(--body);overflow-x:hidden;}
/* hide the page scrollbar entirely on mobile (scoped via :has so desktop is untouched) */
html:has(.m-root){scrollbar-width:none;scroll-snap-type:none;}
html:has(.m-root)::-webkit-scrollbar{display:none;}
.m-root::-webkit-scrollbar{display:none;}
/* persistent right rail: 50% dark bar spanning hero → footer */
.m-rail{position:fixed;top:0;right:0;height:100vh;height:100lvh;width:var(--barW);z-index:100;background:rgba(18,16,14,.50);pointer-events:none;overflow:hidden;transform:translateY(100%);transition:transform .9s cubic-bezier(.2,.7,.2,1);will-change:transform;backface-visibility:hidden;}
.m-rail.in{transform:translateY(0);}
.m-rail .m-burger,.m-rail .m-rail-brand,.m-rail .m-rail-next{pointer-events:auto;}
/* animated orange double chevron parked at the foot of the rail; flips up at page end */
.m-rail-next{position:absolute;top:calc(var(--m-vvh,100svh) - 44px);left:50%;transform:translateX(-50%);z-index:4;width:38px;height:38px;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:none;color:#ff9900;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.m-rail-next svg{animation:mChev .65s ease-in-out infinite;transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.m-rail-next.up svg{transform:rotate(180deg);}
.m-rail-next:active svg{opacity:.6;}
@keyframes mChev{0%,100%{transform:translateY(-4px);opacity:.7;}50%{transform:translateY(4px);opacity:1;}}
.m-rail-next.up svg{animation:mChevUp .65s ease-in-out infinite;}
@keyframes mChevUp{0%,100%{transform:rotate(180deg) translateY(-4px);opacity:.7;}50%{transform:rotate(180deg) translateY(4px);opacity:1;}}
@media (prefers-reduced-motion: reduce){.m-rail-next svg{animation:none!important;}}
.m-rail-tag{position:absolute;top:0;left:0;right:0;height:var(--m-vvh,100svh);z-index:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:64px;}
.m-rail-tag span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--grot);font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;line-height:1.5;white-space:nowrap;text-shadow:0 1px 12px rgba(0,0,0,.5);}
.m-rail-tag em{font-style:normal;color:rgba(255,255,255,.6);}
/* orange LEO MARTINS, 180° (bottom-to-up); docked below the burger, slides IN from the
   right once scrolled far enough to clear the (permanent) white tagline */
.m-rail-brand{position:absolute;top:64px;left:0;right:0;z-index:3;display:flex;justify-content:center;align-items:flex-start;border:none;background:none;padding:6px 0 0;opacity:0;cursor:pointer;transform:translateX(140%);transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .5s ease;will-change:transform;}
.m-rail-brand.show{opacity:1;transform:translateX(0);}
.m-rail-brand span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:22px;letter-spacing:.03em;color:#ff9900;white-space:nowrap;}
/* sections squeeze left to clear the rail (baked into base rules below); hero stays full-bleed */
/* section backgrounds matching widescreen: BLOG dark, ABOUT orange */
.m-sec-blog{background:#201f1d;}
.m-sec-blog .m-title{color:#fff;}
.m-sec-blog .m-kicker{color:rgba(255,255,255,.6);}
.m-sec-blog .m-post{border-color:rgba(255,255,255,.14);}
.m-sec-blog .m-post:last-child{border-bottom-color:rgba(255,255,255,.14);}
.m-sec-blog .m-post-title{color:#ff9900;}
html[data-blogtitle="white"] .m-sec-blog .m-post-title{color:#fff;}
.m-sec-blog .m-post-date{color:rgba(255,255,255,.5);}
.m-sec-blog .m-post-ex{color:rgba(255,255,255,.62);}
.m-sec-about{background:#ff9900;}
.m-sec-about .m-kicker::before{background:#000;}
.m-root *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

/* ---------- HERO: rotated wordmark + cinematic slideshow ---------- */
.m-hero{position:relative;height:100svh;overflow:hidden;background:#0e0d0c;isolation:isolate;scroll-snap-align:start;}
.m-hero-word{position:absolute;left:0;top:0;right:0;bottom:0;overflow:visible;pointer-events:none;}
/* The drop+bump animates the H1 ITSELF (not the container): an element's own transform
   does NOT break its mix-blend-mode, but a transformed ANCESTOR would isolate it from
   the photo. So LEO MARTINS enters already in difference blending. Keyframes carry the
   constant rotate(-90deg); with no fill-mode the H1 reverts to its inline rest transform. */
.m-hero-word h1{position:absolute;left:0;top:0;margin:0;font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:1;letter-spacing:0;color:#ff9900;mix-blend-mode:difference;white-space:nowrap;transform-origin:center center;font-size:80px;opacity:0;}
.m-hero-word.in h1.fit{opacity:1;animation:mWordDrop 1.15s cubic-bezier(.16,.82,.3,1);}
@keyframes mWordDrop{
  0%{transform:translateY(-110vh) rotate(-90deg);}
  60%{transform:translateY(0) rotate(-90deg);}
  71%{transform:translateY(16px) rotate(-90deg);}
  82%{transform:translateY(-8px) rotate(-90deg);}
  91%{transform:translateY(4px) rotate(-90deg);}
  100%{transform:translateY(0) rotate(-90deg);}
}
@media (prefers-reduced-motion: reduce){ .m-hero-word h1{opacity:1!important;animation:none!important;} .m-hero-word.in h1.fit{animation:none!important;} .m-rail{transform:none!important;transition:none!important;} }
.m-hero-stage{position:absolute;inset:0;}
.m-hero-ph{position:absolute;inset:0;opacity:0;transform:scale(1.08);transition:opacity 1.4s ease, transform 7.5s ease-out;}
.m-hero-ph.on{opacity:1;transform:scale(1);}
/* Ken Burns lives on the WRAPPER (not the <img>, whose inline opacity-transition from
   the shared Img component would clobber a transform transition). Transition-based, so
   a de-activating image eases back instead of snapping — no "zoom bump". */
.m-hero-ph img{width:100%;height:100%;object-fit:cover;display:block;}
@media (prefers-reduced-motion: reduce){ .m-hero-ph{transform:none;transition:opacity 1.4s ease;} }
/* tagline: vertical, right edge */
.m-hero-side{position:absolute;right:0;top:0;bottom:0;z-index:4;display:flex;align-items:center;justify-content:flex-end;padding:16px 12px 16px 0;pointer-events:none;}
.m-hero-side span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--grot);font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.92);line-height:1.5;text-align:right;white-space:nowrap;text-shadow:0 1px 12px rgba(0,0,0,.5);}
.m-hero-side em{font-style:normal;color:rgba(255,255,255,.6);}
.m-hero-foot{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:flex-end;justify-content:center;padding:0 18px calc(16px + env(safe-area-inset-bottom));color:#fff;}
.m-hero-tag{font-family:var(--grot);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.6;color:rgba(255,255,255,.92);}
.m-hero-tag em{display:block;font-style:normal;color:rgba(255,255,255,.55);}
.m-hero-scroll{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--grot);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;filter:drop-shadow(0 1px 6px rgba(0,0,0,.45));}
.m-hero-scroll svg{display:block;}
@media (prefers-reduced-motion: no-preference){
  .m-hero-scroll{animation:mBlink 1.5s ease-in-out infinite;}
  .m-hero-scroll svg{animation:mNudge 1.5s ease-in-out infinite;}
  @keyframes mNudge{0%,100%{transform:translateY(0);}50%{transform:translateY(7px);}}
  @keyframes mBlink{0%,100%{opacity:1;}50%{opacity:.25;}}
}
/* progress ticks for the slideshow */
.m-hero-ticks{position:absolute;top:calc(14px + env(safe-area-inset-top));left:18px;right:74px;z-index:4;display:flex;gap:6px;}
.m-hero-tick{flex:1;height:2px;background:rgba(255,255,255,.25);border-radius:1px;overflow:hidden;}
.m-hero-tick i{display:block;height:100%;width:0;background:#fff;}
.m-hero-tick.done i{width:100%;}
.m-hero-tick.live i{width:100%;transition:width 4s linear;}

/* ---------- NAV: hamburger sits centered on the right rail ---------- */
.m-burger{position:absolute;top:calc(12px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:5;width:40px;height:40px;border-radius:50%;border:none;background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.m-burger.dark{background:var(--ink);color:#fff;}
.m-bar{position:fixed;top:0;left:0;right:0;z-index:110;height:calc(52px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 66px 0 18px;display:flex;align-items:center;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transform:translateY(-100%);transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.m-bar.show{transform:translateY(0);}
.m-bar .m-bar-name{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:15px;letter-spacing:.06em;color:var(--ink);background:none;border:none;padding:0;cursor:pointer;}
/* full-screen menu */
.m-menu{position:fixed;inset:0;z-index:130;background:#111009;color:#fff;display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));opacity:0;pointer-events:none;transition:opacity .3s ease;}
.m-menu.open{opacity:1;pointer-events:auto;}
.m-menu-close{position:absolute;top:calc(32px - var(--ball)/2 + env(safe-area-inset-top));right:calc((var(--barW) - var(--ball))/2);z-index:5;background:none;border:none;padding:0;cursor:pointer;color:#fff;}
.m-menu-close .m-more-ball{background:none;}
.m-menu-links{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px;}
.m-menu-links button{background:none;border:none;color:#fff;text-align:left;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:44px;line-height:1.05;letter-spacing:.02em;padding:10px 0;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.m-menu-links button .ml-k{font-family:var(--grot);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.42);line-height:1;}
.m-menu-links button .ml-t{display:block;}
.m-menu.open .m-menu-links button{opacity:0;}
@media (prefers-reduced-motion: no-preference){
  .m-menu.open .m-menu-links button{animation:mLinkIn .5s cubic-bezier(.2,.7,.2,1) forwards;}
  .m-menu.open .m-menu-links button:nth-child(1){animation-delay:.05s;}
  .m-menu.open .m-menu-links button:nth-child(2){animation-delay:.12s;}
  .m-menu.open .m-menu-links button:nth-child(3){animation-delay:.19s;}
  .m-menu.open .m-menu-links button:nth-child(4){animation-delay:.26s;}
  @keyframes mLinkIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
}
@media (prefers-reduced-motion: reduce){ .m-menu.open .m-menu-links button{opacity:1;} }
.m-menu-foot{display:flex;flex-wrap:wrap;gap:10px 22px;font-family:var(--grot);font-size:12px;letter-spacing:.12em;text-transform:uppercase;}
.m-menu-foot a{color:rgba(255,255,255,.72);text-decoration:none;}

/* ---------- shared section chrome ---------- */
/* Consistent top margin across sections (top-aligned like BLOG/ABOUT). Sections fill at
   least one viewport; snap-on-pause frames each start. */
.m-sec{padding:64px calc(18px + var(--barW)) 8px 18px;min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start;scroll-snap-align:start;position:relative;}
/* BLOG + ABOUT are capped to exactly one viewport with a “see more” link; .exp removes the cap */
.m-sec-blog:not(.exp),.m-sec-about:not(.exp){max-height:100svh;overflow:hidden;}
.m-see-more{position:absolute;left:0;right:calc(var(--barW));bottom:0;height:132px;border:none;display:flex;align-items:flex-end;justify-content:center;padding:0 0 18px;cursor:pointer;}
.m-sec-blog .m-see-more{background:linear-gradient(to top,#201f1d 42%,rgba(32,31,29,0));color:#fff;}
.m-sec-about .m-see-more{background:linear-gradient(to top,#ff9900 42%,rgba(255,153,0,0));color:#000;}
.m-see-less{align-self:center;margin-top:28px;background:none;border:none;cursor:pointer;padding:0;}
.m-sec-blog .m-see-less{color:#fff;}
.m-sec-about .m-see-less{color:#000;}
.m-kicker{display:flex;align-items:center;gap:10px;font-family:var(--grot);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.m-kicker::before{content:"";width:26px;height:2px;background:var(--orange);}
.m-title{margin:10px 0 0;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(34px,11vw,52px);line-height:1;letter-spacing:.01em;color:var(--ink);}

/* ---------- PORTFOLIO: tappable grid ---------- */
.m-grid{margin-top:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;}
.m-grid button{position:relative;padding:0;border:none;background:#eceae4;cursor:pointer;aspect-ratio:1;overflow:hidden;}
.m-grid img{width:100%;height:100%;object-fit:cover;display:block;}
/* drag-to-reveal-more handle (drag down = more rows, up = fewer; tap = toggle all) */
.m-grid-more{margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 0 4px;color:var(--muted);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;}
.m-grid-more:active{cursor:grabbing;}
.m-grid-grip{width:40px;height:4px;border-radius:2px;background:var(--line);}
.m-grid-more svg{transition:transform .3s ease;}
.m-grid-more.open svg{transform:rotate(180deg);}
/* unified “+” reveal control (portfolio grid, blog & about) — rotates to × when open */
.m-more-ball{width:var(--ball);height:var(--ball);border-radius:50%;border:1.5px solid currentColor;background:currentColor;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .2s ease,color .2s ease;}
.m-more-ball svg{transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.m-more-ball.open svg{transform:rotate(45deg);}
.m-more-wrap{display:flex;justify-content:center;margin-top:14px;padding:8px 0 4px;background:none;border:none;color:var(--ink);cursor:pointer;}
.m-more-wrap .m-more-ball svg{stroke:var(--paper);}
.m-sec-blog .m-more-ball svg{stroke:#201f1d;}
.m-sec-about .m-more-ball svg{stroke:#ff9900;}

/* ---------- full-screen viewer ---------- */
.m-viewer{position:fixed;inset:0;z-index:200;background:#151412;display:flex;flex-direction:column;touch-action:pan-y;}
.m-viewer-close{position:absolute;top:calc(32px - var(--ball)/2 + env(safe-area-inset-top));right:calc((var(--barW) - var(--ball))/2);z-index:5;background:none;border:none;padding:0;cursor:pointer;color:#fff;}
.m-viewer-close .m-more-ball{background:none;}
.m-ovl-share{position:absolute;top:calc(32px - var(--ball)/2 + env(safe-area-inset-top));z-index:5;background:none;border:none;padding:0;cursor:pointer;color:#fff;}
.m-ovl-share .m-more-ball{background:none;}
.m-viewer-share{right:calc((var(--barW) - var(--ball))/2 + var(--ball) + 14px);color:#fff;}
.m-share-toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:6;background:rgba(20,19,17,.92);border:1px solid rgba(255,255,255,.22);color:#fff;font-family:var(--grot);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:9px 16px;border-radius:22px;pointer-events:none;}
.m-viewer-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:calc(64px + env(safe-area-inset-top)) 10px 12px;cursor:pointer;}
.m-viewer-stage img{max-width:100%;max-height:min(100%, calc(100vw - 20px));object-fit:contain;display:block;}
.m-viewer-zoom{position:relative;display:flex;max-width:100%;max-height:100%;will-change:transform;touch-action:none;}
/* full-res layered over the medium one and faded in, so the upgrade is never a visible flip.
   The stage clamp must be scoped OFF this layer — written at matching specificity so it
   actually wins, otherwise the two layers resolve to different heights and misregister. */
.m-viewer-stage img.m-viewer-hi{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;animation:mViewerHi .8s cubic-bezier(.4,0,.2,1) both;}
@keyframes mViewerHi{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.m-viewer-hi{animation:none;}}
.m-viewer-cap{flex:0 0 auto;padding:6px 18px calc(18px + env(safe-area-inset-bottom));color:#fff;}
.m-viewer-name{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:19px;line-height:1.1;}
.m-viewer-func{margin-top:3px;font-family:var(--grot);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85);}
.m-viewer-media{margin-top:2px;font-family:var(--serif);font-style:italic;font-size:14px;color:rgba(255,255,255,.6);}

/* ---------- BLOG ---------- */
/* full-screen Journal overlay: scrollable list of ALL posts (newest first, batched) */
.m-journal{position:fixed;inset:0;z-index:190;background:#201f1d;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.m-journal::-webkit-scrollbar{display:none;}
.m-journal-in{padding:calc(74px + env(safe-area-inset-top)) 20px calc(60px + env(safe-area-inset-bottom)) 20px;max-width:640px;margin:0 auto;}
.m-journal-title{margin:6px 0 12px;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(30px,9vw,44px);line-height:1;color:#fff;}
.m-journal .m-kicker{color:rgba(255,255,255,.6);}
.m-journal .m-post{border-color:rgba(255,255,255,.14);}
.m-journal .m-post:last-child{border-bottom-color:rgba(255,255,255,.14);}
.m-journal .m-post-title{color:#ff9900;}
html[data-blogtitle="white"] .m-journal .m-post-title{color:#fff;}
.m-journal .m-post-ex{color:rgba(255,255,255,.62);}
.m-journal .m-reader-close{color:#fff;}
/* close-ball × must stay white — override the section's dark reveal-icon stroke */
.m-sec-blog .m-reader-close .m-more-ball svg{stroke:#fff;}
.m-journal-more{margin-top:26px;width:100%;padding:15px 0;background:none;border:1px solid rgba(255,255,255,.28);border-radius:26px;color:#fff;font-family:var(--grot);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;}
.m-journal-more:hover{border-color:var(--orange);color:var(--orange);}
.m-blog-list{margin-top:22px;display:flex;flex-direction:column;}
.m-post{display:flex;gap:14px;align-items:stretch;padding:18px 0;border-top:1px solid var(--line);background:none;border-left:none;border-right:none;border-bottom:none;text-align:left;cursor:pointer;}
.m-post:last-child{border-bottom:1px solid var(--line);}
.m-post-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.m-post-date{font-family:var(--grot);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.m-post-title{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:20px;line-height:1.12;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.m-post-ex{font-family:var(--serif);font-size:14px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.m-post-th{flex:0 0 86px;width:86px;height:86px;align-self:center;overflow:hidden;border-radius:2px;background:#eceae4;}
.m-post-th img{width:100%;height:100%;object-fit:cover;display:block;}
/* reader overlay */
.m-reader{position:fixed;inset:0;z-index:200;background:#201f1d;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.m-reader::-webkit-scrollbar{display:none;}
.m-reader-in{padding:calc(74px + env(safe-area-inset-top)) 20px calc(60px + env(safe-area-inset-bottom)) 20px;max-width:640px;margin:0 auto;}
.m-reader-close{position:fixed;top:calc(32px - var(--ball)/2 + env(safe-area-inset-top));right:calc((var(--barW) - var(--ball))/2);z-index:5;background:none;border:none;padding:0;cursor:pointer;color:#fff;}
.m-reader-close .m-more-ball{background:none;}
.m-reader-share{position:fixed;right:calc((var(--barW) - var(--ball))/2 + var(--ball) + 14px);color:#fff;}
.m-sec-blog .m-reader-share .m-more-ball svg{stroke:#fff;}
.m-reader-date{font-family:var(--grot);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.m-reader-title{margin:10px 0 22px;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(28px,8.6vw,40px);line-height:1.05;color:#ff9900;}
html[data-blogtitle="white"] .m-reader-title{color:#fff;}
.m-reader-p{font-family:var(--serif);font-size:17px;line-height:1.65;color:rgba(255,255,255,.82);margin:0 0 1.2em;}
.m-reader-img{margin:26px 0;text-align:center;}
.m-reader-img img{max-width:100%;max-height:min(640px, calc(100vw - 40px));width:auto;height:auto;display:inline-block;border-radius:2px;}

/* ---------- ABOUT ---------- */
/* 1px frame, matching the desktop ABOUT picture (.op-ab2-frame) */
.m-about-photo{margin:22px auto 0;width:70%;aspect-ratio:3/4;overflow:hidden;border-radius:0;background:#2c2b28;box-sizing:border-box;border:1px solid #404040;}
.m-about-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.m-about-lead{margin:44px 0 0;font-family:var(--serif);font-style:italic;font-size:28px;line-height:1.32;color:var(--ink);text-wrap:balance;}
.m-about-body{margin-top:1.6em;font-family:var(--body);font-size:15px;line-height:1.7;color:#33312c;white-space:pre-line;clear:both;}
.m-about-lead + .m-about-body{margin-top:32px;}
.m-about-photo + .m-about-body{margin-top:40px;}
/* rococo calligraphic drop-cap on the first letter of each ABOUT paragraph */
.m-about-body::first-letter{font-family:'Mea Culpa','Monsieur La Doulaise',cursive;font-style:normal;font-weight:400;color:var(--ink);font-size:3.6em;line-height:1;-webkit-initial-letter:3;initial-letter:3;margin-right:.14em;}
html:lang(zh) .m-about-body::first-letter,
html:lang(ja) .m-about-body::first-letter{font-family:inherit;font-size:inherit;line-height:inherit;-webkit-initial-letter:normal;initial-letter:normal;margin-right:0;}
.m-about-more{margin-top:14px;background:none;border:none;padding:0;font-family:var(--grot);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);cursor:pointer;}
.m-about-cta{margin-top:24px;display:flex;justify-content:center;}

/* ---------- SAY HI ---------- */
.m-hi-lead{margin:44px 0 40px;font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.35;color:var(--ink);text-wrap:balance;}
.m-hi-mail{margin-top:24px;display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;border-radius:24px;background:var(--ink);color:#fff;font-family:var(--grot);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;}
.m-hi-rows{margin-top:26px;display:flex;flex-direction:column;}
.m-hi-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;border-top:1px solid var(--line);text-decoration:none;}
.m-hi-row:last-child{border-bottom:1px solid var(--line);}
.m-hi-l{font-family:var(--grot);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.m-hi-v{font-size:15px;font-weight:600;color:var(--ink);}
.m-hi-based{margin-top:40px;font-family:var(--serif);font-style:italic;font-size:14px;color:var(--muted);display:flex;flex-direction:column;gap:5px;}

/* ---------- FOOTER ---------- */
/* CONTACT + FOOTER share exactly one viewport: contact flexes to fill, footer rests at the bottom */
.m-endblock{min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;scroll-snap-align:start;}
.m-endblock #m-contact{min-height:0;flex:1 1 auto;scroll-snap-align:none;}
.m-endblock .m-footer{flex:0 0 auto;margin-top:0;}
.m-footer{margin-top:64px;padding:26px calc(18px + var(--barW)) calc(30px + env(safe-area-inset-bottom)) 18px;background:#111009;color:rgba(255,255,255,.6);}
.m-footer-word{font-family:var(--disp);font-weight:700;text-transform:uppercase;color:var(--orange);font-size:13.2vw;line-height:.95;white-space:nowrap;overflow:hidden;}
.m-footer-rows{margin-top:38px;display:flex;flex-direction:column;gap:6px;font-family:var(--grot);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;}

/* ---------- contact form sheet (from the EMAIL row) ---------- */
.m-hi-row-btn{width:100%;background:none;border-left:none;border-right:none;border-bottom:none;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.m-hi-row-btn .m-hi-v{color:var(--ink);}
.m-cform{position:fixed;inset:0;z-index:200;background:#201f1d;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.m-cform::-webkit-scrollbar{display:none;}
.m-cform .m-reader-close{color:#fff;}
.m-cform .m-reader-close .m-more-ball svg{stroke:#fff;}
.m-cform-in{padding:calc(62px + env(safe-area-inset-top)) 20px calc(26px + env(safe-area-inset-bottom)) 20px;max-width:640px;margin:0 auto;}
.m-cform .m-kicker{color:rgba(255,255,255,.6);}
.m-cform-title{margin:4px 0 18px;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(26px,7.4vw,34px);line-height:1;color:#fff;}
.m-cform-lead{margin:0 0 18px;font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.4;color:rgba(255,255,255,.7);text-wrap:pretty;}
.m-cf{display:flex;flex-direction:column;gap:10px;}
.m-cf-field{display:flex;flex-direction:column;gap:4px;}
.m-cf-field span{font-family:var(--grot);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62);}
.m-cf-field input,.m-cf-field textarea{font-family:var(--body);font-size:16px;background:#fff;border:1px solid rgba(255,255,255,.18);border-radius:3px;color:#111;padding:0 12px;height:38px;width:100%;box-sizing:border-box;}
.m-cf-field textarea{height:72px;min-height:72px;padding:10px 12px;line-height:1.45;resize:vertical;}
.m-cf-field input:focus,.m-cf-field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 1px var(--orange);}
.m-cf-human{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px;}
.m-cf-check{display:flex;align-items:center;gap:11px;padding:10px 16px;background:none;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer;text-align:left;width:auto;-webkit-tap-highlight-color:transparent;}
.m-cf-box{width:22px;height:22px;border-radius:3px;border:1.5px solid rgba(255,255,255,.4);flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:transparent;transition:background .18s,border-color .18s,color .18s;}
.m-cf-check.on .m-cf-box{background:var(--orange);border-color:var(--orange);color:#201f1d;}
.m-cf-check-t{font-family:var(--grot);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.78);}
.m-cf-check.has-err{border-color:#ff8a70;}
.m-cf-pow{display:flex;align-items:center;gap:9px;min-height:15px;font-family:var(--grot);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.38);}
.m-cf-spin{width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);border-top-color:var(--orange);animation:mcfsp .7s linear infinite;}
.m-cf-dot{width:9px;height:9px;border-radius:50%;background:var(--orange);}
@keyframes mcfsp{to{transform:rotate(360deg);}}
.m-cf-err{display:flex;align-items:center;gap:6px;font-family:var(--grot);font-size:13px;font-weight:600;font-style:normal;color:#ff8a70;}
.m-cf-err::before{content:"!";display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#ff8a70;color:#201f1d;font-size:11px;font-weight:700;flex:0 0 auto;}
.m-cf-field.has-err input,.m-cf-field.has-err textarea{border-color:#ff8a70;box-shadow:0 0 0 1px #ff8a70;}
.m-cf-send{margin-top:8px;align-self:center;width:auto;min-width:200px;height:38px;padding:0 34px;border-radius:999px;background:var(--orange);border:1px solid var(--orange);color:#201f1d;transition:transform .12s ease,background .12s ease,box-shadow .12s ease;font-family:var(--grot);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;}
.m-cf-send:active{transform:scale(.97);background:#e08a1e;border-color:#e08a1e;box-shadow:inset 0 2px 6px rgba(0,0,0,.22);}
.m-cf-send:disabled{opacity:.55;transform:none;box-shadow:none;}
.m-cf-note{font-family:var(--grot);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--orange);text-align:center;}
.m-cf-note-err{color:#ff8a70;}

/* CJK vertical text: ideograms keep their natural upright orientation and stack
   top-to-bottom, first character at the top — the way vertical Chinese/Japanese is set.
   The rotate(180deg) that makes Latin read bottom-to-top would stand them on their head,
   so it is dropped for these languages. */
html[lang="zh"] .m-hero-side span,html[lang="ja"] .m-hero-side span,html[lang="zh"] .m-rail-tag span,html[lang="ja"] .m-rail-tag span{writing-mode:vertical-rl;text-orientation:upright;-webkit-text-orientation:upright;transform:none;}

/* Host for the sharper-resolution layer (ImgHi paints absolutely over the base image).
   ONLY the ABOUT photo: it is a fixed 3/4 cover box, so an inset:0 overlay registers exactly.
   The hero layers are already position:absolute;inset:0 — declaring position:relative here
   overrode that and knocked every hero image out of place. The reader images are
   intrinsically sized and centred, so a stretched overlay never registered with them. */
.m-about-photo{position:relative;}
@media (prefers-reduced-motion: reduce){.m-about-photo>img[aria-hidden]{transition:none;}}