/* ==========================================================================
   PAPERS: every kind of paper that can be laid on the right-hand page.
   Style: flat, vintage, a little worn. Cream stock, brown ink, one red.
   Each paper fits its content, then tilts a little and drops in.
   ========================================================================== */

/* tone helpers (used by project cards, badges, tickets, contact cards) */
.tone-red { --tone: #eab0a4; --tone-d: #d98a7c; }
.tone-mint { --tone: #bcdccb; --tone-d: #8dbfa6; }
.tone-mustard { --tone: #f2d37a; --tone-d: #dfae35; }
.tone-blue { --tone: #c9dcea; --tone-d: #96b8d3; }
.tone-pink { --tone: #f0c6cc; --tone-d: #de97a3; }

/* ----------------------------------------------------------- base paper */
.paper {
  position: relative;
  container-type: inline-size;
  container-name: paper;
  flex: none;
  width: min(100%, var(--w, 32em));
  margin: auto;
  padding: 1.7em 1.9em 1.9em;
  background-color: #f1e7cc;
  background-image: var(--grain);
  color: var(--ink);
  font-size: 0.97em;
  line-height: 1.55;
  box-shadow: 0.28em 0.32em 0 rgba(40, 18, 0, 0.34), 0 0 0 0.07em rgba(42, 38, 34, 0.45);
  transform: rotate(var(--rot, 0deg));
  animation: drop 0.55s cubic-bezier(0.2, 0.85, 0.25, 1) both;
}
.paper.leaving { animation: leave 0.2s ease-in forwards; }
@keyframes drop { from { opacity: 0; transform: translateY(-9%) rotate(calc(var(--rot, 0deg) - 3.5deg)); } }
@keyframes leave { to { opacity: 0; transform: translateY(6%) rotate(calc(var(--rot, 0deg) + 2deg)); } }
.stage[data-mode='single'] .paper { padding: 1.35em 1.2em 1.55em; }

/* Printed heading: kicker, title, double rule with a red diamond */
.ph { display: flex; flex-direction: column; align-items: flex-start; }
.ph-kicker { margin-bottom: 0.25em; font-family: var(--f-sc); font-weight: 600; font-size: 1.05em; letter-spacing: 0.2em; color: var(--brown); }
.pt { font-family: var(--f-display); font-weight: 900; font-size: 1.85em; line-height: 1.06; letter-spacing: 0.005em; text-wrap: balance; }
.ph-rule { position: relative; align-self: stretch; height: 0.36em; margin: 0.65em 0 0.9em; border-block: 0.07em solid var(--char); }
.ph-rule::after {
  content: ''; position: absolute; left: 0.9em; top: 50%;
  width: 0.62em; height: 0.62em; margin: -0.31em 0 0 -0.31em;
  background: var(--red); transform: rotate(45deg);
  box-shadow: 0 0 0 0.28em #f1e7cc;
}

.typing::after { content: ''; display: inline-block; width: 0.5em; height: 1em; margin-left: 0.05em; background: currentColor; vertical-align: -0.12em; animation: blink 0.8s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.putback {
  position: absolute; top: -1.85em; right: 1em;
  padding: 0.35em 0.95em 0.3em;
  border: 0;
  background-color: var(--kraft-l);
  background-image: var(--grain);
  color: var(--char);
  font-family: var(--f-sc); font-weight: 600; font-size: 0.95em; letter-spacing: 0.12em;
  border-radius: 0.4em 0.4em 0 0;
  box-shadow: 0 -0.05em 0.25em rgba(0, 0, 0, 0.3);
}
.putback:hover { background-color: var(--mustard); }

/* small headings inside papers */
.pp-statement h3, .rp-sec h3, .ck-group h3, .ph-sub {
  font-family: var(--f-sc); font-weight: 600; font-size: 1.15em; letter-spacing: 0.14em; color: var(--brown);
}

/* stamps */
.stamp {
  position: absolute; right: 1.2em; bottom: 1.2em;
  padding: 0.1em 0.7em 0.15em;
  border: 0.16em double currentColor;
  border-radius: 0.2em;
  font-family: var(--f-display); font-weight: 900; font-size: 1.4em; line-height: 1.25; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  transform: rotate(var(--r, -8deg));
  opacity: 0.88;
  mix-blend-mode: multiply;
  pointer-events: none;
  animation: thud2 0.5s 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
.stamp.red, .stamp.status-ongoing { color: var(--red); }
.stamp.blue, .stamp.status-cold { color: #2a4f86; }
.stamp.status-solved { color: #2a6b45; }
.stamp.small { font-size: 1.05em; }
@keyframes thud2 { from { opacity: 0; transform: rotate(var(--r, -8deg)) scale(2.3); } 60% { opacity: 0.95; transform: rotate(var(--r, -8deg)) scale(0.94); } }

/* round seals */
.pp-seal, .lt-seal {
  position: absolute; right: 1.6em; bottom: 1.5em;
  width: 5.2em; height: 5.2em;
  color: var(--red-d);
  opacity: 0.72;
  mix-blend-mode: multiply;
  transform: rotate(-12deg);
  pointer-events: none;
}

.pill {
  display: inline-block; padding: 0.02em 0.6em;
  border: 0.12em solid currentColor; border-radius: 0.3em;
  font-family: var(--f-type); font-size: 0.78em; text-transform: uppercase; line-height: 1.5;
}
.pill.status-ongoing { color: var(--red-d); }
.pill.status-solved { color: #2a6b45; }
.pill.status-cold { color: #2a4f86; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4em; }
.chips li { padding: 0.08em 0.7em; border: 0.09em solid var(--char); border-radius: 99px; background: var(--tone, #f8f0da); font-size: 0.86em; }

.btn-link, .declass, .declass-all {
  display: inline-block;
  padding: 0.3em 0.95em;
  border: 0.12em solid var(--char); background: transparent; color: var(--char);
  font-family: var(--f-type); font-size: 0.95em; line-height: 1.4; text-decoration: none;
  margin: 0.2em 0.4em 0.2em 0;
  transition: background 0.15s, color 0.15s;
}
.btn-link:hover, .declass:hover, .declass-all:hover { background: var(--char); color: var(--cream); }
.btn-link.is-todo { opacity: 0.5; border-style: dashed; cursor: not-allowed; }
.btn-link.is-todo:hover { background: transparent; color: var(--char); }
.btn-big {
  display: inline-block; padding: 0.65em 1.4em;
  background: var(--red); color: #f7ead2;
  border: 0.14em solid var(--char);
  font-family: var(--f-display); font-weight: 700; font-size: 1.1em; letter-spacing: 0.04em; text-decoration: none;
  box-shadow: 0.22em 0.22em 0 var(--char);
  transform: rotate(-1.2deg);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-big:hover { transform: rotate(-1.2deg) translate(-0.1em, -0.1em); box-shadow: 0.32em 0.32em 0 var(--char); }

/* ------------------------------------------------------- about: personnel */
.p-personnel { padding-bottom: 6.4em; }
.p-personnel::before {
  content: ''; position: absolute; top: -0.9em; left: 50%; width: 6.4em; height: 1.7em; margin-left: -3.2em;
  background: rgba(240, 179, 35, 0.7); transform: rotate(-2deg);
}
.pp-head { display: flex; flex-direction: column; }
.pp-head .ph-rule { margin-bottom: 0.45em; }
.pp-no { font-family: var(--f-type); font-size: 0.82em; color: var(--ink-2); margin-bottom: 0.8em; }
.pp-body { display: grid; grid-template-columns: 1fr auto; gap: 1em 1.4em; align-items: start; }
/* oval portrait in a double frame */
.pp-photo { order: 2; position: relative; width: 7.6em; transform: rotate(2deg); }
.pp-photo img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 50%;
  border: 0.22em solid var(--cream);
  outline: 0.14em solid var(--brown);
  outline-offset: 0.18em;
  box-shadow: 0 0 0 0.5em var(--cream), 0 0 0 0.62em var(--brown);
  background: #cfc3a4; filter: sepia(0.25) contrast(1.04);
  margin: 0.7em 0.7em;
  width: calc(100% - 1.4em);
}
.pp-photo .pclip { position: absolute; top: -1.2em; left: 60%; width: 1.15em; height: 3.2em; color: var(--red); }
.pp-facts div, .ds-facts div { display: grid; grid-template-columns: 7em 1fr; gap: 0.6em; padding: 0.32em 0; border-bottom: 0.07em dotted rgba(42, 38, 34, 0.55); }
.pp-facts dt, .ds-facts dt { font-family: var(--f-sc); font-weight: 600; font-size: 0.95em; letter-spacing: 0.1em; color: var(--taupe); padding-top: 0.1em; }
.pp-facts dd, .ds-facts dd { font-family: var(--f-type); font-size: 0.95em; }
.pp-statement h3 { margin: 1.3em 0 0.45em; }
.pp-statement p { margin-bottom: 0.8em; }
.pp-notes { display: flex; flex-wrap: wrap; gap: 0.6em 0.9em; margin-top: 1.1em; }
.pp-notes li { padding: 0.4em 0.8em 0.3em; font-size: 1.55em; background: #f3dc8a; box-shadow: 0.1em 0.14em 0 rgba(40, 18, 0, 0.25); color: #3b3220; }
.pp-notes .n0 { transform: rotate(-2deg); }
.pp-notes .n1 { transform: rotate(1.6deg); background: #efc4c8; }
.pp-notes .n2 { transform: rotate(-0.8deg); background: #c3e0d0; }
@container paper (max-width: 25em) {
  .pp-body { grid-template-columns: 1fr; }
  .pp-photo { order: 0; width: 7em; justify-self: end; margin-top: -0.4em; }
  .pp-facts div, .ds-facts div { grid-template-columns: 1fr; gap: 0; }
}

/* ------------------------------------------------------ skills: checklist */
.p-checklist { background-color: #e5ead6; padding-left: 3.4em; }
.p-checklist::before {
  content: ''; position: absolute; left: 0.9em; top: 0; bottom: 0; width: 1em;
  background:
    radial-gradient(circle, #2a2622 0 0.32em, rgba(0, 0, 0, 0.15) 0.34em 0.4em, transparent 0.42em) 0 15% / 1em 1em no-repeat,
    radial-gradient(circle, #2a2622 0 0.32em, rgba(0, 0, 0, 0.15) 0.34em 0.4em, transparent 0.42em) 0 50% / 1em 1em no-repeat,
    radial-gradient(circle, #2a2622 0 0.32em, rgba(0, 0, 0, 0.15) 0.34em 0.4em, transparent 0.42em) 0 85% / 1em 1em no-repeat;
}
.p-checklist .ph-rule::after { box-shadow: 0 0 0 0.28em #e5ead6; }
.ck-legend { margin: 0 0 0.4em; font-size: 0.88em; font-style: italic; color: var(--ink-2); }
.ck-group h3 { display: block; margin: 1.1em 0 0.25em; border-bottom: 0.09em solid var(--char); }
.ck-group li { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.28em 0; border-bottom: 0.07em dotted rgba(42, 38, 34, 0.45); }
.ck-name { min-width: 0; }
.pips { display: inline-flex; flex: none; gap: 0.25em; }
.pips i { position: relative; display: block; width: 1em; height: 1em; border: 0.1em solid var(--char); background: #fbf6e4; }
.pips i.on::before, .pips i.on::after {
  content: ''; position: absolute; left: 50%; top: -0.12em; width: 0.12em; height: 1.2em; margin-left: -0.06em;
  background: var(--red-d); transform: rotate(45deg);
  animation: cross 0.3s calc(0.45s + var(--i, 0) * 0.03s) both;
}
.pips i.on::after { transform: rotate(-45deg); animation-name: cross2; }
@keyframes cross { from { transform: rotate(45deg) scaleY(0); } }
@keyframes cross2 { from { transform: rotate(-45deg) scaleY(0); } }
.ck-group li { --i: 0; }
.ck-group li .pips i { --i: inherit; }

/* ------------------------------------------------------ projects: cases */
.cs-intro { margin-top: -0.2em; font-size: 0.92em; font-style: italic; color: var(--ink-2); }
.cs-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5em; margin-top: 1.5em; }
.cs-card {
  position: relative; display: block;
  padding: 1.15em 1.2em 1em;
  background-color: var(--tone); background-image: var(--grain);
  color: var(--ink); text-decoration: none;
  border: 0.09em solid var(--char); box-shadow: 0.25em 0.25em 0 var(--char);
  transition: transform 0.18s, box-shadow 0.18s;
}
.cs-card:hover { transform: translate(-0.12em, -0.12em); box-shadow: 0.37em 0.37em 0 var(--char); }
.cs-tab { position: absolute; top: -1.25em; left: 1em; padding: 0.08em 0.9em; background: var(--tone-d); border: 0.09em solid var(--char); border-bottom: 0; border-radius: 0.4em 0.4em 0 0; font-family: var(--f-type); font-size: 0.85em; }
.cs-card h3 { padding-right: 6.5em; font-family: var(--f-display); font-weight: 900; font-size: 1.3em; line-height: 1.15; }
.cs-card .pill { position: absolute; top: 0.9em; right: 1em; background: rgba(255, 255, 255, 0.3); }
.cs-card p { margin-top: 0.4em; font-size: 0.95em; }

/* ---- case report (a project opened): a report on a binder strip ---- */
.p-report { padding-left: 3.1em; border-top: 1.1em solid var(--tone-d); }
.p-report::before {
  content: ''; position: absolute; left: 0.8em; top: 0; bottom: 0; width: 1em;
  background:
    radial-gradient(circle, #2a2622 0 0.32em, rgba(0, 0, 0, 0.15) 0.34em 0.4em, transparent 0.42em) 0 12% / 1em 1em no-repeat,
    radial-gradient(circle, #2a2622 0 0.32em, rgba(0, 0, 0, 0.15) 0.34em 0.4em, transparent 0.42em) 0 50% / 1em 1em no-repeat,
    radial-gradient(circle, #2a2622 0 0.32em, rgba(0, 0, 0, 0.15) 0.34em 0.4em, transparent 0.42em) 0 88% / 1em 1em no-repeat;
}
.p-report::after { content: ''; position: absolute; left: 2.4em; top: 0; bottom: 0; width: 0.07em; background: rgba(200, 54, 43, 0.5); box-shadow: 0.22em 0 0 rgba(200, 54, 43, 0.5); }
.rp-head { display: flex; flex-direction: column; }
.p-report .stamp, .p-grid .stamp { position: static; display: inline-block; margin: 0.2em 0 0.2em; }
.rp-photo { margin: 1em 0 0.4em; padding: 0.4em; background: #f8f1da; box-shadow: 0.2em 0.25em 0 rgba(40, 18, 0, 0.28); transform: rotate(-1deg); }
.rp-photo img { width: 100%; filter: sepia(0.15); }
.rp-sec { margin-top: 1.15em; }
.rp-sec h3 { margin-bottom: 0.35em; border-bottom: 0.07em solid var(--char); }
.rp-list li { position: relative; padding-left: 1.4em; margin-bottom: 0.5em; }
.rp-list li::before { content: ''; position: absolute; left: 0.3em; top: 0.62em; width: 0.46em; height: 0.46em; background: var(--red); transform: rotate(45deg); }
.rp-nav { display: flex; flex-wrap: wrap; gap: 0.4em 1.4em; margin-top: 1.6em; padding-top: 0.8em; border-top: 0.09em dashed rgba(42, 38, 34, 0.55); font-size: 0.9em; }
.rp-nav a { font-family: var(--f-type); }
.rp-nav a:hover { background: var(--mustard); }

/* ----------------------------------------------------- experience: log */
.p-log {
  padding-left: 5em;
  background-color: #efe0a0;
  background-image: var(--grain), linear-gradient(90deg, transparent 4.1em, rgba(200, 54, 43, 0.6) 4.1em calc(4.1em + 0.1em), transparent calc(4.1em + 0.1em) calc(4.1em + 0.3em), rgba(200, 54, 43, 0.6) calc(4.1em + 0.3em) calc(4.1em + 0.4em), transparent calc(4.1em + 0.4em));
}
.p-log .ph-rule::after { box-shadow: 0 0 0 0.28em #efe0a0; }
.lg-list { margin-top: 0.2em; }
.lg-row { position: relative; padding: 0.8em 0 0.7em; border-bottom: 0.09em solid rgba(58, 98, 156, 0.38); }
.lg-when { position: absolute; right: 100%; margin-right: 1.15em; top: 0.8em; text-align: right; white-space: nowrap; font-size: 1.4em; line-height: 1; color: var(--red-d); }
.lg-main { display: flex; flex-direction: column; }
.lg-main b { font-family: var(--f-display); font-weight: 700; font-size: 1.08em; }
.lg-what { font-size: 0.95em; }
.lg-note { margin-top: 0.15em; font-style: normal; font-size: 1.4em; line-height: 1.05; color: #274a8a; }

/* ----------------------------------------------- education: index cards */
.p-index { background-color: #e9dfc2; }
.p-index .ph-rule::after { box-shadow: 0 0 0 0.28em #e9dfc2; }
.ix-list { display: grid; gap: 1.1em; margin-top: 0.4em; }
.ix-card {
  padding: 0.6em 1em 0.8em;
  background-color: #fbf6e4;
  background-image: repeating-linear-gradient(180deg, transparent 0 1.6em, rgba(60, 110, 200, 0.28) 1.6em calc(1.6em + 1px));
  background-position: 0 2.8em;
  box-shadow: 0.2em 0.25em 0 rgba(40, 18, 0, 0.28);
  transform: rotate(var(--tilt, 0deg));
}
.ix-card h3 { padding-bottom: 0.15em; border-bottom: 0.14em solid var(--red); font-family: var(--f-display); font-weight: 700; font-size: 1.1em; line-height: 1.3; }
.ix-prog { margin-top: 0.35em; }
.ix-years { font-family: var(--f-type); font-size: 0.82em; color: var(--ink-2); }
.ix-note { margin-top: 0.2em; font-size: 1.4em; color: #274a8a; line-height: 1.05; }

/* --------------------------------------------- achievements: letter */
.p-letter { background-color: #f6efd8; padding: 2em 2.2em 6em; }
.lt-head { display: flex; flex-direction: column; align-items: center; padding-bottom: 0.7em; border-bottom: 0.07em solid var(--char); box-shadow: 0 0.22em 0 -0.15em #f6efd8, 0 0.3em 0 -0.15em var(--char); }
.lt-agency { font-family: var(--f-display); font-weight: 900; font-size: 1.3em; line-height: 1.1; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; }
.lt-div { font-family: var(--f-sc); font-weight: 600; font-size: 1.05em; letter-spacing: 0.2em; color: var(--brown); }
.lt-date { margin-top: 1em; text-align: right; font-family: var(--f-type); font-size: 0.82em; color: var(--ink-2); }
.p-letter .ph { margin-top: 0.4em; }
.p-letter .pt { font-size: 1.5em; }
.p-letter .ph-rule::after { box-shadow: 0 0 0 0.28em #f6efd8; }
.lt-open { font-style: italic; }
.lt-list { margin: 0.9em 0 1em; }
.lt-item { display: grid; grid-template-columns: 3.6em 1fr; gap: 0.6em; padding: 0.6em 0; border-bottom: 0.07em dotted rgba(42, 38, 34, 0.55); }
.lt-year { font-family: var(--f-display); font-weight: 900; font-size: 1.15em; color: var(--red-d); }
.lt-item h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.05em; line-height: 1.3; }
.lt-item p { font-size: 0.9em; color: var(--ink-2); }
.lt-close { font-style: italic; }
.lt-sign { margin-top: 0.25em; font-family: var(--f-script); font-size: 3.2em; line-height: 1.15; color: #274a8a; transform: rotate(-4deg); transform-origin: left; }

/* ----------------------------------------------- organizations: badges (ID cards) */
.p-badges { background-color: #e9dec2; }
.p-badges .ph-rule::after { box-shadow: 0 0 0 0.28em #e9dec2; }
.bg-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5em, 1fr)); gap: 2em 1.4em; margin-top: 0.8em; }
.bg-badge { position: relative; overflow: hidden; padding: 1.7em 0 0.8em; background-color: #fbf6e4; background-image: var(--grain); border: 0.09em solid var(--char); border-radius: 0.7em; box-shadow: 0.25em 0.3em 0 rgba(40, 18, 0, 0.3); transform: rotate(var(--tilt, 0deg)); }
.bg-slot { position: absolute; top: 0.55em; left: 50%; width: 3em; height: 0.7em; margin-left: -1.5em; border-radius: 99px; background: var(--char); box-shadow: inset 0 0.1em 0.2em rgba(255, 255, 255, 0.2); }
.bg-band { padding: 0.6em 1em; background: var(--tone); border-block: 0.09em solid var(--char); }
.bg-band h3 { font-family: var(--f-display); font-weight: 900; font-size: 1.45em; line-height: 1.05; }
.bg-band span { font-family: var(--f-sc); font-weight: 600; font-size: 0.95em; letter-spacing: 0.06em; }
.bg-body { display: flex; align-items: center; gap: 0.8em; padding: 0.8em 1em 0; }
.bg-body img { width: 3.4em; height: 4.2em; flex: none; object-fit: cover; border-radius: 50%; border: 0.14em solid var(--char); background: #cfc3a4; filter: sepia(0.25); }
.bg-body div { display: flex; flex-direction: column; font-size: 0.92em; line-height: 1.3; }
.bg-body b { font-family: var(--f-display); font-weight: 700; }
.bg-body span { font-family: var(--f-type); font-size: 0.88em; color: var(--ink-2); }
.bg-note { padding: 0.3em 1em 0; font-size: 1.4em; line-height: 1.05; color: #274a8a; }
.bg-code { display: block; height: 1.4em; margin: 0.7em 1em 0; background: repeating-linear-gradient(90deg, var(--char) 0 0.14em, transparent 0.14em 0.32em, var(--char) 0.32em 0.6em, transparent 0.6em 0.76em, var(--char) 0.76em 0.84em, transparent 0.84em 1.1em); opacity: 0.78; }

/* ---------------------------------------------- research: lab notebook */
.p-grid {
  background-color: #dfe7e4;
  background-image: var(--grain), linear-gradient(rgba(60, 110, 170, 0.22) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 110, 170, 0.22) 1px, transparent 1px);
  background-size: auto, 1.4em 1.4em, 1.4em 1.4em;
}
.p-grid .ph-rule::after { box-shadow: 0 0 0 0.28em #dfe7e4; }
.gr-study { position: relative; margin-top: 1.4em; padding: 1em 1.1em 0.9em; background: rgba(251, 246, 228, 0.82); border: 0.09em solid #2a4f86; }
.gr-sketch { position: absolute; top: 0.6em; right: 0.8em; width: 6em; height: auto; fill: none; stroke: #2a4f86; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.gr-sketch circle { fill: #fbf6e4; }
.gr-study h3 { padding-right: 6.5em; font-family: var(--f-display); font-weight: 900; font-size: 1.35em; line-height: 1.1; }
.gr-sub { margin: 0.3em 0 0.6em; font-size: 1.5em; line-height: 1.02; color: #274a8a; }
.gr-study li { position: relative; padding-left: 1.3em; margin-bottom: 0.55em; font-size: 0.95em; }
.gr-study li::before { content: 'x'; position: absolute; left: 0; top: -0.2em; font-family: var(--f-hand); font-size: 1.5em; color: #2a4f86; }

/* ------------------------------------------- publications: newspaper clippings */
.p-news { background-color: #e6dbbd; }
.p-news .ph-rule::after { box-shadow: 0 0 0 0.28em #e6dbbd; }
.np-list { display: grid; gap: 1.6em; margin-top: 0.4em; }
.np-clip {
  position: relative; padding: 1.2em 1.3em 1.2em;
  background-color: #efe5c6;
  background-image: var(--grain), linear-gradient(135deg, rgba(255, 252, 240, 0.7), rgba(190, 165, 110, 0.25));
  box-shadow: 0.2em 0.25em 0 rgba(40, 18, 0, 0.3);
  transform: rotate(var(--tilt, 0deg));
}
.np-clip::before { content: ''; position: absolute; top: -0.7em; left: 1.4em; width: 4.2em; height: 1.3em; background: rgba(240, 179, 35, 0.65); transform: rotate(-4deg); }
.np-venue { display: block; padding-bottom: 0.3em; border-bottom: 0.2em double var(--char); font-family: var(--f-display); font-weight: 900; font-size: 1.15em; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }
.np-title { margin-top: 0.5em; font-family: var(--f-display); font-weight: 900; font-size: 1.5em; line-height: 1.1; }
.np-line { margin-top: 0.5em; padding-top: 0.4em; border-top: 0.07em solid var(--char); font-family: var(--f-sc); font-weight: 600; font-size: 1em; letter-spacing: 0.1em; }
.np-line b { font-weight: 600; color: var(--red-d); }
.np-clip .btn-link { margin-top: 0.6em; }

/* ----------------------------------------------- courses: ticket stubs */
.p-tickets { padding-top: 1.9em; }
.tk-cassette { position: absolute; top: 1.2em; right: 1.4em; width: 6.4em; height: 4.27em; color: var(--red); transform: rotate(7deg); filter: drop-shadow(0.1em 0.14em 0 rgba(40, 18, 0, 0.3)); }
.p-tickets .ph { padding-right: 6.5em; }
.tk-list { display: grid; gap: 1.2em; margin-top: 0.4em; }
.tk { display: grid; grid-template-columns: 1fr 4.6em; color: var(--ink); filter: drop-shadow(0.16em 0.2em 0 rgba(40, 18, 0, 0.3)); }
.tk-main, .tk-stub { background-color: var(--tone); background-image: var(--grain); }
.tk-main { padding: 0.9em 1.1em 0.9em 1.5em; mask: radial-gradient(circle at 0 50%, #0000 0.6em, #000 calc(0.6em + 0.5px)); -webkit-mask: radial-gradient(circle at 0 50%, #0000 0.6em, #000 calc(0.6em + 0.5px)); }
.tk-main h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.12em; line-height: 1.25; }
.tk-by { font-family: var(--f-type); font-size: 0.82em; }
.tk-note { margin-top: 0.15em; font-size: 1.35em; line-height: 1.05; color: #274a8a; }
.tk-stub { display: grid; place-items: center; border-left: 0.14em dashed rgba(42, 38, 34, 0.6); mask: radial-gradient(circle at 100% 50%, #0000 0.6em, #000 calc(0.6em + 0.5px)); -webkit-mask: radial-gradient(circle at 100% 50%, #0000 0.6em, #000 calc(0.6em + 0.5px)); }
.tk-stub span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--f-cond); font-size: 1.7em; letter-spacing: 0.1em; white-space: nowrap; }

/* -------------------------------------------------------- cv: dossier */
.p-dossier { margin-top: 2em; padding-top: 2em; background-color: #e7d29c; }
.p-dossier .ph-rule::after { box-shadow: 0 0 0 0.28em #e7d29c; }
.ds-tab {
  position: absolute; top: -1.7em; left: 1.2em; padding: 0.3em 1.3em 0.2em;
  background-color: #e7d29c; background-image: var(--grain);
  font-family: var(--f-sc); font-weight: 600; letter-spacing: 0.2em;
  border-radius: 0.5em 0.5em 0 0; box-shadow: 0 -0.1em 0 rgba(0, 0, 0, 0.25);
}
.ds-facts { margin: 0.2em 0 1em; }
.ds-redact { display: grid; gap: 0.35em; margin: 0 0 1.3em; }
.ds-redact i { display: block; height: 0.8em; background: var(--char); }
.ds-redact i:nth-child(1) { width: 92%; }
.ds-redact i:nth-child(2) { width: 64%; }
.ds-redact i:nth-child(3) { width: 78%; }
.ds-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em 1.2em; }
.ds-updated { margin-top: 0.9em; font-size: 1.45em; color: #274a8a; }

/* ----------------------------------------------- social: contact cards */
.cd-intro { margin: -0.2em 0 0.6em; font-size: 0.92em; font-style: italic; color: var(--ink-2); }
.cd-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); gap: 1.3em; margin-top: 1em; }
.bc { padding: 1em 1.1em 0.8em; background-color: var(--tone); background-image: var(--grain); border: 0.09em solid var(--char); box-shadow: 0.22em 0.28em 0 rgba(40, 18, 0, 0.3); transform: rotate(var(--tilt, 0deg)); }
.bc h3 { font-family: var(--f-display); font-weight: 900; font-size: 1.45em; line-height: 1.1; }
.cd-handle { position: relative; display: inline-block; margin: 0.35em 0 0.7em; font-family: var(--f-type); font-size: 1.05em; overflow-wrap: anywhere; }
.redact-bar { position: absolute; inset: -0.08em -0.25em; background: var(--char); transform-origin: right center; transition: transform 0.55s cubic-bezier(0.6, 0, 0.2, 1); }
.bc.open .redact-bar { transform: scaleX(0); }
.cd-actions { display: flex; flex-wrap: wrap; }
.cd-open { visibility: hidden; }
.bc.open .cd-open { visibility: visible; }
.declass-all { margin-top: 0.7em; }

/* -------------------------------------------- /map: the evidence board */
.p-board { background-color: #2a2622; background-image: var(--grain), radial-gradient(120% 90% at 50% 0%, #3a342d, #221e1a); color: var(--cream); }
.p-board .pt { color: var(--cream); }
.p-board .ph-kicker { color: var(--kraft-l); }
.p-board .ph-rule { border-color: var(--cream); }
.p-board .ph-rule::after { box-shadow: 0 0 0 0.28em #2d2924; }
.bd-intro { margin-top: -0.2em; font-size: 0.9em; font-style: italic; color: rgba(241, 231, 204, 0.78); }
.bd-wrap { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24%; align-items: center; margin-top: 1.2em; padding: 0.3em 0.5em; }
.bd-strings { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.bd-strings path { fill: none; stroke: #e4473a; stroke-width: 1.6; stroke-linecap: round; opacity: 0.8; transition: opacity 0.3s, stroke-width 0.3s; }
.bd-strings path.dim { opacity: 0.08; }
.bd-strings path.hot { stroke-width: 2.8; opacity: 1; }
.bd-projects, .bd-skills { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1em; }
.bd-skills { gap: 0.55em; }
.bd-card, .bd-tag { position: relative; display: block; width: 100%; border: 0; text-align: left; color: var(--ink); transform: rotate(var(--tilt, 0deg)); box-shadow: 0.15em 0.2em 0 rgba(0, 0, 0, 0.5); transition: opacity 0.3s; cursor: pointer; }
.bd-card { padding: 0.75em 1em 0.7em; background-color: var(--tone); background-image: var(--grain); }
.bd-card b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 1em; line-height: 1.2; }
.bd-card span { font-family: var(--f-type); font-size: 0.78em; }
.bd-tag { padding: 0.4em 0.8em; background: #efe5c6; font-family: var(--f-type); font-size: 0.84em; line-height: 1.25; }
.bd-pin {
  position: absolute; top: 50%; width: 0.9em; height: 0.9em; margin-top: -0.45em; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8272, #9e231b); box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.6);
  pointer-events: none; z-index: 3;
}
.bd-card .bd-pin { right: -0.45em; }
.bd-tag .bd-pin { left: -0.45em; }
.bd-card.dim, .bd-tag.dim { opacity: 0.3; }
.bd-card[aria-pressed='true'], .bd-tag[aria-pressed='true'] { outline: 3px solid var(--mustard); outline-offset: 2px; }
@container paper (max-width: 26em) {
  .bd-wrap { column-gap: 16%; align-items: flex-start; }
  .bd-projects { gap: 2.2em; }
  .bd-card b, .bd-tag { font-size: 0.82em; }
}

/* ------------------------------------------------ /ask: Q and A sheet */
.p-qa { background-color: #f0e8cf; }
.qa-list { margin-top: 0; }
.qa-list li { border-bottom: 0.07em dashed rgba(42, 38, 34, 0.55); }
.qa-q { display: flex; gap: 0.6em; width: 100%; padding: 0.75em 0.3em; border: 0; background: none; text-align: left; font-family: var(--f-display); font-weight: 700; font-size: 1.05em; line-height: 1.35; }
.qa-q:hover { background: rgba(240, 179, 35, 0.3); }
.qa-mark { flex: none; font-family: var(--f-display); font-weight: 900; color: var(--red-d); }
.qa-a { display: flex; gap: 0.6em; padding: 0 0.3em 0.9em; font-family: var(--f-type); font-size: 0.95em; }
.qa-text { margin: 0; }

/* ------------------------------------------------------ /help: manual */
.p-help { background-color: #ebe6d0; }
.hp-list { margin-top: 0; }
.hp-list li { display: grid; grid-template-columns: 7.8em 1fr; gap: 0.8em; padding: 0.6em 0; border-bottom: 0.07em dotted rgba(42, 38, 34, 0.55); }
.hp-keys { display: flex; flex-wrap: wrap; gap: 0.25em; align-content: flex-start; }
.hp-keys kbd { background: #fbf6e4; }
.hp-fast { margin-top: 1em; }
.hp-fast a:hover { background: var(--mustard); }
.hp-hint { margin-top: 0.8em; font-size: 1.6em; color: var(--red-d); transform: rotate(-1.5deg); }
@container paper (max-width: 25em) { .hp-list li { grid-template-columns: 1fr; gap: 0.2em; } }

/* ------------------------------------------------ /secret: eyes only */
.p-secret {
  background-color: #17130f;
  background-image: var(--grain);
  color: #f1e4c4;
  box-shadow: 0 0 0 0.3em var(--red), 0.3em 0.45em 0 0.3em rgba(0, 0, 0, 0.45);
  padding-bottom: 3.6em;
}
.p-secret .pt { color: var(--mustard); }
.p-secret .ph-rule { border-color: var(--cream); }
.p-secret .ph-rule::after { box-shadow: 0 0 0 0.28em #17130f; }
.p-secret .putback { background-color: var(--red); color: #f7ead2; }
.sc-lines { margin-top: 0; }
.sc-line { margin: 0 0 1em; font-family: var(--f-type); font-size: 1.02em; }
.p-secret .stamp { mix-blend-mode: normal; color: var(--red); background: rgba(241, 228, 196, 0.08); }

/* Single-page layout overrides must keep the left margin of the notepad-style papers */
.stage[data-mode='single'] .p-checklist { padding-left: 3em; }
.stage[data-mode='single'] .p-report { padding-left: 2.9em; }
.stage[data-mode='single'] .p-log { padding-left: 4.9em; }
.stage[data-mode='single'] .p-letter { padding: 1.5em 1.4em 5.6em; }
.stage[data-mode='single'] .p-personnel { padding-bottom: 5.8em; }
.stage[data-mode='single'] .tk-cassette { width: 5em; height: 3.33em; }
.stage[data-mode='single'] .p-tickets .ph { padding-right: 5em; }

/* ==========================================================================
   REVISION 2: links, AI / ML figures, achievements, bestiary
   ========================================================================== */

/* ---- links that clearly lead somewhere ---- */
.btn-row { display: flex; flex-wrap: wrap; gap: 0.5em 0.6em; margin-top: 0.55em; }
.xlink {
  display: inline-flex; flex-direction: column; gap: 0.05em;
  min-width: 7.5em; padding: 0.42em 2em 0.42em 0.8em;
  position: relative;
  background: var(--red); color: #fff4df;
  text-decoration: none;
  box-shadow: 0.18em 0.2em 0 rgba(40, 18, 0, 0.4);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.xlink b { font-family: var(--f-sc); font-weight: 600; font-size: 1.12em; letter-spacing: 0.1em; line-height: 1.1; }
.xlink small { font-family: var(--f-type); font-size: 0.72em; letter-spacing: 0.02em; opacity: 0.9; overflow-wrap: anywhere; }
.xlink::after { content: ''; position: absolute; right: 0.7em; top: 50%; width: 0.55em; height: 0.55em; margin-top: -0.3em; border: solid currentColor; border-width: 0.14em 0.14em 0 0; transform: rotate(45deg); }
a.xlink:hover { background: var(--red-d); transform: translate(-0.06em, -0.08em); box-shadow: 0.26em 0.3em 0 rgba(40, 18, 0, 0.4); }
a.xlink:active { transform: translate(0.08em, 0.1em); box-shadow: 0.08em 0.1em 0 rgba(40, 18, 0, 0.4); }
.xlink.is-todo { background: transparent; color: var(--ink-2); border: 0.1em dashed rgba(42, 38, 34, 0.55); box-shadow: none; }
.xlink.is-todo::after { display: none; }
.xlink.is-todo small { font-style: italic; }
.rp-links { margin: 0.9em 0 0.2em; padding: 0.7em 0.8em 0.8em; background: rgba(200, 54, 43, 0.08); border: 0.09em dashed var(--red-d); }
.rp-links h3 { font-family: var(--f-sc); font-weight: 600; font-size: 1.15em; letter-spacing: 0.14em; color: var(--red-d); }

/* ---- AI / ML figures: pen sketches on the paper ---- */
.fig { margin: 1.2em 0 0.3em; padding: 0.5em 0.7em 0.2em; background: rgba(255, 252, 240, 0.55); border: 0.07em solid rgba(42, 38, 34, 0.5); box-shadow: 0.16em 0.2em 0 rgba(40, 18, 0, 0.18); transform: rotate(-0.6deg); }
.fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig figcaption { margin-top: 0.1em; font-size: 1.2em; line-height: 1.05; color: var(--brown); text-align: right; }
.fg { stroke-linecap: round; stroke-linejoin: round; fill: none; }
.fg-ax { stroke: #2a2622; stroke-width: 1.5; }
.fg-ln { stroke: #2c4a7a; stroke-width: 1.7; fill: none; }
.fg-ln.dash, .fg-red.dash { stroke-dasharray: 5 4; }
.fg-red { stroke: #b3281c; stroke-width: 1.7; fill: none; }
.fg-thin { stroke: #2a2622; stroke-width: 0.7; stroke-opacity: 0.5; fill: none; }
.fg-node { fill: #f1e7cc; stroke: #2a2622; stroke-width: 1.5; }
.fg-dot { fill: #2c4a7a; fill-opacity: 0.75; stroke: none; }
.fg-dotr { fill: #b3281c; stroke: none; }
.fg-ring { fill: none; stroke: #b3281c; stroke-width: 1.3; stroke-dasharray: 3 3; }
.fg-cell { fill: #2c4a7a; stroke: #2a2622; stroke-width: 0.5; stroke-opacity: 0.4; }
.fg-cellD { fill: #2c4a7a; stroke: #2a2622; stroke-width: 0.8; }
.fg-cellR { fill: #b3281c; fill-opacity: 0.8; stroke: #2a2622; stroke-width: 0.8; }
.fg-cellL { fill: none; stroke: #2a2622; stroke-width: 0.6; stroke-opacity: 0.5; }
.fg-box { fill: none; stroke: #b3281c; stroke-width: 1.6; }
.fg-box.fill { fill: #b3281c; }
.fg-bar { fill: #2c4a7a; fill-opacity: 0.8; stroke: #2a2622; stroke-width: 0.9; }
.fg-bar.red { fill: #b3281c; fill-opacity: 0.85; }
.fg-txt { font-family: var(--f-hand); font-size: 13px; fill: #2a2622; stroke: none; }
.fg-txt.red { fill: #b3281c; font-size: 15px; }
.fg-txt.inv { fill: #f1e7cc; }
.sk-fig { max-width: 24em; margin-inline: auto; }
.rp-fig { max-width: 22em; }

/* ---- achievements ---- */
.lt-item { grid-template-columns: 4.4em 1fr; align-items: start; }
.lt-medal { display: flex; flex-direction: column; align-items: center; width: 4em; }
.lt-medal .medal { width: 2.8em; height: 2.8em; display: block; }
.lt-medal b { margin-top: 0.15em; max-width: 100%; text-align: center; font-family: var(--f-display); font-weight: 900; font-size: 0.8em; line-height: 1.1; color: var(--red-d); overflow-wrap: anywhere; }
.lt-kind { display: inline-block; margin-bottom: 0.1em; padding: 0 0.5em; background: var(--red); color: #fff4df; font-family: var(--f-sc); font-weight: 600; font-size: 0.85em; letter-spacing: 0.14em; }
.lt-item h3 { margin-top: 0.15em; }

/* ---- specimen card: a bestiary card slipped into another paper ---- */
.sp-card {
  position: relative; display: grid; grid-template-columns: 6.6em 1fr; gap: 0.9em; align-items: center;
  margin: 1.3em 0 0.3em; padding: 0.9em 1em 0.8em 0.9em;
  background: #e7d9b2 var(--grain);
  border: 0.09em solid var(--char);
  box-shadow: 0.2em 0.24em 0 rgba(40, 18, 0, 0.3);
  transform: rotate(0.8deg);
}
.sp-card::before { content: ''; position: absolute; inset: 0.3em; border: 0.05em solid rgba(42, 38, 34, 0.55); pointer-events: none; }
.sp-clip { position: absolute; top: -1.4em; right: 1.2em; width: 1.2em; height: 3.4em; color: var(--red); transform: rotate(6deg); }
.sp-txt { display: flex; flex-direction: column; gap: 0.1em; min-width: 0; }
.sp-kind { font-family: var(--f-sc); font-weight: 600; font-size: 0.9em; letter-spacing: 0.16em; color: var(--red-d); }
.sp-txt b { font-family: var(--f-gothic); font-weight: 400; font-size: 1.8em; line-height: 1; }
.sp-txt small { font-family: var(--f-fell); font-style: italic; font-size: 0.95em; color: var(--brown); }
.sp-txt p { margin: 0.1em 0 0.2em; font-size: 1.25em; line-height: 1; color: var(--red-d); }
.sp-open { align-self: flex-start; font-family: var(--f-type); font-size: 0.8em; border-bottom: 0.1em solid var(--red); color: var(--ink); text-decoration: none; }
.sp-open:hover { background: var(--mustard); }

/* ---- the creature plate ---- */
.cr-frame { position: relative; aspect-ratio: 120 / 150; background: #efe4c6 var(--grain); border: 0.09em solid var(--char); box-shadow: inset 0 0 0 0.25em #efe4c6, inset 0 0 0 0.3em rgba(42, 38, 34, 0.6); overflow: hidden; }
.cr-frame svg, .cr-frame img { position: absolute; inset: 0.35em; width: calc(100% - 0.7em); height: calc(100% - 0.7em); display: block; object-fit: cover; }
.cr-frame img { filter: sepia(0.4) contrast(1.05); }
.cr-frame.lg { width: 14em; }
.cr-frame.sm { width: 100%; }

/* ---- bestiary papers ---- */
.p-bestiary { background-color: #ead9ad; background-image: var(--grain); padding-bottom: 2em; border: 0.1em solid var(--char); outline: 0.3em solid #ead9ad; outline-offset: -0.7em; box-shadow: 0.28em 0.32em 0 rgba(40, 18, 0, 0.4), 0 0 0 0.07em rgba(42, 38, 34, 0.45); }
.p-bestiary .ph-rule::after { box-shadow: 0 0 0 0.28em #ead9ad; }
.p-bestiary .pt { font-family: var(--f-gothic); font-weight: 400; font-size: 2.6em; line-height: 0.95; }
.p-bestiary .ph-kicker { font-family: var(--f-deco); font-weight: 700; font-size: 0.85em; letter-spacing: 0.14em; color: var(--red-d); }
.bs-intro { font-family: var(--f-fell); font-style: italic; font-size: 1.05em; }
.bs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.4em, 1fr)); gap: 1em 0.9em; margin-top: 1em; }
.bs-card { display: flex; flex-direction: column; gap: 0.15em; text-decoration: none; color: inherit; transition: transform 0.2s; }
.bs-grid li:nth-child(odd) .bs-card { transform: rotate(-0.8deg); }
.bs-grid li:nth-child(even) .bs-card { transform: rotate(0.9deg); }
.bs-card:hover { transform: rotate(0) translateY(-0.2em); }
.bs-card .cr-frame { width: 100%; }
.bs-card b { margin-top: 0.3em; font-family: var(--f-gothic); font-weight: 400; font-size: 1.45em; line-height: 1; }
.bs-card small { font-family: var(--f-fell); font-style: italic; font-size: 0.85em; color: var(--brown); line-height: 1.2; }
.bs-card:hover b { color: var(--red-d); }
.danger { display: inline-flex; gap: 0.18em; vertical-align: middle; }
.danger i { width: 0.7em; height: 0.7em; border: 0.1em solid var(--char); transform: rotate(45deg); }
.danger i.on { background: var(--red); border-color: var(--red-d); }
.cr-top { display: flex; justify-content: space-between; gap: 1em; font-family: var(--f-type); font-size: 0.78em; color: var(--ink-2); }
.cr-head { margin-top: 0.5em; }
.cr-aka { font-family: var(--f-fell); font-style: italic; font-size: 1.1em; color: var(--brown); }
.cr-body { display: flex; gap: 1.1em; align-items: flex-start; margin-bottom: 0.9em; }
.cr-facts { display: flex; flex-direction: column; gap: 0.6em; flex: 1; min-width: 0; padding-top: 0.3em; }
.cr-facts p { margin: 0; display: flex; flex-direction: column; font-family: var(--f-fell); font-size: 1.1em; }
.cr-k { font-family: var(--f-sc); font-weight: 600; font-size: 0.85em; letter-spacing: 0.16em; color: var(--red-d); }
.cr-lore { font-family: var(--f-fell); font-size: 1.08em; line-height: 1.5; }
.cr-lore::first-letter { font-family: var(--f-gothic); font-size: 2.7em; float: left; line-height: 0.8; padding: 0.06em 0.1em 0 0; color: var(--red-d); }
.cr-sec { margin-top: 0.9em; }
.cr-sec h3 { font-family: var(--f-sc); font-weight: 600; font-size: 1.1em; letter-spacing: 0.14em; color: var(--brown); border-bottom: 0.07em solid var(--char); margin-bottom: 0.25em; }
.cr-sec p { font-size: 0.95em; }
.cr-ml { display: grid; grid-template-columns: 10em 1fr; gap: 0.9em; align-items: center; margin-top: 1.1em; padding-top: 0.8em; border-top: 0.09em dashed rgba(42, 38, 34, 0.55); }
.cr-ml .fig { margin: 0; }
.cr-ml h3 { font-family: var(--f-sc); font-weight: 600; font-size: 1.05em; letter-spacing: 0.14em; color: var(--red-d); }
.cr-ml p.hand { font-size: 1.5em; line-height: 1; }

@container paper (max-width: 27em) {
  .cr-body { flex-direction: column; align-items: center; }
  .cr-frame.lg { width: min(12em, 70%); }
  .cr-facts { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.4em 1.8em; align-self: stretch; text-align: center; }
  .cr-facts p { align-items: center; }
  .cr-ml { grid-template-columns: 1fr; }
  .sp-card { grid-template-columns: 5.2em 1fr; }
}