/* FOOTER: the "write back" reply postcard.
   Shared by index.html and the case study pages. Everything is scoped to
   .site-footer and sets its own fonts and colors, so it looks the same whether
   or not global-stylesheet.css is also loaded. */

.site-footer {
    margin: 0;
    padding: 0;
    text-align: left;
    background: #161614;
    color: #F3F3EE;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
.site-footer *, .site-footer *::before, .site-footer *::after { box-sizing: border-box; }

.site-footer .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(80px, 10vw, 120px) 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* the card */
.reply-card {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    overflow: hidden;
    background: var(--paper-texture, none), #FFFDF7;   /* texture defined in postcards.css */
    background-size: 360px 360px, auto;
    background-blend-mode: multiply, normal;
    color: #1A1A18;
    border-radius: 4px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    transform: rotate(-1deg);
}
/* airmail edge */
.reply-card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 8px;
    background: repeating-linear-gradient(-45deg, #E8749A 0 14px, #FFFDF7 14px 22px, #4D6A2A 22px 36px, #FFFDF7 36px 44px);
}

/* message side */
.reply-msg {
    flex: 3 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 52px 40px 40px;
    border-right: 1px solid #E6E1D3;
}
.reply-label {
    font-family: 'Courier Prime', ui-monospace, monospace;
    font-size: 12.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5C5C57;
}
.site-footer .footer-title {
    margin: 0;
    max-width: none;
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 450;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: #1A1A18;
    text-wrap: balance;
}
.site-footer .footer-title em {
    font-family: inherit;
    font-style: italic;
    font-weight: 450;
    letter-spacing: -0.015em;
    color: #4D6A2A;
}
/* "Check one" options, like an old reply card. Hover or focus draws a green check. */
.site-footer .reply-options {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.site-footer .reply-check-label {
    margin-bottom: 6px;
    font-family: 'Courier Prime', ui-monospace, monospace;
    font-size: 12.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5C5C57;
}
.site-footer .reply-option {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 450;
    font-size: 19px;
    line-height: 1.2;
    color: #1A1A18;
    text-decoration: underline transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    transition: text-decoration-color .2s ease;
}
.site-footer .reply-option:hover { color: #1A1A18; font-weight: 450; text-decoration-color: currentColor; }
.site-footer .reply-box {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid #8A8A82;
    border-radius: 3px;
    background: #FFFDF7;
}
.site-footer .reply-box svg { display: block; width: 14px; height: 14px; overflow: visible; }
.site-footer .reply-box path {
    fill: none;
    stroke: #4D6A2A;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 20;
    stroke-dashoffset: 20;            /* hidden until hover */
    transition: stroke-dashoffset .35s cubic-bezier(.4, 0, .2, 1);
}
.site-footer .reply-option:hover .reply-box path,
.site-footer .reply-option:focus-visible .reply-box path { stroke-dashoffset: 0; }
.site-footer a:focus-visible { outline: 2px solid #4D6A2A; outline-offset: 4px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
    .site-footer .reply-box path, .site-footer .reply-option { transition: none; }
}

/* address side */
.reply-address {
    flex: 2 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 52px 40px 40px;
}
.reply-stamp-shadow {
    align-self: flex-end;
    display: block;
    filter: drop-shadow(0 1px 1.5px rgba(26, 26, 24, .22));
    transform: rotate(4deg);
}
.reply-stamp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;             /* multiples of 10 so the notches land evenly */
    height: 80px;
    padding: 7px;
    background: linear-gradient(#F6DCE5, #F6DCE5) content-box, #FFFFFF;
    font-size: 32px;
    line-height: 1;
    /* perforated edge: half-circle notches every 10px, cut out of the paper */
    -webkit-mask:
        linear-gradient(#000 0 0) center / calc(100% - 6px) calc(100% - 6px) no-repeat,
        radial-gradient(circle, #0000 3px, #000 3.5px) -5px -5px / 10px 10px;
            mask:
        linear-gradient(#000 0 0) center / calc(100% - 6px) calc(100% - 6px) no-repeat,
        radial-gradient(circle, #0000 3px, #000 3.5px) -5px -5px / 10px 10px;
}
.reply-lines {
    margin: auto 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 15px;
    color: #33332F;
}
.reply-lines > span { padding-bottom: 6px; border-bottom: 1px solid #E6E1D3; }
.reply-to {
    font-family: 'Courier Prime', ui-monospace, monospace;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5C5C57;
}

.site-footer .footer-meta {
    padding-top: 24px;
    border-top: 1px solid #33332F;
    font-family: 'Courier Prime', ui-monospace, monospace;
    font-size: 14px;
    color: #A3A39C;
}

@media (max-width: 760px) {
    .reply-card { flex-direction: column; transform: none; }
    .reply-msg { border-right: 0; border-bottom: 1px solid #E6E1D3; padding: 44px 24px 32px; }
    .reply-address { padding: 28px 24px 32px; }
}

/* light version for the dark case studies (Amazon, Cansera), so the footer doesn't
   blend into the dark page above it */
.site-footer--light {
    background: #F3F3EE;
    color: #1A1A18;
    border-top: 1px solid #E4E4DE;
}
.site-footer--light .reply-card {
    box-shadow: 0 2px 4px rgba(26, 26, 24, .06), 0 24px 60px rgba(26, 26, 24, .14);
}
.site-footer--light .footer-meta {
    border-top-color: #DCDCD5;
    color: #5C5C57;
}