/* ==========================================================================
   Kaldrin Developments: /concepts
   Websites for made-up businesses. Loaded after work.css (browser frames,
   .work-cta) and before chrome.css and skin.css.
   The page must make it obvious these are not real companies: the notice in
   the head, the flag on every card, the "Concept" stamp in every frame and
   the fine print section all say so.
   ========================================================================== */

/* ---------- Head: copy on the left, a fanned stack of the four sites on the right ---------- */
.cx-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
  min-height: min(92vh, 860px);
  padding: calc(var(--nav-h) + clamp(56px, 7vw, 104px)) var(--gutter) clamp(56px, 6vw, 96px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.cx-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 70% at 78% 52%, rgba(212, 163, 115, .10), transparent 70%);
  pointer-events: none;
}
.cx-head .display { max-width: 9ch; margin-bottom: clamp(20px, 2.5vw, 32px); text-shadow: var(--tshadow); }
.cx-head .lede { max-width: 42ch; color: var(--text); margin-bottom: clamp(28px, 3vw, 40px); }

.cx-notice {
  display: flex;
  gap: 16px;
  max-width: 46ch;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: rgba(22, 23, 26, .72);
}
.cx-notice__mark { flex: none; width: 1px; background: var(--accent); }
.cx-notice p { margin: 0; font-size: .875rem; line-height: 1.7; color: var(--text-secondary); }
.cx-notice strong { display: block; margin-bottom: 4px; font-weight: 600; color: var(--text-primary); }

.cx-fan {
  position: relative;
  aspect-ratio: 16 / 11;
  perspective: 1600px;
}
.cx-fan img {
  position: absolute;
  left: 4%;
  top: 16%;
  width: 78%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .95);
  transform-origin: 50% 120%;
  transition: transform 1.2s var(--ease-out), opacity 1.2s var(--ease-out);
}
.cx-fan img:nth-child(1) { z-index: 4; transform: rotate(-1deg) translate(0, 6%); }
.cx-fan img:nth-child(2) { z-index: 3; transform: rotate(3deg) translate(7%, -4%); filter: brightness(.82); }
.cx-fan img:nth-child(3) { z-index: 2; transform: rotate(7deg) translate(13%, -12%); filter: brightness(.66); }
.cx-fan img:nth-child(4) { z-index: 1; transform: rotate(11deg) translate(19%, -20%); filter: brightness(.5); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cx-fan:hover img:nth-child(2) { transform: rotate(4deg) translate(10%, -6%); }
  .cx-fan:hover img:nth-child(3) { transform: rotate(9deg) translate(18%, -16%); }
  .cx-fan:hover img:nth-child(4) { transform: rotate(14deg) translate(25%, -25%); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .cx-fan img { opacity: 0; transform: rotate(0) translate(0, 10%); }
  .js .cx-fan.is-in img { opacity: 1; }
  .js .cx-fan.is-in img:nth-child(1) { transform: rotate(-1deg) translate(0, 6%); transition-delay: .15s; }
  .js .cx-fan.is-in img:nth-child(2) { transform: rotate(3deg) translate(7%, -4%); transition-delay: .3s; }
  .js .cx-fan.is-in img:nth-child(3) { transform: rotate(7deg) translate(13%, -12%); transition-delay: .45s; }
  .js .cx-fan.is-in img:nth-child(4) { transform: rotate(11deg) translate(19%, -20%); transition-delay: .6s; }
}
@media (max-width: 899px) {
  .cx-head { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cx-fan { max-width: 560px; width: 86%; margin-top: 8px; aspect-ratio: 16 / 9.5; }
}

/* ---------- The library: a filter bar, then one section per type of business ---------- */
.cx-library { padding: 0 var(--gutter) var(--section-y); border-bottom: 1px solid var(--line); }
.cx-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  flex-wrap: wrap;
  margin: 0 calc(var(--gutter) * -1);
  padding: 16px var(--gutter);
  background: rgba(15, 16, 17, .86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.cx-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .35s var(--ease-out), color .35s var(--ease-out), background-color .35s var(--ease-out);
}
.cx-chip:hover { border-color: var(--line-3); color: var(--text-primary); }
.cx-chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: rgba(212, 163, 115, .07); }
.cx-chip__n { font-family: var(--f-display); font-size: 1rem; letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; color: var(--text-secondary); transition: color .35s var(--ease-out); }
.cx-chip[aria-pressed="true"] .cx-chip__n { color: var(--accent); }
.cx-status { margin: 0; font-size: 12.5px; color: var(--text-secondary); }
@media (pointer: coarse) { .cx-chip { min-height: 44px; } }

.cx-group { padding-top: clamp(56px, 7vw, 96px); scroll-margin-top: calc(var(--nav-h) + 80px); }
.cx-group[hidden] { display: none; }
.cx-group.is-entering { animation: cx-in .7s var(--ease-out) both; }
@keyframes cx-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cx-group__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 40px;
  align-items: end;
  padding-bottom: 22px;
  margin-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}
