@import url("https://use.typekit.net/dhj1sez.css");
  :root{
    --jr-red:#E92A2C;
    --jr-red-dark:#A71F23;
    --jr-grad:linear-gradient(135deg,#E92A2C 0%,#A71F23 100%);
    --jr-gray:#404040;
    --jr-black:#202020;
    --jr-black-soft:#151515;
    --jr-light:#E6E6E6;
    --jr-paper:#f4f4f4;
    --jr-white:#ffffff;
    --ease:cubic-bezier(.2,.7,.2,1);
    --font:"neue-haas-grotesk-display","neue-haas-grotesk-text","Helvetica Neue",Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:var(--font);
    background:var(--jr-paper);
    color:var(--jr-black);
    -webkit-font-smoothing:antialiased;
    line-height:1.45;
  }
  /* ---- shared brand assets ---- */
  /* 26deg three-stripe motif drawn in CSS */
  .stripes{display:inline-flex;gap:5px;transform:skewX(-26deg)}
  .stripes i{display:block;width:9px;height:26px;background:var(--jr-grad);border-radius:1px}
  .stripes.sm i{width:6px;height:17px}
  /* single diagonal red stripe for section headers & list markers (JR&CO Stripe asset);
     logo keeps the three-stripe mark via .logo .stripes override below */
  .card .head .stripes:not(.sm) i:not(:first-child),
  .mblock-lbl .stripes i:not(:first-child),
  .layer-divider .stripes i:not(:first-child){display:none}
  .card .head .stripes:not(.sm) i:first-child,
  .mblock-lbl .stripes i:first-child,
  .layer-divider .stripes i:first-child{width:28px;height:6px}
  .stripes.faded i:nth-child(1){opacity:.35}
  .stripes.faded i:nth-child(2){opacity:.65}

  /* logo lockup (white wordmark on the dark banner) */
  .logo{display:flex;align-items:center;gap:12px;user-select:none}
  /* official white/red mark on the dark banner (matches My Day) */
  header.topbar .logo-home{display:inline-flex;align-items:center;text-decoration:none}
  header.topbar .logo-img{height:32px;width:auto;display:block;object-fit:contain;background:transparent}
  .logo .mark{display:flex;align-items:baseline;gap:2px;font-weight:800;letter-spacing:-1px;font-size:26px;line-height:1;color:#E6E6E6}
  .logo .mark .amp{color:var(--jr-red)}
  .logo .est{font-size:9px;letter-spacing:3px;color:#BFBFBF;font-weight:700;margin-top:3px}
  .logo .stripes{margin-left:2px}

  /* ---- top bar (Standard Brand Banner — black header, red gradient underline) ---- */
  header.topbar{
    background:var(--jr-black);
    border-bottom:3px solid transparent;
    border-image:var(--jr-grad) 1;
    padding:14px 28px;
    display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:40;
  }
  header.topbar .right{display:flex;align-items:center;gap:22px}
  header.topbar .tagline{
    font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:#BFBFBF;font-weight:700;
  }
  /* nav controls on the dark banner */
  header.topbar .btn.ghost{color:#E6E6E6;border-color:rgba(230,230,230,0.24)}
  header.topbar .btn.ghost:hover{border-color:var(--jr-red);background:rgba(233,42,44,0.10);color:#fff}
  .badge-id{font-size:11px;color:#BFBFBF;letter-spacing:1px}
  .badge-id b{color:#E6E6E6}

  /* ---- stage tracker ---- */