/* ==========================================================================
   Mrs. Ronda Shickles — K–5 Performing Arts, Reed Elementary
   Static site. No build step, no external fonts, no CDN.
   ========================================================================== */

:root {
  /* Flamingo */
  --pink:        #f77fa1;
  --pink-soft:   #ffe3ec;
  --pink-softer: #fff2f6;
  --rose:        #d94f77;
  --rose-deep:   #b53a5f;

  /* Roadrunner */
  --teal:        #2ec4b6;
  --teal-deep:   #1f7a72;
  --teal-soft:   #e3f7f5;

  --sunny:       #ffd166;
  --sunny-deep:  #a86a00;

  --cream:       #fffaf5;
  --white:       #ffffff;
  --ink:         #33262e;
  --ink-soft:    #5c4a54;
  --line:        #f0dfe5;

  --radius:      20px;
  --radius-lg:   28px;
  --shadow:      0 2px 4px rgba(51, 38, 46, .04), 0 8px 24px rgba(51, 38, 46, .07);
  --shadow-lg:   0 4px 8px rgba(51, 38, 46, .05), 0 18px 42px rgba(51, 38, 46, .11);

  --header-h:    68px;
  --wrap:        1140px;

  --sans: "Avenir Next", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --display: "Trebuchet MS", "Avenir Next", "Segoe UI", -apple-system, sans-serif;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--display);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .35em; }

a { color: var(--rose-deep); }
a:hover { color: var(--rose); }

/* Focus visible everywhere — this is a school site, keyboard users included. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--teal-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

.small { font-size: .875rem; color: var(--ink-soft); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--rose-deep);
  color: #fff;
  padding: 12px 18px;
  z-index: 200;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

/* -------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 250, 245, .94);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.brand-mark { width: 26px; height: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--rose-deep);
}
.brand-text small {
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.site-nav ul {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: block;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

/* Spanish labels run noticeably longer than their English counterparts, and
   with the language switch also in the bar the row wrapped to two lines.
   Tighten just that language rather than shortening the words. */
html:lang(es) .site-nav a { font-size: .84rem; padding: 8px 9px; }
html:lang(es) .brand-text strong { font-size: 1rem; }
html:lang(es) .brand-text small { font-size: .66rem; }
.site-nav a:hover {
  background: var(--pink-soft);
  color: var(--rose-deep);
}

/* Language switch. Lives outside the collapsible nav so a family that needs
   the other language can find it without opening the menu first. */
.lang-switch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border: 2px solid var(--teal);
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal-deep);
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.lang-switch::before {
  content: "\1F310";          /* globe */
  font-size: .95em;
}
/* Both labels are real text; the media query picks which one is shown, so the
   accessible name is never lost the way it would be with a CSS-swapped label. */
.lang-abbr { display: none; }
.lang-switch:hover {
  background: var(--teal);
  color: #04322e;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--pink-soft);
  border: 2px solid var(--pink);
  color: var(--rose-deep);
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2.5px;
  background: currentColor;
  border-radius: 2px;
}
.nav-toggle-bars {
  position: relative;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 6px; }

/* --------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  background:
    radial-gradient(900px 420px at 82% -8%, var(--teal-soft), transparent 62%),
    linear-gradient(170deg, var(--pink-softer), var(--pink-soft));
  padding: 56px 0 96px;
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: center;
}

.eyebrow {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: .6em;
}

.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  color: var(--rose-deep);
  margin-bottom: .15em;
}

.tagline {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  color: var(--ink);
  margin-bottom: .8em;
}

.hero-note {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 600;
  color: var(--ink-soft);
  font-size: .98rem;
}

.badge {
  display: inline-block;
  background: var(--sunny);
  color: #6b4300;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

.lede {
  font-size: 1.1rem;
  max-width: 34em;
  margin-top: 1.1em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 1.6em;
}

/* Shrink-wrap the frame so the roadrunner can be anchored to the photo's own
   edge instead of to the full column width. */
