/* THE EDITORIAL BAND — one wide photograph, with the words set directly on it.
   ────────────────────────────────────────────────────────────────────────────────────────────────
   WHAT IT IS AND WHY IT EXISTS. The owner asked for the pages to be "more visualised", and the
   device in the reference is a FULL-BLEED band: a single photograph running the whole width of the
   window, with a small tracked-caps eyebrow, a very large plain white headline and one underlined
   link, all set at the LEFT directly on the picture. It is the only place in this house where type
   sits on an image, and it is the only place anything is larger than a heading. Its job is to break
   a long text-only page into chapters — /legal/about and /legal/pricing are several screens of
   unbroken prose and tables, which is exactly the stretch it was asked for.

   WHY IT IS A FILE AND NOT A COPY. This is the same argument as /static/dotfield.css, and the same
   history: four frontends here share no module system, and everything duplicated across them has
   drifted. Two legal fragments use this band today. Inlining it in both would guarantee two
   slightly different bands within a year. A fragment is injected into a shell it does not own, so
   it LINKS this sheet from the body — which every browser honours — rather than carrying a <style>.

   WHO CAN USE IT. Anything served under /static that can reach /static/editorial.css. The markup
   contract is fixed, and the CSS is written against exactly this shape:

     <section class="ed">
       <img class="ed-img" src="…" alt="" loading="lazy" decoding="async">
       <div class="ed-txt">
         <p class="ed-eyebrow">Made to order</p>
         <h2 class="ed-head">A headline, short.</h2>
         <a class="ed-cta" href="/studio">Design yours <span aria-hidden="true">&rarr;</span></a>
       </div>
     </section>

   THE PHOTOGRAPH IS DECORATIVE AND ITS alt IS EMPTY ON PURPOSE. Everything the band says is in the
   eyebrow, the headline and the link, which are real text in the document; describing the picture
   again would make a screen reader read the same chapter heading twice. If a band ever carries
   information that is ONLY in the picture, that band needs a real alt — and it probably needs the
   information written down instead.

   NEVER PUT A GARMENT PHOTOGRAPH HERE AND CALL IT THE PRODUCT. The pictures this band is used with
   are atmosphere — hands folding cloth, a ramp of fabric swatches. A rendered or generated image
   presented as product photography is a claim about a thing we would then have to ship.

   ────────────────────────────────────────────────────────────────────────────────────────────────
   FULL-BLEED OUT OF A 760px COLUMN. The legal shell wraps its content in `.in{max-width:760px}`, so
   the band has to escape a container it does not control. `margin-inline: calc(50% - 50vw)` is the
   standard break-out; the trap is that 100vw INCLUDES the classic scrollbar on Windows, so the band
   ends up ~15px wider than the document and the whole page gains a horizontal scrollbar. Hence
   `overflow-x:clip` on the root. CLIP, NOT HIDDEN: `hidden` would make <html> a scroll container
   and silently kill `position:sticky` anywhere on the page, which is a bug that appears three
   sections away from its cause. */
html:has(.ed){overflow-x:clip}

.ed{
  position:relative;
  margin-inline:calc(50% - 50vw);
  width:100vw;
  /* The band is a fixed slab rather than an aspect-ratio box, because it has to hold a headline of
     unknown length at any width. The clamp keeps it from eating a laptop screen whole. */
  min-height:clamp(340px,52vh,560px);
  display:flex;align-items:center;
  margin-block:56px;
  overflow:hidden;
  background:#111111;   /* the ground the picture lands on, so a slow or failed image is a black slab with legible type rather than white-on-white */
  isolation:isolate;
}
.ed-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;border:0;
  z-index:0;
}
/* THE SCRIM IS BLACK ALPHA AND NEVER A TINTED VEIL — the same rule the rest of the house applies to
   photography, and the reason is that a tint changes the colour of cloth, which is the one thing a
   clothing site may not misrepresent.

   THE STOPS ARE MEASURED, NOT PICKED. They were computed against the actual pixels of the actual
   photographs (scratchpad/scrim.py composites black-at-alpha over every block of the text column
   and reports the WORST one, not the mean — a mean is how you ship 2.7:1 type over the bright
   corner of a picture). Worst pixel in the left 55% of both images in use is effectively pure
   white: the window in the atelier shot, the lit ground in the swatch shot. Composited:
       alpha .56 -> 4.95:1     alpha .62 -> 6.19:1     alpha .70 -> 8.45:1
   The ramp below therefore never drops under .56 anywhere the text can reach, so the worst case in
   this band is 4.95:1 — AA for body text, against the brightest pixel either picture contains, not
   against its average. IF YOU SWAP THE PHOTOGRAPH, RE-RUN THE MEASUREMENT. A picture with a blown
   highlight on the left is the failure mode, and it will look fine to you on the image you chose. */
