/* Recipe Box: dark wood box, divider tabs, ruled index cards. */

:root {
  --bw: min(560px, 86vw, 72vh);           /* box width */
  --bh: calc(var(--bw) * 0.36);           /* front wall height */
  --bd: calc(var(--bw) * 0.56);           /* box depth */
  --cw: min(620px, 92vw);                 /* card width */
  --card-top: 16px;
  /* the card fills the space above the box, leaving the tabs clear */
  --ch: clamp(300px, 100vh - 56px - var(--bw) * 0.64, 480px);

  --paper: #fffdf8;
  --ink: #2a2a35;
  --ink-soft: #6b6676;
  --rule-blue: #b3cbe6;
  --rule-red: #d64545;
  --row: 28px;                            /* ruled line spacing */

  --wood: #3a2214;
  /* wood.webp is a seamless tile; the tone layer darkens it to walnut */
  --grain: url("wood.webp");
  --tile: 320px auto;
  --tone: linear-gradient(rgba(28, 12, 4, .38), rgba(28, 12, 4, .38));
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  font-family: Kalam, "Segoe Print", "Comic Sans MS", cursive;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 50% 85%, rgba(0, 0, 0, .10), transparent 60%),
    linear-gradient(180deg, #efe7da, #e2d6c4);
  overflow-x: hidden;
}

.page-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ---------- the box ---------- */

.scene {
  position: relative;
  padding-top: calc(var(--card-top) + var(--ch) + 24px + var(--bw) * 0.125);
  padding-bottom: 16px;
}

.hint {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--card-top) + var(--ch) * 0.5 - 20px);
  margin: 0;
  text-align: center;
  font: 500 30px/1.2 Caveat, cursive;
  color: #8a6a50;
  opacity: 0;
  transition: opacity .6s;
}
.hint.show { opacity: .8; }
.hint.error { opacity: 1; color: #a03030; font-size: 24px; padding: 0 24px; }

.box-wrap {
  position: relative;
  width: var(--bw);
  height: var(--bh);
  margin: 0 auto;
  perspective: 1500px;
  perspective-origin: 50% -40%;
}

.box {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-26deg);
}

.box-front {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wall, .lid, .contents, .section, .divider, .filed-card, .ghost-card {
  position: absolute;
  transform-style: preserve-3d;
  pointer-events: none;
}

.wall {
  left: 0;
  top: 0;
  width: var(--bw);
  height: var(--bh);
  background-color: var(--wood);
  background-image: linear-gradient(180deg, rgba(255, 220, 180, .06), rgba(0, 0, 0, .35)), var(--tone), var(--grain);
  background-size: 100% 100%, 100% 100%, var(--tile);
}

.wall-front {
  transform: translateZ(calc(var(--bd) / 2));
  border-radius: 0 0 6px 6px;
  box-shadow: inset 0 3px 0 rgba(255, 210, 160, .18), inset 0 -10px 18px rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.plate {
  padding: 4px 22px 2px;
  border-radius: 4px;
  font: 700 clamp(15px, 3.6vw, 22px)/1.2 Caveat, cursive;
  color: #3b2a10;
  background: linear-gradient(160deg, #e8cf8a, #b8913f 55%, #d9bb6e);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.wall-back {
  transform: translateZ(calc(var(--bd) / -2));
  background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), var(--tone), var(--grain);
  background-size: 100% 100%, 100% 100%, var(--tile);
}

.wall-left, .wall-right {
  width: calc(var(--bd) - 4px);
  left: calc((var(--bw) - var(--bd)) / 2 + 2px);
  background-image: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)), var(--tone), var(--grain);
  background-size: 100% 100%, 100% 100%, var(--tile);
}
.wall-left  { transform: rotateY(-90deg) translateZ(calc(var(--bw) / 2)); }
.wall-right { transform: rotateY(90deg) translateZ(calc(var(--bw) / 2)); }

.wall-bottom {
  left: 2px;
  width: calc(var(--bw) - 4px);
  height: calc(var(--bd) - 4px);
  top: calc((var(--bh) - var(--bd)) / 2 + 2px);
  transform: rotateX(90deg) translateZ(calc(var(--bh) / -2 + 1px));
  background-image: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), var(--grain);
  background-size: 100% 100%, var(--tile);
}

/* The lid hinges on the top edge of the back wall. */
.lid {
  left: -6px;
  top: 0;
  width: calc(var(--bw) + 12px);
  height: calc(var(--bd) + 10px);
  transform-origin: 50% 0;
  transform: translateZ(calc(var(--bd) / -2 - 4px)) rotateX(90deg);
  transition: transform 1.15s cubic-bezier(.45, 0, .2, 1);
}
.box.is-open .lid {
  transform: translateZ(calc(var(--bd) / -2 - 4px)) rotateX(198deg);
}

.lid-face {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  backface-visibility: hidden;
  background-color: var(--wood);
  background-image: linear-gradient(180deg, rgba(255, 220, 180, .05), rgba(0, 0, 0, .25)), var(--tone), var(--grain);
  background-size: 100% 100%, 100% 100%, var(--tile);
}
.lid-outer { box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .25), inset 0 0 26px rgba(0, 0, 0, .35); }
.lid-inner {
  transform: rotateY(180deg);
  background-image: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)), var(--tone), var(--grain);
  background-size: 100% 100%, 100% 100%, var(--tile);
}

/* ---------- dividers and filed cards inside the box ---------- */

.contents {
  left: 0;
  top: 0;
  width: var(--bw);
  height: var(--bh);
}

