/* "Pitch Energy" visual direction - vibrant pitch green + gold, Poppins/Nunito Sans, chosen from the
   three style directions presented 2026-09-16. See .topbar for the pitch-line hero texture. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Nunito+Sans:wght@400;600;700&family=Chakra+Petch:wght@700&display=swap');

:root {
    --green: #0b6e2f;
    --green-dark: #084f22;
    --ink: #123321;
    --paper: #f3faf1;
    --line: #dceedd;
    --red: #b3261e;
    --gold: #efb93a;
    --white: #ffffff;

    /* Surface/text tokens used for dark-mode swapping - kept identical to the colors above by
       default so light mode is pixel-for-pixel unchanged. */
    --surface: #ffffff;
    --surface-alt: #eef8f0;
    --text-muted: #5c7566;
    --text-faint: #7e9787;
    --shadow-card: 0 4px 12px rgba(18,51,33,0.07);
    --shadow-dropdown: 0 10px 28px rgba(18,51,33,0.16);
    --live-bg: #fffaf0;
    --flash-bg: #fff3cd;
    --flash-error-bg: #fde2e1;
    --status-finished-bg: #dceedd;
    --reply-staff-bg: #e6f4ea;

    /* About page hand-drawn sketches: ink for lines/handwriting, paper for the small white
       cutout shapes (team pills, ball, clock face) drawn within them. */
    --sketch-ink: #16233F;
    --sketch-paper: #ffffff;

    /* Topbar hero: a subtle pitch-line texture over the brand gradient - see .topbar. */
    --hero-gradient:
        repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 2px, transparent 2px, transparent 34px),
        linear-gradient(160deg, #12833C 0%, #0b6e2f 55%, #073F1A 100%);
}

[data-theme="dark"] {
    --ink: #e8f0ea;
    --paper: #12181a;
    --line: #263832;
    --green-dark: #4ade80;
    --red: #f0453f;
    --gold: #f2c760;
    --surface: #1a2420;
    --surface-alt: #212e28;
    --text-muted: #93a89c;
    --text-faint: #83988c;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-dropdown: 0 6px 20px rgba(0,0,0,0.5);
    --live-bg: #241f0a;
    --flash-bg: #3a2f0a;
    --flash-error-bg: #3a1512;
    --status-finished-bg: #2c3a33;
    --reply-staff-bg: #16281c;
    --sketch-ink: #d7dce6;
    --sketch-paper: #2a3138;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Nunito Sans', 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--paper);
    color: var(--ink);
    /* Safety net: a single unexpectedly-wide element anywhere on the page (a long team name, a wide
       table, etc.) must never be able to push the whole page into horizontal scroll and cut off
       every section's right edge - it should be contained by its own element instead. */
    overflow-x: hidden;
}

a { color: var(--green-dark); }

.topbar {
    background: var(--hero-gradient);
    color: #fff;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.topbar h1, .topbar .brand {
    margin: 0;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: 0.01em;
    color: #ffffff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.brand-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    flex: none;
}
/* Wordmark: "my" in the UI's own Poppins, "SCOREBOARD" in Chakra Petch - a geometric, digital-readout
   face reserved for the logotype alone, nodding to an actual electronic scoreboard display. */
.brand-my { font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 600; color: #ffffff; }
.brand-score { font-family: 'Chakra Petch', 'Poppins', sans-serif; font-weight: 700; color: var(--gold); letter-spacing: 0.03em; }

.nav-menu-wrap { position: relative; }
.hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #fff;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
}
.hamburger-btn:hover { background: rgba(255,255,255,0.15); }
.hamburger-btn[aria-expanded="true"] { background: rgba(255,255,255,0.2); }

.nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-dropdown);
    min-width: 190px;
    padding: 6px 0;
    z-index: 50;
}
.nav-dropdown a, .nav-dropdown-item, .nav-dropdown button.nav-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
}
.nav-dropdown a:hover, .nav-dropdown-item:hover, .nav-dropdown button.nav-dropdown-btn:hover { background: var(--paper); }
.nav-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--green);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}
.nav-badge.pending { background: var(--red); }

.nav-logout-form { margin: 0; }
.nav-dropdown button.nav-dropdown-btn {
    width: 100%;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}
.nav-dropdown-divider { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px !important; }
.nav-dropdown-item { justify-content: space-between; cursor: default; }

