/* ==========================================
   OFF THE CLOCK: photography, painting, table tennis
   Uses the same paper, ink and offset shadow look as the rest of the site.
   ========================================== */

.lens-head {
    /* 720px forced "design" onto a line of its own and left the note on three lines.
       The section has 1200px of content to play with, so let the head use enough of it
       for both the title and the note to sit on one line on a laptop (asked 20 Oct 2026). */
    max-width: 1060px;
}

#lens .bw-title {
    color: var(--text-pencil);
    /* 900px is just past the title's own width, so it sets on one line here and the
       note can still run wider. Below that, balance splits the lines evenly rather than
       dropping a single word ("design") onto a line of its own. */
    max-width: 900px;
    text-wrap: balance;
}

.lens-card .lens-body,
.lens-tt-copy {
    text-align: left;
}

.lens-head .bw-note {
    margin-top: 12px;
    /* One line where there is room; two even lines on narrower screens, never a stub. */
    text-wrap: balance;
}

.lens-hobbies {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.lens-hobbies li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 11px;
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-pencil);
    background: var(--bg-paper, #FFFCF6);
    border: 0.5px solid var(--line-strong, #A9A398);
    border-radius: 999px;
}

.lens-hobbies svg {
    width: 17px;
    height: 17px;
    color: var(--color-highlight, #266268);
}

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

.lens-card {
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #FFFFFF);
    border: var(--card-border, 0.5px solid #E5E1D8);
    border-radius: 6px;
    box-shadow: var(--card-shadow, 5px 5px 0 rgba(0, 0, 0, 0.1));
    overflow: hidden;
    transition: transform 0.35s var(--ease-polish), box-shadow 0.35s var(--ease-polish);
}

.lens-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--card-shadow-hover, 7px 7px 0 rgba(0, 0, 0, 0.15));
}

.lens-wide {
    grid-column: span 2;
}

.lens-media {
    position: relative;
    height: 400px;
    overflow: hidden;
    background: #EEE9DF;
}

.lens-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-polish);
}

.lens-card:hover .lens-media img {
    transform: scale(1.04);
}

.lens-body,
.lens-tt-copy {
    padding: 18px 20px 20px;
}

.lens-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
    font-family: var(--font-sketch);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-pencil);
}

.lens-tag b {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-highlight, #266268);
}

.lens-photo {
    margin: 0 0 8px;
    font-family: var(--font-ui);
    font-size: 0.98rem;
    line-height: 1.5;
    color: #55554F;
}

.lens-design {
    margin: 0;
    padding-top: 10px;
    border-top: 1px dashed rgba(26, 26, 24, 0.18);
    font-family: var(--font-ui);
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--text-pencil);
}

.lens-design strong {
    color: var(--color-highlight, #266268);
    font-weight: 700;
}

/* Handwritten sticky note on the painting */
.lens-note {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 6px 12px;
    font-family: 'Kalam', var(--font-sketch);
    font-size: 1rem;
    color: var(--text-pencil);
    background: #FFF4B8;
    border: 0.5px solid rgba(26, 26, 24, 0.25);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12);
    transform: rotate(-4deg);
}

/* Table tennis card: a small drawing instead of a photo */
.lens-tt {
    background: var(--card-bg, #FFFFFF);
}

.lens-tt-art {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-paper, #FFFCF6);
    border-bottom: 0.5px solid var(--line, #E5E1D8);
}

.lens-tt-title {
    margin: 0 0 8px;
    font-family: var(--font-sketch);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-pencil);
}

@media (max-width: 960px) {
    .lens-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lens-media {
        height: 340px;
    }
    .lens-tt {
        grid-column: span 1;
    }
}

@media (max-width: 640px) {
    .lens-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .lens-wide {
        grid-column: auto;
    }
    .lens-media {
        height: auto;
        aspect-ratio: 4 / 5;
    }
    .lens-wide .lens-media {
        aspect-ratio: 16 / 10;
    }
    .lens-tt .lens-media {
        aspect-ratio: 16 / 10;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lens-card,
    .lens-media img {
        transition: none;
    }
    .lens-tt .tt-player,
    .lens-tt .tt-ball {
        animation: none;
    }
}

/* Table tennis card: the mascot plays a rally. The ball is its own element so it can fly in,
   get hit and fly back; the player leans into the shot at the moment of contact. */
.tt-stage {
    position: relative;
    height: calc(100% - 26px);
    margin: 18px 0 8px;
    aspect-ratio: 800 / 849;
    max-width: 100%;
}

.lens-tt-art .tt-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.10));
    transform-origin: 56% 94%; /* the feet */
    animation: tt-swing 1.8s ease-in-out infinite;
}

/* Sits exactly where the ball was in the original drawing (centre 38,357, size 52 of 800x849) */
.lens-tt .tt-ball {
    position: absolute;
    left: 1.5%;
    top: 39%;
    width: 6.5%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFFFFF 0 30%, #F1ECE2 60%, #D9D2C4 100%);
    border: 1.5px solid #1A1A18;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.12);
    animation: tt-rally 1.8s linear infinite;
}

@keyframes tt-rally {
    0% { transform: translate(-900%, -260%) scale(0.9); opacity: 0; animation-timing-function: ease-out; }
    8% { opacity: 1; }
    25% { transform: translate(-480%, -420%) scale(1); animation-timing-function: ease-in; }
    46% { transform: translate(45%, -15%) scale(1); }
    50% { transform: translate(40%, -15%) scale(0.8, 1.15); animation-timing-function: ease-out; }
    56% { transform: translate(-80%, -140%) scale(1); }
    75% { transform: translate(-520%, -470%) scale(1); animation-timing-function: ease-in; }
    92% { opacity: 1; }
    100% { transform: translate(-1000%, -300%) scale(0.9); opacity: 0; }
}

@keyframes tt-swing {
    0%, 100% { transform: rotate(0deg); }
    32% { transform: rotate(2.5deg) translateX(1%); }
    46% { transform: rotate(-2deg); }
    52% { transform: rotate(-3deg) translateX(-1%); }
    72% { transform: rotate(0.5deg); }
}