/* =======================================================================
   SOS REMEDY SHEET - 2026-09-08

   Everything in this file exists to close a finding from the independent
   verification record (Runs 1 and 2, Micaiah "Kai", 2026-09-06 and 07).
   It loads last on every page so it wins the cascade, and it is kept
   apart from the original stylesheets so the remediation is auditable in
   one place instead of scattered through them.
   ======================================================================= */

/* F-04 - SC 1.4.1 Use of Color.
   The breadcrumb link back to /work/ sits inside a line of body text and
   was distinguished by colour alone at 1.26:1, under the 3:1 the
   criterion requires. An underline is a non-colour signal, so the ratio
   stops being the only thing holding the link up. One rule, twelve case
   studies. */
.cs-kicker a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.cs-kicker a:hover,.cs-kicker a:focus-visible{text-decoration-thickness:2px}

/* F-07 - heading levels.
   Three blocks on the home page went H2 to H4, and the nine service rows
   went H1 to H3. The tags moved up a level in the markup; these rules
   carry the original styling onto the corrected tags so nothing shifts
   visually. */
.beat-b h3{font-family:var(--fat);font-weight:700;font-size:clamp(19px,2.6vw,28px);
  color:var(--cream);text-transform:uppercase;line-height:1.08}
.g-i h3{font-family:var(--goth);font-weight:600;font-size:13.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.k-c h3{font-family:var(--fat);font-weight:700;font-size:19px;color:var(--gold);
  text-transform:uppercase;margin-bottom:11px}
.sv-row h2{font-family:"Bodoni Moda",Georgia,serif;font-weight:700;color:var(--cream);
  font-size:clamp(19px,2.2vw,26px);line-height:1.14;margin:0;letter-spacing:-.005em}

/* F-02 - SC 1.4.10 Reflow.
   The press list's source label was white-space:nowrap, which was safe
   while it held an outlet name and stopped being safe once it held a
   syndication note. At 320px that forced 103px of sideways scroll. Let it
   wrap; at normal widths the flex track still keeps it on one line. */
.prs em{white-space:normal;overflow-wrap:break-word}

/* F-05 - SC 2.5.7 Dragging Movements.
   Ownership's call: the Obsession Wall is art direction, not a feature.
   The drag instruction is gone from the markup and the container is
   aria-hidden, so it is no longer functionality needing a single-pointer
   alternative. The cutouts still drag for anyone using a mouse. */
.wall-wrap{padding-bottom:0}

/* Launch gate 2.10 and 2.11 - the footer legal row.
   Privacy, terms, cookie policy and accessibility statement have to be
   reachable, and reachable means linked from every page. */
.ft-legal{margin-top:14px !important;display:flex;flex-wrap:wrap;gap:6px 22px;
  justify-content:center;font-family:var(--goth);font-weight:400;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase}
.ft-legal a{color:var(--dim);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(138,124,108,.45)}
.ft-legal a:hover,.ft-legal a:focus-visible{color:var(--gold-lt);text-decoration-color:currentColor}

/* SC 1.4.3 Contrast - the two spots still under 4.5:1.
   The brand gate's skip hint was #584F45 on near-black, about 2.4:1. The
   legal pages' footer block inherited opacity:.9 from .cs-body p, which
   pulled --dim from 4.52:1 down to 4.15:1. #9A8B79 at full opacity
   measures 5.97:1 on the page ground. */
.g-skip{color:#9A8B79}
.lg .lg-foot{color:#9A8B79;opacity:1}

/* Click-to-load video, added 2026-09-08.
   The poster and the play control are ours; the YouTube iframe is only
   created after a click, so a page carrying a video still makes zero
   third-party requests on load. That is what keeps /privacy/ and
   /cookies/ accurate. */
.ytf{margin:clamp(40px,6vw,72px) 0 0}
.ytf-frame{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#0C0A08;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.9),0 0 0 1px rgba(200,127,44,.20)}
.ytf-frame img,.ytf-frame iframe{position:absolute;inset:0;width:100%;height:100%;display:block;border:0}
.ytf-frame img{object-fit:cover}
.ytf-play{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:15px;border:0;cursor:pointer;
  background:rgba(12,10,8,.30);color:var(--cream);
  font-family:var(--goth);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  transition:background .25s ease}
.ytf-play:hover{background:rgba(12,10,8,.46)}
.ytf-play:focus-visible{outline:2px solid var(--gold);outline-offset:-6px}
.ytf-tri{width:74px;height:74px;border-radius:50%;border:1px solid rgba(200,127,44,.6);
  background:rgba(12,10,8,.55);position:relative;
  transition:transform .25s ease,background .25s ease,border-color .25s ease}
.ytf-tri::after{content:"";position:absolute;top:50%;left:56%;transform:translate(-50%,-50%);
  border-left:20px solid #E0A555;border-top:12px solid transparent;border-bottom:12px solid transparent}
.ytf-play:hover .ytf-tri{transform:scale(1.07);background:rgba(12,10,8,.78);border-color:#E0A555}
.ytf figcaption{margin-top:16px;font-family:var(--type);font-size:14px;line-height:1.7;
  color:var(--sand2);max-width:74ch}
.ytf figcaption b{color:var(--sand);font-weight:400}
.ytf-note{margin:10px 0 0;font-family:var(--type);font-size:12.5px;line-height:1.7;color:#9A8B79;max-width:74ch}
.ytf-note a{color:#E0A555;border-bottom:1px solid var(--rule);text-decoration:none}
.ytf-note a:hover{border-color:#E0A555}
@media(prefers-reduced-motion:reduce){.ytf-play,.ytf-tri{transition:none}}


/* =================================================================
   DISPLAY TYPE FIT - 2026-09-09
   Loaded after sos-case.css on all 25 pages, so the sizing lives in
   one place rather than being edited into the base sheets.

   Symptom: headings broke mid-word with no hyphen, at EVERY width and
   not only narrow ones. "LET'S MAKE SOMETHING UNFORGETTABL / E." read
   the same at 320 as at 1920.

   Cause, measured in the real face rather than estimated: 1ch is
   0.681em here, because ch is the width of "0" and these display faces
   set far wider than their digits. .c-h allowed 14ch, which is
   9.534em, and "unforgettable." is 9.500em. The limit was right to
   within 0.4 percent, which is nothing once letter-spacing and
   subpixel rounding are counted. It was not a wrong number, it was a
   number with no headroom, so it failed everywhere at once.

   Every limit below is therefore set in em against the measured word,
   with room to spare, and stays under 13.01em - the width at which
   "Let's make something" would pull onto one line and flatten the
   three-line stack the section is built on.

   The overflow-wrap and hyphens rules in sos-case.css stay exactly as
   they are. They are the safety net for text zoom; with the sizing
   right they simply stop firing.
   ================================================================= */
.c-h{max-width:10.6em}
/* Below 400px the column is narrower than the word even at the 33px
   floor, so the floor gives way rather than the word. min() ramps into
   the clamp instead of stepping into it, which is the mistake that
   produced the .cs-title cliff described below. */
@media(max-width:399px){.c-h{font-size:min(calc(10.2vw - 6.8px),33px)}}

/* .cs-title never lacked max-width, it lacked room, in three separate
   bands: the 320px floor; a 29px jump at exactly 401px, where the
   narrow-screen rule stopped and the base clamp took over with no
   extra room to pay for it; and every display from 1440px up, where
   the type kept growing after the column had stopped at 1124px. The
   ceiling now sits below that crossing point, and one continuous ramp
   covers the low end, so there is no step left to fall off. */
.cs-title{font-size:clamp(40px,8.4vw,118px);max-width:12.2em}
@media(max-width:459px){.cs-title{font-size:min(calc(10.2vw - 6.9px),40px)}}

/* The next-case-study CTA is the same error one level up: a max-width
   in ch on the <a>, which resolves against the anchor's own 17px body
   font and freezes at 260px, while the <b> inside it scales to 38px
   and needs 311px for "Photography". The limit was on the right box
   but in the wrong font. Sized to the widest CTA word across all 15
   case studies (8.18em of the b) with headroom. */
.cs-next>a:first-child{max-width:34ch}