/* martialaw.quest — The Bureau of Marti A. Law, Esq.
   A skeuomorphic desk planner. Earth tones, layered shadows, zero gradients. */

:root {
    --paper-cream:        #f3ead6;
    --paper-cream-2:      #fff5e0;
    --paper-edge:         #d8c89a;
    --leather-oxblood:    #6e3a2c;
    --leather-chestnut:   #8a5a3b;
    --leather-deep:       #4a3a28;
    --ink-umber:          #3a2818;
    --ink-sepia:          #5e4a32;
    --ink-text:           #2e2820;
    --blotter-felt:       #5e6b4a;
    --blotter-shadow:     #3e4a32;
    --brass:              #b8965a;
    --brass-shadow:       #7e6638;
    --mustard-tab:        #c89a48;
    --sage-tab:           #7a8a5a;
    --oxblood-tab:        #6e3a2c;
    --slate-tab:          #5a6878;
    --fountain-blue:      #1a4a78;
    --correction:         #f8f5e8;
    --margin-red:         #b03826;

    --page-w: 720px;
    --page-pad: 88px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 100%;
    min-height: 100%;
    background: var(--blotter-shadow);
    font-family: "Work Sans", system-ui, sans-serif;
    color: var(--ink-text);
    font-size: 16px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.desk {
    position: relative;
    overflow-x: hidden;
    background-color: var(--blotter-felt);
    background-image:
        radial-gradient(circle at 20% 30%, rgba(62,74,50,0.45) 0, transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(62,74,50,0.55) 0, transparent 65%),
        repeating-conic-gradient(
            from 12deg at 50% 50%,
            rgba(62,74,50,0.10) 0deg 1deg,
            transparent 1deg 3deg
        );
    background-attachment: fixed, fixed, fixed;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><circle cx='11' cy='11' r='7' fill='%23b8965a' stroke='%237e6638' stroke-width='1.4'/><circle cx='9' cy='9' r='2' fill='%23fff5e0' opacity='0.55'/></svg>") 11 11, auto;
}

/* desk blotter — felt surface with ink blots and coffee ring */
.desk-blotter {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--blotter-felt);
    background-image:
        radial-gradient(circle at 8% 18%, rgba(40,32,18,0.18) 0, transparent 4%),
        radial-gradient(circle at 92% 12%, rgba(40,32,18,0.14) 0, transparent 5%),
        radial-gradient(circle at 14% 90%, rgba(40,32,18,0.16) 0, transparent 4.5%),
        radial-gradient(circle at 88% 86%, rgba(40,32,18,0.12) 0, transparent 5%);
    box-shadow: inset 0 0 220px rgba(30,40,28,0.55);
}

.ink-blot {
    position: absolute;
    border-radius: 56% 44% 50% 50% / 48% 52% 50% 52%;
    background: rgba(40,32,18,0.32);
    box-shadow: 0 0 8px rgba(40,32,18,0.18) inset;
    filter: blur(0.6px);
}
.ink-blot-1 { top: 9%; left: 6%; width: 56px; height: 44px; transform: rotate(-12deg); }
.ink-blot-2 { top: 22%; right: 4%; width: 38px; height: 30px; transform: rotate(18deg); }
.ink-blot-3 { bottom: 18%; left: 4%; width: 70px; height: 50px; transform: rotate(7deg); border-radius: 60% 40% 55% 45% / 52% 48% 52% 48%; }
.ink-blot-4 { bottom: 8%; right: 6%; width: 44px; height: 32px; transform: rotate(-22deg); }

.coffee-ring {
    position: absolute;
    bottom: 12%;
    right: 11%;
    width: 96px;
    height: 96px;
    border: 3px solid rgba(110,58,44,0.34);
    border-radius: 50%;
    transform: rotate(8deg);
    box-shadow:
        inset 0 0 0 1px rgba(110,58,44,0.18),
        0 0 0 4px transparent;
    opacity: 0.7;
}

/* ====================================================================
   PLANNER — the central book
   ==================================================================== */