.ed::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(0,0,0,.74) 0%,
    rgba(0,0,0,.66) 34%,
    rgba(0,0,0,.56) 56%,
    rgba(0,0,0,.18) 78%,
    rgba(0,0,0,0)   100%);
}
.ed-txt{
  position:relative;z-index:2;
  /* THE TEXT LINES UP WITH THE PROSE ABOVE IT. The shell's column is 760px wide with a 22px gutter,
     so the start inset resolves to the column's own left edge on a wide screen and to the gutter on
     a narrow one. A full-bleed band whose words start at a different left margin from the paragraph
     above it reads as a different website.

     THE INSET IS A MARGIN, NOT PADDING, AND THAT IS NOT A STYLE PREFERENCE — IT IS A BUG FIX.
     The first cut of this rule set `padding-inline` and `max-width` on the same element. Every
     surface in this house sets `*{box-sizing:border-box}`, so `max-width:680px` INCLUDED 340px of
     padding on each side at 1440px wide, leaving the text a content box of ZERO: the headline
     dropped to one word per line, the eyebrow broke into four lines, and the link landed on top of
     the headline. It looked like a deliberately tall stack until it was measured. Margin sits
     outside the box border-box measures, so `max-width` now means what it says. */
  margin-inline-start:max(22px,calc(50vw - 380px));
  margin-inline-end:22px;
  max-width:620px;
  padding-block:44px;
}
.ed-eyebrow{
  margin:0 0 18px;
  font-size:11px;line-height:1;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:#FFFFFF;
}
/* PLAIN WHITE AND NOTHING ELSE — no text-shadow, no gradient, no outline. The scrim is what makes
   this legible; a shadow under white type on a dark scrim is belt-and-braces that shows up as a
   grey halo at large sizes. The size is the one genuinely LOUD thing in this design system, which
   is the whole point of the band: everywhere else the type ramp tops out at a heading. */
.ed-head{
  margin:0;
  font-size:clamp(32px,5.6vw,68px);
  line-height:1.04;
  letter-spacing:-.025em;
  font-weight:600;
  color:#FFFFFF;
  text-wrap:balance;
}
/* UNDERLINED AT REST, ALWAYS. On an achromatic page a link cannot be marked by hue, and on a
   photograph it cannot be marked by a plate either without becoming a button. The underline IS the
   affordance — and it is the same decision as the `a{}` rule in admin.html and .invlink in the
   Studio, made for the same WCAG 1.4.1 reason. Hover thickens it rather than changing the colour,
   because there is no second white. */
.ed-cta{
  display:inline-block;margin-top:26px;
  font-size:12px;line-height:1;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:#FFFFFF;
  text-decoration:underline;
  text-underline-offset:7px;
  text-decoration-thickness:1px;
}
.ed-cta:hover{color:#FFFFFF;text-decoration-thickness:2px}
.ed-cta:focus-visible{outline:2px solid #FFFFFF;outline-offset:4px;text-decoration-thickness:2px}
.ed-cta span{display:inline-block;margin-left:.4em}

/* PHONE. The horizontal ramp is wrong below about 700px: the text column is the whole width, so a
   scrim that has faded to zero by the right edge leaves the last word of a headline sitting on bare
   photograph. It becomes a VERTICAL ramp with a floor, and the floor is .62 — 6.19:1 against the
   brightest pixel in either picture, measured the same way. The band also anchors to the BOTTOM
   here, which is the conventional phone crop and keeps faces and hands in the top half visible. */
@media (max-width:700px){
  .ed{min-height:clamp(380px,64vh,520px);align-items:flex-end;margin-block:40px}
  .ed::before{
    background:linear-gradient(180deg,
      rgba(0,0,0,.30) 0%,
      rgba(0,0,0,.45) 38%,
      rgba(0,0,0,.62) 68%,
      rgba(0,0,0,.72) 100%);
  }
  .ed-txt{max-width:none;margin-inline:22px;padding-block:34px 36px}
  .ed-eyebrow{margin-bottom:14px}
  .ed-cta{margin-top:20px}
}

/* PRINT. The legal shell prints these pages black-on-white with no tints, because a policy handed
   to a bank should be a document. A full-bleed photograph is the opposite of that, and a headline
   in white on paper is nothing at all — so the picture and the scrim are dropped and the words come
   back as ordinary ink. The band still prints its sentence, which is the part that carries meaning;
   it just stops being a picture. */
@media print{
  html:has(.ed){overflow-x:visible}
  .ed{margin-inline:0;width:auto;min-height:0;background:none;display:block;
    margin-block:22px;padding:0;border-top:1px solid #000;border-bottom:1px solid #000}
  .ed-img,.ed::before{display:none}
  .ed-txt{padding:14px 0;margin-inline:0;max-width:none}
  .ed-eyebrow,.ed-head,.ed-cta{color:#000}
  .ed-head{font-size:19pt;letter-spacing:0}
  .ed-cta{text-decoration:underline}
}