/* THE SIGNALS — the editorial branch of Blackorange.
   Deliberately breaks the product-page rhythm: denser, asymmetric, ruled rather than
   boxed. Playfair carries the headlines because on a publication the headline IS what
   the page says. Plus Jakarta Sans carries every label: kickers, metadata, forms. */

.sg-page{--sg-w:1240px;--sg-rule:rgba(23,23,23,.13);--sg-rule-soft:rgba(23,23,23,.08)}
.sg-wrap{max-width:var(--sg-w);margin:0 auto;padding:0 24px}
.sg-page .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sg-sec{padding:clamp(72px,9vw,128px) 0}
.sg-rule{height:1px;background:var(--sg-rule);border:0;margin:0}

/* section headers: a label and a headline on one baseline, not a centred block */
.sg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-bottom:18px;border-bottom:2px solid var(--ink);margin-bottom:clamp(34px,4.4vw,56px)}
.sg-head h2{font-size:clamp(26px,3vw,36px);line-height:1.05;margin:0;letter-spacing:-.015em}
.sg-head .sg-headnote{font-family:var(--font-sans);font-size:14.5px;line-height:1.5;
  color:var(--ink-copy);max-width:44ch;margin:0;padding-bottom:4px}
.sg-head--plain{border-bottom-width:1px;border-color:var(--sg-rule)}

/* shared editorial atoms ------------------------------------------------ */
.sg-kicker{font-family:var(--font-sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-ink);margin:0 0 9px;display:block}
.sg-kicker--quiet{color:var(--ink-muted)}
.sg-meta{font-family:var(--font-sans);font-size:12.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-muted);margin:10px 0 0}
.sg-deck{font-size:16px;line-height:1.6;color:var(--ink-copy);margin:10px 0 0}
.sg-more{font-family:var(--font-sans);font-size:14.5px;font-weight:700;color:var(--ink);
  text-decoration:none;border-bottom:1.5px solid var(--brand);padding-bottom:1px}
a.sg-more:hover{color:var(--brand-ink);border-color:var(--brand-ink)}

/* a story is a link that behaves like a block, with no card around it */
.sg-story{display:block;color:inherit;text-decoration:none}
.sg-story h3{margin:0;letter-spacing:-.015em;text-wrap:balance}
.sg-story:hover h3{color:var(--brand-ink)}
.sg-shot{display:block;width:100%;height:auto;border-radius:var(--r-sm);background:var(--surface-sunken)}

/* 01 masthead ----------------------------------------------------------- */
.sg-mast{background:#f9ead8;padding:clamp(168px,18vh,196px) 0 0}
.sg-mast-in{border-bottom:1px solid rgba(23,23,23,.16);padding-bottom:30px}
.sg-mast .sg-kicker{margin-bottom:12px}
.sg-mast h1{font-size:clamp(44px,7vw,86px);line-height:.96;margin:0;letter-spacing:-.03em}
.sg-standfirst{font-size:clamp(15px,1.3vw,17px);line-height:1.55;color:var(--ink-copy);
  margin:18px 0 0;font-weight:400;text-wrap:pretty;max-width:72ch}
/* the break separates the claim from the explanation, at every width */
.sg-mastnav{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;padding:18px 0 20px}
.sg-mastnav a{font-family:var(--font-sans);font-size:12.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;padding:4px 0}
.sg-mastnav a:hover{color:var(--brand-ink)}
.sg-mastnav span{color:rgba(23,23,23,.3);font-size:11px}
/* the three rubrics carry the publication; the newsletter and the channel are
   utilities, set apart by a rule and a quieter colour */
.sg-navrule{width:1px;height:13px;background:rgba(23,23,23,.25);margin:0 8px}
.sg-mastnav a.sg-navalt{color:var(--ink-muted)}
.sg-mastnav a.sg-navalt:hover{color:var(--brand-ink)}
.sg-mast-edge{height:3px;background:var(--brand)}

/* 02 front page --------------------------------------------------------- */
.sg-front{background:var(--surface-page);padding:clamp(52px,6vw,84px) 0 0}
.sg-front-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(36px,4.6vw,68px)}
.sg-side{display:grid;gap:34px;align-content:start;
  padding-left:clamp(36px,4.6vw,68px);border-left:1px solid var(--sg-rule)}

.sg-lead h3{font-size:clamp(30px,3.7vw,46px);line-height:1.06;margin-top:16px}
/* the wide asset cuts the subject's chin; the square one holds the whole head,
   and 4:3 leaves air above the hair and below the jaw */
/* the kicker was sitting flush against the picture, which reads as a caption
   stuck to it rather than the start of the story */
.sg-lead .sg-shot{aspect-ratio:4/3;object-fit:cover;object-position:50% 14%;
  margin-bottom:clamp(16px,1.8vw,22px)}
