/* Designs by Discoe: page layout only. Components come from bundle.css, values from tokens.css. */

html { background: var(--lilac-900); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { min-height: 100vh; overflow-x: clip; }
main { overflow-x: clip; } /* swirls hide off the edge without adding a sideways scroll */
img { max-width: 100%; }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: var(--space-3); top: -80px; z-index: 50;
  padding: 12px 24px; border-radius: var(--radius-pill);
  background: var(--orange-500); color: var(--on-orange); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--space-3); }

/* ---------- Welcome! ---------- */
.stage { position: relative; overflow: hidden; padding-top: var(--space-8); }
.stage__inner { position: relative; padding-bottom: var(--space-6); }
@media (max-width: 760px) { .stage { padding-top: var(--space-7); } }

/* ---------- About: rises from the bottom edge of the first screen ---------- */
.about { position: relative; margin-top: calc(var(--space-6) * -1); }
.about__panel {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--space-6); align-items: center;
  padding: var(--space-6);
}
.about__copy { display: grid; gap: var(--space-3); }
.about__portrait { transform: rotate(2deg); }
@media (max-width: 760px) {
  .about { margin-top: calc(var(--space-5) * -1); }
  .about__panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5) var(--space-4); }
  .about__portrait { max-width: 200px; }
}

/* ---------- Tab row and panels ---------- */
.sections { padding-top: var(--space-8); padding-bottom: var(--space-7); scroll-margin-top: var(--space-4); outline: none; }
@media (max-width: 760px) { .sections { padding-top: var(--space-7); } }
.dd-tabs { margin-bottom: var(--space-5); }
.tabpanel { display: grid; gap: var(--space-5); outline: none; padding-top: var(--space-3); }
.tabpanel > .dd-plate { justify-self: start; }
/* Small hint lines use the crumb style on a dusk pill, so orange stays legible on the gradient */
.hint { justify-self: start; margin: 0; padding: 12px 24px; border-radius: var(--radius-pill); background: var(--dusk-800); color: var(--orange-300); font: 600 17px/24px var(--font-body); box-shadow: var(--shadow-lift); }
.dd-panel--organic { padding: var(--space-6); }
@media (max-width: 760px) { .dd-panel--organic, .dd-panel { padding: var(--space-5) var(--space-4); } }

/* ---------- Gallery ---------- */
.gallery__head { display: grid; gap: var(--space-4); justify-items: start; }
.gallery__back { margin-top: var(--space-2); }
.folder-panel { padding: var(--space-6) var(--space-5); }
.folder-panel .hint { margin: 0 0 var(--space-3); padding: 0; background: none; box-shadow: none; border-radius: 0; }
.dd-folder { cursor: pointer; }
.dd-crumbs a { cursor: pointer; }

/* ---------- Resume, contact, footer ---------- */
.resume .dd-resume__rows dt { overflow-wrap: anywhere; }
.contact { padding: var(--space-6); }
.dd-contact { justify-items: start; }
.site-footer { display: grid; gap: var(--space-2); padding-top: var(--space-5); padding-bottom: var(--space-7); color: var(--orange-300); }
.site-footer p { margin: 0; }

/* ---------- Slideshow dialog ---------- */
.slideshow-dialog {
  width: min(760px, calc(100vw - 2 * var(--space-3))); max-height: calc(100dvh - 2 * var(--space-3));
  margin: auto; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible;
}
.slideshow-dialog::backdrop { background: rgba(42, 19, 70, 0.78); }
.slideshow-dialog .dd-slideshow { max-height: calc(100dvh - 2 * var(--space-3)); overflow: auto; }
.slideshow-dialog :focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-outer), 0 0 0 6px var(--focus-inner), 0 0 0 8px var(--focus-outer);
}
.slideshow__status { display: grid; gap: var(--space-2); justify-items: center; }
.dd-slideshow__ph { flex-direction: column; gap: var(--space-2); text-align: center; padding: var(--space-4); }
.dd-slideshow__ph small { font: 600 15px/20px var(--font-body); }
.dd-slideshow__stage figure { margin: 0; }
.dd-slideshow__stage figcaption { margin-top: var(--space-3); text-align: center; color: var(--dusk-800); font: 600 17px/24px var(--font-body); }
.dd-dots button:focus-visible { box-shadow: 0 0 0 3px var(--focus-outer), 0 0 0 6px var(--focus-inner), 0 0 0 8px var(--focus-outer); }
.dd-dots button { min-width: 14px; }