.cx-group__title {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem);
  font-weight: 500;
  line-height: 1.05;
  color: var(--text-primary);
}
.cx-group__n { font-size: .5em; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.cx-group__head p { margin: 0; max-width: 46ch; justify-self: end; color: var(--text-secondary); line-height: 1.7; }
@media (max-width: 899px) {
  .cx-group__head { grid-template-columns: minmax(0, 1fr); }
  .cx-group__head p { justify-self: start; }
}

/* Cards: an even grid, three across on wide screens, so the page stays calm as concepts are added. */
.cx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(22px, 2.6vw, 40px);
  row-gap: clamp(56px, 6vw, 88px);
}
@media (max-width: 1199px) { .cx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .cx-grid { grid-template-columns: minmax(0, 1fr); row-gap: 64px; } }
.cx-grid .display--md { font-size: clamp(1.6rem, 1.25rem + .9vw, 2.1rem); }
.cx-grid .cx__body > p:not(.cx__flag) { font-size: .9375rem; }

.cx__shot { position: relative; }
.cx__stamp {
  margin-left: auto;
  flex: none;
  padding: 3px 8px;
  border: 1px solid rgba(212, 163, 115, .45);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.cx__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #121315; }
.cx__media img, .cx__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.cx__media video { opacity: 0; transition: opacity .6s var(--ease-out); }
.cx.is-playing .cx__media video { opacity: 1; }

.cx__body { padding-top: clamp(22px, 2.4vw, 32px); }
.cx__top {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.cx__num {
  font-family: var(--f-display);
  font-size: 1.5rem;
  letter-spacing: 0;
  color: var(--line-3);
  font-variant-numeric: lining-nums tabular-nums;
  transition: color .6s var(--ease-out);
}
.cx:hover .cx__num, .cx:focus-within .cx__num { color: var(--accent); }
.cx__body .display { margin-bottom: 10px; }
.cx__flag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.cx__flag::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.cx__body > p:not(.cx__flag) { max-width: 46ch; margin-bottom: 22px; line-height: 1.75; color: var(--text); }

.cx__link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-primary);
  border-bottom: 1px solid var(--line-2);
  transition: border-color .4s var(--ease-out), color .4s var(--ease-out);
}
.cx__arrow { position: relative; width: 28px; height: 1px; background: currentColor; transition: width .5s var(--ease-out); }
.cx__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.cx__link:hover, .cx__link:focus-visible { color: var(--accent); border-color: var(--accent); }
.cx__link:hover .cx__arrow, .cx__link:focus-visible .cx__arrow { width: 40px; }
@media (pointer: coarse) { .cx__link { min-height: 44px; } }

