/* Statement recorder and petition card. Sits at the TOP, over the 3D. It never covers either thumb stick:
   nz-statement.js measures the sticks and sets --nz-st-left / --nz-st-right / --nz-st-maxh. */
#nz-stand {
    display: flex; align-items: center; box-sizing: border-box; min-height: 48px; padding: 4px 14px; border: 0; border-radius: 10px;
    background: #e9c46a; color: #1b1811; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); cursor: pointer;
    font: 800 16px/1.15 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
#nz-stand[hidden] { display: none; }
#nz-stand:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 700px), (pointer: coarse) { #nz-stand { font-size: 15px; padding: 4px 11px; } }

html.nz-st-open #nz-top, html.nz-st-open #nz-stick-hint { visibility: hidden; }

#nz-st {
    position: fixed; z-index: 60; box-sizing: border-box;
    top: max(8px, env(safe-area-inset-top));
    left: var(--nz-st-left, 8px); right: var(--nz-st-right, 8px);
    max-width: 560px; margin: 0 auto; max-height: var(--nz-st-maxh, 70vh);
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 14px; background: #f6f0e1; color: #1b1811; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    font: 17px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-text-size-adjust: 100%; touch-action: manipulation;
}
#nz-st[hidden] { display: none; }
#nz-st > header { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 14px; background: #1b1811; color: #f3ecdb; }
#nz-st > header h2 { flex: 1; margin: 0; font-size: 17px; line-height: 1.2; }
#nz-st > header button { flex: none; width: 48px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: #f3ecdb; font-size: 28px; line-height: 1; cursor: pointer; }
#nz-st-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 14px 12px; }
/* the footer is ONE short line (Anthony, 11 Nov 2026). The longer lines are behind the small "i". nz-statement.js steps --nz-ft down until it fits. */
#nz-st > footer { flex: none; display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 2px 0 12px; overflow: hidden; background: #1b1811; color: #d9d0bb; white-space: nowrap; font-size: var(--nz-ft, 13px); line-height: 1.2; }
#nz-st > footer .ai { flex: none; color: #8fc1ff; font-weight: 700; font-size: 0.96em; }
#nz-st > footer .ai::after { content: '·'; margin-left: 7px; color: #d9d0bb; }
#nz-st > footer a { flex: 1 0 auto; align-self: stretch; display: flex; align-items: center; color: #fff; font-weight: 800; text-decoration: underline; text-decoration-color: #e9c46a; text-underline-offset: 3px; }
#nz-st > footer button { flex: none; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer; }
#nz-st > footer button span { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 24px; height: 24px; border: 2px solid #d9d0bb; border-radius: 50%; color: #f3ecdb; font: italic 700 15px/1 Georgia, 'Times New Roman', serif; }
#nz-st > footer button:focus-visible { outline: 3px solid #e9c46a; outline-offset: -3px; }
/* a card too narrow for one line at a readable size: the same words on two short rows (nz-statement.js adds .ft2) */
#nz-st > footer.ft2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "a i" "l i"; align-items: center; gap: 0 4px; padding: 3px 0 3px 10px; min-height: 0; }
#nz-st > footer.ft2 a { grid-area: a; align-self: auto; min-height: 20px; }
#nz-st > footer.ft2 .ai { grid-area: l; font-size: 11px; }
#nz-st > footer.ft2 .ai::after { content: none; }
#nz-st > footer.ft2 button { grid-area: i; width: 38px; height: 38px; min-height: 0; }
/* while the "i" is open its panel takes the place of the screen, so its Close button is always in reach */
#nz-st.info-open #nz-st-body, #nz-st.info-open #nz-st-more, #nz-st.info-open #nz-st-act { display: none; }
#nz-st.info-open #nz-st-info { flex: 1 1 auto; min-height: 0; max-height: none; }
#nz-st-info { flex: none; max-height: min(55vh, calc(var(--nz-st-maxh, 70vh) - 150px)); overflow-y: auto; padding: 10px 14px 4px; background: #2a2518; color: #f3ecdb; font-size: 14.5px; line-height: 1.35; }
#nz-st-info[hidden] { display: none; }
#nz-st-info p { margin: 0 0 8px; }
#nz-st-info .btn { position: sticky; bottom: 4px; margin: 0 0 6px; box-shadow: 0 -8px 10px #2a2518, 0 8px 0 #2a2518; }
#nz-st-info a { color: #fff; font-weight: 800; text-decoration-color: #e9c46a; text-underline-offset: 3px; }
/* Navy Cross -> Medal of Honor, in the header of the first screen and the petition screen */
#nz-st-medal { display: none; }
#nz-st.hero #nz-st-medal:not([hidden]) { display: flex; align-items: center; justify-content: center; gap: 5px; flex: none; box-sizing: border-box; height: 64px; margin: 5px 2px 5px -6px; padding: 4px 8px; border-radius: 9px; background: #fff; }
#nz-st-medal img { display: block; height: 56px; width: auto; }
#nz-st-medal svg { flex: none; width: 15px; height: 15px; }
#nz-st-medal.words { flex-direction: column; gap: 1px; background: #e9c46a; color: #1b1811; font-size: 11.5px; line-height: 1.1; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
#nz-st-medal.words svg { width: 12px; height: 12px; transform: rotate(90deg); }
#nz-st-medal.words svg path { stroke: #1b1811; }
/* who made this: a small sharp photo and one line */
#nz-st .credit { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; }
#nz-st .credit .ph { position: relative; flex: none; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: none; line-height: 0; cursor: zoom-in; }
/* a small plus in the corner says the photo can be tapped */
#nz-st .credit .ph::after { content: '+'; position: absolute; right: 3px; bottom: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(27, 24, 17, 0.72); color: #fff; font: 700 15px/18px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; text-align: center; }
#nz-st .credit.big .ph::after { content: '\2212'; }
#nz-st .credit .ph img { display: block; width: 114px; height: 76px; object-fit: cover; }
#nz-st .credit p { margin: 0; font-size: 13.5px; line-height: 1.32; color: #2a2518; }
#nz-st .firstwrap { display: flex; flex-direction: column; }
#nz-st .credit.big { flex-direction: column; }
#nz-st .credit.big .ph { width: 100%; cursor: zoom-out; }
#nz-st .credit.big .ph img { width: 100%; height: auto; }
#nz-st .credit .ph:focus-visible { outline: 3px solid #b5872b; outline-offset: 2px; }

#nz-st h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.22; }
#nz-st p { margin: 0 0 10px; }
#nz-st .fine { font-size: 14px; line-height: 1.35; color: #4a4332; }
#nz-st .btn {
    display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 52px; margin: 0 0 8px; padding: 8px 14px;
    border: 0; border-radius: 12px; background: #1b1811; color: #f3ecdb; text-align: center; cursor: pointer;
    font: 700 17px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
