/* Wakku · Walk with Stories */
/* hero */
.hero{position:relative;min-height:max(640px,94svh);color:var(--on-night);display:flex;flex-direction:column;justify-content:flex-end;padding-block:0;background:var(--night);overflow:hidden}
.hero .frame{position:absolute;inset:0;aspect-ratio:auto}
.hero .frame .ph{animation:settle 14s var(--ease) both}
@keyframes settle{from{transform:scale(1.09)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,11,9,.78) 0%,rgba(14,11,9,.25) 48%,rgba(14,11,9,.05) 70%,rgba(14,11,9,.45) 100%);pointer-events:none}
.hero .frame .cap{top:96px;bottom:auto;left:auto;right:var(--gutter);max-width:260px;text-align:right;z-index:2}
.hero-in{position:relative;z-index:2;padding-bottom:28px;width:100%}
.hero h1{max-width:9ch}
.hero .sub{margin-top:28px;font-size:clamp(18px,1.6vw,22px);max-width:30em;color:rgba(241,234,221,.9)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero .ctas .btn-primary{background:var(--on-night);color:var(--night)}
.hero .ctas .btn-primary:hover{background:#fff}
.hero-foot{display:flex;justify-content:space-between;gap:16px;margin-top:clamp(48px,8vh,96px);padding-top:18px;border-top:1px solid var(--night-rule);font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(241,234,221,.78)}
.hero-foot a{text-decoration:none}

/* beyond */
.beyond .txt{grid-column:1 / span 5;align-self:center;display:flex;flex-direction:column;gap:28px}
.beyond .img{grid-column:7 / span 6}
.beyond .couplet{font-family:var(--f-serif);font-style:italic;font-size:clamp(20px,1.8vw,24px);line-height:1.45}
@media (max-width:1023px){.beyond .txt,.beyond .img{grid-column:1 / -1}.beyond .img{max-width:720px}}

/* section head */
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(40px,6vw,88px)}
.shead .d-xl{max-width:11ch}

/* experiences */
.xgrid{row-gap:clamp(40px,5vw,72px)}
.xcard{display:flex;flex-direction:column;gap:18px;text-decoration:none;color:inherit}
.xcard:hover .ph{transform:scale(1.035)}
.xmeta{display:grid;gap:6px;transition:transform .8s var(--ease)}
.xcard:hover .xmeta{transform:translateX(6px)}
.xmeta .lens{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.xmeta .line{font-family:var(--f-serif);font-style:italic;font-size:18px;color:var(--ink-2);max-width:30em}
.x-feat{grid-column:1 / span 7;grid-row:1 / span 2}
.x-feat .frame{--ar:4/5}
.x-feat h3{font-size:clamp(38px,5vw,76px)}
.x-b{grid-column:9 / span 4}
.x-k{grid-column:8 / span 5;align-self:end}
.x-s{grid-column:2 / span 5;margin-top:clamp(0px,4vw,40px)}
.x-v{grid-column:8 / span 4;margin-top:clamp(0px,10vw,160px)}
.x-b .frame{--ar:1/1}.x-k .frame{--ar:5/4}.x-s .frame{--ar:4/3}.x-v .frame{--ar:3/4}
.x-live{grid-column:1 / -1;position:relative;color:var(--on-night)}
.x-live .frame{--ar:21/9}
.x-live .xmeta{position:absolute;left:clamp(20px,4vw,56px);bottom:clamp(20px,4vw,56px);right:clamp(20px,4vw,56px)}
.x-live .xmeta .lens,.x-live .xmeta .line{color:rgba(241,234,221,.86)}
.x-live .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,11,9,.7),rgba(14,11,9,0) 60%)}
.x-live .frame .cap{top:12px;bottom:auto;z-index:2}
.xgrid .xcard .d-m{font-size:clamp(28px,2.6vw,40px)}
.x-foot{display:flex;justify-content:flex-end;margin-top:clamp(40px,5vw,64px)}
@media (max-width:1023px){
  .x-feat{grid-column:1 / -1;grid-row:auto}
  .x-b,.x-k,.x-s,.x-v{grid-column:span 6;margin-top:0;align-self:start}
  .x-live .frame{--ar:16/10}
}
@media (max-width:639px){
  .x-b,.x-k,.x-s,.x-v{grid-column:1 / -1}
  .x-live .frame{--ar:4/5}
}

