/* =========================================================================
   consent-n12.css — the cookie bar.

   Built from the site's own tokens rather than a plugin's: the near-black
   ground, the cream, the clay accent, Questrial for the sentence and
   League Spartan for the two buttons, which is the split every other
   control on this site uses.

   A BAR, NOT A MODAL. It does not block the page, dim it, or trap focus.
   A reader who ignores it can read the whole site; the choice is still
   there when they want it. A full-screen interstitial on a first visit is
   the single most common reason someone leaves before the page renders,
   and this site's first impression is a photograph.
   ========================================================================= */
.n12-consent{
  position:fixed;z-index:120;                 /* over the masthead's 50 */
  left:16px;right:16px;bottom:16px;
  max-width:720px;margin:0 auto;
  display:flex;align-items:center;gap:20px;
  padding:16px 20px;
  background:rgba(15,13,12,.96);
  border:1px solid rgba(246,241,234,.16);
  box-shadow:0 10px 40px rgba(0,0,0,.5);
  /* starts just below its resting place and rises in */
  transform:translateY(14px);opacity:0;
  transition:transform .28s ease,opacity .28s ease;
}
.n12-consent.is-in{transform:translateY(0);opacity:1}
.n12-consent.is-going{transform:translateY(14px);opacity:0}

.n12-consent-copy{
  margin:0;flex:1 1 auto;
  font-family:'Questrial',sans-serif;
  font-size:13.5px;line-height:20px;
  color:rgba(246,241,234,.78);
}
.n12-consent-copy a{color:#B28479;text-decoration:none;border-bottom:1px solid rgba(178,132,121,.4)}
.n12-consent-copy a:hover{border-bottom-color:#B28479}

.n12-consent-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}

/* THE TWO BUTTONS ARE THE SAME SIZE. Accept is solid and Decline is
   outlined, which is ordinary visual hierarchy, but they share padding,
   font, weight and height -- the decline is not smaller, greyer or
   hidden behind a second click. A consent flow that steers the answer is
   not consent. */
.n12-consent-btn{
  cursor:pointer;white-space:nowrap;
  padding:10px 16px;min-height:40px;
  font-family:'League Spartan',sans-serif;
  font-size:13.5px;font-weight:700;letter-spacing:-.01em;line-height:1;
  background:none;color:var(--n12-cream,#F6F1EA);
  border:1px solid rgba(246,241,234,.34);
  transition:background-color .18s ease,border-color .18s ease;
}
.n12-consent-btn:hover{background:rgba(246,241,234,.08);border-color:var(--n12-cream,#F6F1EA)}
.n12-consent-btn--yes{
  background:var(--n12-cream,#F6F1EA);color:var(--n12-black,#0F0D0C);
  border-color:var(--n12-cream,#F6F1EA);
}
.n12-consent-btn--yes:hover{background:#fff;border-color:#fff}
.n12-consent-btn:focus-visible{outline:2px solid #B28479;outline-offset:2px}

/* ON A PHONE IT STACKS, and the buttons go full width side by side.
   At 393 the sentence and two buttons on one row leaves the copy about
   nine characters wide. */
@media(max-width:620px){
  .n12-consent{
    left:12px;right:12px;bottom:12px;
    flex-direction:column;align-items:stretch;gap:14px;
    padding:16px;
  }
  .n12-consent-actions{gap:10px}
  .n12-consent-btn{flex:1 1 0;padding:12px 10px}
}

/* Someone who has asked for less motion gets it placed, not slid. */
@media(prefers-reduced-motion:reduce){
  .n12-consent{transition:none;transform:none;opacity:1}
  .n12-consent.is-going{display:none}
}