/* Arcane Valors — index of four hotel categories
   Design system: saturated four-hue coding, offset card grid, ink slabs. */

:root{
  --av-ink:#161225;
  --av-ink-soft:#4a4360;
  --av-paper:#fffdf6;
  --av-paper-2:#f4efe4;
  --av-line:#ded5c4;

  --av-art:#d6006e;
  --av-capsule:#3b2be0;
  --av-ice:#0092c7;
  --av-casino:#e2680b;

  --av-art-tint:#ffe8f3;
  --av-capsule-tint:#e8e6ff;
  --av-ice-tint:#e0f4fc;
  --av-casino-tint:#fdeddd;

  --av-hue:var(--av-ink);
  --av-tint:var(--av-paper-2);

  --av-shell:min(1240px,100% - 3rem);
  --av-radius:22px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--av-paper);
  color:var(--av-ink);
  font-family:"Karla","Segoe UI",system-ui,sans-serif;
  font-size:17px;
  line-height:1.72;
  letter-spacing:.005em;
}

h1,h2,h3,h4,.av-wordmark,.av-numeral{
  font-family:"Space Grotesk","Trebuchet MS",system-ui,sans-serif;
  font-weight:700;
  letter-spacing:-.028em;
  line-height:1.04;
  margin:0;
}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

a{color:inherit}

img{max-width:100%;display:block}

.av-shell{width:var(--av-shell);margin-inline:auto}

/* ---------- masthead ---------- */

.av-top{
  position:sticky;top:0;z-index:40;
  background:var(--av-ink);
  color:var(--av-paper);
}

.av-top__inner{
  display:flex;align-items:center;gap:1.5rem;
  min-height:74px;
  position:relative;
}

.av-wordmark{
  font-size:1.32rem;text-decoration:none;
  display:inline-flex;align-items:baseline;gap:.45rem;
  margin-right:auto;
}
.av-wordmark span{
  font-family:"Karla",sans-serif;font-weight:700;
  font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;
  color:#a79fd0;
}

.av-burger{
  display:none;
  width:44px;height:44px;padding:0;
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px;
  background:transparent;
  cursor:pointer;
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
  flex-shrink:0;
}
.av-burger span{
  display:block;width:18px;height:2px;
  background:var(--av-paper);
  border-radius:1px;
  transition:transform .2s ease,opacity .2s ease;
}
.av-burger[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.av-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.av-burger[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.av-nav{display:flex;flex-wrap:wrap;gap:.35rem}

.av-nav a{
  text-decoration:none;
  font-size:.79rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
  padding:.5rem .78rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  transition:background .16s ease,border-color .16s ease;
}
.av-nav a:hover{background:rgba(255,255,255,.12)}
.av-nav a[data-h="art"]:hover{background:var(--av-art);border-color:var(--av-art)}
.av-nav a[data-h="capsule"]:hover{background:var(--av-capsule);border-color:var(--av-capsule)}
.av-nav a[data-h="ice"]:hover{background:var(--av-ice);border-color:var(--av-ice)}
.av-nav a[data-h="casino"]:hover{background:var(--av-casino);border-color:var(--av-casino)}
.av-nav a[aria-current="page"]{background:var(--av-hue);border-color:var(--av-hue)}

/* ---------- hero ---------- */

.av-hero{padding:3.2rem 0 0}

.av-hero__frame{
  position:relative;
  border-radius:var(--av-radius);
  overflow:hidden;
  background:var(--av-paper-2);
  border:1px solid var(--av-line);
  aspect-ratio:21/8;
}
.av-hero__frame img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}

.av-hero__title{
  margin-top:2.4rem;
  font-size:clamp(2.5rem,6.4vw,5.2rem);
}
.av-hero__lead{
  margin-top:1.4rem;
  max-width:56ch;
  font-size:1.14rem;
  color:var(--av-ink-soft);
}

/* ---------- ink slab ---------- */

.av-slab{
  background:var(--av-ink);color:var(--av-paper);
  margin-top:4.2rem;padding:4rem 0;
}
.av-slab h2{font-size:clamp(1.8rem,3.6vw,2.9rem);max-width:22ch}
.av-slab p{color:#c8c1e2;max-width:62ch;margin-top:1.4rem}

.av-slab__grid{
  display:grid;gap:2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:3rem;
}
.av-slab__grid h3{
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  font-family:"Karla",sans-serif;color:#a79fd0;margin-bottom:.7rem;
}
.av-slab__grid p{font-size:.98rem;margin-top:0}

/* ---------- category tiles ---------- */

.av-tiles{
  display:grid;gap:1.6rem;
  grid-template-columns:repeat(2,1fr);
  margin:4.2rem 0 0;
}
@media (max-width:760px){.av-tiles{grid-template-columns:1fr}}

.av-tile{
  --av-hue:var(--av-ink);
  position:relative;
  display:block;text-decoration:none;
  background:var(--av-hue);color:#fff;
  border-radius:var(--av-radius);
  padding:2.1rem 2.1rem 2.4rem;
  min-height:280px;
  overflow:hidden;
  transition:transform .18s ease;
}
.av-tile:hover{transform:translateY(-5px)}
.av-tile h2{font-size:2rem;margin-bottom:.9rem}
.av-tile p{font-size:.99rem;color:rgba(255,255,255,.88)}
.av-tile__count{
  font-family:"Space Grotesk",sans-serif;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  opacity:.8;display:block;margin-bottom:1.4rem;
}
.av-tile__go{
  position:absolute;right:1.6rem;bottom:1.4rem;
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
}
.av-tile__ghost{
  position:absolute;right:-.6rem;top:-2.4rem;
  font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:8rem;line-height:1;color:rgba(255,255,255,.13);
  pointer-events:none;
}

/* ---------- roster index ---------- */

.av-roster{margin-top:4.6rem}
.av-roster > h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}

.av-roster__cols{
  display:grid;gap:2.2rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  margin-top:2.4rem;
}
.av-roster__block h3{
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  font-family:"Karla",sans-serif;
  color:var(--av-hue);
  padding-bottom:.6rem;border-bottom:3px solid var(--av-hue);
}
.av-roster__block ul{list-style:none;margin:1rem 0 0;padding:0}
.av-roster__block li{
  padding:.52rem 0;
  border-bottom:1px solid var(--av-line);
  font-weight:700;font-size:.96rem;
}
.av-roster__block li em{
  display:block;font-style:normal;font-weight:400;
  font-size:.84rem;color:var(--av-ink-soft);
}

/* ---------- category masthead ---------- */

.av-mast{
  background:var(--av-tint);
  border-bottom:6px solid var(--av-hue);
  padding:3.4rem 0 3rem;
}
.av-mast__kicker{
  font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--av-hue);
}
.av-mast h1{font-size:clamp(2.3rem,5.6vw,4.2rem);margin-top:.9rem}
.av-mast__lead{margin-top:1.4rem;max-width:60ch;font-size:1.1rem}

