/* The gear list and sponsor marks: tools.html, the sponsor pages, and the
   weekly block on index.html. Loaded after css/style.css. Does not alter
   design tokens. */

/* Type scale for this page's components. Replaces thirteen ad hoc sizes
   (0.7 / 0.72 / 0.74 / 0.78 / 0.88 / 0.9 / 0.92 / 0.94 / 0.95 / 1.0 /
   1.02 / 1.05 / 1.1 / 1.15rem) whose steps were too small to read as
   intent. Five steps, ~1.15 apart. */
.gear-list,
.sponsor-page,
.sponsor-roster,
.section-sub,
.this-week {
    --fs-label: 0.66rem;
    --fs-sm: 0.78rem;
    --fs-body: 0.88rem;
    --fs-lead: 1rem;
    --fs-title: 1.05rem;
}

/* Sponsor marks, set as type ------------------------------------
   No graphic logos. The supplied brand files fought each other on every
   axis -- one gold, one navy, one grey, one wide banner against one
   near-square crown -- and normalising them only made four mismatched
   pictures the same size. Set as wordmarks in the site's own display
   face they read as one row, carry the page's voice instead of four
   other brands', and there is no asset to source, reverse or re-crop
   when a sponsor changes. */
/* Centred, unlabelled, and set at 2.35rem, the first mark read as the
   page's own title rather than as a sponsor: a lone display line under a
   gold rule with nothing above it to say what it was. It keeps its tier
   -- larger than the rest, its code beside it, a rule beneath -- but it
   is aligned with the page like every other block and it sits under a
   section header now. */
.sponsor-marks {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.9rem, 2vw, 1.35rem);
}
.sponsor-wordmark {
    display: block;
    color: var(--white);
    font-family: "Oswald", Impact, sans-serif;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
}
.sponsor-primary-mark {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    text-decoration: none;
}
.sponsor-primary-mark .sponsor-wordmark {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    text-align: left;
}
.sponsor-primary-mark .week-code,
.sponsor-offer .week-code {
    margin-left: 0;
}
.sponsor-rule {
    width: 100%;
    max-width: 38.75rem;
    border-top: 1px solid var(--line);
}
.sponsor-secondary-marks {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.6rem clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    justify-content: flex-start;
}
.sponsor-secondary-marks a {
    text-decoration: none;
}
.sponsor-secondary-marks .sponsor-wordmark {
    color: var(--text-muted);
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    text-align: left;
    transition: color 0.18s ease;
}
.sponsor-primary-mark:hover .sponsor-wordmark,
.sponsor-primary-mark:focus-visible .sponsor-wordmark,
.sponsor-secondary-marks a:hover .sponsor-wordmark,
.sponsor-secondary-marks a:focus-visible .sponsor-wordmark {
    color: var(--gold);
}

/* The same wordmark standing in for the logo at the top of a sponsor
   page, where it is the page's own subject rather than one of a row. */
.sponsor-wordmark-hero {
    margin: 0 0 0.9rem;
    color: var(--gold-light);
    font-size: clamp(1.75rem, 3.5vw, 2.6rem);
    text-align: left;
}

