/* Layout repair for the founder-selected kinetic website.
   Resolves inherited positioning on small labels, CTA collisions,
   and long project titles in the dialog. No palette or hero changes. */

/* The CTA and the project-story link are two independent actions. */
.chapter .chapter-main {min-width:0;max-width:100%}
.chapter .chapter-actions {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:clamp(10px,1.5vh,16px);
  min-width:0;
  max-width:100%;
}
.chapter .chapter-actions .chapter-open {
  box-sizing:border-box;
  flex:0 1 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  min-width:0;
  width:max-content;
  margin:0;
  padding:16px clamp(18px,2vw,26px);
  min-height:56px;
  line-height:1.28;
  white-space:normal;
  overflow-wrap:break-word;
  text-align:left;
}
.chapter .chapter-actions .project-deep-link {
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  max-width:100%;
  min-width:0;
  flex:0 1 auto;
  width:fit-content;
  white-space:normal;
  overflow-wrap:break-word;
  margin:0;
  padding:4px 0 6px;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:5px;
  line-height:1.4;
}
.chapter .chapter-actions :is(button,a):focus-visible {
  outline:3px solid currentColor;
  outline-offset:4px;
}
.chapter .chapter-main h3 {
  box-sizing:border-box;
  min-width:0;
  max-width:100%;
  overflow-wrap:normal;
}

/* Explicit hover colours avoid the legacy whole-button invert filter. */
.chapter-accounting .chapter-actions .chapter-open:hover {
  filter:none;
  background:#f7f7f4;
  color:#3155ed;
  border-color:#f7f7f4;
}
.chapter-jewellery .chapter-actions .chapter-open:hover {
  filter:none;
  background:#151515;
  color:#f05b3f;
  border-color:#151515;
}
.chapter-backoffice .chapter-actions .chapter-open:hover {
  filter:none;
  background:#151515;
  color:#d9f64e;
  border-color:#151515;
}
/* Inherited .scene-conversation small {position:absolute} from
   the ORIGINAL illustration wrongly pulled new nested card labels
   out of their own cards. Reset that legacy selector only here. */
.chapter .scene-conversation .operations-board small,
.chapter .scene-conversation .ops-request small,
.chapter .scene-conversation .ops-document-head small {
  position:static;
  inset:auto;
  display:block;
  width:auto;
  margin:0;
  line-height:1.42;
  font-size:10px;
  letter-spacing:.08em;
  max-width:100%;
  white-space:normal;
}
.chapter .operations-board {
  box-sizing:border-box;
  min-width:0;
}
.chapter .operations-board .ops-header,
.chapter .operations-board .ops-core,
.chapter .operations-board .ops-request,
.chapter .operations-board .ops-document,
.chapter .operations-board .ops-controls {
  box-sizing:border-box;
  min-width:0;
}
.chapter .operations-board .ops-header {
  position:relative;
  z-index:2;
  flex:none;
  gap:12px;
}
.chapter .operations-board .ops-header strong {min-width:0;overflow-wrap:break-word}
.chapter .operations-board .ops-core {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
  gap:clamp(12px,1.6vw,20px);
  min-height:0;
  flex:1 1 auto;
  padding:19px 0;
}
.chapter .operations-board .ops-request {
  align-self:start;
  max-width:100%;
  overflow:visible;
  padding:clamp(13px,1.4vw,19px);
  transform:rotate(-1.4deg);
}
.chapter .operations-board .ops-request p {
  position:relative;
  overflow-wrap:break-word;
  margin:15px 0 0;
  max-width:100%;
  font-size:clamp(13px,1.22vw,17px);
  line-height:1.37;
}
.chapter .operations-board .ops-document {
  align-self:end;
  width:100%;
  max-width:100%;
  padding:clamp(13px,1.35vw,18px);
  transform:rotate(1.5deg);
}
.chapter .operations-board .ops-document-head {
  min-width:0;
  gap:10px;
}
.chapter .operations-board .ops-document-head b {
  flex:0 1 auto;
  overflow-wrap:break-word;
  text-align:right;
}
.chapter .operations-board .ops-document strong {
  max-width:100%;
  overflow-wrap:break-word;
  margin:15px 0 12px;
  font-size:clamp(21px,1.95vw,30px);
  line-height:1.07;
}
.chapter .operations-board .ops-document p {
  max-width:100%;
  overflow-wrap:break-word;
  min-height:0;
  font-size:12px;
  line-height:1.47;
}
.chapter .operations-board .ops-draft {
  display:block;
  max-width:100%;
  white-space:normal;
  overflow-wrap:break-word;
  line-height:1.3;
}
.chapter .operations-board .ops-controls {
  flex:none;
  grid-template-columns:repeat(4,minmax(0,1fr));
  width:100%;
  gap:7px;
}
.chapter .operations-board .ops-controls button {
  box-sizing:border-box;
  min-width:0;
  max-width:100%;
  line-height:1.25;
  white-space:normal;
  overflow-wrap:break-word;
}

