/* =====================================================================
   Jan-e Shahr (جان شهر) - public site
   "Poster / sketchbook" identity taken from the call poster: warm paper,
   ink outlines with offset sticker shadows, viewfinder corners, film strips,
   hand-drawn doodles. Teal lettering + orange sun from the poster.
   ===================================================================== */

@font-face {
    font-family: 'IRANSansX';
    src: url('../fonts/iransansx/IRANSansX-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'IRANSansX';
    src: url('../fonts/iransansx/IRANSansX-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

:root {
    --js-ink: #1d2625;
    --js-ink-soft: #3e4a48;
    --js-muted: #6f7876;
    --js-paper: #fffaf0;
    --js-paper-2: #fbf0db;
    --js-card: #ffffff;
    --js-line: #e8dcc5;
    --js-teal: #13807b;
    --js-teal-dark: #0d5e5a;
    --js-teal-soft: #dcf0ed;
    --js-orange: #f7a11a;
    --js-orange-dark: #d9850a;
    --js-orange-soft: #fde8c4;
    --js-heart: #ef3e6b;
    --js-danger: #e5484d;
    --js-success: #1f9d61;
    --js-radius: 22px;
    --js-shadow: 6px 6px 0 var(--js-ink);
    --js-shadow-sm: 3px 3px 0 var(--js-ink);
    --js-font: 'IRANSansX', Tahoma, sans-serif;
}

/* ---------- Base ---------- */
body.public-site {
    font-family: var(--js-font);
    font-size: 15px;
    color: var(--js-ink-soft);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--js-paper);
    /* faint dotted sketchbook grid */
    background-image: radial-gradient(rgba(29, 38, 37, .09) 1px, transparent 1.2px);
    background-size: 22px 22px;
}

.public-site main {
    flex: 1;
    /* tilted film strip and doodles may poke past the edges */
    overflow-x: clip;
}

.public-site h1, .public-site h2, .public-site h3, .public-site h4, .public-site h5, .public-site h6,
.public-site .btn, .public-site button, .public-site input, .public-site select, .public-site textarea,
.public-site .form-control, .public-site .form-label, .public-site .badge, .public-site .tooltip, .public-site .modal {
    font-family: var(--js-font);
}

.public-site h1, .public-site h2, .public-site h3, .public-site h4, .public-site h5 {
    color: var(--js-ink);
    font-weight: 700;
}

.public-site a:not(.btn):not(.js-btn):not(.js-nav-link) {
    color: var(--js-teal);
}

.public-site ::selection {
    background: var(--js-orange);
    color: var(--js-ink);
}

/* Hand-drawn orange underline under headings */
.js-scribble {
    position: relative;
    display: inline-block;
    z-index: 0;
}

.js-scribble::after {
    content: '';
    position: absolute;
    inset-inline: -6px;
    bottom: -4px;
    height: 14px;
    z-index: -1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c30-6 60-6 95-3s70 4 99-2' stroke='%23f7a11a' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* ---------- Buttons ---------- */
.js-btn,
.public-site .btn:not(.btn-link):not(.btn-close):not(.btn-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .6rem 1.35rem;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.5;
    border: 2px solid var(--js-ink);
    border-radius: 999px;
    box-shadow: var(--js-shadow-sm);
    transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
    text-decoration: none;
    cursor: pointer;
}

.js-btn:hover,
.public-site .btn:not(.btn-link):not(.btn-close):not(.btn-icon):not(:disabled):not(.disabled):hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--js-ink);
}

.js-btn:active,
.public-site .btn:not(.btn-link):not(.btn-close):not(.btn-icon):active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--js-ink);
}

.public-site .btn:disabled,
.public-site .btn.disabled {
    opacity: .55;
    box-shadow: none;
}

.js-btn i, .public-site .btn i { font-size: 1.15rem; }

.js-btn-lg, .public-site .btn-lg { padding: .8rem 1.7rem; font-size: 1.02rem; }
.js-btn-sm, .public-site .btn-sm { padding: .35rem .95rem; font-size: .85rem; }

.js-btn-orange, .public-site .btn-warning, .public-site .btn-success {
    background: var(--js-orange);
    color: var(--js-ink) !important;
}

.js-btn-orange:hover, .public-site .btn-warning:hover, .public-site .btn-success:hover {
    background: #ffb238;
    color: var(--js-ink);
}

.js-btn-teal, .public-site .btn-primary {
    background: var(--js-teal);
    color: #fff !important;
}

.public-site .btn-primary:hover, .public-site .btn-primary:focus, .js-btn-teal:hover {
    background: var(--js-teal-dark);
}

.js-btn-paper,
.public-site .btn-label-secondary,
.public-site .btn-light,
.public-site .btn-outline-primary,
.public-site .btn-outline-light {
    background: var(--js-card);
    color: var(--js-ink) !important;
}

.public-site .btn-label-secondary:hover, .public-site .btn-outline-primary:hover, .js-btn-paper:hover {
    background: var(--js-paper-2);
}

.public-site .btn-link {
    color: var(--js-teal);
    font-weight: 700;
    text-decoration: none;
}

/* ---------- Forms ---------- */
.public-site .form-label {
    color: var(--js-ink);
    font-weight: 700;
    font-size: .88rem;
    margin-bottom: .4rem;
}

.public-site .form-control,
.public-site .form-select {
    min-height: 48px;
    border: 2px solid var(--js-line);
    border-radius: 14px;
    background-color: #fff;
    color: var(--js-ink);
    font-size: .95rem;
    box-shadow: none;
}

.public-site textarea.form-control {
    line-height: 1.9;
}

.public-site .form-control:focus,
.public-site .form-select:focus {
    border-color: var(--js-teal);
    box-shadow: 0 0 0 4px rgba(247, 161, 26, .25);
}

.public-site .form-control:disabled {
    background: var(--js-paper-2);
    color: var(--js-muted);
}

