.site-header{display:grid;grid-template-columns:auto 1fr auto;gap:36px}
.site-header .game-navigation{justify-content:flex-end}
.site-header .development-navigation{padding-left:28px;border-left:1px solid var(--line);font-size:14px}
.site-header .development-navigation a{text-decoration:underline}
.development-navigation [aria-current=page]{font-weight:700}
.wayrex-link{font-size:13px;align-self:center;justify-self:start}
.diary-page{min-height:100vh;display:flex;flex-direction:column}
.diary-main{flex:1;padding-block:75px}
.diary-main h1{font-size:clamp(34px,4vw,48px);line-height:1.15;margin-bottom:18px}
.diary-main p{font-size:17px}
.diary-main.wrap{width:min(760px,88%)}
.entry{margin-top:52px;padding-top:40px;border-top:1px solid var(--line)}
.entry-date{margin-bottom:6px;font-size:14px!important}
.entry h2{font-size:clamp(26px,3vw,32px);margin-bottom:16px}
.entry p+p{margin-top:12px}
@media(max-width:780px){.site-header{gap:20px}.site-header .game-navigation{gap:18px}.site-header .development-navigation{padding-left:18px}}
@media(max-width:640px){.site-header{grid-template-columns:1fr auto;gap:18px}.site-header .brand{grid-column:1;grid-row:1}.site-header .development-navigation{grid-column:2;grid-row:1;width:auto;padding:0;border:0;justify-content:flex-end}.site-header .game-navigation{grid-column:1/-1;grid-row:2;width:100%;justify-content:center;gap:24px}.diary-main{padding-block:46px}}
.article h1{margin-bottom:26px}
.article p+p{margin-top:12px}
.article h2{font-size:clamp(26px,3vw,32px);margin:44px 0 14px}
.article-figure{margin:30px auto}
.article-figure img{margin-inline:auto;max-height:640px;width:auto;border-radius:12px}
/* Scrapbook framing: a polaroid for the photo, taped paper for the sketch. Both settle into place on first sight. */
.article-figure.polaroid,.article-figure.sketch{--tilt:0deg;width:fit-content;max-width:100%;transform:rotate(var(--tilt))}
.article-figure.polaroid{--tilt:1.6deg;padding:14px 14px 0;background:#fffdf6;box-shadow:0 8px 22px rgba(60,46,29,.16)}
.article-figure.polaroid img{border-radius:0;max-height:560px}
.article-figure.polaroid figcaption{margin:0;padding:12px 6px 16px;max-width:36ch}
.article-figure.sketch{--tilt:-1.4deg}
.article-figure.sketch .paper{position:relative;display:block;box-shadow:0 6px 18px rgba(60,46,29,.14)}
.article-figure.sketch .paper img{max-height:560px;border-radius:0}
.article-figure.sketch .paper::before,.article-figure.sketch .paper::after{content:'';position:absolute;top:-14px;width:96px;height:30px;opacity:.82;box-shadow:0 1px 2px rgba(60,46,29,.12)}
.article-figure.sketch .paper::before{left:-22px;background:var(--poppy);transform:rotate(-38deg)}
.article-figure.sketch .paper::after{right:-22px;background:var(--sand);transform:rotate(36deg)}
.article-figure.sketch figcaption{max-width:40ch;margin-inline:auto}
.article-figure.reveal{opacity:0;transform:translateY(-18px) rotate(calc(var(--tilt) * -2.5));transition:opacity .4s ease,transform .7s cubic-bezier(.3,1.4,.5,1)}
.article-figure.reveal.seen{opacity:1;transform:rotate(var(--tilt))}
@media(prefers-reduced-motion:reduce){.article-figure.reveal{transition:none}}
.article-figure figcaption{margin-top:12px;text-align:center;font-family:BloomCaveat,cursive;font-size:23px;line-height:1.2}
.article-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.article-newsletter{font-size:15px}
.diary-list{list-style:none;padding:0;margin:44px 0 0}
.diary-card{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:center;padding:24px 0;border-top:1px solid var(--line);text-decoration:none}
.diary-card img{width:150px;height:150px;object-fit:cover;object-position:55% 22%;border:1px solid var(--line);border-radius:10px;background:#fff}
.diary-card h2{font-size:clamp(24px,2.6vw,30px);margin:2px 0 8px}
.diary-card:hover h2{text-decoration:underline}
@media(max-width:520px){.diary-card{grid-template-columns:96px 1fr;gap:16px}.diary-card img{width:96px;height:96px}.article-actions a{width:100%;text-align:center}}
.diary-main .pull{margin:22px 0 26px;font-family:BloomCaveat,cursive;font-size:clamp(48px,7vw,68px);line-height:1;color:var(--poppy);transform:rotate(-3deg);transform-origin:left center}
.pull.reveal{opacity:0;transform:rotate(-3deg) scale(.7);transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.6,.5,1)}
.pull.seen{opacity:1;transform:rotate(-3deg) scale(1)}
.diary-main .estimate{margin:10px 0 18px;font-family:BloomCaveat,cursive;font-size:clamp(32px,4.4vw,40px);line-height:1.2}
.estimate s{position:relative;margin-right:.3em;text-decoration:none;color:#8a7966}
.estimate s::after{content:'';position:absolute;left:-2%;right:-2%;top:52%;height:3px;border-radius:3px;background:var(--poppy);transform:rotate(var(--tilt,-4deg)) scaleX(0);transform-origin:left;transition:transform .5s ease var(--strike,.3s)}
.estimate s.step{display:inline-block;--tilt:5deg;opacity:0;transition:opacity .35s ease var(--in)}
.estimate.seen s.step,.estimate:not(.reveal) s.step{opacity:1}
.estimate .actual{display:inline-block;opacity:0;transform:translateY(6px);transition:opacity .35s ease var(--in,.85s),transform .35s ease var(--in,.85s)}
.estimate.seen s::after,.estimate:not(.reveal) s::after{transform:rotate(var(--tilt,-4deg)) scaleX(1)}
.estimate.seen .actual,.estimate:not(.reveal) .actual{opacity:1;transform:none}
.article-actions .farewell{height:120px;width:calc(120px * var(--portrait-ratio));margin:0 6px 0 0}
@media(prefers-reduced-motion:reduce){.pull.reveal,.estimate s::after,.estimate s.step,.estimate .actual{transition:none}}
@media(max-width:520px){.article-actions .farewell{margin:0 auto}}