/* sos-about.css — About / Services / Contact pages.
   Layered on sos.css + sos-case.css. Every selector is namespaced ab- / sv- / ct-
   so the homepage and the case studies are untouched.

   PALETTE NOTE: --ink in sos.css is #080706 — near-black, for type sitting ON
   paper plates. Light type on the night ground is --cream / --sand. Using --ink
   here once produced near-invisible contact details. Light text = --cream.

   MEDIA NOTE: files pushed to the server through the bridge land at mode 600 and
   nginx 403s them. Anything new added under /media/ needs chmod 644 before it
   will serve. The 2026/09 set was opened on 6 September.

   GRID NOTE, learned the hard way twice now: a grid track written as 1fr is
   minmax(auto,1fr), and auto resolves to MIN-CONTENT. An <img> carrying a width
   attribute reports its intrinsic width as min-content, so three 900px photos in
   repeat(3,1fr) demanded 2700px and shoved the whole page sideways — the masthead
   nav ran off the right edge. Any track holding media is minmax(0,1fr), and the
   items get min-width:0. Same family of bug as the auto-fit orphan rows in
   sos.css: let the container decide the size, never the content. */

/* ---------- About: portrait ---------- */
.ab-portrait{margin:0 0 10px}
.ab-photo{
  display:block; width:100%; max-width:900px; height:auto;
  box-shadow:0 0 0 1px var(--rule);
}
.ab-portrait figcaption{
  font-family:"Courier Prime",ui-monospace,monospace; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--dim);
  padding:12px 2px 0; max-width:900px;
}

/* ---------- About: the strip of three ---------- */
.ab-strip{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px; margin:40px 0 8px;
}
@media(max-width:760px){.ab-strip{grid-template-columns:minmax(0,1fr); gap:30px}}
.ab-strip figure{margin:0; min-width:0}
.ab-strip img{
  display:block; width:100%; max-width:100%; height:260px; object-fit:cover;
  box-shadow:0 0 0 1px var(--rule);
}
@media(max-width:760px){.ab-strip img{height:auto}}
.ab-strip figcaption{
  font-family:"Courier Prime",monospace; font-size:11.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--dim); padding:11px 1px 0;
}

/* ---------- About: tempest / alchemist ---------- */
.ab-two{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule); margin:34px 0 40px;
}
@media(max-width:760px){.ab-two{grid-template-columns:minmax(0,1fr)}}
.ab-half{background:var(--black2); padding:34px 34px 38px; min-width:0}
.ab-half p{margin:0; color:var(--sand); line-height:1.66}
.ab-role{
  font-family:"Bodoni Moda",Georgia,serif; font-weight:800;
  font-size:clamp(24px,3vw,34px); line-height:1.08; letter-spacing:-.01em;
  color:var(--gold-lt) !important; margin:0 0 14px !important;
}

.ab-pull{
  font-family:"Bodoni Moda",Georgia,serif; font-weight:600; font-style:italic;
  font-size:clamp(24px,3.6vw,42px); line-height:1.22; text-wrap:balance;
  color:var(--cream); max-width:22ch; margin:44px 0; padding-left:26px;
  border-left:2px solid var(--gold);
}

.ab-close{border-top:1px solid var(--rule); margin-top:48px; padding-top:44px}
.ab-dare{
  font-family:"Oswald",Impact,sans-serif; font-weight:300;
  font-size:clamp(20px,2.6vw,30px); line-height:1.34; letter-spacing:.02em;
  text-transform:uppercase; color:var(--cream); margin:0 0 26px;
}
.ab-join{max-width:60ch; color:var(--sand); margin:0 0 26px}
.ab-sig{
  font-family:"Alex Brush",cursive; font-size:clamp(28px,4.4vw,46px);
  line-height:1.2; color:var(--gold-lt); margin:0 0 34px;
}
.ab-cta{display:flex; flex-wrap:wrap; gap:14px; margin:0}
.ab-cta a{
  font-family:"Oswald",sans-serif; font-size:13px; letter-spacing:.20em;
  text-transform:uppercase; padding:15px 26px; border:1px solid var(--rule);
  color:var(--cream); text-decoration:none;
}
.ab-cta a:first-child{border-color:var(--gold); color:var(--gold-lt)}
.ab-cta a:hover{border-color:var(--gold-lt); color:var(--gold-lt)}
.ab-cta a:focus-visible{outline:2px solid var(--gold-lt); outline-offset:3px}

