/* ==========================================================================
   icon-project.css — the Icon Project exhibition
   --------------------------------------------------------------------------
   Carbon ground, Bone type, Acid reserved for the one graphic that is being
   argued about, and Radikal for the page's own voice. The rule the palette
   sets is followed literally: Acid appears only against Carbon, never on Bone
   and never as reading type.

   Contrast, measured against the actual composited ground rather than a token
   pair:  Bone #F2EFE9 on Carbon #171717 = 15.6:1.  Acid #DFFF00 on Carbon =
   15.7:1.  Carbon on Bone = 15.6:1.  The muted rail ink is set from Bone at
   62%, which composites to 8.0:1 — metadata is never thinner than that.

   Every specimen states its ground and its ink together, because the defect
   this page is correcting was a dark source glyph printed on a dark plate and
   a light metric strip inheriting light type.
   ========================================================================== */

@font-face{font-family:'RadikalRec';src:url('../fonts/radikal/radikal-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'RadikalRec';src:url('../fonts/radikal/radikal-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'RadikalRec';src:url('../fonts/radikal/radikal-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'RadikalRec';src:url('../fonts/radikal/radikal-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* Public Sans is the ONE typeface on this site with a real binary, so it is the
   one the comparison specimen can honestly be set in. The page was already
   preloading the file; without this declaration the preload was wasted and
   `font-family:'Public Sans'` fell through to system-ui — a fallback face
   wearing another family's name, which is the exact thing this page argues
   against. Declared here so the specimen is what it says it is. */
@font-face{
  font-family:'Public Sans';
  src:url('../fonts/victory/public-sans-variable.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}

.ip{
  --carbon:#171717;
  --bone:#F2EFE9;
  --acid:#DFFF00;
  --ip-ink:var(--bone);
  --ip-mute:rgba(242,239,233,.62);
  --ip-label:rgba(242,239,233,.72);
  --ip-line:rgba(242,239,233,.16);
  --ip-line-2:rgba(242,239,233,.09);
  --ip-plate:#1F1F1F;
  --ip-ui:'RadikalRec',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

  --ip-max:1320px;
  --ip-gutter:clamp(24px,5vw,88px);
  --ip-gap:clamp(20px,2vw,32px);
  --ip-section:clamp(64px,7vw,112px);

  --is-1:8px; --is-2:12px; --is-3:16px; --is-4:24px;
  --is-5:32px; --is-6:48px; --is-7:64px; --is-8:96px;

  --t-thesis:clamp(40px,6.2vw,92px);
  --t-chapter:clamp(34px,4.2vw,64px);
  --t-lede:clamp(21px,1.9vw,30px);
  --t-body:clamp(17px,1.3vw,20px);
  --t-support:clamp(15px,1.05vw,17px);
  --t-meta:13px;
}

/* --- the one rail -------------------------------------------------------- */
.ip .ip-wrap{
  box-sizing:border-box;
  width:min(calc(100% - 2 * var(--ip-gutter)),var(--ip-max));
  margin-inline:auto;
}
.ip .ip-sec{padding-block:var(--ip-section)}
.ip .ip-sec + .ip-sec{border-block-start:1px solid var(--ip-line-2)}

/* --- the head, one composition for every chapter -------------------------- */
.ip .ip-head{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:0 var(--ip-gap);align-items:end;
}
.ip .ip-head > .ip-k{grid-column:1 / -1;margin:0 0 var(--is-3)}
.ip .ip-head > .ip-h{grid-column:1 / 8;margin:0}
.ip .ip-head > .ip-d{grid-column:9 / -1;margin:0;max-width:34ch}
.ip .ip-k{
  font:700 var(--t-meta)/1.4 var(--ip-ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--acid);
}
.ip .ip-h{
  font-family:var(--ip-ui);font-weight:500;
  font-size:var(--t-chapter);line-height:1.04;letter-spacing:-.025em;
  color:var(--ip-ink);text-wrap:balance;
}
.ip .ip-d{
  font:400 var(--t-body)/1.5 var(--ip-ui);color:var(--ip-mute);text-wrap:pretty;
}
@media (max-width:900px){
  .ip .ip-head{grid-template-columns:minmax(0,1fr)}
  .ip .ip-head > .ip-k,.ip .ip-head > .ip-h,.ip .ip-head > .ip-d{grid-column:1 / -1}
  .ip .ip-head > .ip-d{margin-block-start:var(--is-4);max-width:62ch}
  .ip .ip-br{display:none}
}
.ip .ip-lab{
  margin:var(--is-8) 0 var(--is-4);padding-block-start:var(--is-4);
  border-block-start:1px solid var(--ip-line);
  font:700 11px/1.4 var(--ip-ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ip-label);
}
.ip .ip-note{
  margin:var(--is-6) 0 0;font:400 var(--t-meta)/1.55 var(--ip-ui);
  color:var(--ip-mute);max-width:74ch;
}
.ip .ip-note a{color:var(--ip-ink);text-decoration:none;border-block-end:1px solid var(--acid)}
.ip .ip-note a:hover{color:var(--acid)}

/* --- the hero ------------------------------------------------------------- */
.ip .ip-hero{padding-block:clamp(72px,12vh,176px) var(--ip-section)}
.ip .ip-thesis{
  margin:0;font-family:var(--ip-ui);font-weight:500;
  font-size:var(--t-thesis);line-height:1.02;letter-spacing:-.03em;
  color:var(--ip-ink);max-width:23ch;text-wrap:balance;
}
/* The lede states the problem; the body answers it. Two voices, so the second
   is set at reading weight in the ink colour rather than as more grey support
   text — otherwise the answer reads as a footnote to the complaint. */
.ip .ip-lede{
  margin:var(--is-6) 0 0;font:500 var(--t-lede)/1.4 var(--ip-ui);
  color:var(--ip-ink);max-width:44ch;letter-spacing:-.01em;text-wrap:balance;
}
.ip .ip-body{
  margin:var(--is-5) 0 0;font:400 var(--t-body)/1.6 var(--ip-ui);
  color:var(--ip-mute);max-width:56ch;text-wrap:pretty;
}
.ip .ip-triad{
  list-style:none;margin:var(--is-8) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ip-gap);
}
.ip .ip-triad > li{
  margin:0;min-width:0;padding-block-start:var(--is-4);
  border-block-start:1px solid var(--ip-line);
}
.ip .ip-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--ip-gap);align-items:center;min-height:clamp(120px,15vw,210px)}
.ip .ip-glyph,.ip .ip-mark{display:grid;place-items:center}
.ip .ip-glyph svg{display:block;width:auto;height:clamp(84px,10vw,150px);color:var(--ip-ink)}
.ip .ip-mark svg{display:block;width:clamp(72px,8.6vw,130px);height:auto;color:var(--acid)}
.ip .ip-triad__n{margin:var(--is-4) 0 0;font:500 var(--t-support)/1.3 var(--ip-ui);color:var(--ip-ink)}
.ip .ip-triad__r{
  margin:var(--is-2) 0 0;display:grid;grid-template-columns:1fr 1fr;gap:var(--ip-gap);
  font:400 11px/1.4 var(--ip-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ip-mute);
}
.ip .ip-count{
  list-style:none;margin:var(--is-8) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--is-4) clamp(32px,6vw,96px);
}
.ip .ip-count b{font:500 clamp(20px,2vw,28px)/1.1 var(--ip-ui);color:var(--ip-ink);display:block}
.ip .ip-count span{font:400 var(--t-meta)/1.4 var(--ip-ui);color:var(--ip-mute)}
@media (max-width:860px){
  .ip .ip-triad{grid-template-columns:minmax(0,1fr)}
}

/* --- the controlled comparison -------------------------------------------- */
/* --- the segmented controls, shared by every module on this page --------- */
.ip .ip-seg{display:flex;flex-wrap:wrap;gap:var(--is-1)}
.ip .ip-b{
  border:0;background:none;cursor:pointer;padding:8px 13px;
  font:500 12px/1.3 var(--ip-ui);letter-spacing:.02em;color:var(--ip-mute);
  box-shadow:inset 0 0 0 1px var(--ip-line);
}
.ip .ip-b:hover{color:var(--ip-ink)}
.ip .ip-b[aria-pressed="true"]{color:var(--carbon);background:var(--acid);box-shadow:none}
.ip .ip-b:focus-visible{outline:2px solid var(--acid);outline-offset:3px}

/* --- 01 the matched pair: two screens, one difference ---------------------
   The point of this section is a comparison, so both sides are on screen at
   once and both are big enough to read. The screens are a fixed pair of
   columns on desktop; on a phone they stack, each label immediately above its
   own example rather than in a row of labels at the top.

   EVERYTHING about the two panes is shared except the icons. The type, the
   plate, the radii, the padding, the gaps and the widths all come from the
   same declarations, which is what makes the difference attributable.       */
.ip .ip-cmp{margin-block-start:var(--is-6);display:grid;gap:var(--is-6)}
.ip .ip-cmp__bar{
  display:flex;flex-wrap:wrap;gap:var(--is-2) var(--ip-gap);
  align-items:center;justify-content:space-between;
}
.ip .ip-cmp__barlab{
  margin:0;font:700 11px/1.4 var(--ip-ui);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ip-label);
}
.ip .ip-cmp__pair{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--ip-gap);align-items:start;
}
.ip .ip-cmp__pane{margin:0;min-width:0;display:grid;gap:var(--is-3)}
.ip .ip-cmp__cap{display:grid;gap:4px;order:-1}
.ip .ip-cmp__name{
  font:500 clamp(19px,1.7vw,26px)/1.2 var(--ip-ui);color:var(--ip-ink);
  letter-spacing:-.01em;
}
.ip .ip-cmp__sub{font:400 var(--t-meta)/1.45 var(--ip-ui);color:var(--ip-mute)}

