:root {
  --square: 48px;

  --cols: 15;
  --rows: 26;

  --grid-width: calc(var(--cols) * var(--square));
  --grid-height: calc(var(--rows) * var(--square));

  --line: #588653;
  --paper: #e0e8bf;
  --margin: #c1cb9b;
  --text: #2e3e24;
}

body {
  background: #d9d9d9 url("PODZOL.jpg") fixed;
  display: flex;
  justify-content: center;
  padding: 40px;
  font-family: "Courier New", monospace;
}

/* OUTER PAGE */
.paper {
  width: calc(var(--grid-width) + 120px);
  height: calc(var(--grid-height) + 140px);
  background: var(--margin);
  border-radius: 20px;

  /* Thinner, subtler border */
  border: 1px solid rgba(78,107,60,0.7) opacity(0.5);

  padding: 40px 60px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.801);
}

/* GRID AREA */
.sheet {
  width: var(--grid-width);
  height: var(--grid-height);

  border: 2px solid var(--line);
  box-sizing: border-box;

  background-image:


    /* horizontal grid */
    repeating-linear-gradient(
      to bottom,
      rgba(78,107,60,0.25) 0px,
      rgba(78,107,60,0.25) 1px,
      transparent 1px,
      transparent var(--square)
    ),

    /* ruled baseline (aligned) */
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent calc(var(--square) - 1px),
      var(--line) calc(var(--square) - 1px),
      var(--line) var(--square)
    );

  background-size: 100% 100%;
  position: relative;
}
.sheet {
  position: relative;
}

/* VERTICAL GRID LAYER ONLY */
.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image:
    repeating-linear-gradient(
      to right,
      rgba(78,107,60,0.25) 0px,
      rgba(78,107,60,0.25) 1px,
      transparent 1px,
      transparent var(--square)
    );

  /* Mask ONLY this layer */
  -webkit-mask-image:
    repeating-linear-gradient(
      to bottom,
      black 0px,
      black 2px,
      transparent 2px,
      transparent 8px
    );

  mask-image:
    repeating-linear-gradient(
      to bottom,
      black 0px,
      black 2px,
      transparent 2px,
      transparent 8px
    );
}

/* SPIRAL BINDING HOLES */
.hole {
  content: "";
  position: absolute;
  top: 20px;       /* starting offset from top */
  right: -40px;      /* margin from right edge */
  width: 16px;     /* hole diameter */
  height: 16px;
  background: url("PODZOL.jpg") fixed; /* matches sheet paper color */
  border: 1px solid var(--line); /* subtle edge of hole */
  border-radius: 20%; /* makes it circular */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.747); /* subtle depth */
}


/* TEXT */
.content {
  padding: 0 24px;
  color: var(--text);
  font-size: 24px;

  /* PERFECT BASELINE LOCK */
  line-height: var(--square);
}

h1 {
  margin: 0;
  margin-bottom: var(--square);
  font-size: 32px;
}

p {
  margin: 0;
}

/* FOOTER */
.footer {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--line);
}

.paper {
  position: relative;
  overflow: hidden;
}

/* PAPER NOISE TEXTURE */
.paper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image: url("NOISE2.jpg");
  background-size: 300px 300px;
  opacity: 0.67; /* subtle */
  mix-blend-mode: multiply;
}

.back-button {
  position: fixed;
  top: 20px;
  left: 20px;
  padding: 8px 12px;
  color: white;
  cursor: pointer;
  font-size: 36px;
  
}

.darkmode-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 8px 12px;
  color: white;
  cursor: pointer;
  font-size: 36px;
}