.theme-switch {
    width: 36px;
    height: 20px;
    background: var(--line);
    border: none;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    padding: 0;
    flex: none;
}
.theme-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s ease;
}
.theme-switch[aria-checked="true"] { background: var(--green); }
.theme-switch[aria-checked="true"] .theme-switch-knob { transform: translateX(16px); }

.auth-form { max-width: 380px; margin: 0 auto; }
.google-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink); font-size: 0.9rem; cursor: pointer; margin-top: 10px;
    text-decoration: none; box-sizing: border-box;
}
.google-btn:hover { background: var(--surface-alt); }
.google-btn[disabled] { background: var(--surface-alt); color: var(--text-muted); cursor: not-allowed; }
.google-btn[disabled]:hover { background: var(--surface-alt); }
.divider { text-align: center; color: var(--text-muted); font-size: 0.8rem; margin: 16px 0; position: relative; }
.divider::before, .divider::after { content: ''; position: absolute; top: 50%; width: 42%; border-top: 1px solid var(--line); }
.divider::before { left: 0; } .divider::after { right: 0; }

.dev-verify-box { background: #eef7ec; border: 1px solid var(--green); border-radius: 8px; padding: 16px; word-break: break-all; }
.legal-body { line-height: 1.6; }

/* One live-card per line, always - same rule "Recent results" uses (.result-list), so multiple live
   matches never sit side by side. */
.live-list { display: flex; flex-direction: column; gap: 8px; }
.live-card, .result-card {
    display: block; text-decoration: none; color: var(--ink); text-align: center;
    border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px;
    background: var(--surface); flex: 1; min-width: 220px;
    box-shadow: var(--shadow-card);
}
.live-card { border-color: var(--gold); background: var(--live-bg); }
.live-card:hover, .result-card:hover, .tv-match-card:hover { border-color: var(--green); }
.live-card .lc-score { color: var(--gold); }
.live-card .lc-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 10px; }
.result-list { display: flex; flex-direction: column; gap: 8px; }
.result-date-heading {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-faint); margin: 26px 0 12px;
}
.result-date-heading:first-child { margin-top: 0; }

/* Shared team/logo/score row: the same "team name - logo - score - logo - team name" arrangement
   used by .result-card, .live-card and .tv-match-card, so every match display in the app reads the
   same way. .result-card is itself the flex row; .live-card/.tv-match-card wrap it in a nested .lc-row
   instead, since those cards have more content (a meta/status line) below the row. */
.result-card, .lc-row { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; flex-wrap: nowrap; }
.rc-team { font-weight: 700; font-size: 0.95rem; flex: 1 1 100px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-home { text-align: right; }
.rc-away { text-align: left; }
/* vertical-align:middle - without it, an inline <img> defaults to baseline alignment, which sits it
   noticeably lower than the surrounding text (only matters where .rc-logo appears outside a flex
   container with its own align-items, e.g. tournament.php's plain .match-list rows). */
.rc-logo { width: 28px; height: 28px; object-fit: contain; flex: none; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); padding: 2px; vertical-align: middle; }
.rc-score, .lc-score { font-family: 'Poppins', 'Segoe UI', sans-serif; font-size: 1.15rem; font-weight: 800; color: var(--green-dark); flex: none; white-space: nowrap; }

@media (max-width: 600px) {
    .result-card, .lc-row { flex-direction: column; gap: 4px; }
    .rc-team { flex: none; max-width: 100%; white-space: normal; text-align: center; }
}

/* tournament_view.php's match rows - the whole card is the link (no separate "View"), same
   team/logo/score row as .result-card/.live-card above, plus a stage/status pill line below. */
.tv-match-list { display: flex; flex-direction: column; gap: 8px; }
.tv-match-card {
    display: block; text-decoration: none; color: var(--ink); text-align: center;
    border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px;
    background: var(--surface); max-width: 100%;
    box-shadow: var(--shadow-card);
}
.tv-match-meta { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 100%; margin-top: 10px; }

@media (max-width: 600px) {
    .tv-match-card { flex-direction: column; gap: 6px; }
}

