* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: #0b0b0c;
  overflow-x: hidden;
}

/*
  The uploaded photograph is the real scene: desk, cap, remote,
  tablecloth. The notebook is real HTML/CSS sitting inside that
  same frame. Everything inside .photo-scene is pushed through
  ONE shared "lens" (filter) below so the notebook and the
  photograph share a single exposure/colour grade instead of
  looking like two separate layers pasted together.
*/
.photo-scene {
  min-height: 100vh;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 9vh 8px 8vh;
  overflow: hidden;

  background-image: url("background.jpg");
  background-size: cover;
  background-position: center 62%;
  background-repeat: no-repeat;
  background-attachment: fixed;

  /* the shared "lens": one grade for photo + paper together */
  filter: contrast(1.06) saturate(.8) brightness(.94) sepia(.05);
}

/*
  An open exercise/foolscap book: a blank left page, a spine crease,
  and the written right page — not a single loose sheet. Both pages
  share one rotation and one shadow, like a real photographed book.
*/
.notebook-spread {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: stretch;
  width: min(650px, 85vw);
  min-height: 620px;

  /* dramatic photographed-at-an-angle depth, not a flat rotate —
     this is what the very first version got right and the later
     "flattened" versions lost. Kept modest, and pivoted from the
     vertical center, so taller content (bigger text) doesn't pick
     up more distortion the further it is from the pivot and get
     pushed past the viewport edge. */
  transform: perspective(1600px) rotateX(4deg) rotateY(-4deg) rotateZ(-2deg);
  transform-origin: 50% 50%;

  filter:
    drop-shadow(11px 20px 15px rgba(0,0,0,.48))
    drop-shadow(0px 4px 4px rgba(0,0,0,.25));
}

/* Blank left-hand page — just ruled lines, no text, slightly
   shadowed as if partly tucked under something on the desk. */
.left-page {
  flex: 0 0 27%;
  position: relative;
  border-radius: 26px 3px 3px 30px;

  background:
    linear-gradient(to right, rgba(0,0,0,.16), transparent 30%),
    repeating-linear-gradient(
      to bottom,
      #e9e2d2 0 39px,
      rgba(50,100,165,.24) 39px 40px
    );
}

.left-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 8% 8%, rgba(0,0,0,.12), transparent 30%),
    radial-gradient(ellipse at 10% 92%, rgba(0,0,0,.10), transparent 28%);
  border-radius: inherit;
}

/* The fold: a shadow dipping into the gutter with a faint highlight
   where the pages curve up out of the spine. */
.spine-gutter {
  flex: 0 0 13px;
  background:
    linear-gradient(
      to right,
      transparent,
      rgba(0,0,0,.4) 45%,
      rgba(0,0,0,.4) 55%,
      transparent
    );
}

/* The written right-hand page. Rounded outer corners like a real
   notebook page, straight on the spine side. */
.real-paper {
  flex: 1 1 auto;
  position: relative;
  min-width: 0;
  border-radius: 3px 30px 36px 3px;

  background:
    linear-gradient(
      105deg,
      rgba(255,255,255,.18),
      transparent 22%,
      rgba(255,255,255,.08) 45%,
      transparent 68%
    ),
    repeating-linear-gradient(
      to bottom,
      #eee7d6 0 39px,
      rgba(50,100,165,.28) 39px 40px
    );
  /* keeps the ruled lines landing just under each line of text
     instead of through the middle of it (see .paper-inner) */
  background-position: 0 0, 0 9px;
}

/* Physical paper shading — no ring-binder holes; this is a sewn
   exercise book, not a spiral pad. */
.real-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;

  background-image:
    linear-gradient(
      to right,
      rgba(0,0,0,.14),
      transparent 5%
    ),
    linear-gradient(
      to right,
      transparent 0 31px,
      rgba(190,66,70,.26) 31px 32px,
      transparent 32px
    ),
    radial-gradient(ellipse at 93% 5%, rgba(0,0,0,.08), transparent 21%),
    radial-gradient(ellipse at 90% 95%, rgba(0,0,0,.07), transparent 26%);
  mix-blend-mode: multiply;
}

/* Fine paper fibre / camera imperfections, kept subtle since
   the shared grain layer (.camera-grain) carries most of it now */
.real-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .28;
  border-radius: inherit;

  background-image:
    radial-gradient(circle at 17% 21%, rgba(50,40,20,.11) 0 1px, transparent 1.5px),
    radial-gradient(circle at 76% 67%, rgba(50,40,20,.08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 38% 81%, rgba(50,40,20,.06) 0 1px, transparent 1.3px),
    linear-gradient(110deg, transparent 25%, rgba(255,255,255,.2) 44%, transparent 61%);
}

.paper-inner {
  position: relative;
  z-index: 2;
  min-height: 620px;
  padding: 40px 30px 44px 40px;
}

/*
  Vertical rhythm: the ruled lines on the paper repeat every 40px
  (see .real-paper background above). Every text line-height below
  is locked to that same 40px unit (or a whole multiple of it) so
  a rule always lands just under a line of writing instead of
  drifting through the middle of letters.
*/
:root {
  --line: 40px;
}

.handwriting {
  margin-bottom: var(--line);
}

h1,
h2,
p {
  font-family: "Caveat", cursive;
  color: #0b2f78;
  margin: 0;
}

h1 {
  font-size: 40px;
  line-height: calc(var(--line) * 2);
  font-weight: 600;
  letter-spacing: .015em;
}

header p {
  font-size: 25px;
  line-height: var(--line);
}

section {
  margin: 0 0 var(--line);
}

h2 {
  font-size: 23px;
  line-height: var(--line);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(11,47,120,.6);
  text-underline-offset: 3px;
}

section p {
  font-size: 20px;
  line-height: var(--line);
  overflow-wrap: break-word;
}

.stack-line {
  font-size: 17px;
}

small {
  font-size: 15px;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(11,47,120,.65);
}

a:hover {
  border-bottom-style: solid;
}

footer {
  margin-top: var(--line);
}

footer p {
  font-size: 16px;
}

/* Ink jitter — every word gets a tiny randomized rotation/
   baseline offset from script.js, so lines stop looking like a
   perfectly uniform font and start looking hand-drawn. Characters
   inside are jittered individually too (see .ink-char) — a font
   with only whole words tilted still has every letter identical,
   which is what reads as "typed". Words stay nowrap so lines only
   break between them, never mid-word. */
.ink-word {
  display: inline-block;
  white-space: nowrap;
}

.ink-char {
  display: inline-block;
  will-change: transform;
}

/*
  Simulated camera glare + grain across the ENTIRE scene
  (paper + photo together) — this, plus the shared filter on
  .photo-scene above, is what fuses the two into one photograph
  instead of "text pasted on a picture".
*/
.camera-shine {
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse 70% 40% at 55% 68%,
      rgba(255,255,255,.10),
      transparent 60%
    ),
    linear-gradient(
      112deg,
      rgba(255,255,255,.06) 0%,
      transparent 23%,
      transparent 66%,
      rgba(255,255,255,.05) 100%
    );
  mix-blend-mode: screen;
}

.camera-grain {
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* soft overall vignette tying the corners down, same as a
   real flash photo taken in a dim room */
.camera-vignette {
  position: absolute;
  z-index: 9;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 85% 60% at 50% 45%,
    transparent 55%,
    rgba(0,0,0,.35) 100%
  );
}

@media (max-width: 600px) {
  .paper-inner {
    padding: 36px 20px 40px 30px;
  }

  .left-page {
    flex-basis: 20%;
  }
}