.hero-photo {
  position: relative;
  width: fit-content;
  margin-left: auto;
}
/* Portrait frame rather than a circle: the photo is a full-length costume
   shot, and a circular crop cuts off the instrument it's built around. */
.hero-photo > img:first-child {
  width: 100%;
  max-width: 340px;
  margin-left: auto;
  border-radius: var(--radius-lg);
  border: 10px solid var(--white);
  box-shadow: var(--shadow-lg);
  background: var(--white);
}
.hero-runner {
  position: absolute;
  left: -52px;
  bottom: -18px;
  width: 112px;
  transform: rotate(-6deg);
}

.wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  line-height: 0;
}
.wave svg {
  width: 100%;
  height: 70px;
  display: block;
}
.wave path { fill: var(--cream); }

/* --------------------------------------------------------- quicklinks -- */

.quicklinks {
  background: var(--white);
  border-bottom: 2px solid var(--line);
  padding: 30px 0 34px;
}
.ql-title {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-deep);
  text-align: center;
  margin: 0 0 18px;
}
.ql-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* minmax(0,...) rather than 1fr: a bare 1fr track cannot shrink below its
     min-content width, so a long label (Spanish runs longer than English)
     widens the whole grid past the viewport. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.ql-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  height: 100%;
  padding: 18px 10px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  background: var(--pink-softer);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ql-item:hover {
  transform: translateY(-3px);
  background: var(--pink-soft);
  color: var(--rose-deep);
  box-shadow: var(--shadow-lg);
}
.ql-icon {
  font-size: 1.7rem;
  line-height: 1;
}
.ql-label {
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.2;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* -------------------------------------------------------------- button -- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--rose-deep);
  color: #fff;
  box-shadow: var(--shadow);
}
.btn-primary:hover { background: var(--rose); color: #fff; }

.btn-wishlist {
  background: var(--sunny);
  color: #5c3a00;
  box-shadow: var(--shadow);
}
.btn-wishlist:hover { background: #ffc233; color: #5c3a00; }

.btn-big {
  font-size: 1.12rem;
  padding: 17px 34px;
}

/* ------------------------------------------------------------ sections -- */

.section {
  padding: 76px 0;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.section-tint { background: var(--white); }

.section h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--rose-deep);
  margin-bottom: .35em;
}

.h2-kicker {
  display: block;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: .5em;
}

.section-intro {
  max-width: 46em;
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin-bottom: 2.2em;
}

/* ---------------------------------------------------------------- card -- */

.card {
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.section-tint .card { background: var(--cream); }

.card h3 {
  font-size: 1.22rem;
  color: var(--rose-deep);
}
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

/* Top margin clears the badges that overhang the top of .grade-card / .tip-card.
   It collapses with .section-intro's bottom margin when an intro is present. */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 2.4em;
}

/* ---------------------------------------------------------------- meet -- */

.meet-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
  align-items: start;
}

.prose { font-size: 1.05rem; }

.prose-lead {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--rose-deep);
}

/* Sub-headings inside the bio. Sits below the section h2 in weight and size. */
.prose h3 {
  font-size: 1.25rem;
  color: var(--teal-deep);
  margin-top: 1.6em;
  margin-bottom: .5em;
}
.prose h3::before {
  content: "\266A";      /* musical note */
  color: var(--pink);
  margin-right: .45em;
}

.prose-list {
  list-style: none;
  padding-left: 0;
}
.prose-list li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: .55em;
}
.prose-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pink);
}
.prose-list strong { color: var(--rose-deep); }

.signature {
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--rose-deep);
  margin-top: 1.2em;
}

.fun-card {
  position: relative;
  background: linear-gradient(165deg, var(--pink-softer), var(--pink-soft)) !important;
  border-color: var(--pink);
  border-radius: var(--radius-lg);
  padding-top: 34px;
}
.fun-flamingo {
  position: absolute;
  top: -34px;
  right: 18px;
  width: 74px;
}