.planner {
    position: relative;
    z-index: 5;
    width: var(--page-w);
    margin: 60px auto 80px;
    background: var(--leather-chestnut);
    background-color: var(--leather-chestnut);
    background-image:
        repeating-linear-gradient(
            45deg,
            rgba(58,40,24,0.06) 0,
            rgba(58,40,24,0.06) 1px,
            transparent 1px,
            transparent 3px
        ),
        repeating-linear-gradient(
            -42deg,
            rgba(255,245,224,0.04) 0,
            rgba(255,245,224,0.04) 1px,
            transparent 1px,
            transparent 4px
        );
    border-radius: 4px;
    box-shadow:
        inset 0 1px 0 rgba(255,245,224,0.18),
        inset 0 -1px 0 rgba(58,40,24,0.5),
        inset 0 0 0 1px rgba(58,40,24,0.4),
        0 1px 0 var(--paper-edge),
        0 14px 28px -8px rgba(46,40,32,0.45),
        0 36px 60px -16px rgba(40,30,20,0.5),
        0 56px 80px -24px rgba(20,16,10,0.4);
    padding: 4px;
    transform: perspective(2400px) rotateX(0.4deg);
    transform-origin: top center;
}

/* ====================================================================
   PLANNER COVER (sticky leather header)
   ==================================================================== */
.planner-cover {
    position: relative;
    margin: -4px -4px 0;
    padding: 56px 56px 44px;
    background: var(--leather-deep);
    background-image:
        repeating-linear-gradient(
            38deg,
            rgba(20,12,6,0.18) 0 1px,
            transparent 1px 4px
        ),
        repeating-linear-gradient(
            -40deg,
            rgba(255,245,224,0.04) 0 1px,
            transparent 1px 5px
        );
    border-radius: 4px 4px 0 0;
    box-shadow:
        inset 0 2px 0 rgba(255,245,224,0.12),
        inset 0 -3px 8px rgba(20,12,6,0.55),
        inset 0 0 0 2px rgba(58,40,24,0.5);
    text-align: center;
    color: var(--paper-cream);
}

.cover-leather {
    position: relative;
    padding: 30px 16px;
    border: 1.5px solid rgba(184,150,90,0.32);
    border-radius: 2px;
    box-shadow:
        inset 0 0 0 1px rgba(255,245,224,0.06),
        inset 0 0 36px rgba(20,12,6,0.55);
}

.cover-stitch {
    position: absolute;
    inset: 8px;
    border: 1.4px dashed rgba(184,150,90,0.42);
    border-radius: 2px;
    pointer-events: none;
}

.wordmark {
    font-family: "Cabin Sketch", "Work Sans", serif;
    font-weight: 700;
    font-size: 3.4rem;
    letter-spacing: 0.02em;
    color: var(--leather-deep);
    text-shadow:
        0 1px 0 rgba(255,245,224,0.42),
        0 -1px 0 rgba(20,12,6,0.6),
        0 0 1px rgba(20,12,6,0.4);
    margin-bottom: 12px;
    line-height: 1.05;
}

.cover-sub {
    font-family: "DM Mono", "Work Sans", monospace;
    font-style: italic;
    font-weight: 500;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    color: var(--brass);
    text-transform: lowercase;
    margin-bottom: 6px;
}

.cover-meta {
    font-family: "Work Sans", sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(184,150,90,0.78);
    margin-top: 14px;
}

.cover-seal {
    position: absolute;
    top: 10px;
    right: 18px;
    opacity: 0.8;
    transform: rotate(-8deg);
    filter: drop-shadow(0 2px 0 rgba(20,12,6,0.5));
}

/* ====================================================================
   ORDINANCE PAGES (the cream paper)
   ==================================================================== */
