/* ppuzzl.in -- the goblin tinker's workshop logbook
   Palette (sunset-warm, six solid steps, no gradient wash):
     #2a1410 cellar plum   (page bg, duotone shadow)
     #f4a361 workshop amber (light, primary text on dark)
     #c46a3d rust solder    (accent, ruled lines, crt halo)
     #7d4a2e old tea        (deep ochre body text on lichen)
     #e8d4b6 lichen cream   (notes column, footer panel)
     #5a3a2a mossy brown    (svg dividers, leaf flecks)
   Fonts: Space Grotesk (display/headings), Inter (body), Space Mono (marginalia)
*/

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #2a1410; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', sans-serif;
    color: #f4a361;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
}

/* west-window ambient light, fixed so it doesn't scroll */
.window-light {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 50% at 100% 0%, rgba(244, 163, 97, 0.12), transparent 60%),
                radial-gradient(ellipse 40% 35% at 0% 100%, rgba(196, 106, 61, 0.06), transparent 60%);
    z-index: 0;
}

/* ===== Logbook grid: f-pattern ===== */
.logbook {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(48px, 8vw, 96px) 24px;
    display: grid;
    grid-template-columns: 380px 24px 720px;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "top    top   top"
        "tele   tele  tele"
        "spine  gap   notes"
        "bench  bench bench";
    gap: 0;
    column-gap: 0;
}

/* ===== F-top crossbar: hero ===== */
.f-top {
    grid-area: top;
    display: grid;
    grid-template-columns: 1fr 320px;
    align-items: end;
    gap: 32px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(196, 106, 61, 0.32);
    margin-bottom: 8px;
    position: relative;
}

.wordmark-block {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
}

.entry-stamp {
    font-family: 'Space Mono', monospace;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #c46a3d;
    font-weight: 400;
}

.wordmark {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(4rem, 11vw, 9rem);
    letter-spacing: -0.04em;
    line-height: 0.92;
    color: #f4a361;
    text-transform: lowercase;
}

.subline {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.78;
    color: #e8d4b6;
    max-width: 520px;
    letter-spacing: 0.005em;
}

.margin-flecks {
    position: absolute;
    top: 0;
    right: -16px;
    color: #5a3a2a;
}

/* ===== CRT frame in upper-right ===== */
.crt-frame {
    position: relative;
    width: 320px;
    height: 240px;
    align-self: end;
    justify-self: end;
}

.crt-halo {
    position: absolute;
    inset: -28px;
    border-radius: 30%;
    background: radial-gradient(ellipse at center, rgba(196, 106, 61, 0.55) 0%, rgba(196, 106, 61, 0.18) 50%, transparent 70%);
    filter: blur(18px);
    z-index: 0;
    opacity: 0.55;
    animation: pulse-attention 2.6s ease-in-out infinite;
    animation-play-state: paused;
}

.crt-frame.is-pulsing .crt-halo { animation-play-state: running; }

@keyframes pulse-attention {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 1.0;  transform: scale(1.03); }
}

.crt-cap {
    margin-top: 10px;
    font-family: 'Space Mono', monospace;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #c46a3d;
    text-align: right;
}

/* ===== Telegraph (mid-crossbar) ===== */
.telegraph {
    grid-area: tele;
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, #c46a3d 6%, #c46a3d 94%, transparent 100%);
    margin: 24px 0 12px;
}

.telegraph-line {
    grid-area: tele;
    align-self: end;
    font-family: 'Space Mono', monospace;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #c46a3d;
    text-align: center;
    margin-top: -28px;
    margin-bottom: 40px;
    background: #2a1410;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 4px 16px;
}

/* ===== F-spine (left column) ===== */
.f-spine {
    grid-area: spine;
    display: flex;
    flex-direction: column;
    gap: 56px;
    padding-top: 16px;
}

.spine-fig {
    width: 380px;
    height: 380px;
    transform: rotate(var(--rot, 0deg));
    transition: transform 380ms ease-out;
    position: relative;
}

.spine-fig figcaption {
    margin-top: 14px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #f4a361;
    text-align: left;
    transform: rotate(calc(var(--rot, 0deg) * -1));
}

/* ===== Duotone treatment ===== */
.duotone {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.duotone--frame {
    width: 380px;
    height: 380px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(244, 163, 97, 0.08) inset;
}

.duotone__plate {
    position: relative;
    width: 100%;
    height: 100%;
    filter: contrast(1.05) brightness(0.95);
}

.duotone__plate svg {
    display: block;
    width: 100%;
    height: 100%;
}

.duotone__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #2a1410 0%, #f4a361 100%);
    mix-blend-mode: multiply;
    opacity: 1;
    transition: opacity 380ms ease-out;
    pointer-events: none;
    z-index: 1;
}

.spine-fig:hover .duotone__overlay { opacity: 0.85; }

.duotone--crt {
    width: 320px;
    height: 240px;
    position: relative;
    z-index: 2;
}

.duotone__scanlines {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.18) 0px,
        rgba(0, 0, 0, 0.18) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 2;
}

/* ===== F-notes (right column) ===== */
.f-notes {
    grid-area: notes;
    width: 720px;
    padding-top: 16px;
    position: relative;
    background: #e8d4b6;
    padding: 48px 56px;
    color: #7d4a2e;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4),
                inset 0 0 0 1px rgba(125, 74, 46, 0.18);
}

