/*
-----------------------------------------------
The Iron Thistle — holding page styles
----------------------------------------------- */


/* Variables — change colours, fonts and spacing here
----------------------------------------------- */

:root {
    /* Colours */
    --c-bg:          #f3efe7;   /* page cream */
    --c-band:        #e4dacd;   /* 2027 band */
    --c-text:        #311e39;   /* deep thistle purple */
    --c-accent:      #9e728f;   /* links + button */
    --c-accent-dark: #7f5872;   /* hover */
    --c-sponsor:     #2e302c;   /* sponsor tiles */
    --c-support:     #c9af79;   /* supporter tiles */
    --c-on-dark:     #ffffff;

    /* Type */
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-heading: "Inria Serif", Georgia, "Times New Roman", serif;
    --fs-body:      1rem;      /* 16px */
    --fs-heading:   2.25rem;   /* 36px */

    /* Layout */
    --max-width: 1140px;
    --gutter:    16px;
    --radius:    4px;
}


/* Reset
----------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }

::selection {
    background: var(--c-accent);
    color: #fff;
}


/* Base
----------------------------------------------- */

html { -webkit-font-smoothing: antialiased; }

body {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.25;
}

p + p { margin-top: 1em; }

h1, h2 {
    font-family: var(--font-heading);
    font-size: var(--fs-heading);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.3em;
}

strong { font-weight: 600; }


/* Links + buttons
----------------------------------------------- */

a {
    color: var(--c-accent);
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease;
}
a:hover { color: var(--c-accent-dark); text-decoration: underline; }

.button {
    display: inline-block;
    margin-top: 10px;
    padding: 14px 32px;
    border-radius: var(--radius);
    background: var(--c-accent);
    color: var(--c-on-dark);
    font-size: 0.9375rem;
}
.button:hover {
    background: var(--c-accent-dark);
    color: var(--c-on-dark);
    text-decoration: none;
}


/* Layout
----------------------------------------------- */

.wrap {
    width: 100%;
    max-width: calc(var(--max-width) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}


/* Header
----------------------------------------------- */

.site-header {
    display: flex;
    justify-content: center;
    padding: 32px var(--gutter) 64px;
}
.logo { display: block; color: var(--c-text); }
.logo__svg {
    display: block;
    width: 250px;
    height: auto;
    fill: currentColor;   /* every path inherits the logo colour */
}


/* Image frames — fixed shape, photo fills with cover
----------------------------------------------- */

.media {
    overflow: hidden;
    background: var(--c-band);
}
.media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.media--thanks-1 { aspect-ratio: 636 / 479; }
.media--thanks-1 img { object-position: 50% 30%; }
.media--thanks-2 { aspect-ratio: 489 / 434; }
.media--annual   { aspect-ratio: 1 / 1; }


/* Thank you
----------------------------------------------- */

.thanks {
    display: grid;
    grid-template-columns: 636fr 489fr;
    gap: var(--gutter);
    align-items: end;
}
.thanks__stats {
    margin-top: 20px;
    padding-right: 2px;
    text-align: right;
    line-height: 1.3;
}
.thanks__intro {
    padding: 0 4px 18px;
}


/* 2027 band
----------------------------------------------- */

.band {
    margin-top: 80px;
    padding: 96px 0 92px;
    background: var(--c-band);
    text-align: center;
}


/* Annuals
----------------------------------------------- */

.annual {
    display: flex;
    align-items: center;
    gap: var(--gutter);
    padding-top: 130px;
}
.annual .media {
    flex: 0 0 401px;
}
.annual__text {
    max-width: 470px;
    line-height: 1.25;
}


/* Sponsors
----------------------------------------------- */

.sponsors {
    padding-top: 80px;
    text-align: center;
}
.sponsor-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 1040px;
    margin: 0 auto;
}
.sponsor-list--primary { margin-top: 24px; max-width: 1040px; }
.sponsor-list--support { margin-top: 8px; max-width: 1120px; }

.sponsor {
    display: block;
    padding: 15px 32px;
    border-radius: var(--radius);
    background: var(--c-sponsor);
    color: var(--c-on-dark);
    font-size: 0.9375rem;
}
.sponsor-list--support .sponsor { background: var(--c-support); }

/* Links inside pills keep the pill style (white, no underline) */
a.sponsor,
.sponsor a {
    color: var(--c-on-dark);
    text-decoration: none;
}
a.sponsor:hover,
.sponsor a:hover {
    color: var(--c-on-dark);
    text-decoration: none;
    opacity: .85;
}


/* Footer
----------------------------------------------- */

.site-footer {
    padding-top: 80px;
    padding-bottom: 120px;
    text-align: center;
}
.site-footer a + a { margin-left: 14px; }


/* Smaller screens
----------------------------------------------- */

@media (max-width: 800px) {
    .site-header { padding-bottom: 40px; }
    .logo__svg { width: 200px; }

    .thanks { grid-template-columns: 1fr; }
    .thanks__stats { text-align: left; margin-bottom: 24px; }
    .thanks__intro { padding: 0 0 16px; }

    .band { margin-top: 56px; padding: 64px 0; }

    .annual {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 64px;
    }
    .annual .media { flex: none; width: 100%; max-width: 401px; }

    .sponsors { padding-top: 64px; }
    .sponsor { padding: 12px 20px; }

    .site-footer a + a { display: block; margin: 6px 0 0; }
}