/* Concertina belongs to the same reading column and signal system as history. */
.technical-range {
    position:relative; z-index:1; color:var(--ink);
    padding:clamp(4rem,7vw,7rem) clamp(1.25rem,5vw,5rem) clamp(4rem,7vw,7rem) calc(var(--signal-spine-x) + 6rem);
    scroll-margin-top:5rem;
}
.tr-intro,.tr-explorer { max-width:80rem; margin-inline:auto; }
.tr-intro { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.8rem 2rem; align-items:end; }
.tr-intro h2 { grid-column:1/-1; margin:0; max-width:18ch; font:400 clamp(3.5rem,5.9vw,6rem)/.95 var(--serif); letter-spacing:-.065em; }
.tr-opening { margin:0; max-width:36rem; font-size:1rem; font-weight:500; line-height:1.5; }
.tr-explore { display:inline-flex; align-items:center; justify-content:space-between; grid-column:2; justify-self:start; width:min(16rem,100%); min-width:0; margin:0; padding-bottom:.55rem; border-bottom:1px solid currentColor; gap:1rem; font:700 .75rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.tr-explore span { font-size:1rem; line-height:.65; }
.tr-explorer { margin-top:3rem; }
.technical-range [hidden] { display:none!important; }
.technical-range button { cursor:pointer; color:inherit; }
.technical-range button:disabled { cursor:default; opacity:.42; }
.technical-range button:focus-visible,.technical-range a:focus-visible { outline:2px solid currentColor; outline-offset:3px; box-shadow:none; }
.tr-deck { display:flex; min-height:33rem; border:1px solid var(--ink); background:var(--ink); }
.tr-leaf { position:relative; display:flex; flex-direction:column; flex:0 0 2.65rem; min-width:0; background:var(--paper); color:var(--ink); border-right:1px solid var(--ink); }
.tr-leaf:last-child { border-right:0; }
.tr-leaf>h3 { margin:0; display:flex; flex:1; min-width:0; }
.tr-handle { display:flex; justify-content:flex-start; align-items:center; width:100%; padding:1.25rem .65rem; border:0; background:none; writing-mode:vertical-rl; text-align:left; font:500 1rem/1.2 var(--sans); letter-spacing:-.02em; scroll-margin-top:5rem; }
.tr-leaf.is-open { flex:1 1 0; background:var(--ink); color:var(--paper); }
.tr-leaf.is-open>h3 { flex:0; }
/* Color describes interaction state, never a territory's importance. */
.technical-range .tr-handle:focus-visible,
.technical-range .tr-area-index button:focus-visible { outline:2px solid var(--channel-2); outline-offset:-3px; }
.tr-leaf:not(.is-open) .tr-handle:focus-visible { background:var(--channel-2); color:var(--paper); outline-color:var(--paper); }
@media (hover:hover) {
    .tr-leaf:not(.is-open) .tr-handle:hover { background:var(--channel-2); color:var(--paper); }
    .tr-leaf.is-open .tr-handle:hover { text-decoration:underline; text-decoration-color:var(--channel-2); text-underline-offset:.2em; }
}
@media (min-width:60.01rem) {
    .tr-deck:not(:has(.is-open)) { min-height:19rem; }
    .tr-deck:not(:has(.is-open)) .tr-leaf { flex:1 1 0; }
}
.tr-leaf.is-open .tr-handle { writing-mode:horizontal-tb; padding:1.5rem 1.5rem 0; font:400 clamp(1.75rem,2.3vw,2.5rem)/1.1 var(--serif); letter-spacing:-.035em; }
.tr-face { display:grid; grid-template-columns:minmax(135px,30%) minmax(0,1fr); gap:1.5rem; flex:1; min-width:0; padding:1.5rem; --tr-muted:#b6b9ae; --tr-rule:#45483f; }
.tr-area-menu { min-width:0; }
.tr-area-prompt { margin:0 0 .65rem; color:var(--tr-muted); font:700 .72rem/1.35 var(--mono); letter-spacing:.07em; text-transform:uppercase; }
.tr-area-index { display:grid; align-content:start; min-width:0; gap:1px; padding:1px; background:var(--tr-rule); }
.tr-area-index button { display:flex; align-items:center; min-width:0; min-height:54px; padding:.7rem .75rem; border:0; background:var(--ink); text-align:left; font-size:.875rem; line-height:1.35; color:var(--tr-muted); }
.tr-area-index button:not([aria-pressed=true]):focus-visible { color:var(--paper); background:var(--channel-2); outline-color:var(--paper); }
@media (hover:hover) {
    .tr-area-index button:not([aria-pressed=true]):hover { color:var(--paper); background:var(--channel-2); }
}
.tr-area-index button[aria-pressed=true] { background:var(--paper); color:var(--ink); }
.tr-evidence { display:flex; flex-direction:column; min-width:0; min-height:24rem; }
.tr-proof h4 { margin:0 0 .8rem; font:400 clamp(1.5rem,1.8vw,2rem)/1.12 var(--serif); letter-spacing:-.025em; text-wrap:pretty; }
.tr-proof h4 { scroll-margin-top:6rem; }
.tr-role { margin:0 0 1.3rem; color:var(--tr-muted); font-size:.875rem; line-height:1.45; }
.tr-description { margin:0; font-size:1rem; line-height:1.6; text-wrap:pretty; }
.tr-proof-footer { margin-top:auto; padding-top:1rem; }
.tr-case-access a { display:inline-flex; align-items:center; min-height:44px; font-size:.875rem; text-underline-offset:4px; }
.tr-pagination { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.75rem; padding-top:.5rem; border-top:1px solid var(--tr-rule); }
.tr-pagination button { min-height:44px; padding:.5rem 0; border:0; background:none; font-size:.875rem; line-height:1.4; text-align:left; }
.tr-pagination [data-tr-page=previous] { flex-shrink:0; color:var(--tr-muted); }
.tr-pagination [data-tr-page=next] { max-width:75%; text-align:right; text-wrap:pretty; }
.tr-pagination [data-tr-page=next]>span { display:block; margin-bottom:.25rem; color:var(--tr-muted); font-size:.75rem; }
.tr-pagination button:hover:not(:disabled) { text-decoration:underline; text-underline-offset:4px; }
.tr-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.tr-dialog { width:min(calc(100% - 2rem),34rem); max-height:min(78vh,44rem); margin:auto; padding:0; border:1px solid var(--paper); background:var(--ink); color:var(--paper); box-shadow:0 1.5rem 5rem #0008; }
.tr-dialog::backdrop { background:#10120ed9; backdrop-filter:blur(3px); }
.tr-dialog-shell { display:flex; flex-direction:column; max-height:inherit; }
.tr-dialog-bar { position:sticky; top:0; z-index:1; display:flex; justify-content:flex-end; padding:.65rem .75rem 0; background:var(--ink); }
.tr-dialog-close { min-width:44px; min-height:44px; padding:.5rem; border:0; background:none; color:var(--paper); font:700 .7rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.tr-dialog-close:hover { text-decoration:underline; text-underline-offset:4px; }
.tr-dialog .tr-evidence { min-height:0; padding:0 1.25rem 1.25rem; overflow:auto; }
.tr-dialog .tr-proof-footer { padding-top:2rem; }
/* The fixed résumé actions should not cover evidence as it passes beneath. */
.landing-header[data-range-active=true] .landing-career-actions { visibility:hidden; opacity:0; pointer-events:none; }
.landing-header[data-range-active=true] .landing-role { visibility:hidden; }
@media(max-width:1250px) {
    .technical-range { padding-left:calc(var(--signal-spine-x) + 4rem); padding-right:2rem; }
    .tr-intro { grid-template-columns:minmax(0,1fr); gap:1.5rem; }
    .tr-intro h2 { max-width:18ch; }
    .tr-explore { grid-column:1; }
    .tr-leaf { flex-basis:2.5rem; }
    .tr-face { display:flex; flex-direction:column; padding:1.25rem; gap:1.5rem; }
    .tr-area-index { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1rem; }
    .tr-leaf.is-open .tr-handle { padding:1.25rem 1.25rem 0; }
    .tr-evidence { min-height:21rem; }
}
@media(min-width:48.01rem) and (max-width:60rem) {
    .tr-deck { display:block; min-height:0; }
    .tr-leaf { border:0; border-bottom:1px solid var(--ink); }
    .tr-leaf:last-child { border-bottom:0; }
    .tr-leaf>h3 { display:block; }
    .tr-handle { writing-mode:horizontal-tb; min-height:48px; padding:.75rem 1.25rem; font-size:1rem; }
    .tr-leaf.is-open .tr-handle { font-size:1.75rem; }
}
@media(max-width:48rem) {
    .technical-range { padding:3rem 1rem 4rem calc(var(--signal-spine-x) + 2rem); }
    .tr-intro h2 { min-width:0; max-width:13ch; font-size:clamp(2rem,8.8vw,3.8rem); }
    .tr-explorer { margin-top:2rem; }
    .tr-deck { display:block; min-height:0; }
    .tr-leaf { border:0; border-bottom:1px solid var(--ink); }
    .tr-leaf:last-child { border-bottom:0; }
    .tr-leaf>h3 { display:block; }
    .tr-handle { writing-mode:horizontal-tb; min-height:48px; padding:.75rem 1rem; font-size:1rem; line-height:1.35; }
    .tr-leaf.is-open .tr-handle { padding:1.1rem 1rem 0; font-size:1.75rem; }
    .tr-face { padding:1rem; gap:1.5rem; }
    .tr-area-index { grid-template-columns:1fr; }
    .tr-face>.tr-evidence { display:none; }
    .tr-evidence { min-height:0; }
    .tr-proof h4 { font-size:clamp(1.35rem,6.5vw,1.65rem); }
    .tr-role { margin-bottom:1rem; }
    .tr-pagination { flex-wrap:wrap; }
    .tr-pagination [data-tr-page=next] { margin-left:auto; max-width:100%; }
    .landing-header[data-range-active=true] .landing-header-main { visibility:hidden; }
}
@media (prefers-reduced-motion:reduce) {
    .technical-range *, .landing-header[data-range-active=true] * { scroll-behavior:auto; transition:none; }
}
