*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#f5f0e8;--bg-alt:#ebe4d6;--ink:#2c1810;--ink2:#3d2e1f;--rule:#c4b9a0;--green:#4a6741;--red:#8b2500;--gold:#9c7a3c;--highlight:#e8d5a3}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink2);font-family:'Literata',serif;font-weight:400;font-size:clamp(0.95rem,1.1vw,1.15rem);line-height:1.7;overflow-x:hidden;background-image:repeating-linear-gradient(0deg,transparent 0px,transparent 47px,var(--rule) 47px,var(--rule) 48px);background-size:100% 48px}

.folio-gutter{position:fixed;left:1rem;top:50%;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column;gap:1.5rem}
.folio-mark{font-family:'DM Serif Display',serif;font-size:0.8rem;color:var(--rule);text-decoration:none;transition:color 0.3s}
.folio-mark.active,.folio-mark:hover{color:var(--ink)}

.ledger{min-height:100vh;padding:4rem 4rem 4rem 6rem;display:grid;grid-template-columns:repeat(12,1fr);gap:0 1rem;position:relative}
@media(max-width:768px){.ledger{padding:2rem;grid-template-columns:1fr}}

.ledger-content{grid-column:3/11;display:flex;align-items:center;gap:4rem}
.margin-annotation{grid-column:11/13;padding-top:40vh;font-family:'Literata',serif;font-size:clamp(0.75rem,0.85vw,0.85rem);color:var(--gold)}
.manicule{font-size:1.2rem;display:block;margin-bottom:0.25rem}
.annotation-text{font-style:italic}

/* Hero */
.hero-text h1{font-family:'DM Serif Display',serif;font-weight:400;font-size:clamp(2.5rem,6vw,7rem);color:var(--ink);letter-spacing:0.03em}
.hero-desc{font-size:1rem;color:var(--ink2);margin-top:0.5rem}

/* Isometric stack */
.isometric-stack{perspective:1200px;transform-style:preserve-3d;width:200px;height:200px;position:relative}
.iso-plane{position:absolute;width:160px;height:100px;background:var(--bg-alt);border:1px solid var(--rule);transform:rotateX(30deg) rotateY(-15deg)}
.p1{top:0;box-shadow:0 2px 4px rgba(0,0,0,0.05)}.p2{top:4px}.p3{top:8px}.p4{top:12px;background:var(--bg)}

/* Section headings */
.ledger-heading{grid-column:3/9;font-family:'DM Serif Display',serif;font-weight:400;font-size:clamp(1.8rem,3vw,3.5rem);color:var(--ink);font-variant:small-caps;margin-bottom:1rem}
.triple-rule{grid-column:3/11;height:5px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin-bottom:2rem}

/* Journal */
.journal-grid{grid-column:3/11}
.journal-entry{display:grid;grid-template-columns:1fr 1px 1fr;gap:1.5rem;margin-bottom:3rem;opacity:0;transform:translateY(12px);transition:opacity 0.6s ease,transform 0.6s ease}
.journal-entry.visible{opacity:1;transform:translateY(0)}
.journal-rule{background:var(--rule)}
.debit-col strong,.credit-col strong{font-family:'DM Serif Display',serif;font-size:1rem;display:block;margin-bottom:0.5rem;color:var(--ink)}

/* T-accounts */
.t-accounts{grid-column:3/11;display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.t-account{opacity:0;transform:translateY(12px);transition:opacity 0.6s ease,transform 0.6s ease}
.t-account.visible{opacity:1;transform:translateY(0)}
.t-title{font-family:'DM Serif Display',serif;font-size:1.2rem;margin-bottom:0.5rem;color:var(--ink)}
.t-shape{position:relative}.t-shape svg{width:100%;height:auto}
.t-line{stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1.5s ease}
.t-account.visible .t-line{stroke-dashoffset:0}
.t-left,.t-right{position:absolute;top:40%;font-family:'Fira Code',monospace;font-size:clamp(0.85rem,1vw,1rem);letter-spacing:0.05em}
.t-left{left:15%}.t-right{right:15%}
.num.credit{color:var(--green)}.num.debit{color:var(--red)}
.ledger-note{grid-column:3/9;margin-top:2rem;font-style:italic;opacity:0;transition:opacity 0.6s ease}
.ledger-note.visible{opacity:1}

/* Trial table */
.trial-table{grid-column:3/11;width:100%;border-collapse:collapse;font-family:'Fira Code',monospace;font-size:clamp(0.85rem,1vw,1rem)}
.trial-table th{font-family:'DM Serif Display',serif;font-variant:small-caps;text-align:left;padding:0.5rem 1rem;border-bottom:2px solid var(--ink);font-weight:400}
.trial-table td{padding:0.5rem 1rem;border-bottom:1px solid var(--rule)}
.trial-table .alt{background:var(--bg-alt)}
.balance-row td{border-bottom:3px double var(--ink);border-top:1px solid var(--ink)}
.trial-table .num{text-align:right;letter-spacing:0.05em}

/* Closing */
.closing-statement{grid-column:3/11;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2rem;min-height:60vh}
.closing-text{font-family:'DM Serif Display',serif;font-weight:400;font-size:clamp(1.5rem,3vw,2.5rem);max-width:600px;color:var(--ink)}
.iso-single{width:200px;height:60px;background:var(--bg-alt);border:1px solid var(--rule);transform:perspective(1200px) rotateX(15deg) rotateY(-10deg)}
.manicule.up{font-size:1.5rem;color:var(--gold)}

.fade-in{opacity:0;transform:translateY(12px);transition:opacity 0.6s cubic-bezier(0.25,0.1,0.25,1),transform 0.6s cubic-bezier(0.25,0.1,0.25,1)}
.fade-in.visible{opacity:1;transform:translateY(0)}

@media(prefers-reduced-motion:reduce){
*{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
.fade-in,.journal-entry,.t-account,.ledger-note{opacity:1;transform:none}
}
