/* ===== THE PENINSULA: Point Loma & Ocean Beach hub ===== */
:root{ --pen-sun:#E8743B; --pen-sun-2:#F2A65A; --pen-sea:#1E5B78; --pen-sea-soft:rgba(30,91,120,.1); }
@media (prefers-color-scheme: dark){ :root{ --pen-sea:#6FB3D2; --pen-sea-soft:rgba(111,179,210,.12); } }

/* hero */
.pen-hero{ min-height:88vh; }
.pen-hero .hero-bg{ background:#120a06; overflow:hidden; }
.pen-hero .pen-hero-img{ position:absolute; inset:-4%; background-size:cover; background-position:center 40%; animation:penKB 26s ease-in-out infinite alternate; }
@keyframes penKB{ from{ transform:scale(1) translate(0,0); } to{ transform:scale(1.08) translate(-1.5%,-1%); } }
.pen-hero .hero-bg::after{ background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(20,8,2,.35) 45%, rgba(0,0,0,.86) 100%); }
.pen-hero h1{ font-size:clamp(46px,8vw,104px); line-height:.95; letter-spacing:-1px; }
.pen-hero h1 em{ font-style:italic; color:var(--pen-sun-2); }
.pen-hero-cap{ position:absolute; right:28px; bottom:22px; z-index:3; font:11px 'IBM Plex Mono',monospace; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.75); }
.pen-hero-cap a{ border-bottom:1px solid rgba(255,255,255,.4); }
@media (prefers-reduced-motion:reduce){ .pen-hero .pen-hero-img{ animation:none; } }
@media (max-width:760px){ .pen-hero-cap{ position:static; padding:0 28px 18px; } }

/* live strip */
.pen-live{ padding:0; background:#0A0A0A; color:#F5F5F3; border-top:3px solid var(--pen-sun); }
.pen-live .wrap{ padding-top:26px; padding-bottom:26px; }
.pen-live-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.pen-live-head .eyebrow{ color:#FFFFFF; margin:0; }
.pen-dot{ width:9px; height:9px; border-radius:50%; background:#3FD07A; box-shadow:0 0 0 0 rgba(63,208,122,.6); animation:penPulse 2s infinite; }
@keyframes penPulse{ 0%{ box-shadow:0 0 0 0 rgba(63,208,122,.55); } 70%{ box-shadow:0 0 0 10px rgba(63,208,122,0); } 100%{ box-shadow:0 0 0 0 rgba(63,208,122,0); } }
.pen-live-note{ margin-left:auto; font:11px 'IBM Plex Mono',monospace; color:#8F8F8B; }
.pen-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(245,245,243,.12); border:1px solid rgba(245,245,243,.12); border-radius:14px; overflow:hidden; }
.pen-tile{ background:#0F0F0F; padding:18px 18px 16px; min-height:122px; position:relative; }
.pen-tile.feature{ background:linear-gradient(135deg, #3a1606, #0F0F0F 70%); }
.pen-tile .k{ font:10.5px 'IBM Plex Mono',monospace; letter-spacing:1.4px; text-transform:uppercase; color:#A8A8A4; }
.pen-tile .v{ font-family:'Fraunces',Georgia,serif; font-size:30px; font-weight:560; line-height:1.1; margin-top:8px; color:#FFFFFF; opacity:.35; transition:opacity .4s; }
.pen-tile.is-live .v{ opacity:1; }
.pen-tile.feature .v{ color:var(--pen-sun-2); }
.pen-tile .s{ font-size:13px; color:#B8B8B4; margin-top:6px; }
.pen-tile a{ color:inherit; }
@media (max-width:900px){ .pen-tiles{ grid-template-columns:repeat(2,1fr); } }

/* listing feature */
.pen-listing{ display:grid; grid-template-columns:1.25fr 1fr; gap:0; border-radius:18px; overflow:hidden; border:1px solid var(--line-soft); background:var(--bg-card); box-shadow:var(--shadow); }
.pen-listing-media{ position:relative; min-height:420px; background-size:cover; background-position:center; }
.pen-listing-media .pill{ position:absolute; top:18px; left:18px; font:600 11px 'IBM Plex Mono',monospace; letter-spacing:1.2px; text-transform:uppercase; background:var(--pen-sun); color:#fff; padding:6px 11px; border-radius:4px; }
.pen-listing-body{ padding:38px 36px; display:flex; flex-direction:column; }
.pen-listing-body .price{ font-family:'Fraunces',Georgia,serif; font-size:40px; font-weight:560; margin:6px 0 4px; }
.pen-listing-body .facts{ display:flex; gap:22px; flex-wrap:wrap; margin:14px 0 18px; font:13px 'IBM Plex Mono',monospace; color:var(--text-soft); }
.pen-listing-body .facts b{ display:block; font:600 22px 'Archivo',sans-serif; color:var(--text); }
.pen-listing-body ul{ margin:0 0 24px; padding-left:18px; color:var(--text-soft); }
.pen-listing-body li{ margin:4px 0; }
.pen-listing-body .btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:auto; }
@media (max-width:860px){ .pen-listing{ grid-template-columns:1fr; } .pen-listing-media{ min-height:280px; } .pen-listing-body{ padding:28px 24px; } }

/* numbers */
.pen-nums{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.pen-num b{ display:block; font-family:'Fraunces',Georgia,serif; font-size:clamp(40px,5vw,60px); font-weight:560; line-height:1; background:linear-gradient(90deg,var(--pen-sun),var(--pen-sun-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pen-num span{ display:block; margin-top:10px; font-size:14.5px; color:var(--text-soft); }
@media (max-width:860px){ .pen-nums{ grid-template-columns:repeat(2,1fr); } }

/* quiz + areas */
.pen-quizwrap{ display:grid; grid-template-columns:1fr 1.35fr; gap:34px; align-items:start; }
.pen-quiz{ position:sticky; top:90px; background:#0A0A0A; color:#F5F5F3; border-radius:18px; padding:30px 28px; overflow:hidden; }
.pen-quiz::before{ content:""; position:absolute; right:-80px; top:-80px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, var(--pen-sun-2), var(--pen-sun) 45%, transparent 70%); opacity:.55; }
.pen-quiz > *{ position:relative; }
.pen-quiz .eyebrow{ color:#FFFFFF; }
.pen-quiz h3{ color:#FFFFFF; font-size:24px; margin:10px 0 18px; }
.pen-q-meta{ display:flex; justify-content:space-between; font:11px 'IBM Plex Mono',monospace; color:#A8A8A4; margin-bottom:8px; }
.pen-q-track{ height:3px; background:rgba(255,255,255,.15); border-radius:3px; margin-bottom:20px; }
#pen-q-bar{ height:100%; width:0; background:var(--pen-sun); border-radius:3px; transition:width .3s; }
.pen-q p{ font-size:17px; color:#FFFFFF; margin:0 0 14px; }
.pen-q button{ display:block; width:100%; text-align:left; margin:8px 0; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.04); color:#F5F5F3; font:15px 'Archivo',sans-serif; cursor:pointer; transition:background .2s, border-color .2s, transform .15s; }
.pen-q button:hover{ background:rgba(232,116,59,.18); border-color:var(--pen-sun); transform:translateX(3px); }
#pen-q-result h4{ font-family:'Fraunces',Georgia,serif; font-size:34px; color:var(--pen-sun-2); margin:6px 0 10px; font-weight:560; }
#pen-q-result p{ color:#C4C4C0; }
#pen-q-result .btns{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
#pen-q-result button{ background:transparent; border:1px solid rgba(255,255,255,.35); color:#fff; border-radius:999px; padding:9px 16px; cursor:pointer; font:14px 'Archivo',sans-serif; }
.pen-areas{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.pen-area{ border:1px solid var(--line-soft); border-radius:14px; padding:22px 22px 20px; background:var(--bg-card); transition:border-color .3s, box-shadow .3s, transform .3s; scroll-margin-top:100px; }
.pen-area .zip{ font:10.5px 'IBM Plex Mono',monospace; letter-spacing:1.3px; text-transform:uppercase; color:var(--pen-sea); }
.pen-area h3{ font-size:20px; margin:6px 0 8px; }
.pen-area p{ font-size:14.5px; color:var(--text-soft); margin:0; }
.pen-area .vibe{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.pen-area .vibe span{ font:11px 'IBM Plex Mono',monospace; padding:3px 8px; border-radius:999px; background:var(--pen-sea-soft); color:var(--pen-sea); }
.pen-area.is-match{ border-color:var(--pen-sun); box-shadow:0 0 0 3px rgba(232,116,59,.25); transform:translateY(-3px); }
@media (max-width:900px){ .pen-quizwrap{ grid-template-columns:1fr; } .pen-quiz{ position:relative; top:0; } }
@media (max-width:560px){ .pen-areas{ grid-template-columns:1fr; } }

/* chips (shared) */
.pen-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
.pen-chips button{ font:500 13px 'Archivo',sans-serif; padding:8px 15px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer; }
.pen-chips button.is-on{ background:var(--text); color:var(--bg); border-color:var(--text); }

/* schools */
.pen-schools{ display:grid; grid-template-columns:1.4fr 1fr; gap:28px; }
.pen-ladder{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:22px; }
.pen-ladder div{ border-radius:12px; padding:16px 14px; background:var(--pen-sea-soft); }
.pen-ladder b{ display:block; font:600 11px 'IBM Plex Mono',monospace; letter-spacing:1.2px; color:var(--pen-sea); }
.pen-ladder span{ display:block; font-family:'Fraunces',Georgia,serif; font-size:19px; margin-top:6px; }
.pen-ladder small{ display:block; color:var(--text-soft); font-size:12.5px; margin-top:4px; }
.pen-table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.pen-table th{ text-align:left; font:10.5px 'IBM Plex Mono',monospace; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-faint); padding:8px 10px; border-bottom:1px solid var(--line); }
.pen-table td{ padding:10px; border-bottom:1px solid var(--line-soft); color:var(--text-soft); }
.pen-table td:first-child{ color:var(--text); font-weight:600; }
.pen-alt{ border:1px solid var(--line-soft); border-radius:14px; padding:22px; background:var(--bg-card); }
.pen-alt h3{ font-size:18px; margin:0 0 12px; }
.pen-alt div{ padding:12px 0; border-top:1px solid var(--line-soft); }
.pen-alt div:first-of-type{ border-top:0; padding-top:0; }
.pen-alt b{ display:block; }
.pen-alt span{ font-size:13.5px; color:var(--text-soft); }
@media (max-width:900px){ .pen-schools{ grid-template-columns:1fr; } .pen-ladder{ grid-template-columns:repeat(2,1fr); } }

/* liberty station */
.pen-ls{ display:grid; grid-template-columns:1fr 1.5fr; gap:40px; align-items:start; }
.pen-ls-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.pen-ls-grid div{ border:1px solid rgba(245,245,243,.14); border-radius:12px; padding:18px; background:rgba(245,245,243,.04); }
.pen-ls-grid h3{ font-size:17px; margin:0 0 6px; }
.pen-ls-grid p{ font-size:14px; margin:0; }
.pen-ls-big{ font-family:"Fraunces",Georgia,serif; font-size:clamp(40px,5vw,68px); line-height:1; color:var(--pen-sun-2); }
@media (max-width:900px){ .pen-ls{ grid-template-columns:1fr; } }
@media (max-width:560px){ .pen-ls-grid{ grid-template-columns:1fr; } }

/* events */
.pen-evwrap{ display:grid; grid-template-columns:1fr 2fr; gap:30px; align-items:start; }
.pen-rec{ display:grid; gap:14px; }
.pen-rec > div{ border-radius:14px; padding:20px; background:linear-gradient(135deg, rgba(232,116,59,.14), rgba(242,166,90,.06)); border:1px solid rgba(232,116,59,.3); }
.pen-rec .k{ font:10.5px 'IBM Plex Mono',monospace; letter-spacing:1.3px; text-transform:uppercase; color:var(--pen-sun); }
.pen-rec h3{ font-size:19px; margin:6px 0 4px; }
.pen-rec p{ font-size:14px; color:var(--text-soft); margin:0; }
.pen-rec .next{ margin-top:10px; font:600 13px 'IBM Plex Mono',monospace; }
.pen-ev{ display:grid; grid-template-columns:64px 1fr; gap:16px; padding:14px 4px; border-bottom:1px solid var(--line-soft); transition:background .2s; }
.pen-ev:hover{ background:var(--bg-raised); }
.pen-ev-date{ text-align:center; border:1px solid var(--line); border-radius:10px; padding:6px 0; height:max-content; }
.pen-ev-date b{ display:block; font-family:'Fraunces',Georgia,serif; font-size:26px; line-height:1; }
.pen-ev-date span{ font:10.5px 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:1px; color:var(--text-faint); }
.pen-ev-tag{ font:10.5px 'IBM Plex Mono',monospace; letter-spacing:1.2px; text-transform:uppercase; color:var(--pen-sea); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pen-ev-soon{ background:var(--pen-sun); color:#fff; padding:2px 7px; border-radius:3px; }
.pen-ev-exp{ border:1px dashed var(--text-faint); color:var(--text-faint); padding:1px 6px; border-radius:3px; }
.pen-ev h3{ font-size:17px; margin:4px 0 2px; }
.pen-ev p{ font-size:13.5px; color:var(--text-soft); margin:0; }
@media (max-width:900px){ .pen-evwrap{ grid-template-columns:1fr; } }

/* things to do */
.pen-todos{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pen-todo{ border:1px solid var(--line-soft); border-radius:14px; padding:20px; background:var(--bg-card); transition:transform .2s, border-color .2s; }
.pen-todo:hover{ transform:translateY(-3px); border-color:var(--pen-sun); }
.pen-todo .k{ font:10.5px 'IBM Plex Mono',monospace; letter-spacing:1.2px; text-transform:uppercase; color:var(--pen-sun); }
.pen-todo h3{ font-size:17px; margin:6px 0 6px; }
.pen-todo p{ font-size:14px; color:var(--text-soft); margin:0; }
.pen-todo .where{ margin-top:10px; font:11px 'IBM Plex Mono',monospace; color:var(--text-faint); }
.pen-todo.photo{ padding:0; overflow:hidden; grid-row:span 2; display:flex; flex-direction:column; }
.pen-todo.photo img{ width:100%; height:240px; object-fit:cover; }
.pen-todo.photo .in{ padding:20px; }
@media (max-width:900px){ .pen-todos{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pen-todos{ grid-template-columns:1fr; } .pen-todo.photo{ grid-row:auto; } }

/* airport + QHP */
.pen-air{ display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.pen-air-facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:20px; }
.pen-air-facts div{ border:1px solid var(--line-soft); border-radius:12px; padding:16px; background:var(--bg-card); }
.pen-air-facts b{ display:block; font-family:'Fraunces',Georgia,serif; font-size:26px; font-weight:560; }
.pen-air-facts span{ font-size:13px; color:var(--text-soft); }
.pen-qhp{ border-radius:18px; padding:30px 28px; background:var(--pen-sea); color:#fff; }
@media (prefers-color-scheme: dark){ .pen-qhp{ background:#12394b; } }
.pen-qhp .eyebrow{ color:#fff; }
.pen-qhp h3{ color:#fff; font-size:26px; margin:10px 0 10px; }
.pen-qhp p, .pen-qhp li{ color:rgba(255,255,255,.86); font-size:14.5px; }
.pen-qhp ol{ padding-left:20px; margin:14px 0; columns:2; column-gap:24px; }
.pen-qhp li{ margin:3px 0; break-inside:avoid; }
.pen-qhp .links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.pen-qhp .links a{ font:13px 'Archivo',sans-serif; border:1px solid rgba(255,255,255,.45); border-radius:999px; padding:7px 13px; }
.pen-qhp .links a:hover{ background:rgba(255,255,255,.12); }
.pen-prem-note{ margin-top:22px; border-left:3px solid var(--pen-sun); padding:6px 0 6px 16px; font-size:15px; color:var(--text-soft); }
.pen-prem-note b{ color:var(--text); }
@media (max-width:900px){ .pen-air{ grid-template-columns:1fr; } .pen-qhp ol{ columns:1; } }

/* watch */
.pen-watch{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pen-watch a{ display:block; border:1px solid var(--line-soft); border-radius:14px; padding:22px; background:var(--bg-card); }
.pen-watch .st{ display:inline-block; font:600 10.5px 'IBM Plex Mono',monospace; letter-spacing:1.2px; text-transform:uppercase; padding:3px 8px; border-radius:3px; background:var(--pen-sea-soft); color:var(--pen-sea); }
.pen-watch h3{ font-size:18px; margin:10px 0 6px; }
.pen-watch p{ font-size:14px; color:var(--text-soft); margin:0; }
@media (max-width:900px){ .pen-watch{ grid-template-columns:1fr; } }

.pen-empty{ color:var(--text-faint); padding:20px 0; }
.pen-src{ margin-top:18px; font-size:12px; color:var(--text-faint); }
.pen-src a{ text-decoration:underline; }