/* ==================================================================
   SLIGHTLY OBSESSED STUDIOS - NEXT PASS ART DIRECTION
   ------------------------------------------------------------------
   Loads last, after sos-remedy.css. Everything Andie's NEXT PASS
   brief changed lives in this one file, so the pass can be read,
   audited or reverted on its own. The original stylesheets are not
   touched. Pure ASCII: the deploy bridge rejects anything else.
   ================================================================== */

/* ---- CARD DNA ---------------------------------------------------
   Lifted from the actual His and Hers card art rather than invented.
   The cards are: a double rule with a hairline inside it, a running
   band of engraved volutes on the edge, a scroll turn at the corner,
   a diagonal engraved field behind the wordmark, wide-tracked small
   caps, and one script line. Greg's card is gold on near-black.
   Andie Kat's is the same engraving inverted on cream. That contrast
   is the system, so the primitives below carry a light variant.

   Applied at a named set of places only. The card vocabulary is the
   frame, not the flourish, and spraying it would turn DNA into
   wallpaper. ------------------------------------------------------ */

.sos-frame{position:relative}
.sos-frame::before{content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid rgba(200,127,44,.30)}
.sos-frame::after{content:"";position:absolute;inset:5px;pointer-events:none;
  border:1px solid rgba(200,127,44,.14)}

/* the corner turn, one asset rotated into four positions */
.sos-cnr{position:absolute;width:34px;height:34px;pointer-events:none;opacity:.55;
  background:url("/assets/orn-corner.svg") no-repeat center/contain}
.sos-cnr.tl{top:-1px;left:-1px}
.sos-cnr.tr{top:-1px;right:-1px;transform:scaleX(-1)}
.sos-cnr.bl{bottom:-1px;left:-1px;transform:scaleY(-1)}
.sos-cnr.br{bottom:-1px;right:-1px;transform:scale(-1)}

/* the running scroll band from the card edge */
.sos-rule{height:10px;background:url("/assets/orn-scroll.svg") repeat-x center/32px 10px;
  opacity:.42;margin:0}

/* a divider: hairline, scroll band, hairline. Heavier than .orn-rule,
   used where a section genuinely turns a page. */
.sos-div{display:block;margin:clamp(38px,6vw,68px) 0;position:relative;height:10px;
  background:url("/assets/orn-scroll.svg") repeat-x center/32px 10px;opacity:.38}
.sos-div::before,.sos-div::after{content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,127,44,.5),transparent)}
.sos-div::before{top:-8px}
.sos-div::after{bottom:-8px}

/* ---- THE BASEBALL PROOF-MARK ------------------------------------
   Brief section 21. A quiet credential placed high on the home page
   for readers who came looking for sports work.

   Treated as a maker's mark rather than a sports badge: the card's
   double rule and corner turns, small caps, one short line that
   registers immediately, and the supporting detail underneath for
   anyone who reads on. It links straight into the two case studies
   that carry the evidence.
   ------------------------------------------------------------------ */

.pbl{padding:clamp(30px,4.4vw,56px) 0 clamp(6px,1vw,14px)}
.pbl-in{position:relative;display:grid;grid-template-columns:minmax(220px,.85fr) 1.15fr;
  gap:clamp(20px,3.4vw,52px);align-items:center;
  padding:clamp(22px,3.2vw,34px) clamp(24px,3.6vw,42px)}