.ordinance {
    position: relative;
    background-color: var(--paper-cream);
    background-image:
        /* paper grain */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.36  0 0 0 0 0.29  0 0 0 0 0.18  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
        /* feint horizontal rule (28px) */
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 27px,
            rgba(110,58,44,0.13) 27px,
            rgba(110,58,44,0.13) 28px
        ),
        /* red vertical margin rule */
        linear-gradient(
            to right,
            transparent 0 95px,
            rgba(176,56,38,0.55) 95px 96px,
            transparent 96px
        );
    background-size: 200px 200px, 100% 28px, 100% 100%;
    padding: 56px var(--page-pad) 64px 124px;
    min-height: 90vh;
    border-bottom: 1.4px dashed var(--ink-sepia);
    box-shadow:
        inset 0 1px 0 rgba(255,245,224,0.6),
        inset 0 -1px 0 rgba(110,58,44,0.16),
        inset 0 0 60px rgba(110,58,44,0.05);
}

.ordinance:last-of-type { border-bottom: none; }

.page-edge {
    position: absolute;
    top: 0; right: 0;
    width: 6px;
    height: 100%;
    background: var(--paper-edge);
    box-shadow:
        inset 1px 0 0 rgba(184,150,90,0.5),
        inset -1px 0 0 rgba(120,90,50,0.6);
}

.brass-plate {
    position: absolute;
    top: 28px;
    right: 24px;
    width: 56px;
    height: 30px;
    background: var(--brass);
    background-color: var(--brass);
    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(255,245,224,0.18) 0 1px,
            transparent 1px 3px
        );
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--leather-deep);
    font-family: "DM Mono", monospace;
    font-style: italic;
    font-weight: 500;
    font-size: 0.95rem;
    box-shadow:
        inset 0 1px 0 rgba(255,245,224,0.5),
        inset 0 -1px 0 rgba(126,102,56,0.7),
        0 1px 0 rgba(20,12,6,0.18),
        0 2px 4px rgba(46,40,32,0.32);
    z-index: 2;
}

.brass-plate span {
    text-shadow: 0 1px 0 rgba(255,245,224,0.42);
}

