/* ==========================================================================
   5-Piece Canvas Wall Art — SECTIONS B
   §12 how-it-works · §13 size guide · §14 craft · §15 spaces · §16 production

   Loads AFTER five-piece-canvas-v2.css and depends on its tokens, resets and
   shared classes (.fpc-section, .fpc-shell, .fpc-kicker, .fpc-h2, .fpc-h3,
   .fpc-lede, .fpc-btn, .fpc-textlink, .fpc-visually-hidden).

   RULES THIS FILE OBEYS
   - Every selector begins with .fpc-page. No bare element selectors, no
     global rules, nothing that can reach another page.
   - Element-level resets live in :where() so they contribute zero
     specificity and can never outrank the component classes below.
   - Image rules are double-scoped (.fpc-page .fpc-block .fpc-block__photo)
     so they beat any ancestor `img{height:auto;object-fit:contain}`.
   - No font-family on h1..h6 — the foundation already sets the serif with the
     !important needed to match single-product-detail.css. Serif on non-heading
     text uses b / strong / small / i, which that stylesheet's
     `h1..h6,p,span,label,a{font-family:inherit!important}` does not touch, so
     no !important is needed here at all.
   - Glyph tiles deliberately set no font-family: the design asks for Playfair
     but none of the symbols (↥ ▥ ⌂ ✳ ⌕ ◉ ▤ ◇ ▱) exist in it, so every
     browser falls back to a system font either way.

   TYPE SCALE — the design's 7-13px body copy is a canvas-preview artefact.
   Mapped onto the foundation's readable ramp:
     design 7-8px uppercase+tracked -> --fpc-fs-micro (11px)
     design 7-10px ordinary text    -> --fpc-fs-xs    (12px)
     design 11px                    -> --fpc-fs-sm    (13px)
     design 12px                    -> --fpc-fs-md    (14px)
   The five section paragraphs use the shared .fpc-lede (15px) rather than
   their mapped 13-14px: they are the sections' primary reading copy and the
   foundation defines .fpc-lede for exactly that role.
   ========================================================================== */

/* ---------------------------- shared resets ------------------------------ */
/* :where() — zero specificity, see the header note. */

.fpc-page :where(table) { width: 100%; border-collapse: collapse; }
.fpc-page :where(th) { font-weight: 400; text-align: left; }
.fpc-page :where(caption) { text-align: left; }

/* ==========================================================================
   §12 — "From photo to feature wall" (4 steps)
   ========================================================================== */

.fpc-page .fpc-how {
    background: #fbfaf6;
    border-block: 1px solid var(--fpc-line-2);
}

.fpc-page .fpc-how__head {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

.fpc-page .fpc-how__head .fpc-h2 { margin: 12px 0; }

.fpc-page .fpc-how__lede {
    max-width: 500px;
    margin: 0 auto;
}

.fpc-page .fpc-how__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 38px;
}

.fpc-page .fpc-how__card {
    position: relative;
    min-width: 0;
    min-height: 190px;
    padding: 22px 20px;
    border: 1px solid #e7dfd2;
    background: #fffefa;
}

.fpc-page .fpc-how__num {
    position: absolute;
    top: 14px;
    right: 15px;
    color: #bfa373;
    font-size: var(--fpc-fs-micro);
    font-weight: 700;
    letter-spacing: .1em;
}

.fpc-page .fpc-how__glyph {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    border: 1px solid #e8ddca;
    color: #a17b3f;
    font-size: 22px;
    line-height: 1;
}

.fpc-page .fpc-how__card h3 {
    margin: 17px 0 6px;
    font-size: clamp(17px, 1.35vw, 19px);
    font-weight: 500;
    line-height: 1.2;
}

.fpc-page .fpc-how__card p {
    color: #837a6e;
    font-size: var(--fpc-fs-xs);
    line-height: 1.75;
}

/* ==========================================================================
   §13 — Size guide (#fpc-sizes)
   ========================================================================== */

.fpc-page .fpc-sizes {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(35px, 6.5vw, 95px);
    background: #f1ece3;
}

/* ---- decorative measured artwork (CSS only — no stock photography) ---- */

.fpc-page .fpc-sizes__art {
    position: relative;
    min-width: 0;
    aspect-ratio: 1.02 / 1;
    max-height: 500px;
    overflow: hidden;
    border: 10px solid #e8decf;
    background: linear-gradient(115deg, #d7c5ac, #f1e6d4 55%, #d8c6af);
}

.fpc-page .fpc-sizes__art::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0, transparent 24%, #ffffff22 24.2%, transparent 24.8%);
}