/* ---------- Services: the nine ---------- */
.sv-list{border-top:1px solid var(--rule); margin:36px 0 0}
.sv-row{
  display:grid; grid-template-columns:64px minmax(0,1fr) minmax(0,1.1fr); gap:30px;
  padding:28px 0; border-bottom:1px solid var(--rule); align-items:start;
}
@media(max-width:820px){
  .sv-row{grid-template-columns:44px minmax(0,1fr); gap:14px 16px}
  .sv-row p{grid-column:2}
}
.sv-n{font-family:"Courier Prime",monospace; font-size:13px; color:var(--gold); padding-top:7px}
.sv-row h3{
  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;
}
.sv-row p{margin:0; color:var(--dim); font-size:15.5px; line-height:1.62}

/* ---------- Services: the reel ----------
   Vertical 9:16 and silent, so it is framed as the phone-shot thing it is
   rather than stretched into a widescreen hero with a play button people
   expect sound from. */
.sv-reel{
  display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:44px; align-items:center;
  margin:54px 0 8px; padding:38px 38px 40px;
  background:var(--black2); border:1px solid var(--rule);
}
@media(max-width:820px){
  .sv-reel{grid-template-columns:minmax(0,1fr); gap:30px; padding:30px 26px 34px}
  .sv-phone{max-width:300px}
}
.sv-reel-txt{min-width:0}
.sv-reel-k{
  font-family:"Oswald",sans-serif; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin:0 0 14px;
}
.sv-reel-h{
  font-family:"Bodoni Moda",Georgia,serif; font-weight:800; color:var(--cream);
  font-size:clamp(26px,3.4vw,40px); line-height:1.06; letter-spacing:-.01em;
  margin:0 0 18px; text-wrap:balance;
}
.sv-reel-txt p{color:var(--sand); margin:0 0 14px; max-width:52ch; line-height:1.66}
.sv-reel-n{
  font-family:"Courier Prime",monospace !important; font-size:12px !important;
  letter-spacing:.08em; text-transform:uppercase; color:var(--dim) !important; margin:0 !important;
}
.sv-phone{
  border:1px solid var(--rule); padding:8px; background:var(--black);
  box-shadow:0 0 0 1px rgba(0,0,0,.4); min-width:0;
}
.sv-vid{
  display:block; width:100%; max-width:100%; height:auto;
  aspect-ratio:9/16; background:var(--black);
}

.sv-inv{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule); margin:34px 0 0;
}
@media(max-width:900px){.sv-inv{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sv-inv span{
  background:var(--black2); padding:17px 18px; min-width:0;
  font-family:"Oswald",sans-serif; font-weight:300; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sand);
}

/* ---------- Contact ---------- */
.ct-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule); margin:36px 0 0;
}
@media(max-width:820px){.ct-grid{grid-template-columns:minmax(0,1fr)}}
.ct-c{
  background:var(--black2); padding:30px 30px 34px; min-width:0;
  display:flex; flex-direction:column; gap:10px;
}
.ct-c .k{
  font-family:"Oswald",sans-serif; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold);
}
.ct-c a,.ct-c span.v{
  font-family:"Bodoni Moda",Georgia,serif; font-weight:600; font-size:22px;
  line-height:1.24; color:var(--cream); text-decoration:none;
}
.ct-c a:hover{color:var(--gold-lt)}
.ct-c a:focus-visible{outline:2px solid var(--gold-lt); outline-offset:3px}
.ct-c .sm{font-family:"Barlow",sans-serif; font-size:14px; color:var(--dim); margin:0}

.ct-note{
  border-left:2px solid var(--gold); padding:24px 28px;
  background:var(--black2); margin:40px 0 0; max-width:70ch;
}
.ct-note h3{
  font-family:"Oswald",sans-serif; font-size:12px; letter-spacing:.20em;
  text-transform:uppercase; color:var(--gold); margin:0 0 12px;
}
.ct-note p{margin:0 0 12px; color:var(--sand)}
.ct-note p:last-child{margin:0}