/* ==========================================================================
   LoomReach redesign 2026 · Direction E "Showroom" · Work page
   Loads after site.css and reuses its stage room, sand gallery, case card
   (.lr-case, .lr-case__media, .lr-chip), ceramic nodes on an ink rod
   (.lr-part__node) and the coral closing room. Each entry is an exhibit:
   the object on its plinth, then a placard with the labelled slots.
   ========================================================================== */

/* ---------- Page head: the copy, and a shelf of work ---------- */
/* stage padding and copy rhythm come from the shared page head (site.css): the H1 lands where it does
   on every inner page. The right column is the page's exhibit: three case covers in one display case. */
.lr-wkh__grid { display: grid; gap: 24px; align-items: start; }
.lr-wkh__copy { display: grid; justify-items: start; gap: var(--lr-copy-gap); max-width: 660px; min-width: 0; }
.lr-wkh__copy .lr-lead { max-width: 32em; }
.lr-wkh__sectors, .lr-wkh__ref { max-width: 36em; font-size: .9375rem; line-height: 1.5; color: var(--lr-ink-2); text-wrap: pretty; }
.lr-wkh__sectors { padding-top: 14px; border-top: 1px solid rgba(17, 18, 22, .16); }
.lr-wkh__ref { font-weight: 600; color: var(--lr-ink); }

/* The shelf of work: one sand display case (the ground of the C case renders), so the opaque renders
   stand in it without a box; each is feathered into the case. The portal cover (a transparent object)
   stands on the same floor with a contact shadow. */
.lr-wkshelf {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, .72fr);
  align-items: end; width: 100%; max-width: 600px; margin-inline: auto; padding: 5% 1% 6%;
  border-radius: var(--lr-r-xl); overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #F6F5F1 0%, #F2F0EB 62%, #EBE7DF 100%);
  box-shadow: 0 30px 60px -36px rgba(17, 18, 22, .35);
}
.lr-wkshelf::before { /* back-wall light */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 55% at 50% 22%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 72%);
}
.lr-wkshelf::after { /* the shelf edge the three covers stand on */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12%; z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, .7) 2px, #E9E5DC 2px, #E2DDD3 100%);
}
.lr-wkshelf__item { position: relative; min-width: 0; }
.lr-wkshelf__item picture { display: block; }
.lr-wkshelf__item img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
}
.lr-wkshelf__item--l { margin-right: -12%; margin-bottom: 2%; }
.lr-wkshelf__item--c { z-index: 1; margin-bottom: -3%; transform: scale(1.12); transform-origin: 50% 80%; }
.lr-wkshelf__item--r { margin-left: -2%; margin-right: 3%; margin-bottom: 10%; }
.lr-wkshelf__item--r img { aspect-ratio: auto; object-fit: contain; -webkit-mask-image: none; mask-image: none; }
.lr-wkshelf__item--r::after { /* contact shadow under the transparent portal */
  content: ""; position: absolute; left: 50%; bottom: 4%; width: 64%; height: 10%; z-index: -1;
  background: var(--lr-obj-floor); transform: translateX(-50%);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lr-wkshelf__item picture { transition: transform var(--lr-dur-3) var(--lr-ease); }
  .lr-wkshelf:hover .lr-wkshelf__item--c picture { transform: translateY(-6px); }
}
@media (max-width: 599px) {
  .lr-wkshelf { padding: 4% 2% 6%; border-radius: 22px; }
}
@media (min-width: 1024px) {
  .lr-wkh__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 64px); }
  .lr-wkshelf { align-self: end; }
}

