/* =====================================================================
   SANDY SECONDARY SCHOOL — MEET THE TEAM
   Design system: "Luminous Rigour" — charcoal + gold, slab + geometric
   sans, as used by the school prospectus. Tokens are injected by
   SMT_Theme from the site's Clickr settings; the values here are only
   fallbacks.
   ===================================================================== */

.smt {
    --ink: #2a263f;
    --ink-soft: #3a3550;
    --gold: #feba10;
    --gold-deep: #e0a200;
    --gold-bright: #ffc933;
    --cream: #fffaee;
    --cream-2: #fdf4dd;
    --paper: #fdfbf6;
    --line: #e9ddc3;
    --text: #2c2723;
    --text-soft: #6f655c;
    --font-display: 'Stag', Georgia, 'Times New Roman', serif;
    --font-body: 'Open Sans', -apple-system, 'Segoe UI', sans-serif;

    --pad: 18mm;

    font-family: var(--font-body);
    color: var(--text);
    overflow-x: clip;
}

.smt *,
.smt *::before,
.smt *::after { box-sizing: border-box; }

body.smt-standalone {
    margin: 0;
    background: #14100e;
    background-image: radial-gradient(circle at 50% 0%, #221b16, #14100e 60%);
    overflow-x: clip;
}

/* An A4 sheet is 210mm wide whatever it is being read on, so on a phone it is
   always far wider than the screen — and that is exactly what makes iOS and
   Android inflate the text inside it. The inflation lands after booklet.js has
   measured the copy, and not on every block, so the paginator reserves room for
   a description that then renders half a page taller: teams get split across
   sheets with room to spare, and the faces beneath run through the footer. Held
   at 100% so a sheet is set at the size it was measured at, on every screen.
   Desktop browsers do not autosize, so nothing there changes. */
.smt,
body.smt-standalone,
.smt-qnav {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.smt img { max-width: 100%; }

.smt .screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------
   Floating jump-to nav — the one piece of chrome, as in the prospectus
   --------------------------------------------------------------------- */

.smt-qnav {
    position: fixed;
    z-index: 60;
    right: 18px; bottom: 18px;
    font-family: var(--font-body);
}

.smt-qnav__btn {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--gold);
    border: 0;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s;
}

.smt-qnav__btn:hover { transform: translateY(-2px); }
.smt-qnav__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.smt-qnav__panel {
    position: absolute;
    right: 0; bottom: 64px;
    width: 296px;
    max-height: 74vh;
    overflow: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 54px rgba(42, 38, 63, 0.34);
    padding: 8px;
    opacity: 0;
    transform: translateY(8px) scale(.98);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity .18s, transform .18s;
}

.smt-qnav.is-open .smt-qnav__panel { opacity: 1; transform: none; pointer-events: auto; }

/* A default scrollbar in a gold-and-charcoal panel looks like a bug. */
.smt-qnav__panel {
    scrollbar-width: thin;
    scrollbar-color: var(--gold-deep) transparent;
}

.smt-qnav__panel::-webkit-scrollbar { width: 10px; }
.smt-qnav__panel::-webkit-scrollbar-track { background: transparent; }

.smt-qnav__panel::-webkit-scrollbar-thumb {
    background: var(--gold-deep);
    border-radius: 99px;
    border: 3px solid #fff;
}

.smt-qnav__panel::-webkit-scrollbar-thumb:hover { background: var(--ink); }

/* ...and the document's own scrollbar against the dark desk */
body.smt-standalone {
    scrollbar-width: thin;
    scrollbar-color: var(--gold-deep) #241d19;
}

body.smt-standalone::-webkit-scrollbar { width: 12px; }
body.smt-standalone::-webkit-scrollbar-track { background: #241d19; }

body.smt-standalone::-webkit-scrollbar-thumb {
    background: var(--gold-deep);
    border-radius: 99px;
    border: 3px solid #241d19;
}

body.smt-standalone::-webkit-scrollbar-thumb:hover { background: var(--gold); }

.smt-qnav__head {
    font: 700 7.5pt/1 var(--font-body);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-soft);
    padding: 9px 10px 7px;
}

.smt-qnav__panel a {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 7px;
    text-decoration: none;
    color: var(--ink);
    cursor: pointer;
}

.smt-qnav__panel a:hover,
.smt-qnav__panel a:focus-visible { background: var(--cream-2); outline: none; }
.smt-qnav__panel a.is-active { background: var(--gold); }
.smt-qnav__panel a .qn { font-weight: 700; color: var(--gold-deep); font-size: 8.5pt; width: 20px; flex: none; }
.smt-qnav__panel a.is-active .qn { color: var(--ink); }
.smt-qnav__panel a .qt { font-size: 9.3pt; line-height: 1.25; flex: 1; }
.smt-qnav__panel a .qp { font-size: 8pt; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.smt-qnav__panel a.is-active .qp { color: var(--ink); }

.smt-qnav__rule { height: 1px; background: var(--line); margin: 6px 10px; }

.smt-qnav__act {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    font: 600 8pt/1.2 var(--font-body);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-deep);
    cursor: pointer;
    text-decoration: none;
}

.smt-qnav__act:hover { background: var(--cream-2); }

/* ---------------------------------------------------------------------
   The document. booklet.js lays the source out onto sheets and adds
   .smt--paged; without JavaScript the flowing source shows instead.
   --------------------------------------------------------------------- */

.smt-doc { display: none; }

.smt--paged .smt-doc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 30px 16px 60px;
}

