/* t877 shared centered container (desktop >=1100px). Full-width backgrounds stay; contents align to --rc-c via gutter padding. */
:root{--rc-c:1280px;--rc-gut:max(56px,calc((100% - var(--rc-c))/2))}
@media (min-width:1100px){
 html:root body .site-header.page-width,html:root body main>.page-width,html:root body .site-shell>.page-width,html:root body main>section>.page-width,
 html:root body .footer.page-width,html:root body section.email,html:root body .home-story-record,html:root body .home-stories-unified,
 html:root body .market-showcase[data-featured-rail],html:root body .market-showcase,html:root body .categories-editorial .category-rail,
 html:root body .catalog-filters,html:root body .catalog-group,html:root body .journal-library,html:root body main>.discovery-bar,html:root body .taxonomy-hero,
 html:root body .guide-assessment,html:root body .evidence-snapshot,html:root body .atlas-section-nav,html:root body main>.market-hero,
 html:root body .home-weekly-feature,html:root body .pc-sticky>.page-width,html:root body main .guide-home-link.page-width,
 html:root body .mm-home-body.page-width,html:root body .mm-controls.page-width,html:root body .mm-out.page-width,html:root body .guide-score-note.page-width{
  box-sizing:border-box;width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;
  padding-left:var(--rc-gut)!important;padding-right:var(--rc-gut)!important}
 html:root body .guide-index-market{box-sizing:border-box;margin-left:var(--rc-gut)!important;margin-right:var(--rc-gut)!important;width:auto!important}
}
@media (min-width:1100px){
 html:root body .home-stories-unified .home-browse-stories{right:var(--rc-gut)!important}
 html:root body .guide-reading-stage .guide-full-head,html:root body .guide-reading-stage .guide-full-reading,html:root body main>.guide-reference{
  box-sizing:border-box;max-width:var(--rc-c)!important;margin-left:auto!important;margin-right:auto!important}
}
@media (min-width:1100px){
 /* Stories lead photo keeps its 16:10 photo proportion instead of a stretched strip */
 html:root body .home-stories-unified .home-story-tile:first-child>.home-story-image{aspect-ratio:16/10!important;height:auto!important}
 html:root body .home-stories-unified .home-story-tile:first-child>.home-story-image img{width:100%;height:100%;object-fit:cover}
 /* Newsletter: copy left, form ends on the container's right edge */
 html:root body section.email{column-gap:64px}
 html:root body section.email .email-form{justify-self:end;align-self:center;transform:none}
 /* Guide hero artwork: whole car inside the stage, no bleed/crop */
 html:root body .market-page--focus .market-hero-stage>img,html:root body [data-model-slug] .market-hero-stage>img,html:root body[data-page-car] .market-hero-stage img{
  position:relative!important;left:auto!important;right:auto!important;width:100%!important;max-width:100%!important;height:auto!important;max-height:340px!important;object-fit:contain!important;transform:none!important}
}
/* B1: Markets hero 'Explore Market Movers' keeps its left edge and navy offset shadow on hover (hero clips overflow, so no translate) */
html:root body .catalog-head .mm-hero-cta{margin-left:2px;margin-bottom:8px}
html:root body .catalog-head .mm-hero-cta:hover,html:root body .catalog-head .mm-hero-cta:focus-visible{transform:none!important;box-shadow:6px 6px 0 #17232b!important}
/* B3: Guides..About group centred in the space between the logo and Search (equal auto margins either side).
   The desktop row starts at 1181, the same point menu-sub.css shows it. From 1100 to 1180 the header is
   still the two-column mobile bar; forcing the nav visible here wrapped the menu button onto a second row. */
@media (min-width:1181px){
 html:root body .site-header .main-nav{margin-left:0!important;display:flex!important;flex:1 1 auto!important;justify-content:flex-start!important}
 html:root body .site-header .main-nav>a:first-child{margin-left:auto!important}
 html:root body .site-header .main-nav>a[href*="search/"]{margin-left:auto!important}
}
/* B6: Market Movers kicker uses the same pink as Markets and Guides */
html:root body .mm-page .mm-hero .kicker,html:root body .mm-page .catalog-head .kicker{color:#ff2f87!important}
/* Hero car finder: suggestions sit above the sticky filter bar (z 35) and the site header (z 80) while open */
html:root body .catalog-head-copy:has(.pc-finder-list:not([hidden])),html:root body .catalog-head-copy:has(.pc-finder-input:focus),
html:root body .pc-sticky:has(.pc-finder-list:not([hidden])),html:root body .pc-sticky:has(.pc-finder-input:focus){z-index:90!important}
html:root body .catalog-head:has(.pc-finder-list:not([hidden])),html:root body .catalog-head:has(.pc-finder-input:focus){overflow:visible!important;position:relative;z-index:90!important}
html:root body main.pc-page{overflow-x:clip!important;overflow-y:visible!important}
html:root body .pc-finder-list{max-height:min(60vh,420px);overflow-y:auto;overscroll-behavior:contain}

/* t892/t893: homepage Guide/Market strip - text stays in the 1280 container at its 1440 position (fixed 43px inner padding);
   only the backgrounds bleed: yellow out to the left edge, paper out to the right edge (spread shadow clipped to one side). */
@media (min-width:1100px){
 html:root body .home-story-record{overflow-x:clip}
 html:root body .home-story-record>a.home-entry-story{--bleed:#f1d954;padding-left:19px!important;padding-right:43px!important;box-shadow:0 0 0 100vw var(--bleed);clip-path:inset(0 0 0 -100vw)}
 html:root body .home-story-record>a.home-entry-story:is(:hover,:focus-visible){--bleed:#ffe777}
 html:root body .home-story-record>a.home-entry-data{--bleed:#f1eee6;padding-left:43px!important;padding-right:43px!important;box-shadow:0 0 0 100vw var(--bleed);clip-path:inset(0 -100vw 0 0)}
 html:root body .home-story-record>a.home-entry-data:is(:hover,:focus-visible){--bleed:#d1eadf}
}

/* t895 (rule t865): Markets catalog cards, one layout for every card. The car stage takes the free height, so the car
   sits centred between the title and the median block; the price, score and guide link are bottom-aligned on every card;
   a two-line title pushes the stage down instead of overlapping the car; the price and the score sit in separate columns. */
html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card{
 display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;column-gap:14px!important;
 grid-template-rows:auto auto auto auto minmax(150px,1fr) auto auto auto!important;align-content:stretch!important;height:100%!important;min-height:0!important}
html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card[hidden]{display:none!important}  /* t988: filtered-out cards stay hidden */
html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card>.catalog-eyebrow{grid-row:1!important;grid-column:1/-1!important}
html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card>.market-show-title{grid-row:2!important;grid-column:1/-1!important;align-self:start!important}
html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card>.era-mark{grid-row:3!important;grid-column:1/-1!important}
html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card>.catalog-note{grid-row:4!important;grid-column:1/-1!important}
html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card>.catalog-car-stage{grid-row:5!important;grid-column:1/-1!important;position:relative!important;height:auto!important;min-height:150px!important;align-self:stretch!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:16px 0!important;margin:0!important}
html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card>.catalog-car-stage>.market-show-car{display:block!important;position:static!important;width:auto!important;max-width:100%!important;height:auto!important;max-height:170px!important;margin-left:auto!important;margin-right:auto!important;object-fit:contain!important;object-position:center center!important;transform:none!important}
/* Stage images without .market-show-car used to be fitted inside the stage, so they must not grow it. */
html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card>.catalog-car-stage>img:not(.market-show-car){display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;object-fit:contain!important;object-position:center center!important;transform:none!important}
html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card>.catalog-price{grid-row:6!important;grid-column:1!important;align-self:end!important;min-width:0!important;padding-top:0!important;container-type:inline-size}
html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card>.catalog-price>span:first-child{display:block!important;max-width:100%!important;white-space:nowrap!important;letter-spacing:.02em;overflow-wrap:normal;word-break:normal}
html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card>.catalog-price .catalog-price-tail{display:inline!important;white-space:nowrap!important}
html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card>.catalog-price strong{white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important;max-width:100%}
html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card>.catalog-entry{grid-row:7!important;grid-column:1!important}
html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card>.catalog-bottom{display:contents!important}
html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card .catalog-guide-link{grid-row:8!important;grid-column:1!important;align-self:end!important;justify-self:start!important;margin-top:14px!important}
html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card .catalog-tach{grid-row:6/9!important;grid-column:2!important;align-self:end!important;justify-self:end!important;margin:0!important}
@media (max-width:359px){html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card .catalog-tach{grid-row:7!important;grid-column:1/-1!important;justify-self:start!important}}

/* t895: Market Movers colours. Homepage: Moving up cards in the homepage 'This month's pick' green.
   Market Movers page (3 months and 1 year): the panel behind the car is that green, and the % uses the site mint. */
html:root body main:not(.pc-page) .mm-home:not(.pc-most-searched) .mm-card.mm-up{background:#cae4da!important}
html:root body main:not(.pc-page) .mm-home:not(.pc-most-searched) .mm-card.mm-up .mm-img{background:#cae4da!important}
html:root body main.mm-page .mm-card.mm-up .mm-img{background:#cae4da!important}
html:root body main.mm-page .mm-card.mm-up .mm-pct{color:#d81b72!important}
/* t896: Market Movers page cards: hover/focus uses the panel green, never pink, in every view. */
html:root main.mm-page .mm-card:has(.mm-link:hover),html:root main.mm-page .mm-card:has(.mm-link:focus-visible),html:root main.mm-page .mm-card:hover,html:root main.mm-page .mm-card:focus-within{--mm-hover:#cae4da;background:#cae4da!important}
html:root main.mm-page .mm-card:has(.mm-link:hover) :is(.mm-img,.mm-pair),html:root main.mm-page .mm-card:has(.mm-link:focus-visible) :is(.mm-img,.mm-pair){background:#cae4da!important}
html:root main.mm-page .mm-card .mm-link:hover,html:root main.mm-page .mm-card .mm-link:focus-visible{color:#17232b;text-decoration-color:#17232b}

/* t901: Market Movers page, Moving down hover/focus in the Moving down panel blue (#c6d8e1); Moving up stays green */
html:root main.mm-page .mm-card.mm-down:has(.mm-link:hover),html:root main.mm-page .mm-card.mm-down:has(.mm-link:focus-visible),html:root main.mm-page .mm-card.mm-down:hover,html:root main.mm-page .mm-card.mm-down:focus-within{--mm-hover:#c6d8e1;background:#c6d8e1!important}
html:root main.mm-page .mm-card.mm-down:has(.mm-link:hover) :is(.mm-img,.mm-pair),html:root main.mm-page .mm-card.mm-down:has(.mm-link:focus-visible) :is(.mm-img,.mm-pair){background:#c6d8e1!important}
/* t931: v33.css switched .catalog-grid to 4 columns at >=1600px when the grid was full-bleed; since t877 it sits in the
   1280px --rc-c container, so 4 columns made ~320px cards (prices wrapped per digit). Keep the 1440 layout (3 columns) at every wide width. */
@media(min-width:1600px){html:root body .catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}html:root body .catalog-grid .catalog-card:nth-child(4n){border-right:1px solid var(--rule)}html:root body .catalog-grid .catalog-card:nth-child(3n){border-right:0}}

/* t963: the 1440 container at every wide width. Bands stay full-bleed; their content shares the header's --rc-gut
   (1280px column). About, field notes, feature heroes and the guide link bar were still on --pad, which caps at 56px,
   so at 2560 the type sat on the left while the header sat in the container. */
@media (min-width:1100px){
 html:root body :is(.about-poster,.about-the-line,.about-collections,.about-file,.poster-generation,.origin-spread,.tach-method,.about-discovery,.line-article-hero,.feature-hero,.story-return-band){
  box-sizing:border-box!important;width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;
  padding-left:var(--rc-gut)!important;padding-right:var(--rc-gut)!important}
 html:root body .feature-hero-copy{padding-left:0!important;padding-right:0!important}
 html:root body .editorial-jumps{box-sizing:border-box!important;width:100%!important;max-width:none!important;padding-left:var(--rc-gut)!important;padding-right:0!important}
 html:root body .editorial-jumps>a:first-child{padding-left:0!important}
 html:root body .v127-market .v123-market-body{max-width:none!important}
 /* A page-width box inside an already guttered filter bar was a second 96vw column, so the links ran past the viewport. */
 html:root body :is(.catalog-filters,.taxonomy-sticky)>.page-width{width:auto!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
}
/* Below 1100 the header is already a full-bleed bar padded with --pad. Page-width heroes were still a 96vw box,
   so the band stopped short of the edges and the title sat off the header. */
@media (max-width:1099px){
 html:root body :is(.hero.page-width,.catalog-head,.article-hero,.editorial-hero,.guide-catalog-head,.site-search-hero,.policy-hero,.taxonomy-hero,.market-hero,.line-article-hero,.feature-hero,.about-poster,.about-the-line,.about-collections,.about-file,.poster-generation,.origin-spread,.tach-method,.about-discovery,.story-return-band,.catalog-filters,.v123-market-body,main>.page-width,main>section>.page-width){
  box-sizing:border-box!important;width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;
  padding-left:var(--pad)!important;padding-right:var(--pad)!important}
 html:root body .feature-hero-copy{padding-left:0!important;padding-right:0!important}
 html:root body :is(.catalog-filters,.taxonomy-sticky)>.page-width{width:auto!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
 html:root body .editorial-jumps{box-sizing:border-box!important;width:100%!important;padding-left:var(--pad)!important}
 html:root body .editorial-jumps>a:first-child{padding-left:0!important}
}
/* The market tape is a flex row. Its track is thousands of pixels wide, and the default flex min-width lets that widen the page. */
html:root body .car-ticker{max-width:100%;overflow:hidden}
html:root body .ticker-window{min-width:0;overflow:hidden}
/* Porsche pricing story: split hero, photo bleeds to the right edge. The title column was padded with --pad
   (and, below 1100, the band padding stacked on top of that), so the headline sat off the header and the body.
   The gutter is applied to the full-bleed band: --rc-gut uses 100% of its element, so it collapses to 56px
   on the narrow title column. */
@media (min-width:1100px){
 html:root body main.line-porsche-pricing .line-article-hero.pp-hero{box-sizing:border-box!important;width:100%!important;padding-top:0!important;padding-bottom:0!important;padding-left:var(--rc-gut)!important;padding-right:0!important;grid-template-columns:minmax(0,min(560px,42%)) minmax(0,1fr)!important}
 html:root body main.line-porsche-pricing .pp-hero>div{box-sizing:border-box!important;padding-top:48px!important;padding-bottom:48px!important;padding-left:0!important;padding-right:36px!important}
}
@media (max-width:1099px) and (min-width:901px){
 html:root body main.line-porsche-pricing .line-article-hero.pp-hero{padding-left:0!important;padding-right:0!important}
 html:root body main.line-porsche-pricing .pp-hero>div{box-sizing:border-box!important;padding-left:var(--pad)!important;padding-right:var(--pad)!important}
}

/* News index: the sticky filter bar's background and rules run to the viewport edges.
   --rc-gut is resolved against the bar, so it is not the library's gutter. 100vw breakout
   keeps the search and dropdowns on the same column (library gutter plus the bar's own --pad). */
@media (min-width:1100px){
 html:root body .journal-library>.journal-filters.rc-discovery-rail{
  box-sizing:border-box!important;width:100vw!important;max-width:100vw!important;
  margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;
  padding:12px calc(50vw - 50% + var(--pad))!important;
  background:#f1eee6!important;border-block:2px solid #17232b!important}
}
/* Search only. The bar is already a full-bleed sibling of the hero, so its paper, rule and
   shadow stay viewport-wide. The field, Era, Collection, Content and the count were still
   inset by --pad (56px max) while the hero and the results grid use --rc-gut: the 1280
   column from the 1440 layout, held at every wider width. Pad the controls with that gutter.
   Do not break this bar out to 100vw. It is not inside a guttered parent the way the Stories
   rail is, and a 100vw margin would slide the controls off the column. */
@media (min-width:1100px){
 html:root body .site-search>.search-discovery.rc-discovery-rail{
  box-sizing:border-box!important;width:100%!important;max-width:none!important;
  margin-left:0!important;margin-right:0!important;
  padding-left:var(--rc-gut)!important;padding-right:var(--rc-gut)!important}
}
/* Below 1100 the hero, this bar and the grid already share --pad, and the phone grid
   (max-width 700) already wraps Era and Collection with Content and the count on their
   own rows. Between those, the Content select's 150px minimum is wider than a wrapped
   label, so the control spills out of CONTENT and into the result count. Let it use the
   label width. Guides and Markets keep the 150px minimum. */
@media (max-width:1099px){
 html:root body .site-search>.search-discovery.rc-discovery-rail [data-search-type]{min-width:0!important;max-width:100%!important;width:100%!important}
}

/* Data pages: the first 40 sales are in the table. The pager and the no-JS remainder sit under it. */
html:root body .rc-sale-pager{display:flex;align-items:center;gap:16px;margin:14px 0 8px;font:600 13px/1.3 var(--sans,system-ui)}
html:root body .rc-sale-pager button{font:inherit;background:#17232b;color:#f1eee6;border:0;padding:8px 12px;cursor:pointer}
html:root body .rc-sale-pager button[disabled]{opacity:.4;cursor:default}
html:root body .rc-sale-more{margin:12px 0 20px}
html:root body .rc-sale-more>summary{cursor:pointer;font:700 14px/1.3 var(--sans,system-ui)}

/* Empty figures are sentences. They wrap inside the column instead of using the price face. */
html:root body .snapshot-six strong[data-empty],
html:root body .price-strip [data-price-ask][data-empty],
html:root body .price-strip [data-price-sold][data-empty],
html:root body .v123-strip strong[data-empty],
html:root body .v127-market .v123-strip strong[data-empty],
html:root body .v123-compare td strong.v127-no-price,
html:root body .v127-no-price,
html:root body .rc-figure-text,
html:root body .catalog-price strong.catalog-price-note,
html:root body .catalog-price strong[data-empty]{
  display:block !important;
  font:500 17px/1.35 var(--sans,system-ui) !important;
  letter-spacing:0 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:visible !important;
}
html:root body .snapshot-six>div,
html:root body .v123-strip>div,
html:root body .v123-compare td,
html:root body .catalog-price{min-width:0}
html:root body .v123-compare td small,
html:root body .catalog-price small{white-space:normal !important;overflow-wrap:anywhere}
html:root body .rc-unrecorded-banner,
html:root body .rc-geography-note{display:block;margin:6px 0 0;max-width:68ch;font:500 13px/1.4 var(--sans,system-ui) !important;letter-spacing:0 !important;white-space:normal !important;overflow-wrap:anywhere;color:#17232b}
/* An empty market-card price uses the full card width. The score stays with Read Guide, under the sentence. */
html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card:has(> .catalog-price strong:empty) > .catalog-price{grid-column:1 / -1 !important;grid-row:6 !important}
html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card:has(> .catalog-price strong:empty) > .catalog-price > span:first-child,
html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card:has(> .catalog-price strong:empty) > .catalog-price > small{white-space:normal !important;overflow-wrap:anywhere !important;max-width:100% !important}
html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card:has(> .catalog-price strong:empty) .catalog-tach{grid-row:8 !important;grid-column:2 !important;justify-self:end !important}
@media (max-width:900px){
  html:root body .price-strip .snapshot-six:has(strong[data-empty]),
  html:root body .v123-strip:has(strong[data-empty]){grid-template-columns:1fr !important}
  html:root body .price-strip .snapshot-six:has(strong[data-empty])>div,
  html:root body .v123-strip:has(strong[data-empty])>div{border-right:0 !important;grid-column:auto !important}
  html:root body .catalog-grid [data-catalog-card].catalog-card.catalog-card:has(> .catalog-price strong:empty) .catalog-tach{grid-column:1 / -1 !important;justify-self:start !important}
}

/* Other Alternatives: reserve the price block while a book's rows are still loading. */
html:root body .v127-comp-loading .v127-comp-prices,html:root body .v127-comp-error .v129-comp-error{min-height:4.6em}
html:root body .v127-comp-error button{font:inherit;margin-left:6px;background:#17232b;color:#f1eee6;border:0;padding:4px 8px;cursor:pointer}

/* Restomods story: the Alfaholics photo fills the existing hero panel. The grid and min-height stay. */
html:root body main.feature-dad .feature-hero-art.restomod-hero-photo{position:relative!important;display:block!important;padding:0!important;overflow:hidden;min-height:510px!important;background:#3a1212}
html:root body main.feature-dad .restomod-hero-photo>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover;object-position:58% 55%;margin:0!important;transform:none!important;filter:none!important}
html:root body main.feature-dad .restomod-hero-photo>.hand{position:absolute!important;right:clamp(12px,2.4vw,32px)!important;top:clamp(12px,2.4vw,32px)!important;bottom:auto!important;left:auto!important;margin:0!important;z-index:1;width:max-content;max-width:calc(100% - 24px);background:#fbfaf6;color:#2b2b2b;padding:4px 9px 3px;box-shadow:0 1px 3px rgba(30,30,30,.25);transform:rotate(2deg)!important}
@media(max-width:740px){
 html:root body main.feature-dad .feature-hero-art.restomod-hero-photo{min-height:0!important;aspect-ratio:3/2}
 html:root body main.feature-dad .restomod-hero-photo>img{object-position:62% 50%}
}