.public-site .form-control.is-invalid {
    border-color: var(--js-danger);
}

.public-site .form-control::placeholder {
    color: #b3aa98;
}

/* LTR inputs (email, codes, numbers) keep LTR values but show their placeholder right-to-left */
.public-site input[dir="ltr"]:placeholder-shown {
    direction: rtl;
}

.public-site .form-check-input {
    width: 1.25em;
    height: 1.25em;
    border: 2px solid var(--js-ink);
    border-radius: 6px;
}

.public-site .form-check-input:checked {
    background-color: var(--js-teal);
    border-color: var(--js-ink);
}

.public-site .form-check-input:focus {
    box-shadow: 0 0 0 4px rgba(247, 161, 26, .25);
}

.public-site .invalid-feedback {
    color: var(--js-danger);
    font-weight: 600;
}

.public-site .alert {
    border: 2px solid var(--js-ink);
    border-radius: 16px;
    box-shadow: var(--js-shadow-sm);
    color: var(--js-ink);
    font-weight: 600;
}

.public-site .alert-success { background: #dff5e8; }
.public-site .alert-warning { background: var(--js-orange-soft); }
.public-site .alert-danger { background: #fde2e1; }

/* Browser autofill: keep the field white instead of the yellow / blue fill */
.public-site .form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: var(--js-ink);
}

.public-site .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset, 0 0 0 4px rgba(247, 161, 26, .25);
}

/* Password: one field with the show / hide eye inside it, on the left (the value is LTR) */
.password-field {
    position: relative;
}

.password-field .form-control {
    padding-left: 2.9rem;
    letter-spacing: .08em;
}

.password-toggle {
    position: absolute;
    top: 50%;
    left: .45rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--js-muted);
    font-size: 1.2rem;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color: var(--js-teal);
    background: var(--js-teal-soft);
    outline: 0;
}

/* Live "passwords match" state on the confirmation field */
.public-site .form-control.is-valid {
    border-color: var(--js-success);
    background-image: none;
}

.password-match {
    display: block;
    margin-top: .3rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--js-success);
}

/* ---------- Header ---------- */
.js-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: .8rem 0;
    transition: padding .2s ease;
}

.js-header.scrolled { padding: .45rem 0; }

/* Logo | page links (truly centered) | account actions */
.js-header-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: .45rem .55rem .45rem .9rem;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--js-ink);
    border-radius: 999px;
    box-shadow: var(--js-shadow-sm);
}

.js-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
}

.js-brand-official { height: 46px; width: auto; }

.js-nav {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.js-brand { justify-self: start; }
.js-nav-actions { grid-column: 3; justify-self: end; }

.js-nav-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .9rem;
    border-radius: 999px;
    color: var(--js-ink-soft);
    font-weight: 700;
    font-size: .9rem;
    white-space: nowrap;
    text-decoration: none;
    background: transparent;
    border: 0;
    transition: background-color .15s ease, color .15s ease;
}

.js-nav-link i { font-size: 1.25rem; }

.js-nav-link:hover,
.js-nav-link.active {
    background: var(--js-teal-soft);
    color: var(--js-teal-dark);
}

.js-nav-icon { padding: .45rem .6rem; }

/* Phone menu: the toggle swaps between menu and close icons */
.js-menu-toggle .bx-x,
.js-menu-toggle[aria-expanded="true"] .bx-menu { display: none; }
.js-menu-toggle[aria-expanded="true"] .bx-x { display: inline; }

.js-mobile-nav {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin-top: .6rem;
    padding: .5rem;
    background: #fff;
    border: 2px solid var(--js-ink);
    border-radius: 18px;
    box-shadow: var(--js-shadow-sm);
}

.js-mobile-nav .js-nav-link {
    padding: .65rem .9rem;
    border-radius: 12px;
    font-size: .95rem;
}

@media (max-width: 575.98px) {
    .js-brand-official { height: 38px; }
    .js-header-bar { padding-inline-start: .6rem; }
    .js-nav-link { padding: .4rem .55rem; }
}

/* ---------- Poster hero ---------- */
.js-poster {
    position: relative;
    text-align: center;
    padding: 2.2rem 0 3rem;
    overflow: hidden;
}

.js-doodles { position: absolute; inset: 0; pointer-events: none; }

.js-doodle { position: absolute; }

.js-doodle-sun {
    width: 120px;
    color: var(--js-orange);
    top: 30px;
    right: 6%;
    animation: js-spin 40s linear infinite;
}

.js-heart { color: var(--js-heart); width: 34px; }
.js-heart-1 { top: 18%; left: 8%; transform: rotate(-14deg); }
.js-heart-2 { top: 52%; right: 9%; width: 26px; transform: rotate(12deg); }
.js-heart-3 { bottom: 14%; left: 14%; width: 22px; transform: rotate(8deg); }
.js-heart-4 { top: 8%; left: 38%; width: 18px; transform: rotate(-6deg); opacity: .7; }

.js-doodle-squiggle {
    width: 150px;
    color: var(--js-teal);
    bottom: 26%;
    right: 3%;
    opacity: .5;
}

@keyframes js-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .js-doodle-sun { animation: none; }
}

@media (max-width: 767.98px) {
    .js-doodle-sun { width: 70px; top: 10px; right: 2%; }
    .js-heart-2, .js-heart-4, .js-doodle-squiggle { display: none; }
}

.js-presenter {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .3rem .4rem .3rem 1rem;
    background: #fff;
    border: 2px solid var(--js-ink);
    border-radius: 999px;
    box-shadow: var(--js-shadow-sm);
    font-size: .85rem;
    color: var(--js-ink-soft) !important;
    text-decoration: none;
}

.js-presenter img { height: 34px; }
.js-presenter strong { color: var(--js-teal-dark); }