.smt--paged .smt-source { display: none; }

.smt-sheet-wrap { position: relative; flex: 0 0 auto; }

.smt-sheet {
    position: relative;
    width: 210mm;
    height: 297mm;
    background: var(--paper);
    color: var(--text);
    overflow: hidden;
    transform-origin: top left;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
}

.smt-sheet.is-ink { background: var(--ink); color: #e8e2d4; }

.pad { position: absolute; inset: var(--pad); z-index: 1; }

/* running footer */
.foot {
    position: absolute;
    left: var(--pad); right: var(--pad); bottom: 11mm;
    display: flex; justify-content: space-between; align-items: center;
    gap: 6mm;
    padding-top: 6pt;
    border-top: 1.4px solid var(--line);
    font: 600 7.3pt/1 var(--font-body);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-soft);
    z-index: 3;
}

.foot .shine { color: var(--gold-deep); }
.foot .pg { font-variant-numeric: tabular-nums; }

.is-ink .foot { border-top-color: rgba(254, 186, 16, 0.28); color: rgba(255, 255, 255, 0.55); }
.is-ink .foot .shine { color: var(--gold); }

/* ---------------------------------------------------------------------
   Typographic system
   --------------------------------------------------------------------- */

.eyebrow {
    font: 600 8.5pt/1 var(--font-body);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--gold-deep);
}

.is-ink .eyebrow { color: var(--gold); }

.sec-tag { display: flex; align-items: center; gap: 9pt; margin-bottom: 7mm; }

.sec-tag .num {
    font: 700 11pt/1 var(--font-display);
    color: #fff;
    background: var(--ink);
    width: 30pt; height: 30pt;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    flex: none;
}

.is-ink .sec-tag .num { background: var(--gold); color: var(--ink); }

