@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Special+Elite&family=Abril+Fatface&family=Playfair+Display:ital,wght@0,700;1,600&display=swap');

/* The Editor's Desk: a full-screen desk of clippings, with the draft page on the right. */
html.ed-lock, html.ed-lock body { overflow: hidden; }
.ed-overlay { position: fixed; inset: 0; z-index: 9000; display: none; flex-direction: column; background: #2b241d; color: #232222; font-family: Manrope, system-ui, sans-serif; }
.ed-overlay.on { display: flex; }

.ed-top { display: flex; align-items: center; gap: 18px; padding: 12px 18px; background: #1f1a15; color: #F6EBDD; border-bottom: 1px solid #000; }
.ed-title { display: flex; flex-direction: column; min-width: 260px; }
.ed-title b { font: 400 24px/1 'Abril Fatface', Georgia, serif; letter-spacing: .01em; }
.ed-title span { font-size: 12px; opacity: .7; margin-top: 4px; }
.ed-nav { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.ed-nav select { flex: 1; min-width: 0; max-width: 520px; background: #2f2821; color: #F6EBDD; border: 1px solid #4a3f33; border-radius: 8px; padding: 7px 10px; font: 600 13px Manrope, sans-serif; }
.ed-nav button, .ed-tools button { background: #2f2821; color: #F6EBDD; border: 1px solid #4a3f33; border-radius: 8px; padding: 7px 12px; font: 700 13px Manrope, sans-serif; cursor: pointer; }
.ed-nav button:hover, .ed-tools button:hover { background: #3a3128; }
.ed-count { font-size: 12px; opacity: .6; white-space: nowrap; }
.ed-tools { display: flex; gap: 8px; }
.ed-tools .ed-close { background: #FC6932; border-color: #FC6932; color: #fff; }

.ed-main { flex: 1; display: grid; grid-template-columns: 1fr minmax(360px, 34%); min-height: 0; }
.ed-desk {
  position: relative; overflow: visible; min-height: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.06), transparent 60%),
    repeating-linear-gradient(92deg, rgba(0,0,0,.05) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #8a6a4a, #6f5238);
}
.ed-empty { color: #F6EBDD; padding: 40px; }

/* every clipping */
.ed-clip { position: absolute; transform: rotate(var(--rot)); cursor: grab; user-select: none; touch-action: none;
  box-shadow: 0 2px 2px rgba(0,0,0,.18), 0 10px 22px rgba(0,0,0,.28); transition: box-shadow .15s, transform .15s; }
.ed-clip.is-lifted { cursor: grabbing; transform: rotate(var(--rot)) scale(1.03); box-shadow: 0 6px 8px rgba(0,0,0,.2), 0 26px 40px rgba(0,0,0,.35); }
.ed-clip.is-pinned { opacity: .55; }
.ed-clip [contenteditable="true"] { outline: 2px dashed #FC6932; outline-offset: 3px; cursor: text; user-select: text; }
.ed-stamp { position: absolute; right: 8px; top: 8px; transform: rotate(-12deg); border: 3px solid #c0392b; color: #c0392b; padding: 2px 8px; font: 700 13px 'Special Elite', monospace; text-transform: uppercase; letter-spacing: .08em; background: rgba(255,255,255,.7); }

/* newspaper column from the research desk */
.ed-clip.wire { background: #f4efe4; padding: 14px 16px 12px; clip-path: polygon(0 1%, 4% 0, 9% 1.2%, 15% 0, 22% 1%, 30% 0, 38% 1.2%, 47% 0, 55% 1%, 64% 0, 72% 1.1%, 81% 0, 90% 1%, 100% 0, 99.4% 50%, 100% 100%, 92% 99%, 84% 100%, 76% 98.8%, 67% 100%, 58% 99%, 49% 100%, 40% 98.9%, 31% 100%, 22% 99%, 13% 100%, 5% 99%, 0 100%, .6% 50%);
  background-image: linear-gradient(rgba(0,0,0,.025) 1px, transparent 1px); background-size: 100% 3px; }
.ed-kicker { font: 700 10px/1.2 'Special Elite', monospace; text-transform: uppercase; letter-spacing: .12em; color: #8a6a4a; border-bottom: 1px solid #c9bda8; padding-bottom: 6px; }
.ed-clip.wire h3 { font: 700 21px/1.12 'Playfair Display', Georgia, serif; margin: 8px 0 6px; }
.ed-clip.wire p { font: 400 13px/1.45 Newsreader, Georgia, serif; margin: 0; columns: 2; column-gap: 14px; hyphens: auto; text-align: justify; }
.ed-dateline { font: 600 10px 'Special Elite', monospace; color: #7a6a58; margin-top: 8px; }

/* taped photo of the chart */
.ed-clip.photo { background: #fff; padding: 10px 10px 8px; }
.ed-clip.photo img { display: block; width: 100%; height: auto; pointer-events: none; }
.ed-caption { font: 500 18px/1.1 Caveat, cursive; color: #444; text-align: center; margin-top: 6px; }
.ed-tape { position: absolute; top: -12px; left: 18px; width: 80px; height: 24px; background: rgba(255, 240, 190, .75); transform: rotate(-8deg); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.ed-tape.r { left: auto; right: 18px; transform: rotate(9deg); }

/* magazine cut-outs: 1 per angle, 3 different magazines */
.ed-clip.cut { padding: 12px 14px; }
.ed-clip.cut0 { background: #fde9c9; }
.ed-clip.cut1 { background: #232222; color: #fff; }
.ed-clip.cut2 { background: #dfe9f5; }
.ed-cut-label { font: 700 10px 'Special Elite', monospace; text-transform: uppercase; letter-spacing: .1em; opacity: .7; margin-bottom: 6px; }
.ed-clip.cut0 .ed-cut-text { font: 400 22px/1.1 'Abril Fatface', Georgia, serif; }
.ed-clip.cut1 .ed-cut-text { font: 800 19px/1.15 'Hanken Grotesk', sans-serif; text-transform: uppercase; letter-spacing: -.01em; }
.ed-clip.cut2 .ed-cut-text { font: italic 600 20px/1.2 'Playfair Display', Georgia, serif; }

/* stat sticker */
.ed-clip.stat { background: #FC6932; color: #fff; padding: 14px; border-radius: 50% 46% 52% 48%; text-align: center; aspect-ratio: 1.1; display: flex; flex-direction: column; justify-content: center; }
.ed-stat { font: 400 30px/1 'Abril Fatface', Georgia, serif; }
.ed-stat-l { font: 700 18px/1 Caveat, cursive; margin-top: 6px; }

/* sticky notes and index card */
.ed-clip.sticky { background: #fff27a; padding: 12px 14px 16px; }
.ed-clip.sticky.pink { background: #ffc4d6; }
.ed-clip.sticky.blue { background: #c9e7ff; }
.ed-hand-h { font: 700 15px 'Special Elite', monospace; margin-bottom: 4px; }
.ed-hand { font: 600 22px/1.12 Caveat, cursive; color: #1d1d1d; }
.ed-clip.index { background: #fff; padding: 12px 14px; background-image: linear-gradient(transparent 26px, #f3b0b0 26px, #f3b0b0 27px, transparent 27px), repeating-linear-gradient(transparent 0 21px, #cfe3f7 21px 22px); background-position: 0 0, 0 30px; }
.ed-index-h { font: 700 11px 'Special Elite', monospace; text-transform: uppercase; letter-spacing: .1em; color: #b23; }
.ed-index { font: 700 18px/1.2 'Special Elite', monospace; margin-top: 10px; word-break: break-word; }
.ed-index-s { font: 600 17px/1.15 Caveat, cursive; margin-top: 6px; color: #333; }

/* handwritten margin notes from James and Tom */
.ed-clip.margin { background: #fffdf6; padding: 10px 14px; border-left: 3px solid #e85d75; }
.ed-clip.margin.tom { border-left-color: #2f6fed; }
.ed-sig { font: 700 18px Caveat, cursive; text-align: right; color: #8a6a4a; }

/* the draft page */
.ed-page { position: relative; z-index: 0; display: flex; flex-direction: column; margin: 18px 18px 18px 0; background: #fffdf8; border-radius: 4px; box-shadow: 0 20px 40px rgba(0,0,0,.35); padding: 22px 30px; min-height: 0; overflow: auto; transition: box-shadow .15s, outline-color .15s; outline: 3px dashed transparent; outline-offset: -10px; }
.ed-page.is-target { outline-color: #FC6932; box-shadow: 0 20px 40px rgba(0,0,0,.35), 0 0 0 6px rgba(252,105,50,.25); }
.ed-page-top { display: flex; justify-content: space-between; font: 700 11px 'Special Elite', monospace; text-transform: uppercase; letter-spacing: .12em; color: #9a8f80; }
.ed-pins { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 6px; min-height: 30px; }
.ed-pin { background: #fff27a; border: 0; padding: 5px 9px; font: 600 12px Manrope, sans-serif; cursor: pointer; transform: rotate(-1deg); box-shadow: 0 2px 4px rgba(0,0,0,.15); max-width: 100%; text-align: left; }
.ed-pin:hover { text-decoration: line-through; }
.ed-pins-empty { font: 600 18px Caveat, cursive; color: #b5aa9a; }
.ed-head { font: 700 30px/1.15 'Playfair Display', Georgia, serif; outline: none; margin-top: 8px; min-height: 36px; }
.ed-byline { font: 700 11px 'Special Elite', monospace; color: #9a8f80; margin: 8px 0 14px; text-transform: uppercase; letter-spacing: .1em; }
.ed-body { flex: 1; font: 400 17px/1.6 Newsreader, Georgia, serif; outline: none; min-height: 200px; background-image: repeating-linear-gradient(transparent 0 26.2px, #efe7da 26.2px 27.2px); }
.ed-head:empty::before, .ed-body:empty::before { content: attr(data-ph); color: #b5aa9a; font-style: italic; }
.ed-sign { display: flex; gap: 8px; margin-top: 14px; }
.ed-read { flex: 1; border: 1.5px dashed #c9bda8; background: transparent; border-radius: 8px; padding: 8px; font: 700 12px Manrope, sans-serif; color: #7a6a58; cursor: pointer; }
.ed-read.on { border-style: solid; border-color: #1f9d55; color: #1f9d55; background: #eaf7ef; }
.ed-read.on::before { content: '✓ '; }