/* ---------- entries ---------- */

.av-entries{
  margin:3.4rem 0 0;
  display:grid;gap:1.8rem;
  grid-template-columns:repeat(2,1fr);
}
.av-entries > *:nth-child(even){margin-top:3.4rem}

.av-entry{
  position:relative;
  background:var(--av-paper);
  border:1px solid var(--av-line);
  border-top:9px solid var(--av-hue);
  border-radius:var(--av-radius);
  padding:2rem 2rem 2.2rem;
}
.av-entry__numeral{
  position:absolute;top:1.1rem;right:1.6rem;
  font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:3.2rem;line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px var(--av-hue);
  opacity:.45;
}
.av-entry h2{font-size:1.62rem;max-width:16ch}
.av-entry__where{
  display:inline-block;margin:.95rem 0 1.3rem;
  background:var(--av-tint);color:var(--av-hue);
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:.36rem .8rem;border-radius:999px;
}
.av-entry p{font-size:1.005rem}

.av-entry__shot{
  border-radius:14px;margin-bottom:1.4rem;
  aspect-ratio:16/9;object-fit:cover;width:100%;
}

/* ---------- prose pages ---------- */

.av-prose{padding:3rem 0 1rem;max-width:70ch}
.av-prose h1{font-size:clamp(2rem,4.6vw,3.2rem);margin-bottom:1.6rem}
.av-prose h2{font-size:1.35rem;margin:2.4rem 0 .8rem}
.av-prose ul{padding-left:1.15rem}
.av-prose li{margin-bottom:.5rem}
.av-prose a{font-weight:700;color:var(--av-capsule)}

/* ---------- closing band ---------- */

.av-band{
  margin-top:4.6rem;
  border-radius:var(--av-radius);
  background:var(--av-paper-2);
  border:1px solid var(--av-line);
  padding:2.8rem;
}
.av-band h2{font-size:1.6rem;margin-bottom:1rem}
.av-band p{max-width:66ch}

/* ---------- footer ---------- */

.av-foot{
  margin-top:5rem;
  background:var(--av-ink);color:#c8c1e2;
  padding:3.4rem 0 2.6rem;
}
.av-foot__grid{
  display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.av-foot h4{
  color:var(--av-paper);font-size:.74rem;letter-spacing:.22em;
  text-transform:uppercase;font-family:"Karla",sans-serif;margin-bottom:.9rem;
}
.av-foot ul{list-style:none;margin:0;padding:0}
.av-foot li{margin-bottom:.45rem}
.av-foot a{text-decoration:none;font-size:.94rem}
.av-foot a:hover{color:#fff;text-decoration:underline}
.av-foot__note{
  margin-top:2.6rem;padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.84rem;color:#9a92c0;
}

/* ---------- responsive ---------- */

@media (max-width:900px){
  .av-entries{grid-template-columns:1fr}
  .av-entries > *:nth-child(even){margin-top:0}
  .av-hero__frame{aspect-ratio:4/3}

  .av-burger{display:inline-flex}
  .av-top__inner{flex-wrap:wrap;padding:.55rem 0}
  .av-nav{
    display:none;
    width:100%;
    flex-direction:column;
    gap:.4rem;
    padding:0 0 .85rem;
  }
  .av-nav.is-open{display:flex}
  .av-nav a{
    width:100%;
    text-align:left;
    border-radius:12px;
    padding:.72rem .9rem;
  }
}

@media (max-width:640px){
  body{font-size:16px}
  :root{--av-shell:min(1240px,100% - 1.8rem)}
  .av-wordmark{font-size:1.12rem}
  .av-wordmark span{display:none}
  .av-entry,.av-band{padding:1.5rem}
  .av-tile{padding:1.6rem;min-height:0}
}