/* TENORE & CO. — termsheet.css
   Direction v7 (2026-09-05): the engagement is one instrument, set as a term sheet, read on a drafting table.
   Two modes, one DOM. `html.ts3d`: the sheets are CSS3D objects over a WebGL table; the body scrolls a spacer
   (`.ts-track`) that drives the camera along the tenor. `html.flat` (reduced motion, no WebGL, or ?flat):
   the same sheets flow as a page. Obeys DESIGN.md: two grounds (paper sheet on charcoal table), one oxblood,
   four families, hairlines, no imagery. */

/* ---- layers ---- */
html.ts3d, html.ts3d body{overflow-x:hidden}
.ts-gl{position:fixed;inset:0;z-index:0;pointer-events:none}
.ts-css{position:fixed;inset:0;z-index:2;pointer-events:none}
.ts-css .sheet{pointer-events:auto}
.ts-track{position:relative;z-index:1;width:100%;pointer-events:none}
html.flat .ts-gl,html.flat .ts-track{display:none}
#top{position:absolute;top:0}

/* ---- the sheets ---- */
.sheets{position:relative;z-index:1}
html.js .sheets{visibility:hidden}          /* until the view is decided; the CSS3D layer re-parents the sheets in 3D */
html.flat .sheets{visibility:visible}
html.flat .sheets{display:grid;justify-items:center;gap:2.6rem;padding:5rem 1rem 8rem}
.sheet{box-sizing:border-box;width:min(640px,calc(100vw - 2rem));background:var(--paper);color:var(--warm-black);
  padding:clamp(1.5rem,4vw,2.4rem) clamp(1.2rem,4vw,2.2rem) clamp(1.6rem,4vw,2.4rem);position:relative;
  box-shadow:0 0 0 1px rgba(28,26,23,.06),0 18px 40px -22px rgba(0,0,0,.55)}
html.ts3d .sheet{box-shadow:0 0 0 1px rgba(28,26,23,.08);transition:opacity .38s var(--ease),filter .5s var(--ease);will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}
html.ts3d .sheet.folded{opacity:0;transition-duration:.12s}
html.ts3d .sheet.far{filter:brightness(.6) saturate(.9)}
.sheet .rv{opacity:1;transform:none}

.ts-head{display:flex;justify-content:space-between;gap:1rem;font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--stone-paper);border-bottom:1px solid var(--warm-black);padding-bottom:.55rem;margin-bottom:1.3rem}
.ts-head span:nth-child(2){text-align:center}.ts-head span:last-child{text-align:right}
.ts-clause{display:block;font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-paper);margin:1.4rem 0 .5rem}
.ts-wm{font-family:"Cormorant SC",serif;font-weight:500;letter-spacing:.16em;font-size:clamp(1.9rem,5.2vw,3rem);line-height:1;margin:.6rem 0 .5rem;color:var(--warm-black)}
.ts-wm .amp{font-family:"Cormorant",serif;font-style:italic;font-weight:400;color:var(--stone-paper);letter-spacing:0}
.ts-sub{font-family:"Cormorant",serif;font-weight:500;font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.2;margin:.2rem 0 0}
.sheet .statement{font-size:clamp(1.55rem,3.4vw,2.35rem);margin:.2rem 0 .7rem}
.sheet .body{font-size:1.02rem;line-height:1.6;max-width:none;margin:0 0 .6rem}
.sheet .tag{color:var(--stone-paper)}
.sheet .def{margin-top:.3rem}
.sheet .def-word{font-size:clamp(1.8rem,4.4vw,2.6rem)}

/* line items — the clauses */
.ts-rows{list-style:none;margin:1.1rem 0 0;padding:0;border-top:1px solid var(--rule-d);counter-reset:none}
.ts-rows li{display:grid;grid-template-columns:2.8rem 1fr auto;gap:.7rem;align-items:baseline;padding:.5rem 0;border-bottom:1px solid var(--rule-d);font-size:.98rem;line-height:1.45}
.ts-rows .n,.ts-rows .fig{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.14em;color:var(--stone-paper);text-transform:uppercase}
.ts-rows .fig{text-align:right}
.ts-circ{color:var(--oxblood);border:1px solid var(--oxblood);border-radius:999px;padding:0 .42em;display:inline-block;line-height:1.3}
.ts-annex{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1.1rem}
.ts-annex div{border-top:1px solid var(--warm-black);padding-top:.45rem;font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-paper)}
.ts-annex b{display:block;font-weight:500;font-size:1.1rem;color:var(--warm-black);letter-spacing:.06em;margin-bottom:.15rem}
.ts-annex small{display:block;font-family:"EB Garamond",serif;font-size:.86rem;letter-spacing:0;text-transform:none;color:var(--stone-paper);margin-top:.25rem;line-height:1.35}