.sec-tag .lab {
    font: 600 9pt/1.1 var(--font-body);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.is-ink .sec-tag .lab { color: rgba(255, 255, 255, 0.6); }

h2.head {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 30pt;
    line-height: 1.04;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
    text-wrap: balance;
}

.is-ink h2.head { color: #fff; }
h2.head .accent { color: var(--gold-deep); }
.is-ink h2.head .accent { color: var(--gold); }

h2.head .cont {
    display: block;
    margin-top: 2mm;
    font: 600 8pt/1 var(--font-body);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.is-ink h2.head .cont { color: rgba(255, 255, 255, 0.5); }

.rule-gold {
    width: 54pt; height: 3px;
    background: var(--gold);
    border-radius: 2px;
    margin: 5mm 0 6mm;
}

.copy { font-size: 9.6pt; line-height: 1.6; color: var(--text); }
.copy p { margin: 0 0 3.2mm; }
.copy p:last-child { margin-bottom: 0; }
.copy strong { font-weight: 700; color: var(--ink); }
.is-ink .copy { color: #e8e2d4; }
.is-ink .copy strong { color: #fff; }

.copy ul { list-style: none; margin: 0 0 3.2mm; padding: 0; }

.copy li {
    position: relative;
    padding: 0 0 2.6mm 8mm;
    line-height: 1.5;
    break-inside: avoid;
}

.copy li::before {
    content: '';
    position: absolute;
    left: 0; top: 2.2pt;
    width: 8pt; height: 8pt;
    background: var(--gold);
    transform: rotate(45deg);
    border-radius: 1.5px;
}

.copy.col-2 { column-count: 2; column-gap: 9mm; }

/* ---------------------------------------------------------------------
   Decoration — parallaxed by booklet.js, drawn dot by dot
   --------------------------------------------------------------------- */

.decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

.decor .blob {
    position: absolute;
    border-radius: 50%;
    background: var(--cream-2);
}

.is-ink .decor .blob { background: rgba(255, 255, 255, 0.045); }

.decor .blob-tl { width: 92mm; height: 92mm; top: -34mm; left: -30mm; }
.decor .blob-br { width: 74mm; height: 74mm; bottom: -30mm; right: -26mm; }

.decor .ring {
    position: absolute;
    border: 2px solid rgba(254, 186, 16, 0.32);
    border-radius: 50%;
}

.decor .ring-1 { width: 34mm; height: 34mm; top: 62mm; right: -12mm; }
.decor .ring-2 { width: 18mm; height: 18mm; bottom: 46mm; left: -6mm; border-width: 1.5px; }

.decor .ghost-num {
    position: absolute;
    top: 6mm; right: 8mm;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 92pt;
    line-height: 0.8;
    color: var(--cream-2);
    letter-spacing: -0.03em;
}

.is-ink .decor .ghost-num { color: rgba(255, 255, 255, 0.06); }

/* Kept small and low so it decorates the foot of the sheet rather than
   colliding with the last row of faces. */
.dotfield {
    position: absolute;
    width: 38mm; height: 18mm;
    background-image: radial-gradient(var(--gold) 1.6px, transparent 2px);
    background-size: 15px 15px;
    opacity: 0.34;
}

.dotfield.df-br { bottom: 14mm; right: 6mm; }
.is-ink .dotfield { opacity: 0.4; }

/* ---------------------------------------------------------------------
   The team grid — the whole point. Fixed track count per sheet so it
   grows and shrinks with the directory without the layout moving.
   --------------------------------------------------------------------- */

.team-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
    gap: 9mm 5mm;
    /* Clear air between the description and the first row of faces. The
       paginator reads this margin back, so changing it is safe. */
    margin: 9mm 0 0;
    padding: 0;
    list-style: none;
}

.pad > .team-grid:first-child { margin-top: 0; }

.member { text-align: center; min-width: 0; }

.member__ring {
    --ring-w: 2.6mm;
    position: relative;
    display: block;
    width: min(100%, var(--face, 26mm));
    margin: 0 auto 4.5mm;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--gold);
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(42, 38, 63, 0.18);
}

/* The inner circle clips the portrait, so the photograph can be pushed out
   past its own edges without ever covering the gold ring. */
.member__face {
    position: absolute;
    top: var(--ring-w);
    left: var(--ring-w);
    width: calc(100% - 2 * var(--ring-w));
    height: calc(100% - 2 * var(--ring-w));
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    display: block;
}

/* The white frame baked into many of the photographs is cropped off when the
   photo is cached (SMT_Directory::trim_white_border), so only a whisker of
   zoom is needed here to hide any residue. Anchored to the top so faces stay
   centred and the photographer's watermark is cropped off the bottom. */
.member__photo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    transform: scale(1.04);
    transform-origin: center top;
}

.member__initials {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13pt;
    color: var(--ink);
}

.member__name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 8.6pt;
    line-height: 1.2;
    color: var(--ink);
}

.is-ink .member__name { color: #fff; }

.member__role {
    margin: 1mm 0 0;
    font: 500 7pt/1.3 var(--font-body);
    color: var(--gold-deep);
}

.is-ink .member__role { color: var(--gold); }

/* The house name sits under the role, so it steps back rather than
   competing with it now that the role carries the colour. */
.member__detail {
    margin: 0.6mm 0 0;
    font: 600 6.2pt/1.2 var(--font-body);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.is-ink .member__detail { color: rgba(255, 255, 255, 0.55); }

/* Fewer faces, bigger faces — the grid keeps its shape as the directory
   changes, and a small team fills the sheet instead of huddling at the top. */
.team-grid[data-cols="1"] { --face: 62mm; }
.team-grid[data-cols="2"] { --face: 48mm; }
.team-grid[data-cols="3"] { --face: 38mm; }
.team-grid[data-cols="4"] { --face: 31mm; }
.team-grid[data-cols="5"] { --face: 26mm; }

.team-grid[data-cols="1"] .member__name { font-size: 15pt; }
.team-grid[data-cols="1"] .member__role { font-size: 10pt; }
.team-grid[data-cols="2"] .member__name { font-size: 13pt; }
.team-grid[data-cols="2"] .member__role { font-size: 9pt; }
.team-grid[data-cols="3"] .member__name { font-size: 11pt; }
.team-grid[data-cols="3"] .member__role { font-size: 8.2pt; }
.team-grid[data-cols="4"] .member__name { font-size: 9.6pt; }
.team-grid[data-cols="4"] .member__role { font-size: 7.6pt; }

/* ---------------------------------------------------------------------
   Cover
   --------------------------------------------------------------------- */

.smt-cover {
    position: relative;
    width: 210mm; height: 297mm;
    background: var(--ink);
    color: #fff;
    overflow: hidden;
}

.smt-cover__photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.smt-cover__wash { position: absolute; inset: 0; background: var(--ink); opacity: 0.82; }

/* faint star/dot field, masked to the middle */
.smt-cover__stars {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 213, 130, 0.22) 1px, transparent 1.6px);
    background-size: 25px 25px;
    -webkit-mask-image: radial-gradient(130% 78% at 50% 30%, #000 0%, transparent 68%);
    mask-image: radial-gradient(130% 78% at 50% 30%, #000 0%, transparent 68%);
    opacity: 0.55;
}

.cover-frame {
    position: absolute; inset: 9mm;
    border: 1.4px solid rgba(254, 186, 16, 0.45);
    pointer-events: none;
    z-index: 4;
}

.cover-frame::before,
.cover-frame::after {
    content: '';
    position: absolute;
    width: 14pt; height: 14pt;
    border: 2px solid var(--gold);
}

.cover-frame::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.cover-frame::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }

.smt-cover__inner {
    position: absolute; inset: 9mm;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 20mm 16mm 18mm;
    z-index: 3;
}

.smt-cover__eyebrow {
    font: 600 8.5pt/1 var(--font-body);
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold-bright);
}

.smt-cover__crest { position: relative; margin: auto 0 0; }

.smt-cover__crest::before {
    content: '';
    position: absolute; inset: -30%;
    background: radial-gradient(circle, rgba(254, 186, 16, 0.40), transparent 62%);
    filter: blur(6px);
}

.smt-cover__crest img {
    position: relative;
    width: 52mm;
    display: block;
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.5));
}