/* deliberately two steps above the standfirst: the lead story carries the
   largest body text on the page. First rule on the new scale. */
.sg-lead .sg-deck{font-size:var(--t-lg);max-width:52ch}
.sg-lead-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
.sg-lead-foot .sg-meta{margin:0}

.sg-side .sg-story{display:grid;grid-template-columns:1fr 104px;gap:16px;align-items:start}
.sg-side .sg-story h3{font-size:clamp(19px,1.6vw,22px);line-height:1.18}
.sg-side .sg-shot{aspect-ratio:1/1;object-fit:cover}
.sg-side .sg-deck{font-size:14.5px;margin-top:7px}
.sg-side-div{height:1px;background:var(--sg-rule);margin:0}

/* 03 latest ------------------------------------------------------------- */
.sg-feed{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(40px,5vw,66px) clamp(30px,3.6vw,50px)}
.sg-feed .sg-story{padding-top:22px;border-top:1px solid var(--sg-rule)}
.sg-feed .sg-story h3{font-size:19.5px;line-height:1.2;margin-top:10px}
.sg-feed .sg-deck{font-size:14.5px;margin-top:8px}
/* square portraits cropped to 16:10: centring them clips the top of the head,
   so the window sits high and leaves every subject headroom */
.sg-feed .sg-shot{aspect-ratio:16/10;object-fit:cover;object-position:50% 28%;margin-bottom:12px}
/* all six carry a portrait: the rubric is Founders, so the people are the point */

/* 04 reports ------------------------------------------------------------ */
.sg-reports{background:var(--surface-sunken)}
.sg-repgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.4vw,46px)}
.sg-rep{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:start;
  background:var(--surface-raised);border:1px solid var(--sg-rule-soft);border-radius:var(--r-sm);
  padding:26px;color:inherit;text-decoration:none}
a.sg-rep:hover{border-color:var(--hairline-strong)}
.sg-rep .sg-shot{aspect-ratio:3/4;object-fit:cover;border-radius:4px;
  box-shadow:0 6px 18px rgba(23,23,23,.13)}
.sg-rep h3{font-size:21px;line-height:1.2;margin:0}
.sg-rep .sg-deck{font-size:14.5px}
/* forthcoming: the cover on the left like the other two, so it reads as a
   report rather than a note, but dashed and unlinked because it isn't one yet */
.sg-rep--soon{grid-column:1/-1;background:transparent;border-style:dashed;
  border-color:var(--hairline-strong);align-items:center}
.sg-rep--soon h3{font-family:var(--font-sans);font-size:var(--t-lg);font-weight:700}
/* the deck sits under its own title, not in a column of its own */
.sg-soon-txt .sg-deck{max-width:52ch}

/* 05 the newsletter ----------------------------------------------------- */
/* activation layout: the claim and one field on the left, the product on the
   right. One input, because every extra field costs sign-ups. */