/* the standard — a margin note initialled on each clause sheet */
.ts-std{border-left:1px solid var(--oxblood);padding-left:.9rem;margin-top:1.4rem;font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-paper);line-height:1.7}
.ts-std b{display:block;color:var(--oxblood);font-weight:500}

/* record + writing on one sheet */
.ts-record .aside,.sheet .aside{border-left:1px solid var(--oxblood);padding-left:.9rem;margin-top:1rem;font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.06em;color:var(--stone-paper);line-height:1.55}
.sheet .aside .hd{display:block;text-transform:uppercase;letter-spacing:.2em;font-size:.58rem;margin-bottom:.3rem}
.sheet .aside b{color:var(--warm-black);font-weight:500}
.sheet .meta-row{border-top:1px solid var(--rule-d);border-bottom:1px solid var(--rule-d);margin-top:1rem;color:var(--stone-paper)}
.sheet .meta-row b{color:var(--warm-black)}
.ts-rule{border:0;border-top:1px solid var(--warm-black);margin:1.6rem 0 1.1rem}
.ts-coda{font-family:"Cormorant",serif;font-style:italic;font-weight:500;font-size:1.15rem;color:var(--warm-black);margin:1rem 0 0}

/* signature page: the form is the signature block; the colophon the notary line */
.sheet .contact{margin-top:.6rem}
.sheet .flabel,.sheet .consent{color:var(--stone-paper)}
.sheet .consent a,.sheet .consent a.ul{color:var(--oxblood)}
.sheet .finput{color:var(--warm-black);border-bottom-color:var(--rule-d)}
.sheet .act{color:var(--warm-black);border-color:var(--warm-black)}
.sheet .act:hover{color:var(--paper)}
.sheet .linkmono,.sheet .linkmono a{color:var(--stone-paper)}
.ts-colophon{margin-top:1.8rem;padding-top:.8rem;border-top:1px solid var(--warm-black);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.2rem;
  font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-paper)}
.ts-colophon a{color:var(--stone-paper);text-decoration:none;margin-right:.9rem}
.ts-colophon .fm{font-family:"Cormorant SC",serif;font-size:.9rem;letter-spacing:.14em;color:var(--warm-black)}

/* ---- the tenor: the time arrow along the table's near edge ---- */
.tenor{position:fixed;left:0;right:0;bottom:0;z-index:5;padding:1.1rem var(--gutter) .9rem;display:flex;align-items:flex-end;gap:1.2rem;
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);
  background:linear-gradient(to top,var(--charcoal) 90%,rgba(22,21,15,0))}
.tenor .fig{min-width:7ch;color:var(--warm-white);padding-bottom:.15rem}
.tenor .fig i{font-style:normal;color:var(--stone);margin-left:.4em}
.tenor-track{position:relative;flex:1;touch-action:none}
.tenor ol{list-style:none;display:flex;margin:0;padding:0;border-top:1px solid var(--rule)}
.tenor li{flex:1;min-width:0}
.tenor a{display:block;padding:.55rem .3rem 0 0;color:var(--stone);text-decoration:none;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s var(--ease)}
.tenor a::before{content:"";position:absolute;top:-1px;left:0;width:1px;height:7px;background:var(--stone);transition:height .3s var(--ease),background .3s}
.tenor a .no{color:var(--warm-white);margin-right:.5em}
.tenor a.active,.tenor a.active .no{color:var(--oxblood-d)}
.tenor a.active::before{background:var(--oxblood-d);height:12px}
.tenor a:focus-visible{outline:2px solid var(--oxblood-d);outline-offset:2px}
.tenor .thumb{position:absolute;top:-4px;width:7px;height:7px;margin-left:-3.5px;background:var(--oxblood-d);pointer-events:none;transition:left .12s linear}
html.flat .tenor .thumb{display:none}
@media (max-width:760px){.tenor a .lbl{display:none}.tenor{padding-left:1rem;padding-right:1rem;gap:.8rem}.tenor .fig{min-width:5ch}}