.smt-cover__title { margin: 9mm 0 0; }

.smt-cover__big {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 52pt;
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: #fff;
}

.smt-cover__big em { color: var(--gold); font-style: italic; font-weight: 600; }

.smt-cover__year {
    margin-top: 5mm;
    font: 600 11pt/1 var(--font-body);
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--gold-bright);
    padding-left: 0.5em;
}

.smt-cover__tag {
    margin: auto 0 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 15pt;
    line-height: 1.3;
    color: #f3ead6;
}

.smt-cover__fed {
    margin-top: 6mm;
    font: 600 7.5pt/1 var(--font-body);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

/* ---------------------------------------------------------------------
   Welcome / closing sheets
   --------------------------------------------------------------------- */

.smt-welcome .copy { font-size: 10.4pt; line-height: 1.66; }

/* Photo band across the foot of the welcome sheet. It grows to take whatever
   room is left under the signature, so it always fills the page however long
   the welcome text is edited to be. */
.pad--welcome {
    display: flex;
    flex-direction: column;
    padding-bottom: 4mm;
}

.pad--welcome .welcome-band {
    flex: 1 1 auto;
    min-height: 62mm;
}

.welcome-band {
    position: relative;
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: 4mm;
    margin-top: 9mm;
}

.welcome-band figure {
    position: relative;
    margin: 0;
    height: 100%;
    min-height: 62mm;
    overflow: hidden;
    border-radius: 3mm;
    background: var(--cream-2);
}

.welcome-band img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.welcome-band figure::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(42, 38, 63, 0) 45%, rgba(42, 38, 63, 0.42));
}

