/* ConnectHere, the Buenos Aires theme ("porteño"). Loaded after inca.css only on Buenos Aires pages (src/themes.js, src/incachrome.js).
   The Inca wall is granite. Buenos Aires is a city of white stone against a hard blue sky: the Obelisco on the widest avenue in the world,
   the Sol de Mayo, jacarandas in October, Art Deco towers, flower-pattern sidewalk tiles, enamel street signs, tango. So the page is a night-blue
   street with enamel plaques (white, sky, sun yellow, tango red, each framed in navy with a thin inner line and four bolts), a landmark skyline
   over the header (Obelisco, Torre Monumental, Kavanagh, Barolo, Teatro Colón, Floralis, Puente de la Mujer) on a strip of sidewalk tiles, and a
   poster of the Obelisco in the hero. One loud thing: the Obelisco. Everything else stays flat and quiet. Type: Big Shoulders Display (condensed
   sign-painter capitals, heavy) with Rubik for body and Hebrew. Every rule hangs on html[data-theme="porteno"]. */

@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/bigshoulders-latin-ext-800.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/bigshoulders-latin-800.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ================================================================ tokens */
html[data-theme="porteno"] {
  --cielo: #74b3e8; --cielo-l: #d6eafb; --noche: #0b1f4b; --papel: #f7f8f3; --sol: #f6b81a; --tango: #c8202f; --jacaranda: #6f57b8;
  --joint: #0b1f4b;                        /* the street at night: shows between the plaques */
  --J: 0px; --ring: 0px; --Sx: 0px; --jt: 12px;     /* no tilt, no chamfer, no overlap: plain gaps */
  --r: 16px; --py: 26px; --padx: 30px;
  --ink: #0b1f4b; --mute: #26416f; --em: #c8202f; --focus: #0b1f4b; --line: #0b1f4b;
  --sun: #f6b81a; --accent: #1c5fb5; --teal: #1c5fb5; --deep: #0b1f4b; --wa: #0f7a43; --wa-hover: #0b6638;
  --terra: #c8202f; --teal-d: #0b1f4b; --terra-t: #f6b81a;
  --display: "Big Shoulders Display", "Rubik", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --grain: none;
  scrollbar-color: #74b3e8 var(--joint);
}
@media (prefers-color-scheme: dark) { html[data-theme="porteno"] { --joint: #08193d; } }
@media (min-width: 900px) { html[data-theme="porteno"] { --py: 28px; --padx: 40px; } html[data-theme="porteno"] .wall { padding-inline: 20px; } }
html[data-theme="porteno"] body { background: var(--joint); }
html[data-theme="porteno"] ::selection { background: var(--sol); color: var(--noche); }
html[data-theme="porteno"] .wall { padding-inline: 12px; }

/* ================================================================ the plaques (stones) */
html[data-theme="porteno"] .stone { --face: #f7f8f3; }
html[data-theme="porteno"] .t1 { --face: #f7f8f3; } html[data-theme="porteno"] .t2 { --face: #eef4fa; } html[data-theme="porteno"] .t3 { --face: #fffef9; }
html[data-theme="porteno"] .t4 { --face: #e8f0f8; } html[data-theme="porteno"] .t5 { --face: #f2f6fa; }
html[data-theme="porteno"] .stone.terr { --face: #c8202f; --ink: #fff; --mute: #ffe9ea; --em: #ffd24d; --focus: #fff; --line: #fff; }
html[data-theme="porteno"] .stone.sage, html[data-theme="porteno"] .stone.sun { --face: #f6b81a; --ink: #0b1f4b; --mute: #0b1f4b; --em: #8a1320; }
html[data-theme="porteno"] .stone.photo { --face: #74b3e8; }
html[data-theme="porteno"] .stone.wa { --face: #0f7a43; --ink: #fff; --mute: #f4fbf7; --focus: #fff; --em: #fff; --line: #fff; }
html[data-theme="porteno"] .stone.blue { --face: #74b3e8; --ink: #0b1f4b; --mute: #0b1f4b; --focus: #0b1f4b; --em: #0b1f4b; }
html[data-theme="porteno"] .stone.teal { --face: #1c5fb5; --ink: #fff; --mute: #eaf2fc; --focus: #fff; --em: #ffd24d; --line: #fff; }
html[data-theme="porteno"] .stone.deep { --face: #0b1f4b; --ink: #fff; --mute: #d3e1f2; --focus: #fff; --em: #f6b81a; --line: #74b3e8; }
@media (prefers-color-scheme: dark) {
  html[data-theme="porteno"] .t1 { --face: #12305f; } html[data-theme="porteno"] .t2 { --face: #0f2a55; } html[data-theme="porteno"] .t3 { --face: #163666; }
  html[data-theme="porteno"] .t4 { --face: #0d2650; } html[data-theme="porteno"] .t5 { --face: #112d5a; }
  html[data-theme="porteno"] .t1, html[data-theme="porteno"] .t2, html[data-theme="porteno"] .t3, html[data-theme="porteno"] .t4, html[data-theme="porteno"] .t5 { --ink: #f4f7fb; --mute: #d3e1f2; --em: #f6b81a; --focus: #fff; --line: #74b3e8; }
  html[data-theme="porteno"] .stone.terr { --face: #a31826; }
  html[data-theme="porteno"] .stone.photo { --face: #1d4a86; }
}
/* the enamel plaque: a rounded rectangle, a navy frame, a thin inner line and four bolts. The joint insets stay: they make the gaps. */
html[data-theme="porteno"] .stone,
html[data-theme="porteno"] .stone::before,
html[data-theme="porteno"] .stone.free::after { clip-path: inset(var(--itx) var(--ilx) var(--ibx) var(--irx) round var(--r)); }
html[data-theme="porteno"][dir="rtl"] .stone,
html[data-theme="porteno"][dir="rtl"] .stone::before,
html[data-theme="porteno"][dir="rtl"] .stone.free::after { clip-path: inset(var(--itx) var(--irx) var(--ibx) var(--ilx) round var(--r)); }
html[data-theme="porteno"] .stone.free { clip-path: none; background: none; }
html[data-theme="porteno"] .stone { background: var(--face); }
html[data-theme="porteno"] .stone::before {
  --h: calc(var(--jt) / 2); --b: calc(var(--jt) / 2 + 15px);
  background:
    radial-gradient(circle 2.6px at var(--b) var(--b), var(--line) 96%, transparent 100%),
    radial-gradient(circle 2.6px at calc(100% - var(--b)) var(--b), var(--line) 96%, transparent 100%),
    radial-gradient(circle 2.6px at var(--b) calc(100% - var(--b)), var(--line) 96%, transparent 100%),
    radial-gradient(circle 2.6px at calc(100% - var(--b)) calc(100% - var(--b)), var(--line) 96%, transparent 100%),
    var(--face);
  filter: none;
  box-shadow:
    inset 0 0 0 calc(var(--h) + 4px) var(--line),
    inset 0 0 0 calc(var(--h) + 7px) var(--face),
    inset 0 0 0 calc(var(--h) + 8.5px) var(--line);
}
html[data-theme="porteno"] .stone.photo::before { background: var(--img) center / cover no-repeat, var(--face); box-shadow: inset 0 0 0 calc(var(--jt) / 2 + 4px) var(--noche); }
html[data-theme="porteno"] .stone.free::before { box-shadow: none; background: none; }   /* the header holds the logo and menus: a plain plate */
html[data-theme="porteno"] .stone.free::after { background: var(--papel); }
html[data-theme="porteno"] a.stone:hover::before { filter: brightness(1.05); }
/* the slim bands (the Ayni line, the footer) keep room inside the frame lines */
html[data-theme="porteno"] .ayni-course > .stone, html[data-theme="porteno"] .ft .stone { --pt: 22px; --pb: 22px; }
html[data-theme="porteno"] .course > .stone { --il: calc(var(--jt) / 2); --ir: calc(var(--jt) / 2); --it: calc(var(--jt) / 2); --ib: calc(var(--jt) / 2); }
html[data-theme="porteno"] .wall > header.course > .stone,
html[data-theme="porteno"] .wall > footer.course > .stone { --it: 0px; --ib: 0px; }
html[data-theme="porteno"] .wall > header.course > .stone:first-child { --it: 8px; }
html[data-theme="porteno"] .wall > footer.course > .stone:last-child { --ib: 8px; }
@media (prefers-color-scheme: dark) { html[data-theme="porteno"] .stone.free::after { background: #12305f; } }

/* ================================================================ the skyline: the landmarks of the city over a strip of sidewalk tiles */
html[data-theme="porteno"] .wall::before {
  content: ""; display: block; height: 108px; margin-top: 12px; border-radius: var(--r); border: 3px solid var(--noche);
  background:
    url(/img/ba-vereda.svg) left bottom / 22px 22px repeat-x,
    url(/img/ba-skyline.svg) center bottom 22px / auto calc(100% - 22px) repeat-x,
    radial-gradient(circle at 15% 70%, #fff 0, rgba(255, 255, 255, 0) 38%),
    linear-gradient(180deg, var(--cielo) 0%, var(--cielo-l) 100%);
}
@media (prefers-color-scheme: dark) { html[data-theme="porteno"] .wall::before { border-color: var(--cielo); } }
@media (min-width: 900px) { html[data-theme="porteno"] .wall::before { height: 128px; } }
html[data-theme="porteno"] .wall::after { content: ""; display: block; height: 22px; margin-top: 12px; border-radius: 8px; background: url(/img/ba-vereda.svg) left top / 22px 22px repeat-x; }

/* the stepped Inca notch on the section heads (phones) has no place here */
html[data-theme="porteno"] .todayc > .stone:first-child::after, html[data-theme="porteno"] .steps-head::after, html[data-theme="porteno"] .evhead::after { display: none; }
html[data-theme="porteno"] .todayc > .stone:first-child, html[data-theme="porteno"] .evhead { --face: var(--tango); }
html[data-theme="porteno"] .doors .door.quiet, html[data-theme="porteno"] #tail .door.quiet { --face: var(--lulu, #0b7285); --line: #fff; }

/* ================================================================ type: sign-painter capitals for the headings */
html[data-theme="porteno"] h1, html[data-theme="porteno"] h2, html[data-theme="porteno"] h3 { font-weight: 800; letter-spacing: .005em; line-height: 1.02; }
html[data-theme="porteno"]:not([lang="he"]) h1 { font-size: clamp(46px, 11.5vw, 60px); }
html[data-theme="porteno"]:not([lang="he"]) h2 { font-size: clamp(34px, 8.5vw, 44px); }
@media (min-width: 900px) {
  html[data-theme="porteno"]:not([lang="he"]) h1 { font-size: clamp(56px, 5vw, 84px); }
  html[data-theme="porteno"]:not([lang="he"]) h2 { font-size: clamp(38px, 3.3vw, 54px); }
}
html[data-theme="porteno"] .bn { font-weight: 800; letter-spacing: .01em; font-size: 30px; }
html[data-theme="porteno"] .bn em, html[data-theme="porteno"] .brand .bn em { color: var(--tango); font-style: normal; }
html[data-theme="porteno"] .dnum, html[data-theme="porteno"] .dname, html[data-theme="porteno"] .aw { letter-spacing: .01em; font-weight: 800; }
html[data-theme="porteno"] .dnum { font-size: 44px; }
html[data-theme="porteno"][lang="he"] h1, html[data-theme="porteno"][lang="he"] h2, html[data-theme="porteno"][lang="he"] h3, html[data-theme="porteno"][lang="he"] .bn { letter-spacing: 0; }

/* ================================================================ small parts: hard-edged buttons like the push plates on an enamel sign */
html[data-theme="porteno"] .btn, html[data-theme="porteno"] .ld-btn { clip-path: none !important; border-radius: 10px; background: var(--sol); color: var(--noche); border: 2px solid var(--noche); box-shadow: 0 3px 0 var(--noche); font-weight: 800; }
html[data-theme="porteno"] .btn:hover, html[data-theme="porteno"] .ld-btn:hover { background: #ffc934; }
html[data-theme="porteno"] .btn:active, html[data-theme="porteno"] .ld-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--noche); }
html[data-theme="porteno"] .btn-line { background: transparent; color: var(--ink); border: 2px solid currentColor; box-shadow: none; }
html[data-theme="porteno"] .btn-wa { background: var(--wa); color: #fff; border-color: var(--noche); }
html[data-theme="porteno"] .cgo, html[data-theme="porteno"] .fbtn, html[data-theme="porteno"] .chip, html[data-theme="porteno"] .kt, html[data-theme="porteno"] .plb,
html[data-theme="porteno"] .gjoin, html[data-theme="porteno"] .dir .card .go, html[data-theme="porteno"] .ev .evgo, html[data-theme="porteno"] .seg,
html[data-theme="porteno"] .fab { clip-path: none !important; border-radius: 999px; }
html[data-theme="porteno"] .ev .th { clip-path: none; border-radius: 12px; }
html[data-theme="porteno"] .niche { clip-path: none; border-radius: 50%; padding-top: 0; }
html[data-theme="porteno"] .step .n { border-radius: 50%; }
html[data-theme="porteno"] .seg, html[data-theme="porteno"] .step .n { background: var(--noche); }
html[data-theme="porteno"] .chip { border: 2px solid var(--noche); }
html[data-theme="porteno"] .nl-submit { background: var(--sol); color: var(--noche); border: 2px solid var(--noche); border-radius: 10px; box-shadow: 0 3px 0 var(--noche); font-weight: 800; }
html[data-theme="porteno"] .nl-submit:hover { background: #ffc934; }

/* ================================================================ print stays plain */
@media print { html[data-theme="porteno"] .wall::before, html[data-theme="porteno"] .wall::after { display: none; } }