/* Island guide and homeowner's guide pages (scripts/guides.mjs). */
.guidepage main{background:var(--surface)}
.gk{margin:0 0 10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:500}

/* Hero: a photograph under a deep navy wash, text left. */
.ghero{position:relative;isolation:isolate;color:#fff;background:#0c2340;overflow:hidden}
.ghero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--gimg) center/cover no-repeat}
.ghero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(9,28,52,.92) 0%,rgba(9,28,52,.78) 48%,rgba(9,28,52,.45) 100%)}
.ghero-in{padding-block:46px 54px;max-width:var(--maxw)}
.ghero .gk{color:rgba(255,255,255,.75)}
.ghero h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(34px,4.6vw,56px);line-height:1.06;letter-spacing:-.01em;margin:0;max-width:22ch;text-wrap:balance}
.ghero h1 em{font-style:italic;color:#f3e6c8}
.glede{margin:18px 0 0;max-width:62ch;font-size:16px;line-height:1.7;color:rgba(255,255,255,.92)}
.gcrumbs{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-bottom:22px;font-size:12.5px;color:rgba(255,255,255,.7)}
.gcrumbs a{color:rgba(255,255,255,.85);text-decoration:none}
.gcrumbs a:hover{color:#fff;text-decoration:underline}

/* Body: an "on this page" list beside the article on wide screens. */
.glayout{display:grid;grid-template-columns:220px minmax(0,760px);gap:56px;padding-block:44px 30px;justify-content:start}
.gtoc{position:sticky;top:84px;align-self:start;display:grid;gap:2px;font-size:13px}
.gtoc p{margin:0 0 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.gtoc a{color:var(--ink-2);text-decoration:none;padding:5px 0 5px 12px;border-left:2px solid var(--line-soft);line-height:1.35}
.gtoc a:hover{color:var(--navy-text);border-left-color:var(--navy)}
.glayout:not(:has(.gtoc)){grid-template-columns:minmax(0,760px)}
.gbody{min-width:0;font-size:15.5px;line-height:1.75;color:var(--ink)}
.gsec{scroll-margin-top:84px}
.gsec + .gsec{margin-top:34px}
.gbody h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(26px,3vw,34px);line-height:1.15;margin:0 0 12px;color:var(--navy-text)}
.gbody h3{font-size:16px;font-weight:600;margin:24px 0 6px;color:var(--ink)}
.gbody p{margin:0 0 14px}
.gbody ul,.gbody ol{margin:0 0 16px;padding-left:22px}
.gbody li{margin:0 0 7px}
.gbody a{color:var(--navy-text);text-decoration:underline;text-decoration-color:rgba(16,45,78,.3);text-underline-offset:3px}
.gbody a:hover{text-decoration-color:var(--navy)}
.gbody strong{font-weight:600}

/* Boxes for the things people skim for. */
.gnote{margin:18px 0;padding:16px 18px;border-radius:10px;background:var(--navy-soft);border-left:3px solid var(--navy)}
.gnote p:last-child,.gnote ul:last-child{margin-bottom:0}
.gnote b.t{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-text);margin-bottom:6px;font-weight:600}
.gwarm{background:#FBF5E9;border-left-color:#B8893C}
.gtable{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:14.5px}
.gtable th,.gtable td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.gtable th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.gtable td:first-child{font-weight:600;white-space:nowrap;color:var(--navy-text)}
.gscroll{overflow-x:auto}
.gsteps{counter-reset:s;list-style:none;padding:0!important}
.gsteps li{counter-increment:s;position:relative;padding-left:44px;margin-bottom:14px}
.gsteps li::before{content:counter(s);position:absolute;left:0;top:1px;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-size:13px;font-weight:600;display:grid;place-items:center}
.gcheck{list-style:none;padding:0!important}
.gcheck li{position:relative;padding-left:30px}
.gcheck li::before{content:"";position:absolute;left:2px;top:6px;width:16px;height:16px;border:1.5px solid var(--navy);border-radius:4px}

/* Places: local businesses and spots, two to a row. */
.gplaces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0 20px}
.gplace{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--surface);line-height:1.55}
.gplace b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.gplace .gmeta{display:block;font-size:12px;color:var(--ink-3);margin:2px 0 6px;letter-spacing:.02em}
.gplace p{margin:0;font-size:14px;color:var(--ink-2)}
.gplace a.gsite{display:inline-block;margin-top:8px;font-size:13px;font-weight:500}

/* Questions. */
.gfaq{border-bottom:1px solid var(--line)}
.gfaq summary{list-style:none;cursor:pointer;padding:15px 30px 15px 0;font-weight:500;position:relative;line-height:1.45}
.gfaq summary::-webkit-details-marker{display:none}
.gfaq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:20px;color:var(--ink-3);font-weight:300}
.gfaq[open] summary::after{content:"\2212"}
.gfaq div{padding:0 0 16px;color:var(--ink-2)}
.gfaq div p:last-child{margin-bottom:0}

/* Cards linking to other guides. */
.gcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gkids .gcards{grid-template-columns:repeat(2,minmax(0,1fr))}
.gcard{display:block;border:1px solid var(--line);border-radius:12px;padding:18px;background:var(--surface);text-decoration:none!important;color:var(--ink)!important;transition:border-color .15s ease,box-shadow .15s ease}
.gcard:hover{border-color:var(--navy);box-shadow:var(--shadow-2)}
.gcard .gcardk{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.gcard b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:21px;line-height:1.2;color:var(--navy-text);margin-bottom:6px}
.gcard span:last-child{display:block;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.grel{background:var(--ground);padding-block:40px}
.gupdated{margin-top:34px!important;font-size:12.5px;color:var(--ink-3)}

/* Call to action. */
.gcta{background:var(--navy);color:#fff;padding-block:46px}
.gcta-in{display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center;justify-content:space-between}
.gcta-in > div:first-child{max-width:620px}
.gcta .gk{color:rgba(255,255,255,.7)}
.gcta h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(28px,3.2vw,38px);line-height:1.12;margin:0 0 10px}
.gcta p{margin:0;color:rgba(255,255,255,.88);line-height:1.65}
.gcta-btns{display:flex;flex-wrap:wrap;gap:10px}
.gcta .btn{background:#fff;color:var(--navy);border-color:#fff}
.gcta .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}

@media (max-width:980px){
  .glayout{grid-template-columns:minmax(0,1fr);gap:0;padding-block:30px 20px}
  .gtoc{position:static;margin-bottom:26px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--ground)}
  .gcards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .ghero-in{padding-block:30px 38px}
  .glede{font-size:15px}
  .gplaces,.gcards,.gkids .gcards{grid-template-columns:1fr}
  .gbody{font-size:15px}
  .gtable td:first-child{white-space:normal}
}