@media(max-width:760px){.pbl-in{grid-template-columns:1fr;gap:16px}}
.pbl-k{margin:0 0 10px;font-family:var(--goth,Oswald,sans-serif);font-weight:500;
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold,#C87F2C)}
.pbl-h{margin:0;font-family:var(--fat,"Bodoni Moda",Georgia,serif);font-weight:800;
  font-size:clamp(21px,2.9vw,34px);line-height:1.06;letter-spacing:-.012em;
  color:var(--cream,#EFE7D9);text-transform:uppercase}
.pbl-b{margin:0;font-family:var(--type,"Courier Prime",monospace);font-size:14px;
  line-height:1.72;color:var(--sand2,#C2AC89);max-width:62ch}
/* SC 1.4.1: the links are not identified by colour alone */
.pbl-b a{color:var(--gold-lt,#E0A555);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px}
.pbl-b a:hover,.pbl-b a:focus-visible{color:var(--cream,#EFE7D9);text-decoration-thickness:2px}

/* ---- THE MANIFESTO MOMENT ---------------------------------------
   Brief section 3. "Beautifully unwell. Creatively feral." was a
   27px script note buried at the end of a paragraph block. It is now
   the page's signature moment.

   The idea is letterpress misregistration, not grunge: the same
   words struck twice, a hair out of register, the way a two-hit
   press job goes when the second pass is a whisker off. That reads
   as controlled creative instability and it belongs to this brand
   already - the arrival gate is a maker's mark being struck into
   the page, and the wordmark carries an impress layer. So the
   instability is the house language, deliberately mis-set. It is
   not fake punk, it is a printing accident held on purpose.
   ------------------------------------------------------------------ */

.mnf{position:relative;padding:clamp(54px,9vw,110px) 0 clamp(46px,8vw,96px);
  overflow-x:clip;background:var(--ink,#080706);
  border-top:1px solid var(--rule,#3A2E22);border-bottom:1px solid var(--rule,#3A2E22)}
/* the diagonal engraved field from the card, very low, plus grain */
.mnf::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(135deg,rgba(200,127,44,.10) 0 1px,transparent 1px 7px)}
.mnf::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:var(--grain)}
.mnf-wrap{position:relative;max-width:var(--wrap,1240px);margin:0 auto;
  padding-inline:var(--gut,clamp(22px,4.5vw,58px))}
.mnf-k{font-family:var(--goth,Oswald,sans-serif);font-weight:500;font-size:11.5px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold,#C87F2C);margin:0 0 clamp(18px,3vw,30px)}
.mnf-h{margin:0;font-family:var(--fat,"Bodoni Moda",Georgia,serif);font-weight:900;
  text-transform:uppercase;line-height:.86;letter-spacing:-.022em}
.mnf-l{display:block;position:relative;font-size:clamp(29px,7.1vw,99px);
  overflow-wrap:break-word;white-space:nowrap}
/* the second line steps in, so the block reads as set type rather
   than two centred slabs */
/* margin, not padding: the ghost is absolutely positioned against
   this box, and padding would leave it behind at the padding edge
   while the face started after it. */
.mnf-l + .mnf-l{margin-left:clamp(0px,4.4vw,84px);margin-top:.06em}
.mnf-face{position:relative;display:block;color:var(--cream,#EFE7D9);z-index:1}
/* Misregistration is a whisker, not a shadow. Two pixels at full
   size. Any more and it stops reading as a second pass off the mark
   and starts reading as a drop shadow, which is the opposite of the
   point and illegible besides. */
.mnf-ghost{position:absolute;top:0;left:0;display:block;color:var(--gold,#C87F2C);
  opacity:.62;transform:translate3d(.022em,-.013em,0);z-index:0;
  animation:mnf-reg 13s ease-in-out infinite}
@keyframes mnf-reg{
  0%,100%{transform:translate3d(.022em,-.013em,0)}
  46%{transform:translate3d(.014em,-.019em,0)}
}
/* the scroll band from the card edge, cropped so it runs off the
   left margin the way the printed edge does */
.mnf-band{display:block;width:min(46%,420px);height:10px;margin:clamp(26px,3.4vw,40px) 0 0;
  background:url("/assets/orn-scroll.svg") repeat-x left center/32px 10px;opacity:.4}
.mnf-s{margin:clamp(22px,3vw,32px) 0 0;max-width:52ch;
  font-family:var(--type,"Courier Prime",monospace);font-size:15px;line-height:1.72;
  color:var(--sand2,#C2AC89)}
.mnf-s b{color:var(--gold-lt,#E0A555);font-weight:700}
/* the invitation, moved off the end of the Scripture block where it
   deflated the verse, to here where it answers the declaration */
.mnf-call{margin:clamp(18px,2.4vw,26px) 0 0;font-family:var(--goth,Oswald,sans-serif);
  font-weight:600;font-size:clamp(14px,1.7vw,19px);letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold,#C87F2C)}
/* Below roughly 430px the long line cannot hold on one line at a
   readable size, so it is allowed to wrap there and the nowrap is
   released. Legibility beats the composition. */
@media(max-width:430px){
  .mnf-l{white-space:normal;font-size:clamp(27px,10.6vw,46px);line-height:.94}
}

/* ---- THE LIVE OBSESSION TIMER -----------------------------------
   Brief section 5. The elapsed age of the studio, to the second,
   derived from one constant in sos-pass.js and real current time.

   Accessibility, because an auto-updating number is the classic
   SC 2.2.2 trap: the running digits are aria-hidden so no screen
   reader announces a new second forever, a static sentence carries
   the same information, and there is a real pause control. Under
   prefers-reduced-motion it starts paused.
   ------------------------------------------------------------------ */

.obt{position:relative;margin:0 0 clamp(26px,4vw,42px);padding:clamp(22px,3.4vw,34px) clamp(20px,3vw,34px) clamp(26px,3.6vw,38px);
  background:var(--black2,#12100D)}
.obt-run{display:flex;flex-wrap:wrap;gap:clamp(14px,2.6vw,34px);margin:0;align-items:baseline}
.obt-u{display:flex;flex-direction:column;gap:5px;min-width:0}
.obt-u b{font-family:var(--fat,"Bodoni Moda",Georgia,serif);font-weight:800;
  font-size:clamp(30px,6.2vw,64px);line-height:.86;color:var(--cream,#EFE7D9);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.obt-u i{font-family:var(--goth,Oswald,sans-serif);font-style:normal;font-weight:500;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold,#C87F2C)}
.obt-u.sec b{color:var(--gold-lt,#E0A555)}
/* On a narrow phone the five full labels cannot hold one line and
   seconds ends up orphaned on a row of its own. Short forms keep the
   counter reading as one number. The block is aria-hidden either way,
   so nothing is lost to a screen reader. */
@media(max-width:520px){
  .obt-run{gap:11px}
  .obt-u i{font-size:9.5px;letter-spacing:.16em}
  .obt-u i::after{content:attr(data-s)}
  .obt-u i{font-size:0}
  .obt-u i::after{font-size:9.5px}
}
.obt-k{margin:clamp(16px,2.4vw,22px) 0 0;font-family:var(--type,"Courier Prime",monospace);
  font-size:13.5px;letter-spacing:.02em;color:var(--sand2,#C2AC89)}
.obt-pause{position:absolute;right:clamp(14px,2.4vw,22px);top:clamp(14px,2.4vw,22px);
  background:none;border:1px solid rgba(200,127,44,.4);color:var(--gold,#C87F2C);
  font-family:var(--goth,Oswald,sans-serif);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;padding:5px 10px;cursor:pointer;line-height:1}
.obt-pause:hover,.obt-pause:focus-visible{border-color:var(--gold-lt,#E0A555);color:var(--gold-lt,#E0A555)}
.sos-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- CHAPTER MARKERS --------------------------------------------
   Brief section 17. The nine already moved to the display face in an
   earlier pass. This adds the card's hairline turn so a number reads
   as a collectible marker rather than an index. Restrained on
   purpose: the service name still wins.
   ------------------------------------------------------------------ */

.ob .ob-n::after{content:"";position:absolute;left:-9px;right:-9px;bottom:-7px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,127,44,.55),transparent)}
.ob .ob-n{position:absolute}
.sv-row .sv-n::before{content:"";position:absolute;left:-8px;top:-6px;width:12px;height:12px;
  border-left:1px solid rgba(200,127,44,.45);border-top:1px solid rgba(200,127,44,.45)}

/* ---- SPIRIT LED. VISION FED. ------------------------------------
   Brief section 20. New copy set by Andie, anchored with the verse.
   The quotation is Scripture and is set as a quotation, not as brand
   voice: it keeps its quote marks, its reference and its NKJV
   attribution, and nothing paraphrases it.
   ------------------------------------------------------------------ */

.verse-blk{margin:clamp(24px,3.6vw,34px) 0 0;padding:clamp(18px,2.6vw,24px) 0 0;
  border-top:1px solid var(--rule,#3A2E22);position:relative}
.verse-blk p{font-family:var(--fat,"Bodoni Moda",Georgia,serif);font-weight:600;
  font-style:italic;font-size:clamp(17px,2.1vw,22px);line-height:1.42;
  color:var(--sand,#D6C3A5);margin:0 0 12px !important;max-width:40ch}
.verse-blk cite{font-family:var(--goth,Oswald,sans-serif);font-style:normal;font-weight:500;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold,#C87F2C)}

/* ---- MEET GREG & ANDIE KAT --------------------------------------
   Brief section 10. Not a rectangular photograph of two founders.

   The figures are a real cut-out from the Hearst Beach photograph,
   February 2024, the day they married. The names are set large in a
   ghosted display face and the two of them stand beside their own
   names, at the same scale, sharing one field. An earlier version had
   the figure crossing the type; it ate the last letter and a half of
   ANDIE KAT at every width, which read as a crop rather than depth,
   and section 22 is explicit that her name does not get shortened.
   Legibility won. Warm shadow underneath for depth, the card's scroll
   band beneath the type, and the two descriptions they already use for
   each other on the About page carried over as side details. The
   section closes on the signature, which is where the two of them
   become one studio.

   The parallax reuses the existing float system: outer element gets
   the scroll transform from sos-float.js, inner .fl-in keeps the
   ambient drift, and both stop on a phone or under reduced motion.
   ------------------------------------------------------------------ */

#founders .sec-h .label{color:var(--gold-lt,#E0A555)}

/* The figure is absolutely positioned to bottom:0 so it can cross the
   names. That means the stage has to reserve its height itself, or the
   figure hangs out of the top of the section and disappears.

   The top padding is not decoration. The masthead is sticky, 63px tall
   and only 95% opaque, so display type parked directly beneath it
   ghosts through and reads as a printing fault rather than a design.
   Starting the names below that line keeps them whole when the section
   comes to rest. The block is centred so it sits with the figures
   instead of floating above them. */
.fnd-stage{position:relative;margin:clamp(6px,1.4vw,18px) 0 clamp(30px,4.6vw,58px);
  padding-top:clamp(34px,6vw,92px);
  min-height:clamp(330px,45vw,640px);
  display:flex;align-items:center}

/* Left column carries the names, the band and her side in normal flow,
   so nothing can collide. Only the figures are positioned, because
   only the figures need to break out of the column and cross the
   type. */
.fnd-col{width:min(64%,760px);position:relative;z-index:0}

.fnd-type{margin:0;font-family:var(--fat,"Bodoni Moda",Georgia,serif);font-weight:900;
  text-transform:uppercase;line-height:.84;letter-spacing:-.03em;
  color:var(--sand,#D6C3A5);opacity:.19;pointer-events:none;user-select:none;
  /* Sized so the longest line, ANDIE KAT, always finishes before the
     figure begins. At the old size the figure ate the last letter and a
     half at every width, which read as a crop rather than an overlap.
     Her name does not get chopped. */
  font-size:clamp(42px,7.6vw,100px)}
.fnd-type span{display:block;white-space:nowrap}
.fnd-type em{display:block;font-style:normal;font-family:var(--script,"Alex Brush",cursive);
  font-size:.5em;line-height:.92;color:var(--gold,#C87F2C);opacity:.9;
  text-transform:none;letter-spacing:0;margin:.03em 0 .03em .07em}

/* the scroll band from the card, under the names */
.fnd-band{display:block;width:min(52%,340px);height:10px;margin:clamp(16px,2.4vw,26px) 0 0;
  opacity:.36;background:url("/assets/orn-scroll.svg") repeat-x left center/32px 10px}

/* the people, standing beside their own names */
.fnd-cut{position:absolute;right:0;bottom:0;z-index:2;width:min(52%,580px);pointer-events:none}
.fnd-cut img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.62)) drop-shadow(0 4px 9px rgba(0,0,0,.4));
  /* The bottom fade is baked into the asset's alpha channel, not done
     with a CSS mask: mask-image on the same element as a drop-shadow
     filter renders an empty layer in Chromium. Cost me a render to
     find, so it is written down here. */}

/* her side and his side, in the words they already use for each other */
.fnd-side{margin:clamp(20px,3vw,34px) 0 0;max-width:16ch;
  font-family:var(--goth,Oswald,sans-serif);font-weight:500;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold,#C87F2C)}
.fnd-side::before{content:"";display:block;width:26px;height:1px;
  background:var(--gold,#C87F2C);opacity:.7;margin:0 0 9px}
/* his side sits at the foot of the figure, in the part of the frame
   the alpha fade has already darkened, so it stays legible instead of
   fighting a white shirt */
.fnd-side.g{position:absolute;right:0;bottom:0;z-index:3;
  text-align:right;margin:0}
.fnd-side.g::before{margin-left:auto}

/* Below the stage width there is no room for names and people side by
   side, so the whole thing unstacks into type, then people, then
   words, and the names come up to full opacity because they are no
   longer a background layer. Mobile is not a shrunk desktop. */
@media(max-width:820px){
  .fnd-stage{min-height:0;display:block;padding-top:0}
  .fnd-col{width:auto}
  .fnd-type{opacity:.9;font-size:clamp(36px,10.4vw,66px)}
  .fnd-cut{position:static;width:min(100%,440px);margin:22px auto 0}
  .fnd-side.g{position:static;text-align:left;margin:clamp(20px,3vw,34px) 0 0}
  .fnd-side.g::before{margin-left:0}
  .fnd-band{width:min(64%,300px)}
}

/* ---- MOTION -----------------------------------------------------
   Everything above degrades to a still image. The misregistration
   stays: it is a printing artefact, not an animation. It just stops
   breathing.
   ------------------------------------------------------------------ */

@media(prefers-reduced-motion:reduce){
  .mnf-ghost{animation:none}
}

/* ---- CASE STUDY RHYTHM ------------------------------------------
   Brief section 18. Ten case studies kept every image in a heap at
   the bottom. The figures are the same figures; they now sit inside
   the story. .plates was built as an end-of-page grid, so these two
   variants give it sane manners mid-flow.
   ------------------------------------------------------------------ */

.plates-lead,.plates-pair{margin-top:clamp(34px,4.6vw,58px) !important;
  margin-bottom:clamp(34px,4.6vw,58px)}
/* a single plate should fill the measure and stay wide */
.plates-lead{grid-template-columns:1fr}
/* a pair is a pair: neither one gets to span */
.plates-pair .pl:first-child{grid-column:auto}
/* belt and braces: a "pair" holding one plate would otherwise sit in
   half the measure with an empty column beside it */
.plates-pair .pl:only-child{grid-column:1/-1}
.plates-pair .pl:first-child img{aspect-ratio:4/3}
@media(max-width:680px){.plates-pair .pl:first-child img{aspect-ratio:4/3}}

/* ---- IMAGE FRAMES -----------------------------------------------
   Brief section 9. The card's inner hairline, on the figures that
   carry the case studies. One rule, applied where artwork sits on
   the page, so the frame reads as the same hand that drew the card.
   ------------------------------------------------------------------ */

.cs-fig{position:relative}
.cs-fig img{outline:1px solid rgba(200,127,44,.13);outline-offset:-6px}
.pl img{outline:1px solid rgba(200,127,44,.10);outline-offset:-5px}