.hero-grid {
    grid-template-areas: "copy artifact";
}

.hero-copy {
    grid-area: copy;
    align-self: center;
}

.artifact-stage {
    grid-area: artifact;
    position: relative;
    min-height: 20rem;
    padding: clamp(1.3rem, 3vw, 2.2rem);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
    border-radius: var(--card-radius, 1rem);
    background: var(--surface);
    box-shadow: 0 1.2rem 3.5rem color-mix(in srgb, var(--text) 8%, transparent);
}

.artifact-label,
.artifact-title,
.artifact-note,
.artifact-index {
    position: relative;
    z-index: 1;
}

.artifact-label {
    max-width: 26ch;
    margin: 0 0 1.4rem;
    font-size: .86rem;
    font-weight: 750;
    color: color-mix(in srgb, var(--text) 72%, var(--background));
}

.artifact-title {
    display: block;
    max-width: 18ch;
    font: 750 clamp(1.45rem, 3vw, 2.25rem)/1.05 var(--font-display);
    letter-spacing: -.025em;
}

.artifact-index {
    display: grid;
    gap: .55rem;
    margin: 2rem 0 1.5rem;
    padding: 0;
    list-style: none;
}

.artifact-index li {
    min-width: 0;
    padding: .65rem .75rem;
    border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    font-size: .88rem;
    font-weight: 680;
}

.artifact-note {
    max-width: 42ch;
    margin: 0;
    font-size: .85rem;
    color: color-mix(in srgb, var(--text) 72%, var(--background));
}

.pillar-card p {
    max-width: 34ch;
    margin: .55rem 0 0;
    color: color-mix(in srgb, var(--text) 72%, var(--background));
    font-size: .9rem;
    line-height: 1.45;
}

body.layout-repair-ledger .hero-copy h1,
body.layout-data-canvas .hero-copy h1,
body.layout-network-blueprint .hero-copy h1,
body.layout-automation-console .hero-copy h1 {
    font-size: clamp(2.5rem, 5vw, 5rem);
}

/* 1. Repair inspection ledger */
body.layout-repair-ledger .artifact-stage {
    border-radius: .2rem;
    background:
        linear-gradient(90deg, transparent 0 2.7rem, color-mix(in srgb, var(--accent) 65%, transparent) 2.7rem calc(2.7rem + 1px), transparent calc(2.7rem + 1px)),
        repeating-linear-gradient(0deg, transparent 0 2rem, color-mix(in srgb, var(--text) 10%, transparent) 2rem calc(2rem + 1px)),
        var(--surface);
    box-shadow: 0 1.5rem 3rem color-mix(in srgb, var(--text) 9%, transparent);
}
body.layout-repair-ledger .artifact-stage > * { margin-left: 2.1rem; }
body.layout-repair-ledger .artifact-index { grid-template-columns: 1fr; }
body.layout-repair-ledger .artifact-index li { background: transparent; border-width: 0 0 1px; }
body.layout-repair-ledger .pillar-grid { grid-template-columns: 1.4fr .8fr .8fr 1fr; }

/* 2. Small-space plan */
body.layout-space-journal .hero-grid { grid-template-columns: minmax(18rem, .9fr) minmax(0, 1.1fr); grid-template-areas: "artifact copy"; }
body.layout-space-journal .artifact-stage {
    border-radius: 0;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--accent-alt) 13%, transparent) 1px, transparent 1px),
        linear-gradient(0deg, color-mix(in srgb, var(--accent-alt) 13%, transparent) 1px, transparent 1px),
        var(--surface);
    background-size: 2rem 2rem;
}
body.layout-space-journal .artifact-index { grid-template-columns: 1.25fr .75fr; grid-template-rows: 1fr 1fr; }
body.layout-space-journal .artifact-index li { min-height: 4.5rem; border-color: var(--accent-alt); background: color-mix(in srgb, var(--surface) 86%, transparent); }
body.layout-space-journal .pillar-grid { grid-template-columns: 1.4fr .6fr; }
body.layout-space-journal .pillar-card:first-child { grid-row: span 2; }

