/* ==========================================================================
   PROFILE PAGE — MAD-style "About" layout for a single person.
   Ten vertical sections sharing one visual grammar (hairline rows, monochrome,
   generous vertical rhythm). Hero is full-bleed; everything else lives inside
   the standard .container so it stays consistent with the rest of the site.
   ========================================================================== */


/* ==========================================================================
   1. HERO — full-bleed rounded portrait, motto + Story CTA centered.
   Dimensions mirror the homepage updates carousel (.updates-track) so the
   profile entry feels identical in framing.
   ========================================================================== */
.profile-hero {
    padding: 8px 12px 12px 12px;
}

.profile-hero-frame {
    position: relative;
    width: 100%;
    height: calc(100vh - var(--header-height) - 20px);
    background-color: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    transform-origin: center center;
    animation: profile-hero-bigbang 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes profile-hero-bigbang {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-hero-frame {
        animation: none;
    }
}

/* Embedded inside the /profile-story iframe — the big-bang would replay
   on the blurred backdrop every time the story overlay opens, which is
   visually distracting. Render the hero as a static frame in that case. */
body.is-embed .profile-hero-frame {
    animation: none;
}

.profile-hero-frame.is-pending {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
}

.profile-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-hero-frame:hover .profile-hero-image {
    transform: scale(1.02);
}

/* Dim layer keeps motto + CTA readable on any portrait. */
.profile-hero-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.32);
    pointer-events: none;
}

.profile-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    color: #fff;
    /* Bottom offset is a slice of the FRAME height (not viewport), so the
       overlay sits at the same visual % on any screen — desktop, ultrawide,
       and tablet landscape. Frame height = 100vh - header - 20px. */
    padding: 0 var(--container-gutter) calc((100vh - var(--header-height) - 20px) * 0.22);
}

.profile-hero-motto {
    font-size: clamp(1.5rem, 2.8vw, 2.8rem);
    font-weight: 300;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: #fff;
    max-width: 28ch;
    margin: 0 0 2.5rem 0;
    /* Same gentle slide-and-fade as .profile-hero-cta (smooth sine curve,
       gradual reveal), staggered to appear slightly earlier so the eye
       reads motto → CTA. */
    animation: profile-hero-motto-enter 3s 0.6s cubic-bezier(0.4, 0, 0.6, 1) backwards;
}

@keyframes profile-hero-motto-enter {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .profile-hero-motto {
        animation: none;
    }
}

body.is-embed .profile-hero-motto {
    animation: none;
}

/* Mirrors .about-cta on the homepage but without the arrow span. */
.profile-hero-cta {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1rem;
    background-color: #f1f1f1;
    color: var(--text-main);
    border-radius: 6px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    transition: background-color 0.2s ease, color 0.2s ease;
    /* Gentle slide-and-fade after the motto. Uses a smoother sine-style
       curve than the .story-overlay-close snap easing, so the CTA reveals
       gradually rather than appearing almost-instantly at the start. */
    animation: profile-hero-cta-enter 3s 0.8s cubic-bezier(0.4, 0, 0.6, 1) backwards;
}

.profile-hero-cta:hover {
    background-color: #ffffff;
}

@keyframes profile-hero-cta-enter {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .profile-hero-cta {
        animation: none;
    }
}

/* Skip the entrance when /profile is loaded inside the story overlay's
   iframe (see .profile-hero-frame above for the matching suppression). */
body.is-embed .profile-hero-cta {
    animation: none;
}


/* ==========================================================================
   4–7. DATA LISTS — Education, Practice, Recognition, Workshops
   One visual grammar: hairline rows, period + primary + secondary + tag.
   ========================================================================== */
.profile-list-section {
    padding: 6vh 0;
}

.profile-list-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2vh;
}

.profile-list-title {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    margin: 0;
}

.profile-list-count {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.profile-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border-color);
}

.profile-list-row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1.4fr) auto;
    align-items: baseline;
    gap: 1.5rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.3s ease, padding-left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-list-row:hover {
    background-color: rgba(0, 0, 0, 0.015);
    padding-left: 0.4rem;
}

.profile-list-period {
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
}

.profile-list-primary {
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    font-weight: 400;
    color: var(--text-main);
    line-height: 1.4;
}

.profile-list-sep {
    color: var(--text-light);
    margin: 0 0.4rem;
}

.profile-list-place {
    color: var(--text-muted);
}

.profile-list-secondary {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted);
    font-weight: 400;
}

.profile-list-tag {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--text-light);
    white-space: nowrap;
}

/* Practice "earlier roles" toggle — hidden by default, revealed on expand */
.profile-list-row[data-group="earlier"] {
    display: none;
}