#nz-st .btn.go { background: #2e9e5b; color: #fff; }
#nz-st .btn.rec { background: #c0392b; color: #fff; min-height: 58px; font-size: 19px; }
#nz-st .btn.quiet { background: #e4dac0; color: #1b1811; }
#nz-st .btn.gold { background: #e9c46a; color: #1b1811; }
#nz-st .btn[disabled] { opacity: 0.38; cursor: default; }
#nz-st .btn:focus-visible, #nz-st input:focus-visible, #nz-st textarea:focus-visible { outline: 3px solid #b5872b; outline-offset: 2px; }
#nz-st .row { display: flex; gap: 8px; }
#nz-st .row > .btn { flex: 1; }
#nz-st.nz-narrow #nz-st-body .row { flex-direction: column; gap: 0; }
#nz-st.nz-narrow #nz-st-body .row.nav { flex-direction: column-reverse; }
#nz-st.nz-narrow #nz-st-act .btn { font-size: 14.5px; min-height: 48px; }
#nz-st .okin { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; padding: 2px 10px 2px 4px; border-radius: 999px; background: #dcefe2; color: #1b1811; font-size: 16px; font-weight: 800; letter-spacing: 0; vertical-align: middle; }
#nz-st .okin svg { width: 22px; height: 22px; }
#nz-st .btn.pick { background: #1b1811; color: #f3ecdb; }
#nz-st-act .btn.rec { min-height: 52px; margin-bottom: 8px; }
#nz-st-act { flex: none; padding: 8px 14px 0; background: #f6f0e1; border-top: 2px solid #cdbf9c; }
#nz-st-act[hidden] { display: none; }
#nz-st-act .btn { font-size: 15.5px; padding: 6px 8px; }
#nz-st .tallhint { display: none; }
#nz-st label.f { display: block; margin: 0 0 9px; font-weight: 700; font-size: 15px; }
#nz-st label.f small { font-weight: 400; color: #4a4332; }
#nz-st input[type='text'], #nz-st input[type='email'], #nz-st input[type='tel'], #nz-st textarea {
    display: block; box-sizing: border-box; width: 100%; margin-top: 3px; padding: 10px 11px; border: 2px solid #b9a57c; border-radius: 10px; background: #fffaf0; color: #1b1811;
    font: 17px/1.35 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
#nz-st textarea { min-height: 150px; resize: vertical; margin-bottom: 14px; }
#nz-st label.tick { display: flex; gap: 11px; align-items: flex-start; margin: 0 0 8px; padding: 10px; border: 2px solid #cdbf9c; border-radius: 12px; background: #fffaf0; cursor: pointer; }
#nz-st label.tick input { flex: none; width: 28px; height: 28px; margin: 1px 0 0; accent-color: #2e9e5b; }
#nz-st label.tick b { display: block; }
#nz-st .box { margin: 0 0 10px; padding: 10px 12px; border-left: 5px solid #b5872b; background: #ece2c8; border-radius: 0 10px 10px 0; }
#nz-st .pet { font-family: Georgia, 'Times New Roman', serif; font-size: 17.5px; }
#nz-st .pet2 { font-family: Georgia, 'Times New Roman', serif; font-size: 15.5px; line-height: 1.45; border-left-color: #cdbf9c; }
#nz-st .pet2 .by { display: block; margin-top: 8px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14.5px; }
#nz-st .ok { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: #dcefe2; font-weight: 800; font-size: 19px; }
#nz-st .ok svg { flex: none; width: 30px; height: 30px; }
#nz-st .warn { margin: 0 0 10px; padding: 9px 12px; border-radius: 12px; background: #fbe3bd; font-weight: 700; }
#nz-st .warn.full { margin-top: 6px; font-size: 15px; }
#nz-st .note { margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; background: #e4dac0; font-size: 15px; }
#nz-st details { margin: 0 0 10px; }
#nz-st summary { min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
#nz-st summary::-webkit-details-marker { display: none; }
#nz-st summary::before { content: '+'; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #1b1811; color: #f3ecdb; font-size: 19px; line-height: 1; text-decoration: none; }
#nz-st details[open] summary::before { content: '–'; }
#nz-st .q { margin: 0 0 10px; font-size: 21px; line-height: 1.25; font-weight: 800; }
#nz-st .count { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #4a4332; letter-spacing: 0.02em; }

/* recording: a slim card, so the 3D stays in view */
#nz-st .recline { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-weight: 800; font-size: 20px; }
#nz-st .dot { flex: none; width: 16px; height: 16px; border-radius: 50%; background: #c0392b; animation: nz-st-blink 1.2s infinite; }
@keyframes nz-st-blink { 50% { opacity: 0.25; } }
#nz-st .meter { flex: 1; height: 12px; border-radius: 6px; background: #d9cfb4; overflow: hidden; }
#nz-st .lvl { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #4a4332; }
#nz-st .meter > i { display: block; height: 100%; width: 0; background: #2e9e5b; transition: width 0.1s; }
#nz-st .spin { flex: none; width: 22px; height: 22px; border: 3px solid #cdbf9c; border-top-color: #1b1811; border-radius: 50%; animation: nz-st-spin 0.9s linear infinite; }
@keyframes nz-st-spin { to { transform: rotate(360deg); } }
#nz-st .wait { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 700; }

/* review: his exact words on the left, the cleaned-up copy on the right */
#nz-st .two { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: 0 8px; margin: 0 0 10px; }
#nz-st .two.one { grid-template-columns: 1fr; }
#nz-st .pane { min-width: 0; display: grid; grid-template-rows: subgrid; grid-row: span 3; border: 2px solid #cdbf9c; border-radius: 12px; background: #fffaf0; overflow: hidden; }
#nz-st .pane > b { display: flex; align-items: center; min-height: 2.5em; padding: 4px 9px; background: #e4dac0; font-size: 13.5px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.04em; }
#nz-st .pane > small { display: block; padding: 4px 9px 5px; background: #efe7d2; border-bottom: 1px solid #cdbf9c; font-size: 13px; line-height: 1.25; font-weight: 700; color: #4a4332; }
#nz-st .pane > div { grid-row: 3; padding: 8px 9px; font-size: 15.5px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
#nz-st .pane em { display: block; margin: 8px 0 2px; font-style: normal; font-weight: 700; font-size: 13.5px; color: #4a4332; }
#nz-st .states { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
#nz-st .states span { padding: 3px 9px; border-radius: 999px; background: #e4dac0; font-size: 14px; font-weight: 700; }
#nz-st .big { font-size: 26px; font-weight: 800; }
#nz-st-more { flex: none; display: none; padding: 4px 0 5px; border-top: 2px solid #cdbf9c; background: #efe7d2; color: #1b1811; text-align: center; font-size: 13.5px; font-weight: 800; letter-spacing: 0.02em; pointer-events: none; }
#nz-st-more.on { display: block; }
/* words running under the strip fade out instead of being sliced through */
#nz-st-body.more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); }
#nz-st-body.up { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px); mask-image: linear-gradient(to bottom, transparent, #000 22px); }
#nz-st-body.up.more { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 26px), transparent); }
#nz-st-act .wait { margin: 0 0 6px; font-size: 15px; }
#nz-st-ts { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