/* Partners with no mark on file -- same list, plain links. */
.partner-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}
.partner-links a {
    color: var(--gold-light);
    font-family: "Oswald", Impact, sans-serif;
    font-size: var(--fs-body);
    letter-spacing: 0.02em;
    text-decoration: none;
}
.partner-links a:hover,
.partner-links a:focus-visible {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.partner-links .partner-code {
    margin-left: 0.5rem;
    color: var(--gold);
    font-family: "Oswald", Impact, sans-serif;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------------------------------------------------------------
   The gear list.

   This used to be a grid of bordered, rounded, filled boxes -- and a
   second grid of the same boxes with photos in them. Two card tables
   stacked on one page. A card is a container you reach for when items
   are peers competing for a glance; a gear list is nothing of the kind.
   It is read top to bottom, most of its entries are one line long, and
   the only thing a box around each one adds is 22 borders and 22
   backgrounds between the reader and the words.

   So it is a list. Rows separated by a hairline, no fills, no radii, no
   boxes. The product photo only appears in the weekly block on the home
   page, where showing what came off the shelf is the entire point.
   --------------------------------------------------------------- */
.gear-list {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}
.gear-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: clamp(1rem, 3vw, 2.5rem);
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
}
.gear-row > div { min-width: 0; }
.gear-row h3 {
    margin: 0.2rem 0 0;
    color: var(--gold-light);
    font-size: var(--fs-title);
    font-weight: 500;
    line-height: 1.25;
}
.gear-row p {
    margin: 0.25rem 0 0;
    max-width: 62ch;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.gear-row .brand-line {
    margin: 0;
    color: var(--gold);
    font-family: "Oswald", Impact, sans-serif;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Neil in his own words. The one thing on this page that is not
   available from the retailer, so it is set apart from the spec line
   rather than run together with it. */
.gear-take {
    margin: 0.5rem 0 0;
    padding-left: 0.9rem;
    border-left: 2px solid rgba(201, 162, 39, 0.45);
    color: var(--text);
    font-size: var(--fs-sm);
    font-style: italic;
    line-height: 1.55;
}
.gear-row a {
    align-self: center;
    color: var(--gold-light);
    font-family: "Oswald", Impact, sans-serif;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}
.gear-row a:hover,
.gear-row a:focus-visible {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Browser surfaces ----------------------------------------------- */
::selection {
    background: rgba(201, 162, 39, 0.28);
    color: var(--text);
}
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .sponsor-secondary-marks .sponsor-wordmark {
        transition: none;
    }
}


/* Page rhythm -----------------------------------------------------
   The site-wide section padding (3.75-6.5rem) is tuned for pages that
   run a few blocks of copy. This page is a dense catalog, and at that
   scale the gutters read as gaps in the page rather than separation
   between sections. */
.tools-page section {
    padding: clamp(1.75rem, 3vw, 2.75rem) 0;
}
.tools-page .section-header {
    margin-bottom: clamp(1rem, 2vw, 1.4rem);
}
.tools-page .section-title,
.this-week .section-title {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    line-height: 1.05;
}
/* The site default here is 7rem over 4.5rem, tuned for a page whose
   header carries a headline and a paragraph. These pages carry a label
   and one word, so it comes down -- but not to nothing, which crammed
   the title against the rule above and the gold rule below it. */
.tools-page .page-header {
    padding: clamp(2.25rem, 4.5vw, 3.5rem) 0 clamp(2rem, 4vw, 3rem);
}
.tools-page .page-header h1 {
    font-size: clamp(2.6rem, 6.5vw, 5rem);
    line-height: 0.95;
}

/* Affiliate disclosure -- the last thing on the page, not the first. */
.affiliate-notice {
    padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
    border-top: 1px solid var(--line);
    background: var(--black);
}
.affiliate-notice p {
    margin: 0;
    max-width: 78ch;
    color: var(--text-muted);
    font-size: var(--fs-sm, 0.84rem);
}

/* This Week's Build -------------------------------------------- */
.this-week {
    padding: clamp(1.75rem, 3vw, 2.75rem) 0;
}
.this-week .section-header {
    margin-bottom: clamp(1rem, 2vw, 1.4rem);
    border-left: 3px solid var(--gold);
    padding-left: 0.9rem;
}
.week-row {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    padding: 0.7rem 0;
}

/* Five rows do not need the full 1200px measure. Left unconstrained the
   text sat in the first third and the link was stranded against the far
   margin, with the middle of every row empty. */
.week-list {
    max-width: 58rem;
}

/* The product shot. Sized off the type, not a round pixel figure, so the
   thumb and the two lines of text beside it stay in proportion when the
   scale moves. The plate must stay in step with PLATE in
   scripts/normalize_product_images.py, and it must never crop -- these
   are fitted, not filled. */
.week-thumb {
    flex: none;
    width: clamp(3.25rem, 5vw, 4.25rem);
    aspect-ratio: 4 / 3;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #181818;
}
.week-thumb.is-empty {
    background: repeating-linear-gradient(135deg, #181818 0 6px, #1c1c1c 6px 12px);
}
.week-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.week-code {
    margin-left: 0.5rem;
    padding: 0.1rem 0.4rem;
    border: 1px solid rgba(201, 162, 39, 0.5);
    border-radius: 3px;
    color: var(--gold);
    font-family: "Oswald", Impact, sans-serif;
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
}
.week-watch {
    display: inline-block;
    margin-top: 1rem;
    color: var(--gold-light);
    font-family: "Oswald", Impact, sans-serif;
    font-size: var(--fs-label, 0.72rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}
.week-watch:hover,
.week-watch:focus-visible {
    color: var(--white);
    text-decoration: underline;
}

/* Archive and sponsor pages -------------------------------------- */
.archive-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22.5rem), 1fr)); }
.sponsor-page section { padding: clamp(2.25rem, 4vw, 3.5rem) 0; }
.sponsor-page .section-header { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
.sponsor-page .section-title { font-size: clamp(2.25rem, 4vw, 3.5rem); }
.sponsor-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 27.5rem);
    gap: 2.5rem;
    align-items: center;
}

