/* =====================================================================
   Studio Duo design system  ·  /ds.css
   One file every page loads first. Page files (styles.css, case.css...)
   only add layout for their own sections and must use these tokens.

   Rules of thumb
   - Colour: neutrals come from --bg/--fg/--mut/--dim/--line. Orange
     (--accent) is the only brand colour: primary buttons, active states,
     bullets, the availability meter. Green is reserved for "new/live".
   - Type: Geist for titles, body in Geist, Geist Mono / DM Mono for
     labels and UI, Instrument Serif only for display moments.
   - Spacing: 4px steps (--s1 ... --s9). Sections get --sec above and below.
   - Light mode is the default (html.light). Every colour must be a token
     so dark mode keeps working.
   - Shapes: buttons are flat on the left, round on the right.
   ===================================================================== */

/* ============ 1. TOKENS ============ */
:root {
  --bg: #141414;
  --fg: #ffffff;
  --mut: rgba(255, 255, 255, 0.68);
  --dim: rgba(255, 255, 255, 0.5);
  --line: #202020;
  --chip: #202020;
  --chipb: #2b2b2b;
  --ghost: rgba(255, 255, 255, 0.08);
  --card: #1c1c1c;
  --cardb: #262626;

  --accent: #ff5a28;
  --green: #63c14d;
  --yellow: #e5c33f;
  --blue: #0d99ff;
  --pink: #e5508a;
  --violet: #6e6bf5;

  --title: 'Geist', system-ui, -apple-system, sans-serif;
  --body: 'Aeonik', 'Geist', system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --dm: 'DM Mono', ui-monospace, Menlo, monospace;
  --hand: 'Gaegu', 'Comic Sans MS', cursive;
  --serif: 'Instrument Serif', Georgia, serif;

  /* type scale (px / line-height). Body copy is 16/24; we never go below 11. */
  --fs-xs: 11px;   /* mono labels, captions, legal */
  --fs-s: 13px;    /* buttons, small UI */
  --fs-m: 15px;    /* secondary text, nav */
  --fs-b: 16px;    /* body and section titles */
  --fs-l: 24px;    /* page intro / hero sentence */
  --fs-xl: 40px;   /* case study titles */
  --fs-d: 64px;    /* display: serif numbers and big moments only */

  /* spacing: 4px base. Use these for gaps and padding */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* radius */
  --r-s: 4px;    /* chips */
  --r-m: 9px;    /* pills, header capsule */
  --r-l: 14px;   /* cards, media */
  --r-xl: 20.8px;/* app-icon tiles */

  /* layout: reading column, wide canvas, and the four guide lines */
  --w-col: 594px;
  --w-wide: 1240px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sec: 32px; /* half the space between two sections: every section gets this above and below */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}
html.light {
  --bg: #f3f2ee;
  --fg: #141414;
  --mut: rgba(20, 20, 20, 0.68);
  --dim: rgba(20, 20, 20, 0.55);
  --line: #e2e0d9;
  --chip: #e9e7e1;
  --chipb: #dad7cf;
  --ghost: rgba(20, 20, 20, 0.07);
  --card: #ffffff;
  --cardb: #e4e2db;
  color-scheme: light;
}

/* ============ 2. BASE ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
body { -ms-overflow-style: none; }
body {
  margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background-color 0.35s, color 0.35s;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--accent); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============ 3. LAYOUT ============ */
/* frame + the four column lines */
.page { position: relative; }
.lines { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.lines i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); transition: background-color 0.35s; }
.lines i:nth-child(1) { left: calc(50% - 620px); }
.lines i:nth-child(2) { left: calc(50% - 357px); }
.lines i:nth-child(3) { left: calc(50% + 357px); }
.lines i:nth-child(4) { left: calc(50% + 620px); }
.page > header, .page > main, .page > footer { position: relative; z-index: 1; }

.col { max-width: var(--w-col); margin-inline: auto; padding-inline: 16px; }
.wide { max-width: var(--w-wide); margin-inline: auto; }
/* ============ 4. TYPE ============ */
.h { margin: 0; font-family: var(--title); font-weight: 400; font-size: 16px; line-height: 20px; letter-spacing: -0.32px; color: var(--fg); }
.p { margin: 17px 0 0; font-size: 16px; line-height: 24px; color: var(--mut); }
.rule { height: 1px; border: 0; margin: 0; background: var(--line); }
.chip { display: inline-block; padding: 3px 5px; border-radius: 4px; background: var(--chip); border: 1px solid var(--chipb); font-family: var(--dm); font-size: 12px; line-height: 14px; color: var(--fg); vertical-align: 2px; white-space: nowrap; }

