/* Rocking Horse — eeee.mu/rh — grunge / immersive system (shared) */
:root{
  --blk:#0a0a0a; --blk2:#141414; --bone:#f5f5f3; --bone2:#bdbdbb;
  --red:#e0240f; --red2:#ff3b22; --mut:#7e7e7c; --line:rgba(255,255,255,.15);
  --anton:-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif; --gro:-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace; --mark:'Permanent Marker',cursive;
  --gut:clamp(20px,5vw,104px); --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--blk);color:var(--bone);font-family:var(--gro);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--red);color:#fff}
body::before{content:'';position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.anton{font-family:var(--anton);font-weight:700;text-transform:lowercase;line-height:.92;letter-spacing:-.04em}
.mono{font-family:var(--mono)} .mark{font-family:var(--mark)}
.kick{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:lowercase;color:var(--red2)}
.mut{color:var(--mut)} .hl{color:var(--red2)}
.wrap{max-width:none;margin:0;padding:0 var(--gut)}
.wrap.bleed{max-width:none}
.maxch{max-width:60ch}
/* readability caps inside the full-bleed container */
.prose{max-width:74ch}
.split .prose,.split .lead{max-width:none}
.price,.deflist{max-width:1040px}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:center;gap:18px;padding:14px var(--gut);
  transition:background .4s var(--ease),border-color .4s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(8,8,10,.86);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.nav .logo{height:52px;width:auto;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.nav .navl{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav .navl a{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:lowercase;color:var(--bone2);transition:color .2s}
.nav .navl a:hover,.nav .navl a.here{color:var(--red2)}
.nav .bk{border:1px solid var(--red);color:#fff!important;background:var(--red);padding:9px 16px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;transition:.22s;clip-path:polygon(0 0,100% 0,96% 100%,0% 100%)}
.nav .bk:hover{background:var(--red2);transform:translateY(-1px)}
.burger{display:none;margin-left:auto;width:34px;height:24px;position:relative;background:none;border:0;cursor:pointer;z-index:130}
.burger span{position:absolute;left:0;right:0;height:2.5px;background:var(--bone);transition:.3s var(--ease)}
.burger span:nth-child(1){top:2px}.burger span:nth-child(2){top:11px}.burger span:nth-child(3){top:20px}
.burger.x span:nth-child(1){top:11px;transform:rotate(45deg)}.burger.x span:nth-child(2){opacity:0}.burger.x span:nth-child(3){top:11px;transform:rotate(-45deg)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;padding:15px 26px;transition:.22s var(--ease);border:2px solid var(--bone);cursor:pointer}
.btn.red{background:var(--red);border-color:var(--red);color:#fff;clip-path:polygon(0 0,100% 0,97% 100%,0 100%)}
.btn.red:hover{background:var(--red2);border-color:var(--red2);transform:translate(2px,-2px)}
.btn.gh{background:transparent;color:var(--bone)}
.btn.gh:hover{background:var(--bone);color:var(--blk)}
.bone-bg .btn.gh{color:var(--blk);border-color:var(--blk)}
.bone-bg .btn.gh:hover{background:var(--blk);color:var(--bone)}
.arrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red2)}
.arrow:hover{gap:15px;transition:gap .25s}

/* page hero (interior) */
.phero{position:relative;padding:clamp(150px,22vh,250px) 0 clamp(40px,6vw,80px);overflow:hidden}
.phero .pimg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.25) brightness(.48);opacity:.5}
.phero::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,8,10,.55),rgba(8,8,10,.86) 70%,var(--blk) 100%)}
.phero .wrap{position:relative;z-index:2}
.crumbs{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-bottom:22px}
.crumbs a:hover{color:var(--red2)}
.ptitle{font-family:var(--anton);font-weight:700;letter-spacing:-.045em;text-transform:lowercase;font-size:clamp(2.6rem,8vw,6.2rem);line-height:.92;margin:8px 0 0;overflow-wrap:anywhere}
.ptitle .o{-webkit-text-stroke:2px var(--bone);color:transparent}
.psub{max-width:54ch;margin-top:22px;font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--bone2)}

