/* ===========================================================================
   polish.css — the pass that separates "built" from "designed".

   Loaded last (after motion.css, before nojs.css) so it can refine what the
   component sheets establish without any of them having to know about it.

   The brief was "it looks cheap". Four things were actually causing that, in
   order of damage:

     1. The photography was an unmatched pile. Studio-on-white catalogue tiles
        sat next to phone snapshots of a warehouse; nothing tied them together,
        so the page read as assembled from whatever was lying around. ONE grade
        across every content photograph fixes more than any layout change.
     2. Every hairline was the same weight and colour, so nothing was ranked —
        a table rule shouted as loudly as a card edge.
     3. Small text was all one size and one grey: label, caption, sub and body
        collapsed into a single mass with no reading order.
     4. The grounds were perfectly flat digital colour. Real paper is not.

   No new tokens are invented here; everything below composes tokens.css.
   ======================================================================== */


/* === 1 · One grade for every content photograph ==========================
   Pulls the saturation out of the loud studio tiles, lifts contrast slightly,
   and warms everything a few degrees toward the kraft ground so a phone
   snapshot and a catalogue shot look like they came from the same shoot.
   Deliberately NOT applied to: the backdrop (the shader grades that), the
   logo cube (a mark, not a photograph), or the map. */
.plate img,
.cut img,
.about__photo img,
.band .panel[data-kind="photo"] img,
.preview{
  filter: saturate(0.78) contrast(1.05) brightness(1.01) sepia(0.06);
}

/* The carbon leaf is the one dark ground; its images need the opposite
   correction or they sink into the plate. */
[data-plate="carbon"] .insets img{
  filter: saturate(0.7) contrast(1.12) brightness(1.06);
}

/* A photograph on this site is always a tipped-in plate: one hairline, square
   corners bar a 2px softening, and never a drop shadow. Consistency here is
   most of what reads as "art directed". */
.plate,
.cut,
.about__photo img,
.band .panel[data-kind="photo"],
.preview{
  border-radius: 2px;
}


/* === 2 · Hairlines, ranked ================================================
   Three weights instead of one. The eye needs to know which line is structure
   and which is just separation. */

/* Table separators are the quietest line on the page — they organise, they do
   not divide. */
.manifest tbody tr,
.index tbody tr,
.locations li{
  border-color: color-mix(in srgb, var(--on-rule) 62%, transparent);
}

/* A header rule is structure: it gets full weight. */
.manifest thead th,
.index thead th{
  border-bottom-color: var(--on-rule);
}

/* Panel edges sit on photographs and must survive against a busy image, so
   they stay at the strong end. */
.plate,
.cut,
.band .panel[data-kind="photo"]{
  box-shadow: inset 0 0 0 1px var(--panel-edge);
}


/* === 3 · Small type, ranked ===============================================
   --t-label was doing four different jobs in one size and one colour. Tracking
   and weight now separate them; size stays put so nothing reflows. */

/* Column headers and eyebrow labels: the most "system" voice on the page. */
.manifest thead th,
.index thead th{
  font-variation-settings: "wdth" 84, "wght" 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-soft);
}

/* Parentheticals are asides, not labels — they should whisper, and italics
   read as an aside far better than more grey does. */
.above,
.note,
table caption,
.about__photo figcaption{
  font-style: italic;
  letter-spacing: 0.005em;
}

/* A product's form list is data. Tabular figures and a narrower cut make it
   read as a spec line rather than prose. */
.index .forms,
.plate ~ .forms,
.forms{
  font-variation-settings: "wdth" 92;
  letter-spacing: 0.012em;
}


/* === 4 · Paper, not screen ================================================
   A very fine grain over the card ground. At 3.5% it is invisible as texture
   and only reads as "this surface is a material". Inline SVG so there is no
   extra request, and pointer-events:none so it never intercepts anything. */
.card .grounds::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* On carbon the grain must lighten, not darken, or it just muddies the black. */
.card[data-plate="carbon"] .grounds::after{
  mix-blend-mode: screen;
  opacity: 0.05;
}


/* === 5 · States that look designed ========================================
   Hover and focus were browser defaults in several places, which is the
   quickest way to look unfinished. */

/* Index rows: the whole row responds, the rule darkens, the name shifts a
   hair. No colour change — restraint is the point. */
.index tbody tr{
  transition: background-color var(--d-row) var(--e-lay);
}
.index tbody tr:hover{
  background-color: color-mix(in srgb, var(--on-plate) 3.5%, transparent);
}
.index .name a{
  text-decoration: none;
  transition: color var(--d-row) var(--e-lay);
}
.index tbody tr:hover .name a{ color: var(--seal-blue) }

/* Links get a drawn underline rather than the default, and it draws from the
   left on the way in and clears to the right on the way out. */
.colophon a,
.menu .links a,
.about__reviews a{
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--d-row) var(--e-lay);
}
.colophon a:hover,
.menu .links a:hover,
.about__reviews a:hover{ background-size: 100% 1px }

/* One focus ring, everywhere, and it is never the browser's. */
:focus-visible{
  outline: 2px solid var(--seal-blue);
  outline-offset: 3px;
  border-radius: 1px;
}
[data-plate="carbon"] :focus-visible,
.card[data-plate="carbon"] :focus-visible{
  outline-color: var(--focus-dark);
}


/* === 6 · Optical corrections ==============================================
   The things that are wrong by measurement and right by eye. */

/* Bodoni's caps sit optically low against a hairline; nudge the giant word up
   a fraction so it looks centred rather than measuring centred. */
.glyphs{ transform: translateY(-0.012em) }

/* Uppercase pills read tight at small sizes; the descender-free line box makes
   them look bottom-heavy without a hair of extra leading. */
.pill{ line-height: 1.15 }

/* A number column should never be ragged. */
.index .num,
.manifest td,
.stat__num,
.review .what{ font-variant-numeric: tabular-nums lining-nums }


/* === 7 · Reduced motion ==================================================== */
@media (prefers-reduced-motion: reduce){
  .index tbody tr,
  .colophon a,
  .menu .links a,
  .about__reviews a,
  .index .name a{ transition: none }
}