/* ==========================================================================
   LoomReach · Direction E "Showroom" · About page (about.html)
   Loaded after site.css. Reuses the stage, rooms, plinths, spheres (sequences and tokens)
   and mono chips (indices) from site.css; only what the page adds lives here.
   Saturation: rooms are tints (peach, sky, mint); full coral only in the closing CTA.
   ========================================================================== */

/* ---------- AB3-00 · Page head: peach-to-mint stage ---------- */
.lr-stage--about {
  background:
    radial-gradient(52% 72% at 76% 62%, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(112deg, #FFDCCB 0%, #FFEDE4 36%, #E7F8F1 66%, #C6F3E2 100%);
}
/* About has no side rail, so the "On this page" chips stay visible at every width */
@media (min-width: 1200px) { .lr-about-head .lr-otp { display: block; } }
/* the chips are counted by CSS, so a line the public build leaves out (References, R1b) leaves no gap */
.lr-otp__list--count { counter-reset: otp; }
.lr-otp__list--count li:not([hidden]) { counter-increment: otp; }
.lr-otp__list--count .lr-otp__n::before { content: counter(otp, decimal-leading-zero); }
.lr-about-head .lr-hero__scene { align-self: end; }

/* Three exhibits on stepped ceramic plinths. Sizes are in container units, so the group
   keeps its proportions from 360 px to 1920 px. --foot is the empty band under each render. */
.lr-plinths {
  container-type: inline-size;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; column-gap: 2cqw;
  width: 100%; max-width: 600px; margin-inline: auto; padding: 4px 0 10px;
}
.lr-plinths__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); --top: 3.2cqw; }
.lr-plinths__item--l { --w: 37cqw; --h: 17cqw; --foot: .08; }
.lr-plinths__item--c { --w: 49cqw; --h: 27cqw; --foot: .25; }
.lr-plinths__item--r { --w: 35cqw; --h: 10cqw; --foot: .13; }
.lr-plinths__item::after { /* soft floor shadow under each plinth */
  content: ""; position: absolute; z-index: 0; left: -10%; right: -10%; bottom: calc(var(--top) * -1.3); height: calc(var(--top) * 2.6);
  background: radial-gradient(closest-side, rgba(17, 18, 22, .2), rgba(17, 18, 22, 0));
}
.lr-plinths__obj {
  position: relative; z-index: 2; width: var(--w); max-width: none;
  margin-inline: calc((100% - var(--w)) / 2); /* centred over its plinth even when wider than the column */
  margin-bottom: calc(var(--w) * var(--foot) * -1 - var(--top) * .5);
}
.lr-plinths__obj img { width: 100%; height: auto; }
.lr-plinths__block {
  position: relative; z-index: 1; display: block; width: 100%; height: var(--h);
  background: linear-gradient(90deg, #E4DFD6 0%, #F6F3EE 26%, #FFFFFF 47%, #F4F1EB 72%, #DCD7CD 100%);
  border-radius: 0 0 50% 50% / 0 0 var(--top) var(--top);
}
.lr-plinths__block::before { /* the top face */
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--top) * -1); height: calc(var(--top) * 2); border-radius: 50%;
  background: radial-gradient(64% 70% at 44% 38%, #FFFFFF 0%, #F7F5F1 62%, #EAE6DE 100%);
  box-shadow: inset 0 -1px 2px rgba(17, 18, 22, .1);
}
.lr-plinths__block::after { /* contact shadow where the object stands */
  content: ""; position: absolute; left: 50%; top: calc(var(--top) * -.62); width: 62%; height: calc(var(--top) * 1.15);
  background: var(--lr-obj-floor); transform: translateX(-50%);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lr-plinths__obj { transition: transform var(--lr-dur-3) var(--lr-ease); }
  .lr-plinths__item:hover .lr-plinths__obj { transform: translateY(-6px); }
}
@media (max-width: 859px) {
  .lr-about-head .lr-hero__scene { margin-top: 8px; }
  .lr-plinths { max-width: 480px; }
}

/* ---------- AB3-01 · Who we are: heading left, prose right ---------- */
.lr-split { display: grid; gap: 20px; }
.lr-split__body { display: grid; gap: 16px; max-width: 40em; }
.lr-split__body p:not(.lr-lead) { color: var(--lr-ink-2); }
.lr-split__more { margin-top: 6px; }
@media (min-width: 1024px) {
  .lr-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--lr-gap); }
}

