/**
 * SCROLL — SMACKONEOUT solo skin
 * The whole car is somebody else's problem.
 */

/*
 * SNAPSMACK_EOF_HEADER
 * Last non-empty line of this file MUST be the canonical CSS EOF
 * marker: slash-star, space, five equals, space, the literal string
 * 'SNAPSMACK EOF', space, five equals, space, star-slash.
 * (Authoritative byte sequence: tools/check-eof.py EOF_MARKERS['.css'].)
 * Missing or different = truncated/corrupted. Restore before saving.
 */

:root {
    --scroll-canvas-width: 1500px;
    /* Landing wall/header width as a PERCENTAGE of the window, so it adapts to
       any screen resolution instead of a fixed pixel cap. Admin: "Wall Width
       (% of window)". Header, browse-tools and wall all use this one value, so
       their left/right edges line up. */
    --scroll-canvas-pct: 90%;
    --scroll-row-height: 280px;
    --scroll-row-unit: 10px;
    --scroll-tile-gap: 0px;
    --scroll-title-angle: 18deg;
    --scroll-title-size: 6vw;
    --scroll-corner-radius: 0;
    --scroll-border-width: 0;
    --scroll-border-color: #fff;
    --scroll-bg: #ffffff;
    --scroll-text: #3a3a3a;
}

* { box-sizing: border-box; }
/* Reserve the scrollbar gutter so the wall's content width never changes when a
   vertical scrollbar appears. Without this, the justified engine sizes rows to
   the wider (no-scrollbar) width, the tall result adds a scrollbar, and every
   row ends up a hair too wide → the last tile wraps → ragged, under-filled rows
   that read as "not centred". Stable gutter = the engine measures once, right. */
html { overflow-y: scroll; scrollbar-gutter: stable; }
html, body { margin: 0; min-height: 100%; }
body {
    background: var(--scroll-bg);
    color: var(--scroll-text);
    font-family: "DM Sans", sans-serif;
}
a { color: inherit; }