/* The specimen screen. Public Sans is the site's one shippable face, so the
   screen is genuinely set in the typeface it names.

   THE DOUBLED CLASS IS DELIBERATE. type-ownership.css carries a route-wide
   normaliser — `.site-shell :not(.project-content):not(.project-content *)
   { font-family: inherit }` at specificity (0,3,0) — which exists to stop
   stray faces appearing inside a portfolio route. A plain `.ip .ip-cmp__screen`
   is (0,2,0) and loses to it, which silently rendered this specimen in Radikal
   while the caption beside it said Public Sans. That is precisely the failure
   this page argues against, so the selector is raised to (0,3,0) to clear the
   normaliser rather than the declaration being left to lose quietly. */
.ip .ip-cmp__screen.ip-cmp__screen{
  background:var(--bone);color:var(--carbon);border-radius:4px;
  padding:clamp(20px,2vw,32px);
  display:grid;gap:clamp(16px,1.6vw,24px);
  font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  font-weight:600;
}
.ip .ip-cmp__top{display:flex;align-items:center;justify-content:space-between;gap:var(--is-3)}
.ip .ip-cmp__title{
  margin:0;font:600 clamp(18px,1.7vw,24px)/1.25 inherit;color:var(--carbon);
  flex:1 1 auto;min-width:0;
}
.ip .ip-cmp__ic{
  flex:none;display:block;
  width:clamp(26px,2.4vw,34px);height:clamp(26px,2.4vw,34px);
  color:var(--carbon);
}
.ip .ip-cmp__ic svg{display:block;width:100%;height:100%}
.ip .ip-cmp__find{
  display:flex;align-items:center;gap:clamp(12px,1.1vw,16px);
  border:1px solid rgba(23,23,23,.22);border-radius:3px;
  padding:clamp(13px,1.2vw,18px) clamp(14px,1.3vw,20px);
}
.ip .ip-cmp__q{
  flex:1 1 auto;min-width:0;
  font:400 clamp(16px,1.4vw,20px)/1.3 inherit;color:rgba(23,23,23,.5);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ip .ip-cmp__acts{display:flex;flex-wrap:wrap;gap:clamp(8px,.8vw,12px)}
.ip .ip-cmp__act{
  display:inline-flex;align-items:center;gap:clamp(8px,.7vw,11px);
  border:1px solid rgba(23,23,23,.22);border-radius:3px;
  padding:clamp(10px,.9vw,14px) clamp(12px,1.1vw,17px);
  font:500 clamp(14px,1.2vw,17px)/1.2 inherit;color:var(--carbon);
}
.ip .ip-cmp__act .ip-cmp__ic{width:clamp(20px,1.8vw,26px);height:clamp(20px,1.8vw,26px)}

/* The letter beside the lens, at inspection size. The glyph is an outline read
   from the real reference file; it is the same letter in both panes, so the
   only thing that changes across the pair is the icon. */
.ip .ip-cmp__pair--glyph{margin-block-start:calc(var(--is-2) * -1)}
.ip .ip-cmp__gpane{margin:0;min-width:0;display:grid;gap:var(--is-3)}
.ip .ip-cmp__gstage{
  background:var(--ip-plate);border:1px solid var(--ip-line);border-radius:4px;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-items:center;
  gap:var(--ip-gap);padding:clamp(24px,3vw,48px) clamp(16px,2vw,32px);
  min-height:clamp(180px,20vw,300px);
}
.ip .ip-cmp__glyph,.ip .ip-cmp__lens{display:grid;place-items:center;width:100%}
.ip .ip-cmp__glyph svg{display:block;width:auto;height:clamp(96px,11vw,190px);color:var(--ip-ink)}
.ip .ip-cmp__lens svg{display:block;width:clamp(88px,10vw,170px);height:auto;color:var(--acid)}
.ip .ip-cmp__gcap{
  margin:0;font:400 var(--t-meta)/1.6 var(--ip-ui);color:var(--ip-mute);
}
.ip .ip-cmp__gcap b{font-weight:500;color:var(--ip-ink)}
/* Same reason: the letter named in the caption is set in the face it names. */
.ip .ip-cmp .ip-cmp__gcap i{font-style:normal;font-family:'Public Sans',system-ui,sans-serif;font-weight:600}

/* The statement that carries the section. It sits between the comparison and
   the fine print with room around it, at reading size rather than note size. */
.ip .ip-say{
  margin:var(--is-7) 0 0;max-width:38ch;
  font:500 clamp(21px,2.1vw,34px)/1.32 var(--ip-ui);
  color:var(--ip-ink);letter-spacing:-.015em;text-wrap:balance;
}

@media (max-width:900px){
  /* Stacked, and each label stays with its own example. */
  .ip .ip-cmp__pair{grid-template-columns:minmax(0,1fr);gap:var(--is-6)}
  .ip .ip-cmp__gstage{min-height:0;padding:var(--is-5) var(--is-4)}
  .ip .ip-cmp__acts{gap:8px}
}
@media (max-width:520px){
  .ip .ip-cmp__acts{display:grid;grid-template-columns:1fr 1fr}
  .ip .ip-cmp__act{justify-content:flex-start}
}

/* An empty result is a sentence, not a blank grid. */
.ip .ip-atlas__empty{
  margin:var(--is-5) 0 0;padding:var(--is-5) 0;
  border-block-start:1px solid var(--ip-line-2);
  font:400 var(--t-body)/1.55 var(--ip-ui);color:var(--ip-mute);max-width:56ch;
}

/* --- the anatomy explorer ------------------------------------------------- */
.ip .ip-an{margin-block-start:var(--is-6);display:grid;gap:var(--is-5)}
.ip .ip-an__bar{display:flex;flex-wrap:wrap;gap:var(--is-3) var(--ip-gap);align-items:end;
  padding-block-end:var(--is-4);border-block-end:1px solid var(--ip-line)}
.ip .ip-an__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ip-gap)}
.ip .ip-an__col{display:grid;gap:0;min-width:0;padding-block-start:var(--is-4);border-block-start:1px solid var(--ip-line)}
.ip .ip-an__ck{margin:0 0 var(--is-4);font:700 11px/1.4 var(--ip-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ip-label)}
/* Each stage names its ground and its ink in the same rule: the two dark
   plates take Bone and Acid, the application plate takes Bone ground and
   Carbon ink. Neither can inherit the wrong one. */