.profile-list.is-expanded .profile-list-row[data-group="earlier"] {
    display: grid;
    animation: profile-row-reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* Education accordion — list-item wrapper carries data-group and expanded state */
.profile-list--accordion .profile-list-item {
    list-style: none;
    border-bottom: 1px solid var(--border-color);
}

.profile-list--accordion .profile-list-item[data-group="earlier"] {
    display: none;
}

.profile-list--accordion.is-expanded .profile-list-item[data-group="earlier"] {
    display: block;
    animation: profile-row-reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* The clickable row itself — button reset, keep grid layout, suppress own border */
.profile-list-row--toggle {
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.profile-list-row--toggle:focus-visible {
    outline: 1px dashed var(--text-light);
    outline-offset: 4px;
}

.profile-list-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    font-size: 1rem;
    line-height: 1;
    color: var(--text-light);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

.profile-list-row--toggle:hover .profile-list-chevron {
    color: var(--text-muted);
}

.profile-list-row--toggle[aria-expanded="true"] .profile-list-chevron {
    transform: rotate(45deg);
    color: var(--text-main);
}

/* Smooth roll-down using the grid-template-rows 0fr → 1fr technique */
.profile-list-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-list-item.is-expanded .profile-list-panel {
    grid-template-rows: 1fr;
}

.profile-list-panel-inner {
    min-height: 0;
    overflow: hidden;
}

.profile-list-panel-inner p {
    margin: 0;
    padding: 0.4rem 0 1.6rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-muted);
}

@keyframes profile-row-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.profile-list-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding: 0.4rem 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-primary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    cursor: pointer;
    transition: var(--transition-fast);
}

.profile-list-toggle:hover {
    color: var(--text-main);
}

.profile-list-toggle-icon {
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-list-toggle[aria-expanded="true"] .profile-list-toggle-icon {
    transform: rotate(45deg);
}


/* ==========================================================================
   8. SELECTED PROJECTS — three curated cards + CTA
   ========================================================================== */
.profile-projects {
    padding: 8vh 0;
}

.profile-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5vw;
    margin-top: 2vh;
}

.profile-project-item {
    position: relative;
    display: block;
    aspect-ratio: 3/4;
    border-radius: 10px;
    overflow: hidden;
    background-color: #ececec;
}

.profile-project-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.profile-project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-project-item:hover img {
    transform: scale(1.04);
}

.profile-project-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 55%);
    pointer-events: none;
}

.profile-project-meta {
    position: absolute;
    left: 1.1rem;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 2;
    color: #fff;
}

.profile-project-year {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: rgba(255, 255, 255, 0.85);
}

.profile-project-name {
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0.4rem 0 0 0;
    line-height: 1.3;
}

.profile-projects-cta {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--text-muted);
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: var(--transition-fast);
}

.profile-projects-cta:hover {
    color: var(--text-main);
    border-bottom-color: var(--text-main);
}


/* ==========================================================================
   9. LANGUAGES & SOFTWARE — two-column data block
   ========================================================================== */
.profile-meta-section {
    padding: 8vh 0;
}

.profile-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6vw;
}

.profile-meta-block {
    border-top: 1px solid var(--border-color);
    padding-top: 1.8rem;
}

.profile-meta-block-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--text-muted);
    font-weight: 400;
    margin: 0 0 1.6rem 0;
}

.profile-meta-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.profile-meta-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.95rem;
    line-height: 1.5;
}

.profile-meta-row-key {
    color: var(--text-main);
    font-weight: 400;
}

.profile-meta-row-value {
    color: var(--text-muted);
}

.profile-meta-subhead {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 1.4rem 0 0.8rem 0;
    font-weight: 400;
}

.profile-meta-subhead:first-of-type {
    margin-top: 0;
}

.profile-meta-tags {
    list-style: none;
    margin: 0 0 0.4rem 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
}

.profile-meta-tag {
    font-size: 0.78rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-main);
    line-height: 1;
    transition: var(--transition-fast);
}

.profile-meta-tag:hover {
    border-color: var(--text-main);
}


/* ==========================================================================
   8. GET IN TOUCH — closing CTA
   ========================================================================== */
.profile-contact-section {
    padding: 12vh 0 16vh 0;
    text-align: center;
}

.profile-contact-block {
    max-width: 56ch;
    margin: 0 auto;
}

.profile-contact-title {
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    margin: 0 0 1.5rem 0;
}

.profile-contact-text {
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    line-height: 1.6;
    font-weight: 300;
    color: var(--text-muted);
    margin: 0 0 3rem 0;
}

.profile-contact-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.95rem 1.8rem;
    border: 1px solid var(--text-main);
    color: var(--text-main);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    transition: var(--transition-fast);
}

