/* ============================================================================
   Bunker Corporation — group layer
   ----------------------------------------------------------------------------
   Loads AFTER style.css and consumes its tokens without redefining them, so the
   group page and the division sites are visibly one family.

   The wordmark is LIVE TEXT, not an image. The owner's instruction was to set
   the parent brand in type and invent no mark, and text is the honest form of
   that: it stays crisp at every size and zoom, it is selectable and readable by
   a screen reader, it costs no bytes, and there is no raster to go stale if the
   brand is ever redrawn. An image of type would only be a worse copy of this.
   ========================================================================= */

.bc-hero{position:relative;padding-block:clamp(96px,14vh,150px) clamp(56px,7vh,84px);text-align:center;overflow:clip}
.bc-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 70% at 50% 0%,rgba(127,212,255,.09),transparent 62%);
}

/* clamp() keeps the two words on their own lines at every width without a
   media query; the tracking tightens as the viewport narrows so CORPORATION —
   the longer word — never sets the page's minimum width. */
.bc-wordmark{
  font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(1.9rem,8.2vw,5rem);line-height:1.04;margin:0 0 1.4rem;
  letter-spacing:clamp(.02em,.9vw,.14em);text-transform:uppercase;
}
.bc-wordmark span{display:block}

.bc-mark{
  display:block;margin:0 auto 1.6rem;height:auto;
  width:clamp(104px,15vw,184px);
}
.bc-lead{max-width:46ch;margin:0 auto;color:var(--ink-2)}

/* style.css caps paragraph width for readability. In a centred hero that makes
   the BOX narrow and left-aligned, so the text centres inside it and the line
   reads as left-aligned next to the wordmark, which is centred on the full
   width. Centre the boxes too, or the hero looks misaligned without any single
   element being wrong. */
.bc-hero .kicker,.bc-hero .bc-meta{max-width:none;margin-inline:auto}
.bc-meta{
  margin-top:2.2rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
}

/* Mono labels inherited .64rem = 10.24px, which is too small to read
   comfortably at any width, not only at 360. Raised to .72rem = 11.52px across
   the group page. Applied at every width rather than behind a breakpoint,
   because 10px text is not more legible on a large screen — it is just further
   away from the reader's eye. */
.bc-hero .kicker,.section .kicker,.division .n,.division .role,.cell .n{font-size:.72rem}

/* ---------- the two divisions -------------------------------------------- */
.divisions{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:860px){.divisions{grid-template-columns:1fr 1fr}}
.division{background:var(--bg-2);padding:2rem 1.9rem;display:flex;flex-direction:column;min-width:0}
.division .n{font-family:var(--mono);letter-spacing:.2em;color:var(--cyan);margin-bottom:.9rem}
/* The three marks have very different proportions — the arch is 2.12:1, the
   brackets 1.03:1, the monogram 0.76:1. Normalising on HEIGHT is what makes a
   row of them look like one set; matching widths would make the monogram tower
   over the brackets. */
.division .dm{
  display:block;width:auto;height:46px;margin-bottom:1rem;opacity:.92;
  /* .division is a COLUMN flex container, so align-items defaults to stretch and
     stretches children across the cross axis — width. On a normal div that is
     invisible; on a replaced element it overrides width:auto and squashes the
     artwork to the full cell width at the fixed height. align-self:flex-start
     opts this one child out, restoring the intrinsic ratio. */
  align-self:flex-start;
}
.division h3{font-family:var(--display);font-size:1.45rem;font-weight:700;margin-bottom:.3rem;color:var(--ink)}
.division .role{
  font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:1.1rem;display:block;
}
.division p{font-size:.94rem;margin:0 0 1.6rem;max-width:none}
.division .go{margin-top:auto}

/* ---------- brand map -----------------------------------------------------
   A real nested <ul>, not divs: the hierarchy IS the content here, so a screen
   reader should hear "list, 2 items, list of 3 items" rather than a flat run of
   names. The connector lines are drawn with borders on ::before/::after so they
   scale with the type and disappear cleanly at 360 without a media query
   rewriting the structure. */
.bmap,.bmap ul{list-style:none;margin:0;padding:0}
.bmap ul{margin-left:.85rem;padding-left:1.35rem;border-left:1px solid var(--line-2)}
.bmap li{position:relative;padding:.55rem 0 .55rem 0}
.bmap ul > li::before{
  content:"";position:absolute;left:-1.35rem;top:1.35rem;width:1.05rem;
  border-top:1px solid var(--line-2);
}
/* Square off the last child's connector so the vertical rule stops at it
   instead of running past the final item into empty space. */
.bmap ul > li:last-child::after{
  content:"";position:absolute;left:calc(-1.35rem - 1px);top:calc(1.35rem + 1px);bottom:0;
  border-left:1px solid var(--bg);
}
.bmap-root{padding-top:0}
.bmap-name{
  font-family:var(--display);font-weight:600;color:var(--ink);font-size:1.02rem;
  display:inline-block;text-decoration:none;
}
a.bmap-name{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
a.bmap-name:hover,a.bmap-name:focus-visible{text-decoration-color:var(--cyan)}
.bmap-root > .bmap-name{font-size:1.25rem;letter-spacing:.01em}
.bmap-role{display:block;font-size:.9rem;color:var(--ink-3);max-width:62ch;margin-top:.12rem}
.bmap-role a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.bmap-role a:hover,.bmap-role a:focus-visible{color:var(--ink);text-decoration-color:var(--cyan)}
/* "coming soon" is a status, not emphasis — but <em> carries the right meaning
   for a reader who cannot see the styling. */
.soon{
  font-family:var(--mono);font-style:normal;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cyan);border:1px solid var(--cyan-dim);
  padding:.14rem .45rem;margin-left:.4rem;white-space:nowrap;
}
/* Marks sit inline with the name at cap height. align-self is irrelevant here
   (these are not flex children) but width:auto still needs guarding against the
   global img rule, hence the explicit pair. */
.bmap .bmark{display:inline-block;width:auto;height:19px;vertical-align:-3px;margin-right:.5rem;opacity:.9}
.bmap-note{margin-top:2rem;font-size:.88rem;color:var(--ink-3);max-width:62ch}

/* ---------- legal line ---------------------------------------------------- */
.legal-line{
  margin-top:2.5rem;border:1px solid var(--line);border-left:2px solid var(--ink-3);
  background:var(--bg-2);padding:1.1rem 1.3rem;
}
.legal-line p{margin:0;font-size:.88rem;color:var(--ink-3);max-width:none}
.legal-line strong{color:var(--ink-2);font-weight:600}

footer .wrap{min-width:0}
footer .mark{width:auto;height:20px;opacity:.75}

/* Footer links were 19px tall — under the 24px minimum in WCAG 2.5.8 Target
   Size. Padding is on the link itself, not the row, so the padded area is
   actually clickable rather than merely spaced. Coarse pointers get the full
   44px touch target; the row's flex gap absorbs the extra height. */
footer a{display:inline-block;padding-block:.45rem;line-height:1.25}
@media (pointer:coarse){footer a{padding-block:.85rem}}
footer .spacer{max-width:52ch;text-align:right}
@media (max-width:720px){footer .spacer{margin-left:0;text-align:left}}