/* ============ 5. COMPONENTS ============ */
/* buttons: .btn (accent, primary), .btn.alt (ghost, secondary), .pbtn (small UI button in the header) */
.btns { display: flex; flex-wrap: wrap; gap: 23px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 10px 10px 10px 12px;
  border-radius: 0 32px 32px 0; background: var(--accent); color: #fff; text-decoration: none;
  font-family: var(--mono); font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: -0.65px; text-transform: uppercase;
}
.btn svg { width: 14px; height: 14px; flex: none; transition: transform 0.25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn.alt { background: var(--ghost); color: var(--fg); }

.pbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border-radius: 6px;
  border: 1px solid var(--chipb); background: var(--chip); color: var(--mut);
  font-family: var(--body); font-size: 13px; letter-spacing: 0; cursor: pointer; text-decoration: none; transition: color 0.2s;
}
.pbtn svg { width: 14px; height: 14px; }
.pbtn:hover { color: var(--fg); }
.pbtn.snd { width: 30px; padding: 0; justify-content: center; }
.pbtn.snd .snd-x { display: none; }
.pbtn.snd.off .snd-w { display: none; }
.pbtn.snd.off .snd-x { display: inline; }


/* section label: mono, uppercase, dim, with an optional bold part ("OUR WORKS ++") */
.eyebrow { margin: 0; font-family: var(--mono); font-size: 14px; letter-spacing: -0.5px; text-transform: uppercase; color: var(--dim); }
.eyebrow b { font-weight: 500; color: var(--fg); }
/* big title for inner pages (case studies, services) */
.title { margin: 0; font-family: var(--title); font-weight: 400; font-size: var(--fs-xl); line-height: 1.1; letter-spacing: -1.4px; color: var(--fg); text-wrap: balance; }
.lede { margin: 0; font-size: 18px; line-height: 28px; color: var(--mut); text-wrap: pretty; }
.serif { font-family: var(--serif); font-weight: 400; }
.mono { font-family: var(--dm); }

/* text link with an arrow that nudges on hover */
.lnk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-m); color: var(--fg); text-decoration: underline; text-decoration-color: var(--chipb); text-underline-offset: 4px; transition: text-decoration-color 0.2s; }
.lnk:hover { text-decoration-color: currentColor; }
.lnk svg { width: 13px; height: 13px; transition: transform 0.25s var(--ease); }
.lnk:hover svg { transform: translate(2px, -2px); }

/* tag list: "web design + web development + branding" */
.tags { display: flex; flex-wrap: wrap; gap: 6px 10px; font-family: var(--mono); font-size: 13px; letter-spacing: -0.4px; text-transform: uppercase; color: var(--mut); }
.tags span[aria-hidden] { color: var(--dim); }

/* card + media frame */
.card { background: var(--card); border: 1px solid var(--cardb); border-radius: var(--r-l); }
.media { position: relative; overflow: hidden; border-radius: var(--r-l); background: var(--chip); box-shadow: 0 0 0 1px var(--cardb); }
.media img, .media video { width: 100%; height: auto; }

/* key / value facts: client, role, year... */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 24px; margin: 0; }
.facts div { min-width: 0; }
.facts dt { font-family: var(--dm); font-size: var(--fs-xs); letter-spacing: 0.4px; text-transform: uppercase; color: var(--dim); }
.facts dd { margin: 6px 0 0; font-size: var(--fs-m); line-height: 21px; color: var(--fg); }