.js-poster-logo {
    display: block;
    width: min(440px, 82vw);
    height: auto;
    margin: 1.4rem auto .6rem;
}

.js-poster-title {
    font-size: clamp(1.45rem, 3.6vw, 2.35rem);
    line-height: 1.7;
    margin-bottom: .4rem;
}

.js-poster-title mark {
    background: linear-gradient(transparent 55%, var(--js-orange-soft) 55%);
    color: var(--js-teal);
    padding: 0 .2rem;
}

.js-poster-lead {
    color: var(--js-muted);
    font-size: 1.05rem;
    margin-bottom: 1.6rem;
}

/* Viewfinder: corner brackets + REC dot, as on the poster */
.js-viewfinder {
    position: relative;
    max-width: 600px;
    margin: 0 auto 1.8rem;
    padding: 2rem 1.6rem 1.4rem;
}

.js-vf-corner {
    position: absolute;
    width: 38px;
    height: 38px;
    border: 0 solid var(--js-ink);
}

.js-vf-corner.tl { top: 0; left: 0; border-top-width: 6px; border-left-width: 6px; border-top-left-radius: 6px; }
.js-vf-corner.tr { top: 0; right: 0; border-top-width: 6px; border-right-width: 6px; border-top-right-radius: 6px; }
.js-vf-corner.bl { bottom: 0; left: 0; border-bottom-width: 6px; border-left-width: 6px; border-bottom-left-radius: 6px; }
.js-vf-corner.br { bottom: 0; right: 0; border-bottom-width: 6px; border-right-width: 6px; border-bottom-right-radius: 6px; }

.js-vf-rec {
    position: absolute;
    top: 14px;
    left: 54px;
    direction: ltr;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .15em;
    color: var(--js-heart);
}

.js-vf-rec i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--js-heart);
    margin-right: 4px;
    animation: js-blink 1.2s steps(2) infinite;
}

@keyframes js-blink { 50% { opacity: 0; } }

.js-countdown-label {
    color: var(--js-orange-dark);
    font-weight: 700;
    margin-bottom: .9rem;
}

.js-countdown {
    display: flex;
    justify-content: center;
    gap: .7rem;
}

.js-cd-unit {
    flex: 1;
    max-width: 104px;
    background: #fff;
    border: 2px solid var(--js-ink);
    border-radius: 18px;
    box-shadow: var(--js-shadow-sm);
    padding: .7rem .3rem .5rem;
}

.js-cd-unit:first-child { background: var(--js-orange-soft); }

.js-cd-unit strong {
    display: block;
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    font-weight: 700;
    color: var(--js-teal);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.js-cd-unit span {
    font-size: .78rem;
    color: var(--js-muted);
    font-weight: 700;
}

.js-countdown-state {
    font-weight: 700;
    color: var(--js-ink);
    font-size: 1.05rem;
    margin: .4rem 0 0;
}

.js-countdown-state i {
    color: var(--js-heart);
    font-size: 1.4rem;
    vertical-align: middle;
}

.js-countdown-dates {
    margin: 1rem 0 0;
    font-size: .88rem;
    color: var(--js-muted);
}

.js-countdown-dates strong { color: var(--js-ink); }
.js-countdown-dates i { color: var(--js-teal); vertical-align: middle; }

.js-poster-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    justify-content: center;
}

@media (max-width: 575.98px) {
    .js-poster-actions .js-btn { width: 100%; }
    .js-viewfinder { padding-inline: .9rem; }
    .js-countdown { gap: .4rem; }
    .js-vf-rec { left: 46px; }
}

/* ---------- Keyword film strip ---------- */
.js-filmstrip {
    background: var(--js-ink);
    padding: 16px 0;
    overflow: hidden;
    transform: rotate(-1.5deg);
    margin: .5rem -10px 0;
    position: relative;
}

.js-filmstrip::before,
.js-filmstrip::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    height: 8px;
    background: repeating-linear-gradient(90deg, var(--js-paper) 0 12px, transparent 12px 26px);
    opacity: .9;
}

.js-filmstrip::before { top: 4px; }
.js-filmstrip::after { bottom: 4px; }

/* Two identical groups; sliding the track by 50% moves exactly one group, so the loop is seamless.
   Each group ends with the same spacing it has between words, so the seam looks like any other gap. */
.js-filmstrip-track {
    display: flex;
    width: max-content;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
    animation: js-marquee 145s linear infinite;
    will-change: transform;
}

.js-filmstrip-group {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding-inline-end: 1.4rem;
    flex-shrink: 0;
}

.js-filmstrip-track i { color: var(--js-orange); }

/* RTL: the track starts at the right edge, so it moves right to bring the second group in */
@keyframes js-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(50%); }
}

@media (prefers-reduced-motion: reduce) {
    .js-filmstrip-track { animation: none; }
}

/* ---------- Sections ---------- */
.js-section { padding: 4rem 0; }

.js-section-tint {
    background: var(--js-paper-2);
    border-block: 2px solid var(--js-ink);
}

.js-section-head {
    text-align: center;
    margin-bottom: 2.4rem;
}

.js-section-head h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); }
.js-section-head p { color: var(--js-muted); margin: .8rem 0 0; }

/* Cinema tickets */
.js-tickets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.4rem;
    /* Shadow from the grid, not the cards, so it follows the punched holes */
    filter: drop-shadow(6px 6px 0 var(--js-ink));
}

@media (max-width: 575.98px) {
    .js-tickets { grid-template-columns: 1fr 1fr; gap: 1rem; }
}

