/* river canyon group — chapter bands, giant lowercase titles */
:root{
  --bone:#F1ECE2;
  --char:#1F2024;
  --grape:#5A2D82;
  --tang:#F26A21;
  --teal:#0F8B8D;
  --white:#FFFFFF;
  --mute:#5B5850;
  --t-bone:#DCD2C0;
  --t-grape:#7442A3;
  --t-tang:#D9560F;
  --t-teal:#0A7375;
  --grot:"Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --wrap:1340px;
  --side:16px;
}
@media (min-width:700px){:root{--side:32px}}
@media (min-width:1100px){:root{--side:48px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--char);font-family:var(--serif);font-size:1.125rem;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--grot);font-weight:700;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--side);top:-60px;background:var(--char);color:var(--bone);padding:10px 14px;font-family:var(--grot);font-weight:700;z-index:50;text-decoration:none}
.skip:focus{top:8px}

/* bands */
.band-bone{background:var(--bone);color:var(--char);--tone:var(--t-bone)}
.band-grape{background:var(--grape);color:var(--white);--tone:var(--t-grape)}
.band-tangerine{background:var(--tang);color:var(--char);--tone:var(--t-tang)}
.band-teal{background:var(--teal);color:var(--white);--tone:var(--t-teal)}

/* top bar */
.topbar{background:var(--bone);border-bottom:1px solid rgba(31,32,36,.18);position:relative;z-index:20}
.topbar-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--side);min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--grot);font-weight:700;font-size:1.125rem;letter-spacing:-.02em;white-space:nowrap}
.brand .mk{width:26px;height:26px;flex:none}
.chapnav ul{display:flex;gap:26px}
.chapnav a{display:inline-flex;align-items:center;gap:8px;font-family:var(--grot);font-weight:600;font-size:.95rem;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.chapnav a:hover,.chapnav a[aria-current="page"]{border-bottom-color:var(--char)}
.ltr{display:inline-grid;place-items:center;width:20px;height:20px;border:1.5px solid var(--char);border-radius:4px;font-size:.72rem;font-weight:700;line-height:1;position:relative}
.ltr::after{content:"";position:absolute;left:-1.5px;right:-1.5px;bottom:-6px;height:3px}
.ltr-bone::after{background:var(--char)}
.ltr-grape::after{background:var(--grape)}
.ltr-tangerine::after{background:var(--tang)}
.ltr-teal::after{background:var(--teal)}
.burger{display:none;align-items:center;gap:10px;background:none;border:1.5px solid var(--char);border-radius:6px;padding:7px 12px;font-family:var(--grot);font-weight:700;font-size:.95rem;color:var(--char);cursor:pointer}
.burger-lines,.burger-lines::before,.burger-lines::after{display:block;width:18px;height:2px;background:var(--char);position:relative;transition:transform .2s}
.burger-lines::before,.burger-lines::after{content:"";position:absolute;left:0}
.burger-lines::before{top:-6px}.burger-lines::after{top:6px}
.burger[aria-expanded="true"] .burger-lines{background:transparent}
.burger[aria-expanded="true"] .burger-lines::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-lines::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:899px){
  .js .burger{display:inline-flex}
  .js .chapnav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bone);border-bottom:1px solid rgba(31,32,36,.18);padding:8px var(--side) 18px}
  .js .chapnav.open{display:block}
  .chapnav ul{flex-direction:column;gap:0}
  .chapnav li+li{border-top:1px solid rgba(31,32,36,.12)}
  .chapnav a{padding:14px 0;font-size:1.05rem;width:100%;border-bottom:0}
  .topbar-in{flex-wrap:wrap}
  html:not(.js) .chapnav{width:100%;padding-bottom:10px}
}

/* giant lowercase type */
.giant{font-family:var(--grot);font-weight:700;text-transform:lowercase;color:var(--tone);font-size:clamp(3.5rem,0.4rem + 10.5vw,11rem);line-height:.8;letter-spacing:-.055em;margin:0;overflow-wrap:normal;user-select:none}

