/* ========================================================================== 
   Confirmed responsive and action-language corrections — 13 August 2026

   These rules close defects found in the final cross-width audit. They do not
   change the approved desktop composition above 1150px.
   ========================================================================== */

/* The full masthead begins to collide before the original tablet breakpoint.
   Use the existing compact navigation through the last affected width. */
@media screen and (min-width:861px) and (max-width:920px){
  .site-header{
    grid-template-columns:minmax(0,1fr) auto;
    gap:14px;
    padding-inline:22px;
  }

  .primary-nav,
  .theme-toggle{
    display:none;
  }

  .menu-toggle{
    display:block;
  }

  .site-header .mobile-nav{
    position:absolute;
    top:100%;
    right:22px;
    left:22px;
    display:grid;
    padding:12px 16px 18px;
    border:1px solid var(--line);
    background:var(--header-bg);
    backdrop-filter:blur(12px);
  }
}

/* Between the phone and desktop mastheads, Ask and Menu share one persistent
   control group. Keep Ask in that group after scroll: the wider-shell rule
   otherwise fixes it to the same right edge occupied by Menu. */
@media screen and (min-width:721px) and (max-width:860px){
  body.has-scrolled .header-controls .ask-control{
    position:static;
    inset:auto;
    z-index:auto;
  }
}

/* On tablets and compact desktops, reserve a genuine route-control gutter.
   The fixed navigator can no longer cover prose, diagrams or footer actions. */
@media screen and (min-width:641px) and (max-width:1150px){
  body[data-page="home"] :is(
    .home-opening,
    .home-decision,
    .home-path,
    .home-choice,
    .home-route-gate,
    .home-contact
  ),
  body[data-page="approach"] :is(
    .approach-opening,
    .argument-movement,
    .analysis-field,
    .executable-field,
    .unknown-field,
    .calibration-field,
    .continuity-field,
    .approach-close
  ){
    padding-right:clamp(84px,10vw,112px);
  }

  body:is([data-page="home"],[data-page="approach"]) .site-footer{
    padding-right:clamp(84px,10vw,112px);
  }
}

/* The statutory address is a second line of the left identity block. Do not
   let the older generic p:last-child tablet rule move it beneath the links. */
@media screen and (max-width:860px){
  .site-footer{
    grid-template-columns:minmax(0,1fr) auto;
    gap:clamp(16px,4vw,28px);
    padding-inline:clamp(16px,4vw,32px);
  }

  .site-footer__identity{
    min-width:0;
  }

  .site-footer .site-footer__company-line{
    flex-wrap:wrap;
    white-space:normal;
  }

  .site-footer .site-footer__address{
    grid-column:1;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
  }
}

/* A fixed phone dock necessarily covers whichever content passes behind it.
   Keep the same compact route index, but place it in the document flow above
   the first movement so every control remains available without obstruction. */
@media screen and (max-width:640px){
  body{
    padding-bottom:0;
  }

  .route-progress{
    position:relative;
    inset:auto;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:max-content;
    max-width:calc(100% - 18px);
    margin:calc(var(--header-h) + 8px) auto 0;
    transform:none;
  }
}

/* The residual-range caption is explanatory notation, not body copy. Keep it
   subordinate enough to remain inside the two diagram columns at wide sizes,
   while retaining the existing mobile reading size. */
@media screen and (min-width:861px){
  .canonical-graph--residual > figcaption{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    font-size:clamp(.8125rem,.06vw + .8rem,.875rem);
    line-height:1.5;
  }

  .analysis-range__caption-continuation{
    display:block;
  }
}

/* The decision-window time labels are notation, so they use the same compact,
   tracked hierarchy as the graph's other functional labels. */
.canonical-graph--decision svg .decision-window__time-label{
  letter-spacing:.1em;
}

/* When the two-part caption collapses to one column, keep the qualification
   attached to the right edge instead of leaving a narrow centred text block. */
@media screen and (max-width:860px){
  .canonical-graph--residual > figcaption > p:last-child{
    width:100%;
    max-width:none;
    justify-self:end;
    text-align:right;
  }
}

/* In the dark theme, the shared-unknown node uses the same restrained native
   foundation fill as the Route node in the preceding diagram. */
html[data-theme="dark"] .duties-figure .shared-unknown{
  background:var(--tc-evidence-foundation);
}

/* Centre the two endpoint propositions within their matching cells while
   preserving the authored baseline, line breaks and central condition. */
.duties-figure .duties-node{
  justify-content:center;
  text-align:center;
}

/* The dark close remains one continuous depth field, but the legal footer
   needs the same quiet hairline datum retained by the light theme. */
html[data-theme="dark"] .site-footer{
  border-top-color:var(--line);
}

/* Let the Dark River remain at terminal depth for longer before it returns to
   the main canvas. The 18% exit interval preserves a gradual lower edge. */
html[data-theme="dark"] body[data-page="approach"] .river-threshold{
  background:linear-gradient(
    to bottom,
    var(--tc-dark-canvas) 0%,
    var(--tc-dark-depth-field) 27%,
    var(--tc-dark-depth-field) 82%,
    var(--tc-dark-canvas) 100%
  );
}

/* The overlap masks must carry the river's depth field—not the ordinary
   petrol canvas—so the tonal transition begins in section 04 and resolves
   inside section 05 rather than stopping at the river element's edges. */
html[data-theme="dark"] body[data-page="approach"] .river-threshold::before,
html[data-theme="dark"] body[data-page="approach"] .river-threshold::after{
  background:var(--tc-dark-depth-field);
}

