
/* Clear Horizons — clearhorizones.com
   Design system: "marquee plate + poster entries"
   prefix: ch-   */

:root{
  --ch-ink:#14111c;
  --ch-ink-soft:#4a4459;
  --ch-paper:#fffdf6;
  --ch-paper-2:#f4efe3;
  --ch-line:#ded5c2;

  --ch-art:#e6186b;
  --ch-capsule:#2d4cf0;
  --ch-casino:#0f8f63;
  --ch-ice:#7a34d9;
  --ch-sun:#ffc72e;

  --ch-hue:#14111c;
  --ch-hue-ink:#fffdf6;

  --ch-display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --ch-text:"Newsreader",Georgia,"Times New Roman",serif;

  --ch-gut:clamp(1.25rem,4vw,4.5rem);
  --ch-max:1400px;
}

[data-hue="art"]{--ch-hue:var(--ch-art)}
[data-hue="capsule"]{--ch-hue:var(--ch-capsule)}
[data-hue="casino"]{--ch-hue:var(--ch-casino)}
[data-hue="ice"]{--ch-hue:var(--ch-ice)}
[data-hue="sun"]{--ch-hue:var(--ch-sun);--ch-hue-ink:#14111c}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
  max-width:100%;
}
body{
  margin:0;
  background:var(--ch-paper);
  color:var(--ch-ink);
  font-family:var(--ch-text);
  font-size:clamp(1.02rem,.55vw + .92rem,1.18rem);
  line-height:1.62;
  overflow-x:clip;
  max-width:100%;
}
body.ch-nav-open{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.ch-wrap{max-width:var(--ch-max);margin:0 auto;padding:0 var(--ch-gut);width:100%}
.ch-skip{position:absolute;left:-9999px}
.ch-skip:focus{left:1rem;top:1rem;z-index:9;background:var(--ch-ink);color:var(--ch-paper);padding:.6rem 1rem}

/* ---------- MARQUEE PLATE ---------- */
.ch-plate{
  background:var(--ch-hue);
  color:var(--ch-hue-ink);
  padding:clamp(1.5rem,3vw,2.75rem) 0 clamp(2rem,4vw,3.25rem);
  position:relative;
  overflow:hidden;
}
.ch-plate::after{
  content:"";position:absolute;inset:auto 0 0 0;height:10px;
  background:repeating-linear-gradient(90deg,var(--ch-sun) 0 34px,transparent 34px 68px);
  opacity:.85;
}
[data-hue="sun"] .ch-plate::after{background:repeating-linear-gradient(90deg,var(--ch-ink) 0 34px,transparent 34px 68px)}
.ch-plate__eyebrow{
  font-family:var(--ch-display);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 clamp(1rem,3vw,2rem);opacity:.82;font-weight:600;
  padding-right:3.5rem;max-width:100%;
  overflow-wrap:anywhere;
}
@media(min-width:48rem){
  .ch-plate__eyebrow{letter-spacing:.26em;padding-right:0}
}
.ch-plate__mark{
  font-family:var(--ch-display);
  font-weight:800;
  font-size:clamp(2.2rem,10vw,8.5rem);
  line-height:.86;
  letter-spacing:-.035em;
  margin:0;
  text-wrap:balance;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.ch-plate__mark a{text-decoration:none}
.ch-plate__sub{
  font-family:var(--ch-display);font-weight:500;
  font-size:clamp(.95rem,1.4vw,1.2rem);
  letter-spacing:.01em;
  margin:clamp(1rem,2vw,1.6rem) 0 0;max-width:46ch;opacity:.92;
}

/* ---------- MOBILE BURGER + DRAWER ---------- */
.ch-burger{
  position:fixed;top:1rem;right:var(--ch-gut);z-index:40;
  width:2.75rem;height:2.75rem;padding:0;margin:0;
  border:2px solid currentColor;background:var(--ch-hue);color:var(--ch-hue-ink);
  display:grid;place-items:center;cursor:pointer;
}
[data-hue="sun"] .ch-burger,[data-hue="sun"].ch-plate .ch-burger{
  background:var(--ch-sun);color:var(--ch-ink);border-color:var(--ch-ink);
}
body.ch-nav-open .ch-burger{
  background:var(--ch-ink);color:var(--ch-paper);border-color:var(--ch-paper);
}
.ch-burger__box{
  display:flex;flex-direction:column;justify-content:center;gap:.28rem;
  width:1.15rem;height:1rem;
}
.ch-burger__box span{
  display:block;height:2px;width:100%;background:currentColor;
  transition:transform .2s ease,opacity .2s ease;
  transform-origin:center;
}
.ch-burger[aria-expanded="true"] .ch-burger__box span:nth-child(1){transform:translateY(.34rem) rotate(45deg)}
.ch-burger[aria-expanded="true"] .ch-burger__box span:nth-child(2){opacity:0}
.ch-burger[aria-expanded="true"] .ch-burger__box span:nth-child(3){transform:translateY(-.34rem) rotate(-45deg)}

.ch-menu{
  position:fixed;inset:0;z-index:25;
  background:var(--ch-ink);color:var(--ch-paper);
  padding:clamp(5rem,16vw,6.5rem) var(--ch-gut) 2rem;
  transform:translateX(100%);
  transition:transform .28s ease;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  visibility:hidden;
}
.ch-menu.is-open{transform:translateX(0);visibility:visible}
.ch-menu__list{list-style:none;margin:0;padding:0;max-width:28rem}
.ch-menu__list a{
  display:block;font-family:var(--ch-display);font-weight:800;
  font-size:clamp(1.55rem,7vw,2.4rem);letter-spacing:-.03em;line-height:1.1;
  text-decoration:none;padding:.7rem 0;border-bottom:1px solid #3a3348;
}
.ch-menu__list a[aria-current="page"]{color:var(--ch-sun)}
.ch-menu__list a:hover,.ch-menu__list a:focus-visible{color:var(--ch-sun)}

@media(min-width:48rem){
  .ch-burger,.ch-menu{display:none!important}
}

/* navigation is a sentence, not a bar — desktop */
.ch-say{
  font-family:var(--ch-display);
  font-weight:500;
  font-size:clamp(1.15rem,2.6vw,2.1rem);
  line-height:1.42;
  margin:clamp(1.8rem,4vw,3rem) 0 0;
  max-width:34ch;
}
@media(max-width:47.99rem){
  .ch-say{display:none}
}
.ch-say a{
  text-decoration:none;
  font-weight:800;
  box-shadow:inset 0 -.16em 0 0 var(--ch-sun);
  transition:box-shadow .16s ease,color .16s ease;
}
[data-hue="sun"] .ch-say a{box-shadow:inset 0 -.16em 0 0 var(--ch-paper)}
.ch-say a:hover,.ch-say a:focus-visible{box-shadow:inset 0 -1.05em 0 0 var(--ch-sun);color:var(--ch-ink)}
[data-hue="sun"] .ch-say a:hover{box-shadow:inset 0 -1.05em 0 0 var(--ch-paper)}
.ch-say--minor{font-size:clamp(.92rem,1.3vw,1.06rem);opacity:.9;margin-top:1.1rem;max-width:44ch;font-weight:400}
.ch-say--minor a{box-shadow:inset 0 -.12em 0 0 currentColor;font-weight:600}
.ch-say--minor a:hover{box-shadow:inset 0 -.12em 0 0 var(--ch-sun)}
.ch-plate[data-here] .ch-say a[aria-current="page"]{box-shadow:inset 0 -1.05em 0 0 var(--ch-sun);color:var(--ch-ink)}

/* ---------- HERO PHOTO ---------- */
.ch-shot{
  margin:0;
  overflow:hidden;
  background:var(--ch-paper-2);
  aspect-ratio:24/9;
}
.ch-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.ch-shot--hero{
  aspect-ratio:24/9;
  max-height:min(68vh,480px);
  width:100%;
}
@media(max-width:40rem){
  .ch-shot--hero{aspect-ratio:1/1;max-height:min(70vw,320px)}
}
.ch-shot--hero img{object-position:center 42%}
.ch-shot--side{
  aspect-ratio:1/1;
  max-width:min(100%,240px);
  margin:1.75rem auto 0;
  border:2px solid var(--ch-line);
}
@media(min-width:60rem){
  .ch-shot--side{margin-inline:0;max-width:200px}
}

/* ---------- SECTIONS ---------- */
.ch-band{padding:clamp(3rem,7vw,6rem) 0}
.ch-band--tint{background:var(--ch-paper-2)}
.ch-kicker{
  font-family:var(--ch-display);font-weight:700;
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ch-hue);margin:0 0 1.25rem;
}
.ch-lede{
  font-size:clamp(1.25rem,2.3vw,1.85rem);
  line-height:1.42;max-width:30ch;margin:0 0 1.6rem;
  font-family:var(--ch-display);font-weight:500;letter-spacing:-.012em;
}
.ch-prose{max-width:62ch}
.ch-prose p{margin:0 0 1.1rem}
.ch-prose p:last-child{margin-bottom:0}
.ch-split{display:grid;gap:clamp(1.5rem,4vw,3.5rem)}
.ch-split > *{min-width:0;max-width:100%}
@media(min-width:60rem){.ch-split{grid-template-columns:minmax(0,7fr) minmax(0,9fr);align-items:start}}

/* ---------- HOME: the four categories as an oversized numbered ledger ---------- */
.ch-ledger{list-style:none;margin:0;padding:0;counter-reset:led}
.ch-ledger li{counter-increment:led;border-top:2px solid var(--ch-ink)}
.ch-ledger li:last-child{border-bottom:2px solid var(--ch-ink)}
.ch-ledger a{
  display:grid;gap:.2rem 1.5rem;text-decoration:none;
  padding:clamp(1.1rem,2.6vw,2rem) clamp(.5rem,2vw,1.5rem);
  transition:background .18s ease,color .18s ease,padding-left .18s ease;
}
@media(min-width:56rem){
  .ch-ledger a{grid-template-columns:5.5rem minmax(0,1fr) minmax(0,22rem) 2.5rem;align-items:baseline}
}
.ch-ledger a::before{
  content:counter(led,decimal-leading-zero);
  font-family:var(--ch-display);font-weight:800;font-size:clamp(1.1rem,2vw,1.6rem);
  color:var(--ch-hue);letter-spacing:-.02em;
}
.ch-ledger b{
  font-family:var(--ch-display);font-weight:800;
  font-size:clamp(1.9rem,5.4vw,3.6rem);line-height:1;letter-spacing:-.035em;
  display:block;overflow-wrap:anywhere;word-break:break-word;
}
.ch-ledger small{font-size:.98rem;line-height:1.45;color:var(--ch-ink-soft);display:block;max-width:40ch}
.ch-ledger em{font-style:normal;font-family:var(--ch-display);font-weight:800;justify-self:end;font-size:1.4rem}
.ch-ledger a:hover,.ch-ledger a:focus-visible{background:var(--ch-hue);color:var(--ch-hue-ink)}
.ch-ledger a:hover::before,.ch-ledger a:hover small{color:inherit}
@media(min-width:56rem){.ch-ledger a:hover{padding-left:2.5rem}}

/* ---------- HOME: contrast pair (what it is / what it is not) ---------- */
.ch-pair{display:grid;gap:clamp(1rem,2vw,1.6rem)}
.ch-pair > *{min-width:0;max-width:100%}
@media(min-width:62rem){.ch-pair{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.ch-panel{padding:clamp(1.6rem,3.4vw,3rem)}
.ch-panel h3{
  font-family:var(--ch-display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.4rem,2.6vw,2rem);margin:0 0 1rem;line-height:1.08;
}
.ch-panel--dark{background:var(--ch-ink);color:var(--ch-paper)}
.ch-panel--dark p{color:#cdc6dc}
.ch-panel--sun{background:var(--ch-sun);color:var(--ch-ink)}
.ch-panel ul{margin:0;padding:0;list-style:none}
.ch-panel li{padding:.7rem 0;border-bottom:1px solid currentColor;font-size:1rem}
.ch-panel li:last-child{border-bottom:0;padding-bottom:0}

/* ---------- HOTEL ENTRY: poster ---------- */
.ch-posters{display:block}
.ch-poster{
  padding:clamp(2.2rem,5vw,4.5rem) 0;
  border-top:14px solid var(--ch-hue);
}
.ch-poster:first-child{border-top-width:14px}
.ch-poster__meta{
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:baseline;
  font-family:var(--ch-display);font-weight:700;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  margin:0 0 clamp(.9rem,2vw,1.4rem);color:var(--ch-hue);
}
.ch-poster__meta span:last-child{color:var(--ch-ink-soft);letter-spacing:.1em}
.ch-poster__name{
  font-family:var(--ch-display);font-weight:800;
  font-size:clamp(1.7rem,6vw,5rem);line-height:.92;letter-spacing:-.04em;
  margin:0 0 clamp(1.4rem,3vw,2.4rem);text-wrap:balance;
  max-width:100%;overflow-wrap:anywhere;word-break:break-word;
}
.ch-poster__body{max-width:100%;overflow-wrap:break-word}
@media(min-width:60rem){
  .ch-poster__body{column-count:2;column-gap:clamp(2rem,4vw,4rem);column-rule:1px solid var(--ch-line)}
}
.ch-poster__body p{margin:0 0 1.15rem;break-inside:avoid-column}
.ch-poster__body p:first-child::first-letter{
  font-family:var(--ch-display);font-weight:800;float:left;
  font-size:3.3em;line-height:.78;padding:.06em .1em 0 0;color:var(--ch-hue);
}
.ch-poster__body p:last-child{margin-bottom:0}

/* ---------- page index inside category pages ---------- */
.ch-onthispage{
  font-family:var(--ch-display);font-weight:600;
  display:flex;flex-wrap:wrap;gap:.5rem .4rem;margin:2rem 0 0;padding:0;list-style:none;
  font-size:clamp(1.05rem,2vw,1.45rem);line-height:1.5;
}
.ch-onthispage li::after{content:" ·";opacity:.45;margin-left:.25rem}
.ch-onthispage li:last-child::after{content:"."}
.ch-onthispage a{text-decoration:none;box-shadow:inset 0 -.13em 0 0 var(--ch-hue)}
.ch-onthispage a:hover{box-shadow:inset 0 -1em 0 0 var(--ch-hue);color:var(--ch-hue-ink)}

/* ---------- static pages ---------- */
.ch-doc h2{
  font-family:var(--ch-display);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.35rem,2.7vw,2.1rem);line-height:1.1;margin:2.6rem 0 .9rem;
}
.ch-doc h2:first-child{margin-top:0}
.ch-doc p{margin:0 0 1.05rem;max-width:64ch}
.ch-doc ul{max-width:64ch;padding-left:1.1rem}
.ch-doc li{margin:0 0 .5rem}
.ch-mailto{
  display:inline-block;font-family:var(--ch-display);font-weight:800;
  font-size:clamp(1.05rem,3vw,2.2rem);letter-spacing:-.02em;text-decoration:none;
  background:var(--ch-hue);color:var(--ch-hue-ink);padding:.5rem .8rem;margin:.4rem 0 1.4rem;
  word-break:break-word;max-width:100%;overflow-wrap:anywhere;
}
.ch-mailto:hover{background:var(--ch-ink);color:var(--ch-paper)}
.ch-stamp{
  font-family:var(--ch-display);font-weight:700;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ch-ink-soft);
  border-top:2px solid var(--ch-ink);padding-top:.9rem;margin-top:3rem;
}

/* ---------- CLOSING BAND (footer; single asymmetric band, no link columns) ---------- */
.ch-close{background:var(--ch-ink);color:var(--ch-paper);padding:clamp(3rem,7vw,6rem) 0 clamp(1.6rem,3vw,2.4rem);margin-top:0}
.ch-close__grid{display:grid;gap:clamp(1.8rem,4vw,3rem)}
@media(min-width:62rem){.ch-close__grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:end}}
.ch-close__say{
  font-family:var(--ch-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.45rem,4.4vw,3.4rem);line-height:1.04;margin:0;text-wrap:balance;
  overflow-wrap:anywhere;max-width:100%;
}
.ch-close__say a{text-decoration:none;color:var(--ch-sun);box-shadow:inset 0 -.08em 0 0 currentColor}
.ch-close__say a:hover{background:var(--ch-sun);color:var(--ch-ink);box-shadow:none}
.ch-close__note{font-size:.98rem;color:#c9c2d8;margin:0;max-width:34ch}
.ch-colophon{
  margin-top:clamp(2.4rem,5vw,4rem);border-top:1px solid #3a3348;padding-top:1.1rem;
  font-family:var(--ch-display);font-weight:500;font-size:.8rem;letter-spacing:.05em;
  color:#9d95ae;display:flex;flex-wrap:wrap;gap:.35rem .9rem;align-items:baseline;
}
.ch-colophon a{text-decoration:none;color:#e7e2f1;box-shadow:inset 0 -1px 0 0 #6b6280}
.ch-colophon a:hover{color:var(--ch-sun)}
.ch-colophon__rule{flex:1 1 2rem;height:1px;background:#3a3348;min-width:1rem}

:focus-visible{outline:3px solid var(--ch-sun);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
  .ch-menu{transition:none}
}