.fun-list { margin: 0; }
.fun-list > div {
  padding: 11px 0;
  border-bottom: 1px dashed rgba(217, 79, 119, .35);
}
.fun-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.fun-list dt {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin-bottom: 3px;
}
.fun-list dd { margin: 0; font-size: .97rem; }

/* --------------------------------------------------------------- grade -- */

.grade-card { position: relative; padding-top: 34px; }

.grade-badge {
  position: absolute;
  top: -16px;
  left: 24px;
  background: var(--teal);
  color: #04322e;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 800;
  padding: 7px 18px;
  border-radius: 999px;
  border: 3px solid var(--white);
  box-shadow: var(--shadow);
}

.grade-focus {
  font-weight: 700;
  color: var(--teal-deep);
  font-size: .97rem;
  margin-bottom: .9em;
}
.grade-card ul { padding-left: 1.15em; }
.grade-card li { font-size: .97rem; }
.grade-card li::marker { color: var(--pink); }


/* --------------------------------------------------------------- dates -- */

.dates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.dates li {
  display: flex;
  gap: 20px;
  align-items: center;
  background: var(--white);
  border: 2px solid var(--line);
  border-left: 8px solid var(--pink);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow);
}
.dates h3 { font-size: 1.15rem; margin-bottom: .2em; }
.dates p { margin: 0; font-size: .97rem; color: var(--ink-soft); }

.date-chip {
  flex: 0 0 auto;
  width: 76px;
  text-align: center;
  background: var(--pink-soft);
  border-radius: 14px;
  padding: 10px 6px;
  line-height: 1.2;
}
.date-chip em {
  display: block;
  font-style: normal;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--rose-deep);
}
.date-chip strong {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--rose-deep);
}

/* ------------------------------------------------------------ calendar -- */

/* Responsive 4:3 frame for a real calendar embed, once one is turned on. */
.calendar-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 2em;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--line);
  box-shadow: var(--shadow);
}
.calendar-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------- news -- */

.news-card {
  position: relative;
  padding-top: 34px;
  display: flex;
  flex-direction: column;
}
.news-icon {
  position: absolute;
  top: -18px;
  left: 24px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  background: var(--teal);
  border-radius: 50%;
  border: 3px solid var(--white);
  box-shadow: var(--shadow);
}
.news-card h3 { font-size: 1.15rem; }
.news-card p { font-size: .97rem; }
/* Push the button to the card bottom so all three align, despite uneven copy. */
.news-card .btn { margin-top: auto; align-self: flex-start; }

/* ----------------------------------------------------------- wish list -- */