.js-ticket {
    position: relative;
    background: #fff linear-gradient(90deg, var(--js-line) 50%, transparent 50%) center / 12px 2px repeat-x;
    border: 2px solid var(--js-ink);
    border-radius: 18px;
    padding: 1.1rem .9rem;
    text-align: center;
    /* Punched holes on both sides: cut out of the card (border, dashes and all) */
    --hole: 11px;
    -webkit-mask:
        radial-gradient(circle at 0 50%, transparent var(--hole), #000 calc(var(--hole) + .5px)) left / 51% 100% no-repeat,
        radial-gradient(circle at 100% 50%, transparent var(--hole), #000 calc(var(--hole) + .5px)) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle at 0 50%, transparent var(--hole), #000 calc(var(--hole) + .5px)) left / 51% 100% no-repeat,
        radial-gradient(circle at 100% 50%, transparent var(--hole), #000 calc(var(--hole) + .5px)) right / 51% 100% no-repeat;
}

/* Ink rim around each hole; the half outside the card is masked away */
.js-ticket::before,
.js-ticket::after {
    content: '';
    position: absolute;
    top: 50%;
    box-sizing: border-box;
    width: calc(var(--hole) * 2 + 4px);
    height: calc(var(--hole) * 2 + 4px);
    margin-top: calc(var(--hole) * -1 - 2px);
    border: 2px solid var(--js-ink);
    border-radius: 50%;
}

.js-ticket::before { left: calc(var(--hole) * -1 - 4px); }
.js-ticket::after { right: calc(var(--hole) * -1 - 4px); }

.js-ticket i {
    font-size: 1.7rem;
    color: var(--js-teal);
    display: block;
    margin-bottom: 1.6rem;
}

.js-ticket small {
    display: block;
    color: var(--js-muted);
    font-weight: 700;
    margin-bottom: .2rem;
}

.js-ticket strong {
    color: var(--js-ink);
    font-size: 1.05rem;
}

.js-ticket:nth-child(even) i { color: var(--js-orange-dark); }

/* Steps as film frames */
.js-frames {
    list-style: none;
    margin: 0;
    padding: 18px 14px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    background: var(--js-ink);
    border-radius: 14px;
    position: relative;
}

.js-frames::before,
.js-frames::after {
    content: '';
    position: absolute;
    inset-inline: 10px;
    height: 7px;
    background: repeating-linear-gradient(90deg, var(--js-paper-2) 0 10px, transparent 10px 22px);
}

.js-frames::before { top: 5px; }
.js-frames::after { bottom: 5px; }

.js-frame {
    background: #fff;
    border-radius: 10px;
    padding: 1.4rem 1.2rem 1.2rem;
    position: relative;
}

.js-frame-num {
    position: absolute;
    top: .7rem;
    left: .9rem;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--js-orange-soft);
    -webkit-text-stroke: 1.5px var(--js-orange-dark);
}

.js-frame > i {
    font-size: 1.6rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--js-teal-soft);
    color: var(--js-teal-dark);
    border: 2px solid var(--js-ink);
    margin-bottom: .9rem;
}

.js-frame h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.js-frame p { font-size: .88rem; color: var(--js-muted); margin: 0; line-height: 1.9; }

@media (max-width: 991.98px) {
    .js-frames { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .js-frames { grid-template-columns: 1fr; }
}

/* Stickers (rule panels) */
.js-sticker {
    background: #fff;
    border: 2px solid var(--js-ink);
    border-radius: var(--js-radius);
    padding: 1.6rem;
    position: relative;
}

.js-sticker-teal { box-shadow: 8px 8px 0 var(--js-teal); }
.js-sticker-orange { box-shadow: 8px 8px 0 var(--js-orange); }

.js-sticker h2 {
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .8rem;
}

.js-sticker h2 i { color: var(--js-teal); font-size: 1.5rem; }
.js-sticker-orange h2 i { color: var(--js-orange-dark); }
.js-sticker p { line-height: 2; }

.js-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.js-tags span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .85rem;
    border: 2px dashed var(--js-teal);
    border-radius: 999px;
    color: var(--js-teal-dark);
    font-weight: 700;
    font-size: .85rem;
    background: var(--js-teal-soft);
}

.js-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 .9rem;
    display: grid;
    gap: .5rem;
}

@media (min-width: 576px) {
    .js-checklist { grid-template-columns: 1fr 1fr; }
}

.js-checklist li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--js-ink);
}

.js-checklist li i {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--js-orange);
    border: 2px solid var(--js-ink);
    font-size: 1rem;
}

