:root{
  --navy:#1f3044; --navy2:#2a4058; --teal:#1c8790; --teal2:#2a9ea6; --sage:#9cc0ad;
  --sand:#efe4cc; --paper:#fbf7ee; --cream:#f6efdf; --ink:#24303a; --muted:#6f7a80; --line:#e4dac4;
  --mustard:#f3b23a; --orange:#ee7d24; --rust:#d2412a; --olive:#3fa045;
  --display:"Shrikhand",Georgia,serif; --body:"Archivo",Helvetica,Arial,sans-serif; --narrow:"Archivo Narrow","Archivo",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--sand);color:var(--ink);font:14px/1.45 var(--body);padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:inherit}
button{font:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}
main,footer>div{max-width:700px;margin-inline:auto}
main{background:var(--paper);min-height:60vh}
@media (min-width:720px){main{border-inline:2px solid var(--navy)}}
/* --stick is where the sticky tab bar sits: under the sticky site header on desktop, at the top on phones
   (the site header scrolls away there). */
:root{--stick:69px;--tabs:42px}
@media (max-width:640px){:root{--stick:0px}}

/* spot title: sits under the shared site header (logo and main nav), then the Overview and Forecast tabs */
.ic{flex:none;width:36px;height:36px;display:grid;place-items:center;border:0;background:none;border-radius:50%;text-decoration:none;color:var(--navy)}
.ic svg{width:20px;height:20px}
.spot-head{display:flex;align-items:center;gap:12px;padding:12px 14px 10px}
.spot-head .ttl{flex:1;min-width:0}
.ttl small{display:block;font:800 11px var(--narrow);color:var(--teal);text-transform:uppercase;letter-spacing:.1em;line-height:1.3}
.ttl h1{margin:2px 0 0;font:400 clamp(28px,7vw,34px)/1.12 var(--display);color:var(--navy);text-shadow:2px 2px 0 var(--mustard);overflow-wrap:anywhere}
.sh-act{display:flex;align-items:center;gap:8px;flex:none}
.sh-act .ic{width:auto;height:38px;min-width:38px;padding:0 8px;gap:6px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--navy);border-radius:999px;background:var(--paper);color:var(--navy);box-shadow:2px 2px 0 var(--navy)}
.sh-act .ic:hover{background:var(--cream)}
.sh-act .ic:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--navy)}
.sh-act .lbl{display:none;font:800 12px var(--body);text-transform:uppercase;letter-spacing:.08em}
#fav[aria-pressed="true"]{background:var(--mustard);--fill:var(--navy)}
#units span{font:800 13px var(--narrow);letter-spacing:.04em}
.tabs{position:sticky;top:var(--stick);z-index:20;display:grid;grid-template-columns:1fr 1fr;height:var(--tabs);background:var(--paper);border-bottom:2px solid var(--line)}
.tabs button{border:0;background:none;padding:0;margin-bottom:-2px;font:800 12.5px var(--body);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);border-bottom:4px solid transparent}
.tabs button:hover{color:var(--navy)}
.tabs button[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--orange)}
.crumbs-spot+.spot-head{padding-top:4px}

/* Header band: the otter, the old mine and the wave (images/h4.jpg as a light WebP) behind the breadcrumb and
   spot name, washed out towards the page colour so the text stays readable. Phones get the 800px file. */