.fpc-page .fpc-sizes__frame {
    position: absolute;
    z-index: 1;
    left: 10%;
    top: 18%;
    display: flex;
    gap: 1.8%;
    width: 80%;
    height: 47%;
    padding: 1%;
    background: #ae9978;
    box-shadow: 0 16px 25px #4937232e;
    transform: rotate(-1deg);
}

.fpc-page .fpc-sizes__frame i {
    flex: 1;
    min-width: 0;
    border: 1px solid #c5b292;
    background: linear-gradient(150deg, #b09b7b, #e7dbc7 45%, #8d9480);
}

.fpc-page .fpc-sizes__measure {
    position: absolute;
    left: 8%;
    right: 8%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #806846;
    font-size: var(--fpc-fs-xs);
}

.fpc-page .fpc-sizes__measure::before,
.fpc-page .fpc-sizes__measure::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #b49a71;
}

.fpc-page .fpc-sizes__measure--top    { top: 10%; }
.fpc-page .fpc-sizes__measure--bottom { bottom: 19%; }

/* ---- copy + table ---- */

.fpc-page .fpc-sizes__copy { min-width: 0; }
.fpc-page .fpc-sizes__lede { margin-bottom: 20px; }

.fpc-page .fpc-sizes__table-wrap {
    border: 1px solid #ddd3c3;
    background: #fbf9f4;
}

.fpc-page .fpc-sizes__table { width: 100%; border-collapse: collapse; }