/* Eastonmade has no product photo, so its hero runs a single column
   rather than repeating the wordmark in the media slot. */
.sponsor-hero-grid.solo {
    grid-template-columns: minmax(0, 1fr);
}
.sponsor-hero-grid.solo .sponsor-copy {
    max-width: 46rem;
}
.sponsor-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
}
.sponsor-hero .eyebrow {
    margin: 0;
    color: var(--gold-light);
    font-size: var(--fs-sm, 0.84rem);
    font-weight: 700;
}
.sponsor-hero h1 {
    max-width: none;
    font-size: clamp(2.3rem, 4vw, 3.25rem);
    line-height: 1;
}
.sponsor-hero .sponsor-lead {
    margin: 0;
    max-width: 54ch;
    color: var(--text-muted);
    font-size: var(--fs-lead);
    font-weight: 400;
}
.sponsor-offer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}
.sponsor-offer strong {
    color: var(--gold-light);
    font-family: "Oswald", Impact, sans-serif;
    font-size: var(--fs-title);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sponsor-media {
    aspect-ratio: 4 / 3;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #181818;
}
.sponsor-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.sponsor-media.cover img {
    object-fit: cover;
}
.featured-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26.25rem), 1fr));
}
.featured-row { align-items: center; }
.featured-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.featured-row .featured-title {
    color: var(--text);
    font-size: var(--fs-body);
}
.featured-row .featured-date { color: var(--text-dim); }
.sponsor-page .sponsor-disclosure {
    padding: clamp(1.75rem, 3vw, 2.5rem) 0;
}
@media (max-width: 860px) {
    .sponsor-hero-grid {
        grid-template-columns: 1fr;
    }
    .sponsor-media {
        width: min(100%, 34rem);
    }
}
@media (max-width: 540px) {
    .sponsor-hero-grid {
        gap: 1.75rem;
    }
    .sponsor-hero h1 {
        font-size: clamp(2.2rem, 11vw, 3.25rem);
    }
    .featured-row {
        gap: 0.5rem 1rem;
    }
}

/* ---------------------------------------------------------------
   Two kinds of entry, given two treatments.

   The flat version of this list ran 22 identical rows down the left
   third of the page with a link stranded at the far right margin, and
   nothing anywhere told the reader which entries were worth stopping
   on. Half of them carry Neil saying something; half are a name and a
   link. That is the hierarchy, so it is the layout.

   A featured row spends the width: number, product, and Neil's words in
   their own column, with the link at the end of the row rather than the
   end of the page. The rest collapse to a dense index -- one line each,
   three across -- which is all a bare affiliate link ever needed.
   --------------------------------------------------------------- */
