/* A stable name and four shared letter pieces connect both SI meanings. */
.domain-story { min-width:0; width:100%; max-width:500px; margin-inline:auto; --domain-si-accent:.55; --domain-suffix-accent:.55; }
.domain-story__stage { display:grid; place-items:center; padding:10px 0; }
.domain-story__word { display:inline-flex; align-items:baseline; white-space:nowrap; direction:ltr; color:var(--ink); font:600 clamp(36px,4vw,54px)/1.2 "Source Sans",Arial,sans-serif; letter-spacing:-.035em; }
[data-domain-anchor] { position:relative; display:inline-block; color:var(--clay); }
[data-domain-initial] { text-shadow:0 0 calc(2px + 9px * var(--domain-si-accent)) #A34F3466; }
[data-domain-suffix] { color:var(--green); text-shadow:0 0 calc(2px + 9px * var(--domain-suffix-accent)) #245C4F66; }
.domain-story__puzzle { display:block; width:100%; max-width:430px; height:auto; margin:-5px auto 0; overflow:visible; }
.domain-story__eyes { fill:none; stroke:var(--ink); stroke-width:5; stroke-linecap:round; }
[data-domain-group="initials"] { --piece-accent:var(--domain-si-accent,.55); --piece-rgb:163 79 52; --piece-fill:#EBD3BD; }
[data-domain-piece="i"] { --piece-fill:#F2DFCE; }
[data-domain-group="domain"] { --piece-accent:var(--domain-suffix-accent,.55); --piece-rgb:36 92 79; --piece-fill:#D2DED1; }
[data-domain-piece="domain-i"] { --piece-fill:#E2E9DC; }
.domain-story__contour { fill:var(--piece-fill); stroke:var(--paper); stroke-width:2.5; stroke-linejoin:round; }
.domain-story__badge { fill:rgb(var(--piece-rgb)); font:600 56px/1 "Source Sans",Arial,sans-serif; filter:drop-shadow(0 0 calc(1px + 4px * var(--piece-accent)) rgb(var(--piece-rgb)/.2)); }
.brand-story { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:50px; padding:44px; border:1px solid var(--line); border-radius:32px; background:var(--white); }
.domain-story__legend { display:grid; gap:30px; }
.domain-story__legend article { min-width:0; }
.domain-story__legend h3 { margin:10px 0; font-size:25px; letter-spacing:-.025em; }
.domain-story__legend p { margin:0; font-size:17px; line-height:1.65; color:var(--muted); }
.brand-initials { display:inline-flex; min-width:52px; justify-content:center; border-radius:999px; padding:5px 13px; font-size:20px; font-weight:600; color:var(--clay); background:#f2dfce; }
[data-domain-meaning="domain"] .brand-initials { color:var(--green); background:var(--sage); }
@media(max-width:760px) {
  .brand-story { grid-template-columns:1fr; gap:25px; padding:27px; border-radius:24px; }
  .domain-story { max-width:380px; }
  .domain-story__word { font-size:40px; }
  .domain-story__legend { gap:25px; }
  .domain-story__legend h3 { font-size:23px; }
}
@media(max-width:380px) {
  .brand-story { padding:22px; }
  .domain-story__word { font-size:35px; }
}