.scroll-profile {
    position: relative;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(320px, 1.7fr) minmax(150px, 1fr);
    align-items: center;
    /* SAME width + centring as the wall, so the byline (left) and the nav icons
       (right) line up with the OUTSIDE edges of the photo grid. Horizontal
       padding is gone — the width does the insetting now. Vertical padding is
       EQUAL top and bottom so the space over the masthead matches the space
       under it. overflow:hidden stays for the tilted masthead. */
    width: var(--scroll-canvas-pct, 90%);
    margin: 0 auto;
    min-height: clamp(140px, 9vw, 200px);
    padding: clamp(18px, 2vw, 32px) 0;
    overflow: hidden;
}
.scroll-photographer {
    align-self: center;
    justify-self: start;
    font-size: .82rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.scroll-byline-prefix,
.scroll-byline-name {
    display: block;
}
/* Independent size controls for the two byline lines (admin: Byline Prefix Size
   / Photographer Name Size). Fall back to the block's .82rem if unset. */
.scroll-byline-prefix {
    font-size: var(--scroll-byline-prefix-size, .82rem);
}
.scroll-byline-name {
    margin-top: .32rem;
    font-weight: 700;
    font-size: var(--scroll-byline-name-size, .82rem);
}
.scroll-masthead {
    grid-column: 2;
    margin: 0;
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(2.75rem, var(--scroll-title-size), 7.5rem) !important;
    /* Render at the chosen font's OWN weight so it matches the admin font-picker
       preview. This must be set explicitly to `normal`: .scroll-masthead is an
       <h1>, whose default UA weight is bold (700), so merely dropping the old
       900 would still leave it bold. The default Archivo Black is already an
       ultra-black face and ignores this; a lighter picked font is no longer
       faux-bolded (which thickened/smeared any font lacking a real heavy cut). */
    font-weight: normal;
    line-height: .78;
    letter-spacing: -.06em;
    text-align: center;
    text-transform: none;   /* respect the case the owner typed (e.g. "Used Car Parts") */
    transform: rotate(calc(var(--scroll-title-angle) * -1));
}
.scroll-masthead span {
    display: block;
    white-space: nowrap;
}
.scroll-profile > .scroll-sticky-nav {
    grid-column: 3;
    justify-self: end;
    justify-content: flex-end;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    color: inherit;
}
.scroll-profile > .scroll-sticky-nav .ss-grid-nav-identity {
    display: none;
}
.scroll-profile > .scroll-sticky-nav .ss-grid-nav-link {
    /* On the landing masthead the nav sits on the page background, but the chip
       carries its own colour, so the glyph follows the dock icon colour rather
       than inheriting the page text colour. Always fully opaque. */
    color: var(--dock-icon, #1a1a1a) !important;
    opacity: 1 !important;
}
.scroll-profile > .scroll-sticky-nav .ss-grid-nav-link svg {
    display: block;
    opacity: 1;
}
.scroll-nav-search {
    position: relative;
}
.scroll-nav-search > summary {
    list-style: none;
    cursor: pointer;
}
.scroll-nav-search > summary::-webkit-details-marker {
    display: none;
}
.scroll-nav-search-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    right: 0;
    display: flex;
    width: min(360px, calc(100vw - 32px));
    padding: 8px;
    color: #181818;
    background: #fff;
    border: 1px solid currentColor;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.scroll-nav-search-panel input {
    min-width: 0;
    flex: 1;
    padding: 9px 10px;
    color: #181818;
    background: #fff;
    border: 1px solid #aaa;
    font: inherit;
}
.scroll-nav-search-panel button {
    padding: 0 12px;
    color: #fff;
    background: #181818;
    border: 0;
    font: 700 .72rem/1 "DM Sans", sans-serif;
    letter-spacing: .1em;
    cursor: pointer;
}
.scroll-profile > .scroll-sticky-nav.profile-hidden {
    /* FULL-WIDTH FIXED BAR. Pin all three edges and override the inline nav's
       grid-column:3 / justify-self:end — without the explicit left/right/width a
       position:fixed element shrinks to its content and parks in the corner it
       was in, which is the top-right pill this replaces.
       Background opacity is driven by --scroll-nav-alpha (admin: Sticky Bar
       Opacity); default 0.94. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: space-between;
    align-items: center;
    z-index: 9000;
    display: flex;
    padding: 8px clamp(16px, 4vw, 64px);
    color: inherit;
    background: rgba(255, 255, 255, var(--scroll-nav-alpha, .94));
    border-bottom: 1px solid rgba(0, 0, 0, .18);
    backdrop-filter: blur(14px);
}
.scroll-profile > .scroll-sticky-nav.profile-hidden .ss-grid-nav-identity {
    display: flex;
    margin-right: auto;   /* identity hard left; links + socials clump right */
}
/* Static / photo pages: the header is an ALWAYS-VISIBLE fixed bar (skin-header.php).
   Give it the same white bar + name-left / icons-right treatment as the landing's
   scrolled sticky bar, so every page shares one consistent header. */
.scroll-sticky-nav.ss-grid-nav-always-visible {
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, var(--scroll-nav-alpha, .94));
    border-bottom: 1px solid rgba(0, 0, 0, .18);
    backdrop-filter: blur(14px);
    color: inherit;
}
.scroll-sticky-nav.ss-grid-nav-always-visible .ss-grid-nav-identity {
    display: flex;
    margin-right: auto;   /* name hard left; links + socials clump right */
}

/* Optional sticky-bar logo (admin: Sticky Bar Logo). Lives in the identity slot,
   which only appears in the sticky bar — so the graphic never shows on the inline
   landing header. Sized to the bar height; replaces the text name when present. */
.scroll-nav-logo {
    display: block;
    height: 34px;
    width: auto;
    max-height: 40px;
    object-fit: contain;
}
.scroll-wall {
    width: var(--scroll-canvas-pct, 90%);
    margin: 0 auto;
    padding-bottom: 0;
}
.scroll-browse-tools {
    display: flex;
    align-items: center;
    gap: 22px;
    width: var(--scroll-canvas-pct, 90%);
    min-height: 0;
    /* the gap above the photos = the wall gutter, matching the spacing between
       photos rather than a big dead band */
    margin: 0 auto var(--ss-gap, 12px);
    padding-top: var(--ss-gap, 12px);
}
.scroll-browse-link,
.scroll-search-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-decoration: none;
    text-transform: uppercase;
}
/* ── Four-column photo wall. ss-engine-columns.js positions every tile
      absolutely: fixed columns, each photograph at its OWN aspect ratio, never
      cropped. Because every column is the same width, a 2:3 portrait covers
      2.25x the area of a 3:2 landscape with no special-casing — that ratio IS
      the portrait emphasis, so do not add a multiplier on top of it.

      The CSS owns the column count, the gutter and the tile chrome. The engine
      owns every pixel of geometry and writes left/top/width/height inline. If a
      property here would move or resize a tile, it does not belong in this
      file — `gap` in particular is arithmetic the engine performs, not a CSS
      property, so the container must NOT be a flex or grid box. ── */