/* rubber-stamp impressions */
.stamp {
    position: absolute;
    top: 28px;
    left: 124px;
    transform: rotate(-3.5deg);
    mix-blend-mode: multiply;
    pointer-events: none;
    opacity: 0;
    transform: rotate(-3.5deg) scale(0.4);
    transition: opacity 240ms ease-out, transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stamp.is-stamped {
    opacity: 0.92;
    transform: rotate(-3.5deg) scale(1);
    animation: stamp-stutter 480ms steps(4, end) forwards;
}

@keyframes stamp-stutter {
    0%   { transform: rotate(-3.5deg) scale(0.4); opacity: 0; }
    20%  { transform: rotate(-3.5deg) scale(1.08); opacity: 0.9; }
    40%  { transform: rotate(-3.2deg) translateX(-2px) scale(1.04); }
    60%  { transform: rotate(-3.6deg) translateX(2px) scale(0.98); }
    80%  { transform: rotate(-3.5deg) scale(1.02); }
    100% { transform: rotate(-3.5deg) scale(1); opacity: 0.92; }
}

.stamp-svg {
    display: block;
}

.ord-num {
    margin-top: 110px;
    font-family: "DM Mono", monospace;
    font-style: italic;
    font-weight: 500;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    color: var(--leather-oxblood);
    mix-blend-mode: multiply;
}

.ord-title {
    font-family: "Work Sans", sans-serif;
    font-weight: 600;
    font-size: 1.65rem;
    line-height: 1.4;
    color: var(--ink-umber);
    margin: 8px 0 28px;
    letter-spacing: 0.005em;
    max-width: 460px;
}

.ord-title em {
    font-style: italic;
    color: var(--leather-oxblood);
}

.ord-body {
    max-width: 440px;
    color: var(--ink-text);
    font-size: 1.05rem;
    line-height: 1.62;
}

.ord-body p {
    margin-bottom: 16px;
    font-feature-settings: "tnum" 1;
}

.ord-body p:last-child { margin-bottom: 0; }

.ord-body em {
    font-style: italic;
    color: var(--ink-sepia);
}

.ord-foot {
    font-family: "DM Mono", monospace;
    font-style: italic;
    font-size: 0.82rem;
    color: var(--ink-sepia);
    letter-spacing: 0.04em;
    margin-top: 14px;
}

/* marginalia — handwritten Caveat */
.margin-note {
    position: absolute;
    font-family: "Caveat", cursive;
    font-size: 1.18rem;
    color: var(--fountain-blue);
    opacity: 0.78;
    line-height: 1.2;
    transform: rotate(var(--rot, -3deg));
    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 220ms ease-out;
    cursor: text;
    pointer-events: auto;
    max-width: 130px;
}

.margin-note-l {
    left: 14px;
    top: 62%;
}

.margin-note-r {
    right: 28px;
    top: 56%;
    text-align: right;
}

.margin-note:hover {
    transform: rotate(calc(var(--rot, -3deg) + 1deg)) translateY(-2px);
    opacity: 1;
}

/* exhibits — small flat-SVG objects */
.exhibit {
    position: absolute;
    bottom: 50px;
    right: 60px;
    transform: rotate(-6deg);
    filter:
        drop-shadow(0 1px 0 rgba(255,245,224,0.5))
        drop-shadow(0 4px 8px rgba(46,40,32,0.32))
        drop-shadow(0 8px 16px rgba(46,40,32,0.18));
    pointer-events: none;
    opacity: 0.94;
}

.exhibit-pen { transform: rotate(14deg); }
.exhibit-key { transform: rotate(-2deg); bottom: 80px; }
.exhibit-clip { transform: rotate(28deg); bottom: 100px; right: 80px; }
.exhibit-pencil { transform: rotate(-18deg); bottom: 70px; right: 90px; }
.exhibit-cufflink { transform: rotate(0deg); }
.exhibit-stapler { transform: rotate(-4deg); }
.exhibit-apple { transform: rotate(6deg); bottom: 70px; }
.exhibit-envelope { transform: rotate(-8deg); }
.exhibit-basket { transform: rotate(-3deg); }
.exhibit-bouquet { transform: rotate(8deg); bottom: 60px; }
.exhibit-drawer { transform: rotate(-1deg); }

/* final ordinance with wax seals */
.ordinance-final {
    min-height: 100vh;
    padding-bottom: 120px;
}

.wax-seals {
    position: absolute;
    bottom: 60px;
    right: 70px;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    transform: rotate(-4deg);
    filter:
        drop-shadow(0 2px 0 rgba(255,245,224,0.42))
        drop-shadow(0 6px 12px rgba(46,40,32,0.45))
        drop-shadow(0 14px 22px rgba(46,40,32,0.22));
}

.wax-seal {
    transform-origin: center;
}

.wax-seal:nth-child(1) { transform: rotate(2deg); }
.wax-seal:nth-child(2) { transform: rotate(-6deg); }
.wax-seal:nth-child(3) { transform: rotate(8deg); }

/* ====================================================================
   PLANNER BACK COVER
   ==================================================================== */
.planner-back {
    margin: 0 -4px -4px;
    padding: 80px 56px;
    background: var(--leather-deep);
    background-image:
        repeating-linear-gradient(
            38deg,
            rgba(20,12,6,0.18) 0 1px,
            transparent 1px 4px
        ),
        repeating-linear-gradient(
            -40deg,
            rgba(255,245,224,0.04) 0 1px,
            transparent 1px 5px
        );
    border-radius: 0 0 4px 4px;
    box-shadow:
        inset 0 3px 8px rgba(20,12,6,0.55),
        inset 0 -2px 0 rgba(255,245,224,0.06);
    text-align: center;
    color: var(--paper-cream);
    position: relative;
}

.back-leather {
    position: relative;
    padding: 40px 16px;
    border: 1.5px solid rgba(184,150,90,0.3);
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(255,245,224,0.05);
}

.back-line {
    font-family: "Work Sans", sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass);
    text-shadow: 0 1px 0 rgba(20,12,6,0.55);
    margin-bottom: 14px;
}

.back-sign {
    font-family: "Caveat", cursive;
    font-size: 1.6rem;
    color: var(--paper-cream);
    opacity: 0.86;
    transform: rotate(-3deg);
    display: inline-block;
}

/* ====================================================================
   DESK MARGINS — left & right gutters with desk objects
   ==================================================================== */
.desk-margin {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 220px;
    z-index: 8;
    pointer-events: none;
}

