/* ---------------------------------------------------------------------------
   /bars - the trade page.

   Two jobs in one file. On screen it is the same navy, type-led stage as the
   brand page (chrome, palette and type all come from css/site.css, which loads
   first). On paper it is a leave-behind: white ground, dark ink, no chrome, no
   form, no dark panels. The @media print block at the bottom is not a tidy-up
   pass - it is the second half of the design, and it is what retired
   sell-sheets.html.
   --------------------------------------------------------------------------- */

/* The gate is declared off and switched on only under html.js. A bar owner with
   JavaScript off, or anyone who lands here from a QR and hits Print, must never
   be held behind an overlay whose buttons cannot work. */
.gate { display: none; }
html.js .gate { display: grid; }

/* The two halves of the page that differ by medium. Screen is the default, and
   .screen-only is deliberately given no display of its own: setting one here
   would override the element's natural layout (.socials is a flex row), and the
   print block switches it off with !important anyway. */
.print-only { display: none; }

/* The brand page hides the nav until you are past its hero and js/page.js adds .show. This page
   has no hero and no such script, so without this the nav would sit translated off-screen for
   every visitor who has JavaScript on - the opposite of the no-JS bug it guards against there. A
   trade page shows its nav from the first pixel. */
nav { transform: none; }

/* ---- Masthead ---- */
.masthead { padding: 7.5rem 0 3.5rem; }
.mast-inner { display: grid; grid-template-columns: 9.5rem 1fr; gap: 2.6rem; align-items: center; }
.masthead .seal { width: 9.5rem; height: 9.5rem; display: block; }
.masthead h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); margin: .7rem 0 .9rem; }
.masthead .lede { max-width: 34rem; }
.print-hint {
  margin-top: 1.1rem; font-size: .8125rem; letter-spacing: .04em;
  color: var(--muted);
}

/* ---- Bands: the dark panels that have to flip on paper ---- */
.band { background: var(--navy-deep); padding: 3.6rem 0; }
.band h2 { margin: .7rem 0 1.6rem; }
section#drinks { padding: 3.6rem 0; }
section#enquire { padding: 3.6rem 0 4.6rem; }
#drinks h2, #order h2, #enquire h2 { margin: .7rem 0 1.4rem; }

.three { list-style: none; display: grid; gap: .9rem; margin-top: 1.4rem; max-width: 46rem; }
.three li { padding-left: 1.3rem; position: relative; }
.three li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; background: var(--gold-grad); transform: rotate(45deg);
}
.three b, .why b { color: var(--cream); }

/* ---- A drink, as a buyer reads it: the can on the left, the specs on the right ---- */
.drink-sheet {
  display: grid; grid-template-columns: 11rem 1fr; gap: 2.4rem;
  padding: 2rem 0; border-top: 1px solid rgba(192, 168, 128, .3);
}
.drink-sheet:first-of-type { border-top: 0; }

/* The can slot. Sized to a 12 oz can (66 x 123 mm) so the drawn render drops
   into [data-can-art] at the right proportion with nothing else moving, and the
   concept label sits inside the same figure so no screenshot can crop the can
   away from it. */
.can-slot { display: grid; gap: .7rem; justify-items: center; }
.can-well {
  width: 100%; max-width: 9.5rem; aspect-ratio: 66 / 123;
  border: 1px dashed var(--gold); border-radius: 1.6rem / 1.1rem;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(245,235,210,.05), rgba(245,235,210,.012));
}
.can-ph {
  font-family: "EB Garamond", Georgia, serif; font-size: .75rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted); text-align: center;
}
/* Once js/bars.js has drawn a can in, the dashed holding box goes: the can is its own silhouette
   and a box around it would read as a second object. The can's own proportion takes over from the
   slot's, so the render is never squashed to fit a ratio meant for an empty rectangle. */