/* ---------- The gallery ---------- */
.lr-gallery { padding-block: clamp(28px, 4vw, 56px) clamp(40px, 5vw, 72px); }
[data-filtered] { display: none !important; }
.lr-filter { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3vw, 36px); }
.js .lr-filter { display: flex; }
.lr-filter__chip {
  min-height: 40px; padding: 0 16px; border: 1.5px solid var(--lr-line-strong); border-radius: var(--lr-r-pill);
  background: #FFFFFF; color: var(--lr-ink); font-weight: 600; font-size: .9375rem; cursor: pointer;
}
.lr-filter__chip:hover { border-color: var(--lr-ink); }
@media (max-width: 599px) {
  .lr-filter { gap: 6px; }
  .lr-filter__chip { min-height: 36px; padding: 0 12px; font-size: .875rem; }
}
.lr-filter__chip[aria-pressed="true"] { background: var(--lr-ink); border-color: var(--lr-ink); color: #FBFAF7; }

/* Groups: one client's systems, or our own work */
.lr-wgroup { scroll-margin-top: 80px; }
.lr-wgroup__head { display: grid; justify-items: start; gap: 14px; max-width: 46rem; margin-bottom: 24px; }
.lr-wgroup__title {
  font-size: var(--lr-fs-h2); font-weight: 600; font-stretch: 104%;
  line-height: 1.08; letter-spacing: -.025em; text-wrap: balance;
}
.lr-wgroup__text { font-size: var(--lr-fs-lead); line-height: 1.45; color: var(--lr-ink-2); text-wrap: pretty; }
.lr-entries, .lr-wgroup--own { margin-top: clamp(40px, 5vw, 72px); }
.lr-entries, .lr-wgroup__own { display: grid; gap: 20px; }

/* Three systems for one client: a sequence, so ceramic nodes on one ink rod in the gutter */
.lr-wgroup__list { display: grid; gap: 20px; }
/* a page-level sequence: 32 px nodes on phones, 56 px from 860 px, the rod from node to node */
.lr-wgroup__item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; min-width: 0; }
.lr-wgroup__node.lr-part__node { grid-row: auto; position: relative; z-index: 1; width: 32px; height: 32px; margin: 22px 0 0; font-size: .875rem; }
.lr-wgroup__item:not(:last-child)::after {
  content: ""; position: absolute; left: 15px; top: 54px; bottom: -42px; width: 2px; border-radius: 1px; background: var(--lr-ink);
}
/* a filter that leaves only some of the three systems: plain spheres, no numbers, no rod */
.lr-wgroup.is-partial .lr-wgroup__item::after { display: none; }
.lr-wgroup.is-partial .lr-wgroup__node { font-size: 0; }
/* the first block on show sits right under the filter chips */
.lr-gallery .is-first { margin-top: 0; }
@media (min-width: 860px) {
  .lr-wgroup__item { grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; }
  .lr-wgroup__node.lr-part__node { width: 56px; height: 56px; margin: 30px 0 0; font-size: 1.375rem; border-width: 2px; }
  .lr-wgroup__item:not(:last-child)::after { left: 26px; top: 86px; bottom: -50px; width: 4px; border-radius: 2px; }
}

/* ---------- One entry: the exhibit, its placard and its label ----------
   DOM order: cover, placard (status, title, what it does, how it's built), label (role, stack, size).
   From 1280 px the cover and its label share the left column and the placard takes the right one,
   so neither column runs on alone; below that they stack. */
.lr-entry { display: grid; min-width: 0; scroll-margin-top: 80px; }
/* every cover on the one sand plinth (site.css .lr-case__media): the C render whole, its edge feathered */
.lr-entry__media { aspect-ratio: 16 / 10; }
.lr-entry__media picture { position: absolute; inset: 0; }
.lr-entry__media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
/* a transparent service object on the same sand plinth, with its contact shadow */
.lr-entry__media--plinth { display: grid; place-items: center; }
.lr-entry__media--plinth::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 60% at 50% 34%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 70%);
}
.lr-entry__media--plinth picture { position: relative; inset: auto; z-index: 1; width: auto; height: 82%; max-width: 300px; aspect-ratio: 1; }
.lr-entry__media--plinth picture::after { /* contact shadow tied to the object */
  content: ""; position: absolute; left: 50%; bottom: 7%; width: 62%; height: 12%; z-index: -1;
  background: var(--lr-obj-floor); transform: translateX(-50%);
}
.lr-entry__media--plinth img { object-fit: contain; }