.desk-margin-left {
    left: max(0px, calc(50vw - var(--page-w) / 2 - 220px - 12px));
}

.desk-margin-right {
    right: max(0px, calc(50vw - var(--page-w) / 2 - 220px - 12px));
}

/* ----- TAB INDEX (left) ----- */
.tab-index {
    position: absolute;
    top: 80px;
    right: -4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: auto;
}

.tab {
    position: relative;
    width: 96px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 16px;
    font-family: "DM Mono", monospace;
    font-style: italic;
    font-weight: 500;
    font-size: 0.86rem;
    color: var(--ink-umber);
    text-decoration: none;
    border-radius: 2px 0 0 2px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8% 50%);
    box-shadow:
        inset 0 1px 0 rgba(255,245,224,0.32),
        inset 0 -1px 0 rgba(20,12,6,0.36),
        inset 1px 0 0 rgba(255,245,224,0.18),
        0 1px 0 rgba(20,12,6,0.2),
        0 4px 8px -2px rgba(46,40,32,0.4),
        0 8px 16px -4px rgba(46,40,32,0.25);
    transition:
        transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 220ms ease-out;
    cursor: pointer;
}

.tab span {
    text-shadow: 0 1px 0 rgba(255,245,224,0.4);
}

.tab-mustard { background: var(--mustard-tab); color: var(--leather-deep); }
.tab-sage    { background: var(--sage-tab);    color: var(--paper-cream-2); }
.tab-oxblood { background: var(--oxblood-tab); color: var(--paper-cream); }
.tab-slate   { background: var(--slate-tab);   color: var(--paper-cream-2); }

.tab:hover {
    transform: translateX(8px);
}

.tab:active,
.tab.is-pressed {
    transform: translate(1px, 1px);
    box-shadow:
        inset 0 1px 0 rgba(255,245,224,0.2),
        inset 0 -1px 0 rgba(20,12,6,0.4),
        0 1px 2px rgba(46,40,32,0.5);
    transition-duration: 90ms;
}

.tab.is-active {
    transform: translateX(14px);
    box-shadow:
        inset 0 1px 0 rgba(255,245,224,0.45),
        inset 0 -1px 0 rgba(20,12,6,0.4),
        0 1px 0 rgba(20,12,6,0.18),
        0 6px 14px -2px rgba(46,40,32,0.5),
        0 12px 24px -4px rgba(46,40,32,0.32);
}

/* brass paperclip on visited */
.tab.is-read::before {
    content: "";
    position: absolute;
    left: 56%;
    top: -10px;
    width: 14px;
    height: 26px;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,245,224,0.6), transparent 50%),
        var(--brass);
    border: 1px solid var(--brass-shadow);
    border-radius: 7px;
    transform: rotate(-18deg);
    box-shadow:
        inset 0 1px 0 rgba(255,245,224,0.6),
        inset 0 -1px 0 rgba(126,102,56,0.7),
        0 1px 2px rgba(20,12,6,0.42);
    animation: pin-prick 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes pin-prick {
    0%   { transform: rotate(-18deg) scale(0); }
    60%  { transform: rotate(-18deg) scale(1.2); }
    100% { transform: rotate(-18deg) scale(1); }
}

/* ----- RADIO SET (left, lower) ----- */
.radio-set {
    position: absolute;
    bottom: 60px;
    left: 30px;
    width: 150px;
    height: 92px;
    pointer-events: none;
}

.radio-body {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--leather-chestnut);
    background-image:
        repeating-linear-gradient(
            8deg,
            rgba(58,40,24,0.16) 0 1px,
            transparent 1px 5px
        );
    border-radius: 6px;
    box-shadow:
        inset 0 1px 0 rgba(255,245,224,0.32),
        inset 0 -1px 0 rgba(20,12,6,0.5),
        inset 0 0 0 1px rgba(58,40,24,0.5),
        0 2px 0 rgba(20,12,6,0.2),
        0 6px 14px rgba(46,40,32,0.45),
        0 14px 28px -4px rgba(46,40,32,0.32);
}

