/* The café look: warm paper with terrazzo flecks, walnut, espresso and brass around the burgundy,
   photos as taped prints and polaroids, labels as label-maker tape, dates circled in pen. Loaded
   after site.css on every page and only overrides it, so site.css keeps the structure. Matches the
   Anong Ganap? newsletter (tools/newsletter). */

/* ---------- tokens ---------- */
:root[data-theme="light"] {
  --bg: #F1E8D8;
  --bg-deep: #E8DCC6;
  --surface: #FBF6EC;
  --surface-2: #EBDDC6;
  --line: #DCCBB0;
  --line-strong: #C4AC88;
  --text: #1E120C;
  --text-1: #3A2619;
  --text-2: #5E4636;
  --text-3: #7A6250;
  --ink: #1E120C;
  --on-ink: #F3E9D8;
  --teal-ink: #6B4A2E;
  --pill-hover: rgb(30 18 12 / .06);
}
:root:not([data-theme="light"]) {
  /* dim café at night: walnut and espresso, amber light, burgundy accents */
  --bg: #24160F;
  --bg-deep: #1A0F0A;
  --surface: #33211A;
  --surface-2: #402A20;
  --line: #4E3628;
  --line-strong: #6A4A36;
  --text: #F3E9D8;
  --text-1: #E8D9C2;
  --text-2: #C9B497;
  --text-3: #A8917A;
  --accent: #9B2944;
  --accent-ink: #F2C98A;
  --accent-soft: #F7DDB3;
  --teal-ink: #D9B98A;
  --ink: #F2C98A;
  --on-ink: #1E120C;
}

