/* About page (Unit W2, 2026-09-19). Loaded after world-interior.css.
   Every rule is scoped to the About body, so nothing reaches the homepage or
   Features. The shared hooks (.world-interior, .world-interior-hero*,
   [data-reveal], base typography, header and footer chrome) belong to W1 and
   are not restyled here. The one exception is the band title: About's band
   holds only an eyebrow and a title (no lead, no actions), so it is set larger. */
.superstrate-interior-page[data-current-page="about"]{
 --about-ink:#1c1b1f;
 --about-muted:#5b5a52;
 --about-gold:#ffd700;             /* the lockup's yellow: signature bar and emphasis hover */
 --about-prose:clamp(17px,calc(8px + .8vw),24px);
 --about-col:calc(var(--about-prose) * 35);   /* 35em of prose = about 68-72 characters of DM Sans per full line */
 --about-card-pad:clamp(26px,3.3vw,64px);
}

/* ------------------------------------------------------------------ band */
/* One reading axis. The band's eyebrow and title start on the same x as the
   reading column below. W1 gives the band inner and the cream .world-interior
   content boxes of equal width (above 600px), so the same calc lands on the
   same pixel. */
.superstrate-interior-page[data-current-page="about"] .world-interior-hero-inner>.world-interior-eyebrow,
.superstrate-interior-page[data-current-page="about"] .world-interior-hero-inner>.about-title{margin-left:max(0px,calc((100% - var(--about-col)) / 2))}
/* The eyebrow carries the homepage chapter arrow (W1 does not size it). It has
   no hover nudge: the eyebrow is not a link, so it should not move like one
   (impeccable review, false affordance). */
.superstrate-interior-page[data-current-page="about"] .world-interior-eyebrow{display:flex;align-items:center;gap:12px;width:fit-content;cursor:default}
.superstrate-interior-page[data-current-page="about"] .world-interior-eyebrow svg{width:14px;height:14px;flex-shrink:0}
.superstrate-interior-page[data-current-page="about"] .about-title{margin-bottom:0;font-size:clamp(38px,4.4vw,84px);line-height:1.02;letter-spacing:-.045em;max-width:none;text-wrap:balance}
/* The wordmark takes its own line, reading like the lockup: white "Super",
   gold "strate" (W1's .world-gold, the homepage headline gold). */
.superstrate-interior-page[data-current-page="about"] .about-wordmark{display:block}

/* -------------------------------------------------------- reading column */
.superstrate-interior-page[data-current-page="about"] .about-section{padding-top:clamp(64px,6.6vw,128px)}
.superstrate-interior-page[data-current-page="about"] .about-section--responsibility{padding-top:clamp(56px,5.6vw,108px);padding-bottom:clamp(80px,7vw,136px)}
.superstrate-interior-page[data-current-page="about"] .about-column{max-width:var(--about-col);margin-inline:auto;font-size:var(--about-prose);line-height:1.62;color:var(--about-ink)}
.superstrate-interior-page[data-current-page="about"] .about-column p{margin:0 0 1.05em;max-width:none}
.superstrate-interior-page[data-current-page="about"] .about-column>p:last-child{margin-bottom:0}
.superstrate-interior-page[data-current-page="about"] .about-heading{font-size:clamp(32px,2.7vw,52px);line-height:1.08;letter-spacing:-.035em;font-weight:700;margin:0 0 .72em;text-wrap:balance;color:var(--about-ink)}
.superstrate-interior-page[data-current-page="about"] .about-lede{font-size:clamp(20px,calc(10px + .94vw),28px);line-height:1.46;letter-spacing:-.012em}

/* Paragraph strong takes the site emphasis treatment (italic, regular weight,
   yellow on hover). <em> already gets it from world-interior.css. */
