html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #7E3F4A;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* The Pulse theme squares off the phone menu button; keep its soft corners */
.navbar-toggler {
  border-radius: var(--r-small);
}

/* ✦ Fairy-dust cursor: a gold sparkle everywhere, a bolder one on anything clickable.
   Only on devices with a real mouse; typing spots keep the normal text cursor.
   Every "cursor: pointer" on the site reads var(--cursor-hot, pointer), so it all follows along. */
@media (hover: hover) and (pointer: fine) {
    :root {
        --cursor-soft: url("/images/cursor/sparkle.svg") 13 15, auto;
        --cursor-hot: url("/images/cursor/sparkle-hot.svg") 13 15, pointer;
    }

    html, body { cursor: var(--cursor-soft); }

    a[href], button, summary, select, label[for], [role="button"], [role="tab"], [role="option"],
    input[type="range"], input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"],
    .btn, .nav-link, .dropdown-item, .dropdown-toggle {
        cursor: var(--cursor-hot);
    }

    input:not([type]), input[type="text"], input[type="email"], input[type="search"], input[type="url"],
    input[type="tel"], input[type="number"], textarea, [contenteditable="true"] {
        cursor: text;
    }

    /* Bootstrap forces a plain hand on every button with [type]:not(:disabled); same strength, loaded later, so the sparkle wins */
    button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) {
        cursor: var(--cursor-hot);
    }

    button:disabled, [aria-disabled="true"] { cursor: not-allowed; }

    /* once sparkle.js is running it draws the sparkle itself (macOS swaps cursor images for a
       plain arrow when you move fast); these invisible cursors tell it which sparkle to show */
    html.fairy-cursor {
        --cursor-soft: url("/images/cursor/blank-soft.svg") 1 1, none;
        --cursor-hot: url("/images/cursor/blank-hot.svg") 1 1, none;
    }
}

/* sparkle.js puts the sparkle and glitter in this see-through layer, which sits in the browser's
   top layer so it stays in front of pop-up cards too */
.fairy-layer,
.fairy-layer:popover-open {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    pointer-events: none;
}
.fairy-layer::backdrop { display: none; }

/* the sparkle drawn by sparkle.js, following the mouse */
.fairy-pointer {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2147483647;
    width: 32px;
    height: 32px;
    pointer-events: none;
    will-change: transform;
}
.fairy-pointer img { position: absolute; inset: 0; width: 32px; height: 32px; }
.fairy-pointer .hot, .fairy-pointer.is-hot .soft { display: none; }
.fairy-pointer.is-hot .hot { display: block; }
.fairy-pointer[hidden] { display: none; }

/* the glitter trail (drawn by sparkle.js) */
.fairy-dust {
    position: fixed;
    z-index: 2147483647;
    pointer-events: none;
    width: var(--s, 6px);
    height: var(--s, 6px);
    margin: calc(var(--s, 6px) / -2) 0 0 calc(var(--s, 6px) / -2);
    background: var(--c, #E0A83E);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    animation: fairy-dust 0.9s ease-out forwards;
}
.fairy-dust.dot { clip-path: circle(50%); }
@keyframes fairy-dust {
    0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
    100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 14px)) scale(0.3) rotate(var(--r, 90deg)); }
}

/* ===== THE SITE'S RULES: one column, one alignment, one size per heading level =====
   Page views set their own styles in <style> blocks that load after this file, so these win with !important.

   Column     every page's content sits in one 1100px column, so all edges line up page to page
   Alignment  everything is left-aligned: titles, subtitles, captions, tab rows
   Title      a page's (or a stacked Pursue part's) main heading: Georgia 3rem, weight 800
   Section    the headings that split a page into sections: Georgia 1.8rem, weight 700
   Sub        headings inside a section (story rows, projects, awards, places): Georgia 1.35rem, weight 700
   The big display name (Hello cover, Pursue intro) is the brand and stays as it is.
   Corners    four sizes only, one per role:
              --r-card  10px   every card and panel that sits on the page
              --r-inset  8px   a panel, photo or box inside a card
              --r-small  6px   thumbnails, covers, small tiles and inputs
              --r-pill         buttons, tabs, chips and labels
              (deliberate shapes stay: the arched portrait, paper journal pages, book spines, the Polaroid, thin bars,
              and the marketing slide decks, whose corners scale with the slide)
   Cards      every card uses --card-border and --shadow-card at rest, and one of two paddings:
              --pad-card-sm for small grid cards, --pad-card for large panels */
