:root{
  --bg:#F4F2ED;
  --surface:#fff;
  --sunk:#E9E4DB;
  --deep:#16150F;
  --tread:#272419;
  --ink:#17150F;
  --ink2:#5B554A;
  --ink3:#8A8276;
  --line:#DBD4C7;
  --line2:#EBE5DA;
  --trail:#C2521A;
  --trail-d:#93380D;
  --easy:#2F6B36;
  --moderate:#9A6B12;
  --difficult:#B3521A;
  --extreme:#8E2A1C;
  --alert:#8E2A1C;
  --alert-bg:#FBEBE7;
  --caution:#8A5F10;
  --caution-bg:#FBF2DF;
  --ok:#2F6B36;
  --ok-bg:#EBF2EA;
  --brand-facebook:#0866FF;
  --brand-reddit:#FF4500;
  --brand-linkedin:#0A66C2;
  --brand-whatsapp:#25D366;
  --brand-bluesky:#1185FE;
  --r:5px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;
  /* A source URL with no spaces in it is not a reason for the page to scroll
   * sideways on a phone. */
  overflow-wrap:break-word;
}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;line-height:1.18}
p{margin:0}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:9px 14px;border-radius:var(--r);z-index:99}

/* --- masthead --------------------------------------------------------- */
.top{background:var(--deep);color:#fff;position:relative}
.top__in{display:flex;align-items:center;gap:18px;min-height:56px}
.brand{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:800;letter-spacing:-.025em;text-decoration:none;color:#fff;white-space:nowrap;min-width:0}
.brand span{overflow:hidden;text-overflow:ellipsis}
.brand i{font-style:normal;color:var(--trail)}
.motto{background:var(--deep);color:rgba(255,255,255,.74);font-size:12.5px;font-weight:600;border-top:1px solid rgba(255,255,255,.1)}
.motto .wrap{padding-top:6px;padding-bottom:7px}
.motto a{color:var(--trail);font-weight:600;text-decoration:none}
.motto a:hover{text-decoration:underline}
/* The mark is set to cap height, not to the line box, so it sits with the
 * wordmark rather than above and below it. */
.brand .mark{width:26px;height:26px;flex:none;display:block}
.foot .mark{width:22px;height:22px;flex:none;display:block}
.nav{display:flex;gap:15px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.74);text-decoration:none;white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{color:#fff}
.nav a[aria-current]{border-bottom-color:var(--trail)}
.top__end{margin-left:auto;display:flex;gap:14px;align-items:center}
.top__news{background:var(--trail);color:#fff!important;border-radius:100px;padding:6px 14px;font-weight:700}
.top__news:hover{background:var(--trail-d)}

/* --- the menu, for every width too narrow for the whole bar ------------ *
 * A <details> element and nothing besides. The sections have to be reachable
 * with JavaScript switched off, which rules out a scripted drawer, and the
 * disclosure is the one control the platform already gives us with a keyboard
 * story and an expanded state built in.
 *
 * The panel is positioned against .top rather than against the button, because
 * a flex item is only as wide as its contents and a menu the width of the word
 * "Menu" is not a menu. The nav bar and the menu render the same NAV array
 * into two elements, exactly one of which is displayed at any width: making one
 * element serve both would mean revealing a closed <details> from CSS, which no
 * two engines agree on, and getting it wrong hides the sections on a desktop.
 * -------------------------------------------------------------------------- */
.menu{display:none;margin-left:auto}
.menu>summary{
  display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;
  min-height:40px;padding:0 14px;border:1px solid rgba(255,255,255,.26);border-radius:100px;
  font-size:13px;font-weight:700;color:#fff;-webkit-tap-highlight-color:transparent;
}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::marker{content:''}
.menu>summary:focus-visible{outline:2px solid var(--trail);outline-offset:2px}
.menu[open]>summary{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.42)}
.menu__glyph{width:18px;height:18px;flex:none;display:block}
.menu__bar{fill:currentColor;transform-box:fill-box;transform-origin:center;transition:transform .18s ease,opacity .12s ease}
.menu[open] .menu__bar--m{opacity:0}
.menu[open] .menu__bar--t{transform:translateY(4.5px) rotate(45deg)}
.menu[open] .menu__bar--b{transform:translateY(-4.5px) rotate(-45deg)}
.menu__panel{
  position:absolute;left:0;right:0;top:100%;z-index:40;
  background:var(--deep);background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014.8%2012'%20width='14.8'%20height='12'%3E%3Cg%20fill='%23ffffff'%20fill-opacity='0.055'%3E%3Cpath%20d='M1.8%20-8L7.4%20-12L13%20-8L13%20-3L7.4%20-7L1.8%20-3Z'/%3E%3Cpath%20d='M1.8%204L7.4%200L13%204L13%209L7.4%205L1.8%209Z'/%3E%3Cpath%20d='M1.8%2016L7.4%2012L13%2016L13%2021L7.4%2017L1.8%2021Z'/%3E%3C/g%3E%3C/svg%3E");background-size:44px 36px;
  border-top:1px solid rgba(255,255,255,.14);box-shadow:0 18px 34px rgba(0,0,0,.36);
  padding:10px 20px 16px;overscroll-behavior:contain;overflow-y:auto;
  max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px);
}
.menu__sections{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin:0;padding:0;list-style:none}
.menu__sections a{
  display:flex;align-items:center;min-height:46px;padding-left:11px;
  font-size:15px;font-weight:650;color:rgba(255,255,255,.8);text-decoration:none;
  border-left:3px solid transparent;border-bottom:1px solid rgba(255,255,255,.09);
}
.menu__sections a:hover{color:#fff}
.menu__sections a[aria-current]{color:#fff;border-left-color:var(--trail)}
.menu__end{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:15px;padding-top:15px;border-top:1px solid rgba(255,255,255,.14)}
.menu__end a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:100px;
  font-size:14px;font-weight:700;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.26);
}
.menu__end a:hover{border-color:rgba(255,255,255,.5)}
.menu__end .top__news{border-color:var(--trail)}
.menu__end .top__news:hover{border-color:var(--trail-d)}
.item__thumb{display:block;margin:-15px -16px 12px;aspect-ratio:16/9;overflow:hidden;background:var(--sunk)}
.item__thumb img{width:100%;height:100%;object-fit:cover;display:block}
/*
 * The tile that stands where a story has no picture we can vouch for.
 *
 * Every wire row now has a picture slot whether or not it has a picture,
 * because a list where some rows are indented for a thumbnail and some are not
 * reads as a list that has gone wrong. The tread says the absence is the
 * site's, deliberately, rather than a picture that failed to arrive.
 */
.thumb--blank{
  display:block;width:100%;height:100%;background:var(--sunk);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014.8%2012'%20width='14.8'%20height='12'%3E%3Cg%20fill='%2316150F'%20fill-opacity='0.075'%3E%3Cpath%20d='M1.8%20-8L7.4%20-12L13%20-8L13%20-3L7.4%20-7L1.8%20-3Z'/%3E%3Cpath%20d='M1.8%204L7.4%200L13%204L13%209L7.4%205L1.8%209Z'/%3E%3Cpath%20d='M1.8%2016L7.4%2012L13%2016L13%2021L7.4%2017L1.8%2021Z'/%3E%3C/g%3E%3C/svg%3E");background-size:44px 36px;
}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:22px;font-size:13.5px;color:var(--ink3)}
.pager a{font-weight:700;text-decoration:none;color:var(--trail-d)}
.strips{display:grid;gap:18px 24px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.strip h3{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-bottom:8px}
.strip h3 a{text-decoration:none}
.strip ul{list-style:none;margin:0;padding:0}
.strip li{padding:6px 0;border-top:1px solid var(--line2);font-size:14px;line-height:1.35}
.strip li a{text-decoration:none;font-weight:600}
.strip li a:hover{color:var(--trail-d)}
.strip small{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px}
.wire__thumb{flex:none;width:96px;aspect-ratio:4/3;border-radius:4px;overflow:hidden;background:var(--sunk)}
.wire__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.top__end a{font-size:12.5px;color:rgba(255,255,255,.74);text-decoration:none}

/* --- picker, as a plain GET form -------------------------------------- */
.picker{
  background:var(--deep);color:#fff;border-radius:var(--r);padding:22px 22px 18px;
  /*
   * The same tread the mark stands on, as grain rather than as pattern. It is
   * inlined rather than fetched: it is under 400 bytes, it is on the first
   * paint of the home page, and a second request for a background texture is
   * one a reader on a bar of signal at a trailhead should not have to make.
   */
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014.8%2012'%20width='14.8'%20height='12'%3E%3Cg%20fill='%23ffffff'%20fill-opacity='0.055'%3E%3Cpath%20d='M1.8%20-8L7.4%20-12L13%20-8L13%20-3L7.4%20-7L1.8%20-3Z'/%3E%3Cpath%20d='M1.8%204L7.4%200L13%204L13%209L7.4%205L1.8%209Z'/%3E%3Cpath%20d='M1.8%2016L7.4%2012L13%2016L13%2021L7.4%2017L1.8%2021Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:44px 36px;
}
.picker h1{font-size:26px;font-weight:800;margin-bottom:6px}
.picker__lede{font-size:14px;color:rgba(255,255,255,.7);max-width:62ch;margin-bottom:18px;line-height:1.5}
.fields{display:grid;gap:9px;grid-template-columns:1.1fr 1.5fr .7fr .8fr auto;align-items:end}
.f{display:grid;gap:5px;min-width:0}
.f>span{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.in{border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;font:inherit;font-size:14.5px;background:#fff;color:var(--ink);width:100%;min-width:0}
.in:focus{outline:2px solid var(--trail);outline-offset:1px}
.go{background:var(--trail);border:1px solid var(--trail);color:#fff;border-radius:var(--r);padding:11px 24px;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.go:hover{background:var(--trail-d);border-color:var(--trail-d)}
.extra{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:13px;padding-top:13px;border-top:1px solid rgba(255,255,255,.12)}
.extra label{display:flex;gap:8px;align-items:center;font-size:13px;color:rgba(255,255,255,.8);cursor:pointer}
.extra .in{width:104px;padding:8px 10px}
.note{font-size:12px;color:rgba(255,255,255,.46)}
.err{margin-top:11px;font-size:13px;font-weight:600;color:#FFC3B4}
.go--save{background:transparent;border-color:rgba(255,255,255,.55)}
.picker__save{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:13px;padding-top:13px;border-top:1px solid rgba(255,255,255,.12)}
.picker__save label{display:flex;gap:8px;align-items:center;font-size:13px;color:rgba(255,255,255,.8)}
.picker__save .in{padding:8px 10px}
.picker__fine{margin-top:10px;font-size:12px;color:rgba(255,255,255,.46)}
.go--save:hover{background:rgba(255,255,255,.12);border-color:#fff}
.f--go{display:flex;flex-wrap:wrap;gap:8px 0;align-items:end}
.top__account{font-weight:700}
/* The account page: the garage as a list, and the same picker fields in a POST. */
.garage__list{list-style:none;margin:0 0 18px;padding:0;max-width:640px}
.garage__row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0 6px;font-size:14.5px}
.garage__mods{list-style:none;padding:0 0 14px 14px;border-bottom:1px solid var(--line);margin-bottom:2px}
.mods__list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.mods__list li{display:inline-flex;align-items:center;gap:6px;font-size:13px;background:var(--sunk);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 12px}
.mods__list small{color:var(--ink2)}
.mods__form{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-top:4px}
.mods__form .f{min-width:0}
.mods__form .in{padding:8px 10px;font-size:13.5px;max-width:220px}
.go--tiny{padding:2px 8px;font-size:13px;line-height:1.2;border-radius:999px}
.err--ink{color:var(--caution)}
.mods__line{font-size:14px;margin:-10px 0 18px;color:var(--ink2)}
.trails{margin-top:8px}
.runs{list-style:none;margin:0 0 18px;padding:0;max-width:760px}
.runs__row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.runs--public li{padding:5px 0;border-bottom:1px solid var(--line);font-size:14px}
.place__actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.place__actions .go{text-decoration:none;display:inline-block}
textarea.in{resize:vertical;font-family:inherit}
.verify .head h3{font-size:15px;margin:0 0 4px}
.verify__list{list-style:none;margin:8px 0 12px;padding:0;font-size:13.5px}
.verify__list li{padding:5px 0;border-bottom:1px solid var(--line)}
.attest{margin-top:8px}
.go--quiet{background:transparent;color:var(--ink);border-color:var(--line);padding:7px 14px;font-size:13px}
.go--quiet:hover{background:var(--sunk);border-color:var(--ink)}
.picker--account{margin:6px 0 26px}
.alerts{margin-top:8px}
.pill--fit{background:var(--trail);color:#fff;margin-bottom:8px}
.pill--near{background:var(--ok-bg);color:var(--ok);margin-bottom:8px}
.near{margin-bottom:30px}
.switcher{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:4px 0 6px}
.switcher a{font-size:13.5px;font-weight:700;padding:7px 12px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;background:var(--surface)}
.switcher a[aria-current="page"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.switcher__add{font-weight:500!important;color:var(--ink2)!important}
.sub{font-size:15px;font-weight:800;letter-spacing:.02em;margin:0 0 10px}
.group{border:1px solid var(--line);border-left:4px solid var(--trail);border-radius:var(--r);padding:18px 20px 8px;margin:0 0 22px;background:var(--surface)}
.group__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.group__head h2{font-size:20px;font-weight:800;margin:0}
.group__head a{font-size:13.5px;font-weight:700}
.group__block{margin-bottom:14px}
.group__block .head h3{font-size:14.5px;font-weight:800;margin:0 0 4px}
.group__block .head{margin-bottom:8px;border-bottom:1px solid var(--line);padding-bottom:5px}
.count{display:inline-block;font-size:12.5px;color:var(--ink2);margin:-8px 0 12px}
.form--inline{display:flex;gap:12px;align-items:end;flex-wrap:wrap;max-width:none;margin-bottom:22px}
.form--inline .f{min-width:0}
.item--yours{border-left:4px solid var(--trail)}
.alerts__form{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 26px}
.go[disabled]{opacity:.5;cursor:not-allowed}
.picker--account h2{font-size:18px;margin-bottom:12px}
.garage>.err,.garage .form .err{color:var(--caution)}

/* --- structure -------------------------------------------------------- */
.band{padding:28px 0}
.band--sunk{background:var(--sunk);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.head{display:flex;align-items:flex-end;gap:14px;margin-bottom:16px;padding-bottom:9px;border-bottom:2px solid var(--ink)}
.head h1,.head h2{font-size:21px;font-weight:800}
.head p{font-size:13px;color:var(--ink2);margin-top:4px;max-width:76ch;line-height:1.5}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.grid{display:grid;gap:14px}
/*
 * Two thirds and one third, and the same two thirds everywhere the site puts
 * two columns beside each other: the front, the machine page's maintenance
 * beside its parts, a place beside its facts. It was 1.4fr and 1fr, which is
 * 58/42 — near enough to halves that neither column looked like the main one.
 */
.cols{display:grid;grid-template-columns:2fr 1fr;gap:26px;align-items:start}
.auto{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}

/*
 * The front is that grid with a margin down it: the wide column carries the
 * wire and the recall docket, the rail carries what the desk wrote. The rail
 * comes second in the source, so a phone gets the news before the commentary
 * when the two stack; the rule down its left edge is what makes it read as a
 * margin rather than as a narrower third column of the same thing.
 */
.rail__main>*+*{margin-top:28px}
.rail__side{border-left:1px solid var(--line);padding-left:24px}
/*
 * The section lists go two abreast in the rail. At the width they are given
 * everywhere else each one would be a single column, and ten of them stacked
 * would run to twice the height of the news beside them.
 */
.rail .strips{grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:16px 20px}

/*
 * A piece from the desk in the rail: a headline and its standfirst, ruled off
 * from the next one. No card, because a column of boxes a third of a page wide
 * reads as boxes rather than as writing.
 */
.brief{padding:13px 0;border-top:1px solid var(--line2)}
.brief:first-child{border-top:0;padding-top:0}
.brief h3{font-size:15.5px;font-weight:750;line-height:1.34;letter-spacing:-.01em}
.brief h3 a{text-decoration:none}
.brief h3 a:hover{color:var(--trail-d)}
.brief p{margin-top:5px;font-size:13px;line-height:1.5;color:var(--ink2)}
.brief small{display:block;margin-top:5px;font-size:11.5px;color:var(--ink3)}
.crumbs{font-size:12px;color:var(--ink3);padding:14px 0 0}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* --- machine strip ---------------------------------------------------- */
.machine{display:flex;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.machine__cell{padding:11px 16px;border-right:1px solid var(--line2);min-width:0}
.machine__cell:last-child{border-right:0}
.machine__cell span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin-bottom:2px}
.machine__cell b{display:block;font-size:15px;font-weight:750;letter-spacing:-.01em}
.machine__cell--wide{flex:1 1 240px}

/* --- badges ----------------------------------------------------------- */
.pill{display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:3px;padding:3px 8px;white-space:nowrap}
.pill--alert{background:var(--alert-bg);color:var(--alert)}
.pill--caution{background:var(--caution-bg);color:var(--caution)}
.pill--ok{background:var(--ok-bg);color:var(--ok)}
.pill--n{background:var(--sunk);color:var(--ink2)}
.pill--trail{background:#FBEDE4;color:var(--trail-d)}
.rate{display:inline-flex;align-items:stretch;border-radius:3px;overflow:hidden;font-size:11px;font-weight:700}
.rate b{padding:4px 9px;color:#fff;font-size:13px;letter-spacing:-.02em;display:flex;align-items:center}
.rate span{padding:4px 9px;background:var(--sunk);color:var(--ink2);letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center}
.rate--easy b{background:var(--easy)}
.rate--moderate b{background:var(--moderate)}
.rate--difficult b{background:var(--difficult)}
.rate--extreme b{background:var(--extreme)}
.rate--unknown b{background:var(--ink3)}

/* --- recall ----------------------------------------------------------- */
.recall{border-left:4px solid var(--alert);padding:17px 18px}
.recall__meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:9px;font-size:12px;color:var(--ink2)}
.recall h3{font-size:17px;font-weight:750;margin-bottom:7px}
.recall p{font-size:14px;color:var(--ink2);line-height:1.55}
.recall__why{margin-top:9px;font-size:12.5px}
.recall__vin{margin-top:11px;padding-top:10px;border-top:1px solid var(--line2);font-size:12px;line-height:1.55}

/* --- maintenance ------------------------------------------------------ */
.maint{padding:2px 18px 16px}
.maint__row{display:flex;gap:14px;padding:13px 0;border-top:1px solid var(--line2);align-items:flex-start}
.maint__row:first-child{border-top:0}
.maint__flag{flex:none;min-width:68px;text-align:center;border-radius:3px;padding:4px 8px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.maint__flag--due{background:var(--alert-bg);color:var(--alert)}
.maint__flag--soon{background:var(--caution-bg);color:var(--caution)}
.maint__flag--ok{background:var(--ok-bg);color:var(--ok)}
.maint__flag--unknown{background:var(--sunk);color:var(--ink2)}
.maint__body b{font-size:14.5px;font-weight:700;display:block}
.maint__body p{font-size:13px;color:var(--ink2);margin-top:3px;line-height:1.5}
.manual{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink2);line-height:1.55}
.manual b{color:var(--ink)}

/* --- items ------------------------------------------------------------ */
.item{padding:15px 16px}
.item__top{display:flex;gap:10px;align-items:baseline;margin-bottom:6px;flex-wrap:wrap}
.item h3{font-size:15.5px;font-weight:750;min-width:0}
.item h3 a{text-decoration:none}
.item h3 a:hover{color:var(--trail-d)}
.item__count{margin-left:auto;font-size:12px;color:var(--ink3);white-space:nowrap}
.item dl{margin:0;display:grid;gap:5px;font-size:13.5px}
.item dl div{display:flex;gap:8px}
.item dt{color:var(--ink3);font-weight:600;flex:none;min-width:78px}
.item dd{margin:0;line-height:1.5}
.item__note{font-size:13px;color:var(--ink2);line-height:1.5}
.fits{margin-top:8px;font-size:11.5px;font-weight:700;color:var(--ok)}
.price{margin-left:auto;font-size:14px;font-weight:750;white-space:nowrap}
.place__terrain{font-size:12.5px;color:var(--ink2);margin:10px 0}
.stamp{margin-top:11px;padding-top:9px;border-top:1px solid var(--line2);font-size:11.5px;line-height:1.5}
.stamp--fresh{color:var(--ok)}
.stamp--ok{color:var(--ink2)}
.stamp--stale{color:var(--caution);font-weight:600}

/* --- article ---------------------------------------------------------- */
.article{max-width:760px}
/* The house picture: the page's width, the site's radius, and the line under it, not on it. */
.hero{margin:0 0 26px;max-width:760px}
.hero--band{max-width:none}
.hero img{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--sunk)}
.hero figcaption{margin-top:10px;font-size:15.5px;font-weight:700;color:var(--ink)}
.hero--band img{aspect-ratio:3/1;object-fit:cover}

/* --- stand-alone forms (subscribe, unsubscribe, sign-in) --------------- */
.form{max-width:560px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.form .f>span{color:var(--ink2)}
.form .fields{grid-template-columns:1fr;gap:12px}
.form .choices{display:flex;flex-wrap:wrap;gap:8px 16px;margin:4px 0}
.form .choices label{display:flex;gap:7px;align-items:center;font-size:13.5px;cursor:pointer}
.form .go{margin-top:6px}
.form .fine{font-size:12px;color:var(--ink3);line-height:1.5;margin-top:12px}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{max-width:640px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--trail);border-radius:var(--r);padding:18px 20px;font-size:14.5px;line-height:1.6}
.notice--bad{border-left-color:var(--caution)}
.notice h2{font-size:18px;margin-bottom:6px}

/* --- advertising, clearly labeled ------------------------------------ */
.ad{margin:18px 0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.ad__tag{display:block;padding:4px 10px;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--line2)}
.ad--house a{display:block;padding:14px 16px;text-decoration:none;color:inherit}
.ad--house b{display:block;font-size:15px;margin-bottom:3px}
.ad--house span{display:block;font-size:13px;color:var(--ink2);line-height:1.5;max-width:64ch}
.ad--house em{display:block;font-style:normal;font-size:12.5px;font-weight:700;color:var(--trail);margin-top:7px}

/* --- sharing and saving ----------------------------------------------- *
 * Plain anchors to each provider's own web intent, plus four buttons that are
 * progressive enhancement. Every control is sized to a real target: 44px on a
 * phone, because the hand using it may be in a glove.
 * -------------------------------------------------------------------------- */
.share{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-height:34px;margin:20px 0 0;padding-top:14px;border-top:1px solid var(--line2)}
.share-label{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink3)}
.share-links{display:flex;gap:6px;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.share-link{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--line);border-radius:100px;background:var(--surface);color:var(--ink2);text-decoration:none}
.share-link:hover{border-color:var(--ink3);background:var(--sunk)}
.share-link:focus-visible{outline:2px solid var(--trail);outline-offset:2px}
.share-glyph{display:block;width:16px;height:16px}
.share-copy,.cite-button,.bookmark-button{font:inherit;font-size:12.5px;font-weight:600;color:inherit;background:var(--sunk);border:1px solid var(--line);border-radius:100px;padding:6px 13px;cursor:pointer}
.share-copy:hover,.cite-button:hover,.bookmark-button:hover{border-color:var(--trail);color:var(--trail)}
.share-copy:focus-visible,.cite-button:focus-visible,.bookmark-button:focus-visible{outline:2px solid var(--trail);outline-offset:2px}
.share-copy.is-confirming,.cite-button.is-confirming{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
.cite{display:inline-block;margin:10px 8px 0 0}
.bookmark-button{margin-top:10px}
.bookmark-button[aria-pressed=true]{border-color:var(--trail);color:var(--trail-d);background:#FBEDE4}
/*
 * The clipboard fallback's textarea. Off-screen rather than display:none: an
 * element that is not displayed cannot hold a selection, and execCommand would
 * copy nothing at all.
 */
.copy-shuttle{position:fixed;top:-9999px;left:-9999px;width:1px;height:1px;padding:0;border:0;opacity:0}
.story__fig{margin:0 0 18px}
.story__img{display:block;width:100%;height:auto;max-height:440px;object-fit:cover;border-radius:var(--r)}
.story__fig figcaption{font-size:11.5px;color:var(--ink3);margin-top:6px}
.story__excerpt{margin-bottom:18px}
.story__cta{margin:6px 0 10px}
.story__cta .go{display:inline-block;text-decoration:none}
.article__head{padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.article__head h1{font-size:31px;font-weight:800;margin:8px 0 10px}
.article__deck{font-size:16.5px;color:var(--ink2);line-height:1.5}
.article__meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--ink3);margin-top:12px}
.prose p{font-size:16px;line-height:1.7;margin-bottom:15px;color:#26231C}
.sources{margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}
.sources h4{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:9px}
.sources li{font-size:13px;margin-bottom:5px;line-height:1.5}
.applies{background:var(--sunk);border-radius:var(--r);padding:13px 16px;margin:18px 0;font-size:13.5px}
.applies b{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px}

/* --- wire ------------------------------------------------------------- */
.wire article{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line2)}
.wire article:first-child{border-top:0}
.wire a{display:block;font-size:15px;font-weight:650;text-decoration:none;line-height:1.35}
.wire a:hover{color:var(--trail-d)}
.wire small{display:block;font-size:11.5px;color:var(--ink3);margin-top:4px}

/* --- footer ----------------------------------------------------------- */
.foot{background:var(--deep);color:rgba(255,255,255,.62);padding:30px 0 0;margin-top:10px}
.foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:22px;padding-bottom:24px}
.foot h4{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin-bottom:9px}
.foot a{display:block;font-size:12.5px;color:rgba(255,255,255,.58);text-decoration:none;padding:3px 0}
.foot a:hover{color:#fff}
.foot__legal{border-top:1px solid rgba(255,255,255,.12);padding:15px 0 26px;font-size:11.5px;line-height:1.6;display:grid;gap:6px}
.foot__sign{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.4);margin-top:4px}
/*
 * The platform credit, and the last thing on the page. Selector carries .foot
 * so it outranks the .foot a rule above, which turns every footer link into a
 * block and would stretch this one edge to edge.
 */
.foot a.foot__powered{
  display:inline-flex;align-items:center;gap:5px;justify-self:start;margin-top:9px;
  padding:9px 0;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.44);text-decoration:none;
}
.foot a.foot__powered b{font-weight:750;letter-spacing:.055em;color:rgba(255,255,255,.82)}
.foot a.foot__powered:hover b{color:var(--trail)}
.foot a.foot__powered:focus-visible{outline:2px solid var(--trail);outline-offset:3px}

/* ---------------------------------------------------------------------- *
 * Breakpoints. The reader checking whether a trail is open is standing at a
 * trailhead on a phone.
 * ---------------------------------------------------------------------- */
@media (max-width:1080px){
  .cols{grid-template-columns:1fr;gap:22px}
  /*
   * The rail stops being a margin and becomes the section after the news, so
   * the rule moves from its left edge to its top and the section lists go back
   * to the width they take everywhere else.
   */
  .rail__side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:22px}
  .rail .strips{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px 24px}
}
/*
 * 900px, not a round 768, because it is the width the bar stops fitting at:
 * the wordmark, seven section labels, the newsletter pill and Sign in come to
 * roughly 840px of unbreakable content, and below that the nav starts scrolling
 * its last labels out of sight with nothing on screen to say so.
 */
@media (max-width:900px){
  .nav,.top__end{display:none}
  .menu{display:block}
}
@media (max-width:780px){
  .fields{grid-template-columns:1fr 1fr;gap:10px}
  .f--go{grid-column:1 / -1}
  .go{width:100%;padding:13px 24px}
  .picker{padding:18px 16px 16px}
  .picker h1{font-size:22px}
  /*
   * The strip becomes a grid rather than a wrapping flex row: the machine name
   * takes the full first row and the three short cells divide the second, so
   * the columns line up and no cell is left stranded beside dead space.
   */
  .machine{display:grid;grid-template-columns:repeat(3,1fr)}
  .machine__cell{border-bottom:0}
  .machine__cell:last-child{border-right:0}
  .machine__cell--wide{grid-column:1 / -1;border-right:0;border-bottom:1px solid var(--line2)}
  .band{padding:22px 0}
  .head h1,.head h2{font-size:19px}
  .article__head h1{font-size:25px}
  .pager{flex-wrap:wrap;gap:10px}
}
@media (max-width:520px){
  .wrap{padding:0 14px}
  .fields{grid-template-columns:1fr}
  .top__in{min-height:52px;gap:10px}
  .brand{font-size:16px}
  .brand .mark{width:24px;height:24px}
  .menu__panel{padding:8px 14px 14px;max-height:calc(100vh - 52px);max-height:calc(100dvh - 52px)}
  .picker h1{font-size:20px}
  .in,.go{min-height:44px}
  .share-link{width:44px;height:44px}
  .share-copy,.cite-button,.bookmark-button{min-height:44px;padding:6px 16px}
  .maint__row{flex-direction:column;gap:7px}
  .maint__flag{min-width:0;align-self:flex-start}
  .item dl div{flex-direction:column;gap:2px}
  .item dt{min-width:0}
  .price{margin-left:0}
  .machine__cell{padding:10px 11px}
  .prose p{font-size:15.5px}
  .article__head h1{font-size:23px}
  .form{padding:16px}
  /* Five stacked link lists is a footer nobody reaches the end of. */
  .foot__cols{grid-template-columns:1fr 1fr;gap:18px}
  /* Footer links and the crumb trail were 14–21px tall; a thumb needs 44. */
  .foot a,.crumbs a,.pager a,.head__more{min-height:44px;display:inline-flex;align-items:center}
  img,video,iframe{max-width:100%}
  .prose p,.prose li,.item h3,.article__head h1{overflow-wrap:anywhere}
}
/* Below this the section labels stop fitting two to a row without hyphenating. */
@media (max-width:390px){
  .menu__sections{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* contact — fleet standard */
.cf{--cf-accent:var(--trail,var(--accent,#0000FF));--cf-ink:var(--ink,#17150F);--cf-ink2:var(--ink2,#5B554A);--cf-ink3:var(--ink3,#8A8276);
  --cf-line:var(--line,#DBD4C7);--cf-surface:var(--surface,#fff);--cf-r:var(--r,6px);--cf-bad:var(--alert,#8E2A1C);
  max-width:680px;display:grid;gap:26px}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-step{display:flex;align-items:baseline;gap:10px;font-size:17px;font-weight:700;color:var(--cf-ink);margin:0 0 12px;flex-wrap:wrap}
.cf-step span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--cf-accent);color:#fff;font-size:13px;flex:none;align-self:center}
.cf-step em{font-style:normal;font-weight:400;font-size:13px;color:var(--cf-ink3)}
.cf-topics{border:0;padding:0;margin:0;min-width:0}
.cf-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.cf-tile{position:relative;display:block;cursor:pointer;min-width:0}
.cf-tile input{position:absolute;opacity:0;width:1px;height:1px}
.cf-tile__body{display:grid;gap:3px;padding:12px 14px;min-height:64px;border:1px solid var(--cf-line);border-radius:var(--cf-r);background:var(--cf-surface);transition:border-color .15s,box-shadow .15s,transform .15s}
.cf-tile__body strong{font-size:14.5px;color:var(--cf-ink)}
.cf-tile__body small{font-size:12.5px;line-height:1.4;color:var(--cf-ink3)}
.cf-tile:hover .cf-tile__body{border-color:var(--cf-accent);transform:translateY(-1px)}
.cf-tile input:checked+.cf-tile__body{border-color:var(--cf-accent);box-shadow:0 0 0 2px var(--cf-accent) inset}
.cf-tile input:focus-visible+.cf-tile__body{outline:2px solid var(--cf-accent);outline-offset:2px}
.cf-field{display:grid;gap:5px;min-width:0}
.cf-field label,.cf-reply legend{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--cf-ink)}
.cf-opt{font-weight:400;color:var(--cf-ink3);font-size:12px}
.cf-why{font-size:12.5px;line-height:1.45;color:var(--cf-ink3);margin:0}
.cf-in{width:100%;min-width:0;border:1px solid var(--cf-line);border-radius:var(--cf-r);padding:11px 12px;font:inherit;font-size:15px;background:var(--cf-surface);color:var(--cf-ink);min-height:44px}
.cf-in:focus{outline:2px solid var(--cf-accent);outline-offset:1px}
.cf-in[aria-invalid=true]{border-color:var(--cf-bad)}
textarea.cf-in{resize:vertical;min-height:150px;line-height:1.5}
.cf-pair,.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-count{font-size:12px;color:var(--cf-ink3);margin:0;text-align:right}
.cf-count.is-low{color:var(--cf-bad)}
.cf-error{font-size:13px;color:var(--cf-bad);margin:0;font-weight:700}
.cf-error--form{padding:10px 12px;border:1px solid var(--cf-bad);border-radius:var(--cf-r)}
.cf-when{display:none;padding:18px;border:1px dashed var(--cf-line);border-radius:var(--cf-r)}
.cf-when[data-open]{display:block}
@supports not selector(:has(*)){.cf-when{display:block}}
.cf:has([name=topic][value="correction"]:checked) .cf-when[data-when="correction"]{display:block}
.cf:has([name=topic][value="tip"]:checked) .cf-when[data-when="tip"]{display:block}
.cf:has([name=topic][value="fitment"]:checked) .cf-when[data-when="fitment"]{display:block}
.cf:has([name=topic][value="advertising"]:checked) .cf-when[data-when="advertising"]{display:block}
.cf:has([name=topic][value="partnership"]:checked) .cf-when[data-when="partnership"]{display:block}
.cf:has([name=topic][value="press"]:checked) .cf-when[data-when="press"]{display:block}
.cf:has([name=topic][value="legal"]:checked) .cf-when[data-when="legal"]{display:block}
.cf-after{display:grid;gap:22px}
.cf-reply{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0}
.cf-radios{display:grid;gap:8px;grid-template-columns:1fr 1fr}
.cf-radio,.cf-check{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid var(--cf-line);border-radius:var(--cf-r);cursor:pointer;background:var(--cf-surface);min-height:44px}
.cf-radio input,.cf-check input{margin-top:3px;flex:none;width:18px;height:18px;accent-color:var(--cf-accent)}
.cf-radio span,.cf-check span{display:grid;gap:2px;font-size:14px;color:var(--cf-ink)}
.cf-radio small,.cf-check small{font-size:12.5px;color:var(--cf-ink3);line-height:1.4}
.cf-radio:has(input:checked),.cf-check:has(input:checked){border-color:var(--cf-accent)}
.cf-phone{display:none;margin-top:4px}
.cf:has([name=replyBy][value=phone]:checked) .cf-phone{display:block}
@supports not selector(:has(*)){.cf-phone{display:block}}
.cf-final{display:grid;gap:14px}
.cf-actions{display:grid;gap:10px}
.cf-go{background:var(--cf-accent);border:1px solid var(--cf-accent);color:#fff;border-radius:var(--cf-r);padding:13px 26px;font:inherit;font-size:15.5px;font-weight:700;cursor:pointer;min-height:48px;justify-self:start;transition:transform .15s,box-shadow .15s}
.cf-go:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.14)}
.cf-go:focus-visible{outline:2px solid var(--cf-ink);outline-offset:2px}
.cf-fine{font-size:12.5px;line-height:1.5;color:var(--cf-ink3);margin:0}
.cf-aside{display:grid;gap:10px;align-content:start;font-size:14px;line-height:1.55;color:var(--cf-ink2,#5B554A)}
.cf-aside h2{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--cf-ink3,#8A8276);margin:8px 0 0}
.cf-aside p{margin:0}
.cf-expect{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cf-expect li{display:grid;gap:1px;padding-left:12px;border-left:2px solid var(--cf-accent,var(--trail,#0000FF))}
.cf-expect strong{font-size:13.5px;color:var(--cf-ink,#17150F)}
.cf-expect span{font-size:13px;color:var(--cf-ink3,#8A8276)}
.cf-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:40px;align-items:start}
.cf-done{max-width:640px;background:var(--surface,#fff);border:1px solid var(--line,#DBD4C7);border-left:4px solid var(--trail,var(--accent,#0000FF));border-radius:var(--r,6px);padding:22px 24px;display:grid;gap:8px}
.cf-done__kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3,#8A8276);margin:0}
.cf-done h2{margin:0;font-size:22px}
.cf-done p{margin:0;font-size:15px;line-height:1.55}
.cf-done__ref code{font-size:14px;padding:2px 6px;border:1px solid var(--line,#DBD4C7);border-radius:4px}
@media (max-width:900px){.cf-layout{grid-template-columns:1fr;gap:26px}}
@media (max-width:600px){.cf-pair,.cf-grid,.cf-radios{grid-template-columns:1fr}.cf-tiles{grid-template-columns:1fr 1fr}.cf-go{width:100%;justify-self:stretch}}
@media (max-width:400px){.cf-tiles{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.cf-tile__body,.cf-go{transition:none}}