/* ============================================================
   CONCEPTO P — ABOUT, the folded letter and the quiet colophon (rooms/about.js, 20 October)
   The letter is a sheet of paper lying on the page, folded in three, lit by one soft light from the upper left:
   its face is a breath brighter toward the light, it throws a soft shadow down and to the right, and each crease
   catches the light above it and falls into a little shade below. Opened, the lower panels turn down from their
   creases on the house's settle curve (the room animates the turn; this file is the paper).
   ============================================================ */
.hs-fold{ position:relative; }
.hs-sheet{
  --paper-face:#FDFCF9; --pad-y:clamp(26px, 3vw, 48px); --pad-x:clamp(22px, 3.2vw, 52px);
  position:relative; perspective:1700px; perspective-origin:50% 0;
  transform-style:preserve-3d;
  margin:0 calc(var(--pad-x)*-1);
}
/* the sheet's shadow on the page: the light is up and to the left */
.hs-sheet::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  box-shadow:3px 6px 14px rgba(26,22,16,.075), 1px 2px 3px rgba(26,22,16,.06), 14px 28px 48px rgba(26,22,16,.05);
}
/* folded, its thickness shows at its foot: two more edges of the same paper, one under the other */
.hs-sheet.is-folded::after{
  content:""; position:absolute; left:2px; right:-1px; top:100%; height:4px; pointer-events:none;
  background:
    linear-gradient(180deg, #F3F1EC 0 1.5px, rgba(26,22,16,.10) 1.5px 2px, transparent 2px),
    linear-gradient(180deg, transparent 0 2px, #EFEDE7 2px 3.5px, rgba(26,22,16,.08) 3.5px 4px);
  transform:translateY(-1px);
}
.hs-pan{ position:absolute; left:0; right:0; transform-style:preserve-3d; transform-origin:50% 0; }
.hs-pan-1{ top:0; z-index:2; }
.hs-pan-2, .hs-pan-3{ z-index:1; }
.hs-sheet.is-folded:not(.is-turning) .hs-pan-2{ visibility:hidden; }
.hs-pan-face{
  position:absolute; inset:0; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
    linear-gradient(170deg, #FEFDFB 0%, var(--paper-face) 40%, #F9F7F2 100%);
}
.hs-pan-2 > .hs-pan-face, .hs-pan-3 > .hs-pan-face{
  background:
    radial-gradient(140% 120% at 8% -40%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
    linear-gradient(170deg, #FDFCFA 0%, var(--paper-face) 45%, #F8F6F1 100%);
}
/* the back of a panel: the same paper, a step out of the light, the letter's ink faintly through it */
.hs-pan-back{
  position:absolute; inset:0; transform:rotateX(180deg); backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:linear-gradient(180deg, #F4F2ED, #ECE9E2);
}
.hs-pan-in{ position:absolute; left:0; right:0; top:0; padding:var(--pad-y) var(--pad-x); }
.hs-pan-shade{ position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(180deg, rgba(40,34,26,.10), rgba(40,34,26,.42)); }
/* the creases: the light catches the edge above a fold, and the sheet dips into shade just below it */
.hs-pan-1 > .hs-pan-face::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:12px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.85) 80%, rgba(26,22,16,.10) 100%);
}
.hs-pan-2 > .hs-pan-face::before, .hs-pan-3 > .hs-pan-face::before{
  content:""; position:absolute; left:0; right:0; top:0; height:16px; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(26,22,16,.075), rgba(26,22,16,0));
}
.hs-pan-2 > .hs-pan-face::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:10px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.7) 80%, rgba(26,22,16,.08) 100%);
}
.hs-unfold{ display:inline-flex; align-items:center; min-height:44px; margin-top:calc(var(--rhythm-1)*.6 + 4px); float:right; }
.hs-fold::after{ content:""; display:block; clear:both; }
.hs-letter-body .hs-letter-sign{ margin-bottom:0; }

/* ---------- the colophon, quieter: a label for its head, the rows in the note size and the second ink ---------- */
.hs-colophon.is-quiet{ padding-top:var(--rhythm-3); color:var(--fg2, rgba(26,24,20,.62)); }
.hs-colophon.is-quiet .hs-col-h{ margin:0; font-weight:inherit; color:var(--fg2, rgba(26,24,20,.62)); }
.hs-colophon.is-quiet .hs-col{ margin-top:var(--rhythm-1); gap:.9em; max-width:44rem; }
.hs-colophon.is-quiet .hs-col-row{ grid-template-columns:10em 1fr; column-gap:1.6em; }
.hs-colophon.is-quiet .hs-col-row dt{ font-size:inherit; letter-spacing:inherit; font-family:inherit; opacity:.8; }
.hs-colophon.is-quiet .hs-col-row dd{ font-size:inherit; line-height:1.55; color:inherit; }
.hs-colophon.is-quiet .hs-col-row dd a{ color:inherit; }
@media (max-width:759px){
  .hs-sheet{ margin:0 calc(var(--pad-x)*-.5); --pad-x:clamp(18px, 5vw, 26px); }
  .hs-colophon.is-quiet .hs-col-row{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .hs-sheet{ transition:none !important; }
}