/* Content families for the isolated preview. The logo retains the thread texture;
   open layouts, precise rules and one shared geometric signature support it. */
:root {
  --content-space-sm: 16px;
  --content-space-md: 24px;
  --content-space-lg: 32px;
  --content-space-xl: 48px;
  --content-rule: rgba(37, 53, 81, .19);
}

.principles-list, .notes-grid, .format-grid, .info-rows,
.travel-sequence, .service-options, .route-highlights { min-width: 0; }
#bespoke-standard { scroll-margin-top: 0; }
.principle, .notes-item, .format-detail, .info-row,
.travel-stage, .service-detail, .service-note, .route-aside,
.route-highlight { min-width: 0; }
:is(.principle, .notes-item, .format-detail, .info-row, .travel-stage,
  .service-detail, .service-note, .route-aside) > :is(h2,h3) {
  font: 400 clamp(24px, 2vw, 28px)/1.25 var(--font-display);
  color: var(--navy); margin: 0 0 var(--content-space-sm);
  text-wrap: balance;
}
:is(.principle, .notes-item, .format-detail, .info-row, .travel-stage,
  .service-detail, .service-note, .route-aside, .route-highlight) > :last-child { margin-bottom: 0; }
:is(.principle, .notes-item, .format-detail, .info-row, .travel-stage,
  .service-detail, .service-note, .route-aside) p { max-width: 60ch; }

/* Editorial principles: the heading leads, with grouped supporting statements. */
.editorial-layout {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.75fr);
  gap: clamp(40px, 6vw, 88px); align-items: start;
}
.editorial-layout > .sec-head { display: block; margin: 0; }
.editorial-layout > .sec-head .h2 { max-width: 13ch; margin-bottom: 0; }
.principles-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--content-space-xl); align-items: start;
}
.principle p { margin-bottom: 0; }
.principle .arrow { margin-top: var(--content-space-sm); }
.principles-list--columns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); }
.principles-list--columns .principle + .principle {
  border-left: 1px solid var(--content-rule); padding-left: var(--content-space-lg);
}
.principles-list--wide-last > :last-child { grid-column: 1 / -1; max-width: 60ch; }
.principles-list--rows { grid-template-columns: minmax(0,1fr); gap: 0; }
.principles-list--rows .principle {
  display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  gap: var(--content-space-lg); padding-block: var(--content-space-md);
  border-top: 1px solid var(--content-rule);
}
.principles-list--rows .principle:first-child { padding-top: 0; border-top: 0; }
.principles-list--rows h3 { margin-bottom: 0; }
.principles-list--bespoke { gap: var(--content-space-lg) var(--content-space-xl); }
.principle--access {
  grid-column: 1 / -1; border-block: 1px solid var(--content-rule);
  padding-block: var(--content-space-lg);
}
.principle--access p { max-width: 50ch; }
.textile-signature {
  display: block; width: 96px; height: 18px; margin-bottom: var(--content-space-md);
  background: var(--gold-700);
  -webkit-mask: url('../brand/textile-ornament.svg?rev=editorial1') center / contain no-repeat;
  mask: url('../brand/textile-ornament.svg?rev=editorial1') center / contain no-repeat;
}

/* Planning and decision notes share a reliable label/detail reading structure. */
.info-rows { border-bottom: 1px solid var(--content-rule); }
.info-row {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
  gap: clamp(24px, 5vw, 72px); border-top: 1px solid var(--content-rule);
  padding-block: var(--content-space-md);
}
.info-row > h3 { margin-bottom: 0; }
.info-row > p { margin: 0; }
.notes-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--content-space-xl) clamp(32px, 6vw, 88px);
  border-top: 1px solid var(--content-rule); padding-top: var(--content-space-lg);
}
.notes-item .checks { margin-bottom: 0; }

/* Two complete encounter formats; neither is styled as a preferred package. */
.format-grid {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(32px,6vw,88px); border-block: 1px solid var(--content-rule);
  padding-block: var(--content-space-lg);
}
.format-detail + .format-detail { border-left: 1px solid var(--content-rule); padding-left: var(--content-space-xl); }
.format-detail > h3 { font-size: clamp(28px,2.5vw,34px); }

/* Chronological stages and unordered route highlights retain their own meaning. */
.travel-sequence { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--content-space-xl); }
.travel-stage { border-top: 1px solid var(--content-rule); padding-top: var(--content-space-md); }
.route-highlights { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 var(--content-space-xl); }
.route-highlight { padding-block: var(--content-space-md); border-top: 1px solid var(--content-rule); }
.route-highlight p { margin: 0; max-width: 52ch; }
.route-aside {
  border-block: 1px solid var(--gold-500); padding-block: var(--content-space-lg);
}
.route-aside .checks { margin-bottom: 0; }

/* Contact details and invitations are direct, recognisable actions. */
.service-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--content-space-xl); }
.service-detail { border-top: 1px solid var(--content-rule); padding-top: var(--content-space-md); }
.service-detail .contact-big { font-size: clamp(22px,2vw,28px); line-height: 1.4; overflow-wrap: anywhere; margin-block: 8px 20px; }
.service-detail .actions { gap: 12px 24px; }
.service-note { align-self: center; border-block: 1px solid var(--content-rule); padding-block: var(--content-space-lg); }
.service-note > h3 { font-size: clamp(28px,2.5vw,34px); }
.service-note .actions { margin-top: var(--content-space-md); }

@media (max-width: 1000px) {
  .editorial-layout { grid-template-columns: minmax(0,1fr); gap: var(--content-space-xl); }
  .editorial-layout > .sec-head .h2 { max-width: 23ch; }
  .principles-list--columns { grid-template-columns: minmax(0,1fr); gap: var(--content-space-lg); }
  .principles-list--columns .principle {
    display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.3fr);
    gap: 12px var(--content-space-lg);
  }
  .principles-list--columns .principle > h3 { grid-column: 1; grid-row: 1 / 3; margin-bottom: 0; }
  .principles-list--columns .principle > :not(h3) { grid-column: 2; }
  .principles-list--columns .principle > p { margin: 0; }
  .principles-list--columns .principle > .arrow { margin-top: 0; justify-self: start; }
  .principles-list--columns .principle + .principle {
    border-left: 0; border-top: 1px solid var(--content-rule);
    padding: var(--content-space-md) 0 0;
  }
  .service-options { grid-template-columns: minmax(0,1fr); gap: var(--content-space-lg); }
}
@media (max-width: 760px) {
  .principles-list, .principles-list--columns, .notes-grid, .format-grid,
  .travel-sequence, .route-highlights { grid-template-columns: minmax(0,1fr); }
  .principles-list { gap: var(--content-space-lg); }
  .principles-list--columns .principle { display: block; }
  .principles-list--columns .principle > h3 { margin-bottom: var(--content-space-sm); }
  .principles-list--columns .principle > .arrow { margin-top: var(--content-space-sm); }
  .principles-list--columns .principle + .principle { border: 0; padding: 0; }
  .principles-list--wide-last > :last-child, .principle--access { grid-column: auto; }
  .principles-list--rows { gap: 0; }
  .principles-list--rows .principle, .info-row { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .notes-grid, .format-grid { gap: var(--content-space-lg); }
  .format-detail + .format-detail { border: 0; border-top: 1px solid var(--content-rule); padding: var(--content-space-lg) 0 0; }
  .travel-sequence { gap: var(--content-space-lg); }
  .route-highlights { gap: 0; }
}