.radio-screen {
    position: absolute;
    top: 14px; left: 14px;
    width: 100px;
    height: 28px;
    background: var(--blotter-shadow);
    border-radius: 2px;
    box-shadow:
        inset 0 1px 0 rgba(20,12,6,0.7),
        inset 0 0 6px rgba(20,12,6,0.6),
        0 1px 0 rgba(255,245,224,0.18);
    color: var(--brass);
    font-family: "DM Mono", monospace;
    font-style: italic;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 4px rgba(184,150,90,0.5);
}

.radio-dial {
    position: absolute;
    bottom: 14px; left: 14px;
    width: 100px;
    height: 14px;
    background:
        repeating-linear-gradient(
            to right,
            rgba(20,12,6,0.5) 0 1px,
            transparent 1px 6px
        ),
        var(--leather-deep);
    border-radius: 1px;
    box-shadow:
        inset 0 1px 0 rgba(20,12,6,0.7),
        inset 0 -1px 0 rgba(255,245,224,0.12);
}

.radio-knob {
    position: absolute;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--brass);
    box-shadow:
        inset 0 1px 0 rgba(255,245,224,0.55),
        inset 0 -2px 0 rgba(126,102,56,0.7),
        0 1px 1px rgba(20,12,6,0.42),
        0 2px 4px rgba(46,40,32,0.32);
}
.radio-knob-1 { top: 14px; right: 14px; }
.radio-knob-2 { top: 38px; right: 14px; width: 14px; height: 14px; }

/* ----- ROLODEX (right) ----- */
.rolodex {
    position: absolute;
    top: 70px;
    right: 16px;
    width: 180px;
    height: 220px;
    perspective: 600px;
    pointer-events: none;
    transform: rotate(7deg);
}

.rolodex-spindle {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 240px;
    background: var(--brass);
    border-radius: 4px;
    box-shadow:
        inset 0 1px 0 rgba(255,245,224,0.5),
        inset 0 -1px 0 rgba(126,102,56,0.7),
        0 0 0 1px rgba(126,102,56,0.6),
        0 4px 8px rgba(46,40,32,0.32);
    z-index: 3;
}

.rolodex-ring {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(0deg);
    will-change: transform;
}

.rolo-card {
    position: absolute;
    top: 50%; left: 50%;
    width: 160px;
    height: 88px;
    margin-left: -80px;
    margin-top: -44px;
    background: var(--paper-cream);
    background-image:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 17px,
            rgba(110,58,44,0.12) 17px,
            rgba(110,58,44,0.12) 18px
        );
    border-top: 6px solid var(--leather-oxblood);
    border-radius: 1px;
    box-shadow:
        inset 0 1px 0 rgba(255,245,224,0.5),
        inset 0 -1px 0 rgba(110,58,44,0.18),
        0 2px 6px rgba(46,40,32,0.36),
        0 6px 14px -3px rgba(46,40,32,0.22);
    padding: 14px 12px 10px;
    font-family: "DM Mono", monospace;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--ink-text);
    line-height: 1.42;
    transform: rotateX(calc(var(--i) * 22.5deg)) translateZ(140px);
    backface-visibility: hidden;
}

.rolo-card em {
    color: var(--leather-oxblood);
    font-style: italic;
}

/* ----- COFFEE CUP (right, upper) ----- */
.coffee-cup {
    position: absolute;
    top: 320px;
    right: 50px;
    width: 90px;
    height: 90px;
    pointer-events: none;
    transform: rotate(-3deg);
}

.cup-body {
    position: relative;
    width: 78px;
    height: 78px;
    margin: 0 auto;
    background: var(--paper-cream-2);
    background-image:
        repeating-linear-gradient(
            -8deg,
            rgba(110,58,44,0.04) 0 1px,
            transparent 1px 4px
        );
    border-radius: 4px 4px 36px 36px / 4px 4px 24px 24px;
    box-shadow:
        inset 0 2px 0 rgba(255,245,224,0.6),
        inset 0 -3px 6px rgba(110,58,44,0.18),
        inset 1px 0 0 rgba(110,58,44,0.16),
        inset -1px 0 0 rgba(110,58,44,0.16),
        0 4px 8px rgba(46,40,32,0.32),
        0 10px 18px -2px rgba(46,40,32,0.22);
    overflow: hidden;
}

