@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
  --violet: #6d28d9;
  --deep: #42147f;
  --ink: #171720;
  --muted: #605a6a;
  --paper: #fffcf8;
  --line: #e9e0ec;
  --gold: #e9ba6e;
  font: 16px/1.6 'DM Sans', system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, select, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; }
[hidden] { display: none !important; }
.wrap { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.skip { position: fixed; top: 8px; left: 8px; z-index: 10; background: white; padding: 10px 16px; transform: translateY(-150%); }
.skip:focus { transform: none; }
.topbar { border-bottom: 1px solid var(--line); background: var(--paper); }
.header { display: flex; align-items: center; justify-content: space-between; min-height: 80px; gap: 20px; }
.brand img { display: block; width: clamp(158px, 21vw, 214px); height: auto; }
.topnav, .utility { display: flex; align-items: center; gap: 22px; font-size: .91rem; font-weight: 700; }
.topnav a:hover, .utility a:hover, .footer-links a:hover { color: var(--violet); text-decoration: underline; }
.language { color: var(--deep); border: 1px solid var(--line); padding: 7px 12px; border-radius: 50px; }
h1,h2,h3 { font-family: Manrope, system-ui, sans-serif; line-height: 1.1; letter-spacing: -.055em; margin: 0; }
h1 { font-size: clamp(3.35rem, 6.9vw, 6.55rem); font-weight: 800; }
h2 { font-size: clamp(2.1rem, 4vw, 3.65rem); font-weight: 800; }
h3 { font-size: 1.5rem; letter-spacing: -.04em; }
.eyebrow { color: var(--deep); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .145em; }
.eyebrow .dot { display: inline-block; width: .5rem; height: .5rem; margin-right: .55rem; border-radius: 50%; background: #bd7a24; }
.hero { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(28px,5vw,70px); align-items: center; padding-block: 64px 70px; }
.hero h1 { margin: 17px 0 20px; }
.hero h1 span { color: var(--violet); }
.hero p { color: var(--muted); font-size: clamp(1rem,1.55vw,1.2rem); max-width: 34rem; margin: 0 0 25px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; border-radius: 60px; padding: 10px 19px; border: 1px solid var(--line); background: white; font-weight: 700; font-size: .89rem; }
.button:hover { border-color: var(--violet); }
.primary { background: var(--violet); border-color: var(--violet); color: white; }
.primary:hover { background: var(--deep); }
.hero-art { position: relative; margin: 0; border-radius: 26px; overflow: hidden; background: #3c2059; box-shadow: 0 22px 56px #381c5425; }
.hero-art img { display: block; width: 100%; aspect-ratio: 820/660; object-fit: cover; }
.hero-art figcaption { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; gap: 10px; padding: 15px 19px; color: #fff0de; background: #1c102bce; font-size: .72rem; font-weight: 700; letter-spacing: .07em; }
.section { padding-block: 54px; border-top: 1px solid var(--line); }
.section-title { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.section-title h2 { margin-top: 6px; }
.section-title p { color: var(--muted); margin: 0; }
.edition { padding: 5px 12px; border-radius: 30px; border: 1px solid var(--line); color: var(--deep); font-size: .8rem; font-weight: 700; }
.picks { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; }
.card { --tile: #eee5ff; --accent: #5a259f; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 19px; overflow: hidden; }
.card[data-category="Food"] { --tile: #fbe6d5; --accent: #873d2c; }
.card[data-category="Music"] { --tile: #e4dcfa; --accent: #53339a; }
.card[data-category="Arts"] { --tile: #f0e0f1; --accent: #71366c; }
.card[data-category="Family"] { --tile: #f9edcc; --accent: #76511a; }
.card[data-category="Sports"] { --tile: #e0ede9; --accent: #215d52; }
.card[data-category="Community"] { --tile: #e2e8f5; --accent: #364c77; }
.card-art { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; min-height: 88px; background: var(--tile); color: var(--accent); }
.card-art svg { width: 58px; height: 58px; flex: none; }
.card-art span { font-weight: 800; text-transform: uppercase; letter-spacing: .11em; font-size: .67rem; }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 19px; }
.card h3 { overflow-wrap: anywhere; margin: 7px 0 9px; }
.card h3 a:hover { color: var(--violet); text-decoration: underline; }
.card p { font-size: .9rem; color: var(--muted); margin: 0 0 12px; }
.card .meta { font-size: .76rem; color: var(--deep); font-weight: 800; }
.card .venue { margin-top: auto; font-size: .8rem; }
.card .price { color: var(--deep); font-weight: 700; font-size: .81rem; }
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: auto; }
.text-link { color: var(--deep); text-decoration: underline; text-underline-offset: 3px; font-size: .85rem; font-weight: 800; }
.save { min-height: 44px; border: 0; color: var(--deep); background: #f1ebfc; border-radius: 32px; padding: 7px 12px; font-size: .8rem; font-weight: 700; }
.save[aria-pressed="true"] { color: white; background: var(--violet); }
.picks .card:first-child { grid-column: 1/-1; display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
.picks .card:first-child .card-art { min-height: 220px; padding: 27px; }
.picks .card:first-child .card-art svg { width: clamp(80px,15vw,160px); height: auto; }
.picks .card:first-child .card-body { padding: 25px; }
.picks .card:first-child h3 { font-size: clamp(1.8rem,3vw,2.65rem); }
.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 10px; }
.filters label { display: grid; gap: 4px; font-weight: 700; font-size: .85rem; }
.filters input, .filters select { min-height: 44px; min-width: 0; border-radius: 12px; padding: 8px 12px; border: 1px solid #dcd0e2; color: var(--ink); background: white; }
.filters label:first-child { flex: 1 1 240px; }
.results-count { color: var(--muted); margin: 0 0 17px; font-size: .88rem; }
.results { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.page { padding-block: 56px; }
.page h1 { font-size: clamp(2.8rem,7vw,5.4rem); margin: 12px 0 20px; max-width: 58rem; }
.page .lead { font-size: 1.15rem; color: var(--muted); max-width: 42rem; }
.page .actions { margin-block: 20px 25px; }
.calendar-months { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-block: 26px 36px; }
.month { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.month h2 { font-size: 1.4rem; margin-bottom: 14px; }
.days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 3px; text-align: center; }
.days span,.days a { display: grid; min-height: 38px; place-items: center; font-size: .83rem; }
.days .weekday { font-size: .68rem; color: var(--muted); min-height: 24px; }
.days a { color: var(--deep); background: #eee6ff; border-radius: 9px; font-weight: 800; }
.days a:hover { color: #fff; background: var(--violet); }
.detail { max-width: 780px; }
.detail dl { display: grid; grid-template-columns: minmax(90px, 1fr) 3fr; gap: 6px 16px; padding: 20px; background: #f5eefc; border-radius: 16px; }
.detail dt { font-weight: 700; }
.detail dd { margin: 0; }
.source-list { padding-left: 20px; }
.source-list li { margin-bottom: 10px; }
.source-list a { text-decoration: underline; color: var(--deep); }
footer { background: #f3edf8; border-top: 1px solid var(--line); padding-block: 31px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 22px; font-weight: 700; font-size: .88rem; margin-block: 15px; }
.family { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 12px 0 20px; }
.family a { display: grid; place-items: center; min-height: 54px; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 7px; }
.family svg { display: block; width: auto; height: clamp(17px,2.4vw,24px); max-width: 100%; }
.copyright { font-size: .78rem; color: var(--muted); margin: 0; }
@media(max-width: 880px) {
  .topnav { gap: 13px; }
  .hero { gap: 24px; }
  .picks { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .results { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width: 650px) {
  .wrap { width: calc(100% - 32px); }
  .header { flex-wrap: wrap; gap: 0 8px; min-height: 0; padding-top: 12px; }
  .topnav { order: 3; width: 100%; justify-content: space-between; gap: 5px; min-height: 46px; font-size: .78rem; }
  .utility { gap: 9px; font-size: .78rem; }
  .hero { grid-template-columns: 1fr; padding-block: 36px; }
  .hero-art { border-radius: 19px; }
  .hero-art img { aspect-ratio: 1.42; }
  .section,.page { padding-block: 34px; }
  .picks .card:first-child { grid-template-columns: 1fr; }
  .picks .card:first-child .card-art { min-height: 110px; }
  .picks .card:first-child .card-art svg { width: 75px; }
  .picks .card:first-child .card-body { padding: 19px; }
  .picks,.results,.calendar-months { grid-template-columns: 1fr; }
  .family { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .family svg { height: 22px; }
}

.footer-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.footer-end a:hover { text-decoration: underline; }
@media(max-width: 650px) {
  .footer-end { display: grid; justify-content: center; text-align: center; }
}

/* Editorial photography */
body { background: #fff; }
.topbar { background: rgba(255,255,255,.96); }
.hero { padding-block: 56px 64px; }
.hero-art img { height:auto; aspect-ratio: 1.2; object-position:50% 60%; }
.button { min-height: 52px; font-size: .95rem; }
.button.primary { background: linear-gradient(145deg,#8c50f0,#6d28d9); box-shadow: 0 9px 24px #6d28d92c; }
.section { padding-block: 68px; }
.picks { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.card { border-radius: 22px; box-shadow: 0 12px 35px #26143b0a; }
.card-art.photo-card { position: relative; display: block; min-height: 0; padding: 0; aspect-ratio: 1.6; overflow: hidden; background: #eee8f5; }
.card-art.photo-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-art.photo-card img { transform: scale(1.035); }
.card-art.photo-card span { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,.95); color: #42147f; border-radius: 30px; padding: 7px 11px; }
.photo-credit { position: absolute; right: 8px; bottom: 7px; max-width: calc(100% - 16px); color: white; font-size: .64rem; line-height: 1.4; padding: 3px 6px; border-radius: 4px; background: #17172088; }
.card-body { padding: 25px; }
.card h3 { font-size: clamp(1.3rem,2vw,1.8rem); }
.card p { font-size: 1rem; line-height: 1.6; }
.card .meta, .card .venue, .card .price { font-size: .88rem; }
.picks .card:first-child { grid-column: 1/-1; grid-template-columns: 1.05fr 1fr; }
.picks .card:first-child .card-art.photo-card { min-height: 310px; height: 100%; aspect-ratio: auto; }
.picks .card:first-child .card-body { padding: clamp(25px,4vw,48px); justify-content: center; }
.picks .card:first-child h3 { font-size: clamp(2rem,3.3vw,3rem); }
.detail-photo { margin: 25px 0; }
.detail-photo img { display:block; width: 100%; max-height: 580px; object-fit: contain; border-radius: 20px; background: #f8f5fc; }
.detail-photo figcaption { color: var(--muted); font-size: .75rem; }
.detail-photo figcaption a { text-decoration: underline; }
.plan-notes { margin:32px 0; padding:26px; background:#faf7ff; border:1px solid var(--line); border-radius:20px; }
.plan-notes h2 { font-size:1.6rem; letter-spacing:-.03em; }
.plan-notes p { font-size:1.05rem; line-height:1.7; }
.card-actions { padding-top: 12px; border-top: 1px solid var(--line); }
.card-actions .text-link { font-size: .92rem; text-decoration:none; border:1px solid var(--line); border-radius:12px; padding:10px 14px; }
.card-actions .text-link:hover { background:#f6f0ff; border-color:var(--violet); }
.card-actions .save { background:transparent; border:1px solid var(--line); border-radius:12px; padding:10px 14px; font-size:.92rem; }
.card-actions .save[aria-pressed="true"] { background:var(--violet); color:white; }
@media(max-width:650px) {
 .hero { padding-block: 36px; }
 .section { padding-block: 42px; }
 .picks { grid-template-columns: 1fr; }
 .picks .card:first-child { display: flex; }
 .picks .card:first-child .card-art.photo-card { min-height: 0; aspect-ratio: 1.5; }
 .picks .card:first-child .card-body,.card-body { padding: 20px; }
 .card h3 { font-size: 1.5rem; }
}
@media(prefers-reduced-motion:reduce) { .card-art.photo-card img { transition:none; } }
.skyline-story { --skyline-progress: 0; padding-block: 52px 20px; }
.skyline-heading { margin-bottom: 24px; }
.skyline-heading h2 { margin-top: 8px; }
.skyline-scroll { height: 155vh; }
.skyline-pin { position: sticky; top: 24px; }
.skyline-frame { position: relative; height: min(62vh,600px); min-height: 280px; overflow: hidden; border: 1px solid #dcd0ed; border-radius: 24px; background: #f8f5fd; }
.skyline-photo { width: 100%; height: 100%; object-fit: cover; opacity: clamp(0, calc((var(--skyline-progress) - .25) * 2), 1); transform: scale(calc(1.08 - var(--skyline-progress) * .08)); }
.skyline-hola { position: absolute; inset: 0; display: grid; place-items: center; color: var(--violet); font: 800 clamp(12rem, 38vw, 36rem)/.8 Manrope, sans-serif; letter-spacing: -.09em; transform: scale(calc(1 + var(--skyline-progress) * 3)); opacity: clamp(0, calc(1 - var(--skyline-progress) * 3), 1); }
.skyline-coordinates { position:absolute; top:18px; right:20px; padding:8px; color:var(--deep); background:#ffffffdc; border-radius:8px; font:700 .65rem/1.5 monospace; }
.skyline-prompt { color:var(--muted); text-align:center; font-size:.88rem; }
.skyline-story.reduced-motion .skyline-scroll { height:auto; }
.skyline-story.reduced-motion .skyline-photo { opacity:1; transform:none; }
.skyline-story.reduced-motion .skyline-hola { display:none; }
@media(max-width:650px) { .skyline-story { padding-block:36px 10px; } .skyline-scroll { height:125vh; } .skyline-frame { height:45vh; min-height:270px; } .skyline-hola { font-size:38vw; } }
@media(prefers-reduced-motion:reduce) { .skyline-scroll { height:auto; } .skyline-pin { position:static; } .skyline-photo { opacity:1; transform:none; } .skyline-hola { display:none; } }

/* Shared Hola wordmark proportions. */
header .brand img { width: 306px; height:49px; object-fit:contain; }
footer .brand img { width:320px; max-width:100%; height:auto; }
@media(max-width:650px) { header .brand img { width:240px; height:auto; } .utility {gap:7px} .utility>a:first-child {font-size:11px} }
@media(max-width:370px) {header .brand img {width:215px}}
/* Photo-aligned strokes follow the same frame geometry at every breakpoint. */
.skyline-scroll {height:320svh}
.skyline-frame {height:auto;min-height:0;aspect-ratio:1500/1002;max-height:70svh}
.skyline-photo,.skyline-lines {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none}
.skyline-photo {opacity:0}
.skyline-lines {color:var(--violet)}
.skyline-lines path {stroke-dasharray:1;stroke-dashoffset:1}
.skyline-hola {z-index:2;will-change:transform,opacity}
.skyline-coordinates {z-index:3}
.skyline-credit {font-size:11px;color:var(--muted);margin:10px 0 0}
.skyline-credit a {text-decoration:underline}
@media(max-width:650px) {.skyline-scroll{height:260svh}.skyline-frame{aspect-ratio:4/3;max-height:none;height:auto;min-height:0}}
@media(prefers-reduced-motion:reduce){.skyline-scroll{height:auto}.skyline-lines{display:none}.skyline-photo{opacity:1}}