/* ============================================================
   SITE NOTICE — the "slug"
   A drafting annotation across the top of the page: label,
   gold dimension line with tick end-caps, one sentence, dismiss.
   Signature: the dimension line draws in on arrival and un-draws
   to the right on dismiss, the way a callout is erased off a plan.

   Self-contained. To retire it, delete this file, assets/notice.js
   and the <aside class="slug"> block. Nothing else references it.
   ============================================================ */

:root {
  /* Fallback until notice.js measures the real height. JS keeps this
     honest on resize — the bar wraps to two lines on narrow screens. */
  --slug-h: 46px;
}
@media (max-width: 720px) { :root { --slug-h: 62px; } }

/* Dismissed (or never shown): collapse the offset, hide the bar.
   Set on <html> by notice.js before first paint, so a returning
   visitor never sees it flash. */
html.slug-off { --slug-h: 0px; }
html.slug-off .slug { display: none; }

/* The nav is fixed and floats OVER the hero, whose top padding is sized to
   clear it. Move the nav down without moving the page and the nav lands on
   the hero eyebrow -- caught in a 390px render, invisible in a code read.
   So the whole document shifts down by the same amount. */
body { padding-top: var(--slug-h); transition: padding-top .55s var(--ease); }

/* The fixed nav and the scroll-progress strip both sit at top:0.
   Push them below the slug and let them travel back up on dismiss. */
.nav-wrap {
  top: var(--slug-h);
  transition: padding .7s var(--ease), background-color .7s var(--ease), top .55s var(--ease);
}
.progress { top: var(--slug-h); transition: top .55s var(--ease); }
.menu { padding-top: var(--slug-h); }

/* ---------- the bar ---------- */
.slug {
  position: fixed; top: 0; left: 0; right: 0; z-index: 55;
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(198,161,91,.28);
  transition: transform .5s var(--ease), opacity .35s var(--ease);
}
.slug-in {
  display: flex; align-items: center; gap: clamp(.8rem, 1.6vw, 1.4rem);
  padding: .72rem var(--gutter);
  min-height: 46px;
}

.slug-tag {
  flex: none;
  font-family: var(--label);
  font-size: .625rem; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-light);
  white-space: nowrap;
}

/* the dimension line: two vertical ticks (background gradients on the
   box) bridged by a hairline (::before) that animates its own width */
.slug-dim {
  flex: none; position: relative;
  width: clamp(34px, 5vw, 76px); height: 9px;
  background:
    linear-gradient(var(--gold), var(--gold)) left  / 1px 100% no-repeat,
    linear-gradient(var(--gold), var(--gold)) right / 1px 100% no-repeat;
  opacity: 0;
  animation: slug-ticks .5s var(--ease-out) .2s forwards;
}
.slug-dim::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  animation: slug-draw .8s var(--ease-out) .3s forwards;
}
@keyframes slug-ticks { to { opacity: .85; } }
@keyframes slug-draw  { to { transform: scaleX(1); } }

.slug-txt {
  font-size: .8125rem; line-height: 1.45;
  color: var(--on-navy);
  letter-spacing: -.002em;
  text-wrap: pretty;
}
.slug-txt em { font-style: normal; color: var(--gold-light); }

.slug-x {
  flex: none; margin-left: auto;
  display: inline-flex; align-items: baseline; gap: .5rem;
  background: none; border: 0; padding: .2rem 0; cursor: pointer;
  font-family: var(--label);
  font-size: .625rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--on-navy-mute);
  position: relative;
  transition: color .4s var(--ease);
}
.slug-x .x { font-family: var(--body); font-size: 1rem; letter-spacing: 0; line-height: 1; }
.slug-x::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
@media (hover: hover) {
  .slug-x:hover { color: var(--gold-light); }
  .slug-x:hover::after { transform: scaleX(1); transform-origin: left; }
}
.slug-x:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* no JS: the button can't do anything, so don't offer it. notice.js sets
   .slug-js on <html> from the <head>, before the bar is ever painted. */
.slug-x { display: none; }
html.slug-js .slug-x { display: inline-flex; }

/* ---------- dismiss ---------- */
html.slug-closing { --slug-h: 0px; }
html.slug-closing .slug { transform: translateY(-100%); opacity: 0; }
html.slug-closing .slug-dim::before {
  animation: none;
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--ease);
}

/* ---------- narrow ---------- */
@media (max-width: 860px) { .slug-long { display: none; } }
@media (max-width: 720px) {
  .slug-in { flex-wrap: wrap; row-gap: .35rem; padding-block: .6rem; }
  .slug-dim { display: none; }
  .slug-txt { order: 3; flex: 1 0 100%; font-size: .78125rem; }
  .slug-x { margin-left: auto; }
}

@media print { .slug { display: none !important; } }