/* World interior pages (Unit W1, 2026-09-19): about-us.html, features.html.
   Loaded after homepage-fonts, homepage-world and world-effects, before the
   page's own stylesheet. Every rule is scoped under .superstrate-interior-page
   (the interior <body>), so nothing here can reach body.superstrate-world-page.
   There are no exceptions: no rule targets <html> on its own.
   The footer, the menu toggle and the back-to-top button get NO rules here:
   they render exactly as on the homepage (the footer's About / Features link
   carries aria-current from chrome.js, but no visible marker).

   Hooks (the interior page contract):
   .world-interior                    content container on the header gutter
   .world-interior-hero               noise-black page-title band (grain: interior.js)
   .world-interior-hero-inner         its content wrapper (with .world-interior)
   .world-interior-eyebrow / -lead    band eyebrow and lead
   [data-reveal] (+ data-reveal-delay) one-shot fade-up, never hidden without JS
   body[data-current-page]            current page marked in all three navs */

/* ---------------------------------------------------------------- ground */
.superstrate-interior-page{
 --wi-gutter:4.4vw;          /* = .world-header padding-inline, 1101px and up */
 --wi-max:1752px;            /* content width at 1920 (1920 - 2 x 4.4vw); caps wider screens */
 --wi-header:96px;           /* .world-header height */
 --wi-band-ink:#fff;
 --wi-band-muted:rgba(255,255,255,.72);   /* THEME_TEXT.dark.muted */
 --wi-gold:#ffd64e;          /* .world-gold on the homepage hero */
 --wi-anchor-offset:104px;   /* clears the fixed menu toggle (top 24 + 62px) */
 background:#ffffff;
 color:var(--ink);
}
/* No scrollbar-gutter here: it would change what vw resolves to, and every
   vw-based footer value must compute exactly as on the homepage (R1).
   No root scroll-behavior either (R2): the root stays auto, as on the
   homepage, so focus-driven scrolls and #fragment loads are instant.
   interior.js animates same-page anchor clicks itself. */
/* Contain the band's margin so it cannot collapse through <main> and <body>
   and push the absolute header down with it. */
.superstrate-interior-page .world-interior-main{display:flow-root}
.superstrate-interior-page main [id]{scroll-margin-top:var(--wi-anchor-offset)}

/* ------------------------------------------------------------- container */
.superstrate-interior-page .world-interior{
 box-sizing:border-box;
 width:100%;
 padding-inline:max(var(--wi-gutter),calc((100% - var(--wi-max)) / 2));
}

/* ---------------------------------------------------------- header chrome */
/* The header only ever overlays the dark band, so it takes the dark-chapter
   ink the homepage writes into --ink on its black chapters (THEME_TEXT.dark). */
.superstrate-interior-page .world-header{color:var(--wi-band-ink)}
/* The reversed lockup, as the homepage hero and load veil use on black. The
   logo scrolls away with the band instead of staying fixed (without JS it
   could otherwise sit white-on-cream forever), and hides with the header under
   .world-scrolled, when the menu toggle takes over, as on the homepage. */
.superstrate-interior-page .world-header-logo{position:absolute;transition:opacity .2s,transform .2s,visibility .2s}
.superstrate-interior-page .world-header-logo img{content:url("../imgs/superstrate-homepage/logo-reversed.png")}
.superstrate-interior-page.world-scrolled .world-header-logo{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-20px)}
/* homepage-world.css (W4-hero, 2026-09-19) hides the fixed header logo on
   every unpinned body, `body:not(.world-pinned) .world-header-logo` (0-2-1),
   because the homepage's flow hero shows its own lockup. An interior body is
   never pinned and has no such lockup, so the header logo is its logo: shown
   until the page scrolls (0-3-0 wins), then hidden by the rule above. */
.superstrate-interior-page:not(.world-scrolled) .world-header-logo{opacity:1;visibility:visible;pointer-events:auto}

/* Current page: visible with JS off (body attribute + href), and on the
   aria-current link chrome.js marks. Restrained: a 2px underline, yellow on
   the dark header, ink in the cream menu. The footer gets aria-current only,
   never a visible marker: it keeps exactly its homepage appearance.
   COUPLED TO THE INCLUDE PARAMS: the literal hrefs "/about-us" and
   "/features" below are the "about" and "features" values every page
   passes to world-header.html. Change those params and change these too, or
   the JS-off marker silently stops matching (the aria-current rules still
   work with JS). */
