/* ==========================================================================
   ONKA demo layer: cover, notice, consent.
   Shared by every direction. Self-contained so a direction's own styles
   cannot bleed into it and it cannot bleed into theirs.
   Fonts: only faces this repo already self-hosts. The ONKA opener elsewhere
   names a face it never loads and silently falls back; this does not.
   ========================================================================== */

.od, .od * { box-sizing: border-box; }

/* ---------- the cover ---------------------------------------------------- */
.od-cover {
  position: fixed; inset: 0; z-index: 9000;
  background: #0d0d0c; color: #f4f4f2;
  display: grid; grid-template-rows: 1fr auto;
  padding: clamp(20px, 4vw, 56px);
  font-family: 'Apfel', system-ui, sans-serif;
  transition: opacity .9s cubic-bezier(.165,.84,.44,1), visibility .9s;
}
.od-cover[hidden] { display: none; }
.od-cover.is-open { opacity: 0; visibility: hidden; pointer-events: none; }

.od-cover__mid { align-self: center; max-width: 62ch; }
.od-cover__by {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(244,244,242,.5); margin: 0 0 clamp(14px, 2vw, 22px);
}
.od-cover__h {
  font-family: 'Melodrama', Georgia, serif; font-weight: 400;
  font-size: clamp(30px, 5.4vw, 62px); line-height: 1.02; margin: 0 0 clamp(14px, 2vw, 24px);
}
.od-cover__p { font-size: clamp(14px, 1.05vw, 17px); line-height: 1.65; color: rgba(244,244,242,.78); margin: 0 0 1.2em; max-width: 56ch; }
.od-cover__p b { color: #f4f4f2; font-weight: 500; }

.od-cover__enter {
  appearance: none; cursor: pointer;
  background: #f4f4f2; color: #0d0d0c; border: 0;
  font: inherit; font-size: .95rem;
  padding: 14px 30px; margin-top: clamp(8px, 1.4vw, 16px);
  transition: transform .5s cubic-bezier(.165,.84,.44,1), background .5s;
}
@media (not (hover: none)) { .od-cover__enter:hover { transform: translateY(-2px); background: #fff; } }
.od-cover__enter:focus-visible { outline: 2px solid #f4f4f2; outline-offset: 3px; }

.od-cover__foot {
  border-top: 1px solid rgba(244,244,242,.16); padding-top: 14px;
  font-size: .72rem; line-height: 1.55; color: rgba(244,244,242,.45); max-width: 78ch;
}

/* ---------- the persistent notice ---------------------------------------- */
.od-notice {
  position: fixed; inset: auto 0 0 0; z-index: 8000;
  background: #0d0d0c; color: rgba(244,244,242,.5);
  font-family: 'Apfel', system-ui, sans-serif; font-size: .68rem; line-height: 1.5;
  padding: 7px clamp(14px, 3vw, 28px);
  display: flex; gap: 10px 20px; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
}
.od-notice b { color: rgba(244,244,242,.82); font-weight: 500; }
.od-notice a { color: rgba(244,244,242,.7); }
.od-notice nav { display: flex; gap: 14px; flex-wrap: wrap; }
.od-notice a[aria-current='true'] { color: #f4f4f2; }

/* ---------- consent ------------------------------------------------------ */
.od-consent {
  position: fixed; z-index: 8500;
  left: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px);
  bottom: calc(clamp(14px, 3vw, 28px) + 34px);
  max-width: 460px;
  background: #f4f4f2; color: #141414;
  font-family: 'Apfel', system-ui, sans-serif;
  padding: clamp(16px, 2vw, 22px);
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
}
.od-consent[hidden] { display: none; }
.od-consent h2 { font-family: 'Melodrama', Georgia, serif; font-weight: 400; font-size: 1.15rem; margin: 0 0 .5em; line-height: 1.2; }
.od-consent p { margin: 0 0 1em; font-size: .85rem; line-height: 1.55; color: #3a3a3a; }
.od-consent__row { display: flex; gap: 10px; flex-wrap: wrap; }
.od-consent button {
  appearance: none; cursor: pointer; font: inherit; font-size: .84rem;
  padding: 10px 18px; border: 1px solid #141414; background: transparent; color: #141414;
  transition: background .4s cubic-bezier(.165,.84,.44,1), color .4s;
}
.od-consent button[data-accept] { background: #141414; color: #f4f4f2; }
@media (not (hover: none)) {
  .od-consent button:hover { background: #141414; color: #f4f4f2; }
  .od-consent button[data-accept]:hover { background: #000; }
}
.od-consent button:focus-visible { outline: 2px solid #141414; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .od-cover, .od-cover__enter, .od-consent button { transition-duration: .01ms !important; }
}