.cup-band {
    position: absolute;
    top: 16px; left: 0; right: 0;
    height: 8px;
    background: var(--leather-oxblood);
    box-shadow:
        inset 0 1px 0 rgba(255,245,224,0.18),
        inset 0 -1px 0 rgba(20,12,6,0.36);
}

.coffee-fill {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    height: 56px;
    background: var(--ink-umber);
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(110,58,44,0.5) 0, transparent 60%);
    border-radius: 2px 2px 28px 28px / 2px 2px 16px 16px;
    box-shadow:
        inset 0 2px 0 rgba(110,58,44,0.4),
        inset 0 -2px 4px rgba(20,12,6,0.6);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transition: clip-path 320ms ease-out;
}

.cup-handle {
    position: absolute;
    top: 22px;
    right: -2px;
    width: 18px;
    height: 32px;
    border: 6px solid var(--paper-cream-2);
    border-left: none;
    border-radius: 0 18px 18px 0;
    box-shadow:
        inset 0 1px 0 rgba(255,245,224,0.6),
        0 2px 4px rgba(46,40,32,0.28);
}

.cup-saucer {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 92px;
    height: 8px;
    background: var(--paper-cream-2);
    border-radius: 50%;
    box-shadow:
        inset 0 1px 0 rgba(255,245,224,0.5),
        inset 0 -1px 0 rgba(110,58,44,0.18),
        0 2px 4px rgba(46,40,32,0.32);
}

.steam {
    position: absolute;
    top: -42px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.5;
    animation: steam-drift 4.2s ease-in-out infinite;
}

@keyframes steam-drift {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.42; }
    50%      { transform: translateX(-44%) translateY(-4px); opacity: 0.6; }
}

#steamPath {
    stroke-dashoffset: 0;
    animation: steam-flow 3s linear infinite;
}
@keyframes steam-flow {
    from { stroke-dashoffset: 24; }
    to   { stroke-dashoffset: 0; }
}

/* ----- FOUNTAIN PEN (right, lower) ----- */
.fountain-pen {
    position: absolute;
    bottom: 80px;
    right: 80px;
    transform: rotate(22deg);
    pointer-events: none;
    filter:
        drop-shadow(0 2px 0 rgba(255,245,224,0.4))
        drop-shadow(0 4px 10px rgba(46,40,32,0.42))
        drop-shadow(0 12px 22px rgba(46,40,32,0.24));
    animation: pen-drift 24s ease-in-out infinite;
}

@keyframes pen-drift {
    0%, 100% { transform: rotate(22deg) translateX(0); }
    50%      { transform: rotate(22deg) translateX(3px); }
}

/* ====================================================================
   RESPONSIVE FALLBACKS — narrow viewports drop the desk margins
   ==================================================================== */
@media (max-width: 1180px) {
    .desk-margin { display: none; }
}

@media (max-width: 760px) {
    :root { --page-w: 100%; --page-pad: 36px; }
    .planner {
        margin: 24px 12px 32px;
        width: auto;
    }
    .ordinance {
        padding: 48px 36px 56px 80px;
        background-image:
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.36  0 0 0 0 0.29  0 0 0 0 0.18  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
            repeating-linear-gradient(
                to bottom,
                transparent 0,
                transparent 27px,
                rgba(110,58,44,0.13) 27px,
                rgba(110,58,44,0.13) 28px
            ),
            linear-gradient(
                to right,
                transparent 0 60px,
                rgba(176,56,38,0.55) 60px 61px,
                transparent 61px
            );
    }
    .stamp { left: 80px; }
    .ord-num { margin-top: 100px; }
    .wordmark { font-size: 2.4rem; }
    .planner-cover { padding: 36px 24px 28px; }
    .exhibit { right: 24px; bottom: 30px; transform: scale(0.7); }
    .margin-note { display: none; }
}

/* reduced motion: kill all animation, keep static skeuomorphism */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .stamp { opacity: 0.92; transform: rotate(-3.5deg) scale(1); }
}