/* Latitude Loom — page-specific rules. Everything shared (tokens, nav, footer, skip link,
   focus rings) comes from /assets/fr.css and /assets/fr.js, as on every other page. */

/* Two layouts, and no page may mix them: .l-sec is the two-column head/body of a prose section,
   .l-stack is a full-width run of blocks. Setting flex-direction:column on .l-sec instead would
   leave it a wrapping flex container, which wraps a tall child into a second column and clips it. */
.l-sec{max-width:1320px;margin:0 auto;padding:clamp(40px,5vw,72px) clamp(16px,4vw,48px);display:flex;flex-wrap:wrap;gap:28px 64px}
.l-stack{max-width:1320px;margin:0 auto;padding:clamp(40px,5vw,72px) clamp(16px,4vw,48px);display:grid;gap:24px}
.l-stack>*{min-width:0}
.l-head{flex:1 1 300px;max-width:400px;min-width:0;display:flex;flex-direction:column;gap:12px}
.l-body{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:20px}
.l-eyebrow{font-family:var(--fr-font-mono);font-weight:600;font-size:13px;letter-spacing:.14em;color:var(--fr-ink-muted)}
.l-sec h2{margin:0;font-weight:900;font-size:clamp(26px,3vw,38px);line-height:1.03;letter-spacing:-.025em;text-wrap:balance}
.l-sec p{margin:0;max-width:760px;font-size:17px;line-height:1.6;color:var(--fr-ink-3)}
.l-card{background:var(--fr-card);border:2px solid var(--fr-ink);border-radius:8px}

/* controls: the same white-on-ink buttons the rest of the site uses */
.l-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px}
.l-bar fieldset{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:5px}
.l-bar legend,.l-field>span{font-family:var(--fr-font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--fr-ink-muted);padding:0}
.l-set{display:flex}
.l-set button{background:var(--fr-card);border:1.5px solid var(--fr-ink);margin-left:-1.5px;padding:10px 14px 8px;font-weight:700;font-size:14px;min-height:40px;color:var(--fr-ink)}
.l-set button:first-child{margin-left:0;border-radius:6px 0 0 6px}
.l-set button:last-child{border-radius:0 6px 6px 0}
.l-set button:hover{background:var(--fr-paper-2)}
.l-set button[aria-pressed="true"]{background:var(--fr-ink);color:#fff;position:relative;z-index:1}
.l-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.l-field select{font-size:14px;font-weight:600;padding:9px 10px 7px;min-height:40px;border:1.5px solid var(--fr-ink);border-radius:6px;background:var(--fr-slip-cream);color:var(--fr-ink)}
.l-btn{background:var(--fr-card);border:1.5px solid var(--fr-ink);border-radius:6px;padding:10px 14px 8px;font-weight:700;font-size:14px;min-height:40px;color:var(--fr-ink)}
.l-btn:hover{background:var(--fr-paper-2)}
.l-check{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;min-height:40px;color:var(--fr-ink-3)}

/* the tapestry */
.l-weave{border:2px solid var(--fr-ink);border-radius:8px;background:var(--fr-card);overflow-x:auto;overscroll-behavior-x:contain}
.l-weave svg{display:block;min-width:720px;width:100%;height:auto}
#tapestry text,#timeline text,#profile text,#globe text{font-family:var(--fr-font-mono);font-size:11px;font-weight:600;fill:var(--fr-ink-muted)}
#tapestry text.k,#timeline text.k,#profile text.k{font-size:10px;letter-spacing:.1em;fill:var(--fr-ink-3)}
.l-rule{stroke:var(--fr-rule-strong);stroke-width:1}
.l-hold{fill:none;stroke:var(--fr-ink);stroke-width:2;pointer-events:none}
.l-pt{cursor:pointer}
.l-pt:hover{stroke:var(--fr-ink);stroke-width:2}

/* the readout under the weave */
.l-read{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));border-top:2px solid var(--fr-ink)}
.l-read>div{padding:14px 18px 16px;border-left:1px solid var(--fr-rule);display:flex;flex-direction:column;gap:3px}
.l-read>div:first-child{border-left:0}
.l-read span{font-family:var(--fr-font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--fr-ink-muted)}
.l-read b{font-family:var(--fr-font-mono);font-weight:700;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.01em}
.l-read small{font-size:13px;color:var(--fr-ink-muted)}
.l-read b.warm{color:#B8232B}
.l-read b.cold{color:var(--fr-rest-area-blue)}

/* the colour key */
.l-key{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-family:var(--fr-font-mono);font-size:12px;font-weight:700;color:var(--fr-ink-muted)}
.l-ramp{flex:1 1 220px;min-width:180px;height:14px;border:1px solid var(--fr-ink);border-radius:2px}

.l-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:24px;align-items:start}
.l-plot{display:grid;gap:10px;align-content:start}
.l-plot h3{margin:0;font-weight:800;font-size:19px;letter-spacing:-.01em}
.l-plot p{font-size:14px;color:var(--fr-ink-muted);max-width:none}
.l-plot svg{display:block;width:100%;height:auto;border:1.5px solid var(--fr-rule);border-radius:6px;background:var(--fr-card)}

/* Four cards, so two columns: auto-fit at a narrower minimum gives three and leaves a row
   with two empty cells showing through as gap colour. */
.l-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:1px;background:var(--fr-rule)}
.l-grid>div{background:var(--fr-card);padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px}
.l-grid span{font-family:var(--fr-font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--fr-guide-green)}
.l-grid p{font-size:15px;line-height:1.5}

.l-note{font-family:var(--fr-font-mono);font-size:12px;font-weight:600;color:var(--fr-ink-muted);margin:0}
details.l-table{border:2px solid var(--fr-ink);border-radius:8px;background:var(--fr-card)}
details.l-table>summary{padding:14px 18px 12px;font-weight:800;font-size:16px;cursor:pointer}
.l-scroll{max-height:440px;overflow:auto;border-top:1px solid var(--fr-rule)}
.l-table table{border-collapse:collapse;width:100%;font-size:14px}
.l-table th,.l-table td{text-align:left;padding:10px 16px 8px;border-top:1px solid var(--fr-rule);white-space:nowrap}
.l-table thead th{position:sticky;top:0;border-top:0;background:var(--fr-ink);color:#fff;font-family:var(--fr-font-mono);font-size:11px;letter-spacing:.1em}
.l-table td{font-family:var(--fr-font-mono);font-weight:600}
.l-table tr.on td{background:var(--fr-guide-green-tint)}
.l-table td button{background:none;border:0;padding:0;font:inherit;font-weight:800;color:var(--fr-guide-green);text-decoration:underline}

@media (max-width:640px){
  .l-sec{gap:20px}
  .l-head{max-width:none}
}