/* The People Who Build the Uru · Wakku Stories */
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(40px,6vw,88px)}
/* ===== story template ===== */
.progress{position:fixed;left:0;top:env(safe-area-inset-top,0px);height:2px;width:0;background:var(--accent);z-index:70;transition:width .15s linear}
.shero{padding-top:calc(env(safe-area-inset-top,0px) + clamp(120px,14vw,190px));padding-bottom:clamp(40px,5vw,72px);display:flex;flex-direction:column;align-items:flex-start}
.crumbs{display:flex;gap:10px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.crumbs a{text-decoration:none;border-bottom:1px solid var(--rule)}
.crumbs a:last-child{color:var(--earth);border-bottom-color:currentColor}
.status{margin-top:22px;font-size:13.5px;color:var(--ink-2);max-width:44em;line-height:1.5}
.status span{display:inline-block;margin-right:10px;padding:3px 9px;border:1px dashed var(--ink-2);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.s-title{margin-top:clamp(28px,4vw,56px);max-width:12ch;font-size:clamp(50px,9vw,148px)}
.standfirst{margin-top:clamp(24px,3vw,40px);font-family:var(--f-serif);font-style:italic;font-size:clamp(21px,2.1vw,30px);line-height:1.4;max-width:28em;color:var(--ink-2)}
.byline{margin-top:clamp(28px,3vw,44px);padding-top:16px;border-top:1px solid var(--ink);display:flex;flex-wrap:wrap;gap:10px 36px;width:100%;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.byline b{font-weight:500;color:var(--ink)}

.frame.lead{--ar:21/9;width:100%}
@media (max-width:760px){.frame.lead{--ar:4/3}}
.leadcred{margin-top:12px;font-size:13.5px;color:var(--ink-2)}

.atop{margin-top:clamp(56px,7vw,112px);align-items:start}
.acol{grid-column:3 / span 7}
.rail{grid-column:10 / span 3;grid-row:1}
.atop .acol{grid-row:1}
.rail-in{position:sticky;top:calc(env(safe-area-inset-top,0px) + 100px);padding-top:16px;border-top:1px solid var(--ink)}
.links{margin-top:14px;display:grid}
.links a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:14px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.links .k{grid-column:1;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--earth)}
.links .v{grid-column:1;font-family:var(--f-serif);font-size:19px;line-height:1.25}
.links .a{grid-column:2;grid-row:1 / span 2;align-self:center;transition:transform .6s var(--ease)}
.links a:hover .a{transform:translateX(5px)}
@media (max-width:1023px){
  .acol{grid-column:1 / -1}
  .rail{grid-column:1 / -1;grid-row:auto}
  .atop .acol{grid-row:auto}
  .rail-in{position:static}
  .links{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap)}
}
@media (max-width:560px){.links{grid-template-columns:1fr}}

/* article text */
.acol p,.abody .p{font-size:clamp(18px,1.35vw,20px);line-height:1.72;max-width:36em}
.acol > p + p,.abody .p + .p{margin-top:0}
.atop .acol{display:grid;gap:1.25em}
.atop .acol > p:first-child::first-letter{font-family:var(--f-display);float:left;font-size:5.2em;line-height:.8;padding:8px 14px 0 0;color:var(--earth)}
.abody{row-gap:1.25em;margin-top:1.25em}
.abody > *{grid-column:3 / span 7}
.abody .h{margin-top:1.6em;font-family:var(--f-display);font-size:clamp(30px,3vw,44px);line-height:1.08}
.abody .quote{grid-column:2 / span 10;margin:1.4em 0;padding-block:clamp(24px,3vw,40px);border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.abody .quote p{font-family:var(--f-display);font-size:clamp(32px,4.2vw,64px);line-height:1.08;max-width:18em}
.abody .quote cite{display:block;margin-top:18px;font-style:normal;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.abody .fig{margin:1.4em 0}
.abody .fig.wide{grid-column:1 / -1}
.abody .fig.inset{grid-column:3 / span 7}
.abody .fig figcaption.cr{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--ink-2);max-width:40em}
.abody .pair{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);margin:1.4em 0;align-items:end}
.abody .pair .frame:first-child{grid-column:1 / span 7;--ar:4/3}
.abody .pair .frame:nth-child(2){grid-column:8 / span 5;--ar:3/4}
.abody .pair figcaption.cr{grid-column:1 / -1;font-size:13.5px;color:var(--ink-2)}
.gloss{margin:1em 0;padding:clamp(22px,3vw,32px);background:var(--paper-2)}
.gloss h3{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.gloss dl{margin:14px 0 0;display:grid}
.gloss .row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px solid var(--rule)}
.gloss dt{font-family:var(--f-display);font-size:22px;line-height:1.1}
.gloss dt .ml{display:block;margin-top:4px;font-family:var(--f-ml);font-size:15px;color:var(--ink-2)}
.gloss dd{margin:0;font-size:16px;line-height:1.55}
@media (max-width:560px){.gloss .row{grid-template-columns:1fr;gap:4px}}
.video{position:relative}
.video .frame{--ar:16/9}
.video .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:flex;align-items:center;gap:14px;padding:16px 24px;background:rgba(14,11,9,.62);color:#F1EADD;border:1px solid rgba(241,234,221,.4);cursor:pointer;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:background .4s var(--ease)}
.video .play:hover{background:rgba(14,11,9,.8)}
.video .play i{font-style:normal;font-size:16px}
@media (max-width:1023px){
  .abody > *,.abody .fig.inset{grid-column:1 / -1}
  .abody .quote{grid-column:1 / -1}
}
@media (max-width:639px){
  .abody .pair{grid-template-columns:1fr}
  .abody .pair .frame:first-child,.abody .pair .frame:nth-child(2){grid-column:1 / -1}
}

.aend{margin-top:clamp(48px,6vw,88px);padding-bottom:clamp(88px,10vw,150px)}
.endrow{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--ink)}
.endmark{font-family:var(--f-display);letter-spacing:.2em;font-size:18px}
.share{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.copyfield{font:inherit;font-size:14px;padding:10px;border:1px solid var(--rule);background:transparent;color:var(--ink);min-width:0;width:260px;max-width:100%}
.sources{margin-top:40px}
.sources ol{margin-top:14px;display:grid;gap:10px;list-style:decimal;padding-left:1.4em;font-size:15px;line-height:1.55;color:var(--ink-2)}

.walk{background:var(--night);color:var(--on-night)}
.walk .eyebrow{color:var(--on-night-2)}
.walkimg{grid-column:1 / span 6;--ar:5/4}
.walktxt{grid-column:8 / span 5;align-self:center;display:flex;flex-direction:column;gap:18px}
.walk .lens{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-2)}
.walk .lede{color:rgba(241,234,221,.88)}
.walkbtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.walk .btn-primary{background:var(--on-night);color:var(--night)}
.walk .btn-primary:hover{background:#fff}
@media (max-width:1023px){.walkimg,.walktxt{grid-column:1 / -1}.walkimg{max-width:640px}}

.more .shead{align-items:flex-end}
.mcard{grid-column:span 4;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit}
.mcard .frame{--ar:4/3;margin-bottom:8px}
.mcard:hover .ph{transform:scale(1.035)}
.mcard .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--earth)}
.mcard h3{font-family:var(--f-serif);font-size:23px;line-height:1.25}
.mcard .m{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:1023px){.mcard{grid-column:span 4}}
@media (max-width:639px){.mcard{grid-column:1 / -1}}