/* Men's separator (25 Oct 2026): a year of Sault weather. The average daily high and low drawn as one band, amber above 0°C and
   ice blue below, on a winter night sky, with the seasons as tinted lanes over it. Mobile first; tokens from main.css. */

.weather { position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: var(--pad) 0; background: radial-gradient(circle at 88% 0%, rgba(120, 200, 255, .2), transparent 42%), radial-gradient(circle at 6% 100%, rgba(255, 170, 70, .14), transparent 45%), linear-gradient(170deg, #0f1534 0%, #1a2456 52%, #283878 100%); }
.weather__head { display: grid; gap: 18px; justify-items: center; text-align: center; margin-bottom: 26px; }
.weather .h2 { text-shadow: 0 4px 24px rgba(0, 0, 0, .3); }
.weather .lede { color: #fff; }

/* The key: a piece of the band, the station, and the source as a small link under it */
.weather__key { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; align-items: center; justify-items: start; margin: 0; font-size: 14px; line-height: 1.35; }
.weather__swatch { grid-row: span 2; width: 46px; height: 30px; background: linear-gradient(180deg, #ff9b3a 0%, #ffe39c 44%, #fff1d0 50%, #e2f5ff 50%, #a2ddff 68%, #3a8fdc 100%); clip-path: polygon(0 40%, 100% 0, 100% 60%, 0 100%); }
.weather__station { font-weight: 600; }
.weather__src { font-size: 12.5px; color: rgba(255, 255, 255, .8); text-decoration: underline; text-underline-offset: 3px; }
.weather__src:hover { color: #ffe39c; }

/* The chart: lanes, the plot and the month initials share 12 columns; on a phone it keeps its width and scrolls sideways */
.weather__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.weather .weather__seasons { margin-top: 0; } /* the body's gap spaces the two rails, not the site's rail + rail margin */
.weather__track { display: block; padding-bottom: 0; }
.weather__chart { --ph: 232px; --axis: 30px; position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: var(--ph) 32px var(--axis); min-width: 760px; margin: 0; }
.weather__lanes { display: contents; }
.wlane { grid-row: 1 / -1; grid-column: var(--s) / span var(--l); display: flex; align-items: flex-end; justify-content: center; margin: 0 2px; border-radius: 6px; background: linear-gradient(180deg, rgba(var(--tint), .08) 0%, rgba(var(--tint), .2) 100%); }
.wlane b { display: grid; place-items: center; height: var(--axis); font: 700 13px/1 var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--tint)); }
.weather__plot { grid-row: 1; grid-column: 1 / -1; position: relative; z-index: 1; }
.weather__band { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 12px 22px rgba(5, 10, 40, .45)); }
.weather__fill { fill: url(#weather-temp); }
.weather__edge { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.weather__edge--hi { stroke: rgba(255, 255, 255, .95); stroke-width: 2.5; }
.weather__edge--lo { stroke: rgba(255, 255, 255, .6); stroke-width: 1.5; }
.weather__zero { fill: none; stroke: rgba(255, 255, 255, .65); stroke-width: 1.5; stroke-dasharray: 7 6; vector-effect: non-scaling-stroke; }
.weather__zero--in { stroke: rgba(16, 24, 70, .6); }
.weather__zero-label { position: absolute; left: calc(var(--x) * 1%); bottom: calc(var(--v) * 1%); transform: translate(-50%, -6px); font: 700 13px/1 var(--f-head); letter-spacing: .04em; color: rgba(255, 255, 255, .9); }

/* The figures: each month's high over its point, its low under it, warm or cold by sign */
.weather__vals { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.weather__vals li { position: relative; }
.wv { position: absolute; left: 50%; transform: translateX(-50%); font: 600 13px/1 var(--f-head); letter-spacing: .02em; white-space: nowrap; color: #ffe39c; text-shadow: 0 0 2px #182256, 0 0 4px #182256, 0 0 8px #182256; } /* a halo in the sky's colour keeps the 0°C dashes off the figures */
.wv.is-cold { color: #c4e9ff; }
.wv::after { content: ""; position: absolute; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(16, 24, 70, .35); }
.wv--hi { bottom: calc(var(--v) * 1%); padding-bottom: 11px; }
.wv--hi::after { bottom: -4.5px; }
.wv--lo { top: calc(100% - var(--v) * 1%); padding-top: 11px; }
.wv--lo::after { top: -4.5px; }
.weather__months { grid-row: 2; grid-column: 1 / -1; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; list-style: none; margin: 0; padding: 0; text-align: center; font: 700 15px/1 var(--f-head); letter-spacing: .04em; color: rgba(255, 255, 255, .88); }

/* The band draws itself from the first month to the last, then the figures come in month by month */
.js .weather__band { clip-path: inset(-20% 100% -20% 0); transition: clip-path 2.4s var(--ease) .3s; }
.js .weather__chart.is-in .weather__band { clip-path: inset(-20% -2% -20% -2%); }
.js .weather__chart .wv, .js .weather__chart .weather__zero-label { opacity: 0; transition: opacity .6s var(--ease); transition-delay: calc(.9s + var(--i, 12) * .1s); }
.js .weather__chart.is-in .wv, .js .weather__chart.is-in .weather__zero-label { opacity: 1; }

/* The seasons: a rail under the chart on a phone, each season tinted like its lane */
.weather__strip { grid-auto-columns: 86%; gap: 12px; padding-bottom: 0; }
.wseason { display: grid; align-content: start; gap: 10px; padding: 20px 16px; border-radius: 6px; background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .1), transparent 50%), linear-gradient(180deg, rgba(var(--tint), .26) 0%, rgba(var(--tint), .1) 100%); }
.wseason__name { margin: 0; font: 800 32px/1 var(--f-head); letter-spacing: .02em; text-transform: uppercase; color: rgb(var(--tint)); text-shadow: 0 3px 16px rgba(5, 10, 40, .35); }
.wseason__line { margin: 0; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .94); }
.wseason__items { display: grid; gap: 10px; list-style: none; margin: 6px 0 0; padding: 0; }
.witem { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 12px; align-items: center; }
.witem__pic { display: block; aspect-ratio: 1; }
.witem__pic img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); transition: transform .6s var(--ease); }
.witem__pic img:not(.is-cut) { padding: 4px; border-radius: 6px; background: #fff; filter: none; box-shadow: 0 12px 20px -12px rgba(0, 0, 0, .7); } /* a store photo without its cut-out keeps a white tile */
.witem:hover .witem__pic img { transform: scale(1.06); }
.witem__text { display: grid; gap: 4px; justify-items: start; }
.witem__name { font: 600 14px/1.22 var(--f-head); letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.witem__name:hover { color: #ffe39c; }
.weather .price { font-size: 15px; color: #fff; }
.weather .price del { color: rgba(255, 255, 255, .7); }
.weather .price ins { color: #ffe39c; }
.weather .rail__bar { background: rgba(255, 255, 255, .3); }
.weather .rail__bar span { background: #fff; }
.weather .rail__arrow { top: calc(50% - 40px); }

@media (min-width: 600px) { .weather__strip { grid-auto-columns: calc((100% - 12px) / 2); } }

/* The chart fits: no scrolling, the seasons in four columns under it */
@media (min-width: 900px) {
	.weather__head { margin-bottom: 32px; }
	.weather__head > div { max-width: 860px; }
	.weather__chart { --ph: 260px; min-width: 0; }
	.weather .rail__arrow, .weather .rail__bar { display: none; }
	.weather__strip { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; overflow: visible; }
	.wv { font-size: 14px; }
}

/* Wide: each season stands over its own months, its lane running down through the chart */
@media (min-width: 1240px) {
	.weather__body { gap: 0; }
	.weather__seasons { grid-row: 1; }
	.weather__rail { grid-row: 2; }
	.weather__chart { --ph: 270px; --axis: 0px; }
	.wlane { border-radius: 0 0 8px 8px; background: linear-gradient(180deg, rgba(var(--tint), .12) 0%, rgba(var(--tint), .05) 100%); }
	.wlane b { display: none; }
	.weather__strip { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; }
	.wseason { grid-row: 1; grid-column: var(--s) / span var(--l); margin: 0 2px; padding: 22px 14px 26px; border-radius: 8px 8px 0 0; background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .1), transparent 50%), linear-gradient(180deg, rgba(var(--tint), .28) 0%, rgba(var(--tint), .12) 100%); }
	.witem { grid-template-columns: calc(32px + var(--l) * 13px) minmax(0, 1fr); gap: 10px; } /* the photo grows with the lane: 58 px over two months, 84 px over four */
}

@media (prefers-reduced-motion: reduce) {
	.js .weather__band { clip-path: none; transition: none; }
	.js .weather__chart .wv, .js .weather__chart .weather__zero-label { opacity: 1; transition: none; }
}

/* Men's brands band: blue and black Mackinaw wool, the plaid coat named for the straits next door to the Sault */
.dbrands--mens { background: radial-gradient(circle at 92% 0%, rgba(255, 255, 255, .2), transparent 40%), radial-gradient(circle at 0% 100%, rgba(0, 0, 0, .32), transparent 50%), linear-gradient(120deg, #13264d 0%, #1f4590 45%, #3a6cc2 100%); }