/*
 * ericville26 — Art landing
 * =========================
 * Companion to page-art.php. Everything is scoped to `.ev26.art-landing` so it
 * cannot reach another surface, and every colour resolves through a token —
 * the old page carried TWO hardcoded slabs (a red intro plate and a near-black
 * carousel band) that ignored the light/dark toggle completely.
 * There is not one literal colour in this file.
 *
 * Vocabulary is deliberately the Lab/UX vocabulary, not a third dialect:
 *
 *   .art-open     ==  .lab-open       two-column opening, deck bottom-aligned
 *   .shead        ==  .shead          section rule + count (components layer)
 *   .art-group    ==  .lab-group      one browse group's rhythm
 *   .grid/.cell/.btn/.more/.num/.deck/.micro  all from v26-components.css
 *
 * What is new here and nowhere else:
 *
 *   .art-carousel the kept Slick carousel, re-skinned as a full-bleed wall
 *   .art-cap      its caption — the carousel's only label
 *   .art-thread   the origin timeline, a CORE list styled as a dated axis
 *   .art-venue    a place that carries the work
 *
 * Borders, deliberately sparse. This page has exactly two rules: the top
 * hairline of each .shead, and the single segmented hairline that IS the
 * timeline axis in .art-thread. Nothing else.
 *
 * SUBTRACTED 2026-08-11 (#1454, #1455). Three blocks of rules came out with
 * the markup they styled, and they are gone rather than commented out because
 * dead CSS on a page this short is the thing that makes the next person
 * hesitate:
 *   .art-say / .art-quote / .art-note   the artist statement band (#1454)
 *   .art-plates / .art-plate / .art-medium / .art-none   the works grid (#1454)
 *   .art-close and its inverse-button overrides            the CTA slab (#1455)
 * The carousel is now the works section (Eric), so .art-cap carries the label
 * that .shead used to.
 */

/* ── the editable flow ────────────────────────────────
 * page-art.php prints the_content() bare, NOT inside .wrap. That is what lets
 * the carousel bleed to the viewport edge without a 100vw / negative-margin
 * trick (which reliably produces a horizontal scrollbar once a scrollbar is
 * present). The prose blocks carry their own gutter instead.
 */
.ev26.art-landing .art-open,
.ev26.art-landing .art-cap,
.ev26.art-landing .art-thread{
  max-width:var(--col);margin-left:auto;margin-right:auto;
  padding-left:var(--gut);padding-right:var(--gut);
}
/* A classic (non-block) theme makes core/group emit an extra
   .wp-block-group__inner-container between the group and its children, so a
   grid laid on the group would have exactly one child and every child would
   stack. display:contents lifts the real children into the grid without asking
   Eric to keep a layout class on content he edits in Gutenberg. */
.ev26.art-landing .art-open > .wp-block-group__inner-container,
.ev26.art-landing .art-thread > .wp-block-group__inner-container{display:contents}

/* ── opening ──────────────────────────────────────────
 * Identical contract to .lab-open: 1.25fr .75fr, 56px gutter, deck bottom
 * aligned so it sits on the headline's last baseline. Same numbers on purpose
 * — a visitor moving between /lab/ and /art/ should feel one site.
 */
.ev26.art-landing .art-open{
  display:grid;grid-template-columns:1.25fr .75fr;column-gap:56px;
  padding-top:74px;padding-bottom:38px;align-items:end;margin-top:0;margin-bottom:0;
}
/* basetags.css carries `h1:not(.show){display:none}` at (0,1,1) — a real rule,
   not a reset — so anything less specific renders the headline invisible.
   (0,3,1) here clears it without bolting a .show class onto edited content.
   Dies with basetags in Stage 11. */
.ev26.art-landing .art-open h1{
  display:block;grid-column:1;grid-row:2;max-width:13ch;margin:0;color:var(--ink);
}
.ev26.art-landing .art-open .art-kind{
  grid-column:1;grid-row:1;margin:0 0 18px;
  display:flex;align-items:center;gap:12px;color:var(--accent);
}
.ev26.art-landing .art-open .art-kind::before{
  content:"";width:28px;height:2px;background:var(--accent);flex:0 0 28px;
}
.ev26.art-landing .art-open .deck{grid-column:2;grid-row:2;max-width:34ch;margin:0 0 10px}