/* Text must wrap inside all three project interfaces, not disappear
   beyond a narrow mock product-card edge. */
.chapter :is(.ac-paper,.ac-evidence,.ac-paper-zone,.trade-info) {min-width:0}
.chapter :is(.ac-heading,.ac-proof,.ac-row strong,.ac-description,.trade-info strong,.trade-info p) {
  max-width:100%;
  overflow-wrap:break-word;
}
.chapter .trade-info {
  box-sizing:border-box;
  height:auto;
  min-height:max-content;
}
/* A modal is a readable text surface, not a horizontally scrollable billboard. */
.project-dialog {
  box-sizing:border-box;
  width:min(860px,calc(100vw - 36px));
  max-width:calc(100vw - 36px);
  max-height:calc(100dvh - 36px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.project-dialog .dialog-content {
  box-sizing:border-box;
  min-width:0;
  max-width:100%;
  overflow-wrap:break-word;
  padding:clamp(22px,4.4vw,56px);
}
.project-dialog .dialog-top {min-width:0;gap:12px}
.project-dialog .dialog-top>span {min-width:0;overflow-wrap:break-word}
.project-dialog #dialog-title {
  box-sizing:border-box;
  display:block;
  min-width:0;
  max-width:100%;
  margin:clamp(30px,4.5vh,52px) 0 26px;
  font-size:clamp(38px,4.75vw,68px);
  line-height:1.035;
  letter-spacing:-.07em;
  overflow-wrap:anywhere;
  word-break:normal;
}
.project-dialog .dialog-content>p,
.project-dialog .dialog-lines,
.project-dialog .dialog-lines>div {min-width:0;max-width:100%;overflow-wrap:break-word}
.project-dialog .dialog-footer {display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.project-dialog .dialog-footer>p {min-width:0;flex:1 1 240px}
.project-dialog .dialog-footer .dialog-case-link {
  width:auto;
  max-width:100%;
  min-width:0;
  flex:0 1 auto;
  overflow-wrap:break-word;
  white-space:normal;
}
.project-dialog .dialog-footer .dialog-back {max-width:100%;white-space:normal}

/* Respect actual content height rather than allowing clipped cards. */
@media(max-width:1100px){
  .chapter .chapter-main h3 {font-size:clamp(53px,7vw,86px)}
  .chapter-jewellery .chapter-main h3 {font-size:clamp(52px,7.1vw,83px)}
  .chapter-backoffice .chapter-main h3 {font-size:clamp(49px,6.3vw,75px)}
}
@media(max-width:800px){
  .chapter .chapter-main h3 {font-size:clamp(64px,11vw,114px)}
  .chapter-jewellery .chapter-main h3 {font-size:clamp(56px,10.4vw,103px)}
  .chapter-backoffice .chapter-main h3 {font-size:clamp(50px,9.5vw,98px)}
  .chapter .chapter-inner {
    grid-template-columns:minmax(0,1fr);
    row-gap:clamp(30px,5vw,48px);
  }
  .chapter .chapter-actions {gap:12px}
  .chapter .chapter-main .chapter-description {margin:22px 0}
  .chapter .operations-board {max-width:100%}
  .project-dialog #dialog-title {font-size:clamp(36px,7.1vw,62px)}
}
@media(max-width:560px){
  .chapter .operations-board {
    height:auto;
    min-height:560px;
    padding:16px;
  }
  .chapter .operations-board .ops-header {padding-bottom:12px}
  .chapter .operations-board .ops-core {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-content:center;
    align-items:center;
    gap:20px;
    padding:20px 0;
  }
  .chapter .operations-board .ops-request {
    width:min(88%,365px);
    justify-self:start;
    padding:15px;
  }
  .chapter .operations-board .ops-document {
    justify-self:end;
    width:min(85%,340px);
    padding:14px;
  }
  .chapter .operations-board .ops-controls {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .chapter .operations-board .ops-controls button {min-height:40px;font-size:11px}
  .chapter .chapter-main h3 {font-size:clamp(49px,12vw,75px)}
  .chapter-jewellery .chapter-main h3 {font-size:clamp(30px,10vw,56px)}
  .chapter-backoffice .chapter-main h3 {font-size:clamp(29px,9.1vw,51px)}
  .project-dialog {width:calc(100vw - 24px);max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
  .project-dialog .dialog-content {padding:clamp(18px,5vw,28px)}
  .project-dialog #dialog-title {font-size:clamp(33px,8.6vw,47px);margin:32px 0 20px;line-height:1.05}
  .project-dialog .dialog-lines {margin:28px 0}
  .project-dialog .dialog-lines>div {padding:14px 0;font-size:18px}
}
@media(prefers-reduced-motion:reduce){
  .chapter .chapter-actions :is(button,a),
  .project-dialog[open] {animation:none!important;transition:none!important}
}