/* ===== PACIFIC BEACH: the regular-guy surf town =====
   One family (Archivo, using its width axis): condensed heavy for display,
   normal width for reading. Palette pulled from the Mission Bay hero footage:
   bay teal, kite lime, foam, kelp ink, and a sunset coral reserved for "go". */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&display=swap');

.pb{
  --pb-ink:#12303A; --pb-bay:#1E7F86; --pb-foam:#E6F1EE; --pb-lime:#D2E35A; --pb-coral:#F2704E; --pb-sand:#F2EEE4;
  --pb-line:rgba(18,48,58,.16); --pb-soft:#4A6168;
  font-family:'Archivo',system-ui,sans-serif; color:var(--pb-ink);
}
@media (prefers-color-scheme: dark){
  .pb{ --pb-ink:#E3EEEB; --pb-foam:#10262D; --pb-sand:#0C1E24; --pb-line:rgba(227,238,235,.16); --pb-soft:#A9BFC2; --pb-bay:#5BC0C4; }
}
.pb h1,.pb h2,.pb h3,.pb .pb-d{ font-family:'Archivo',system-ui,sans-serif; font-stretch:62%; font-weight:850; text-transform:uppercase; letter-spacing:-.005em; line-height:.92; color:inherit; }
.pb h2{ font-size:clamp(40px,6.4vw,84px); max-width:16ch; }
.pb h3{ font-size:clamp(24px,2.6vw,30px); line-height:1; }
.pb p{ max-width:68ch; }
.pb .pb-intro{ font-size:17px; line-height:1.6; color:var(--pb-soft); margin-top:14px; max-width:60ch; }
.pb .pb-src{ margin-top:22px; font-size:12.5px; color:var(--pb-soft); }
.pb .pb-src a{ text-decoration:underline; }
.pb section{ padding:clamp(64px,9vw,110px) 0; }
.pb .pb-foam{ background:var(--pb-foam); }
.pb .pb-sandbg{ background:var(--pb-sand); }
.pb a:focus-visible,.pb button:focus-visible,.pb [tabindex]:focus-visible{ outline:3px solid var(--pb-lime); outline-offset:2px; }

/* hero */
.pb-hero{ position:relative; min-height:96vh; display:flex; align-items:flex-end; overflow:hidden; background:#0E2A32; color:#fff; padding:0 !important; }
.pb-hero video,.pb-hero .poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pb-hero .poster{ background-size:cover; background-position:center; }
@media (prefers-reduced-motion:reduce){ .pb-hero video{ display:none; } }
.pb-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,30,36,.15) 0%,rgba(10,30,36,0) 35%,rgba(10,30,36,.62) 72%,rgba(8,24,30,.92) 100%); }
.pb-hero .wrap{ position:relative; z-index:2; width:100%; padding-top:120px; padding-bottom:56px; }
.pb-hero h1{ color:#fff; font-size:clamp(82px,19vw,300px); line-height:.8; letter-spacing:-.02em; font-stretch:62%; font-weight:900; }
.pb-hero h1 span{ display:block; }
.pb-hero h1 span + span{ color:var(--pb-lime); }
.pb-hero .lede{ color:#E1ECEA; max-width:56ch; font-size:18px; line-height:1.55; margin-top:22px; }
.pb-hero .acts{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.pb-btn{ display:inline-flex; align-items:center; gap:8px; font-family:'Archivo',sans-serif; font-weight:700; font-size:15px; padding:14px 22px; border-radius:6px; border:2px solid transparent; cursor:pointer; text-decoration:none; }
.pb-btn.lime{ background:var(--pb-lime); color:#12303A; }
.pb-btn.ghost{ border-color:rgba(255,255,255,.55); color:#fff; background:transparent; }
.pb-btn.ink{ background:var(--pb-ink); color:var(--pb-foam); }
.pb-hero-cap{ position:absolute; right:28px; bottom:20px; z-index:3; font-size:12px; color:rgba(255,255,255,.75); }
@media (max-width:760px){ .pb-hero-cap{ position:relative; right:auto; bottom:auto; padding:0 24px 18px; align-self:stretch; } .pb-hero{ flex-direction:column; justify-content:flex-end; } }

/* THE CALL: live surf verdict (the one loud element) */
.pb-call{ background:#12303A; color:#E6F1EE; padding:0 !important; border-top:6px solid var(--pb-lime); }
.pb-call .wrap{ padding-top:44px; padding-bottom:44px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:40px; align-items:center; }
.pb-call .k{ font-size:14px; font-weight:600; color:#9FC3C2; display:flex; align-items:center; gap:10px; }
.pb-call .k i{ width:10px; height:10px; border-radius:50%; background:var(--pb-lime); display:inline-block; animation:pbPulse 2.4s infinite; }
@keyframes pbPulse{ 0%{box-shadow:0 0 0 0 rgba(210,227,90,.6);} 70%{box-shadow:0 0 0 10px rgba(210,227,90,0);} 100%{box-shadow:0 0 0 0 rgba(210,227,90,0);} }
@media (prefers-reduced-motion:reduce){ .pb-call .k i{ animation:none; } }
.pb-verdict{ font-family:'Archivo',sans-serif; font-stretch:62%; font-weight:900; text-transform:uppercase; font-size:clamp(64px,11vw,150px); line-height:.82; margin-top:12px; color:#fff; }
.pb-verdict.go{ color:var(--pb-lime); }
.pb-verdict.maybe{ color:#FFFFFF; }
.pb-verdict.tacos{ color:var(--pb-coral); }
.pb-why{ margin-top:16px; font-size:17px; line-height:1.5; color:#C6DAD8; max-width:46ch; }
.pb-reads{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid rgba(230,241,238,.18); }
.pb-read{ padding:16px 4px 16px 0; border-bottom:1px solid rgba(230,241,238,.18); }
.pb-read:nth-child(odd){ padding-right:18px; border-right:1px solid rgba(230,241,238,.18); }
.pb-read:nth-child(even){ padding-left:18px; }
.pb-read .l{ font-size:13px; color:#9FC3C2; }
.pb-read .v{ font-stretch:75%; font-weight:800; font-size:30px; line-height:1.1; margin-top:4px; color:#fff; font-variant-numeric:tabular-nums; }
.pb-read .s{ font-size:13px; color:#B9CFCD; margin-top:2px; }
.pb-call .fine{ grid-column:1/-1; font-size:12px; color:#86A6A6; margin-top:-10px; }
@media (max-width:900px){ .pb-call .wrap{ grid-template-columns:1fr; gap:26px; } }

/* PB vs La Jolla */
.pb-vs{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin-top:40px; border-top:2px solid var(--pb-ink); }
.pb-vs-row{ display:contents; }
.pb-vs-row > div{ padding:16px 18px 16px 0; border-bottom:1px solid var(--pb-line); font-size:16px; line-height:1.45; }
.pb-vs-row > div:last-child{ padding-left:18px; border-left:1px solid var(--pb-line); color:var(--pb-soft); }
.pb-vs-head > div{ font-stretch:62%; font-weight:850; text-transform:uppercase; font-size:28px; padding-top:18px !important; }
.pb-vs-head > div:last-child{ color:var(--pb-soft); }
.pb-vs-row b{ display:block; font-size:12.5px; font-weight:600; color:var(--pb-bay); margin-bottom:3px; }
@media (max-width:640px){ .pb-vs-row > div{ font-size:14.5px; } .pb-vs-head > div{ font-size:22px; } }

/* surf lineup: N -> S ribbon */
.pb-lineup{ margin-top:40px; }
.pb-ribbon{ position:relative; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:0; border-top:2px solid var(--pb-ink); border-bottom:2px solid var(--pb-ink); }
.pb-break{ flex:1 0 190px; min-width:190px; scroll-snap-align:start; padding:22px 20px 24px; border-left:1px solid var(--pb-line); text-align:left; background:none; color:inherit; font:inherit; cursor:pointer; display:flex; flex-direction:column; gap:8px; }
.pb-break:first-child{ border-left:0; }
.pb-break[aria-pressed="true"]{ background:var(--pb-ink); color:var(--pb-foam); }
.pb-break .where{ font-size:12.5px; color:var(--pb-bay); font-weight:600; }
.pb-break[aria-pressed="true"] .where{ color:var(--pb-lime); }
.pb-break h3{ font-size:clamp(24px,2.1vw,28px); }
.pb-break .type{ font-size:14px; color:var(--pb-soft); }
.pb-break[aria-pressed="true"] .type{ color:#B9CFCD; }
.pb-meter{ display:flex; flex-wrap:wrap; gap:4px; margin-top:auto; padding-top:10px; align-items:center; font-size:12px; }
.pb-meter span{ flex-basis:100%; margin:6px 0 0 !important; }
.pb-meter i{ width:22px; height:6px; border-radius:3px; background:var(--pb-line); display:inline-block; }
.pb-meter i.on{ background:var(--pb-coral); }
.pb-meter span{ margin-left:8px; }
.pb-axis{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--pb-soft); margin-top:10px; }
.pb-breakinfo{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:36px; margin-top:34px; }
.pb-breakinfo p{ font-size:17px; line-height:1.6; }
.pb-facts{ list-style:none; margin:0; padding:0; border-top:1px solid var(--pb-line); }
.pb-facts li{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--pb-line); font-size:15px; }
.pb-facts li b{ font-weight:600; color:var(--pb-soft); }
@media (max-width:820px){ .pb-breakinfo{ grid-template-columns:1fr; } }

/* surf culture */
.pb-culture{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 40px; margin-top:40px; }
.pb-culture h3{ border-bottom:2px solid var(--pb-ink); padding-bottom:10px; }
.pb-list{ list-style:none; margin:0; padding:0; }
.pb-list li{ padding:13px 0; border-bottom:1px solid var(--pb-line); }
.pb-list li b{ display:block; font-weight:700; font-size:16px; }
.pb-list li span{ display:block; font-size:14px; color:var(--pb-soft); margin-top:2px; line-height:1.45; }
@media (max-width:900px){ .pb-culture{ grid-template-columns:1fr; gap:34px; } }
.pb-rules{ margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; border-top:2px solid var(--pb-ink); }
.pb-rules li{ list-style:none; padding:16px 0; border-bottom:1px solid var(--pb-line); font-size:16px; line-height:1.5; color:var(--pb-soft); }
.pb-rules li b{ display:block; font-weight:700; color:var(--pb-ink); font-size:17px; margin-bottom:2px; }
.pb-etiq{ margin-top:56px; }
@media (max-width:760px){ .pb-rules{ grid-template-columns:1fr; } }

/* wetsuit by month */
.pb-suit{ margin-top:56px; }
.pb-suit h3{ margin-bottom:14px; }
.pb-months{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:4px; align-items:end; }
.pb-mo{ display:flex; flex-direction:column; justify-content:flex-end; align-items:center; }
.pb-mo .bar{ width:100%; border-radius:4px 4px 0 0; background:var(--pb-bay); position:relative; }
.pb-mo.now .bar{ background:var(--pb-coral); }
.pb-mo .t{ font-stretch:75%; font-weight:800; font-size:15px; margin-bottom:4px; font-variant-numeric:tabular-nums; }
.pb-mo .m{ font-size:12px; color:var(--pb-soft); margin-top:6px; }
.pb-suitkey{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:14px; font-size:14px; color:var(--pb-soft); }
.pb-suitkey b{ color:var(--pb-ink); font-weight:700; }

/* areas + quiz */
.pb-find{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:40px; margin-top:40px; align-items:start; }
.pb-quiz{ background:var(--pb-ink); color:var(--pb-foam); border-radius:10px; padding:28px; position:sticky; top:88px; }
.pb-quiz h3{ font-size:34px; color:#fff; }
.pb-qmeta{ display:flex; justify-content:space-between; font-size:13px; color:#9FC3C2; margin-top:18px; }
.pb-qtrack{ height:4px; background:rgba(230,241,238,.18); border-radius:2px; margin-top:8px; }
.pb-qtrack div{ height:100%; width:0; background:var(--pb-lime); border-radius:2px; transition:width .3s; }
.pb-q p{ font-size:18px; font-weight:600; margin:20px 0 12px; color:#fff; }
.pb-q button{ display:block; width:100%; text-align:left; font:500 15px 'Archivo',sans-serif; color:#E6F1EE; background:rgba(230,241,238,.06); border:1px solid rgba(230,241,238,.2); border-radius:6px; padding:12px 14px; margin-top:8px; cursor:pointer; }
.pb-q button:hover{ border-color:var(--pb-lime); }
#pb-q-result h4{ font-family:'Archivo',sans-serif; font-stretch:62%; font-weight:900; text-transform:uppercase; font-size:48px; line-height:.9; color:var(--pb-lime); margin:8px 0 10px; }
#pb-q-result p{ color:#C6DAD8; }
#pb-q-result .acts{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
#pb-q-again{ font:600 14px 'Archivo',sans-serif; background:none; border:1px solid rgba(230,241,238,.35); color:#E6F1EE; border-radius:6px; padding:12px 16px; cursor:pointer; }
.pb-areas{ border-top:2px solid var(--pb-ink); }
.pb-area{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:6px 26px; padding:22px 0; border-bottom:1px solid var(--pb-line); transition:background .3s; }
.pb-area.is-match{ background:linear-gradient(90deg,rgba(210,227,90,.32),rgba(210,227,90,0)); }
.pb-area h3{ font-size:30px; }
.pb-area .k{ font-size:13px; color:var(--pb-bay); font-weight:600; margin-top:6px; }
.pb-area p{ font-size:15.5px; line-height:1.55; margin:0; }
.pb-area .homes{ font-size:13.5px; color:var(--pb-soft); margin-top:8px; }
@media (max-width:900px){ .pb-find{ grid-template-columns:1fr; } .pb-quiz{ position:static; } .pb-area{ grid-template-columns:1fr; } }

/* the core: Garnet, the pier, the boardwalk */
.pb-core{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:40px; border-top:2px solid var(--pb-ink); }
.pb-core > div{ padding:22px 22px 24px 0; border-bottom:1px solid var(--pb-line); }
.pb-core > div + div{ padding-left:22px; border-left:1px solid var(--pb-line); }
.pb-core .y{ font-stretch:62%; font-weight:900; font-size:44px; line-height:1; color:var(--pb-bay); }
.pb-core h3{ margin-top:8px; }
.pb-core p{ font-size:15.5px; line-height:1.55; margin-top:8px; }
@media (max-width:900px){ .pb-core{ grid-template-columns:1fr; } .pb-core > div + div{ padding-left:0; border-left:0; } }

/* eat & drink: chalkboard list */
.pb-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.pb-chips button{ font:600 14px 'Archivo',sans-serif; padding:9px 15px; border-radius:999px; border:1.5px solid var(--pb-ink); background:transparent; color:var(--pb-ink); cursor:pointer; }
.pb-chips button[aria-pressed="true"]{ background:var(--pb-ink); color:var(--pb-foam); }
.pb-menu{ margin-top:22px; columns:2; column-gap:48px; }
.pb-dish{ break-inside:avoid; padding:14px 0; border-bottom:1px dashed var(--pb-line); display:grid; grid-template-columns:1fr auto; gap:2px 14px; }
.pb-dish b{ font-weight:700; font-size:17px; }
.pb-dish .tag{ font-size:12px; font-weight:600; color:var(--pb-bay); align-self:center; text-align:right; }
.pb-dish .tag .new{ display:inline-block; background:var(--pb-lime); color:#12303A; border-radius:3px; padding:1px 6px; margin-left:6px; }
.pb-dish span.d{ grid-column:1/-1; font-size:14.5px; color:var(--pb-soft); line-height:1.45; }
.pb-dish span.w{ grid-column:1/-1; font-size:12.5px; color:var(--pb-soft); opacity:.85; }
@media (max-width:760px){ .pb-menu{ columns:1; } }

/* calendar */
.pb-cal{ margin-top:36px; border-top:2px solid var(--pb-ink); }
.pb-ev{ display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:20px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--pb-line); color:inherit; text-decoration:none; }
.pb-ev .dt{ font-stretch:62%; font-weight:900; text-transform:uppercase; font-size:30px; line-height:1; color:var(--pb-bay); }
.pb-ev h3{ font-size:24px; }
.pb-ev p{ font-size:14.5px; color:var(--pb-soft); margin-top:4px; }
.pb-ev .go{ font-size:13px; font-weight:600; white-space:nowrap; }
.pb-ev .badge{ display:inline-block; font:700 11.5px 'Archivo',sans-serif; background:var(--pb-lime); color:#12303A; border-radius:3px; padding:2px 7px; margin-left:8px; vertical-align:middle; }
.pb-ev .exp{ display:inline-block; font:600 11.5px 'Archivo',sans-serif; border:1px solid var(--pb-line); border-radius:3px; padding:1px 6px; margin-left:8px; vertical-align:middle; color:var(--pb-soft); }
.pb-weekly{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px; margin-top:28px; }
.pb-weekly > div{ padding:16px 0; border-top:1px solid var(--pb-line); }
.pb-weekly h3{ font-size:22px; }
.pb-weekly p{ font-size:14.5px; color:var(--pb-soft); margin-top:4px; }
.pb-weekly .next{ font-size:13.5px; font-weight:600; margin-top:8px; color:var(--pb-bay); }
@media (max-width:760px){ .pb-ev{ grid-template-columns:76px minmax(0,1fr); } .pb-ev .go{ display:none; } .pb-weekly{ grid-template-columns:1fr; } }

/* outdoors / getting around / schools */
.pb-two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px; margin-top:36px; }
.pb-two > div > h3{ border-bottom:2px solid var(--pb-ink); padding-bottom:10px; }
@media (max-width:820px){ .pb-two{ grid-template-columns:1fr; gap:34px; } }
.pb-ladder{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:36px; border-top:2px solid var(--pb-ink); }
.pb-rung{ padding:20px 20px 22px 0; border-bottom:1px solid var(--pb-line); }
.pb-rung + .pb-rung{ padding-left:20px; border-left:1px solid var(--pb-line); }
.pb-rung .g{ font-stretch:62%; font-weight:900; font-size:40px; line-height:1; color:var(--pb-bay); }
.pb-rung ul{ list-style:none; padding:0; margin:12px 0 0; }
.pb-rung li{ padding:5px 0; font-weight:600; }
.pb-rung li span{ display:block; font-weight:400; font-size:13.5px; color:var(--pb-soft); }
@media (max-width:820px){ .pb-ladder{ grid-template-columns:1fr; } .pb-rung + .pb-rung{ padding-left:0; border-left:0; } }

/* before you buy */
.pb-buy{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px; margin-top:36px; border-top:2px solid var(--pb-ink); }
.pb-buy > div{ padding:20px 0; border-bottom:1px solid var(--pb-line); }
.pb-buy p{ font-size:15.5px; line-height:1.55; margin-top:8px; color:var(--pb-soft); }
@media (max-width:820px){ .pb-buy{ grid-template-columns:1fr; } }

/* a surfer's day: a real sequence */
.pb-day{ margin-top:36px; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-top:2px solid var(--pb-ink); }
.pb-day > div{ padding:18px 16px 20px 0; }
.pb-day > div + div{ padding-left:16px; border-left:1px solid var(--pb-line); }
.pb-day .t{ font-stretch:62%; font-weight:900; font-size:36px; line-height:1; color:var(--pb-coral); }
.pb-day h3{ font-size:21px; margin-top:8px; }
.pb-day p{ font-size:14px; color:var(--pb-soft); margin-top:6px; line-height:1.45; }
@media (max-width:980px){ .pb-day{ grid-template-columns:repeat(2,minmax(0,1fr)); } .pb-day > div{ border-bottom:1px solid var(--pb-line); } .pb-day > div:nth-child(odd){ padding-left:0; border-left:0; } }

/* history timeline */
.pb-time{ margin-top:36px; border-left:2px solid var(--pb-ink); padding-left:0; list-style:none; }
.pb-time li{ position:relative; padding:0 0 22px 28px; }
.pb-time li::before{ content:""; position:absolute; left:-7px; top:8px; width:12px; height:12px; border-radius:50%; background:var(--pb-lime); border:2px solid var(--pb-ink); }
.pb-time .y{ font-stretch:62%; font-weight:900; font-size:30px; line-height:1; }
.pb-time p{ font-size:15.5px; color:var(--pb-soft); margin-top:4px; line-height:1.5; }

/* contact */
.pb-contact{ background:#12303A; color:#E6F1EE; }
.pb-contact .wrap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:40px; align-items:start; }
.pb-contact h2{ color:#fff; }
.pb-contact p{ color:#C6DAD8; }
.pb-form{ display:grid; gap:12px; }
.pb-form input,.pb-form textarea{ font:15px 'Archivo',sans-serif; padding:14px 16px; border-radius:6px; border:1px solid rgba(230,241,238,.25); background:rgba(230,241,238,.06); color:#fff; width:100%; }
.pb-form input::placeholder,.pb-form textarea::placeholder{ color:rgba(230,241,238,.55); }
.pb-form button{ justify-self:start; }
.pb-jump{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14px; font-weight:600; margin-top:28px; }
.pb-jump a{ color:var(--pb-bay); text-decoration:underline; text-underline-offset:3px; }