.extra-column {

    margin-top: 30px;
    display: flex;

    flex-direction: column;

    gap: 40px;

}


.extra-card {

    position: relative;

    background: #FFF8E6;

    border: 1px solid #dac5b5;

    border-radius: 22px;

    padding: 30px 24px 24px;

    background-image:
        radial-gradient(
            rgba(93,53,22,.035) 1px,
            transparent 1px
        );

    background-size: 10px 10px;

}


.extra-card h3 {

    font-family: "Fredoka", sans-serif;

    color: #5D3516;

    margin-bottom: 15px;

}


.extra-label {

    position: absolute;

    top: -14px;

    left: 50%;

    transform: translateX(-50%);

    padding: 5px 20px;

    background: #80502B;

    border-radius: 999px;

    color: #FFF8E6;

    font-family: var(--heading-font);

    font-size: .85rem;

    font-weight: 700;

    letter-spacing: .12em;

    white-space: nowrap;

}


/* ===========================
   COMMISSION STATUS
=========================== */

.commission-list {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


/* ===========================
   ROW
=========================== */

.commission-row {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 14px;

    border-radius: 16px;

    transition: .2s ease;

}



/* ===========================
   STATUS ICON
=========================== */

.status-icon {

    width: 22px;

    text-align: center;

    font-size: .95rem;

    font-weight: 700;

}


.open .status-icon {

    color: #6E8C4A;

}


.closed .status-icon {

    color: #B66054;

}


/* ===========================
   COMMISSION NAME
=========================== */

.commission-name {

    flex: 1;

    color: #5D3516;

    font-weight: 500;

    font-size: .92rem;

}


/* ===========================
   STATUS PILL
=========================== */

.status-pill {

    padding: 4px 12px;

    border-radius: 999px;

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .08em;

}


.open .status-pill {

    color: #5C8642;

}


.closed .status-pill {

    color: #A5534A;

}


/* ===========================
   BOARD CARD
=========================== */

.board-card {

    position: relative;

    width: 100%;

    background: #7A5031;

    border: 1px solid rgba(0,0,0,.18);

    border-radius: 22px;

    padding: 32px 20px 20px;

    overflow: visible;

}


/* ===========================
   WOOD GRAIN
=========================== */

.board-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(255,255,255,.02) 3px,
            transparent 8px,
            rgba(0,0,0,.03) 14px
        );

    opacity: .5;

    pointer-events: none;

}


/* ===========================
   BOARD LABEL
=========================== */

.board-label {

    position: absolute;

    top: -16px;

    left: 50%;

    transform: translateX(-50%);

    padding: 5px 22px;

    background: #80502B;

    border: 1px solid rgba(0,0,0,.18);

    border-radius: 999px;

    color: #FFF8E6;

    font-family: var(--heading-font);

    font-size: .85rem;

    font-weight: 700;

    letter-spacing: .1em;

    white-space: nowrap;

    z-index: 2;

}

.board-list {

    display: flex;

    flex-direction: column;

    gap: 16px;

    margin-top: 6px;

}


/* ===========================
   PAPER
=========================== */
.board-pin {

    width: 30px;
    height: 30px;

    position: relative;

    top: -24px;
    left: 2px;

}

.board-item {

    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 14px 16px;

    background: #FFF8E6;

    border: 1px solid rgba(93,53,22,.08);

    border-radius: 14px;

    transition: .25s ease;

}


/* ===========================
   PAPER ROTATION
=========================== */

.board-item:nth-child(odd) {

    transform: rotate(-1deg);

}

.board-item:nth-child(even) {

    transform: rotate(.8deg);

}


/* ===========================
   HOVER
=========================== */

.board-item:hover {

    transform: translateY(-4px) rotate(0deg);

    box-shadow:
        0 8px 18px rgba(0,0,0,.16);

}


/* ===========================
   TEXT
=========================== */

.board-text {

    color: #5D3516;

    font-size: .85rem;

    line-height: 1.6;

}


.blender-card {

    position: relative;

    background: #FFF8E6;

    border: 1px solid #dac5b5;

    border-radius: 22px;

    padding: 30px 24px 24px;

    background-image:
        radial-gradient(
            rgba(93,53,22,.035) 1px,
            transparent 1px
        );

    background-size: 10px 10px;

}


.blender-card h3 {

    font-family: "Fredoka", sans-serif;

    color: #5D3516;

    margin-bottom: 5px;

}


.blender-label {

    position: absolute;

    top: -14px;

    left: 50%;

    transform: translateX(-50%);

    padding: 5px 20px;

    background: #80502B;

    border-radius: 999px;

    color: #FFF8E6;

    font-family: var(--heading-font);

    font-size: .85rem;

    font-weight: 700;

    letter-spacing: .12em;

    white-space: nowrap;

}

.blender-info p {
color: #80502B;
margin-top: 0px;
margin-bottom: 10px;
}

/* ===========================
   LEARN BUTTON
=========================== */

.learn-btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:16px;

    padding:10px 24px;

    border:none;

    border-radius:999px;

    color:#80502B;

    background:#d4cab8;

    border: 1px solid #5D3516;
    font-family:var(--heading-font);

    font-size:.9rem;

    font-weight:700;

    letter-spacing:.05em;

    cursor:pointer;

    transition: .25s ease;

}

.extra-column.hidden {
    display:none;
}