.smt.anim .welcome-band img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.smt.anim .welcome-band figure:hover img { transform: scale(1.06); }

.sign { margin-top: 10mm; }
.sign .who { font-family: var(--font-display); font-weight: 600; font-size: 15pt; color: var(--ink); }
.is-ink .sign .who { color: #fff; }
.sign .role {
    margin-top: 1.5mm;
    font: 600 8pt/1.4 var(--font-body);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.is-ink .sign .role { color: var(--gold); }

/* Back page: the crest, where to find the school, nothing else. */
.smt-back {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}

.smt-back__crest { width: 78mm; height: auto; display: block; }

.smt-social {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5mm 7mm;
    margin: 18mm 0 0;
    padding: 0;
    list-style: none;
}

.smt-social a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3mm;
    text-decoration: none;
    color: #fff;
}

.smt-social__ic {
    display: grid;
    place-items: center;
    width: 14mm;
    height: 14mm;
    border-radius: 50%;
    border: 1.5px solid rgba(254, 186, 16, 0.5);
    color: var(--gold);
    transition: background .25s, color .25s, transform .25s;
}

.smt-social__ic svg { width: 6.6mm; height: 6.6mm; display: block; }

.smt-social a:hover .smt-social__ic {
    background: var(--gold);
    color: var(--ink);
    transform: translateY(-2px);
}

.smt-social__label {
    font: 600 7.4pt/1.3 var(--font-body);
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.72);
    max-width: 42mm;
}

.smt-back__site { margin: 18mm 0 0; }

.smt-back__site a {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 20pt;
    letter-spacing: -0.01em;
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1.5px solid rgba(254, 186, 16, 0.4);
    padding-bottom: 2mm;
}

.smt-empty { padding: 40mm var(--pad); text-align: center; }
.smt-empty h2 { font-family: var(--font-display); }

.smt-no-results {
    padding: 40px 16px 60px;
    text-align: center;
    color: var(--gold-bright);
    font: 600 10pt/1 var(--font-body);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   Flowing fallback (no JavaScript)
   --------------------------------------------------------------------- */

.smt-source { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; background: var(--paper); }
.smt-source .smt-spread { padding: 24px 0 40px; border-bottom: 1px solid var(--line); }
.smt-source .team-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.smt-source .decor, .smt-source .foot { display: none; }

/* =====================================================================
   Entrance animation — entrance only. Without JS, or with reduced
   motion, everything is simply visible and identical to print.
   ===================================================================== */

.smt.anim .pad > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s cubic-bezier(.16,.84,.3,1), transform .8s cubic-bezier(.16,.84,.3,1);
    transition-delay: var(--d, 0ms);
    will-change: opacity, transform;
}

.smt.anim .pad > *.in { opacity: 1; transform: none; }

.smt.anim .reveal {
    opacity: 0;
    transform: translateY(16px) scale(.96);
    transition: opacity .55s cubic-bezier(.16,.84,.3,1), transform .55s cubic-bezier(.16,.84,.3,1);
    transition-delay: var(--d, 0ms);
}

.smt.anim .reveal.in { opacity: 1; transform: none; }

