/* ============================================================ MRKT. Mobile-first. Base styles are 390px. Every breakpoint below is min-width only, because the brief is mobile first and max-width queries invert that intent. ============================================================ */ :root{ --ink:#1A1917; --ink-2:#2E2C29; /* Eyebrows only. Darker than --grey, which fails 4.5:1 on both papers. */ --eyebrow:#6B665F; --paper:#FAF8F5; --paper-2:#F0EDE7; --line:#DDD8D0; --blue:#2B5672; --blue-dk:#1F415A; --grey:#8A857F; --white:#fff; --pad:20px; --maxw:1180px; --r:2px; /* Cards that should read as tappable objects rather than as flat editorial blocks. Deliberately separate from --r, which stays near-square for the sharp look everything else on the site has. Shared by the audience fork and the calendar cards so the two never drift apart. */ --r-card:14px; /* Buttons that sit on a photograph or inside a card, where the site's near-square 2px reads as a hard corner against a rounded neighbour. The calendar's Get Notified buttons had this as a bare 10px; the hero buttons were asked to match them 2026-08-19, and a shared token is what makes "match" structural rather than two numbers that happen to agree today. Same reasoning as --r-card, which the audience fork and the calendar cards share for exactly this reason. 8px, down from 10 on 2026-08-19 after Ty saw it. 8 rather than a number nobody else uses: it is the countdown plate's radius, so this is the site reusing a corner it already has rather than gaining a third one. Moving it moves the calendar buttons too, which is the token doing its job, not a side effect to be worked around. */ --r-btn:8px; /* The large-card corner, and the one place on this site that is not near-square: the testimonial cards on /vendors. The home ticket band used it too for a few hours on 2026-08-21 and no longer does, so this currently has a single user. Left as a token rather than folded back into that rule, because the value is a deliberate exception to the site's own language and naming it is what stops it being read as a stray 24. */ --r-lg:24px; --step--1:clamp(.78rem,.76rem + .1vw,.84rem); --step-0:clamp(1rem,.97rem + .15vw,1.06rem); --step-1:clamp(1.2rem,1.1rem + .5vw,1.4rem); --step-2:clamp(1.5rem,1.3rem + 1vw,2rem); --step-3:clamp(2rem,1.6rem + 2vw,3rem); --step-4:clamp(2.6rem,1.9rem + 3.4vw,4.75rem); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Raleway',system-ui,-apple-system,sans-serif; font-size:var(--step-0); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block;height:auto} a{color:inherit} h1,h2,h3,h4{margin:0;line-height:1.05;letter-spacing:-.02em;font-weight:800;text-transform:uppercase} p{margin:0 0 1em} p:last-child{margin-bottom:0} .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px} .skip:focus{left:8px;top:8px} /* THE EYEBROW IS A , NOT A

, AND THAT IS THE WHOLE POINT. As a

it was hit by every rule written for the SUBTITLE beside it. `.sec__head p` is one class plus one element, which outranks `.eyebrow`, one class, so the eyebrow could never win inside its own container. That is not a source-order accident that reordering fixes: it lost on specificity every time, and it had been losing on 26 of 30 eyebrows site-wide, taking the subtitle's colour and size instead of its own. Measured 2026-08-21. A span cannot be selected by a bare `p`, here or in a check, so the whole class of bug is gone rather than patched a sixth time. It needs display:block for the same reason the

gave it for free. TWO VARIANTS, because there really are two jobs: .eyebrow a section label above an

. 27 of them. .eyebrow--label a small label above a list inside a column. 3 of them. The three labels were the same class and only looked different by accident, which is why they were among the four the bug happened not to reach. THE BASE IS THE BIG TREATMENT, at Ty's call 2026-08-21 after comparing both on the real pages. That is what 26 of these already rendered as, so the site does not move; what changes is that it is now chosen rather than inherited from a rule about paragraphs. --eyebrow is darker than --grey. --grey measures 3.13 to 3.45:1 on paper and paper2 against a 4.5 floor for text this size, so the three labels were failing it. This clears it at 4.87 worst case. */ .eyebrow{ display:block; font-size:var(--step-0);font-weight:700;text-transform:uppercase; letter-spacing:.18em;color:var(--ink-2);margin:0 0 14px } .eyebrow--label{font-size:var(--step--1);color:var(--eyebrow)} /* ---------- buttons: 48px min target ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55em; min-height:48px;padding:14px 26px; font-family:inherit;font-size:var(--step--1);font-weight:700; text-transform:uppercase;letter-spacing:.1em;text-decoration:none; border:1.5px solid var(--ink);border-radius:var(--r); background:var(--ink);color:var(--paper);cursor:pointer; transition:transform .18s ease,background .18s ease,color .18s ease; } .btn:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-2px)} .btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px} .btn--ghost{background:transparent;color:var(--ink)} .btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)} .btn--light{background:var(--paper);color:var(--ink);border-color:var(--paper)} .btn--light:hover{background:var(--blue);border-color:var(--blue);color:#fff} .btn--outline-light{background:transparent;color:var(--paper);border-color:rgba(250,248,245,.55)} .btn--outline-light:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)} .btn--sm{min-height:44px;padding:11px 18px} /* ---------- header ---------- */ .hdr{ position:sticky;top:0;z-index:90; background:rgba(250,248,245,.94);backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .hdr__in{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0} .brand img{width:44px;height:44px} .brand span{font-weight:800;letter-spacing:.14em;font-size:.9rem} .nav{display:none} .hdr__cta{display:none} /* Ported from the Utopia Labs site, which is the reference for this control. Kept at a 44px box rather than Utopia's 40px, because 44 is the minimum comfortable tap target and this is a mobile-first build. The animation is not the usual bars-to-cross fade. The whole icon rotates -45deg while the top path's dash pattern is redrawn, so the two strokes sweep round and join into one continuous line. The dash values and the -32.42 offset are the ones that land the join cleanly, so treat them as a set and do not tune them individually. */ .burger{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;padding:0; background:none;border:0;color:var(--ink);cursor:pointer } .burger__svg{width:26px;height:26px;transition:transform 500ms ease-in-out} .burger[aria-expanded="true"] .burger__svg{transform:rotate(-45deg)} .burger__top{ stroke-dasharray:12 63; transition:stroke-dasharray 500ms ease-in-out,stroke-dashoffset 500ms ease-in-out } .burger[aria-expanded="true"] .burger__top{stroke-dasharray:20 300;stroke-dashoffset:-32.42} /* drawer opens on tap, never on hover. It sits BELOW the header rather than over it, which is the whole point of the Utopia behaviour: the header stays put, the icon stays visible, and the icon itself is the close control. Hence z-index 85 against the header's 90, and a top pad that clears the header instead of running under it. The header is pinned while open so that pad stays correct regardless of scroll position. That is belt and braces now the announcement bar is gone and the header sits at the top anyway, but it is what keeps the pad honest if any strip is ever put back above the header. */ .drawer{ position:fixed;top:0;left:0;right:0;bottom:0;z-index:85; background:var(--ink);color:var(--paper); padding:calc(65px + 26px) var(--pad) 40px; transform:translateY(-100%);transition:transform .32s cubic-bezier(.4,0,.2,1); overflow-y:auto; } .drawer[data-open="true"]{transform:translateY(0)} body.menu-open .hdr{position:fixed;top:0;left:0;right:0} .drawer a.drawer__link{ display:block;padding:16px 0;border-bottom:1px solid rgba(250,248,245,.16); text-decoration:none;font-size:1.6rem;font-weight:800;text-transform:uppercase;letter-spacing:-.01em } .drawer .btn{width:100%;margin-top:26px} /* ---------- hero ---------- */ .hero{position:relative;background:var(--ink);color:var(--paper);isolation:isolate;overflow:hidden} .hero__bg{position:absolute;inset:0;z-index:-2} .hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.42;filter:grayscale(.35)} .hero::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(26,25,23,.72) 0%,rgba(26,25,23,.55) 45%,rgba(26,25,23,.94) 100%) } /* padding-block, not the padding shorthand, because .hero__in also carries .wrap and the shorthand would wipe out its padding-inline gutter */ .hero__in{padding-block:64px 44px} .hero .eyebrow{color:#C9C3BA;font-size:var(--step--1)} .hero h1{font-size:var(--step-4);margin-bottom:22px} .hero h1 em{font-style:normal;color:#C9C3BA;display:block} .hero__lede{font-size:var(--step-1);max-width:30ch;color:#E6E1DA;margin-bottom:30px;line-height:1.35;font-weight:500} .hero__meta{ display:flex;flex-direction:column;gap:2px;margin-bottom:28px; padding-left:16px;border-left:3px solid var(--paper) } .hero__meta b{font-size:1.05rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em} .hero__meta span{font-size:.9rem;color:#C9C3BA} .hero__btns{display:flex;flex-direction:column;gap:12px} .hero__btns .btn{width:100%;border-radius:var(--r-btn)} /* Opt-in via .hero--balanced on the section, currently home only. This was a .hero__lede + .hero__btns sibling selector, which broke the moment /autumn-edit also lost its meta block and put its buttons straight after its lede. A class says which hero wants this instead of inferring it from markup that can change underneath. The value deliberately equals .hero__in's padding-bottom. The buttons are the last thing in the hero, so the space below them IS that padding, and matching it above centres the button block between the bottom of the text and the bottom of the image. Margins collapse against the lede's own 30px rather than adding to it, so the effective gap is this number, not 74. If .hero__in's padding-bottom ever changes, change this with it, at both breakpoints, or the block drifts off centre again. */ .hero--balanced .hero__btns{margin-top:44px} /* On /autumn-edit the poster IS the hero. Nothing over it, nothing beside it, nothing under it inside the section: no gutter, no padding, no gradient, no background showing through at any width. The overlay and the ink background that every other hero relies on are turned off here rather than left to sit on top of the artwork. It keeps its natural aspect ratio instead of being cropped to a hero shape, because the poster carries the dates on its bottom line and the "MRKT Markets presents" on its top line, and any crop eats those first. The consequence is a tall section on a wide screen, which is what a 4:3 image full-bleed means. It stays a real h1 with the wording in the alt, because a page whose only title is an image has no heading at all to Google or a screen reader. */ .hero--poster{padding:0;background:none;isolation:auto} .hero--poster::after{content:none} /* Scoped through .hero--poster rather than written flat, because `.hero h1` sets a 22px bottom margin and outranks a lone class, which left a strip of background showing under the image. */ .hero--poster .hero__poster{margin:0;font-size:0;line-height:0} .hero--poster .hero__poster img{width:100%;height:auto} /* ---------- stat band ---------- */ /* Padding lives on the band now. It used to come from .stat's own 26px, which went with the tiles when this became a single countdown. */ .stats{background:var(--ink-2);color:var(--paper);padding:44px 0 38px} /* ---------- the live countdown ---------- Reuses .stats and .stat rather than inventing a component, because four ticking units want exactly the layout four stat tiles already had: two up on a phone, four across from 600px. tabular-nums is the whole trick. Raleway's default figures are proportional, so a seconds counter cycling 1 to 0 changes width every tick and the number visibly jitters against its neighbours. Tabular figures are fixed width, so the digits change and nothing moves. Without JS the hours, minutes and seconds are hidden and the day count is left standing alone across the full width, which is what this band showed before it became a clock. Committed 00s would otherwise render as a stopped timer, which is worse than no timer. The .js class is set inline in , so this never flashes. */ /* Its own component rather than a reskin of .stats__grid. That grid draws a hairline between every cell, which is right for four unrelated statistics and wrong for one number split into four parts: it read as a table rather than as a clock. No dividers and no cell backgrounds here, just digits on the band. Four across at every width, including a 320px phone. A clock is read left to right in one line, and the 2x2 the stat grid falls back to below 600px loses that reading completely. The digits are sized off the viewport rather than the type scale, because the brief is that they fill the bar, and the site's largest step tops out well short of that. 11vw is what keeps two digits inside an 87px cell on a 390px screen while still reaching the 7.5rem cap on a desktop. */ .cdown{display:grid;grid-template-columns:repeat(4,1fr);align-items:end} .cdown__u{text-align:center;min-width:0} /* THE PLATE. Not a flip clock any more, and the name is all that is left of one: an ink panel on the ink-2 band, a small radius, and nothing else. The turn, the split and the hinge all went on 2026-08-19. What that skeuomorphism was ever buying was an animation, and with the animation gone it was just a line drawn across four numbers. inline-block, not block, so the plate is sized by its digits rather than by the grid cell. A cell is 279px on a desktop and a plate stretched to fill it would be mostly empty ink with a number floating in the middle. Padding is in em so the plate scales with the type instead of needing a value per breakpoint. */ /* ON A PHONE THE FOUR PLATES ARE ONE BAR. Separate cards sized to their digits is right on a desktop, where a cell is 279px wide and there is room to spare. On a 390px screen a cell is 87px, so a plate that shrinks to its digits ends up 52px with 35px of dead band either side, and four small cards floating in a wide dark strip is what that produced. Filling the cell instead recovers the whole width for the numbers: the plates butt up against each other into a single strip, divided by hairlines rather than gaps, with only the outer corners rounded. The digits grow to match, from 8.5vw to 13vw, which is the actual point of the change. Above 600px they separate back into individual cards, further down this file. */ .flip{ display:block;position:relative; border-radius:0; /* FLAT INK, no split and no hinge. Both went 2026-08-19 at Ty's request: a 1px hairline sat at 50% above the digits, and behind them the panel was two shades meeting at the same line, so the numbers had a rule drawn through them twice over. Removing them is the honest end of removing the turn. The split's only job was to make the panel read as a card mid-flip, which it stated in this comment and which stopped being true the moment the animation went. What is left is what the band actually needs: an ink panel per unit on the ink-2 strip, and a number on it. */ background:var(--ink); /* THE TYPE SIZE LIVES HERE, not on .flip__face, and the padding is in em so the plate grows with its digits instead of needing a value per breakpoint. Set on the face instead, em resolved against the inherited 16px body size rather than the 96px digits, so the padding came out at 4px and the numbers hung over both edges of the plate. */ font-size:clamp(2.4rem,13vw,6rem); padding:.14em 0; margin-bottom:14px; } /* Only the ends of the strip are rounded, and neighbours are divided by a hairline rather than a gap, so the four read as one object. */ .cdown__u:first-child .flip{border-radius:8px 0 0 8px} .cdown__u:last-child .flip{border-radius:0 8px 8px 0} .cdown__u + .cdown__u .flip{border-left:1px solid rgba(0,0,0,.5)} /* Both single-plate states: there is no strip to be an end of, so the plate is rounded all round and has no neighbour to be divided from. */ .cdown.is-today .flip, html:not(.js) .cdown .flip{border-radius:8px;border-left:0} .flip__face{ display:block;position:relative;z-index:1; font-size:1em; font-weight:800;line-height:1;letter-spacing:-.03em; /* TWO numeral features, and the second one is not cosmetic. tabular-nums, because Raleway's proportional digits change width as they cycle, so the seconds jitter and the plate resizes on every tick. lining-nums, because RALEWAY SHIPS OLD-STYLE FIGURES AS ITS DEFAULT and nothing on this site had noticed. Measured off the rendered glyphs: 6 and 8 rise above the cap line, 3 4 5 7 9 drop below the baseline, and 0 1 2 sit at x-height, a spread of 29 units in a 200px sample. At the countdown's 96px that is about 14px of wobble across four plates, which is what made it look, in Ty's words, wonky and cheap. lnum is the same typeface, not a different one: it is Raleway's own lining set, so nothing else about the digits changes. THE SAME DEFAULT APPLIES TO EVERY NUMBER ON THIS SITE, the booth prices and the ticket tiers included. Only the countdown is fixed here, because that is what was asked for. See the README. */ font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum","lnum"; transform-origin:center center } /* THERE IS NO TURN. A rotateX keyframe ran here until 2026-08-19 and was removed at Ty's request: the digits change instantly now. The plate keeps its flip-clock face, the split and the hinge, and simply does not move. Gone with it: the .flip.is-flip rule, the cdflip keyframes, the perspective on .flip, and the reduced-motion branch in the script, which existed only to skip an animation that no longer exists. `is-flip` is in the orphan guard, so a stray rule or class for it fails the suite. */ /* .cdown__lab, not .cdown__u span. The plate is a too, and ".cdown__u span" outranks ".flip", so display:block landed on the plate and stretched it to the full width of its grid cell instead of letting it shrink to its digits. */ .cdown__lab{ display:block; font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em; color:#B9B3AB } /* Without JS the hours, minutes and seconds are hidden and the day count stands alone, which is what this band showed before it became a clock. Committed 00s would render as a stopped timer, which is worse than no timer. The .js class is set inline in , so this never flashes. */ html:not(.js) .cdown{grid-template-columns:1fr} html:not(.js) .cdown__hms{display:none} /* The market is today. Counting down to something already happening is nonsense, so the units collapse to one cell that says so. "Today" is a word, not two digits, so it cannot take the digit size at any viewport. */ .cdown.is-today{grid-template-columns:1fr} .cdown.is-today .cdown__hms{display:none} .cdown.is-today .flip{font-size:var(--step-3)} .cdown.is-today .flip__face{letter-spacing:-.02em} /* ---------- intro paragraph: the standfirst under a poster ---------- Replaced the When/Where/Admission/Vendors band. Serif and centred so it reads as a spoken line rather than another block of interface, and set at the quote's size because it is doing the same job the quote block used to. */ /* 54ch, not the 34ch this started at. At this serif size a narrow measure broke the sentence into seven short ragged lines and read as a tall column rather than as a spoken line. */ /* The opening statement on /autumn-edit, directly under the poster. MRKT's own sentence, reproduced word for word, so every decision here is typographic and none of it touches the copy. It is the first set type on the page and the poster does all the work above it, so it is sized as a statement rather than as body copy. What this fixes: at 32px in a 1440px field it read as a caption of the poster rather than the opening line of the page, it broke to five lines with "expect." stranded alone on the last one, and it sat on a plain stripe with no anchor at all. text-wrap:balance is what evens the lines and kills the widow. Where it is not supported the text simply wraps greedily, which is what it does today, so this degrades to the current behaviour rather than to something broken. The rule above it is drawn with ::before rather than added to the markup, which keeps this a pure stylesheet change. */ /* ---------- the opening statement on /autumn-edit ---------- MRKT's own sentence, reproduced word for word. Not one word is ours. There is almost nothing here on purpose. This block took four redesigns before the actual problem showed up, and the problem was never the styling. Every content section on this site is the same unit: an eyebrow, an uppercase Raleway h2, then supporting text. This section had an eyebrow and no heading, so beside its neighbours it read as a fragment no matter how it was set. Each redesign made it a more distinctive special case, which made it fit less: centred and small, then centred and large, then a 48px EB Garamond block with a drop cap on a two-column grid, on a site that sets serif at 2.4rem and smaller and has no drop cap anywhere. It is a .sec__head now, the same component #find, #plan and #details use, so it inherits the page's structure instead of imitating it. All that is left here is a size bump on the paragraph, because MRKT's sentence is the point of the section rather than a subtitle under it. Ink stays, at Ty's call. The poster above is a dark full-bleed image and cutting straight to a pale stripe left the sentence looking detached from the thing it describes. It does not disturb the alternating run, because ink differs from both neighbours. */ .intro{font-size:var(--step-1);line-height:1.5;max-width:46ch} /* Binds the last two words so the sentence cannot end on one stranded word, which it did at 600px. text-wrap:pretty handles most widths but is not supported everywhere, and this guarantees it where it is not. A span rather than a   entity so textContent stays byte-identical, which is what lets the checks matching MRKT's wording keep matching. */ .nowrap{white-space:nowrap} /* ---------- admission tiers ---------- Deliberately NOT the .booths component the vendor page uses. They look alike today, but one is admission for shoppers and the other is booth pricing for vendors, and sharing a component would couple two things that have no reason to change together. One option is meant to win. Pre-sale gets the blue, the badge and the lift; Door is left plain, so which is better reads at a glance instead of the reader having to compare two numbers. */ /* ============================================================ ADMISSION CARDS. Hand-ported from a pricing-card component Ty supplied, with the source's dark zinc palette swapped for MRKT's own tokens and its monthly/yearly switch removed, because a ticket is bought once. Radius is 8px, --r-btn, not the site's 2px default and not the 20px the original ticket cards used. The source component is rounded and Ty picked it for that; 8px is the roundest value already in this stylesheet, so this borrows a corner the site has rather than adding a new one. ============================================================ */ .tix{display:grid;gap:18px;max-width:760px} .tix__card{ display:flex;flex-direction:column; padding:28px 26px;border-radius:var(--r-btn); background:var(--paper);border:1px solid var(--line) } /* The featured card is the one you can act on. Blue edge and a touch more weight, no badge: the button is the only badge it needs. */ .tix__card--lead{border-color:var(--blue);border-width:1.5px} .tix__top{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line)} .tix__name{ margin:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap; font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em; color:var(--eyebrow) } .tix__card--lead .tix__name{color:var(--blue-dk)} .tix__desc{margin:10px 0 0;font-size:.92rem;color:var(--grey);line-height:1.5} .tix__price{ margin:14px 0 0; font-size:var(--step-3);font-weight:800;line-height:1;letter-spacing:-.02em; color:var(--ink) } .tix__card--lead .tix__price{color:var(--blue-dk)} /* The 26px is the MINIMUM gap under the list, and margin-top:auto on the button is what adds to it so the two cards' feet line up. Those are two different jobs and both are needed: auto alone resolves to 0 on whichever card is taller, which put the button flush against the last feature line. */ .tix__list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px} .tix__list li{ display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start; font-size:.95rem;color:var(--ink-2);line-height:1.45 } /* The tick is the source component's CircleCheck, drawn inline rather than pulled from lucide-react, so nothing extra loads. currentColor, so it takes the card's own colour instead of needing a second rule. */ .tix__ic{width:18px;height:18px;margin-top:2px;color:var(--blue);flex:0 0 auto} .tix__card:not(.tix__card--lead) .tix__ic{color:var(--grey)} /* margin-top:auto so the button sits on the card's floor whatever the lists measure, which is what keeps the two cards' feet level. */ /* margin-top:auto pushes the button to the card's floor whatever the two feature lists measure, which is what keeps the cards' feet level. NO padding-top override here. An earlier version set padding-top:0 while zeroing the gap, which stripped the top half of .btn's 14px and left the label sitting high in its own box. .btn already centres its content with flex; it only needs its padding left alone. */ .tix__btn{margin-top:auto} .tix .btn{margin-bottom:0;justify-content:center} .tix__note{margin:24px 0 0;font-size:.82rem;color:var(--grey);line-height:1.5} /* The on-sale indicator, restyled from a filled pill to a label. MARKUP SHAPE IS PINNED BY build.js, which rewrites the class and the text of this span by regex on data-ticket-status. Restyle it freely; do not rename .tier__status or .tier__dot and do not move the . The class names still read "tier" because that regex is keyed on them, not because a tier component still exists. The pill background, the 100px radius and the pulse animation are all gone. A filled, rounded, pulsing badge is the visual signature of a live checkout, and this section is not one. The dot survives because it is what makes the three states legible at a glance without reading the words. */ .tier__status{ display:inline-flex;align-items:center;gap:.55em; margin-left:1.5em;white-space:nowrap; font-size:.92rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em } /* .92rem against the .68rem label it shares a line with, in blue against that label's grey. It was .62rem and it read as a footnote on the end of a line nobody had a reason to look at. It is now the biggest thing on that line by half again, the only blue in the text column, and it sits directly beside the blue $5, so the two make one blue cluster the eye catches before it reads anything. Size, weight, colour and space. No fill, no pill, no motion. 1.5em of clearance before it, not the .9em it had. Sitting close to the label the two read as one run of small caps; at this distance it reads as a separate statement about the row. */ .tier__dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto} /* HIDDEN WHILE LIVE, and this is the whole point of the rule. "On sale now" directly above a button reading Get Tickets is the same fact twice, which is the rule the rest of this site follows. But the element cannot be deleted: build.js rewrites it from the sheet, and every sold-out rule below selects on it. So it is hidden in the one state where it says nothing, and visible in the two states where it is the most important thing on the page. Removing this line does not break anything, it just puts the redundant label back. */ .tier__status.is-live{display:none} .tier__status.is-soon, .tier__status.is-out{color:var(--grey)} /* ---------- category tiles ---------- Not the .chip control from the line-up, even though they name the same ten categories, because these are not filters and must not look tappable. */ /* ---------- the quieter markets below a featured one ---------- No photo, no ticket button and a text link rather than a .btn, all on purpose. Everything above these on the page is about the featured market and a second set of buttons down here would split the decision. */ .upnext{display:grid;gap:12px} .upcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 20px} .upcard__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px} .upcard h3{font-size:1.02rem} .upcard__city{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--grey)} .upcard__when{font-size:.85rem;color:var(--ink-2);margin-bottom:14px} .upcard__link{ display:inline-flex;align-items:center;min-height:44px; font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em; color:var(--blue);text-decoration:none;border-bottom:1.5px solid transparent } .upcard__link::after{content:"\2192";margin-left:.5em;transition:transform .2s ease} .upcard__link:hover{border-bottom-color:var(--blue)} .upcard__link:hover::after{transform:translateX(4px)} .upcard__link:focus-visible{outline:3px solid var(--blue);outline-offset:3px} /* ---------- sections ---------- */ .sec{padding:64px 0} .sec--paper2{background:var(--paper-2)} .sec--ink{background:var(--ink);color:var(--paper)} /* #C9C3BA, not the #A9A39B this rule asked for while it was being beaten by `.sec--ink .sec__head p`. The lighter value is what these have actually rendered as, and it is the right one over ink. */ .sec--ink .eyebrow{color:#C9C3BA} .sec__head{margin-bottom:34px;max-width:52ch} /* That margin exists to separate the head from the content under it. Where the head IS the section, as on #about, there is nothing to separate it from and the margin just makes the band bottom-heavy. Only matches when the head is the last thing in its wrap, so every other section is untouched. */ .sec__head:last-child{margin-bottom:0} .sec__head h2{font-size:var(--step-3);margin-bottom:14px} .sec__head p{color:var(--ink-2);font-size:var(--step-0)} .sec--ink .sec__head p{color:#C9C3BA} .note{font-size:.78rem;color:var(--grey);font-style:italic;margin-top:10px} /* ---------- events ---------- */ /* end, not stretch: the cards with no photo stay as short as their content instead of padding themselves out to match the height of the one that has an image. That height difference is the point, since it makes the market you can actually buy a ticket for the tallest thing in the row. They hang from the bottom rather than sitting at the top, changed 2026-08-18 on Ty's call, so the short cards line up on one baseline with the foot of the featured card and the row reads as a single block stepping down from the left. With start they sat on the top edge and left a ragged gap underneath. Only affects the row where heights differ: at two columns that is the first row, and the two undated cards in the second row are the same height as each other either way. Below 600px the grid is one column and this does nothing at all. */ .events{display:grid;gap:18px;align-items:end} .ev{ position:relative; background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card); display:flex;flex-direction:column;overflow:hidden } /* Stretched link. The title's ::after covers the whole card, so anywhere on the card opens the event page, while the Get Tickets button sits above it and keeps its own hit area. Done this way rather than wrapping the card in an because that would nest a link inside a link, which is invalid and breaks keyboard navigation. Only cards with a detail page get this. */ .ev__link{color:inherit;text-decoration:none} .ev__link::after{content:"";position:absolute;inset:0;z-index:1} .ev__link:hover{text-decoration:underline;text-underline-offset:3px} .ev__body .btn{position:relative;z-index:2} /* The next market, and only ever one card at a time. Same blue as the Tickets Live pill, so the ring and the pill read as one signal rather than two competing ones. Border width rather than an outline, so the ring cannot overlap the neighbouring card, and box-sizing keeps the card's outer size identical either way, so nothing in the grid shifts when the ring moves. */ .ev--next{border-color:var(--blue);border-width:4px} /* The image is positioned, not just sized, and that is load bearing. The file here was assets/browsing.jpg, 933x1400, a portrait photo. Left in normal flow at width:100% its natural height is 1.5x its width, and an aspect-ratio box takes its automatic minimum size from its content, so the taller child won and this box rendered at roughly 16/24 rather than 16/10. object-fit:cover never applied, because the image was never constrained by anything to be cropped into. It had been wrong since the card was built and was only caught on 2026-08-14, when a fourth market narrowed the column and made this card twice the height of its neighbours. The file is assets/apples-calendar.jpg now, which is already 16/10, so nothing here is currently doing any correcting. That is not a reason to remove it: the next photo MRKT supplies will not be 16/10 either, and the whole point below is that this box does not depend on the file. Taking the image out of flow means the box keeps the ratio the design asked for and the photo is cropped into it, whatever shape the file happens to be. That matters more than this one photo: MRKT supplies these, and the next one will not be 16/10 either. There is a check measuring the rendered box, not reading this rule, because this rule said 16/10 the whole time it was wrong. */ .ev__media{position:relative;aspect-ratio:16/10;background:var(--paper-2);overflow:hidden} .ev__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .pill{ position:absolute;top:12px;left:12px; font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em; padding:7px 11px;border-radius:100px;background:var(--ink);color:var(--paper) } .pill--live{background:var(--blue)} .pill--soon{background:var(--paper);color:var(--ink);border:1.5px solid var(--ink)} .pill--past{background:var(--grey)} /* 24px top and bottom, equal, at Ty's request 2026-08-19. It was 22 and 24, which was invisible while a pill sat at the top and obvious once the pill came off and the city line became the first thing in the card. Measured from the card's outer edge, so both gaps read 25px with the 1px border. */ .ev__body{padding:24px 20px;display:flex;flex-direction:column;flex:1} /* No rule for a pill inside .ev__body any more. The three cards that carried one lost it on 2026-08-19, and the only pill left sits on the ticketed card's photograph, which .pill already positions. Not in the orphan guard, because .pill itself is very much still in use. */ .ev__city{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--blue);margin-bottom:8px} .ev__body h3{font-size:var(--step-1);margin-bottom:12px} .ev__facts{list-style:none;margin:0 0 20px;padding:0;font-size:.88rem;color:var(--ink-2)} /* block, not flex. The flex and its gap existed for a `` label in front of each fact, which these four cards have never used: there is no `` in any .ev__facts on the site. It has to be a block container for text-overflow to work at all, since ellipsis cannot be applied to the anonymous flex item a bare text node becomes. `.ev__facts b` below is now orphaned by this and is left in place rather than deleted on a whim, but it is dead and its min-width will not do anything without the flex parent. */ .ev__facts li{display:block;padding:4px 0;border-bottom:1px dotted var(--line)} .ev__facts li:last-child{border-bottom:0} .ev__facts b{min-width:62px;font-weight:700;text-transform:uppercase;font-size:.68rem;letter-spacing:.1em;color:var(--grey);padding-top:2px} /* Rounded rectangle, not the near-square site default and not a full pill. Scoped to the calendar cards so every other button stays sharp. Sits a few px inside the card's own --r-card so the two curves nest properly; matching the card exactly would make the button look like it is bulging out of it. */ .ev__body .btn{margin-top:auto;width:100%;border-radius:var(--r-btn)} /* ---------- what MRKT is: 3 columns, 25 words max each ---------- */ .cols{display:grid;gap:30px} .col__n{font-family:'EB Garamond',Georgia,serif;font-size:2.4rem;line-height:1;color:var(--blue);margin-bottom:12px;display:block} .col h3{font-size:var(--step-1);margin-bottom:10px} .col p{color:var(--ink-2);font-size:.94rem} /* ---------- the story block on /about ---------- Prose beside a photograph. Deliberately NOT .apply__grid, which looks like the same thing at a glance: that one is text against text on the vendor page and this is text against an image, so sharing it would couple two blocks that have no reason to change together. Same call, same reason, as the admission tiers against .booths. One column at 390px, because a photograph next to a reading measure is not a layout on a phone, it is two things squeezed. The desktop split is in the 900px block near the bottom of this file. 62ch, not the 52ch .sec__head uses. This is the only running prose on the site long enough to need a real measure, and a heading's width is not a paragraph's. */ .story{display:grid;gap:30px} /* Photo first on a phone, at Ty's request 2026-08-19. In one column the source order put four paragraphs between the heading and the only picture in the section, so the image was below the fold and most readers never reached it. Lifting it gives the section something to look at immediately. Done with order rather than by moving the figure in the HTML, because at 900 and up the two-column layout wants body left, photo right, which IS the source order. Reordering the markup would fix the phone and break the desktop. The reset lives with the two-column rule at that breakpoint. Safe to diverge visual order from DOM order here because the figure is not interactive: it takes no focus, so keyboard order is untouched, and a screen reader simply reads the alt text after the prose instead of before it. */ .story .photo{order:-1} .story__body{max-width:62ch;color:var(--ink-2)} /* Shared by the story photograph and the team band below it, because the two want exactly the same thing and a second class differing in nothing is how two photographs drift apart later. --r, not --r-card. 14px is reserved for cards that read as tappable objects, and a photograph is not one. */ .photo{margin:0} .photo img{width:100%;border-radius:var(--r)} /* ---------- the full-bleed photograph ---------- Used by the team shot on /about and nothing else. It is a component rather than a modifier on .photo because almost nothing it does is what .photo does. IT IS A DIRECT CHILD OF THE SECTION, NOT OF .wrap. That is the whole trick, and it is deliberate: a figure inside .wrap can only reach the viewport edges through `width:100vw; margin-inline:calc(50% - 50vw)`, which is a real technique but brings the scrollbar with it. 100vw counts the scrollbar and the content box does not, so on any platform with classic scrollbars the image overhangs by that width, gets clipped by the body's overflow-x, and the right edge quietly stops touching the screen. Outside .wrap the figure is simply as wide as the section, which is as wide as the page, at every width and with no arithmetic. SIZING, which is the part worth reading. The frame is 2.85:1 and the image is always full width, so its natural height is width/2.85: 505px at 1440, but only 137px at 390, which is a strip rather than a photograph. min-height is a floor under that: min-height: min(50vw, 320px) 50vw IS the 2:1 crop, expressed so it holds at every width rather than at one tested one. Below about 640px the floor wins and the box is exactly 2:1, so the crop is capped there no matter how narrow the window gets: a fixed 195px floor would have kept cropping past 2:1 on a 320px phone. 320px is where the floor stops growing, so between about 640 and 912 the crop tapers off on its own, and from 912 up the natural height wins outright and the frame is uncropped and simply scales with the window. No breakpoint, no jump, one expression. 32% object-position, not centre. The eight faces span x 240 to 1165 of 1530 and a 2:1 window is 1074 wide; 32% places it at x 145 to 1219 so every face keeps a margin, and what the crop takes is the barrel and pumpkin on the right, empty backdrop on the left, and the outer edge of two arms. Crop past 2:1 and the next thing lost is a face, which is not a crop. CONSEQUENCE WORTH KNOWING: past 1530px of viewport the image is upscaling past its own resolution, so it softens, and at 2560 the band is 899px tall. That is the accepted trade for edges that always touch the screen. A larger original would fix the softness; MRKT do not have one. */ .fullshot{margin:0} .fullshot img{ width:100%;border-radius:0; min-height:min(50vw,320px); object-fit:cover;object-position:32% center } /* Bottom padding off, so a full-bleed photograph sits straight on top of whatever the next section leads with. Used by the team band on /about, whose picture meets the Join us photograph edge to edge with no paper between them, at every width. */ /* Written .sec.sec--flush rather than .sec--flush. `.sec{padding:96px 0}` inside the 900px block ties with it on specificity and comes later in the file, so the single-class version was silently overridden from 900px up and the photograph floated 96px clear of the band below it. Fourth time source order has bitten in this stylesheet today; two classes settles it wherever the rule happens to sit. The top padding is reduced and the heading's bottom gap is raised to match, which centres the heading in its own strip of colour. It was not centred and it looked wrong: `.sec`'s 96px above, then 14px below, put the heading 70% of the way down a 202px band. **The 14px is not a value anybody chose.** `.sec__head` is the only child of `.wrap` here, so `.sec__head:last-child` zeroes its 34px margin, and what is left is the h2's own 14px collapsing through the parent. A heading block sitting on top of a photograph is a label plate, and a label plate reads as a mistake unless it is centred in its plate. Above and below are now the same number at both widths, and the band height barely moves: 202px to 204px at 1440. */ .sec.sec--flush{padding-top:40px;padding-bottom:0} /* Three classes deliberately: this has to beat `.sec__head:last-child`, which ties with a two-class version and would win or lose on where this block happens to sit in the file. */ .sec.sec--flush .sec__head{margin-bottom:40px} /* The sign-off line. MRKT's own last sentence, set in the serif the column numbers and the step counters already use, so the page closes on the one typeface this site keeps for accents rather than on another bold sans. */ .story__sign{ font-family:'EB Garamond',Georgia,serif;font-size:var(--step-1); line-height:1.35;color:var(--ink);margin-top:26px } /* ---------- vendor directory ---------- */ .filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px} .chip{ min-height:44px;padding:10px 16px;border:1.5px solid var(--line);background:var(--paper); border-radius:100px;font:inherit;font-size:.75rem;font-weight:700;text-transform:uppercase; letter-spacing:.08em;cursor:pointer;color:var(--ink-2); transition:background .16s ease,color .16s ease,border-color .16s ease } .chip:hover{border-color:var(--ink)} .chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)} .chip:focus-visible{outline:3px solid var(--blue);outline-offset:2px} /* Search chip. Rests as a plain 44px icon circle, same height as the other chips. Opening it (site.js toggles .is-searching on .filters) grows it to fill the row and hides the category chips outright, which is the "stretches across the screen and turns into a search bar" the icon does. Contained by .wrap like everything else on the page, not the literal viewport edge. Reduced motion needs no override here: the site-wide *{transition:none!important} rule already makes this instant instead of animated, same as the drawer and burger icon. */ .chip--search{ width:44px;flex:0 0 44px;padding:0;overflow:hidden;display:inline-flex;align-items:center; transition:width .3s cubic-bezier(.4,0,.2,1),flex-basis .3s cubic-bezier(.4,0,.2,1) } .filters.is-searching .chip--search{width:100%;flex:1 1 100%} .filters.is-searching .chip[data-cat]{display:none} .chip--search__toggle{ width:44px;height:44px;flex:0 0 44px;display:inline-flex;align-items:center;justify-content:center; background:none;border:0;padding:0;color:inherit;cursor:pointer } .chip--search__toggle:focus-visible{outline:3px solid var(--blue);outline-offset:2px} .chip--search__icon{width:18px;height:18px;flex-shrink:0} .chip--search__input{ flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1rem; color:var(--ink);padding:0 8px;opacity:0;transition:opacity .18s ease } .chip--search__input::placeholder{color:var(--ink-2)} .chip--search__input:focus-visible{outline:none} /* Hides the browser's own built-in clear-x for type="search", which would otherwise sit right beside this control's own close button and read as two different X icons doing two different things. */ .chip--search__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none} .filters.is-searching .chip--search__input{opacity:1} .chip--search__close{ width:32px;height:32px;flex:0 0 32px;display:inline-flex;align-items:center;justify-content:center; background:none;border:0;padding:0;margin-right:8px;color:var(--ink-2);cursor:pointer;opacity:0;transition:opacity .18s ease } .chip--search__close:focus-visible{outline:3px solid var(--blue);outline-offset:2px} .chip--search__close svg{width:14px;height:14px;flex-shrink:0} .filters.is-searching .chip--search__close{opacity:1} .vendors{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .vendor{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r); padding:20px 16px;text-align:center;min-height:118px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px } .vendor[hidden]{display:none} /* A vendor tile is an when the sheet supplies a link and a
when it does not, so the two have to look identical at rest. Only the linked ones respond to hover, which is the affordance telling you which are clickable. */ a.vendor{text-decoration:none;color:inherit;transition:border-color .2s ease,transform .2s ease} a.vendor:hover{border-color:var(--ink);transform:translateY(-2px)} a.vendor:focus-visible{outline:3px solid var(--blue);outline-offset:2px} .vendor b{font-size:.94rem;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.2} .vendor span{font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;color:var(--grey)} .vendors__empty{grid-column:1/-1;padding:34px 0;text-align:center;color:var(--grey);font-style:italic} /* Clipped by the show-more control, as opposed to [hidden] which is the category filter. Two separate mechanisms on purpose: a tile can be filtered out, clipped, or both, and neither may clobber the other. */ .vendor.is-clipped{display:none} .showmore__wrap{text-align:center} .showmore{ display:inline-flex;align-items:center;gap:.6em;margin-top:22px; background:none;border:1.5px solid var(--ink);border-radius:100px; padding:13px 24px;cursor:pointer;color:var(--ink); font:inherit;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em; transition:background .2s ease,color .2s ease } .showmore:hover{background:var(--ink);color:var(--paper)} .showmore[hidden]{display:none} .showmore svg{width:14px;height:14px;transition:transform .25s ease} .showmore[aria-expanded="true"] svg{transform:rotate(180deg)} /* ---------- vendor apply ---------- */ .booths{display:grid;gap:12px;margin-bottom:38px} /* The cards close the pricing section now that the diagram sits above them, and .wrap has no padding to stop this margin landing on top of the section's own, which made the stripe run 102px past the cards instead of the site's 64px. Nothing else uses .booths. */ .booths:last-child{margin-bottom:0} .booth{ border:1px solid rgba(250,248,245,.22);border-radius:var(--r);padding:22px 20px; display:flex;align-items:baseline;justify-content:space-between;gap:14px } .booth b{font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em} .booth i{font-style:normal;font-size:var(--step-2);font-weight:800;color:var(--paper)} .steps{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:0;counter-reset:s} .steps li{ counter-increment:s;position:relative;padding:18px 0 18px 52px; border-bottom:1px solid rgba(250,248,245,.16);font-size:.92rem;color:#D6D1C9 } .steps li:last-child{border-bottom:0} .steps li::before{ content:counter(s,decimal-leading-zero);position:absolute;left:0;top:17px; font-family:'EB Garamond',Georgia,serif;font-size:1.35rem;color:var(--paper);opacity:.55 } .steps b{display:block;color:var(--paper);font-weight:800;text-transform:uppercase;font-size:.82rem;letter-spacing:.08em;margin-bottom:3px} .incl{list-style:none;margin:0 0 32px;padding:0;font-size:.9rem;color:#D6D1C9} .incl li{padding:9px 0 9px 26px;position:relative;border-bottom:1px solid rgba(250,248,245,.12)} .incl li::before{content:"+";position:absolute;left:0;top:9px;font-weight:800;color:var(--paper)} .fine{font-size:.76rem;color:#A9A39B;margin-top:16px} /* ---------- spec list: event detail facts ---------- */ /* Labels are kept here, unlike the calendar cards where they were dropped, because a bare address and a bare set of opening hours do not announce what they are the way a date and a venue name do. */ .spec{list-style:none;margin:0 0 26px;padding:0} .spec li{padding:16px 0;border-bottom:1px solid var(--line);display:grid;gap:5px} .spec li:last-child{border-bottom:0} .spec b{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--grey)} .spec span{font-size:1rem;color:var(--ink);line-height:1.55} /* Open in Maps sits beside the address it points to, rather than as a separate call to action under the whole Getting there list. Wraps below the address text on narrow phones where there is not room for both. */ .addr{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .addr span{flex:1 1 220px} /* ============================================================ Seen on. White cards for the same reason the sponsor row uses them: these are the outlets' real supplied logo files, a mix of black-on-transparent SVGs and one flat JPG, and white is the only backdrop that keeps all four clean without showing a box around the JPG. Left in full colour, unlike the greyscale sponsor row below, so the two logo rows on this page read as different claims. These are outlets that covered the event. Those are partners who back it. The four logos have wildly different aspect ratios, from a 792x77 masthead to a 170x152 square, so each is capped individually. A shared max-height would render the masthead as a hairline and the square one as a postage stamp. ============================================================ */ .press{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:center} .press__item{ background:#fff;border:1px solid var(--line);border-radius:var(--r); min-height:112px;display:flex;align-items:center;justify-content:center; padding:18px 16px;overflow:hidden } .press__item img{max-width:100%;width:auto;object-fit:contain} .press__item img.wide{max-height:30px} /* CTV News, 151x24 */ .press__item img.mast{max-height:38px} /* The Leader-Post masthead, 792x77 */ .press__item img.stack{max-height:54px} /* Global News, 107x61 */ .press__item img.sq{max-height:82px} /* Big Dog 92.7, 170x152 */ /* ---------- sponsors ---------- */ /* stretch, not center. Centring sized each card to its own logo, so the one with a taller image stood taller than its neighbours in the same row. Stretching makes every card in a row match whatever the tallest needs, which is the behaviour a row of partner cards should have whatever MRKT sends next. */ .sponsors{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:stretch;margin-bottom:30px} /* The 30px above is there to clear the Become a Sponsor button, which came out 2026-08-20 at the client's request. Left on its own it lands on top of the section's own 64px and makes #sponsors 30px taller than every other section on this page, which is the same trap the footer's 130px left behind when the mobile action bar went. Zeroed only when the grid really is the last thing in its wrap, so restoring the button restores the gap with no edit here. */ .sponsors:last-child{margin-bottom:0} /* white card, not paper, because supplied logos are flat JPGs on white and any other backdrop shows their box */ .sponsor{ background:#fff;border:1px solid var(--line);border-radius:var(--r); min-height:146px;display:flex;align-items:center;justify-content:center;padding:20px 18px;overflow:hidden } .sponsor img{max-height:62px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .22s ease,opacity .22s ease} /* Country Thunder only. The supplied PNG was 600x600 with the logo occupying just 590x318 of it, so 282px of the file was transparent nothing. That dead space did both of the things it was blamed for: it forced the card taller than its neighbours, and it made the mark look small because a 118px box was rendering a 62px logo. The file is cropped to its content now, so this is no longer compensating for padding, it is a deliberate size. 78px against the others' 62px, because the cropped mark is a compact roundel while Special Event Rentals is a 5:1 wordmark: matched by height they read as very different weights, and this brings them closer to matching by presence. It stays under the card's 128px min-height, so the card does not grow. The original file is kept as sponsor-country-thunder-uncropped.png. */ .sponsor img.tall{max-height:100px} .sponsor:hover img{filter:grayscale(0);opacity:1} /* ---------- mailing list ---------- */ .signup{max-width:520px} .signup__form{display:flex;flex-direction:column;gap:10px;margin-top:22px} .signup input{ min-height:52px;padding:14px 16px;font:inherit;font-size:1rem; border:1.5px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink);width:100% } .signup input:focus{outline:none;border-color:var(--ink)} .signup .btn{width:100%} .signup__ok{margin-top:14px;font-size:.88rem;font-weight:700;color:var(--blue)} .signup__ok[hidden]{display:none} /* Error wording reuses the same element, so only the colour changes. */ .signup__ok.is-err{color:var(--ink)} /* Honeypot. Off-screen rather than display:none, because some bots skip fields they can tell are not rendered. */ .signup__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .signup__form[data-busy] .btn{opacity:.6;pointer-events:none} /* ---------- footer ---------- */ /* 56px both ends. It carried 130px at the bottom to clear the fixed mobile action bar, which was removed 2026-08-19; without that the footer sat on a slab of empty ink on every phone. */ .ftr{background:var(--ink);color:var(--paper);padding:56px 0} .ftr__top{display:grid;gap:34px;margin-bottom:38px} .ftr img.mark{width:118px;margin-bottom:16px} .ftr h4{font-size:.72rem;letter-spacing:.18em;color:#A9A39B;margin-bottom:14px} .ftr ul{list-style:none;margin:0;padding:0} .ftr li{margin-bottom:4px} .ftr a{ display:inline-flex;align-items:center;min-height:40px;text-decoration:none; color:#E0DBD4;font-size:.92rem;border-bottom:1px solid transparent } .ftr a:hover{color:var(--paper);border-bottom-color:var(--paper)} .ftr__base{ border-top:1px solid rgba(250,248,245,.16);padding-top:24px; display:flex;flex-direction:column;gap:8px;font-size:.76rem;color:#8F8A83 } /* The brand column is a flex column purely so the social marks can be pushed to its foot with margin-top:auto at the breakpoint below. */ .ftr__brand{display:flex;flex-direction:column;align-items:flex-start} /* Social marks, left edge of the brand column. Inline SVG rather than image files: nothing extra to load, they stay sharp at any size, and taking currentColor means they inherit the footer's own colour and hover instead of needing a second set of rules. The 44px box is the tap target and the glyph inside it is 20px, which is why the box looks bigger than the mark. The negative left margin pulls that padding back out so the first glyph optically lines up with the text under it rather than sitting a dozen pixels inboard of everything else. border-bottom is reset because .ftr a draws an underline on hover, which under an icon reads as a rendering fault rather than a hover state. */ /* Written as .ftr .ftr__social, not .ftr__social. `.ftr ul` sets margin:0 and outranks a lone class, so the negative margin below was silently dropped and the glyphs sat 12px inboard of everything above them. */ /* The 30px bottom margin is PHONE ONLY and it is the gap under the marks, added 2026-08-21 at Ty's request. Below 600px the footer is one column, so the marks are the last thing in the brand block and "Visit" is the next heading straight under them; 2px plus the grid's own 34px row gap put them 36px apart, which read as cramped. It is 64px now. IT DOES NOT REACH THE DESKTOP, and not by a media query of its own: the 600px block further down already rewrites this margin to -2px for the column alignment, so raising the base value here cannot touch any width where the footer has columns. Base styles are the phone styles on this site, which is why there is no max-width query. */ .ftr .ftr__social{display:flex;gap:2px;margin:0 0 30px -12px;padding:0;list-style:none} .ftr__social a{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;min-height:44px; color:#B9B3AB;border-bottom:0;transition:color .18s ease } .ftr__social a:hover{color:var(--paper);border-bottom-color:transparent} .ftr__social svg{width:20px;height:20px;fill:currentColor;display:block} /* ---------- motion ---------- The hidden state is gated behind .js, set by an inline script in . Without it, a JS failure or a static render would strand every section at opacity 0, which is exactly what a mockup must never do. */ .js .rise{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)} .js .rise.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .rise{opacity:1;transform:none} } /* ---------- FAQ accordion ---------- */ /* Ported from the Utopia Labs site, which is the reference for this control, and retokenised rather than copied: their --rule, --muted and --radius become this site's --line, --ink-2 and --r, so it inherits the near-square 2px corners everything else here has instead of Utopia's softer radius. A