/* sections + headings */
.sec{padding:clamp(64px,11vw,140px) 0;position:relative}
.sec.tight{padding:clamp(44px,7vw,84px) 0}
.bone-bg{background:var(--bone);color:var(--blk)}
.bone-bg .kick{color:var(--red)} .bone-bg .mut{color:#5d5a52}
.ink-2{background:var(--blk2)}
.eyrow{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.eyrow::after{content:'';height:1px;flex:1;background:var(--line)}
.bone-bg .eyrow::after{background:rgba(10,10,12,.16)}
.big{font-family:var(--anton);font-weight:700;letter-spacing:-.04em;text-transform:lowercase;font-size:clamp(2.2rem,6vw,5.2rem);line-height:.96;overflow-wrap:anywhere}
.big .o{-webkit-text-stroke:2px var(--bone);color:transparent}
.bone-bg .big .o{-webkit-text-stroke-color:var(--blk)}
.h3{font-family:var(--anton);text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.4rem);line-height:.95}

/* prose / split */
.lead{font-size:clamp(1.1rem,1.7vw,1.45rem);line-height:1.5}
.prose p{margin-bottom:1.05em} .prose p:last-child{margin-bottom:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,68px);align-items:center}
.split.wide-l{grid-template-columns:1.2fr .8fr}
.split.top{align-items:flex-start}

/* figures */
.figure{position:relative;overflow:hidden;background:#0b0c0f}
.figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(.85);transition:transform 1.1s var(--ease),filter .5s}
.figure:hover img{transform:scale(1.04);filter:grayscale(1) contrast(1.2) brightness(1)}
.figure.tall{aspect-ratio:3/4}.figure.wide{aspect-ratio:16/10}.figure.sq{aspect-ratio:1/1}

/* service / do list */
.do{border-top:1px solid var(--line)}
.do a{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;padding:26px 6px;border-bottom:1px solid var(--line);transition:.25s var(--ease)}
.do a:hover{background:var(--red);color:#fff;padding-left:24px}
.do a:hover .num,.do a:hover .meta{color:rgba(255,255,255,.72)}
.do .num{font-family:var(--mono);color:var(--red2);font-size:.8rem}
.do .ttl{font-family:var(--anton);text-transform:uppercase;font-size:clamp(1.8rem,4.5vw,3.4rem);line-height:1}
.do .meta{font-family:var(--mono);font-size:.72rem;color:var(--mut);text-align:right;max-width:32ch;letter-spacing:.02em}

/* price table */
.price{border-top:1px solid var(--line)}
.bone-bg .price{border-top-color:rgba(10,10,12,.18)}
.price .row{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.bone-bg .price .row{border-bottom-color:rgba(10,10,12,.18)}
.price .lab{font-family:var(--gro);font-weight:500}
.price .amt{font-family:var(--anton);font-size:clamp(1.5rem,2.4vw,2.1rem);color:var(--red);white-space:nowrap;line-height:1}
.price .amt small{font-size:.5em}
.price .sub{display:block;font-family:var(--mono);font-size:.74rem;color:var(--mut);font-weight:400;margin-top:5px;letter-spacing:.02em}

/* spec / def list */
.deflist{display:grid;gap:0;border-top:1px solid var(--line)}
.bone-bg .deflist{border-top-color:rgba(10,10,12,.18)}
.deflist .di{display:grid;grid-template-columns:minmax(120px,26%) 1fr;gap:22px;padding:15px 0;border-bottom:1px solid var(--line)}
.bone-bg .deflist .di{border-bottom-color:rgba(10,10,12,.18)}
.deflist .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red2)}
.deflist .v{font-size:1rem}

/* quotes */
.quote{border-left:3px solid var(--red);padding:4px 0 4px 28px;margin-bottom:46px}
.quote p{font-family:var(--gro);font-size:clamp(1.1rem,1.9vw,1.5rem);line-height:1.42;font-weight:400}
.quote .who{display:block;margin-top:16px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red2)}
.quote .who span{display:block;color:var(--mut);letter-spacing:.02em;text-transform:none;font-size:.82rem;margin-top:5px;font-family:var(--gro)}

/* tags (clients / gear) */
.tags{display:flex;flex-wrap:wrap;gap:9px}
.tags span{font-family:var(--gro);font-size:.9rem;color:var(--bone2);border:1px solid var(--line);padding:8px 13px;transition:.2s}
.tags span:hover{border-color:var(--red);color:var(--bone)}
.bone-bg .tags span{color:#3a382f;border-color:rgba(10,10,12,.2)}
.bone-bg .tags span:hover{border-color:var(--red);color:var(--blk)}
.subhead{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red2);margin-bottom:14px}