.js-checklist li.optional i { background: #fff; }

.js-checklist small {
    color: var(--js-muted);
    font-weight: 400;
    margin-inline-start: auto;
    font-size: .75rem;
}

.js-note {
    font-size: .85rem;
    color: var(--js-muted);
    margin: 0;
    padding-top: .8rem;
    border-top: 2px dashed var(--js-line);
}

/* Account box + FAQ */
.js-account-box {
    position: relative;
    background: var(--js-teal);
    color: rgba(255, 255, 255, .9);
    border: 2px solid var(--js-ink);
    border-radius: var(--js-radius);
    box-shadow: var(--js-shadow);
    padding: 1.8rem 1.6rem 1.6rem;
}

.js-account-box h2 { color: #fff; font-size: 1.3rem; }
.js-account-box p { line-height: 2; margin-bottom: 1.2rem; }

.js-account-heart {
    position: absolute;
    width: 54px;
    top: -24px;
    left: 22px;
    color: var(--js-heart);
    transform: rotate(-12deg);
    filter: drop-shadow(2px 2px 0 var(--js-ink));
}

.js-faq-title {
    font-size: 1.35rem;
    margin-bottom: 1.4rem;
}

.js-faq .accordion-item {
    background: #fff;
    border: 2px solid var(--js-ink) !important;
    border-radius: 16px !important;
    margin-bottom: .8rem;
    overflow: hidden;
    box-shadow: var(--js-shadow-sm);
}

.js-faq .accordion-button {
    font-weight: 700;
    color: var(--js-ink);
    background: #fff;
    box-shadow: none !important;
}

.js-faq .accordion-button:not(.collapsed) {
    background: var(--js-orange-soft);
    color: var(--js-ink);
}

.js-faq .accordion-body {
    color: var(--js-ink-soft);
    line-height: 2;
}

/* ---------- Footer: the city is the ground of the page ---------- */
.js-footer {
    margin-top: 2rem;
}

/* Full-width Tehran skyline (skyline.webp): shown whole on wide screens; on narrow ones
   the min-height kicks in and the sides are cropped so the landmarks stay centered */
.js-footer-skyline {
    display: block;
    width: 100%;
    max-width: 1983px;
    height: auto;
    min-height: 200px;
    margin: 0 auto -4px;
    object-fit: cover;
    object-position: center bottom;
    position: relative;
    z-index: 1;
}

.js-footer-body {
    background: var(--js-paper-2);
    border-top: 2px solid var(--js-ink);
    padding: 2.4rem 0 1.4rem;
    position: relative;
}

.js-footer-brand {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.js-footer-brand img {
    height: 92px;
    width: auto;
    flex-shrink: 0;
}

.js-footer-brand strong {
    display: block;
    color: var(--js-ink);
    font-size: 1.1rem;
}

.js-footer-brand p {
    color: var(--js-teal);
    font-weight: 700;
}

.js-footer-brand small { color: var(--js-muted); }

.js-footer-title {
    font-size: .95rem;
    margin-bottom: .8rem;
}

.js-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .45rem;
}

.public-site .js-footer-links a {
    color: var(--js-ink-soft);
    text-decoration: none;
    font-size: .9rem;
}

.public-site .js-footer-links a:hover { color: var(--js-teal); }
.js-footer-links i { color: var(--js-orange-dark); vertical-align: middle; }

/* Social links (Admin → تنظیمات): round ink-outlined icon buttons */
.js-footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: 1rem;
}

.public-site .js-footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 2px solid var(--js-ink);
    border-radius: 50%;
    background: #fff;
    color: var(--js-ink);
    font-size: 1.2rem;
    text-decoration: none;
    box-shadow: 2px 2px 0 var(--js-ink);
    transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}

/* Every mark keeps its brand colour, so hover only lifts the button onto a light tint (never a solid fill that could hide it) */
.public-site .js-footer-socials a:hover,
.public-site .js-footer-socials a:focus-visible {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--js-ink);
    background: var(--js-paper-2);
    outline: 0;
}

/* Brand marks: logo files (Eitaa, Bale, Rubika, Aparat) and tinted boxicons, at the same visual size */
.social-logo {
    width: 1.3rem;
    height: 1.3rem;
    object-fit: contain;
    flex-shrink: 0;
}

.social-glyph { font-size: 1.35rem; line-height: 1; }

/* ---------- Contact page ---------- */
.contact-container { max-width: 880px; padding-bottom: 3rem; }

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.2rem;
}

.contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 1.4rem 1rem;
    text-align: center;
    background: #fff;
    border: 2px solid var(--js-ink);
    border-radius: var(--js-radius);
    box-shadow: var(--js-shadow);
}

.contact-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: .4rem;
    border: 2px solid var(--js-ink);
    border-radius: 50%;
    background: var(--js-orange-soft);
    color: var(--js-teal-dark);
    font-size: 1.4rem;
}

.contact-card small { color: var(--js-muted); font-weight: 600; }

.contact-card strong,
.public-site .contact-card a {
    color: var(--js-ink);
    font-weight: 700;
    line-height: 1.8;
    word-break: break-word;
    text-decoration: none;
}

.public-site .contact-card a:hover { color: var(--js-teal); }

.contact-socials {
    margin-top: 2.6rem;
    text-align: center;
}

.contact-social-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
    margin-top: 1.2rem;
}

.public-site .contact-social {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border: 2px solid var(--js-ink);
    border-radius: 999px;
    background: #fff;
    color: var(--js-ink);
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--js-shadow-sm);
    transition: transform .12s ease, background-color .15s ease;
}

.public-site .contact-social i { font-size: 1.3rem; }
.public-site .contact-social .social-logo { width: 1.4rem; height: 1.4rem; }
.public-site .contact-social:hover { transform: translate(-1px, -1px); background: var(--js-teal-soft); }

.contact-faq {
    margin: 2.4rem 0 0;
    text-align: center;
    color: var(--js-muted);
}

.contact-faq i { color: var(--js-orange-dark); vertical-align: middle; }

.js-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.1rem;
    border-top: 2px dashed var(--js-line);
    font-size: .8rem;
    color: var(--js-muted);
}

.public-site a.js-footer-credit {
    color: var(--js-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.js-footer-credit img { height: 18px; }

/* ---------- Inner pages ---------- */
.js-page-head {
    text-align: center;
    padding: 1.8rem 0 2rem;
}

.js-page-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--js-orange);
    border: 2px solid var(--js-ink);
    box-shadow: var(--js-shadow-sm);
    font-size: 1.6rem;
    color: var(--js-ink);
    margin-bottom: .9rem;
}

.js-page-head h1 {
    font-size: clamp(1.35rem, 3.4vw, 1.9rem);
    margin-bottom: .6rem;
}

.js-page-head p {
    color: var(--js-muted);
    margin: .7rem 0 0;
}

.form-container { max-width: 940px; padding-bottom: 3rem; }
.narrow-container { max-width: 580px; padding-bottom: 3rem; }
.panel-container { max-width: 880px; padding-bottom: 3rem; }

/* "حساب کاربری" / "ثبت اثر جدید": one line each; on phones they share the row evenly */
.panel-actions .btn { white-space: nowrap; }

@media (max-width: 575.98px) {
    .panel-actions { width: 100%; gap: .5rem !important; }
    .panel-actions .btn { flex: 1 1 0; min-width: 0; padding-inline: .45rem; font-size: .84rem; }
    .panel-actions .btn .bx { margin-inline-end: .2rem !important; }
}