.fpc-page .fpc-sizes__table thead th {
    padding: 10px 12px;
    background: #e6ded1;
    color: #7c705d;
    font-size: var(--fpc-fs-xs);
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.fpc-page .fpc-sizes__table tbody th,
.fpc-page .fpc-sizes__table tbody td {
    border-top: 1px solid #e5ddd0;
    color: #665d50;
    font-size: var(--fpc-fs-xs);
    font-weight: 400;
    text-align: left;
    vertical-align: middle;
}

.fpc-page .fpc-sizes__table tbody th { padding: 0; }
.fpc-page .fpc-sizes__table tbody td { padding: 10px 12px; }
.fpc-page .fpc-sizes__table tbody td:last-child { color: #8b8174; }

.fpc-page .fpc-sizes__row { transition: background .2s ease; }
.fpc-page .fpc-sizes__row:hover { background: #f0e4cc; }

.fpc-page .fpc-sizes__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 8px 12px;
    color: #393229;
    text-align: left;
}

.fpc-page .fpc-sizes__btn b {
    font-family: var(--fpc-serif);
    font-size: var(--fpc-fs-sm);
    font-weight: 500;
}

.fpc-page .fpc-sizes__btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: #a9873f;
    opacity: 0;
    transition: opacity .2s ease;
}

.fpc-page .fpc-sizes__row:hover .fpc-sizes__btn svg,
.fpc-page .fpc-sizes__btn:focus-visible svg { opacity: 1; }

.fpc-page .fpc-sizes__copy .fpc-textlink { margin-top: 15px; }

.fpc-page .fpc-sizes__footnote {
    display: block;
    margin-top: 9px;
    color: #9a9081;
    font-size: var(--fpc-fs-xs);
}

/* ==========================================================================
   §14 — Craft / materials (#fpc-craft)
   ========================================================================== */

.fpc-page .fpc-craft {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    align-items: center;
    gap: clamp(35px, 7vw, 100px);
    background: #fbf9f4;
}

.fpc-page .fpc-craft__copy { min-width: 0; }

.fpc-page .fpc-craft__specs {
    display: grid;
    gap: 15px;
    margin-top: 23px;
}

.fpc-page .fpc-craft__spec {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
}

.fpc-page .fpc-craft__spec > b {
    color: #b18d50;
    font-family: var(--fpc-serif);
    font-size: var(--fpc-fs-lg);
    font-weight: 500;
    line-height: 1.35;
}

.fpc-page .fpc-craft__spec > span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.fpc-page .fpc-craft__spec strong {
    font-family: var(--fpc-serif);
    font-size: clamp(16px, 1.2vw, 17px);
    font-weight: 500;
    line-height: 1.25;
}

.fpc-page .fpc-craft__spec small {
    color: #8b8174;
    font-size: var(--fpc-fs-xs);
    line-height: 1.65;
}

.fpc-page .fpc-craft__art {
    position: relative;
    min-width: 0;
    min-height: 350px;
    padding: 52px 36px;
    overflow: hidden;
    background: linear-gradient(140deg, #ddd0bd, #f2e7d7 55%, #d1bfa7);
}

.fpc-page .fpc-craft__stage {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 1.8%;
    width: 95%;
    height: 210px;
    margin: auto;
    padding: 7px;
    background: #b6a081;
    box-shadow: 4px 14px 27px #37271732;
    transform: rotate(-2deg);
}

.fpc-page .fpc-craft__stage i {
    flex: 1;
    min-width: 0;
    border: 1px solid #c5b292;
    background: linear-gradient(150deg, #b09b7b, #e7dbc7 45%, #8d9480);
}

/* double-scoped: must beat an ancestor img{height:auto;object-fit:contain} */
.fpc-page .fpc-craft .fpc-craft__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.fpc-page .fpc-craft__finish {
    position: absolute;
    z-index: 2;
    left: 11%;
    right: 0;
    bottom: 18px;
    display: grid;
    gap: 3px;
    padding: 14px 18px;
    background: #fcfaf5ed;
    box-shadow: 0 8px 20px #3b2d1c1d;
}

.fpc-page .fpc-craft__finish > small {
    color: #99743d;
    font-size: var(--fpc-fs-micro);
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.fpc-page .fpc-craft__finish > b {
    font-family: var(--fpc-serif);
    font-size: clamp(16px, 1.2vw, 17px);
    font-weight: 500;
    line-height: 1.25;
}

.fpc-page .fpc-craft__finish > span {
    color: #8b8173;
    font-size: var(--fpc-fs-xs);
}

/* ==========================================================================
   §15 — "A wall can hold a whole story" (3 room scenes)
   ========================================================================== */

.fpc-page .fpc-spaces { background: #f6f2ea; }

.fpc-page .fpc-spaces__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
}

.fpc-page .fpc-spaces__head > div {
    min-width: 0;
    max-width: 640px;
}

.fpc-page .fpc-spaces__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    margin-top: 26px;
}

.fpc-page .fpc-spaces__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    min-height: 265px;
    padding: 21px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(140deg, #d1c1a9, #8b7a64);
}

/* scrim — painted after the photo, which is the preceding child */
.fpc-page .fpc-spaces__card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #171610e6, #17161059 44%, transparent 78%);
}

.fpc-page .fpc-spaces__card > * { position: relative; z-index: 1; }

/* double-scoped, see §14 */
.fpc-page .fpc-spaces .fpc-spaces__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* CSS fallback when a photograph is unavailable — never a broken image */
.fpc-page .fpc-spaces__mock {
    position: absolute;
    z-index: 0;
    top: 17%;
    left: 17%;
    right: 17%;
    display: flex;
    gap: 2.5%;
    height: 39%;
    padding: 7px;
    border: 7px solid #b9a184;
    background: #a79070;
    box-shadow: 0 10px 17px #2a211626;
}

.fpc-page .fpc-spaces__mock i {
    flex: 1;
    min-width: 0;
    background: linear-gradient(150deg, #9eaa91, #e2d6c3 42%, #7c8d79);
}

.fpc-page .fpc-spaces__card > b {
    color: #e9d3ab;
    font-size: var(--fpc-fs-micro);
    font-weight: 700;
    letter-spacing: .14em;
}

.fpc-page .fpc-spaces__card h3 { margin: 7px 0; }

.fpc-page .fpc-spaces__card p {
    color: #f2ece1;
    font-size: var(--fpc-fs-xs);
    line-height: 1.6;
}

/* ==========================================================================
   §16 — Production process (8 stages)
   ========================================================================== */

.fpc-page .fpc-production { background: #f4eee4; }

.fpc-page .fpc-production__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
}

.fpc-page .fpc-production__head > div {
    min-width: 0;
    max-width: 640px;
}

.fpc-page .fpc-production__badge {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    padding-left: 17px;
    border-left: 1px solid #d8c9b1;
    color: #a37b3e;
}

.fpc-page .fpc-production__badge b {
    font-family: var(--fpc-serif);
    font-size: 34px;
    font-weight: 500;
    line-height: 1;
}

.fpc-page .fpc-production__badge small {
    color: #837564;
    font-size: var(--fpc-fs-xs);
    line-height: 1.5;
}

.fpc-page .fpc-production__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 28px;
}

.fpc-page .fpc-production__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 150px;
    padding: 15px;
    border: 1px solid #e2d8c9;
    background: #fbf8f1;
}

.fpc-page .fpc-production__num {
    display: block;
    color: #b28d51;
    font-size: var(--fpc-fs-micro);
    font-weight: 700;
    letter-spacing: 1px;
}

.fpc-page .fpc-production__glyph {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 9px 0;
    background: #eee1cb;
    color: #91703c;
    font-size: 17px;
    font-style: normal;
    line-height: 1;
}

/* double-scoped, see §14 */
.fpc-page .fpc-production .fpc-production__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 9px 0;
    object-fit: cover;
    object-position: center;
}

