/* spainfunplayes.com — azure / coral / sand */

:root{
  --azure:#1E6FD9;
  --azure-deep:#1655A8;
  --coral:#FF6B4A;
  --sand:#F5EFE3;
  --sand-deep:#EDE3D1;
  --ink:#2A2622;
  --ink-soft:#5C544B;
  --paper:#FFFFFF;
  --line:#E2D6C0;
  --wrap:1120px;
}

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

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

body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:"Zilla Slab",Georgia,"Times New Roman",serif;
  font-weight:600;
  line-height:1.16;
  color:var(--ink);
  margin:0;
  letter-spacing:-.005em;
}

a{color:var(--azure);text-decoration:none;}
a:hover{color:var(--azure-deep);text-decoration:underline;text-underline-offset:3px;}

p{margin:0 0 1.05em;}
p:last-child{margin-bottom:0;}

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

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:24px;}

/* ── signature device: single hand-drawn wave squiggle ─────────────── */
.squiggle{
  display:block;
  width:118px;
  height:11px;
  margin-top:.5rem;
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2.5 8.4C14 2.2 25 10.4 37.5 7.1c12.5-3.3 21-9.1 34-5.2 13 3.9 22 9.6 33 5.4 5-1.9 9-4 12.4-5.6' fill='none' stroke='%23FF6B4A' stroke-width='2.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.squiggle--sm{width:78px;height:8px;margin-top:.4rem;}
.squiggle--lg{width:188px;height:16px;margin-top:.85rem;}
.squiggle--center{margin-inline:auto;}

/* ── header ────────────────────────────────────────────────────────── */
.site-header{
  background:var(--sand);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-height:82px;
  padding-block:14px;
  flex-wrap:wrap;
}
.brand{
  font-family:"Zilla Slab",Georgia,serif;
  font-size:1.42rem;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.01em;
  text-decoration:none;
  white-space:nowrap;
}
.brand:hover{color:var(--azure);text-decoration:none;}
.brand span{color:var(--azure);}

.site-nav{
  display:flex;
  align-items:center;
  gap:26px;
  flex-wrap:wrap;
}
.site-nav a{
  position:relative;
  display:inline-block;
  padding-bottom:12px;
  color:var(--ink);
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.005em;
  text-decoration:none;
}
.site-nav a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:9px;
  opacity:0;
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2.5 8.4C14 2.2 25 10.4 37.5 7.1c12.5-3.3 21-9.1 34-5.2 13 3.9 22 9.6 33 5.4 5-1.9 9-4 12.4-5.6' fill='none' stroke='%23FF6B4A' stroke-width='2.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition:opacity .16s ease;
}
.site-nav a:hover{color:var(--azure);text-decoration:none;}
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after{opacity:1;}
.site-nav a[aria-current="page"]{color:var(--azure);}

/* ── hero ──────────────────────────────────────────────────────────── */
.hero{padding-block:64px 8px;}
.hero__inner{max-width:760px;}
.hero__eyebrow{
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--azure);
  margin-bottom:14px;
}
.hero h1{font-size:clamp(2.3rem,5.2vw,3.5rem);}
.hero__lede{
  margin-top:22px;
  font-size:1.12rem;
  color:var(--ink-soft);
  max-width:62ch;
}

.hero__media{
  margin:36px 0 0;
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:3/2;
  background:#2A3D4A;
}
.hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
}
.page-head .hero__media{margin-top:40px;}
@media (max-width:640px){.hero__media{aspect-ratio:4/3;}}

/* ── generic section ───────────────────────────────────────────────── */
.section{padding-block:64px;}
.section--tight{padding-block:48px;}
.section__head{max-width:66ch;margin-bottom:34px;}
.section__head h2{font-size:clamp(1.6rem,3vw,2.1rem);}
.section__head p{margin-top:18px;color:var(--ink-soft);}

/* ── home: inline numbered index of categories ─────────────────────── */
.cat-index{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:840px){.cat-index{grid-template-columns:1fr;}}
.cat-index a{
  display:block;
  padding:30px 26px 34px;
  color:var(--ink);
  border-left:1px solid var(--line);
  transition:background .16s ease;
}
.cat-index a:first-child{border-left:0;}
@media (max-width:840px){
  .cat-index a{border-left:0;border-top:1px solid var(--line);}
  .cat-index a:first-child{border-top:0;}
}
.cat-index a:hover{background:var(--paper);text-decoration:none;}
.cat-index__num{
  display:block;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--azure);
  margin-bottom:10px;
}
.cat-index h3{font-size:1.24rem;}
.cat-index p{
  margin-top:15px;
  font-size:.92rem;
  color:var(--ink-soft);
}

