/* Projects · /projects/<n> — one artifact up close. The card's frame colour arrives as --frame on <main>. */

.st-live { --st: var(--a2-text); } .st-wip { --st: var(--a4-text); } .st-kept { --st: var(--gold); }

/* ---------- the card on its summoning circle ---------- */
.proj-hero { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 56px; padding: 34px clamp(16px, 4vw, 48px) 42px; background-color: var(--panel-2); background-image: linear-gradient(var(--mat-line) 1px, transparent 1px), linear-gradient(90deg, var(--mat-line) 1px, transparent 1px); background-size: 40px 40px; border-bottom: 3px solid var(--ink); color: var(--on-panel); overflow: hidden; }
.p-stage { position: relative; flex: 0 1 420px; min-width: 0; min-height: 470px; display: flex; align-items: center; justify-content: center; perspective: 1200px; }
.stage-circle { position: absolute; left: 50%; top: 50%; width: min(460px, 100%); height: auto; transform: translate(-50%, -50%); opacity: 0.5; pointer-events: none; }
.circle-lines { stroke: var(--circle); }
.circle-text { fill: var(--circle-text); }
.spin { animation: spin 110s linear infinite; transform-box: view-box; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }
.p-stage .big-card { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.1); }
@media (hover: hover) { .p-stage:hover .big-card { transform: rotateY(-10deg) rotateX(5deg) translateY(-6px); } }

