.ecrits{--ink:var(--c-encre);
    --ink-soft:var(--c-sepia);
    --paper:#f4efe6;
    --paper-deep:#ebe3d4;
    --gold:var(--c-or);
    --gold-deep:#7a5e2a;
    --rust:#8d4a2f;
    --line:#d8cdb8;
    --shadow:rgba(60,48,30,0.12);}
.ecrits *{box-sizing:border-box;margin:0;padding:0;}
.ecrits{scroll-behavior:smooth;}
.ecrits{background:
      radial-gradient(circle at 20% 10%, #faf6ee 0%, transparent 55%),
      radial-gradient(circle at 85% 90%, #efe7d6 0%, transparent 50%),
      var(--paper);
    color:var(--ink);
    font-family:"Be Vietnam Pro",serif;
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;}
.ecrits::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    mix-blend-mode:multiply;opacity:0.6;}
.ecrits .wrap{position:relative;z-index:1;max-width:880px;margin:0 auto;padding:0 28px;}
.ecrits header{text-align:center;padding:120px 28px 70px;position:relative;}
.ecrits .kicker{font-family:"Be Vietnam Pro",sans-serif;font-weight:300;
    letter-spacing:0.42em;text-transform:uppercase;font-size:0.72rem;
    color:var(--gold-deep);margin-bottom:30px;
    opacity:0;animation:rise 1.1s .1s forwards;}
.ecrits h1.title{font-family:"Be Vietnam Pro",serif;font-weight:500;
    font-size:clamp(2.8rem,7vw,5rem);line-height:1.04;color:var(--ink);
    opacity:0;animation:rise 1.1s .25s forwards;}
.ecrits h1.title .vn{display:block;font-style:italic;font-size:0.56em;color:var(--rust);margin-top:14px;font-weight:400;}
.ecrits .header-rule{width:64px;height:1px;background:var(--gold);margin:42px auto 26px;
    opacity:0;animation:grow 1.2s .55s forwards;}
.ecrits header p.intro{max-width:560px;margin:0 auto;font-size:1.06rem;color:var(--ink-soft);
    font-family:"Be Vietnam Pro",serif;
    opacity:0;animation:rise 1.1s .65s forwards;}
.ecrits .sprig{position:absolute;width:140px;height:140px;opacity:0.16;color:var(--gold);}
.ecrits .sprig.l{top:40px;left:-30px;transform:rotate(-12deg);}
.ecrits .sprig.r{bottom:0;right:-30px;transform:scaleX(-1) rotate(-12deg);}
.ecrits .preamble{max-width:640px;margin:0 auto 90px;padding:34px 40px;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    font-family:"Be Vietnam Pro",serif;font-style:italic;font-size:1.12rem;
    color:var(--ink-soft);text-align:center;}
.ecrits .preamble strong{color:var(--gold-deep);font-style:normal;font-weight:600;}
.ecrits .piece{margin:0 auto 86px;max-width:720px;position:relative;}
.ecrits .piece-head{margin-bottom:26px;}
.ecrits .num{font-family:"Be Vietnam Pro",serif;font-style:italic;
    font-size:1.5rem;color:var(--gold);display:block;margin-bottom:4px;}
.ecrits .piece h2{font-family:"Be Vietnam Pro",serif;font-weight:600;
    font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.12;color:var(--ink);}
.ecrits .piece h2 .orig{display:block;font-size:0.62em;font-style:italic;font-weight:500;
    color:var(--rust);margin-top:6px;}
.ecrits .piece .meta{font-family:"Be Vietnam Pro",sans-serif;font-weight:300;font-size:0.78rem;
    letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-deep);
    margin-top:12px;}
.ecrits .piece .fr{font-family:"Be Vietnam Pro",serif;font-style:italic;font-size:1rem;
    color:var(--ink-soft);margin-top:14px;padding-left:16px;
    border-left:2px solid var(--line);}
.ecrits .verse{font-family:"Be Vietnam Pro",serif;font-size:1.22rem;line-height:2.05;
    color:var(--ink);white-space:pre-line;margin-top:30px;
    padding:30px 34px;background:rgba(255,253,248,0.55);
    border:1px solid var(--line);border-radius:2px;
    box-shadow:0 18px 40px -28px var(--shadow);}
.ecrits .prose{font-family:"Be Vietnam Pro",serif;font-size:1.16rem;line-height:1.95;
    color:var(--ink);margin-top:30px;}
.ecrits .prose p{margin-bottom:1.2em;text-align:justify;}
.ecrits .prose p:first-letter{font-family:"Be Vietnam Pro",serif;font-size:3.1rem;float:left;
    line-height:0.8;padding:6px 12px 0 0;color:var(--rust);font-weight:600;}
.ecrits .sign{margin-top:22px;text-align:right;font-family:"Be Vietnam Pro",serif;
    font-style:italic;font-size:1.18rem;color:var(--gold-deep);}
.ecrits .divider{width:100%;max-width:720px;margin:0 auto 86px;text-align:center;
    color:var(--gold);font-size:1.1rem;letter-spacing:0.6em;opacity:0.6;}
.ecrits .transnote{font-family:"Be Vietnam Pro",sans-serif;font-weight:300;
    font-size:0.74rem;letter-spacing:0.04em;color:var(--ink-soft);
    text-align:center;margin-top:14px;font-style:normal;opacity:0.8;}
.ecrits .reveal{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1s ease;}
.ecrits .reveal.in{opacity:1;transform:none;}
.ecrits footer{text-align:center;padding:70px 28px 110px;color:var(--ink-soft);
    font-family:"Be Vietnam Pro",serif;font-style:italic;font-size:1rem;
    border-top:1px solid var(--line);max-width:720px;margin:0 auto;}
.ecrits footer .name{font-family:"Be Vietnam Pro",serif;font-style:normal;font-size:1.35rem;color:var(--gold-deep);display:block;margin-bottom:6px;}
@keyframes rise{to{opacity:1;transform:none;}from{transform:translateY(20px);}}
@keyframes grow{to{opacity:1;width:64px;}from{width:0;}}
@media(max-width:560px){
.ecrits .verse, .ecrits .prose{font-size:1.08rem;padding:22px 20px;}
.ecrits .preamble{padding:26px 22px;}
.ecrits header{padding:80px 20px 50px;}
.ecrits .sprig{display:none;}
}
.ecrits .prose .dlg{margin:.45em 0;padding-left:1.3em;text-indent:-1.3em;color:var(--ink-soft);text-align:left}
.ecrits .prose .verse-in{white-space:pre-line;font-style:italic;margin:1.1em 0 1.1em 1.4em;padding-left:1em;border-left:2px solid var(--line);color:var(--gold-deep);line-height:1.75;text-align:left}
.ecrits .sign .footnote{display:block;font-size:.8em;font-style:italic;color:var(--ink-soft);opacity:.9;margin-top:.4em;font-weight:400;letter-spacing:0}