/* The top bar of the house, one stylesheet for every screen that has it: the Office pages
   (designs/base.html) and the Office's masters (templates/admin/base_site.html) alike. Written
   on the tokens both sheets define — ink, paper, surface, rule, quiet, gold — so it reads the
   same under either. The house on the left in a serif, the person's desks as pills, their name
   as the way home. Restraint: hairlines, one accent, plenty of air. */
:root { --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif; --topbar: 76px; --wine: #7A1F2B; --wine-deep: #5E1520; --wine-on: #FFF4F2; --wine-soft: #F5E7E9; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 24px; min-height: var(--topbar); box-sizing: border-box;
  /* The pills sit on whole pixels by construction: 20 above, 36 of pill, 20 below is the 76 — no
     leftover for the centring to halve — and the rule under the bar is a shadow, so it takes no
     part in the layout. A pill's 1px border on a fractional edge paints as a smear wherever a CSS
     pixel is not a device pixel (Windows at 125%, any zoom), and read as the pills cut at the top. */
  background: var(--surface); border-bottom: 0; box-shadow: 0 1px 0 var(--rule);
  position: sticky; top: 0; z-index: 20;
  flex: 0 0 auto;                 /* inside the admin's column of flex, never squeezed to nothing */
}
.topbar-left { display: flex; align-items: center; gap: 14px; }
/* Whatever the page's own links do. The admin underlines every link but a few of its own, with a
   selector weighted by an id and a class, so the bar's rules are said once more under the admin's
   wrapper — its id twice — to outweigh it without !important. */
.topbar a, .topbar summary, #container#container .topbar a, #container#container .topbar summary { text-decoration: none; }
/* Never `border-bottom: 0` here: it outranked the pills' own border and took the bottom edge off
   every one of them — the pills "cut at the base", on every screen, from the day this sheet was
   written until 2 October. A test holds the four sides now. */
.wordmark, .wordmark:link, .wordmark:visited, #container#container .wordmark:link, #container#container .wordmark:visited { color: var(--wine); }   /* House Burgundy (Vikrant, 5 Oct 2026) */
#container#container .nav-back:link, #container#container .nav-back:visited { color: var(--quiet); }
#container#container .nav-back:hover { color: var(--ink); }
#container#container .me-list a:link, #container#container .me-list a:visited { color: var(--ink); }
/* Whole pixels everywhere a pill is measured: a 1px border on a fractional edge vanishes at half
   zoom, which read on screen as the pills being cut at the base. */
.nav-back {
  display: inline-block; box-sizing: border-box; height: 36px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; line-height: 18px;
  color: var(--quiet); text-decoration: none; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap; transition: border-color .12s, color .12s;
}
.nav-back:hover { border-color: var(--ink); color: var(--ink); }
.wordmark { text-decoration: none; display: flex; flex-direction: column; }
/* The wordmark wraps — House of above Sant Ram's — each four points larger than before, on its own
   height, not the header row's (Vikrant, 5 Oct 2026). */
.wordmark-main {
  font-family: var(--serif); font-size: 1.78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1; display: flex; flex-direction: column; gap: 4px;
}
.wordmark-main em { font-style: normal; font-size: .5em; letter-spacing: .32em; color: var(--wine); opacity: .85; }   /* House of at half the name, tracked wide (Vikrant, 6 Oct 2026) */
.wordmark-main b { font-weight: 700; }
.wordmark-main { white-space: nowrap; }
.wordmark-sub { font-size: .72rem; color: var(--quiet); letter-spacing: .09em; text-transform: uppercase; }
.topbar-nav, .topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.topbar-nav { margin-left: auto; }
.topbar-right { margin-left: -8px; }       /* with the pill’s own 4px: 12px off the last desk, as it did */
.nav-back-chev { display: none; }
/* Home: a small round house beside Back, on every screen, back to the front door. */
.nav-home { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--rule); border-radius: 50%; color: var(--quiet); text-decoration: none; flex-shrink: 0; transition: border-color .12s, color .12s; }
.nav-home svg { width: 15px; height: 15px; }
.nav-home:hover { border-color: var(--ink); color: var(--ink); }
.nav-button {
  display: inline-block; box-sizing: border-box; height: 36px; padding: 8px 16px; border: 1px solid var(--wine); border-radius: 999px; line-height: 18px;
  color: var(--wine); text-decoration: none; font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; transition: background .12s, color .12s;
}
.nav-button:hover { background: var(--wine); color: var(--wine-on); }
.nav-quiet { border-color: var(--rule); color: var(--quiet); }
/* The account, under the name: a pill like the others, a list on a tap. */
.me-firm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px 8px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.me-firm-word { width: 100%; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--quiet); }
.me-firm form { display: inline; }
.me-list .me-firm button { display: inline-block; width: auto; margin: 0; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--wine); background: var(--surface); color: var(--wine); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; text-align: center; }
.me-list .me-firm button:hover { background: var(--rose); }
.me-list .me-firm button.is-on { background: var(--wine); color: var(--wine-on); }
.me-menu { position: relative; margin-left: 4px; }
.me-menu summary { list-style: none; cursor: pointer; }
.me-menu summary::-webkit-details-marker { display: none; }
.nav-me { border-color: var(--wine); color: var(--wine); background: var(--wine-soft); text-transform: none; letter-spacing: .04em; font-size: .82rem; line-height: 18px; white-space: nowrap; }
.nav-me:hover, .me-menu[open] .nav-me { background: var(--wine); color: var(--wine-on); }
.me-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 190px;
  display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--rule);
  border-radius: 12px; background: var(--surface); box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.me-list a, .me-list button {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font: inherit; font-size: .9rem; text-decoration: none; cursor: pointer;
}
.me-list a:hover, .me-list button:hover { background: var(--gold-soft); color: var(--gold); }
.me-list form { margin: 0; }
/* A desk on the bar: the same pill, the list under it on the left. */
.desk-menu { margin-left: 0; }
.desk-menu .me-list { left: 0; right: auto; min-width: 210px; }
.desk-menu[open] > summary { background: var(--ink); color: var(--surface); }
.desk-menu[open] > summary.nav-quiet { background: var(--quiet); }
/* A desk's screens in named groups: a small heading, then its links. */
.me-group { display: block; padding: 8px 12px 2px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--quiet); }
.me-group + a { border-top: 0; }

