:root {
  --bg:#0f120d;
  --bg-soft:#151911;
  --bg-deep:#0a0c09;
  --ink:#f0eadf;
  --muted:#bbb3a4;
  --dim:#8f897d;
  --amber:#c6a15f;
  --amber-soft:#dcc494;
  --line:rgba(224,214,192,.17);
  --paper:#d9d1bd;
  --paper-ink:#2c2821;
  --max:1180px;
  --wide:1480px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,figure{margin-top:0}
h1,h2,h3,.brand{font-family:Georgia,"Times New Roman",serif;font-weight:400}
h1{font-size:clamp(3.6rem,9vw,7.8rem);line-height:.96;margin-bottom:1.2rem;letter-spacing:-.035em}
h2{font-size:clamp(2.45rem,5vw,4.8rem);line-height:1.02;margin-bottom:1rem;letter-spacing:-.025em}
.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;color:var(--amber-soft);margin-bottom:.8rem}

.site-header{position:relative;z-index:30;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;padding:1.35rem clamp(1.25rem,4vw,3rem);border-bottom:1px solid var(--line)}
.site-header--overlay{position:absolute;inset:0 0 auto 0;border-bottom:0;background:linear-gradient(to bottom,rgba(5,7,5,.5),transparent)}
.site-header--solid{background:#0a0d09}
.brand{text-transform:uppercase;letter-spacing:.08em;text-decoration:none;font-size:1rem}
.nav{display:flex;gap:1.15rem;flex-wrap:wrap;justify-content:flex-end}
.nav a{color:#e1d8ca;text-decoration:none;font-size:.9rem}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current="page"]{color:#fff;text-decoration:underline;text-underline-offset:.35em}

.hero{position:relative;min-height:92svh;background:#090b08;overflow:hidden;display:flex;align-items:flex-end}
.hero__image,.hero__veil{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__image{object-position:center 52%}
.hero__veil{background:linear-gradient(to top,rgba(7,9,6,.9) 0%,rgba(7,9,6,.36) 46%,rgba(7,9,6,.32) 100%)}
.hero__content{position:relative;z-index:3;width:min(var(--max),100%);margin:0 auto;padding:8rem clamp(1.5rem,5vw,4rem) clamp(4.5rem,9vh,7rem)}
.hero__status{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.25rem,2.2vw,1.7rem);margin:.1rem 0 .6rem}
.hero__meta{color:var(--muted);margin:0}
.hero-door{position:absolute;z-index:4;left:38%;top:53%;width:17%;height:24%;border:0;outline:0}
.hero-cue{position:absolute;z-index:5;right:clamp(1.5rem,5vw,4rem);bottom:1.6rem;color:rgba(245,239,228,.85);font-size:.82rem;text-decoration:none;letter-spacing:.08em;text-transform:uppercase}
.hero-cue:hover{text-decoration:underline;text-underline-offset:.35em}

.quiet-section{padding:clamp(5rem,10vw,9rem) clamp(1rem,4vw,3rem) clamp(6rem,12vw,11rem)}
.quiet-heading{width:min(var(--max),100%);margin:0 auto clamp(2.4rem,5vw,4.5rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.48fr);gap:1.5rem 4rem;align-items:end}
.quiet-heading .eyebrow{grid-column:1/-1;margin-bottom:-.1rem}
.quiet-heading h2{margin:0}
.quiet-heading>p:last-child{margin:0 0 .4rem;color:var(--muted);font-family:Georgia,"Times New Roman",serif;font-size:clamp(1rem,1.6vw,1.25rem)}
.scene{width:min(var(--wide),100%);margin:0 auto;background:#080a07;overflow:hidden}
.scene img{width:100%;height:auto;object-fit:cover;filter:brightness(.92) saturate(.82)}
.scene--reception img{aspect-ratio:3/2}
.scene--room img{aspect-ratio:3/2}
.scene figcaption{margin-top:.75rem;color:var(--dim);font-size:.8rem}
.scene-link{display:block;color:inherit;text-decoration:none}
.scene-link .scene img{transition:filter .25s ease,transform .35s ease}
.scene-link:hover .scene img,.scene-link:focus-visible .scene img{filter:brightness(1) saturate(.86);transform:scale(1.006)}
.scene-link figcaption{color:var(--amber-soft);text-decoration:underline;text-underline-offset:.35em}

.object-links{width:min(var(--max),100%);margin:1.15rem auto 0;display:flex;gap:.55rem 1.25rem;flex-wrap:wrap;align-items:center}
.object-links a{color:var(--amber-soft);font-family:Georgia,"Times New Roman",serif;font-size:clamp(1rem,1.5vw,1.15rem);text-underline-offset:.35em;text-decoration-thickness:1px}
.object-links a+a::before{content:"·";color:var(--dim);margin-right:1.25rem;text-decoration:none;display:inline-block}

.visual-journal{padding:0 0 clamp(7rem,13vw,12rem);overflow:hidden}
.journal-scene{position:relative;margin:0 auto clamp(7rem,14vw,13rem);background:#080a07}
.journal-scene:last-child{margin-bottom:0}
.journal-scene--wide{width:min(var(--wide),calc(100% - clamp(1.5rem,6vw,7rem)))}
.journal-scene--narrow{width:min(820px,calc(100% - 2rem));margin-left:max(clamp(1rem,8vw,10rem),calc((100% - 1180px)/2));margin-right:auto}
.journal-scene--edge{margin-top:clamp(6rem,11vw,10rem);margin-bottom:0}
.journal-scene img{width:100%;max-height:86svh;object-fit:cover;filter:brightness(.78) saturate(.72)}
.journal-scene--narrow img{max-height:none;aspect-ratio:4/5;object-fit:cover}
.journal-scene figcaption{max-width:42rem;margin:.9rem 0 0;color:rgba(244,238,228,.84);font-family:Georgia,"Times New Roman",serif;font-size:clamp(1rem,1.8vw,1.35rem);line-height:1.45}

.rooms-hero{position:relative;min-height:82svh;background:#090b08;display:flex;align-items:flex-end;overflow:hidden}
.rooms-hero>img,.rooms-hero__veil{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rooms-hero__veil{background:linear-gradient(to top,rgba(7,9,6,.9),rgba(7,9,6,.14) 68%,rgba(7,9,6,.18))}
.rooms-hero__copy{position:relative;z-index:2;width:min(var(--max),100%);margin:0 auto;padding:8rem clamp(1.5rem,5vw,4rem) clamp(3.5rem,8vh,6.5rem)}
.rooms-hero__copy p:last-child{font-family:Georgia,"Times New Roman",serif;font-size:1.2rem}
.room-story{padding:clamp(5rem,10vw,9rem) clamp(1rem,4vw,3rem) clamp(6rem,11vw,10rem)}
.room-story__intro{width:min(var(--max),100%);margin:0 auto clamp(2.4rem,5vw,4rem)}
.room-story__intro h2 a{text-decoration:none}
.room-story__intro p:last-child{color:var(--muted);font-family:Georgia,"Times New Roman",serif;font-size:1.15rem}
.room-other{width:min(var(--max),100%);margin:clamp(3rem,6vw,5rem) auto 0;padding-top:1.3rem;border-top:1px solid var(--line);display:flex;gap:.8rem 2.2rem;flex-wrap:wrap;color:var(--muted)}
.room-other p{margin:0;font-size:.93rem}
.room-other span{font-family:Georgia,"Times New Roman",serif;color:var(--amber-soft);margin-right:.35rem}

.room-detail-hero{position:relative;min-height:88svh;background:#090b08;display:flex;align-items:flex-end;overflow:hidden}
.room-detail-hero>img,.room-detail-veil{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.room-detail-veil{background:linear-gradient(to top,rgba(7,9,6,.9),rgba(7,9,6,.12) 62%,rgba(7,9,6,.24))}
.room-detail-copy{position:relative;z-index:2;width:min(var(--max),100%);margin:0 auto;padding:8rem clamp(1.5rem,5vw,4rem) clamp(3rem,8vh,6rem)}
.room-detail-copy p{font-family:Georgia,"Times New Roman",serif;font-size:1.15rem}
.quiet-link{display:inline-block;margin-top:.5rem;color:var(--amber-soft);text-underline-offset:.35em}
.room-detail-flow{padding:clamp(5rem,10vw,9rem) 0 clamp(7rem,12vw,11rem)}
.prose-narrow{width:min(760px,calc(100% - 2rem));margin:0 auto clamp(5rem,10vw,9rem);color:var(--muted);font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.08rem,2vw,1.4rem)}
.prose-narrow p+p{margin-top:1.4rem}

.note-layout,.letter-layout{width:min(var(--max),calc(100% - 2rem));margin:clamp(4rem,8vw,7rem) auto;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:clamp(1.5rem,4vw,4rem)}
.note-layout__image,.letter-layout__image{margin:0;background:#080a07}
.note-layout__image img,.letter-layout__image img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:brightness(.68) saturate(.68)}
.paper-note,.letter-paper{position:relative;color:var(--paper-ink);background:linear-gradient(145deg,#ded6c3,#cec4ad);border:1px solid rgba(75,66,48,.4);box-shadow:0 20px 70px rgba(0,0,0,.34);padding:clamp(2rem,5vw,4rem)}
.paper-note{transform:rotate(-.35deg)}
.paper-note::before,.letter-paper::before{content:"";position:absolute;inset:12px;border:1px solid rgba(75,66,48,.16);pointer-events:none}
.paper-note__label{position:relative;color:#6e624c;text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;margin:0 0 .8rem}
.paper-note h1,.letter-paper h1{position:relative;color:#2d2922;font-size:clamp(2.8rem,6vw,5.2rem);line-height:1;margin-bottom:1.5rem}
.paper-note__body{position:relative;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.08rem,1.8vw,1.35rem);line-height:1.55}
.paper-note__body p{margin:.5rem 0}
.paper-note__foot{position:relative;margin:2rem 0 0;padding-top:1rem;border-top:1px solid rgba(75,66,48,.28);color:#625a4b;font-size:.84rem}

.logbook-hero{position:relative;min-height:66svh;background:#090b08;display:flex;align-items:flex-end;overflow:hidden}
.logbook-hero>img,.logbook-hero__veil{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.logbook-hero__veil{background:linear-gradient(to top,rgba(7,9,6,.88),rgba(7,9,6,.18) 70%)}
.logbook-hero__copy{position:relative;z-index:2;width:min(var(--max),100%);margin:0 auto;padding:8rem clamp(1.5rem,5vw,4rem) clamp(3rem,8vh,6rem)}
.logbook-entry-wrap{width:min(var(--max),calc(100% - 2rem));margin:clamp(4rem,8vw,7rem) auto;display:grid;grid-template-columns:1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.logbook-entry{padding:clamp(2rem,4vw,3.5rem);color:var(--paper-ink);background:linear-gradient(to right,#d6cdb9,#e0d8c5 5%,#d8cfbb 100%);box-shadow:0 20px 60px rgba(0,0,0,.24)}
.logbook-date{text-transform:uppercase;letter-spacing:.14em;color:#6f6450;font-size:.76rem;margin-bottom:1.7rem}
.logbook-entry>p:not(.logbook-date){font-family:Georgia,"Times New Roman",serif;font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.72}
.logbook-entry-wrap figure{margin:0;position:sticky;top:1.5rem}
.logbook-entry-wrap img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:brightness(.82) saturate(.7)}
.logbook-entry-wrap figcaption{margin-top:.6rem;color:var(--dim);font-size:.84rem}

.letter-intro{position:relative;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.15rem,2vw,1.5rem);color:#544c3e;margin:.2rem 0 .35rem}
.letter-small{position:relative;color:#766b58;font-size:.85rem}
.form{position:relative;display:grid;gap:1rem;margin-top:1.6rem}
.form label{display:grid;gap:.35rem;color:#5d5548;font-size:.84rem}
.form label span{color:#8a7e68}
.form input,.form textarea{width:100%;padding:.75rem .15rem;color:#2d2922;background:transparent;border:0;border-bottom:1px solid rgba(75,66,48,.45);border-radius:0;font:inherit}
.form textarea{min-height:9rem;resize:vertical;border:1px solid rgba(75,66,48,.38);padding:.75rem}
.form input:focus,.form textarea:focus{outline:2px solid #8c744f;outline-offset:2px}
.form button{justify-self:start;padding:.72rem 1.05rem;color:#2d2922;background:transparent;border:1px solid #8c744f;font:inherit;cursor:pointer}
.form button:hover{background:rgba(140,116,79,.09)}
.form-status{min-height:1.5em;color:#62533e}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}

.site-footer{border-top:1px solid var(--line);padding:2rem clamp(1.25rem,5vw,4rem) 3rem;color:var(--dim);font-size:.84rem}
.footer-inner{width:min(var(--max),100%);margin:0 auto;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-links{display:flex;gap:1rem;flex-wrap:wrap}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.not-found{min-height:100svh;display:grid;place-content:center;padding:2rem;text-align:center}
.not-found h1{font-size:clamp(3rem,8vw,6rem)}

@media (max-width:900px){
  .quiet-heading{grid-template-columns:1fr}
  .journal-scene--narrow{margin-left:auto;margin-right:auto}
  .note-layout,.letter-layout,.logbook-entry-wrap{grid-template-columns:1fr}
  .logbook-entry-wrap figure{position:static}
}

@media (max-width:620px){
  .site-header{align-items:flex-start;padding:1.1rem 1rem}
  .brand{font-size:.88rem}
  .nav{gap:.5rem .75rem}
  .nav a{font-size:.8rem}
  .nav a:nth-child(3){display:none}
  .hero{min-height:82svh}
  .hero__content{padding-left:1.2rem;padding-right:1.2rem}
  .hero-door{display:none}
  .hero-cue{right:1.2rem}
  .quiet-section,.room-story{padding-left:.8rem;padding-right:.8rem}
  .scene--reception img,.scene--room img{aspect-ratio:4/5;object-position:center}
  .object-links{gap:.35rem .7rem}
  .object-links a+a::before{margin-right:.7rem}
  .journal-scene--wide,.journal-scene--narrow{width:calc(100% - 1.4rem)}
  .journal-scene{margin-bottom:6rem}
  .journal-scene img{max-height:none}
  .journal-scene--wide img{aspect-ratio:4/5;object-fit:cover}
  .rooms-hero{min-height:72svh}
  .rooms-hero>img{object-position:38% center}
  .room-other{display:grid;gap:.8rem}
  .note-layout,.letter-layout,.logbook-entry-wrap{width:min(100% - 1.4rem,var(--max))}
  .paper-note,.letter-paper{padding:2rem 1.4rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ============================================================
   Dyskan Friends v0.5 — photographic rhythm + common treatment
   ============================================================ */

.df-photo{
  image-rendering:auto;
  filter:saturate(.76) contrast(.96) brightness(.88);
}
.df-photo--outdoor{filter:saturate(.68) contrast(.94) brightness(.82)}
.df-photo--cool{filter:saturate(.62) contrast(.95) brightness(.78)}
.df-photo--warm{filter:saturate(.72) contrast(.96) brightness(.88)}
.df-photo--night{filter:saturate(.68) contrast(.98) brightness(.76)}
.df-photo--room{filter:saturate(.70) contrast(.96) brightness(.86)}

.hero__image.df-photo{filter:saturate(.68) contrast(.95) brightness(.80)}

.reception-flow{
  padding:clamp(5rem,9vw,8rem) clamp(1rem,3vw,2.2rem) clamp(7rem,12vw,11rem);
}
.section-kicker{
  width:min(var(--max),100%);
  margin:0 auto clamp(2.1rem,4vw,3.5rem);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,.48fr);
  align-items:end;
  gap:.5rem clamp(2rem,6vw,5rem);
}
.section-kicker .eyebrow{grid-column:1/-1;margin-bottom:.1rem}
.section-kicker h2{margin:0;font-size:clamp(2.2rem,4.4vw,4.3rem)}
.section-kicker>p:last-child{
  margin:0 0 .3rem;
  color:var(--muted);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1rem,1.5vw,1.2rem);
}
.scene--immersive{width:min(1380px,100%)}
.scene--immersive img{aspect-ratio:16/10;object-fit:cover}
.object-links--quiet{margin-top:1.4rem}

.house-sequence{
  padding:0 0 clamp(8rem,15vw,14rem);
  overflow:hidden;
}
.sequence-item{
  margin-top:clamp(6rem,12vw,11rem);
}
.sequence-item:first-child{margin-top:0}
.sequence-item figure{margin:0;background:#080a07;overflow:hidden}
.sequence-item figure img{width:100%;height:auto;object-fit:cover}
.sequence-item--wide{width:min(1400px,calc(100% - clamp(1.5rem,5vw,5rem)))}
.sequence-item--medium{width:min(1080px,calc(100% - 2rem))}
.sequence-item--portrait{width:min(700px,calc(100% - 2rem))}
.sequence-item--lake{width:min(1240px,calc(100% - clamp(1.5rem,8vw,8rem)));margin-left:auto;margin-right:auto}
.sequence-item--left{margin-left:max(clamp(.75rem,3vw,2.5rem),calc((100% - 1480px)/2));margin-right:auto}
.sequence-item--right{margin-left:auto;margin-right:max(clamp(.75rem,7vw,7rem),calc((100% - 1320px)/2))}
.sequence-item--portrait figure img{aspect-ratio:4/5}
.sequence-item--stair{width:min(850px,calc(100% - 2rem));margin-top:clamp(7rem,13vw,12rem);margin-bottom:clamp(8rem,14vw,13rem)}
.sequence-caption{
  width:min(42rem,calc(100% - .4rem));
  margin:1.25rem 0 0;
  color:rgba(239,233,222,.78);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.02rem,1.65vw,1.28rem);
  line-height:1.52;
}
.sequence-item--right .sequence-caption{margin-left:auto}
.sequence-item--lake .sequence-caption{margin-left:auto;margin-right:auto;text-align:center}

.room-primary{
  padding:clamp(6rem,11vw,10rem) 0 0;
}
.room-primary__heading{
  width:min(var(--max),calc(100% - 2rem));
  margin:0 auto clamp(2.2rem,5vw,4rem);
}
.room-primary__heading h2{margin-bottom:.55rem}
.room-primary__heading h2 a{text-decoration:none}
.room-primary__heading>p:last-child{
  color:var(--muted);
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.15rem;
}
.room-image-link{
  display:block;
  width:min(1380px,calc(100% - clamp(1.2rem,5vw,5rem)));
  margin:0 auto;
  color:var(--amber-soft);
  text-decoration:none;
}
.room-image-primary{margin:0;overflow:hidden;background:#080a07}
.room-image-primary img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:filter .25s ease,transform .35s ease}
.room-image-link>span{display:inline-block;margin-top:1rem;text-decoration:underline;text-underline-offset:.35em;font-family:Georgia,"Times New Roman",serif}
.room-image-link:hover img,.room-image-link:focus-visible img{filter:saturate(.76) contrast(.98) brightness(.92);transform:scale(1.004)}
.room-notes{
  width:min(840px,calc(100% - 2rem));
  margin:clamp(6rem,11vw,10rem) auto 0;
  display:grid;
  gap:2.2rem;
}
.room-notes p{
  margin:0;
  color:var(--muted);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1rem,1.6vw,1.24rem);
}
.room-notes span{
  display:block;
  margin-bottom:.28rem;
  color:var(--amber-soft);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  font-size:.67rem;
}

/* Existing physical pages receive the same restrained photographic grade. */
.note-layout__image img,.letter-layout__image img{filter:saturate(.66) contrast(.95) brightness(.73)}
.logbook-entry-wrap img{filter:saturate(.66) contrast(.96) brightness(.78)}
.logbook-hero>img,.room-detail-hero>img{filter:saturate(.70) contrast(.96) brightness(.84)}

@media (max-width:900px){
  .section-kicker{grid-template-columns:1fr}
  .sequence-item--right,.sequence-item--left{margin-left:auto;margin-right:auto}
}

@media (max-width:620px){
  .reception-flow{padding-left:.7rem;padding-right:.7rem}
  .scene--immersive img{aspect-ratio:4/5;object-position:center}
  .house-sequence{padding-bottom:7rem}
  .sequence-item{width:calc(100% - 1.2rem);margin-top:5.5rem;margin-left:auto;margin-right:auto}
  .sequence-item--wide figure img,.sequence-item--medium figure img,.sequence-item--lake figure img{aspect-ratio:4/5;object-fit:cover}
  .sequence-caption{padding:0 .15rem}
  .room-image-link{width:calc(100% - 1.2rem)}
  .room-image-primary img{aspect-ratio:4/5}
  .room-notes{width:calc(100% - 2rem);margin-top:5.5rem}
}

.wide-mood{
  width:min(1180px,calc(100% - 2rem));
  margin:clamp(5rem,10vw,9rem) auto clamp(8rem,14vw,12rem);
}
.wide-mood img{width:100%;height:auto;max-height:82svh;object-fit:cover;filter:saturate(.68) contrast(.95) brightness(.78)}
.wide-mood figcaption{margin-top:.9rem;color:var(--dim);font-family:Georgia,"Times New Roman",serif}

/* ============================================================
   Dyskan Friends v0.6 prototype — living photograph experience
   ============================================================ */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.experience-page{overflow-x:hidden;background:#050705}
.experience-page.note-open{overflow:hidden}
.experience-header{position:absolute;z-index:40;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:1.3rem clamp(1rem,4vw,3rem);color:#f1e9db;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.experience-header--inside{position:absolute}
.experience-brand{font-family:Georgia,"Times New Roman",serif;text-transform:uppercase;letter-spacing:.09em;text-decoration:none;font-size:.95rem}
.experience-menu-button{appearance:none;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;padding:.55rem .65rem}
.experience-menu{position:absolute;right:clamp(1rem,4vw,3rem);top:4.1rem;display:grid;min-width:11rem;padding:.8rem 1rem;background:rgba(8,10,7,.88);border:1px solid rgba(226,214,190,.2);backdrop-filter:blur(9px)}
.experience-menu[hidden]{display:none}
.experience-menu a{padding:.45rem 0;color:#ded4c5;text-decoration:none}
.experience-menu a:hover,.experience-menu a:focus-visible{text-decoration:underline;text-underline-offset:.35em}

.outside{position:relative;min-height:100svh;overflow:hidden;background:#060806;color:var(--ink)}
.outside__camera{position:absolute;inset:-2.5%;will-change:transform;transform-origin:35% 59%;animation:dfOutsideBreathe 18s ease-in-out infinite alternate}
.outside__image{width:100%;height:100%;object-fit:cover;object-position:center 52%;filter:saturate(.66) contrast(.95) brightness(.72)}
.outside__rain{position:absolute;inset:-20%;opacity:.16;pointer-events:none;background-image:repeating-linear-gradient(104deg,transparent 0 12px,rgba(224,232,226,.30) 13px,transparent 14px 31px);background-size:150px 190px;animation:dfRain .72s linear infinite;mix-blend-mode:screen}
.outside__mist{position:absolute;inset:0;opacity:.22;background:radial-gradient(ellipse at 26% 30%,rgba(195,205,200,.23),transparent 38%),linear-gradient(105deg,rgba(188,198,192,.10),transparent 48%);animation:dfMist 16s ease-in-out infinite alternate}
.outside__shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,6,4,.90) 0%,rgba(4,6,4,.20) 54%,rgba(4,6,4,.26) 100%)}
.outside__copy{position:absolute;z-index:8;left:clamp(1.25rem,5vw,4rem);bottom:clamp(3.8rem,8vh,6.2rem);max-width:min(760px,80vw)}
.outside__copy h1{font-size:clamp(3.4rem,8.5vw,7.3rem);margin-bottom:1rem}
.outside__status{font:400 clamp(1.2rem,2.2vw,1.65rem)/1.4 Georgia,"Times New Roman",serif;margin:0 0 .45rem}
.outside__meta{margin:0;color:rgba(235,226,213,.72)}
.outside__door{position:absolute;z-index:10;left:30.8%;top:48%;width:10.2%;height:21.5%;border:0;background:transparent;cursor:pointer}
.outside__door:focus-visible{outline:2px solid rgba(232,210,156,.75);outline-offset:3px}
.outside__enter{position:absolute;z-index:10;right:clamp(1.25rem,4vw,3rem);bottom:1.5rem;border:0;background:transparent;color:#eee3d2;text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;cursor:pointer;padding:.7rem}
.outside__door-detail{position:absolute;z-index:15;inset:0;opacity:0;pointer-events:none;background-image:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.08)),url('/assets/img/exterior-autumn.webp');background-repeat:no-repeat;background-size:340% auto;background-position:35% 58%;transition:opacity .35s ease}
.experience-blackout{position:absolute;z-index:30;inset:0;background:#010201;opacity:0;pointer-events:none}
.outside.is-entering .experience-header,.outside.is-entering .outside__copy,.outside.is-entering .outside__enter{animation:dfFadeOut .55s ease forwards}
.outside.is-entering .outside__camera{animation:dfWalkToDoor 2.35s cubic-bezier(.36,.04,.24,1) forwards}
.outside.is-entering .outside__door-detail{animation:dfDoorDetail .65s ease 1.65s forwards}
.outside.is-entering .experience-blackout{animation:dfBlackout .75s ease 2.10s forwards}

.reception-experience{position:relative;min-height:100svh;background:#050705;color:var(--ink);display:grid;align-items:center;padding:clamp(4.7rem,8vw,6.5rem) clamp(.7rem,2vw,1.6rem) clamp(2rem,4vw,3rem)}
.reception-stage{width:min(1500px,100%);margin:auto}
.reception-stage__frame{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:#050705}
.reception-stage__image{width:100%;height:100%;object-fit:cover;filter:saturate(.68) contrast(.98) brightness(.77);animation:dfReceptionBreathe 22s ease-in-out infinite alternate}
.reception-stage__rain{position:absolute;left:68%;top:11%;width:25%;height:43%;overflow:hidden;opacity:.18;pointer-events:none;background-image:repeating-linear-gradient(102deg,transparent 0 10px,rgba(220,230,225,.30) 11px,transparent 12px 28px);background-size:100px 150px;animation:dfRain .85s linear infinite;mix-blend-mode:screen;mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 86%,transparent 100%)}
.reception-stage__lamp{position:absolute;left:1%;top:41%;width:23%;height:40%;pointer-events:none;background:radial-gradient(circle at 36% 40%,rgba(239,183,95,.17),transparent 42%);animation:dfLamp 8s ease-in-out infinite alternate;mix-blend-mode:screen}
.reception-stage__grain{position:absolute;inset:0;pointer-events:none;opacity:.045;background-image:radial-gradient(rgba(255,255,255,.45) .55px,transparent .7px);background-size:4px 4px;animation:dfGrain 1.2s steps(2,end) infinite}
.reception-hint{margin:.85rem .2rem 0;color:rgba(220,211,196,.47);font-size:.76rem;letter-spacing:.04em}
.reception-prop{position:absolute;z-index:8;border:0;cursor:pointer}
.reception-prop--note{left:53.2%;top:77.6%;width:8.3%;aspect-ratio:1.05;background:#cfc18a;color:#4a412f;box-shadow:0 7px 18px rgba(0,0,0,.24);transform:rotate(-5deg);font:600 clamp(.36rem,.66vw,.72rem)/1.16 "Segoe Print","Bradley Hand",cursive;text-align:left;padding:.6em .7em;opacity:.92}
.reception-prop--note span{display:block;filter:blur(.20px)}
.reception-prop--note:hover{filter:brightness(1.08)}
.reception-prop--note:focus-visible{outline:2px solid #e9d68c;outline-offset:4px}
.reception-hotspot{position:absolute;z-index:7;display:block;text-decoration:none;border-radius:2px}
.reception-hotspot:focus-visible{outline:2px solid rgba(233,214,157,.80);outline-offset:2px;background:rgba(225,199,132,.08)}
.reception-hotspot--ledger{left:20%;top:68%;width:34%;height:18%}
.reception-hotspot--keys{left:2.5%;top:7%;width:28%;height:52%}
.reception-hotspot--brochure{left:84.8%;top:51%;width:13.5%;height:37%}
.reception-hotspot--door{left:68%;top:14%;width:24%;height:42%}
.debug-hotspots .reception-hotspot,.debug-hotspots .reception-prop{outline:2px solid rgba(255,190,70,.9);background-color:rgba(255,160,50,.10)}

.note-modal{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:1rem}
.note-modal[hidden]{display:none}
.note-modal__scrim{position:absolute;inset:0;border:0;background:rgba(3,4,3,.72);opacity:0;backdrop-filter:blur(4px);transition:opacity .32s ease;cursor:default}
.note-modal__paper{--from-x:0px;--from-y:0px;position:relative;z-index:2;width:min(390px,88vw);min-height:390px;padding:clamp(2rem,5vw,3rem);background:linear-gradient(135deg,#d7ca8d,#cabb79 72%,#bda966);color:#332d21;box-shadow:0 32px 100px rgba(0,0,0,.55);transform:translate(var(--from-x),var(--from-y)) scale(.20) rotate(-5deg);opacity:.3;transition:transform .42s cubic-bezier(.2,.7,.2,1),opacity .25s ease;outline:0}
.note-modal.is-open .note-modal__scrim{opacity:1}
.note-modal.is-open .note-modal__paper{transform:translate(0,0) scale(1) rotate(-1.4deg);opacity:1}
.note-modal__label{text-transform:uppercase;letter-spacing:.15em;font:600 .65rem/1.3 Inter,system-ui,sans-serif;color:#6a5b37;margin-bottom:1.3rem}
.note-modal__paper h1{font-size:clamp(2rem,6vw,3rem);line-height:1.05;margin-bottom:1.6rem;font-family:"Segoe Print","Bradley Hand",Georgia,cursive}
.note-modal__text{font:400 clamp(1.05rem,3vw,1.3rem)/1.55 "Segoe Print","Bradley Hand",Georgia,cursive}
.note-modal__text p{margin:0 0 .9rem}
.note-modal__close{margin-top:1.5rem;border:0;border-bottom:1px solid rgba(63,52,29,.5);background:transparent;color:#54482e;padding:.2rem 0;font:600 .72rem/1.3 Inter,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.12em;cursor:pointer}

.experience-blackout--arrival{position:fixed;z-index:120;opacity:0;pointer-events:none}
body.is-arriving .experience-blackout--arrival{opacity:1}
body.is-arriving.is-arrived .experience-blackout--arrival{opacity:0;transition:opacity 1.25s ease .15s}

.nature-hero{position:relative;min-height:100svh;background:#060806;display:flex;align-items:flex-end;overflow:hidden}
.nature-hero>img,.nature-hero__veil{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nature-hero>img{filter:saturate(.62) brightness(.72);animation:dfOutsideBreathe 20s ease-in-out infinite alternate}
.nature-hero__veil{background:linear-gradient(to top,rgba(5,7,5,.86),rgba(5,7,5,.12) 60%)}
.nature-hero__copy{position:relative;z-index:2;width:min(var(--max),100%);margin:0 auto;padding:7rem clamp(1.5rem,5vw,4rem) clamp(4rem,8vw,6rem)}
.nature-hero__copy p:not(.eyebrow){font-family:Georgia,"Times New Roman",serif;font-size:clamp(1rem,1.6vw,1.3rem);max-width:38rem}

@keyframes dfOutsideBreathe{from{transform:scale(1.025) translate3d(-.15%,0,0)}to{transform:scale(1.045) translate3d(.2%,-.25%,0)}}
@keyframes dfReceptionBreathe{from{transform:scale(1.006) translate3d(-.08%,0,0)}to{transform:scale(1.014) translate3d(.12%,-.08%,0)}}
@keyframes dfRain{from{background-position:0 -160px}to{background-position:-22px 180px}}
@keyframes dfMist{from{transform:translate3d(-1.2%,0,0);opacity:.15}to{transform:translate3d(1.4%,.4%,0);opacity:.25}}
@keyframes dfLamp{from{opacity:.66}to{opacity:1}}
@keyframes dfGrain{0%{transform:translate(0,0)}25%{transform:translate(-1px,1px)}50%{transform:translate(1px,0)}75%{transform:translate(0,-1px)}100%{transform:translate(0,0)}}
@keyframes dfFadeOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes dfWalkToDoor{0%{transform:scale(1.025) translate3d(0,0,0)}18%{transform:scale(1.10) translate3d(.2%,.28%,0)}38%{transform:scale(1.20) translate3d(-.12%,-.18%,0)}58%{transform:scale(1.34) translate3d(.14%,.20%,0)}78%{transform:scale(1.52) translate3d(-.08%,-.12%,0)}100%{transform:scale(1.82) translate3d(0,-.18%,0)}}
@keyframes dfDoorDetail{0%{opacity:0}35%{opacity:.12}100%{opacity:1}}
@keyframes dfBlackout{0%{opacity:0}100%{opacity:1}}

@media(max-width:700px){
  .outside__door{display:none}
  .outside__copy{max-width:90vw;bottom:5rem}
  .outside__copy h1{font-size:clamp(3rem,15vw,5rem)}
  .reception-experience{padding:4.7rem .45rem 1.2rem;align-items:start}
  .reception-stage__frame{margin-top:.4rem}
  .reception-hint{padding:0 .45rem}
  .reception-prop--note{width:11%;font-size:.36rem;padding:.45em}
}

@media(prefers-reduced-motion:reduce){
  .outside__camera,.outside__rain,.outside__mist,.reception-stage__image,.reception-stage__rain,.reception-stage__lamp,.reception-stage__grain,.nature-hero>img{animation:none!important}
  .note-modal__paper,.note-modal__scrim,.experience-blackout--arrival{transition:none!important}
}

/* v0.6 prototype final touches */
html.df-arriving .experience-blackout--arrival{opacity:1}
.reception-prop--brochure{
  left:86.6%;top:53.2%;width:9.6%;aspect-ratio:.68;
  display:flex;align-items:flex-start;justify-content:center;
  padding:1.1em .45em;text-decoration:none;text-align:center;
  color:#eee5d5;border:0;border-radius:1px;
  background-image:linear-gradient(to bottom,rgba(7,12,10,.15),rgba(7,12,10,.74)),url('/assets/img/lake.webp');
  background-size:cover;background-position:center;
  box-shadow:0 5px 14px rgba(0,0,0,.26);
  transform:rotate(1.1deg);
  font:400 clamp(.42rem,.72vw,.76rem)/1.15 Georgia,"Times New Roman",serif;
  text-shadow:0 1px 5px #000;
}
.reception-prop--brochure:hover{filter:brightness(1.08)}
.reception-prop--brochure:focus-visible{outline:2px solid #e9d68c;outline-offset:4px}

/* ============================================================
   Dyskan Friends v0.6.1 — smoother approach + physical note
   ============================================================ */
.outside__camera{
  inset:-3.2%;
  transform-origin:35.7% 59%;
}
.outside__walker{position:absolute;inset:0;will-change:transform}
.outside__walker>.outside__image,
.outside__walker>.outside__rain,
.outside__walker>.outside__mist,
.outside__walker>.outside__shade{position:absolute}
.outside__walker>.outside__image{inset:0;width:100%;height:100%}
.outside__walker>.outside__rain{inset:-20%}
.outside__walker>.outside__mist,.outside__walker>.outside__shade{inset:0}

.outside__handle-shot{
  position:absolute;z-index:24;inset:0;opacity:0;pointer-events:none;
  overflow:hidden;background:#080806;
}
.outside__handle-shot img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  filter:saturate(.70) contrast(.98) brightness(.78);
  transform:scale(1.035);
}

.outside.is-entering .experience-header,
.outside.is-entering .outside__copy,
.outside.is-entering .outside__enter{animation:dfFadeOutSoft .38s ease forwards}
.outside.is-entering .outside__camera{
  animation:dfApproachZoom 2.55s cubic-bezier(.18,.56,.18,1) forwards;
}
.outside.is-entering .outside__walker{
  animation:dfWalkBob .51s ease-in-out 5;
}
.outside.is-entering .outside__door-detail{
  animation:dfDoorDetailSoft .58s ease 1.95s forwards;
}
.outside.is-entering .outside__handle-shot{
  animation:dfHandleShot .63s cubic-bezier(.22,.72,.22,1) 2.42s forwards;
}
.outside.is-entering .experience-blackout{
  animation:dfBlackoutSoft .44s ease 2.92s forwards;
}

body.is-arriving .reception-stage{
  opacity:.86;filter:blur(1.7px);transform:scale(1.012);
}
body.is-arriving.is-arrived .reception-stage{
  opacity:1;filter:blur(0);transform:scale(1);
  transition:opacity .90s ease,filter .95s ease,transform 1.05s cubic-bezier(.18,.62,.22,1);
}
body.is-arriving .experience-header--inside{opacity:0}
body.is-arriving.is-arrived .experience-header--inside{
  opacity:1;transition:opacity .72s ease .48s;
}
body.is-arriving.is-arrived .experience-blackout--arrival{
  opacity:0;transition:opacity .82s ease .08s;
}

.reception-stage__frame{
  transition:filter .48s ease,transform .48s ease;
}
body.note-open .reception-stage__frame{
  filter:blur(1.3px) brightness(.72) saturate(.88);
  transform:scale(.998);
}
.reception-prop--note{
  width:7.7%;opacity:.88;box-shadow:0 5px 13px rgba(0,0,0,.22);
  background:linear-gradient(145deg,#d2c58d 0%,#cbbb7b 72%,#bfae70 100%);
  transform:rotate(-4.2deg);
  font-size:clamp(.31rem,.56vw,.62rem);
}
.reception-prop--note span{filter:blur(.42px);opacity:.68}

.note-modal__scrim{
  background:rgba(3,4,3,.46);backdrop-filter:blur(7px) brightness(.72);
  transition:opacity .44s ease;
}
.note-modal__paper{
  --source-scale:.14;
  width:min(410px,88vw);min-height:365px;
  padding:clamp(2.15rem,5vw,3rem);
  border:1px solid rgba(86,72,34,.14);
  border-radius:1px;
  background:
    radial-gradient(circle at 18% 14%,rgba(255,255,255,.18),transparent 28%),
    linear-gradient(132deg,#d7ca8f 0%,#cabb78 68%,#bca966 100%);
  box-shadow:0 30px 100px rgba(0,0,0,.55),0 2px 2px rgba(0,0,0,.18);
  transform:translate(var(--from-x),var(--from-y)) scale(var(--source-scale)) rotate(-4.3deg);
  transform-origin:center;
  opacity:.45;
  transition:transform .56s cubic-bezier(.16,.78,.18,1),opacity .30s ease;
  cursor:zoom-out;
}
.note-modal__paper::after{
  content:"";position:absolute;right:0;bottom:0;width:46px;height:40px;pointer-events:none;
  background:linear-gradient(315deg,rgba(83,67,29,.13),transparent 54%);
  opacity:.55;
}
.note-modal.is-open .note-modal__paper{
  transform:translate(0,0) scale(1) rotate(-.8deg);opacity:1;
}
.note-modal.is-open .note-modal__scrim{opacity:1}
.note-modal__label{opacity:.72}
.note-modal__paper h1{font-size:clamp(1.9rem,6vw,2.8rem);margin-bottom:1.45rem}
.note-modal__text{font-size:clamp(1.02rem,3vw,1.22rem)}
.note-modal__close{opacity:.68}

@keyframes dfFadeOutSoft{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(-4px)}
}
@keyframes dfApproachZoom{
  from{transform:scale(1.025) translate3d(0,0,0)}
  to{transform:scale(1.77) translate3d(-.15%,-.08%,0)}
}
@keyframes dfWalkBob{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  25%{transform:translate3d(.07%,.10%,0) rotate(.025deg)}
  50%{transform:translate3d(-.045%,-.07%,0) rotate(-.02deg)}
  75%{transform:translate3d(.035%,.055%,0) rotate(.015deg)}
}
@keyframes dfDoorDetailSoft{
  0%{opacity:0}45%{opacity:.20}100%{opacity:.82}
}
@keyframes dfHandleShot{
  0%{opacity:0;transform:scale(1.025)}
  18%{opacity:1}
  100%{opacity:1;transform:scale(1)}
}
@keyframes dfBlackoutSoft{
  from{opacity:0}to{opacity:1}
}

@media(prefers-reduced-motion:reduce){
  .outside__walker,.outside__handle-shot{animation:none!important}
  body.is-arriving .reception-stage,body.is-arriving.is-arrived .reception-stage{filter:none!important;transform:none!important;transition:none!important}
}

/* ============================================================
   Dyskan Friends v0.7 — fixed art stage
   The composition is never cropped to fill the browser.
   ============================================================ */
.art-page{
  margin:0;
  min-height:100svh;
  background:#010201;
  overflow:hidden;
  color:#eee7dc;
}
.art-page.note-open{overflow:hidden}
.art-shell{
  min-height:100svh;
  display:grid;
  place-items:center;
  background:#010201;
}
.art-stage{
  --stage-width:min(100vw,1920px,calc(100svh * 1.5));
  position:relative;
  width:var(--stage-width);
  aspect-ratio:3/2;
  max-width:100%;
  overflow:hidden;
  background:#050605;
  isolation:isolate;
}
.art-stage__media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#050605;
}
.art-stage__video{z-index:1;object-fit:contain}
.art-stage__poster{z-index:0}
.art-stage__outside-shade{
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to top,rgba(2,3,2,.78) 0%,rgba(2,3,2,.18) 47%,rgba(2,3,2,.30) 100%);
}
.art-topbar{
  position:absolute;
  z-index:30;
  inset:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:clamp(.75rem,2vw,1.5rem) clamp(.8rem,2.7vw,2.5rem);
  color:#eee7dc;
  text-shadow:0 1px 12px rgba(0,0,0,.65);
}
.art-topbar--inside{background:linear-gradient(to bottom,rgba(0,0,0,.45),transparent)}
.art-brand{
  font:400 clamp(.72rem,1.1vw,1rem)/1 Georgia,"Times New Roman",serif;
  text-transform:uppercase;
  letter-spacing:.11em;
  text-decoration:none;
}
.art-menu-button{
  border:0;
  background:transparent;
  color:rgba(238,231,220,.82);
  font:inherit;
  font-size:clamp(.7rem,1vw,.88rem);
  cursor:pointer;
  padding:.65rem;
}
.art-menu{
  position:absolute;
  top:3.8rem;
  right:clamp(.7rem,2.7vw,2.5rem);
  display:grid;
  min-width:10rem;
  padding:.7rem .95rem;
  background:rgba(3,4,3,.88);
  border:1px solid rgba(238,231,220,.16);
  backdrop-filter:blur(9px);
}
.art-menu[hidden]{display:none}
.art-menu a{padding:.42rem 0;color:#ded6ca;text-decoration:none;font-size:.86rem}
.art-menu a:hover,.art-menu a:focus-visible{text-decoration:underline;text-underline-offset:.3em}
.art-outside-copy{
  position:absolute;
  z-index:5;
  left:clamp(1rem,4vw,4rem);
  bottom:clamp(2.8rem,7vw,6rem);
  max-width:72%;
  text-shadow:0 2px 18px rgba(0,0,0,.75);
}
.art-eyebrow{
  margin:0 0 .6rem;
  color:#d9c699;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:clamp(.58rem,.8vw,.75rem);
}
.art-outside-copy h1{
  margin:0 0 .65rem;
  font:400 clamp(2.6rem,7vw,7.3rem)/.95 Georgia,"Times New Roman",serif;
  letter-spacing:-.035em;
}
.art-status{margin:0 0 .38rem;font:400 clamp(1rem,1.7vw,1.55rem)/1.4 Georgia,"Times New Roman",serif}
.art-meta{margin:0;color:rgba(238,231,220,.72);font-size:clamp(.72rem,1vw,.98rem)}
.art-hotspot{position:absolute;z-index:12;background:transparent;border:0;outline:0;text-decoration:none;cursor:pointer}
.art-hotspot:focus-visible{outline:2px solid rgba(220,195,133,.78);outline-offset:2px}
.art-hotspot--entrance{left:29.6%;top:50.5%;width:8.5%;height:20%}
.art-enter-cue{
  position:absolute;
  z-index:14;
  right:clamp(.8rem,2.5vw,2.3rem);
  bottom:clamp(.65rem,1.5vw,1.3rem);
  border:0;
  background:transparent;
  color:rgba(238,231,220,.85);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:clamp(.58rem,.75vw,.72rem);
  cursor:pointer;
  padding:.65rem;
}
.art-transition{
  position:absolute;
  z-index:90;
  inset:0;
  background:#000;
  opacity:0;
  pointer-events:none;
  transition:opacity .6s ease;
}
.art-transition.is-active{opacity:1}
.art-enter-video{
  position:absolute;
  z-index:80;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}
.art-enter-video[hidden]{display:none}

/* Reception is deliberately still: no global rain, no lamp animation, no ambient motion. */
.art-stage--reception .art-stage__media{filter:saturate(.80) contrast(.98) brightness(.90)}
.reception-hotspot--ledger{left:19%;top:59%;width:40%;height:28%}
.reception-hotspot--key7{left:8.2%;top:24%;width:6.5%;height:14%}
.reception-hotspot--stairs{left:58.5%;top:18%;width:15%;height:44%}
.reception-hotspot--outside{left:72.5%;top:15%;width:18%;height:42%}
.desk-note{
  position:absolute;
  z-index:18;
  left:55.1%;
  top:74.7%;
  width:8.4%;
  aspect-ratio:1.05/1;
  border:0;
  padding:.62em .68em .52em;
  transform:rotate(-2.2deg);
  cursor:pointer;
  color:#332f27;
  background:
    linear-gradient(120deg,rgba(255,255,255,.16),transparent 35%),
    repeating-linear-gradient(0deg,rgba(80,68,42,.025) 0 1px,transparent 1px 4px),
    #d4c995;
  box-shadow:0 .12rem .35rem rgba(0,0,0,.35);
  font:italic clamp(.24rem,.48vw,.58rem)/1.25 Georgia,"Times New Roman",serif;
  text-align:left;
}
.desk-note::after{content:"";position:absolute;inset:0;border:1px solid rgba(70,58,36,.12);pointer-events:none}
.desk-note__scribble{opacity:.58;filter:blur(.28px)}
.desk-note:hover,.desk-note:focus-visible{filter:brightness(1.05)}
.desk-brochure{
  position:absolute;
  z-index:17;
  left:87.7%;
  top:57.7%;
  width:7.4%;
  height:19.5%;
  overflow:hidden;
  text-decoration:none;
  background:#171a16;
  box-shadow:0 .1rem .35rem rgba(0,0,0,.28);
  transform:perspective(400px) rotateY(-3deg);
}
.desk-brochure__photo{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom,rgba(240,232,214,.12),rgba(5,7,5,.18)),
    url('/assets/img/lake.webp') center/cover no-repeat;
  filter:saturate(.72) brightness(.8);
}
.desk-brochure__title{
  position:absolute;
  z-index:2;
  inset:7% 7% auto;
  padding:.2em .25em;
  background:rgba(222,214,194,.76);
  color:#2c2924;
  font:400 clamp(.28rem,.52vw,.63rem)/1.05 Georgia,"Times New Roman",serif;
  text-align:center;
}
.desk-brochure:hover,.desk-brochure:focus-visible{filter:brightness(1.08)}

/* Physical Post-it overlay. */
.note-modal{position:fixed;z-index:200;inset:0;display:grid;place-items:center;padding:1rem}
.note-modal[hidden]{display:none}
.note-modal__scrim{position:absolute;inset:0;border:0;background:rgba(0,0,0,.30);backdrop-filter:blur(0);cursor:pointer;transition:background .42s ease,backdrop-filter .42s ease}
.note-modal__paper{
  --from-x:0px;
  --from-y:0px;
  --source-scale:.18;
  position:relative;
  z-index:2;
  width:min(430px,82vw);
  aspect-ratio:1.03/1;
  padding:clamp(1.5rem,5vw,3.1rem);
  color:#302b22;
  outline:0;
  background:
    linear-gradient(122deg,rgba(255,255,255,.20),transparent 31%),
    repeating-linear-gradient(0deg,rgba(90,77,49,.025) 0 1px,transparent 1px 4px),
    #d8cb91;
  box-shadow:0 1.2rem 4rem rgba(0,0,0,.38);
  transform:translate(var(--from-x),var(--from-y)) scale(var(--source-scale)) rotate(-2deg);
  opacity:.22;
  transition:transform .52s cubic-bezier(.2,.72,.18,1),opacity .28s ease;
  cursor:pointer;
}
.note-modal.is-open .note-modal__scrim{background:rgba(0,0,0,.58);backdrop-filter:blur(6px)}
.note-modal.is-open .note-modal__paper{transform:translate(0,0) scale(1) rotate(-1deg);opacity:1}
.note-modal__label{margin:0 0 .9rem;text-transform:uppercase;letter-spacing:.15em;font-size:.68rem;color:rgba(48,43,34,.62)}
.note-modal__paper h1{margin:0 0 1.25rem;font:400 clamp(1.8rem,5vw,2.7rem)/1 Georgia,"Times New Roman",serif;letter-spacing:-.02em}
.note-modal__text{font:400 clamp(1.02rem,2.4vw,1.25rem)/1.55 Georgia,"Times New Roman",serif}
.note-modal__text p{margin:0 0 .75rem}
.note-modal__close{position:absolute;left:0;right:0;bottom:-2.5rem;margin:auto;width:max-content;border:0;background:transparent;color:#ddd3c2;font:inherit;font-size:.78rem;cursor:pointer;text-decoration:underline;text-underline-offset:.3em}

.debug-hotspots .reception-hotspot,.debug-hotspots .art-hotspot--entrance{background:rgba(255,0,0,.18);outline:1px solid rgba(255,90,90,.8)}
.debug-hotspots .desk-note{outline:2px solid rgba(255,220,80,.9)}
.debug-hotspots .desk-brochure{outline:2px solid rgba(80,180,255,.9)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
@media (max-width:700px){
  .art-stage{--stage-width:100vw}
  .art-outside-copy{max-width:82%;bottom:2.7rem}
  .art-outside-copy h1{font-size:clamp(2.25rem,12vw,4rem)}
  .art-topbar{padding:.7rem .8rem}
  .art-enter-cue{display:none}
  .desk-note{min-width:42px;min-height:42px}
  .desk-brochure{min-width:42px;min-height:58px}
}