/* ---------- ground ---------- */
:root[data-theme="light"] body { background: #F1E8D8 url("cafe/terrazzo.png") repeat; }
:root:not([data-theme="light"]) body {
  background:
    radial-gradient(ellipse 60% 40% at 15% 0%, rgb(242 180 100 / .12), transparent 70%),
    repeating-linear-gradient(92deg, rgb(0 0 0 / .08) 0 2px, transparent 2px 9px, rgb(255 220 170 / .025) 9px 11px, transparent 11px 23px),
    #24160F;
}
:root .nav.glass { --glass-base: color-mix(in srgb, var(--bg) 92%, transparent); }

/* ---------- type: headlines in the serif, like the newsletter ---------- */
:root h1[style*="'Instrument Sans'"], :root h2[style*="'Instrument Sans'"],
:root .hero-title, :root .cal-sec__head h2, :root .ev-month,
:root .nl-band__text h2, :root .guide-card h3 {
  font-family: var(--serif) !important; font-weight: 400 !important; letter-spacing: -0.01em !important;
}
:root h2[style*="'Instrument Sans'"] { font-size: clamp(32px, 3.4vw, 42px) !important; }
:root .hero-title { letter-spacing: -0.015em !important; }

/* ---------- labels: label-maker tape instead of the burgundy rule ---------- */
:root .eyebrow, :root .eyebrow-line {
  display: inline-flex !important; width: auto; gap: 0 !important; padding: 5px 10px 4px; border-radius: 3px;
  background: var(--accent); color: #F3E9D8 !important; rotate: -1.5deg;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .15), 1px 2px 0 rgb(30 18 12 / .3);
}
:root .eyebrow > span:first-child, :root .eyebrow-line::before { display: none !important; }

/* ---------- hero: a taped print on the table, lit warm ---------- */
:root .hero-stage { position: relative; padding: 18px 22px 8px; }
:root .hero--stage {
  border-radius: 3px; border: 12px solid #FBF6EC; rotate: -0.35deg;
  box-shadow: 0 2px 4px rgb(30 18 12 / .2), 0 26px 50px -24px rgb(30 18 12 / .55) !important;
}
:root .hero--stage::after {
  background:
    linear-gradient(90deg, rgb(30 18 12 / .82), rgb(30 18 12 / .55) 45%, rgb(30 18 12 / .06) 78%),
    linear-gradient(0deg, rgb(30 18 12 / .72), transparent 38%),
    linear-gradient(180deg, rgb(185 133 63 / .18), rgb(185 133 63 / .08));
}
:root .hero-stage::before, :root .hero-stage::after {
  content: ""; position: absolute; z-index: 3; width: 120px; height: 30px; pointer-events: none;
  background: rgb(226 210 172 / .85); box-shadow: inset 0 0 6px rgb(120 90 40 / .2);
  clip-path: polygon(1% 4%, 99% 0, 100% 50%, 98% 100%, 0 96%, 2% 50%);
}
:root .hero-stage::before { left: 2px; top: 22px; rotate: -32deg; }
:root .hero-stage::after { right: 4px; top: 20px; rotate: 30deg; }
:root .hero-check {
  background: #1E120C !important; color: #F2C98A !important; border: 0 !important; border-radius: 3px !important;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; rotate: -1.5deg;
}
:root .hero-cta.btn-primary { background: #F3E9D8 !important; color: #1E120C !important; }
:root .hero-cta .cta-ico { background: var(--accent); color: #F3E9D8; }
:root .hero-stats b { font-family: var(--serif); font-weight: 400; font-size: 22px; }

/* ---------- buttons: espresso with the burgundy on hover ---------- */
:root .btn, :root .mobile-cta { border-radius: 6px !important; }

/* ---------- this week: a planner square with the date circled in burgundy pen ----------
   The day sits in its own strip; the number gets a fixed 64 x 50 box and the loop is a
   background drawn around that box, so the ink never touches the digits. */
:root .ev-home > div:first-child, :root .ev-date {
  width: 64px !important; padding: 0 !important; overflow: hidden; color: #1E120C;
  background: #FBF6EC !important; border: 1px solid #DCCBB0 !important; border-radius: 2px !important;
  box-shadow: 0 1px 2px rgb(30 18 12 / .12);
}
:root .ev-home > div:first-child > div:first-child, :root .ev-date small {
  display: block; padding: 4px 0 3px; border-bottom: 1px solid #DCCBB0;
  font: 500 10px var(--mono) !important; letter-spacing: .1em !important; color: #5E4636 !important;
}
:root .ev-home > div:first-child > div:last-child, :root .ev-date b {
  display: block; height: 50px; line-height: 50px !important; padding: 0 !important;
  font-family: var(--serif) !important; font-weight: 400 !important; font-size: 23px !important; color: #1E120C;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 46'%3E%3Cpath d='M38 5C22 1 6 8 5 22s12 21 25 20 22-9 21-21S40 2 22 6' fill='none' stroke='%237B1E34' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 54px 44px no-repeat;
}
:root .ev-home, :root .ev-row { border-bottom: 1px dashed var(--line-strong) !important; }
:root .ev-home > .chip, :root .ev-tag {
  border-radius: 3px !important; border: 0 !important; background: var(--surface-2); color: var(--text-1) !important;
}
:root .ev-badge--new { background: #1E120C; border-color: #1E120C; color: #F2C98A; }

/* ---------- newsletter: a taped card with the ransom-note title ---------- */
:root aside#newsletter, :root .nl-band {
  position: relative; border-radius: 3px !important; border: 0 !important; rotate: 0.6deg;
  background: #FBF6EC !important; box-shadow: 0 2px 3px rgb(30 18 12 / .12), 0 18px 34px -20px rgb(30 18 12 / .45) !important;
}
:root aside#newsletter::before, :root .nl-band::before {
  content: ""; position: absolute; left: 50%; top: -12px; width: 110px; height: 26px; translate: -50% 0; rotate: -3deg;
  background: rgb(226 210 172 / .88); clip-path: polygon(1% 4%, 99% 0, 100% 50%, 98% 100%, 0 96%, 2% 50%);
}
:root aside#newsletter h2, :root #nl-band-h {
  font-size: 0 !important; height: 52px; margin: 12px 0 8px !important;
  background: url("cafe/anong-ganap.png") no-repeat left center / auto 52px;
}
:root aside#newsletter input[type="text"], :root aside#newsletter input[type="email"], :root .nl-band__row input {
  border-radius: 4px !important; background: #FFFDF8 !important; border-color: var(--line-strong) !important;
}
:root aside#newsletter .btn, :root .nl-band__row .btn { background: var(--accent) !important; color: #F3E9D8 !important; border-radius: 4px !important; }
:root:not([data-theme="light"]) aside#newsletter, :root:not([data-theme="light"]) .nl-band { background: #33211A !important; }

