/* ============================================================
   YARROW PORTAL — shared chrome
   ------------------------------------------------------------
   The look-and-feel every portal page has in common: the reset,
   the page shell, the header / nav, the login gate, the
   desktop-only block and the footer.

   Only rules that were byte-for-byte IDENTICAL on every page
   live here. Anything a page had drifted on — the colour
   tokens (:root / html.light), .btn, .theme-btn, main, and all
   the mobile @media blocks — deliberately stays inline on that
   page, so nothing changes visually.

   Load this BEFORE the page's own <style> block, so a page can
   still override anything here.
   ============================================================ */

/* ============ Reset + base ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--text); color: var(--bg); }

/* ============ Header + nav ============ */
header {
  border-bottom: 1px solid var(--line);
  padding: 28px 40px 22px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.brand {
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: 22px;
  letter-spacing: 0.14em;
  font-weight: 500;
  text-transform: uppercase;
}
.brand span {
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-weight: 500;
  color: var(--faint);
  font-size: 1em;
  letter-spacing: 0.14em;
  margin-left: 6px;
}
nav { display: flex; gap: 28px; align-items: baseline; }
nav a {
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  color: var(--muted);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}
nav a.active { color: var(--text); border-bottom-color: var(--text); }
nav a:hover { color: var(--text); }
.nav-drop { position: relative; padding-bottom: 12px; margin-bottom: -12px; }
/* .nav-drop-menu itself is page-local: some pages round the corners. */
.nav-drop:hover .nav-drop-menu { display: block; }
.nav-drop-menu a { display: block; padding: 12px 18px; border-bottom: none; font-size: 13px; white-space: nowrap; }
.nav-drop-menu a:hover { background: var(--panel-2); }
.nav-drop-menu a.active { color: var(--text); }
.drop-caret { font-size: 8px; margin-left: 7px; vertical-align: 2px; }

/* ============ Theme toggle ============
   The .theme-btn base rule stays page-local — some pages round it. */
.theme-btn:hover { color: var(--text); border-color: #777; }
.theme-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.theme-btn .moon { display: none; }
html.light .theme-btn .sun { display: none; }
html.light .theme-btn .moon { display: block; }

/* ============ Hamburger — hidden on desktop, shown on mobile ============
   Each page's own @media block is what reveals this. */
.nav-toggle {
  display: none; background: transparent; border: 1px solid var(--line); color: var(--muted);
  width: 40px; height: 40px; cursor: pointer; padding: 0; border-radius: 10px;
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.nav-toggle:hover { color: var(--text); border-color: #777; }

/* ============ Buttons ============
   The .btn base is page-local (padding and corners drifted). */
.btn:hover { background: var(--btn-hover); }

/* ============ Collaboration lockup: YARROW × partner logo ============ */
.brand.has-collab { display: inline-flex; align-items: center; gap: 13px; }
.brand .collab { display: inline-flex; align-items: center; gap: 13px; margin-left: 0; }
.brand .cx { color: var(--text); font-size: 13px; line-height: 1; margin-left: 0; letter-spacing: 0; }
.brand .g-logo { max-height: 33px; max-width: 150px; height: auto; width: auto; display: none; margin-left: 6px; }
html:not(.light) .brand .gl-dark { display: block; }
html.light .brand .gl-light { display: block; }

/* ============ Login gate ============ */
#gate {
position: fixed; inset: 0; background: #060606; z-index: 100;
display: flex; align-items: center; justify-content: center;
transition: opacity 0.9s ease; overflow: hidden; color-scheme: dark;
}
#gate.fade { opacity: 0; pointer-events: none; }
html.pre-auth #gate { display: none; }
html.pre-auth header, html.pre-auth main { opacity: 1 !important; transition: none !important; }
header, main { opacity: 0; transition: opacity 0.9s ease 0.2s; }
body.authed header, body.authed main { opacity: 1; }
#gate .g-inner { position: relative; z-index: 2; text-align: center; padding: 20px; width: min(440px, 92vw); }
#gate .g-brand {
font-family: "EB Garamond", Garamond, "Times New Roman", serif;
color: #f5f5f5; font-weight: 500; font-size: clamp(42px, 7vw, 60px);
letter-spacing: 0.16em; padding-left: 0.16em; text-transform: uppercase; line-height: 1;
opacity: 0; animation: gateUp 0.9s ease 0.15s forwards;
}
#gate .g-tag {
color: rgba(255,255,255,0.55); font-size: 11px; letter-spacing: 0.52em; padding-left: 0.52em;
text-transform: uppercase; margin-top: 30px;
opacity: 0; animation: gateUp 0.9s ease 0.35s forwards;
}
#gate form { opacity: 0; animation: gateUp 0.9s ease 0.5s forwards; }
#gate .g-field {
display: flex; align-items: center; width: 320px; margin: 44px auto 0;
border: 1px solid rgba(255,255,255,0.28); border-radius: 999px;
padding: 5px 5px 5px 22px; background: rgba(255,255,255,0.04);
transition: border-color 0.25s ease, background 0.25s ease;
}
#gate .g-field:focus-within { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.07); }
/* Username field. Naming the account keeps a login to one sign-in request —
   without it the only way to find the account is to try each one in turn, which
   is what exhausted the auth rate limit on the gallery side. It has no submit
   button of its own, so it carries the padding the password field gives up to
   that button. */