.ip .ip-an__stage{
  display:grid;place-items:center;aspect-ratio:3 / 2;
  padding:clamp(18px,2.6vw,40px);box-sizing:border-box;position:relative;
}
.ip .ip-an__stage--source{background:var(--ip-plate);color:var(--bone)}
.ip .ip-an__stage--icon{background:var(--ip-plate);color:var(--acid)}
.ip .ip-an__stage--use{background:var(--bone);color:var(--carbon)}
.ip .ip-an__stage svg{display:block;max-width:100%;max-height:100%;width:auto;height:100%;color:inherit}
.ip .ip-an__stage--use .ip-row{width:min(100%,420px);background:#fff}
.ip .ip-an__t{margin:var(--is-4) 0 0;font:500 clamp(17px,1.6vw,22px)/1.24 var(--ip-ui);color:var(--ip-ink)}
.ip .ip-an__d{margin:var(--is-2) 0 0;font:400 var(--t-meta)/1.5 var(--ip-ui);color:var(--ip-mute);max-width:36ch}
/* the metric rail: derived from the exact font file, never from a guess */
.ip .ip-an__rail{
  display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));
  gap:var(--is-2) var(--ip-gap);align-items:baseline;
  padding-block-start:var(--is-4);border-block-start:1px solid var(--ip-line);
}
.ip .ip-an__rk{margin:0;font:700 11px/1.5 var(--ip-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ip-label)}
.ip .ip-an__rv{margin:0;font:400 var(--t-meta)/1.5 var(--ip-ui);color:var(--ip-ink)}
.ip .ip-an__rv b{color:var(--ip-mute);font-weight:400}
@media (max-width:900px){
  .ip .ip-an__cols{grid-template-columns:minmax(0,1fr)}
  .ip .ip-an__rail{grid-template-columns:minmax(0,1fr)}
}