.superstrate-interior-page[data-current-page="about"] .world-header nav a[href="/about-us"],
.superstrate-interior-page[data-current-page="features"] .world-header nav a[href="/features"],
.superstrate-interior-page .world-header nav a[aria-current="page"]{
 text-decoration:underline;text-decoration-color:#ffd700;text-decoration-thickness:2px;text-underline-offset:.4em;
}
.superstrate-interior-page[data-current-page="about"] .world-menu nav a[href="/about-us"],
.superstrate-interior-page[data-current-page="features"] .world-menu nav a[href="/features"],
.superstrate-interior-page .world-menu nav a[aria-current="page"]{
 text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:max(2px,.05em);text-underline-offset:.16em;
}
/* Industries (2026-09-24): on an industry page the Industries button takes the
   header and menu marker (chrome.js adds .is-current), and the item itself is
   underlined in ink inside the cream popovers, never yellow on cream. Same
   JS-off coupling as above: the slug and the href are the partials' literals. Demos (1 October 2026) shares the
   Industries classes, so the slug rules name Industries alone (.world-demos never takes the marker). */
.superstrate-interior-page[data-current-page="wedding-event-venues"] .world-header .world-industries:not(.world-demos) .world-industries-toggle,
.superstrate-interior-page .world-header .world-industries-toggle.is-current{
 text-decoration:underline;text-decoration-color:#ffd700;text-decoration-thickness:2px;text-underline-offset:.4em;
}
.superstrate-interior-page[data-current-page="wedding-event-venues"] .world-menu .world-industries:not(.world-demos) .world-industries-toggle,
.superstrate-interior-page .world-menu .world-industries-toggle.is-current{
 text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:max(2px,.05em);text-underline-offset:.16em;
}
.superstrate-interior-page[data-current-page="wedding-event-venues"] .world-industries--pop .world-industries-list a[href="/industries/wedding-event-venues"],
.superstrate-interior-page .world-industries--pop .world-industries-list a[aria-current="page"],
.superstrate-interior-page[data-current-page="wedding-event-venues"] .world-menu .world-industries-list a[href="/industries/wedding-event-venues"]{
 text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:2px;text-underline-offset:.3em;
}

/* ------------------------------------------------------ page-title band */
/* Same family as the homepage hero panel and the footer: #1e1e1a with the
   Orisa grain, inset by the frame token on every side and rounded to it. */
.superstrate-interior-page .world-interior-hero{
 position:relative;isolation:isolate;overflow:hidden;
 margin:var(--frame-inset);
 border-radius:var(--frame-radius);
 background:#1e1e1a;color:var(--wi-band-ink);
 display:flex;flex-direction:column;justify-content:flex-end;
 min-height:clamp(440px,60svh,760px);
 padding-block:calc(var(--wi-header) - var(--frame-inset) + clamp(32px,6vh,64px)) clamp(44px,7vh,88px);
}
.superstrate-interior-page .world-interior-hero > .world-noise{opacity:.12;z-index:0}
/* Text lines up with the header gutter (logo and nav) measured from the
   viewport, not from the inset band edge; 20px floor on phones. */
.superstrate-interior-page .world-interior-hero .world-interior,
.superstrate-interior-page .world-interior-hero .world-interior-hero-inner{
 position:relative;z-index:1;
 padding-inline:max(calc(var(--wi-gutter) - var(--frame-inset)),calc((100% - var(--wi-max)) / 2),20px);
}
.superstrate-interior-page .world-interior-eyebrow{
 margin:0 0 20px;max-width:none;
 font-size:15px;line-height:1.35;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
 text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;
}
.superstrate-interior-page .world-interior-hero h1{
 margin:0 0 24px;max-width:20ch;
 font-family:var(--ff-heading);font-weight:700;font-style:normal;
 font-size:clamp(44px,3.3vw,64px);line-height:1.08;letter-spacing:-.04em;text-wrap:balance;
 color:var(--wi-band-ink);
}
.superstrate-interior-page .world-interior-hero .world-gold{color:var(--wi-gold)}
.superstrate-interior-page .world-interior-lead{
 margin:0;max-width:62ch;
 font-size:clamp(17px,1.1vw,21px);line-height:1.55;
 color:var(--ink-muted);
}
.superstrate-interior-page .world-interior-hero .world-interior-lead{color:var(--wi-band-muted)}
/* Buttons on black: the homepage's body[data-chapter-theme=dark] treatment.
   [data-demo] marks a demo call to action: homepage-world.css paints any
   .world-button or .world-text-link carrying it as the yellow demo button, so
   it is excluded here. The hook used to be [href='/demo']; it moved onto its
   own attribute when D6 made the demo CTAs go nowhere, so the styling no longer
   depends on an href the element does not have. Keep the two in step. */