/* hero */
.hero-in{max-width:var(--wrap);margin:0 auto;padding:clamp(40px,7vw,96px) var(--side) clamp(44px,6vw,80px);display:grid;gap:28px;align-items:center}
.kicker,.cat-kick,.page-kick,.next-k,.how-k{font-family:var(--grot);font-weight:700;font-size:1.25rem;letter-spacing:-.005em}
.kicker{display:inline-flex;align-items:center;gap:10px}
.kicker::before{content:"";width:12px;height:12px;background:var(--grape)}
.hero-h{font-size:clamp(2.4rem,1.4rem + 4.2vw,5.6rem);line-height:.95;letter-spacing:-.04em;max-width:15ch;margin:18px 0 20px}
.stand{font-size:clamp(1.2rem,1rem + .6vw,1.5rem);line-height:1.45;max-width:46ch;color:var(--mute)}
.ph{margin:0;border:1.5px solid var(--char);border-radius:16px;aspect-ratio:1;background:#E7E0D3;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.hero-ph{width:min(220px,58vw);justify-self:start}
@media (min-width:800px){
  .hero-in{grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,64px)}
  .hero-ph{width:clamp(180px,22vw,260px);justify-self:end}
}
@media (max-width:640px){.ph{border-radius:12px}}

/* chapters (zigzag) */
.chap{border-top:1px solid rgba(31,32,36,.18)}
.chap-in{max-width:var(--wrap);margin:0 auto;padding:clamp(48px,8vw,128px) var(--side);display:grid;grid-template-columns:1fr;gap:28px;align-items:end}
.chap-title{min-width:0}
.chap-h{font-size:1.25rem;font-weight:700;letter-spacing:-.005em;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.chap-no{display:inline-block;border:2px solid currentColor;border-radius:5px;padding:1px 9px}
.chap-desc{font-size:1.5rem;line-height:1.4;margin:20px 0 26px;max-width:34ch}
.chap-count{font-family:var(--grot);font-size:1.5rem;font-weight:500;margin-bottom:26px}
.chap-count strong{font-size:3.4rem;font-weight:700;letter-spacing:-.04em;line-height:1;margin-right:4px;vertical-align:-4px}
.go{display:inline-block;font-family:var(--grot);font-weight:700;font-size:1.25rem;text-decoration:underline;text-decoration-thickness:5px;text-underline-offset:8px;padding:6px 0}
.go:hover{text-decoration-thickness:9px}
@media (min-width:900px){
  .chap-in{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(40px,5vw,96px)}
  .chap.flip .chap-in{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
  .chap.flip .chap-title{order:2;text-align:right}
  .chap.flip .chap-body{order:1}
  .chap-body{padding-bottom:.6rem}
}

/* how it works */
.how{border-top:1px solid rgba(31,32,36,.18)}
.how-in{max-width:var(--wrap);margin:0 auto;padding:clamp(48px,6vw,88px) var(--side)}
.how-h{font-size:clamp(2rem,1.4rem + 2vw,3.2rem);letter-spacing:-.035em;text-transform:lowercase;margin-bottom:32px}
.how-cols{display:grid;gap:28px}
.how-col{border-top:3px solid var(--char);padding-top:16px}
.how-col:nth-child(1){border-top-color:var(--grape)}
.how-col:nth-child(2){border-top-color:var(--tang)}
.how-col:nth-child(3){border-top-color:var(--teal)}
.how-k{margin-bottom:8px}
@media (min-width:760px){.how-cols{grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}}

/* category head */
.cat-head-in{max-width:var(--wrap);margin:0 auto;padding:clamp(40px,6vw,84px) var(--side) clamp(40px,5vw,72px)}
.cat-head-split{display:grid;gap:28px;align-items:center}
.cat-h{font-size:clamp(3.5rem,0.4rem + 10.5vw,11rem);line-height:.82;letter-spacing:-.055em;text-transform:lowercase;margin:18px 0 26px;max-width:7ch}
.cat-line{font-size:1.5rem;line-height:1.4;max-width:40ch}
.band-bone .cat-head-in{border-bottom:1px solid rgba(31,32,36,.18)}
.cat-side-ph{width:min(200px,52vw);justify-self:start}
@media (min-width:800px){
  .cat-head-split{grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,64px)}
  .cat-side-ph{width:clamp(160px,20vw,240px);justify-self:end}
}

/* hotel rows */
.rows .row:nth-child(odd){background:var(--white)}
.rows .row:nth-child(even){background:var(--bone)}
.row-in{max-width:var(--wrap);margin:0 auto;padding:clamp(40px,6vw,88px) var(--side);display:grid;gap:22px}
.row-id{position:relative}
.row-no{font-family:var(--grot);font-weight:700;font-size:clamp(3rem,2rem + 4vw,6.5rem);line-height:.85;letter-spacing:-.05em}
.row-name{font-size:clamp(1.9rem,1.3rem + 2.4vw,3.6rem);line-height:1;letter-spacing:-.035em;margin-top:14px;max-width:14ch;overflow-wrap:break-word;hyphens:manual}
.row-bar{display:block;width:72px;height:10px;margin-top:22px}
.bar-bone{background:var(--char)}
.bar-grape{background:var(--grape)}
.bar-tangerine{background:var(--tang)}
.bar-teal{background:var(--teal)}
.row-loc{font-family:var(--grot);font-weight:700;font-size:1.05rem;letter-spacing:.01em;margin-bottom:14px}
.row-text p+p{margin-top:14px}
.row-text>p:not(.row-loc){max-width:62ch}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tags li{font-family:var(--grot);font-weight:600;font-size:.88rem;border:1.5px solid var(--char);border-radius:3px;padding:4px 10px;line-height:1.3}
@media (min-width:900px){
  .row-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,110px);align-items:start}
  .row-flip .row-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .row-flip .row-id{order:2;text-align:right}
  .row-flip .row-id .row-name{margin-left:auto}
  .row-flip .row-id .row-bar{margin-left:auto}
  .row-flip .row-text{order:1}
}