/* Staff only: link from "پنل من" into /admin */
.staff-banner {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1.1rem;
    background: var(--js-teal);
    color: #fff !important;
    border: 2px solid var(--js-ink);
    border-radius: 18px;
    box-shadow: var(--js-shadow-sm);
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}

.staff-banner:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--js-ink); }
.staff-banner > .bx { font-size: 1.6rem; }
.staff-banner strong { display: block; font-size: 1rem; }
.staff-banner small { opacity: .85; }

/* Sticker card holding forms */
.form-card {
    background: var(--js-card);
    border: 2px solid var(--js-ink);
    border-radius: var(--js-radius);
    box-shadow: 8px 8px 0 var(--js-teal);
    padding: 2rem;
}

@media (max-width: 575.98px) {
    .form-card { padding: 1.25rem; box-shadow: 5px 5px 0 var(--js-teal); }
    .form-container, .narrow-container, .panel-container { padding-inline: 1rem; }
}

.step-head {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding-bottom: 1.2rem;
    margin-bottom: 1.6rem;
    border-bottom: 2px dashed var(--js-line);
}

.step-head h2 { font-size: 1.2rem; margin: 0 0 .15rem; }
.step-head p { margin: 0; color: var(--js-muted); font-size: .88rem; }

.step-head-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--js-teal-soft);
    color: var(--js-teal-dark);
    border: 2px solid var(--js-ink);
}

/* Stepper as a film strip */
.stepper {
    list-style: none;
    display: flex;
    margin: 0 0 1.8rem;
    padding: 16px 10px;
    background: var(--js-ink);
    border-radius: 14px;
    position: relative;
    gap: 8px;
}

.stepper::before,
.stepper::after {
    content: '';
    position: absolute;
    inset-inline: 10px;
    height: 6px;
    background: repeating-linear-gradient(90deg, var(--js-paper) 0 9px, transparent 9px 20px);
    opacity: .85;
}

.stepper::before { top: 4px; }
.stepper::after { bottom: 4px; }

.stepper li {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem .7rem;
    background: rgba(255, 255, 255, .08);
    border-radius: 8px;
    color: rgba(255, 255, 255, .6);
    cursor: default;
    transition: background-color .2s ease;
}

.stepper li.done { cursor: pointer; color: #fff; }
.stepper li.active { background: #fff; color: var(--js-ink); }

.stepper-dot {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: rgba(255, 255, 255, .15);
}

.stepper-dot i { display: none; font-size: 1.2rem; }
.stepper li.active .stepper-dot { background: var(--js-orange); color: var(--js-ink); border: 2px solid var(--js-ink); }
.stepper li.done .stepper-dot { background: var(--js-teal); color: #fff; }
.stepper li.done .stepper-dot .num { display: none; }
.stepper li.done .stepper-dot i { display: block; }

.stepper-label {
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .stepper li { justify-content: center; padding: .5rem; }
    .stepper-label { display: none; }
    .stepper li.active .stepper-label { display: inline; }
    .stepper li.active { flex: 2.5; }
}

.wizard-step { display: none; animation: js-step-in .35s ease; }
.wizard-step.active { display: block; }

@keyframes js-step-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.step-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.4rem;
    border-top: 2px dashed var(--js-line);
}

@media (max-width: 575.98px) {
    .step-actions { flex-direction: column-reverse; }
    .step-actions > * { width: 100%; }
}

/* Read-only account details in step 1 */
.account-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .9rem;
    background: var(--js-paper);
    border: 2px dashed var(--js-line);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    margin-bottom: .6rem !important;
}

.account-summary dt { font-weight: 400; font-size: .8rem; color: var(--js-muted); }
.account-summary dd { margin: 0; color: var(--js-ink); font-weight: 700; text-align: right; }

/* Review */
.review-list {
    border: 2px solid var(--js-ink);
    border-radius: 16px;
    overflow: hidden;
}

.review-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    font-size: .9rem;
}

.review-row:nth-child(odd) { background: var(--js-paper); }
.review-row + .review-row { border-top: 1px dashed var(--js-line); }
.review-row span { color: var(--js-muted); flex-shrink: 0; }
.review-row strong { text-align: left; word-break: break-word; color: var(--js-ink); }

.form-check.consent {
    background: var(--js-orange-soft);
    border: 2px solid var(--js-ink);
    border-radius: 14px;
    padding: .9rem 2.6rem .9rem 1rem;
}

[dir="rtl"] .form-check.consent .form-check-input { margin-right: -1.7rem; }

/* Result (submission done) */
.result-card {
    text-align: center;
    background: #fff;
    border: 2px solid var(--js-ink);
    border-radius: var(--js-radius);
    box-shadow: 8px 8px 0 var(--js-orange);
    padding: 2.4rem 1.6rem 2rem;
}

.result-card h1 { font-size: 1.4rem; margin: 1rem 0 .7rem; }

.result-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    border: 2px solid var(--js-ink);
    box-shadow: var(--js-shadow-sm);
}

.result-icon.success { background: var(--js-orange); color: var(--js-ink); }

.tracking-code {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    margin: 1.2rem 0 .6rem;
    padding: 1rem 1.8rem;
    background: var(--js-paper);
    border: 2px dashed var(--js-ink);
    border-radius: 16px;
}

.tracking-code small { color: var(--js-muted); font-weight: 700; }

.tracking-code strong {
    font-size: 1.7rem;
    letter-spacing: .25em;
    color: var(--js-teal);
    font-family: ui-monospace, Consolas, monospace;
}

/* Work status */
.progress-track {
    list-style: none;
    padding: 0;
    margin: 0 0 1.6rem;
    display: flex;
}

.progress-track li {
    flex: 1;
    text-align: center;
    position: relative;
}

.progress-track li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 19px;
    left: calc(-50% + 22px);
    right: calc(50% + 22px);
    border-top: 3px dashed var(--js-line);
}