/* marquee + ribbon */
.marq{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:rgba(8,8,10,.4)}
.marq .track{display:inline-flex;white-space:nowrap;will-change:transform;animation:scroll 26s linear infinite}
.marq:hover .track{animation-play-state:paused}
.marq span{font-family:var(--anton);text-transform:uppercase;font-size:clamp(1.4rem,3vw,2.4rem);padding:14px 26px;color:var(--bone)}
.marq span .d{color:var(--red2);padding:0 6px}
.marq span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--bone2)}
.rib{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rib .track{display:inline-flex;white-space:nowrap;animation:scroll 48s linear infinite}
.rib span{font-family:var(--gro);font-weight:500;font-size:1rem;padding:16px 20px;color:var(--mut)}
.rib span::before{content:'\2715';color:var(--red);padding-right:20px;font-size:.7rem;vertical-align:middle}
@keyframes scroll{to{transform:translateX(-50%)}}

/* stat band */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nums .c{padding:34px 14px;border-right:1px solid var(--line)}
.nums .c:last-child{border-right:0}
.nums .n{font-family:var(--anton);color:var(--bone);font-size:clamp(2.2rem,5vw,3.6rem);line-height:1}
.nums .n .hl{color:var(--red2)}
.nums .l{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:10px}

.endcta{text-align:center}
.endcta .big{margin:14px 0 30px}
.cta{display:flex;gap:14px;flex-wrap:wrap}

/* footer */
.foot{background:#070708;border-top:1px solid var(--line);padding:clamp(54px,8vw,84px) 0 30px}
.foot .fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.foot img.logo{height:58px;margin-bottom:18px}
.foot h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red2);margin-bottom:14px}
.foot a{display:block;font-size:.92rem;color:var(--bone2);padding:5px 0;transition:.2s}
.foot a:hover{color:var(--red2)}
.foot .addr{font-family:var(--mono);font-size:.82rem;color:var(--mut);line-height:1.8}
.foot .bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:48px;padding-top:22px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.72rem;color:var(--mut)}
.foot .bar a{display:inline;padding:0;color:var(--red2)}
.foot .gift{display:inline-flex;align-items:center;gap:7px}
.foot .gift img{height:13px;width:auto;opacity:.9;display:inline-block;vertical-align:middle}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}

@media(max-width:860px){
  .nav .navl{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:26px;background:rgba(8,8,10,.98);transform:translateX(100%);transition:transform .4s var(--ease);margin:0}
  .nav .navl.open{transform:none}
  .nav .navl a{font-size:1.1rem} .nav .navl .bk{font-size:.9rem;padding:13px 26px}
  .burger{display:block}
  .split,.split.wide-l{grid-template-columns:1fr}
  .nums{grid-template-columns:1fr 1fr} .nums .c:nth-child(2){border-right:0}
  .do a{grid-template-columns:auto 1fr}.do .meta{display:none}
  .deflist .di{grid-template-columns:1fr;gap:4px}
  .foot .fg{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){.nums{grid-template-columns:1fr 1fr}.foot .fg{grid-template-columns:1fr}.quote{padding-left:18px}}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.marq .track,.rib .track{animation:none}html{scroll-behavior:auto}}

