/* ============ rollingpapersco — global ============ */
@font-face{font-family:'Eina';font-weight:300;font-style:normal;font-display:swap;src:url(/assets/fonts/Eina01-Light.woff2) format('woff2');}
@font-face{font-family:'Eina';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/Eina01-Regular.woff2) format('woff2');}
@font-face{font-family:'Eina';font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/Eina01-SemiBold.woff2) format('woff2');}
@font-face{font-family:'Eina';font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/Eina01-Bold.woff2) format('woff2');}

:root{
  --white:#f4f3f0;
  --ink:#131312;
  --grey:#55524a;
  --line:#e6e4de;
  --deck:#f15a29;
  --safelight:#d6362b;
  --rail-glass:rgba(19,19,18,.80);
  --rail-glass-border:rgba(255,255,255,.16);
  --rail-glass-hi:rgba(255,255,255,.18);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--white);color:var(--ink);
  font-family:'Eina',sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--ink);color:var(--white);}
a{color:inherit;}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:3px;}
.meta{font-size:12px;color:var(--grey);letter-spacing:.02em;}

/* film grain */
body::after{
  content:"";position:fixed;inset:-50%;z-index:95;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-6%,4%)}40%{transform:translate(4%,-5%)}60%{transform:translate(-3%,-4%)}80%{transform:translate(5%,3%)}}

/* page fade between routes */
body{opacity:0;transition:opacity .4s ease;}
body.ready{opacity:1;}
body.leaving{opacity:0;}

/* ============ corners ============ */
/* corner-tr (about/x/ig/be) is retired — the rail carries all of that now.
   corner-tl is back: with the rail moved off the left edge entirely (it's
   right-anchored, turn 5a), there's no collision, and every page wants a
   persistent brand mark + place/time even while the rail sits closed.
   Same three-line shape it had before the rail existed (wordmark, "creative
   studio", clock+lagos) — just "rpco" now instead of the full wordmark,
   matching the short form used everywhere else in the rail.
   mix-blend-mode:difference against a white source reads dark on light
   grounds and light on dark ones automatically, so it needs no per-page
   color — except contact/index.html, whose flat #0a0a0a background makes
   the difference result read as a near-white that's easy to confuse with
   actual contrast; that page overrides to a plain light color instead. */
.corner-tl{
  position:fixed;top:22px;left:clamp(22px,4vw,56px);z-index:60;
  font-size:13px;line-height:1.5;
  mix-blend-mode:difference;color:#fff;
  -webkit-transform:translateZ(0);transform:translateZ(0);
  will-change:transform;-webkit-backface-visibility:hidden;
}
.corner-tl b{font-weight:700;font-size:15px;letter-spacing:-.045em;display:block;}
.corner-tl a{text-decoration:none;color:inherit;}
.corner-tl .clockline{display:block;font-size:12px;opacity:.6;margin-top:2px;}

/* ============ rail nav (was: bottom dock) — turn 5a ============
   One <nav class="dock"> per page, identical everywhere (check.py verifies).
   Desktop: a right-hand rail, vertically centered and sized to its content
   (not full-height — several pages already use the full height of both
   edges for their own controls, e.g. studio's caption on the left and its
   next/nav buttons on the right, so a floor-to-ceiling rail on either edge
   collided with them). 72px closed / 280px open, glass over ink (never the
   mid grey — see the contrast note below). Always starts closed and never
   persists open across a navigation — see assets/js/global.js.
   Mobile: a bottom pill closed, a bottom sheet open. */