.fpc-page .fpc-production__card b {
    font-family: var(--fpc-serif);
    font-size: var(--fpc-fs-lg);
    font-weight: 500;
    line-height: 1.3;
}

.fpc-page .fpc-production__card p {
    margin-top: 5px;
    color: #867a69;
    font-size: var(--fpc-fs-xs);
    line-height: 1.6;
}

/* ==============================  responsive  ============================= */

@media (max-width: 1100px) {
    .fpc-page .fpc-how__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fpc-page .fpc-production__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .fpc-page .fpc-sizes,
    .fpc-page .fpc-craft { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .fpc-page .fpc-sizes__art { aspect-ratio: 1.3 / 1; max-height: 400px; }
    .fpc-page .fpc-craft__art { min-height: 300px; padding: 40px 26px; }
    .fpc-page .fpc-craft__stage { height: 175px; }
    .fpc-page .fpc-spaces__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fpc-page .fpc-production__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .fpc-page .fpc-how__grid { gap: 10px; margin-top: 26px; }
    .fpc-page .fpc-how__card { min-height: 0; padding: 18px 16px; }
    .fpc-page .fpc-how__card h3 { margin: 14px 0 5px; }

    /* ---- the size table stacks rather than scrolls ----
       Explicit ARIA roles are on the markup, so the table keeps its
       semantics even though display is changed here. */
    .fpc-page .fpc-sizes__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .fpc-page .fpc-sizes__table,
    .fpc-page .fpc-sizes__table tbody,
    .fpc-page .fpc-sizes__row,
    .fpc-page .fpc-sizes__table tbody th,
    .fpc-page .fpc-sizes__table tbody td { display: block; width: 100%; }

    .fpc-page .fpc-sizes__row { padding-bottom: 12px; border-top: 1px solid #e5ddd0; }
    .fpc-page .fpc-sizes__row:first-child { border-top: 0; }
    .fpc-page .fpc-sizes__table tbody th { border-top: 0; }
    .fpc-page .fpc-sizes__table tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        padding: 3px 12px;
        border-top: 0;
        font-size: var(--fpc-fs-sm);
    }
    .fpc-page .fpc-sizes__table tbody td::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: #8b8174;
        font-size: var(--fpc-fs-xs);
        font-weight: 700;
    }
    .fpc-page .fpc-sizes__btn { min-height: 48px; }
    .fpc-page .fpc-sizes__btn svg { opacity: 1; margin-left: auto; }

    .fpc-page .fpc-spaces__head,
    .fpc-page .fpc-production__head { flex-direction: column; align-items: flex-start; gap: 14px; }
    .fpc-page .fpc-spaces__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 20px; }
    .fpc-page .fpc-spaces__card { min-height: 230px; padding: 18px; }

    .fpc-page .fpc-production__badge { padding-left: 0; border-left: 0; }
    .fpc-page .fpc-production__badge b { font-size: 28px; }
    .fpc-page .fpc-production__grid { gap: 9px; margin-top: 22px; }
    .fpc-page .fpc-production__card { min-height: 0; padding: 13px; }
}

@media (max-width: 420px) {
    .fpc-page .fpc-how__grid,
    .fpc-page .fpc-production__grid { grid-template-columns: minmax(0, 1fr); }
    .fpc-page .fpc-craft__art { padding: 30px 18px; }
    .fpc-page .fpc-craft__stage { height: 140px; }
    .fpc-page .fpc-craft__finish { left: 6%; padding: 12px 14px; }
    .fpc-page .fpc-sizes__art { aspect-ratio: 1.15 / 1; }
}

@media (prefers-reduced-motion: reduce) {
    .fpc-page .fpc-sizes__row,
    .fpc-page .fpc-sizes__btn svg { transition: none; }
}