.section {
  --step: calc((var(--bd) - 60px) / var(--n));
  --sink: 56px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(calc(var(--bd) / 2 - 30px - var(--i) * var(--step))) translateY(var(--sink));
  opacity: 0;
  transition: transform .7s cubic-bezier(.2, .8, .3, 1.15), opacity .2s;
  transition-delay: 0s;
}
.box.is-open .section {
  transform: translateZ(calc(var(--bd) / 2 - 30px - var(--i) * var(--step)));
  opacity: 1;
  transition-delay: calc(.75s + var(--i) * 80ms);
}

.divider {
  left: 12px;
  right: 12px;
  top: -14px;
  height: calc(var(--bh) + 8px);
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--c) 30%, #eadfc4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .25s;
}
/* The whole divider lifts with its tab. */
.divider:has(.tab:hover) { transform: translateY(-4px); }
.divider:has(.tab.active) { transform: translateY(-8px); }

.tab {
  position: absolute;
  bottom: 100%;
  left: calc(var(--i) * (100% - 100% / var(--n)) / max(var(--n) - 1, 1));
  width: calc(100% / var(--n));
  height: 34px;
  padding: 0 4px;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: color-mix(in srgb, var(--c) 70%, #f3e8cf);
  color: #2b2116;
  font: 700 clamp(12px, 3.4vw, 21px)/34px Caveat, cursive;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: filter .25s;
}
.tab:hover { filter: brightness(1.08); }
.tab:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.tab.active { filter: brightness(1.12); }

.filed-card, .ghost-card {
  left: 18px;
  right: 18px;
  height: var(--bh);
  border-radius: 3px;
  background: #f4efe2;
  background-image: linear-gradient(180deg, transparent 0 9px, rgba(214, 69, 69, .5) 9px 10px, transparent 10px);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08);
}
.filed-card:nth-child(1) { top: -2px;  transform: translateZ(-7px); }
.filed-card:nth-child(2) { top: 3px;   transform: translateZ(-14px); left: 22px; right: 14px; }
.ghost-card { top: -4px; transform: translateZ(-4px); background-color: var(--paper); }

/* ---------- the pulled-out cards ---------- */

.card-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.card {
  position: fixed;
  left: calc(50% - var(--cw) / 2);
  top: var(--card-top);
  width: var(--cw);
  height: var(--ch);
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 22px 44px rgba(40, 20, 5, .35), 0 3px 8px rgba(40, 20, 5, .2);
  pointer-events: auto;
  overflow: hidden;
  transform-origin: 0 0;
}
.card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 10px;
  bottom: 0;
  height: var(--row);
  background: linear-gradient(rgba(255, 253, 248, 0), var(--paper));
  pointer-events: none;
}

.card-head {
  position: relative;
  padding: 10px 52px 4px 28px;
  border-bottom: 2px solid var(--rule-red);
  flex: none;
}

.card-title {
  margin: 0;
  font: 700 clamp(28px, 6vw, 36px)/1.1 Caveat, cursive;
  color: #1f1d2b;
}

.card-meta {
  min-height: 20px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-soft);
}

.card-back {
  display: inline-block;
  margin: 0 0 2px -2px;
  padding: 0 2px;
  border: 0;
  background: none;
  font: 400 15px/22px Kalam, cursive;
  color: var(--accent, var(--ink-soft));
  cursor: pointer;
}
.card-back:hover { text-decoration: underline; }

.card-close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  font: 400 28px/36px Kalam, sans-serif;
  color: var(--ink-soft);
  cursor: pointer;
}
.card-close:hover { background: rgba(0, 0, 0, .06); }

/* The ruled area. The lines are drawn on the content itself, so they scroll exactly with the text. */
.card-scroll {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background-color: var(--paper);
  scrollbar-width: thin;
  scrollbar-color: var(--rule-blue) transparent;
}

.card-body {
  flex: 1 0 auto;
  padding: 0 28px var(--row);
  font-size: 17px;
  line-height: var(--row);
  background-color: var(--paper);
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(var(--row) - 1px), var(--rule-blue) calc(var(--row) - 1px) var(--row));
}

.card-body > *, .card-body li > * { margin-top: 0; margin-bottom: 0; }
.card-body h1, .card-body h2, .card-body h3,
.card-body h4, .card-body h5, .card-body h6 {
  margin: var(--row) 0 0;
  font-size: 19px;
  line-height: var(--row);
  font-weight: 700;
  color: #1f1d2b;
}
.card-body > :first-child { margin-top: 0; }
.card-body p + p { margin-top: var(--row); }
.card-body ul, .card-body ol { padding-left: 1.4em; }
.card-body li ul, .card-body li ol { margin: 0; }
.card-body blockquote {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid rgba(214, 69, 69, .5);
  color: var(--ink-soft);
}
.card-body hr { display: none; }
.card-body a { color: #3d6aa6; }
.card-body img { max-width: 100%; }

.card-body .recipe-list { list-style: none; margin: 0; padding: 0; }
.recipe-list button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font: 400 18px/var(--row) Kalam, cursive;
  color: var(--ink);
  cursor: pointer;
}
.recipe-list button:hover, .recipe-list button:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  outline: none;
}
.recipe-list .empty { color: var(--ink-soft); }

.load-error { color: #a03030; }

@media (max-width: 600px) {
  .card-head { padding-left: 18px; }
  .card-body { padding-left: 18px; padding-right: 18px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .lid, .section, .tab, .hint { transition-duration: .01s !important; transition-delay: 0s !important; }
}