.can-well.filled {
  border: 0; background: none; aspect-ratio: auto; max-width: 8.6rem;
  place-items: start center;
}
.can-well.filled .can-ph { display: none; }
/* The simplified, ink-cheap can. Off on screen, on for paper. */
.can-well-print { display: none; }
.can-note {
  font-family: "EB Garamond", Georgia, serif;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); text-align: center; max-width: 10rem; line-height: 1.5;
}

.series {
  font-family: "EB Garamond", Georgia, serif; font-weight: 600;
  font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
}
.drink-sheet h3 { margin: .3rem 0 .5rem; color: var(--cream); }
.drink-sheet h3::after {
  content: ""; display: block; width: 2.4rem; height: 2px; margin-top: .7rem;
  background: var(--accent, var(--gold));
}
.pitch { color: var(--cream); margin: .9rem 0 1.2rem; max-width: 32rem; }

.specs { display: grid; gap: .55rem; }
.specs > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; align-items: baseline; }
.specs dt {
  font-family: "EB Garamond", Georgia, serif; font-weight: 600;
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.specs dd { font-size: .9375rem; line-height: 1.55; }

.why { list-style: none; display: grid; gap: .8rem; max-width: 46rem; }
.why li { padding-left: 1.3rem; position: relative; }
.why li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; background: var(--gold-grad); transform: rotate(45deg);
}
.accounts { margin-top: 2.4rem; }
.account-list {
  list-style: none; margin: .9rem 0 .6rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); gap: .5rem 1.4rem;
}
.account-list li { font-size: .9375rem; }
.note { color: var(--muted); font-size: .875rem; margin-top: .9rem; }

/* ---- How to order ---- */
.order { background: var(--navy-lift); padding: 3.6rem 0; }
.order-card {
  /* One measure, centred. The 44rem column is deliberate - 44rem of prose is a readable line,
     and widening it would be worse - but it was pinned to the left of a full-bleed band, which
     read as an unfinished layout rather than as a narrow column. margin-inline: auto makes the
     narrowness look chosen. Applied to the three blocks that carry it: this card, .gap and the
     form. The blocks that already run wide (.account-list, .specs) are untouched. */
  margin: 1.6rem auto 1.4rem; display: grid; gap: .6rem; max-width: 44rem;
  padding: 1.4rem 1.6rem; background: rgba(8, 20, 34, .42);
  box-shadow: inset 0 0 0 1px rgba(192, 168, 128, .35);
}
.order-card > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; align-items: baseline; }
.order-card dt {
  font-family: "EB Garamond", Georgia, serif; font-weight: 600;
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.order-card dd { font-size: .9375rem; }
.order-card a[href="tel:"] { cursor: not-allowed; text-decoration: none; }
.gap {
  max-width: 44rem; margin-inline: auto; font-size: .9375rem; line-height: 1.6;
  border-left: 3px solid var(--gold); padding: .2rem 0 .2rem 1rem;
}
.gap b { color: var(--cream); }

/* ---- The form ---- */
.trade-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.4rem;
  max-width: 44rem; margin: 1.6rem auto 0;
}
.field { display: grid; gap: .4rem; }
.field.wide { grid-column: 1 / -1; }
/* A form label is not an eyebrow. 12px letterspaced caps in --muted is the treatment used for
   section eyebrows on this site, and on a form a bar owner fills in on a phone it is a legibility
   tax - small, tracked wide, and low contrast, on the text that says what to type. The voice stays
   (EB Garamond) and the caps and the tracking go; cream rather than --muted, because a label is
   not secondary to the box under it. */
.field label {
  font-family: "EB Garamond", Georgia, serif; font-weight: 600;
  font-size: .875rem; letter-spacing: .04em; color: var(--cream);
}
.field .opt { letter-spacing: 0; opacity: .7; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--cream);
  background: rgba(8, 20, 34, .5); border: 1px solid rgba(192, 168, 128, .4);
  border-radius: 2px; padding: .7rem .8rem; min-height: 2.75rem; width: 100%;
  transition: border-color .2s var(--settle);
}
.field textarea { min-height: 6rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--gold); }
.field input::placeholder, .field textarea::placeholder { color: rgba(159, 173, 196, .8); }
.field.actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form-note { font-size: .8125rem; color: var(--muted); }