.ss-masonry {
    --ss-cols: 4;              /* columns across. Four. */
    position: relative;
    display: block;
    width: 100%;
}
.ss-masonry-item {
    position: relative;
    display: block;
    overflow: hidden;
    border: var(--scroll-border-width) solid var(--scroll-border-color);
    border-radius: var(--scroll-corner-radius);
    background: #111;
}
.ss-masonry-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 180ms ease, opacity 180ms ease;
}
.scroll-item-title {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    padding: clamp(12px, 3vw, 32px);
    color: #fff;
    background: rgba(0, 0, 0, .62);
    font-size: clamp(.9rem, 1.5vw, 1.35rem);
    line-height: 1.2;
    text-align: center;
    text-wrap: balance;
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: none;
}
.ss-masonry-item:hover img,
.ss-masonry-item:focus-visible img { transform: scale(1.015); }
.ss-masonry-item:hover .scroll-item-title,
.ss-masonry-item:focus-visible .scroll-item-title { opacity: 1; }
.scroll-empty { padding: 15vh 0; text-align: center; }
/* Infinite-scroll tripwire — ss-engine-columns.js observes it and appends the
   next page into the wall. Near-zero height so it adds no visible gap. */
.scroll-wall-sentinel { height: 1px; width: 100%; }

.scroll-sticky-nav {
    color: inherit;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid rgba(0,0,0,.18);
    backdrop-filter: blur(14px);
}
.scroll-sticky-nav .ss-grid-nav-name {
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
/* ── Primary nav icons wear the SOCIAL DOCK chip. ───────────────────────────
   The social dock (core/social-dock.php + assets/css/ss-engine-social-dock.css)
   must look identical on every skin, so it is NOT restyled — the nav icons are
   restyled to match IT. Each nav icon becomes the same filled circular chip:
   the same --dock-* custom properties (with the dock's light-mode defaults as
   fallbacks, since the dock sets those variables only on its own element), the
   same 40px inline size, the same 20px glyph.

   ONE deliberate difference: the dock activates on hover (idle-translucent).
   This is PRIMARY navigation and is ALWAYS 100% visible — opacity is pinned to
   1 and there is no idle fade. Only the background/border deepen on hover. ── */
.scroll-sticky-nav .ss-grid-nav-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* SCROLL is a light skin, so the chip is a faint hairline ring with a dark
       line-art glyph — matching the social dock set to "Dark icons (for light
       sites)" + Outline. Reads the same --dock-* variables the dock uses, with
       light-site fallbacks, so nav and dock stay one family. */
    background: var(--dock-bg, transparent);
    border: 2px solid var(--dock-border, rgba(26, 26, 26, .3));
    color: var(--dock-icon, #1a1a1a);
    opacity: 1;
    transition: background .15s ease, border-color .15s ease;
}
.scroll-sticky-nav .ss-grid-nav-link:hover,
.scroll-sticky-nav .ss-grid-nav-link:focus-visible {
    background: var(--dock-bg-hover, rgba(255, 255, 255, .95));
    border-color: var(--dock-border-hover, rgba(26, 26, 26, .7));
}
.scroll-sticky-nav .ss-grid-nav-link svg { width: 20px; height: 20px; }
/* The floating dock pops 1.1x on hover; inline in the nav that enlarged edge
   icon gets clipped by the profile's overflow:hidden ("cut off on the right").
   The nav chips don't scale, so neither should the inline dock — drop the pop. */
.scroll-sticky-nav .social-dock-inline .dock-link:hover,
.scroll-sticky-nav .social-dock-inline .dock-link:focus-visible {
    transform: none;
}

.scroll-profile-compact {
    display: block;
    min-height: 0;
    padding: 0;
    overflow: visible;
}
.scroll-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: 72px;
    padding: 14px clamp(20px, 7vw, 120px);
    border-bottom: 1px solid rgba(255,255,255,.2);
}
.scroll-horizontal-title {
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(1.2rem, 2.4vw, 2rem);
    text-decoration: none;
}
.scroll-text-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.scroll-text-nav a { text-decoration: none; }
/* Solo/static header icon nav — icons only, matching the landing icon bar
   (overrides the .scroll-sticky-nav pill background/border it also carries). */