.profile-contact-cta:hover {
    background-color: var(--text-main);
    color: var(--bg-color);
}


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .profile-list-row {
        grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1.2fr);
        gap: 1rem;
    }
    .profile-list-tag {
        display: none;
    }
    .profile-projects-grid {
        grid-template-columns: 1fr 1fr;
    }
    .profile-projects-grid .profile-project-item:nth-child(3) {
        grid-column: 1 / -1;
        aspect-ratio: 16/9;
    }
    .profile-meta-grid {
        grid-template-columns: 1fr;
        gap: 4vh;
    }
}

@media (max-width: 768px) {
    /* Match the homepage carousel breakpoint: drop the viewport-locked
       height for an aspect-ratio frame so the portrait keeps proportion
       on small viewports. */
    .profile-hero {
        padding: 2vh 4vw 0 4vw;
    }
    .profile-hero-frame {
        height: auto;
        aspect-ratio: 4 / 5;
    }
    /* Frame on mobile is sized by width (aspect-ratio), so the bottom
       offset must scale with width too — vh would refer to the (much
       taller) viewport and push the overlay into the upper half. */
    .profile-hero-overlay {
        padding-bottom: 18vw;
    }
    .profile-hero-motto {
        font-size: clamp(1.2rem, 5vw, 1.8rem);
        margin-bottom: 1.5rem;
    }
    .profile-list-section {
        padding: 4vh 0;
    }
    .profile-list-header {
        margin-bottom: 1.5vh;
    }
    /* Stack period above primary; secondary spans full width below. */
    .profile-list-row {
        grid-template-columns: 5rem 1fr;
        column-gap: 1rem;
        row-gap: 0.25rem;
        padding: 0.9rem 0;
    }
    .profile-list-row:hover {
        padding-left: 0;
    }
    .profile-list-secondary {
        grid-column: 2 / -1;
        font-size: 0.8rem;
    }
    .profile-projects-grid {
        grid-template-columns: 1fr;
    }
    .profile-projects-grid .profile-project-item:nth-child(3) {
        grid-column: auto;
        aspect-ratio: 3/4;
    }
    .profile-contact-section {
        padding: 8vh 0 10vh 0;
    }
}


/* ==========================================================================
   STORY OVERLAY — long-form bio (profile-story.php) presented as a
   MAD-style modal hovering above the Profile page.
   The page renders its own URL so it deep-links and translates cleanly,
   but visually behaves like a modal: blurred /profile backdrop, fixed
   close button, no site header/footer.
   Pattern referenced: i-mad.com /about-us-details over /about.
   ========================================================================== */

/* Suppress chrome on this page — header and footer must not be reachable
   from within the overlay state. Body becomes the dim stage instead, and
   page-level scroll is disabled (the overlay panel scrolls internally,
   matching i-mad.com /about-us-details). */
body.page-profile-story {
    background-color: #ececec;
    overflow: hidden;
    padding-bottom: 0;
    height: 100vh;
}

body.page-profile-story .site-header,
body.page-profile-story .site-footer {
    display: none !important;
}

body.page-profile-story #content {
    padding-top: 0;
    background-color: transparent;
    height: 100vh;
    overflow: hidden;
}

/* ---- Backdrop (frozen, blurred /profile beneath the panel) ------------- */
/* Rendered as an <a> wrapping the iframe + veil so a click anywhere on
   the visible frame around the panel closes the overlay (navigates to
   /profile). Children below carry pointer-events:none, so the anchor
   itself receives all clicks that miss the panel. */
.story-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: #ececec;
    overflow: hidden;
    cursor: default;
    display: block;
    /* Fades the iframe + frosted veil in together so the "frosted glass"
       gradually materialises rather than snapping in. Sits behind the
       white panel, which has its own (slightly delayed) entrance below. */
    animation: story-backdrop-enter 2s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes story-backdrop-enter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Iframe renders SHARP — no filter:blur on it. The frosted-glass effect
   is produced by the .story-backdrop-veil layer above, using the same
   backdrop-filter + semi-transparent fill recipe as .update-overlay /
   .work-meta on the homepage. backdrop-filter samples the actual rendered
   pixels behind it, which gives a far cleaner "matné sklo" than running
   filter:blur over the iframe itself. */
.story-backdrop-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}

/* Frosted glass over the (sharp) /profile iframe. Same technique as the
   homepage carousel chips — rgba tint + backdrop-filter blur. */
.story-backdrop-veil {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    pointer-events: none;
}

/* ---- Overlay panel — near-full-viewport scroll surface ---------------- */
/* Pattern: position:fixed with small uniform inset so the blurred backdrop
   shows only as a thin frame around the panel. The panel itself scrolls
   internally — page-level scroll stays locked (see body rules above).
   Vertical inset is larger than horizontal so the panel feels deliberately
   set away from the top/bottom edges, leaving a wider "frame" of backdrop
   above and below — same proportion as i-mad.com /about-us-details. */