/* Inline validation. Added by js/bars.js, which never blocks the native submit. */
.field .err { font-size: .8125rem; color: #FFC9A0; letter-spacing: 0; text-transform: none; font-family: inherit; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #E08A6A; }

/* The honeypot: present for Netlify, never shown or read out, never focusable. */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.demo-badge {
  position: fixed; right: .7rem; bottom: .7rem; z-index: 90;
  background: var(--confirm); color: #1B1D22;
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 2px;
}

@media (max-width: 54rem) {
  .masthead { padding: 6rem 0 2.6rem; }
  .mast-inner { grid-template-columns: 1fr; gap: 1.4rem; }
  .masthead .seal { width: 7.5rem; height: 7.5rem; }
  .drink-sheet { grid-template-columns: 1fr; gap: 1.6rem; }
  .can-slot { justify-items: start; }
  .specs > div, .order-card > div { grid-template-columns: 1fr; gap: .1rem; }
  .trade-form { grid-template-columns: 1fr; }
}

@media (prefers-reduced-transparency: reduce) {
  .order-card { background: var(--navy-deep); }
  .field input, .field select, .field textarea { background: var(--navy-deep); }
}
@media (prefers-contrast: more) {
  .can-well, .order-card { border-color: var(--gold-hi); }
  .field input, .field select, .field textarea { border-color: var(--gold-hi); }
  .note, .form-note, .print-hint { color: var(--cream); }
}
@media (prefers-reduced-motion: reduce) {
  .field input, .field select, .field textarea { transition: none; }
}

/* ===========================================================================
   PAPER
   One or two sheets of Letter/A4. Everything interactive goes, every dark
   panel flips to white, and every fact stays.
   =========================================================================== */
@page { size: letter; margin: 0.5in; }

@media print {
  /* Light ground, dark ink. Set on html as well so no navy survives at the
     edges of the sheet. */
  html { background: #FFFFFF !important; }
  body { background: #FFFFFF !important; color: #16253F !important; }
  body, .lede, .note, .form-note, .specs dd, .account-list li { font-size: 9.5pt; line-height: 1.42; }

  /* The chrome. Nothing here can be used on paper, and the gate would print as
     a full sheet of navy over the facts. */
  nav, .gate, .skip, .demo-badge, .screen-only, form, .trade-form, #enquire { display: none !important; }
  .print-only { display: inline !important; }

  /* A reveal that never animated would print as a blank sheet. */
  .reveal { opacity: 1 !important; transform: none !important; }

  /* Dark panels become plain sheet. */
  .band, .order, footer { background: none !important; }
  .order-card { background: none !important; box-shadow: none !important; border: 1px solid #16253F; padding: .14in .18in; }
  footer::before { display: none !important; }

  /* Everything that was cream or muted on navy becomes ink on white. */
  h1, h2, h3, .three b, .why b, .pitch, .gap b, .drink-sheet h3 { color: #16253F !important; }
  .lede, .note, .series, .specs dt, .order-card dt, .can-ph, .foot .legal { color: #4A5568 !important; }
  .eyebrow {
    background: none !important; -webkit-background-clip: border-box !important;
    background-clip: border-box !important; color: #806840 !important;
  }
  /* On screen the bullet is a rotated square drawn as a background. Printed with "Background
     graphics" off - the browser's default - a background disappears and the lists lose their
     markers entirely. On paper the bullet is a glyph instead, which is ink the printer always
     lays down. */
  .three li::before, .why li::before {
    content: "\25C6"; background: none !important; color: #806840 !important;
    width: auto !important; height: auto !important; transform: none !important;
    font-size: 6.5pt; line-height: 1; top: .42em !important;
  }
  .can-note { color: #16253F !important; }
  .gap { border-left-color: #806840 !important; }
  /* The one colour worth the ink: a highlight that is not visibly a highlight
     is a fact stated as fact, which is the thing we must not do. */
  /* The dashed rule is the belt to the highlight's braces: a browser printing
     with background graphics off would drop the yellow, and an unconfirmed fact
     that prints looking confirmed is the one failure this page cannot have.
     Every .confirm also says so in words for the same reason. */
  .confirm {
    background: #FFF1A8 !important; color: #1B1D22 !important;
    border-bottom: .75pt dashed #806840;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* Was: the simplified can replaces the full render. Condensation is gone from the range
     since 2026-11-02, so the two are identical and this is inert. The original reason: 
     hundreds of nodes and a navy can is a solid block of ink. */
  .can-well { display: none !important; }
  .can-slot { grid-template-columns: 1fr; }
  /* Empty slot: the dashed holding box, at the size the can would have been. */
  .can-well-print {
    display: grid !important; max-width: 1.15in;
    border: 1px solid #16253F !important; background: none !important;
  }
  /* Filled: no holding box, and narrower. The width is what keeps the sheet to two sides - a can
     is 2.14x as tall as it is wide, so at 1in it was the tallest thing in both drink rows and
     pushed the footer onto a third page. At 0.85in the can is shorter than its own spec list, so
     the rows are set by the facts again rather than by the artwork. Declared last as well as
     more specific: a later, looser rule would win for any reader - human or test - who resolves
     the cascade by document order. */
  .can-well-print.filled { border: 0 !important; max-width: .85in !important; }

  /* Tighten to the sheet. */
  .masthead { padding: 0 0 .13in !important; border-bottom: 1.5pt solid #806840; }
  .mast-inner { grid-template-columns: .85in 1fr; gap: .22in; padding: 0 !important; }
  .masthead .seal { width: .85in !important; height: .85in !important; }
  .masthead h1 { font-size: 24pt !important; margin: .04in 0 .06in !important; }
  .wrap { max-width: none !important; padding: 0 !important; }
  .band, section#drinks, .order { padding: .15in 0 !important; }
  footer { padding: .1in 0 0 !important; }
  .band h2, #drinks h2, #order h2 { font-size: 14pt !important; margin: .04in 0 .1in !important; }
  .drink-sheet { padding: .1in 0 !important; gap: .22in !important; grid-template-columns: 1.15in 1fr !important; }
  .drink-sheet h3 { font-size: 13pt !important; }
  .three, .why { gap: .05in !important; margin-top: .08in !important; }
  /* A sheet of Letter is 7.5in of content, which is inside the 54rem phone breakpoint, so the
     phone's stacked label-over-value rows would otherwise be what prints. On paper there is room
     for the spec-sheet layout, and it saves most of a page. */
  .specs { gap: .035in !important; }
  .specs > div, .order-card > div { grid-template-columns: 1.15in 1fr !important; gap: .14in !important; }
  .can-slot { justify-items: center !important; }
  .can-note { max-width: 1.3in; }
  .accounts { margin-top: .16in !important; }
  .account-list { grid-template-columns: repeat(3, 1fr) !important; gap: .03in .18in !important; }
  .foot { display: block !important; }
  .foot img { display: none !important; }
  .foot .legal { text-align: left !important; margin-top: .06in; }

  /* A fact must never be split across two sheets. */
  .drink-sheet, .can-slot, .order-card, .gap, .accounts, .three li, .why li,
  .specs > div, .order-card > div { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  .band, .order { break-before: auto; }

  /* A printed page cannot be clicked, so the addresses behind the links get
     printed out. The placeholder tel: is excluded - there is nothing to print
     until the distributor's number lands, and " ()" after it would read as a
     mistake rather than a gap. */
  #order a[href^="tel:"]:not([href="tel:"])::after,
  #order a[href^="mailto:"]::after,
  #order a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; }
  a { text-decoration: none; }
}