/* hover micro-interactions */
.smt.anim .member__ring { transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.smt.anim .member:hover .member__ring { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 30px rgba(42, 38, 63, 0.3); }
.smt.anim .member__photo { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.smt.anim .member:hover .member__photo { transform: scale(1.12); }

/* cover */
@keyframes smt-hero-in { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
@keyframes smt-crest-in { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }

.smt.anim .smt-cover__photo { animation: smt-hero-in 2.3s cubic-bezier(.2,.6,.2,1) both; }
.smt.anim .smt-cover__crest { animation: smt-crest-in .9s cubic-bezier(.16,.84,.3,1) .4s both; }

.smt.anim .cover-frame { border-color: transparent; }
.smt.anim .cover-frame .fl { position: absolute; background: rgba(255, 255, 255, .42); }
.smt.anim .cover-frame .fl-t { top: -1.4px; left: -1.4px; width: calc(100% + 2.8px); height: 1.4px; transform: scaleX(0); transform-origin: left; }
.smt.anim .cover-frame .fl-r { top: -1.4px; right: -1.4px; width: 1.4px; height: calc(100% + 2.8px); transform: scaleY(0); transform-origin: top; }
.smt.anim .cover-frame .fl-b { left: -1.4px; bottom: -1.4px; width: calc(100% + 2.8px); height: 1.4px; transform: scaleX(0); transform-origin: right; }
.smt.anim .cover-frame .fl-l { left: -1.4px; bottom: -1.4px; width: 1.4px; height: calc(100% + 2.8px); transform: scaleY(0); transform-origin: bottom; }
.smt.anim .cover-frame.draw .fl-t { transition: transform .45s ease; transform: scaleX(1); }
.smt.anim .cover-frame.draw .fl-r { transition: transform .45s ease .45s; transform: scaleY(1); }
.smt.anim .cover-frame.draw .fl-b { transition: transform .45s ease .9s; transform: scaleX(1); }
.smt.anim .cover-frame.draw .fl-l { transition: transform .45s ease 1.35s; transform: scaleY(1); }
.smt.anim .cover-frame::before,
.smt.anim .cover-frame::after { opacity: 0; transform: scale(0); transition: opacity .35s ease, transform .55s cubic-bezier(.2,.9,.3,1.5); }
.smt.anim .cover-frame::before { transform-origin: top left; }
.smt.anim .cover-frame::after { transform-origin: bottom right; }
.smt.anim .cover-frame.corners::before,
.smt.anim .cover-frame.corners::after { opacity: 1; transform: scale(1); }

/* dot fields drawn dot by dot */
.smt .dotdot { opacity: 0; }
.smt .dotfield.dotsin .dotdot { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .smt.anim .pad > *,
    .smt.anim .reveal { opacity: 1 !important; transform: none !important; transition: none; }
    .smt.anim .smt-cover__photo,
    .smt.anim .smt-cover__crest { animation: none; opacity: 1; }
    .smt.anim .cover-frame { border-color: rgba(254, 186, 16, 0.45); }
}

/* ---------------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------------- */

@media (max-width: 660px) {
    .smt-toolbar { gap: 8px; }
    .smt-toolbar__spacer { display: none; }
    .smt-toolbar__home { flex: 1 0 100%; }
    .smt-search { flex: 1 1 100%; max-width: none; order: 3; }
    .smt-jump { flex: 1 1 auto; }
    .smt--paged .smt-doc { padding: 14px 8px 40px; gap: 14px; }
}

/* ---------------------------------------------------------------------
   Print — each sheet is one A4 page, at true size
   --------------------------------------------------------------------- */

@media print {
    @page { size: A4 portrait; margin: 0; }

    body.smt-standalone { background: #fff; }

    .smt-toolbar,
    .smt-no-results { display: none !important; }

    .smt--paged .smt-source { display: none !important; }
    .smt--paged .smt-doc { display: block !important; padding: 0; gap: 0; }

    .smt-sheet-wrap {
        width: 210mm !important;
        height: 297mm !important;
        overflow: hidden;
        break-after: page;
        page-break-after: always;
    }

    .smt-sheet {
        transform: none !important;
        box-shadow: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .smt.anim .pad > *,
    .smt.anim .reveal { opacity: 1 !important; transform: none !important; }

    .smt .dotdot { opacity: 1 !important; }

    .smt-doc > .smt-sheet-wrap:last-child { break-after: auto; page-break-after: auto; }
}