/* ---------- The fine print ---------- */
.cx-truth {
  padding: var(--section-y) var(--gutter);
  border-bottom: 1px solid var(--line);
}
.cx-truth .display { max-width: 14ch; margin-bottom: clamp(36px, 4vw, 56px); }
.cx-truth__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  max-width: 980px;
}
.cx-truth__col { padding: 28px clamp(0px, 3vw, 40px) 28px 0; }
.cx-truth__col + .cx-truth__col { padding-left: clamp(20px, 3vw, 40px); border-left: 1px solid var(--line); }
.cx-truth__col h3 {
  margin: 0 0 16px;
  font-family: var(--f-display);
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--text-primary);
}
.cx-truth__col--made h3 { color: var(--accent); }
.cx-truth__col ul { list-style: none; margin: 0; padding: 0; }
.cx-truth__col li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text); line-height: 1.6; }
.cx-truth__col li:last-child { border-bottom: 0; }
.cx-truth__note { margin: 28px 0 0; max-width: 60ch; font-size: .875rem; color: var(--text-secondary); }
@media (max-width: 640px) {
  .cx-truth__cols { grid-template-columns: minmax(0, 1fr); }
  .cx-truth__col { padding-right: 0; }
  .cx-truth__col + .cx-truth__col { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* Phones: one swipeable row of chips that scrolls away with the page; the header slides away while scrolling down. */
@media (max-width: 899px) {
  .cx-bar { position: relative; top: auto; padding-top: 10px; padding-bottom: 10px; }
  .cx-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .cx-filter::-webkit-scrollbar { display: none; }
  .cx-chip { flex: none; }
  .cx-status { display: none; }
  .nav { transition: transform .4s var(--ease-out), border-color .5s var(--ease-out); }
  body.nav-away:not(.menu-open) .nav { transform: translateY(-100%); }
}

/* ---------- The wall (js/modules/wall.js): every concept on an endless, draggable surface ---------- */
.cx-bar__end { display: flex; align-items: center; gap: 18px; }
.cx-view { display: inline-flex; border: 1px solid var(--line-2); }
.cx-view[hidden] { display: none; }
.cx-view__opt { min-height: 38px; padding: 0 14px; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: color .3s var(--ease-out), background-color .3s var(--ease-out); }
.cx-view__opt + .cx-view__opt { border-left: 1px solid var(--line-2); }
.cx-view__opt:hover { color: var(--text-primary); }
.cx-view__opt[aria-pressed="true"] { color: var(--btn-ink); background: var(--btn-fill); }
.cx-library.is-wall .cx-group { display: none; }

.cx-wall { margin: 0 calc(var(--gutter) * -1); padding-top: clamp(20px, 3vw, 36px); }
.cx-wall[hidden] { display: none; }
.cx-wall__view {
  position: relative;
  height: clamp(460px, 74vh, 780px);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  outline-offset: -2px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}
.cx-wall__view.is-dragging { cursor: grabbing; }
.cx-wall__view.is-dragging .wt { pointer-events: none; }
.cx-wall__track { position: absolute; inset: 0; }
.wt {
  position: absolute; left: 0; top: 0; width: var(--tw, 316px);
  display: block; color: inherit; text-decoration: none;
  will-change: transform; -webkit-user-drag: none;
}
.wt__media {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color .35s var(--ease-out);
}
.wt__media img, .wt__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease-out), opacity .35s var(--ease-out); }
.wt__media video { opacity: 0; }
.wt.is-playing .wt__media video { opacity: 1; }
.wt:hover .wt__media, .wt:focus-visible .wt__media, .wt.is-armed .wt__media { border-color: var(--accent); }
.wt:hover .wt__media img, .wt.is-playing .wt__media video { transform: scale(1.03); }
.wt:focus-visible { outline: none; }
.wt:focus-visible .wt__media { outline: 2px solid var(--accent); outline-offset: 3px; }
.wt__tap { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; background: rgba(15, 16, 17, .88); color: var(--text-primary); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
.wt.is-armed .wt__tap { opacity: 1; transform: none; }
.wt__cap { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; padding-top: 12px; }
.wt__num { grid-row: 1 / 3; font-family: var(--f-display); font-size: 1.15rem; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.wt__name { font-family: var(--f-display); font-size: 1.3rem; line-height: 1.1; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt__kind { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); margin-top: 4px; }
.cx-wall__track.is-entering .wt { animation: wt-in .6s var(--ease-out) both; animation-delay: clamp(0s, var(--d, 0s), .35s); }
@keyframes wt-in { from { opacity: 0; scale: .94; } }
.cx-wall__hint { margin: 14px 0 0; padding: 0 var(--gutter); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); text-align: center; }
@media (max-width: 760px) {
  .cx-wall__view { height: clamp(380px, 64vh, 560px); }
  .wt__name { font-size: 1.1rem; }
  .cx-bar__end { width: 100%; justify-content: flex-end; }
  .cx-view__opt { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-wall__track.is-entering .wt { animation: none; }
  .wt__media img, .wt__media video { transition: none; }
}