/* ---------- Founder (AB3-02): the empty photo frame (.lr-photo, site.css) until a real photo arrives ---------- */
.lr-founder--page { display: grid; gap: 28px; align-items: center; }
.lr-founder__media { width: 100%; max-width: 380px; }
.lr-founder--page .lr-photo__label { font-size: .8125rem; }
.lr-founder__body { display: grid; gap: 18px; justify-items: start; max-width: 36em; }
.lr-founder__id { display: grid; gap: 4px; padding-top: 18px; border-top: 1px solid var(--lr-line); width: 100%; }
.lr-founder__name { font-size: clamp(1.5rem, 1.25rem + .9vw, 2.125rem); font-weight: 600; font-stretch: 103%; line-height: 1.1; letter-spacing: -.02em; }
.lr-founder__role { font-family: var(--lr-font-mono); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lr-muted); }
.lr-founder__bio { font-size: var(--lr-fs-lead); line-height: 1.45; color: var(--lr-ink-2); }
.lr-founder__link .lr-link--arrow { color: var(--lr-ink); }
@media (max-width: 599px) {
  .lr-founder__media { max-width: 260px; }
}
@media (min-width: 600px) {
  .lr-founder--page { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(24px, 5vw, 80px); }
}
/* the same 5/6 split and gap as "Who we are", so the founder's heading starts on the page's text line */
@media (min-width: 1024px) {
  .lr-founder--page { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--lr-gap); }
  .lr-founder__media { max-width: 420px; }
}

/* ---------- AB3-03 · How we work with you: rows on hairlines (unordered: the coral tick, no numbers), no cards ---------- */
.lr-head--single { margin-bottom: clamp(28px, 3.5vw, 44px); }
.lr-withyou-grid { display: grid; gap: 24px; }
.lr-withyou__head { display: grid; gap: 4px; align-content: start; }
.lr-withyou__head .lr-more { margin-top: 12px; }
.lr-withyou { display: grid; border-top: 2px solid var(--lr-ink); }
.lr-withyou__item {
  display: grid; row-gap: 4px; align-content: start;
  padding-block: 18px; border-bottom: 1px solid var(--lr-line);
}
.lr-withyou__more { margin-top: 4px; }
.lr-withyou__title { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.lr-withyou__item p { font-size: 1rem; line-height: 1.55; color: var(--lr-ink-2); text-wrap: pretty; }
@media (min-width: 860px) and (max-width: 1023px) {
  .lr-withyou__item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 24px; align-items: baseline; padding-block: 20px; }
}
/* the link follows the list in the DOM (read the five terms first); on wide screens it sits under the heading.
   From 1024 px the page's 5/6 tracks: the list starts where the text of "Who we are" starts */
@media (min-width: 1024px) {
  .lr-withyou-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--lr-gap);
    grid-template-areas: "head list" "more list"; grid-template-rows: auto 1fr;
  }
  .lr-withyou__head { grid-area: head; }
  .lr-withyou { grid-area: list; }
  .lr-withyou__item { padding-block: 20px; }
  .lr-withyou__more { grid-area: more; align-self: start; margin-top: 12px; }
}

/* ---------- AB3-04 · What we build with: an engineering spec, not a skills cloud ----------
   A definition list: the mono category on the left, the items as plain text with visible " · "
   separators. Only the Languages row keeps tags, as the anchor of the sheet. */
.lr-kit { border-radius: var(--lr-r-xl); padding: 6px clamp(18px, 3vw, 36px); }
.lr-kit__row { display: grid; gap: 8px; padding-block: 16px; border-top: 1px solid var(--lr-line); }
.lr-kit__row:first-child { border-top: 0; }
.lr-kit__label {
  font-family: var(--lr-font-mono); font-size: .75rem; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--lr-muted);
}
.lr-kit__items { font-size: 1.0625rem; line-height: 1.6; color: var(--lr-ink-2); text-wrap: pretty; }
.lr-kit__sep { color: var(--lr-muted); }
.lr-kit__items--tags { line-height: 1; }
.lr-kit__items--tags .lr-kit__tag {
  display: inline-block; max-width: 100%; margin: 0 6px 8px 0; padding: 7px 12px;
  border-radius: var(--lr-r-s); background: var(--lr-sand); border: 1px solid var(--lr-line);
  font-size: .9375rem; font-weight: 600; line-height: 1.35; color: var(--lr-ink); vertical-align: top;
}
/* in the tag row the " · " separators stay in the text (copy and screen readers), the tags carry the rhythm */
.lr-kit__items--tags .lr-kit__sep {
  display: inline-block; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: pre;
}
@media (min-width: 860px) {
  .lr-kit__row { grid-template-columns: 210px minmax(0, 1fr); column-gap: 24px; padding-block: 18px; align-items: baseline; }
  .lr-kit__items { font-size: 1.125rem; }
  .lr-kit__row:first-child { align-items: start; padding-bottom: 10px; }
  .lr-kit__row:first-child .lr-kit__label { padding-top: 9px; }
}