.sg-news{background:#1c1a17;color:#efe9e0;overflow:hidden}
.sg-news-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,4.5vw,72px);align-items:end}
.sg-news .sg-kicker{color:#f2a06a}
.sg-news h2{color:#fff;font-size:clamp(38px,5vw,64px);line-height:1.02;margin:0 0 20px;
  letter-spacing:-.03em;max-width:12ch;text-wrap:balance}
.sg-news-lead{font-size:16.5px;line-height:1.6;color:#c9c2ba;margin:0 0 12px;max-width:46ch}
/* the pay-off line, the one thing in the block that should stop a skimmer */
.sg-news-say{padding-bottom:clamp(8px,2vw,26px)}
.sg-news-punch{font-size:clamp(17px,1.6vw,20px);line-height:1.45;color:#fff;font-weight:600;
  margin:22px 0 30px;max-width:34ch;text-wrap:balance}
/* the brief itself, standing in the frame and running off the bottom edge of the
   band, so the section reads as a product rather than a form */
.sg-news-shot{align-self:end;justify-self:end;width:100%;max-width:460px;
  margin-bottom:calc(-1 * clamp(72px,9vw,128px))}
.sg-news-shot img{width:100%;height:auto;display:block;border-radius:var(--r-md) var(--r-md) 0 0}

.sg-inline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;max-width:540px}
.sg-inline input{font:inherit;font-size:17px;padding:17px 20px;border:1px solid transparent;
  border-radius:10px;background:#fff;color:#171717;width:100%;box-sizing:border-box}
.sg-inline input::placeholder{color:#8a847e}
.sg-inline input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,102,2,.3)}
.sg-inline .btn{padding:17px 32px;font-size:16px;white-space:nowrap}
.sg-form .sg-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sg-form .form-status{margin:12px 0 0;font-size:14px;color:#efe9e0}
.sg-form .form-status.is-error{color:#ff9d82}
.sg-fine{margin:14px 0 0;font-size:13px;line-height:1.5;color:#8d8781}
.sg-fine a{color:#c9c2ba}
.sg-done{outline:none}
.sg-done h3{font-family:var(--font-sans);font-size:20px;font-weight:700;color:#fff;margin:0 0 6px}
.sg-done p{font-size:15px;line-height:1.6;color:#c9c2ba;margin:0}

/* 06 watch -------------------------------------------------------------- */
.sg-watchgrid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(26px,3.4vw,46px)}
.sg-watch-main .sg-shot{aspect-ratio:16/9;object-fit:cover}
.sg-watch-main h3{font-size:clamp(22px,2.3vw,28px);line-height:1.15;margin-top:14px}
.sg-eps{display:grid;gap:16px;align-content:start;
  padding-left:clamp(26px,3.4vw,46px);border-left:1px solid var(--sg-rule)}
.sg-eps .sg-story{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start}
.sg-eps .sg-shot{aspect-ratio:16/9;object-fit:cover}
.sg-eps h3{font-size:16.5px;line-height:1.25}
/* until real episodes are listed, the section says so rather than faking three */
/* no episodes are listed yet, so the section carries a picture of the work
   instead of three invented cards */
.sg-watch-empty{display:grid;grid-template-columns:7fr 5fr;gap:clamp(26px,3.4vw,46px);align-items:center}
.sg-watch-art{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r-md);display:block}
.sg-watch-say{align-self:center}
.sg-watch-empty h3{font-size:clamp(21px,2.2vw,28px);line-height:1.15;margin:0 0 10px}
.sg-watch-empty p{margin:0 0 20px;font-size:15.5px;line-height:1.6;color:var(--ink-copy);max-width:40ch}

/* 07 ideas -------------------------------------------------------------- */
.sg-ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(32px,4vw,56px)}
.sg-idea{padding:26px 0 34px;border-top:1px solid var(--sg-rule)}
.sg-idea h3{font-size:19px;line-height:1.24;margin:9px 0 0;letter-spacing:-.012em}
.sg-idea p{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-copy)}
.sg-idea .sg-src{font-family:var(--font-sans);font-size:12.5px;font-weight:600;color:var(--ink-muted);
  margin-top:10px;display:block;text-decoration:none}
.sg-idea .sg-src:hover{color:var(--brand-ink)}
.sg-idea--quote{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;
  gap:clamp(18px,3vw,40px);align-items:start;padding:26px 0 30px;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--sg-rule)}
.sg-idea--quote blockquote{margin:0;font-family:var(--font-display);
  font-size:clamp(23px,2.6vw,33px);line-height:1.18;letter-spacing:-.02em;color:var(--ink);
  max-width:34ch;text-wrap:balance}
.sg-idea--quote:before{content:"“";font-family:var(--font-display);font-size:64px;
  line-height:.72;color:var(--brand)}
.sg-idea--quote .sg-src{grid-column:2;margin-top:14px}

/* responsive ------------------------------------------------------------ */
@media(max-width:1080px){
  .sg-front-grid,.sg-watchgrid{grid-template-columns:1fr}
  .sg-side,.sg-eps{padding-left:0;border-left:0;border-top:1px solid var(--sg-rule);padding-top:24px}
  .sg-news-grid{grid-template-columns:1fr}
  .sg-news-shot{justify-self:center;max-width:340px;margin-bottom:calc(-1 * clamp(48px,7vw,96px))}
  .sg-ideas{grid-template-columns:1fr 1fr}
  .sg-idea--quote{grid-column:1/-1}
}
@media(max-width:860px){
  .sg-feed{grid-template-columns:1fr 1fr}
  .sg-repgrid{grid-template-columns:1fr}
  .sg-watch-empty{grid-template-columns:1fr;gap:22px}
  .sg-watch-empty picture{display:block}
}
@media(max-width:620px){
  /* the phone gets the square crop, where he fills the frame */
  .sg-watch-art{aspect-ratio:1/1}
  .sg-mast{padding-top:190px}
  /* the row wraps on a phone, and a dangling separator at a line end looks like a typo */
  .sg-mastnav span{display:none}
  .sg-mastnav{gap:6px 20px}
  .sg-head{flex-direction:column;align-items:flex-start;gap:10px}
  .sg-head .sg-headnote{padding-bottom:0}
  .sg-feed,.sg-ideas{grid-template-columns:1fr}
  .sg-rep{grid-template-columns:104px 1fr;gap:16px;padding:16px}
    .sg-side .sg-story{grid-template-columns:1fr 84px;gap:13px}
  .sg-eps .sg-story{grid-template-columns:104px 1fr}
  .sg-inline{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.sg-story,.sg-story h3{transition:none}}