:root {
    --charcoal: #252426;
    --charcoal-soft: #39373a;
    --paper: #f7f4ee;
    --surface: #ffffff;
    --ink: #272528;
    --muted: #6a6664;
    --red: #d8281d;
    --red-dark: #af1c14;
    --gold: #c69642;
    --border: #ded9d1;
    --shadow: 0 12px 32px rgba(29, 25, 22, 0.12);
}

* { box-sizing: border-box; }
html { font-size: 18px; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.55;
}
a { color: var(--red-dark); }
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
body.leseecke-body { padding-top: 150px; }
body.leseecke-body button:not(.buttonNewsletter), body.leseecke-body input { font: inherit; }

.site-header {
    min-height: 96px;
    display: grid;
    place-items: center;
    padding: 20px;
    color: white;
    background:
        linear-gradient(90deg, rgba(255,255,255,.03), transparent 45%, rgba(255,255,255,.04)),
        repeating-linear-gradient(0deg, #272629 0, #272629 3px, #2d2c2f 4px, #2d2c2f 7px);
}
.brand {
    display: flex;
    align-items: baseline;
    gap: 12px;
    color: white;
    text-decoration: none;
    text-shadow: 0 2px 2px #000;
}
.brand-main { font-family: Georgia, serif; font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 700; }
.brand-heart { color: var(--red); font-size: 1.8rem; }
.brand-script { font-family: "Brush Script MT", cursive; font-size: clamp(1.7rem, 4.6vw, 2.5rem); }

.site-nav {
    min-height: 0;
    padding: 7px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    background: #f4f4f4;
    border-bottom: 1px solid var(--border);
}
.site-nav-links { display: flex; align-items: center; width: 100%; }
.leseecke-menu-toggle { display: none; }
.site-nav a, .nav-button {
    color: var(--ink);
    display: inline-block;
    padding: 10px 15px;
    font-family: Arial, sans-serif;
    font-size: calc(.5em + 1vmin);
    font-weight: 700;
    text-decoration: none;
}
.site-nav-links form { margin-left: auto; }
.nav-button { border: 0; background: transparent; cursor: pointer; }
.site-nav a:hover, .nav-button:hover { color: var(--ink); background: #ddd; border-radius: 5px; }

.page-shell { width: min(1120px, calc(100% - 32px)); margin: 42px auto 70px; }
.narrow-shell { width: min(620px, calc(100% - 32px)); }
.title-plaque {
    margin: 0 auto 32px;
    padding: 22px 28px;
    color: white;
    text-align: center;
    background: linear-gradient(145deg, #3b393b, #222124);
    border-radius: 12px;
    box-shadow: var(--shadow);
}
.title-plaque h1 { margin: 4px 0 0; font-size: 1.45rem; }
.script-line { font-family: "Brush Script MT", cursive; font-size: 1.5rem; }
.login-title-board {
    margin: 0 auto 32px;
    padding: 0;
    color: white;
    text-align: center;
    background: none;
    border-radius: 0;
    box-shadow: none;
}
.h1-container.login-title-board .separator-box .separator-title .seperator-title-suett {
    font-family: suetterlinFont, "Brush Script MT", cursive;
    font-size: clamp(1.65rem, 4.3vw, 2.25rem) !important;
    font-weight: 400;
    line-height: 1.15;
}
.h1-container.login-title-board .separator-box .separator-title h1 {
    margin: 8px 0 0;
    color: white;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.65rem, 4.4vw, 2.2rem);
    line-height: 1.2;
}

.login-card, .setup-card, .account-card, .account-setting-card, .sessions-card, .notice-card, .purchase-test-card {
    padding: clamp(24px, 5vw, 42px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
}
.purchase-test-card h1 { margin: 5px 0 14px; font-family: Georgia, serif; text-align: center; }
.purchase-test-card > p:not(.eyebrow) { color: var(--muted); text-align: center; }
.stripe-button-wrap { display: grid; min-height: 90px; margin: 28px 0 10px; place-items: center; }
.purchase-success-card .secondary-button { margin-top: 20px; }
.login-card h2, .setup-card h1 { margin-top: 0; text-align: center; }
.intro { color: var(--muted); text-align: center; }
.stack-form { display: grid; gap: 10px; margin-top: 24px; }
.stack-form label { margin-top: 8px; font-weight: 700; }
.stack-form input {
    width: 100%;
    min-height: 52px;
    padding: 10px 14px;
    border: 2px solid #cbc5bd;
    border-radius: 8px;
    background: white;
}
.stack-form input:focus { outline: 3px solid rgba(216, 40, 29, .18); border-color: var(--red); }
.primary-button, .secondary-button {
    min-height: 50px;
    padding: 11px 18px;
    border-radius: 8px;
    border: 0;
    font-weight: 700;
    cursor: pointer;
}
.primary-button { margin-top: 16px; color: white; background: var(--red); }
.primary-button:hover { background: var(--red-dark); }
.primary-button:disabled { cursor: not-allowed; opacity: .55; }
.secondary-button { color: var(--red-dark); background: #fff0ee; border: 1px solid #efc2bd; }
.button-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.full-button { width: 100%; }
.muted-note { margin-top: 24px; color: var(--muted); font-size: .9rem; text-align: center; }
.form-error, .form-success, .flash {
    margin: 18px 0;
    padding: 14px 16px;
    border-radius: 8px;
}
.form-error { color: #7e1710; background: #ffebe8; border: 1px solid #efb5af; }
.form-success, .flash-success { color: #185b2b; background: #eaf7ed; border: 1px solid #b6dfc0; }
.flash-info { color: #5a4910; background: #fff8d9; border: 1px solid #eadb93; }
.flash { width: min(900px, calc(100% - 32px)); margin: 20px auto; }

.archive-hero {
    padding: clamp(24px, 4vw, 38px);
    color: white;
    text-align: center;
    background: linear-gradient(145deg, var(--charcoal-soft), var(--charcoal));
    border-radius: 18px;
    box-shadow: var(--shadow);
}
.archive-hero h1 { margin: 4px 0 6px; font-family: Georgia, serif; font-size: clamp(1.85rem, 4vw, 2.7rem); }
.archive-hero > p:not(.eyebrow) { margin: 8px 0; }
.eyebrow { margin: 0; color: var(--gold); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
.access-badge { display: inline-block; margin-top: 10px; padding: 7px 13px; color: var(--ink); background: #f6e9c9; border-radius: 999px; }
.usage-note { margin: 28px 0 42px; padding: 18px 22px; background: #fffaf0; border-left: 5px solid var(--gold); border-radius: 8px; }
.year-section { margin-top: 42px; }
.year-section > h2 { font-family: Georgia, serif; font-size: 1.7rem; border-bottom: 2px solid var(--gold); padding-bottom: 8px; }
.issue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.issue-card { padding: 24px; scroll-margin-top: 280px; background: white; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 7px 20px rgba(35,31,28,.08); }
.issue-card h3 { margin: 5px 0; font-size: 1.25rem; }
.issue-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.issue-date { color: var(--red-dark); font-weight: 800; }
.issue-global-stats { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: end; gap: 5px; line-height: 1.1; }
.issue-rating-row, .issue-views-row { display: block; width: 100%; text-align: right; }
.issue-rating { color: var(--gold); font-size: 1rem; letter-spacing: .03em; white-space: nowrap; }
.issue-rating small { margin-left: 3px; color: var(--muted); font-size: .7rem; letter-spacing: 0; }
.issue-views { color: var(--muted); font-size: .8rem; font-weight: 700; }
.views-eye {
    position: relative;
    display: inline-block;
    width: 15px;
    height: 10px;
    margin-right: 4px;
    border: 2px solid currentColor;
    border-radius: 70% 30% 70% 30%;
    transform: translateY(1px) rotate(8deg);
}
.views-eye::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.access-renewal-card { text-align: center; }
.access-renewal-card > p:not(.eyebrow) { max-width: 760px; margin-right: auto; margin-left: auto; }
.access-renewal-card .primary-button { margin-top: 24px; }
.renewal-email-note { padding: 13px 16px; color: #5a4910; background: #fff8d9; border: 1px solid #eadb93; border-radius: 8px; }
.renewal-smallprint { color: var(--muted); font-size: .86rem; }
.issue-code { color: var(--muted); font-size: .88rem; font-weight: 650; }
.issue-actions { display: grid; gap: 10px; margin-top: 20px; }
.issue-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 50px;
    padding: 11px 14px;
    border: 1px solid #d9c7a5;
    border-radius: 8px;
    color: var(--ink);
    background: #fffaf0;
    font-weight: 750;
    line-height: 1.3;
    text-decoration: none;
}
.issue-button:hover, .issue-button:focus-visible { border-color: var(--gold); background: #fff3d9; }
.issue-button-primary { color: white; border-color: var(--red); background: var(--red); }
.issue-button-primary:hover, .issue-button-primary:focus-visible { color: white; border-color: var(--red-dark); background: var(--red-dark); }

.viewer-page { width: min(1440px, calc(100% - 24px)); margin: 24px auto 50px; }
.pdf-viewer { overflow: hidden; background: #343235; border-radius: 14px; box-shadow: var(--shadow); }
.viewer-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 24px; color: white; background: #242326; }
.viewer-heading h1 { margin: 4px 0 0; font: 700 clamp(1.25rem, 3vw, 1.8rem)/1.25 Georgia, serif; }
.viewer-heading p { margin: 5px 0 0; color: #d8d4cf; font-size: .9rem; }
.viewer-back { color: #f0cc85; font-weight: 700; text-decoration: none; }
.viewer-back:hover { color: white; }
.viewer-rating { min-width: 280px; text-align: right; }
.viewer-rating-label { display: block; color: #f0cc85; font-size: .78rem; font-weight: 700; }
.viewer-rating small { display: block; margin-top: 3px; color: #d8d4cf; font-size: .68rem; }
.rating-form { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; margin-top: 2px; }
.rating-form button {
    padding: 0 2px;
    color: #918c91;
    border: 0;
    background: transparent;
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
}
.rating-form button:hover, .rating-form button:focus-visible,
.rating-form button:hover ~ button, .rating-form button:focus-visible ~ button { color: var(--gold); outline: none; }
.rating-form button:focus-visible { box-shadow: 0 0 0 2px #f0cc85; border-radius: 3px; }
.rating-locked { display: block; color: var(--gold); font-size: 1.35rem; letter-spacing: .04em; }
.viewer-toolbar {
    position: sticky;
    z-index: 5;
    top: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    color: white;
    background: #454247;
    border-bottom: 1px solid #625e64;
}
.toolbar-group { display: flex; align-items: center; gap: 8px; }
.toolbar-actions { margin-left: auto; }
.viewer-control {
    min-height: 44px;
    padding: 8px 12px;
    color: white;
    border: 1px solid #777278;
    border-radius: 7px;
    background: #555158;
    font-weight: 700;
    cursor: pointer;
}
.viewer-control:hover, .viewer-control:focus-visible, .viewer-control[aria-pressed="true"] { border-color: #e5bd72; background: #6b6360; outline: none; }
.viewer-control:focus-visible, .page-control input:focus-visible { box-shadow: 0 0 0 3px rgba(229, 189, 114, .35); }
.viewer-control:disabled { cursor: not-allowed; opacity: .45; }
.viewer-print { border-color: #e7493f; background: var(--red); }
.viewer-print:hover, .viewer-print:focus-visible { border-color: #ff776e; background: var(--red-dark); }
.page-control { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: .9rem; }
.page-control input { width: 64px; height: 44px; padding: 4px 6px; border: 1px solid #8b858c; border-radius: 6px; text-align: center; }
.viewer-message { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; padding: 16px; color: white; background: #39373a; }
.viewer-message[hidden] { display: none; }
.viewer-message[data-type="error"] { color: #7e1710; background: #ffebe8; }
.viewer-spinner { width: 22px; height: 22px; border: 3px solid #777278; border-top-color: #f0cc85; border-radius: 50%; animation: viewer-spin .8s linear infinite; }
.viewer-message[data-type="error"] .viewer-spinner { display: none; }
@keyframes viewer-spin { to { transform: rotate(360deg); } }
.canvas-stage {
    min-height: 62vh;
    max-height: calc(100vh - 190px);
    overflow: auto;
    padding: 22px;
    text-align: center;
    background: #5c595e;
    overscroll-behavior: contain;
}
.canvas-stage:focus { outline: 3px solid rgba(229, 189, 114, .45); outline-offset: -3px; }
#pdf-canvas { display: block; max-width: none; margin: 0 auto; background: white; box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.viewer-help { padding: 16px 22px; color: #efede9; background: #343235; font-size: .9rem; }
.print-pages { display: none; }
.pdf-viewer:fullscreen { width: 100%; height: 100%; border-radius: 0; }
.pdf-viewer:fullscreen .canvas-stage { max-height: calc(100vh - 190px); }

.account-card, .sessions-card { margin-bottom: 24px; }
.account-card h1 { overflow-wrap: anywhere; }
.account-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.account-details div { padding: 16px; background: #f7f5f1; border-radius: 8px; }
.account-details dt { color: var(--muted); font-size: .85rem; }
.account-details dd { margin: 3px 0 0; font-weight: 800; }
.account-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; }
.account-setting-card h2 { margin-top: 0; }
.account-setting-card > p { color: var(--muted); }
.session-list { display: grid; gap: 12px; margin-top: 24px; }
.session-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 9px; }
.session-row span { display: block; margin-top: 3px; color: var(--muted); font-size: .88rem; }
.next-steps { padding-left: 24px; }
code { padding: 2px 5px; background: #f0ede8; border-radius: 4px; }

.site-footer { padding: 30px 20px; color: #ddd; text-align: center; background: var(--charcoal); font-size: .85rem; }

@media (max-width: 900px) {
    .issue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
    html { font-size: 17px; }
    .site-nav { align-items: stretch; flex-direction: column; gap: 0; flex-wrap: nowrap; }
    .leseecke-menu-toggle {
        display: inline-flex;
        align-items: center;
        align-self: flex-start;
        justify-content: center;
        width: 44px;
        min-height: 40px;
        padding: 4px 10px;
        border: 0;
        color: var(--ink);
        background: transparent;
        cursor: pointer;
        font-size: 1.45rem;
        line-height: 1;
    }
    .leseecke-menu-toggle:hover,
    .leseecke-menu-toggle:focus-visible { background: #ddd; border-radius: 5px; }
    .site-nav-links { display: none; align-items: stretch; flex-direction: column; width: 100%; padding: 4px 0 8px; }
    .site-nav-links.is-open { display: flex; }
    .site-nav-links form { margin-left: 0; }
    .site-nav a, .nav-button { width: 100%; text-align: right; }
    .session-row { align-items: flex-start; flex-direction: column; }
    .secondary-button { width: 100%; }
    .viewer-page { width: 100%; margin: 0 0 30px; }
    .pdf-viewer { border-radius: 0; }
    .viewer-heading { padding: 14px 16px; }
    .viewer-heading { align-items: flex-start; flex-direction: column; }
    .viewer-rating { min-width: 0; width: 100%; text-align: left; }
    .viewer-toolbar { position: relative; align-items: stretch; flex-direction: column; }
    .toolbar-group { display: grid; grid-template-columns: repeat(3, 1fr); }
    .toolbar-group:nth-child(2) { grid-template-columns: repeat(2, 1fr); }
    .toolbar-actions { width: 100%; margin-left: 0; grid-template-columns: 1fr 1fr; }
    .page-control { justify-content: center; }
    .viewer-control { padding: 7px 8px; font-size: .88rem; }
    .canvas-stage { min-height: 55vh; max-height: 70vh; padding: 12px; }
    .viewer-help { font-size: .85rem; }
    .account-settings-grid { grid-template-columns: 1fr; }
    .issue-card-top { gap: 8px; }
    .issue-grid { grid-template-columns: 1fr; }
}

@media print {
    @page { size: A4 portrait; margin: 0; }
    body, body.leseecke-body { margin: 0; padding: 0; background: white; }
    body > :not(.viewer-page), .pdf-viewer { display: none !important; }
    .viewer-page { width: auto; margin: 0; }
    .print-pages { display: block; }
    .print-pages canvas {
        display: block;
        width: 209mm;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        break-inside: avoid;
        page-break-inside: avoid;
        break-after: page;
        page-break-after: always;
    }
    .print-pages canvas:last-child { break-after: auto; page-break-after: auto; }
}