:root {
    font-family:Arial,Helvetica,sans-serif;
    color:var(--ink);
    background:var(--paper);
    font-size:20px;
}

* {
    box-sizing:border-box;
}

body {
    margin:0;
}

button,input {
    font:inherit;
}

a {
    color:inherit;
}

button,a,input,summary,[tabindex] {
    -webkit-tap-highlight-color:transparent;
}

button,a,summary {
    touch-action:manipulation;
}

button {
    cursor:pointer;
}

button:focus,a:focus,input:focus,summary:focus,[tabindex]:focus {
    outline:4px solid var(--ink);
    outline-offset:5px;
    box-shadow:0 0 0 5px #fff,0 0 0 11px #fff;
}

a {
    text-decoration:none;
}

button {
    color:inherit;
}

[hidden] {
    display:none!important;
}

.app-header {
    max-width:1440px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:32px 48px;
    gap:24px;
}

.app-brand {
    display:flex;
    align-items:center;
    min-width:0;
}

.app-brand__logo {
    display:block;
    width:240px;
    max-width:100%;
    height:auto;
}

.app-person {
    font-size:20px;
    overflow-wrap:anywhere;
}

.app-main,.app-footer {
    max-width:1344px;
    margin:auto;
    padding:0 32px 40px;
}

.app-nav {
    display:flex;
    gap:16px;
    max-width:1344px;
    margin:8px auto 0;
    padding:0 32px;
}

.app-nav a {
    display:flex;
    gap:14px;
    align-items:center;
    justify-content:center;
    min-height:76px;
    min-width:220px;
    border:2px solid var(--control-border);
    background:white;
    border-radius:14px;
    font-size:25px;
    font-weight:bold;
    padding:16px 32px;
}

.app-nav a[aria-current] {
    background:var(--ink);
    border-color:var(--ink);
    color:white;
}

.app-nav span {
    font-size:30px;
}

.page-heading {
    padding:42px 0 28px;
}

.page-heading h1 {
    margin:8px 0 12px;
    font-size:48px;
    letter-spacing:-1.5px;
}

.page-heading p {
    margin:0;
    line-height:1.5;
    color:var(--muted);
}

.eyebrow {
    font-size:15px;
    letter-spacing:2px;
    font-weight:bold;
}

.app-button {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:16px;
    min-height:64px;
    padding:16px 24px;
    border:2px solid var(--control-border);
    border-radius:12px;
    font-weight:bold;
    line-height:1.2;
    text-align:center;
}

.primary {
    background:var(--action);
    border-color:var(--action);
    color:white;
}

.secondary {
    background:white;
}

.app-button:not(.primary):hover,.number-pad button:hover {
    background:var(--surface-soft);
}
.app-button.primary:hover,.app-button.primary:active {
    background:var(--ink);
    border-color:var(--ink);
}

.login-shell {
    display:grid;
    grid-template-columns:1fr 440px;
    align-items:center;
    gap:80px;
    max-width:1100px;
    margin:46px auto;
}

.login-intro h1 {
    font-size:clamp(38px,4vw,58px);
    letter-spacing:-2px;
    line-height:1.15;
    margin:22px 0;
}

.login-intro>p {
    font-size:25px;
    line-height:1.5;
}

.login-intro .login-note {
    font-size:18px;
    max-width:320px;
    color:var(--muted);
    margin-top:36px;
}

.login-card {
    background:white;
    border:1px solid var(--control-border);
    border-radius:24px;
    padding:32px;
    box-shadow:0 12px 40px rgba(46,76,111,.04);
}

.login-card label {
    display:block;
    font-weight:bold;
    margin-bottom:12px;
}

.login-card input {
    width:100%;
    height:76px;
    text-align:center;
    font-size:36px;
    letter-spacing:5px;
    border:2px solid var(--control-border);
    border-radius:12px;
    color:var(--ink);
    background:var(--white);
}

.login-card input::placeholder {
    color:var(--muted);
    opacity:1;
}

.field-help {
    font-size:16px;
    color:var(--muted);
    line-height:1.4;
    margin:14px 0 22px;
}

