/* /brands (brands.html): the letter row, then a group a letter, a grid of logo tiles in their colours; with brand-grey on <html>
   (the toggle under the last group) a logo is grayscale until hovered or focused, the hover the
   spotlight of the prototype (docs/prototype-2026-10-26-brands-hover.md, look A), drawn by js/brands.js's layers below.
   Loaded after site.css into the site layer; the shell's classes (.wrap) are site.css's. */
@layer site {
  .brandpage { padding-top: 24px; padding-bottom: 48px; }
  .brandpage__h1 { font-size: 28px; margin-bottom: 16px; }
  /* the switch under the heading: two square links side by side, the one shown filled */
  .brandpage__only { display: flex; flex-wrap: wrap; margin: 0 0 16px; }
  .brandpage__only a { display: grid; place-items: center; height: 40px; padding: 0 14px; border: 1px solid var(--dove); background: var(--white); color: var(--ink); text-decoration: none; font-weight: 600; }
  .brandpage__only a:first-child { border-radius: var(--r) 0 0 var(--r); }
  .brandpage__only a:last-child { border-left: 0; border-radius: 0 var(--r) var(--r) 0; }
  .brandpage__only a:hover, .brandpage__only a:focus-visible { background: var(--cream); }
  .brandpage__only a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
  .brandpage__letters { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 24px; }
  .brandpage__letters a { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border: 1px solid var(--dove); border-radius: var(--r); text-decoration: none; font-weight: 600; color: var(--ink); }
  .brandpage__letters a:hover, .brandpage__letters a:focus-visible { background: var(--cream); border-color: var(--ink); }
  .brandgroup { margin-bottom: 28px; scroll-margin-top: 16px; }
  .brandgroup__h2 { font-size: 18px; margin-bottom: 8px; }
  .brandgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); border-top: 1px solid var(--dove); border-left: 1px solid var(--dove); }
  .brandtile { display: grid; grid-auto-rows: auto; align-content: center; place-items: center; gap: 8px; min-height: 96px; padding: 14px; border-right: 1px solid var(--dove); border-bottom: 1px solid var(--dove); text-decoration: none; color: var(--ink); text-align: center; }
  .brandtile:hover, .brandtile:focus-visible { background: var(--cream); }
  .brandtile img { max-height: 48px; max-width: 100%; object-fit: contain; transition: filter .15s, opacity .15s; }
  .brandtile__name { font-weight: 600; font-size: 14px; line-height: 1.25; }
  .brandtile__count { font-size: 13px; font-variant-numeric: tabular-nums; }
  .brandpage__empty { font-size: 16px; }
  /* in the dark a tile stays a white plate with its words in ink, since the logos are drawn for white; the grid's rules go dark */
  :root[data-parts-theme="dark"] .brandtile { --ink: #1a1613; --cream: #f9f8f6; --sand-2: #e8e1d6; --white: #fff; }
  :root[data-parts-theme="dark"] .brandtile:not(:hover, :focus-visible) { background: var(--plate); }

  /* The toggle under the last group, left; with brand-grey on <html> every logo is grey until hovered or focused, and the spotlight
     reveals its colours from the cursor. */
  .brandpage__foot { margin: 4px 0 0; }
  .brandpage__toggle { height: 40px; padding: 0 14px; border: 1px solid var(--dove); border-radius: var(--r); background: var(--white); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
  .brandpage__toggle:hover { background: var(--cream); border-color: var(--ink); }
  .brandpage__toggle[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
  html.brand-grey .brandtile img { filter: grayscale(1); opacity: .85; }
  html.brand-grey .brandtile:hover img, html.brand-grey .brandtile:focus-visible img { filter: none; opacity: 1; }

  @media (max-width: 480px) {
    .brandgrid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    .brandtile { min-height: 96px; padding: 10px 8px 8px; }
    .brandtile img { max-height: 40px; }
  }
}

@property --spot-r { syntax: '<length-percentage>'; inherits: false; initial-value: 0px; }

@layer site {
  /* The spotlight (js/brands.js): the cursor is a light. The script gives each tile a spot layer and a colour copy of its logo and marks
     it .is-lit on a pointer device; --x/--y place the light (px in the tile), --mx/--my the colour circle (px in the logo). The light is a
     fixed-size glow moved by transform; the colour copy is revealed by clip-path from the cursor outwards, and the cell lifts 2px. */
  .brandtile.is-lit { position: relative; z-index: 0; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
  .brandtile.is-lit:hover, .brandtile.is-lit:focus-visible { z-index: 1; background: transparent; transform: translateY(-2px); }

  /* The lift's shadow, faded by opacity alone. */
  .brandtile.is-lit::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    box-shadow: 0 10px 22px -8px rgba(26, 22, 19, .32), 0 2px 4px rgba(26, 22, 19, .08); opacity: 0; transition: opacity .4s ease-out; }
  .brandtile.is-lit:hover::after, .brandtile.is-lit:focus-visible::after { opacity: 1; transition-duration: .2s; }
  /* A strip under the lifted cell keeps the pointer on it, so its bottom edge never flickers. */
  .brandtile.is-lit::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 4px; }

  /* The cell under the light: a sand ground and a soft white glow that follows the cursor. */
  .brandtile__spot { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: var(--sand-2);
    opacity: 0; transition: opacity .4s ease-out; }
  .brandtile__spot::before { content: ""; position: absolute; left: -145px; top: -145px; width: 290px; height: 290px;
    background: radial-gradient(closest-side, #fff 0, #fff 22%, rgba(255, 255, 255, .55) 55%, rgba(255, 255, 255, 0));
    transform: translate(var(--x, 0px), var(--y, 0px)); transition: transform .06s linear; }
  .brandtile.is-lit:hover > .brandtile__spot, .brandtile.is-lit:focus-visible > .brandtile__spot { opacity: 1; transition-duration: .2s; }

  /* In grey mode the grey logo stays grey under the light; its colour copy sits on it in the same grid cell. */
  .brandtile.is-lit > img { grid-area: 1 / 1; position: relative; z-index: 1; }
  .brandtile.is-lit > .brandtile__name { position: relative; z-index: 1; }
  .brandtile.is-lit > .brandtile__count { grid-row: 2; position: relative; z-index: 1; }
  html.brand-grey .brandtile.is-lit:hover > img:not(.brandtile__lit),
  html.brand-grey .brandtile.is-lit:focus-visible > img:not(.brandtile__lit) { filter: grayscale(1); opacity: .85; }
  .brandtile.is-lit > .brandtile__lit { z-index: 2; filter: none; opacity: 0;
    clip-path: circle(var(--spot-r) at var(--mx, 50%) var(--my, 50%)); transition: opacity .4s ease-out, --spot-r 0s .4s; }
  .brandtile.is-lit:hover > .brandtile__lit, .brandtile.is-lit:focus-visible > .brandtile__lit {
    --spot-r: 150%; opacity: 1; transition: --spot-r .25s cubic-bezier(.4, .1, .3, 1), opacity .08s; }

  /* Reduced motion: no light, no lift, a plain cross-fade to colour. */
  @media (prefers-reduced-motion: reduce) {
    .brandtile.is-lit, .brandtile.is-lit:hover, .brandtile.is-lit:focus-visible { transform: none; transition: none; }
    .brandtile.is-lit::after, .brandtile__spot::before { display: none; }
    .brandtile__spot { background: var(--cream); }
    .brandtile.is-lit > .brandtile__lit, .brandtile.is-lit:hover > .brandtile__lit,
    .brandtile.is-lit:focus-visible > .brandtile__lit { clip-path: none; transition: opacity .2s; }
  }

  /* A touch screen has no hover: the tile is a plain link, nothing sticks after a tap. */
  @media (hover: none) {
    .brandtile:hover:not(:focus-visible) { background: none; }
    html.brand-grey .brandtile:hover:not(:focus-visible) img { filter: grayscale(1); opacity: .85; }
  }
}