/* Journal — folded letters left out in the garden.

   Values are taken verbatim from the Claude Design file. This is a separate
   stylesheet so nothing on the pages already built can be disturbed by it;
   only journal.html loads it. */

.jr-header{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:baseline;
  gap:24px;background:#faf9f4;color:#121210;padding:15px clamp(24px,4vw,64px)}
.jr-header a{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.24em;
  text-transform:uppercase}
.jr-nav{display:flex;gap:clamp(18px,2.4vw,34px);font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase}

.jr-section{position:relative;z-index:4;
  padding:clamp(46px,6vw,104px) clamp(24px,5vw,96px) clamp(70px,8vw,140px)}

.jr-intro{display:flex;flex-direction:column;gap:clamp(10px,1vw,18px);max-width:30ch;
  padding-bottom:clamp(46px,5.4vw,96px)}
.jr-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:#22301c;text-shadow:0 1px 10px rgba(252,251,240,.92)}
.jr-title{margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(46px,7.2vw,116px);line-height:.88;letter-spacing:-.03em;color:#faf9f4;
  text-shadow:0 2px 24px rgba(24,40,22,.5)}
.jr-standfirst{margin:0;font-size:clamp(16px,1.24vw,20px);line-height:1.5;font-weight:300;
  color:#22301c;text-shadow:0 1px 10px rgba(252,251,240,.92);text-wrap:pretty}

.jr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(22px,3.4vw,64px);row-gap:clamp(46px,5.4vw,96px)}

/* --rot/--ty are set per letter so the scatter carries on for new entries */
.jr-letter{margin:0;cursor:pointer;transition:transform .45s ease;
  transform:rotate(var(--rot,0deg)) translateY(var(--ty,0px))}
.jr-letter:focus-visible{outline:2px solid #aed277;outline-offset:6px}

.jr-paper{position:relative;background:#faf9f4;color:#121210;aspect-ratio:1.44;
  padding:clamp(20px,1.9vw,32px);display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 20px 34px rgba(28,44,26,.3)}
/* the two creases where the sheet was folded into thirds */
.jr-crease{position:absolute;left:0;right:0;height:1px}
.jr-crease--a{top:30%;background:rgba(150,146,132,.24);
  box-shadow:0 -6px 9px -7px rgba(28,40,24,.14),0 4px 8px -7px rgba(255,255,255,.7)}
.jr-crease--b{top:72%;background:rgba(150,146,132,.22);
  box-shadow:0 -6px 9px -7px rgba(28,40,24,.12),0 4px 8px -7px rgba(255,255,255,.7)}
.jr-meta{display:flex;flex-direction:column;gap:4px;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8b877c}
.jr-letter-title{margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(24px,2.5vw,40px);line-height:.98;letter-spacing:-.02em;max-width:16ch}
.jr-unfold{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#4a6338;margin-top:clamp(14px,1.6vw,26px)}

/* the opened letter */
.jr-scrim{position:fixed;inset:0;z-index:20;display:none;opacity:0;transition:opacity .4s ease;
  background:rgba(22,34,20,.42);backdrop-filter:blur(2px);overflow-y:auto;
  padding:clamp(24px,5vw,80px) clamp(18px,5vw,80px)}
.jr-scrim-inner{display:flex;justify-content:center;min-height:100%;perspective:1800px}
.jr-sheet{display:none;width:min(760px,100%);align-self:flex-start;transform-origin:top center;
  transform:rotateX(-84deg);opacity:0;
  transition:transform .62s cubic-bezier(.22,.9,.28,1),opacity .3s ease;
  background:#faf9f4;color:#121210;
  padding:clamp(34px,4vw,68px) clamp(28px,4vw,72px) clamp(40px,4.4vw,76px);
  box-shadow:0 40px 80px rgba(20,32,18,.45)}
.jr-sheet--open{transform:rotateX(0deg);opacity:1}
.jr-sheet-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  border-bottom:1px solid #121210;padding-bottom:12px;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8b877c}
.jr-close{cursor:pointer;color:#121210;background:none;border:0;font:inherit;letter-spacing:inherit;
  text-transform:inherit;padding:0}
.jr-close:hover{color:#5f7d3c}
.jr-sheet-title{margin:clamp(26px,3vw,46px) 0 0;font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;font-size:clamp(34px,4.4vw,68px);line-height:.94;letter-spacing:-.025em;
  max-width:18ch}
.jr-sheet-lede{margin:clamp(20px,2vw,30px) 0 0;font-family:'Newsreader',serif;font-style:italic;
  font-size:clamp(17px,1.4vw,22px);line-height:1.42;color:#4c4a42;max-width:52ch}
.jr-sheet-body{display:flex;flex-direction:column;gap:clamp(14px,1.4vw,20px);
  margin-top:clamp(24px,2.6vw,40px);max-width:62ch;font-size:clamp(16px,1.2vw,19px);
  line-height:1.55;font-weight:300;text-wrap:pretty}
.jr-sheet-body p{margin:0}
.jr-sheet-signoff{margin-top:clamp(30px,3.4vw,54px);border-top:1px solid #ddd9cd;padding-top:14px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#8b877c}

.jr-empty{grid-column:1 / -1;color:#faf9f4;text-shadow:0 2px 22px rgba(24,40,22,.55);
  font-size:clamp(18px,2vw,26px);font-family:'Instrument Serif',Georgia,serif}

/* The design is drawn at three columns. It has no narrow-screen variant, so
   these two steps only stop the letters becoming unreadable slivers on a
   phone — the tilts, creases and type are untouched. */
@media (max-width:900px){
  .jr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .jr-grid{grid-template-columns:minmax(0,1fr);row-gap:clamp(38px,9vw,64px)}
  .jr-header{flex-wrap:wrap;gap:10px 18px}
}

@media (prefers-reduced-motion:reduce){
  .jr-letter,.jr-sheet,.jr-scrim{transition:none}
  .jr-sheet{transform:none}
}