/* ═══════════════════════════════════════════════════════════════════════
   The room's panels: warm parchment sheets that open over the room.

   One look for all of them: the project book, the awards, the enlarged
   GitHub painting, and the frame the resume sits in. Colours come from the
   palette declared in room.css. Full screen and scrollable on small screens.
   ═══════════════════════════════════════════════════════════════════ */

/* ══ the veil and the frame that holds a sheet ═══════════════════════ */

.modal {
  position: fixed; inset: 0;
  z-index: 8;                      /* over the room's layers */
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top, 0px)) 20px max(20px, env(safe-area-inset-bottom, 0px));
  visibility: hidden;
  opacity: 0;
  transition: opacity 340ms ease, visibility 0s linear 340ms;
}
.modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 340ms ease;
}

.modal__scrim {
  position: absolute; inset: 0;
  background: radial-gradient(90% 80% at 50% 45%, rgba(20,13,7,.58), rgba(8,5,3,.86));
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  cursor: pointer;
}

.modal__host,
.modal__frame {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 100%;
  display: grid;
  place-items: center;
  pointer-events: none;            /* the scrim, not the gutter, takes stray clicks */
}
.modal__host > *,
.modal__frame > * { pointer-events: auto; }

/* ══ the sheet ═══════════════════════════════════════════════════════ */

.sheet {
  position: relative;
  width: min(960px, 100%);
  max-height: min(88vh, 880px);
  max-height: min(88dvh, 880px);
  display: flex; flex-direction: column;
  color: var(--parch-ink);
  border-radius: 8px;
  /* aged parchment: lit in the middle, browned toward the edges, with grain */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.55' intercept='-.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px 220px,
    radial-gradient(120% 90% at 50% 28%, rgba(255,251,238,.6), rgba(255,251,238,0) 62%),
    radial-gradient(150% 120% at 50% 50%, rgba(0,0,0,0) 56%, rgba(120,88,42,.24) 100%),
    var(--parch);
  background-blend-mode: multiply, normal, normal, normal;
  box-shadow:
    0 40px 90px rgba(0,0,0,.55),
    0 8px 22px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(150,120,70,.32),
    inset 0 0 60px rgba(120,88,42,.14);
  animation: sheetIn 460ms var(--room-ease) both;
}
@keyframes sheetIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.sheet__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(30px, 4.2vw, 54px) clamp(24px, 4vw, 52px) clamp(30px, 4vw, 48px);
  scrollbar-width: thin;
  scrollbar-color: rgba(111,101,82,.35) transparent;
}
.sheet__scroll::-webkit-scrollbar { width: 8px; }
.sheet__scroll::-webkit-scrollbar-thumb { background: rgba(111,101,82,.3); border-radius: 4px; }

/* discreet: a thin ×, no chrome, until you reach for it */
.sheet__close {
  position: absolute; top: 10px; right: 12px;
  z-index: 2;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: none;
  font: 400 28px/1 var(--display);
  color: var(--parch-mute);
  cursor: pointer;
  transition: color 220ms ease, background-color 220ms ease;
}
.sheet__close:hover { color: var(--parch-ink); background: rgba(120,90,50,.1); }
.sheet__close:focus-visible,
.sheet__back:focus-visible,
.shelf-list__book:focus-visible,
.sheet a:focus-visible { outline: 1px solid var(--gilt-deep); outline-offset: 3px; }

/* ── type ─────────────────────────────────────────────────────────── */

.sheet__title {
  margin: 0 0 .12em;
  font: 500 clamp(32px, 4.2vw, 44px)/1.04 var(--display);
  letter-spacing: .01em;
  color: var(--parch-ink);
}
.sheet__sub {
  margin: 0 0 1.5rem;
  font: italic 400 1.08rem/1.4 var(--body);
  color: var(--parch-mute);
}
.sheet h3 {
  margin: 0 0 .55em;
  font: 500 .8rem/1.2 var(--display);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gilt-deep);
}
.sheet p {
  margin: 0 0 1.55rem;
  font: 400 1.05rem/1.68 var(--body);
}
.sheet p:last-child { margin-bottom: 0; }
.sheet a {
  color: #5f4519;
  text-decoration: none;
  border-bottom: 1px solid rgba(125,95,40,.55);
  transition: color 220ms ease, border-color 220ms ease;
}
.sheet a:hover { color: var(--parch-ink); border-bottom-color: var(--parch-ink); }

/* ══ a project: an open book ═════════════════════════════════════════
   A fixed-height spread. The left page is the information: title and
   subtitle stay put and the sections beneath them scroll. The right page is
   the picture, the headline result, the tags and the links. */

.sheet--book {
  width: min(1080px, 100%);
  height: min(86vh, 780px);
  height: min(86dvh, 780px);
}
.sheet--book .sheet__scroll {
  display: flex; flex-direction: column;
  overflow: hidden;                  /* the pages scroll, not the sheet */
}