.progress-track li.done:not(:last-child)::after { border-top-style: solid; border-color: var(--js-teal); }

.progress-track .dot {
    width: 40px;
    height: 40px;
    margin: 0 auto .4rem;
    border-radius: 50%;
    background: #fff;
    color: var(--js-muted);
    border: 2px solid var(--js-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    position: relative;
    z-index: 1;
}

.progress-track li.done .dot { background: var(--js-teal); color: #fff; border-color: var(--js-ink); }
.progress-track li.failed .dot { background: var(--js-danger); color: #fff; border-color: var(--js-ink); }
.progress-track .label { font-size: .8rem; font-weight: 700; color: var(--js-muted); }

.status-note {
    display: flex;
    gap: .8rem;
    padding: 1rem 1.1rem;
    border: 2px solid var(--js-ink);
    border-radius: 16px;
    line-height: 2;
    color: var(--js-ink) !important;
}

.status-note > i { font-size: 1.6rem; flex-shrink: 0; }
.status-note.bg-label-warning { background: var(--js-orange-soft) !important; }
.status-note.bg-label-success { background: #dff5e8 !important; }
.status-note.bg-label-danger { background: #fde2e1 !important; }

.summary-list dt { color: var(--js-muted); font-weight: 400; margin-bottom: .55rem; }
.summary-list dd { margin-bottom: .55rem; font-weight: 700; color: var(--js-ink); }

/* Badges */
.public-site .badge {
    border: 1.5px solid currentColor;
    border-radius: 999px;
    font-weight: 700;
    padding: .35em .75em;
}

/* ---------- Accounts: auth tabs, OTP, panel ---------- */
.auth-tabs {
    background: var(--js-paper-2);
    border: 2px solid var(--js-ink);
    border-radius: 999px;
    padding: .3rem;
    gap: .3rem;
}

.auth-tabs .nav-link {
    border-radius: 999px;
    color: var(--js-ink-soft);
    font-weight: 700;
    border: 0;
}

.auth-tabs .nav-link.active {
    background: var(--js-teal);
    color: #fff;
}

.otp-input {
    letter-spacing: .6em;
    font-size: 1.5rem !important;
    font-weight: 700;
}

.public-site a.work-row {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .95rem 1rem;
    background: #fff;
    border: 2px solid var(--js-ink);
    border-radius: 16px;
    margin-bottom: .8rem;
    color: var(--js-ink-soft);
    text-decoration: none;
    box-shadow: var(--js-shadow-sm);
    transition: transform .12s ease, box-shadow .12s ease;
}

.public-site a.work-row:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--js-teal);
}

.work-row strong { color: var(--js-ink); }

.work-row-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--js-teal-dark);
    background: var(--js-teal-soft);
    border: 2px solid var(--js-ink);
}

@media (max-width: 575.98px) {
    .public-site a.work-row { flex-wrap: wrap; }
}

/* ---------- Form widgets from application-form.css, in the poster style ---------- */
.public-site .choice-card {
    border: 2px solid var(--js-line);
    border-radius: 16px;
    background: #fff;
}

.public-site .choice-option input:checked + .choice-card {
    border-color: var(--js-ink);
    background: var(--js-orange-soft);
    color: var(--js-ink);
    box-shadow: var(--js-shadow-sm);
}

.public-site .choice-option input:checked + .choice-card i { color: var(--js-teal-dark); }

.public-site .upload-tile {
    border: 2px dashed var(--js-ink);
    border-radius: 18px;
    background: var(--js-paper);
}

.public-site .upload-tile:hover,
.public-site .upload-tile.dragover {
    background: var(--js-orange-soft);
    border-color: var(--js-ink);
}

.public-site .upload-tile.has-file {
    border-style: solid;
    border-color: var(--js-ink);
    background: #e6f6ee;
    box-shadow: var(--js-shadow-sm);
}

.public-site .upload-tile.is-invalid {
    border-color: var(--js-danger);
    background: #fdecec;
}

.public-site .upload-preview {
    border-radius: 12px;
    background: #fff;
    border: 2px solid var(--js-ink);
}

.public-site .upload-preview i { color: var(--js-teal); }

.public-site .responsibility-box {
    border: 2px dashed var(--js-orange-dark);
    background: var(--js-orange-soft);
    border-radius: 14px;
}

.public-site .modal-content {
    border: 2px solid var(--js-ink);
    border-radius: var(--js-radius);
    box-shadow: var(--js-shadow);
}

/* Logout confirmation (header "خروج" button) */
.logout-dialog .modal-body { padding: 1.8rem 1.5rem 1.5rem; }

.logout-dialog-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: .9rem;
    border: 2px solid var(--js-ink);
    border-radius: 50%;
    background: var(--js-orange-soft);
    color: var(--js-ink);
    font-size: 1.6rem;
}

/* ---------- News & galleries ---------- */
.js-content-container { padding-bottom: 3rem; }

.js-section-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: start;
}

.js-empty {
    text-align: center;
    color: var(--js-muted);
    padding: 3rem 1rem;
    border: 2px dashed var(--js-line);
    border-radius: var(--js-radius);
    background: #fff;
}

.js-empty i { font-size: 3rem; color: var(--js-teal); }

.js-pagination { display: flex; justify-content: center; margin-top: 2.2rem; }
.public-site .js-pagination .pagination { gap: .35rem; }
.public-site .js-pagination .page-item .page-link { border-radius: 10px; margin: 0; min-width: 2.5rem; text-align: center; font-weight: 700; }
.public-site .js-pagination .page-link i { vertical-align: middle; font-size: 1.15rem; }
.public-site .js-pagination .page-item.active .page-link { background: var(--js-teal); border-color: var(--js-ink); }

/* News cards */
.js-news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
}