.spot-band{position:relative;isolation:isolate;overflow:hidden;background:var(--paper)}
.spot-band::before,.spot-band::after{content:"";position:absolute;inset:0;pointer-events:none}
.spot-band::before{z-index:-2;left:auto;width:64%;background:url(/images/h4-band-s.webp) 0 40%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
.spot-band::after{z-index:-1;background:linear-gradient(180deg,rgba(251,247,238,0) 72%,var(--paper) 100%)}
.spot-band .crumbs-spot{background:none;position:relative}
.spot-band .spot-head{padding-bottom:26px}
.spot-band .crumbs a{color:var(--navy2)}
.spot-band .crumbs{text-shadow:0 0 6px var(--paper),0 0 2px var(--paper)}
.spot-band .sh-act .ic{background:rgba(251,247,238,.82)}

/* desktop: the same width as the site header, with Overview in two columns */
@media (min-width:1000px){
  .spotpage main,.spotpage footer>div{max-width:1180px}
  .spotpage main{padding-inline:28px;border:0;background:none}
  .spotpage .crumbs-spot{padding:18px 0 0;background:none}
  .spot-head{padding:6px 0 14px}
  /* desktop band: a card the width of the page, the art anchored right so the otter, mine and wave sit
     beside the name rather than under it, fading into the page colour on the left */
  .spotpage .spot-band{margin:18px 0 14px;padding:0 24px;border:2px solid var(--navy);border-radius:12px;box-shadow:5px 5px 0 var(--mustard)}
  .spot-band::before{width:66%;background-image:url(/images/h4-band.webp);background-position:0 36%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%);mask-image:linear-gradient(90deg,transparent,#000 14%)}
  .spot-band::after{display:none}
  .spotpage .spot-band .crumbs-spot{padding-top:16px}
  .spot-band .spot-head{padding:20px 0 44px}
  .ttl h1{font-size:46px;text-shadow:3px 3px 0 var(--mustard)}
  .sh-act .lbl{display:inline}
  .sh-act .ic{height:42px;padding:0 16px}
  .tabs{display:flex;gap:6px;background:var(--sand);border-bottom:2px solid var(--navy)}
  .tabs button{padding:0 22px}
  #ov,#fc{background:var(--paper);border:2px solid var(--navy);border-top:0;border-radius:0 0 12px 12px;overflow:clip;box-shadow:5px 5px 0 var(--mustard)}
  #ov{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .ov-a{border-right:2px solid var(--line)}
  .ov-b .tidebox{border-top:0}
  #ov>.drawer,#ov>#spot-guide{grid-column:1/-1}
  .now{padding:22px 12px 18px}
  .now .v{font-size:40px}
  .stage,.camcap,.thumbs{max-width:none}
  .cams{padding:12px 14px 4px}
  #spot-photos,[data-support-slot],[data-newsletter]{margin-top:22px}
  /* forecast rows: wider surf and wind columns, swell figures grouped instead of pushed to opposite edges */
  .spotpage .frow{grid-template-columns:22px 120px minmax(0,1fr) 64px 96px 120px;min-height:56px}
  .spotpage .fhead{grid-template-columns:142px 1fr 120px}
  .spotpage .frow .sf{font-size:20px}
  .spotpage .frow .sw{padding-left:18px}
  .spotpage .frow .sw .l1{justify-content:flex-start;gap:18px}
  .spotpage .frow .sw .h{font-size:17px}
  .spotpage .frow .ws{justify-content:center;font-size:21px}
  .spotpage .fday h2{padding:10px 16px 7px}
}
main{padding-bottom:1px}

/* now */
.now{display:grid;grid-template-columns:1fr 1fr;text-align:center;padding:12px 8px 10px;border-bottom:2px solid var(--line)}
.now .cell{display:flex;flex-direction:column;align-items:center;gap:4px}
.now .v{font:900 30px/1 var(--body);color:var(--navy);letter-spacing:-.01em}
.now .v small{font-size:15px;font-weight:700}
.now .stars{font-size:18px;letter-spacing:1px}
.now .dir{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:4px;font:800 14px var(--body);color:var(--navy)}
.now .dir small{font-size:11px;font-weight:700}
.now .dir span.at{color:var(--muted);font-weight:600;font-size:12px}
.now .dir svg{width:22px;height:22px;color:var(--navy)}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;color:#fff;font:800 12px var(--body);letter-spacing:.02em}
.badge.off-shore{background:var(--olive)} .badge.cross{background:var(--orange)} .badge.on-shore{background:var(--rust)}
.meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;padding:8px 14px;font:600 13px var(--narrow);color:var(--muted);border-bottom:2px solid var(--line)}
.meta b{color:var(--ink);font:800 14px var(--body)}
.meta small{font-weight:700}

.stars{white-space:nowrap;line-height:1;font-size:17px;letter-spacing:1px}
.stars .on{color:var(--mustard)} .stars .blown{color:var(--mustard);opacity:.4} .stars .off{color:#d8ceb8}

/* cams */
.cams{padding:10px 12px 2px;border-bottom:2px solid var(--line)}
.stage{position:relative;aspect-ratio:16/9;max-width:440px;margin:0 auto;background:#14212f;overflow:hidden;border-radius:10px;box-shadow:0 2px 0 var(--line)}
.stage img,.stage iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.stage .age{position:absolute;left:8px;top:8px;background:rgba(31,48,68,.72);color:var(--cream);font:700 11px var(--narrow);padding:3px 8px;border-radius:999px;letter-spacing:.03em}
.stage .play{position:absolute;inset:0;margin:auto;width:40px;height:40px;border-radius:50%;border:0;background:rgba(31,48,68,.6);backdrop-filter:blur(4px);display:grid;place-items:center;color:var(--cream);transition:transform .15s}
.stage .play:hover{transform:scale(1.08)}
.stage .play svg{width:16px;height:16px;margin-left:3px}
.camcap{display:flex;justify-content:space-between;align-items:baseline;gap:4px 10px;flex-wrap:wrap;max-width:440px;margin:0 auto;padding:7px 2px 0;font:600 12px var(--narrow);color:var(--muted)}
.camcap a{text-decoration:none}
.camcap b{color:var(--navy);font-size:13px}
.camcap .cr{font-size:11px;color:var(--muted);text-decoration:underline}
.thumbs{display:flex;gap:8px;overflow-x:auto;max-width:440px;margin:0 auto;padding:8px 2px;scrollbar-width:none}
.thumbs::-webkit-scrollbar{display:none}
.thumb{flex:none;width:80px;min-width:0;border:0;padding:0;background:none;text-align:left;opacity:.7;transition:opacity .15s}
.thumb:hover,.thumb[aria-current="true"]{opacity:1}
.thumb .im{position:relative;aspect-ratio:16/9;background:#14212f;border-radius:6px;overflow:hidden;outline:2px solid transparent;outline-offset:-2px}
.thumb[aria-current="true"] .im{outline-color:var(--orange)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb b{display:block;padding:3px 1px 0;font:700 10px var(--narrow);color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thumb .live{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--rust);margin-right:4px;vertical-align:1px}

/* tides */
.tidebox{border-top:2px solid var(--line)}
.tday{display:flex;gap:5px;overflow-x:auto;padding:8px 12px 6px}
.tday button{flex:none;border:2px solid var(--navy);background:var(--paper);color:var(--navy);border-radius:999px;padding:2px 9px;font:700 11px var(--body)}
.tday button[aria-pressed="true"]{background:var(--navy);color:var(--cream)}
.curve svg{display:block;width:100%;height:auto}
.tgrid{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--line)}
.tgrid table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.tgrid table+table{border-left:2px solid var(--line)}
.tgrid td{padding:5px 10px;border-bottom:1px solid var(--line);font:600 13px var(--body);white-space:nowrap}
.tgrid td:first-child{font-weight:800;color:var(--navy)}
.tgrid td:last-child{text-align:right;font-family:var(--narrow)}
@media (max-width:420px){.tgrid td{padding:6px 7px;font-size:13px}}
.btns{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:10px 12px 12px}
.bt{border:2px solid var(--navy);background:var(--teal);color:var(--cream);border-radius:6px;padding:8px 8px;font:800 12px var(--body);text-transform:uppercase;letter-spacing:.1em;box-shadow:3px 3px 0 var(--navy)}
.bt[aria-expanded="true"]{background:var(--navy)}
.bt:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--navy)}
.drawer{border-top:2px solid var(--line);padding:0 0 12px}
.drawer h3{margin:0;padding:10px 12px 4px;font:800 12px var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--navy)}
.drawer .tl{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 12px;padding:0 12px;font:600 13px var(--narrow)}
.drawer .tl span{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:4px 0}
.drawer .tl i{font-style:normal;font-weight:800;color:var(--navy);font-family:var(--body)}
#smap{height:260px;margin:12px;border:2px solid var(--navy);border-radius:6px}
.pin{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--orange);border:3px solid var(--navy)}