@media (max-height: 480px) {
    /* phone on its side: the card is the column between the two thumb sticks */
    #nz-st { top: max(4px, env(safe-area-inset-top)); font-size: 16px; }
    #nz-st > header { padding: 0 2px 0 12px; }
    #nz-st > header button { height: 44px; }
    #nz-st { max-height: min(var(--nz-st-maxh, 70vh), calc(100vh - max(4px, env(safe-area-inset-top)) - env(safe-area-inset-bottom) - 6px)); }
    #nz-st > header h2 { font-size: 15.5px; }
    #nz-st-body { padding: 8px 12px; }
    #nz-st h3 { font-size: 17.5px; margin-bottom: 5px; }
    #nz-st p { margin-bottom: 7px; }
    #nz-st .btn { min-height: 48px; margin-bottom: 6px; font-size: 16px; }
    #nz-st .q { font-size: 18px; }
    /* card closed: keep the three top buttons on one row, so the AI label under them stays clear of the thumb sticks */
    #nz-chips { flex-wrap: nowrap; }
    #nz-news, #nz-drop, #nz-stand { min-height: 44px; padding: 2px 9px; font-size: 14px; white-space: nowrap; }
    #nz-news { padding-left: 4px; gap: 5px; }
    #nz-news svg { width: 30px; height: 30px; }
    #nz-st .pane > div { font-size: 14.5px; }
    #nz-st .tallhint { display: block; }
    #nz-st-act { padding: 6px 12px 0; }
    #nz-st-more { padding: 1px 0 2px; font-size: 12.5px; }
    /* the viewer's own bottom buttons would poke out from under the card: step them aside while it is open */
    html.nz-st-open .sse-controlsWrap { visibility: hidden; }
    #nz-st textarea { min-height: 84px; }
    #nz-st.hero #nz-st-medal:not([hidden]) { height: 40px; margin: 2px 2px 2px -6px; padding: 2px 6px; gap: 3px; }
    #nz-st-medal img { height: 36px; }
    #nz-st-medal.words { font-size: 10px; line-height: 1; gap: 0; }
    #nz-st-medal.words svg { width: 9px; height: 9px; }
    #nz-st > footer, #nz-st > footer button { min-height: 34px; height: auto; }
    /* phone on its side: the question and the choices come first; the photo and his line follow them */
    #nz-st .credit { order: 9; margin: 6px 0 8px; gap: 8px; }
    #nz-st .credit .ph img { width: 90px; height: 60px; }
    #nz-st .credit p { font-size: 12.5px; }
    #nz-st .pet2 { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) { #nz-st .dot, #nz-st .spin { animation: none; } }

@media (min-height: 481px) and (max-height: 720px) {
    #nz-st { font-size: 16px; }
    #nz-st > header { padding: 2px 4px 2px 14px; }
    #nz-st > header button { height: 40px; }
    #nz-st-body { padding: 9px 13px 9px; }
    #nz-st h3 { font-size: 18px; margin-bottom: 6px; }
    #nz-st p { margin-bottom: 8px; }
    #nz-st .btn { min-height: 46px; margin-bottom: 7px; padding: 6px 12px; font-size: 16px; }
    #nz-st .btn.rec { min-height: 50px; font-size: 18px; }
    #nz-st .q { font-size: 19px; }
    #nz-st .pane > small { padding: 3px 9px 4px; font-size: 12.5px; }
    #nz-st .pane > b { min-height: 0; }
    #nz-st label.tick { padding: 8px; margin-bottom: 6px; }
    #nz-st .credit { margin-bottom: 9px; gap: 9px; }
    #nz-st .credit .ph img { width: 96px; height: 64px; }
    #nz-st .credit p { font-size: 12.5px; line-height: 1.28; }
    #nz-st.hero #nz-st-medal:not([hidden]) { height: 54px; margin: 3px 2px 3px -6px; }
    #nz-st-medal img { height: 46px; }
}

/* Card closed, phone upright: a smaller top block (Anthony, 11 Nov 2026: "the banner takes too much of the screen").
   This reaches outside the card into the page's own top block. The publisher may prefer to move it into the page's style. */
@media (max-width: 700px) and (min-height: 481px), (pointer: coarse) and (min-height: 481px) {
    #nz-top { gap: 5px; }
    #nz-top #nz-note { padding: 6px 44px 6px 10px; font-size: 13px; line-height: 1.25; }
    #nz-top #nz-note button { width: 44px; height: 44px; font-size: 24px; }
    #nz-top #nz-chips { gap: 5px; }
    #nz-top #nz-news, #nz-top #nz-drop, #nz-top #nz-stand { min-height: 44px; padding: 2px 10px; font-size: 14px; }
    #nz-top #nz-news { padding-left: 4px; gap: 5px; }
    #nz-top #nz-news svg { width: 30px; height: 30px; }
    #nz-top #nz-ai { padding: 3px 8px; font-size: 13px; }
}

/* =====================================================================================================================
   LOOK: "Engraved Citation" (Anthony's pick, 11 Nov 2026). Design source: builds_claude/2026-11-11_claude_card-design-options,
   direction 11 (mockups/dirs2.js). His changes: no italics, coyote-tan buttons, gold accent kept, last names under the
   photo small and apart with commas, sideways the card takes much less of the screen, no crisis line and no AI line on screen
   (both are behind the small "i"). Fonts are served from this folder (SIL Open Font Licence), not from an outside service.
   This block comes last and re-skins everything above it.
   ===================================================================================================================== */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('./fonts/CormorantGaramond-var.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('./fonts/EBGaramond-var.woff2') format('woff2'); }
#nz-st { --paper: #f6f0e2; --paper2: #ede4d0; --ink: #18212e; --gold: #8d6b2e; --mut: #575141; --coy: #7e6241; --coyD: #6a5236;
    top: max(10px, env(safe-area-inset-top)); background: var(--paper); color: var(--ink); border: 1px solid var(--gold); border-radius: 0;
    box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px rgba(141, 107, 46, 0.55), 0 6px 24px rgba(0, 0, 0, 0.28);
    font: 400 17px/1.4 'EB Garamond', Georgia, 'Times New Roman', serif; font-variant-numeric: lining-nums; padding: 5px; }
#nz-st *, #nz-st *::before, #nz-st *::after { font-style: normal !important; }
#nz-st *:not(.dot):not(.spin):not(.rnd) { border-radius: 0; }
#nz-st .btn, #nz-st input, #nz-st textarea, #nz-st select, #nz-st h3, #nz-st label, #nz-st .fine, #nz-st .q { font-family: inherit; font-variant-numeric: lining-nums; }
/* header: eyebrow (first screen only), title, small "i", close */
#nz-st > header { display: flex; align-items: flex-start; gap: 2px; padding: 9px 4px 2px 12px; background: transparent; color: var(--ink); }
#nz-st > header .hd { flex: 1; min-width: 0; }
#nz-st > header h2 { margin: 0; font: 600 23px/1.1 'Cormorant Garamond', Georgia, serif; color: var(--ink); }
#nz-st .eyebrow { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font: 600 11.5px/1 'Cormorant Garamond', Georgia, serif; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
#nz-st .eyebrow.c { justify-content: center; }
#nz-st .eyebrow[hidden] { display: none; }
#nz-st:not(.hero) > header .eyebrow { display: none; }
#nz-st.hero #nz-st-medal:not([hidden]) { display: flex; height: auto; margin: 0 0 6px; padding: 0; background: none; }
#nz-st-medal.pics img { height: 40px; width: auto; }
#nz-st-medal.words { flex-direction: row; gap: 7px; background: none; color: var(--gold); font: 600 11.5px/1 'Cormorant Garamond', Georgia, serif; letter-spacing: 0.2em; }
#nz-st-medal.words svg, #nz-st .eyebrow svg { width: 22px; height: 8px; transform: none; flex: none; }
#nz-st-medal.words svg path { stroke: currentColor; }
#nz-st > header button { flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--mut); cursor: pointer; font-size: 16px; }
#nz-st > header #nz-st-i span { display: grid; place-items: center; width: 24px; height: 24px; border: 1.4px solid var(--mut); border-radius: 50%; font: 600 15px/1 'EB Garamond', Georgia, serif; color: var(--mut); }
#nz-st > header #nz-st-i span { border-radius: 50% !important; }
#nz-st > header button:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
#nz-st > header #nz-st-back { display: none; }
#nz-st-body { padding: 8px 12px 10px; }
#nz-st h3 { font: 600 21px/1.15 'Cormorant Garamond', Georgia, serif; margin: 0 0 8px; }
#nz-st .fine { color: var(--mut); font-size: 14.5px; }
#nz-st .q { font-weight: 500; }
/* buttons: coyote tan. The main one is filled; the others are outlined. */
#nz-st .btn { min-height: 48px; margin: 0 0 8px; padding: 9px 12px; border: 1.5px solid var(--coy); background: var(--paper2); color: var(--ink); font: 600 16.5px/1.15 'EB Garamond', Georgia, serif; }
#nz-st .btn.go, #nz-st .btn.rec { border-color: var(--coy); background: var(--coy); color: #fbf7ee; font: 700 15px/1.1 'Cormorant Garamond', Georgia, serif; letter-spacing: 0.16em; text-transform: uppercase; }
#nz-st .btn.rec { min-height: 56px; font-size: 16.5px; }
#nz-st .btn.quiet, #nz-st .btn.gold, #nz-st .btn.pick { background: var(--paper2); color: var(--ink); }
#nz-st .btn:focus-visible, #nz-st input:focus-visible, #nz-st textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
#nz-st-act { background: var(--paper); border-top: 1px solid rgba(141, 107, 46, 0.45); padding: 8px 12px 0; }
#nz-st-more { background: var(--paper2); color: var(--mut); border-top: 1px solid rgba(141, 107, 46, 0.45); font: 600 12px/1.2 'Cormorant Garamond', Georgia, serif; letter-spacing: 0.16em; text-transform: uppercase; }
#nz-st input[type=text], #nz-st input[type=email], #nz-st input[type=tel], #nz-st textarea { border: 1px solid rgba(24, 33, 46, 0.45); background: #fffdf7; color: var(--ink); font-size: 17px; }
#nz-st input[type=checkbox] { accent-color: var(--coy); }
#nz-st .box { border-left: 3px solid var(--gold); background: var(--paper2); }
#nz-st .okin, #nz-st .ok { background: #e3ead8; color: var(--ink); }
#nz-st-info { background: var(--paper2); color: var(--ink); border-top: 1px solid rgba(141, 107, 46, 0.45); font-size: 15.5px; }
#nz-st-info a { color: var(--ink); font-weight: 600; text-decoration-color: var(--gold); }
#nz-st-info .btn { position: static; flex: none; margin: 8px 0 6px; box-shadow: none; }
#nz-st.info-open #nz-st-info { display: flex; flex-direction: column; overflow: hidden; }
#nz-st-info .t { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#nz-st-info .t p:last-child { margin-bottom: 0; }
/* nothing left of the old greens, reds and blacks */
#nz-st .okin, #nz-st .ok { background: var(--paper2); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(141, 107, 46, 0.5); }
#nz-st .dot { background: #a3271f; border-radius: 50% !important; animation: nz-st-blink2 1.4s infinite; }
@keyframes nz-st-blink2 { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
#nz-st details.law summary::before { content: none; display: none; }
#nz-st .meter { background: var(--paper2); box-shadow: inset 0 0 0 1px rgba(141, 107, 46, 0.5); }
#nz-st .meter > i { background: var(--coy); }
#nz-st .spin { border-color: #d8ccb2; border-top-color: var(--coy); border-radius: 50% !important; }
#nz-st summary::before { background: var(--coy); color: #fbf7ee; border-radius: 50% !important; }
#nz-st .credit .ph::after { background: rgba(106, 82, 54, 0.9); }
#nz-st label.tick input { accent-color: var(--coy); }
#nz-st input, #nz-st textarea, #nz-st select, #nz-st .btn, #nz-st label, #nz-st summary { font-family: 'EB Garamond', Georgia, 'Times New Roman', serif !important; }
#nz-st .btn.go, #nz-st .btn.rec { font-family: 'Cormorant Garamond', Georgia, serif !important; }
#nz-st label.f input, #nz-st label.f textarea, #nz-st textarea { border: 1px solid rgba(24, 33, 46, 0.45); background: #fffdf7; }
#nz-st .support a { color: var(--ink); font-weight: 600; text-decoration-color: var(--gold); text-underline-offset: 3px; }
/* first screen: photo with the three last names, his line, then the three buttons */
#nz-st .credit { display: flex; align-items: flex-start; gap: 12px; margin: 2px 0 0; order: 0; }
#nz-st .pf { flex: none; width: 132px; margin: 0; }
#nz-st .credit .ph { display: block; padding: 0; border: 0; background: none; line-height: 0; cursor: zoom-in; outline: 1px solid rgba(141, 107, 46, 0.6); outline-offset: 2px; }
#nz-st .credit .ph img { display: block; width: 132px; height: 88px; object-fit: cover; }
#nz-st .credit .ph::after { right: 3px; bottom: 3px; border-radius: 50% !important; }
#nz-st .pf figcaption { display: flex; justify-content: space-between; margin-top: 6px; padding: 0 1px; font: 500 9.5px/1 'EB Garamond', Georgia, serif; letter-spacing: 0.02em; color: var(--mut); }
#nz-st .credit p.line { margin: 0; font: 400 15.5px/1.38 'EB Garamond', Georgia, serif; color: #222831; }
#nz-st .credit.big { flex-direction: column; }
#nz-st .credit.big .pf { width: 100%; }
#nz-st .credit.big .ph { width: 100%; cursor: zoom-out; }
#nz-st .credit.big .ph img { width: 100%; height: auto; }
#nz-st .credit.big .pf figcaption { font-size: 12px; padding: 0 12%; }
#nz-st .act { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(141, 107, 46, 0.45); }
#nz-st .act .btn { margin: 0; }
#nz-st .act .pair { display: grid; grid-template-columns: 1.45fr 1fr; gap: 8px; }
#nz-st .act .pair .btn { padding: 8px 6px; font-size: 15.5px; }
/* the petition: a whole page over the 3D, with "Return to the hill" */
html.nz-st-page #nz-sticks, html.nz-st-page #nz-stick-hint, html.nz-st-page .sse-controlsWrap, html.nz-st-page .sse-annotationNav { visibility: hidden; }
#nz-st.page { top: 0; left: 0; right: 0; bottom: 0; max-width: none; max-height: none; height: 100%; margin: 0; border: 0; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6px var(--gold), inset 0 0 0 9px var(--paper), inset 0 0 0 10px rgba(141, 107, 46, 0.5); }
#nz-st.page > header { padding: 8px 6px 0 14px; align-items: center; }
#nz-st.page > header .hd { visibility: hidden; height: 0; overflow: hidden; }
#nz-st.page > header #nz-st-back { display: block; width: auto; height: 40px; margin-right: auto; padding: 0 2px; background: none; border: 0; color: var(--mut); font: 500 16px/1 'EB Garamond', Georgia, serif; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; cursor: pointer; }
#nz-st.page #nz-st-body { padding: 6px 18px 26px; }
#nz-st.page #nz-st-body > * { max-width: 560px; margin-left: auto; margin-right: auto; }
#nz-st .med { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px auto 14px; color: var(--gold); }
#nz-st .med.words span { font: 600 15px/1 'Cormorant Garamond', Georgia, serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
#nz-st .med.words .b { font-weight: 700; }
#nz-st .med svg { width: 34px; height: 12px; }
#nz-st .med figure { margin: 0; text-align: center; }
#nz-st .med figure img { display: block; height: 66px; width: auto; margin: 0 auto 4px; }
#nz-st .med figcaption { font: 600 11px/1 'Cormorant Garamond', Georgia, serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
#nz-st h3.name { margin: 0 auto 4px; text-align: center; font: 600 30px/1.08 'Cormorant Garamond', Georgia, serif; }
#nz-st .sub { margin: 0 auto 12px; text-align: center; color: var(--mut); font-size: 15.5px; }
#nz-st .orn { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px auto 16px; }
#nz-st .orn span { width: 86px; height: 1px; background: rgba(141, 107, 46, 0.7); }
#nz-st .orn i { width: 6px; height: 6px; border: 1px solid var(--gold); transform: rotate(45deg); }
#nz-st .req { margin: 0 auto 10px; padding: 0; border: 0; background: none; font: 400 19px/1.42 'EB Garamond', Georgia, serif; }
#nz-st details.law { margin: 0 auto 16px; }
#nz-st details.law summary { display: inline-block; min-height: 32px; list-style: none; cursor: pointer; color: var(--gold); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
#nz-st details.law summary::-webkit-details-marker { display: none; }
#nz-st details.law p { margin: 6px 0 0; color: var(--mut); font-size: 16px; }
#nz-st blockquote.para { margin: 0 auto 18px; padding: 2px 0 2px 14px; border-left: 1px solid var(--gold); background: none; font: 400 16.5px/1.45 'EB Garamond', Georgia, serif; }
#nz-st blockquote.para p { margin: 0; }
#nz-st blockquote.para footer { margin-top: 8px; color: var(--mut); font-size: 15.5px; }
#nz-st h3.add { text-align: center; margin-bottom: 12px; }
#nz-st .states span { background: var(--paper2); }
@media (max-height: 720px) and (min-height: 481px) {
    #nz-st > header h2 { font-size: 21px; }
    #nz-st .pf { width: 114px; } #nz-st .credit .ph img { width: 114px; height: 76px; } #nz-st .pf figcaption { font-size: 9px; }
    #nz-st .credit p.line { font-size: 14.5px; }
    #nz-st.hero #nz-st-medal:not([hidden]) { height: auto; margin: 0 0 5px; }
    #nz-st-medal.pics img { height: 34px; }
}
@media (max-width: 380px) and (min-height: 481px) {
    #nz-st > header h2 { font-size: 21px; }
    #nz-st .act { margin-top: 9px; padding-top: 9px; gap: 7px; }
    #nz-st .act .btn { min-height: 44px; }
    #nz-st .act .pair .btn { font-size: 14.5px; padding: 6px 4px; }
    #nz-st .pf { width: 112px; } #nz-st .credit .ph img { width: 112px; height: 70px; } #nz-st .pf figcaption { font-size: 9px; }
    #nz-st .credit p.line { font-size: 14px; line-height: 1.32; }
    #nz-st.hero #nz-st-medal:not([hidden]) { margin-bottom: 4px; }
}
@media (max-height: 480px) {
    /* phone on its side: much less of the screen. The first card lies flat across the top; the other steps are the column between the sticks. */
    #nz-st { top: max(4px, env(safe-area-inset-top)); padding: 3px; font-size: 16px; }
    #nz-st > header { padding: 5px 2px 0 10px; }
    #nz-st > header h2 { font-size: 19px; }
    #nz-st > header button { width: 38px; height: 34px; }
    #nz-st.hero #nz-st-medal:not([hidden]) { display: none; }
    #nz-st-body { padding: 5px 10px 7px; }
    #nz-st .btn { min-height: 44px; margin-bottom: 6px; }
    #nz-st .credit { order: 0; margin: 0; gap: 10px; align-items: center; }
    /* a wide, short photo so the three last names sit well apart under it; the crop keeps all three faces */
    #nz-st .pf { width: 118px; } #nz-st .credit .ph img { width: 118px; height: 46px; object-position: 50% 18%; } #nz-st .pf figcaption { font-size: 8.5px; margin-top: 4px; letter-spacing: 0; }
    #nz-st .credit.big .ph img { height: auto; }
    #nz-st .credit p.line { font-size: 14px; line-height: 1.3; }
    #nz-st .act { margin-top: 5px; padding-top: 5px; gap: 6px; }
    #nz-st-body { padding: 4px 10px 5px; }
    #nz-st.wide { max-width: none; margin: 0; }
    #nz-st.wide .act { flex-direction: row; }
    #nz-st.wide .act > .btn { flex: 1.1; }
    #nz-st.wide .act .pair { flex: 2; grid-template-columns: 1.5fr 1fr; gap: 6px; }
    #nz-st.wide .act .btn { min-height: 44px; padding: 4px 8px; font-size: 14.5px; }
    #nz-st.wide .act .btn.go { font-size: 13px; letter-spacing: 0.12em; }
    #nz-st.wide.photo-big { max-width: 560px; margin: 0 auto; }
    #nz-st.page { top: 0; padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
    #nz-st h3.name { font-size: 26px; }
    #nz-st-info { padding: 5px 12px 2px; font-size: 14.5px; line-height: 1.28; }
    #nz-st-info p { margin-bottom: 3px; }
    #nz-st-info .btn { min-height: 44px; margin: 4px 0 3px; }
}

/* =====================================================================================================================
   COMPACT (Anthony, 11 Nov 2026 about 08:53: "there's too much space going on, and we want it to be compact").
   Less padding, smaller gaps, tighter lines on the card, the recorder steps and the petition page. Reading text stays 15 px or
   more; every button stays at least 44 px tall. This block comes last.
   ===================================================================================================================== */
#nz-st { font-size: 16.5px; line-height: 1.3; padding: 4px; }
#nz-st > header { padding: 6px 2px 0 10px; }
#nz-st > header h2 { font-size: 21px; line-height: 1.08; }
#nz-st > header button { width: 44px; height: 44px; margin-top: -3px; }
#nz-st .eyebrow { margin-bottom: 4px; }
#nz-st.hero #nz-st-medal:not([hidden]) { margin-bottom: 4px; }
#nz-st-medal.pics img { height: 34px; }
#nz-st-body { padding: 6px 10px 8px; }
#nz-st p { margin: 0 0 7px; }
#nz-st h3 { font-size: 20px; line-height: 1.12; margin: 0 0 6px; }
#nz-st .fine { font-size: 14px; line-height: 1.28; }
#nz-st .btn { min-height: 44px; margin: 0 0 6px; padding: 6px 10px; font-size: 16px; }
#nz-st .btn.go, #nz-st .btn.rec { font-size: 14.5px; }
#nz-st .btn.rec { min-height: 48px; font-size: 15.5px; }
#nz-st .row { gap: 6px; }
#nz-st .box { margin: 0 0 7px; padding: 7px 10px; }
#nz-st .ok { margin: 0 0 7px; padding: 6px 10px; }
#nz-st label.f { margin-bottom: 6px; }
#nz-st label.f input, #nz-st label.f textarea, #nz-st textarea { padding: 7px 9px; margin-top: 2px; }
#nz-st label.tick { padding: 6px 8px; margin-bottom: 5px; }
#nz-st-act { padding: 6px 10px 0; }
#nz-st-more { padding: 2px 0 3px; font-size: 11.5px; }
#nz-st-info { padding: 7px 12px 2px; font-size: 15px; }
#nz-st-info p { margin-bottom: 5px; }
/* first screen */
#nz-st .credit { gap: 10px; }
#nz-st .credit p.line { font-size: 15px; line-height: 1.32; }
#nz-st .pf figcaption { margin-top: 5px; }
#nz-st .act { margin-top: 8px; padding-top: 8px; gap: 6px; }
/* the pause screen: the support line stays, small and tight (his order: "much smaller ... less spacing above and below") */
#nz-st .support { margin: -3px 0 6px; font-size: 12px; line-height: 1.15; }
#nz-st .support a { font-weight: 500; color: var(--mut); }
/* petition page */
#nz-st.page > header { padding: 4px 4px 0 12px; }
#nz-st.page #nz-st-body { padding: 2px 14px 18px; }
#nz-st .med { margin: 6px auto 8px; gap: 10px; }
#nz-st .med figure img { height: 56px; }
#nz-st h3.name { font-size: 27px; line-height: 1.05; margin-bottom: 2px; }
#nz-st .sub { margin-bottom: 8px; font-size: 15px; }
#nz-st .orn { margin: 2px auto 10px; }
#nz-st .req { font-size: 18px; line-height: 1.34; margin-bottom: 6px; }
#nz-st details.law { margin-bottom: 10px; }
#nz-st details.law summary { min-height: 28px; }
#nz-st blockquote.para { font-size: 16px; line-height: 1.36; margin-bottom: 12px; padding-left: 12px; }
#nz-st blockquote.para footer { margin-top: 5px; }
#nz-st h3.add { margin-bottom: 8px; }
@media (max-height: 720px) and (min-height: 481px), (max-width: 380px) and (min-height: 481px) {
    #nz-st > header h2 { font-size: 20px; }
    #nz-st .credit p.line { font-size: 14px; line-height: 1.3; }
    #nz-st .act { margin-top: 7px; padding-top: 7px; }
    #nz-st h3.name { font-size: 25px; }
    #nz-st .req { font-size: 17px; }
}
@media (max-height: 480px) {
    #nz-st { padding: 3px; font-size: 15.5px; }
    #nz-st > header { padding: 4px 2px 0 10px; }
    #nz-st > header h2 { font-size: 18.5px; }
    #nz-st > header button { width: 44px; height: 34px; margin-top: 0; }
    #nz-st-body { padding: 4px 10px 5px; }
    #nz-st p { margin-bottom: 5px; }
    #nz-st .act { margin-top: 5px; padding-top: 5px; }
    #nz-st .credit p.line { font-size: 14px; line-height: 1.28; }
    #nz-st h3.name { font-size: 24px; }
}

/* =====================================================================================================================
   TIGHTER (Anthony, 11 Nov 2026 about 09:35, one word: "Tighter"). A visible step, not a trim: the first card goes from
   316 px to about 250 px on a 390 x 844 phone. His line stays 15 px; every button stays at least 44 px tall.
   This block comes last.
   ===================================================================================================================== */
#nz-st { padding: 3px; line-height: 1.26; box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px rgba(141, 107, 46, 0.55), 0 5px 18px rgba(0, 0, 0, 0.26); }
#nz-st > header { padding: 4px 0 0 9px; }
#nz-st > header h2 { font-size: 19px; line-height: 1.06; }
#nz-st > header button { margin-top: -2px; }
#nz-st .eyebrow { margin-bottom: 2px; font-size: 10.5px; }
#nz-st.hero #nz-st-medal:not([hidden]) { margin-bottom: 2px; }
#nz-st-medal.pics img { height: 22px; }
#nz-st-medal.words { font-size: 10.5px; }
#nz-st-body { padding: 4px 9px 6px; }
#nz-st p { margin: 0 0 6px; }
#nz-st h3 { font-size: 19px; margin: 0 0 5px; }
#nz-st .btn { min-height: 44px; margin: 0 0 5px; padding: 4px 8px; }
#nz-st .btn.rec { min-height: 46px; }
#nz-st .row { gap: 5px; }
#nz-st .box { margin: 0 0 6px; padding: 5px 9px; }
#nz-st .ok { margin: 0 0 6px; padding: 4px 9px; }
#nz-st .q { margin-bottom: 7px; line-height: 1.22; }
#nz-st label.f { margin-bottom: 5px; }
#nz-st label.f input, #nz-st label.f textarea, #nz-st textarea { padding: 6px 8px; }
#nz-st label.tick { padding: 5px 7px; margin-bottom: 4px; }
#nz-st-act { padding: 5px 9px 0; }
#nz-st .support { margin: -3px 0 5px; }
/* first screen: a wide, short photo (all three faces kept), his line beside it on about four lines, then two rows of 44 px buttons */
#nz-st .credit { gap: 9px; align-items: flex-start; }
#nz-st .credit p.line { font-size: 15px; line-height: 1.27; }
#nz-st .pf figcaption { margin-top: 4px; }
#nz-st .act { margin-top: 5px; padding-top: 5px; gap: 5px; }
#nz-st .act .btn { min-height: 44px; }
#nz-st .act .pair { grid-template-columns: 1.55fr 1fr; gap: 5px; }
#nz-st .act .pair .btn { white-space: nowrap; font-size: 15px; padding: 4px 4px; }
@media (min-height: 481px) {
    #nz-st .pf { width: 116px; }
    #nz-st .credit .ph img { width: 116px; height: 62px; object-position: 50% 20%; }
    #nz-st .pf figcaption { font-size: 9px; }
    #nz-st .credit.big .pf { width: 100%; } #nz-st .credit.big .ph img { width: 100%; height: auto; }
}
@media (max-width: 380px) and (min-height: 481px) {
    #nz-st > header h2 { font-size: 18.5px; }
    #nz-st .act .pair .btn { font-size: 14px; letter-spacing: -0.01em; }
    #nz-st .pf { width: 110px; } #nz-st .credit .ph img { width: 110px; height: 60px; }
    #nz-st .credit.big .pf { width: 100%; } #nz-st .credit.big .ph img { width: 100%; height: auto; }
}
/* petition page, top */
#nz-st.page > header { padding: 2px 2px 0 10px; }
#nz-st.page #nz-st-body { padding: 0 12px 16px; }
#nz-st.page .eyebrow.c { margin-bottom: 4px; }
#nz-st .med { margin: 2px auto 5px; }
#nz-st .med figure img { height: 46px; }
#nz-st h3.name { font-size: 25px; margin-bottom: 1px; }
#nz-st .sub { margin-bottom: 5px; font-size: 14.5px; }
#nz-st .orn { margin: 0 auto 7px; }
#nz-st .req { font-size: 17.5px; line-height: 1.3; margin-bottom: 4px; }
#nz-st details.law { margin-bottom: 7px; }
#nz-st blockquote.para { line-height: 1.33; margin-bottom: 10px; }
#nz-st h3.add { margin-bottom: 6px; }
@media (max-height: 480px) {
    #nz-st > header h2 { font-size: 18px; }
    #nz-st > header button { margin-top: 0; }
    #nz-st .act .pair .btn { white-space: normal; }
    #nz-st.wide .act .pair .btn { white-space: nowrap; }
    #nz-st-medal.pics img { height: 20px; }
}

/* Anthony, 11 Nov 2026 about 09:37: "what's with that plus sign that's over Mosley's hand?" Nothing is drawn over anyone in the photo.
   Tapping the photo still enlarges it; there is simply no mark on it. */
#nz-st .credit .ph::after, #nz-st .credit.big .ph::after { content: none; display: none; }

/* =====================================================================================================================
   ALIGNED (Anthony, 11 Nov 2026 about 11:05: "I keep telling you about space. You got to align things properly.")
   HARD RULE for every screen of the card: ONE left edge and ONE right edge for all content (title, photo, line, rule,
   buttons); the close X sits on the title's row with its mark on the right edge; no empty band above the title; equal gaps.
   The words "Navy Cross -> Medal of Honor" stay above the title in both states. The two medal pictures, when the switch
   allows them, sit to the right of the title on the title's own line. The small "i" is gone from the card.
   This block comes last.
   ===================================================================================================================== */
#nz-st #nz-st-i { display: none !important; }
#nz-st > header { display: block; padding: 5px 9px 0; }
#nz-st > header .hd { display: block; }
#nz-st #nz-st-words { display: none; }
#nz-st.hero #nz-st-words:not([hidden]) { display: flex; justify-content: flex-start; margin: 0 0 2px; }
#nz-st .trow { display: flex; align-items: center; gap: 9px; }
#nz-st .trow h2 { flex: 0 1 auto; min-width: 0; margin: 0; white-space: nowrap; }
#nz-st #nz-st-medal, #nz-st.hero #nz-st-medal[hidden] { display: none; }
#nz-st.hero #nz-st-medal:not([hidden]) { display: flex; flex: none; align-items: center; gap: 5px; height: 34px; margin: 0; padding: 0; background: none; color: var(--gold); }
#nz-st #nz-st-medal img { display: block; height: 34px; width: auto; }
#nz-st #nz-st-medal svg { flex: none; width: 16px; height: 6px; }
/* the close mark: a 44 px tap area that adds no height to the row, with the mark itself on the content's right edge */
#nz-st #nz-st-x { flex: none; display: grid; place-items: center end; width: 44px; height: 44px; margin: -12px 0 -12px auto; padding: 0; border: 0; background: transparent; color: var(--mut); cursor: pointer; }
#nz-st #nz-st-x:focus-visible { outline: 2px solid var(--gold); outline-offset: -6px; }
#nz-st-body { padding: 5px 9px 5px; }
/* equal 4 px gaps around the rule and between the buttons */
#nz-st .act { margin-top: 4px; padding-top: 4px; gap: 4px; }
#nz-st .act .pair { gap: 4px; }
/* the photo's frame is part of its box, so its left edge is the same edge as the title, the rule and the buttons */
#nz-st .pf { width: 116px; }
#nz-st .credit { margin: 0; gap: 7px; }
/* his line never ends on a lone word */
#nz-st .credit p.line { text-wrap: pretty; }
#nz-st .credit .ph { outline: none; border: 1px solid rgba(141, 107, 46, 0.6); box-sizing: content-box; }
#nz-st .pf figcaption { padding: 0 1px; }
@media (min-height: 481px) {
    #nz-st .credit .ph img { width: 114px; height: 52px; object-position: 50% 18%; }
    #nz-st .credit.big .pf { width: 100%; } #nz-st .credit.big .ph { box-sizing: border-box; } #nz-st .credit.big .ph img { width: 100%; height: auto; }
}
@media (max-width: 380px) and (min-height: 481px) {
    #nz-st .pf { width: 112px; } #nz-st .credit .ph img { width: 110px; height: 52px; }
    #nz-st.hero #nz-st-medal:not([hidden]) { height: 30px; gap: 4px; } #nz-st #nz-st-medal img { height: 30px; } #nz-st #nz-st-medal svg { width: 13px; }
    #nz-st .trow { gap: 7px; }
    #nz-st .credit.big .pf { width: 100%; } #nz-st .credit.big .ph img { width: 100%; height: auto; }
}
/* petition page: "Return to the hill" on the left edge, the close mark on the right edge, same row */
#nz-st.page > header { display: flex; align-items: center; padding: 4px 12px 0; }
#nz-st.page > header .hd { visibility: visible; height: auto; overflow: visible; flex: none; margin-left: auto; }
#nz-st.page .hd h2, #nz-st.page #nz-st-words, #nz-st.page #nz-st-medal { display: none !important; }
#nz-st.page > header #nz-st-back { padding: 0; margin: 0; }
#nz-st.page #nz-st-x { margin: 0; }
/* the lines that used to be behind the "i": small print at the foot of the petition page */
#nz-st .about { margin: 10px auto 0; padding-top: 8px; border-top: 1px solid rgba(141, 107, 46, 0.45); }
#nz-st .about p { margin: 0 0 3px; font-size: 12.5px; line-height: 1.3; color: var(--mut); text-align: center; }
@media (max-height: 480px) {
    /* sideways, card lying flat (.wide): one row: title, the words, the medal pictures where there is room, the close mark.
       A sideways card that is NOT lying flat (the column between the sticks) keeps the upright order: words above, then the title row. */
    #nz-st > header { padding: 4px 9px 0; }
    #nz-st.wide > header .hd { display: flex; align-items: center; gap: 12px; }
    #nz-st.wide .trow { display: contents; }
    #nz-st.wide .trow h2 { order: 1; flex: none; }
    #nz-st.wide.hero #nz-st-words:not([hidden]) { order: 2; margin: 0; font-size: 9.5px; letter-spacing: 0.14em; white-space: nowrap; }
    #nz-st.wide.hero #nz-st-medal:not([hidden]) { order: 3; }
    #nz-st.wide #nz-st-x { order: 4; }
    #nz-st.hero #nz-st-medal:not([hidden]) { height: 26px; } #nz-st #nz-st-medal img { height: 26px; }
    #nz-st.hero #nz-st-words:not([hidden]) { font-size: 9.5px; }
    #nz-st #nz-st-x { height: 34px; margin: -6px 0 -6px auto; }
    #nz-st .trow h2 { white-space: normal; }
    #nz-st.wide .trow h2 { white-space: nowrap; }
    #nz-st .pf { width: 120px; }
    #nz-st.page > header .hd { display: block; }
}
@media (max-height: 480px) and (max-width: 760px) { #nz-st.hero #nz-st-medal:not([hidden]) { display: none; } }

/* After the round-11 review (sideways had failed the one-edge rule): */
/* 1. petition page: the "Return to the hill" row, the text and the "More below" bar are ONE column with one left and one right edge */
#nz-st.page > header, #nz-st.page #nz-st-body, #nz-st.page #nz-st-more, #nz-st.page #nz-st-act { box-sizing: border-box; width: 100%; max-width: 584px; margin-left: auto; margin-right: auto; }
#nz-st.page > header { padding: 4px 12px 0; }
#nz-st.page #nz-st-body { padding: 0 12px 16px; }
#nz-st.page #nz-st-body > * { max-width: none; }
/* 2. the flat sideways card is only as wide as its content needs, so no empty block sits beside his line or between the medals and the close mark */
@media (max-height: 480px) {
    #nz-st.wide { max-width: 560px; margin: 0 auto; }
    #nz-st.wide .credit p.line { text-wrap: wrap; }
}
@media (max-height: 480px) { #nz-st.wide.hero #nz-st-medal:not([hidden]) { height: 24px; } #nz-st.wide #nz-st-medal img { height: 24px; } #nz-st.wide > header .hd { gap: 9px; } }
/* 3. "Saved." and the sentence after it sit on one row; the sentence wraps beside the chip, never under it */
#nz-st p.count { display: flex; align-items: center; gap: 8px; }
#nz-st p.count .okin { flex: none; margin-right: 0; }
/* 4. the small support line on the pause screen: one unbroken underline */
#nz-st .support a { text-decoration-skip-ink: none; }

/* After the second sideways review (11 Nov 2026): */
/* the "More below" bar on the petition page is exactly as wide as the text, not 12 px wider on each side */
#nz-st.page #nz-st-more { width: calc(100% - 24px); max-width: 560px; }
@media (max-height: 480px) {
    /* the flat card is only as wide as its title row needs, so no slack sits before the close mark; his line is centred against the photo */
    #nz-st.wide { max-width: 496px; }
    #nz-st.wide.pics { max-width: 560px; }
    #nz-st.wide .credit { align-items: center; }
}

/* ===== 11 Nov 2026, after the Price sentence was added to his line (reviewer, round 14) =====
   1. Upright: the line is now up to five rows, taller than the small photo, which left an empty band under the three last names.
      The photo now grows to the height of the words beside it (it only shows MORE of the same picture; the file is 3:2 and was cropped flat),
      so the names always end level with the last row of words. Never when the photo is enlarged, never on the flat sideways card. */
#nz-st:not(.wide) .credit:not(.big) { align-items: stretch; }
#nz-st:not(.wide) .credit:not(.big) .pf { display: flex; flex-direction: column; }
#nz-st:not(.wide) .credit:not(.big) .ph { position: relative; flex: 1 1 auto; min-height: 52px; }
#nz-st:not(.wide) .credit:not(.big) .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
/* 2. Narrowest phones: on the petition page the words "Navy Cross -> Medal of Honor" stay on ONE centred row */
#nz-st .med.words { flex-wrap: nowrap; }
#nz-st .med.words span { white-space: nowrap; }
@media (max-width: 380px) { #nz-st .med.words { gap: 8px; } #nz-st .med.words span { font-size: 13px; letter-spacing: 0.1em; } #nz-st .med.words svg { width: 28px; } }