/* =========================================================
   Sketch diary: wooden cover + auto page-turning book
   Self-contained. Colours of wood and paper are fixed on purpose
   (they are "physical" objects, so they look the same in dark mode).
   ========================================================= */

.diary {
    --wood-1: #9a6540;
    --wood-2: #7f4e2d;
    --wood-3: #e4e0dd;
    --carve: #633416;
    --paper: #b5a379;
    --paper-edge: #efe5cf;
    --pencil: #3b352c;
    --pencil-soft: #7b7263;
    --turn: 1.15s;

    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1rem;
}

.diary-stage {
    width: min(100%, 720px);
    padding: 1.5rem 0 1rem;
}

/* ---------- Book ---------- */
.book {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    perspective: 2600px;
    transition: transform .9s cubic-bezier(.3, .7, .2, 1);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

/* closed: slide so the cover sits in the middle */
.book.is-closed {
    transform: translateX(-25%);
}

/* narrow screens: taller pages so text has room */
@container (max-width: 560px) {
    .book {
        aspect-ratio: 1 / 1.02;
    }

    /* the closed cover is a bit bigger on phones */
    .book.is-closed {
        transform: translateX(-25%) scale(1.14);
    }

    .diary-stage {
        padding-block: 2.5rem 2rem;
    }
}

.book-base,
.leaf {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
}

.leaf {
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform var(--turn) cubic-bezier(.45, .05, .25, 1);
}

.leaf.is-flipped {
    transform: rotateY(-180deg);
}

.book.is-fast .leaf {
    transition-duration: .55s;
}

.face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}

.face-back {
    transform: rotateY(180deg);
}

/* soft shadow that sweeps across a page while it turns */
.face::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, rgba(40, 25, 10, .28), rgba(40, 25, 10, 0) 70%);
}

.leaf.is-turning .face::after {
    animation: diary-shade var(--turn) ease-in-out;
}

.book.is-fast .leaf.is-turning .face::after {
    animation-duration: .55s;
}

@keyframes diary-shade {
    50% {
        opacity: 1;
    }
}

/* ---------- Paper ---------- */
.page {
    height: 100%;
    background-color: var(--paper);
    color: var(--pencil);
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

.page-right {
    border-radius: 0 6px 6px 0;
    background-image:
        linear-gradient(90deg, rgba(90, 60, 25, .2), rgba(90, 60, 25, 0) 6%),
        linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(0, 0, 0, .03));
    box-shadow: 0 18px 30px -18px rgba(40, 25, 10, .45);
}

.page-left {
    border-radius: 6px 0 0 6px;
    background-image:
        linear-gradient(270deg, rgba(90, 60, 25, .2), rgba(90, 60, 25, 0) 6%),
        linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(0, 0, 0, .03));
    box-shadow: 0 18px 30px -18px rgba(40, 25, 10, .45);
}

/* stack of page edges under the right side */
.book-base .page-right {
    box-shadow:
        3px 1px 0 -1px var(--paper-edge),
        6px 2px 0 -2px #e6dac0,
        0 18px 30px -18px rgba(40, 25, 10, .45);
}

.page-no {
    position: absolute;
    bottom: 4.5%;
    font-size: clamp(.7rem, 1.4cqw, .9rem);
    color: var(--pencil-soft);
    font-style: italic;
}

.page-right .page-no {
    right: 8%;
}

.page-left .page-no {
    left: 8%;
}

/* left page: description */
.desc {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12% 12% 14% 13%;
}

.d-no {
    font-size: clamp(.72rem, 1.5cqw, .95rem);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pencil-soft);
}

.d-title {
    margin: .35em 0 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.25rem, 4.4cqw, 2.4rem);
    line-height: 1.05;
    color: var(--pencil);
}

.d-rule {
    display: block;
    width: 34%;
    height: 1px;
    margin: 1em 0;
    background: linear-gradient(90deg, var(--pencil-soft), transparent);
}

.d-note {
    margin: 0;
    font-size: clamp(.85rem, 2.1cqw, 1.2rem);
    line-height: 1.45;
    font-style: italic;
}

.d-meta {
    margin: 1em 0 0;
    font-size: clamp(.72rem, 1.5cqw, .95rem);
    color: var(--pencil-soft);
}

/* right page: the sketch, taped in */
.mount {
    height: 100%;
    padding: 12% 10% 13%;
    display: grid;
    place-items: center;
}

/* the photo is sized by diary.js so the tape always sits on the image itself */
.photo {
    position: relative;
    display: block;
    padding: 6px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(40, 25, 10, .15), 0 8px 18px -8px rgba(40, 25, 10, .35);
    transform: rotate(-.6deg);
}

.photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
}

.photo::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 50%;
    width: 38%;
    max-width: 90px;
    height: 20px;
    transform: translateX(-50%) rotate(-3deg);
    background: rgba(246, 232, 190, .8);
    box-shadow: 0 1px 2px rgba(40, 25, 10, .12);
}

/* end pages */
.end {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12%;
    gap: .6em;
}

.end-text {
    margin: 0;
    font-size: clamp(1rem, 3cqw, 1.7rem);
    font-style: italic;
    line-height: 1.3;
}

.end-sign {
    margin: 0;
    font-family: "Dancing Script", "Brush Script MT", cursive;
    font-size: clamp(1.1rem, 3.4cqw, 2rem);
    color: var(--pencil-soft);
}

.rewatch {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    margin-top: .6em;
    padding: .7em 1.3em;
    border: 0;
    border-radius: 999px;
    background: var(--wood-2);
    color: #fbefe0;
    font: 600 clamp(.8rem, 1.9cqw, 1rem) / 1 "Public Sans", system-ui, sans-serif;
    cursor: pointer;
    box-shadow: 0 8px 18px -8px rgba(60, 30, 10, .6);
    transition: background-color .2s, transform .2s;
}

.rewatch:hover {
    background: var(--wood-3);
    transform: translateY(-1px);
}

.rewatch-icon {
    font-size: 1.2em;
    line-height: 1;
}

/* the little jump when the book ends */
.book.is-ended {
    animation: diary-hop 1.1s ease-out .3s 2;
}

.book.is-ended .rewatch {
    animation: diary-pulse 1.6s ease-in-out 1.2s infinite;
}

@keyframes diary-hop {
    0%, 100% { translate: 0 0; }
    25% { translate: 0 -16px; }
    45% { translate: 0 0; }
    60% { translate: 0 -6px; }
    75% { translate: 0 0; }
}

@keyframes diary-pulse {
    50% { box-shadow: 0 0 0 8px rgba(122, 74, 42, .18), 0 8px 18px -8px rgba(60, 30, 10, .6); }
}

/* ---------- Wooden cover ---------- */
.cover {
    height: 100%;
    border-radius: 4px 14px 14px 4px;
    display: grid;
    place-items: center;
    padding: 7%;
    background:
        /* varnish sheen: smooth, polished finish */
        linear-gradient(118deg, rgba(255, 236, 210, .22) 0%, rgba(255, 236, 210, 0) 38%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .18) 100%),
        /* wood grain (generated noise, stretched into long fibres) */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='450'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.22 0.009' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.12 0 0 0 0 0.05 0 0 0 0.9 -0.36'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") center / 100% 100%,
        /* a couple of soft knots */
        radial-gradient(ellipse 16% 6% at 72% 28%, rgba(50, 25, 8, .18), transparent 70%),
        radial-gradient(ellipse 20% 7% at 28% 80%, rgba(50, 25, 8, .12), transparent 70%),
        linear-gradient(180deg, var(--wood-1), var(--wood-2) 55%, var(--wood-3));
    box-shadow:
        inset 10px 0 14px -6px rgba(30, 14, 4, .55),   /* spine */
        inset 0 0 0 1px rgba(30, 14, 4, .45),
        inset 0 2px 0 rgba(255, 225, 190, .18),
        0 26px 40px -16px rgba(40, 20, 5, .6);
}

.cover-frame {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55em;
    padding: 10% 9%;
    text-align: center;
    border-radius: 10px;
    /* carved groove around the edge */
    box-shadow:
        inset 0 0 0 2px rgba(35, 16, 5, .5),
        inset 0 0 0 3px rgba(255, 222, 185, .12),
        0 0 0 1px rgba(255, 222, 185, .12);
}

/* everything written on the cover looks engraved into the wood */
.cover-frame > * {
    margin: 0;
    color: var(--carve);
    text-shadow: 0 1px 0 rgba(255, 222, 185, .3), 0 -1px 1px rgba(0, 0, 0, .45);
}

.cover-ornament {
    font-size: clamp(.8rem, 2.2cqw, 1.2rem);
    letter-spacing: .5em;
    opacity: .9;
}

.cover-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
    font-size: clamp(.95rem, 4cqw, 2.3rem);
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1;
}

.cover-message {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(.9rem, 2.5cqw, 1.35rem);
    line-height: 1.4;
    max-width: 26ch;
}

.cover-sign {
    font-family: "Dancing Script", "Brush Script MT", cursive;
    font-size: clamp(1.1rem, 3.4cqw, 1.9rem);
    margin-top: .2em;
}

