/* Generated by scripts/build-pages.mjs. Do not hand-edit — the next build overwrites it. The tokens come out of index.html so the documents and the app cannot drift apart on color, and the map, the cards and the buttons are deliberately the same shapes the app uses. --chain is set per page on from BRANDS, so a page is tinted by the chain it is about. */ :root{--bg:#001233; --sunk:#001A47; --panel:#00265C; --land:#003074; --key:#F2F4F8; --key-rgb:242,244,248; --accent:#D9383C; --accent-ink:#FFFFFF; --accent-text:#E36A6D; --faint:rgba(var(--key-rgb),0.54); --hair:rgba(var(--key-rgb),0.39); --sign-radius:14px; /* The fallback for a page that belongs to no single chain: the twenty roadtrip corridors, the roadtrips index and /how-we-know/, all of which are about every chain at once. Declaring it here rather than at each template means var(--chain) is never undefined anywhere. That matters more than a default usually does, because of HOW an undefined custom property fails. It is not ignored: the declaration becomes invalid at computed-value time and the property falls back to its inherited or initial value, which for a background is transparent. So h2::after — the rule beside every heading — was not a duller colour on those 22 pages, it was invisible, and the same silent failure is what the city tier shipped with. A default turns a class of invisible bug into, at worst, the wrong colour, which somebody can see and report. (No backticks in this comment. It lives inside the template literal that builds the stylesheet, where one would end the string.) Why this blue and not one of the site's own. The site's blues are all grounds: --land #003074 measures 1.35:1 against the card it would sit on, which is no colour at all. This is picked to read on that ground (6.91:1) and to be nobody's brand — clearly blue rather than cyan, so it is not P. Terry's #34D5E5, and far enough from Torchy's #A98BFF that a corridor page listing Torchy's stops does not look like a Torchy's page. */ --chain:#5AA9FF} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--key); font-family:'Overpass',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:16px;line-height:1.55; background-image:radial-gradient(1200px 600px at 50% -200px,var(--sunk),var(--bg))} .tfe-head,main,.tfe-foot{max-width:900px;margin:0 auto;padding:0 20px} /* The app's sign-off and copyright, on every document page. Quieter than the lines above them: those say where the data came from, these say who made it. */ .tfe-sig{margin:18px 0 4px} .tfe-copy{margin:0;color:var(--faint)} .tfe-sig a{color:var(--accent-text);text-decoration:none;font-weight:700; border-bottom:1px solid transparent} .tfe-sig a:hover,.tfe-sig a:focus-visible{border-bottom-color:var(--accent)} .tfe-skip{position:absolute;left:-9999px} .tfe-skip:focus{left:12px;top:12px;position:fixed;background:var(--panel);color:var(--key); padding:10px 14px;border:2px solid currentColor;border-radius:6px;z-index:9} /* ---------- The sticky bar: the mark left, the buttons hard right ---------- */ /* Sticky rather than fixed, so it takes its own space in the flow and nothing has to be padded down by a number somebody keeps in their head. It sticks from the first pixel because there is nothing above it — a document page has no hero to scroll past, and a bar that appears partway down needs a scroll listener these pages do not get to have. */ /* The same chrome as the app's #stickybar, deliberately: same background token, same 2px key line, same shadow. They were --sunk with a 1px --hair line here and --panel with a 2px --key line there, which is two bars on one site — the thing the shared lockup was supposed to end. The app's treatment won rather than this one, for two reasons. The 2px key line is the site's signature: .sign::after draws every panel with it. And this bar was nearly invisible at the top of a page — body paints a radial gradient from --sunk to --bg, so a --sunk bar sat on almost exactly its own colour and only the hair line said it was there at all. Height is NOT matched, and that is on purpose. This bar is 8px of padding on a phone because the four jump links went behind the burger to get it into one row; the app's is a fixed 58px because --stick is read by its scroll-spy. Matching those would cost 25px of every phone viewport on the tier whose main content is a long table, which is what the rules below exist to avoid. */ .tfe-bar{position:sticky;top:0;z-index:60;background:var(--panel); border-bottom:2px solid var(--key); box-shadow:0 6px 20px rgba(0,0,0,.35)} .tfe-barin{max-width:900px;margin:0 auto;padding:10px 20px; display:flex;gap:18px;align-items:center;flex-wrap:wrap} /* @supports, because without sticky this would be an ordinary bar that scrolls away — which is fine — but the shadow would then sit over the page's first paragraph for no reason. */ @supports not (position:sticky){ .tfe-bar{box-shadow:none} } .tfe-head{padding-top:14px;padding-bottom:0} .tfe-home{display:flex;align-items:center;text-decoration:none;color:var(--key)} .tfe-word{font-family:'Bungee',sans-serif;font-size:clamp(17px,2.2vw,21px);line-height:1; letter-spacing:.005em} /* --accent for the same reason index.html's .sb-mark em is: this is the brand name, and a logotype is exempt from the contrast floor. The two bars on this site open with the same lockup in the same red. */ .tfe-word em{font-style:normal;color:var(--accent)} /* The mark sits inside the name rather than beside it — the same three rules the app's masthead and sticky bar carry, copied here because everything in them sizes off 1em and 1em in this bar is the same clamp the app's bar uses. This moved in the same commit as index.html's, and it had to: the two bars on this site opening with different marks is the exact failure the shared lockup was built to end. The gap is a flat 6px rather than the headline's .0603em, which spends the bar's old flat 12px on the two sides of the mark instead of the one side of it. .wm-space is a real space at no size, so the name is still "Texas Find 'Em" to a screen reader and to a copy-paste while the margins do the spacing. */ .imk{--cap:calc(1em * .7357); --imk-scale:1.2; --imk-gap:6px; display:inline-block;position:relative;vertical-align:baseline; margin:0 var(--imk-gap); height:var(--cap);width:calc(var(--cap) * var(--imk-scale) * 116 / 74)} .imk svg{position:absolute;left:0;display:block;width:auto;fill:var(--key); height:calc(var(--cap) * var(--imk-scale)); bottom:calc((var(--cap) * var(--imk-scale) - var(--cap)) / -2)} .wm-space{font-size:0} .tfe-crumb{font-size:12px;color:var(--faint);margin:0; font-family:'Overpass Mono',monospace;letter-spacing:.04em} .tfe-crumb a{color:var(--faint)} /* Same declaration the app gives .sb-btn and .jumplink: a reader who learns the shape on the map should not have to learn another one here. */ .tfe-jump{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap;align-items:center} /* ---------- The bar's menu on a phone ---------- Same failure the app's bar had, and worse: this one pushed the PAGE sideways. Measured before the change, buttons hung off the right edge at 414, 390, 360 and 320, and at 320 the document itself overflowed by 10-31px depending on the page — which breaks the one rule this stylesheet states outright, that the boxes scroll sideways and the page never does. Scrolling the nav was the old answer and it was the wrong one for the same reason it was wrong in the app: nav that scrolls out of sight is not nav, and nothing tells you there is more of it. No JavaScript here, ever — so the disclosure is a

, which needs none. Find 'Em stays in the bar because it is the one thing on the page that leaves it; the four that move you down the page go behind the summary. */ .tfe-menu{display:none;position:relative} .tfe-burger{list-style:none;cursor:pointer;width:44px;height:44px;flex:0 0 auto; display:flex;align-items:center;justify-content:center; border:2px solid var(--hair);border-radius:7px;color:var(--key); transition:border-color .15s} .tfe-burger::-webkit-details-marker{display:none} .tfe-burger::marker{content:""} .tfe-menu[open] .tfe-burger,.tfe-burger:hover{border-color:var(--accent)} /* Three bars drawn rather than typed — a glyph arrives at a weight nobody chose. The same shape the app's burger draws, because it is the same idea. */ .tfe-burger i{display:block;width:18px;height:2px;background:currentColor;position:relative} .tfe-burger i::before,.tfe-burger i::after{content:"";position:absolute;left:0; width:18px;height:2px;background:currentColor} .tfe-burger i::before{top:-6px} .tfe-burger i::after{top:6px} .tfe-menupanel{position:absolute;right:0;top:calc(100% + 9px);z-index:61; display:flex;flex-direction:column;gap:8px;padding:12px; min-width:200px;max-width:calc(100vw - 28px); background:var(--panel);border:1px solid var(--hair);border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.45)} .tfe-menupanel .tfe-btn{justify-content:flex-start;padding:12px 14px} .tfe-btn{font-family:'Overpass',sans-serif;background:transparent; border:2px solid var(--hair);color:var(--key);border-radius:7px;padding:6px 11px; font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; display:inline-flex;align-items:center;gap:7px;white-space:nowrap; text-decoration:none;transition:border-color .15s} .tfe-btn:hover{border-color:var(--accent)} /* Filled, and there is exactly ONE per page: the button in the bar. The rule is not "it leaves" — the five buttons in Find More in Texas leave too, and filling those made a stack of five red slabs that shouted down the one action this page is actually for. Filled means primary. Everything else on the page, whether it moves you down it or off it, is outlined. */ .tfe-btn-go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .tfe-btn-go:hover{border-color:var(--accent);filter:brightness(1.08)} /* ---------- Type ---------- */ h1{font-family:'Bungee',sans-serif;font-size:clamp(28px,5.4vw,46px);line-height:1.05; margin:26px 0 16px;letter-spacing:.005em} h2{font-family:'Bungee',sans-serif;font-size:clamp(18px,2.6vw,24px);margin:0 0 16px; letter-spacing:.01em;display:flex;align-items:center;gap:12px} /* The chain's own color, as a rule that runs out from the heading. */ h2::after{content:"";flex:1 1 auto;height:2px;background:var(--chain);opacity:.45;border-radius:2px} h3{font-size:16px;margin:0 0 4px;font-weight:700} a{color:var(--key)} .tfe-sec{margin:38px 0 0} /* scroll-margin, because every one of these is a jump target now and the bar above is 58-odd pixels of opaque. Without it the heading you jumped to is the thing the bar is sitting on. */ .tfe-sec{scroll-margin-top:74px} /* The app's own two lines. Mono for the date, because the app sets its Data Freshness in mono and the same fact should not change typeface between two pages of one site. */ .tfe-fresh{font-family:'Overpass Mono',monospace;font-size:12.5px;letter-spacing:.03em; color:var(--faint);margin:-6px 0 10px} .tfe-fresh b{color:var(--key);font-weight:700} /* Underlined, not coloured. This sits above the answer sentence, so it has to be findable without competing with it — an accent-coloured link here pulls the eye off the one line the page is built around. */ .tfe-fresh a{color:inherit;text-decoration:underline;text-underline-offset:2px; text-decoration-color:var(--hair)} .tfe-fresh a:hover,.tfe-fresh a:focus-visible{color:var(--key);text-decoration-color:currentColor} .tfe-truly{font-size:14.5px;line-height:1.55;color:var(--faint);margin:0 0 20px; max-width:70ch;border-left:4px solid var(--chain);padding-left:14px} .tfe-truly b{color:var(--key);font-weight:700} /* The sentence an assistant lifts, and the first paragraph of prose in main. */ .tfe-answer{font-size:clamp(17px,2.3vw,21px);line-height:1.5;margin:0 0 24px; color:var(--key);max-width:62ch} /* ---------- Cards: the app's .sign, double border and all ---------- */ .tfe-card{background:var(--panel);border-radius:var(--sign-radius); box-shadow:0 0 0 2px var(--bg),0 10px 30px rgba(0,0,0,.38);position:relative} .tfe-card::after{content:"";position:absolute;inset:7px;border:2px solid var(--key); border-radius:calc(var(--sign-radius) - 6px);pointer-events:none;opacity:.9} .tfe-card-in{padding:24px 26px 22px;position:relative;z-index:1} .tfe-mapcard{overflow:hidden;margin:0 0 6px} .tfe-maplink{display:block;text-decoration:none;color:var(--key);padding:20px 20px 0; position:relative;z-index:1} .tfe-map{display:block;width:100%;height:auto} .state-fill{fill:var(--land)} .state-line{fill:none;stroke:var(--key);stroke-width:1.6;opacity:.85;vector-effect:non-scaling-stroke} .tfe-dots circle{stroke:var(--bg);stroke-width:1} /* The app's .maprow: a hairline, the legend on the left, the way out on the right. */ .tfe-maprow{display:flex;align-items:center;gap:14px;flex-wrap:wrap; border-top:1px solid var(--hair);margin-top:6px;padding:14px 4px 18px} .tfe-legend{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim,var(--faint)); font-weight:600;letter-spacing:.03em;flex:0 0 auto} .tfe-legend i{width:10px;height:10px;border-radius:50%;display:block;background:var(--chain); box-shadow:0 0 0 1px var(--key)} .tfe-legend b{color:var(--key)} .tfe-cta{margin-left:auto;font-family:'Overpass Mono',monospace;font-size:12px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);flex:0 1 auto} .tfe-maplink:hover .tfe-cta{text-decoration:underline} /* ---------- The facts ---------- */ /* One card each rather than a bullet list. Every one of these is something the build worked out across the whole chain, which is the thing nothing else on the internet has — a bullet was underselling it. */ .tfe-facts{list-style:none;margin:0;padding:0;display:grid;gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))} .tfe-facts li{background:var(--sunk);border-radius:10px;padding:16px 18px; border-left:4px solid var(--chain);font-size:15px;line-height:1.5;color:var(--faint)} .tfe-facts li b{color:var(--key);font-weight:700} /* ---------- Questions ---------- */ /* The heading over the hub's list of everything built below it. Smaller than an H2 because it is inside a section rather than starting one, and monospaced for the same reason the legend and the counts are: it is a label on a list, not a sentence. */ /* ---------- The roadtrip line ---------- */ /* The drive, drawn on the same Texas the dots sit on. Wider than a hairline and under the dots on purpose: the stops are the answer and the route is the question they answer. --accent rather than a chain color, because a drive belongs to no chain. */ .tfe-route{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round; stroke-linecap:round;opacity:.9} .tfe-end{fill:var(--accent);stroke:var(--bg);stroke-width:2} /* Beats .tfe-legend i, which paints the chain color a drive doesn't have. */ .tfe-legend i.tfe-routekey,.tfe-links i.tfe-routekey{background:var(--accent)} /* Where the line came from. Quieter than the independence line above it and louder than nothing, which is what the licence asks for. */ .tfe-osm{color:var(--faint)} .tfe-osm a{color:var(--accent-text);text-decoration:none;font-weight:700; border-bottom:1px solid transparent} .tfe-osm a:hover,.tfe-osm a:focus-visible{border-bottom-color:var(--accent)} /* The stops table is five columns and its first is a distance, so the widths the store table sets are wrong for it. */ .tfe-route-table th:nth-child(1),.tfe-route-table td:nth-child(1){width:1%;white-space:nowrap} .tfe-route-table td:nth-child(2){width:auto} .tfe-route-table td:nth-child(3){width:18%} .tfe-route-table td:nth-child(4),.tfe-route-table td:nth-child(5){width:1%;white-space:nowrap} .tfe-subhead{font-family:'Overpass Mono',monospace;font-size:11.5px;font-weight:700; letter-spacing:.09em;text-transform:uppercase;color:var(--faint); margin:26px 0 12px} /* The line that says whose answers these are. It sits above the questions rather than under them, because an attribution a reader meets after the claim is an attribution they have already not seen. No max-width, deliberately: the rule under it is the same rule that divides one question from the next, and a rule that stops short of the others reads as a mistake rather than as a measure. The line is short enough that capping it bought nothing anyway. */ .tfe-said{margin:0 0 20px;padding:0 0 18px;border-bottom:1px solid var(--hair); color:var(--faint);font-size:13px;line-height:1.6} /* The same voice, under the thing instead of over it. .tfe-said earns its rule by matching the dividers between the questions below it; under a table there is nothing below to match, so the rule is just a line across the page. And a lede is one short line, while a footnote is a sentence — uncapped it ran the full 900px of the column, which is roughly twice a comfortable measure. */ .tfe-note{max-width:70ch;margin:14px 0 0;color:var(--faint);font-size:13px;line-height:1.6} /* How strongly people agreed, as a chip rather than a sentence — it is a label on an answer, and it has to read as not-a-fact at a glance. Two levels: a scale with five rungs invites the middle three to mean nothing. */ .tfe-conf{display:inline-block;margin:10px 0 0;font-family:'Overpass Mono',monospace; font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; border-radius:4px;padding:3px 8px;border:1px solid var(--hair);color:var(--faint)} .tfe-conf-strong{border-color:var(--chain);color:var(--chain)} .tfe-conf-common{border-color:var(--hair);color:var(--faint)} .tfe-qa+.tfe-qa{margin-top:18px;padding-top:18px;border-top:1px solid var(--hair)} .tfe-qa p{margin:0;color:var(--faint)} /* ---------- The table ---------- */ /* Wide content scrolls inside its own box; the page body never scrolls sideways, at any width. */ .tfe-scroll{overflow-x:auto;border:1px solid var(--hair);border-radius:10px} /* Fixed layout plus a break rule, so a long source description wraps instead of setting the table's width. min-width keeps it readable on a phone, where six columns genuinely do not fit and the scroll box is the right answer. */ .tfe-table-fixed{table-layout:fixed;width:100%;min-width:660px} /* The card already draws the frame around this one, so the scroll box's own border is a second line just inside the first. */ .tfe-scroll:has(> .tfe-table-fixed){border:0;border-radius:0} /* break-word, not anywhere. The anywhere value will split a word that would have fitted on the next line, which is how a 56px column turned "5 answers" into "5 ans wer s". break-word splits only a run that cannot fit on a line of its own — the long source URLs, and nothing else. (No backticks in this comment: it is inside the template literal that builds the stylesheet, where one ends the string. Second time.) */ .tfe-table-fixed td,.tfe-table-fixed th{overflow-wrap:break-word;word-break:normal} .tfe-table-fixed thead th{white-space:nowrap} .tfe-table-fixed .tfe-town{white-space:normal} /* A note that belongs to the table above it: inside the card, divided from the table by the same hairline the rows use, so it reads as the table's footnote rather than as new prose that happens to follow. */ .tfe-tnote{margin:0;padding:12px 2px 0;border-top:1px solid var(--hair); color:var(--faint);font-size:12.5px;line-height:1.6} .tfe-tnote b{color:var(--key);font-weight:700} .tfe-table{border-collapse:collapse;width:100%;font-size:14px;min-width:660px} .tfe-table caption{text-align:left;padding:0 0 12px;color:var(--faint);font-size:12px; font-family:'Overpass Mono',monospace;letter-spacing:.04em;text-transform:uppercase} .tfe-table th,.tfe-table td{text-align:left;padding:10px 14px;border-top:1px solid var(--hair); vertical-align:top} /* Auto layout hands the widest column whatever is left over, which on the two big chains is the amenity pills — and the name column got squeezed until "Buc-ee's" broke at its own hyphen into "Buc-" and "ee's". Every store on five of the six chains has the chain's name inside its name, so that break was on nearly every row. Percentages rather than fixed widths so the shape holds from the 660px floor to a wide desktop; Directions takes 1% and gets its content width, which is what a nowrap cell does under a 1% hint. */ /* :not(.tfe-table-fixed), all four, and this is the whole reason the provenance table would not stop scrolling sideways. These widths and that nowrap are about the STORE table's columns — a name, a town, hours, pills, and a Directions link that must not break. The provenance table wears the same .tfe-table class and has a different set of columns, so nth-child(5) landed on its prose column in one row shape and on its date column in the other: "shipleydonuts.com/sitemap_index.xml" and "24 August 2026" were both told never to wrap, and each stuck 21 to 47px out of a cell that had room for neither. It read exactly like a rounding artifact — a couple of dozen pixels of overflow on a table whose own width matched its box to the pixel — and the first two fixes chased that theory. It was a selector written for one table quietly applying to another, which is what a shared class does when only one of its users is in mind. */ .tfe-table:not(.tfe-table-fixed) th:nth-child(1){width:23%} .tfe-table:not(.tfe-table-fixed) td:nth-child(2){width:22%} .tfe-table:not(.tfe-table-fixed) td:nth-child(3){width:15%} .tfe-table:not(.tfe-table-fixed) td:nth-child(5){width:1%;white-space:nowrap} .tfe-table thead th{font-size:11px;text-transform:uppercase;letter-spacing:.07em; color:var(--faint);border-top:0;background:var(--sunk)} .tfe-table tbody th{font-weight:700;color:var(--key)} .tfe-table td{color:var(--faint)} .tfe-table tbody tr:hover td,.tfe-table tbody tr:hover th{background:rgba(var(--key-rgb),.04)} .tfe-nm{display:block} /* A source link inside a table cell. Underlined rather than coloured, like the provenance link in the freshness line, so a column of them does not turn the table into a wall of accent. */ .tfe-src{color:inherit;text-decoration:underline;text-underline-offset:2px; text-decoration-color:var(--hair)} .tfe-src:hover,.tfe-src:focus-visible{text-decoration-color:currentColor} /* A world record on a store. Solid rather than dashed, the way the app's badge is, because a record is a fact a chain published rather than a promise. */ .tfe-wr{display:inline-block;margin-top:4px;font-family:'Overpass Mono',monospace; font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; padding:2px 6px;border-radius:999px;border:1px solid var(--chain);color:var(--chain); white-space:nowrap} /* The store number, in the app's mono, for the same job it does on a card: telling two stores in one town apart. */ .tfe-sid{display:block;font-family:'Overpass Mono',monospace;font-size:11px;font-weight:700; letter-spacing:.04em;color:var(--chain);margin-top:2px} .tfe-town{display:block;color:var(--faint);font-size:12.5px;margin-top:2px} .tfe-hrs{font-variant-numeric:tabular-nums} .tfe-hrs span{display:block;white-space:nowrap} .tfe-hrs span+span{margin-top:3px} /* The hours page puts its pattern in the row header, and a tbody th is bold and in the key color — which made the whole line shout, days and times alike. The days are the label and the times are the value: only the label is bold. */ .tfe-table tbody th.tfe-hrs{font-weight:400;color:var(--faint)} .tfe-hrs b{font-weight:700;color:var(--key)} /* Flat, no border, no hover: the app's rule is that a pill is a caption and an action is a control, and a reader decides what to touch from shape alone. */ .tfe-pill{display:inline-block;background:rgba(var(--key-rgb),.09);border-radius:999px; padding:3px 9px;margin:0 4px 4px 0;font-size:11.5px;color:var(--key);white-space:nowrap} .tfe-none{color:var(--faint);font-style:italic;font-size:12.5px} .tfe-map-link{display:inline-block;white-space:nowrap;border:2px solid var(--hair); border-radius:7px;padding:5px 10px;font-size:11px;font-weight:700;letter-spacing:.07em; text-transform:uppercase;text-decoration:none;transition:border-color .15s} .tfe-map-link:hover{border-color:var(--accent)} .tfe-note{color:var(--faint);font-size:13px;margin:16px 0 0} /* ---------- The rest of the map ---------- */ .tfe-links{list-style:none;margin:0;padding:0;display:grid;gap:8px} .tfe-links li{display:flex;align-items:center;gap:10px;background:var(--panel); border-radius:10px;padding:12px 16px;font-size:14px;flex-wrap:wrap} .tfe-link-name{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700} .tfe-link-name:hover{text-decoration:underline} /* The button never underlines with the name beside it, and it keeps its own hover — two targets in one row that respond as one row is a row that reads as a single link with a decoration on the end. */ .tfe-links .tfe-btn{flex:0 0 auto} .tfe-links .tfe-btn:hover{text-decoration:none} .tfe-links i{width:10px;height:10px;border-radius:50%;display:block;flex:0 0 auto; box-shadow:0 0 0 1px var(--key)} .tfe-links .tfe-all{background:linear-gradient(135deg,#FF3B4E 0 33%,#F5C518 33% 66%,#A98BFF 66%)} .tfe-links > li > span{margin-left:auto;color:var(--faint);font-size:12px; font-family:'Overpass Mono',monospace} .tfe-foot{margin:48px auto 64px;padding-top:18px;border-top:1px solid var(--hair); color:var(--faint);font-size:13px} .tfe-foot p{margin:0 0 8px} @media (max-width:640px){ /* ONE ROW on a phone, and this is the whole reason for the rules below. Wrapped, the bar was 124px of an 844px screen — 15% of the viewport gone for the entire length of a page whose main content is a long table. The app's bar is a single row and so is this one. One move buys it: the four jump links go behind the burger, leaving the mark, Find 'Em and the summary — three things, which fits at 320 with the wordmark still beside the longhorn. They used to scroll sideways inside their own nav instead, with Find 'Em stuck to the right edge of that scroller. It looked deliberate and it was not working: measured, buttons were clipped off the right at every phone width, and at 320 the page itself overflowed. Nav you cannot see is not nav, and a scroller cannot fail visibly enough for anyone to report it. */ .tfe-barin{padding:8px 14px;gap:10px;flex-wrap:nowrap} /* The wordmark used to go here, leaving the longhorn alone. It was the cheapest 130px in the bar and it was the wrong 130px: the longhorn on its own is a shape people have to already know, and this site is mostly somebody's first visit. It stays, smaller, beside a smaller mark. */ .tfe-word{font-size:13px} .tfe-home{gap:8px;min-width:0} /* overflow must stay visible: the menu's panel is positioned out of this nav, and a scroller would clip it into a sliver. There is nothing left to scroll anyway — the four jump links are in the panel now. */ .tfe-jump{margin-left:auto;flex-wrap:nowrap;overflow:visible;min-width:0} .tfe-jump > .tfe-btn:not(.tfe-btn-go){display:none} .tfe-menu{display:block} .tfe-btn{flex:0 0 auto;padding:9px 11px} .tfe-menupanel .tfe-btn{display:flex} .tfe-sec{scroll-margin-top:64px} /* The count is the thing that goes when a row runs out of room: the name and the button are both destinations, and a store count is a caption. */ .tfe-links > li > span{display:none} .tfe-links li{gap:10px;flex-wrap:nowrap} .tfe-link-name{flex:1 1 auto;min-width:0} /* A real target on a phone, same 44px the app holds its controls to. */ .tfe-links .tfe-btn{padding:12px 12px} .tfe-card-in{padding:20px 16px 18px} .tfe-maplink{padding:14px 12px 0} .tfe-cta{margin-left:0;flex-basis:100%} } /* A row carries two buttons now — Find 'Em, which runs the search, and More, which opens that drive's own page. Measured, the pair plus a name like "San Antonio to Corpus Christi" does not fit 320 on one line, and because the row is nowrap it pushed the PAGE sideways rather than wrapping, which is the one thing this stylesheet says never happens. So on the narrowest phones the name takes its own line and the buttons sit under it. Truncating the name was the alternative and it is worse: the name is the whole content of the row, and "San Antonio to Corpus Chr…" is a drive nobody can identify. */ @media (max-width:400px){ .tfe-links li{flex-wrap:wrap;row-gap:8px} .tfe-links .tfe-link-name{flex:1 1 100%} .tfe-links .tfe-btn{flex:1 1 auto;justify-content:center} }