/* people */
.people{background:var(--night);color:var(--on-night);padding-top:0}
.people .banner{position:relative}
.people .banner .frame{--ar:21/8;min-height:420px;aspect-ratio:auto;height:clamp(420px,42vw,640px)}
.people .banner .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--night) 0%,rgba(14,11,9,.25) 60%,rgba(14,11,9,.1))}
.people .banner .over{position:absolute;inset:auto 0 0 0;z-index:2;padding-bottom:clamp(24px,4vw,56px)}
.people .banner .over p{margin-top:18px;font-size:clamp(18px,1.6vw,22px);color:rgba(241,234,221,.88);max-width:30em}
.people .frame .cap{z-index:3}
.people .banner .frame .cap{top:96px;bottom:auto}
.pscroll-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:clamp(40px,5vw,72px);margin-bottom:24px}
.pscroll-head .eyebrow{color:var(--on-night-2)}
.arrows{display:flex;gap:8px}
.arrows button{width:48px;height:48px;border:1px solid var(--night-rule);background:transparent;color:var(--on-night);cursor:pointer;font-size:18px;transition:background .4s var(--ease)}
.arrows button:hover{background:var(--night-2)}
.pscroll{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--gutter);padding-bottom:20px;scrollbar-width:thin;scrollbar-color:var(--night-rule) transparent;max-width:calc(var(--max) + 0px);margin-inline:auto}
.pcard{flex:0 0 clamp(220px,22vw,300px);scroll-snap-align:start;display:flex;flex-direction:column;gap:14px}
.pcard .frame{--ar:3/4}
.pcard .nm{font-family:var(--f-display);font-size:28px;line-height:1}
.pcard .pl{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-2)}
.pcard .role{font-family:var(--f-serif);font-style:italic;font-size:17px;color:rgba(241,234,221,.9)}
.people .foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:40px;font-size:13px;color:var(--on-night-2)}

/* malabar map */
.mapsec .intro{grid-column:1 / span 8;margin-bottom:clamp(40px,5vw,72px)}
.mapsec .intro .d-l{margin-top:20px}
.mapbox{grid-column:1 / span 5;position:relative}
.mapbox svg{width:100%;height:auto;display:block}
.mapbox .reg-dot{cursor:pointer}
.mapbox .reg-dot circle.pt{transition:r .5s var(--ease),fill .5s var(--ease)}
.mapbox .reg-dot circle.halo{fill:none;stroke:var(--accent);stroke-width:1;opacity:0;transition:opacity .5s var(--ease)}
.mapbox .reg-dot.on circle.halo{opacity:1}
.mapbox .reg-dot.on circle.pt{fill:var(--accent)}
.mapbox text{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;fill:var(--ink)}
.mapbox .coast-l{font-family:var(--f-serif);font-style:italic;font-size:13px;letter-spacing:0;fill:var(--ink-2)}
.regside{grid-column:7 / span 6;display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-content:start}
.reglist{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.reglist button{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);padding:13px 0;cursor:pointer;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);transition:color .4s var(--ease),padding .5s var(--ease)}
.reglist button:hover{color:var(--ink)}
.reglist button[aria-selected="true"]{color:var(--ink);padding-left:10px}
.reglist button[aria-selected="true"]::after{content:"→";color:var(--accent)}
.regpanel{min-height:420px}
.regpanel .ml{font-family:var(--f-ml);font-size:22px;color:var(--ink-2)}
.regpanel h3{margin-top:4px}
.regpanel .tag{margin-top:12px;font-family:var(--f-serif);font-style:italic;font-size:19px;color:var(--ink-2)}
.regpanel dl{margin:28px 0 0;display:grid;gap:0}
.regpanel .row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px solid var(--rule)}
.regpanel dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding-top:3px}
.regpanel dd{margin:0;font-size:16px;line-height:1.5}
.regpanel dd a{color:var(--accent);text-underline-offset:3px}
.regpanel.fade{animation:fadein .7s var(--ease)}
@keyframes fadein{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:none}}
.mapsec .network{grid-column:1 / -1;margin-top:clamp(48px,6vw,96px);padding-top:28px;border-top:1px solid var(--rule);font-family:var(--f-serif);font-style:italic;font-size:clamp(22px,2.4vw,34px);line-height:1.3;max-width:28em}
@media (max-width:1023px){
  .mapsec .intro,.mapbox,.regside{grid-column:1 / -1}
  .mapbox{max-width:460px}
}
@media (max-width:639px){
  .regside{grid-template-columns:1fr}
  .reglist{flex-direction:row;overflow-x:auto;border-top:0;gap:8px;padding-bottom:6px}
  .reglist button{border:1px solid var(--rule);padding:10px 14px;white-space:nowrap}
  .reglist button[aria-selected="true"]{padding-left:14px;border-color:var(--ink)}
  .reglist button[aria-selected="true"]::after{content:none}
  .regpanel .row{grid-template-columns:1fr;gap:4px}
  .regpanel{min-height:0}
}

