/* FOLLOW THE LINE
   Tokens come from ../css/tokens.css. The land keeps its own muted colours; the brand stays small:
   Verde Hondo type, one Arcilla full stop, a Latón hairline for progress, Verde as the page ground.
   Contrast: Verde Hondo #16352A on haze #E7E0D1 = 11.2:1 · Arcilla #AF5F3E on haze = 3.7:1, used
   only as a ≥31px full stop (non-text accent) · Papel on Verde = 9.7:1. */

.ftl-page{margin:0;background:var(--verde);color:var(--on-verde);font-family:"Jost",system-ui,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;}
.ftl-page *{box-sizing:border-box;}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip{position:absolute;left:var(--s-16);top:-120px;z-index:30;background:#F5EFE4;color:#1E4638;padding:var(--s-12) var(--s-16);font-size:var(--t-14);text-decoration:none;}
.skip:focus{top:var(--s-16);}
.ftl-page :focus-visible{outline:2px solid var(--arcilla);outline-offset:3px;}

/* ---- Without JS or WebGL: the story reads top to bottom on the haze ---- */
.ftl{position:relative;background:#E7E0D1;color:#1E4638;}
.ftl-stage{position:relative;padding:var(--s-48) 7vw var(--s-96);}
.ftl-bar{display:flex;justify-content:space-between;align-items:center;}
.ftl-bar a{color:#1E4638;text-decoration:none;font-size:var(--t-12);letter-spacing:.26em;text-transform:uppercase;min-height:44px;display:inline-flex;align-items:center;}
.ftl-copy{list-style:none;margin:var(--s-64) 0 0;padding:0;display:grid;gap:var(--s-48);}
.ftl-copy p{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:clamp(var(--t-31),4.2vw,var(--t-61));line-height:1.04;letter-spacing:-.012em;max-width:16ch;color:#1E4638;}
.ftl-copy .stop{color:var(--arcilla);}
.ftl-canvas,.ftl-scrim,.ftl-veil,.ftl-draw,.ftl-progress{display:none;}
.ftl-steps[hidden]{display:none;}

/* ---- Live: one sticky stage, the scroll is the timeline ---- */
.ftl.ftl-live{height:calc(var(--ftl-len, 2600) * 1svh);}
.ftl-live .ftl-stage{position:sticky;top:0;height:100svh;overflow:hidden;padding:0;outline:none;}
.ftl-live .ftl-bar{position:absolute;z-index:6;top:0;left:0;right:0;padding:var(--s-12) 7vw;}
.ftl-live .ftl-canvas{display:block;position:absolute;inset:0;opacity:0;transition:opacity var(--dur-slow) var(--ease-out);}
.ftl-live.ftl-ready .ftl-canvas{opacity:1;}
.ftl-canvas canvas{display:block;width:100%;height:100%;}
/* a soft haze behind the copy so type never fights the land */
.ftl-live .ftl-scrim{display:block;position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 60% at 0% 100%, rgba(231,224,209,.86) 0%, rgba(231,224,209,.55) 32%, rgba(231,224,209,0) 62%),
             linear-gradient(to bottom, rgba(231,224,209,.7), rgba(231,224,209,0) 12%);}
.ftl-live .ftl-veil{display:block;position:absolute;inset:0;background:#F5EFE4;opacity:0;pointer-events:none;}
.ftl-live .ftl-draw{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;overflow:visible;}
.ftl-draw path{fill:none;stroke:#16352A;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
.ftl-live .ftl-copy{position:absolute;z-index:5;left:7vw;bottom:14svh;width:min(640px,86vw);margin:0;display:block;}
.ftl-live .ftl-copy li{position:absolute;left:0;bottom:0;width:100%;opacity:0;will-change:opacity,transform;}
.ftl-live .ftl-copy li:first-child{opacity:1;}
.ftl-live .ftl-progress{display:block;position:absolute;z-index:6;left:7vw;right:7vw;top:56px;height:1px;background:rgba(143,117,70,.25);}
.ftl-progress span{display:block;height:100%;background:var(--laton);transform-origin:0 50%;transform:scaleX(0);}

/* ---- Reduced motion: still frames, previous / next ---- */
.ftl-reduced .ftl-copy li{transition:opacity var(--dur) var(--ease-out);}
.ftl-steps{position:absolute;z-index:7;right:7vw;bottom:14svh;display:flex;align-items:center;gap:var(--s-16);font-size:var(--t-12);letter-spacing:.2em;text-transform:uppercase;color:#1E4638;}
.ftl-steps button{min-height:44px;min-width:44px;padding:0 var(--s-16);background:transparent;color:#1E4638;border:1px solid var(--laton);border-radius:2px;font:inherit;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;}
.ftl-steps button:disabled{opacity:.4;cursor:default;}
.ftl-count{min-width:5ch;text-align:center;font-variant-numeric:tabular-nums;}

/* ---- Brand kit ----
   Wordmark: Cormorant Garamond Light, uppercase, 0.30em — never bold, never tightened.
   The small mark sits beside it (under 48px), the seal draws itself while the land is built,
   the primary botanical mark signs the last line, and the seal closes the page on Verde.
   Marks use Verde Hondo on Papel (no black) and Latón Claro on Verde. */
.ftl-bar a.ftl-wordmark{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:var(--t-14);letter-spacing:.3em;gap:var(--s-12);}
.ftl-mark-small{width:14px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;}
.ftl-loader{display:none;}
.ftl-live .ftl-loader{display:grid;place-items:center;position:absolute;inset:0;z-index:4;pointer-events:none;transition:opacity var(--dur-slow) var(--ease-out);}
.ftl-live.ftl-ready .ftl-loader{opacity:0;}
.ftl-loader svg{width:72px;height:72px;fill:none;stroke:#16352A;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.ftl-loader .ring{stroke:var(--laton);stroke-width:1.6;opacity:.6;}
.ftl-loader path,.ftl-loader circle{stroke-dasharray:1;stroke-dashoffset:1;animation:ftl-draw var(--dur-draw) var(--ease-out) forwards;}
.ftl-loader g path:nth-child(2){animation-delay:120ms}.ftl-loader g path:nth-child(3){animation-delay:240ms}
.ftl-loader g path:nth-child(4){animation-delay:320ms}.ftl-loader g path:nth-child(5){animation-delay:420ms}
.ftl-loader g path:nth-child(6){animation-delay:560ms}.ftl-loader g path:nth-child(7){animation-delay:680ms}
@keyframes ftl-draw{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion: reduce){.ftl-loader path,.ftl-loader circle{animation:none;stroke-dashoffset:0;}}
.ftl-sign-mark{display:block;width:40px;height:66px;margin:0 0 var(--s-16);fill:none;stroke:#16352A;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.ftl-live .ftl-sign-mark path{stroke-dasharray:1;stroke-dashoffset:1;}
.ftl-sign{display:flex;align-items:center;gap:var(--s-16);}
.ftl-seal{width:44px;height:44px;flex:none;fill:none;stroke:var(--laton-on-verde);stroke-linecap:round;stroke-linejoin:round;}

/* ---- Embedded in The Work: the site's own bar and footer frame it, so these step aside ---- */
.ftl-embed .ftl-bar,.ftl-embed .ftl-after,.ftl-embed .skip,
.ftl-embed .ftl-live .ftl-copy,.ftl-embed .ftl-live .ftl-steps,.ftl-embed .ftl-live .ftl-progress,.ftl-embed .ftl-live .ftl-scrim{display:none;}
/* …except the last line: The Work ends as the film does — her mark, the line, and her name */
.ftl-embed.ftl-work .ftl-live .ftl-copy{display:block;}
.ftl-work .ftl-copy li:not(.ftl-last){display:none;}
/* The Work settles on Verde: the veil turns green (main.js) and everything drawn on it turns Papel.
   On #1E4638: Papel 9.23:1 · Latón Claro 4.86:1 (non-text) · dark-theme Arcilla #D08A64 3.77:1 (display stop). */
.ftl-work .ftl-draw path,.ftl-work .ftl-sign-mark,.ftl-work .ftl-copy p,.ftl-work .ftl-name{transition:stroke 420ms var(--ease-out),color 420ms var(--ease-out);}
.ftl-work.ftl-green .ftl-draw path{stroke:#F5EFE4;}
.ftl-work.ftl-green .ftl-sign-mark{stroke:var(--laton-on-verde);}
.ftl-work.ftl-green .ftl-copy p{color:#F5EFE4;}
.ftl-work.ftl-green .ftl-copy .stop{color:#D08A64;}
.ftl-work.ftl-green .ftl-name{color:color-mix(in srgb,#F5EFE4 80%,#1E4638);}
.ftl-name{display:block;max-width:34ch;margin-top:var(--s-48);font-family:Jost,system-ui,sans-serif;font-weight:400;font-size:var(--t-12);line-height:1.8;letter-spacing:.24em;text-transform:uppercase;color:#1E4638;}

/* ---- The Work's editorial layers (js/story.js): Latón annotations, Verde Hondo drawing, Arcilla only where a layout fails and at the one judgment ---- */
.ftl-story{display:none;}
.ftl-live .ftl-story{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible;}
.ftl-story path{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.ftl-story .ink{stroke:#16352A;stroke-width:2.3;}
.ftl-story .brass{stroke:#8F7546;stroke-width:2.1;}
.ftl-story .thin{stroke-width:1.6;}
.ftl-story .dash{stroke-dasharray:6 5;}
.ftl-story .fail{stroke:#AF5F3E;stroke-width:2.3;}
.ftl-story .dot{fill:#8F7546;}
.ftl-story .node{fill:#F5EFE4;stroke:#8F7546;stroke-width:1.3;transition:fill 420ms cubic-bezier(.16,1,.3,1),stroke 420ms cubic-bezier(.16,1,.3,1);}
.ftl-story .node.done{fill:#8F7546;}
.ftl-story .node.judgment{stroke:#AF5F3E;stroke-width:1.6;}
.ftl-story .pulse{fill:#16352A;}
.ftl-story .ink{stroke:#1E4638;}
.ftl-story .spot{fill:#F5EFE4;stroke:none;}
.ftl-story .ring{fill:none;stroke:#8F7546;stroke-width:1.4;}
.ftl-story .road{stroke-width:2.2;}
.ftl-story .usable{fill:rgba(143,117,70,.14);stroke:#8F7546;stroke-width:1.2;}
.ftl-story .lane{stroke-width:3;}
.ftl-story .blk{fill:none;stroke:#1E4638;stroke-width:1.5;}
.ftl-story .bar{fill:rgba(30,70,56,.28);stroke:none;}
.ftl-story .contract{fill:#8F7546;}
.ftl-story .sold{fill:#1E4638;}
.ftl-story text.dia{fill:#16352A;font-size:15px;letter-spacing:.14em;}
.ftl-story text.small{font-size:13px;letter-spacing:.14em;}
/* the city in the mountains: clean lines in the brand's Verde */
.ftl-story .sketch{stroke:#1E4638;stroke-width:2.2;}
.ftl-story .sketch.thin{stroke-width:1.3;}
/* her ask: labels read over any background — larger Jost in Verde Hondo on a Papel chip (filter #ftl-chip, story.js).
   Verde Hondo on Papel 11.56:1. A soft Papel wash sits behind the drawings while a diagram is on (.ftl-wash). */
.ftl-story text{font-family:"Jost",system-ui,sans-serif;font-size:14px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;fill:#16352A;stroke:none;filter:url(#ftl-chip);}
.ftl-story .ftl-wash{fill:#ECE5D7;stroke:none;pointer-events:none;}
/* narrow: never under 12px — where words would crowd, story.js shows them one at a time instead of shrinking them */
@media (max-width:720px){ .ftl-story text{font-size:12px;} .ftl-story text.dia{font-size:13px;} .ftl-story text.small{font-size:12px;} }

/* ---- After ---- */
.ftl-after{background:var(--verde);color:var(--on-verde);padding:var(--s-96) 7vw;display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-24);}
.ftl-sign{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-size:var(--t-20);}
.ftl-after a{color:var(--on-verde);font-size:var(--t-12);letter-spacing:.26em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--laton-on-verde);min-height:44px;display:inline-flex;align-items:center;}
.ftl-after a:focus-visible{outline-color:var(--laton-on-verde);}

@media (max-width: 720px){
  .ftl-live .ftl-copy{left:6vw;right:6vw;width:auto;bottom:10svh;}
  .ftl-copy p{font-size:var(--t-31);max-width:14ch;}
  .ftl-live .ftl-scrim{background:linear-gradient(to top, rgba(231,224,209,.9) 0%, rgba(231,224,209,.6) 26%, rgba(231,224,209,0) 48%),
             linear-gradient(to bottom, rgba(231,224,209,.7), rgba(231,224,209,0) 12%);}
  .ftl-steps{left:6vw;right:6vw;bottom:calc(10svh + 120px);justify-content:space-between;}
  .ftl-live .ftl-progress{left:6vw;right:6vw;}
}