.lr-entry__body { display: grid; gap: 14px; align-content: start; min-width: 0; padding: 20px 14px 4px; }
.lr-entry__label { display: grid; gap: 14px; align-content: start; min-width: 0; padding: 4px 14px 14px; }
.lr-entry__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lr-chip__dot--done { background: var(--lr-sky); }
.lr-chip--own { background: var(--lr-peach-tint); border-color: rgba(17, 18, 22, .12); }
.lr-entry__sector { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.lr-entry__k, .lr-entry__slot dt, .lr-entry__row dt {
  font-family: var(--lr-font-mono); font-size: .75rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--lr-muted);
}
.lr-entry__title {
  font-size: var(--lr-fs-big); font-weight: 600; font-stretch: 103%;
  line-height: 1.1; letter-spacing: -.02em; text-wrap: balance;
}
.lr-entry__slots { display: grid; gap: 16px; margin-top: 2px; }
.lr-entry__slot dt { margin-bottom: 6px; }
.lr-entry__slot dd { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--lr-ink-2); text-wrap: pretty; }
.lr-entry__slot--does dd { font-size: 1.125rem; line-height: 1.5; font-weight: 500; color: var(--lr-ink); }

/* "How it's built": a real disclosure at every width. Phones start closed (status, title, what it does,
   role and stack first); from 768 px it starts open. site.js [data-fold]. */
.lr-entry__how { min-width: 0; }
.lr-entry__sum { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; }
.lr-entry__sum::-webkit-details-marker { display: none; }
.lr-entry__sum::after { /* plus, turning into minus when open */
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--lr-ink);
  background:
    linear-gradient(var(--lr-ink), var(--lr-ink)) center / 9px 2px no-repeat,
    linear-gradient(var(--lr-ink), var(--lr-ink)) center / 2px 9px no-repeat,
    var(--lr-surface);
}
.lr-entry__how[open] .lr-entry__sum::after { background: linear-gradient(var(--lr-ink), var(--lr-ink)) center / 9px 2px no-repeat, var(--lr-surface); }
.lr-entry__sum:hover .lr-entry__k { color: var(--lr-ink); }
.lr-entry__how-body { display: grid; gap: 4px; }
.lr-entry__how-body > p { font-size: 1rem; line-height: 1.55; color: var(--lr-ink-2); text-wrap: pretty; }
@media (max-width: 767px) {
  .lr-entry__sum { min-height: 48px; border-block: 1.5px dashed var(--lr-line); justify-content: space-between; }
  .lr-entry__sum .lr-entry__k { color: var(--lr-ink); }
  .lr-entry__sum::after { width: 28px; height: 28px; }
  .lr-entry__how[open] .lr-entry__sum { border-bottom-color: transparent; }
}
@media (min-width: 768px) {
  .lr-entry__sum { min-height: 24px; margin-bottom: 6px; }
}