/* --- the collection board ------------------------------------------------- */
.ip .ip-board{
  list-style:none;margin:var(--is-6) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--is-7) var(--ip-gap);
}
.ip .ip-board > li{margin:0;min-width:0;padding-block-start:var(--is-4);border-block-start:1px solid var(--ip-line)}
.ip .ip-board__f{margin:0;font:500 clamp(17px,1.5vw,21px)/1.2 var(--ip-ui);color:var(--ip-ink)}
.ip .ip-board__w{margin:4px 0 0;font:400 var(--t-meta)/1.4 var(--ip-ui);color:var(--ip-mute)}
.ip .ip-board__s{display:flex;flex-wrap:wrap;gap:clamp(8px,1.2vw,16px);margin-block-start:var(--is-4);min-height:34px;align-items:center}
.ip .ip-board__s .ip-ic{width:26px;height:26px;color:var(--ip-ink);flex:none}
.ip .ip-board__n{margin:var(--is-3) 0 0;font:500 var(--t-meta)/1.4 var(--ip-ui);color:var(--acid)}
@media (max-width:1200px){.ip .ip-board{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.ip .ip-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Below this the two-up cell is narrower than its own four-icon strip, so the
   board goes to one column rather than clipping the strip. Checked at 320px and
   again at 200% zoom, where the layout viewport is half as wide. */
@media (max-width:440px){.ip .ip-board{grid-template-columns:minmax(0,1fr);gap:var(--is-5)}}

/* --- the atlas ------------------------------------------------------------ */
.ip .ip-atlas{margin-block-start:var(--is-6)}
.ip .ip-atlas__bar{display:flex;flex-wrap:wrap;gap:var(--is-3) var(--ip-gap);align-items:end;
  padding-block-end:var(--is-4);border-block-end:1px solid var(--ip-line)}
.ip .ip-atlas__find{display:flex;align-items:center;gap:var(--is-2);margin-inline-start:auto;flex-wrap:wrap}
.ip .ip-atlas__count{margin:0;font:700 11px/1.4 var(--ip-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ip-label);white-space:nowrap}
.ip .ip-atlas__search{
  border:0;box-shadow:inset 0 0 0 1px var(--ip-line);background:transparent;
  color:var(--ip-ink);font:400 13px/1 var(--ip-ui);padding:10px 12px;min-width:min(100%,240px);
}
.ip .ip-atlas__search::placeholder{color:var(--ip-mute)}
.ip .ip-atlas__search:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
.ip .ip-atlas__fam{margin:var(--is-6) 0 var(--is-3);font:700 11px/1.4 var(--ip-ui);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ip-label)}
.ip .ip-atlas__grid{
  list-style:none;margin:var(--is-4) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--is-3);
}
@media (max-width:440px){
  .ip .ip-atlas__grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
}
.ip .ip-atlas__cell{margin:0;min-width:0}
.ip .ip-atlas__b{
  display:grid;gap:6px;width:100%;border:0;background:none;padding:0;cursor:pointer;text-align:left;
}
.ip .ip-atlas__b:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
/* Bone specimen plates. The masters carry fill="currentColor", and an external
   SVG in an <img> resolves that to its own initial black — so the plate under
   it is the light one, and the icon is legible without the page reaching
   inside a document it does not own. */