.story-overlay {
    position: fixed;
    top: 75px;
    right: 16px;
    bottom: 75px;
    left: 16px;
    z-index: 1;
    background-color: #ffffff;
    border-radius: 14px;
    /* Outer shell: clips its rounded shape over the inner scroll container.
       This is what makes the right-edge scrollbar respect the rounded
       corners — without it the native rectangular scrollbar overpaints
       the top-right / bottom-right curves and the panel reads as square. */
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.14),
                0 2px 8px rgba(0, 0, 0, 0.04);
    animation: story-overlay-enter 2s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* Inner scroll surface — actual overflow lives here so the native
   system-width scrollbar appears, while the outer shell's overflow:hidden
   + border-radius clip its top and bottom into the rounded corners. */
.story-overlay-scroll {
    position: relative;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

@keyframes story-overlay-enter {
    from { opacity: 0; transform: translateY(28px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Close button — sits INSIDE the panel, top-left, scrolls away with
   content (mirrors i-mad.com). Visually identical to .nav-links a:
   light-gray pill, 6px corners, 0.7rem uppercase + 0.2em tracking. */
.story-overlay-close {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.95rem;
    color: var(--text-main);
    background-color: rgba(241, 241, 241, 0.7);
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease;
    animation: story-overlay-close-enter 3s 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.story-overlay-close:hover {
    background-color: rgba(226, 226, 226, 0.85);
}

.story-overlay-close svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.story-overlay-close-label {
    display: inline-block;
}

@keyframes story-overlay-close-enter {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.story-overlay-inner {
    max-width: 96ch;
    margin: 0 auto;
    padding: clamp(5rem, 10vh, 7rem) clamp(2.5rem, 7vw, 6rem) clamp(4rem, 8vh, 6rem);
}

.story-overlay-header {
    margin: 0 0 6vh 0;
}

.story-overlay-eyebrow {
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--text-muted);
    font-weight: 400;
    margin: 0 0 1.5rem 0;
}

.story-overlay-title {
    font-size: clamp(3.6rem, 6.8vw, 5.6rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1.18;
    margin: 0;
}

.story-overlay-body {
    font-size: clamp(1rem, 1.2vw, 1.12rem);
    line-height: 1.75;
    font-weight: 300;
    color: var(--text-main);
}

.story-overlay-body p {
    margin: 0 0 1.5rem 0;
}

.story-overlay-body p:last-child {
    margin-bottom: 0;
}

/* ---- Practice grids (Disciplines / Program Types / Values) -----------
   Three tile sections under the bio, modelled on i-mad.com /about-us-details:
   each section is heading + intro paragraph + a grid of tiles pairing one
   keyword with one representative project. Tile data is supplied by the
   lang files. Images use background-image, so missing files render as the
   striped .story-practice-tile-image--placeholder card rather than a
   broken <img> icon — keeps the layout intact while the archive is
   prepared. */
.story-practice {
    margin-top: clamp(4rem, 8vh, 6rem);
}

.story-practice:first-of-type {
    margin-top: clamp(6rem, 10vh, 8rem);
    padding-top: clamp(4rem, 8vh, 6rem);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.story-practice-eyebrow {
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--text-muted);
    font-weight: 400;
    margin: 0 0 clamp(2rem, 4vh, 3rem) 0;
}

.story-practice-intro {
    font-size: clamp(1rem, 1.2vw, 1.12rem);
    line-height: 1.75;
    font-weight: 300;
    color: var(--text-main);
    max-width: 70ch;
    margin: clamp(2rem, 4vh, 3rem) 0 0 0;
}

.story-practice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 2.5vw, 2.25rem);
}

.story-practice-tile {
    margin: 0;
}

.story-practice-tile-image {
    aspect-ratio: 4 / 3;
    background-color: #ececec;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Diagonal stripes signal "no image yet" without looking broken. */
.story-practice-tile-image--placeholder {
    background: repeating-linear-gradient(
        135deg,
        #f1f1f1,
        #f1f1f1 18px,
        #e8e8e8 18px,
        #e8e8e8 36px
    );
}

.story-practice-tile-placeholder-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(0, 0, 0, 0.4);
    padding: 0.5rem 1rem;
    text-align: center;
}

.story-practice-tile-caption {
    margin-top: 0.85rem;
}

.story-practice-tile-keyword {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--text-main);
}

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

@media (max-width: 560px) {
    .story-practice-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .story-overlay {
        top: 42px;
        right: 8px;
        bottom: 42px;
        left: 8px;
        border-radius: 12px;
    }
    .story-overlay-close {
        top: 14px;
        left: 14px;
    }
    .story-overlay-inner {
        padding: 4.5rem 1.5rem 3rem;
        max-width: 100%;
    }
    .story-backdrop-veil {
        backdrop-filter: blur(30px) saturate(140%);
        -webkit-backdrop-filter: blur(30px) saturate(140%);
    }
}