/* ============================================================
   THE ORDER BOOK, the /story/ signature.

   Campbell asked what happened to the ribbon. This is the answer, and it is a
   better one than porting it: the rival's ribbon is photographs orbiting a sine
   in a void, and its subject is a memoir. On THIS page a memoir is correct, so
   the mechanic comes here. But it does not come as a void.

   Kimmy ran a seven year business on notebook paper. Her own words, sent to us:
   "this is gonna save me so many sheets of notebook paper." The order book IS
   the story. So her seven years is a real notebook in the maroon room, and the
   scroll TURNS THE PAGES: ruled paper, a red margin, punched holes, her words in
   her own hand, and a photograph clipped to the sheet. It ends on the Armour
   Road page, which is the first page she has ever had that is not paper.

   Nothing here is invented: every line on these pages is already true in the
   project brain.
   ============================================================ */

.ob{ position:relative; background:#1c080d; }
.ob-live{ height:470svh; }

.ob-stage{ position:relative; }
.ob-live .ob-stage{
  position:sticky; top:var(--mast-h, 0px);
  height:calc(100svh - var(--mast-h, 0px));
  display:grid; place-items:center;
  perspective:1700px;
  overflow:hidden;
}

/* the room the book sits in: her maroon, with the desk lamp over the page */
.ob-room{
  position:absolute; inset:0;
  background:
    radial-gradient(40% 30% at 50% 6%, rgba(255,214,190,.34), rgba(255,214,190,0) 70%),
    radial-gradient(120% 78% at 50% 22%,
      var(--kc-maroon) 0%, var(--kc-maroon-mid) 40%, var(--kc-maroon-deep) 72%, #180709 100%);
}
.ob-room::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(251,228,234,.13) 1.4px, transparent 1.5px) 0 0/24px 24px;
}