/* ---------- AB3-05 · How we keep it working: a short term and its line, on hairlines (unordered: the coral tick).
   From 1024 px the page's 5/6 tracks: the term under the heading's column, the line on the lead's edge ---------- */
.lr-practices { display: grid; border-top: 2px solid var(--lr-ink); }
.lr-practice { display: grid; gap: 4px; padding-block: 16px 18px; border-bottom: 1px solid var(--lr-line); }
.lr-practice__k { font-size: 1.0625rem; font-weight: 650; line-height: 1.35; letter-spacing: -.005em; }
.lr-practice p { font-size: 1rem; line-height: 1.55; color: var(--lr-ink-2); text-wrap: pretty; max-width: 40em; }
.lr-practices__foot { display: grid; justify-items: start; gap: 14px; margin-top: 24px; }
.lr-practices__foot .lr-note-line { margin-top: 0; }
@media (min-width: 860px) {
  .lr-practice { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 24px; align-items: baseline; padding-block: 18px 20px; }
}
@media (min-width: 1024px) {
  .lr-practice { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--lr-gap); }
}

/* ---------- AB3-06 · References: one quiet sand band ---------- */
.lr-refs-sec { padding-top: 0; }
.lr-refs {
  display: grid; gap: 14px; justify-items: start;
  padding: clamp(22px, 3vw, 36px); border-radius: var(--lr-r-xl); background: var(--lr-sand);
}
.lr-refs__title { font-size: var(--lr-fs-big); }
.lr-refs__text { font-size: var(--lr-fs-lead); line-height: 1.45; color: var(--lr-ink-2); max-width: 34em; text-wrap: pretty; }
.lr-refs__glyph { width: 80px; height: auto; }
@media (min-width: 860px) {
  .lr-refs { grid-template-columns: 96px minmax(0, 4fr) minmax(0, 7fr); align-items: center; column-gap: clamp(24px, 3vw, 48px); }
  .lr-refs__glyph { width: 96px; }
}

/* ---------- AB3-07 · Rules: mint room, the HP2-06 index layout, an exhibit under the heading ----------
   The sheets (the method written down: rule 01 is "Write it down first") on a sand plinth, the ground of the
   C renders: never a tinted tile in a tinted room. */
.lr-rules__obj {
  position: relative; display: none; place-items: center; width: 100%; max-width: 320px; aspect-ratio: 1; margin-top: 18px;
  border-radius: var(--lr-r-xl); overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #F7F5F1 0%, #ECE8E0 100%);
}
.lr-rules__obj::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 30%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%); }
.lr-rules__obj::after { content: ""; position: absolute; left: 50%; bottom: 10%; width: 50%; height: 11%; background: var(--lr-obj-floor); transform: translateX(-50%); }
.lr-rules__obj picture { position: relative; z-index: 1; width: 84%; height: 84%; }
.lr-rules__obj img { width: 100%; height: 100%; object-fit: contain; }
/* narrower screens: the sheets stand beside the heading, at 96 px */
.lr-rules__obj { display: grid; }
@media (max-width: 1023px) {
  .lr-rules__head { grid-template-columns: minmax(0, 1fr) 96px; column-gap: 16px; align-items: start; }
  .lr-rules__obj { width: 96px; margin-top: 0; border-radius: 18px; }
}

/* ---------- AB3-08 · Check us: three links as a line list (the label, the arrow, a hairline between), on the lead's track ---------- */
.lr-checklinks { display: grid; border-top: 2px solid var(--lr-ink); }
.lr-checklink {
  position: relative; display: flex; align-items: center; gap: 16px; min-height: 60px; padding-block: 12px;
  border-bottom: 1px solid var(--lr-line); font-size: 1.125rem; font-weight: 600; line-height: 1.35;
}
.lr-checklink__a { color: var(--lr-ink); text-decoration: none; }
.lr-checklink__a::after { content: ""; position: absolute; inset: 0; }
.lr-checklink__a:hover { text-decoration: underline; text-decoration-color: var(--lr-link-line); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.lr-checklink__a:focus-visible { outline: none; box-shadow: none; }
.lr-checklink__a:focus-visible::after { outline: 3px solid var(--lr-focus-outer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--lr-focus-inner); border-radius: 4px; }
.lr-checklink__arrow { margin-left: auto; font-weight: 600; transition: transform var(--lr-dur-2) var(--lr-ease); }
.lr-checklink:hover .lr-checklink__arrow { transform: translateX(3px); }

/* ---------- AB3-09 · Closing CTA: the previous section already ends with its own padding ---------- */
/* .lr-close--flush lives in site.css */