.number-pad {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.number-pad button {
    border:1px solid var(--control-border);
    border-radius:10px;
    background:var(--surface-soft);
    min-height:62px;
    font-size:28px;
    font-weight:bold;
}

.number-pad .small-key {
    font-size:15px;
}

.start-button {
    width:100%;
    margin-top:20px;
    justify-content:space-between;
}

.error,.notice {
    font-size:18px;
    line-height:1.5;
    border-radius:10px;
    padding:16px;
}

.error {
    background:#fff0e9;
    color:#832f12;
}

.notice {
    background:var(--surface-soft);
}

.content-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.content-card {
    background:#fff;
    border:1px solid var(--control-border);
    border-radius:20px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.card-image,.card-art {
    width:100%;
    height:200px;
    object-fit:cover;
}

.card-art {
    display:grid;
    place-items:center;
    font-family:Georgia,serif;
    font-size:72px;
    background:var(--surface-soft);
    color:var(--ink);
}

.art-video {
    background:var(--accent-soft);
    color:var(--ink);
}

.art-text {
    background:var(--surface-soft);
    color:var(--ink);
}

.card-body {
    padding:26px;
    flex:1;
    display:flex;
    flex-direction:column;
}

.card-type {
    font-size:16px;
    color:var(--muted);
}

.card-body h2 {
    font-size:27px;
    line-height:1.25;
    margin:12px 0 28px;
    overflow-wrap:anywhere;
}

.card-open {
    margin-top:auto;
    font-weight:bold;
    display:flex;
    justify-content:space-between;
}

.empty-state,.simple-card {
    background:#fff;
    border:1px solid var(--control-border);
    border-radius:20px;
    padding:48px;
    max-width:900px;
}

.empty-state>span {
    font-size:46px;
    color:var(--action);
}

.empty-state h2 {
    font-size:30px;
}

.empty-state p,.simple-card p {
    line-height:1.6;
}

.simple-card {
    margin:60px auto;
}

.message-list {
    max-width:960px;
    display:grid;
    gap:24px;
}

.message-card {
    background:#fff;
    border:1px solid var(--control-border);
    border-left:6px solid var(--accent);
    border-radius:16px;
    padding:32px;
}

.message-meta {
    display:flex;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}

.message-meta time {
    font-size:18px;
    color:var(--muted);
}

.message-body {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    font-size:28px;
    line-height:1.65;
    margin-bottom:0;
}

.message-pages {
    display:flex;
    gap:32px;
    padding-top:32px;
}

.message-pages a {
    display:block;
    padding:18px;
    border:1px solid var(--control-border);
    border-radius:10px;
    background:white;
}

.app-footer {
    margin-top:24px;
    font-size:18px;
}

.app-footer details {
    max-width:500px;
}

.app-footer summary {
    cursor:pointer;
    min-height:48px;
    padding:12px;
    width:fit-content;
}

.back-button {
    margin:32px 0 24px;
}

.reading-card {
    background:white;
    border:1px solid var(--control-border);
    border-radius:20px;
    padding:40px;
    max-width:1120px;
}

.reading-card h1 {
    font-size:38px;
    line-height:1.25;
    margin-top:0;
    overflow-wrap:anywhere;
}

.content-description {
    font-size:26px;
    line-height:1.65;
    overflow-wrap:anywhere;
    overflow-x:auto;
}

.content-description a {
    text-decoration:underline;
}

.content-image {
    display:block;
    max-width:100%;
    max-height:65vh;
    object-fit:contain;
    margin:24px auto;
}

.reading-card figure {
    margin:24px 0;
}

.reading-card figcaption {
    text-align:center;
}

.reading-card audio,.reading-card video {
    width:100%;
    margin:24px 0;
}

.playback-controls {
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.video-frame {
    position:relative;
    padding-top:56.25%;
    margin-top:24px;
    background:var(--ink);
}

.video-frame iframe {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}

.connection-message {
    position:fixed;
    bottom:16px;
    left:5%;
    width:90%;
    padding:20px;
    background:#fff0d5;
    border:2px solid #95610d;
    border-radius:12px;
    z-index:5;
}

@media(min-width:1700px) {
    :root {
        font-size:26px;
    }
    .app-main,.app-nav,.app-footer {
        max-width:1600px;
    }
    .app-header {
        max-width:1680px;
        padding-top:48px;
    }
    .login-shell {
        max-width:1400px;
        grid-template-columns:1fr 520px;
        margin:70px auto;
    }
    .login-intro h1 {
        font-size:76px;
    }
    .login-intro>p {
        font-size:32px;
    }
    .login-card {
        padding:40px;
    }
    .number-pad button {
        min-height:80px;
        font-size:36px;
    }
    .login-card input {
        height:96px;
    }
    .app-nav a {
        font-size:32px;
        min-height:88px;
    }
    .page-heading h1 {
        font-size:64px;
    }
    .card-image,.card-art {
        height:260px;
    }
    .card-body h2 {
        font-size:34px;
    }
    .message-body,.content-description {
        font-size:32px;
    }
}

@media(max-width:1000px) {
    .login-shell {
        gap:36px;
        grid-template-columns:1fr 390px;
    }
    .login-intro h1 {
        font-size:42px;
    }
    .content-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .app-header {
        padding:24px 32px;
    }
}

@media(max-width:720px) {
    :root {
        font-size:18px;
    }
    .app-header {
        padding:20px;
    }
    .app-brand__logo {
        width:180px;
    }
    .app-main,.app-footer {
        padding:0 20px 28px;
    }
    .login-shell {
        display:block;
        margin:16px auto;
        max-width:440px;
    }
    .login-intro {
        text-align:center;
    }
    .login-intro .eyebrow {
        display:none;
    }
    .login-intro h1 {
        font-size:34px;
        letter-spacing:-1px;
        margin:14px 0;
    }
    .login-intro h1 br {
        display:none;
    }
    .login-intro>p {
        font-size:20px;
        margin:12px 0 20px;
    }
    .login-intro>p br {
        display:none;
    }
    .login-intro .login-note {
        display:none;
    }
    .login-card {
        padding:24px;
    }
    .login-card input {
        height:64px;
        font-size:30px;
    }
    .number-pad button {
        min-height:54px;
    }
    .app-nav {
        padding:0 20px;
        gap:12px;
    }
    .app-nav a {
        flex:1;
        min-width:0;
        min-height:66px;
        font-size:22px;
        padding:14px;
    }
    .app-nav span {
        font-size:24px;
    }
    .page-heading {
        padding-top:30px;
    }
    .page-heading h1 {
        font-size:38px;
    }
    .content-grid {
        grid-template-columns:1fr;
    }
    .card-image,.card-art {
        height:160px;
    }
    .card-body {
        padding:24px;
    }
    .empty-state,.simple-card {
        padding:28px;
    }
    .message-card {
        padding:24px;
    }
    .message-body {
        font-size:24px;
    }
    .reading-card {
        padding:24px;
    }
    .reading-card h1 {
        font-size:30px;
    }
    .content-description {
        font-size:23px;
    }
    .app-person {
        font-size:16px;
        max-width:35%;
    }
}

@media(prefers-reduced-motion:no-preference) {
    button,a {
        transition:background-color .15s;
    }
}

@media(min-width:721px) and (max-height:800px) {
    .app-header {
        padding-top:20px;
        padding-bottom:20px;
    }
    .login-shell {
        margin:16px auto;
        gap:48px;
    }
    .login-card {
        padding:24px;
    }
    .number-pad button {
        min-height:54px;
    }
    .login-card input {
        height:66px;
    }
    .field-help {
        margin:12px 0 16px;
    }
    .start-button {
        margin-top:16px;
    }
}

.message-illustrated { background-size: cover; background-position: center; }
.message-illustrated[style] { padding: clamp(16px, 4vw, 48px); }
.message-readable { padding: 16px; border-radius: 12px; background: #fff; color: var(--ink); }
.message-photo { display: block; max-width: 100%; max-height: 650px; width: auto; height: auto; margin: 16px auto 0; object-fit: contain; border-radius: 8px; }

/* One large programme item, with the same controls in a predictable place. */
.programme { margin-top:32px; }
.programme-toolbar { text-align:center; margin-bottom:24px; }
.programme-toolbar>p { line-height:1.5; margin:0 0 16px; }
.programme-buttons { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.programme-toggle { min-width:280px; min-height:80px; font-size:28px; }
.programme-status:empty { display:none; }
.programme-toolbar .programme-status { margin:16px 0 0; }
.programme-stage { max-width:none; }
.programme-item h1 { text-align:center; font-size:clamp(30px,4vw,48px); }
.programme-art { display:grid; place-items:center; min-height:220px; border-radius:16px; background:var(--surface-soft); color:var(--ink); font-size:100px; }
.programme-item video { display:block; max-height:60vh; background:var(--ink); }
.programme-item audio { display:none; }
.programme-item .content-description { max-width:900px; margin:24px auto 0; }
.programme-item .content-description:empty { display:none; }
.app-nav { flex-wrap:wrap; }
@media(max-width:650px) {
    .app-nav { gap:8px; }
    .app-nav a { flex:1; min-width:0; padding:12px 8px; font-size:18px; gap:6px; }
    .app-nav span { font-size:22px; }
    .programme { margin-top:24px; }
    .programme-stage { padding:24px 16px; }
    .programme-toggle { min-width:0; width:100%; }
    .programme-buttons { width:100%; }
}

.audio-slideshow { display:grid; margin:24px 0; }
.reading-card .audio-slideshow figure {
    grid-area:1 / 1;
    margin:0;
    min-width:0;
    opacity:0;
    pointer-events:none;
    transition:opacity 1.5s ease-in-out;
}
.audio-slideshow figure.is-current { opacity:1; pointer-events:auto; }
.audio-slideshow .content-image {
    width:100%;
    height:clamp(220px,48vh,560px);
    margin:0 auto;
    object-fit:contain;
}
.audio-slideshow figcaption { padding-top:12px; }
@media(prefers-reduced-motion:reduce) {
    .reading-card .audio-slideshow figure { transition:none; }
}

/* Keep navigation close to the brand and make the recipient easy to recognize. */
.app-header--signed-in {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,auto);
    grid-template-areas:"brand person" "nav nav";
    max-width:1344px;
    padding:16px 32px;
    gap:16px 24px;
}
.app-header--signed-in .app-brand { grid-area:brand; min-width:0; }
.app-header--signed-in .app-person {
    grid-area:person;
    justify-self:end;
    max-width:100%;
    padding:10px 16px;
    border-radius:8px;
    background:var(--accent-soft);
    color:var(--ink);
    font-size:26px;
    font-weight:bold;
    line-height:1.25;
    text-align:right;
}
.app-header--signed-in .app-nav {
    grid-area:nav;
    margin:0;
    padding:0;
    width:100%;
    max-width:none;
}
.app-header--signed-in .app-nav a { min-height:64px; }
@media(min-width:1100px) {
    .app-header--signed-in {
        grid-template-columns:auto minmax(0,1fr) minmax(120px,220px);
        grid-template-areas:"brand nav person";
        align-items:center;
    }
    .app-header--signed-in .app-nav { justify-content:center; gap:12px; }
    .app-header--signed-in .app-nav a {
        min-width:0;
        padding:12px 20px;
        font-size:22px;
        gap:10px;
    }
}
@media(min-width:1700px) {
    .app-header--signed-in { max-width:1600px; }
    .app-header--signed-in .app-nav a { font-size:28px; }
    .app-header--signed-in .app-person { font-size:30px; }
}
@media(max-width:720px) {
    .app-header--signed-in { padding:12px 20px; gap:12px; grid-template-columns:minmax(0,1fr) minmax(0,45%); }
    .app-header--signed-in .app-person { font-size:22px; padding:8px 12px; }
}

.messages-heading { padding:20px 0; }
.messages-heading h1 { font-size:36px; margin:0 0 6px; }
.message-carousel { width:100%; scroll-margin-top:16px; }
/* Every slide contributes to the shared height, including its loaded photo. */
.message-stage { display:grid; }
.message-stage .message-featured { grid-area:1 / 1; min-width:0; }
.message-stage .message-featured[hidden] {
    display:block!important;
    visibility:hidden;
    pointer-events:none;
}
.message-carousel-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.message-carousel-controls>p { margin:0 auto 0 0; }
.message-carousel-controls .message-carousel-help { flex-basis:100%; color:var(--muted); font-size:18px; }
.message-featured { width:100%; min-height:400px; padding:clamp(24px,4vw,56px); }
.message-featured.message-illustrated[style] { min-height:460px; padding:clamp(24px,5vw,72px); }
.message-featured .message-readable { padding:clamp(24px,3vw,40px); }
.message-featured .message-meta strong { font-size:28px; }
.message-featured .message-meta time { font-size:22px; }
.message-featured .message-body { font-size:clamp(28px,2.8vw,42px); line-height:1.6; }
.message-featured .message-photo { width:100%; max-height:70vh; object-fit:contain; margin-top:28px; }
.message-picker { margin-top:32px; }
.message-picker h2 { font-size:28px; }
.message-picker ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.message-choice { display:grid; grid-template-columns:1fr auto; gap:10px 24px; border:2px solid var(--control-border); border-radius:12px; background:#fff; padding:20px 24px; }
.message-choice[aria-current] { border-color:var(--action); background:var(--surface-soft); }
.message-choice strong { font-size:24px; }
.message-choice time { font-size:18px; color:var(--muted); }
.message-preview { overflow-wrap:anywhere; line-height:1.5; }
.message-choice-open { align-self:end; font-weight:bold; }
@media(max-width:720px) {
    .messages-heading h1 { font-size:30px; }
    .message-carousel-controls { gap:8px; }
    .message-carousel-controls>p:first-child { flex-basis:100%; }
    .message-carousel-controls button { flex:1; padding:12px 8px; font-size:18px; }
    .message-featured,.message-featured.message-illustrated[style] { min-height:320px; padding:16px; }
    .message-featured .message-readable { padding:16px; }
    .message-featured .message-meta time { font-size:18px; }
    .message-choice { grid-template-columns:minmax(0,1fr); gap:8px; padding:16px; }
}