/* ---------- THE BOOK ---------- */
.ob-book{
  position:relative;
  width:min(720px, 88vw);
  aspect-ratio:4/3.05;
  transform-style:preserve-3d;
  transform:rotate(-1.1deg);
  z-index:2;
}
/* the pages already turned, stacked under the live one so the book has depth */
.ob-book::before{
  content:"";
  position:absolute; inset:-6px -9px -10px -6px;
  background:linear-gradient(#f2e6d4, #d9c6ad);
  border-radius:3px 10px 10px 3px;
  box-shadow:0 40px 70px -30px rgba(0,0,0,.85);
  transform:translateZ(-14px) rotate(.7deg);
}

.ob-page{
  position:absolute; inset:0;
  transform-origin:left center;
  transform-style:preserve-3d;
  will-change:transform;
}
.ob-face, .ob-back{
  position:absolute; inset:0;
  backface-visibility:hidden;
  border-radius:2px 9px 9px 2px;
  overflow:hidden;
  /* RULED PAPER: the lines, the red margin, and the punched holes are the whole
     reason this reads as her notebook and not as a card with a shadow. */
  background:
    /* punched holes down the binding */
    radial-gradient(circle at 26px 16%, rgba(120,80,70,.30) 6px, transparent 6.5px),
    radial-gradient(circle at 26px 50%, rgba(120,80,70,.30) 6px, transparent 6.5px),
    radial-gradient(circle at 26px 84%, rgba(120,80,70,.30) 6px, transparent 6.5px),
    /* the red margin rule */
    linear-gradient(90deg, transparent 0 61px, rgba(180,35,47,.42) 61px 62.4px, transparent 62.4px),
    /* the blue feint */
    repeating-linear-gradient(rgba(255,255,255,0) 0 31px, rgba(84,116,150,.26) 31px 32px),
    linear-gradient(178deg, #fffdf6, #f6ecdc);
  background-position:0 0, 0 0, 0 0, 0 0, 0 54px, 0 0;
  box-shadow:inset 22px 0 26px -22px rgba(90,55,50,.55), 0 24px 44px -26px rgba(0,0,0,.7);
}
.ob-back{ transform:rotateY(180deg); }
/* the back of a turned sheet is the same paper, read from behind, so its rules
   run the other way and its margin sits on the other side */
.ob-back{
  background:
    repeating-linear-gradient(rgba(255,255,255,0) 0 31px, rgba(84,116,150,.20) 31px 32px),
    linear-gradient(178deg, #fbf3e6, #efe3d0);
  background-position:0 54px, 0 0;
  box-shadow:inset -22px 0 26px -22px rgba(90,55,50,.5);
}

.ob-in{
  position:absolute; inset:0;
  padding:clamp(26px, 4.4vw, 52px) clamp(26px, 4vw, 46px) clamp(26px, 4vw, 44px) clamp(78px, 9vw, 96px);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(16px, 2.6vw, 34px);
  align-items:center;
}
.ob-when{
  font-family:var(--kc-script);
  font-size:clamp(19px, 2.2vw, 25px);
  color:var(--kc-rose-text);
  margin:0 0 var(--space-3);
}
.ob-in h2{
  font-size:clamp(19px, 2.3vw, 26px);
  margin:0 0 var(--space-4);
  color:var(--kc-ink);
  line-height:1.2;
}
.ob-in p{
  margin:0 0 var(--space-3);
  color:var(--kc-ink-soft);
  font-size:clamp(14px, 1.32vw, 16px);
  line-height:1.62;
}
.ob-in p strong{ color:var(--kc-ink); }

/* a photograph clipped to the sheet, never a framed component */
.ob-shot{ position:relative; margin:0; transform:rotate(1.8deg); }
.ob-page:nth-child(even) .ob-shot{ transform:rotate(-2.2deg); }
.ob-shot img{
  display:block; width:100%; height:auto;
  border:7px solid #fffdf7;
  box-shadow:0 16px 26px -14px rgba(60,35,32,.75);
}
/* the clip itself */
.ob-shot::after{
  content:"";
  position:absolute; top:-13px; left:50%; margin-left:-11px;
  width:22px; height:34px;
  border:2.5px solid #b9a08f;
  border-radius:11px 11px 4px 4px;
  border-bottom-color:transparent;
}

/* the last page is the one that is not paper */
.ob-page-last .ob-face{
  background:linear-gradient(172deg, var(--kc-maroon), var(--kc-maroon-deep));
  box-shadow:0 24px 44px -26px rgba(0,0,0,.8);
}
.ob-page-last .ob-in{ grid-template-columns:1fr; text-align:center; padding-inline:clamp(30px,6vw,70px); }
.ob-page-last h2{ color:#fff6ee; }
.ob-page-last p{ color:#f0dcd5; }
.ob-page-last .ob-when{ color:var(--kc-field); }
.ob-page-last .btn{ margin-top:var(--space-5); }

/* how far through the book you are, drawn as her crimped board edge filling */
.ob-walk{
  position:absolute; left:50%; bottom:clamp(16px,3.4vh,30px);
  transform:translateX(-50%);
  width:min(210px, 40vw); height:10px;
  border:1px dashed rgba(251,228,234,.5);
  border-radius:999px; overflow:hidden; z-index:4;
}
.ob-walk i{ display:block; height:100%; background:var(--kc-field);
  transform:scaleX(var(--ob-p, 0)); transform-origin:0 50%; }

/* ============================================================
   THE SHADOW: no JS, or reduced motion. The book stops turning and becomes what
   it is anyway, a run of real pages you read down.
   ============================================================ */
.ob-flat{ padding:var(--section-y) 0; }
.ob-flat .ob-room, .ob-flat .ob-walk{ display:none; }
.ob-flat .ob-stage{ position:static; height:auto; perspective:none; display:block; }
.ob-flat .ob-book{
  position:static; width:min(720px,92vw); aspect-ratio:auto;
  margin:0 auto; transform:none; transform-style:flat;
}
.ob-flat .ob-book::before{ display:none; }
.ob-flat .ob-page{ position:static; transform:none !important; margin-bottom:var(--space-6); }
.ob-flat .ob-back{ display:none; }
.ob-flat .ob-face{ position:relative; inset:auto; }
.ob-flat .ob-in{ position:static; }

@media (prefers-reduced-motion:reduce){
  .ob-live{ height:auto; }
  .ob-live .ob-stage{ position:static; height:auto; }
}

@media (max-width:760px){
  .ob-live{ height:480svh; }
  .ob-book{ width:92vw; aspect-ratio:3/4.05; }
  /* on a phone the sheet is portrait, so the photograph sits ABOVE the writing
     instead of beside it: an authored composition, not a squeezed one */
  .ob-in{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    align-content:center;
    padding:clamp(22px,6vw,34px) clamp(20px,5vw,30px) clamp(22px,6vw,32px) clamp(56px,15vw,68px);
    gap:var(--space-5);
  }
  .ob-shot{ order:-1; max-width:62%; margin-inline:auto; }
  .ob-face, .ob-back{
    background-position:0 0, 0 0, 0 0, 0 0, 0 48px, 0 0;
  }
}