/* Vernier — collection pages (/black/ and /red/), v1.6 quiet structure.
   Extends css/vernier.css. Prefixes: .cl- (collection), .spx (species sheet), .clx (the other line).
   Order: hero (giant category word, H1, one line) · one full-bleed plate · one sheet per species
   (macro band, plate photo with the Verso lid, name, one line, grain + salt, sizes, buy) · the other line. */

/* ---------- hero: giant category word, H1, one line ---------- */
.cl-hero{padding-top:calc(var(--nav-h) + var(--s7))}

/* the giant word is fitted in JS to the frame width (wall to wall), at its category's final axes */
.cl-giant{position:relative;overflow:hidden;contain:paint;padding-top:.02em}
.cl-giant .giant{display:block;position:relative;width:max-content;font-size:var(--t-giant);margin-left:-.035em;line-height:.8;padding-bottom:.02em}
.cl-giant .giant__w{display:block}
.cl-giant .giant.ax-black{color:var(--trench-line)}
.g-rime .cl-giant .giant.ax-black,.g-glacier .cl-giant .giant.ax-black{color:var(--ink)}
.cl-giant .giant.ax-red{color:var(--keta)}
.cl-giant .ghost{position:absolute;left:0;top:0;color:transparent;-webkit-text-stroke:1px var(--act);opacity:0;white-space:nowrap}
html.anim .cl-giant [data-cl-giant]{visibility:hidden}

.cl-hero__body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end;margin-top:var(--s8);padding-bottom:var(--s10)}
.cl-hero__body .h{grid-column:1/span 7;max-width:13ch}
.cl-hero__body .lead{grid-column:9/span 4}

/* ---------- full-bleed plates (night tin, backlit keta, species macros) ---------- */
.cl-plate{position:relative;width:100%;overflow:hidden;background:var(--void);margin:0}
.cl-plate img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover}
.cl-plate--wide{aspect-ratio:21/9}
.cl-plate--macro{aspect-ratio:12/5}
.cl-plate--night{aspect-ratio:16/9;max-height:92svh}
.cl-plate--night img{object-position:50% 30%}
.cl-plate[data-par] img{will-change:transform}
@media (max-width:860px){
  .cl-plate--wide{aspect-ratio:4/5}
  .cl-plate--macro{aspect-ratio:4/3}
}

/* ---------- species sheet ---------- */
.spx__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center;padding:var(--s10) 0}
.spx__fig{grid-column:1/span 6;grid-row:1;position:relative;margin:0}
.spx__copy{grid-column:8/span 5;grid-row:1}
.spx--flip .spx__fig{grid-column:7/span 6}
.spx--flip .spx__copy{grid-column:1/span 5}

/* the photo: background matched to the plate so the frame edge disappears */
.spx__photo{position:relative;aspect-ratio:1;background:var(--pbg,#EFF3F6)}
.spx__photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* lift: an invisible lid sits exactly over the photographed lid (plate contract: lid centre 69.5% / 49.65%, r 22%) */
.spx__lift{position:absolute;z-index:3;left:47.5%;top:27.65%;width:44%;aspect-ratio:1;border-radius:50%;padding:0;cursor:pointer}
.spx__lift img{width:100%;height:100%;opacity:0;pointer-events:none}
.spx__lift::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--gauge);opacity:0;transform:scale(.96);transition:opacity .25s,transform .35s var(--ease-out)}
.spx__lift:hover::after,.spx__lift:focus-visible::after{opacity:1;transform:none}
.spx__lift:focus-visible{outline:0}

/* copy column */
.spx__latin{font-size:15px;color:var(--fg-2)}
.spx__copy .h{margin-top:var(--s3)}
.spx__copy .lead{margin-top:var(--s5);max-width:34ch}
.spx__spec{margin-top:var(--s5);font:500 13px/1.3 var(--font-mono);letter-spacing:.06em;color:var(--fg)}

.spx__sizes{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--s2);margin-top:var(--s7);max-width:440px}
.spx__sizes button{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px 12px 13px;border:1px solid var(--hairline);border-radius:var(--r-btn);text-align:left;transition:border-color .2s,background-color .2s,color .2s}
.spx__sizes button b{font:500 14px/1 var(--font-mono);letter-spacing:.02em;color:var(--fg)}
.spx__sizes button span{font:400 12px/1 var(--font-mono);letter-spacing:.04em;color:var(--fg-2)}
.spx__sizes button:hover{border-color:var(--act)}
.spx__sizes button[aria-pressed="true"]{border:1.5px solid var(--act);padding:13.5px 11.5px 12.5px;background:var(--paper)}
.spx__sizes button[aria-pressed="true"] b{color:var(--act)}

.spx__buy{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s6)}
.spx__price{flex:1 0 100%;margin-bottom:var(--s2)}
.spx__price b{font:500 26px/1 var(--font-mono);letter-spacing:-.01em;color:var(--fg)}

@media (max-width:1180px){
  .spx__fig,.spx--flip .spx__fig{grid-column:span 6}
  .spx__copy{grid-column:8/span 5}
  .spx--flip .spx__copy{grid-column:1/span 6}
}
@media (max-width:860px){
  .spx__grid{padding:var(--s8) 0 var(--s9)}
  .spx__fig,.spx--flip .spx__fig{grid-column:1/-1;grid-row:1}
  .spx__copy,.spx--flip .spx__copy{grid-column:1/-1;grid-row:2;margin-top:var(--s7)}
}
@media (max-width:600px){
  .spx__sizes{grid-template-columns:repeat(min(var(--n,4),2),minmax(0,1fr));max-width:none}
  .spx__buy .btn{flex:1;padding:0 var(--s3)}
}

/* ---------- the other line: heading, one link, the giant word ---------- */
.clx{position:relative;padding:var(--s10) 0 0;overflow:hidden}
.clx__in{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s5);flex-wrap:wrap}
.clx__in .h{max-width:14ch}
.clx__go{display:inline-flex;align-items:center;gap:var(--s3);font:500 var(--t-ui)/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:var(--act)}
.clx__go .arr{font-family:var(--font-mono);transition:transform .35s var(--ease-out)}
.clx__go::after{content:"";position:absolute;inset:0;z-index:3}
.clx:hover .clx__go .arr,.clx__go:focus-visible .arr{transform:translateX(6px)}
.clx__go:focus-visible{outline:0}
.clx:has(.clx__go:focus-visible){outline:2px solid var(--act);outline-offset:-6px}
.clx__go span:first-child{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.clx .cl-giant{margin-top:var(--s8);margin-bottom:-.02em}

/* ---------- small screens: hero ---------- */
@media (max-width:860px){
  .cl-hero__body .h,.cl-hero__body .lead{grid-column:1/-1}
  .cl-hero__body .lead{margin-top:var(--s5)}
  .cl-hero__body{margin-top:var(--s7);padding-bottom:var(--s9)}
  .clx{padding-top:var(--s9)}
}
@media (max-width:600px){
  .cl-hero{padding-top:calc(var(--nav-h) + var(--s6))}
  .cl-hero__body .h{font-size:40px}
}

/* reduced motion: everything is in its final state */
/* measured type never transitions: the core's reduced-motion backstop (0.01 ms on every property) would make the
   fitted word's children report their old size at measure time */
html body .cl-giant *,html body .cl-giant{transition:none!important}
html.reduce .cl-giant [data-cl-giant]{visibility:visible}
html.reduce .cl-plate img{inset:0;height:100%}