:root {
    --page-width: 1100px;
    --r-card: 10px;
    --r-inset: 8px;
    --r-small: 6px;
    --r-pill: 999px;
    /* one resting shadow for every card: barely there, so cards sit flat on the page instead of floating
       (tighter corners and a light shadow keep the site from looking like a template) */
    --shadow-card: 0 1px 3px rgba(30, 16, 10, 0.10);
    --card-border: 1px solid #DCBDB6;
    /* two card sizes: small grid cards and large panels */
    --pad-card-sm: 22px 24px;
    --pad-card: 30px 32px;
    --title-size: 3rem;
    --section-size: 1.8rem;
    --sub-size: 1.35rem;
    /* kept for older rules that still use it */
    --subtitle-size: var(--section-size);
}

/* Title */
.section-title,
.career-section-title,
.world-block-title,
.coursework-hero h1,
.beyond-hero h1,
.honors-hero h1,
.work-tests-hero h1,
.about-intro h2,
.cs-title,
.cta-section > h2 {
    font-family: Georgia, serif !important;
    font-size: var(--title-size) !important;
    font-weight: 800 !important;
    font-style: normal !important;
    line-height: 1.15 !important;
    letter-spacing: normal !important;
    text-align: left !important;
    color: #1E100A;
}

/* Section */
.shelf-title,
.honors-group h2,
.project-text h2,
.type-header h2,
.about-lead,
.tp-lead,
.duality-title,
.personality-title,
#mis-heading,
#mk-heading,
#ov-heading,
.cs-h,
.story-heading {
    font-family: Georgia, serif !important;
    font-size: var(--section-size) !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-align: left !important;
    color: #1E100A !important;
}

/* Sub */
.about-story-text h3,
.mp-h2,
.mis-detail-title,
[id^="mp-"]:is(h3),
[id^="mk-title-"],
.zoom-label,
.honor-name,
.job h3,
.disc-intro h3,
.riasec-card h3,
.pieces-theme,
.spot h3,
.via-card h3,
.sky-card h3,
.cs-sub,
.tot-title {
    font-family: Georgia, serif !important;
    font-size: var(--sub-size) !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-align: left !important;
}

/* the words right under a title or section title are left-aligned too, and so are the tab rows */
.section-subtitle,
.kn-hint,
.coursework-hero,
.beyond-hero,
.honors-hero,
.work-tests-hero,
.type-header,
.story-section,
.mp-hero {
    text-align: left !important;
}

.section-subtitle,
.kn-hint {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.test-tabs,
.cw-tabs {
    justify-content: flex-start !important;
}

/* one column for every page */
.listen-container,
.about-container,
.type-container,
.career-wrap,
.world-container,
.cta-section > h2,
.cta-links {
    max-width: var(--page-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.shelf,
.shelf-intro,
.coursework-hero,
.cw-tabs,
.story-section {
    max-width: var(--page-width) !important;
}

/* the Coursework tabs sit in the same column as the heading above them */
.coursework-hero,
.cw-tabs,
.story-section {
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 768px) {
    :root {
        --title-size: 2.25rem;
        --section-size: 1.5rem;
        --sub-size: 1.2rem;
    }
}

/* Typed asides (wwwroot/js/type-aside.js): a little confession that types itself onto the end of a sentence,
   in mulberry Georgia italic, with a caret that keeps blinking once it's done */
.aside-type {
    font-family: Georgia, serif;
    font-style: italic;
    color: #733642;
}

.aside-caret {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin-left: 2px;
    vertical-align: -0.2em;
    background: #733642;
    animation: asideBlink 1s steps(1) infinite;
}

.aside-caret.typing { animation: none; }

@keyframes asideBlink {
    50% { opacity: 0; }
}