/* ============================================================
   UC Journals — Design System
   Institutional STM platform. Deep-navy authority + amber CTA.
   ============================================================ */

/* Fonts are loaded via <link rel=preconnect> + <link> in each page head (faster than @import). */

:root {
  /* Brand navy scale */
  --navy-900: #0a2238;
  --navy-800: #0e2e49;
  --navy-700: #123a5c;
  --navy-600: #17486f;
  --navy-500: #1d5a89;
  --navy-400: #2d6fa3;
  --brand: #123a5c;
  --brand-ink: #0a2238;

  /* Links / interactive blue */
  --link: #1668b0;
  --link-hover: #0f4f8a;

  /* Amber accent (CTAs) */
  --accent: #e07b39;
  --accent-600: #cc6a2a;
  --accent-050: #fdf1e8;

  /* Access semantics */
  --oa: #15803d;          /* open access green */
  --oa-bg: #e7f4ec;
  --sub: #6b7785;         /* subscription gray */
  --sub-bg: #eef1f4;
  --ppv: #7c3aed;         /* pay-per-view violet */
  --ppv-bg: #f1ebfd;
  --abs: #1668b0;         /* free abstract blue */
  --abs-bg: #e8f1fa;

  /* Neutrals (warm-cool slate) */
  --ink: #16202b;
  --ink-2: #3a4753;
  --ink-3: #5f6e7c;
  --ink-4: #8493a1;
  --line: #dde3e9;
  --line-2: #e9edf1;
  --bg: #ffffff;
  --bg-soft: #f6f8fa;
  --bg-softer: #fafbfc;
  --bg-tint: #f0f5f9;

  /* status */
  --green: #15803d; --green-bg:#e7f4ec;
  --amber: #b45309; --amber-bg:#fbf0e0;
  --red: #b91c1c;   --red-bg:#fbeaea;
  --teal:#0f766e;   --teal-bg:#e3f2f0;

  /* type */
  --ui: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* radii + shadow */
  --r-sm: 4px; --r: 6px; --r-md: 8px; --r-lg: 12px;
  --sh-1: 0 1px 2px rgba(16,32,48,.06), 0 1px 3px rgba(16,32,48,.05);
  --sh-2: 0 2px 8px rgba(16,32,48,.08), 0 1px 3px rgba(16,32,48,.05);
  --sh-3: 0 8px 30px rgba(16,32,48,.12), 0 2px 8px rgba(16,32,48,.06);
  --maxw: 1280px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  font-family: var(--ui);
  color: var(--ink);
  background: var(--bg-soft);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--link-hover); }