/* ── home: full roster, four columns of names ──────────────────────── */
.roster{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:34px;
}
@media (max-width:940px){.roster{grid-template-columns:repeat(2,1fr);gap:34px 28px;}}
@media (max-width:560px){.roster{grid-template-columns:1fr;}}
.roster h3{font-size:1.06rem;}
.roster ol{
  list-style:none;
  margin:18px 0 0;
  padding:0;
}
.roster li{
  padding:9px 0;
  border-top:1px solid var(--line);
  font-size:.94rem;
  color:var(--ink-soft);
  line-height:1.5;
}
.roster li:last-child{border-bottom:1px solid var(--line);}
.roster li b{
  display:block;
  font-weight:500;
  color:var(--ink);
}
.roster__go{
  display:inline-block;
  margin-top:16px;
  font-size:.87rem;
  font-weight:600;
  color:var(--azure);
}

/* ── trust: heading left, statements right ─────────────────────────── */
.trust{
  background:var(--paper);
  border-block:1px solid var(--line);
  padding-block:58px;
}
.trust__grid{
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:48px;
}
@media (max-width:840px){.trust__grid{grid-template-columns:1fr;gap:30px;}}
.trust h2{font-size:1.5rem;}
.trust ol{list-style:none;margin:0;padding:0;}
.trust li{
  padding:18px 0 18px 22px;
  border-left:3px solid var(--coral);
  border-top:1px solid var(--line);
  font-size:1rem;
  color:var(--ink-soft);
}
.trust li:first-child{border-top:0;padding-top:0;}
.trust li b{
  display:block;
  font-family:"Zilla Slab",Georgia,serif;
  font-size:1.08rem;
  font-weight:600;
  color:var(--ink);
  margin-bottom:5px;
}

/* ── category page head: title left, intro right ───────────────────── */
.page-head{
  padding-block:58px 44px;
}
.page-head__grid{
  display:grid;
  grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:52px;
  align-items:start;
}
@media (max-width:900px){.page-head__grid{grid-template-columns:1fr;gap:28px;}}
.page-head__eyebrow{
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--azure);
  margin-bottom:14px;
}
.page-head h1{font-size:clamp(2.1rem,4.4vw,3rem);}
.page-head__intro p{color:var(--ink-soft);}
.page-head__intro p:first-child{
  font-size:1.1rem;
  color:var(--ink);
}

/* contents strip */
.contents{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:20px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 28px;
}
.contents__label{
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9C8E77;
}
.contents a{
  font-size:.94rem;
  font-weight:500;
  color:var(--ink);
}
.contents a:hover{color:var(--azure);}

/* ── hotel entries: full-width rows, label column + prose ──────────── */
.hotel-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.hotel{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  padding:34px 36px 36px;
  display:grid;
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:44px;
  align-items:start;
  scroll-margin-top:24px;
}
@media (max-width:900px){
  .hotel{grid-template-columns:1fr;gap:22px;padding:28px 24px 30px;}
}
.hotel__num{
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--azure);
  margin-bottom:12px;
}
.hotel h3{font-size:1.42rem;}
.hotel__where{
  margin-top:14px;
  font-size:.79rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.hotel__body{color:var(--ink-soft);font-size:1rem;}
.hotel__tags{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.hotel__tags li{
  border:1.5px solid var(--azure);
  color:var(--azure);
  border-radius:999px;
  padding:4px 13px;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.02em;
}

/* ── prose pages: sticky heading column + text ─────────────────────── */
.doc{
  padding-block:58px 72px;
  display:grid;
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:52px;
  align-items:start;
}
@media (max-width:900px){.doc{grid-template-columns:1fr;gap:26px;}}
.doc__aside{position:sticky;top:28px;}
@media (max-width:900px){.doc__aside{position:static;}}
.doc__aside h1{font-size:clamp(1.9rem,3.8vw,2.5rem);}
.doc__body{max-width:66ch;}
.doc__body h2{font-size:1.22rem;margin-top:38px;}
.doc__body h2:first-child{margin-top:0;}
.doc__body p{margin-top:16px;color:var(--ink-soft);}
.doc__body ul{margin-top:16px;padding-left:20px;color:var(--ink-soft);}
.doc__body li{margin-bottom:8px;}
.doc__body .lede{font-size:1.1rem;color:var(--ink);margin-top:0;}

/* ── footer: one soft shoreline curve ──────────────────────────────── */
.site-footer{margin-top:auto;}
.footer-wave{
  display:block;
  width:100%;
  height:74px;
  color:var(--sand-deep);
}
@media (max-width:640px){.footer-wave{height:46px;}}
.footer-body{
  background:var(--sand-deep);
  padding:6px 0 46px;
  text-align:center;
}
.footer-body .brand{font-size:1.3rem;}
.footer-note{
  margin:18px auto 0;
  max-width:56ch;
  font-size:.94rem;
  color:var(--ink-soft);
}
.footer-links{
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 22px;
  font-size:.9rem;
}
.footer-links a{color:var(--ink);}
.footer-links a:hover{color:var(--azure);}
.footer-legal{
  margin-top:24px;
  font-size:.82rem;
  color:#8A7F70;
}

/* layout scaffold */
.page{min-height:100vh;display:flex;flex-direction:column;}
.page main{flex:1;}