.spread {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  grid-template-rows: minmax(0, 1fr);
}
/* the gutter, where the pages curve down into the binding */
.spread::before {
  content: '';
  position: absolute; top: -14px; bottom: -14px; left: 60%;
  width: 56px; transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(100,70,30,0), rgba(100,70,30,.12) 42%,
    rgba(100,70,30,.22) 50%,
    rgba(100,70,30,.12) 58%, rgba(100,70,30,0));
}
.spread__page {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  padding: 0 clamp(18px, 3vw, 38px);
}
.spread__page--l { padding-left: 0; }
.spread__page--r {
  padding-right: 0;
  padding-top: .35rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(111,101,82,.35) transparent;
}
/* the subtitle is the last child of the head, so the sheet's last-child reset
   would zero its margin; the head carries the gap instead */
.spread__head { flex: none; padding-bottom: 1.15rem; }

/* the scrolling page: fades where there is more of it (panels.js sets the
   two variables as it scrolls) */
.spread__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: .9rem;
  margin-right: -.9rem;              /* keeps the scrollbar off the text */

  --fade-top: 0px;
  --fade-bot: 0px;
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0, #000 var(--fade-top),
    #000 calc(100% - var(--fade-bot)), transparent 100%);
          mask-image: linear-gradient(180deg,
    transparent 0, #000 var(--fade-top),
    #000 calc(100% - var(--fade-bot)), transparent 100%);
  transition: --fade-top 260ms ease, --fade-bot 260ms ease;

  scrollbar-width: thin;
  scrollbar-color: rgba(111,101,82,.4) transparent;
}
.spread__body::-webkit-scrollbar { width: 8px; }
.spread__body::-webkit-scrollbar-thumb { background: rgba(111,101,82,.32); border-radius: 4px; }
.spread__body:focus-visible { outline: 1px solid var(--gilt-deep); outline-offset: 6px; }

.spread__sec + .spread__sec { margin-top: 1.75rem; }
.sheet .spread__sec p { margin: 0; }

.sheet__back {
  margin: 0 0 1.1rem -.2em;
  padding: .2em .3em;
  border: 0; background: none;
  font: 500 .82rem/1 var(--display);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--parch-mute);
  cursor: pointer;
}
.sheet__back:hover { color: var(--parch-ink); }

/* where a project's picture goes; a clean placeholder when there isn't one */
.plate {
  margin: 0 0 1.4rem;
  flex: none;
  aspect-ratio: 16 / 10;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(60,40,15,.28), 0 0 0 1px rgba(90,65,25,.35);
}
.plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plate--empty {
  display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(190,160,105,.22), rgba(190,160,105,.08));
  box-shadow:
    inset 0 0 0 1px rgba(138,106,46,.4),
    inset 0 0 0 7px var(--parch),
    inset 0 0 0 8px rgba(138,106,46,.28);
}
.plate__cap {
  font: italic 400 1rem/1.2 var(--body);
  color: var(--parch-mute);
}

.tags, .links { flex: none; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tags li {
  padding: .22em .85em .28em;
  border: 1px solid rgba(125,95,40,.5);
  border-radius: 999px;
  font: 500 .8rem/1.2 var(--display);
  letter-spacing: .1em;
  color: #5f4519;
}
.links li { margin: 0 0 .4rem; font: 400 1rem/1.4 var(--body); }

/* ══ the shelf as a list ═════════════════════════════════════════════ */

.shelf-list { margin: 0; padding: 0; list-style: none; }
.shelf-list li + li { margin-top: .7rem; }
.shelf-list__book {
  width: 100%;
  display: block;
  padding: .9rem 1.1rem 1rem;
  text-align: left;
  border: 1px solid rgba(125,95,40,.4);
  border-left-width: 6px;
  border-radius: 4px;
  background: rgba(255,250,235,.35);
  color: var(--parch-ink);
  cursor: pointer;
  transition: background-color 220ms ease, border-color 220ms ease;
}
.shelf-list__book:hover { background: rgba(255,250,235,.7); border-color: var(--gilt-deep); }
.shelf-list__title { display: block; font: 500 1.5rem/1.15 var(--display); }
.shelf-list__sub   { display: block; margin-top: .2rem; font: italic 400 1rem/1.3 var(--body); color: var(--parch-mute); }

/* ══ awards · compact ════════════════════════════════════════════════ */

.sheet--awards { width: min(540px, 100%); }
.awards { margin: 0; padding: 0; list-style: none; }
.award {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem .6rem;
  border-bottom: 1px solid rgba(125,95,40,.25);
  border-radius: 4px;
  transition: background-color 300ms ease;
}
.award:last-child { border-bottom: 0; }
.award.is-picked { background: rgba(184,146,74,.18); }
.award__icon { flex: none; width: 34px; height: 51px; }
.award__icon svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(60,40,15,.35)); }
.award__text { min-width: 0; }
.sheet .award__title { margin: 0 0 .1em; font: 500 1.35rem/1.15 var(--display); letter-spacing: 0; text-transform: none; color: var(--parch-ink); }
.sheet .award__meta  { margin: 0; font: italic 400 1rem/1.35 var(--body); color: var(--parch-mute); }