h1,h2,h3,h4 { margin: 0; font-weight: 600; color: var(--ink); line-height: 1.2; }
p { margin: 0 0 1em; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }
::selection { background: #cfe3f5; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.wrap-narrow { max-width: 920px; margin: 0 auto; padding: 0 28px; }
.muted { color: var(--ink-3); }
.tiny { font-size: 12.5px; }
.serif { font-family: var(--serif); }
.center { text-align:center; }
.nowrap { white-space: nowrap; }
.hide { display:none !important; }

/* ---------- Top utility + header ---------- */
.uc-util {
  background: var(--navy-900);
  color: #c4d3e0;
  font-size: 12.5px;
}
.uc-util .wrap { display:flex; align-items:center; gap: 20px; height: 36px; }
.uc-util a { color:#c4d3e0; }
.uc-util a:hover { color:#fff; }
.uc-util .spacer { flex:1; }
.uc-util .util-link { display:inline-flex; align-items:center; gap:6px; }

.uc-header { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top:0; z-index: 40; }
.uc-header .wrap { display:flex; align-items:center; gap: 26px; height: 66px; }
.uc-logo { display:flex; align-items:center; gap:11px; flex-shrink:0; }
.uc-logo:hover { text-decoration:none; }
.uc-logo .mark { width: 34px; height:34px; flex-shrink:0; }
.uc-logo .wordmark { display:flex; flex-direction:column; line-height:1; }
.uc-logo .wm-1 { font-weight:700; font-size:19px; color: var(--brand-ink); letter-spacing:-.01em; }
.uc-logo .wm-2 { font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color: var(--ink-4); margin-top:3px; font-weight:500;}

.uc-nav { display:flex; align-items:center; gap: 2px; min-width: 0; }
.uc-nav a { color: var(--ink-2); font-weight:500; font-size:14.5px; padding: 9px 12px; border-radius: var(--r-sm); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.uc-nav a:hover { background: var(--bg-soft); color: var(--brand); text-decoration:none; }
.uc-nav a.active { color: var(--brand); background: var(--bg-tint); }
.uc-nav a .chev { width:14px; height:14px; opacity:.6; }

.uc-header .spacer { flex:1; }
.uc-h-search { display:flex; align-items:center; background:var(--bg-soft); border:1px solid var(--line); border-radius: 999px; padding: 6px 6px 6px 14px; width: 230px; transition: width .18s, box-shadow .18s; }
.uc-h-search:focus-within { width: 300px; box-shadow: 0 0 0 3px rgba(22,104,176,.12); border-color: var(--navy-400); }
.uc-h-search input { border:none; background:transparent; outline:none; flex:1; min-width:0; font-size:14px; color:var(--ink); }
.uc-h-search button { border:none; background:var(--brand); color:#fff; width:30px; height:30px; border-radius:999px; display:grid; place-items:center; }
.uc-h-search button:hover { background: var(--navy-700); }

.acct-btn { display:inline-flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--line); border-radius:999px; padding:6px 8px 6px 12px; color:var(--ink-2); font-weight:500; font-size:14px; }
.acct-btn:hover { border-color: var(--navy-400); color:var(--brand); }
.acct-btn .av { width:24px;height:24px;border-radius:999px;background:var(--navy-600);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:600; }

/* discipline mega bar */
.uc-disc { background: var(--navy-800); }
.uc-disc .wrap { display:flex; gap:2px; height:42px; align-items:stretch; }
.uc-disc a { color:#bcd0e2; font-size:13.5px; font-weight:500; display:inline-flex; align-items:center; padding: 0 16px; border-bottom: 3px solid transparent; }
.uc-disc a:hover { color:#fff; background: rgba(255,255,255,.05); text-decoration:none; }
.uc-disc a.active { color:#fff; border-bottom-color: var(--accent); }
.uc-disc .spacer { flex:1; }
.uc-disc .pill { display:inline-flex;align-items:center;gap:6px; align-self:center; background: rgba(255,255,255,.1); color:#fff; padding:4px 11px; border-radius:999px; font-size:12.5px; font-weight:500;}

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; border-radius: var(--r); padding: 9px 16px; font-weight:600; font-size:14px; cursor:pointer; line-height:1; transition: background .14s, border-color .14s, color .14s; white-space:nowrap; }
.btn:hover { text-decoration:none; }
.btn-primary { background: var(--brand); color:#fff; }
.btn-primary:hover { background: var(--navy-700); color:#fff; }
.btn-accent { background: var(--accent); color:#fff; }
.btn-accent:hover { background: var(--accent-600); color:#fff; }
.btn-ghost { background: var(--bg); color: var(--brand); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--navy-400); background: var(--bg-soft); color:var(--brand); }
.btn-quiet { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn-quiet:hover { background: var(--bg-soft); color: var(--brand); }
.btn-sm { padding: 6px 11px; font-size: 13px; }
.btn-lg { padding: 13px 24px; font-size: 16px; }
.btn-block { width:100%; }
.btn svg { width:16px; height:16px; }

/* ---------- Badges ---------- */
.badge { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding: 3px 9px; border-radius: 999px; line-height:1.3; white-space:nowrap; }
.badge svg { width:12px; height:12px; }
.badge-oa  { color: var(--oa);  background: var(--oa-bg); }
.badge-sub { color: var(--sub); background: var(--sub-bg); }
.badge-ppv { color: var(--ppv); background: var(--ppv-bg); }
.badge-abs { color: var(--abs); background: var(--abs-bg); }
.badge-soft{ color: var(--ink-3); background: var(--bg-soft); border:1px solid var(--line); }
.badge-amber{ color: var(--amber); background: var(--amber-bg); }
.badge-green{ color: var(--green); background: var(--green-bg); }
.badge-red{ color: var(--red); background: var(--red-bg); }
.badge-teal{ color: var(--teal); background: var(--teal-bg); }
.badge-ai { color:#5b21b6; background: linear-gradient(90deg,#f3ecfe,#eef4fe); border:1px solid #e4dafb; }

.chip { display:inline-flex; align-items:center; gap:6px; font-size:13px; padding:5px 11px; border-radius:999px; background:var(--bg-soft); border:1px solid var(--line); color:var(--ink-2); cursor:pointer; }
.chip:hover { border-color: var(--navy-400); color:var(--brand); }
.chip.on { background: var(--navy-700); border-color:var(--navy-700); color:#fff; }
.chip .x { opacity:.7; }

/* ---------- Cards / surfaces ---------- */
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); }
.card-pad { padding: 20px; }
.surface { background:var(--bg); border:1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.divider { height:1px; background:var(--line); border:0; margin: 0; }

/* ---------- Forms ---------- */
.field { display:block; margin-bottom: 16px; }
.field > label { display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
.input, .select, .textarea {
  width:100%; border:1px solid var(--line); background:var(--bg); border-radius: var(--r);
  padding: 10px 12px; color:var(--ink); outline:none; transition: border-color .14s, box-shadow .14s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--navy-400); box-shadow: 0 0 0 3px rgba(22,104,176,.12); }
.textarea { resize: vertical; min-height: 92px; line-height:1.5; }
.select { appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6e7c' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position: right 10px center; padding-right: 34px; }
.checkrow { display:flex; align-items:center; gap:9px; padding: 5px 0; font-size:14px; color:var(--ink-2); cursor:pointer; }
.checkrow input { width:16px; height:16px; accent-color: var(--brand); }

/* ---------- Tables ---------- */
table.uc { width:100%; border-collapse: collapse; font-size:13.5px; }
table.uc th { text-align:left; font-weight:600; color:var(--ink-3); font-size:12px; text-transform:uppercase; letter-spacing:.04em; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--bg-softer); }
table.uc td { padding: 12px 14px; border-bottom:1px solid var(--line-2); color:var(--ink-2); vertical-align: middle;}
table.uc tr:hover td { background: var(--bg-softer); }
table.uc td .num { font-variant-numeric: tabular-nums; font-weight:600; color:var(--ink); }

/* ---------- Layout helpers ---------- */
.row { display:flex; gap: 12px; }
.col { display:flex; flex-direction:column; }
.between { justify-content: space-between; }
.items-center { align-items:center; }
.gap-6{gap:6px} .gap-8{gap:8px} .gap-10{gap:10px} .gap-12{gap:12px} .gap-16{gap:16px} .gap-20{gap:20px} .gap-24{gap:24px}
.wrap-flex { flex-wrap:wrap; }
.grid { display:grid; gap: 20px; }
/* Grid/flex children default to min-width:auto, which blocks shrinking below
   min-content and causes overflow on narrow screens — opt every child out. */
.grid > *, .dash > *, .row > * { min-width: 0; }
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.section { padding: 56px 0; }
.eyebrow { font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color: var(--accent-600); }
.h-rule { display:flex; align-items:center; gap:14px; }
.h-rule::after { content:""; flex:1; height:1px; background:var(--line); }

/* ---------- Footer ---------- */
.uc-footer { background: var(--navy-900); color:#a9bccd; margin-top: 64px; }
.uc-footer a { color:#a9bccd; font-size:13.5px; }
.uc-footer a:hover { color:#fff; }
.uc-footer .f-top{border-bottom:1px solid rgba(255,255,255,.1)}
.uc-footer .f-top .wrap{display:flex;align-items:center;gap:30px;padding:28px 28px;flex-wrap:wrap}
.uc-footer .f-news{flex:1;min-width:280px}
.uc-footer .f-news h3{color:#fff;font-size:18px;font-family:var(--serif)}
.uc-footer .f-news p{font-size:13.5px;margin:5px 0 0;color:#8fa8bd}
.uc-footer .f-form{display:flex;gap:8px;flex-wrap:wrap}
.uc-footer .f-form input{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:11px 14px;color:#fff;outline:none;min-width:240px;font-size:14px}
.uc-footer .f-form input::placeholder{color:#7e96ab}
.uc-footer .f-form input:focus{border-color:var(--accent);background:rgba(255,255,255,.1)}
.uc-footer .cols { display:grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 30px; padding: 44px 0 34px; }
.uc-footer h4 { color:#fff; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:13px; font-weight:600;}
.uc-footer ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.uc-footer .f-mid{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.uc-footer .f-badges{display:flex;gap:10px;flex-wrap:wrap}
.uc-footer .f-badge{border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:7px 12px;font-size:11.5px;color:#bcd0e2;display:flex;align-items:center;gap:7px}
.uc-footer .f-badge svg{width:14px;height:14px;color:var(--accent)}
.uc-footer .f-social{display:flex;gap:8px;margin-left:auto}
.uc-footer .f-social a{width:38px;height:38px;border:1px solid rgba(255,255,255,.16);border-radius:var(--r);display:grid;place-items:center;color:#bcd0e2}
.uc-footer .f-social a:hover{background:rgba(255,255,255,.09);color:#fff;border-color:rgba(255,255,255,.3)}
.uc-footer .f-social svg{width:17px;height:17px}
.uc-footer .legal { border-top:1px solid rgba(255,255,255,.1); padding: 18px 0 26px; display:flex; align-items:center; gap:18px; font-size:12.5px; flex-wrap:wrap; }
.uc-footer .legal .spacer{flex:1}
.uc-footer .legal a{font-size:12.5px}

/* ---------- Access banner ---------- */
.access-bar { background: var(--bg-tint); border:1px solid #cfe0ee; border-radius: var(--r-md); padding: 12px 16px; display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--navy-700); }
.access-bar svg { width:18px; height:18px; flex-shrink:0; }

/* ---------- Dashboard shell (portals) ---------- */
.dash { display:grid; grid-template-columns: 248px 1fr; min-height: calc(100vh - 102px); }
.dash-side { background: var(--navy-900); color:#c4d3e0; padding: 22px 14px; display:flex; flex-direction:column; }
.dash-side .ds-brand { display:flex; align-items:center; gap:10px; padding: 0 8px 18px; margin-bottom: 12px; border-bottom:1px solid rgba(255,255,255,.1); }
.dash-side .ds-role { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:#7e96ab; padding: 16px 12px 7px; font-weight:600; }
.dash-side a { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius: var(--r); color:#c4d3e0; font-size:14px; font-weight:500; }
.dash-side a svg { width:17px; height:17px; opacity:.85; }
.dash-side a:hover { background: rgba(255,255,255,.07); color:#fff; text-decoration:none; }
.dash-side a.active { background: var(--navy-600); color:#fff; }
.dash-main { background: var(--bg-soft); padding: 28px 32px; overflow:auto; }
.dash-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom: 24px; flex-wrap:wrap;}
.dash-head h1 { font-size: 24px; letter-spacing:-.01em; }
.dash-head .sub { color: var(--ink-3); margin-top:5px; font-size:14px; }

/* stat cards */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.stat { background:var(--bg); border:1px solid var(--line); border-radius: var(--r-md); padding:18px; }
.stat .lbl { font-size:12.5px; color:var(--ink-3); font-weight:500; display:flex; align-items:center; gap:7px; }
.stat .val { font-size:27px; font-weight:700; color:var(--ink); margin-top:9px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat .delta { font-size:12.5px; font-weight:600; margin-top:6px; display:inline-flex; align-items:center; gap:4px; }
.delta.up { color: var(--green); } .delta.down { color: var(--red); }

/* tabs */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom: 22px; }
.tabs a, .tabs button { background:none; border:none; padding: 11px 16px; font-size:14px; font-weight:500; color:var(--ink-3); border-bottom: 2px solid transparent; margin-bottom:-1px; cursor:pointer; }
.tabs a:hover, .tabs button:hover { color:var(--brand); text-decoration:none; }
.tabs a.active, .tabs button.active { color:var(--brand); border-bottom-color: var(--brand); font-weight:600; }

/* progress / steps */
.steps { display:flex; align-items:center; gap:0; margin: 8px 0 26px; }
.steps .step { display:flex; align-items:center; gap:10px; flex:1; }
.steps .dot { width:28px;height:28px;border-radius:999px; display:grid; place-items:center; font-size:13px; font-weight:600; background:var(--bg); border:2px solid var(--line); color:var(--ink-4); flex-shrink:0;}
.steps .step.done .dot { background:var(--green); border-color:var(--green); color:#fff; }
.steps .step.cur .dot { background:var(--brand); border-color:var(--brand); color:#fff; }
.steps .step .lbl { font-size:13px; font-weight:500; color:var(--ink-3); }
.steps .step.cur .lbl, .steps .step.done .lbl { color:var(--ink); }
.steps .bar { flex:1; height:2px; background:var(--line); margin:0 10px; }
.steps .step.done .bar { background: var(--green); }

/* progress bar */
.pbar { height:7px; background:var(--line-2); border-radius:999px; overflow:hidden; }
.pbar > span { display:block; height:100%; background: var(--brand); border-radius:999px; }

/* timeline */
.timeline { position:relative; padding-left: 26px; }
.timeline::before { content:""; position:absolute; left:8px; top:4px; bottom:4px; width:2px; background:var(--line); }
.tl-item { position:relative; padding-bottom: 20px; }
.tl-item::before { content:""; position:absolute; left:-22px; top:3px; width:11px; height:11px; border-radius:999px; background:var(--bg); border:2px solid var(--navy-400); }
.tl-item.done::before { background:var(--green); border-color:var(--green); }
.tl-item.cur::before { background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-050); }

/* misc */
.kbd { font-family:var(--mono); font-size:12px; background:var(--bg-soft); border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:2px 7px; color:var(--ink-2); }
.dot-sep::before { content:"·"; margin:0 8px; color:var(--ink-4); }
.avatar { border-radius:999px; background:var(--navy-600); color:#fff; display:grid; place-items:center; font-weight:600; flex-shrink:0; }

/* tooltip-ish topic underline */
.topic-link { color: var(--ink); border-bottom: 1.5px dotted var(--navy-400); cursor:pointer; }
.topic-link:hover { color: var(--navy-600); background: var(--bg-tint); text-decoration:none; }

/* scrollbars in panels */
.scroll-y { overflow-y:auto; }
.scroll-y::-webkit-scrollbar{width:9px;height:9px}
.scroll-y::-webkit-scrollbar-thumb{background:#c9d3dd;border-radius:9px;border:2px solid var(--bg)}
.scroll-y::-webkit-scrollbar-thumb:hover{background:#aab8c5}

/* ============================================================
   MEGA MENU
   ============================================================ */
.uc-header{position:sticky;top:0;z-index:40}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(16,32,48,.13);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:45}
.mega.open{opacity:1;visibility:visible;transform:translateY(0)}
.mega-inner{max-width:var(--maxw);margin:0 auto;padding:26px 28px 22px;display:grid;gap:30px}
.mega-col h5{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-4);font-weight:700;margin-bottom:11px}
.mega-col a{display:block;padding:6px 0;font-size:13.5px;color:var(--ink-2);line-height:1.35}
.mega-col a:hover{color:var(--link);text-decoration:none}
.mega-col a b{display:block;font-weight:600;color:var(--ink);font-size:13.5px}
.mega-col a span{font-size:12px;color:var(--ink-4)}
.mega-promo{background:linear-gradient(150deg,var(--navy-800),var(--navy-600));border-radius:var(--r-md);padding:20px;color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column}
.mega-promo::after{content:"";position:absolute;right:-50px;bottom:-50px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(224,123,57,.34),transparent 66%)}
.mega-promo h6{font-size:14px;color:#fff;margin:0 0 6px;position:relative}
.mega-promo p{font-size:12.5px;color:#bcd0e2;margin:0 0 14px;line-height:1.5;position:relative}
.mega-promo .btn{position:relative;align-self:flex-start}
.mega-foot{border-top:1px solid var(--line-2);background:var(--bg-softer)}
.mega-foot .mfi{max-width:var(--maxw);margin:0 auto;padding:12px 28px;display:flex;gap:22px;flex-wrap:wrap;font-size:12.5px}
.mega-foot a{color:var(--ink-3);display:inline-flex;align-items:center;gap:6px}
.mega-foot a:hover{color:var(--brand);text-decoration:none}
.mega-foot svg{width:14px;height:14px}
.uc-nav a .chev{transition:transform .16s}
.uc-nav a[aria-expanded="true"] .chev{transform:rotate(180deg)}
.uc-nav a[aria-expanded="true"]{background:var(--bg-tint);color:var(--brand)}
@media (max-width:1140px){.mega{display:none}}

/* ============================================================
   MOTION
   ============================================================ */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.06s}.reveal-d2{transition-delay:.12s}.reveal-d3{transition-delay:.18s}.reveal-d4{transition-delay:.24s}
@keyframes uc-shimmer{0%{background-position:-420px 0}100%{background-position:420px 0}}
.skeleton{background:linear-gradient(90deg,var(--bg-soft) 8%,#eef2f6 18%,var(--bg-soft) 33%);background-size:800px 100%;animation:uc-shimmer 1.25s linear infinite;border-radius:5px;height:11px}
@keyframes uc-pulse{0%,100%{opacity:1}50%{opacity:.42}}
.pulse{animation:uc-pulse 1.6s ease-in-out infinite}
@keyframes uc-spin{to{transform:rotate(360deg)}}
.spin{animation:uc-spin .9s linear infinite}
@keyframes uc-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.bars-chart .seg{transform-origin:bottom;animation:uc-rise .7s cubic-bezier(.2,.7,.3,1) both}
@keyframes uc-draw{to{stroke-dashoffset:0}}
.spark-path{stroke-dasharray:600;stroke-dashoffset:600;animation:uc-draw 1.4s ease-out .2s forwards}
@keyframes uc-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fade-up{animation:uc-fade-up .4s ease-out both}
.lift{transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s}
.lift:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}

/* ============================================================
   IMAGERY
   ============================================================ */
image-slot{display:block;width:100%;height:100%}
.img-frame{position:relative;overflow:hidden;border-radius:var(--r-md);background:var(--bg-tint)}
.img-frame.ratio-16x9{aspect-ratio:16/9}
.img-frame.ratio-4x3{aspect-ratio:4/3}
.img-frame.ratio-3x2{aspect-ratio:3/2}
.img-frame.ratio-1x1{aspect-ratio:1/1}
.img-tint{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,34,56,.72));pointer-events:none}
/* generative journal cover */
.gen-cover{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.gen-cover::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.16) 1px,transparent 0);background-size:14px 14px;opacity:.6}
.gen-cover::after{content:"";position:absolute;right:-30%;top:-20%;width:150%;height:80%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 62%)}

/* ============================================================
   RESPONSIVE — tablet & mobile
   ============================================================ */
.only-mobile{display:none}
.uc-burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);width:42px;height:42px;place-items:center;color:var(--ink-2)}
.uc-burger svg{width:20px;height:20px}

/* --- Mobile drawer --- */
.uc-drawer{position:fixed;inset:0;z-index:90;display:none}
.uc-drawer.open{display:block}
.uc-drawer .scrim{position:absolute;inset:0;background:rgba(10,34,56,.5)}
.uc-drawer .sheet{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--bg);box-shadow:var(--sh-3);display:flex;flex-direction:column;overflow-y:auto}
.uc-drawer .dh{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.uc-drawer .dh button{background:none;border:none;color:var(--ink-3);width:40px;height:40px;font-size:18px;cursor:pointer}
.uc-drawer form{display:flex;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line)}
.uc-drawer form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;outline:none;font-size:16px}
.uc-drawer nav{padding:8px}
.uc-drawer nav a{display:flex;align-items:center;gap:10px;padding:13px 12px;border-radius:var(--r);color:var(--ink-2);font-weight:500;font-size:15px;min-height:46px}
.uc-drawer nav a:hover,.uc-drawer nav a.active{background:var(--bg-tint);color:var(--brand);text-decoration:none}
.uc-drawer .grp{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-4);font-weight:700;padding:14px 12px 5px}

@media (max-width: 1180px){
  .uc-nav a{padding:9px 9px;font-size:13.5px}
  .uc-h-search{width:180px}
  .uc-h-search:focus-within{width:220px}
}
/* Desktop nav cannot shrink below its content, so hand off to the burger drawer
   well before it would overflow (covers iPad landscape at 1024px). */
@media (max-width: 1140px){
  .uc-nav,.uc-h-search,.acct-btn{display:none}
  .uc-burger{display:grid}
  .uc-header .wrap{gap:14px}
}
@media (max-width: 1080px){
  .stats { grid-template-columns: repeat(2,1fr); }
  .uc-footer .cols { grid-template-columns: 1fr 1fr 1fr; gap:26px; }
}

/* ---- Tablet & below: collapse every multi-column layout ---- */
@media (max-width: 1000px){
  .grid[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .wrap,.wrap-narrow{padding:0 20px}
}

/* ---- Mobile ---- */
@media (max-width: 860px){
  .only-mobile{display:block}
  .uc-header .wrap{height:60px;gap:12px}
  .uc-util{font-size:12px}
  .uc-util .wrap{height:auto;padding:8px 20px;gap:14px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .uc-util .wrap::-webkit-scrollbar{display:none}

  /* discipline bar scrolls horizontally */
  .uc-disc .wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 20px}
  .uc-disc .wrap::-webkit-scrollbar{display:none}
  .uc-disc a{flex-shrink:0}
  .uc-disc .spacer,.uc-disc .pill{display:none}

  /* dashboards: sidebar becomes a scrolling tab strip */
  .dash{grid-template-columns:1fr;min-height:0}
  .dash-side{flex-direction:row;align-items:center;gap:6px;padding:10px 14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dash-side::-webkit-scrollbar{display:none}
  .dash-side .ds-brand,.dash-side .ds-role,.dash-side .ds-foot{display:none}
  .dash-side a{white-space:nowrap;flex-shrink:0;padding:10px 14px;min-height:44px}
  .dash-main{padding:20px 16px}
  .dash-head h1{font-size:21px}

  /* stats stack to 2-up, cards breathe */
  .stats{grid-template-columns:1fr 1fr;gap:12px}
  .stat{padding:14px}
  .stat .val{font-size:22px}

  .section{padding:38px 0}
  .uc-footer .cols{grid-template-columns:1fr 1fr;gap:22px;padding:32px 0 26px}
  .uc-footer .f-top .wrap{padding:22px 20px;gap:16px}
  .uc-footer .f-form,.uc-footer .f-form input{width:100%;min-width:0}
  .uc-footer .f-social{margin-left:0}
  .uc-footer .legal{flex-direction:column;align-items:flex-start;gap:10px}

  /* tables scroll instead of squashing */
  table.uc{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}

  /* comfortable touch targets */
  .btn{min-height:44px;padding:11px 18px}
  .btn-sm{min-height:38px;padding:8px 13px}
  .chip{min-height:36px}
  .art-act{min-height:40px;padding:8px 10px}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a,.tabs button{white-space:nowrap;flex-shrink:0}

  /* inputs at 16px stop iOS zoom-on-focus */
  .input,.select,.textarea{font-size:16px}
}
@media (max-width: 560px){
  .stats{grid-template-columns:1fr}
  .wrap,.wrap-narrow{padding:0 16px}
  .dash-main{padding:16px 14px}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}