/* Football Design 1 is a fixed composition. Hosts edit its named content slots. */
.football-website-page .football-website-menu,
.website-preview .football-website-menu {
    position: relative;
    top: auto;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: min(100% - 36px, 880px);
    max-width: none;
    min-height: 54px;
    margin: 0 auto;
    padding: 10px clamp(12px, 2.5vw, 24px);
    gap: clamp(10px, 2.5vw, 30px);
    border: 1px solid #dec78c;
    border-bottom: 1px solid #dec78c;
    border-radius: 9px 9px 0 0;
    background: #fffdf7;
    box-shadow: 0 8px 22px #17392f0d;
}
.football-website-page .football-website-menu::before { content: none; }
.football-website-page .football-website-menu a,
.website-preview .football-website-menu span[data-website-menu-item] {
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    color: #10372e;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(.8rem, 1.5vw, 1rem);
    white-space: nowrap;
}
.football-website-menu [aria-current="page"] { border-bottom-color: #06472f !important; font-weight: 700; }
.website-preview .football-website-menu { width: 100%; }
.website-save-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.website-save-status { font-size: .88rem; font-weight: 600; }
.website-save-status[data-state="saved"] { color: #08633f; }
.website-save-status[data-state="dirty"] { color: #835b1d; }
.website-save-status[data-state="error"] { color: #a51d16; }
@media (max-width: 600px) {
    .football-website-page .football-website-menu,
    .website-preview .football-website-menu { width: calc(100% - 20px); justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: 14px; }
    .website-preview .football-website-menu { width: 100%; }
}
.football-design,
.football-design * { box-sizing: border-box; }
.football-design [hidden],
.football-invitation-dialog [hidden],
[data-football-editor][hidden],
[data-freeform-editor][hidden],
[data-football-live-preview][hidden],
[data-freeform-preview][hidden] { display: none !important; }
.football-design {
    --ft-green: #06472f;
    --ft-ink: #10372e;
    --ft-gold: #b8872f;
    --ft-paper: #fffaf0;
    position: relative;
    isolation: isolate;
    width: min(100% - 36px, 880px);
    margin: 0 auto 56px;
    overflow: hidden;
    border: 1px solid #dec78c;
    border-radius: 4px 4px 20px 20px;
    background:
        radial-gradient(circle at 8% 21%, #c99b4c45 0 1px, transparent 2px),
        radial-gradient(circle at 87% 67%, #b8872f45 0 1px, transparent 2px),
        radial-gradient(circle at 37% 82%, #c99b4c45 0 1px, transparent 2px),
        linear-gradient(150deg, #fffdf8, #fff8e9 78%, #edf2e4);
    box-shadow: 0 20px 54px #17392f17;
    color: var(--ft-ink);
    font-family: var(--ft-display-font, Georgia, serif);
}
.football-design::after {
    position: absolute;
    right: -3%;
    bottom: 0;
    left: -3%;
    z-index: -1;
    height: 82px;
    content: "";
    opacity: .45;
    background: repeating-linear-gradient(80deg, transparent 0 7px, #578454 8px 10px, transparent 11px 18px);
    clip-path: polygon(0 100%, 0 54%, 4% 86%, 9% 28%, 13% 82%, 18% 41%, 23% 90%, 28% 20%, 32% 86%, 37% 39%, 42% 88%, 48% 24%, 54% 90%, 59% 43%, 64% 91%, 70% 28%, 76% 85%, 82% 43%, 87% 89%, 94% 24%, 100% 76%, 100% 100%);
    pointer-events: none;
}
.football-design h1,
.football-design p { margin: 0; color: inherit; }
.football-design h1 {
    font-family: var(--ft-display-font, Georgia, serif);
    font-size: clamp(2.25rem, 5vw, 4.7rem);
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: 1.08;
    overflow-wrap: break-word;
}
.football-design--home .football-invitation-stage { width: 100%; margin: 0; }
.football-design--home .football-invitation-stage-head { padding: 18px clamp(16px, 3vw, 28px) 0; }
.football-design--home .football-invitation-stage .invitation { width: 100%; max-width: none; margin: 0; border-radius: 0; }
.football-design--home .ft-home-invitation-preview { display: grid; justify-items: center; gap: 8px; padding: 50px 20px 28px; text-align: center; }
.football-design--home .ft-home-invitation-preview strong { font-size: clamp(1.4rem, 3vw, 2rem); }
.football-design--home .ft-home-invitation-preview p { color: #62716a; }
.football-design .ft-hero {
    position: relative;
    height: clamp(300px, 56vw, 600px);
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% -14%, #ecdb9d80 0 17%, transparent 58%),
        repeating-linear-gradient(100deg, #174938 0 10%, #1c573e 10% 20%),
        linear-gradient(#1c523d 0 64%, #367344 64%);
}
.football-design .ft-hero::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(180deg, #0c302822, transparent 42%, #0b2d2673);
}
.football-design .ft-hero > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
}
.football-design .ft-hero .ft-invitation-media { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: #132c2a; }
.football-design .ft-platform-invitation { width: 100%; height: 100%; overflow: auto; }
.football-design .ft-platform-invitation .invitation { width: 100%; max-width: none; min-height: 100%; margin: 0; border-radius: 0; }
.football-design .ft-platform-invitation .invite-details { display: none; }
.football-design .ft-photo-fallback {
    display: grid;
    place-content: center;
    gap: 14px;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff4d3;
}
.football-design .ft-photo-fallback > span { font-size: clamp(5rem, 14vw, 10rem); filter: drop-shadow(0 12px 15px #122d2866); }
.football-design .ft-photo-fallback > strong { font-size: 1.3rem; text-shadow: 0 2px 8px #122d28; }
.football-design .ft-handwriting {
    position: absolute;
    right: 5%;
    bottom: 20%;
    z-index: 1;
    max-width: 42%;
    color: #fff4c3;
    font-family: "Segoe Script", "Brush Script MT", Georgia, serif;
    font-size: clamp(1.2rem, 3.3vw, 2.65rem);
    font-style: italic;
    line-height: 1.18;
    text-align: right;
    text-shadow: 0 2px 9px #0c3028c9;
    transform: rotate(-7deg);
}
.football-design .ft-parchment {
    position: relative;
    z-index: 2;
    width: min(83%, 680px);
    margin: -94px auto 0;
    padding: clamp(28px, 5vw, 56px) clamp(18px, 4.5vw, 48px) 34px;
    border: 4px double #cda75d;
    border-radius: 16px 16px 26px 26px;
    background:
        radial-gradient(circle at 12% 20%, #f3ddb364, transparent 27%),
        linear-gradient(145deg, #fffdf5, #f8efd8);
    box-shadow: 0 16px 28px #12372c38;
    text-align: center;
}
.football-design .ft-parchment::before,
.football-design .ft-parchment::after {
    position: absolute;
    top: 12px;
    bottom: 12px;
    width: 6px;
    content: "";
    border: 1px solid #d6b96e;
    opacity: .75;
}
.football-design .ft-parchment::before { left: 10px; border-right: 0; }
.football-design .ft-parchment::after { right: 10px; border-left: 0; }
.football-design .ft-ball {
    position: relative;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 10px;
    border: 2px solid #cba25e;
    border-radius: 50%;
    background: #fff9e8;
    box-shadow: 0 3px 12px #77552220;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJGb290YmFsbCI+CiAgPGRlZnM+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9IndoaXRlIiBjeD0iMzUlIiBjeT0iMjUlIiByPSI3NSUiPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjcyIiBzdG9wLWNvbG9yPSIjZjVmMWU5Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2NiYzljMSIvPgogICAgPC9yYWRpYWxHcmFkaWVudD4KICA8L2RlZnM+CiAgPGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMjkiIGZpbGw9InVybCgjd2hpdGUpIiBzdHJva2U9IiMxNTI1MWYiIHN0cm9rZS13aWR0aD0iMiIvPgogIDxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzI2MzIyYyIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPHBhdGggZD0iTTIxIDI4IDE1IDIwTTQzIDI4IDQ5IDIwTTI1IDQyIDIxIDUzTTM5IDQyIDQzIDUzTTMyIDIwVjhNMTMgMzcgNSAzOU01MSAzN2w4IDIiLz4KICAgIDxwYXRoIGQ9Im0yMSAyOCAxMS04IDExIDgtNCAxNEgyNXoiLz4KICA8L2c+CiAgPGcgZmlsbD0iIzExMWIxNyI+CiAgICA8cGF0aCBkPSJtMjEgMjggMTEtOCAxMSA4LTQgMTRIMjV6Ii8+CiAgICA8cGF0aCBkPSJtMjggNCA4IDAgNCA5LTggNy04LTd6Ii8+CiAgICA8cGF0aCBkPSJtNSAyNyA4LTcgOCA4LTQgMTAtMTAgMnoiLz4KICAgIDxwYXRoIGQ9Im01OSAyNy04LTctOCA4IDQgMTAgMTAgMnoiLz4KICAgIDxwYXRoIGQ9Im0xNiA1MiA5LTEwaDE0bDkgMTAtNyA3SDIzeiIvPgogIDwvZz4KICA8Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIyOSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTUyNTFmIiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+Cg==');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 33px 33px;
}
.football-design .ft-kicker {
    color: #a87325;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .2em;
    line-height: 1.5;
    text-transform: uppercase;
}
.football-design .ft-age {
    margin-top: 6px;
    color: #aa7a2b;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    line-height: 1.25;
}
.football-design .ft-rule {
    display: block;
    width: 55%;
    height: 1px;
    margin: 20px auto 22px;
    background: linear-gradient(90deg, transparent, #c29a51 15% 85%, transparent);
}
.football-design .ft-facts { display: grid; gap: 14px; margin: 0 auto 24px; }
.football-design .ft-facts p { display: flex; align-items: flex-start; justify-content: center; gap: 12px; }
.football-design .ft-facts p > span:first-child { color: #a2732b; font-size: 1.5rem; line-height: 1.2; }
.football-design .ft-facts p > span:last-child { display: grid; gap: 2px; }
.football-design .ft-facts small { color: #a2732b; font: 700 .68rem Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.football-design .ft-facts strong { font-size: clamp(.95rem, 2vw, 1.25rem); font-weight: 600; line-height: 1.4; }
.football-design .ft-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: min(100%, 500px);
    min-height: 54px;
    padding: 12px 25px;
    border: 1px solid #07543a;
    border-radius: 999px;
    background: linear-gradient(100deg, #0d573c, #003b2a);
    color: white;
    box-shadow: 0 6px 16px #0b392b24;
    font-family: var(--ft-display-font, Georgia, serif);
    font-size: clamp(1rem, 2.1vw, 1.25rem);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.football-design .ft-button:hover { color: white; box-shadow: 0 10px 22px #0b392b3d; transform: translateY(-2px); }
.football-design .ft-home-actions { display: grid; justify-items: center; gap: 12px; }
.football-design .ft-home-actions .ft-button { margin: 0; }
.football-design .ft-home-actions .ft-directions { color: #07543a; font: 700 clamp(.85rem, 1.8vw, 1rem)/1.4 Arial, sans-serif; text-decoration: underline; text-underline-offset: 4px; }
.football-design .ft-home-actions .ft-directions:hover { color: #003b2a; }
.football-design .ft-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(90%, 750px);
    margin: 30px auto 5px;
    text-align: center;
}
.football-design .ft-values p { display: grid; justify-items: center; gap: 5px; padding: 5px 14px; font-size: clamp(.85rem, 1.9vw, 1.13rem); line-height: 1.32; }
.football-design .ft-values p + p { border-left: 1px solid #d7b87e; }
.football-design .ft-values p > span:first-child { color: #b3812d; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.football-design .ft-signoff {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 24px 18px 32px;
    color: #ad7b2c;
    font: italic clamp(.9rem, 2vw, 1.3rem) "Segoe Script", Georgia, serif;
    text-align: center;
}
.football-design .ft-signoff span { width: 40px; height: 1px; background: #b98a3a; }

/* About keeps the personal photograph large and gives the story its own stage. */
.football-design--travel .ft-hero { height: clamp(330px, 62vw, 660px); }
.football-design .ft-story-panel {
    position: relative;
    z-index: 2;
    width: min(94%, 780px);
    margin: -70px auto 0;
    padding: 34px clamp(22px, 6vw, 74px) 20px;
    border-radius: 48% 48% 0 0 / 42px 42px 0 0;
    background: linear-gradient(#fffbf0, #fff9eb);
    text-align: center;
}
.football-design .ft-story-panel h1 { margin-bottom: 18px; }
.football-design .ft-story {
    max-width: 650px;
    margin: 0 auto 28px;
    font-size: clamp(1.02rem, 2.25vw, 1.42rem);
    line-height: 1.65;
    white-space: pre-line;
}
.football-design .ft-story-panel .ft-button { margin-bottom: 12px; }

/* Gallery uses aligned photo rows with one full-width lead image. */
.football-design--gallery { padding: clamp(22px, 4vw, 42px) clamp(12px, 2vw, 26px) 4px; }
.football-design .ft-gallery-heading { padding: 8px 8px 26px; text-align: center; }
.football-design .ft-gallery-heading .ft-ball { margin: 12px auto; }
.football-design .ft-gallery-heading h1 { font-size: clamp(2.1rem, 4.5vw, 3.7rem); }
.football-design .ft-gallery-heading > p:last-child { margin-top: 8px; color: #786b54; font-size: 1.05rem; }
.football-design .ft-mosaic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    align-items: stretch;
    gap: clamp(6px, 1.2vw, 12px);
}
.football-design .ft-mosaic-item {
    position: relative;
    min-width: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 4px solid #fffdf7;
    border-radius: 12px;
    background: #e9eee8;
    box-shadow: 0 6px 15px #14372d2a;
}
.football-design .ft-mosaic-item::before { position: absolute; inset: -12px; content: ""; background: var(--ft-photo) center / cover no-repeat; filter: blur(14px) brightness(.82); }
.football-design .ft-mosaic-item:first-child,
.football-design .ft-mosaic-item:nth-child(even):last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.football-design .ft-mosaic-item img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.football-design .ft-mosaic-empty,
.football-design .ft-gallery-empty { display: grid; place-content: center; gap: 5px; color: #fff5df; text-align: center; }
.football-design .ft-mosaic-empty::before { display: none; }
.football-design .ft-mosaic-empty > span,
.football-design .ft-gallery-empty > span { font-size: 2.5rem; }
.football-design .ft-gallery-empty { grid-column: 1 / -1; min-height: 240px; color: #264a3c; background: #f5ead1; }
.football-design .ft-gallery-button { display: flex; margin: 28px auto 0; }

.football-invitation-stage { width: min(100% - 36px, 880px); margin: 28px auto 38px; }
.football-invitation-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.football-invitation-stage-head h2 { margin: 0; color: #143a30; font-size: clamp(1.4rem, 2.8vw, 2rem); }
.football-invitation-stage .invitation { width: 100%; max-width: none; margin: 0; }

/* Thank You repeats the hero and lets the host's message lead. */
.football-design--gifts .ft-hero { height: clamp(300px, 55vw, 570px); }
.football-design .ft-thanks-card { width: min(86%, 690px); }
.football-design .ft-thanks-card h1 { font-size: clamp(2rem, 4.8vw, 4rem); }
.football-design .ft-thanks-card .ft-story { margin-bottom: 26px; }

.football-invitation-dialog {
    width: min(95vw, 1000px);
    max-width: 1000px;
    max-height: min(92vh, 1000px);
    padding: 12px;
    overflow: auto;
    border: 1px solid #d7b77b;
    border-radius: 16px;
    background: #fffaf0;
    box-shadow: 0 24px 90px #0c2d29a8;
}
.football-invitation-dialog::backdrop { background: #0d3029bb; backdrop-filter: blur(4px); }
.football-invitation-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 9px 12px; color: #143a30; font-family: Georgia, serif; }
.football-invitation-dialog .invitation { margin: 0; }
.football-invitation-dialog .button { flex: 0 0 auto; }
.football-editor-slots { display: grid; gap: 15px; margin-top: 16px; }
.football-editor-slots fieldset { margin: 0; padding: 15px; border: 1px solid #d9c28b; border-radius: 10px; }
.football-editor-slots legend { padding: 0 8px; font-family: Georgia, serif; font-size: 1.1rem; }
.football-editor-slots label { display: block; margin: 8px 0; }
.football-editor-slots textarea { min-height: 100px; }
.football-editor-intro { color: #5e6c61; }
.football-preview-wrap { padding-top: 12px; }
.football-preview-wrap .football-design { width: 100%; margin: 0; }
.football-preview-wrap .football-design .ft-hero { height: clamp(210px, 32vw, 370px); }
.football-preview-wrap .football-design h1 { font-size: clamp(1.7rem, 3vw, 2.8rem); }
.football-preview-wrap .football-design .ft-parchment { margin-top: -42px; padding: 26px 18px 20px; }
.football-preview-wrap .football-design .ft-mosaic-item { aspect-ratio: 4 / 3; }
.football-preview-wrap .football-design .ft-mosaic-item:first-child,
.football-preview-wrap .football-design .ft-mosaic-item:nth-child(even):last-child { aspect-ratio: 16 / 9; }
.football-preview-wrap .football-design .ft-signoff { padding-bottom: 20px; }

@media (max-width: 620px) {
    .football-design { width: calc(100% - 20px); margin-bottom: 30px; }
    .football-design .ft-hero { height: clamp(270px, 80vw, 440px); }
    .football-design .ft-parchment { width: 91%; margin-top: -55px; padding: 25px 20px 24px; }
    .football-design .ft-handwriting { right: 6%; bottom: 19%; max-width: 52%; font-size: clamp(1.05rem, 5vw, 1.8rem); }
    .football-design .ft-values { width: 94%; }
    .football-design .ft-values p { padding: 5px 6px; font-size: .75rem; }
    .football-design .ft-facts strong { font-size: .92rem; }
    .football-design .ft-story-panel { width: 100%; margin-top: -44px; padding: 25px 22px 10px; }
    .football-invitation-stage { width: calc(100% - 20px); margin: 18px auto 28px; }
    .football-invitation-stage-head { align-items: flex-start; }
    .football-invitation-stage-head .button { min-height: 38px; }
    .football-design .ft-gallery-empty { grid-column: 1 / -1; }
    .football-preview-wrap .football-design .ft-hero { height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
    .football-design .ft-button { transition: none; }
    .football-design .ft-button:hover { transform: none; }
    .football-invitation-dialog::backdrop { backdrop-filter: none; }
}

/* Storybook Pitch: illustrated field, warm paper and playful framed photos. */
.football-design--storybook {
    --ft-green: #164d38;
    --ft-ink: #213b32;
    --ft-gold: #b98232;
    border: 5px solid #f7e5b6;
    border-radius: 28px;
    background: radial-gradient(ellipse at 9% 14%, #fff 0 4%, transparent 4.5%), radial-gradient(ellipse at 90% 12%, #fff 0 6%, transparent 6.5%), linear-gradient(#bfe6ec 0 22%, #eff2d1 50%, #f7e9c2);
    box-shadow: 0 24px 50px #28584625, inset 0 0 0 2px #fff9e7;
}
.football-design--storybook::before {
    position: absolute; inset: 0; z-index: -1; content: ""; pointer-events: none;
    background: radial-gradient(ellipse at 12% 78%, #78a86660 0 13%, transparent 14%), radial-gradient(ellipse at 91% 83%, #6c9d5e66 0 16%, transparent 17%), repeating-linear-gradient(105deg, transparent 0 39px, #fff9dc78 40px 42px, transparent 43px 80px);
}
.football-design--storybook::after { z-index: 0; height: 70px; opacity: .75; background: repeating-linear-gradient(82deg, #649e51 0 2px, transparent 3px 12px); }
.football-design--storybook .ft-hero {
    width: calc(100% - clamp(22px, 5vw, 58px)); height: clamp(300px, 52vw, 550px);
    margin: clamp(14px, 3vw, 32px) auto 0; border: 8px solid #fff9e5;
    border-radius: 34px 34px 110px 110px / 34px 34px 40px 40px;
    box-shadow: 0 10px 0 #e4c979, 0 22px 35px #20493435; background: #164d38;
}
.football-design--storybook .ft-hero > img { object-position: center 35%; }
.football-design--storybook .ft-hero::after { background: linear-gradient(180deg, transparent 45%, #143b2a75); }
.football-design--storybook .ft-handwriting { right: 5%; bottom: 12%; max-width: 55%; padding: 8px 14px; border-radius: 12px; background: #143d2b99; color: #fff5bc; transform: rotate(-4deg); }
.football-design--storybook .ft-parchment,
.football-design--storybook .ft-story-panel,
.football-design--storybook .ft-gallery-heading {
    border: 2px solid #c9a361; border-radius: 28px 28px 46px 46px;
    background: linear-gradient(145deg, #fffdf0, #f8eac2);
    box-shadow: 0 11px 0 #ddc385, 0 22px 32px #3d552931;
}
.football-design--storybook .ft-parchment { width: min(88%, 700px); margin-top: -55px; }
.football-design--storybook .ft-parchment::before,
.football-design--storybook .ft-parchment::after { display: none; }
.football-design--storybook h1 { color: #164d38; letter-spacing: -.025em; }
.football-design--storybook .ft-ball { width: 72px; height: 72px; border: 3px solid #ba8a35; background-color: #fffdf4; background-size: 48px 48px; }
.football-design--storybook .ft-kicker { color: #986427; }
.football-design--storybook .ft-button { border: 2px solid #f2d18d; box-shadow: 0 6px 0 #1e704a, 0 13px 20px #1e513331; }
.football-design--storybook .ft-values { width: min(94%, 760px); gap: 10px; margin-top: 36px; }
.football-design--storybook .ft-values p { min-height: 108px; align-content: center; border: 2px solid #dfc588 !important; border-radius: 18px; background: #fffaf0e8; box-shadow: 0 6px 0 #e6d5aa; }
.football-design--storybook .ft-story-panel { width: min(88%, 700px); margin-top: -48px; padding-top: 38px; }
.football-design--storybook.football-design--gallery { padding-top: 18px; }
.football-design--storybook .ft-gallery-heading { width: min(94%, 740px); margin: 10px auto 32px; padding: 30px 18px; }
.football-design--storybook .ft-mosaic { gap: clamp(10px, 2vw, 20px); }
.football-design--storybook .ft-mosaic-item { border: 8px solid #fff9e8; border-radius: 17px; box-shadow: 0 9px 0 #d4b878, 0 18px 22px #20493425; transform: rotate(var(--ft-tilt, -1deg)); }
.football-design--storybook .ft-mosaic-item:nth-child(even) { --ft-tilt: 1deg; }
.football-design--storybook .ft-mosaic-item img { object-fit: contain; }
.football-design--storybook .ft-thanks-card { margin-top: -45px; }
.football-design--storybook .ft-signoff { position: relative; z-index: 1; color: #926625; }
@media (max-width: 600px) {
    .football-design--storybook { width: calc(100% - 16px); border-width: 3px; }
    .football-design--storybook .ft-hero { width: calc(100% - 18px); height: 360px; border-width: 5px; }
    .football-design--storybook .ft-parchment { width: calc(100% - 34px); padding: 26px 16px; }
    .football-design--storybook .ft-values { grid-template-columns: 1fr; }
    .football-design--storybook .ft-values p { min-height: 72px; }
    .football-design--storybook .ft-story-panel { width: calc(100% - 30px); }
    .football-design--storybook .ft-mosaic-item { border-width: 5px; }
}