.ip .ip-atlas__plate{
  background:var(--bone);aspect-ratio:1;display:grid;place-items:center;padding:22%;
  box-sizing:border-box;transition:box-shadow .16s ease;
}
.ip .ip-atlas__b:hover .ip-atlas__plate{box-shadow:inset 0 0 0 2px var(--acid)}
.ip .ip-atlas__plate img{display:block;width:100%;height:100%;object-fit:contain}
.ip .ip-atlas__n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font:400 11px/1.35 var(--ip-ui);color:var(--ip-mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ip .ip-atlas__more{display:flex;justify-content:center;margin-block-start:var(--is-6)}
.ip .ip-atlas__more button{
  border:0;cursor:pointer;background:none;color:var(--ip-ink);
  font:700 11px/1 var(--ip-ui);letter-spacing:.14em;text-transform:uppercase;
  padding:14px 22px;box-shadow:inset 0 0 0 1px var(--ip-line);
}
.ip .ip-atlas__more button:hover{box-shadow:inset 0 0 0 2px var(--acid)}
.ip .ip-atlas__more button:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.ip .ip-atlas__fallback{margin:var(--is-5) 0 0}

/* --- the inspector -------------------------------------------------------- */
.ip-lock,.ip-lock body{overflow:hidden}
.ip .ip-insp{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:clamp(10px,2.4vw,32px)}
.ip .ip-insp[hidden]{display:none !important}
.ip .ip-insp__scrim{position:absolute;inset:0;background:rgba(5,5,5,.92)}
.ip .ip-insp__panel{
  position:relative;width:min(880px,100%);max-height:92vh;overflow:auto;
  background:var(--ip-plate);box-shadow:0 10px 40px rgba(0,0,0,.5);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"bar bar" "stage meta" "stage nav";
  gap:var(--is-4) var(--ip-gap);padding:var(--is-5);align-content:start;
}
.ip .ip-insp__bar{grid-area:bar;display:flex;align-items:center;gap:var(--is-4);
  padding-block-end:var(--is-3);border-block-end:1px solid var(--ip-line)}
.ip .ip-insp__bar p{margin:0;font:700 11px/1.4 var(--ip-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ip-label)}
.ip .ip-insp__bar p:first-child{flex:1 1 auto}
.ip .ip-insp__stage{grid-area:stage;background:var(--bone);display:grid;place-items:center;
  padding:clamp(24px,4vw,56px);height:clamp(220px,32vh,300px);box-sizing:border-box}
.ip .ip-insp__stage img{display:block;width:100%;height:100%;object-fit:contain}
.ip .ip-insp__meta{grid-area:meta;align-self:start}
.ip .ip-insp__n{margin:0;font:500 clamp(21px,2vw,28px)/1.15 var(--ip-ui);color:var(--ip-ink)}
.ip .ip-insp__spec{margin:var(--is-4) 0 0;display:grid;grid-template-columns:minmax(0,11ch) minmax(0,1fr);
  column-gap:var(--is-4);row-gap:6px;align-items:baseline}
.ip .ip-insp__spec dt{margin:0;font:700 11px/1.5 var(--ip-ui);letter-spacing:.09em;text-transform:uppercase;color:var(--ip-label)}
.ip .ip-insp__spec dd{margin:0;font:400 13px/1.5 var(--ip-ui);color:var(--ip-ink)}
.ip .ip-insp__sizes{grid-area:nav;display:flex;align-items:flex-end;gap:clamp(12px,2vw,26px);
  background:var(--bone);color:var(--carbon);padding:14px 16px;align-self:end;flex-wrap:wrap}
.ip .ip-insp__sz{display:grid;justify-items:center;gap:5px}
.ip .ip-insp__sz img{display:block}
.ip .ip-insp__sz span{font:400 10px/1 var(--ip-ui);color:rgba(23,23,23,.62)}
.ip .ip-insp__close{border:0;background:none;cursor:pointer;padding:8px 13px;
  font:500 12px/1.3 var(--ip-ui);color:var(--ip-mute);box-shadow:inset 0 0 0 1px var(--ip-line)}
.ip .ip-insp__close:hover{color:var(--acid)}
.ip .ip-insp__close:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
@media (max-width:760px){
  .ip .ip-insp__panel{grid-template-columns:minmax(0,1fr);grid-template-areas:"bar" "stage" "meta" "nav";padding:var(--is-4)}
}

/* --- proof at real interface size ----------------------------------------- */
.ip .ip-proof{margin-block-start:var(--is-6);display:grid;gap:var(--is-5)}
.ip .ip-proof__plate{background:var(--bone);color:var(--carbon);padding:clamp(22px,3vw,44px)}
.ip .ip-proof__grid{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:auto repeat(4,minmax(0,auto));justify-content:start;
  gap:var(--is-4) clamp(28px,5vw,72px);align-items:end;
}
.ip .ip-proof__grid > li{margin:0;display:grid;justify-items:start;gap:8px;min-width:0}
.ip .ip-proof__rowk{font:700 11px/1.4 var(--ip-ui);letter-spacing:.14em;text-transform:uppercase;color:rgba(23,23,23,.62);align-self:end}
.ip .ip-proof__ic{display:block;color:var(--carbon)}
.ip .ip-proof__sz{font:400 11px/1 var(--ip-ui);color:rgba(23,23,23,.62)}
.ip .ip-proof__line{display:flex;align-items:center;gap:10px;font:400 16px/1.4 var(--ip-ui);color:var(--carbon)}
@media (max-width:760px){
  .ip .ip-proof__grid{grid-template-columns:auto repeat(2,minmax(0,1fr))}
}

/* --- concept and narrative ------------------------------------------------ */
.ip .ip-nar{
  list-style:none;margin:var(--is-6) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--is-6) var(--ip-gap);
}
.ip .ip-nar > li{margin:0;min-width:0}
/* Bone on Carbon is the resting state, and it is the state that matters: these
   have to be legible before anyone touches them. Acid is the deliberate
   attention state — the same reservation the rest of the page keeps for the one
   mark under examination — so it appears on hover and on keyboard focus and
   nowhere else. `color` is all that moves; the artwork is `currentColor` and
   its geometry, counters and unfilled shapes are never touched. */