/* room frames: slivers that open. the image keeps a fixed width so opening reveals it, never stretches it */
.frames{display:flex;gap:6px;height:clamp(420px,66vh,740px);margin-top:18px}
.frame{position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;background:#0b0c0f;transition:flex-grow .95s var(--ease)}
.frame.on{flex-grow:7;cursor:default}
.frame img{position:absolute;top:0;left:50%;height:100%;width:min(1180px,80vw);max-width:none;transform:translateX(-50%);object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(.42);transition:filter .7s}
.frame:hover img{filter:grayscale(1) contrast(1.15) brightness(.6)}
.frame.on img{filter:grayscale(1) contrast(1.18) brightness(.95)}
.frame::before{content:'';position:absolute;left:0;top:0;height:3px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .95s var(--ease);z-index:3}
.frame.on::before{transform:scaleX(1)}
.frame .fnum{position:absolute;left:14px;top:16px;z-index:2;font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;color:var(--red2)}
.frame .fside{position:absolute;left:50%;bottom:22px;z-index:2;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);font-family:var(--anton);font-size:1.15rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;white-space:nowrap;transition:opacity .3s}
.frame.on .fside{opacity:0}
.frame .fcap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 24px 22px;background:linear-gradient(0deg,rgba(8,8,10,.92),rgba(8,8,10,0));opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s var(--ease)}
.frame.on .fcap{opacity:1;transform:none;transition-delay:.3s}
.frame .fcap h3{font-family:var(--anton);font-weight:400;font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:1;text-transform:uppercase;margin:0}
.frame .fcap p{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:#d9d9d5;margin:9px 0 0}
.frame:focus-visible{outline:2px solid var(--red2);outline-offset:2px}
@media(max-width:760px){
  .frames{flex-direction:column;height:auto}
  .frame{flex:none;height:76px;transition:height .8s var(--ease)}
  .frame.on{flex-grow:0;height:60vh}
  .frame img{left:0;width:100%;transform:none}
  .frame .fside{writing-mode:horizontal-tb;left:52px;bottom:auto;top:26px;transform:none}
}
@media(prefers-reduced-motion:reduce){.frame,.frame img,.frame::before,.frame .fcap{transition:none}}

/* booking form: composes a message, stores nothing */
.bk-form{display:grid;gap:18px;max-width:640px}
.bk-form label{display:grid;gap:8px;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red2)}
.bk-form .opt{color:var(--mut);letter-spacing:.04em;text-transform:none;font-size:.78rem;font-family:var(--gro);margin-left:6px}
.bk-form input,.bk-form select,.bk-form textarea{width:100%;background:#0f0f10;border:1px solid var(--line);color:var(--bone);font-family:var(--gro);font-size:1rem;letter-spacing:0;text-transform:none;padding:14px 14px;border-radius:0;-webkit-appearance:none;appearance:none}
.bk-form select{background-image:linear-gradient(45deg,transparent 50%,var(--bone2) 50%),linear-gradient(135deg,var(--bone2) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.bk-form input:focus,.bk-form select:focus,.bk-form textarea:focus{outline:none;border-color:var(--red2)}
.bk-form .bad{border-color:var(--red)}
.bk-go{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.bk-go .btn{cursor:pointer}
.bk-note{font-size:.84rem;max-width:56ch}

@media(max-width:430px){.ptitle{font-size:clamp(2.2rem,11.5vw,2.8rem)}.big{font-size:clamp(2rem,9.5vw,2.4rem)}body{overflow-x:clip}}

.orbit{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;cursor:ew-resize;user-select:none;touch-action:pan-y;outline:none}
.orbit img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.orbit-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);background:rgba(10,10,12,.72);padding:9px 14px;transition:opacity .4s}
.orbit-hint span{color:var(--red2)}
.orbit.used .orbit-hint{opacity:0}
.orbit-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12)}
.orbit-bar i{display:block;height:100%;width:0;background:var(--red2);transition:width .12s linear}
.orbit:focus-visible{box-shadow:0 0 0 2px var(--red2)}
.credits{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:16px}
.rel{display:block;background:#0b0b0c;border:1px solid var(--line);text-decoration:none;color:inherit;transition:border-color .25s}
a.rel:hover{border-color:var(--red2)}
.rel .art{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#000}
.rel .art>img{width:100%;height:100%;object-fit:cover;display:block}
.rel .wave{position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(transparent,rgba(0,0,0,.88));display:block}
.rel .wave img{width:100%;height:100%;object-fit:fill;display:block;opacity:.95}
.rel .meta{display:block;padding:12px 12px 14px}
.rel .meta b{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}
.rel .meta i{display:block;font-style:normal;font-size:.9rem;margin-top:3px}
.rel .meta span{display:block;font-family:var(--mono);font-size:.68rem;color:var(--mut);margin-top:6px;letter-spacing:.04em}
@media(max-width:430px){.credits{grid-template-columns:repeat(2,1fr);gap:10px}.rel .meta{padding:9px}}
a.rel[data-bc] .art::after{content:"play";position:absolute;right:10px;top:10px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;background:var(--red2);color:#fff;padding:5px 8px}
a.rel.playing .art::after{display:none}