/* community */
.community{background:var(--earth);color:var(--on-earth)}
.community .eyebrow{color:var(--on-earth-2)}
.community h2{max-width:13ch}
.clist{margin-top:clamp(48px,6vw,96px);border-top:1px solid color-mix(in srgb,var(--on-earth) 30%,transparent)}
.crow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:center;padding-block:clamp(22px,3vw,40px);border-bottom:1px solid color-mix(in srgb,var(--on-earth) 30%,transparent);text-decoration:none;color:inherit}
.crow .t{grid-column:1 / span 5;font-family:var(--f-display);font-size:clamp(34px,4.6vw,72px);line-height:1;transition:transform .8s var(--ease)}
.crow .d{grid-column:6 / span 4;font-family:var(--f-serif);font-style:italic;font-size:clamp(18px,1.5vw,21px);line-height:1.45}
.crow .m{grid-column:10 / span 2;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-earth-2)}
.crow .a{grid-column:12;justify-self:end;font-size:22px;transition:transform .8s var(--ease)}
.crow:hover .t{transform:translateX(10px)}
.crow:hover .a{transform:translateX(6px)}
.community .foot{margin-top:clamp(40px,5vw,64px);display:flex;justify-content:flex-end}
@media (max-width:1023px){
  .crow .t{grid-column:1 / -1}.crow .d{grid-column:1 / span 8}.crow .m{grid-column:1 / span 6}.crow .a{grid-column:span 2 / -1;grid-row:1}
}
@media (max-width:639px){.crow .d{grid-column:1 / -1}.crow .m{grid-column:1 / -1}.crow .a{grid-column:4}}

/* stories */
.stories .feat{align-items:end;row-gap:28px}
.stories .feat .frame{grid-column:1 / span 8;--ar:16/11}
.stories .feat .txt{grid-column:9 / span 4;display:flex;flex-direction:column;gap:18px;padding-bottom:8px}
.cat{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--earth)}
.smeta{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.scols{margin-top:clamp(56px,7vw,112px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--ink)}
.scard{grid-column:span 4;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit}
.scard .frame{--ar:4/3;margin-bottom:8px}
.scard:hover .ph{transform:scale(1.035)}
.scard h3{font-family:var(--f-serif);font-size:23px;line-height:1.25}
.stories .foot{margin-top:clamp(48px,6vw,80px);display:flex;justify-content:flex-end}
@media (max-width:1023px){
  .stories .feat .frame,.stories .feat .txt{grid-column:1 / -1}
  .scard{grid-column:span 4}
}
@media (max-width:639px){.scard{grid-column:1 / -1}}

/* way */
.way{background:var(--paper-2)}
.steps{display:flex;flex-direction:column;gap:0;margin-top:clamp(40px,5vw,72px)}
.steps li{display:flex;flex-direction:column}
.steps .w{font-family:var(--f-display);font-size:clamp(46px,9vw,148px);line-height:1;letter-spacing:.01em}
.steps .n{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--ink-2);margin-bottom:6px}
.steps .arr{font-size:clamp(22px,2.4vw,34px);color:var(--earth);padding-block:clamp(6px,1vw,14px);line-height:1}
.steps li:nth-child(1){padding-left:0}
.steps li:nth-child(2){padding-left:8%}
.steps li:nth-child(3){padding-left:16%}
.steps li:nth-child(4){padding-left:24%}
.steps li:nth-child(5){padding-left:18%}
.steps li:nth-child(6){padding-left:30%}
@media (max-width:639px){.steps li{padding-left:0!important}}
.manifesto{margin-top:clamp(64px,8vw,128px);display:grid;gap:10px;font-family:var(--f-display);font-size:clamp(28px,3.8vw,56px);line-height:1.08;max-width:18em}
.manifesto p:last-child{color:var(--earth)}