/* next chapter */
.next-in{display:block;max-width:var(--wrap);margin:0 auto;padding:clamp(44px,6vw,90px) var(--side);text-decoration:none}
.next-in .giant{margin:14px 0 18px}
.next-name{font-family:var(--grot);font-weight:700;font-size:1.5rem;text-decoration:underline;text-decoration-thickness:5px;text-underline-offset:8px}
.next-in:hover .next-name{text-decoration-thickness:9px}

/* plain pages */
.page-head-in{max-width:var(--wrap);margin:0 auto;padding:clamp(36px,5vw,64px) var(--side)}
.page-h{font-size:clamp(2.6rem,1.6rem + 4vw,5.5rem);line-height:.9;letter-spacing:-.045em;text-transform:lowercase;margin-top:12px}
.page-body{padding:clamp(40px,5vw,72px) var(--side) clamp(56px,7vw,104px)}
.prose{max-width:680px;margin:0 auto}
.prose h2{font-size:1.6rem;letter-spacing:-.02em;margin:40px 0 10px}
.prose p+p{margin-top:16px}
.prose a{text-decoration-thickness:2px;text-underline-offset:3px}
.nf{margin-top:20px}
.nf li{font-family:var(--grot);font-weight:700;font-size:1.25rem;padding:8px 0}

/* footer */
.foot{background:var(--char);color:var(--bone)}
.foot-in{max-width:var(--wrap);margin:0 auto;padding:clamp(48px,6vw,80px) var(--side) 36px;display:grid;gap:36px}
.foot-name{font-family:var(--grot);font-weight:700;font-size:1.6rem;letter-spacing:-.03em;margin-bottom:10px}
.foot-id p:not(.foot-name){color:#C9C1B2;max-width:40ch}
.foot-h{font-family:var(--grot);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;color:#C9C1B2;margin-bottom:12px}
.foot-col li{padding:4px 0}
.foot-col a{font-family:var(--grot);font-weight:500;text-decoration:none;border-bottom:1px solid rgba(241,236,226,.35)}
.foot-col a:hover{border-bottom-color:var(--bone)}
.foot-close{max-width:var(--wrap);margin:0 auto;padding:20px var(--side) 32px;border-top:1px solid rgba(241,236,226,.2);font-size:.95rem;color:#C9C1B2}
@media (min-width:760px){.foot-in{grid-template-columns:2fr 1fr 1fr}}
@media (min-width:760px){.foot-close{margin:0 auto;max-width:calc(var(--wrap) - 2*var(--side))}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}