/* Fixed column counts (not auto-fill) so the home page's 4 news fill one row */
@media (min-width: 576px) { .js-news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .js-news-grid { grid-template-columns: repeat(4, 1fr); } }

.js-news-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid var(--js-ink);
    border-radius: var(--js-radius);
    box-shadow: var(--js-shadow-sm);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

.js-news-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--js-teal); }

.js-news-card-media {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--js-paper-2);
    border-bottom: 2px solid var(--js-ink);
    overflow: hidden;
}

.js-news-card-media img { width: 100%; height: 100%; object-fit: cover; }

.js-news-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--js-teal);
    background: radial-gradient(rgba(29, 38, 37, .1) 1px, transparent 1.2px) 0 0 / 14px 14px, var(--js-orange-soft);
}

.js-news-card-body { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; flex: 1; }

.js-news-card-body time { font-size: .8rem; color: var(--js-muted); font-weight: 700; }
.js-news-card-body time i { color: var(--js-orange-dark); vertical-align: middle; }

.js-news-card-body h3 { font-size: 1.05rem; line-height: 1.8; margin: .5rem 0; }
.public-site .js-news-card-body h3 a { color: var(--js-ink); text-decoration: none; }
.public-site .js-news-card-body h3 a:hover { color: var(--js-teal); }

.js-news-card-body p { color: var(--js-muted); font-size: .9rem; line-height: 1.9; margin-bottom: .8rem; }

.public-site a.js-news-card-more {
    margin-top: auto;
    font-weight: 700;
    font-size: .88rem;
    color: var(--js-teal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* Album cards: a cover with a second "print" peeking out behind it */
.js-album-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem 1.6rem;
    padding: .6rem .4rem 0;
}

/* Fixed column counts (not auto-fill) so the home page's 4 albums fill one row */
@media (min-width: 576px) { .js-album-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .js-album-grid { grid-template-columns: repeat(4, 1fr); } }

.public-site a.js-album { position: relative; display: block; text-decoration: none; color: var(--js-ink); }

.js-album-stack {
    position: absolute;
    inset: -6px 10px auto -6px;
    aspect-ratio: 4 / 3;
    background: var(--js-orange-soft);
    border: 2px solid var(--js-ink);
    border-radius: 18px;
    transform: rotate(-3deg);
}

.js-album-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: #fff;
    border: 2px solid var(--js-ink);
    border-radius: 18px;
    box-shadow: var(--js-shadow-sm);
    overflow: hidden;
    transition: transform .15s ease;
}

.js-album-cover > i { font-size: 3rem; color: var(--js-teal); }
.js-album-cover img { width: 100%; height: 100%; object-fit: cover; }
.public-site a.js-album:hover .js-album-cover { transform: rotate(1.5deg) translateY(-2px); }

.js-album-count {
    position: absolute;
    bottom: .6rem;
    right: .6rem;
    background: rgba(29, 38, 37, .82);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .65rem;
    border-radius: 999px;
}

.js-album-title { display: block; font-weight: 700; margin-top: .8rem; line-height: 1.8; }

/* Article (news detail, gallery header) */
.js-article { max-width: 860px; padding-top: 1.6rem; padding-bottom: 1rem; }
.js-article-head { text-align: center; margin-bottom: 1.8rem; }

.public-site a.js-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .9rem;
    border: 2px solid var(--js-ink);
    border-radius: 999px;
    background: #fff;
    color: var(--js-ink);
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    box-shadow: var(--js-shadow-sm);
}

.js-article-head h1 { font-size: clamp(1.4rem, 3.4vw, 2rem); line-height: 1.7; margin: 1.1rem 0 .6rem; }
.js-article-head time { color: var(--js-muted); font-weight: 700; font-size: .88rem; }
.js-article-head time i { color: var(--js-orange-dark); vertical-align: middle; }

.js-article-cover {
    margin: 0 0 1.8rem;
    border: 2px solid var(--js-ink);
    border-radius: var(--js-radius);
    box-shadow: 8px 8px 0 var(--js-orange);
    overflow: hidden;
    background: #fff;
}

.js-article-cover img { display: block; width: 100%; height: auto; }

.js-article-lead {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--js-ink);
    line-height: 2.1;
    border-inline-start: 5px solid var(--js-orange);
    padding-inline-start: 1rem;
}

.js-prose { color: var(--js-ink-soft); font-size: 1.02rem; line-height: 2.2; overflow-wrap: anywhere; }
.js-prose h2, .js-prose h3, .js-prose h4 { margin: 2rem 0 .8rem; }
.js-prose img, .js-prose iframe, .js-prose video { max-width: 100%; height: auto; border-radius: 14px; }
.js-prose figure { margin: 1.6rem 0; text-align: center; }
.js-prose figcaption { font-size: .85rem; color: var(--js-muted); margin-top: .5rem; }
.js-prose blockquote { border-inline-start: 4px solid var(--js-teal); background: var(--js-teal-soft); padding: .8rem 1rem; border-radius: 12px; }
.js-prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; }
.js-prose th, .js-prose td { border: 1px solid var(--js-line); padding: .5rem .7rem; }

.js-article-photos { margin-top: 2.6rem; }
.js-article-photos h2 { font-size: 1.25rem; margin-bottom: 1.4rem; }

.js-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .8rem;
}

.js-photo-grid .js-photo { aspect-ratio: 1; }
.js-photo-grid .js-photo img { height: 100%; object-fit: cover; }

/* Gallery page: masonry columns keep each photo's own proportions */
.js-photo-masonry { columns: 3 260px; column-gap: 1rem; }
.js-photo-masonry .js-photo { margin-bottom: 1rem; break-inside: avoid; }

.public-site a.js-photo {
    display: block;
    border: 2px solid var(--js-ink);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--js-shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
}

.public-site a.js-photo:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--js-teal); }
.js-photo img { display: block; width: 100%; }