/* 3. Seasonal field wheel */
body.layout-season-wheel .hero-grid { grid-template-columns: minmax(19rem, .85fr) minmax(0, 1.15fr); grid-template-areas: "artifact copy"; }
body.layout-season-wheel .artifact-stage {
    border-radius: 50%;
    aspect-ratio: 1;
    min-height: 0;
    background: conic-gradient(from -35deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface) 24%, color-mix(in srgb, var(--accent-alt) 20%, var(--surface)) 52%, var(--surface) 76%, color-mix(in srgb, var(--accent) 18%, var(--surface)));
}
body.layout-season-wheel .artifact-index { grid-template-columns: 1fr 1fr; transform: rotate(-3deg); }
body.layout-season-wheel .artifact-index li { border-radius: 50%; text-align: center; background: var(--surface); }
body.layout-season-wheel .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 4. Tool shadow board */
body.layout-workbench .hero-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "copy copy" "artifact artifact"; }
body.layout-workbench .artifact-stage {
    min-height: 16rem;
    color: #f4f0e7;
    border-radius: .35rem;
    background:
        radial-gradient(circle, #777 1px, transparent 1.5px) 0 0 / 1.15rem 1.15rem,
        #242625;
}
body.layout-workbench .artifact-label,
body.layout-workbench .artifact-note { color: #d7d0c4; }
body.layout-workbench .artifact-index { grid-template-columns: repeat(4, 1fr); }
body.layout-workbench .artifact-index li { display: grid; place-items: center; min-height: 5.5rem; border-color: #8d8a83; background: #303331; }
body.layout-workbench .pillar-grid { grid-template-columns: repeat(4, 1fr); gap: .35rem; }

/* 5. Household calendar */
body.layout-home-rhythm .hero-grid { grid-template-columns: minmax(18rem, .8fr) minmax(0, 1.2fr); grid-template-areas: "artifact copy"; }
body.layout-home-rhythm .artifact-stage { border-radius: 1.8rem .4rem 1.8rem .4rem; box-shadow: none; }
body.layout-home-rhythm .artifact-stage::before { content: ""; position: absolute; inset: 4.8rem 1.4rem 4rem; border: 1px solid color-mix(in srgb, var(--text) 15%, transparent); background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), color-mix(in srgb, var(--text) 12%, transparent) calc(25% - 1px) 25%); }
body.layout-home-rhythm .artifact-index { grid-template-columns: repeat(2, 1fr); }
body.layout-home-rhythm .artifact-index li { min-height: 3.8rem; border-radius: .3rem; }
body.layout-home-rhythm .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 6. Baking test notebook */
body.layout-bake-notebook .artifact-stage {
    border-radius: .45rem;
    background: repeating-linear-gradient(0deg, transparent 0 2.15rem, color-mix(in srgb, var(--accent-alt) 13%, transparent) 2.15rem calc(2.15rem + 1px)), var(--surface);
}
body.layout-bake-notebook .artifact-index { grid-template-columns: repeat(2, 1fr); }
body.layout-bake-notebook .artifact-index li { border: 0; border-bottom: 1px solid var(--accent); background: transparent; }
body.layout-bake-notebook .widget-card { grid-template-columns: 1.1fr .9fr; border-radius: 2rem .4rem .4rem 2rem; }
body.layout-bake-notebook .pillar-grid { grid-template-columns: 1fr 1fr; }

/* 7. Sewing pattern sheet */
body.layout-pattern-book .hero-grid { grid-template-columns: minmax(18rem, .9fr) minmax(0, 1.1fr); grid-template-areas: "artifact copy"; }
body.layout-pattern-book .artifact-stage { border-style: dashed; background: var(--surface); }
body.layout-pattern-book .artifact-stage::before,
body.layout-pattern-book .artifact-stage::after { content: ""; position: absolute; width: 13rem; height: 7rem; border: 1px dashed var(--accent-alt); border-radius: 55% 45% 38% 62%; transform: rotate(-17deg); opacity: .55; }
body.layout-pattern-book .artifact-stage::before { right: -2rem; top: 2rem; }
body.layout-pattern-book .artifact-stage::after { left: -4rem; bottom: -2rem; transform: rotate(22deg); }
body.layout-pattern-book .artifact-index { grid-template-columns: 1fr 1fr; }
body.layout-pattern-book .artifact-index li { border-style: dashed; background: color-mix(in srgb, var(--surface) 88%, transparent); }
body.layout-pattern-book .pillar-grid { grid-template-columns: repeat(2, 1fr); }

/* 8. Pocket city atlas */
body.layout-city-atlas .hero-grid { grid-template-columns: minmax(19rem, .8fr) minmax(0, 1.2fr); grid-template-areas: "artifact copy"; }
body.layout-city-atlas .artifact-stage { border-radius: 0; background: linear-gradient(27deg, transparent 45%, color-mix(in srgb, var(--accent) 24%, transparent) 46% 47%, transparent 48%), linear-gradient(153deg, transparent 39%, color-mix(in srgb, var(--accent-alt) 22%, transparent) 40% 41%, transparent 42%), var(--surface); }
body.layout-city-atlas .artifact-index { grid-template-columns: 1fr; margin-left: 2.2rem; }
body.layout-city-atlas .artifact-index::before { content: ""; position: absolute; left: -1.35rem; top: .4rem; bottom: .4rem; width: 1px; background: var(--accent); }
body.layout-city-atlas .artifact-index li { border: 0; background: var(--surface); box-shadow: 0 .4rem 1.4rem color-mix(in srgb, var(--text) 7%, transparent); }
body.layout-city-atlas .pillar-grid { grid-template-columns: repeat(12, 1fr); }
body.layout-city-atlas .pillar-card { grid-column: span 3; }

/* 9. Camp field log */
body.layout-camp-log .artifact-stage { border-radius: .2rem 1.2rem .2rem 1.2rem; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
body.layout-camp-log .artifact-stage::after { content: ""; position: absolute; right: 1.3rem; top: 1.3rem; width: 2.2rem; height: 2.2rem; border: 1px solid var(--accent-alt); transform: rotate(45deg); }
body.layout-camp-log .artifact-index { grid-template-columns: 1fr; }
body.layout-camp-log .artifact-index li { display: flex; align-items: center; min-height: 2.7rem; border-width: 0 0 1px; background: transparent; }
body.layout-camp-log .widget-card { border-radius: .2rem; box-shadow: none; }

/* 10. Pet observation timeline */
body.layout-pet-observer .hero-grid { grid-template-columns: minmax(19rem, .85fr) minmax(0, 1.15fr); grid-template-areas: "artifact copy"; }
body.layout-pet-observer .artifact-stage { border: 0; border-radius: 2.2rem; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
body.layout-pet-observer .artifact-index { grid-template-columns: 1fr; margin-left: 1.8rem; }
body.layout-pet-observer .artifact-index::before { content: ""; position: absolute; left: -.95rem; inset-block: .4rem; width: 1px; background: var(--accent); }
body.layout-pet-observer .artifact-index li { position: relative; border: 0; border-radius: 1rem; }
body.layout-pet-observer .artifact-index li::before { content: ""; position: absolute; left: -1.2rem; top: 1.05rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); }
body.layout-pet-observer .pillar-grid { grid-template-columns: 1fr; }

/* 11. Language workbook path */
body.layout-lesson-path .artifact-stage { border-radius: .35rem; background: linear-gradient(90deg, transparent 0 3.2rem, color-mix(in srgb, var(--accent-alt) 42%, transparent) 3.2rem calc(3.2rem + 1px), transparent calc(3.2rem + 1px)), repeating-linear-gradient(0deg, transparent 0 2rem, color-mix(in srgb, var(--text) 9%, transparent) 2rem calc(2rem + 1px)), var(--surface); }
body.layout-lesson-path .artifact-stage > * { margin-left: 2.2rem; }
body.layout-lesson-path .artifact-index { grid-template-columns: repeat(4, 1fr); }
body.layout-lesson-path .artifact-index li { display: grid; place-items: center; min-height: 4rem; border-radius: .2rem; background: color-mix(in srgb, var(--surface) 88%, transparent); text-align: center; }
body.layout-lesson-path .pillar-grid { grid-template-columns: repeat(4, 1fr); }

/* 12. Data ledger */
body.layout-data-canvas .hero-grid { grid-template-columns: 1fr; grid-template-areas: "copy" "artifact"; }
body.layout-data-canvas .artifact-stage { min-height: 14rem; border: 2px solid var(--text); border-radius: 0; box-shadow: none; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), color-mix(in srgb, var(--text) 18%, transparent) calc(25% - 1px) 25%), repeating-linear-gradient(0deg, transparent 0 2.6rem, color-mix(in srgb, var(--text) 14%, transparent) 2.6rem calc(2.6rem + 1px)), var(--surface); }
body.layout-data-canvas .artifact-index { grid-template-columns: repeat(4, 1fr); gap: 0; }
body.layout-data-canvas .artifact-index li { border-radius: 0; border-width: 1px 1px 1px 0; background: var(--surface); }
body.layout-data-canvas .artifact-note { font-family: var(--font-data); }

