/* Option 1 — the sheet.
   Tight rhythm, filled fields in the accent, the statement in a band of ink,
   photography inset on a plate behind crop marks. */
:root{
  --gutter:clamp(1.4rem,4.6vw,4.8rem);
  --rhythm:clamp(3.4rem,7vh,4.8rem);
  --hero-top:clamp(3.6rem,9vh,5.6rem);
  --solo-pad:clamp(3.4rem,7vh,5rem);
}

/* the call to action is a filled field, and the field is the weight:
   the type steps back so the block stays quiet */
.btn{
  background:var(--accent);color:#fff;border-bottom:0;border-radius:2px;
  padding:.52rem .95rem;font-size:var(--t-micro);letter-spacing:.14em;font-weight:400;
}
.btn:hover{background:var(--ink);color:#fff}

/* the statement is a field of ink, the one dark moment on the page */
.statement{
  background:var(--ink);color:#fff;overflow:hidden;
  margin:0 calc(-1 * var(--gutter));padding:var(--solo-pad) var(--gutter);
}
.statement h2{color:#fff}
.statement .lab{color:rgba(255,255,255,.5)}
.statement .after{color:rgba(255,255,255,.72)}
.statement .bigmark{color:rgba(255,255,255,.085);right:-7rem}

/* photography on a plate: the white-ground studio shot gets an edge,
   and the page gets its block of colour */
.photo{background:var(--accent);padding:1.15rem}
.photo figcaption{padding:0}
.photo.wide{margin:0 0 var(--rhythm)}
.photo.wide img{height:clamp(17rem,42vh,25rem)}

/* the icon row picks up the same fill */
.iconrow .ic{background:var(--accent);color:#fff;border-color:var(--accent)}
.plat:hover .pg{color:var(--accent)}