/* ===================================================================
   Tools hub.

   Built from the shared archetypes (.phero, .op, .duo, .strip). The tools
   are a side benefit rather than the offering, so this page stays
   deliberately quiet - no oversized hero, no feature grid.
   =================================================================== */

.tools-note{margin:clamp(24px,3vw,34px) 0 0;padding-top:18px;
  border-top:1px solid var(--rule);color:var(--muted);font-size:var(--t-base);line-height:1.65}

/* Two tools only, so cap the row rather than letting them stretch. */
.duo{max-width:920px}

/* ===================================================================
   DEVICE B - the page each tool prints.

   Both tools produce one printed page: the resume builder an A4
   portrait, the class contact sheet a landscape one. Each row carries
   the outline of its own output at 210:297 or 297:210, drawn as a 1px
   line at full ink with three hairlines standing for text, and cut by
   the row's inline-end edge. It is the artefact you get, at size,
   beside the specification of how to get it.

   Everything else here stays quiet on purpose: the tools are a side
   benefit, not the offering, and this head is the smallest on the site.
   =================================================================== */

.hd-quiet .hd-lead{max-width:62ch}

.tr{position:relative;overflow:hidden;
  padding-inline-end:clamp(64px,9vw,130px)}
.tr::after{content:"";position:absolute;pointer-events:none;
  top:clamp(20px,3vw,34px);inset-inline-end:clamp(-96px,-6vw,-34px);
  width:clamp(140px,16vw,220px);
  border:1px solid var(--td);
  background-image:repeating-linear-gradient(to bottom,
    var(--td) 0 1px,transparent 1px 17px);
  background-repeat:no-repeat;
  background-size:56% 52px;
  background-position:top 22% right 18%}
.tr-portrait::after{aspect-ratio:210/297}
.tr-landscape::after{aspect-ratio:297/210}
/* the facts list sits beside the outline and never runs under it */
.tr-facts{position:relative;z-index:1}
@media(max-width:760px){
  .tr{padding-inline-end:clamp(56px,16vw,80px)}
  .tr::after{width:clamp(110px,26vw,150px);inset-inline-end:-40px}
}

.tools-note{margin:clamp(24px,3vw,34px) 0 0;padding-top:18px;
  border-top:1px solid var(--rule);color:var(--muted);font-size:var(--t-base);line-height:1.65}

/* Two tools only, so cap the row rather than letting them stretch. */
.duo{max-width:920px}

/* ===================================================================
   PACING. Tools is the quietest page on the site, and its one loud
   moment is the statement of how a tool gets chosen - which is also
   the only thing on the page that is an argument rather than a link.
   It takes the PEAK; the toolrow above it turns, the strip below
   closes. The statement band carries no heading, so without this it
   would fall through to close and sit at the same step as the strip
   under it.
   =================================================================== */
.band:has(.stmt){padding-block:var(--sp-peak)}