.lr-entry__meta { display: grid; border-top: 1px solid var(--lr-line); }
.lr-entry__row { display: grid; gap: 4px; padding-block: 12px; border-bottom: 1px solid var(--lr-line); }
.lr-entry__row dd { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--lr-ink); }
.lr-size { display: flex; flex-wrap: wrap; gap: 6px; }
.lr-size li { padding: 3px 10px; border-radius: var(--lr-r-pill); background: var(--lr-sand); font-size: .875rem; font-weight: 600; line-height: 1.45; }
/* same client: the plug glyph, a rod and its bead, says "connected to the one above" */
.lr-entry__same { display: flex; align-items: center; gap: 10px; font-size: .9375rem; line-height: 1.45; color: var(--lr-ink-2); }
.lr-entry__same::before {
  content: ""; flex: none; width: 22px; height: 10px;
  background:
    radial-gradient(circle, var(--lr-ink) 0 3.5px, transparent 4px) left center / 10px 10px no-repeat,
    linear-gradient(var(--lr-ink), var(--lr-ink)) center / 12px 2px no-repeat,
    radial-gradient(circle, var(--lr-ink) 0 3.5px, transparent 4px) right center / 10px 10px no-repeat;
}
@media (min-width: 600px) {
  .lr-entry__body { padding: 24px 20px 6px; }
  .lr-entry__label { padding: 6px 20px 18px; }
  .lr-entry__row { grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: baseline; }
}
@media (min-width: 600px) and (max-width: 1279px) {
  .lr-entry__media { aspect-ratio: 16 / 8; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .lr-entry__body { padding: 28px 32px 8px; }
  .lr-entry__label { padding: 8px 32px 24px; }
}
@media (min-width: 1280px) {
  .lr-entry {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr;
    grid-template-areas: "media body" "label body"; align-items: start;
  }
  .lr-entry__media { grid-area: media; aspect-ratio: 4 / 3; }
  .lr-entry__body { grid-area: body; padding: 30px 32px 26px 40px; }
  .lr-entry__label { grid-area: label; padding: 18px 12px 12px; }
  .lr-entry__row { grid-template-columns: 112px minmax(0, 1fr); }
  /* an entry without a flow drawing has a short placard: its label moves under the placard and the cover
     stands on a plinth as tall as both, so neither column ends with an empty band */
  .lr-entry:not(:has(.lr-wflow)):not(.lr-entry--tools):not(.lr-entry--slot) { grid-template-areas: "media body" "media label"; grid-template-rows: auto 1fr; }
  .lr-entry:not(:has(.lr-wflow)):not(.lr-entry--tools):not(.lr-entry--slot) .lr-entry__media { aspect-ratio: auto; align-self: stretch; min-height: 340px; }
  .lr-entry:not(:has(.lr-wflow)):not(.lr-entry--tools):not(.lr-entry--slot) .lr-entry__label { padding: 0 32px 24px 40px; }
}

/* ---------- How it fits together: a drawn flow under "How it's built" ----------
   The diagram language of the site (ink-outlined boxes, ink rods with an arrowhead, mono notes), built in
   HTML as an ordered list. It never wraps a node onto a line of its own: phones and the narrow placard
   column stack it (down arrows); where the placard is wide enough it is one row whose boxes share the width. */
.lr-wflow { margin: 14px 0 2px; padding: 16px; border-radius: var(--lr-r-m); background: #F7F5F1; }
.lr-wflow__list { display: grid; justify-items: start; row-gap: 22px; }
.lr-wflow__node {
  position: relative; display: grid; align-content: center; gap: 1px; min-width: 0; padding: 7px 11px; border-radius: 10px;
  background: #FFFFFF; border: 1.5px solid var(--lr-ink);
  font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--lr-ink); overflow-wrap: break-word;
}
.lr-wflow__node--key { background: var(--lr-mint-tint); }
.lr-wflow__sub { font-family: var(--lr-font-mono); font-size: .8125rem; font-weight: 400; letter-spacing: 0; line-height: 1.35; color: var(--lr-ink-2); }
/* stacked: a short rod down into each box after the first, with its arrowhead */
.lr-wflow__list > li + li::after {
  content: ""; position: absolute; left: 20px; top: -20px; width: 2px; height: 14px; background: var(--lr-ink);
}
.lr-wflow__list > li + li::before {
  content: ""; position: absolute; left: 16.5px; top: -8px; width: 0; height: 0;
  border-top: 6px solid var(--lr-ink); border-left: 4.5px solid transparent; border-right: 4.5px solid transparent;
}
@media (min-width: 768px) and (max-width: 1279px), (min-width: 1440px) {
  .lr-wflow__list { display: flex; flex-wrap: nowrap; align-items: stretch; }
  .lr-wflow__node { flex: 1 1 auto; min-width: min-content; }
  .lr-wflow__list > li + li { margin-left: 26px; }
  .lr-wflow__list > li + li::after { left: -23px; top: 50%; width: 17px; height: 2px; transform: translateY(-50%); }
  .lr-wflow__list > li + li::before {
    left: -8px; top: 50%; transform: translateY(-50%);
    border-left: 6px solid var(--lr-ink); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; border-right: 0;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .lr-wflow__node { padding: 6px 9px; font-size: .8125rem; }
}
.lr-wflow__note {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(17, 18, 22, .25);
  font-family: var(--lr-font-mono); font-size: .75rem; line-height: 1.45; color: var(--lr-ink);
}
.lr-wflow__note::before { /* a looping arrow: something that repeats */
  content: ""; flex: none; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 6 A5 5 0 1 0 13 9.5' fill='none' stroke='%23111216' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M9.6 5.8 H12.8 V2.6' fill='none' stroke='%23111216' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* Our own tools: a short placard beside its exhibit (the same 4:3 plinth as the other entries) */
.lr-tools li { font-size: 1rem; line-height: 1.55; color: var(--lr-ink-2); }
.lr-tools__name { font-weight: 650; color: var(--lr-ink); }
@media (min-width: 1280px) {
  /* two short lines: a lower plinth beside them, both from the top, so the card ends where its text ends */
  .lr-entry--tools { grid-template-areas: "media body"; grid-template-rows: auto; align-items: start; }
  .lr-entry--tools .lr-entry__media { aspect-ratio: auto; height: 260px; }
  .lr-entry--tools .lr-entry__body { padding-top: 26px; }
}

/* Smaller work: one line, no object */
.lr-smaller { display: grid; gap: 8px; padding: 20px 22px; border-radius: var(--lr-r-l); background: var(--lr-surface); border: 1px solid var(--lr-line); }
.lr-smaller__label { font-family: var(--lr-font-mono); font-size: .75rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--lr-muted); }
.lr-smaller__text { font-size: 1rem; line-height: 1.55; font-weight: 500; }
@media (min-width: 860px) {
  .lr-smaller { grid-template-columns: 180px minmax(0, 1fr); align-items: baseline; gap: 20px; padding: 22px 28px; }
}

/* Case study slot: the same placard, no object and no sizes */
.lr-entry--slot { margin-top: 20px; }
.lr-entry--slot .lr-entry__body { gap: 12px; }
.lr-entry__slot-copy { display: grid; gap: 14px; }
.lr-entry__slot-text { font-size: 1.0625rem; line-height: 1.55; color: var(--lr-ink-2); max-width: 40em; text-wrap: pretty; }
@media (min-width: 1024px) {
  .lr-entry--slot { grid-template-columns: minmax(0, 1fr); }
  .lr-entry--slot .lr-entry__body {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px; align-items: start; padding: 28px 36px 30px;
  }
  .lr-entry--slot .lr-entry__chips, .lr-entry--slot .lr-entry__title { grid-column: 1; }
  .lr-entry__slot-copy { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* the note that explains every "Size" row, once, under the grid */
.lr-gallery__note { display: flex; align-items: center; gap: 10px; margin-top: clamp(24px, 3vw, 40px); padding-top: 18px; border-top: 1px solid var(--lr-line); font-size: .9375rem; line-height: 1.45; color: var(--lr-muted); }
.lr-gallery__note svg { flex: none; }

/* ---------- WK3-12 · How we describe our work ---------- */
.lr-describe__grid { display: grid; gap: 20px; }
.lr-describe__body { display: grid; gap: 14px; max-width: 40em; }
.lr-describe__body p { font-size: var(--lr-fs-lead); line-height: 1.5; color: var(--lr-ink-2); text-wrap: pretty; }
.lr-describe__body .lr-describe__link { font-size: 1rem; margin-top: 6px; }
@media (min-width: 1024px) {
  .lr-describe__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--lr-gap); }
}

/* ---------- WK3-13 · Closing call to action ---------- */
.lr-wkclose { margin-top: 0; }