/* The inner pages of iota.macrocosmos.ai in W(e)ave. Loaded after the homepage's own styles (tools/render_atlas.py lifts those
   onto every page), so this file only adds what the inner pages need: the shorter hero, and the parts the homepage has no use for. */

/* the header's lockup shows from the start; only the homepage hands its hero lockup up to it */
.site>.lockup{opacity:1}

/* hero: the page's name runs down the side, the statement and the ways on sit above a band of W(e)ave */
.hero.sub{min-height:auto}
.hero.sub .copy{padding-top:clamp(150px,21vh,210px);align-items:end}
.hero.sub .copy>.eb{grid-column:1/-1;margin-bottom:0}
.hero.sub h1{font-size:clamp(44px,5.4vw,86px);line-height:1.02;max-width:12.5em}
.hero.sub .band{flex:none;height:clamp(170px,26vh,300px);min-height:0}

/* a numbered label: two figures in tracked capitals */
.num{font:500 10px/1 Montserrat,sans-serif;letter-spacing:.3em;color:var(--sand)}

/* a stage of its own on an inner page: the same frame as the homepage's How IOTA works */
.stage.fixed{margin-top:clamp(40px,5vw,72px)}

/* tabs laid across the page (lenses, stages): tracked capitals over a hairline, the chosen one in bone */
.lens{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--hair);margin-top:clamp(40px,5vw,64px)}
.lens button{position:relative;padding:18px 0;margin-right:clamp(22px,3.4vw,52px);font:500 10px/1 Montserrat,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--mist);transition:color .3s}
.lens button::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--bone);transition:width .8s ease}
.lens button:hover,.lens button[aria-selected=true]{color:var(--bone)}
.lens button[aria-selected=true]::after{width:100%}

/* a quiet footnote under a figure */
.foot{color:var(--mist);font-size:17px;max-width:620px}
.foot+.foot{margin-top:12px}

/* the record ground's seal beside tabs (on bone) */
.record .tabs{border-top-color:var(--hair-ink)}
.record .tabs button{border-bottom-color:var(--hair-ink);color:#6E675E}
.record .tabs button:hover,.record .tabs button[aria-selected=true]{color:var(--ink)}
.record .tabs button::after{background:var(--ink)}
.record .panel .cap{color:var(--sand-d)}
.record .panel p:not(.cap){color:#55504A}

/* the six-part grid: numbered parts in two or three columns, hairline above each */
.parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(28px,4vw,64px);margin-top:clamp(56px,7vw,96px)}
.parts article{border-top:1px solid var(--hair);padding:28px 0 44px}
.parts h3{font:400 26px/1.18 "EB Garamond",serif;margin:16px 0 12px}
.parts p{color:var(--mist);font-size:17.5px}

@media (max-width:1000px){.parts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.hero.sub .copy{gap:22px}}
@media (max-width:600px){
  .hero.sub .copy{padding-top:130px}
  .parts{grid-template-columns:1fr}.parts article{padding:24px 0 30px}
  .lens button{padding:15px 0;margin-right:20px;letter-spacing:.24em}
}