/* the cue on the cover, only in 3D */
.ts-cue{position:fixed;right:var(--gutter);bottom:4.2rem;z-index:5;font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);
  animation:tsBreathe 3.2s var(--ease) infinite;transition:opacity .5s}
html.flat .ts-cue,body.moved .ts-cue{animation:none;opacity:0;pointer-events:none}
@keyframes tsBreathe{0%,100%{opacity:.35}50%{opacity:.9}}
@media (prefers-reduced-motion:reduce){.ts-cue{animation:none}}

/* narrow sheets: the header row on one line, the cue reduced to its arrow */
@media (max-width:480px){
  .ts-head{font-size:.52rem;letter-spacing:.1em;gap:.6rem}
  .ts-head span:nth-child(2){display:none}
  .ts-cue{right:1rem;bottom:4rem;font-size:.55rem;letter-spacing:.12em}
  .ts-cue .long{display:none}
}

/* the view switch at the bar's right end: the table, or the flat page */
.tenor .view{color:var(--stone);text-decoration:none;white-space:nowrap;padding-bottom:.15rem;border-bottom:1px solid var(--rule);transition:color .3s var(--ease),border-color .3s}
.tenor .view:hover,.tenor .view:focus-visible{color:var(--oxblood-d);border-color:var(--oxblood-d);outline:none}

/* ---- the lamp: the opening gesture (v7.1) ---- */
html.unlit .ts-css .sheet{filter:brightness(.62) saturate(.9)}
html.unlit .tenor{opacity:0;pointer-events:none}
html.unlit .ts-cue{animation:none;opacity:0;pointer-events:none}
.tenor{transition:opacity .9s var(--ease)}
.lamp{position:fixed;top:0;right:clamp(1.6rem,9vw,8rem);z-index:6;display:flex;flex-direction:column;align-items:center;gap:.7rem;
  background:none;border:0;padding:0 .2rem .4rem;cursor:pointer;color:var(--stone);font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  transition:opacity .8s var(--ease),color .3s}
.lamp::before{content:"";display:block;width:1px;height:clamp(64px,14vh,130px);background:var(--stone);transition:background .3s}
.lamp i{display:block;width:10px;height:10px;border:1px solid var(--stone);border-radius:50%;transition:border-color .3s,background .3s}
.lamp:hover,.lamp:focus-visible{color:var(--oxblood-d);outline:none}
.lamp:hover::before,.lamp:focus-visible::before{background:var(--oxblood-d)}
.lamp:hover i,.lamp:focus-visible i{border-color:var(--oxblood-d);background:var(--oxblood-d)}
.lamp.off{opacity:0;pointer-events:none}
@media (max-width:760px){ /* a full-width sheet leaves no margin for a cord: the pull sits on the table's near edge instead */
  .lamp{top:auto;bottom:1.2rem;right:auto;left:50%;transform:translateX(-50%);flex-direction:row;gap:.7rem;padding:.5rem .9rem;background:rgba(22,21,15,.85)}
  .lamp::before{display:none}}
.lamp-alt{position:fixed;top:calc(clamp(64px,14vh,130px) + 3.4rem);right:clamp(1.6rem,9vw,8rem);z-index:6;color:var(--stone);text-decoration:none;font-family:"IBM Plex Mono",monospace;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;padding:.35rem .6rem;background:rgba(22,21,15,.85);border-bottom:1px solid var(--rule);transition:opacity .8s var(--ease),color .3s}
.lamp-alt:hover,.lamp-alt:focus-visible{color:var(--oxblood-d);border-color:var(--oxblood-d);outline:none}
.lamp-alt.off{opacity:0;pointer-events:none}
@media (max-width:760px){.lamp-alt{top:auto;right:auto;bottom:4.2rem;left:50%;transform:translateX(-50%)}}