.search-form { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.search-form input[type=text] { flex: 1; min-width: 180px; }

.color-picker-row { display: flex; align-items: center; gap: 10px; }
.color-picker-row input[type=color] { width: 48px; height: 38px; padding: 2px; cursor: pointer; }

.team-picker-toggle { display: flex; gap: 14px; margin-bottom: 8px; font-size: 0.85rem; font-weight: normal; }
.team-picker-toggle label { display: flex; align-items: center; gap: 4px; font-weight: normal; margin: 0; }

.logo-gallery-panel {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
}
.logo-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 10px;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 10px;
}
.logo-gallery-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
    text-align: center;
}
.logo-gallery-item:hover { border-color: var(--green); }
.logo-gallery-item.selected { border-color: var(--green); box-shadow: 0 0 0 2px var(--green) inset; }
.logo-gallery-item img { max-width: 48px; max-height: 48px; object-fit: contain; }
.logo-gallery-item span { font-size: 0.72rem; line-height: 1.2; word-break: break-word; }
.logo-gallery-empty { font-size: 0.85rem; color: var(--muted, #777); padding: 6px 2px; }
.logo-gallery-selected { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.logo-gallery-selected img { max-height: 32px; }

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-card);
}

.site-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.site-stat {
    flex: 1 1 140px;
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    text-align: center;
}
.site-stat-value { font-family: 'Poppins', 'Segoe UI', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--green-dark); }
.site-stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }

/* Groups a tournament's matches visually apart from standalone games on the same page. */
.card.tournament-section {
    border-left: 4px solid var(--green);
}
.tournament-section-heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.tournament-section-heading h2 { margin: 0; }

h2 { margin-top: 0; font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--green-dark); }
h3 { margin: 0 0 8px; font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--green-dark); }

label { display: block; font-weight: 600; font-size: 0.85rem; margin: 12px 0 4px; }
label.inline { display: inline-block; margin: 0 8px 0 0; }

input[type=text], input[type=number], input[type=file], input[type=email], input[type=password], select, textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--surface);
    color: var(--ink);
}

.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 220px; }