/* ── the kept carousel ────────────────────────────────
 * Eric's explicit exception: everywhere else in this theme carousels are being
 * retired, Art keeps one. blocks/art-carousel/ is untouched — this only
 * re-skins what it emits, and every override below is undoing a hardcoded
 * value rather than adding decoration.
 *
 * What is being undone, and why each line is load-bearing:
 *   basetags `section.inverse` (0,1,1)  — a hardcoded near-black plate with a
 *     baked background-image, max-width:none!important and, above 900px,
 *     position:relative + top:-space-m + z-index:10. That negative-top overlap
 *     is what pulled the old red intro plate down ON TOP of the band.
 *   basetags `section{padding:var(--space-s) var(--page-gutter-l)}` — gutters
 *     on a band that must bleed.
 *   basetags `section.inverse > *` — caps the track at --container-max.
 *   blocks/art-carousel/style.css — background:var(--color-accent), a legacy
 *     token that resolves to the red.
 *   css/page-art.css — `.carousel .art-slide img{width:250px;height:250px}`,
 *     which pinned every print to 250px regardless of viewport.
 * All of it is out-specified rather than edited, because those files are not
 * this task's to change and two of them are shared with other surfaces.
 *
 * The ground is --paper, and the choice was made by looking at both themes.
 * These prints are mostly SOLID BLACK ink with cream cut into it, so they need
 * a wall that is lighter than the page in both modes:
 *   --ink     flips. Near-black wall in light mode, and the prints disappear
 *             into it. Rejected on sight.
 *   --sunken  flips the other way and is nearly the page colour in both themes
 *             (E7EBE7 vs F2F4F2 light, 0B0E0D vs 0F1211 dark) — a band you
 *             cannot see is ink carrying no information. Tried, rejected.
 *   --paper   is the only token that steps the SAME direction in both themes:
 *             lighter than --bg in light (FBFCFA) and lighter than --bg in
 *             dark (171B19). So the band always reads as one raised paper
 *             shelf, and a black print always has something to sit against.
 */
.ev26.art-landing .art-carousel{
  position:static;top:auto;z-index:auto;
  max-width:none;width:100%;margin:0;padding:38px 0 40px;
  background-color:var(--paper);background-image:none;
  color:var(--text);border-radius:0;opacity:1;
  overflow:hidden;
}
.ev26.art-landing .art-carousel > *{max-width:none;margin:0}
.ev26.art-landing .art-carousel .carousel{
  display:block;overflow:hidden;padding:0;gap:0;border-radius:0;
}
/* Before Slick initialises, .carousel is still the block's own flex row. Keep
   that state presentable — with JS off it degrades to a horizontally
   scrollable strip, which is a legitimate way to see eight pictures. */
.ev26.art-landing .art-carousel .carousel:not(.slick-initialized){
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
}
.ev26.art-landing .art-carousel .slick-track{display:flex;align-items:center}
.ev26.art-landing .art-carousel .slick-slide{height:auto}
.ev26.art-landing .art-carousel .art-slide{
  min-width:0;max-width:none;padding:0 7px;scroll-snap-align:start;
}
.ev26.art-landing .art-carousel .art-slide img{
  width:100%;height:clamp(230px,25vw,340px);object-fit:cover;
  border-radius:var(--r-s);box-shadow:none;
}
/* The block's own no-content fallback is a bare <p>. Give it the same quiet
   voice every other empty state on the site uses. */
.ev26.art-landing .art-carousel .carousel > p{
  margin:0;padding:0 var(--gut);font-size:var(--t-meta);color:var(--faint);
}
/* Caption under the band. Right-aligned so it reads as a plate label rather
   than as the start of the next paragraph. */
.ev26.art-landing .art-cap{
  margin:14px auto 0;font-size:var(--t-meta);color:var(--faint);text-align:right;
}

/* Reduced motion.
 * v26-base.css already sets `*{animation:none!important;transition:none!important}`
 * under prefers-reduced-motion. On its own that makes this carousel WORSE, not
 * better: Slick runs autoplaySpeed:0 / speed:5000, so killing the transition
 * turns a slow continuous glide into an instant slide-jump several times a
 * second — a strobe. page-art.php therefore pauses the instance in JS for those
 * users (see the footer script there); this rule holds the track still in the
 * meantime and covers the case where jQuery never loads. */
@media (prefers-reduced-motion:reduce){
  .ev26.art-landing .art-carousel .slick-track,
  .ev26.art-landing .art-carousel .slick-slide{transition:none!important;animation:none!important}
}

/* ── origin thread ────────────────────────────────────
 * A CORE list block, styled as a dated axis. Five steps, five columns, one
 * hairline running across the top of the row: the rule is the timeline, which
 * is the one border on this page that carries information.
 *
 * The year is a <strong> inside each list item — plain Gutenberg bold — so the
 * whole timeline stays editable with no custom block and no shortcode.
 */
/* padding-top used to be 8px because .art-say sat directly above and closed
   with 58px of its own. With the statement gone (#1454) the timeline follows
   the carousel caption, so it has to own that space itself. */
.ev26.art-landing .art-thread{padding-top:58px;padding-bottom:60px;margin-top:0;margin-bottom:0}
/* The timeline's heading is a section header like any other, so its type comes
   from the shared rung in v26-components.css, which names .art-thread beside
   .shead. Only the space under it is this section's business. */
