/* Moss Production Hub — shared design kit (cinematic). Tokens, chrome, glass, rails, sheets. */
:root{
  --black:#040806; --forest:#0A1B12; --moss:#15703F; --moss-2:#166936; --brass:#C9A96E; --brass-2:#896D4A;
  --bone:#EEE9DD; --mute:rgba(238,233,221,.56); --faint:rgba(238,233,221,.34);
  --glass:rgba(255,255,255,.06); --glass-2:rgba(255,255,255,.1); --edge:rgba(255,255,255,.14); --edge-2:rgba(255,255,255,.26);
  --ease:cubic-bezier(.2,.8,.2,1);
  --serif:"EB Garamond","Apple Garamond",Garamond,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --r:22px; --gutter:22px; --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--black);color:var(--bone);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);font-size:15px;line-height:1.5;background:var(--black);min-height:100vh;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,video{display:block;max-width:100%}
::selection{background:rgba(201,169,110,.35)}
.serif{font-family:var(--serif)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);width:100%}

/* ambient room */
#room{position:fixed;inset:-12%;z-index:0;pointer-events:none;overflow:hidden}
#room video,#room img,#room .wash{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s var(--ease);filter:blur(42px) saturate(.9) brightness(.42)}
#room video.on,#room img.on,#room .wash.on{opacity:1}
#room .wash{background:radial-gradient(60% 70% at 50% 60%,var(--tint,#15703F) 0%,transparent 70%);filter:blur(60px)}
#room::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 100%,rgba(4,8,6,.2) 0%,rgba(4,8,6,.86) 70%),linear-gradient(180deg,rgba(4,8,6,.55) 0%,rgba(4,8,6,.15) 40%,rgba(4,8,6,.7) 100%)}
#grain{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.055;mix-blend-mode:screen}

/* header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top)) 22px 14px;background:linear-gradient(180deg,rgba(4,8,6,.78),rgba(4,8,6,0))}
.hdr .brand{font-family:var(--serif);font-size:19px;display:flex;align-items:center;gap:10px;text-decoration:none}
.hdr .brand img{height:18px;width:auto}
.hdr .brand i{width:8px;height:8px;border-radius:50%;background:var(--moss);box-shadow:0 0 14px var(--moss)}
.hdr nav{display:flex;gap:2px}
.hdr nav a{text-decoration:none;font-size:13px;color:var(--mute);padding:7px 12px;border-radius:999px;transition:color .4s var(--ease),background .4s var(--ease);white-space:nowrap}
.hdr nav a:hover,.hdr nav a:focus-visible{color:var(--bone);background:var(--glass);outline:none}
.hdr nav a[aria-current=page]{color:var(--bone)}
main{position:relative;z-index:2}
.page{padding-top:calc(86px + env(safe-area-inset-top))}

/* type */
.h-display{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.3vw,56px);line-height:1.02;letter-spacing:-.012em;max-width:22ch}
.h-display em{font-style:italic;color:var(--brass)}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,38px);line-height:1.05;letter-spacing:-.01em}
.h3{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:-.01em}
.lede{color:var(--mute);font-size:15.5px;line-height:1.55;max-width:56ch;margin-top:12px}
.meta{font-size:13px;color:var(--mute)}
.meta b{color:var(--bone);font-weight:500}
.quote{font-family:var(--serif);font-size:clamp(20px,2.2vw,28px);line-height:1.22}