.dock{
  position:fixed;z-index:80;box-sizing:border-box;overflow:hidden;
  background:var(--rail-glass);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--rail-glass-border);
  box-shadow:0 18px 40px -18px rgba(19,19,18,.45), inset 0 1px 0 var(--rail-glass-hi);
  display:flex;flex-direction:column;
}
.rail-open-btn,.rail-close-btn,.rail-handle{background:none;border:none;padding:0;margin:0;cursor:pointer;color:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;font-family:inherit;}
.rail-open-btn:hover,.rail-close-btn:hover{background:rgba(255,255,255,.12);}
.rail-head{display:none;align-items:center;justify-content:space-between;gap:12px;}
.rail-brand{font-weight:700;font-size:17px;letter-spacing:-.04em;color:#f4f3f0;}
.rail-meta{display:none;font-size:11.5px;color:rgba(244,243,240,.72);line-height:1.5;margin-top:5px;}
.rail-rule{height:1px;background:rgba(255,255,255,.28);flex:0 0 auto;}
.rail-mobile-cta{display:none;}
.rail-mobile-brand{display:none;}
.rail-list{display:flex;flex-direction:column;gap:2px;width:100%;}
.rail-link{
  display:flex;align-items:center;gap:13px;text-decoration:none;
  color:rgba(244,243,240,.92);border-radius:100px;white-space:nowrap;
  font-size:14.5px;letter-spacing:-.015em;
  transition:background .25s,color .25s;
}
.rail-link svg{flex:0 0 auto;}
.rail-link.on{background:#f4f3f0;color:var(--ink);font-weight:600;}
.rail-label{opacity:0;transition:opacity .18s linear;}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;width:100%;gap:12px;}
/* book is always a plain circle around the icon, never a labelled pill — in
   every state, desktop or mobile, open or closed. */
.rail-book{
  background:var(--deck);color:var(--ink);font-weight:600;
  width:48px;height:48px;padding:0;justify-content:center;border-radius:50%;
  flex:0 0 auto;align-self:center;
}
.rail-book .rail-label{display:none;}
.rail-book.on{background:#f4f3f0;color:var(--ink);}
.rail-book:hover{background:#f5a838;}
.rail-book.on:hover{background:#f4f3f0;}
.rail-wordmark-vert{
  display:none;font-weight:700;font-size:13px;letter-spacing:-.045em;
  color:rgba(255,255,255,.92);writing-mode:vertical-rl;transform:rotate(270deg);
  margin:0 auto;
}
.rail-contact{display:none;font-size:11px;color:rgba(244,243,240,.72);line-height:1.6;}
.rail-contact a{text-decoration:none;color:inherit;}
.rail-rule--foot{display:none;}
.rail-social{display:none;gap:6px;flex-wrap:wrap;}
.rail-social a{
  border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.92);text-decoration:none;
}
/* ---- desktop (>640px): the rail proper ---- */
@media(min-width:641px){
  .dock{
    top:50%;right:24px;transform:translateY(-50%);width:72px;padding:16px 0;align-items:center;
    border-radius:100px;
    transition:width .52s cubic-bezier(.22,.61,.36,1),border-radius .52s cubic-bezier(.22,.61,.36,1),padding .52s cubic-bezier(.22,.61,.36,1);
  }
  .dock.is-open{width:280px;border-radius:28px;padding:20px 22px;align-items:stretch;}
  .rail-open-btn{width:40px;height:40px;border-radius:50%;flex:0 0 auto;}
  .dock.is-open .rail-open-btn{display:none;}
  .dock:not(.is-open) .rail-open-btn{display:flex;}
  .rail-handle{display:none;}
  .dock.is-open .rail-head{display:flex;}
  .dock.is-open .rail-meta{display:block;}
  .rail-rule{width:26px;margin:14px 0;}
  .dock.is-open .rail-rule{width:auto;margin:18px 0;}
  .dock:not(.is-open) .rail-list{align-items:center;}
  .dock:not(.is-open) .rail-link{width:44px;height:44px;padding:0;justify-content:center;}
  /* the label is invisible while closed but would still take up width and
     shove the icon off-centre — out of flow until the rail opens */
  .dock:not(.is-open) .rail-label{position:absolute;pointer-events:none;}
  /* the open rail is ~710px of content; never let it run off a laptop screen */
  .dock.is-open{max-height:calc(100vh - 32px);overflow-y:auto;scrollbar-width:none;}
  .dock.is-open::-webkit-scrollbar{display:none;}
  .dock.is-open .rail-link{padding:11px 14px;}
  .dock.is-open .rail-label{opacity:1;transition-delay:.34s;}
  .dock:not(.is-open) .rail-wordmark-vert{display:block;}
  .dock.is-open .rail-contact{display:block;}
  .dock.is-open .rail-rule--foot{display:block;}
  .dock.is-open .rail-social{display:flex;}
  .rail-social a{width:38px;height:38px;}
}
/* short laptop screens (1366×768, 1280×800 minus browser chrome): tighten the
   open rail so all of it fits without scrolling */
@media(min-width:641px) and (max-height:780px){
  .dock.is-open{padding:12px 22px;}
  .dock.is-open .rail-rule{margin:8px 0;}
  .dock.is-open .rail-link{padding:7px 14px;}
  .dock.is-open .rail-foot{gap:10px;}
  .dock.is-open .rail-social{gap:4px;flex-wrap:nowrap;}
  .dock.is-open .rail-social a{width:30px;height:30px;}
  .dock.is-open .rail-social svg{width:14px;height:14px;}
}
@media(min-width:641px) and (max-height:540px){
  .dock:not(.is-open) .rail-wordmark-vert{display:none;}
}

/* ---- mobile (≤640px): pill closed, sheet open ---- */
@media(max-width:640px){
  .dock{
    left:12px;right:12px;bottom:12px;top:auto;width:auto;
    flex-direction:row;align-items:center;padding:7px;border-radius:100px;gap:8px;
  }
  .rail-open-btn{display:flex;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.18);flex:0 0 auto;}
  .rail-mobile-cta{display:flex;align-items:baseline;}
  .rail-mobile-label{font-size:14px;color:rgba(244,243,240,.92);letter-spacing:-.01em;}
  .rail-list,.rail-head,.rail-meta,.rail-handle{display:none;}
  .rail-rule{display:none;}
  .rail-foot{margin-top:0;margin-left:auto;flex-direction:row;align-items:center;gap:10px;width:auto;}
  .rail-foot .rail-mobile-brand{display:inline-block;font-weight:700;font-size:14.5px;letter-spacing:-.04em;color:#f4f3f0;}
  .rail-wordmark-vert,.rail-contact,.rail-rule--foot,.rail-social{display:none;}

  .dock.is-open{
    left:12px;right:12px;bottom:12px;top:150px;
    flex-direction:column;align-items:stretch;padding:22px 20px;border-radius:28px;
    gap:0;
  }
  .dock.is-open .rail-open-btn,.dock.is-open .rail-mobile-cta,.dock.is-open .rail-mobile-brand{display:none;}
  .dock.is-open .rail-handle{display:block;width:42px;height:4px;border-radius:100px;background:rgba(255,255,255,.4);margin:0 auto 18px;}
  /* a visible, tappable close control — the handle bar alone wasn't obvious enough */
  .dock.is-open .rail-head{display:flex;position:absolute;top:14px;right:14px;left:auto;}
  .dock.is-open .rail-head .rail-brand{display:none;}
  .dock.is-open .rail-close-btn{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.14);}
  .dock.is-open .rail-list{display:flex;}
  .dock.is-open .rail-link{padding:13px 16px;font-size:16px;}
  .dock.is-open .rail-label{opacity:1;transition-delay:0s;}
  .dock.is-open .rail-foot{margin-top:auto;margin-left:0;flex-direction:column;gap:16px;}
  .dock.is-open .rail-wordmark-vert{display:none;}
  .dock.is-open .rail-contact{display:block;text-align:center;}
  .dock.is-open .rail-rule--foot{display:block;}
  .dock.is-open .rail-social{display:flex;justify-content:center;}
  .rail-social a{width:46px;height:46px;}
}

@media(prefers-reduced-motion:reduce){
  body::after{animation:none;}
  body{transition:none;opacity:1;}
  .dock,.rail-label{transition:none;}
}

/* ============ INTRO LOADER ============ */
#intro{
  position:fixed;inset:0;z-index:1000;background:var(--white);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;
  transition:opacity .7s ease,visibility 0s .7s;
}
#intro.gone{opacity:0;visibility:hidden;}
#intro .wm{
  font-weight:700;font-size:clamp(26px,6vw,52px);letter-spacing:-.03em;color:var(--ink);
  position:relative;overflow:hidden;
}
#intro .wm i{
  font-style:normal;color:var(--grey);opacity:.28;
}
#intro .wm b{
  font-weight:700;color:var(--ink);
  clip-path:inset(0 calc(100% - var(--p,0%)) 0 0);
  position:absolute;left:0;top:0;white-space:nowrap;
}
#intro .barline{width:min(200px,52vw);height:2px;background:var(--line);border-radius:2px;overflow:hidden;}
#intro .barline span{display:block;height:100%;width:0;background:var(--ink);}
@media(prefers-reduced-motion:reduce){#intro{transition:none;}}