/* brassai.css — style 6, editorial minimal.

   Paper white, thin type, enormous margins, one idea per screen. The signature
   move is the hairline: thin rules that DRAW THEMSELVES across the page as you
   reach them, which is the only motion on the whole thing besides the reveal.

   The only colour is borrowed from the flat itself, the dark stained beams that
   run across every ceiling. */

:root{
  --paper  :#FCFBF9;
  --paper-2:#F3F0EA;
  --ink    :#171512;
  --ink-dim:rgba(23,21,18,.56);
  --ink-fnt:rgba(23,21,18,.34);
  --beam   :#4A342A;             /* the stained ceiling beams */
  --hair   :rgba(23,21,18,.16);
  --pad    :clamp(24px,7vw,150px);
  --serif  :"Didot","Bodoni 72","Playfair Display",Georgia,serif;
  --sans   :-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif;
  --ease   :cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:clamp(.94rem,1vw,1.02rem);line-height:1.75;font-weight:300;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

.label{font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-fnt)}
.display{font-family:var(--serif);font-weight:400;line-height:1.04;
  letter-spacing:-.015em;font-size:clamp(2.3rem,6.2vw,5.2rem)}
.display em{font-style:italic;color:var(--beam)}
.h2{font-family:var(--serif);font-weight:400;line-height:1.1;
  font-size:clamp(1.5rem,3vw,2.4rem)}

/* ---------- the hairline that draws itself ---------- */
.rule{height:1px;background:var(--hair);transform-origin:left center;
  transform:scaleX(var(--draw,1));transition:transform 1.4s var(--ease)}
.js-anim .rule{--draw:0}
.js-anim .rule.is-in{--draw:1}

/* ---------- nav, barely there ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;
  justify-content:space-between;gap:14px;padding:22px var(--pad);
  background:linear-gradient(180deg,rgba(252,251,249,.94),rgba(252,251,249,0))}
.nav__brand{font-size:.62rem;letter-spacing:.4em;text-transform:uppercase}
.nav__link{font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;
  padding-bottom:4px;border-bottom:1px solid var(--hair)}

/* ---------- hero, type only ---------- */
.hero{min-height:92svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(130px,22vh,240px) var(--pad) clamp(50px,9vh,110px);max-width:1300px;margin:0 auto}
.hero h1{margin:20px 0 26px;max-width:16ch}
.hero__foot{display:grid;gap:22px;grid-template-columns:1fr auto;align-items:end}
.hero__foot p{color:var(--ink-dim);max-width:44ch}
@media (max-width:700px){ .hero__foot{grid-template-columns:1fr} }

/* ---------- one idea per screen ---------- */
.single{padding:clamp(70px,13vh,170px) var(--pad);max-width:1300px;margin:0 auto}
.single__rule{margin-bottom:clamp(28px,5vh,54px)}
.single__head{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,5vw,80px);
  align-items:start;margin-bottom:clamp(30px,5vh,60px)}
.single__no{font-family:var(--serif);font-size:clamp(1rem,1.4vw,1.2rem);color:var(--ink-fnt)}
.single__head p{color:var(--ink-dim);max-width:46ch;margin-top:14px}
@media (max-width:700px){ .single__head{grid-template-columns:1fr;gap:12px} }
.single figure{overflow:hidden;background:var(--paper-2)}
.single img{width:100%;height:auto}
.single--narrow figure{max-width:640px}
.single--right figure{margin-left:auto}

/* ---------- the index of rooms ---------- */
.index{padding:clamp(70px,13vh,170px) var(--pad);max-width:1300px;margin:0 auto}
.index ol{list-style:none;counter-reset:r;margin-top:clamp(24px,4vh,44px)}
.index li{counter-increment:r;display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(16px,4vw,50px);align-items:baseline;padding:20px 0;
  border-top:1px solid var(--hair)}
.index li:last-child{border-bottom:1px solid var(--hair)}
.index li::before{content:"0" counter(r);font-family:var(--serif);color:var(--ink-fnt);
  font-size:.9rem}
.index li b{font-family:var(--serif);font-weight:400;font-size:clamp(1.1rem,2vw,1.5rem)}
.index li span{color:var(--ink-fnt);font-size:.58rem;letter-spacing:.24em;
  text-transform:uppercase;text-align:right}

/* ---------- the live 360 ---------- */
.pano{position:relative;background:var(--paper-2)}
.pano__track{height:210vh}
.pano__sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.pano__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  cursor:grab;touch-action:pan-y;opacity:0;transition:opacity .8s var(--ease)}
.pano.is-loaded .pano__canvas{opacity:1}
.pano.is-dragging .pano__canvas{cursor:grabbing}
.pano__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pano.is-loaded .pano__poster{opacity:0;transition:opacity .8s var(--ease)}
.pano__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,14,12,.3) 0%,rgba(16,14,12,0) 34%,rgba(16,14,12,.6) 100%)}
.pano__copy{position:absolute;left:var(--pad);right:var(--pad);
  bottom:clamp(52px,10vh,110px);z-index:2;pointer-events:none;color:#fff}
.pano__copy .label{color:rgba(255,255,255,.7)}
.pano__copy h2{margin:12px 0 18px;max-width:15ch}
.pano__hint{display:inline-flex;align-items:center;gap:11px;
  border:1px solid rgba(255,255,255,.44);border-radius:100px;padding:11px 20px;
  font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.pano__hint i{width:16px;height:16px;border:1px solid currentColor;border-radius:50%;
  position:relative;flex:0 0 auto}
.pano__hint i::after{content:"";position:absolute;top:50%;left:50%;width:7px;height:1px;
  background:currentColor;transform:translate(-50%,-50%);animation:nudge 2.2s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translate(-140%,-50%)}50%{transform:translate(40%,-50%)}}
.pano.is-fallback .pano__canvas,.pano.is-fallback .pano__hint{display:none}
.pano.is-fallback .pano__poster{opacity:1}

/* ---------- reveal, visible by default ---------- */
.js-anim [data-rise]{opacity:0;transform:translateY(16px);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js-anim [data-rise].is-in{opacity:1;transform:none}

.foot{border-top:1px solid var(--hair);padding:36px var(--pad);display:flex;
  flex-wrap:wrap;gap:9px 30px;justify-content:space-between;color:var(--ink-fnt);
  font-size:.7rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-anim [data-rise]{opacity:1;transform:none;transition:none}
  .js-anim .rule{--draw:1;transition:none}
  .pano__hint i::after{animation:none}
}

/* ---------- the form ---------- */
.lead{
  --lf-bg     :var(--paper-2);
  --lf-fg     :var(--ink);
  --lf-accent :var(--beam);
  --lf-line   :var(--hair);
  --lf-muted  :var(--ink-dim);
}
.lead__title{font-family:var(--serif);font-weight:400}
.lead__btn{color:var(--paper)}
.lead__eyebrow,.lead__field label{letter-spacing:.3em}
.lead__field select option{background:var(--paper);color:var(--ink)}

/* the link out to the full tour. The copy block ignores pointer events so
   the 360 stays draggable underneath, so the link has to take them back. */
.pano__copy a{pointer-events:auto}
.pano__hint--go{margin-left:10px;transition:background .3s ease,color .3s ease}
.pano__hint--go:hover{background:#fff;color:#111}