/* The canvas already renders against the terminal depth colour, but its
   surface light and the inherited veil made the river read as a separate
   petrol panel. Keep the water legible through a restrained depth wash and
   let every opaque veil stop settle to the same #050f12 field as section 08.
   The lateral and vertical transparency still preserve the moving artwork
   and the cross-section entry/exit fades. */
html[data-theme="dark"] body[data-page="approach"] .river-artwork__veil{
  background:
    linear-gradient(rgba(5,15,18,.22),rgba(5,15,18,.22)),
    linear-gradient(
      90deg,
      rgba(5,15,18,.99) 0 25%,
      rgba(5,15,18,.88) 44%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      var(--tc-dark-depth-field) 0%,
      rgba(5,15,18,.92) 10%,
      transparent 28% 72%,
      rgba(5,15,18,.92) 90%,
      var(--tc-dark-depth-field) 100%
    );
}

@media screen and (max-width:640px){
  html[data-theme="dark"] body[data-page="approach"] .river-artwork__veil{
    background:
      linear-gradient(rgba(5,15,18,.22),rgba(5,15,18,.22)),
      linear-gradient(
        180deg,
        var(--tc-dark-depth-field) 0%,
        rgba(5,15,18,.94) 14%,
        transparent 34% 68%,
        rgba(5,15,18,.92) 88%,
        var(--tc-dark-depth-field) 100%
      );
  }
}

/* The river's lower overlap sits in an earlier isolated stacking context, so
   the following movement's opaque canvas can conceal it at the sibling edge.
   Continue the same depth field in the opening of section 05 and resolve it
   gradually back to the ordinary canvas. This preserves the historical
   cross-section fade at every viewport width without moving either section. */
html[data-theme="dark"] body[data-page="approach"] .unknown-field{
  --tc-river-exit-fade:clamp(360px,38vw,620px);
  background:linear-gradient(
    to bottom,
    var(--tc-dark-depth-field) 0,
    var(--tc-dark-depth-field) var(--tc-river-band-solid-overlap),
    var(--tc-dark-canvas) var(--tc-river-exit-fade),
    var(--tc-dark-canvas) 100%
  );
}

/* At intermediate widths, the residual-range notation should retain the
   compact scale used by the site's other diagrams. The earlier 15px override
   made several labels feel heavier and brought the workable-route label too
   close to its lower boundary. Wide and mobile presentations are unchanged. */
@media screen and (min-width:721px) and (max-width:1080px){
  .canonical-graph--residual svg .small-label{
    font-size:13.5px;
  }
}

/* Owner refinements — 14 August 2026.
   Lift both authored content groups in H06 by the same measured amount while
   retaining the section height, footer datum and internal spacing. */
body[data-page="home"] .home-contact__copy,
body[data-page="home"] .home-contact__brief{
  transform:translateY(-12px);
}

/* Restore the contact block's two-stage hierarchy without repeating the
   principal route already published in H04. */
body[data-page="home"] .home-contact__brief{
  padding-block-start:clamp(22px,2vw,30px);
  border-block-start:2px solid var(--line-strong);
}

body[data-page="home"] :is(
  .home-contact__eyebrow,
  .home-contact__general-label
){
  margin:0;
  font-family:var(--font-heading);
  font-size:var(--type-label);
  font-weight:600;
  line-height:1.25;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

body[data-page="home"] .home-contact__standfirst{
  margin:clamp(26px,2.8vw,38px) 0 clamp(22px,2.4vw,34px);
}

body[data-page="home"] .home-contact__general{
  margin-block-start:clamp(30px,3.4vw,48px);
  padding-block-start:clamp(22px,2.5vw,34px);
  border-block-start:1px solid var(--line-strong);
}

body[data-page="home"] .home-contact__email{
  display:inline-block;
  width:max-content;
  max-width:100%;
  margin-block-start:clamp(15px,1.5vw,21px);
  font-family:var(--font-body);
  font-size:clamp(.92rem,.3vw + .86rem,1.05rem);
  font-weight:600;
  line-height:1.35;
  overflow-wrap:anywhere;
}

/* A04 follows the section's left content datum. Its spare width therefore
   remains as breathing room before the fixed route index on the right. */
@media screen and (min-width:861px){
  body[data-page="approach"] .executable-field > .route-conditions{
    margin-inline:0 auto;
  }
}

/* The general mailbox now belongs to First Contact. Keep the footer legal:
   the brand and registered office remain left; registration and privacy close
   the right edge. */
.site-footer{
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:none;
  align-items:start;
}

.site-footer__identity{
  grid-template-columns:minmax(0,1fr);
  min-width:0;
}

.site-footer .site-footer__company-line{
  display:block;
  grid-column:1;
  white-space:normal;
}

.site-footer .site-footer__identity > .site-footer__address{
  grid-column:1;
}

.site-footer__legal{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  min-width:0;
  justify-self:end;
  text-align:right;
}

.site-footer__legal p{
  margin:0;
}

.site-footer__registration{
  max-width:42ch;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.site-footer__legal a{
  width:max-content;
  max-width:100%;
}

@media screen and (max-width:860px){
  .site-footer{
    grid-template-columns:minmax(0,1fr);
  }

  .site-footer__legal{
    justify-self:end;
  }
}

/* ASK's opening proposition is a display line, not interface body copy. Keep
   its approved sentence case, measure and spacing, but give it the site's
   Söhne Breit Halbfett heading voice. */
.ask-panel .ask-intro{
  font-family:"Soehne Breit",var(--font-body);
  font-weight:600;
}