/* Roost notes layer. Sits on top of the replica and never changes it. */
:root{
  /* Retinted from the Camp4Real layer to Vie's own palette. The structure of
     this file is unchanged on purpose: the notes layer is studio furniture and
     should behave identically on every Coop. Only the tokens move. */
  --r-aub:#184E5A;
  --r-aub-2:#0F3741;
  --r-cream:#FDFBF6;
  --r-gold:#D9A521;
  --r-rust:#9C4A2C;
  --r-ink:#2B2621;
  --r-line:#E7DCCB;
}
/* Sample notes read in olive so a reader can tell at a glance which findings
   were measured and which are illustrations of the format. */
.rn-pin.sample{background:#81781D}
.rn-kind{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 "Fredoka",system-ui,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:2px solid var(--r-ink)}
.rn-kind.verified{background:#184E5A;color:#fff;border-color:#184E5A}
.rn-kind.sample{background:#F3EBC9;color:#4A4512;border-color:#81781D}
.rn-samplenote{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#F7F2E2;
  border:2px dashed #81781D;color:#4A4512;font-size:14px;line-height:1.5}
.rn-anchor{position:relative}
body.notes-on .rn-anchor{outline:2px dashed transparent;outline-offset:4px;transition:outline-color .2s}
body.notes-on .rn-anchor.rn-hot{outline-color:var(--r-gold)}
/* Left by default. The drawer opens over the right 460px, and six of the
   fourteen pins used to sit under it, so half the review was unreachable
   while you were reading the review. data-note-right opts back out. */
.rn-pins{position:absolute;top:-14px;left:-14px;display:flex;gap:6px;z-index:60}
.rn-pins.right{left:auto;right:-14px}
.rn-pin{display:none;width:34px;height:34px;border-radius:50% 50% 50% 50%/58% 58% 42% 42%;border:2px solid #fff;background:var(--r-aub);color:#fff;font:700 14px/1 "Fredoka",system-ui,sans-serif;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.3);padding:0;align-items:center;justify-content:center}
.rn-pin.first{background:var(--r-rust)}
.rn-pin:focus-visible{outline:3px solid var(--r-gold);outline-offset:2px}
body.notes-on .rn-pin{display:inline-flex;animation:rnpop .3s ease-out both}
@keyframes rnpop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

/* Toggle pill */
.rn-toggle{position:fixed;left:18px;bottom:18px;z-index:200;display:flex;align-items:center;gap:12px;background:var(--r-aub);color:#fff;border:0;border-radius:999px;padding:10px 18px 10px 12px;font:600 15px/1.2 "Fredoka",system-ui,sans-serif;cursor:pointer;box-shadow:0 8px 24px rgba(42,31,37,.35)}
.rn-toggle .egg{width:22px;height:28px;flex:none}
.rn-toggle .sw{width:38px;height:22px;border-radius:999px;background:rgba(255,255,255,.25);position:relative;flex:none}
.rn-toggle .sw:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s}
.rn-toggle[aria-pressed="true"] .sw{background:var(--r-gold)}
.rn-toggle[aria-pressed="true"] .sw:after{left:19px}
.rn-toggle .ct{opacity:.8;font-weight:500}
.rn-toggle:focus-visible{outline:3px solid var(--r-gold);outline-offset:3px}
.rn-toggle.nudge{animation:rnnudge 2.4s ease-in-out 1.2s 2}
@keyframes rnnudge{0%,100%{transform:none}10%{transform:translateY(-6px)}20%{transform:none}30%{transform:translateY(-3px)}40%{transform:none}}

/* Ribbon */
.rn-ribbon{display:none;position:sticky;top:0;z-index:150;background:var(--r-cream);color:var(--r-ink);border-bottom:1px solid var(--r-line);font:500 14px/1.4 "Fredoka",system-ui,sans-serif;padding:9px 16px;text-align:center}
body.notes-on .rn-ribbon{display:block}
.rn-ribbon a{color:var(--r-rust);font-weight:600}
.rn-ribbon b{font-weight:600}

/* Drawer */
.rn-drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--r-cream);color:var(--r-ink);z-index:300;box-shadow:-12px 0 40px rgba(42,31,37,.25);transform:translateX(105%);transition:transform .28s ease;display:flex;flex-direction:column;font-family:"IBM Plex Sans",system-ui,sans-serif}
.rn-drawer.open{transform:none}
.rn-dhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;border-bottom:1px solid var(--r-line);background:#fff}
.rn-brand{display:flex;align-items:center;gap:11px;font:700 18px/1 "Fredoka",system-ui,sans-serif;color:var(--r-aub)}
.rn-logo{height:26px;width:auto;flex:none;display:block}
.rn-brandtxt{display:block}
.rn-brand .egg{width:20px;height:26px}
.rn-brand small{font:500 13px/1 "Fredoka",system-ui,sans-serif;color:#6b5a62}
.rn-x{background:none;border:0;font-size:28px;line-height:1;color:var(--r-aub);cursor:pointer;padding:4px 8px}
.rn-dbody{overflow:auto;padding:20px 22px 40px;flex:1}
.rn-back{background:none;border:0;color:var(--r-rust);font:600 14px/1 "Fredoka",system-ui,sans-serif;cursor:pointer;padding:0 0 14px}
.rn-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.rn-tag{font:600 12px/1 "Fredoka",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:#efe5d6;color:var(--r-ink)}
.rn-tag.first{background:var(--r-rust);color:#fff}
.rn-tag.next{background:var(--r-aub);color:#fff}
.rn-card h3{font:600 23px/1.25 "Fraunces",Georgia,serif;color:var(--r-aub);margin:4px 0 16px}
.rn-step{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--r-line);font-size:15px;line-height:1.6}
.rn-step b{font:700 12px/1.6 "Fredoka",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--r-rust)}
.rn-step.res{background:#fff;border:1px solid var(--r-line);border-radius:10px;padding:12px;margin-top:6px}
.rn-step p{margin:0}
.rn-serp{margin:14px 0 4px;display:grid;gap:10px}
.rn-serp .lbl{font:700 12px/1 "Fredoka",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#6b5a62;margin-bottom:6px}
.rn-g{background:#fff;border:1px solid #e3e3e3;border-radius:10px;padding:12px 14px;font-family:Arial,sans-serif}
.rn-g .u{font-size:12px;color:#4d5156}
.rn-g .t{font-size:18px;color:#1a0dab;line-height:1.3;margin:2px 0}
.rn-g .d{font-size:13px;color:#4d5156;line-height:1.5}
.rn-g.now{opacity:.92}
.rn-list{list-style:none;margin:0;padding:0}
.rn-list li{margin:0 0 8px}
.rn-list button{width:100%;text-align:left;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;background:#fff;border:1px solid var(--r-line);border-radius:10px;padding:12px;cursor:pointer;font:500 15px/1.4 "IBM Plex Sans",system-ui,sans-serif;color:var(--r-ink)}
.rn-list button:hover{border-color:var(--r-gold)}
.rn-list .n{width:30px;height:30px;border-radius:50%;background:var(--r-aub);color:#fff;display:grid;place-items:center;font:700 13px/1 "Fredoka",system-ui,sans-serif}
.rn-list .n.first{background:var(--r-rust)}
.rn-list small{display:block;color:#6b5a62;font-size:12.5px;margin-top:3px}
.rn-h{font:600 13px/1 "Fredoka",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#6b5a62;margin:18px 0 10px}
.rn-intro{font-size:15px;line-height:1.6;margin:0 0 6px}
.rn-full{display:block;margin-top:22px;text-align:center;background:var(--r-aub);color:#fff;text-decoration:none;border-radius:999px;padding:12px;font:600 15px/1 "Fredoka",system-ui,sans-serif}
.rn-stamp{font:500 12px/1 "Fredoka",system-ui,sans-serif;color:#6b5a62;text-align:center;margin-top:18px}
.rn-scrim{position:fixed;inset:0;background:rgba(42,31,37,.25);z-index:250;display:none}
.rn-scrim.open{display:block}
@media (max-width:640px){
  .rn-drawer{top:auto;height:82vh;width:100%;border-radius:18px 18px 0 0;transform:translateY(105%)}
  .rn-drawer.open{transform:none}
  .rn-toggle{left:12px;bottom:12px;padding:9px 14px 9px 10px;font-size:14px}
  .rn-pins{left:-6px;top:-10px}
  .rn-pins.right{right:-6px;left:auto}
}
@media print{.rn-toggle,.rn-drawer,.rn-scrim,.rn-ribbon,.rn-pins{display:none !important}}
/* Containers that clip their children get their pins inside the edge */
.home-hero .rn-pins{top:auto;bottom:110px;left:24px;right:auto}
.slider .rn-pins{top:10px;left:10px;right:auto}

/* Roost wordmark lockup: Fredoka Bold, first o pulled into the second. Lockups only, never body text. */
.rw{font-family:"Fredoka",system-ui,sans-serif;font-weight:700;letter-spacing:0;font-style:normal}
.rw .oo{letter-spacing:-.13em}

.rn-ribbon{display:none;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
body.notes-on .rn-ribbon{display:flex}
.rn-steps{display:flex;gap:6px}
.rn-steps a{text-decoration:none;background:#fff;border:1px solid var(--r-line);border-radius:999px;padding:5px 11px;color:var(--r-aub)}
.rn-steps a.acc{background:var(--r-gold);border-color:var(--r-gold);color:#2a1f25}
.rn-full.acc{background:var(--r-gold);color:#2a1f25;margin-top:10px}

/* Keep the replica clear of the ribbon: push the header down and give the menu eggs room */
body.notes-on .site-head.over{top:var(--rn-h,48px)}
body.notes-on .site-head .head-in{padding-top:34px}
@media (max-width:900px){
  .site-head nav.rn-anchor{position:static}
  .site-head nav .rn-pins{top:auto;left:14px;bottom:8px;right:auto}
}