/* Local grain and CSS linework: no external texture requests. */
.soc-hero{position:relative;isolation:isolate}
.soc-hero::before,.soc-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.soc-hero::before{
  background:url("paper-grain.svg") repeat;
  opacity:.08;
}
.soc-hero::after{
  background:repeating-linear-gradient(135deg,#52748C 0 1px,transparent 1px 7px);
  opacity:.1;
  -webkit-mask-image:radial-gradient(ellipse at 100% 15%,#000 0%,transparent 67%);
  mask-image:radial-gradient(ellipse at 100% 15%,#000 0%,transparent 67%);
}
[data-theme="dark"] .soc-hero::before{opacity:.07}
[data-theme="dark"] .soc-hero::after{background:repeating-linear-gradient(135deg,#95B2C7 0 1px,transparent 1px 7px)}
@media(max-width:700px){
  .soc-hero::before{opacity:.06}
  .soc-hero::after{opacity:.05}
}
@media(forced-colors:active){
  .soc-hero::before,.soc-hero::after{display:none}
}

/* Detections: step numerals. Orange as ink, a bordered tile, no fill. */
.soc-story .seq .n.num{
  display:inline-flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;padding:0;margin-top:.1rem;
  border:1px solid var(--signal);border-radius:2px;
  font-family:var(--sans);font-weight:700;font-size:1.35rem;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;line-height:1;color:var(--signal);
  box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4px var(--rule-soft);
}
.soc-story .seq .num-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:560px){
  .soc-story .seq .n.num{width:2.5rem;height:2.5rem;font-size:1.15rem;margin-bottom:.7rem}
}
@media(forced-colors:active){
  .soc-story .seq .n.num{box-shadow:none;border-color:CanvasText;color:CanvasText}
}

/* What's included: nine tiles, one frame. Glyphs are single-stroke linework in ink. */
.incl-map-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:3rem;align-items:end}
.incl-map-head .lbl{grid-column:1/-1}
.incl-map-head h2{max-width:14ch}
.incl-map-head .lede{margin-top:0;align-self:end;padding-bottom:.35rem}
.incl-map .incl-grid{gap:0;border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.incl-map .incl-grid>div{position:relative;border:0;border-right:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);border-radius:0;padding:1.6rem 1.5rem 1.7rem;background:var(--paper);transition:background .2s}
.incl-map .incl-grid>div:nth-child(3n){border-right:0}
.incl-map .incl-grid>div:nth-last-child(-n+3){border-bottom:0}
.incl-map .incl-grid>div:hover{background:var(--card)}
.incl-map .incl-idx{position:absolute;top:1.2rem;right:1.3rem;font-family:var(--mono,var(--sans));font-size:.7rem;letter-spacing:.04em;color:var(--slate);opacity:.7;font-variant-numeric:tabular-nums}
.incl-map .incl-glyph{display:block;color:var(--ink);margin-bottom:1.1rem;transition:color .2s}
.incl-map .incl-grid>div:hover .incl-glyph{color:var(--signal)}
.incl-map .incl-grid .t{margin-bottom:.5rem}
.incl-map .incl-grid h3{font-size:1.05rem;letter-spacing:-.015em}
@media(max-width:900px){
  .incl-map-head{grid-template-columns:1fr;row-gap:1rem}
  .incl-map-head h2{max-width:20ch}
  .incl-map .incl-grid>div:nth-child(3n){border-right:1px solid var(--rule-soft)}
  .incl-map .incl-grid>div:nth-child(2n){border-right:0}
  .incl-map .incl-grid>div:nth-last-child(-n+3){border-bottom:1px solid var(--rule-soft)}
  .incl-map .incl-grid>div:nth-last-child(-n+1){border-bottom:0}
}
@media(max-width:560px){
  .incl-map .incl-grid>div{border-right:0 !important;border-bottom:1px solid var(--rule-soft)}
  .incl-map .incl-grid>div:last-child{border-bottom:0}
}
@media(forced-colors:active){.incl-map .incl-glyph{color:CanvasText}}