.superstrate-interior-page[data-current-page="about"] .about-card p strong{font-weight:400;font-style:italic;text-decoration:none;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background-color .2s,color .2s}
.superstrate-interior-page[data-current-page="about"] .about-card p strong:hover{background:var(--about-gold);color:#1e1e1a}

/* ------------------------------------------------------ responsibility card */
/* The homepage hero-card material: cream over the noise grain, 18px radius,
   hairline border, soft shadow, yellow glow on hover. It is outdented by its
   own padding so the text inside stays on the column axis. It glows but does
   not lift: a 180-word card jumping under the pointer would fight reading. */
.superstrate-interior-page[data-current-page="about"] .about-card{
 position:relative;
 margin:0 calc(var(--about-card-pad) * -1);
 padding:calc(var(--about-card-pad) * .9) var(--about-card-pad) var(--about-card-pad);
 border-radius:18px;
 background:linear-gradient(rgba(255,251,242,.92),rgba(255,251,242,.92)),url("../imgs/superstrate-world/decor/noise.gif") repeat;
 background-color:#fffbf2;
 border:1px solid rgba(28,27,31,.13);
 box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 22px 56px rgba(28,27,31,.13);
 transition:border-color .35s ease,box-shadow .35s ease;
}
.superstrate-interior-page[data-current-page="about"] .about-card:hover{border-color:rgba(255,214,78,.95);box-shadow:0 0 0 1px rgba(255,214,78,.7),0 0 34px rgba(255,214,78,.55),0 0 70px rgba(255,214,78,.28),0 22px 52px rgba(28,27,31,.14)}
/* The grain stills with the Pause control and under reduced motion. */
.superstrate-interior-page[data-current-page="about"][data-motion-paused="true"] .about-card{background-image:linear-gradient(rgba(255,251,242,.92),rgba(255,251,242,.92)),url("../imgs/superstrate-world/decor/noise-still.png")}
@media (prefers-reduced-motion:reduce){
 .superstrate-interior-page[data-current-page="about"] .about-card{background-image:linear-gradient(rgba(255,251,242,.92),rgba(255,251,242,.92)),url("../imgs/superstrate-world/decor/noise-still.png")}
}
.superstrate-interior-page[data-current-page="about"] .about-card .about-heading{font-size:clamp(25px,1.95vw,37px);line-height:1.14;letter-spacing:-.028em;margin-bottom:.85em}
.superstrate-interior-page[data-current-page="about"] .about-card p:last-child{margin-bottom:0}

/* -------------------------------------------------------------- sign-off */
.superstrate-interior-page[data-current-page="about"] .about-column>.about-signoff{margin:clamp(48px,4.6vw,84px) 0 0;font-size:var(--about-prose);line-height:1.5;color:var(--about-muted)}
/* A short bar in the lockup yellow marks the signature. Decorative only. */
.superstrate-interior-page[data-current-page="about"] .about-signoff::before{content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--about-gold);margin-bottom:clamp(18px,1.5vw,26px)}
/* The signature is a name, not paragraph emphasis: it keeps its weight and never takes the yellow hover. */
.superstrate-interior-page[data-current-page="about"] .about-signoff strong{font-size:clamp(22px,1.55vw,29px);line-height:1.3;font-weight:700;font-style:normal;text-decoration:none;letter-spacing:-.02em;color:var(--about-ink)}

/* ----------------------------------------------------------- breakpoints */
@media (max-width:700px){
 .superstrate-interior-page[data-current-page="about"] .about-card{margin-inline:0;padding:26px 22px 28px}
}
@media (max-width:600px){
 .superstrate-interior-page[data-current-page="about"] .about-title{font-size:clamp(34px,9.6vw,44px);line-height:1.04;letter-spacing:-.04em}
 .superstrate-interior-page[data-current-page="about"] .about-heading{font-size:30px}
 .superstrate-interior-page[data-current-page="about"] .about-card .about-heading{font-size:24px}
 .superstrate-interior-page[data-current-page="about"] .about-column{line-height:1.6}
}