/* ---------- guide cards: polaroids, a little crooked ---------- */
:root .guide-card {
  background: #FBF6EC !important; border: 0 !important; border-radius: 2px !important; padding: 10px 10px 0;
  box-shadow: 0 1px 2px rgb(30 18 12 / .15), 0 14px 26px -16px rgb(30 18 12 / .45) !important;
  transition: rotate 300ms var(--ease-out), translate 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
:root .guide-card:nth-child(4n+1) { rotate: -0.9deg; }
:root .guide-card:nth-child(4n+2) { rotate: 0.7deg; }
:root .guide-card:nth-child(4n+3) { rotate: -0.4deg; }
:root .guide-card:nth-child(4n) { rotate: 1deg; }
@media (hover: hover) {
  :root .guide-card:hover { rotate: 0deg; translate: 0 -3px; }
}
:root .guide-card .card-media { border-radius: 0 !important; }
:root .guide-card__text { padding: 12px 6px 16px; }
:root .guide-card h3 { font-size: 23px !important; }
:root .guide-card--feature h3 { font-size: 32px !important; }
:root .guide-card__sub { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
:root:not([data-theme="light"]) .guide-card { background: #F3E9D8 !important; color: #1E120C !important; }
:root:not([data-theme="light"]) .guide-card__sub { color: #7A6250; }

/* ---------- chips and filters: paper tabs ---------- */
:root .chip-btn { border-radius: 4px !important; background: var(--surface); }
:root .chip-btn[aria-pressed="true"] { background: #1E120C; border-color: #1E120C; color: #F2C98A; }
:root .tab[aria-pressed="true"] { border-radius: 4px !important; }

/* ---------- footer: walnut ---------- */
:root .site-footer {
  --text: #F3E9D8; --text-1: #E8D9C2; --text-2: #C9B497; --text-3: #A8917A; --accent-ink: #F2C98A; --line: #4E3628;
  color: var(--text);
  background:
    repeating-linear-gradient(92deg, rgb(0 0 0 / .08) 0 2px, transparent 2px 9px, rgb(255 220 170 / .03) 9px 11px, transparent 11px 23px),
    linear-gradient(180deg, #3B2418, #24160F) !important;
  border-top: 0 !important;
}
:root .site-footer a { color: #F2C98A; }

/* ---------- article and page headlines ---------- */
:root main h1, :root .page-head h1, :root h1 {
  font-family: var(--serif) !important; font-weight: 400 !important; letter-spacing: -0.01em !important;
}

/* ---------- tonight: a receipt pinned to the board ---------- */
:root .cal-tonight {
  border-radius: 2px; border: 0; background: #FFFDF8; rotate: -0.3deg;
  box-shadow: 0 1px 2px rgb(30 18 12 / .12), 0 14px 28px -18px rgb(30 18 12 / .4);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat,
                conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 8px repeat-x;
  padding-bottom: 24px;
}
:root .cal-tonight__h { color: var(--text); border-bottom: 1.5px dashed var(--line-strong); padding-bottom: 8px; }
:root .cal-tonight__ev { border-radius: 3px !important; background: var(--surface-2) !important; border: 0 !important; }
:root:not([data-theme="light"]) .cal-tonight { background: #33211A; }

/* ---------- "Know BGC before you land": prints with a white border ---------- */
:root .step-media { border-radius: 2px; border: 10px solid #FBF6EC; box-shadow: 0 1px 2px rgb(30 18 12 / .15), 0 14px 26px -16px rgb(30 18 12 / .45); }
:root .step-card:nth-child(odd) .step-media { rotate: -0.8deg; }
:root .step-card:nth-child(even) .step-media { rotate: 0.8deg; }
:root .step-card h3 { font-family: var(--serif); font-weight: 400; font-size: 25px; letter-spacing: -0.01em; }

/* ---------- guide, neighborhood and article photos: prints with a cream border ---------- */
.media.hero:not(.hero--stage) {
  border-radius: 2px !important; border: 10px solid #FBF6EC; rotate: -0.3deg;
  box-shadow: 0 2px 4px rgb(30 18 12 / .18), 0 22px 44px -24px rgb(30 18 12 / .5);
}
:root:not([data-theme="light"]) .media.hero:not(.hero--stage) { border-color: #F3E9D8; }

/* ---------- paper corners: cards and panels drop the big rounded corners ---------- */
[style*="border-radius: 10px"], [style*="border-radius: 12px"], [style*="border-radius: 14px"],
[style*="border-radius: 16px"], [style*="border-radius: 18px"], [style*="border-radius: 20px"],
[style*="border-radius: 24px"], .panel, .card, .quiz-deck > main, .ad-slot {
  border-radius: 4px !important;
}
.quiz-deck::before, .quiz-deck::after { border-radius: 4px !important; }

/* ---------- badges on the "Know BGC before you land" prints ---------- */
.step-num { border-radius: 50% !important; background: #FBF6EC !important; color: #7B1E34 !important; box-shadow: 0 0 0 1.5px #7B1E34; -webkit-backdrop-filter: none; backdrop-filter: none; }
.step-chip { border-radius: 3px !important; background: #1E120C !important; color: #F2C98A !important; -webkit-backdrop-filter: none; backdrop-filter: none; rotate: 2deg; }