/* ---------- name, status, actions ---------- */
.proj-info { flex: 1 1 420px; max-width: 560px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; color: var(--a3-text); }
.chip-a2 { background: var(--ink); color: var(--a2-text); }
.cartouche { position: relative; max-width: calc(100% - 14px); padding: 12px 34px 14px 28px; border: 3px solid var(--gold); border-radius: 48px; box-shadow: inset 0 0 0 5px var(--panel-2), inset 0 0 0 7px color-mix(in srgb, var(--gold) 55%, transparent); }
.cartouche::after { content: ""; position: absolute; right: -11px; top: 14%; bottom: 14%; width: 8px; background: var(--gold); border: 2px solid var(--ink); border-radius: 4px; }
.cartouche h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, 4.2vw, 50px); line-height: 1.15; color: var(--paper); text-shadow: 4px 4px 0 var(--ink); overflow-wrap: anywhere; }
.proj-pitch { font-family: var(--f-cute); font-size: 18px; line-height: 1.6; color: var(--a3-soft); }
.status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.stamp { display: inline-block; padding: 4px 12px; border: 3px solid var(--st); box-shadow: inset 0 0 0 2px var(--panel-2), inset 0 0 0 3px var(--st); color: var(--st); font-family: var(--f-display); font-size: 16px; line-height: 1.3; transform: rotate(-4deg); }
.stamp [lang="ar"] { font-size: 19px; font-weight: 600; }
.status-line { min-width: 0; overflow-wrap: anywhere; font-family: var(--f-term); font-size: 21px; color: var(--st); }
.acts { display: flex; flex-wrap: wrap; gap: 10px; }
.act { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 16px; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--a3); color: var(--ink); text-decoration: none; font-family: var(--f-term); font-size: 21px; line-height: 1.2; transition: transform 0.12s ease, background 0.12s ease; }
.act:hover { transform: translate(-2px, -2px); color: var(--ink); }
.act-a2 { background: var(--a2); box-shadow: 3px 3px 0 var(--a1); }
.act-paper { background: var(--paper); }
.act-a4 { background: var(--a4); }
.act.is-placeholder { background: transparent; color: var(--a3-text); border-color: var(--muted); }
.act.is-placeholder:hover { transform: none; }
.clone { position: relative; align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 8px 8px 14px; background: #0B0912; border: 1.5px solid color-mix(in srgb, var(--a3) 60%, transparent); font-family: var(--f-term); font-size: 20px; }
.clone code { min-width: 0; overflow-wrap: anywhere; font-family: inherit; color: var(--on-panel); }
.copy-btn { position: relative; z-index: 1; flex: 0 0 auto; min-height: 40px; padding: 4px 12px; background: var(--ink); border: 1.5px solid var(--a2-text); color: var(--a2-text); font-family: inherit; font-size: 19px; cursor: pointer; }
.copy-btn:hover { background: var(--a2); color: var(--on-a2); }

/* ---------- body columns ---------- */
.proj-cols { display: flex; flex-wrap: wrap; align-items: stretch; }
.proj-main { flex: 999 1 560px; min-width: 0; padding: 30px clamp(14px, 3vw, 34px) 38px; display: flex; flex-direction: column; gap: 34px; }
.proj-side { flex: 1 1 300px; min-width: 0; padding: 30px 18px; background: var(--a3-soft); border-left: 3px solid var(--ink); display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 899px) { .proj-side { border-left: none; border-top: 3px solid var(--ink); } }

/* ---------- screenshots on a CRT, with Cleo asleep on top ---------- */
.screens { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 22px 28px; margin-top: 8px; }
.tv-wrap { flex: 1 1 340px; max-width: 480px; min-width: 0; margin-top: 96px; }
.tv { position: relative; padding: 18px 18px 12px; background: var(--a3-soft); border: 3px solid var(--ink); border-radius: 28px; box-shadow: 7px 7px 0 var(--a3); }
.tv-cat { position: absolute; left: 10%; bottom: calc(100% - 3px); z-index: 2; width: min(230px, 62%); }
.tv-cat svg { display: block; width: 100%; height: auto; margin-bottom: -14.6%; }
.tv-screen { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 3px solid var(--ink); border-radius: 22px / 26px; background: var(--ink); box-shadow: inset 0 0 70px rgba(20, 16, 24, 0.5); }
.tv-screen::after { z-index: 2; }
.tv-pic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.tv-pic[hidden] { display: none; }
.tv-pic img { width: 100%; height: 100%; object-fit: cover; }
.tv-pic .ph { margin-bottom: 8%; padding: 2px 8px; background: var(--paper-hi); border: 1.5px solid var(--ink); font-size: 15px; white-space: nowrap; }
.tv-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 14px 7px; background: rgba(20, 16, 24, 0.72); color: var(--on-panel); font-family: var(--f-term); font-size: 20px; line-height: 1.2; }
.osd-ch, .osd-st { position: absolute; z-index: 1; font-family: var(--f-term); line-height: 1; color: #FFFFFF; text-shadow: 2px 2px 0 var(--ink); }
.osd-ch { top: 10px; left: 14px; font-size: 26px; }
.osd-st { top: 12px; right: 14px; font-size: 20px; }
.roll { position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)); pointer-events: none; animation: roll 7s linear infinite; }
@keyframes roll { from { transform: translateY(-100%); } to { transform: translateY(480%); } }
.sc-1 { background: radial-gradient(circle at 50% 40%, var(--paper-hi), var(--frame) 75%); }
.sc-2 { background: radial-gradient(rgba(20, 16, 24, 0.18) 1.5px, transparent 2px) 0 0 / 12px 12px, var(--a3-soft); }
.sc-3 { background: repeating-linear-gradient(135deg, var(--a4-soft) 0 10px, var(--a4) 10px 20px); }
.sc-4 { background: linear-gradient(160deg, var(--a1-soft), var(--a1)); }
.tv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.qa { padding: 1px 8px; background: var(--ink); color: #FFFFFF; font-family: var(--f-term); font-size: 17px; letter-spacing: 0.08em; }
.knobs { display: flex; align-items: center; gap: 8px; }
.knobs i { width: 18px; height: 18px; border-radius: 50%; background: #CDBEF5; border: 2px solid var(--ink); }
.knobs .led { width: 10px; height: 10px; background: var(--a2); animation: led 2.4s steps(1) infinite; }
@keyframes led { 50% { opacity: 0.3; } }
.tv-neck { width: 30%; height: 16px; margin: 0 auto; background: #CDBEF5; border: 3px solid var(--ink); border-top: none; }
.tv-base { width: 54%; height: 14px; margin: 0 auto; background: var(--a3-soft); border: 3px solid var(--ink); border-radius: 0 0 12px 12px; }

.channels { flex: 1 1 220px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; margin-top: 96px; }
@media (max-width: 670px) { .channels { margin-top: 0; } }
.ch { display: flex; flex-direction: column; gap: 6px; padding: 6px; background: var(--paper-hi); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); color: var(--ink); text-align: left; cursor: pointer; transition: transform 0.15s ease; }
.ch:hover { transform: translateY(-3px); }
.ch[aria-pressed="true"] { border-color: var(--a1-deep); box-shadow: 3px 3px 0 var(--a1); }
.ch-thumb { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: flex-start; padding: 4px 6px; overflow: hidden; border: 1.5px solid var(--ink); border-radius: 6px; }
.ch-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-tag { position: relative; padding: 0 4px; background: var(--paper-hi); font-family: var(--f-term); font-size: 17px; line-height: 1.2; }
.ch[aria-pressed="true"] .ch-tag::before { content: "▸ "; }
.ch-cap { font-size: 14px; line-height: 1.4; }

/* ---------- README on lined paper ---------- */
.readme { background: var(--paper-hi); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--frame); }
.readme-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 8px 4px 12px; background: var(--ink); color: var(--a2-soft); font-family: var(--f-term); font-size: 19px; }
.readme-bar h2 { min-width: 0; font-size: inherit; font-weight: 400; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.readme-bar .dots i:last-child { background: var(--frame); border-color: var(--frame); }
.readme-body { position: relative; padding: 14px clamp(16px, 3vw, 30px) 28px; background: repeating-linear-gradient(to bottom, transparent 0 27px, color-mix(in srgb, var(--a1-deep) 14%, transparent) 27px 28px), var(--paper); font-size: 18px; line-height: 28px; }
.readme-body .tape { top: -3px; }
.rm-h1 { font-family: var(--f-term); font-size: 26px; color: var(--a1-deep); }
.rm-pitch { color: var(--muted-ink); }
.rm-pitch span { font-family: var(--f-term); color: var(--a3); }
.rm-h { margin-top: 28px; font-family: var(--f-cute); font-weight: 500; font-size: 20px; line-height: 28px; }
.rm-h span { font-family: var(--f-term); color: var(--a1-deep); }
.rm-list .box { font-family: var(--f-term); font-size: 20px; color: var(--a1-deep); }
.rm-list .box.done { color: var(--a2-deep); }
.rm-end { margin-top: 28px; font-family: var(--f-term); font-size: 20px; color: var(--muted-ink); }

/* ---------- sidebar ---------- */
.st-text { color: var(--st); }
.pip-s { font-size: 15px; color: var(--gold); }
.scope-key { padding: 2px 12px 10px; font-family: var(--f-term); font-size: 17px; line-height: 1.3; color: var(--muted); }
.scope-key .hiero { font-size: 12px; }
.materials { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 12px; }
.materials li { padding: 2px 10px; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font-family: var(--f-term); font-size: 20px; }
.materials .m1 { background: var(--a2-soft); transform: rotate(-2deg); }
.materials .m2 { background: var(--a1-soft); transform: rotate(1.5deg); }
.materials .m3 { background: var(--a4-soft); transform: rotate(-1deg); }
.materials .m4 { background: var(--a3-soft); transform: rotate(2deg); }
.materials .m5 { background: var(--paper-hi); transform: rotate(-1.5deg); }
.git-log { font-family: var(--f-term); font-size: 19px; line-height: 1.3; }
.git-log li { padding: 3px 0; overflow-wrap: anywhere; }
.log-link { display: flex; align-items: center; min-height: 44px; padding: 0 12px 6px; font-family: var(--f-term); font-size: 19px; line-height: 1.2; }