/* /rooms "Rooms by Resonate" (site v3, 16 Oct 2026): the partner page for venues and organizers.
   Page-specific CSS only. Shared parts come from site.css: tokens, .site-nav(.on-night), .btn/.btn-q, .hn, .plate,
   .drawing, .site-foot and the mark motion (.rzm-od, .rzm-onview). Source: sitework/resonate-brand-notes.md §10 + §15,
   objects lifted from the Room Night board (sitework/assets/rooms, specs/rooms.md). Built by
   sitework/rooms-build/build-rooms.py. No scripts: every motion is CSS and stops under prefers-reduced-motion.
   Class prefix rr- so nothing collides with site.css. */
/* ---------- 01 the screen at the mixer (hero object) ---------- */
.rr-tv{container:rr-tv/inline-size;max-width:1060px;margin:0 auto}
.rr-bezel{background:#0B0C08;border-radius:14px;padding:12px;box-shadow:0 30px 60px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.05)}
.rr-screen{container-type:inline-size;aspect-ratio:16/9;background:var(--moss,#1E2A10);border-radius:4px;position:relative;overflow:hidden;color:var(--paper,#FFF8F0)}
.rr-stand{width:22%;height:16px;margin:0 auto;background:#0B0C08;border-radius:0 0 8px 8px}
.rr-scr{position:absolute;inset:0;display:grid;grid-template-columns:1fr 34cqw;gap:4cqw;padding:4.6cqw 5cqw 4cqw}
.rr-scr p{margin:0}
.rr-scr .l{display:flex;flex-direction:column;min-width:0}
.rr-scr .rr-at{font:500 max(7px,1.35cqw)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sage,#C4D0B1)}
.rr-scr .rr-venue{font:400 8.6cqw/.9 var(--poster);letter-spacing:-.02em;margin:1.6cqw 0 1.2cqw}
.rr-scr .rr-ev{font:400 2.4cqw/1.2 var(--serif);color:var(--sage,#C4D0B1)}
.rr-scr .rr-rit{margin-top:auto;display:grid;max-width:44cqw;font:400 3.5cqw/1.12 var(--serif);color:var(--paper,#FFF8F0)}
.rr-rit>span{grid-area:1/1;align-self:end}
.rr-rit>.m{font:500 2.4cqw/1.45 var(--mono);letter-spacing:0}
.rr-foot{flex-wrap:wrap;display:flex;align-items:center;justify-content:space-between;gap:2cqw;margin-top:3cqw}
.rr-sig{white-space:nowrap;display:inline-flex;align-items:center;gap:.8cqw;font:600 max(7px,1.3cqw)/1 var(--sans);color:var(--sage,#C4D0B1);letter-spacing:.01em}
.rr-sig img,.rr-sig svg{width:2.2cqw;height:2.2cqw;min-width:13px;overflow:visible}
.rr-live{display:flex;align-items:center;gap:1.2cqw;font:500 max(7.5px,1.5cqw)/1.2 var(--mono);color:var(--paper,#FFF8F0)}
.rr-live img,.rr-live svg{width:4.6cqw;height:4.6cqw;min-width:24px;min-height:24px}
.rr-live small{display:block;color:var(--sage,#C4D0B1);font-size:max(6.5px,1.15cqw);letter-spacing:.06em}
.rr-scr .r{display:flex;flex-direction:column;align-items:stretch;justify-content:center}
.rr-qrtile{background:var(--paper,#FFF8F0);border-radius:2cqw;padding:2.2cqw 2.2cqw 1.6cqw;color:var(--moss,#1E2A10)}
.rr-qrtile img{display:block;width:100%;height:auto}
.rr-qrtile .cap{display:flex;justify-content:space-between;align-items:baseline;gap:4px;margin-top:1.3cqw;font:600 max(7.5px,1.6cqw)/1.2 var(--sans)}
.rr-qrtile .cap span:last-child{font:500 max(6px,1.15cqw)/1 var(--mono);letter-spacing:.06em;color:var(--forest,#154A36)}
.rr-scr .rr-names{margin-top:1.6cqw;text-align:center;font:400 2cqw/1.2 var(--serif);color:var(--paper,#FFF8F0)}
.rr-figcap{margin:14px 0 0;text-align:center;font:500 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--sage,#C4D0B1)}
/* the five ritual lines rotate in the CTA slot: 4.5 s each, 22.5 s loop, CSS only */
@media (prefers-reduced-motion:no-preference){
  .rr-rit>span{animation:rr-rit 22.5s ease-in-out infinite both}
  .rr-rit>span:nth-child(2){animation-delay:4.5s}
  .rr-rit>span:nth-child(3){animation-delay:9s}
  .rr-rit>span:nth-child(4){animation-delay:13.5s}
  .rr-rit>span:nth-child(5){animation-delay:18s}
}
@keyframes rr-rit{0%{opacity:0;transform:translateY(.25em)}3%,17%{opacity:1;transform:none}20%,100%{opacity:0;transform:translateY(-.12em)}}
@media (prefers-reduced-motion:reduce){.rr-rit>span:not(:first-child){opacity:0}}
/* phone: the 16:9 TV becomes a portrait sign; same parts, QR before the ritual line */
@container rr-tv (max-width:640px){
  .rr-bezel{padding:8px;border-radius:22px}
  .rr-screen{aspect-ratio:auto;border-radius:15px}
  .rr-stand{display:none}
  .rr-scr{position:relative;inset:auto;grid-template-columns:1fr;gap:0;padding:26px 22px 22px}
  .rr-scr .l{display:contents}
  .rr-scr .rr-at{order:1;font-size:11px}
  .rr-scr .rr-venue{order:2;font-size:13.5cqw;margin:10px 0 8px}
  .rr-scr .rr-ev{order:3;font-size:17px}
  .rr-scr .r{order:4;margin:22px 0 0}
  .rr-scr .rr-rit{order:5;margin-top:22px;max-width:none;font-size:23px}
  .rr-rit>.m{font-size:15.5px}
  .rr-foot{order:6;margin-top:22px}
  .rr-sig{font-size:12px;gap:6px}.rr-sig img,.rr-sig svg{width:20px;height:20px}
  .rr-live{font-size:13px;gap:8px}.rr-live img,.rr-live svg{width:30px;height:30px}.rr-live small{font-size:10.5px}
  .rr-qrtile{border-radius:14px;padding:16px 16px 12px;width:100%;max-width:300px;margin:0 auto}
  .rr-qrtile .cap{font-size:13px;margin-top:10px}.rr-qrtile .cap span:last-child{font-size:10px}
  .rr-scr .rr-names{font-size:17px;margin-top:12px}
}

/* ---------- route of the night (hero foot) ---------- */
.rr-route{position:relative;list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);height:204px}
.rr-route::before{content:"";position:absolute;left:0;right:0;top:60px;height:84px;background:url(/img/rooms-route-line.svg) center/100% 100% no-repeat}
.rr-route li{position:relative;text-align:center;font:400 16px/1.15 var(--serif);color:var(--paper,#FFF8F0)}
.rr-route li::after{content:"";position:absolute;left:50%;top:calc(60px + 84px * var(--y));width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--paper,#FFF8F0)}
.rr-route li.on::after{width:16px;height:16px;margin:-8px 0 0 -8px;background:var(--apricot,#E8913A)}
.rr-route .t{display:block;font:500 12px/1.2 var(--mono);letter-spacing:.04em;color:var(--sage,#C4D0B1)}
.rr-route .lb{position:absolute;left:2px;right:2px;display:flex;flex-direction:column;align-items:center}
.rr-route li:nth-child(odd) .lb{flex-direction:column-reverse}
.rr-route li:nth-child(odd) .lb{bottom:calc(204px - 60px - 84px * var(--y) + 14px)}
.rr-route li:nth-child(even) .lb{top:calc(60px + 84px * var(--y) + 14px)}
.rr-route li:nth-child(odd) .t{margin-top:4px}
.rr-route li:nth-child(even) .t{margin-bottom:4px}
@media (max-width:900px){
  .rr-route{display:block;height:auto;margin-top:36px;border-left:1.6px solid var(--sage,#C4D0B1);margin-left:5px}
  .rr-route::before{display:none}
  .rr-route li{display:block;text-align:left;padding:0 0 18px 22px}
  .rr-route .lb,.rr-route li:nth-child(odd) .lb,.rr-route li:nth-child(even) .lb{position:static;align-items:flex-start;flex-direction:column}
  .rr-route li::after{left:-1px;top:.35em;margin-left:-5.5px}
  .rr-route li.on::after{margin-left:-8px;top:.2em}
  .rr-route li .t,.rr-route li:nth-child(odd) .t{margin:0 0 3px}
}

/* ---------- 04 on the table: tent (front, back) and "hi, I'm" name tags ---------- */
.rr-print{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.rr-tentwrap{display:flex;flex-direction:column;gap:10px;max-width:100%}
.rr-tent{width:330px;max-width:100%;height:470px;border-radius:6px;padding:24px 24px 18px;display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(21,35,27,.06),0 16px 34px rgba(21,35,27,.12)}
.rr-tent p{margin:0}
.rr-tent.front{background:#FFFCF7;color:var(--forest,#154A36);border:1px solid rgba(21,74,54,.18)}
.rr-tent.back{background:var(--forest,#154A36);color:var(--paper,#FFF8F0)}
.rr-tent .top{display:flex;justify-content:space-between;gap:8px;font:500 11px/1 var(--mono);letter-spacing:.12em}
.rr-tent .v{font:400 46px/.9 var(--poster);letter-spacing:-.02em;margin:12px 0 6px}
.rr-tent .e{font:400 17px/1.2 var(--serif)}
.rr-tent .q{margin:16px auto 8px;width:190px}
.rr-tent .q img{display:block;width:100%;height:auto}
.rr-tent .scan{text-align:center;font:700 15px/1.3 var(--sans)}
.rr-tent .tfoot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px}
.rr-stamps{display:flex;gap:5px}
.rr-stamps span{width:24px;height:24px;border-radius:50%;border:1.3px solid currentColor;display:grid;place-items:center;font:500 7.5px/1 var(--mono)}
.rr-stamps span.f{background:currentColor}
.rr-stamps span.f em{font-style:normal;color:#FFFCF7}
.rr-tsig{display:inline-flex;align-items:center;gap:6px;font:600 11.5px/1 var(--sans)}
.rr-tsig img{width:19px;height:auto;overflow:visible}
.rr-tent.back .k{font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--sage,#C4D0B1)}
.rr-tent.back h3,.rr-tent.back .h{font:400 31px/1.08 var(--serif);margin:18px 0 22px;letter-spacing:0}
.rr-tent.back ol{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.rr-tent.back li{display:grid;grid-template-columns:28px 1fr;gap:10px;font:500 15px/1.35 var(--sans)}
.rr-tent.back li i{font:400 15px/1 var(--mono);font-style:normal;width:26px;height:26px;border-radius:50%;border:1.3px solid var(--paper,#FFF8F0);display:grid;place-items:center}
.rr-tent.back .closes{margin-top:20px;font:500 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--sage,#C4D0B1)}
.rr-tent.back .quiet{font:400 15px/1.3 var(--serif)}
.rr-spec{margin:0;font:500 11.5px/1.4 var(--mono);color:var(--dim,#4C5951);letter-spacing:.03em;max-width:330px}
.rr-tags{display:flex;flex-direction:column;gap:18px;max-width:100%}
.rr-ntag p,.rr-dotkey{margin:0}
.rr-ntag{width:300px;max-width:100%;height:186px;background:#FFFCF7;border-radius:12px;border:1px solid rgba(21,74,54,.18);box-shadow:0 12px 26px rgba(21,35,27,.1);position:relative;overflow:hidden;color:var(--forest,#154A36)}
.rr-ntag .band{height:38px;background:var(--forest,#154A36);color:var(--paper,#FFF8F0);display:flex;align-items:center;justify-content:space-between;padding:0 14px;font:700 13px/1 var(--sans)}
.rr-ntag .band span:last-child{font:500 10px/1 var(--mono);letter-spacing:.1em}
.rr-ntag .nm{position:absolute;left:18px;top:62px;font:400 66px/1 var(--hand);color:var(--ink,#15231B)}
.rr-ntag .dot{position:absolute;right:18px;bottom:18px;width:52px;height:52px;border-radius:50%;background:var(--forest,#154A36);display:grid;place-items:center;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.rr-ntag .dot img{width:38px;height:auto;overflow:visible}
.rr-ntag .ev{position:absolute;left:18px;bottom:14px;font:500 10.5px/1 var(--mono);letter-spacing:.08em;color:var(--dim,#4C5951)}
.rr-dotkey{display:flex;gap:12px;align-items:center;margin:0;font-size:14.5px;line-height:1.45;color:var(--dim,#4C5951);max-width:300px}
.rr-dotkey .d{width:30px;height:30px;border-radius:50%;background:var(--forest,#154A36);flex:none;display:grid;place-items:center}
.rr-dotkey .d img{width:22px;height:auto;overflow:visible}
.rr-dotkey b{color:var(--ink,#15231B)}

/* ---------- 05 the morning after: "greetings from" postcard and "you met" recap ---------- */
.rr-morning{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.rr-pcwrap{flex:1 1 520px;max-width:640px;min-width:0}
.rr-postcard{background:#FFFCF7;border-radius:6px;box-shadow:0 18px 40px rgba(21,35,27,.14),0 1px 0 rgba(21,35,27,.08);aspect-ratio:3/2;position:relative;container-type:inline-size}
.rr-postcard .in{position:absolute;inset:3.2%;border:1.5px solid var(--forest,#154A36);border-radius:3px}
.rr-postcard>svg{position:absolute;inset:0;width:100%;height:100%}
.rr-postcard p{margin:0}
.rr-postcard .g{position:absolute;left:7%;top:9%;font:400 3.4cqw/1 var(--serif);color:var(--forest,#154A36)}
.rr-postcard .t{position:absolute;left:6.5%;top:15%;font:400 11.6cqw/.86 var(--poster);color:var(--forest,#154A36);letter-spacing:-.025em}
.rr-postcard .n{position:absolute;left:7.5%;bottom:10%;font:400 5.6cqw/.95 var(--hand);color:var(--ink,#15231B);transform:rotate(-3deg);transform-origin:left}
.rr-story{width:270px;max-width:100%;height:480px;border-radius:22px;background:var(--moss,#1E2A10);color:var(--paper,#FFF8F0);padding:26px 22px 20px;display:flex;flex-direction:column;flex:none;box-shadow:0 18px 40px rgba(21,35,27,.22)}
.rr-story p{margin:0}
.rr-story .sn{font:500 11.5px/1.3 var(--mono);letter-spacing:.12em;color:var(--sage,#C4D0B1)}
.rr-story .ring{margin:22px auto 0;width:200px;height:160px}
.rr-story .ring svg{display:block;width:100%;height:100%}
.rr-story .met{margin-top:auto;font:400 19px/1.1 var(--serif);color:var(--sage,#C4D0B1)}
.rr-story .who{font:400 46px/.95 var(--poster);letter-spacing:-.02em;margin:6px 0 14px}
.rr-story .meta{font:500 11.5px/1.5 var(--mono);color:var(--sage,#C4D0B1);letter-spacing:.04em}
.rr-story .sf{margin-top:auto;display:flex;align-items:center;gap:6px;font:600 12px/1 var(--sans);color:var(--sage,#C4D0B1)}
.rr-story .sf img{width:19px;height:auto;overflow:visible}
.rr-cap2{margin:12px 0 0;font:500 11.5px/1.4 var(--mono);color:var(--dim,#4C5951);letter-spacing:.03em}

/* ---------- 03 one ritual line: the five lines as cards (moss on paper) ---------- */
.rr-lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.rr-line{background:var(--moss,#1E2A10);color:var(--paper,#FFF8F0);border-radius:18px;padding:20px 18px 16px;min-height:270px;display:flex;flex-direction:column;margin:0}
.rr-line .no{font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--sage,#C4D0B1)}
.rr-line blockquote{margin:14px 0 auto;font:400 25px/1.12 var(--serif)}
.rr-line blockquote.m{font:500 17px/1.45 var(--mono);letter-spacing:0}
.rr-line figcaption{margin-top:18px;border-top:1px solid rgba(196,208,177,.24);padding-top:10px;font:500 10.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sage,#C4D0B1)}
@media (max-width:560px){.rr-line{min-height:0}.rr-line blockquote{margin-bottom:22px}}

/* ---------- what the room never does (moss section, one night-2 card) ---------- */
.rr-rules{border:1px solid rgba(196,208,177,.24);border-radius:28px;padding:30px 28px;background:var(--moss2,#2C371E);display:grid;grid-template-columns:repeat(3,1fr);gap:26px 34px}
.rr-rules>p{margin:0;font:400 14.5px/1.45 var(--sans);color:var(--sage,#C4D0B1)}
.rr-rules b{display:block;color:var(--paper,#FFF8F0);font:400 19px/1.25 var(--serif);margin-bottom:4px}
@media (max-width:900px){.rr-rules{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.rr-rules{grid-template-columns:1fr;padding:24px 22px;gap:18px}}

/* ================= page shell for /rooms (bands, section heads, hero, how, host CTA) ================= */
/* Bands: use these, NOT site.css .night (its ".night p{color:#D3DBC9}" would recolour the objects' text). */
.rr-band{padding:72px 0}
.rr-band.moss{background:var(--moss,#1E2A10);color:var(--paper,#FFF8F0)}
.rr-band.paper{background:var(--paper,#FFF8F0);color:var(--ink,#15231B)}
.rr-band.peach{background:#FFF3E6;color:var(--ink,#15231B)}
.rr-band.tight{padding-top:24px}
@media (max-width:560px){.rr-band{padding:56px 0}}
/* section head = Room Night .shead */
.rr-head{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:baseline;margin-bottom:34px}
.rr-head .num{justify-self:start;font:400 15px/1 var(--mono);color:var(--forest,#154A36);border:1px solid rgba(21,74,54,.3);border-radius:999px;padding:7px 11px}
.rr-head h2{font:400 clamp(28px,4.4vw,44px)/1.08 var(--serif);letter-spacing:-.01em;margin:0;color:inherit}
.rr-head p{grid-column:2;max-width:640px;margin:0;font-size:16.5px;line-height:1.5;color:var(--dim,#4C5951)}
.moss .rr-head .num{color:var(--sage,#C4D0B1);border-color:rgba(196,208,177,.24)}
.moss .rr-head h2{color:var(--paper,#FFF8F0)}
.moss .rr-head p{color:var(--sage,#C4D0B1)}
@media (max-width:560px){.rr-head{grid-template-columns:1fr}.rr-head p{grid-column:1}}
/* hero: the screen, then the name of the thing, then the route */
.rr-hero{padding-top:40px;padding-bottom:56px}
.rr-intro{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;margin-top:56px}
.rr-kick{margin:0 0 14px;font:500 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sage,#C4D0B1)}
.rr-intro h1{font:400 clamp(40px,6.2vw,76px)/.98 var(--serif);letter-spacing:-.015em;margin:0;color:var(--paper,#FFF8F0)}
.rr-intro .lede{margin:18px 0 0;max-width:560px;font:400 clamp(18px,2vw,21px)/1.45 var(--serif);color:var(--paper,#FFF8F0)}
.rr-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.rr-route-note{margin:10px 0 0;max-width:720px;font-size:13.5px;line-height:1.45;color:var(--sage,#C4D0B1)}
@media (max-width:900px){.rr-intro{grid-template-columns:1fr;gap:32px;margin-top:44px}}
/* how it works = the tent back, set large */
.rr-how{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.rr-steps{list-style:none;margin:0;padding:0;display:grid;gap:22px;max-width:560px}
.rr-steps li{display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start;font:500 19px/1.4 var(--sans);color:var(--ink,#15231B)}
.rr-steps li i{font:400 17px/1 var(--mono);font-style:normal;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--forest,#154A36);color:var(--forest,#154A36);display:grid;place-items:center}
.rr-steps li b{display:block;font:400 22px/1.2 var(--serif);margin-bottom:2px}
@media (max-width:900px){.rr-how{grid-template-columns:1fr;gap:36px}}
/* host setup list (on the table) */
.rr-setup{list-style:none;counter-reset:s;margin:0 0 40px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px 28px}
.rr-setup li{counter-increment:s;border-top:1px solid rgba(21,35,27,.12);padding-top:12px;font-size:15.5px;line-height:1.45;color:var(--dim,#4C5951)}
.rr-setup li::before{content:counter(s,decimal-leading-zero);display:block;font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--forest,#154A36);margin-bottom:8px}
.rr-setup li b{display:block;font:400 19px/1.25 var(--serif);color:var(--ink,#15231B);margin-bottom:4px}
@media (max-width:760px){.rr-setup{grid-template-columns:1fr}}
/* the morning after: three notes under the cards (board .never) */
.rr-never{margin-top:30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 26px;font-size:14.5px;line-height:1.5;color:var(--dim,#4C5951)}
.rr-never p{margin:0;border-top:1px solid rgba(21,35,27,.12);padding-top:10px}
.rr-never b{color:var(--ink,#15231B)}
/* closing: Host a room */
.rr-cta{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center}
.rr-cta h2{font:400 clamp(36px,5.2vw,60px)/1 var(--serif);letter-spacing:-.015em;margin:0;color:var(--paper,#FFF8F0)}
.rr-cta .lede{margin:16px 0 0;max-width:520px;font-size:17px;line-height:1.55;color:var(--sage,#C4D0B1)}
.rr-cta .fine{margin:18px 0 0;font-size:14px;color:#B5C0AA}
.rr-cta .fine a{color:var(--paper,#FFF8F0)}
@media (max-width:900px){.rr-cta{grid-template-columns:1fr;gap:32px}}

/* ================= /rooms page additions (rooms-build) ================= */
.rr-page{background:var(--moss)}                 /* the page is a night page; the footer sets its own paper */
.rr-page .site-foot{background:var(--paper)}
.rr-page .site-nav.on-night{background:rgba(30,42,16,.94)}   /* the nav stays night over the paper interludes */
.rr-band{overflow-x:clip}
.rr-band.paper,.rr-band.peach{position:relative}
.rr-band .wrap>.rr-head:first-child{margin-top:0}
.rr-band{padding:clamp(64px,8vw,104px) 0}
.rr-band.tight{padding-top:0}
#lines{padding-bottom:clamp(40px,5vw,56px)}
.rr-hero{padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(56px,7vw,88px)}
.rr-tv{max-width:1000px}

/* the screen corner: the orbit draws on once (assets/mark "Orbit drawn"); the svg's viewBox has room for the echo */
.rr-sig .rzm-od{width:3.4cqw;height:3.4cqw;min-width:20px;min-height:20px;margin:-.6cqw -.3cqw -.6cqw -.6cqw}
@container rr-tv (max-width:640px){.rr-sig .rzm-od{width:28px;height:28px;margin:-4px -2px -4px -4px}}

/* hero intro: the name of the thing, what a room is, the drawing */
.rr-intro{margin-top:clamp(48px,6vw,80px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 64px}
.rr-intro h1{font-size:clamp(44px,6vw,80px)}
@media (max-width:900px){.rr-intro{grid-template-columns:minmax(0,1fr)}.rr-intro .drawing{max-width:560px}}
.rr-facts{list-style:none;margin:22px 0 0;padding:0;max-width:34em}
.rr-facts li{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--nline);font-size:16px;line-height:1.45;color:var(--sage)}
.rr-facts li::before{content:"";flex:none;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--sage);margin-top:5px}
.rr-ctas{margin-top:28px}
.rr-art{width:100%;box-shadow:0 24px 50px -28px rgba(0,0,0,.55)}
.rr-art img{object-fit:cover}
.rr-band.moss .drawing{background:var(--moss2)}
.rr-route{margin-top:clamp(56px,7vw,88px)}

/* 01 how it works: steps beside the drawing, rings behind the drawing (Concept B plate) */
.rr-how{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 72px}
.rr-plate{min-height:600px}
.rr-plate .drawing{width:min(100%,440px);border-radius:50%;box-shadow:none}
.rr-how .hn{margin-left:56px}
@media (max-width:900px){.rr-how{grid-template-columns:minmax(0,1fr)}.rr-plate{min-height:0;padding:56px 0}.rr-plate .drawing{width:min(100%,360px)}}

/* 03 lines: the note sits under the cards, to the right */
.rr-hn-r{margin:30px 0 0 auto;width:max-content;max-width:100%}

/* 04 on the table: tent + tags read as one set on the table */
.rr-print{gap:28px 32px;justify-content:center}
.rr-band.tight .rr-head{padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--rule)}

/* the closing: the orbit, alone, draws as it scrolls in; then the ask */
.rr-cta{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:40px 64px}
.rr-cta-t{order:0}
.rr-cta .drawing{order:1}
.rr-mark{display:block;width:88px;height:88px;margin:0 0 18px -10px}
.rr-cta .rr-ctas{margin-top:28px}
@media (max-width:900px){.rr-cta{grid-template-columns:minmax(0,1fr)}}

/* four long nav links: below 1020px only Sign in + Host a room stay (the page has its own section heads) */
@media (max-width:1020px){.rr-page .nav-links{display:none}}

/* phones: everything stays inside 390px */
@media (max-width:560px){
  .rr-intro h1{font-size:44px}
  .rr-how .hn{margin-left:4px}
  .rr-print{justify-content:flex-start}
  .rr-tent{width:100%;max-width:330px}
  .rr-ntag{width:100%}
}
@media (prefers-reduced-motion:reduce){.rr-art{transition:none}}