#gate #gateUserField { padding-right: 22px; }
#gate #gateUserField + .g-field { margin-top: 14px; }
#gate input {
flex: 1; min-width: 0; background: transparent; border: none;
color: #f5f5f5; padding: 10px 12px 10px 0; font-size: 15px; outline: none; text-align: left;
letter-spacing: 0.24em; font-family: inherit;
}
#gate input::placeholder { color: rgba(255,255,255,0.35); letter-spacing: 0.32em; font-size: 11px; }
#gate .g-go {
width: 38px; height: 38px; border-radius: 50%; border: none; flex: none;
background: #f5f5f5; color: #000; cursor: pointer; font-size: 16px; line-height: 1;
display: flex; align-items: center; justify-content: center; padding: 0; font-family: inherit;
transition: background 0.2s ease, transform 0.2s ease;
}
#gate .g-go:hover { background: #d9d9d9; transform: scale(1.05); }
#gate .g-go svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#gate .err { color: #e0a1a1; font-size: 12px; letter-spacing: 0.06em; min-height: 18px; margin-top: 18px; }
#gate .g-foot {
position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; z-index: 2;
color: rgba(255,255,255,0.32); font-size: 10px; letter-spacing: 0.32em; padding-left: 0.32em; text-transform: uppercase;
opacity: 0; animation: gateUp 0.9s ease 0.75s forwards;
}
@keyframes gateUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ============ Desktop-only block ============ */
#desktopOnly {
  display: none;
  position: fixed; inset: 0; background: var(--bg); z-index: 500;
  align-items: center; justify-content: center; flex-direction: column;
  text-align: center; padding: 30px;
}
#desktopOnly .brand {
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: 30px; letter-spacing: 0.14em; padding-left: 0.14em; font-weight: 500;
  margin-bottom: 22px;
}
#desktopOnly .tag {
  color: var(--faint); font-size: 11px; letter-spacing: 0.3em; padding-left: 0.3em;
  text-transform: uppercase; margin-bottom: 40px;
}
#desktopOnly .msg { color: var(--muted); font-size: 14px; line-height: 1.7; }

/* ============ Footer ============ */
.site-foot { text-align: center; padding: 52px 20px 26px; font-size: 11px; letter-spacing: 0.08em; color: var(--text); opacity: 0.32; }
.site-foot a { color: inherit; text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.site-foot .sf-sep { margin: 0 8px; }