*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:22px;scroll-behavior:smooth}
body{background-color:#F5F0E8;color:#2C2416;font-family:'Shippori Mincho',serif;font-weight:400;overflow-x:hidden}

.viewport{position:relative;min-height:100vh;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:auto 1fr auto auto;padding:40px 0}

.top-rule{grid-column:3/8;grid-row:1;height:1px;background:#8C7B6B;width:0;transition:width 800ms ease-out}
.top-rule.visible{width:100%}

.date-strip{grid-column:3/8;grid-row:1;font-family:'Shippori Mincho',serif;font-weight:400;font-size:0.5rem;color:#8C7B6B;letter-spacing:0.08em;text-align:right;margin-top:8px;opacity:0;transition:opacity 600ms ease-out}
.date-strip.visible{opacity:1}

.proposition-zone{grid-column:4/7;grid-row:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 8px}

.proposition-number{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.hanko{display:block;width:8px;height:8px;background:#C14B3D;transform:scale(0);transition:transform 200ms cubic-bezier(0.34,1.56,0.64,1)}
.hanko.visible{transform:scale(1)}
.prop-num{font-family:'Shippori Mincho',serif;font-weight:400;font-size:0.5rem;color:#8C7B6B;letter-spacing:0.08em}

.proposition-text{font-family:'Shippori Mincho',serif;font-weight:600;font-size:1rem;color:#2C2416;line-height:2.2;letter-spacing:0.04em;min-height:3em}
.proposition-formal{font-family:'Shippori Mincho',serif;font-weight:400;font-size:0.7rem;color:#8C7B6B;margin-top:12px;letter-spacing:0.04em;opacity:0;transition:opacity 400ms ease-out}
.proposition-formal.visible{opacity:1}

.bottom-zone{grid-column:3/8;grid-row:3;display:flex;flex-direction:column;align-items:flex-start;padding-bottom:16px}
.attribution{font-family:'Shippori Mincho',serif;font-weight:400;font-size:0.45rem;color:#8C7B6B;letter-spacing:0.04em;margin-bottom:8px;opacity:0;transition:opacity 400ms ease-out}
.attribution.visible{opacity:1}
.bottom-rule{height:1px;background:#8C7B6B;width:0;transition:width 600ms ease-out}
.bottom-rule.visible{width:100%}

.archive-trigger{grid-column:1/-1;grid-row:4;display:flex;justify-content:center;padding:16px 0;cursor:pointer;transition:opacity 200ms}
.archive-trigger:hover{opacity:0.5}
.archive-trigger svg{transition:transform 300ms ease-out}
.archive-trigger.open svg{transform:rotate(180deg)}

.archive-drawer{max-width:100%;overflow:hidden;max-height:0;transition:max-height 500ms cubic-bezier(0.22,1,0.36,1);background:#E8DFD0}

.archive-entry{display:flex;gap:20px;padding:20px 0;max-width:480px;margin:0 auto;border-bottom:1px solid #D8D0C4;opacity:0;transform:translateX(0);transition:opacity 300ms ease-out,transform 200ms ease-out}
.archive-entry.visible{opacity:1}
.archive-entry:hover{transform:translateX(4px)}
.archive-date{font-family:'IBM Plex Mono',monospace;font-weight:300;font-size:0.55rem;color:#8C7B6B;letter-spacing:0.06em;flex-shrink:0;padding-top:2px}
.archive-prop{font-family:'IBM Plex Mono',monospace;font-weight:300;font-size:0.55rem;color:#2C2416;line-height:1.6}

@media(max-width:768px){
    .viewport{grid-template-columns:1fr 1fr 1fr 1fr 1fr;padding:32px 16px}
    .top-rule,.date-strip{grid-column:1/-1}
    .proposition-zone{grid-column:1/-1;padding:0}
    .bottom-zone{grid-column:1/-1}
    .proposition-text{font-size:0.9rem}
}