.scroll-solo-nav {
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    color: inherit;
}
.scroll-solo-nav .ss-grid-nav-links {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 24px);
}
.scroll-solo-nav .ss-grid-nav-link {
    display: flex;
    align-items: center;
    color: inherit;
}
.scroll-solo-nav .ss-grid-nav-link svg {
    display: block;
    width: 22px;
    height: 22px;
    stroke: currentColor;
}
.scroll-solo-nav .ss-grid-nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.scroll-solo-nav .scroll-nav-search { position: relative; }
.scroll-solo-nav .scroll-nav-search > summary { list-style: none; cursor: pointer; }
.scroll-solo-nav .scroll-nav-search > summary::-webkit-details-marker { display: none; }
.scroll-solo-stage {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 100dvh;
    overflow-x: hidden;
    background: inherit;
}
.scroll-solo-header {
    display: flex;
    flex: 0 0 80px;
    align-items: center;
    width: 100%;
    color: inherit;
    background: inherit;
}
.scroll-solo-header-inside {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(calc(100% - 48px), var(--scroll-canvas-width));
    margin: 0 auto;
}
.scroll-solo-header .site-title-text,
.scroll-solo-header .logo-area a {
    color: inherit;
    text-decoration: none;
}
.scroll-solo-header .nav-menu {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}
.scroll-solo-header .nav-menu a {
    color: inherit;
    text-decoration: none;
}
.scroll-solo-header .nav-menu .sep {
    padding: 0 14px;
    opacity: .45;
}
.scroll-solo-photobox {
    display: flex;
    flex: 1 0 calc(100dvh - 140px);
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    padding: 30px 30px 50px;
    overflow: hidden;
    background: inherit;
}
.scroll-photo-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: var(--scroll-canvas-width);
}
.scroll-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    cursor: zoom-in;
}
.scroll-infobox {
    display: flex;
    flex: 0 0 60px;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-block: 1px solid currentColor;
    background: inherit;
    opacity: .92;
}
.scroll-infobox .nav-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(calc(100% - 40px), 920px);
    margin: 0 auto;
    padding: 0;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.scroll-infobox .nav-links > .sep {
    display: none;
}
.scroll-infobox .nav-links a {
    text-decoration: none;
}
.scroll-infobox .nav-links .dim {
    opacity: .35;
}
.scroll-static-content {
    width: min(calc(100% - 40px), 920px);
    margin: 0 auto;
    padding: clamp(32px, 6vw, 90px) 0;
}
.scroll-static-content .post-image { max-width: 100%; height: auto; }
.scroll-solo-stage > #footer {
    display: none;
    width: 100%;
    padding: 52px 0;
    color: inherit;
    background: inherit;
    border-top: 1px solid currentColor;
}
.scroll-solo-stage .footer-pane,
.scroll-solo-stage .scroll-solo-title,
.scroll-solo-stage .description {
    width: min(calc(100% - 40px), 850px);
    margin-inline: auto;
}
.scroll-solo-title {
    margin-top: 0;
    margin-bottom: 34px;
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: .06em;
}
.scroll-solo-stage .description {
    line-height: 1.8;
}
/* GLOBAL system footer (landing + static pages). Without this the footer is
   only styled under .scroll-solo-stage (photo pages), so everywhere else it fell
   back to raw browser defaults — a cramped, left-aligned line. Centred, padded,
   letter-spaced and uppercased to match the site. Background and text colour are
   left to the "Footer Background" / "Footer Text" admin controls (which target
   #system-footer) and otherwise inherit the page. */
#system-footer {
    width: 100%;
    margin-top: 48px;
    padding: 34px 0;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, .12);
}
#system-footer .inside {
    width: min(calc(100% - 40px), var(--scroll-canvas-width, 1500px));
    margin: 0 auto;
}
#system-footer p {
    margin: 0;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1.9;
    text-transform: uppercase;
}
#system-footer a,
#system-footer .footer-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.scroll-solo-stage ~ #system-footer,
.scroll-solo-stage #system-footer {
    padding: 28px 20px;
    color: inherit;
    background: inherit;
    border-top: 1px solid currentColor;
    text-align: center;
}

@media (max-width: 760px) {
    .scroll-profile {
        grid-template-columns: 1fr;
        min-height: 58vh;
    }
    .scroll-masthead { grid-column: 1; font-size: clamp(3.6rem, 18vw, 7rem); }
    .scroll-photographer { grid-column: 1; justify-self: center; align-self: auto; }
    .scroll-profile > .scroll-sticky-nav {
        grid-column: 1;
        justify-content: center;
    }
    .scroll-browse-tools {
        align-items: stretch;
        flex-wrap: wrap;
        gap: 12px 18px;
        padding: 14px 0;
    }
    .scroll-search {
        flex-basis: 100%;
        margin-left: 0;
    }
    .scroll-search-input { flex: 1; width: auto; }
    .scroll-page-header { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-feature-item img,
    .scroll-item-title { transition: none; }
}
/* ===== SNAPSMACK EOF ===== */