/* Passenger Confessions v1.16 — canonical header/nav lock.
   Loaded last on every canonical v1.16 page so Home and interior routes use the
   same announcement bar, hamburger, brand lockup, utility icons and drawer.

   This file is the SINGLE authority for header/nav geometry. The values below
   are the approved homepage (North Star) header measurements. Page-scoped
   duplicates previously lived in pc-v116-home-final.css, pc-v116-art-fix.css
   and pc-v116-shared-final.css; because those selectors carried a body class
   they outranked this lock and interior routes drifted to a taller header.
   They have been removed. Do not reintroduce header geometry under
   .collage-home, .clean-page or any other page scope — add it here instead.
   scripts/verify-production-cutover.mjs fails the build if a page layer
   declares header geometry again. */
.announcement{
  min-height:44px!important;
  padding:9px 16px!important;
  gap:10px!important;
  font-family:var(--serif)!important;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:.055em!important;
  text-transform:none!important;
}
.header{
  min-height:106px!important;
  grid-template-columns:140px minmax(0,1fr) 140px!important;
  padding-left:max(24px,calc((100vw - 1120px)/2))!important;
  padding-right:max(24px,calc((100vw - 1120px)/2))!important;
  margin-bottom:46px!important;
}
/* Reserve the live-confessions ticker row from first paint. The runtime adds
   pc-v116-live-ticker-mounted before inserting the real 46px/44px row, so the
   announcement -> header -> ticker rhythm is identical on every route. */
html.pc-v116-live-ticker-mounted .header{margin-bottom:0!important}
.menu{
  justify-self:start!important;
  width:46px!important;
  height:46px!important;
}
.wordmark{
  display:inline-flex!important;
  align-items:flex-start!important;
  justify-self:center!important;
  gap:12px!important;
  width:max-content!important;
  text-align:left!important;
  text-decoration:none!important;
}
.brand-mark{
  display:block!important;
  width:50px!important;
  height:50px!important;
  flex:0 0 50px!important;
  margin-top:2px!important;
  object-fit:contain!important;
}
.brand-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  min-width:0!important;
}
.wordmark strong{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  margin:0!important;
  font-family:var(--serif)!important;
  font-size:26px!important;
  font-weight:500!important;
  line-height:.94!important;
  letter-spacing:0!important;
}
.wordmark strong span{
  display:block!important;
  width:max-content!important;
  white-space:nowrap!important;
}
.wordmark strong span:first-child{color:#f4ebdd!important;letter-spacing:.265em!important}
.wordmark strong span:nth-child(2){margin-top:3px!important;color:#f0a33a!important;letter-spacing:.18em!important}
.wordmark small{
  align-self:stretch!important;
  margin-top:8px!important;
  color:#e7a13b!important;
  font-family:var(--serif)!important;
  font-size:8.5px!important;
  font-weight:700!important;
  line-height:1.1!important;
  letter-spacing:.16em!important;
  text-align:center!important;
  white-space:nowrap!important;
}
.tools{
  justify-self:end!important;
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
}
.tools a{
  width:38px!important;
  min-width:38px!important;
  height:34px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  color:#c9bfaf!important;
  font-size:0!important;
  text-decoration:none!important;
}
.tools a::after{content:none!important;display:none!important}
.tools svg{
  display:block!important;
  width:25px!important;
  height:25px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.tools a:hover,.tools a:focus-visible{color:#f0a33a!important}
.drawer{
  top:100%!important;
  left:max(24px,calc((100vw - 1120px)/2))!important;
  width:320px!important;
  padding:12px!important;
  border:1px solid rgba(240,163,58,.25)!important;
  background:rgba(7,7,7,.98)!important;
}
.drawer a{padding:16px 14px!important}
.drawer .shop{background:#0d0b08!important}

@media(min-width:1400px){
  .header{padding-left:56px!important;padding-right:56px!important}
  .drawer{left:56px!important}
}

@media(max-width:900px){
  .announcement{min-height:36px!important;font-size:10px!important}
  .header{min-height:90px!important;grid-template-columns:50px minmax(0,1fr) 50px!important}
  .brand-mark{width:42px!important;height:42px!important;flex-basis:42px!important;margin-top:1px!important}
  .wordmark{gap:10px!important}
  .wordmark strong{font-size:20px!important}
  .wordmark strong span:first-child{letter-spacing:.23em!important}
  .wordmark strong span:nth-child(2){letter-spacing:.15em!important}
  .wordmark small{margin-top:6px!important;font-size:7.5px!important;letter-spacing:.14em!important}
  .tools a:not(:last-child){display:none!important}
}

@media(max-width:600px){
  .announcement{font-size:9px!important;gap:6px!important}
  .announcement span:nth-of-type(3){display:none!important}
  .header{min-height:80px!important;grid-template-columns:46px minmax(0,1fr) 46px!important;margin-bottom:44px!important}
  html.pc-v116-live-ticker-mounted .header{margin-bottom:0!important}
  .brand-mark{width:32px!important;height:32px!important;flex-basis:32px!important;margin-top:1px!important}
  .wordmark{gap:7px!important}
  .wordmark strong{font-size:15.5px!important}
  .wordmark strong span:first-child{letter-spacing:.18em!important}
  .wordmark strong span:nth-child(2){margin-top:2px!important;letter-spacing:.11em!important}
  .wordmark small{margin-top:5px!important;font-size:6.5px!important;letter-spacing:.105em!important}
  .drawer{left:12px!important;width:calc(100vw - 24px)!important;max-width:320px!important}
}

/* Phone-only chrome polish (320px–430px). Approved scope: the announcement row
   must never clip, and the header stack tightens up vertically. Nothing here
   changes desktop or tablet geometry, and the live-confessions ticker stays in
   normal document flow — it is not sticky and must not become sticky.

   pc-v116-refinement.css clips the announcement on phones
   (white-space:nowrap;overflow:hidden), which truncated "Shop the Collection →"
   on 320–430px viewports. Rather than depend on which announcement shape is
   rendered (the clean-room QA sources use a <span> middle label, the promoted
   canonical pages use an <a>), the row is reduced by child position: the first
   label, one separator and the last label survive in both shapes.

   Control geometry is deliberately NOT reduced here. The brand mark stays at the
   approved 32x32 from the max-width:600px block, the hamburger stays 46x46, and
   the utility/cart control keeps its existing size, so every tap target stays
   comfortable at phone widths. Only vertical rhythm and the announcement row are
   adjusted. */
@media(max-width:430px){
  .announcement{
    min-height:30px!important;
    padding:5px 10px!important;
    gap:7px!important;
    font-size:8.5px!important;
    letter-spacing:.08em!important;
    white-space:normal!important;
    overflow:visible!important;
    text-align:center!important;
  }
  .announcement>*{display:none!important}
  .announcement>:nth-child(1),
  .announcement>:nth-child(2),
  .announcement>:last-child{display:block!important}
  .header{min-height:72px!important;margin-bottom:34px!important}
  html.pc-v116-live-ticker-mounted .header{margin-bottom:0!important}
}