.wishlist-section {
  background: linear-gradient(155deg, #fff5dd, #ffe9bd);
  border-top: 3px dashed var(--sunny);
  border-bottom: 3px dashed var(--sunny);
}
.wishlist-inner {
  display: flex;
  align-items: center;
  gap: 44px;
}
.wishlist-flamingo {
  flex: 0 0 auto;
  width: 150px;
  transform: rotate(-8deg);
}
.wishlist-heading { color: var(--sunny-deep) !important; }
.wishlist-section p { max-width: 46em; }
.wishlist-section .btn { margin-top: .6em; }
.wishlist-section .btn-wishlist {
  background: var(--rose-deep);
  color: #fff;
}
.wishlist-section .btn-wishlist:hover { background: var(--rose); color: #fff; }

/* ---------------------------------------------------------------- help -- */

.help-card h3 { font-size: 1.12rem; }
.help-card p { font-size: .97rem; margin: 0; }

/* Four tips fit across on wide screens; still wraps cleanly below 1140px. */
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ---------------------------------------------------------------- tips -- */

.tip-card { position: relative; padding-top: 34px; }
.tip-num {
  position: absolute;
  top: -18px;
  left: 24px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--pink);
  color: #fff;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 800;
  border-radius: 50%;
  border: 3px solid var(--white);
  box-shadow: var(--shadow);
}
.tip-card h3 { font-size: 1.1rem; }
.tip-card p { font-size: .97rem; margin: 0; }

/* ------------------------------------------------------------- contact -- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.contact-card .btn { margin: .4em 0 1em; }

.contact-list { margin: 0; }
.contact-list > div { padding: 9px 0; border-bottom: 1px dashed var(--line); }
.contact-list > div:last-child { border-bottom: 0; }
.contact-list dt {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 2px;
}
.contact-list dd { margin: 0; font-size: .97rem; }

/* -------------------------------------------------------------- footer -- */

.site-footer {
  background: var(--rose-deep);
  color: #ffe8ef;
  padding: 36px 0;
  text-align: center;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.footer-title {
  font-family: var(--display);
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: .2em;
}
.site-footer .small { color: #ffd3e0; margin-bottom: .2em; }
.footer-runner { width: 96px; }
.footer-flamingo { width: 62px; }

/* -------------------------------------------------------------- reveal -- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .hero-photo { order: -1; }
  .hero-photo { margin: 0 auto; }
  .hero-photo > img:first-child { max-width: 280px; }
  /* Straddle the frame's bottom-right corner once the photo centres, so the
     roadrunner peeks out rather than landing on top of her. */
  .hero-runner {
    left: auto;
    right: -46px;
    bottom: -14px;
    width: 92px;
    transform: rotate(-6deg) scaleX(-1);
  }
  .meet-grid { grid-template-columns: 1fr; gap: 32px; }
  .wishlist-inner { flex-direction: column; text-align: center; gap: 20px; }
  .wishlist-flamingo { width: 110px; }
  .ql-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  body { font-size: 17px; }
  .section { padding: 56px 0; }

  /* Brand + switch + menu button all share one row here, so the switch drops
     to its two-letter form to keep the header from overflowing. */
  .header-inner { gap: 10px; }
  .lang-full { display: none; }
  .lang-abbr { display: inline; }
  .lang-switch { padding: 7px 11px; }

  .nav-toggle { display: inline-flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    border-bottom: 2px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 10px 20px 16px;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 2px; }
  .site-nav a { padding: 12px 14px; font-size: 1rem; }

  .dates li { flex-direction: column; align-items: flex-start; gap: 12px; }
  .date-chip { width: auto; padding: 6px 16px; }
  .date-chip em, .date-chip strong { display: inline; }

  .ql-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .ql-item { padding: 14px 8px; }

  .footer-inner { flex-direction: column; gap: 14px; }
  .footer-runner { width: 80px; }
  .footer-flamingo { width: 50px; }
}

@media (max-width: 420px) {
  .hero { padding-top: 36px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .card { padding: 22px; }

  /* Smallest phones: the toggle keeps only its icon. Clipped rather than
     display:none so the button still reports "Menu" to a screen reader. */
  .nav-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .nav-toggle { padding: 9px 13px; }
}

/* -------------------------------------------------- reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
}

/* ------------------------------------------------------------- print -- */

@media print {
  .site-header, .nav-toggle, .skip-link, .wave,
  .hero-runner, .footer-runner, .footer-flamingo, .fun-flamingo,
  .wishlist-flamingo { display: none !important; }

  body { font-size: 11pt; background: #fff; color: #000; }
  .section { padding: 18pt 0; page-break-inside: avoid; }
  .hero { background: #fff; padding: 0 0 12pt; }
  .card, .dates li {
    box-shadow: none;
    border: 1pt solid #999;
    page-break-inside: avoid;
  }
  .site-footer { background: #fff; color: #000; border-top: 1pt solid #999; }
  .site-footer .small, .footer-title { color: #000; }
  .btn { border: 1pt solid #000; background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .reveal { opacity: 1; transform: none; }
}