/* long-form text (case studies, articles): headings, lists, quotes, images */
.prose { font-size: var(--fs-b); line-height: 26px; color: var(--mut); }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 16px; }
.prose h2, .prose h3, .prose h4 { font-family: var(--title); font-weight: 500; color: var(--fg); letter-spacing: -0.3px; }
.prose h2 { font-size: 22px; line-height: 28px; }
.prose h3 { font-size: 19px; line-height: 26px; }
.prose h4 { font-size: 16px; line-height: 22px; }
.prose > h2, .prose > h3, .prose > h4 { margin-top: 44px; }
.prose > h2 + *, .prose > h3 + *, .prose > h4 + * { margin-top: 10px; }
.prose b, .prose strong { font-weight: 500; color: var(--fg); }
.prose a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--chipb); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { display: flex; flex-direction: column; gap: 10px; padding-left: 20px; }
.prose ul { list-style: none; padding-left: 18px; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: ''; position: absolute; left: -16px; top: 11px; width: 5px; height: 5px; border-radius: 1.5px; background: var(--accent); }
.prose ol { list-style: decimal; }
.prose ol > li::marker { font-family: var(--dm); font-size: 13px; color: var(--dim); }
.prose li ul, .prose li ol { margin-top: 8px; }
.prose li ul > li::before { background: var(--dim); }
.prose blockquote { margin-inline: 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--accent); font-family: var(--serif); font-size: 24px; line-height: 32px; color: var(--fg); }
.prose figure { margin-inline: 0; }
.prose figcaption { margin-top: 8px; font-family: var(--dm); font-size: var(--fs-xs); letter-spacing: 0.3px; color: var(--dim); }
.prose hr { height: 1px; border: 0; background: var(--line); }
.prose code { font-family: var(--dm); font-size: 0.9em; padding: 1px 4px; border-radius: 4px; background: var(--chip); }

/* ============ 6. EFFECTS ============ */
/* film grain on photos (the hills photos already have grain built in) */
.grain { position: relative; }
.grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--noise); opacity: 0.32; mix-blend-mode: overlay; z-index: 1; }

/* scroll reveal, added by main.js to blocks below the fold */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ============ 7. HEADER ============ */
.hdr { display: grid; grid-template-columns: 263px minmax(0, 1fr) 263px; align-items: center; height: 87px; max-width: 1240px; margin-inline: auto; }
.hdr-ask { justify-self: center; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--mut); text-decoration: none; transition: color 0.2s; }
.hdr-ask:hover { color: var(--fg); }
.hdr-ask svg { width: 15px; height: 15px; }
.hdr-pill { justify-self: center; display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 9px; background: var(--card); border: 1px solid var(--cardb); }
.hdr-me { display: flex; align-items: center; gap: 9px; padding-right: 12px; font-family: var(--title); font-size: 15px; color: var(--fg); text-decoration: none; }
.hdr-me img { width: 26px; height: 26px; }
/* the logo: a white tile in dark mode (images/sd-mark.svg), the dark tile in light mode (images/sd-mark-dark.svg) */
html.light img[src="/images/sd-mark.svg"] { content: url(/images/sd-mark-dark.svg); }
html.light .foot-brand img, html.light .chat-av img { content: normal; } /* the footer stays dark; the chat avatar inverts its own */
.hdr-visit { justify-self: center; display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--mut); }
.hdr-nat { font-family: var(--body); font-size: 13px; line-height: 14px; letter-spacing: 0; }