/* ══ the painting, enlarged ══════════════════════════════════════════ */

.sheet--github {
  width: min(1000px, 100%);
  --c0: rgba(120,90,45,.13);
  --c1: #dcc38e; --c2: #c29d4e; --c3: #9b7328; --c4: #64460f;
}
.cal-stage { min-height: 96px; }
.cal-scroll { overflow-x: auto; padding-bottom: .5rem; }
.cal-box { min-width: 640px; }
.cal-months {
  display: grid;
  margin-bottom: .45rem;
  font: 500 .72rem/1 var(--display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--parch-mute);
}
.cal-months span { white-space: nowrap; }
.cal {
  display: grid;
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;        /* a week to a column, as on GitHub */
  gap: 3px;
}
.cal .cell { aspect-ratio: 1 / 1; border-radius: 2px; }
.cal-legend {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  margin-top: 1rem;
  font: italic 400 .9rem/1 var(--body);
  color: var(--parch-mute);
}
.cal-legend span { margin: 0 .35rem; }
.cal-legend .cell { width: 12px; height: 12px; }
.cal-fallback { display: block; max-width: 100%; margin: 0 auto; border-radius: 4px; }
.sheet .sheet__foot { margin: 1.4rem 0 0; text-align: right; font: 400 1rem/1.4 var(--body); }

/* ══ the resume: the existing sheet, in a frame ══════════════════════ */

.modal--resume { --card-w: min(92vw, 515px); }   /* what the resume's type is keyed to */
.modal--resume .modal__frame {
  width: min(560px, 100%);
  height: min(90vh, 900px);
  height: min(90dvh, 900px);
  animation: sheetIn 460ms var(--room-ease) both;
}
.modal--resume .page { animation: none; }

/* ══ small screens: sheets fill the screen and scroll ════════════════ */

@media (max-width: 720px) {
  .modal { padding: 0; place-items: stretch; grid-template-rows: minmax(0, 1fr); }
  /* one column exactly as wide as the screen: without minmax(0, …) a wide
     child (the panning calendar picture) would widen the column, and the sheet.
     The same goes for the rows, here and on .modal: an auto row grows to fit a
     tall sheet, so its scroller never gets a height to scroll within */
  .modal__host { max-height: none; height: 100%; place-items: stretch;
                 grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .sheet {
    width: 100%; height: 100%;
    max-height: none;
    border-radius: 0;
  }
  .sheet__scroll {
    padding: max(56px, calc(env(safe-area-inset-top, 0px) + 44px)) 22px
             max(36px, calc(env(safe-area-inset-bottom, 0px) + 24px));
  }
  .sheet__close { top: max(10px, env(safe-area-inset-top, 0px)); right: 10px; width: 44px; height: 44px; }
  /* the book becomes one column that scrolls as a whole: title, picture,
     then the sections, then tags and links */
  .sheet--book { height: 100%; }
  .sheet--book .sheet__scroll { display: block; overflow-y: auto; }
  .spread { display: flex; flex-direction: column; }
  .spread::before { display: none; }
  .spread__page { display: contents; }          /* their children take part directly */
  .spread__head { order: 1; }
  .plate        { order: 2; }
  .spread__body { order: 3; overflow: visible; margin: 0; padding: 0;
                  -webkit-mask-image: none; mask-image: none; }
  .tags         { order: 4; margin-top: 1.8rem; }
  .links        { order: 5; }

  .modal--resume .modal__frame { width: 100%; height: 100%; max-height: none; }
  .modal--resume .foldback {
    width: 44px; height: 44px;
    top: max(6px, env(safe-area-inset-top, 0px)); right: 6px;
    font-size: 26px;
  }
  .modal--resume .page,
  .modal--resume .page__paper,
  .modal--resume .page__scroll { border-radius: 0; }

  /* The year as GitHub draws it, a week to a column, and all of it on screen:
     the grid is fitted to the width of the sheet, month names and all. The
     cells shrink to fit but never below the floor set on .cal-box; a screen
     narrower than that pans sideways (newest weeks first) instead of cropping. */
  .cal-box { min-width: 300px; padding-right: 1px; }   /* the 1px absorbs the rounding of 53 columns */
  .cal-months { margin-bottom: .3rem; font-size: .56rem; letter-spacing: .04em; }
  .cal { gap: 1.5px; }
  .cal .cell { border-radius: 1px; }
  /* the plain picture is a 663 x 104 chart whose month names are unreadable if
     it is squeezed to the width of a phone, so it pans the same way */
  .cal-pan { overflow-x: auto; padding-bottom: .5rem; }
  .cal-pan .cal-fallback { min-width: 540px; }
  .award__icon { width: 30px; height: 45px; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet, .modal--resume .modal__frame { animation: none; }
  .modal, .modal.is-open { transition-duration: 1ms; }
}