/* Quiet reading surface for the approved colorful origami system.
   Legacy ribbon class names preserve the persistent shell/control contract. */
html[data-portfolio-page] {
  color-scheme: light;
  --bg: #f4f2ed;
  --ink: #171a1c;
  --body: #53575a;
  --muted: #656667;
  --line: #dcdad4;
  --accent: #87674f;
}
html[data-portfolio-page][data-theme="dark"] {
  color-scheme: dark;
  --bg: #101416;
  --ink: #eceae4;
  --body: #bdc1c1;
  --muted: #a2a8aa;
  --line: #303739;
  --accent: #c9ad89;
}
html[data-portfolio-page] body { background: var(--bg); isolation: isolate; }
html[data-portfolio-page] main,
html[data-portfolio-page] main.work-page,
html[data-portfolio-page] main.project-page {
  width: min(46rem, 51vw);
  margin: 0 0 0 7vw;
  padding: 12vh 0 64px;
  position: relative;
  z-index: 1;
}
html[data-portfolio-page] main:focus { outline: none; }
html[data-portfolio-page] main section { scroll-margin-top: 30px; }
html[data-portfolio-page] main section:not(.hero) {
  grid-template-columns: 100px minmax(0, 1fr);
  column-gap: 28px;
}
html[data-portfolio-page] .future-artwork { display: none; }
html[data-portfolio-page] .hero { min-height: 58vh; }
html[data-portfolio-page] .work-link,
html[data-portfolio-page] .writing-link,
html[data-portfolio-page] .project-nav a,
html[data-portfolio-page] .work-toc a,
html[data-portfolio-page] .work-back a,
html[data-portfolio-page] .project-next-link strong {
  text-decoration-color: color-mix(in srgb, var(--accent) 48%, transparent);
}
html[data-portfolio-page] a:hover,
html[data-portfolio-page] a:focus-visible { text-decoration-color: var(--accent); }
html[data-portfolio-page] a:focus-visible,
html[data-portfolio-page] button:focus-visible { outline-color: var(--accent); }
.portfolio-tools {
  position: fixed;
  top: 18px;
  right: 30px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 18px;
}
.portfolio-tools .theme {
  position: static;
  border-color: var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 19px;
  width: 42px;
  height: 42px;
}
.ribbon-stage {
  position: fixed;
  left: 60vw;
  right: 2vw;
  top: 14vh;
  height: 76vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ribbon-stage canvas { display: block; width: 100%; height: 100%; }
.ribbon-stage[hidden] { display: none; }
/* A face-clipped light sweep marks the waiting packet; native 3D assembles it. */
.origami-intro { position:absolute; inset:0; z-index:1; --origami-sweep-color:#fff5e7; }
html[data-theme="dark"] .origami-intro { --origami-sweep-color:#dcefff; }
.origami-loading-glow { pointer-events:none; }
html[data-theme="dark"] .origami-loading-glow { opacity:.9; }
.origami-loading-sweep { animation:origami-loading-sweep 2.2s linear infinite; }
@keyframes origami-loading-sweep {
  0%, 10% { transform:translateX(var(--sweep-start)); }
  82%, 100% { transform:translateX(var(--sweep-end)); }
}
.origami-intro[data-sleeping="true"] .origami-loading-sweep { animation-play-state:paused; }
html[data-ribbon-paused="true"] .origami-loading-glow,
.origami-intro[data-complete="true"] .origami-loading-glow,
.ribbon-stage:not([data-intro-state="loading"]) .origami-loading-glow { display:none; }
html[data-ribbon-paused="true"] .origami-loading-sweep,
.ribbon-stage:not([data-intro-state="loading"]) .origami-loading-sweep { animation:none; }
.origami-intro svg { display:block; width:100%; height:100%; }
.origami-intro .packet-face,
.origami-intro .paper-face { fill:var(--paper-light); }
.origami-intro .packet-underlay,
.origami-intro .packet-crease { display:none; }
.origami-intro .packet-face {
  stroke:var(--paper-light); stroke-width:.004;
  stroke-linejoin:miter;
}
html[data-theme="dark"] .origami-intro .packet-face,
html[data-theme="dark"] .origami-intro .paper-face { fill:var(--paper-dark); }
html[data-theme="dark"] .origami-intro .packet-face { stroke:var(--paper-dark); }
.origami-intro .paper-crease { display:none; }
.ribbon-stage[data-intro-state="loading"] canvas,
.ribbon-stage[data-intro-state="loading"] > img,
.ribbon-stage[data-intro-state="fallback"] canvas,
.ribbon-stage[data-intro-state="fallback"] > img { opacity:0; }
html[data-portfolio-page] .skip:focus { z-index: 6; }
@media (min-width: 1600px) {
  .ribbon-stage { left: 57vw; right: 5vw; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  html[data-portfolio-page] main section:not(.hero) { grid-template-columns: minmax(0, 1fr); }
  html[data-portfolio-page] main section h2 { position: static; margin-bottom: 0; }
}
@media (max-width: 899px) {
  html[data-portfolio-page] main,
  html[data-portfolio-page] main.work-page,
  html[data-portfolio-page] main.project-page {
    width: min(100%, 46rem);
    margin: 0 auto;
    padding: 84px 24px 48px;
  }
  html[data-portfolio-page] main section:not(.hero) { display: block; }
  html[data-portfolio-page] main section { scroll-margin-top: 80px; }
  html[data-portfolio-page] main section h2 { position: static; margin-bottom: 16px; }
  html[data-portfolio-page] .hero { min-height: auto; margin-bottom: 48px; }
  html[data-portfolio-page] h1 { padding-right: 0; }
  .portfolio-tools {
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    padding: 10px 18px;
    justify-content: flex-end;
    gap: 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .ribbon-stage { display: none; }
  html[data-portfolio-page] .project-header,
  html[data-portfolio-page] .work-header { margin-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .origami-loading-glow { display:none; }
  .origami-loading-sweep { animation:none; }
  .origami-intro .paper-face { animation: none; opacity: 1; }
  .origami-intro .paper-crease { animation: none; stroke-dashoffset: 0; opacity: .2; }
  html[data-portfolio-page] *, html[data-portfolio-page] *::before, html[data-portfolio-page] *::after {
    scroll-behavior: auto;
    transition-duration: 0s;
  }
}
@media print {
  html[data-portfolio-page], html[data-portfolio-page][data-theme="dark"] {
    --bg: #fff; --ink: #000; --body: #333; --muted: #555; --line: #ccc;
  }
  .portfolio-tools, .ribbon-stage { display: none !important; }
  html[data-portfolio-page] main,
  html[data-portfolio-page] main.work-page,
  html[data-portfolio-page] main.project-page { width: 100%; margin: 0; padding: 0; }
  html[data-portfolio-page] .hero { min-height: auto; }
}