.ip .ip-nar__plate{
  background:var(--ip-plate);color:var(--bone);aspect-ratio:1;
  display:grid;place-items:center;padding:20%;
  transition:color .18s ease,background-color .18s ease;
}
.ip .ip-nar > li:hover .ip-nar__plate,
.ip .ip-nar > li:focus-within .ip-nar__plate{color:var(--acid);background:#141414}
@media (prefers-reduced-motion:reduce){
  .ip .ip-nar__plate{transition:none}
}
.ip .ip-nar__plate .ip-ic{width:100%;height:100%}
.ip .ip-nar__n{margin:var(--is-3) 0 0;font:500 var(--t-meta)/1.35 var(--ip-ui);color:var(--ip-ink)}
.ip .ip-nar__c{margin:4px 0 0;font:400 11px/1.45 var(--ip-ui);color:var(--ip-mute)}
@media (max-width:1100px){.ip .ip-nar{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.ip .ip-nar{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- the close ------------------------------------------------------------ */
.ip .ip-links{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ip-gap);
  margin-block-start:var(--is-7);
}
.ip .ip-link{
  display:grid;gap:var(--is-2);text-decoration:none;color:inherit;
  padding-block-start:var(--is-4);border-block-start:1px solid var(--ip-line);
  transition:border-color .18s ease;
}
.ip .ip-link:hover{border-block-start-color:var(--acid)}
.ip .ip-link__k{font:700 11px/1.4 var(--ip-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ip-label)}
.ip .ip-link__t{font:500 clamp(18px,1.6vw,24px)/1.2 var(--ip-ui);color:var(--ip-ink);max-width:24ch}
.ip .ip-link:hover .ip-link__t{color:var(--acid)}
.ip .ip-link:focus-visible{outline:2px solid var(--acid);outline-offset:4px}
@media (max-width:760px){.ip .ip-links{grid-template-columns:minmax(0,1fr)}}

/* --- shared icon box ------------------------------------------------------ */
.ip .ip-ic{display:block}
.ip .ip-ic svg{display:block;width:100%;height:100%;fill:currentColor}

@media (prefers-reduced-motion:reduce){
  .ip *,.ip *::before,.ip *::after{transition:none !important;animation:none !important}
}


/* --- 02 anatomy: the application row and the measurement record ----------- */
.ip .ip-anuse{
  width:min(100%,420px);display:flex;align-items:center;gap:10px;
  background:#fff;color:var(--carbon);
  border:1px solid rgba(23,23,23,.22);padding:10px 12px;box-sizing:border-box;
}
.ip .ip-anuse__ic{flex:none;width:24px;height:24px;color:var(--carbon)}
.ip .ip-anuse__w{font:400 15px/1.4 var(--ip-ui);color:rgba(23,23,23,.78)}
.ip .ip-an__meas{
  margin:var(--is-5) 0 0;display:grid;
  grid-template-columns:minmax(0,15ch) minmax(0,1fr);
  column-gap:var(--ip-gap);row-gap:8px;align-items:baseline;
  border-block-start:1px solid var(--ip-line-2);padding-block-start:var(--is-4);
}
.ip .ip-an__meas dt{margin:0;font:700 11px/1.5 var(--ip-ui);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ip-label)}
.ip .ip-an__meas dd{margin:0;font:400 14px/1.55 var(--ip-ui);color:var(--ip-ink)}
@media (max-width:640px){
  .ip .ip-an__meas{grid-template-columns:minmax(0,1fr);row-gap:2px}
  .ip .ip-an__meas dd{margin-block-end:10px}
}

/* --- an outstanding asset requirement ------------------------------------
   Something the collection does NOT have, stated on the page. It is given its
   own mark so it can never be read as a description of what shipped. */
.ip .ip-an__rout,.ip .ip-board__out{
  margin:var(--is-3,12px) 0 0;
  padding-inline-start:11px;
  border-inline-start:2px solid var(--acid);
  font:400 var(--t-meta)/1.5 var(--ip-ui);
  color:var(--ip-mute);
  max-width:52ch;
}
.ip .ip-an__rout b,.ip .ip-board__out b{
  display:block;
  color:var(--acid);
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  font-size:10.5px;margin-block-end:3px;
}