/* =====================================================================
   Paper and Ink · essays/you-have-to-be-able-to-leave.css
   "You Have to Be Able to Leave": the figures only this essay uses.
   Loaded after the shared stylesheets; everything shared lives in css/.
   ===================================================================== */

/* Layout: one 64ch reading column on grained paper; two paper objects break out to 860px:
   a contract page open at its termination clause beside a printed export manifest (Figure 1)
   and a migration schedule drawn on taped graph paper (Figure 2).
   Gold = the contractual right to leave; blue = the practical ability to leave; dates and gaps are graphite. */

/* ---- footnote markers -------------------------------------------------- */
sup.ref { font-family: var(--sans); font-size: .62em; line-height: 0; margin-left: 1px; }
sup.ref a { text-decoration: none; color: var(--life); padding: 0 1px; }
sup.ref a:hover { text-decoration: underline; }
.sources li:target { color: var(--ink); background: var(--life-soft); }

/* ---- Figure 1: the clause and the manifest ------------------------------- */
/* clip sideways overflow so a stamp's starting scale can never widen the page on a phone */
.exfig { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 0 30px; align-items: start; overflow-x: clip; overflow-clip-margin: 14px; padding: 8px 4px 0; }
.contract {
  position: relative; background: var(--noise), var(--sheet); padding: 1.3rem 1.4rem 1.3rem; transform: rotate(-.7deg);
  font-family: var(--serif); font-size: .98rem; line-height: 1.5; color: var(--slip-ink); animation: fade .6s ease .1s both;
}
.ch { font-family: var(--sans); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; margin: 0; opacity: .8; }
.cn { font-family: var(--mono); font-size: .68rem; opacity: .65; margin: .15rem 0 .8rem; }
.cl { margin: 0 0 .7rem; }
.cl.dim { opacity: .45; }
.contract .c-once { animation-delay: .9s; }
.unsaid { border-top: 1px dashed color-mix(in srgb, var(--slip-ink) 35%, transparent); padding-top: .6rem; margin-top: .3rem; color: var(--slip-life); animation: fade .7s ease 2s both; }
.unsaid p { margin: 0 0 .2rem; font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.unsaid ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 1rem; }
.unsaid li { font-family: var(--serif); font-style: italic; font-size: 1.02rem; line-height: 1.35; }
.unsaid li::before { content: "?"; font-style: normal; font-weight: 600; margin-right: .4rem; }
.manifest {
  position: relative; background: var(--noise), var(--slip); padding: 1.1rem 1.1rem 1.4rem; margin-top: 26px; transform: rotate(1.6deg);
  font-family: var(--mono); font-size: .72rem; line-height: 1.6; color: var(--slip-ink); animation: fade .6s ease .5s both;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
}
.mh { text-align: center; letter-spacing: .16em; font-weight: 500; margin: 0; }
.ms { text-align: center; font-size: .64rem; letter-spacing: .06em; opacity: .7; margin: 0 0 .5rem; }
.mrule { border-top: 1px dashed currentColor; opacity: .45; margin: .45rem 0; }
.mf { display: flex; gap: .45rem; align-items: baseline; margin: 0; }
.mf span { flex: none; }
.mf i { flex: 1; min-width: 10px; border-bottom: 1px dotted currentColor; opacity: .4; transform: translateY(-.35em); }
.mf.got { color: var(--slip-once); }
.mf.miss { color: var(--slip-life); }
.mf.got:nth-of-type(1) { animation: fade .4s ease .6s both; }
.manifest .miss { animation: fade .5s ease 2.4s both; }
.manifest .stamp { display: table; margin: .7rem 0 0 auto; color: var(--slip-once); transform: rotate(-6deg); font-size: .64rem; animation-delay: 1.5s; }
.xnotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 40px; margin-top: 1.4rem; }
.xnotes .mnote p { color: var(--ink); }
.xnotes .n1 { animation: fade .7s ease 1.7s both; }
.xnotes .n2 { animation: fade .7s ease 2.8s both; }
.xnotes .n1 .pen path { animation-delay: 1.7s; }
.xnotes .n2 .pen path { animation-delay: 2.8s; }
.xnotes .n1 b { color: var(--once); }
.xnotes .n2 b { color: var(--life); }
.again { margin-top: 1rem; }

/* ---- Figure 2: the migration schedule ------------------------------------ */
#sheet2 { cursor: auto; touch-action: auto; }
.plan text { fill: var(--slip-ink); }
/* a paper-colored halo keeps task names legible where a dependency arrow passes behind them */
.plan .rowname { font-family: var(--sans); font-size: 12px; paint-order: stroke; stroke: var(--sheet); stroke-width: 5px; stroke-linejoin: round; }
.plan .rowname.sm { font-size: 11px; fill: var(--graphite); }
.plan .tk { stroke: var(--slip-ink); stroke-width: 1; opacity: .5; }
.plan .tk.major { opacity: .85; }
.plan .bar { fill: var(--slip-life); stroke: var(--slip-life); stroke-width: 1.2; opacity: .88; }
.plan .ms-life { fill: var(--slip-life); }
.plan .ms-once { fill: var(--slip-once); }
.plan .right { fill: none; stroke: var(--slip-once); stroke-width: 2.4; stroke-linecap: round; }
.plan .right.win { stroke-dasharray: 5 5; stroke-width: 2; }
.plan .ends { stroke: var(--graphite); stroke-width: 1.4; stroke-dasharray: 2 5; stroke-linecap: round; }
.plan .gapband { fill: url(#hatchG); }
.plan .dep { fill: none; stroke: var(--slip-ink); stroke-width: 1.2; stroke-linecap: round; opacity: .7; }
.plan .accbox { fill: var(--slip); stroke: var(--slip-life); stroke-width: 1.4; }
.plan .acc { font-family: var(--mono); font-size: 11.5px; fill: var(--slip-life); }
.plan .acch { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .14em; fill: var(--slip-life); }
.plan .bars { animation: wipe 1.6s ease .4s both; }

@media (max-width: 640px) {
  .exfig { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .manifest { margin-top: 14px; }
  .unsaid ul { grid-template-columns: minmax(0, 1fr); }
  .xnotes { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .xnotes .pen { display: none; }
}

/* Phone mode: the clause and the manifest stack. Figure 2 is redrawn by the page script as a narrower, taller
   schedule (viewBox 400 wide) with each task's name above its bar, so it fits with no sideways scroll and its
   text renders at 11px or more. */
@media (max-width: 560px) {
  .contract { padding: 1.1rem 1rem; font-size: .92rem; }
  .manifest { padding: 1rem .9rem 1.3rem; font-size: .68rem; }
  .sheet-scroll { overflow-x: clip; }
  .sheet { min-width: 0; padding: 24px 8px 10px; }
  .plan .rowname { font-size: 15px; }
  .plan .rowname.sm { font-size: 13.5px; }
  .plan .svgnote { font-size: 15.5px; }
  .plan .svglab { font-size: 16px; }
  .plan .tick { font-size: 13.5px; }
  .plan .acc { font-size: 13.5px; }
  .plan .acch { font-size: 12px; }
}