/* NEW tag: solid green, white text, white square */
.newtag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 6px; background: var(--green); font-family: var(--dm); font-size: 12px; line-height: 1; letter-spacing: -0.24px; color: #fff; box-shadow: 0 4px 14px -4px rgba(99, 193, 77, 0.6); }
.newtag i { width: 7px; height: 7px; border-radius: 2px; background: #fff; }

/* ============ 8. FOOTER ============ */
.foot { min-height: 587px; overflow: hidden; color: #fff; background: #3a4040; }
.foot-bg { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 100%; }
.foot-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 20, 0.55), rgba(20, 20, 20, 0) 70%); }
.foot-in { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 56px; max-width: var(--w-col); margin: 0 auto; padding: 77px 16px 0; }
.foot-in > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.foot-brand { display: flex; align-items: center; gap: 12px; font-family: var(--title); font-weight: 600; font-size: 22px; letter-spacing: -0.5px; text-decoration: none; }
.foot-brand img { width: 37px; height: 37px; border-radius: 9px; }
.foot-links { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 24px; }
.foot-links a { font-size: 15px; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-r { width: auto; }
.foot-r p { margin: 0; font-size: 15px; }
.foot-mail { display: inline-block; margin-top: 10px; font-family: var(--title); font-size: 38px; line-height: 44px; letter-spacing: -1px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.foot-soc { display: flex; gap: 6px; margin-top: 36px; }
.foot-soc a { width: 64px; height: 64px; border-radius: 50%; background: rgba(34, 34, 34, 0.85); display: flex; align-items: center; justify-content: center; transition: background-color 0.2s, transform 0.25s var(--ease); }
.foot-soc a:hover { background: var(--accent); transform: translateY(-2px); }
.foot-soc svg { width: 22px; height: 22px; }
.foot-copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: 22px; display: flex; justify-content: space-between; gap: 12px; max-width: var(--w-col); margin: 0 auto; padding: 0 16px; font-family: var(--dm); font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }

/* status pills + discipline icons (work list, case studies) */
.lg-ic { display: inline-block; flex: none; width: 10px; height: 10px; color: var(--dim); }
.lg-ic svg { display: block; width: 100%; height: 100%; }
.lg-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 11px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase; white-space: nowrap; }
.lg-pill.shipped { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--chipb); }
.lg-pill.sale { background: #d9e6ff; color: #29468a; }
.lg-pill.tpl { background: #ffe1d6; color: #8a3414; }
/* raised: what a client has raised, shown instead of Shipped; the stand-out pill */
.lg-pill.raised { background: #d6f5d0; color: #2c6a22; }
.lg-pill.wip { background: #f6d34a; color: #3a2f00; }
.lg-pill.wip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: lg-blink 1.6s ease-in-out infinite; }
@keyframes lg-blink { 50% { opacity: 0.3; } }
/* the key that explains the discipline icons */
.log-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 18px 0 0; font-size: 12px; color: var(--dim); }
.log-key span { display: inline-flex; align-items: center; gap: 6px; }

/* footers drawn over the hills photo don't need extra grain */
.foot.grain::after { display: none; }

/* ============ 9. RESPONSIVE ============ */
@media (max-width: 1100px) {
  .lines i:nth-child(2), .lines i:nth-child(3) { display: none; }
  .hdr { grid-template-columns: auto 1fr auto; gap: 12px; padding-inline: 16px; }
  .hdr-pill { justify-self: start; order: -1; }
  .hdr-ask { justify-self: start; height: 40px; padding: 0 12px; border-radius: 9px; background: var(--card); border: 1px solid var(--cardb); font-size: 14px; }
  .hdr-visit { justify-self: end; }
}
@media (max-width: 640px) {
  :root { --sec: 24px; --fs-xl: 30px; }
  .lines { display: none; }
  .btns { gap: 12px; }
  .hdr-vf { display: none; }
  .hdr-ask-t { display: none; }
  .hdr-pill a.pbtn { display: none; }
  .hdr-me { white-space: nowrap; padding-right: 6px; font-size: 14px; }
  .hdr-ask { width: 40px; padding: 0; justify-content: center; }
  .hdr-ask svg { width: 17px; height: 17px; }
  .foot { min-height: 0; padding-bottom: 200px; }
  .foot-in { padding-top: 56px; gap: 40px; }
  .foot-in > div:first-child { flex-direction: column; align-items: flex-start; gap: 20px; }
  .foot-links { gap: 12px 20px; }
  .foot-r { width: auto; }
  .foot-mail { font-size: 27px; line-height: 34px; word-break: break-all; }
  .foot-copy { position: relative; bottom: auto; margin-top: 48px; flex-direction: column; gap: 6px; }
  .prose blockquote { font-size: 21px; line-height: 28px; }
}
@media (max-width: 420px) {
  .hdr-nat { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* service banner: a slim sticky bar at the top of every page except the service page itself (built in site.js) */
.sbar { --sb: #ff6a3d; --sb-hi: #ff8a62; position: sticky; top: 0; z-index: 60; display: grid; grid-template-rows: 0fr; background: linear-gradient(rgba(255, 90, 40, 0.16), rgba(255, 90, 40, 0.16)), color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); box-shadow: inset 0 -1px 0 rgba(255, 90, 40, 0.35); transition: grid-template-rows 0.45s var(--ease); }
.sbar.on { grid-template-rows: 1fr; }
.sbar-in { min-height: 0; overflow: hidden; }
.sbar-row { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: 1240px; height: 40px; margin-inline: auto; padding: 0 48px 0 16px; position: relative; }
.sbar a.sbar-link { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; line-height: 20px; color: var(--sb); text-decoration: none; transition: color 0.2s; }
.sbar a.sbar-link:hover { color: var(--sb-hi); }
.sbar-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(255, 90, 40, 0.5); animation: sbar-ping 2.2s infinite; }
@keyframes sbar-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 40, 0.5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(255, 90, 40, 0); } }
.sbar-tag { flex: none; padding: 2px 7px; border-radius: 0 10px 10px 0; background: var(--accent); font-family: var(--dm); font-size: 11px; line-height: 15px; letter-spacing: 0.4px; text-transform: uppercase; color: #fff; }
.sbar-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sbar-t b { font-weight: 500; color: var(--sb-hi); }
.sbar-go { flex: none; display: inline-flex; align-items: center; gap: 5px; font-family: var(--dm); font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--sb-hi); }
.sbar-go svg { width: 12px; height: 12px; transition: transform 0.25s var(--ease); }
.sbar a.sbar-link:hover .sbar-go svg { transform: translateX(3px); }
.sbar-x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--sb); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.sbar-x:hover { background: rgba(255, 90, 40, 0.16); color: var(--sb-hi); }
html.light .sbar { --sb: #c93d12; --sb-hi: #a8300c; background: linear-gradient(rgba(255, 90, 40, 0.13), rgba(255, 90, 40, 0.13)), color-mix(in srgb, var(--bg) 86%, transparent); }
.sbar-x svg { width: 12px; height: 12px; }
.sbar-short { display: none; }
@media (max-width: 640px) {
  .sbar-row { justify-content: flex-start; gap: 10px; padding-right: 44px; }
  .sbar-long, .sbar-go-t { display: none; }
  .sbar-short { display: inline; }
  .sbar a.sbar-link { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .sbar { transition: none; } .sbar-dot { animation: none; } }

/* ---------- scroll rail (rail.js): page progress on the right edge ---------- */
.rail { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1280px) {
  .rail { display: block; position: fixed; z-index: 40; right: 0; top: 50%; width: 30px; height: min(340px, 46vh); transform: translateY(-50%); }
}
.rail::before { content: ''; position: absolute; right: 0; top: -60px; bottom: -60px; width: 230px; background: linear-gradient(90deg, transparent, var(--bg) 55%); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.rail.near::before { opacity: 0.92; }
.rail-t { position: absolute; right: 0; width: 7px; height: 1px; margin-top: -0.5px; background: var(--dim); opacity: 0.5; transform-origin: 100% 50%; transition: transform 0.18s var(--ease), opacity 0.2s; }
.rail-t.lm { width: 13px; opacity: 0.95; background: var(--mut); }
.rail-ind { position: absolute; right: 0; top: 0; width: 24px; height: 1.5px; margin-top: -0.75px; background: var(--fg); transform: translateY(var(--y, 0px)); }
.rail-now { position: absolute; right: 34px; top: 0; display: flex; gap: 8px; align-items: baseline; transform: translateY(calc(var(--y, 0px) - 50%)); font-family: var(--title); font-size: 12px; line-height: 14px; color: var(--fg); white-space: nowrap; pointer-events: none; transition: opacity 0.2s; }
.rail-now b { font-weight: 400; }
.rail-now span { font-family: var(--dm); font-size: 11px; color: var(--dim); }
.rail.near .rail-now { opacity: 0; }
.rail-l { position: absolute; right: 34px; top: 0; padding: 1px 0; border: 0; background: none; font-family: var(--title); font-size: 12px; line-height: 14px; color: var(--dim); white-space: nowrap; cursor: pointer;
  opacity: 0; transform: translate(10px, -50%); pointer-events: none; transition: opacity 0.2s, transform 0.3s var(--ease), color 0.15s; }
.rail-l.sub { right: 46px; font-size: 11px; }
.rail-l.sub::before { content: '└ '; opacity: 0.5; }
.rail.near .rail-l { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.rail-l:hover, .rail-l.cur { color: var(--fg); }
.rail-l.cur::after { content: ''; display: inline-block; width: 4px; height: 4px; margin-left: 7px; border-radius: 50%; background: var(--accent); vertical-align: 2px; }