.superstrate-interior-page .world-interior-hero .world-button:not([data-demo]){background:#fffbf2;color:#1c1b1f}
.superstrate-interior-page .world-interior-hero .world-button:not([data-demo]):hover{background:#fff;color:#1c1b1f}

/* ------------------------------------------------- article typography */
/* Zero-specificity element lists (:where) so a page's own component rules
   (.superstrate-interior-page .x, 0-2-0) always win. */
.superstrate-interior-page .world-interior-main{font-size:clamp(18px,1.05vw,20px);line-height:1.6}
.superstrate-interior-page main :where(h1,h2,h3,h4,h5,h6){
 margin:0 0 .5em;font-family:var(--ff-heading);font-weight:700;font-style:normal;color:inherit;text-wrap:balance;
}
.superstrate-interior-page main :where(h1){font-size:clamp(40px,3.3vw,64px);line-height:1.08;letter-spacing:-.04em}
.superstrate-interior-page main :where(h2){font-size:clamp(32px,2.6vw,50px);line-height:1.1;letter-spacing:-.035em}
.superstrate-interior-page main :where(h3){font-size:clamp(22px,1.55vw,30px);line-height:1.15;letter-spacing:-.03em}
.superstrate-interior-page main :where(* + h2){margin-top:1.3em}
.superstrate-interior-page main :where(* + h3,* + h4,* + h5,* + h6){margin-top:1.5em}
.superstrate-interior-page main :where(p){margin:0 0 1em;max-width:68ch}
.superstrate-interior-page main :where(p:last-child){margin-bottom:0}
.superstrate-interior-page main :where(small,figcaption){color:var(--ink-muted)}
/* Emphasis ruling: italic, yellow on hover, no underline, no bold. Covers the
   homepage's .world-emphasis class too, whose base rule underlines. */
.superstrate-interior-page main :where(em,i,.world-emphasis){
 font-style:italic;font-weight:inherit;text-decoration:none;
 box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background-color .2s,color .2s;
}
.superstrate-interior-page main :where(em,i,.world-emphasis):hover{background:#ffd700;color:#1e1e1a}
.superstrate-interior-page main :where(strong:not(.world-emphasis),b){font-weight:600}
.superstrate-interior-page main :where(a:not([class])){
 color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;
 text-decoration-color:currentColor;transition:text-decoration-color .2s;
}
.superstrate-interior-page main :where(a:not([class])):hover{text-decoration-color:#ffd700;text-decoration-thickness:2px}
.superstrate-interior-page main :where(ul:not([class]),ol:not([class])){margin:0 0 1.2em;padding-left:1.3em;max-width:68ch}
.superstrate-interior-page main :where(ul:not([class]),ol:not([class])) > :where(li){margin:0 0 .45em;padding-left:.2em}
.superstrate-interior-page main :where(ul:not([class]),ol:not([class])) > :where(li)::marker{color:var(--ink-muted)}
.superstrate-interior-page main :where(figure){margin:2em 0}
.superstrate-interior-page main :where(figure img){width:100%;height:auto;border-radius:14px}

/* ---------------------------------------------------------------- reveal */
/* Hidden only once interior.js has run (html.world-interior-js), only on
   screen and only when motion is allowed: without JS, in print and under
   reduced motion nothing is ever hidden and nothing transitions. `translate`
   leaves a page's own `transform` alone, and the transition lives on the
   transient .is-revealing class so an element's own transitions come back. */
@media screen and (prefers-reduced-motion:no-preference){
 html.world-interior-js .superstrate-interior-page [data-reveal]:not(.is-revealed){opacity:0;translate:0 28px}
 html.world-interior-js .superstrate-interior-page [data-reveal].is-revealing{
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--reveal-delay,0ms);
 }
 html.world-interior-js .superstrate-interior-page[data-motion-paused="true"] [data-reveal].is-revealing{transition:none}
}

/* ------------------------------------------------------------ breakpoints */
@media (max-width:1100px){
 .superstrate-interior-page{--wi-gutter:6vw;--wi-header:78px}
 .superstrate-interior-page .world-interior-hero{min-height:clamp(400px,52svh,640px)}
 .superstrate-interior-page .world-interior-hero h1{font-size:clamp(36px,4.8vw,52px)}
 /* The logo is always visible here (the homepage fades it out over its hero),
    so at the narrow end of this layout it would run into the nav, 493px with
    Industries (2026-09-24; it was 390px): nav left edge = 94vw - 493px, logo
    left edge = 6vw. Keep a gap of about 24px. */
 .superstrate-interior-page .world-header-logo img{width:clamp(96px,calc(88vw - 520px),155px)}
}
/* Below 700px even the 96px logo meets the 493px nav, so the header row drops
   its Industries button and returns to the 390px nav and the old logo sizing.
   Industries stays in the footer, and in the menu once the page scrolls. */
@media (min-width:601px) and (max-width:699px){
 .superstrate-interior-page .world-industries--bar{display:none}
 .superstrate-interior-page .world-header-logo img{width:clamp(96px,calc(88vw - 430px),155px)}
}
@media (max-width:600px){
 .superstrate-interior-page{--wi-gutter:5vw;--wi-header:76px;--wi-anchor-offset:80px}
 /* W4 (2026-09-19): the band sizes to its content on phones. The old
    clamp(360px,56svh,520px) floor left about 200px of empty band above the
    title at 390x844. The phone header is now logo + Menu pill (nav in the
    menu, homepage-world.css G), so the logo no longer yields to a nav. */
 .superstrate-interior-page .world-interior-hero{min-height:0;padding-block:calc(var(--wi-header) - var(--frame-inset) + 32px) 36px}
 .superstrate-interior-page .world-header-logo img{width:132px}
 .superstrate-interior-page .world-interior-eyebrow{font-size:13px;margin-bottom:16px}
 .superstrate-interior-page .world-interior-hero h1{font-size:clamp(30px,9vw,35px);margin-bottom:18px}
 .superstrate-interior-page .world-interior-lead{font-size:17px}
 .superstrate-interior-page .world-interior-main{font-size:17px;line-height:1.55}
 .superstrate-interior-page main :where(h2){font-size:30px}
 .superstrate-interior-page main :where(h3){font-size:22px}
}
/* W4 (2026-09-19): short landscape screens (phones held sideways). The
   400px+ floors above filled a 390px-tall screen with the band alone; here the
   band sizes to its content and the title steps down. */
@media (max-height:500px){
 .superstrate-interior-page .world-interior-hero{min-height:0;padding-block:calc(var(--wi-header) - var(--frame-inset) + 16px) 28px}
 .superstrate-interior-page .world-interior-eyebrow{font-size:13px;margin-bottom:12px}
 .superstrate-interior-page .world-interior-hero h1{font-size:clamp(28px,3.6vw,36px);max-width:26ch;margin-bottom:14px}
 .superstrate-interior-page .world-interior-hero .world-interior-lead{font-size:16px}
}
/* W4 follow-up (2026-09-19): the interior pages fade the Pause pill at rest
   whenever text sits under it, at every width (homepage-world.css G does it
   up to 1100px for every page). chrome.js sets world-pause-covers; a scroll up
   or focus brings the pill back. The homepage keeps its own rule: nothing sits
   under the pill in its pinned layout. */
.superstrate-interior-page .world-controls{transition:opacity .2s,transform .2s}
.superstrate-interior-page.world-pause-covers:not(.world-scroll-up) .world-controls:not(:focus-within){opacity:0;transform:translateY(12px);pointer-events:none}