/* planner */
.plan h2{max-width:14ch}
.durs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--ink);border-left:1px solid var(--rule)}
.dur{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:36px;min-height:clamp(150px,16vw,220px);padding:22px;background:transparent;border:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);text-align:left;cursor:pointer;transition:background .5s var(--ease),color .5s var(--ease)}
.dur .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.dur .v{font-family:var(--f-display);font-size:clamp(28px,3vw,46px);line-height:1}
.dur:hover{background:var(--paper-2)}
.dur[aria-checked="true"]{background:var(--ink);color:var(--paper)}
.dur[aria-checked="true"] .k{color:color-mix(in srgb,var(--paper) 70%,transparent)}
@media (max-width:860px){.durs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pform{display:grid;gap:0;margin-top:clamp(28px,3vw,48px)}
.pform fieldset{border:0;margin:0;padding:clamp(24px,3vw,36px) 0;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--gap)}
.pform legend{float:left;width:100%;padding:0;font-family:var(--f-serif);font-style:italic;font-size:clamp(22px,2vw,28px);line-height:1.2}
.pform .q{display:flex;flex-direction:column;gap:6px}
.pform .q .n{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--ink-2)}
.pform .q .h{font-size:14px;color:var(--ink-2)}
@media (max-width:760px){.pform fieldset{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.chip{border:1px solid var(--rule);background:transparent;padding:11px 18px;font-size:15px;cursor:pointer;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"],.chip[aria-checked="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
.fields .full{grid-column:1 / -1}
@media (max-width:560px){.fields{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field textarea{font:inherit;font-size:17px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink-2);padding:10px 0;border-radius:0;width:100%}
.field input:focus,.field textarea:focus{outline:none;border-bottom:2px solid var(--accent);padding-bottom:9px}
.field textarea{resize:vertical;min-height:84px}
.field .err{font-size:13.5px;color:#A3361F}
:root[data-theme="dark"] .field .err{color:#F09A7F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .field .err{color:#F09A7F}}
.check{display:flex;align-items:center;gap:10px;font-size:15px;margin-top:4px}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.psubmit{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:32px}
.psubmit .sum{font-family:var(--f-serif);font-style:italic;font-size:18px;color:var(--ink-2);max-width:36em}
.pdone{margin-top:clamp(28px,3vw,48px);padding:clamp(28px,4vw,56px);background:var(--paper-2);display:grid;gap:18px}
.pdone .d-l{max-width:16ch}
.note{font-size:13.5px;color:var(--ink-2)}

/* final */
.final{position:relative;min-height:max(560px,86svh);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--on-night);background:var(--night);overflow:hidden}
.final .frame{position:absolute;inset:0;aspect-ratio:auto}
.final::after{content:"";position:absolute;inset:0;background:rgba(14,11,9,.52);pointer-events:none}
.final .in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px}
.final .d-xxl{font-size:clamp(50px,9vw,150px)}
.final .d-xl{color:rgba(241,234,221,.92)}
.final .sig{margin-top:28px;display:flex;flex-direction:column;align-items:center;gap:4px}
.final .sig .logo{font-size:26px}
.final .btn-primary{background:var(--on-night);color:var(--night);margin-top:24px}
.final .frame .cap{z-index:3}