/* forecast tab */
.dstrip{display:flex;overflow-x:auto;background:var(--paper);border-bottom:2px solid var(--line);scroll-snap-type:x proximity}
.dcol{flex:0 0 68px;border:0;border-right:1px solid var(--line);background:none;padding:8px 0 0;display:flex;flex-direction:column;align-items:center;scroll-snap-align:start;color:var(--navy)}
.dcol[aria-current="true"]{background:var(--cream)}
.dcol b{font:800 12px var(--body);text-transform:uppercase;letter-spacing:.06em}
.dcol small{font:600 11px var(--narrow);color:var(--muted)}
.dcol svg{width:22px;height:22px;margin:4px 0}
.dcol .bars{display:flex;align-items:flex-end;gap:3px;height:56px;width:52px}
.dcol .bars i{flex:1;background:var(--teal2);border-radius:2px 2px 0 0;min-height:3px}
.dcol .rng{align-self:stretch;margin-top:0;background:var(--teal);color:var(--cream);font:800 12px/1 var(--narrow);padding:6px 0;text-align:center;white-space:nowrap}
.fhead{display:grid;grid-template-columns:86px 1fr 64px;background:var(--navy);color:var(--cream);font:800 11px var(--body);text-transform:uppercase;letter-spacing:.12em;padding:7px 0;position:sticky;top:calc(var(--stick) + var(--tabs));z-index:5}
.fhead span{text-align:center}
.fday h2{margin:0;padding:8px 12px 5px;font:800 12px var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--navy);background:var(--cream);border-bottom:2px solid var(--line);scroll-margin-top:calc(var(--stick) + var(--tabs) + 40px)}
.fday h2 small{font:600 13px var(--narrow);color:var(--muted);text-transform:none}
.frow{display:grid;grid-template-columns:18px 68px minmax(0,1fr) 38px 58px 64px;align-items:stretch;min-height:50px;border-bottom:1px solid var(--line);background:var(--paper)}
.frow .tm{writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;justify-content:center;font:700 11px var(--narrow);text-transform:uppercase;letter-spacing:.06em;color:var(--cream)}
.frow .sf{display:flex;align-items:center;justify-content:center;color:var(--cream);font:900 17px var(--body);white-space:nowrap}
.frow .sf small{font-size:12px;font-weight:700}
.sz0{background:#7fb0a6} .sz1{background:var(--teal2)} .sz2{background:var(--teal)} .sz3{background:#17666e} .sz4{background:var(--navy2)} .sz5{background:var(--navy)}
.tm.sz0{background:#6a9d93} .tm.sz1{background:#228b93} .tm.sz2{background:#167079} .tm.sz3{background:#11535a} .tm.sz4{background:#213449} .tm.sz5{background:#172434}
.frow .sw{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:4px 4px 4px 10px;min-width:0}
.frow .sw .l1{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.frow .sw .h{font:800 15px var(--body);color:var(--navy)} .frow .sw .h small{font-size:11px;font-weight:700;color:var(--muted)}
.frow .sw .p{font:800 14px var(--narrow);color:var(--navy)} .frow .sw .p small{font-size:11px;color:var(--muted)}
.frow .sw .stars{font-size:12px;letter-spacing:0}
.frow .sd{display:flex;flex-direction:column;align-items:center;justify-content:center;font:600 11px var(--narrow);color:var(--muted)}
.frow .sd svg{width:18px;height:18px;color:var(--navy)}
.frow .ws{display:flex;align-items:center;justify-content:flex-end;gap:2px;padding-right:8px;font:900 18px var(--body);color:var(--navy)}
.frow .ws span{display:flex;flex-direction:column;font:700 11px/1.15 var(--narrow);color:var(--muted)}
.frow .ws .g{color:var(--rust);font-size:12px}
.frow .wd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff;font:800 12px var(--narrow);letter-spacing:.04em}
.frow .wd svg{width:18px;height:18px}
.wd.off-shore{background:var(--olive)} .wd.cross{background:var(--orange)} .wd.on-shore{background:var(--rust)}
.frow.now-row{box-shadow:inset 0 0 0 2px var(--mustard)}
/* tap a day for hour by hour */
.fday h2{padding:0}
.dtog{all:unset;box-sizing:border-box;display:flex;align-items:baseline;justify-content:space-between;gap:8px;width:100%;padding:8px 12px 5px;cursor:pointer;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit}
.dtog:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.dtog .dhint{display:inline-flex;align-items:center;gap:5px;font:800 11px var(--body);letter-spacing:.06em;color:var(--teal)}
.dtog .dhint i{font-style:normal;font-size:10px;transition:transform .15s}
.dtog[aria-expanded="true"] .dhint i{transform:rotate(180deg)}
.dtog:hover .dhint{color:var(--navy)}
.fday:not(.open) .frow{cursor:pointer}
.fday:not(.open) .frow:hover{filter:brightness(.97)}
.frow.hr{min-height:44px}
.frow.hr .tm{font-size:10px;letter-spacing:.02em}
@media (max-width:380px){.frow{grid-template-columns:18px 64px minmax(0,1fr) 36px 56px 60px}.frow .sf{font-size:17px}.frow .ws{font-size:19px}.fhead{grid-template-columns:82px 1fr 60px}}
.legend{display:flex;gap:6px;flex-wrap:wrap;padding:12px;font:700 12px var(--narrow);color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}

.err{padding:16px;color:var(--rust);font-weight:700;margin:0}
.note{font-size:12px;color:var(--muted);padding:8px 12px;margin:0}
footer{background:var(--navy);color:var(--sand);font-size:12px;border-top:6px solid var(--mustard);padding:18px 16px}
footer a{color:var(--cream)}
.wembed{position:relative;height:min(62vh,460px);background:var(--line)}
.wembed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wcredit{margin:0;padding:6px 12px 0;font:600 12px var(--narrow);color:var(--muted)}
.wcredit a{color:var(--navy)}
@media (max-width:420px){.bt{letter-spacing:.04em;padding:8px 4px}}
/* wind model check */
.models{padding:8px 12px 10px;border-bottom:2px solid var(--line)}
.mhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:600 13px var(--narrow);color:var(--muted)}
.mtag{padding:2px 10px;border-radius:999px;color:#fff;font:800 12px var(--body);letter-spacing:.02em;border:0;cursor:pointer}
.mtag.ok{background:var(--olive)} .mtag.split{background:var(--orange)}
.mtag:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.mcaret{display:inline-block;margin-left:4px;font-size:10px;transition:transform .15s}
.mwrap{position:relative;display:inline-flex}
.mpop{display:none;position:absolute;z-index:20;top:calc(100% + 8px);left:0;width:240px;max-width:calc(100vw - 32px);background:var(--paper);border:2px solid var(--navy);border-radius:8px;padding:6px 12px 8px;box-shadow:4px 4px 0 var(--mustard),8px 8px 0 var(--orange)}
.mwrap:hover .mpop,.mwrap:has(:focus-visible) .mpop,.mwrap.open .mpop{display:block}
.mwrap:hover .mcaret,.mwrap:has(:focus-visible) .mcaret,.mwrap.open .mcaret{transform:rotate(180deg)}
.mpt{display:block;font:800 11px var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--teal);padding:2px 0 4px}
.mpop>span:not(.mpt){display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--line);padding:4px 0;font:600 13px var(--narrow);color:var(--ink)}
.mpop>span:last-child{border-bottom:0}
.mpop i{font-style:normal;flex:1;font-weight:800;font-family:var(--body);font-size:12px;color:var(--navy)}
.mpop b{font:800 14px var(--body)} .mpop small{font-size:10px;margin-left:1px}
.mpop svg{width:13px;height:13px}
.mpop .off-shore svg{color:var(--olive)} .mpop .cross svg{color:var(--orange)} .mpop .on-shore svg{color:var(--rust)}
.mx,.mxk{font-style:normal;font-weight:900;color:var(--orange);margin-left:3px}
.frow .wd .mx{color:#fff;background:var(--navy);border-radius:999px;padding:0 5px;margin:0;font-size:11px;line-height:15px}
/* drive time */
.drive{display:flex;align-items:center;gap:8px;margin:14px;padding:10px 14px;border:2px solid var(--line);border-radius:999px;background:var(--paper);color:var(--navy);width:max-content;max-width:calc(100% - 28px);box-sizing:border-box}
.drive[hidden]{display:none}
.drive svg{width:18px;height:18px;flex:none;color:var(--teal)}
.drive b{font:900 16px var(--body);color:var(--navy)}
.drive small{font:600 12px var(--narrow);color:var(--muted)}
.drive a{margin-left:6px;font:800 12px var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--teal);text-decoration:none}
.drive a:hover{text-decoration:underline}

.sad{width:1.35em;height:1.35em;display:block;margin:auto}
.dcol .rng .sad{width:14px;height:14px}
.frow .wd .deg{font:600 11px var(--narrow);letter-spacing:0;opacity:.9;line-height:1}