/* logic-gate watermark on the field-notes column */
.watermark {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.06;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%237d4a2e' stroke-width='1.4'><path d='M10 30 L30 30 Q56 30 56 50 Q56 70 30 70 L10 70 Z'/><path d='M56 50 L74 50 M14 38 L4 38 M14 62 L4 62'/><path d='M90 100 Q102 100 110 110 Q116 122 110 134 Q102 144 90 144 Q98 132 98 122 Q98 112 90 100 Z'/><path d='M110 122 L128 122'/><circle cx='150' cy='40' r='12' fill='none'/><path d='M150 28 L150 16 M150 52 L150 64 M138 40 L126 40 M162 40 L174 40'/><path d='M30 130 L60 130 L60 160 L30 160 Z M22 138 L30 138 M22 152 L30 152 M60 145 L70 145'/></g></svg>");
    background-size: 180px 180px;
    background-repeat: repeat;
    z-index: 0;
}

.entry {
    position: relative;
    padding: 8px 0 24px;
    z-index: 1;
}

.entry-num {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: #c46a3d;
    text-transform: lowercase;
    display: inline-block;
    margin-right: 8px;
    vertical-align: baseline;
}

.entry-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.18;
    color: #2a1410;
    margin: 0 0 8px;
    display: inline;
    letter-spacing: -0.01em;
}

.entry-meta {
    margin: 14px 0 18px;
    color: #c46a3d;
}

.entry-meta small {
    font-family: 'Space Mono', monospace;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.entry-body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.78;
    color: #7d4a2e;
    letter-spacing: 0.005em;
    max-width: 540px;
}

.entry-body em {
    font-style: italic;
    background-image: linear-gradient(to top, rgba(244, 163, 97, 0.55) 0%, rgba(244, 163, 97, 0.55) 28%, transparent 28%);
    padding: 0 2px;
    color: #2a1410;
    transform: rotate(-0.6deg);
    display: inline-block;
}

.margin-gloss {
    position: absolute;
    right: -36px;
    top: 64px;
    transform: translateX(100%);
    width: 120px;
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #c46a3d;
    line-height: 1.6;
    text-align: left;
}

/* hand-stitched zig-zag divider */
.zigzag {
    border: 0;
    height: 14px;
    margin: 28px 0 28px;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='560' height='14' viewBox='0 0 560 14'><path d='M0 7 L20 3 L42 8 L62 4 L82 9 L102 3 L124 7 L142 4 L164 8 L184 3 L206 7 L224 4 L246 9 L266 3 L286 7 L306 4 L326 9 L348 3 L368 7 L386 4 L408 8 L428 4 L448 7 L468 3 L488 8 L508 4 L530 7 L550 4' fill='none' stroke='%235a3a2a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: repeat-x;
    background-position: 0 50%;
}

/* ===== Workbench footer ===== */
.workbench {
    grid-area: bench;
    margin-top: 96px;
    padding-top: 48px;
    border-top: 1px solid rgba(196, 106, 61, 0.32);
}

.bench-fig {
    width: 100%;
    margin-bottom: 24px;
}

.duotone--bench {
    width: 100%;
    height: clamp(280px, 36vw, 420px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}

.duotone--bench .duotone__overlay {
    background: linear-gradient(135deg, #2a1410 0%, #f4a361 100%);
}

.bench-fig figcaption {
    margin-top: 14px;
    font-family: 'Space Mono', monospace;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #c46a3d;
    text-align: center;
}

.bench-credit {
    margin-top: 24px;
    text-align: center;
    color: #7d4a2e;
}

.bench-credit small {
    font-family: 'Space Mono', monospace;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #c46a3d;
}

/* selection */
::selection {
    background: #c46a3d;
    color: #2a1410;
}

/* ===== Responsive: collapse below 1180px ===== */
@media (max-width: 1180px) {
    .logbook {
        grid-template-columns: 1fr;
        grid-template-areas:
            "top"
            "tele"
            "spine"
            "notes"
            "bench";
    }

    .f-top {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .crt-frame {
        justify-self: start;
        align-self: start;
    }

    .crt-cap { text-align: left; }

    .f-spine {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 32px;
    }

    .spine-fig,
    .duotone--frame {
        width: min(380px, 88vw);
        height: min(380px, 88vw);
    }

    .f-notes {
        width: 100%;
        padding: 32px 28px;
    }

    .margin-gloss {
        position: static;
        transform: none;
        width: auto;
        margin-top: 14px;
        padding: 10px 12px;
        background: rgba(196, 106, 61, 0.08);
        border-left: 2px solid #c46a3d;
    }

    .entry-body { max-width: none; }
}

@media (max-width: 720px) {
    .wordmark { font-size: clamp(3rem, 16vw, 6rem); }
    .subline { font-size: 0.96rem; }
    .telegraph-line {
        font-size: 0.66rem;
        letter-spacing: 0.12em;
    }
    .crt-frame { width: 100%; max-width: 320px; height: auto; aspect-ratio: 4/3; }
    .duotone--crt { width: 100%; height: 100%; }
    .f-notes { padding: 24px 20px; }
    .entry-body { font-size: 1rem; }
}

/* honour reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .crt-halo {
        animation: none !important;
        opacity: 0.85 !important;
    }
    html { scroll-behavior: auto; }
    .spine-fig { transition: none; }
    .duotone__overlay { transition: none; }
}