/* One continuous fresco: atmosphere, sun, architecture and sculpture are independent layers. */
:root {
  --ink: #505149;
  --ink-2: #45473f;
  --paper: #d5cebf;
  --white: #f3eddf;
  --muted: #d1c9ba;
  --line: #c5bba448;
  --peach: #d7ad69;
  --lavender: #e0bd82;
  --stone: #8a8477;
  --display: "Songti SC", "Noto Serif CJK SC", serif;
}

/* The sky occupies the page itself. Only the upper, sun-free brushwork is sampled. */
.identity-hero { min-height: 840px; height: min(1040px, 100svh); background: var(--ink); overflow: visible; isolation: isolate; }
.identity-atmosphere {
  position: absolute; inset: 0; overflow: clip; pointer-events: none;
  background: radial-gradient(ellipse at 73% 38%, #b6a68075, transparent 48%), linear-gradient(130deg, #69695d 0%, #6b685a 43%, #777260 72%, #505149 100%);
}
.identity-atmosphere::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #50514955, transparent 56%), linear-gradient(0deg, var(--ink), transparent 28%); }
.fresco-sky {
  position: absolute; top: 70px; right: -16%; width: 95%; aspect-ratio: 3.8;
  background: url('./assets/athens-source.jpg') center top / 100% auto no-repeat;
  mask-image: radial-gradient(ellipse 50% 46% at 54% 50%, #000 20%, #000b 46%, transparent 100%);
  transform: rotate(-22deg); opacity: .56; filter: saturate(.65);
}
.fresco-sun {
  position: absolute; top: 23%; left: 68%; width: clamp(105px, 12.5vw, 210px); aspect-ratio: 1; border-radius: 50%;
  background: #e4c379 url('./assets/athens-source.jpg') 50.9% 16.5% / 1300% auto;
  box-shadow: inset 0 0 40px #f6e6af77, 0 0 100px #ddac5420;
  filter: saturate(.7);
}
.atmosphere-grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .085; mix-blend-mode: soft-light; }
.fresco-landscape { position: absolute; z-index: 1; right: 0; bottom: -35px; width: min(70%, 1150px); aspect-ratio: 1146 / 550; pointer-events: none; }
/* Crop the original painting to y=760…1310; trace only its upper silhouette. No bitmap is rewritten. */
.fresco-landscape img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50.768%;
  filter: saturate(.63) brightness(.92);
  clip-path: polygon(0.00% 50.00%, 3.05% 45.27%, 4.80% 38.18%, 10.38% 34.73%, 14.14% 32.18%, 20.07% 31.09%, 23.12% 30.91%, 23.73% 27.64%, 24.96% 26.55%, 24.69% 24.91%, 27.05% 23.09%, 29.06% 25.27%, 33.33% 26.73%, 35.43% 28.18%, 40.31% 28.18%, 40.31% 12.73%, 39.53% 11.64%, 48.78% 7.64%, 53.23% 9.09%, 54.10% 12.18%, 58.90% 15.27%, 59.25% 18.18%, 60.47% 16.91%, 63.53% 18.36%, 63.79% 19.45%, 67.02% 20.73%, 67.19% 23.45%, 67.63% 31.09%, 73.47% 34.36%, 74.08% 30.73%, 73.73% 28.91%, 74.35% 27.45%, 74.61% 24.00%, 75.57% 22.36%, 76.61% 24.00%, 76.88% 27.45%, 78.27% 30.55%, 77.84% 34.18%, 78.97% 37.64%, 80.02% 36.73%, 80.54% 31.27%, 81.15% 28.55%, 81.59% 29.82%, 81.50% 37.09%, 81.85% 38.00%, 86.82% 40.55%, 88.57% 42.00%, 95.55% 45.45%, 100.00% 49.82%, 100.00% 100.00%, 0.00% 100.00%);
  mask-image: linear-gradient(0deg, transparent 1%, #000 39%), linear-gradient(90deg, transparent, #000 9%, #000 95%, transparent);
  mask-composite: intersect;
}
.identity-stage { z-index: 2; padding-top: 130px; }
.identity-topline { color: #e0d7c7; }
.identity-topline>span:last-child { color: #eee5d4; }
.identity-title { margin-top: 110px; width: 58%; }
.identity-greeting { font-size: clamp(22px, 2.2vw, 32px); color: #ddd3c1; margin-bottom: 10px; }
.identity-name { font-size: clamp(70px, 8.5vw, 138px); line-height: 1.3; letter-spacing: -.065em; background: none; color: var(--white); font-family: var(--display); font-weight: 600; }
.identity-dot { color: #dfb36a; }
.identity-description { bottom: 212px; max-width: 42%; }
.identity-description .micro-label { color: #f0cc92; }
.identity-description p { font-size: clamp(18px, 1.7vw, 25px); color: var(--white); text-shadow: none; }
.placeholder-label { color: #d0c5b3; }
.identity-action { left: 0; right: auto; bottom: 112px; flex-direction: row-reverse; align-items: center; gap: 24px; }
.portrait-caption { color: #ddd2bd; }
.pill-link { background: #dfc391; border-color: #e4cc9f; color: #393a34; }
.pill-link:hover { box-shadow: 0 8px 25px #302d3528; }
.identity-baseline { color: #dbd1bf; border-top: 1px solid #d5c6ac40; padding-top: 18px; bottom: 28px; }
.identity-baseline>a { text-shadow: 0 1px 5px #33382d; }
.site-header.scrolled { background: #505149ed; border-color: #c5bba448; }
.primary-nav a { color: #f1e9db; }
.status-dot { box-shadow: none; }

/* Stone and brass continue through the work; project images keep a quiet surface. */
.work-section { position: relative; background: var(--ink); padding-top: 150px; }
.work-section::before {
  content: ""; position: absolute; top: 0; right: 0; width: 54%; height: 300px; pointer-events: none;
  background: url('./assets/sisyphus-relief-v2.png') left top / 250% auto;
  opacity: .08; mix-blend-mode: soft-light; mask-image: radial-gradient(ellipse at 70% 0, #000, transparent 70%);
}
.work-section .section-heading { position: relative; }
.section-heading h2, .about-main h2, .notes-heading h2, .site-footer h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.045em; }
.section-heading h2 { line-height: 1.28; }
.feature-surface { background: var(--ink-2); border-color: #928c7e; box-shadow: 0 -15px 55px #3b39352b; }
.project-index { border-color: #a297815e; background: #505149f5; }
.project-index a:hover, .project-index a[aria-current] { background: #646354; color: #ffe1ab; }
.project-index a>span:first-child, .project-index a>span:last-child { color: #c9bda7; }
.section-aside, .feature-footer>span, .feature-identity .micro-label, .feature-demo-label, .more-heading>span, .work-end { color: #d3cabc; }
.feature-demo-label, .feature-action { border-color: #a39984; }
.more-heading, .work-end { border-color: #a297815e; }
.card-meta p, .card-meta .card-index { color: #c9c3b5; }
.aside-rule { background: #a297815e; }

/* A full figure, without a picture frame, gives the reading chapter its left edge. */
.reading-panel { background: var(--paper); border-radius: 8px 8px 0 0; }
.about-section { position: relative; min-height: 790px; padding: 135px 0 125px; color: #3f423c; isolation: isolate; }
.about-section::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url('./assets/sisyphus-relief-v2.png') left top / 230% auto;
  opacity: .07; mix-blend-mode: multiply; mask-image: linear-gradient(90deg, #000, transparent 65%); pointer-events: none;
}
.about-layout { grid-template-columns: 46% minmax(0, 54%); gap: 0; position: relative; z-index: 1; }
.about-label { grid-column: 2; justify-self: start; margin-bottom: 42px; color: #686859; }
.about-main { grid-column: 2; }
.about-main h2 { font-size: clamp(46px, 5.2vw, 82px); line-height: 1.28; }
.about-main h2 span { color: #7c7057; }
.about-main>p { max-width: 600px; color: #55574c; }
.about-meta { border-color: #aaa48f; color: #68695b; }
.small-orbit { border-color: #9a7d44; box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6px #9a7d44; }
.about-sculpture { position: absolute; width: min(48%, 800px); left: -3%; bottom: 80px; pointer-events: none; }
.about-sculpture::before { content: ""; position: absolute; width: 55%; aspect-ratio: 1; left: 33%; top: -8%; border-radius: 50%; background: #c6ae7950; mask-image: linear-gradient(135deg, #000, transparent 80%); }
.about-sculpture img { display: block; position: relative; width: 100%; height: auto; filter: saturate(.72); }
.notes-section { color: #3f423c; position: relative; }
.notes-heading { border-color: #aaa48f; }
.notes-heading .section-kicker { color: #806b41; }
.notes-heading>p:last-child, .note-card p { color: #656657; }
.note-card { border-color: #b3ab97; background: #e3ddcf35; }
.note-index { color: #806b41; }

/* A final brush of the same sky echoes the opening without repeating the scene. */
.site-footer { position: relative; background: var(--ink-2); overflow: hidden; isolation: isolate; }
.site-footer::before {
  content: ""; position: absolute; z-index: -1; width: 80%; aspect-ratio: 4; top: 0; right: -20%;
  background: url('./assets/athens-source.jpg') center top / 100% auto no-repeat;
  transform: rotate(-24deg); opacity: .18; filter: saturate(.5); mask-image: radial-gradient(ellipse, #000, transparent 70%);
}
.site-footer h2 span { color: #d4b783; }
.site-footer .footer-inner p:last-child, .footer-bottom { color: #c9c3b5; }
.footer-bottom, .footer-links a { border-color: #a297815e; }

@media (min-width: 1001px) and (min-height: 781px) and (prefers-reduced-motion: no-preference) {
  /* Small scroll offsets separate the planes; the artwork never loops or spins. */
  .fresco-sun { transform: translateY(var(--sun-offset, 0px)); }
  .fresco-landscape { transform: translateY(var(--land-offset, 0px)); }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .identity-title { margin-top: 100px; }
  .identity-name { font-size: 8.8vw; }
  .fresco-landscape { width: 76%; bottom: -20px; right: 0; }
  .fresco-sun { top: 25%; left: 74%; }
  .portrait-caption { display: none; }
  .about-section { min-height: 690px; padding-block: 100px; }
  .about-main h2 { font-size: 5.5vw; }
  .about-sculpture { width: 48%; bottom: 100px; }
}
@media (max-width: 700px) {
  .identity-hero { height: 880px; min-height: 880px; max-height: none; overflow: clip; }
  .identity-stage { padding-top: 103px; }
  .identity-title { margin-top: 43px; width: 100%; }
  .identity-greeting { font-size: 21px; }
  .identity-name { font-size: clamp(59px, 17vw, 110px); }
  .identity-description { top: 285px; bottom: auto; max-width: 78%; }
  .identity-description p { font-size: 17px; margin-top: 10px; }
  .identity-description .micro-label, .placeholder-label { display: none; }
  .fresco-sky { width: 155%; top: 310px; right: -70%; opacity: .44; }
  .fresco-sun { width: 86px; top: 376px; left: auto; right: 12%; }
  .fresco-landscape { width: 118%; right: -18%; bottom: 145px; }
  .identity-action { bottom: 85px; gap: 16px; }
  .portrait-caption { max-width: 110px; font-size: 10px; line-height: 1.8; }
  .identity-baseline { font-size: 8px; bottom: 28px; }
  .primary-nav { background: #505149; }
  .work-section { padding-top: 70px; }
  .about-section { min-height: 0; padding: 70px 0 65px; }
  .about-layout { display: flex; flex-direction: column; }
  .about-label { order: 0; margin-bottom: 0; }
  .about-main { order: 1; padding-top: clamp(290px, 78vw, 510px); }
  .about-main h2 { font-size: clamp(43px, 10.5vw, 70px); }
  .about-sculpture { width: min(100%, 640px); top: 117px; bottom: auto; left: -7%; }
  .about-sculpture::before { width: 45%; top: -4%; }
  .about-main>p { margin-top: 27px; font-size: 15px; }
  .notes-heading h2 { font-size: clamp(36px, 9vw, 60px); }
}
@media (max-width: 360px) {
  .portrait-caption { display: none; }
  .identity-name { font-size: 57px; }
  .about-main h2 { font-size: 39px; }
}

/* Reading details continues the same limestone palette as the main page. */
html { scrollbar-gutter: stable; }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 110; padding: 14px 20px; background: var(--paper); color: #34372f; border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.identity-baseline>a { display: inline-flex; align-items: center; gap: 12px; min-height: 28px; }
.identity-baseline>a span { transition: transform .2s; }
.identity-baseline>a:hover span { transform: translateY(4px); }
.portrait-caption { text-wrap: balance; }
.feature-surface { transition: border-color .25s; }
.feature-surface:focus-within { border-color: var(--peach); }
.feature-action, .text-action { min-height: 44px; }
.feature-action, .media-corner { transition: background .25s, color .25s, border-color .25s; }
.media-corner { background: #3a3d34ed; color: #f3eddf; }
.feature-main-media:hover .media-corner { background: #dfc391; color: #34372f; }
.project-card-button { border-radius: 18px; }
.project-dialog { color: #34372f; background: #e5dfd2; border-color: #9b9687; overflow: hidden; }
.project-dialog::backdrop { background: #292c26b8; backdrop-filter: blur(9px); }
.dialog-scroll { overscroll-behavior: contain; max-height: min(858px, calc(100svh - 34px)); scrollbar-color: #898774 #ded8c9; }
.dialog-hero { background: linear-gradient(125deg, var(--dialog-accent), #d5cebf); }
.dialog-hero h2 { letter-spacing: -.055em; }
.dialog-close { width: 44px; height: 44px; background: #e5dfd2; border-color: #a8a391; }
.dialog-facts { border-color: #bab5a5; }
.dialog-facts span, .dialog-story h3, .dialog-bottom span { color: #65685a; }
.dialog-story p { color: #44483d; }
.project-dialog button:focus-visible, .project-dialog a:focus-visible, .gallery-viewport:focus-visible { outline: 2px solid #746032; outline-offset: 4px; }
.dialog-gallery { margin-top: 38px; scroll-margin-top: 22px; }
.gallery-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.gallery-heading .micro-label { color: #696955; }
.gallery-heading h3 { margin: 8px 0 0; font: 600 28px/1.3 var(--display); letter-spacing: -.035em; }
.gallery-list { display: grid; gap: 36px; }
.gallery-frame { margin: 0; }
.gallery-item-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.gallery-item-heading strong { font-size: 16px; font-weight: 650; }
.gallery-toggle { flex-shrink: 0; min-height: 44px; padding: 10px 16px; background: transparent; border: 1px solid #98947f; border-radius: 30px; color: #45483c; font-size: 12px; cursor: pointer; }
.gallery-toggle span { margin-left: 14px; }
.gallery-toggle:hover, .gallery-toggle[aria-pressed=true] { background: #505149; border-color: #505149; color: #f3eddf; }
.gallery-viewport { overflow: visible; border: 1px solid #b9b4a4; border-radius: 12px; background: #f2eee5; }
.gallery-viewport img { display: block; width: 100%; height: auto; max-width: none; }
.gallery-viewport img { -webkit-user-drag: none; user-select: none; cursor: grab; }
.gallery-viewport img.is-dragging { cursor: grabbing; }
.gallery-caption { font-size: 11px; color: #65685a; line-height: 1.8; margin: 12px 0 0; }
.project-cover { display: block; width: 86%; height: 86%; object-fit: cover; object-position: top; border-radius: 10px; box-shadow: 0 24px 44px #17201d4a; }
.dialog-project-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 22px; align-items: center; margin-top: 40px; padding-top: 26px; border-top: 1px solid #bab5a5; }
.dialog-project-nav button { padding: 12px 0; border: 0; background: none; color: #44483d; text-align: left; cursor: pointer; }
.dialog-project-nav button:last-child { text-align: right; }
.dialog-project-nav button>span { display: block; font-size: 11px; color: #65685a; margin-bottom: 8px; }
.dialog-project-nav strong { font-size: 17px; font-weight: 600; }
.dialog-project-nav button:hover strong { text-decoration: underline; text-underline-offset: 5px; }
.dialog-position { font: 10px var(--mono); color: #737563; }
@media (hover: hover) and (pointer: fine) {
  .feature-surface:hover { border-color: #b7ab8d; }
}
@media (max-width: 700px) {
  .identity-hero { height: 840px; min-height: 840px; }
  .fresco-landscape { bottom: 135px; }
  .identity-action { bottom: 84px; gap: 16px; }
  .portrait-caption { max-width: 130px; }
  .identity-baseline { padding-top: 13px; bottom: 20px; }
  .identity-baseline>a { font-size: 7px; gap: 7px; }
  .primary-nav { padding: 10px 20px 18px; border-bottom: 1px solid #928c7e; box-shadow: 0 22px 28px #34362e30; }
  .primary-nav a { min-height: 48px; border-color: #928c7e55; }
  .gallery-list { gap: 30px; }
  .gallery-item-heading { align-items: flex-start; }
  .gallery-item-heading strong { padding-top: 10px; font-size: 15px; }
  .project-cover { width: 90%; height: 88%; }
  .menu-toggle { height: 44px; }
  .project-index { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #b1a68d transparent; }
  .project-index a { flex: 0 0 auto; min-width: 152px; min-height: 52px; }
  .project-index a:first-child { padding-left: 10px; }
  .gallery-heading { align-items: flex-end; gap: 10px; }
  .gallery-heading h3 { font-size: 23px; }
  .gallery-heading .micro-label { font-size: 9px; }
  .gallery-toggle { font-size: 11px; padding-inline: 12px; }
  .gallery-toggle span { margin-left: 5px; }
  .dialog-gallery { margin-top: 28px; }
  .dialog-project-nav { gap: 12px; }
  .dialog-project-nav strong { font-size: 13px; }
  .dialog-position { font-size: 9px; }
}
@media (max-width: 360px) {
  .brand>span:last-child { font-size: 8px; letter-spacing: .015em; }
  .site-header { gap: 7px; }
  .header-action { font-size: 9px; padding-inline: 8px; }
  .gallery-heading { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .identity-baseline>a span, .feature-surface, .feature-action, .media-corner { transition: none; }
  .identity-baseline>a:hover span { transform: none; }
}