/* Moss & Ember / Case 06. The archive engine and other project styles stay independent. */
.work-card--moss::before{background:linear-gradient(180deg,transparent 53%,#152b21 89%)}
.work-webgl-ready .work-archive:not(.is-list-view) .work-card--moss .work-card__media{opacity:1}
.work-card--moss .work-card__media{background:#24483a;transform:var(--work-media-drift,translate3d(0,0,0)) scale(1.012)}
.me-preview{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 80% 8%,#67826a66,transparent 60%),#24483a;color:#f5f0e6}
.me-preview__brand{position:absolute;left:7%;top:5%;width:62%;height:auto!important;object-fit:contain!important}
.me-preview__guides{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#b8c9ab;stroke-width:1;opacity:.45}
.me-preview__guides path{stroke-dasharray:1;stroke-dashoffset:0;animation:me-preview-line 10s ease infinite alternate paused}
.me-preview__desktop{position:absolute;left:6%;top:23%;width:84%;border:1px solid #b3c1aa;border-radius:7px;overflow:hidden;background:#f5f0e6;box-shadow:0 16px 32px #10271d66;transform:rotate(-3deg);animation:me-preview-desktop 10s cubic-bezier(.22,.75,.2,1) infinite alternate paused}
.me-preview__chrome{height:14px;display:flex;align-items:center;gap:4px;padding-left:7px;background:#e5dfd3}
.me-preview__chrome i{width:4px;height:4px;border-radius:50%;background:#ae6450}.me-preview__chrome i:nth-child(2){background:#b39762}.me-preview__chrome i:nth-child(3){background:#8fa98b}
.me-preview__phone{position:absolute;right:7%;top:40%;width:25%;border:4px solid #e5dfd3;border-radius:14px;overflow:hidden;background:#f5f0e6;box-shadow:0 14px 26px #10271d88;transform:rotate(5deg);animation:me-preview-phone 10s cubic-bezier(.22,.75,.2,1) infinite alternate paused}
.work-card--moss .work-card__media .me-preview__screen,.moss-case-page .me-preview__screen{position:static;display:block;inset:auto;width:100%;height:auto;object-fit:contain;transform:none;transition:none}
.work-card--moss .work-card__media .me-preview__brand,.moss-case-page .me-preview__brand{inset:5% auto auto 7%;width:62%;height:auto;transform:none;transition:none}
.me-preview.is-layer-active :is(.me-preview__desktop,.me-preview__phone,.me-preview__guides path){animation-play-state:running}
.work-motion-paused .me-preview :is(.me-preview__desktop,.me-preview__phone,.me-preview__guides path){animation-play-state:paused}
.work-data-saver .me-preview *, .work-archive.is-list-view .me-preview *{animation:none!important;opacity:1!important}
@keyframes me-preview-desktop{0%,6%{opacity:.7;transform:translate(-8px,14px) rotate(-5deg)}30%,80%{opacity:1;transform:translate(0,0) rotate(-3deg)}100%{opacity:1;transform:translate(0,-5px) rotate(-2deg)}}
@keyframes me-preview-phone{0%,12%{opacity:.35;transform:translate(12px,-12px) rotate(8deg)}42%,80%{opacity:1;transform:translate(0,0) rotate(5deg)}100%{opacity:1;transform:translate(0,4px) rotate(4deg)}}
@keyframes me-preview-line{0%,10%{stroke-dashoffset:1;opacity:.12}55%,100%{stroke-dashoffset:0;opacity:.7}}

.moss-case-page{--me-forest:#24483a;--me-cream:#f5f0e6;--me-terra:#9b4c33;--me-moss:#8fa98b;--forest:#24483a;--cream:#f5f0e6;--terra:#9b4c33;--line:#c9cebe;--serif:Georgia,'Times New Roman',serif;--sans:Arial,Helvetica,sans-serif;--brown:#66675d;background:var(--me-cream);color:var(--me-forest)}
.moss-case-page .ocean,.moss-case-page .depth-gauge{display:none}
.moss-case-page main{position:relative;background:var(--me-cream);font-family:Arial,Helvetica,sans-serif}
.moss-case-page .site-header{background:#172e26f5;border-bottom:1px solid #b3c1aa33}
.me-shell{width:min(1280px,calc(100% - 96px));margin-inline:auto}
.me-section{padding:clamp(48px,6vw,80px) 0}
.me-kicker{font:400 .68rem/1.6 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--me-terra);margin:0 0 20px}
.moss-case-page main :is(h1,h2,h3){font-family:Georgia,'Times New Roman',serif;color:inherit;font-weight:400;letter-spacing:-.045em}
.moss-case-page main h1{font-size:clamp(3.6rem,6.3vw,6.4rem);line-height:.98;margin:0 0 24px}
.moss-case-page main h2{font-size:clamp(2.4rem,4.4vw,4.25rem);line-height:1.06;margin:0 0 20px}
.moss-case-page main h3{font-size:clamp(1.7rem,2.4vw,2.3rem);line-height:1.12;margin:0 0 16px}
.moss-case-page main p{font-size:1rem;line-height:1.75;max-width:60ch}
.moss-case-page main .me-kicker{font-size:.68rem;line-height:1.6}
.me-hero{padding:142px 0 48px}
.me-hero-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:5%;align-items:center}
.me-title-line{display:block;overflow:hidden;padding-bottom:.08em}
.me-title-line em{color:var(--me-terra);font-weight:400}
.me-title-line>span{display:block}
.me-lead{color:#49604c}
.me-hero-art{position:relative;aspect-ratio:1.14;border-radius:8px;overflow:hidden;background:var(--me-forest)}
.me-hero-art .me-preview__brand{width:61%;top:6%}
.me-hero-art .me-preview__phone{width:24%;top:44%}
.me-meta{display:grid;grid-template-columns:1.1fr 1.4fr 1fr;gap:24px;border-top:1px solid var(--line);padding-top:22px;margin:36px 0 0;font:.72rem/1.65 'IBM Plex Mono',monospace}
.me-meta dt{color:var(--me-terra);margin-bottom:5px}.me-meta dd{margin:0}
.me-section--sage{background:#e5ebdf}
.me-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:8%;align-items:start}
.me-palette{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:28px}
.me-swatch{background:var(--swatch);color:var(--swatch-ink);border:1px solid #24483a22;min-height:112px;padding:15px 12px;display:flex;flex-direction:column;justify-content:space-between;font:.65rem/1.5 'IBM Plex Mono',monospace}
.me-swatch strong{font-weight:400}
.me-image-window{overflow:hidden;border-radius:5px;margin:0;background:#e5dfd3}
.me-image-window img{display:block;width:100%;height:auto;transform-origin:50% 50%}
.me-screen-study{border:1px solid #aebb9f;background:var(--me-cream);border-radius:7px;overflow:hidden;margin:24px 0 0}
.me-screen-study img{display:block;width:100%;height:auto}
.me-caption{font:.68rem/1.65 'IBM Plex Mono',monospace;color:#49604c;margin:14px 0 0}
.moss-case-page main .me-caption{font-size:.68rem;line-height:1.65}
.me-motion-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}
.me-motion-head h2{max-width:17ch}
.me-button,.me-menu-filter{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid currentColor;border-radius:3px;padding:12px 18px;min-height:44px;background:transparent;color:inherit;font:.75rem/1.4 'IBM Plex Mono',monospace;text-decoration:none;cursor:pointer}
.me-button:focus-visible,.me-menu-filter:focus-visible{outline:3px solid var(--me-terra);outline-offset:4px}
.me-story-stack{position:relative;height:400px;max-width:890px;margin-inline:auto;perspective:1200px;overflow:hidden;border-radius:6px;background:#183326}
.me-story-frame{position:absolute;inset:0;margin:0;transform-origin:50% 0;animation:me-story-fold 12s cubic-bezier(.22,.7,.2,1) infinite paused}
.me-story-frame:nth-child(2){animation-delay:-4s}.me-story-frame:nth-child(3){animation-delay:-8s}
.me-story-frame img{width:100%;height:100%;object-fit:cover}
.me-story-frame figcaption{position:absolute;bottom:26px;left:30px;right:24px;font:italic clamp(1.8rem,3vw,2.9rem)/1.06 Georgia,serif;color:#fcfaf6;text-shadow:0 2px 24px #091a13}
.me-story-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 50%,#0a201aaa);pointer-events:none}
.me-story-frame figcaption{z-index:1}
.me-story-stack.is-running .me-story-frame{animation-play-state:running}
@keyframes me-story-fold{0%,23%{opacity:1;transform:translateY(0) rotateX(0) scale(1);z-index:3}30%,59%{opacity:0;transform:translateY(-8%) rotateX(10deg) scale(.97);z-index:1}60%,89%{opacity:0;transform:translateY(100%) rotateX(-12deg) scale(.97);z-index:1}96%,100%{opacity:1;transform:none;z-index:3}}
.me-film{margin:32px auto 0;max-width:1100px;border:1px solid #24483a33;border-radius:7px;overflow:hidden;background:var(--me-cream)}
.me-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.me-film figcaption{font:.68rem/1.6 'IBM Plex Mono',monospace;padding:16px 20px;color:#49604c}
.me-menu-controls{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 20px}
.me-menu-filter[aria-pressed=true]{background:var(--me-forest);color:var(--me-cream)}
.me-dish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.me-dish{min-width:0;transform-origin:50% 0}
.me-dish img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:5px}
.moss-case-page main .me-dish h3{font-size:1.35rem;line-height:1.2;letter-spacing:-.035em;margin:15px 0 5px}
.moss-case-page main .me-dish p{font:.68rem/1.65 'IBM Plex Mono',monospace;margin:0}
.me-dish[hidden]{display:none!important}
.me-menu-actions{margin-top:24px}
.me-menu-actions a{color:var(--me-terra);text-underline-offset:5px}
.me-map-layout-head{margin-bottom:26px}
.moss-case-page .cafe-map-layout{font-family:Arial,Helvetica,sans-serif}
.moss-case-page main .cafe-map-info h2{font-size:2.9rem}
.moss-case-page main .cafe-map-toolbar>span{font-size:10px}
.moss-case-page main .cafe-map-note,.moss-case-page main .cafe-map-status{font-size:11px}
.moss-case-page .cafe-map-info .eyebrow{font-size:10px;color:var(--me-terra);letter-spacing:.1em}
.moss-case-page .map-directions a:focus-visible,.moss-case-page .map-home:focus-visible{outline:3px solid var(--me-terra);outline-offset:3px}
.me-delivery{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:6%}
.me-delivery .me-kicker{margin-top:0}
.me-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.me-motion-ready .me-reveal.is-pending{opacity:0;transform:translateY(20px)}
.me-motion-ready .me-reveal{transition:opacity .8s ease,transform .9s cubic-bezier(.22,.75,.2,1)}
.me-motion-ready .me-title-line>span{animation:me-type-rise .95s cubic-bezier(.22,.75,.2,1) both;animation-delay:var(--text-delay,0ms)}
.me-motion-ready .me-palette.is-pending .me-swatch{opacity:0;transform:translateY(16px)}
.me-motion-ready .me-swatch{transition:opacity .65s ease,transform .8s ease;transition-delay:var(--swatch-delay,0ms)}
.me-motion-ready .me-image-window.is-revealed img{animation:me-image-settle 1.7s cubic-bezier(.22,.7,.2,1) both}
.me-motion-ready .me-dish.is-entering{animation:me-dish-unfold .75s cubic-bezier(.22,.75,.2,1) both;animation-delay:var(--dish-delay,0ms)}
@keyframes me-type-rise{from{opacity:0;transform:translateY(105%)}to{opacity:1;transform:none}}
@keyframes me-image-settle{from{transform:scale(1.065)}to{transform:scale(1)}}
@keyframes me-dish-unfold{from{opacity:0;transform:perspective(850px) rotateX(-16deg) translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:800px){
 .me-shell{width:calc(100% - 40px)}.me-hero{padding:112px 0 38px}.me-hero-grid,.me-split,.me-delivery{grid-template-columns:1fr;gap:32px}
 .moss-case-page main h1{font-size:clamp(3.25rem,12vw,5rem)}.me-hero-art{max-width:580px;width:100%;margin-inline:auto}
 .me-meta{grid-template-columns:1fr;gap:15px;margin-top:26px}.me-meta>div{display:grid;grid-template-columns:85px 1fr;gap:14px}
 .me-palette{grid-template-columns:repeat(2,1fr)}.me-motion-head{align-items:start;flex-direction:column;gap:12px}.me-motion-head h2{margin-bottom:0}
 .me-story-stack{height:380px}.me-story-frame figcaption{left:20px;bottom:24px}.me-dish-grid{grid-template-columns:1fr;gap:28px}.me-dish img{aspect-ratio:3/2}
 .me-film{max-width:360px}.me-film video{aspect-ratio:9/16}.me-film figcaption{padding:14px 16px}
 .moss-case-page main .cafe-map-info h2{font-size:2.5rem}.me-map-layout-head h2{max-width:15ch}
}
@media(prefers-reduced-motion:reduce){
 .me-preview *,.me-motion-ready .me-title-line>span,.me-motion-ready .me-image-window img,.me-motion-ready .me-dish{animation:none!important;opacity:1!important}
 .me-motion-ready .me-reveal,.me-motion-ready .me-swatch{opacity:1!important;transform:none!important;transition:none!important}
 .me-title-line>span{transform:none!important}.me-story-frame{animation:none;opacity:1;transform:none}.me-story-frame:not(:first-child){display:none}
}
@media print{.me-hero{padding-top:30px}.me-story-frame{animation:none!important}.me-story-frame:not(:first-child){display:none}.me-reveal,.me-swatch{opacity:1!important;transform:none!important}.me-film,.me-actions,.me-menu-controls{display:none}}