/* glass */
.glass{background:var(--glass);border:1px solid var(--edge);border-radius:var(--r);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.card{padding:26px 28px}
.card .h3{margin-bottom:12px}
.card ul{list-style:none}
.card li{padding:10px 0;border-top:1px solid rgba(255,255,255,.08);font-size:15.5px;line-height:1.45;color:rgba(238,233,221,.9)}
.card li:first-child{border-top:0;padding-top:0}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;border:1px solid var(--edge);background:var(--glass);font-size:13px;color:var(--mute);text-decoration:none;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);white-space:nowrap}
.pill:hover,.pill:focus-visible,.pill.on{background:var(--glass-2);color:var(--bone);border-color:var(--edge-2);outline:none}
.pill.on{border-color:var(--brass)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:999px;background:var(--bone);color:#0A1B12;font-weight:500;font-size:14px;text-decoration:none;transition:transform .5s var(--ease),background .4s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:var(--glass);color:var(--bone);border:1px solid var(--edge)}
.btn svg,.pill svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dot{width:7px;height:7px;border-radius:50%;background:var(--c,var(--moss));box-shadow:0 0 12px var(--c,var(--moss));display:inline-block}

/* rails */
.rail-wrap{position:relative;min-width:0;width:100%}
.rail{width:100%;display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px max(22px,calc((100vw - var(--max))/2 + 22px)) 18px;scroll-padding:0 max(22px,calc((100vw - var(--max))/2 + 22px))}
.rail::-webkit-scrollbar{display:none}
.rail::after{content:"";flex:0 0 max(22px,calc((100vw - var(--max))/2))}
.pane{position:relative;flex:0 0 auto;width:min(62vw,560px);aspect-ratio:16/10;max-height:46svh;scroll-snap-align:start;border-radius:var(--r);overflow:hidden;isolation:isolate;text-align:left;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c,#15703F) 38%,#0B1A12),#040806 80%);border:1px solid var(--edge);box-shadow:0 30px 80px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.18);
  transform:translateZ(0);transition:transform .9s var(--ease),box-shadow .9s var(--ease),border-color .9s var(--ease);cursor:pointer}
.pane.sm{width:min(44vw,360px);aspect-ratio:16/11;max-height:none}
.pane video,.pane img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease);transform:scale(1.02)}
.pane img.poster.ready,.pane video.ready{opacity:.92}
.pane video.ready~img.poster{opacity:0}
.pane .glass-l{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 28%),linear-gradient(0deg,rgba(4,8,6,.9) 0%,rgba(4,8,6,.35) 42%,rgba(4,8,6,0) 70%)}
.pane .sheen{position:absolute;inset:-40% -10% auto;height:70%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);transform:translateX(-30%);transition:transform 1.4s var(--ease);pointer-events:none}
.pane:hover .sheen,.pane:focus-visible .sheen{transform:translateX(30%)}
.pane:hover,.pane:focus-visible{transform:translateY(-4px);border-color:var(--edge-2);outline:none;box-shadow:0 40px 90px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.25)}
.pane.on{border-color:rgba(255,255,255,.3)}
.pane .txt{position:absolute;left:0;right:0;bottom:0;padding:22px 70px 22px 24px}
.pane .nm{font-family:var(--serif);font-size:clamp(22px,2.6vw,34px);line-height:1.02;letter-spacing:-.01em}
.pane.sm .nm{font-size:clamp(19px,2vw,24px)}
.pane .ln{margin-top:9px;font-family:var(--serif);font-style:italic;font-size:clamp(14px,1.4vw,17px);line-height:1.35;color:rgba(238,233,221,.8);max-width:40ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pane .top{position:absolute;top:16px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(238,233,221,.72)}
.pane .open{position:absolute;right:18px;bottom:20px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);display:grid;place-items:center;transition:background .5s var(--ease),transform .5s var(--ease)}
.pane:hover .open{background:rgba(255,255,255,.14);transform:scale(1.06)}
.pane .open svg{width:16px;height:16px;stroke:var(--bone);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.railnav{display:flex;align-items:center;justify-content:space-between;max-width:var(--max);margin:0 auto;padding:0 22px;width:100%}
.dots{display:flex;gap:6px;flex-wrap:wrap}
.dots b{width:18px;height:2px;border-radius:2px;background:rgba(255,255,255,.18);transition:background .6s var(--ease),width .6s var(--ease)}
.dots b.on{background:var(--brass);width:34px}
.arrows{display:flex;gap:8px}
.arrows button{width:38px;height:38px;border-radius:50%;border:1px solid var(--edge);background:var(--glass);display:grid;place-items:center;transition:background .4s var(--ease)}
.arrows button:hover,.arrows button:focus-visible{background:var(--glass-2);outline:none}
.arrows svg{width:14px;height:14px;stroke:var(--bone);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* sheet (opened item) */
.sheet-bg{position:fixed;inset:0;z-index:30;display:none;overflow:auto;-webkit-overflow-scrolling:touch;background:rgba(4,8,6,.72);backdrop-filter:blur(26px) saturate(1.1);-webkit-backdrop-filter:blur(26px) saturate(1.1)}
.sheet-bg.show{display:block}
.sheet{min-height:100%;max-width:var(--max);margin:0 auto;padding:calc(20px + env(safe-area-inset-top)) 22px calc(60px + env(safe-area-inset-bottom));opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.sheet-bg.in .sheet{opacity:1;transform:none}
.sheet .bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:10px}
.sheet .back{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mute);padding:8px 14px 8px 8px;border-radius:999px;transition:background .4s var(--ease),color .4s var(--ease)}
.sheet .back:hover,.sheet .back:focus-visible{background:var(--glass);color:var(--bone);outline:none}
.sheet .back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.film{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;border:1px solid var(--edge);background:#0A1B12;box-shadow:0 40px 100px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.18)}
.film video{width:100%;height:100%;object-fit:contain;background:#000}
.film .lab{position:absolute;left:16px;bottom:14px;font-size:12px;color:rgba(238,233,221,.7);background:rgba(4,8,6,.5);backdrop-filter:blur(8px);padding:6px 10px;border-radius:999px;max-width:calc(100% - 32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* gate */
#gate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--black)}
#gate .box{width:min(92vw,380px);padding:34px;border-radius:var(--r);background:var(--glass);border:1px solid var(--edge);text-align:center}
#gate h1{font-family:var(--serif);font-weight:400;font-size:30px;margin-bottom:6px}
#gate p{color:var(--mute);font-size:14px;margin-bottom:18px}
#gate input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--edge);background:rgba(0,0,0,.35);color:var(--bone);font:inherit;outline:none;text-align:center;letter-spacing:.06em}
#gate input:focus{border-color:var(--brass)}
#gate button{margin-top:12px;width:100%;padding:12px;border-radius:12px;background:var(--bone);color:#0A1B12;font-weight:500}
#gate .err{margin-top:10px;font-size:13px;color:#e38f84;min-height:18px}

.foot{padding:7vh 22px calc(40px + env(safe-area-inset-bottom));max-width:var(--max);margin:0 auto;width:100%;color:var(--mute);font-size:13px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot a{color:var(--bone);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}

@media (max-width:820px){
  .pane{width:80vw;aspect-ratio:4/5;max-height:58svh}
  .pane.sm{width:66vw;aspect-ratio:4/5}
  .pane .txt{padding:18px 18px 64px 18px}
  .pane .open{right:16px;bottom:16px}
  .hdr nav a:not(.keep){display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation:none!important}
  .pane .sheen{display:none}
}