.ev26.art-landing .art-thread h2{margin-bottom:22px}
.ev26.art-landing .art-thread ul,
.ev26.art-landing .art-thread ol{
  list-style:none;display:grid;grid-template-columns:repeat(5,1fr);
  gap:0 26px;margin:0;padding:0;
}
.ev26.art-landing .art-thread li{
  margin:0;padding:16px 0 0;border-top:1px solid var(--line);
  font-size:var(--t-meta);line-height:1.5;color:var(--muted);text-wrap:pretty;
}
.ev26.art-landing .art-thread li strong{
  display:block;font-family:var(--sans);font-size:var(--t-label);font-weight:700;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--accent);
  margin:0 0 9px;
}

/* ── groups ───────────────────────────────────────────
 * Same rhythm as .lab-group. basetags puts padding and --space-xl margins on
 * every <section>; the rhythm is owned here, so both are reset rather than
 * fought. scroll-margin-top clears the sticky glass header on a jump.
 */
.ev26.art-landing .art-group{margin:0 0 58px;padding:0;scroll-margin-top:96px}
.ev26.art-landing .art-group .grid{margin:0}
/* The outline here is h1 > h2 (group) > h4 (item). This file used to restate
   the group header's type against h2 because the component was written against
   h3; the component now takes both tags from --shead-* and clears basetags'
   legacy accent colour itself, so the promote rule is gone (#1450). */
.ev26.art-landing .art-lede{
  margin:-8px 0 22px;font-size:var(--t-body);line-height:1.55;color:var(--muted);max-width:56ch;
}

/* ── where to find it ─────────────────────────────────
 * Two galleries and the shop. Only the shop is a link, so only the shop gets
 * link behaviour — a hover state on a row that does not respond to a click is
 * a lie the reader only finds out about after clicking.
 */
.ev26.art-landing .art-venues{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ev26.art-landing .art-venue{
  display:block;padding:18px 20px;border-radius:var(--r-m);position:relative;
  transition:background var(--med) var(--ease);
}
.ev26.art-landing .art-venue h4{margin:0 0 4px;color:var(--ink);transition:color var(--fast) var(--ease)}
.ev26.art-landing .art-venue p{margin:0;font-size:var(--t-meta);line-height:1.45;color:var(--faint)}
.ev26.art-landing a.art-venue::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  border-radius:var(--r-m) var(--r-m) 0 0;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform var(--med) var(--ease);
}
.ev26.art-landing a.art-venue:hover{background:var(--paper)}
.ev26.art-landing a.art-venue:hover::after{transform:scaleX(1)}
.ev26.art-landing a.art-venue:hover h4{color:var(--accent)}
.ev26.art-landing a.art-venue:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── the last section ─────────────────────────────────
 * "Where to find it" is now the final thing on the page: the closing CTA slab
 * that used to sit under it is gone (#1455). .art-group's 58px bottom margin
 * was spacing between groups; as a page-ending margin it reads as a hole above
 * the footer rule, so the last group closes tighter.
 */
.ev26.art-landing .art-group:last-of-type{margin-bottom:26px}

/* ── responsive: 1440 / 1024 / 768 / 375 ──────────────
 * 1440 and 1024 both run the full layout — the content column caps at 1120px,
 * so a 1024 viewport only loses gutter.
 */
@media (max-width:1000px){
  .ev26.art-landing .art-open{grid-template-columns:1fr;padding-top:58px;padding-bottom:30px}
  .ev26.art-landing .art-open h1{grid-column:1;grid-row:2;max-width:16ch}
  .ev26.art-landing .art-open .deck{grid-column:1;grid-row:3;max-width:52ch;margin:20px 0 0}
  .ev26.art-landing .art-thread{padding-top:50px}
  /* Five steps do not fold into four or three without an orphan. Three then
     two is the only pair of rows that reads as one axis broken once. */
  .ev26.art-landing .art-thread ul,
  .ev26.art-landing .art-thread ol{grid-template-columns:repeat(3,1fr);gap:22px 26px}
}
@media (max-width:900px){
  .ev26.art-landing .art-venues{grid-template-columns:1fr}
  .ev26.art-landing .art-group{margin-bottom:48px}
  .ev26.art-landing .art-group:last-of-type{margin-bottom:20px}
}
@media (max-width:600px){
  .ev26.art-landing .art-open{padding-top:40px;padding-bottom:24px}
  .ev26.art-landing .art-open h1{max-width:none}
  .ev26.art-landing .art-carousel{padding:28px 0 30px}
  .ev26.art-landing .art-cap{text-align:left}
  .ev26.art-landing .art-thread{padding-top:42px;padding-bottom:48px}
  .ev26.art-landing .art-thread ul,
  .ev26.art-landing .art-thread ol{grid-template-columns:1fr;gap:16px}
}