/* Clif Cover System — "Signal Editions"
   Resolution-independent: every dimension is in cqw/cqh (% of cover size),
   so the SAME markup renders crisp at thumbnail or full app resolution. */

.cover{
  position:relative;
  aspect-ratio:2/3;
  container-type:size;
  border-radius:1.4cqw;
  overflow:hidden;
  font-family:'Space Grotesk',sans-serif;
  color:var(--ink,#fff);
  isolation:isolate;
  user-select:none;
}
/* background */
.cover .bg{position:absolute;inset:0;z-index:0}
.cover .bg.grad{background:linear-gradient(155deg,var(--c1),var(--c2))}
.cover .bg .grain{position:absolute;inset:0;opacity:.06;
  background-image:radial-gradient(currentColor 0.6px,transparent 0.7px);
  background-size:3.2cqw 3.2cqw;color:var(--ink)}

/* padding frame */
.cover .pad{position:absolute;inset:0;z-index:3;padding:8cqw 8cqw 7.5cqw;display:flex;flex-direction:column}

/* top row: brand mark + read time */
.cover .top{display:flex;align-items:center;justify-content:space-between}
.cover .cmark{display:inline-flex;align-items:flex-end;gap:1cqw;height:5.4cqw}
.cover .cmark i{display:block;width:1.9cqw;border-radius:2cqw;background:var(--ink)}
.cover .cmark i:nth-child(1){height:50%}
.cover .cmark i:nth-child(2){height:74%}
.cover .cmark i:nth-child(3){height:100%;background:var(--accent)}
.cover .cmark span{font-weight:700;font-size:5cqw;letter-spacing:-0.03em;margin-left:1.4cqw;line-height:1}
.cover .rt{font-family:'JetBrains Mono',monospace;font-size:3.1cqw;font-weight:500;white-space:nowrap;
  border:0.4cqw solid color-mix(in srgb,var(--ink) 34%,transparent);
  color:var(--ink);padding:1cqw 2.4cqw;border-radius:10cqw;opacity:.86}

/* motif layer */
.cover .motif{position:absolute;z-index:1;pointer-events:none}

/* metaphor stage — hand-authored compositions sit in the upper field */
.cover .metaphor{position:absolute;z-index:2;top:13cqw;left:0;right:0;height:50cqw;
  display:flex;align-items:center;justify-content:center;pointer-events:none}

/* category + title block (bottom by default) */
.cover .meta{margin-top:auto;position:relative;z-index:3}
.cover .cat{font-family:'JetBrains Mono',monospace;font-size:3.1cqw;font-weight:500;
  letter-spacing:0.34em;text-transform:uppercase;color:var(--accent);margin-bottom:3cqw}
.cover .title{font-weight:700;line-height:0.98;letter-spacing:-0.03em;text-wrap:balance}
.cover .title.s1{font-size:15cqw}
.cover .title.s2{font-size:12.4cqw}
.cover .title.s3{font-size:10cqw}
.cover .title.s4{font-size:8.2cqw}
.cover .author{font-size:4cqw;font-weight:500;opacity:.72;margin-top:3.4cqw;letter-spacing:0.01em}
.cover .author b{font-weight:600;opacity:1}

/* imprint footer rule */
.cover .imprint{position:absolute;left:8cqw;right:8cqw;bottom:5cqw;z-index:3;
  display:flex;justify-content:space-between;align-items:center;
  font-family:'JetBrains Mono',monospace;font-size:2.6cqw;letter-spacing:0.22em;
  text-transform:uppercase;opacity:.5;padding-top:3cqw}

/* ── layout variants ── */
/* center */
.cover.l-center .pad{text-align:center;align-items:center}
.cover.l-center .top{width:100%}
.cover.l-center .meta{margin-top:auto;margin-bottom:auto}
.cover.l-center .cat{margin-left:auto;margin-right:auto}

/* top-title */
.cover.l-top .meta{margin-top:0;margin-bottom:auto;padding-top:7cqw}

/* ── motif shapes (simple geometry only) ── */
.m-disc{border-radius:50%;background:var(--accent)}
.m-ring{border-radius:50%;border:3.4cqw solid var(--accent);background:transparent}
.m-ring2{border-radius:50%;border:2cqw solid color-mix(in srgb,var(--ink) 26%,transparent);background:transparent}
.m-tri{width:0;height:0;border-left:22cqw solid transparent;border-right:22cqw solid transparent;border-bottom:38cqw solid var(--accent)}
.m-diamond{background:var(--accent);transform:rotate(45deg);border-radius:3cqw}
.m-half{background:var(--accent);border-radius:50cqw 50cqw 0 0}
.m-bars{display:flex;align-items:flex-end;gap:3cqw}
.m-bars i{display:block;width:9cqw;border-radius:3cqw;background:var(--accent)}
.m-dots{background-image:radial-gradient(var(--accent) 1.7cqw,transparent 1.9cqw);background-size:9cqw 9cqw;opacity:.9}
.m-stripe{background:repeating-linear-gradient(90deg,var(--accent) 0 2.4cqw,transparent 2.4cqw 7cqw)}
.m-arcblock{background:var(--accent)}

/* light palette tweaks */
.cover.light .rt{border-color:color-mix(in srgb,var(--ink) 28%,transparent)}

/* ── gallery chrome ── */
.cover-card{display:flex;flex-direction:column;gap:10px}
.cover-shadow{box-shadow:0 20px 40px -18px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05)}
.cover-cap{font-family:'Hanken Grotesk',sans-serif;color:#A39FB0;font-size:13px;line-height:1.35}
.cover-cap b{color:#F4F1EA;font-weight:600;display:block;font-size:13.5px}