/* 13. Knowledge binder */
body.layout-knowledge-cards .artifact-stage { border-radius: .25rem 1.2rem 1.2rem .25rem; padding-left: 3.4rem; box-shadow: .7rem 1.3rem 3rem color-mix(in srgb, var(--text) 8%, transparent); }
body.layout-knowledge-cards .artifact-stage::before { content: ""; position: absolute; left: 1rem; top: 0; bottom: 0; width: 1px; background: var(--accent); box-shadow: .65rem 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
body.layout-knowledge-cards .artifact-index { grid-template-columns: 1fr; margin-right: -2.2rem; }
body.layout-knowledge-cards .artifact-index li { border-radius: .2rem 0 0 .2rem; border-right: 1px solid var(--accent-alt); }
body.layout-knowledge-cards .pillar-grid { grid-template-columns: repeat(2, 1fr); }

/* 14. Process swimlane board */
body.layout-process-board .hero-grid { grid-template-columns: 1fr; grid-template-areas: "copy" "artifact"; }
body.layout-process-board .artifact-stage { min-height: 13rem; border-radius: .2rem; box-shadow: none; }
body.layout-process-board .artifact-index { grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid color-mix(in srgb, var(--text) 20%, transparent); }
body.layout-process-board .artifact-index li { min-height: 4.5rem; border-width: 0 1px 0 0; border-radius: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface)); }
body.layout-process-board .pillar-grid { grid-template-columns: 1fr; }
body.layout-process-board .pillar-card { display: grid; grid-template-columns: minmax(11rem, .35fr) 1fr; }