/* A small laptop (under 1500px): the same one row, the pills and the wordmark a size smaller,
   so the eight desks and the name still sit beside the house on one line. */
@media (max-width: 1500px) and (min-width: 901px) {
  .topbar { padding: 22px 18px; gap: 12px; }      /* 22 + 32 + 22 = 76, whole pixels again */
  .topbar-left { gap: 10px; }
  .wordmark-main { font-size: 1.48rem; letter-spacing: .05em; }
  .nav-back { height: 32px; padding: 7px 11px; font-size: .72rem; line-height: 16px; }
  .nav-home { width: 32px; height: 32px; }
  .topbar-nav, .topbar-right { gap: 6px; }
  .nav-button { height: 32px; padding: 7px 11px; font-size: .68rem; letter-spacing: .08em; line-height: 16px; }
  .nav-me { font-size: .78rem; }
}

/* Narrower than a laptop, the bar is two short rows: Back, the wordmark and the name on the
   first; the desks one strip to scroll on the second, the page's own desk first. The strip
   clips what hangs below it, so an open desk's list drops as a sheet under the bar. */
@media (max-width: 900px) {
  html:root { --topbar: 96px; }   /* outranks style.css's own :root, which loads after this sheet */
  .topbar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "left right" "nav nav";
    column-gap: 12px; row-gap: 0; padding: 0 16px; min-height: 0; max-height: 96px;
  }
  .topbar-left { grid-area: left; gap: 10px; min-height: 48px; min-width: 0; }
  .topbar-right { grid-area: right; margin-left: 0; }
  .nav-back { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; line-height: 1; }
  .nav-back-chev { display: inline; position: relative; top: -1px; }
  .nav-home { width: 36px; height: 36px; margin-left: -4px; }
  .nav-back-word { display: none; }
  .wordmark-main { font-size: 1.02rem; letter-spacing: .08em; text-transform: none; font-variant-caps: small-caps; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-me { height: 32px; padding: 7px 12px; font-size: .78rem; line-height: 16px; }
  /* 8px of the strip above the pills and 8 below, never 2: a scrolling strip inside the sticky bar
     paints its first few pixels short on a 1.5× screen (Windows at 150%, Chrome), and with 2px of
     room that was the top of every pill, cut flat. Seen on Vikrant's and Nishtha's laptops. */
  .topbar-nav {
    grid-area: nav; margin: 0 -16px; padding: 8px 16px 8px; flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
  }
  .topbar-nav::-webkit-scrollbar { display: none; }
  .topbar-nav > * { flex: 0 0 auto; scroll-snap-align: start; margin-left: 0; }   /* a desk, or a page’s own link in the strip */
  .topbar-nav .nav-button { height: 32px; padding: 7px 13px; font-size: .7rem; letter-spacing: .1em; white-space: nowrap; line-height: 16px; }
  .desk-menu.is-current { order: -1; }
  .desk-menu.is-current > summary, .desk-menu.is-current > summary.nav-quiet { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .desk-menu[open] > .me-list { position: fixed; left: 16px; right: 16px; top: calc(var(--topbar) + 6px); min-width: 0; max-height: calc(100dvh - var(--topbar) - 24px); overflow-y: auto; }
}

/* Nine desks and a Back button on a 1265px laptop: the word "Back" gives way to its chevron and the
   pills draw in a little, so the row never wraps. Whole pixels throughout. */
@media (max-width: 1366px) and (min-width: 901px) {
  .nav-back { width: 32px; padding: 7px 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
  .nav-back-chev { display: inline; position: relative; top: -1px; }
  .nav-back-word { display: none; }
  .topbar-nav { gap: 4px; }
  .nav-button { padding: 7px 9px; letter-spacing: .06em; }
}