.btn {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid var(--green);
    background: var(--green);
    color: #fff;
    font-size: 0.9rem;
    font-family: 'Nunito Sans', inherit;
    font-weight: 700;
    line-height: normal;
    vertical-align: middle;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { background: var(--green-dark); }
.btn.secondary { background: var(--surface); color: var(--green-dark); }
.btn.danger { background: var(--surface); color: var(--red); border-color: var(--red); }
.btn.danger:hover { background: var(--red); color: #fff; }
.btn.small { padding: 4px 10px; font-size: 0.8rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-add-goal { display: block; width: 100%; padding: 14px; font-size: 1.05rem; font-weight: 700; margin-bottom: 14px; }
.goal-form-col { display: flex; flex-direction: column; }

.team-block {
    border: 1px dashed var(--line);
    border-radius: 14px;
    padding: 14px;
}

.player-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}
.player-row input[type=text] { flex: 1; }
.player-row button { flex: none; }

.remove-x {
    border: none;
    background: none;
    color: var(--red);
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
}

.match-list { list-style: none; padding: 0; }
.match-list li {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.match-list .links a { margin-right: 10px; font-size: 0.85rem; }
.share-row {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.share-row-field { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 220px; }
.share-row-field input[type=email] { width: auto; flex: 1; min-width: 160px; }
.inline-delete-form { display: inline; }
.link-button {
    background: none; border: none; padding: 0; margin-right: 10px; font-size: 0.85rem;
    color: #b3261e; text-decoration: underline; cursor: pointer; font-family: inherit;
}
.match-list-centered li { flex-direction: column; text-align: center; }
.match-list-centered .links a { margin: 0 5px; }
.status-pill {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--line);
    margin-left: 8px;
}
.status-pill.live { background: var(--gold); color: #3a2a00; }
.status-pill.finished { background: var(--status-finished-bg); }

.share-icon-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #fff;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    z-index: 1;
}
.share-icon-btn:hover { background: rgba(255,255,255,0.15); }

/* Scoreboard display, shared between scoring & view pages */
.scoreboard {
    background: var(--match-color, var(--green));
    color: var(--match-text-color, #fff);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.live-banner {
    flex-basis: 100%; text-align: center; font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.9; margin-bottom: 4px;
    min-height: 1em;
}
.team-side { flex: 1; text-align: center; min-width: 120px; }
.team-side img { max-width: 64px; max-height: 64px; object-fit: contain; background: var(--surface); border-radius: 12px; padding: 4px; }
.team-side .team-name { font-family: 'Poppins', 'Segoe UI', sans-serif; font-size: 1.1rem; font-weight: 700; margin-top: 6px; }
.score-center { text-align: center; min-width: 160px; }
.score-big { font-family: 'Poppins', 'Segoe UI', sans-serif; font-size: 3rem; font-weight: 800; letter-spacing: 2px; }
.match-clock { font-size: 1.4rem; font-variant-numeric: tabular-nums; margin-top: 4px; }
.period-label { font-size: 0.85rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.05em; }
.status-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-right: 6px; animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

table.goals-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
table.goals-table th, table.goals-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 0.9rem; text-align: left; }
table.goals-table th { color: var(--text-faint); font-size: 0.75rem; text-transform: uppercase; }
.team-tag { font-size: 0.72rem; padding: 2px 8px; border-radius: 10px; color: #fff; }
.team-tag.home { background: var(--match-color, var(--green)); color: var(--match-text-color, #fff); }
.team-tag.away { background: #333; }
.assist-note { font-size: 0.78rem; color: var(--text-muted); font-weight: normal; }

.timeline { margin-top: 16px; }
.timeline-goal { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.timeline-goal .minute { font-weight: 700; width: 46px; flex: none; }
.timeline-goal.away { flex-direction: row-reverse; text-align: right; }
.timeline-goal .assist-note { display: block; }

.helptext { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }

.support-message {
    border: 1px solid var(--line);
    border-radius: 14px;
    margin-top: 10px;
    background: var(--surface);
}
.support-message summary {
    cursor: pointer;
    padding: 10px 14px;
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    list-style: none;
}
/* Removes the native disclosure triangle (Chrome/Safari and Firefox need separate rules for it) so the
   summary's own 14px left padding lines up exactly with .support-message-body's - otherwise the browser's
   built-in marker pushes the subject text further right than the body/reply-form content below it. */
.support-message summary::-webkit-details-marker { display: none; }
.support-message summary .support-message-date,
.support-message summary .support-message-sender {
    font-weight: normal;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.support-message summary .status-pill { margin-left: auto; }
.support-message-body { padding: 0 14px 14px; }
.support-message-body form { margin-top: 6px; }
/* Own class (not a blanket rule on the container) so the whitespace-only text node PHP templates leave
   between an opening tag and an indented `<?= ... ?>` on the next line never becomes a stray leading
   line break - keep the tag and its echo on the same source line wherever this class is used. */
.support-text { white-space: pre-wrap; word-break: break-word; }
.support-reply {
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--paper);
    border: 1px solid var(--line);
}
.support-reply-staff { background: var(--reply-staff-bg); border-color: var(--green); }
.support-reply-meta { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 2px; }
.status-pill.closed { background: var(--line); color: var(--text-muted); }
.match-date-label { text-align: center; font-size: 0.72rem; margin: 16px 0 0; min-height: 1em; }
/* Tournament/stage sits right under the date as a tight second line, not a separate spaced block. */
.match-date-label + .match-date-label { margin-top: 2px; }
.flash { background: var(--flash-bg); border: 1px solid var(--gold); padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; color: var(--ink); }
.flash.error { background: var(--flash-error-bg); border-color: var(--red); }

.clock-controls { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.clock-set { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.clock-set label.inline { color: var(--ink); }
input.clock-set-input { width: 56px; padding: 6px 8px; text-align: center; }
.clock-set .helptext { width: 100%; text-align: center; }

footer.hint { text-align: center; font-size: 0.8rem; color: var(--text-muted); margin: 30px 0 10px; }

.site-footer {
    max-width: 960px; margin: 30px auto 0; padding: 20px; text-align: center;
    border-top: 1px solid var(--line); color: var(--text-muted); font-size: 0.85rem;
}
.site-footer-copyright { margin: 0 0 8px; }
.site-footer-links a { color: var(--text-faint); margin: 0 10px; text-decoration: none; }
.site-footer-links a:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .score-big { font-size: 2.2rem; letter-spacing: 2px; }
    .container { padding: 12px; }

    /* Force a reliable stack order on phones: home team, then live/score/clock, then away team. */
    .scoreboard { flex-direction: column; }
    .team-side, .score-center { width: 100%; min-width: 0; }
}

/* About page */
.about-lead { line-height: 1.6; font-size: 0.98rem; }
.about-lead + .about-lead { margin-top: 10px; }
.about-section h2 { margin-bottom: 14px; }
.about-list { margin: 0 0 4px; padding-left: 20px; line-height: 1.7; }
.about-list li { margin-bottom: 4px; }
.about-sketch {
    max-width: 320px;
    margin: 18px auto 4px;
    transform: rotate(-1deg);
}
.sketch-svg { width: 100%; height: auto; display: block; }
.sketch-hand {
    font-family: 'Caveat', 'Segoe UI', cursive;
    fill: var(--sketch-ink);
}
.sketch-hand.sketch-hand-accent {
    fill: var(--green-dark);
}