/* 15. Portfolio folio stack */
body.layout-portfolio-stack .hero-grid { grid-template-columns: minmax(19rem, .85fr) minmax(0, 1.15fr); grid-template-areas: "artifact copy"; }
body.layout-portfolio-stack .artifact-stage { overflow: visible; transform: rotate(-1deg); }
body.layout-portfolio-stack .artifact-stage::before,
body.layout-portfolio-stack .artifact-stage::after { content: ""; position: absolute; inset: .7rem -.7rem -.7rem .7rem; z-index: -1; border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); background: var(--surface); box-shadow: 0 1rem 2rem color-mix(in srgb, var(--text) 7%, transparent); }
body.layout-portfolio-stack .artifact-stage::after { inset: 1.4rem -1.4rem -1.4rem 1.4rem; opacity: .7; }
body.layout-portfolio-stack .artifact-index { grid-template-columns: 1fr 1fr; }
body.layout-portfolio-stack .pillar-grid { grid-template-columns: 1fr 1fr; }

/* 16. Open-source dossier */
body.layout-open-manual .artifact-stage { border-radius: .1rem; box-shadow: none; background: linear-gradient(90deg, color-mix(in srgb, var(--accent-alt) 16%, var(--surface)) 0 2.3rem, var(--surface) 2.3rem); padding-left: 4.2rem; }
body.layout-open-manual .artifact-label { font-family: var(--font-data); }
body.layout-open-manual .artifact-index { grid-template-columns: 1fr 1fr; gap: .2rem; }
body.layout-open-manual .artifact-index li { border-radius: 0; background: transparent; border-width: 0 0 1px; }
body.layout-open-manual .pillar-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }

/* 17. Network blueprint */
body.layout-network-blueprint .hero-grid { grid-template-columns: minmax(19rem, .9fr) minmax(0, 1.1fr); grid-template-areas: "artifact copy"; }
body.layout-network-blueprint .artifact-stage { color: #effbff; border-color: #75aab8; border-radius: .2rem; background: linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.06) 1px, transparent 1px), #163943; background-size: 1.5rem 1.5rem; box-shadow: none; }
body.layout-network-blueprint .artifact-label,
body.layout-network-blueprint .artifact-note { color: #c9e0e5; }
body.layout-network-blueprint .artifact-index { grid-template-columns: 1fr 1fr; gap: 1.2rem 2.2rem; }
body.layout-network-blueprint .artifact-index::before { content: ""; position: absolute; inset: 50% 12%; height: 1px; background: #75aab8; }
body.layout-network-blueprint .artifact-index li { border-color: #75aab8; border-radius: 50%; background: #163943; text-align: center; }
body.layout-network-blueprint .pillar-grid { grid-template-columns: 1fr 1fr; }

/* 18. 3D-print calibration passport */
body.layout-print-lab .artifact-stage { border-radius: 0; box-shadow: none; background: repeating-linear-gradient(90deg, transparent 0 .95rem, color-mix(in srgb, var(--accent) 15%, transparent) .95rem 1rem), var(--surface); }
body.layout-print-lab .artifact-stage::after { content: ""; position: absolute; inset-inline: 1.4rem; bottom: 1.3rem; height: .8rem; background: repeating-linear-gradient(90deg, var(--text) 0 1px, transparent 1px .5rem); opacity: .45; }
body.layout-print-lab .artifact-index { grid-template-columns: repeat(4, 1fr); align-items: end; }
body.layout-print-lab .artifact-index li:nth-child(1) { min-height: 3rem; }
body.layout-print-lab .artifact-index li:nth-child(2) { min-height: 5rem; }
body.layout-print-lab .artifact-index li:nth-child(3) { min-height: 4rem; }
body.layout-print-lab .artifact-index li:nth-child(4) { min-height: 6rem; }
body.layout-print-lab .pillar-grid { grid-template-columns: repeat(4, 1fr); }

/* 19. Photographic contact sheet */
body.layout-photo-contact-sheet .hero-grid { grid-template-columns: minmax(19rem, .9fr) minmax(0, 1.1fr); grid-template-areas: "artifact copy"; }
body.layout-photo-contact-sheet .artifact-stage { color: #f6f0ec; border: 0; border-radius: 0; background: #121111; box-shadow: none; }
body.layout-photo-contact-sheet .artifact-label,
body.layout-photo-contact-sheet .artifact-note { color: #cfc4bd; }
body.layout-photo-contact-sheet .artifact-index { grid-template-columns: 1fr 1fr; gap: .35rem; }
body.layout-photo-contact-sheet .artifact-index li { min-height: 5rem; border-color: #5e5550; border-radius: 0; background: #2b2725; outline: 1px solid #121111; outline-offset: -.5rem; }
body.layout-photo-contact-sheet .pillar-grid { grid-template-columns: repeat(2, 1fr); gap: .35rem; }

/* 20. Automation wiring panel */
body.layout-automation-console .hero-grid { grid-template-columns: 1.05fr .95fr; }
body.layout-automation-console .artifact-stage { color: #e9f4f4; border-radius: .3rem; background: linear-gradient(135deg, #21373b, #18282b); box-shadow: none; }
body.layout-automation-console .artifact-label,
body.layout-automation-console .artifact-note { color: #bfd2d4; }
body.layout-automation-console .artifact-index { grid-template-columns: 1fr 1fr; }
body.layout-automation-console .artifact-index li { position: relative; border-color: #5f8187; border-radius: .25rem; background: #263f44; }
body.layout-automation-console .artifact-index li::after { content: ""; position: absolute; right: .55rem; top: .55rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent-alt); }
body.layout-automation-console .pillar-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }

@media (max-width: 820px) {
    .hero-grid,
    body.layout-space-journal .hero-grid,
    body.layout-season-wheel .hero-grid,
    body.layout-workbench .hero-grid,
    body.layout-home-rhythm .hero-grid,
    body.layout-pattern-book .hero-grid,
    body.layout-city-atlas .hero-grid,
    body.layout-pet-observer .hero-grid,
    body.layout-data-canvas .hero-grid,
    body.layout-process-board .hero-grid,
    body.layout-portfolio-stack .hero-grid,
    body.layout-network-blueprint .hero-grid,
    body.layout-photo-contact-sheet .hero-grid,
    body.layout-automation-console .hero-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "copy" "artifact";
    }

    .artifact-stage {
        min-height: 17rem;
    }

    body.layout-season-wheel .artifact-stage {
        width: min(100%, 24rem);
        margin-inline: auto;
    }

    body.layout-city-atlas .pillar-grid,
    body.layout-repair-ledger .pillar-grid,
    body.layout-workbench .pillar-grid,
    body.layout-process-board .pillar-grid,
    body.layout-lesson-path .pillar-grid,
    body.layout-print-lab .pillar-grid {
        grid-template-columns: 1fr;
    }

    body.layout-city-atlas .pillar-card,
    body.layout-space-journal .pillar-card:first-child {
        grid-column: auto;
        grid-row: auto;
    }

    body.layout-portfolio-stack .artifact-stage {
        margin: 0 1.3rem 1.3rem 0;
    }
}

@media (max-width: 520px) {
    .artifact-index,
    body.layout-workbench .artifact-index,
    body.layout-lesson-path .artifact-index,
    body.layout-data-canvas .artifact-index,
    body.layout-process-board .artifact-index,
    body.layout-print-lab .artifact-index {
        grid-template-columns: 1fr 1fr;
    }

    body.layout-automation-console .pillar-grid {
        grid-template-columns: 1fr;
    }
}