.cover-hint {
    position: absolute;
    bottom: 6%;
    font: 500 clamp(.62rem, 1.3cqw, .8rem) / 1 "Public Sans", system-ui, sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .75;
}

/* ---------- Controls ---------- */
.diary-controls {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .5rem;
}

.diary-btn {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid var(--line, #e4dff2);
    background: var(--surface, #fff);
    color: var(--ink, #1c1638);
    font-size: 1rem;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}

.diary-btn:hover {
    border-color: var(--accent, #5b3fd6);
    color: var(--accent, #5b3fd6);
}

.diary-count {
    min-width: 5.5rem;
    text-align: center;
    font-size: .9rem;
    color: var(--muted, #5f5a73);
    font-variant-numeric: tabular-nums;
}

.diary:focus-visible {
    outline: none;
}

.diary:focus-visible .book {
    outline: 3px solid var(--accent, #5b3fd6);
    outline-offset: 8px;
    border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .book,
    .leaf {
        transition-duration: .01ms !important;
    }

    .book.is-ended,
    .book.is-ended .rewatch,
    .leaf.is-turning .face::after {
        animation: none !important;
    }
}

/* ===== Tan cover + dark pages (paste at the END of diary.css) ===== */
.diary {
    --wood-1: #e6c29b;      /* tan / skin tone cover */
    --wood-2: #d6a97c;
    --wood-3: #bf8d60;
    --carve: #4a2a14;       /* dark brown engraved text */
    --paper: #2f241d;       /* dark espresso pages */
    --paper-edge: #3d3027;
    --pencil: #f3e6d2;      /* cream text on dark pages */
    --pencil-soft: #c2ab8f;
}

/* cover: lighter, smoother leather-like finish */
.cover {
    box-shadow:
        inset 10px 0 14px -6px rgba(90, 50, 20, .45),
        inset 0 0 0 1px rgba(90, 50, 20, .35),
        inset 0 2px 0 rgba(255, 245, 230, .45),
        0 26px 40px -16px rgba(60, 35, 15, .5);
}

.cover-frame {
    box-shadow:
        inset 0 0 0 2px rgba(74, 42, 20, .45),
        inset 0 0 0 3px rgba(255, 245, 230, .35),
        0 0 0 1px rgba(255, 245, 230, .35);
}

.cover-frame > * {
    color: var(--carve);
    text-shadow: 0 1px 0 rgba(255, 245, 230, .55), 0 -1px 0 rgba(60, 30, 10, .25);
}

/* dark pages: soft sheen + deeper gutter */
.page-right {
    background-image:
        linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 7%),
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .12));
}

.page-left {
    background-image:
        linear-gradient(270deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 7%),
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .12));
}

.book-base .page-right {
    box-shadow:
        3px 1px 0 -1px #4a3a2e,
        6px 2px 0 -2px #56453a,
        0 18px 30px -18px rgba(20, 10, 5, .6);
}

/* white sketch sheets now pop against the dark page */
.photo {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 14px 26px -10px rgba(0, 0, 0, .6);
}

.photo::before {
    background: rgba(214, 169, 124, .85);   /* tan tape, matches the cover */
}

.d-rule {
    background: linear-gradient(90deg, var(--wood-2), transparent);
}

.d-no,
.cover-hint {
    color: var(--pencil-soft);
}

.cover-hint {
    color: var(--carve);
}

.rewatch {
    background: var(--wood-2);
    color: #2f1a0c;
}

.rewatch:hover {
    background: var(--wood-1);
}

/* ===== Shloka / quote block on the left page ===== */
.d-title { font-size: clamp(1.1rem, 3.6cqw, 2rem); }
.d-rule { margin: .7em 0; }

.d-note {
    white-space: pre-line;
    font-family: "Tiro Devanagari Sanskrit", "Cormorant Garamond", Georgia, serif;
    font-style: normal;
    font-size: clamp(.78rem, 1.9cqw, 1.08rem);
    line-height: 1.55;
}

.d-meaning {
    margin: .7em 0 0;
    font-style: italic;
    font-size: clamp(.72rem, 1.65cqw, .98rem);
    line-height: 1.4;
    color: var(--pencil);
    opacity: .85;
}

.d-ref {
    margin: .55em 0 0;
    font-size: clamp(.66rem, 1.4cqw, .85rem);
    letter-spacing: .04em;
    color: var(--wood-2);
}

.d-ref::before { content: "\2014\00a0"; }

.desc { padding: 10% 11% 13% 12%; }