.gear-row--featured {
    grid-template-columns: 2.25rem minmax(12rem, 1fr) minmax(14rem, 1.15fr) auto;
    align-items: start;
    padding: 0.85rem 0;
}
.gear-index {
    margin: 0.1rem 0 0;
    color: var(--gold);
    font-family: "Oswald", Impact, sans-serif;
    font-size: var(--fs-body);
    font-weight: 700;
    letter-spacing: 0.04em;
    opacity: 0.55;
}
.gear-row--featured .gear-take {
    margin: 0;
    align-self: start;
}
.gear-row--featured a {
    align-self: start;
    padding-top: 0.35rem;
}

/* The dense index. Bare links, three across, no rules between them --
   at one line each, a border per row is more ink than the content. */
.gear-index-list {
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
    border-top: 1px solid var(--line);
}
.gear-index-title {
    margin: 0 0 1rem;
    color: var(--text-muted);
    font-family: "Oswald", Impact, sans-serif;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.gear-lines {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 3;
    column-gap: clamp(1.5rem, 4vw, 3rem);
}
.gear-line {
    break-inside: avoid;
    margin-bottom: 0.4rem;
}
.gear-line a {
    display: block;
    color: var(--text);
    font-size: var(--fs-sm);
    text-decoration: none;
}
.gear-line a:hover .gear-line-name,
.gear-line a:focus-visible .gear-line-name {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.gear-line-brand {
    display: block;
    color: var(--gold);
    font-family: "Oswald", Impact, sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.75;
}
.gear-line-name {
    color: var(--text);
    transition: color 0.15s ease;
}

@media (max-width: 1080px) {
    .gear-row--featured {
        grid-template-columns: 2.25rem 1fr auto;
    }
    .gear-row--featured .gear-take {
        grid-column: 2 / -1;
        margin-top: 0.5rem;
    }
    .gear-lines { columns: 2; }
}
@media (max-width: 640px) {
    .gear-row,
    .gear-row--featured {
        grid-template-columns: 1fr;
        row-gap: 0.4rem;
    }
    /* The quote is placed in column 2 at tablet width. Left set here it
       creates an implicit second column against the single-column
       template, which is what kept the phone layout in two columns. */
    .gear-row--featured .gear-take {
        grid-column: 1;
        margin-top: 0.5rem;
    }
    .gear-index { display: none; }
    .gear-row a { justify-self: start; }
    .gear-lines { columns: 1; }
}

/* Events ---------------------------------------------------------
   One entry per show: the date as a block on the left so the page can
   be scanned by when rather than by reading, the detail beside it. Not
   a card -- the same hairline rule the gear list uses. */
.event-entry {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding: 1.25rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.event-date {
    font-family: "Oswald", Impact, sans-serif;
    line-height: 1;
    text-align: center;
}
.event-month {
    display: block;
    color: var(--gold);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.event-day {
    display: block;
    margin: 0.15rem 0;
    color: var(--white);
    font-size: 2.4rem;
    font-weight: 700;
}
.event-year {
    display: block;
    color: var(--text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
}
.event-body h3 {
    margin: 0.15rem 0 0.4rem;
    color: var(--gold-light);
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 500;
    line-height: 1.15;
}
.event-lead {
    margin: 0 0 0.9rem;
    max-width: 60ch;
    color: var(--text);
    font-size: var(--fs-body);
    line-height: 1.5;
}
.event-facts-inline {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}
.event-facts-inline li {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.event-facts-inline span {
    color: var(--gold);
    font-family: "Oswald", Impact, sans-serif;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

@media (max-width: 640px) {
    .event-entry { grid-template-columns: 1fr; row-gap: 0.75rem; }
    .event-date { display: flex; gap: 0.4rem; align-items: baseline; text-align: left; }
    .event-day { margin: 0; font-size: 1.6rem; }
    .event-facts-inline li { grid-template-columns: 1fr; row-gap: 0.15rem; }
}

/* The roster is a label and four names. At the page's section rhythm it
   opened with more empty space than content. */
.tools-page .sponsor-roster {
    padding-top: clamp(1.5rem, 2.5vw, 2.25rem);
    padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}